/* Member dashboard in the AMCH language: ink sidebar, paper workspace,
   diagonal corners, green accents, HUD grid on hero tiles. */
:root {
  --ink: #0F1011;
  --ink-2: #17191B;
  --paper: #F5F5F7;
  --plate: #EDEEF0;
  --white: #FFFFFF;
  --gray: #303235;
  --green: #1DE227;
  --green-h: #18AB1F;
  --green-a: #118B17;
  --green-d: #08A110;
  --mint: #E4F7E5;
  --red: #E5484D;
  --ink-70: rgba(15, 16, 17, .72);
  --ink-55: rgba(15, 16, 17, .55);
  --ink-40: rgba(15, 16, 17, .4);
  --line: rgba(15, 16, 17, .1);
  --paper-80: rgba(245, 245, 247, .8);
  --paper-60: rgba(245, 245, 247, .6);
  --paper-45: rgba(245, 245, 247, .45);
  --paper-line: rgba(245, 245, 247, .14);
  --head: "RF Dewi Expanded", "Gilroy", sans-serif;
  --body: "Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 24px 0 24px 0;
  --r-s: 14px 0 14px 0;
  --grid: linear-gradient(rgba(29, 226, 39, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 226, 39, .08) 1px, transparent 1px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.5 var(--body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.muted { color: var(--ink-55); }
.small { font-size: 14px; }

/* ===== Shell ===== */
.cab { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.cab-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 36px; padding: 28px 18px 20px; background: var(--ink); color: var(--paper); }
.cab-brand { display: flex; align-items: center; gap: 12px; padding: 0 10px; text-decoration: none; }
.cab-brand .logo { width: 92px; height: auto; color: var(--paper); }
.cab-brand span { font-size: 14px; color: var(--paper-60); padding-left: 12px; border-left: 1px solid var(--paper-line); }
.cab-nav { display: grid; gap: 4px; }
.cab-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-s); color: var(--paper-60); text-decoration: none; font-weight: 500; transition: background-color .3s, color .3s; }
.cab-nav a:hover { color: var(--paper); background: rgba(245, 245, 247, .06); }
.cab-nav a.is-active { color: var(--ink); background: var(--green); }
.cab-me { margin-top: auto; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px 10px 0; border-top: 1px solid var(--paper-line); }
.cab-me b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-me small { display: block; font-size: 12px; color: var(--paper-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px 0 12px 0; background: var(--green); color: var(--ink); font: 700 16px/1 var(--head); }
.cab-out { padding: 8px; border: 1px solid var(--paper-line); border-radius: 8px; background: none; color: var(--paper-60); cursor: pointer; }
.cab-out:hover { color: var(--paper); border-color: var(--paper-45); }
.cab-out .ico { width: 16px; height: 16px; }
.cab-main { min-width: 0; padding: 36px 44px 72px; max-width: 1320px; }

.cab-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.cab-head h1 { font-size: 32px; line-height: 1.15; }
.cab-head p { margin-top: 8px; color: var(--ink-55); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 12px; }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 40px 0 16px; }
.section-title h2 { font-size: 20px; }
.section-title a { font-size: 14px; color: var(--green-d); text-decoration: none; font-weight: 600; }

.cab-flash { margin-bottom: 20px; padding: 12px 16px; border-radius: var(--r-s); background: var(--mint); border: 1px solid rgba(8, 161, 16, .25); }
.cab-flash--alert { background: #FDECEC; border-color: rgba(229, 72, 77, .3); }

/* ===== Tiles ===== */
.tile { position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
.tile--dark { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tile--dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grid); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000, transparent 75%); }
.tile--dark > * { position: relative; z-index: 1; }
.tile--accent { background: var(--green); border-color: var(--green); }
.tile h3 { font-size: 18px; line-height: 1.3; }
.hud-k { display: block; font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 12px; }
.tile--dark .hud-k { color: var(--green); }
.grid { display: grid; gap: 16px; }
.grid--dash { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: grid; gap: 16px; align-content: start; }

/* ===== Buttons (same diagonal fill as the landings) ===== */
.bx { --h: 52px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; height: var(--h); padding: 0 24px 0 calc(var(--h) + 14px);
  font: 500 16px/1 var(--body); text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: 16px 0 16px 0; cursor: pointer;
  transition: color .45s var(--ease), border-color .45s var(--ease); }
.bx__fill { position: absolute; left: 5px; top: 5px; bottom: 5px; width: calc(var(--h) - 10px); border-radius: 12px 0 12px 0; z-index: -1; transition: width .55s var(--ease); }
.bx__arr { position: absolute; left: calc(var(--h) / 2 - 10px); top: 50%; width: 20px; height: 20px; margin-top: -10px; transition: transform .55s var(--ease); }
.bx:hover .bx__fill, .bx:focus-visible .bx__fill { width: calc(100% - 10px); }
.bx:hover .bx__arr { transform: translateX(5px); }
.bx--green { background: var(--green); color: var(--ink); }
.bx--green .bx__fill { background: var(--ink); }
.bx--green .bx__arr { color: var(--green); }
.bx--green:hover { color: var(--paper); }
.bx--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.bx--ghost .bx__fill { background: var(--ink); }
.bx--ghost .bx__arr { color: var(--paper); }
.bx--ghost:hover { color: var(--paper); }
.tile--dark .bx--ghost, .banner--dark .bx--ghost { border-color: var(--paper-line); color: var(--paper); }
.tile--dark .bx--ghost .bx__fill, .banner--dark .bx--ghost .bx__fill { background: var(--paper); }
.tile--dark .bx--ghost .bx__arr, .banner--dark .bx--ghost .bx__arr { color: var(--ink); }
.tile--dark .bx--ghost:hover, .banner--dark .bx--ghost:hover { color: var(--ink); }
.bx--ink { background: var(--ink); color: var(--paper); }
.bx--ink .bx__fill { background: var(--paper); }
.bx--ink .bx__arr { color: var(--ink); }
.bx--ink:hover { color: var(--ink); }
.bx--block { width: 100%; justify-content: center; }
.bx--small { --h: 44px; font-size: 15px; }
.bx[disabled], .bx.is-disabled { opacity: .45; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.link { color: var(--green-d); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ===== Banner ===== */
.banner { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 32px 36px; border-radius: var(--r); margin-bottom: 16px; }
.banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grid); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 50% 90% at 100% 50%, #000, transparent 80%); mask-image: radial-gradient(ellipse 50% 90% at 100% 50%, #000, transparent 80%); }
.banner > * { position: relative; z-index: 1; }
.banner h2 { font-size: 26px; line-height: 1.2; }
.banner p { margin-top: 10px; max-width: 640px; }
.banner--green { background: var(--green); color: var(--ink); }
.banner--green::after { background-image: linear-gradient(rgba(15, 16, 17, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 16, 17, .08) 1px, transparent 1px); }
.banner--green p { color: var(--ink-70); }
.banner--dark { background: var(--ink); color: var(--paper); }
.banner--dark p { color: var(--paper-60); }
.banner--light { background: var(--white); border: 1px solid var(--line); }
.banner--light p { color: var(--ink-70); }
.banner-media { width: 160px; height: 120px; object-fit: cover; border-radius: var(--r-s); }
.banner-body { display: grid; gap: 20px; }

/* ===== Webinar ===== */
.webinar { display: flex; flex-direction: column; gap: 22px; min-height: 100%; }
.webinar h2 { font-size: 26px; line-height: 1.2; }
.webinar-desc { color: var(--paper-60); max-width: 560px; }
.when { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.when b { display: block; font: 700 16px/1.2 var(--head); }
.when small { display: block; color: var(--paper-45); font-size: 13px; margin-top: 4px; }
.when > div { padding-left: 14px; border-left: 1px solid var(--paper-line); }
.countdown { display: flex; gap: 10px; }
.countdown span { min-width: 74px; padding: 14px 10px 12px; text-align: center; border: 1px solid var(--paper-line); border-radius: 12px 0 12px 0; background: rgba(245, 245, 247, .04); }
.countdown b { display: block; font: 700 30px/1 var(--head); font-variant-numeric: tabular-nums; color: var(--paper); }
.countdown small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-45); }
.live-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(29, 226, 39, .15); color: var(--green); font-size: 13px; font-weight: 600; }
.live-pill i, .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(29, 226, 39, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(29, 226, 39, 0); } }
.webinar .actions { margin-top: auto; }
.hint-line { font-size: 13px; color: var(--paper-45); }

