/* generated from packages/ui/src/tokens.ts and apps/web/fonts.mjs; edit apps/web/styles.css */
:root{--paper:#EEF2EF;--sheet:#FFFFFF;--ink:#16213A;--ink-soft:#4F5B6E;--rule:#D3DCD6;--rule-strong:#AEBBB3;--mark:#1F4BA5;--mark-soft:#E3EAF7;--correct:#1D7348;--correct-soft:#E1F0E6;--wrong:#B3322A;--wrong-soft:#F7E3E0;--time:#9A5B0B;--night-bg:#0A0F1C;--night-text:#EEF2F8;--night-soft:#9AA6BF;--night-phone:#0D1322;--night-blue:#3D74FF;--night-blue-deep:#2457D6;--night-blue-light:#8FB0FF;--night-violet:#8C64FF;--night-violet-light:#B9A2FF;--night-green:#3CBE78;--night-green-light:#7DDBA5;--night-teal:#28C8BE;--night-teal-light:#8FE3DC;--size-small:13px;--size-body:16px;--size-lead:19px;--size-title:24px;--size-display:34px;--space-xs:4px;--space-s:8px;--space-m:12px;--space-l:16px;--space-xl:24px;--space-xxl:36px;--radius-control:10px;--radius-sheet:14px;--motion-fast:150ms;--motion-base:200ms;--motion-slow:250ms}
@font-face{font-family:"Noto Sans Armenian";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/5.3.0/noto-sans-armenian-armenian-400-normal.woff2) format("woff2");unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:"Noto Sans Armenian";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/5.3.0/noto-sans-armenian-armenian-700-normal.woff2) format("woff2");unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:"Noto Sans Armenian";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/5.3.0/noto-sans-armenian-armenian-800-normal.woff2) format("woff2");unicode-range:U+0308,U+0530-058F,U+2010,U+2024,U+25CC,U+FB13-FB17}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/5.3.0/noto-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/5.3.0/noto-sans-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/5.3.0/noto-sans-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/5.3.0/noto-sans-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/5.3.0/noto-sans-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/5.3.0/noto-sans-cyrillic-800-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Sans Fallback";font-weight:100 600;src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:105.2%;ascent-override:101.6%;descent-override:27.9%;line-gap-override:0%}@font-face{font-family:"Sans Fallback";font-weight:700 900;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold");size-adjust:106.6%;ascent-override:100.3%;descent-override:27.5%;line-gap-override:0%}
/* Parapel marketing site: the night design. Rules: design-system/parapel/MASTER.md and pages/*.md.
   Colours, spacing, radii and durations come only from the generated :root block above
   (packages/ui/src/tokens.ts). Translucent colours are mixed from those tokens with color-mix();
   this file holds no colour literal. No element uses overflow:hidden: it would make a scroll
   container and freeze the scroll-linked motion below (overflow:clip crops without that). */

