/* ===========================================================================
   Campaign landing page — UI v2, /ielts-cho-con/ (Parents)
   ---------------------------------------------------------------------------
   Self-contained: loaded INSTEAD of the theme's styles.css AND instead of
   css/lp/base.css (the v1 landing stylesheet). A page renders exactly one
   design, never both.

   Two reasons it cannot be layered on the theme, both from CLAUDE.md:
   styles.css sets `html { font-size: 10px }` while this design is authored
   at the 16px browser default and uses rem throughout, and rem is
   root-relative so no wrapper can undo the 62.5% shrink.

   Kept separate from young-pro.css rather than split into a shared base:
   the two mockups deliberately use different layout families and differ in
   type scale, so a shared base would have to pick one and silently restyle
   the other. The duplicated token block is the price of keeping each design
   exactly as it was signed off.
   ======================================================================== */

/* ---------- tokens (identical to the working-professional page: one brand)
   Neutrals, --accent and --surface-* track the site scale in
   static/css/styles.css, the one /styleguideline/ renders: --ink is
   --color-heading, --muted is --color-body, --accent is --color-primary,
   --line is --color-border, --surface-2 is --color-lighter.
   --paper, --body, --accent-soft and --accent-deep have no counterpart
   there: they are the page ground and two shades of the same primary,
   audited from rubricsielts.com and kept as signed off. Everything else
   must come from the scale — no new hex values in this file. */
:root{
  --paper:#FDFCF9;--surface:#FFFFFF;--surface-2:#F2F5F9;
  --ink:#192335;--body:#4A5568;--muted:#6B7385;--line:#E6E3F1;
  --accent:#2F57EF;--accent-ink:#FFFFFF;--accent-soft:#EDF1FE;--accent-deep:#1E3CC4;
  --shadow:0 18px 44px -24px rgba(25,35,53,.34);--shadow-sm:0 6px 18px -12px rgba(25,35,53,.30);
  --r-card:16px;--r-input:10px;--r-pill:999px;--maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#11151F;--surface:#171D2A;--surface-2:#1C2434;
    --ink:#EEF1F7;--body:#B3BBCB;--muted:#8B94A8;--line:#2A3345;
    --accent:#6E8BFF;--accent-ink:#0D1119;--accent-soft:#1C2540;--accent-deep:#8FA5FF;
    --shadow:0 18px 44px -24px rgba(0,0,0,.7);--shadow-sm:0 6px 18px -12px rgba(0,0,0,.6);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Be Vietnam Pro",Inter,system-ui,sans-serif;color:var(--ink);margin:0}
h1{font-size:clamp(2.05rem,4.4vw,3.35rem);line-height:1.14;letter-spacing:-.025em;font-weight:800}
h2{font-size:clamp(1.65rem,3.2vw,2.5rem);line-height:1.15;letter-spacing:-.02em;font-weight:700}
h3{font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:1.3;font-weight:700}
p{margin:0}a{color:inherit}img{display:block;max-width:100%}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:clamp(56px,7vw,92px) 0}
.lede{font-size:clamp(1rem,1.3vw,1.09rem);max-width:62ch}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:600;font-family:Inter,sans-serif}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;
  border-radius:var(--r-pill);font-weight:600;font-size:.97rem;padding:.85rem 1.5rem;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;font-family:Inter,sans-serif;
  transition:transform .18s cubic-bezier(.16,1,.3,1),background .18s,border-color .18s}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0) scale(.985)}
.btn-sm{padding:.6rem 1.1rem;font-size:.9rem}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--r-input)}

/* header */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:1.4rem;height:70px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.brand img{height:32px;width:auto}/* the file is 1448x240 (6.03:1); sized by height, width follows. */
.nav-links{display:flex;gap:1.4rem;margin-inline:auto;align-items:center}/* auto on both sides centres the links between the brand and the right-hand group, instead of margin-left alone shoving them onto it. */
.nav-links a{text-decoration:none;color:var(--body);font-size:.93rem;font-weight:500;white-space:nowrap;transition:color .18s}
.nav-links a:hover{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:.7rem;flex:none}
.langswitch{display:inline-flex;border:1.5px solid var(--line);border-radius:var(--r-pill);padding:2px;background:var(--surface)}
.langswitch button{border:0;background:transparent;color:var(--muted);font:600 .8rem/1 Inter,sans-serif;
  padding:.45rem .7rem;border-radius:var(--r-pill);cursor:pointer;transition:background .18s,color .18s}