/* ===== Progress & courses ===== */
.progress { height: 6px; border-radius: 6px; background: var(--plate); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 6px; background: var(--green); transition: width .8s var(--ease); }
.tile--dark .progress { background: rgba(245, 245, 247, .1); }
.progress-row { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-55); }
.progress-row .progress { flex: 1; }
.continue { display: flex; flex-direction: column; gap: 16px; }
.continue h3 { font-size: 20px; }
.course-card { display: flex; flex-direction: column; gap: 14px; padding: 0; text-decoration: none; transition: border-color .3s, transform .4s var(--ease); }
.course-card:hover { border-color: var(--green-d); transform: translateY(-2px); }
.course-cover { position: relative; aspect-ratio: 16 / 8; background: var(--ink); overflow: hidden; }
.course-cover img { width: 100%; height: 100%; object-fit: cover; }
.course-cover::after { content: ""; position: absolute; inset: 0; background-image: var(--grid); background-size: 24px 24px; }
.course-cover .mark { position: absolute; left: 22px; bottom: 18px; width: 34px; height: 34px; z-index: 1; }
.course-body { display: grid; gap: 10px; padding: 0 22px 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--plate); font-size: 12px; font-weight: 600; color: var(--ink-70); }
.chip--green { background: var(--mint); color: var(--green-d); }

