/* ============================================================================
   MAITH ACADEMY — visual system
   Matched to the Instagram feed: violet + white + yellow, warm orange for
   programme labels, teal constellation texture, deep-navy body copy, and
   generously rounded white cards floating on a pale lavender canvas.
   ============================================================================ */
:root{
  /* --- brand violet --- */
  --purple:#4A2FD8;
  --purple-deep:#2E1C86;
  --purple-dark:#3A22B5;
  --purple-mid:#6E52EC;
  --purple-soft:#EDE9FD;
  --purple-softer:#F5F2FE;
  --purple-line:#DCD4FA;

  /* --- canvas --- */
  --lav:#F4F2FD;
  --lav-deep:#EAE6FA;
  --white:#fff;

  /* --- accents from the feed --- */
  --yellow:#FFC93C;
  --yellow-deep:#F5A623;
  --yellow-soft:#FFF5DB;
  --orange:#F2721C;
  --orange-soft:#FFEDE0;
  --green:#17A673;
  --green-soft:#E2F7EF;
  --teal:#5BD1D7;
  --pink:#E6357A;

  /* --- text --- */
  --ink:#241E5C;
  --body:#514C7E;
  --muted:#8B85B5;

  --line:#E7E2F8;
  --radius:16px;
  --radius-lg:26px;
  --radius-xl:32px;
  --shadow-sm:0 2px 6px rgba(46,28,134,.05);
  --shadow:0 3px 8px rgba(46,28,134,.05),0 12px 32px rgba(46,28,134,.07);
  --shadow-lg:0 6px 14px rgba(46,28,134,.06),0 28px 66px rgba(46,28,134,.12);
  --max:1120px;
  --header-h:78px;

  /* Teal constellation — the recurring texture in every Instagram post. */
  --net:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Cg stroke='%235BD1D7' stroke-width='1.3' fill='none' opacity='.55'%3E%3Cpath d='M40 60 L150 30 M150 30 L120 140 M40 60 L120 140 M150 30 L250 110 M120 140 L250 110 M250 110 L210 220 M120 140 L210 220 M210 220 L300 300 M250 110 L400 160 M330 50 L250 110 M330 50 L470 90 M400 160 L470 90 M400 160 L520 230 M470 90 L520 230 M520 230 L700 180 M640 60 L700 180 M640 60 L760 90 M700 180 L760 90 M520 230 L590 320 M300 300 L420 380 M590 320 L420 380 M60 250 L120 140 M60 250 L210 220 M400 160 L300 300'/%3E%3C/g%3E%3Cg fill='%235BD1D7' opacity='.8'%3E%3Ccircle cx='40' cy='60' r='5'/%3E%3Ccircle cx='150' cy='30' r='7'/%3E%3Ccircle cx='120' cy='140' r='4'/%3E%3Ccircle cx='250' cy='110' r='6'/%3E%3Ccircle cx='210' cy='220' r='4'/%3E%3Ccircle cx='330' cy='50' r='5'/%3E%3Ccircle cx='400' cy='160' r='7'/%3E%3Ccircle cx='60' cy='250' r='6'/%3E%3Ccircle cx='300' cy='300' r='5'/%3E%3Ccircle cx='470' cy='90' r='4'/%3E%3Ccircle cx='520' cy='230' r='6'/%3E%3Ccircle cx='640' cy='60' r='5'/%3E%3Ccircle cx='700' cy='180' r='7'/%3E%3Ccircle cx='760' cy='90' r='4'/%3E%3Ccircle cx='590' cy='320' r='5'/%3E%3Ccircle cx='420' cy='380' r='6'/%3E%3C/g%3E%3C/svg%3E");

  /* Hand-drawn yellow underline used beneath key phrases in the feed. */
  --swoosh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M5 9 C 42 2, 70 12, 103 6 S 164 3, 195 8' stroke='%23FFC93C' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Four-point sparkle. */
  --spark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z' fill='%23FFC93C'/%3E%3C/svg%3E");
  --spark-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8 16 11 24 12C16 13 13 16 12 24C11 16 8 13 0 12C8 11 11 8 12 0Z' fill='%238B7BF0'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Sticky header is 78px tall — keep anchored sections clear of it.
   Applies to native #hash landings; the router adds the same offset in JS. */
section[id],[data-anchor]{scroll-margin-top:100px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--lav);color:var(--body);
  font-family:"Nunito","SF Pro Rounded","Segoe UI Variable Display",-apple-system,
              BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.68;font-weight:500;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Constellation texture, fixed behind everything, top-left and bottom-right. */
body::before,body::after{
  content:"";position:fixed;width:820px;height:520px;pointer-events:none;z-index:0;
  background:var(--net) no-repeat center/contain;opacity:.5;
}
body::before{top:-70px;left:-90px}
body::after{bottom:-90px;right:-110px;transform:scaleX(-1)}

h1,h2,h3,h4{color:var(--ink);line-height:1.16;margin:0 0 .5em;font-weight:900;letter-spacing:-.015em}
h1{font-size:clamp(2.15rem,5.4vw,3.55rem);color:var(--purple)}
h2{font-size:clamp(1.65rem,3.5vw,2.45rem);color:var(--purple)}
h3{font-size:1.2rem;font-weight:800;color:var(--ink)}
p{margin:0 0 1.1em}
b,strong{font-weight:800;color:var(--ink)}
a{color:var(--purple);text-decoration:none;font-weight:700}
a:hover{text-decoration:underline}
i{color:inherit}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;position:relative;z-index:1}
.narrow{max-width:800px}
main{position:relative;z-index:1}