.langswitch button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.menu-btn{display:none;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:var(--r-pill);width:42px;height:42px;font-size:1.3rem;cursor:pointer;align-items:center;justify-content:center}
/* The desktop nav row needs ~1165px: brand + the seven links + the
   language switch and CTA. Below 1200 it used to overflow the page
   sideways rather than collapse, so the hamburger takes over here. */
@media (max-width:1199px){
  .nav-links{position:fixed;inset:70px 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem 20px 1.1rem;display:none}
  .nav-links a{padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links.open{display:flex}
  .menu-btn{display:inline-flex}
  /* The links are position:fixed here, so nothing is left in the row
     to push this group over; without it the switch and the hamburger
     sit against the logo with the whole right half empty. */
  .nav-right{margin-left:auto}
  .nav-right .btn-primary{display:none}
}

/* ---------- hero: full-bleed photo with anchored panel ---------- */
.phero{position:relative;padding:0;min-height:clamp(520px,62vh,640px);display:flex;align-items:flex-end;overflow:hidden}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(11,16,26,.93) 0%,rgba(11,16,26,.82) 38%,rgba(11,16,26,.28) 74%,rgba(11,16,26,.12) 100%)}
.phero .wrap{position:relative;z-index:2;padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(44px,5vw,68px)}
.phero-copy{max-width:620px}
.phero h1{color:#fff;margin:.85rem 0 0;font-size:clamp(1.95rem,3.5vw,2.85rem)}
.phero-copy>*{min-width:0}
.phero p{color:rgba(255,255,255,.88);margin-top:1.05rem;max-width:44ch;font-size:clamp(1rem,1.3vw,1.09rem)}
.phero .eyebrow{color:#EEEEFF}
.phero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.phero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.phero .btn-ghost:hover{border-color:#fff;color:#fff}

/* ---------- two paths (comparison) ---------- */
.paths{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(18px,2.6vw,28px);margin-top:2.4rem;align-items:start}
.pcol{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);overflow:hidden}
.pcol-head{padding:clamp(20px,2.4vw,26px);border-bottom:1px solid var(--line)}
.pcol-head h3{margin-bottom:.4rem}
.pcol-head p{font-size:.93rem;color:var(--muted)}
.prow{padding:clamp(18px,2.2vw,24px);border-bottom:1px solid var(--line);display:grid;gap:.35rem}
.prow:last-child{border-bottom:0}
.prow .amt{font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:clamp(1.25rem,2vw,1.6rem);
  color:var(--ink);letter-spacing:-.02em}
.prow .cap{font-size:.93rem;color:var(--body)}
.pcol-live{border-color:var(--accent);border-width:1.5px;box-shadow:var(--shadow)}
.pcol-live .pcol-head{background:var(--accent-soft)}
.pcol-live .amt{color:var(--accent)}
.pcol-live .pcol-foot{padding:clamp(18px,2.2vw,24px);border-top:1px solid var(--line)}
@media (max-width:860px){.paths{grid-template-columns:1fr}}

/* ---------- worries: Q over A, two columns ---------- */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px) clamp(24px,4vw,56px);margin-top:2.4rem}
.qa-item{border-top:2px solid var(--accent);padding-top:1.2rem}
.qa-item h3{margin-bottom:.55rem;font-size:1.06rem}
.qa-item p{font-size:.96rem}
@media (max-width:760px){.qa{grid-template-columns:1fr}}

/* ---------- what the child gets: bento ---------- */
.kb{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2.4rem}
.kb-cell{border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface);
  padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:.55rem}
.kb-cell i{font-size:1.6rem;color:var(--accent)}
.kb-cell p{font-size:.94rem}
.kb-wide{grid-column:span 2}
.kb-photo{grid-column:span 2;grid-row:span 2;padding:0;border:0;position:relative;overflow:hidden;min-height:clamp(260px,30vw,380px)}
.kb-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kb-photo .cap{position:relative;margin-top:auto;padding:clamp(20px,2.4vw,28px);color:#fff;
  background:linear-gradient(to top,rgba(11,16,26,.93),rgba(11,16,26,.7) 55%,rgba(11,16,26,0))}