/* Course outline */
.outline { display: grid; gap: 16px; }
.outline-section h3 { font-size: 15px; margin-bottom: 8px; color: var(--ink-55); font-family: var(--body); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.lesson-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--white); text-decoration: none; transition: border-color .3s; }
.lesson-row + .lesson-row { margin-top: 8px; }
.lesson-row:hover { border-color: var(--green-d); }
.lesson-row.is-current { border-color: var(--green); background: #F2FBF2; }
.check { width: 24px; height: 24px; display: grid; place-items: center; border: 1.5px solid var(--ink-40); border-radius: 6px 0 6px 0; }
.check.is-done { background: var(--green); border-color: var(--green); }
.check .ico { width: 14px; height: 14px; stroke-width: 2.4; }
.lesson-row small { color: var(--ink-55); font-size: 13px; }

/* Lesson page */
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose { font-size: 17px; line-height: 1.65; }
.prose h1, .prose h2 { font-size: 22px; margin: 24px 0 10px; }
.prose a { color: var(--green-d); }
.prose blockquote { margin: 16px 0; padding-left: 16px; border-left: 3px solid var(--green); color: var(--ink-70); }
.files { display: grid; gap: 8px; }
.file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-s); text-decoration: none; }
.file:hover { border-color: var(--green-d); }
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sticky { position: sticky; top: 24px; }

/* ===== Video ===== */
.video-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-s); overflow: hidden; background: var(--ink); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.thumb::before { content: ""; position: absolute; inset: 0; background-image: var(--grid); background-size: 22px 22px; }
.thumb .play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; display: grid; place-items: center; border-radius: 16px 0 16px 0; background: var(--green); color: var(--ink); transition: transform .4s var(--ease); z-index: 1; }
.thumb .play svg { width: 22px; height: 22px; fill: currentColor; }
.video-card:hover .thumb img { transform: scale(1.04); }
.video-card:hover .play { transform: scale(1.08); }
.thumb .duration { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: rgba(15, 16, 17, .8); color: var(--paper); font-size: 12px; font-weight: 600; }
.video-card h3 { font-size: 16px; line-height: 1.35; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filters a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 14px; font-weight: 500; background: var(--white); }
.filters a.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ===== News ===== */
.news-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; transition: border-color .3s; }
.news-card:hover { border-color: var(--green-d); }
.news-card time, .meta { font-size: 13px; color: var(--ink-55); }
.news-card h3 { font-size: 17px; line-height: 1.35; }
.news-card p { font-size: 15px; color: var(--ink-70); }
.news-cover { aspect-ratio: 16 / 7; object-fit: cover; width: 100%; border-radius: var(--r); margin-bottom: 24px; }
.article { max-width: 760px; }
.article h1 { font-size: 34px; line-height: 1.15; margin-bottom: 12px; }