.eyebrow{
  display:inline-block;font-size:.75rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--purple);background:var(--purple-soft);
  padding:8px 16px;border-radius:999px;margin-bottom:18px;
}
.eyebrow.yellow{background:var(--orange);color:#fff;box-shadow:0 4px 12px rgba(242,114,28,.28)}
.lede{font-size:1.17rem;color:var(--body);font-weight:600}
.muted{color:var(--muted)}

/* ---------------- nav ---------------- */
header.nav{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 24px;height:var(--header-h);display:flex;align-items:center;gap:26px}

.logo{display:flex;align-items:center;gap:11px;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo-mark{
  width:42px;height:42px;border-radius:13px;flex:none;display:block;
  box-shadow:0 5px 14px rgba(74,47,216,.3);
}
.logo-mark svg{width:100%;height:100%;display:block;border-radius:13px}
.logo-txt{display:flex;flex-direction:column;line-height:1.12}
.logo-txt b{font-size:1.16rem;font-weight:900;color:var(--orange);letter-spacing:-.02em}
.logo-txt small{font-size:.74rem;font-weight:700;color:var(--purple);letter-spacing:.01em}

.nav-links{display:flex;gap:3px;margin-left:auto;align-items:center}
.nav-links a{padding:9px 14px;border-radius:11px;color:var(--body);font-weight:700;font-size:.94rem}
.nav-links a:hover{background:var(--purple-soft);color:var(--purple);text-decoration:none}
.nav-links a.active{color:var(--purple);background:var(--purple-soft)}
/* The "Free Level Test" call to action is a solid purple button, so its label
   must stay white at all times. Without this, the generic `.nav-links a` rule
   above out-ranks `.btn-primary` and the text renders dark-on-purple. */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover,
.nav-links a.btn-primary.active{color:#fff;background:var(--purple)}
.nav-links a.btn-primary:hover{background:var(--purple-dark)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:14px;font-weight:800;font-size:1rem;
  border:2px solid transparent;cursor:pointer;transition:.16s ease;text-align:center;
  font-family:inherit;line-height:1.25;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 6px 18px rgba(74,47,216,.3)}
.btn-primary:hover{background:var(--purple-dark);box-shadow:0 10px 26px rgba(74,47,216,.38)}
.btn-yellow{background:var(--yellow);color:#3F2B00;box-shadow:0 6px 18px rgba(255,201,60,.45)}
.btn-yellow:hover{background:var(--yellow-deep)}
.btn-ghost{background:#fff;color:var(--purple);border-color:var(--purple-line)}
.btn-ghost:hover{border-color:var(--purple);background:var(--purple-softer)}
.btn-sm{padding:10px 19px;font-size:.92rem;border-radius:11px}
.btn-lg{padding:17px 36px;font-size:1.06rem;border-radius:15px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn .social-ico{width:18px;height:18px}

.nav-toggle{display:none;margin-left:auto;background:#fff;border:1.5px solid var(--purple-line);border-radius:12px;padding:10px 12px;cursor:pointer}
.nav-toggle span{display:block;width:19px;height:2.5px;background:var(--purple);border-radius:2px}
.nav-toggle span+span{margin-top:4px}

/* ---------------- page system ---------------- */
.page{display:none}
.page.on{display:block}
section{padding:86px 0;position:relative}
section.tight{padding:56px 0}
.tinted{background:var(--lav-deep)}
.tinted-purple{background:var(--purple-soft)}

/* ---------------- hero ---------------- */
.hero{
  padding:82px 0 76px;
  background:
    radial-gradient(760px 340px at 88% 4%,rgba(255,201,60,.22),transparent 66%),
    radial-gradient(700px 400px at 2% 0%,rgba(110,82,236,.12),transparent 62%);
}
.hero::before,.hero::after{
  content:"";position:absolute;background:var(--spark) no-repeat center/contain;
  pointer-events:none;opacity:.9;
}
.hero::before{width:26px;height:26px;top:14%;right:6%}
.hero::after{width:16px;height:16px;bottom:18%;left:3%;background-image:var(--spark-v);opacity:.65}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:58px;align-items:center}
.hero h1{margin-bottom:22px;letter-spacing:-.025em}
.hero h1 .hl{color:var(--purple);position:relative;white-space:nowrap;display:inline-block}
.hero h1 .hl::after{
  content:"";position:absolute;left:-4px;right:-4px;bottom:-.14em;height:.26em;
  background:var(--swoosh) no-repeat center/100% 100%;
}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px}
.hero-note{margin-top:22px;font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:9px;font-weight:700}
.dot-live{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(23,166,115,.16);flex:none}

.hero-card{background:#fff;border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-lg)}
.hero-card h3{font-size:1.06rem;margin-bottom:18px}
.step-row{display:flex;gap:14px;padding:14px 0;border-top:1.5px solid var(--line)}
.step-row:first-of-type{border-top:0;padding-top:0}
.step-n{
  width:32px;height:32px;border-radius:11px;background:var(--purple-soft);color:var(--purple);
  font-weight:900;font-size:.9rem;display:grid;place-items:center;flex:none;margin-top:1px;
}
.step-row b{display:block;color:var(--ink);font-size:.98rem;font-weight:800}
.step-row small{color:var(--muted);font-size:.88rem;line-height:1.55;display:block;margin-top:2px;font-weight:600}

/* ---------------- photos ----------------
   Every photo slot is a fixed-ratio frame, so swapping a placeholder for a
   real photograph never shifts the layout. See images/README.md for the
   exact size each slot expects. */
.photo{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  background:var(--purple-soft);box-shadow:var(--shadow-lg);
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.r-4-3{aspect-ratio:4/3}
.photo.r-3-2{aspect-ratio:3/2}
.photo.r-16-9{aspect-ratio:16/9}
.photo.r-1-1{aspect-ratio:1/1}
.photo.r-5-4{aspect-ratio:5/4}
/* yellow corner flash, echoing the Instagram posts */
.photo.flash::after{
  content:"";position:absolute;right:-42px;top:-42px;width:120px;height:120px;
  border-radius:50%;background:var(--yellow);opacity:.9;
}
.photo-cap{
  position:absolute;left:16px;right:16px;bottom:16px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);border-radius:14px;padding:11px 16px;
  font-size:.88rem;font-weight:800;color:var(--ink);box-shadow:var(--shadow-sm);
}

/* photo + text band, the Keystone-style alternating layout */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split.wide-left{grid-template-columns:1.15fr .85fr}
.split.wide-right{grid-template-columns:.85fr 1.15fr}
.split.flip .split-media{order:2}
.split-body h2{margin-bottom:14px}
.split-body p:last-child{margin-bottom:0}

/* full-bleed colour band with a photo, like the navy Keystone section */
.band{
  background:var(--purple-deep);color:#fff;border-radius:var(--radius-xl);
  padding:46px;overflow:hidden;
}
.band h2,.band h3{color:#fff}
.band p{color:#D8D2F4}
.band .lede{color:#EDE9FD}
.band ul.check li::before{background:rgba(255,255,255,.18)}
.band ul.check li::after{border-color:var(--yellow)}
.band .photo{box-shadow:0 18px 44px rgba(0,0,0,.28)}

/* ---------------- cards ---------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border-radius:var(--radius-lg);padding:30px;transition:.2s ease;box-shadow:var(--shadow-sm)}
.card.hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}
.card .more{font-weight:800;font-size:.94rem;display:inline-flex;align-items:center;gap:6px;margin-top:8px;color:var(--purple)}
.ico{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  font-size:1.5rem;margin-bottom:18px;background:var(--purple-soft);color:var(--purple);
  box-shadow:inset 0 0 0 4px #fff,0 4px 12px rgba(74,47,216,.12);
}
.ico.y{background:var(--yellow-soft);color:var(--orange);box-shadow:inset 0 0 0 4px #fff,0 4px 12px rgba(242,114,28,.14)}
.sec-head{max-width:730px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------------- lists ---------------- */
ul.check{list-style:none;padding:0;margin:0 0 1.1em}
ul.check li{padding-left:33px;position:relative;margin-bottom:12px}
ul.check li::before{content:"";position:absolute;left:0;top:.46em;width:20px;height:20px;border-radius:50%;background:var(--purple-soft)}
ul.check li::after{content:"";position:absolute;left:6.5px;top:.74em;width:5px;height:9px;border:solid var(--purple);border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
ul.plain{list-style:none;padding:0;margin:0 0 1.1em}
ul.plain li{padding-left:22px;position:relative;margin-bottom:10px}
ul.plain li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--yellow)}

.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
.stat{background:#fff;border-radius:var(--radius-lg);padding:26px 16px;box-shadow:var(--shadow-sm)}
.stat b{display:block;font-size:2.2rem;font-weight:900;color:var(--purple);line-height:1.1;letter-spacing:-.03em}
.stat small{color:var(--muted);font-size:.88rem;font-weight:700}

.pill-row{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px}
.pill{background:#fff;color:var(--purple);padding:8px 17px;border-radius:999px;font-size:.87rem;font-weight:800;box-shadow:var(--shadow-sm)}

.quote{
  border-left:5px solid var(--yellow);padding:6px 0 6px 24px;margin:30px 0;
  font-size:1.12rem;color:var(--ink);font-weight:700;
}

table.info{width:100%;border-collapse:separate;border-spacing:0;margin:0 0 1.3em;font-size:.95rem;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
table.info th,table.info td{padding:14px 17px;text-align:left;border-bottom:1.5px solid var(--line);vertical-align:top}
table.info th{background:var(--purple-soft);color:var(--purple);font-weight:900;font-size:.79rem;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
table.info tr:last-child th,table.info tr:last-child td{border-bottom:0}

/* ---------------- CTA band ---------------- */
.cta-band{
  background:linear-gradient(135deg,var(--purple-deep),var(--purple) 58%,var(--purple-mid));
  color:#fff;border-radius:var(--radius-xl);padding:56px 46px;text-align:center;
  position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(46,28,134,.28);
}
.cta-band::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:var(--yellow);opacity:.17;top:-120px;right:-80px}
.cta-band::after{content:"";position:absolute;width:34px;height:34px;background:var(--spark) no-repeat center/contain;top:32px;left:44px;opacity:.85}
.cta-band h2,.cta-band p{color:#fff;position:relative}
.cta-band h2{margin-bottom:14px}
.cta-band p{opacity:.92;max-width:580px;margin:0 auto 28px;font-weight:600}
.cta-band .btn{position:relative}

/* ---------------- footer ---------------- */
footer{background:var(--purple-deep);color:#BDB4E8;padding:60px 0 30px;font-size:.94rem;position:relative;z-index:1;font-weight:600}
footer h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;font-weight:900}
footer a{color:#BDB4E8;font-weight:600}
footer a:hover{color:var(--yellow)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-bot{border-top:1px solid rgba(255,255,255,.14);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem}
.foot-links{list-style:none;padding:0;margin:0}
.foot-links li{margin-bottom:10px}
/* Social links: the icon is inside the <a>, so the icon itself is clickable. */
.social{display:inline-flex;align-items:center;gap:9px}
.social-ico{width:19px;height:19px;fill:currentColor;flex:none;display:block}
.social:hover .social-ico{fill:var(--yellow)}

/* discreet staff entrance in the footer bottom row */
.admin-link{opacity:.45;font-size:.8rem;font-weight:600}
.admin-link:hover{opacity:1;color:var(--yellow)}

.logo-foot{display:inline-flex;align-items:center;gap:11px;margin-bottom:16px;background:rgba(255,255,255,.07);padding:10px 18px 10px 12px;border-radius:16px}
.logo-foot .logo-txt b{color:var(--yellow)}
.logo-foot .logo-txt small{color:#fff}

/* ---------------- forms ---------------- */
.form-card{background:#fff;border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-lg)}
.field{margin-bottom:20px}
.field label{display:block;font-weight:800;color:var(--ink);margin-bottom:7px;font-size:.95rem}
.field .hint{font-size:.85rem;color:var(--muted);font-weight:600;margin-top:-3px;margin-bottom:8px}
.field .req{color:var(--orange)}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  width:100%;padding:14px 16px;border:2px solid var(--line);border-radius:14px;
  font-size:1rem;font-family:inherit;font-weight:600;color:var(--ink);background:var(--purple-softer);transition:.14s;
}
input::placeholder,textarea::placeholder{color:var(--muted);font-weight:500}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(74,47,216,.12)}
input.err,select.err{border-color:#E0335F;background:#FEF1F4}
textarea{resize:vertical;min-height:80px;line-height:1.6}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.err-msg{color:#C81E45;font-size:.85rem;margin-top:6px;display:none;font-weight:800}
.err-msg.on{display:block}

.combo{position:relative}
.combo-list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;
  border:2px solid var(--purple-line);border-radius:16px;box-shadow:var(--shadow-lg);
  max-height:290px;overflow-y:auto;z-index:40;padding:6px;
  display:none;
}
.combo-list.on{display:block}
.combo-opt{padding:11px 14px;border-radius:11px;cursor:pointer;font-size:.94rem;line-height:1.45;font-weight:700;color:var(--ink)}
.combo-opt:hover,.combo-opt.sel{background:var(--purple-soft);color:var(--purple)}
.combo-opt small{display:block;color:var(--muted);font-size:.78rem;font-weight:600}
.combo-opt.other{border-top:1.5px solid var(--line);margin-top:5px;padding-top:12px;font-weight:900;color:var(--purple)}
.combo-empty{padding:16px 14px;color:var(--muted);font-size:.9rem;text-align:center;font-weight:600}

.consent{display:flex;gap:13px;align-items:flex-start;background:var(--purple-softer);border-radius:16px;padding:17px}
.consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--purple)}
.consent label{font-size:.9rem;font-weight:600;color:var(--body);line-height:1.6;margin:0}

/* ---------------- test runner ---------------- */
.test-shell{max-width:870px;margin:0 auto}
.test-bar{
  position:sticky;top:var(--header-h);z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-radius:18px;padding:15px 22px;margin-bottom:26px;
  display:flex;align-items:center;gap:18px;box-shadow:var(--shadow);
}
.test-bar .who{font-weight:900;color:var(--ink);font-size:.96rem}
.test-bar .who small{display:block;font-weight:600;color:var(--muted);font-size:.81rem}
.test-bar .spacer{flex:1}
.test-bar .clock{font-variant-numeric:tabular-nums;color:var(--purple);font-size:.92rem;font-weight:800;background:var(--purple-soft);padding:6px 13px;border-radius:999px}
.prog-track{height:9px;background:var(--purple-soft);border-radius:99px;overflow:hidden;margin-top:10px;width:100%}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--purple-mid));border-radius:99px;transition:width .35s ease;width:0}
.prog-lbl{font-size:.83rem;color:var(--muted);font-weight:800;margin-bottom:3px;display:block}

.q-card{background:#fff;border-radius:var(--radius-lg);padding:28px 30px;margin-bottom:18px;transition:.16s;box-shadow:var(--shadow-sm)}
.q-card:focus-within{box-shadow:var(--shadow)}
.q-card.done{box-shadow:var(--shadow-sm),inset 4px 0 0 var(--green)}
.q-head{display:flex;gap:15px;margin-bottom:16px}
.q-num{width:34px;height:34px;border-radius:12px;background:var(--purple);color:#fff;font-weight:900;font-size:.94rem;display:grid;place-items:center;flex:none}
.q-card.done .q-num{background:var(--green)}
.q-text{font-size:1.07rem;color:var(--ink);font-weight:700;line-height:1.55;padding-top:4px}
.q-body{padding-left:49px}
.ans-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ans-row label{font-weight:800;color:var(--body);font-size:.95rem;margin:0;white-space:nowrap}
.ans-in{max-width:230px}
.ans-in.wide{max-width:370px}
.unit{color:var(--muted);font-weight:700;font-size:.95rem}
.work-toggle{background:none;border:none;color:var(--purple);font-weight:800;font-size:.88rem;cursor:pointer;padding:4px 0;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
.work-toggle:hover{text-decoration:underline}
.work-box{display:none;margin-top:10px}
.work-box.on{display:block}
.opt-row{display:flex;gap:10px;flex-wrap:wrap}
.opt{padding:12px 24px;border:2px solid var(--line);border-radius:999px;cursor:pointer;font-weight:800;background:#fff;color:var(--body);font-family:inherit;font-size:.96rem;transition:.14s}
.opt:hover{border-color:var(--purple-line);background:var(--purple-softer)}
.opt.on{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 5px 14px rgba(74,47,216,.28)}

.test-foot{background:#fff;border-radius:var(--radius-xl);padding:34px;text-align:center;margin-top:10px;box-shadow:var(--shadow)}
.test-foot p{max-width:470px;margin:0 auto 22px;font-size:.97rem}

.notice{background:var(--yellow-soft);border-radius:18px;padding:19px 22px;font-size:.93rem;color:#6B4B00;margin-bottom:26px;font-weight:600;border-left:5px solid var(--yellow)}
.notice b{color:#4A3300;font-weight:900}

/* thank you */
.done-wrap{max-width:670px;margin:0 auto;text-align:center}
.done-ico{width:86px;height:86px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:2.5rem;margin:0 auto 26px;box-shadow:inset 0 0 0 6px #fff,0 8px 20px rgba(23,166,115,.16)}
.done-steps{background:#fff;border-radius:var(--radius-xl);padding:30px;text-align:left;margin:32px 0;box-shadow:var(--shadow)}

/* faq */
.faq{border-radius:18px;margin-bottom:11px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq summary{padding:20px 23px;font-weight:800;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--purple);font-size:1.5rem;font-weight:700;flex:none;line-height:1}
.faq[open] summary::after{content:"–"}
.faq summary:hover{background:var(--purple-softer)}
.faq .faq-body{padding:0 23px 21px;color:var(--body)}
.faq .faq-body p:last-child{margin-bottom:0}

@media(max-width:900px){
  .hero-grid,.g2,.g3,.g4,.form-row,.foot-grid,.split,.split.wide-left,.split.wide-right{grid-template-columns:1fr}
  .split{gap:28px}
  .split.flip .split-media{order:0}
  .band{padding:28px 22px}
  .g3,.g4{gap:18px}
  .stat-band{grid-template-columns:repeat(2,1fr);gap:14px}
  .nav-links{
    display:none;position:absolute;top:var(--header-h);left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;padding:14px;gap:3px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 16px}
  .nav-toggle{display:block}
  section{padding:58px 0}
  .cta-band{padding:40px 24px}
  .form-card,.card,.hero-card{padding:24px}
  .q-body{padding-left:0}
  .test-bar{position:static}
  .foot-grid{gap:28px}
  body::before,body::after{width:520px;height:330px;opacity:.4}
}
@media(max-width:520px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .btn,.hero-cta .btn{width:100%}
  .ans-in{max-width:100%}
  .logo-txt b{font-size:1.04rem}
  .q-card{padding:22px}
}