.kb-photo .cap h3{color:#fff}
.kb-photo .cap p{color:rgba(255,255,255,.88);margin-top:.45rem}
@media (max-width:900px){.kb{grid-template-columns:1fr 1fr}.kb-photo{grid-column:span 2;grid-row:auto}}
@media (max-width:620px){.kb{grid-template-columns:1fr}.kb-wide,.kb-photo{grid-column:auto}}

/* ---------- split (reporting to parents) ---------- */
.split{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,56px);align-items:center}
.split img{width:100%;height:clamp(300px,36vw,440px);object-fit:cover;border-radius:var(--r-card);box-shadow:var(--shadow)}
.checks{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.85rem}
.checks li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem}
.checks li i{color:var(--accent);font-size:1.15rem;margin-top:.225rem;flex:none}/* half-leading: (.97rem x 1.65 - 1.15rem) / 2, so the icon centres on the first line instead of riding high. */
@media (max-width:860px){.split{grid-template-columns:1fr}.split .media{order:-1}}

/* ---------- results: photo band + band jumps ---------- */
.jumps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:2.4rem}
.jcell{background:var(--surface);padding:clamp(20px,2.6vw,30px)}
.jcell .j{font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:clamp(1.3rem,2.2vw,1.8rem);
  letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:.45rem}
.jcell .j b{color:var(--accent);font-weight:800}
.jcell .m{font-size:.88rem;color:var(--muted);margin-top:.4rem}
@media (max-width:760px){.jumps{grid-template-columns:1fr 1fr}}
.gallery{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-top:18px}
.gallery img{width:100%;height:clamp(150px,17vw,230px);object-fit:cover;border-radius:var(--r-card)}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr}.gallery img:first-child{grid-column:span 2}}

/* ---------- tuition ---------- */
.tuition{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(22px,3.4vw,48px);margin-top:2.4rem;align-items:start}
.panel{background:var(--surface);border:1.5px solid var(--accent);border-radius:var(--r-card);
  padding:clamp(24px,3vw,32px);box-shadow:var(--shadow)}
.was{font-size:.95rem;color:var(--muted);text-decoration:line-through}
.now{font-family:"Be Vietnam Pro",sans-serif;font-weight:800;font-size:clamp(2rem,3.4vw,2.7rem);
  color:var(--ink);letter-spacing:-.03em;line-height:1.05;margin:.2rem 0 .1rem}