/* ===== Small cards ===== */
.book-card { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px; align-items: center; }
.mini-book { aspect-ratio: 2 / 3; border-radius: 3px 10px 10px 3px; background: var(--ink); background-image: var(--grid); background-size: 12px 12px; display: grid; align-content: end; padding: 8px; color: var(--paper); font: 700 9px/1.1 var(--head); box-shadow: 0 10px 24px rgba(0, 0, 0, .2); }
.survey form { display: grid; gap: 10px; margin-top: 14px; }
select, input[type="email"], input[type="text"] { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font: 400 15px/1.3 var(--body); color: var(--ink); }
select:focus, input:focus { outline: none; border-color: var(--green-d); box-shadow: 0 0 0 3px rgba(29, 226, 39, .15); }
.empty { padding: 36px; text-align: center; color: var(--ink-55); border: 1px dashed var(--line); border-radius: var(--r); }
.list-plain { display: grid; gap: 12px; }
.past { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 18px; align-items: center; }

/* ===== Auth ===== */
.cab-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--ink); background-image: var(--grid); background-size: 32px 32px; }
.cab-auth-card { width: min(440px, 100%); display: grid; gap: 18px; padding: 36px; border-radius: 28px 0 28px 0; background: var(--white); }
.cab-auth-logo { width: 110px; height: auto; color: var(--ink); }
.cab-auth h1 { font-size: 24px; line-height: 1.2; }
.cab-form { display: grid; gap: 12px; }
.cab-dev { padding: 12px 14px; border-radius: 10px; background: #FFF7E6; font-size: 14px; }
.cab-dev a { color: var(--green-d); font-weight: 600; }

@media (max-width: 1180px) {
  .grid--dash, .lesson-layout { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky { position: static; }
}
@media (max-width: 860px) {
  .cab { grid-template-columns: 1fr; }
  .cab-side { position: sticky; z-index: 20; height: auto; flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; overflow-x: auto; }
  .cab-brand span, .cab-me div, .cab-nav a span { display: none; }
  .cab-brand .logo { width: 76px; }
  .cab-nav { display: flex; gap: 2px; }
  .cab-nav a { padding: 10px; }
  .cab-me { margin: 0 0 0 auto; padding: 0; border: 0; grid-template-columns: auto auto; }
  .cab-main { padding: 24px 16px 56px; }
  .cab-head h1 { font-size: 26px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .banner { grid-template-columns: 1fr; padding: 26px 22px; }
  .banner-media { display: none; }
  .tile { padding: 22px; }
  .countdown span { min-width: 62px; }
  .countdown b { font-size: 24px; }
  .past { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Cookie consent (shared partial with the landings) */
.consent-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  padding: 16px 20px; background: rgba(15, 16, 17, .94); color: var(--paper-80); border-radius: 16px 0 16px 0; font-size: 14px; }
.consent-bar[hidden] { display: none; }
.consent-bar p { flex: 1 1 300px; }
.consent-actions { display: flex; gap: 10px; }
.consent-bar .btn { padding: 10px 16px; border: 1px solid var(--paper-line); border-radius: 10px 0 10px 0; background: none; color: var(--paper); font: 500 14px/1 var(--body); cursor: pointer; }
.consent-bar .btn-primary { background: var(--green); border-color: var(--green); color: var(--ink); }

/* ===== App promo banner ===== */
.app-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 24px; margin-top: 40px; padding: 36px 40px 0; border-radius: var(--r); }
.app-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grid); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 90% 60%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 90% at 90% 60%, #000, transparent 75%); }
.app-banner > * { position: relative; z-index: 1; }
.app-banner__copy { display: grid; gap: 14px; padding-bottom: 36px; }
.app-banner h2 { font-size: 26px; line-height: 1.2; max-width: 560px; }
.app-banner p { max-width: 560px; }
.app-banner.banner--dark .hud-k { color: var(--green); }
.app-banner.banner--green .hud-k { color: var(--ink-70); }
.store-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 14px 0 14px 0; background: var(--paper); color: var(--ink); text-decoration: none; font: 600 16px/1.05 var(--body); border: 1px solid transparent; transition: background-color .3s, transform .3s var(--ease); }
.store-btn:hover { background: var(--white); transform: translateY(-2px); }
.store-btn svg { width: 24px; height: 24px; fill: currentColor; }
.store-btn small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-55); }
.banner--light .store-btn, .banner--green .store-btn { background: var(--ink); color: var(--paper); }
.banner--light .store-btn small, .banner--green .store-btn small { color: var(--paper-60); }
.app-banner__media { align-self: end; display: flex; justify-content: center; }
.app-banner__media img { max-height: 260px; width: auto; }
.phone { width: 170px; height: 250px; padding: 10px; border-radius: 28px 28px 0 0; background: #2A2C2F; box-shadow: 0 -10px 40px rgba(29, 226, 39, .25); }
.phone__screen { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 18px 14px; border-radius: 20px 20px 0 0; background: var(--ink); background-image: var(--grid); background-size: 16px 16px; }
.phone__mark { width: 26px; height: 26px; }
.phone__line { height: 8px; width: 80%; border-radius: 4px; background: rgba(245, 245, 247, .25); }
.phone__line--short { width: 50%; background: rgba(245, 245, 247, .14); }
.phone__chart { display: flex; align-items: flex-end; gap: 6px; height: 80px; margin-top: 8px; }
.phone__chart i { flex: 1; border-radius: 3px 3px 0 0; background: var(--green); opacity: .85; animation: grow 1.2s var(--ease) both; }
.phone__chart i:nth-child(2) { animation-delay: .08s; } .phone__chart i:nth-child(3) { animation-delay: .16s; } .phone__chart i:nth-child(4) { animation-delay: .24s; }
.phone__chart i:nth-child(5) { animation-delay: .32s; } .phone__chart i:nth-child(6) { animation-delay: .4s; }
@keyframes grow { from { transform: scaleY(0); transform-origin: bottom; } }
.phone__pill { align-self: flex-start; padding: 5px 10px; border-radius: 8px 0 8px 0; background: var(--green); color: var(--ink); font: 700 11px/1 var(--head); }
@media (max-width: 860px) {
  .app-banner { grid-template-columns: 1fr; padding: 26px 22px 0; }
  .app-banner__media { display: none; }
  .app-banner__copy { padding-bottom: 26px; }
}

/* News cards with images and source labels */
.news-card--media { padding: 0; }
.news-card__img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; background: var(--plate); }
.news-card--media .news-card__body { padding: 0 24px 24px; }
.news-card__body { display: grid; gap: 10px; }
.news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-55); }
.prose h3 { font-size: 17px; margin: 22px 0 8px; }
.prose h3 + p a, .prose a { font-weight: 600; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 4px; }
.prose blockquote { background: var(--mint); padding: 14px 16px; border-radius: 0 12px 12px 0; }
.prose p + p, .prose ul + p, .prose ol + p, .prose blockquote + h3 { margin-top: 12px; }
.prose ul, .prose ol { margin: 10px 0; }