/* ===== base ===== */
:root{--font:"Noto Sans Armenian","Noto Sans","Sans Fallback",system-ui,sans-serif;--panel:color-mix(in srgb,var(--night-text) 5%,transparent);--panel-strong:color-mix(in srgb,var(--night-text) 9%,transparent);--line:color-mix(in srgb,var(--night-text) 10%,transparent);--line-strong:color-mix(in srgb,var(--night-text) 18%,transparent);--shade:color-mix(in srgb,black 45%,transparent)}
*{box-sizing:border-box}
html{background:var(--night-bg);scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night-bg);color:var(--night-text);font-family:var(--font);font-size:16px;line-height:1.6;overflow-x:clip;overflow-wrap:break-word}
h1,h2,h3{font-family:"Noto Sans Armenian","Noto Sans","Sans Fallback",system-ui,sans-serif;font-weight:800;margin:0;color:var(--night-text);overflow-wrap:anywhere}
h1{font-size:clamp(36px,4.6vw,56px);line-height:1.12}
h2{font-size:clamp(28px,3vw,38px);line-height:1.2}
h3{font-size:18px;line-height:1.3}
p{margin:0}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--night-blue-light);outline-offset:4px}
.close-card :focus-visible{outline-color:var(--sheet)}
.icon{display:inline-block;flex-shrink:0;vertical-align:-3px}
.skip{position:absolute;left:16px;top:-100px;z-index:30;background:var(--sheet);color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:32px;position:relative}
.wrap.narrow{max-width:900px}
.eyebrow{font-size:13px;font-weight:700;color:var(--night-blue-light);margin-bottom:10px}
.lead{font-size:18px;color:var(--night-soft);max-width:56ch}
.small{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--night-soft)}
.small .icon{color:var(--night-green-light)}
.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--night-blue-light);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:999px;font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;overflow-wrap:anywhere;transition:transform var(--motion-base) ease-out,background var(--motion-base) ease-out,box-shadow var(--motion-base) ease-out,border-color var(--motion-base) ease-out}
.button.primary,.legal-body .button{background:var(--night-blue-deep);color:var(--sheet);box-shadow:0 10px 30px color-mix(in srgb,var(--night-blue) 40%,transparent)}
.button.primary:hover,.legal-body .button:hover{transform:translateY(-2px);box-shadow:0 14px 36px color-mix(in srgb,var(--night-blue) 55%,transparent)}
.button.ghost{background:var(--panel);color:var(--night-text);border:1px solid var(--line-strong)}
.button.ghost:hover{border-color:var(--night-blue-light)}
.button.white{background:var(--sheet);color:var(--ink)}
.button.white:hover{transform:translateY(-2px)}
.button.nav-cta{min-height:40px;padding:8px 16px;font-size:14px;background:var(--sheet);color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ===== header ===== */
.site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--night-bg) 72%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:28px;min-height:72px}
.logo{display:inline-flex;align-items:center;min-width:0}
.logo img{display:block;width:124px;max-width:100%;height:auto;filter:brightness(0) invert(1)}
.site-header nav{display:flex;flex-wrap:wrap;gap:0 24px}
.site-header nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;color:var(--night-soft);transition:color var(--motion-fast) ease-out}
.site-header nav a:hover,.site-header nav [aria-current]{color:var(--night-text)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.languages{display:flex;gap:2px;font-size:13px;font-weight:700}
.languages a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;border-radius:8px;color:var(--night-soft)}
.languages a:hover,.languages [aria-current]{color:var(--night-text)}

/* ===== moving backgrounds ===== */
.glows{position:absolute;inset:0 0 -240px;z-index:-1;pointer-events:none;overflow:clip;-webkit-mask-image:linear-gradient(black 55%,transparent);mask-image:linear-gradient(black 55%,transparent)}
.glows .grid{position:absolute;inset:-64px;opacity:.6;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 32%,black,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 72% 32%,black,transparent 72%);animation:pan 26s linear infinite}
.blob{position:absolute;border-radius:50%;filter:blur(30px)}
.b1{width:760px;height:760px;right:-220px;top:-280px;background:radial-gradient(closest-side,color-mix(in srgb,var(--night-blue) 55%,transparent),transparent);animation:drift1 18s ease-in-out infinite}
.b2{width:540px;height:540px;right:22%;top:18%;background:radial-gradient(closest-side,color-mix(in srgb,var(--night-violet) 32%,transparent),transparent);animation:drift2 22s ease-in-out infinite}
.b3{width:440px;height:440px;left:-160px;bottom:-120px;background:radial-gradient(closest-side,color-mix(in srgb,var(--night-teal) 16%,transparent),transparent);animation:drift1 26s ease-in-out infinite reverse}
.section-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 420px at 0% 40%,color-mix(in srgb,var(--night-violet) 16%,transparent),transparent 70%)}
.band-light{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--night-blue) 8%,transparent),transparent 70%);border-top:1px solid color-mix(in srgb,var(--night-blue-light) 22%,transparent)}
.band-light::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--night-blue-light),transparent);animation:sweep 6s ease-in-out infinite}