.per{font-size:.9rem;color:var(--muted)}
.panel ul{list-style:none;padding:0;margin:1.3rem 0;display:grid;gap:.6rem}
.panel li{display:flex;gap:.6rem;align-items:flex-start;font-size:.93rem}
.panel li i{color:var(--accent);margin-top:.3rem;flex:none}/* half-leading, as .checks li i above: (.93rem x 1.65 - .93rem) / 2. */
.pledge{border-top:1px solid var(--line);margin-top:1.3rem;padding-top:1.1rem;font-size:.88rem;color:var(--muted)}
.breakdown{display:grid;gap:0}
.brow{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.brow:first-child{border-top:1px solid var(--line)}
.brow .n{font-size:.97rem;color:var(--ink);font-weight:500}
.brow .v{font-size:.95rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:860px){.tuition{grid-template-columns:1fr}}

/* ---------- parent voices ---------- */
.voices{display:grid;gap:0;margin-top:2.4rem}
.voice{display:grid;grid-template-columns:78px 1fr;gap:clamp(16px,2.4vw,28px);
  padding:clamp(22px,2.8vw,32px) 0;border-top:1px solid var(--line)}
.voice:last-child{border-bottom:1px solid var(--line)}
.voice img{width:78px;height:78px;border-radius:50%;object-fit:cover}
.voice blockquote{margin:0;font-family:"Be Vietnam Pro",sans-serif;font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.5;color:var(--ink);font-weight:500;max-width:60ch}
.voice .who{margin-top:.8rem;font-size:.88rem;color:var(--muted)}
.voice .who b{color:var(--ink);font-weight:600}
@media (max-width:620px){.voice{grid-template-columns:1fr}.voice img{width:62px;height:62px}}

/* ---------- faq ---------- */
.faq{margin-top:2.2rem;max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 2.4rem 1.2rem 0;position:relative;
  font-family:"Be Vietnam Pro",sans-serif;font-weight:600;color:var(--ink);font-size:1.03rem;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:1.05rem;font-size:1.5rem;color:var(--accent);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq p{padding:0 0 1.3rem;font-size:.97rem;max-width:70ch}

/* ---------- cta + form ---------- */
.cta{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:clamp(34px,5vw,64px)}
.cta h2{color:#fff;max-width:20ch}
.cta p{color:rgba(255,255,255,.8);margin-top:.9rem;max-width:52ch}
.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.cta .btn-ghost:hover{border-color:#fff;color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.cta-grid{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:clamp(28px,4vw,56px);align-items:start}
.cta-image{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1rem;margin:2rem 0 0;max-width:520px;padding:clamp(14px,2vw,18px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-card)}
.cta-image img{display:block;flex:0 0 auto;width:clamp(140px,18vw,190px);height:auto;border-radius:10px;box-shadow:0 12px 28px -14px rgba(0,0,0,.6)}
.cta-image figcaption{min-width:0}
.cta-image-title{display:block;font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700;line-height:1.2;color:#fff}
.cta-image-note{display:block;margin-top:.5rem;font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.78)}
@media (max-width:860px){.cta-grid{grid-template-columns:1fr}}
@media (prefers-color-scheme: dark){.cta{background:var(--surface-2);border:1px solid var(--line)}}
.formwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,3vw,34px)}
.form{display:grid;gap:.9rem}
.field{display:grid;gap:.4rem}
.field label{font-size:.85rem;font-weight:600;color:var(--ink)}
.field input,.field select{width:100%;padding:.78rem .9rem;border:1.5px solid var(--line);border-radius:var(--r-input);
  background:var(--surface);color:var(--ink);font:400 .97rem Inter,sans-serif}
.field input::placeholder{color:var(--muted)}
.field input:focus,.field select:focus{border-color:var(--accent)}
.help{font-size:.8rem;color:var(--muted)}
.err{font-size:.8rem;color:var(--accent);font-weight:600;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select{border-color:var(--accent)}/* The whole-form error is not inside a .field, so the .invalid rule above can never reveal it; it collapses on its own while empty. */.err.form-error{display:block;margin-bottom:.4rem}/* The captcha's own slot has no input to outline. */.field#f-captcha.invalid .err{display:block}
.form-note{font-size:.84rem;color:var(--muted);margin-top:.7rem}
.sent{display:none;align-items:center;gap:.6rem;color:var(--accent);font-weight:600;font-size:.95rem}
.formwrap.done .form,.formwrap.done .form-note{display:none}
.formwrap.done .sent{display:flex}

/* footer */
footer{border-top:1px solid var(--line);padding:clamp(34px,4vw,52px) 0;background:var(--surface)}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.foot h4{font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.9rem}
.foot a{display:block;text-decoration:none;color:var(--body);font-size:.93rem;padding:.25rem 0}
.foot a:hover{color:var(--accent)}
.foot p{font-size:.9rem;color:var(--muted);max-width:40ch}
.legal{margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.83rem;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:space-between}
@media (max-width:760px){.foot{grid-template-columns:1fr}}

/* motion */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  *{animation:none!important}
}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:10px;z-index:100;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;border-radius:var(--r-pill)}

/* ===== 2026 EXPERIENCE UPGRADE ===== */
/* Secondary accents. Values come from the site scale in
   static/css/styles.css (--color-secondary, --color-success), which is
   what /styleguideline/ documents. The mockups shipped a lavender and a
   mint of their own; do not reintroduce them. */
:root{--secondary:#b966e7;--success:#3EB75E}
body{overflow-x:hidden}
header{transition:transform .35s ease,box-shadow .35s ease}
header.scrolled{box-shadow:0 14px 40px -30px rgba(25,35,53,.48)}
.page-progress{position:fixed;left:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--secondary),var(--success));z-index:1000;transform-origin:left;transform:scaleX(0)}
.page-wipe{position:fixed;inset:0;background:linear-gradient(135deg,var(--ink),#323F92);z-index:999;transform:translateY(100%);pointer-events:none}
.smart-finder{margin-top:1.35rem;background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid color-mix(in srgb,var(--line) 86%,transparent);box-shadow:0 18px 50px -28px rgba(19,31,62,.42);border-radius:20px;padding:12px;backdrop-filter:blur(16px)}
.finder-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.finder-input{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.25rem .9rem;min-height:52px}
.finder-input i{font-size:1.25rem;color:var(--accent)}
.finder-input input{border:0;outline:0;background:transparent;color:var(--ink);font:500 .96rem Inter,sans-serif;width:100%;min-width:0}
.finder-input input::placeholder{color:var(--muted)}
.finder-btn{border:0;border-radius:14px;padding:0 1.15rem;background:var(--ink);color:white;font:700 .92rem Inter,sans-serif;cursor:pointer;transition:.2s}
.finder-btn:hover{transform:translateY(-1px);background:var(--accent)}
.finder-chips{display:flex;gap:8px;overflow:auto;padding-top:9px;scrollbar-width:none}
.finder-chips::-webkit-scrollbar{display:none}
.finder-chip{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--body);border-radius:999px;padding:.46rem .75rem;font:600 .79rem Inter,sans-serif;cursor:pointer;transition:.2s}
.finder-chip:hover,.finder-chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.finder-result{display:none;margin-top:10px;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;font-size:.9rem}
.finder-result.show{display:flex;gap:.7rem;align-items:flex-start;animation:finderIn .3s ease both}
@keyframes finderIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:1rem}
.hero-fact{border:1px solid color-mix(in srgb,var(--line) 85%,transparent);border-radius:14px;padding:12px;background:color-mix(in srgb,var(--surface) 90%,transparent)}
.hero-fact b{display:block;color:var(--ink);font-family:'Be Vietnam Pro',sans-serif;font-size:.95rem}
.hero-fact span{display:block;color:var(--muted);font-size:.78rem;margin-top:.18rem}
.section-kicker{display:inline-flex;align-items:center;gap:.45rem;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:.42rem .72rem;font:700 .76rem Inter,sans-serif;margin-bottom:.8rem}
.rich-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:2rem}
.rich-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.rich-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.rich-card h3{margin:.65rem 0 .45rem}.rich-card p{font-size:.92rem}
.rich-card .iconbox{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:1.3rem}
.rich-card.big{grid-column:span 7}.rich-card.side{grid-column:span 5}.rich-card.third{grid-column:span 4}
.metric-line{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.82rem;color:var(--muted)}
.metric-line b{color:var(--ink)}
.floating-note{position:absolute;right:18px;top:18px;border-radius:999px;background:var(--ink);color:#fff;padding:.35rem .6rem;font-size:.72rem;font-weight:700}
.story-strip{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:2rem}
.story-visual{border-radius:22px;overflow:hidden;min-height:360px;position:relative}.story-visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.story-visual .caption{position:absolute;inset:auto 0 0;padding:24px;background:linear-gradient(transparent,rgba(7,14,31,.86));color:#fff}.story-visual .caption h3{color:#fff}.story-list{display:grid;gap:12px}.story-mini{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;grid-template-columns:42px 1fr;gap:12px}.story-mini i{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:1.15rem}.story-mini h3{font-size:1rem;margin-bottom:.2rem}.story-mini p{font-size:.88rem}
.sticky-cta{position:fixed;right:18px;bottom:18px;z-index:80;background:var(--ink);color:#fff;border-radius:18px;padding:12px 14px;box-shadow:0 18px 45px -18px rgba(0,0,0,.45);display:flex;align-items:center;gap:10px;transform:translateY(120%);opacity:0;transition:.35s cubic-bezier(.16,1,.3,1)}
.sticky-cta.show{transform:none;opacity:1}.sticky-cta span{font-size:.8rem;opacity:.78;display:block}.sticky-cta b{font-size:.9rem;display:block}.sticky-cta a{background:#fff;color:var(--ink);text-decoration:none;border-radius:12px;padding:.65rem .8rem;font-size:.82rem;font-weight:800}
.rv2{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),filter .7s}.rv2.in{opacity:1;transform:none;filter:none}
@media(max-width:860px){.finder-row{grid-template-columns:1fr}.finder-btn{min-height:48px}.hero-facts{grid-template-columns:1fr}.rich-card.big,.rich-card.side,.rich-card.third{grid-column:span 12}.story-strip{grid-template-columns:1fr}.sticky-cta{left:12px;right:12px;bottom:12px}.sticky-cta a{margin-left:auto}.story-visual{min-height:300px}}


/* ===== PREMIUM PARENT CONTENT v2 ===== */
:root{--violet:#b966e7;--warning-tint:#FF8F3C10;--warning-line:#FF8F3C}
.parent-premium{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--accent-soft) 46%,var(--paper)))}.parent-premium::before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;left:-180px;top:-190px;background:radial-gradient(circle,color-mix(in srgb,var(--violet) 14%,transparent),transparent 70%)}
.section-kicker2{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);padding:7px 11px;font-size:.76rem;font-weight:800;margin-bottom:.8rem}.section-head-row{display:flex;justify-content:space-between;align-items:end;gap:22px}.soft-note{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);border:1px solid var(--line);background:var(--surface);padding:8px 11px;border-radius:999px;white-space:nowrap}/* the display/align-items used to live in the 620px media query only, so on desktop the icon sat on the text baseline a pixel high. */
.child-week{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;margin-top:2.1rem}.week-photo{position:relative;border-radius:24px;overflow:hidden;min-height:470px}.week-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.week-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,16,34,.86))}.week-photo .wp-cap{position:absolute;left:0;right:0;bottom:0;padding:26px;z-index:2;color:#fff}.week-photo h3{color:#fff;font-size:1.45rem}.week-photo p{color:rgba(255,255,255,.8);font-size:.9rem;margin-top:.55rem}.week-steps{display:grid;gap:10px}.wstep{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 15px;transition:.22s}.wstep:hover{transform:translateX(4px);border-color:color-mix(in srgb,var(--accent) 34%,var(--line));box-shadow:var(--shadow-sm)}.wstep .daychip{width:54px;height:54px;border-radius:15px;background:var(--surface-2);display:grid;place-items:center;font:800 .72rem Inter;color:var(--muted)}.wstep.hot .daychip{background:var(--accent);color:#fff}.wstep b{display:block;color:var(--ink);font-size:.92rem}.wstep p{font-size:.78rem;color:var(--muted);margin-top:.2rem}.wstep .mins{font-size:.72rem;font-weight:800;color:var(--accent);background:var(--accent-soft);padding:6px 8px;border-radius:999px}
.parent-dashboard{margin-top:2.2rem;border-radius:26px;background:#192335;padding:14px;box-shadow:0 30px 80px -38px rgba(15,23,42,.7)}.pd-top{height:45px;display:flex;align-items:center;gap:7px;padding:0 8px}.pd-top i{color:#6b7385}.pd-top span{font-size:.72rem;color:#6b7385}.pd-body{background:#F5F7FA;border-radius:18px;padding:22px;color:#273041}.pd-header{display:flex;justify-content:space-between;align-items:center;gap:18px}.pd-header h3{color:#192335}.student-pill{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #e6e3f1;border-radius:999px;padding:7px 11px;font-size:.72rem;color:#273041}.student-pill i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#EEEEFF;color:#2f57ef}.pd-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-top:17px}.p-card{background:#fff;border:1px solid #e6e3f1;border-radius:16px;padding:17px}.p-card h4{font:700 .82rem 'Be Vietnam Pro';color:#192335;margin:0 0 13px}.p-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.p-stat{background:#F5F7FA;border-radius:12px;padding:11px}.p-stat b{display:block;color:#192335;font-size:1.05rem}.p-stat span{font-size:.66rem;color:#6b7385}.report-bars{display:grid;gap:10px;margin-top:14px}.rbar{display:grid;grid-template-columns:84px 1fr 36px;gap:9px;align-items:center;font-size:.7rem}.rbar .track{height:7px;background:#e6e3f1;border-radius:99px;overflow:hidden}.rbar .track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--secondary));animation:growP 1.2s cubic-bezier(.16,1,.3,1) both;transform-origin:left}.rbar b{color:#192335;text-align:right}.alert-card{border-radius:14px;background:var(--warning-tint);border:1px solid var(--warning-line);padding:13px;font-size:.74rem;line-height:1.5}.alert-card b{display:block;color:#192335;margin-bottom:4px}.mentor-card{display:flex;gap:10px;margin-top:10px;padding:12px;border-radius:14px;background:#EEEEFF}.mentor-avatar{width:38px;height:38px;border-radius:12px;background:#2f57ef;color:#fff;display:grid;place-items:center;font-weight:800}.mentor-card b{font-size:.76rem;color:#192335;display:block}.mentor-card span{font-size:.67rem;color:#6b7385}.pd-note{text-align:center;color:var(--muted);font-size:.79rem;margin-top:11px}@keyframes growP{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.journey-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:2rem;position:relative}.journey-grid::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;background:linear-gradient(90deg,var(--accent),var(--violet),var(--success));opacity:.25}.journey{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;z-index:1;transition:.22s}.journey:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}.journey .num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800;font-size:.78rem;box-shadow:0 0 0 7px var(--paper)}.journey h3{font-size:1rem;margin:18px 0 6px}.journey p{font-size:.84rem}.roles{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}.role{font-size:.65rem;border:1px solid var(--line);background:var(--surface-2);padding:5px 7px;border-radius:999px;color:var(--muted);font-weight:700}
.trust-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:2rem}.trust-main{background:var(--ink);border-radius:24px;padding:26px;color:#fff;display:grid;grid-template-columns:1fr 210px;gap:18px;align-items:center;overflow:hidden;position:relative}.trust-main h3{color:#fff;font-size:1.45rem}.trust-main p{color:rgba(255,255,255,.76);font-size:.9rem;margin-top:.7rem}.trust-orbit{height:190px;position:relative}.orbit{position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%;inset:15px}.orbit.two{inset:45px}.orbit-dot{position:absolute;width:52px;height:52px;border-radius:17px;background:#fff;color:var(--accent);display:grid;place-items:center;font-size:1.35rem;box-shadow:0 12px 24px rgba(0,0,0,.2)}.orbit-dot.a{left:0;top:60px}.orbit-dot.b{right:6px;top:15px}.orbit-dot.c{right:20px;bottom:8px}.trust-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trust-card{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:17px}.trust-card i{font-size:1.25rem;color:var(--accent)}.trust-card b{display:block;color:var(--ink);font-size:.92rem;margin-top:8px}.trust-card span{font-size:.76rem;color:var(--muted)}
@media(max-width:920px){.child-week,.trust-grid{grid-template-columns:1fr}.pd-grid{grid-template-columns:1fr}.journey-grid{grid-template-columns:1fr 1fr}.journey-grid::before{display:none}.trust-main{grid-template-columns:1fr}.trust-orbit{display:none}}
@media(max-width:620px){.journey-grid,.trust-side{grid-template-columns:1fr}.section-head-row{display:block}.soft-note{margin-top:12px}.week-photo{min-height:340px}.wstep{grid-template-columns:46px 1fr}.wstep .mins{display:none}.wstep .daychip{width:46px;height:46px}.p-stat-grid{grid-template-columns:1fr}.pd-body{padding:14px}.pd-header{align-items:flex-start;flex-direction:column}}


/* ---------- draft preview ribbon ----------
   Not from the mockup. Staff can open an unpublished page while visitors get
   a 404, so the page has to say which one it is — see lp/v2/_base.html. */
.draft-ribbon{background:#FF8F3C;color:#192335;text-align:center;padding:8px 20px;
  font-size:.8125rem;font-weight:700;letter-spacing:.3px;position:relative;z-index:110}

/* The success panel carries a Zalo button under its line of text, because
   nothing is posted anywhere yet and Zalo is the channel that does work.
   Stack it rather than letting the flex row squash the button. */
.sent{align-items:flex-start}
.sent > span{display:flex;flex-direction:column;align-items:flex-start;
  font-weight:600;line-height:1.5}