/* ===== Lesson widgets ===== */
.widget { margin: 24px 0; padding: 22px; border-radius: 20px 0 20px 0; background: var(--ink); color: var(--paper); font-size: 15px; line-height: 1.5; position: relative; overflow: hidden; }
.widget::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grid); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 100% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 100% 0%, #000, transparent 75%); }
.widget > * { position: relative; z-index: 1; }
.widget-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: 700 17px/1.3 var(--head); }
.widget-badge { padding: 4px 9px; border-radius: 7px 0 7px 0; background: var(--green); color: var(--ink); font: 700 10px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.widget-note { margin-top: 14px !important; font-size: 12px; color: var(--paper-45); }
.widget .w-callout { margin-top: 16px; color: var(--paper-80); }
.widget b { color: var(--paper); }
.widget .chip { background: rgba(245, 245, 247, .1); color: var(--paper-80); }
.widget .bx--ink { background: var(--paper); color: var(--ink); }
.widget .bx--ink .bx__fill { background: var(--green); }
.widget .bx--ink .bx__arr { color: var(--ink); }

/* Years to IPO */
.w-years { display: grid; gap: 14px; padding-bottom: 26px; position: relative; }
.w-years__row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; }
.w-years__label { font-size: 13px; color: var(--paper-60); }
.w-bar { position: relative; height: 34px; border-radius: 8px; background: rgba(245, 245, 247, .06); }
.w-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px; background: rgba(245, 245, 247, .35); transition: width 1.6s var(--ease); }
.w-bar--green i { background: linear-gradient(90deg, rgba(29, 226, 39, .35), var(--green)); transition-delay: .3s; }
.widget.is-in .w-bar i { width: var(--w); }
.w-bar b { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink); }
.w-bar:not(.w-bar--green) b { color: var(--paper); }
.w-window { position: absolute; top: -6px; bottom: -6px; left: var(--from); right: 0; border: 1.5px dashed var(--green); border-radius: 10px; opacity: 0; transition: opacity .6s 1.6s; }
.widget.is-in .w-window { opacity: 1; }
.w-window em { position: absolute; right: 8px; top: -22px; font: 600 11px/1 var(--body); font-style: normal; color: var(--green); letter-spacing: .08em; text-transform: uppercase; }
.w-stages { position: relative; margin-left: 76px; height: 16px; }
.w-stages span { position: absolute; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--paper-45); opacity: 0; transition: opacity .4s calc(.6s + var(--d) * .15s); }
.widget.is-in .w-stages span { opacity: 1; }