/* ===== hero ===== */
.hero,.detail-hero{position:relative;overflow-x:clip;isolation:isolate}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;min-height:640px;padding-top:72px;padding-bottom:110px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:color-mix(in srgb,var(--night-blue) 16%,transparent);color:var(--night-blue-light);font-size:13px;font-weight:700}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--night-blue-light);animation:pulse 2.4s ease-in-out infinite}
.hero h1{margin:20px 0 18px;background:linear-gradient(90deg,var(--night-text) 0%,var(--night-text) 55%,var(--night-blue-light) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .small{margin-top:18px}
.hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy>:nth-child(2){animation-delay:.08s}
.hero-copy>:nth-child(3){animation-delay:.16s}
.hero-copy>:nth-child(4){animation-delay:.24s}
.hero-copy>:nth-child(5){animation-delay:.32s}

/* the drawn phone: the app's catalogue */
.stage{position:relative;display:flex;justify-content:center}
.phone-wrap{transform-style:preserve-3d}
.phone{display:flex;width:280px;min-height:560px;padding:10px;border-radius:46px;background:var(--night-phone);box-shadow:0 40px 80px var(--shade),0 0 0 1px var(--line),0 0 90px color-mix(in srgb,var(--night-blue) 25%,transparent)}
.screen{flex:1;display:flex;flex-direction:column;padding-bottom:12px;border-radius:37px;background:var(--paper);color:var(--ink);overflow:clip}
.sbar{display:flex;justify-content:space-between;align-items:center;height:36px;padding:0 24px;font-size:11px;font-weight:700}
.notch{width:88px;height:24px;border-radius:12px;background:var(--night-phone)}
.app-top{display:flex;justify-content:space-between;align-items:center;padding:6px 18px}
.app-top img{display:block;width:70px;height:auto}
.app-top span{font-size:12px;font-weight:700;color:var(--mark)}
.app-title{padding:12px 18px 4px;font-size:20px;font-weight:800;line-height:1.2}
.app-sub{padding:0 18px 10px;font-size:12px;color:var(--ink-soft)}
.app-row{display:flex;align-items:center;gap:11px;margin:0 12px 9px;padding:11px 12px;border-radius:16px;background:var(--sheet);box-shadow:0 2px 8px color-mix(in srgb,var(--ink) 7%,transparent);animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.app-row:nth-child(5){animation-delay:.5s}
.app-row:nth-child(6){animation-delay:.65s}
.app-row:nth-child(7){animation-delay:.8s}
.app-row:nth-child(n+8){animation-delay:.95s}
.app-row b{display:block;font-size:12.5px;line-height:1.3}
.app-row small{font-size:11px;color:var(--ink-soft)}
.float{position:absolute;z-index:2}
.f1{left:-6px;top:118px}
.f2{right:-14px;top:488px}
.chip{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;background:var(--sheet);color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 16px 36px var(--shade);animation:bob 5s ease-in-out infinite}
.f2 .chip{animation-delay:-2.5s}
.chip .dot{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--correct);color:var(--sheet)}
.chip .dot .icon{width:13px;height:13px;vertical-align:0}
.chip .clock{padding:2px 9px;border-radius:999px;background:var(--ink);color:var(--sheet);font-variant-numeric:tabular-nums}

/* ===== exam icons and tones ===== */
.tone-blue{--tone:var(--night-blue);--tone-light:var(--night-blue-light)}
.tone-violet{--tone:var(--night-violet);--tone-light:var(--night-violet-light)}
.tone-green{--tone:var(--night-green);--tone-light:var(--night-green-light)}
.tone-teal{--tone:var(--night-teal);--tone-light:var(--night-teal-light)}
.exam-icon{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--tone) 18%,transparent);color:var(--tone-light)}
.exam-icon .glyph{width:24px;height:24px}
.screen .exam-icon{width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--tone) 13%,var(--sheet));color:color-mix(in srgb,var(--tone) 72%,var(--ink))}
.screen .exam-icon .glyph{width:20px;height:20px}

/* ===== sections ===== */
section{position:relative}
.exams-section,.steps-section,.faq-section{padding:96px 0}
.exams-section h2,.steps-section h2{max-width:24ch;margin-bottom:12px}
.exams-section .lead{margin-bottom:36px}
.exam-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.exam-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:22px;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform var(--motion-slow) ease-out,border-color var(--motion-slow) ease-out,box-shadow var(--motion-slow) ease-out}
.exam-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--tone) 55%,transparent);box-shadow:0 22px 44px var(--shade)}
.exam-card h3{font-size:19px}
.card-link::after{content:"";position:absolute;inset:0;border-radius:22px}
.exam-card .sub{font-size:14.5px;color:var(--night-soft)}
.exam-card .meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--night-soft)}
.exam-card .meta .icon{color:var(--tone-light);transition:transform var(--motion-base) ease-out}
.exam-card:hover .meta .icon{transform:translateX(4px)}
@supports selector(:has(a)){.exam-card:has(.card-link:focus-visible){outline:3px solid var(--night-blue-light);outline-offset:4px}.exam-card .card-link:focus-visible{outline:none}}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.track{position:absolute;left:60px;right:60px;top:43px;height:2px;background:linear-gradient(90deg,var(--night-blue),var(--night-violet));transform-origin:left;opacity:.7}
.step{position:relative;padding:24px;border-radius:22px;background:var(--panel);border:1px solid var(--line)}
.step-n{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;margin-bottom:16px;border-radius:50%;background:var(--night-blue-deep);color:var(--sheet);font-weight:800;box-shadow:0 6px 18px color-mix(in srgb,var(--night-blue) 45%,transparent)}
.step h3{margin-bottom:8px}
.step p{font-size:15px;color:var(--night-soft)}
.faq-section{border-top:1px solid var(--line)}
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:48px;align-items:start}
.faq-row{margin-bottom:12px;border-radius:18px;background:var(--panel);border:1px solid var(--line);transition:background var(--motion-base) ease-out}
.faq-row:hover{background:var(--panel-strong)}
.faq-row summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:16px 20px;font-weight:700;cursor:pointer;list-style:none}
.faq-row summary::-webkit-details-marker{display:none}
.plus{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--panel-strong);transition:transform var(--motion-base) ease-out}
.faq-row[open] .plus{transform:rotate(45deg)}
.faq-row p{max-width:62ch;padding:0 20px 18px;font-size:15px;color:var(--night-soft)}
.closing{padding:24px 0 96px}
.close-card{position:relative;overflow:clip;display:flex;justify-content:space-between;align-items:center;gap:32px;padding:52px;border-radius:30px;background:linear-gradient(120deg,var(--night-blue-deep),color-mix(in srgb,var(--night-violet) 35%,var(--night-blue-deep)),var(--night-blue-deep));background-size:300% 100%;box-shadow:0 30px 60px color-mix(in srgb,var(--night-blue-deep) 35%,transparent);animation:shift 12s ease-in-out infinite}
.close-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--sheet) 8%,transparent) 50%,transparent 60%);background-size:250% 100%;animation:sheen 6s ease-in-out infinite}
.close-card>*{position:relative;z-index:1}
.close-card h2{font-size:clamp(26px,3vw,34px)}
.close-card p{margin-top:8px;color:var(--sheet)}

/* ===== footer ===== */
.site-footer{border-top:1px solid var(--line)}
.site-footer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px;padding-top:30px;padding-bottom:40px}
.site-footer .logo img{width:104px}
.site-footer p{max-width:56ch;font-size:13px;color:var(--night-soft)}
.legal-links{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;font-weight:700}
.legal-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--night-text)}
.legal-links a:hover{color:var(--night-blue-light)}
.site-footer span{margin-left:auto;font-size:13px;color:var(--night-soft)}