/* Valuation chart */
.w-chart { width: 100%; height: auto; overflow: visible; }
.w-grid { stroke: rgba(245, 245, 247, .1); stroke-dasharray: 3 5; }
.w-axis { fill: var(--paper-60); font: 500 11px var(--body); }
.w-axis--muted { fill: var(--paper-45); }
.w-zone { fill: rgba(29, 226, 39, .08); stroke: rgba(29, 226, 39, .4); stroke-dasharray: 4 4; }
.w-zone-label { fill: var(--green); paint-order: stroke; stroke: var(--ink); stroke-width: 3px; font: 600 10px var(--body); letter-spacing: .08em; text-transform: uppercase; }
.w-line { fill: none; stroke: var(--green); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(29, 226, 39, .6)); }
.widget.is-in .w-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--ease); }
.w-area { opacity: 0; transition: opacity 1s 1.4s; }
.widget.is-in .w-area { opacity: 1; }
.w-point circle { fill: var(--ink); stroke: var(--green); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s var(--ease) calc(.3s + var(--d) * .25s); }
.widget.is-in .w-point circle { transform: scale(1); }
.w-point__value { fill: var(--paper); font: 700 12px var(--head); opacity: 0; transition: opacity .4s calc(.5s + var(--d) * .25s); }
.widget.is-in .w-point__value { opacity: 1; }
.w-point:hover circle, .w-point:focus circle { fill: var(--green); }

/* SPV flow */
.w-toggle { display: inline-flex; padding: 4px; border-radius: 12px 0 12px 0; background: rgba(245, 245, 247, .08); margin-bottom: 10px; }
.w-toggle button { padding: 8px 14px; border: 0; border-radius: 9px 0 9px 0; background: none; color: var(--paper-60); font: 600 13px var(--body); cursor: pointer; }
.w-toggle button.is-active { background: var(--green); color: var(--ink); }
.w-flow { width: 100%; height: auto; }
.w-flow__wire { fill: none; stroke: rgba(29, 226, 39, .35); stroke-width: 1.5; stroke-dasharray: 4 5; }
.w-flow__node rect, .w-flow__spv rect, .w-flow__company rect { fill: var(--ink-2); stroke: rgba(245, 245, 247, .2); }
.w-flow__spv rect { stroke: var(--green); stroke-width: 2; }
.w-flow text { fill: var(--paper); font: 600 12px var(--body); }
.w-flow__spv text:first-of-type, .w-flow__company text:first-of-type { font: 700 15px var(--head); }
.w-flow text.w-flow__sub { fill: var(--paper-45); font-size: 11px; font-weight: 500; }
.w-flow__coin { fill: var(--green); filter: drop-shadow(0 0 4px rgba(29, 226, 39, .8)); }
.w-flow__share { fill: var(--paper); }
.w-spv[data-mode="invest"] .w-flow__coin--exit, .w-spv[data-mode="exit"] .w-flow__coin--invest { display: none; }
.w-legend p { color: var(--paper-80); }
.w-dot, .w-square { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--green); }
.w-square { border-radius: 2px; background: var(--paper); margin: 0 4px; }