/* ===== exam pages, support, 404 ===== */
.detail-hero{padding:48px 0 72px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:24px;font-weight:700;color:var(--night-blue-light)}
.detail-head{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.detail-head .exam-icon{width:60px;height:60px;border-radius:18px}
.detail-head .exam-icon .glyph{width:30px;height:30px}
.detail-hero h1{font-size:clamp(32px,4vw,48px)}
.detail-hero .lead{margin-top:8px}
.detail-hero .small{margin-top:16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.stat-card{padding:20px 22px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.stat-card strong{display:block;font-size:40px;font-weight:800;line-height:1.1}
.stat-card span{font-size:14px;color:var(--night-soft)}
.detail-body{padding:24px 0 72px}
.detail-body h2{margin:44px 0 16px;font-size:26px}
.detail-body h2:first-child{margin-top:0}
.description{font-size:16px;color:var(--night-soft)}
.bank-list{display:grid;gap:14px}
.bank-card{padding:22px 24px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.bank-card h3{margin-bottom:6px}
.bank-card p{font-size:15px;color:var(--night-soft)}
.bank-card .small{display:block;margin-top:10px}
.source{margin-top:28px}
.support{padding-top:56px}
.support h1{margin:8px 0 14px}
.support h2{margin:36px 0 10px;font-size:22px}
.support p{color:var(--night-soft)}
.support .lead .text-link,.support p a{color:var(--night-blue-light);text-decoration:underline;text-underline-offset:3px}

/* ===== legal ===== */
.legal{padding:56px 0 80px}
.legal-intro{max-width:820px;margin-bottom:48px}
.legal-intro h1{margin-bottom:18px;font-size:clamp(32px,4vw,48px)}
.legal-intro .lead{margin-bottom:14px}
.legal-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px}
.legal-toc nav{position:sticky;top:96px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.legal-toc a{font-size:14px;color:var(--night-soft)}
.legal-toc a:hover{color:var(--night-text)}
.legal-body{max-width:840px;min-width:0}
.legal-body section{padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid var(--line);scroll-margin-top:96px}
.legal-body h2{margin-bottom:18px;font-size:24px}
.legal-body p{margin-bottom:16px;line-height:1.85;color:color-mix(in srgb,var(--night-text) 88%,var(--night-soft))}
.legal-body a{color:var(--night-blue-light);text-decoration:underline;text-underline-offset:3px}
.legal-body .button{margin-top:8px;text-decoration:none}
.legal-table{overflow-x:auto;margin-bottom:16px;border:1px solid var(--line);border-radius:16px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:var(--panel-strong);font-weight:700}
td{background:var(--panel)}
td:first-child{width:25%;font-weight:700}
tr:last-child td{border-bottom:0}
.pricing-table table{table-layout:fixed}
.pricing-table th,.pricing-table td{overflow-wrap:anywhere}
.pricing-table th:first-child,.pricing-table td:first-child{width:28%}

/* ===== responsive ===== */
@media(max-width:1000px){.wrap{padding-inline:24px}.site-header .wrap{gap:18px}.app-link{display:none}.hero-inner{gap:24px}.exam-grid{gap:14px}.exam-card h3{font-size:17px}}
@media(max-width:820px){.legal-layout{grid-template-columns:minmax(0,1fr);gap:32px}.legal-toc nav{position:static;flex-direction:row;flex-wrap:wrap;gap:10px 20px}.legal-toc{padding-bottom:24px;border-bottom:1px solid var(--line)}}
@media(max-width:760px){.site-header .wrap{flex-wrap:wrap;gap:0 14px;min-height:64px;padding-top:8px;padding-bottom:4px}.site-header nav{order:3;width:100%}.hero-inner{grid-template-columns:minmax(0,1fr);gap:48px;min-height:0;padding-top:40px;padding-bottom:72px}.f1{left:0;top:96px}.f2{right:0;top:470px}.exam-grid,.steps,.stats{grid-template-columns:minmax(0,1fr)}.track{display:none}.detail-head{flex-direction:column;align-items:flex-start;gap:14px}.faq{grid-template-columns:minmax(0,1fr);gap:24px}.close-card{flex-direction:column;align-items:flex-start;padding:32px}.exams-section,.steps-section,.faq-section{padding:64px 0}.site-footer span{margin-left:0}th,td{padding:12px;font-size:14px}.legal-table table{min-width:320px}}
@media(max-width:420px){.wrap{padding-inline:18px}.detail-hero h1{font-size:min(32px,8vw)}.phone{width:250px;min-height:510px}.f2{top:430px}.chip{font-size:12px;padding:8px 12px}}

/* ===== motion ===== */
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,70px) scale(1.15)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-50px) scale(.9)}}
@keyframes pan{to{transform:translate(64px,64px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--night-blue-light) 60%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes sheen{0%{background-position:150% 0}60%,100%{background-position:-100% 0}}
@keyframes sweep{0%,100%{opacity:.2}50%{opacity:1}}
/* Scroll-linked parallax and reveals: Chrome, Edge and Safari 26+; other browsers show the page still.
   Reveals animate translate and scale (not transform) so hover lifts keep working. */
@supports (animation-timeline: view()){
  .phone-wrap{animation:tilt linear both;animation-timeline:scroll(root);animation-range:0px 560px}
  .f1{animation:para-up linear both;animation-timeline:scroll(root);animation-range:0px 640px}
  .f2{animation:para-down linear both;animation-timeline:scroll(root);animation-range:0px 640px}
  .hero-copy{animation:copy-out linear both;animation-timeline:scroll(root);animation-range:0px 520px}
  .hero .glows{animation:bg-lag linear both;animation-timeline:scroll(root);animation-range:0px 1200px}
  .section-glow{animation:para-bg linear both;animation-timeline:view()}
  .exams-section .eyebrow,.exams-section h2,.exams-section .lead,.steps-section .eyebrow,.steps-section h2,.faq h2,.exam-card,.step,.faq-row,.bank-card{animation:reveal linear both;animation-timeline:view();animation-range:cover 0px cover 240px}
  .exam-card:nth-child(3n+2),.step:nth-child(3),.faq-row:nth-child(2){animation-range:cover 40px cover 280px}
  .exam-card:nth-child(3n),.step:nth-child(4),.faq-row:nth-child(3){animation-range:cover 80px cover 320px}
  .track{animation:draw linear both;animation-timeline:view();animation-range:cover 40px cover 320px}
  .close-card{animation:shift 12s ease-in-out infinite,reveal linear both;animation-timeline:auto,view();animation-range:normal,cover 0px cover 240px}
  @keyframes tilt{from{transform:perspective(1100px) rotateX(14deg) rotateY(-18deg) rotateZ(4deg)}to{transform:perspective(1100px) translateY(120px)}}
  @keyframes para-up{to{transform:translateY(-140px)}}
  @keyframes para-down{to{transform:translateY(170px)}}
  @keyframes copy-out{to{transform:translateY(70px);opacity:.75}}
  @keyframes bg-lag{to{transform:translateY(420px)}}
  @keyframes para-bg{from{transform:translateY(120px)}to{transform:translateY(-120px)}}
  @keyframes reveal{from{opacity:0;translate:0 48px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
  @keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  /* On narrow screens the phone sits above the next section: it only straightens, nothing drifts into the exams. */
  @media(max-width:760px){.phone-wrap{animation-name:tilt-narrow;animation-range:0px 420px}.f1,.f2,.hero-copy{animation:none}}
  @keyframes tilt-narrow{from{transform:perspective(1100px) rotateX(10deg) rotateY(-12deg) rotateZ(3deg)}to{transform:none}}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero h1{background:none;color:var(--night-text)}}
@media print{:root{--night-bg:var(--sheet);--night-text:var(--ink);--night-soft:var(--ink-soft);--night-blue-light:var(--mark);--night-violet-light:var(--mark);--night-green-light:var(--correct);--night-teal-light:var(--mark)}*,*::before,*::after{animation:none!important}.site-header{position:static}.glows,.section-glow,.band-light{display:none}.hero h1{background:none;color:var(--ink)}.button.primary,.legal-body .button,.step-n,.close-card p,.chip .dot,.chip .clock{color:var(--ink)}}