/* Sliders & results */
.w-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 24px; margin-bottom: 18px; }
.w-range { display: grid; gap: 8px; font-size: 13px; color: var(--paper-60); }
.w-range output { float: right; color: var(--green); font: 700 14px var(--head); }
.w-range input { width: 100%; accent-color: var(--green); }
.w-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.w-result div { padding: 12px 14px; border: 1px solid var(--paper-line); border-radius: 12px 0 12px 0; }
.w-result small { display: block; font-size: 12px; color: var(--paper-45); }
.w-result b { display: block; margin-top: 4px; font: 700 22px/1.1 var(--head); color: var(--green); font-variant-numeric: tabular-nums; }

/* Fee waterfall */
.w-waterfall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; }
.w-fall { display: grid; gap: 6px; text-align: center; }
.w-fall__track { position: relative; height: 170px; border-bottom: 1px solid var(--paper-line); }
.w-fall__track i { position: absolute; left: 14%; right: 14%; border-radius: 6px 6px 2px 2px; background: rgba(245, 245, 247, .45); transition: bottom .6s var(--ease), height .6s var(--ease); }
.w-fall--cost .w-fall__track i { background: #FF6B5E; }
.w-fall--gain .w-fall__track i { background: rgba(29, 226, 39, .55); }
.w-fall--total .w-fall__track i { background: var(--green); box-shadow: 0 0 18px rgba(29, 226, 39, .45); }
.w-fall b { font: 700 13px var(--head); font-variant-numeric: tabular-nums; }
.w-fall small { font-size: 11px; color: var(--paper-45); }

/* Deal steps */
.w-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.w-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.w-steps__list li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--paper-line); border-radius: 10px 0 10px 0; cursor: pointer; transition: border-color .3s, background-color .3s; }
.w-steps__list li small { color: var(--paper-45); font-size: 12px; }
.w-steps__num { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px 0 7px 0; background: rgba(245, 245, 247, .08); font: 700 12px var(--head); transition: background-color .3s, color .3s; }
.w-steps__list li.is-done .w-steps__num { background: rgba(29, 226, 39, .25); color: var(--green); }
.w-steps__list li.is-current { border-color: var(--green); background: rgba(29, 226, 39, .08); }
.w-steps__list li.is-current .w-steps__num { background: var(--green); color: var(--ink); }
.w-steps__detail { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 14px 0 14px 0; background: rgba(245, 245, 247, .05); }
.w-steps__detail > div.is-in { animation: rise .5s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.w-steps__detail b { font: 700 18px var(--head); }
.w-steps__detail p { margin-top: 6px; color: var(--paper-80); }
.w-steps__detail .actions { margin-top: auto; }
.w-rofr { margin-top: 12px; display: grid; gap: 8px; }
.w-rofr__bar { height: 8px; border-radius: 6px; background: rgba(245, 245, 247, .1); overflow: hidden; }
.w-rofr__bar i { display: block; height: 100%; width: 0; background: var(--green); }
.is-in .w-rofr__bar i { animation: fill 1.5s linear forwards; }
@keyframes fill { to { width: 100%; } }
.w-rofr small { color: var(--paper-45); font-size: 12px; }

/* Exit timeline */
.w-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 30px; }
.w-track__line { position: absolute; left: 10%; right: 10%; top: 10px; height: 2px; background: var(--paper-line); }
.w-track__line i { display: block; height: 100%; width: 0; background: var(--green); box-shadow: 0 0 10px rgba(29, 226, 39, .6); }
.widget.is-in .w-track__line i { width: 100%; transition: width 3.2s var(--ease); }
.w-track__dot { position: absolute; left: 10%; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(29, 226, 39, .2); }
.widget.is-in .w-track__dot { left: 90%; transition: left 3.2s var(--ease); }
.w-milestone { display: grid; gap: 4px; text-align: center; opacity: .35; transition: opacity .5s calc(.2s + var(--d) * .7s); }
.widget.is-in .w-milestone { opacity: 1; }
.w-milestone__pin { justify-self: center; width: 10px; height: 10px; margin-top: -26px; margin-bottom: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper-45); }
.widget.is-in .w-milestone__pin { border-color: var(--green); transition: border-color .4s calc(.2s + var(--d) * .7s); }
.w-milestone b { font: 700 13px var(--head); }
.w-milestone small { font-size: 11px; color: var(--paper-45); }
.w-alt { margin-top: 18px; font-size: 13px; color: var(--paper-60); }

/* Dilution */
.w-dilution { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: center; }
.w-donut { margin: 0; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 13px; color: var(--paper-60); }
.w-donut svg { width: 120px; height: 120px; }
.w-donut circle { fill: none; stroke-width: 16; transition: stroke-dasharray .6s var(--ease); }
.w-donut__base { stroke: rgba(245, 245, 247, .18); }
.w-donut__new { stroke: rgba(245, 245, 247, .5); }
.w-donut__you { stroke: var(--green); }
.w-value { display: grid; gap: 8px; text-align: center; }
.w-value small { color: var(--paper-45); }
.w-value__bars { display: flex; justify-content: center; align-items: flex-end; gap: 14px; height: 120px; }
.w-value__bars span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.w-value__bars i { flex: none; }
.w-value__bars i { display: block; width: 34px; height: calc(var(--h, 50%) * .8); border-radius: 6px 6px 2px 2px; background: rgba(245, 245, 247, .4); transition: height .6s var(--ease); }
.w-value__bars span:last-child i { background: var(--green); }
.w-value__bars span:last-child i.is-down { background: #FF6B5E; }
.w-value__bars em { font-style: normal; font-size: 11px; color: var(--paper-45); }

/* Liquidation stack */
.w-stack__bar { display: flex; height: 46px; border-radius: 10px; overflow: hidden; background: rgba(245, 245, 247, .08); }
.w-stack__bar span { transition: width .6s var(--ease); }
.w-stack__pref { background: rgba(245, 245, 247, .55); }
.w-stack__common { background: var(--green); }
.w-stack__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px; font-size: 13px; color: var(--paper-60); }
.w-stack__legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; }

/* Power law */
.w-power__bars { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; align-items: end; height: 190px; border-bottom: 1px solid var(--paper-line); }
.w-power__bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.w-power__bar i { width: 100%; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--green); animation: grow .7s var(--ease) calc(var(--d) * .06s) both; }
.w-power__bar.is-loss i { background: #FF6B5E; }
.w-power__bar.is-first i { outline: 2px solid var(--paper); outline-offset: 2px; }
.w-power__bar b { position: absolute; bottom: calc(var(--h) + 4px); font: 700 11px var(--head); }
.w-power__bar small { position: absolute; bottom: -20px; font-size: 11px; color: var(--paper-45); }
.w-power .w-result { margin-top: 30px; }
.w-power .actions { margin-top: 14px; }

@media (max-width: 860px) {
  .w-steps, .w-dilution { grid-template-columns: 1fr; }
  .w-result { grid-template-columns: 1fr; }
  .w-track { grid-template-columns: 1fr; padding-top: 0; }
  .w-track__line, .w-track__dot { display: none; }
  .w-milestone { text-align: left; opacity: 1; }
  .w-milestone__pin { display: none; }
  .w-waterfall { gap: 4px; }
  .w-fall b { font-size: 11px; }
}
.consent-bar a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* ===== Policy page and legal footer ===== */
.cab-auth--wide .cab-auth-card { width: min(820px, 100%); margin: 40px 0 96px; }
.cab-legal-text { line-height: 1.6; }
.cab-legal-text h1 { margin: 26px 0 8px; font-size: 19px; }
.cab-legal-text ul { padding-left: 20px; }
.cab-legal-text a { color: var(--green-d); }
.cab-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--ink-70); cursor: pointer; }
.cab-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--green-d); }
.cab-check a, .cab-legal-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cab-legal-foot { display: grid; gap: 8px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-55); }
.cab-legal-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }