/* Kite marketing landing · art direction "Warm & human" (light only; never data-theme="dim").
   Marketing-site exception (DESIGN.md "Marketing site exception"): large cobalt fields and expressive, original
   illustration (people and scenes) are allowed here and nowhere in admin/store/learn.
   Palette: the buyer "có hồn" tokens (--brand-page/-surface/-ink) warmed by a dawn tint mixed from the wing
   (a tint, never cream), plus the deep --k-m-* field for the one night scene (2 giờ sáng). Every colour is a token
   or a color-mix of tokens. Type: light 300 display set against black 900 emphasis (one phrase per headline).
   Contrast (WCAG 2.1, computed): ink on --dawn 10.8:1 · on --dawn-2 9.6:1 · ink-2 on --dawn 7.3:1 · on page 7.9:1;
   --k-wing on --dawn 4.4:1 → wing text is ≥ 24px 900 only (large text); small wing text sits on page/surface (4.8:1).
   On the field: --k-m-ink 13.5:1 on m-900, --k-m-ink-2 ≥ 4.57:1 everywhere on the field.
   The chat demos (chat-demo.css/js) are illustrations: each conversation plays once, never loops, and
   prefers-reduced-motion shows the finished conversation. Mobile-first. */

*,*::before,*::after{box-sizing:border-box}
:root{
  --dawn:color-mix(in srgb,var(--k-wing) 10%,var(--brand-surface));   /* #F0E5E4 */
  --dawn-2:color-mix(in srgb,var(--k-wing) 18%,var(--brand-surface)); /* #EBD7D3 */
  --skin:color-mix(in srgb,var(--k-wing) 30%,var(--brand-surface));
  --skin-2:color-mix(in srgb,var(--k-wing) 40%,var(--brand-surface));
  --skin-line:color-mix(in srgb,var(--k-wing) 62%,var(--brand-ink));
  --art-line:var(--brand-deep);
  --lift:0 40px 70px -32px rgba(36,48,66,.5);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--k-topbar) + 16px)}
body{margin:0;font-family:var(--k-font);font-size:var(--k-fs-16);line-height:var(--k-lh-body);color:var(--brand-ink);background-color:var(--brand-page);font-optical-sizing:auto;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}

/* ---------- Art palette: classes the inline SVGs in src/art/ use (strokes share one weight system:
   2.5 outline · 1.6 string · 1.5 skin) ---------- */
.art{display:block;overflow:visible}
.art .ln{fill:none;stroke:var(--art-line);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.art .paper.ln,.art .dawn.ln,.art .dawn2.ln,.art .cobalt.ln{fill-rule:nonzero}
.art .ln-s{fill:none;stroke:var(--k-string-strong);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.art .str{fill:none;stroke:var(--k-string-strong);stroke-width:1.6;stroke-linecap:round;opacity:.75}
.art .ln-skin{fill:none;stroke:var(--skin-line);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.art .nail.ln-skin{fill:var(--dawn)}
.art .ln-on-cobalt{fill:none;stroke:var(--k-m-500);stroke-width:3;stroke-linecap:round}
.art .paper{fill:var(--brand-surface)}
.art .dawn{fill:var(--dawn)}
.art .dawn2{fill:var(--dawn-2)}
.art .wing{fill:var(--k-wing)}
.art .cobalt{fill:var(--k-cobalt)}
.art .deep{fill:var(--brand-deep)}
.art .ink{fill:var(--brand-ink)}
.art .skin{fill:var(--skin)}
.art .skin2{fill:var(--skin-2)}
.art .nail{fill:var(--dawn)}
.art .cloud path,.art path.cloud{fill:var(--brand-surface);stroke:var(--k-cloud);stroke-width:1.6;stroke-linejoin:round}
.art .step{fill:var(--brand-surface);stroke:var(--k-string);stroke-width:1.6}
.art .step.is-done{fill:var(--k-string-strong);stroke:var(--k-string-strong)}
.art .step.is-now{fill:var(--k-wing);stroke:var(--k-wing)}
.art .op-6{opacity:.6}

/* Emphasis: one phrase per headline, black 900 in the wing (large text only, see contrast note above) */
.hl{font-style:normal;font-weight:var(--k-w-black);color:var(--k-wing);letter-spacing:-.03em}
img{max-width:100%;height:auto;display:block}
a{color:var(--k-link);text-underline-offset:3px}
h1,h2,h3{line-height:var(--k-lh-tight);margin:0;text-wrap:balance}
p{margin:0 0 var(--k-s-4)}
p:last-child{margin-bottom:0}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Phone/tablet-only (m-) and desktop-only (d-) variants of the same content: the hidden one is display:none,
   so screen readers only meet the one on screen. Desktop starts at 1024px. */
@media (min-width:1024px){.m-only{display:none!important}}
@media (max-width:1023px){.d-only{display:none!important}}

/* Focus: 3px cobalt ring + 2px offset */
:focus-visible{outline:var(--k-ring-w) solid var(--k-ring-color);outline-offset:var(--k-ring-offset);border-radius:var(--k-r-xs)}

.skip{position:absolute;left:var(--k-s-4);top:-100px;z-index:100;background:var(--k-surface);color:var(--k-ink);padding:var(--k-s-3) var(--k-s-4);border-radius:var(--k-r-sm);box-shadow:var(--k-sh-pop);font-weight:var(--k-w-bold)}
.skip:focus{top:var(--k-s-3)}

.wrap{width:100%;max-width:var(--k-content-max);margin:0 auto;padding:0 var(--k-s-5)}
@media (min-width:768px){.wrap{padding:0 var(--k-s-8)}}

/* ---------- Buttons (44px min target) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--k-s-2);min-height:var(--k-hit);padding:0 var(--k-s-5);border-radius:var(--k-r-pill);font:inherit;font-weight:var(--k-w-heavy);font-size:var(--k-fs-16);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color var(--k-dur) var(--k-ease),transform var(--k-dur-fast) var(--k-ease),border-color var(--k-dur) var(--k-ease)}
.btn:active{transform:translateY(1px)}
/* §4 slot 4: primary gradient, white text 5.6:1 at the lightest stop */
.btn--primary{background:var(--k-grad-primary);color:var(--k-on-cobalt)}
.btn--primary:hover{background:var(--k-grad-primary-hover)}

.btn--lg{min-height:52px;padding:0 var(--k-s-6);font-size:var(--k-fs-18)}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Header: translucent surface ---------- */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--brand-page) 84%,transparent);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid color-mix(in srgb,var(--brand-line) 60%,transparent)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:var(--k-s-4);height:var(--k-topbar)}
.logo{display:inline-flex;align-items:center;gap:var(--k-s-2);color:var(--k-ink);text-decoration:none;font-weight:var(--k-w-black);font-size:var(--k-fs-20);letter-spacing:-.01em;min-height:var(--k-hit)}
.logo svg{width:24px;height:24px;color:var(--k-string-strong)}
.nav{display:none;gap:var(--k-s-1)}
.nav a{color:var(--k-ink-2);text-decoration:none;font-weight:var(--k-w-semi);font-size:var(--k-fs-15);padding:0 var(--k-s-3);min-height:var(--k-hit);display:inline-flex;align-items:center;border-radius:var(--k-r-pill);transition:background-color var(--k-dur) var(--k-ease),color var(--k-dur) var(--k-ease)}
.nav a:hover{background:var(--k-hover);color:var(--k-ink)}
.top .btn{min-height:40px;padding:0 var(--k-s-4);font-size:var(--k-fs-15)}
@media (pointer:coarse){.top .btn{min-height:var(--k-hit)}}
@media (min-width:900px){.nav{display:flex}}

/* ---------- Eyebrow: diamond + label (string/diamond language) ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--k-s-2);font-size:var(--k-fs-13);font-weight:var(--k-w-heavy);letter-spacing:.08em;text-transform:uppercase;color:var(--k-muted)}
.eyebrow::before{content:"";width:var(--k-diamond-size);height:var(--k-diamond-size);border-radius:var(--k-diamond-radius);transform:rotate(45deg);background:var(--k-cobalt);flex:none}

/* ---------- Hero: morning sky warming to a dawn horizon; light 300 headline, "bằng AI" in black wing ---------- */
.hero{position:relative;overflow:hidden;padding:var(--k-s-10) 0 var(--k-s-12);background:linear-gradient(180deg,var(--k-sky-sang-top) 0%,var(--brand-page) 42%,var(--dawn) 100%)}
.hero__grid{display:grid;gap:var(--k-s-10);align-items:center}
@media (min-width:1024px){.hero{padding:64px 0 96px}.hero__grid{grid-template-columns:minmax(0,13fr) minmax(0,11fr);gap:var(--k-s-10)}}
.hero__copy{position:relative;z-index:1;min-width:0}
.tagline{margin:0 0 var(--k-s-5);font-size:clamp(19px,1.7vw,24px);font-weight:var(--k-w-black);letter-spacing:-.01em;line-height:1.2;color:var(--brand-deep)}
.tagline span+span{color:var(--k-wing)}
.hero h1{font-size:clamp(44px,5.4vw,78px);font-weight:300;letter-spacing:-.045em;line-height:1;margin:0 0 var(--k-s-6);color:var(--brand-ink);text-wrap:balance}
.nw{white-space:nowrap}
.hero h1 .hl{letter-spacing:-.05em;white-space:nowrap}
.hero__lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:560px;margin-bottom:var(--k-s-6);color:var(--brand-ink-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--k-s-3);margin-bottom:var(--k-s-5)}
.hero__note{display:flex;gap:var(--k-s-2);align-items:flex-start;font-size:var(--k-fs-15);max-width:500px;color:var(--brand-ink-2)}
.hero__note svg{flex:none;width:14px;height:14px;margin-top:5px;color:var(--k-wing)}
/* Stage: the sky art fills the column; the chat sits low-left, the kite flies out at the top-right. */
.hero__stage{position:relative;min-width:0;padding:96px 18% 0 0}
.hero__art{position:absolute;inset:0 -6% auto auto;width:112%;height:auto;pointer-events:none}
.hero__stage .demo{position:relative;z-index:1}
.hero__stage .chat{box-shadow:var(--lift),0 0 0 1px var(--brand-line)}
@media (max-width:639px){.hero__stage{padding:132px 0 0}.hero__art{width:100%;inset:0 -4px auto auto}}
/* Below 1024px: the short paragraph (hero.sub_m), one button with the secondary action as a text link, and less
   air, so the chat's first bubble peeks in on the first 390×844 screen. */
@media (max-width:1023px){
  .hero{padding-top:var(--k-s-6)}
  .hero__grid{gap:var(--k-s-2)}
  .tagline{margin-bottom:var(--k-s-3)}
  .hero h1{margin-bottom:var(--k-s-4)}
  .hero__lede{margin-bottom:var(--k-s-5)}
  .hero__cta{flex-direction:column;align-items:flex-start;gap:var(--k-s-1);margin-bottom:var(--k-s-3)}
  .hero__cta .btn--ghost{min-height:var(--k-hit);padding:0 var(--k-s-1);margin-left:calc(-1 * var(--k-s-1));background:none;border:0;border-radius:var(--k-r-xs);color:var(--k-link);font-size:var(--k-fs-16);font-weight:var(--k-w-bold);text-decoration:underline;text-underline-offset:3px}
  .hero__cta .btn--ghost:hover{background:none;color:var(--brand-ink)}
  .hero__note{font-size:var(--k-fs-14)}
}
@media (max-width:639px){.hero__stage{padding-top:104px}}

/* ---------- Sections: generous air, backgrounds alternate page / dawn / one night field ---------- */
.sec{padding:var(--k-s-12) 0}
@media (min-width:768px){.sec{padding:112px 0}}

/* Pricing: the single First Flight line */
.ff-line{display:inline-flex;align-items:center;gap:var(--k-s-2);font-weight:var(--k-w-heavy);color:var(--k-over);background:var(--k-over-bg);border-radius:var(--k-r-pill);padding:6px 14px}
.head .ff-line{font-size:var(--k-fs-16);margin-top:var(--k-s-5)}
.ff-line svg{width:12px;height:12px;flex:none}
.plan__price abbr{text-decoration:none}
/* ---------- Shared: big light line with one wing phrase ---------- */
.big-line{margin:var(--k-s-12) 0 0;font-size:clamp(26px,3.4vw,44px);font-weight:300;letter-spacing:-.03em;line-height:1.2;max-width:900px;color:var(--brand-ink)}
.big-line .hl{letter-spacing:-.035em}

/* ---------- The shift: a tangled string of tools vs one kite on a cobalt field ---------- */
.shift{background:var(--brand-page)}
.vs{display:grid;gap:var(--k-s-5)}
@media (min-width:900px){.vs{grid-template-columns:1fr 1fr;gap:var(--k-s-6)}}
.vs__col{position:relative;border-radius:var(--k-r-xl);padding:var(--k-s-6);background:var(--brand-surface);border:1px solid var(--brand-line)}
@media (min-width:640px){.vs__col{padding:var(--k-s-8)}}
.vs__col h3{font-size:var(--k-fs-24);font-weight:var(--k-w-black);letter-spacing:-.02em;margin-bottom:var(--k-s-4)}
.tangle{position:relative;margin:0 calc(-1 * var(--k-s-2)) var(--k-s-5)}
.tangle__art{position:absolute;inset:0;width:100%;height:100%}
.tools{position:relative;list-style:none;margin:0;padding:var(--k-s-5) 0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--k-s-3) var(--k-s-2)}
.tools li{font-size:var(--k-fs-14);font-weight:var(--k-w-heavy);color:var(--brand-ink);background:var(--brand-raised);border:1px solid var(--brand-line-2);border-radius:var(--k-r-sm);padding:5px 12px;box-shadow:0 6px 14px -8px rgba(36,48,66,.35);transform:rotate(-3deg)}
.tools li:nth-child(2n){transform:rotate(2.5deg) translateY(6px)}
.tools li:nth-child(3n){transform:rotate(-1deg) translateY(-4px)}
.vs__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--k-s-3);color:var(--brand-ink)}
.vs__list li{display:flex;gap:var(--k-s-3);align-items:flex-start}
.vs__list svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--brand-muted)}
/* "Với Kite": the landing's deep cobalt field (marketing exception) */
.vs__col--kite{background:var(--k-m-field);border:0;color:var(--k-m-ink);overflow:hidden}
.vs__col--kite h3{color:var(--k-m-ink)}
.vs__col--kite .vs__list{color:var(--k-m-ink)}
.vs__col--kite .vs__list svg{color:var(--k-m-wing)}
.vs__tag{display:inline-flex;align-items:center;gap:var(--k-s-2);font-size:var(--k-fs-15);font-weight:var(--k-w-heavy);color:var(--k-m-ink-2);margin:0 0 var(--k-s-6);max-width:78%}
.vs__tag svg{width:18px;height:18px;flex:none}
.vs__kite{position:absolute;right:18px;top:14px;width:110px;height:auto}
@media (min-width:900px){.vs__col--kite{padding-bottom:180px}.vs__kite{top:auto;bottom:24px;right:32px;width:190px}}
.vs__col--kite .art .ln{stroke:var(--k-m-ink)}
.vs__col--kite .art .str,.vs__col--kite .art .ln-s{stroke:var(--k-m-ink-2)}
.vs__col--kite .art .step{fill:transparent;stroke:var(--k-m-ink-2)}
.vs__col--kite .art .step.is-done{fill:var(--k-m-ink-2)}
.vs__col--kite .art .step.is-now,.vs__col--kite .art .wing{fill:var(--k-m-wing);stroke:var(--k-m-wing)}
.vs__col--kite .art .paper{fill:var(--k-m-700)}

/* ---------- Kite Agent safety: three keys ---------- */
.safe{position:relative;z-index:1;margin-top:var(--k-s-6)}
.safe h3{font-size:clamp(22px,2.2vw,28px);font-weight:300;letter-spacing:-.02em;margin-bottom:var(--k-s-5)}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--k-s-3)}
@media (min-width:640px){.cards{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.cards li{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:var(--k-r-lg);padding:var(--k-s-6)}
.cards svg{width:44px;height:44px;padding:11px;border-radius:50%;background:var(--dawn-2);color:var(--k-wing);margin-bottom:var(--k-s-4);display:block}
.cards b,.points b{display:block;font-size:var(--k-fs-18);font-weight:var(--k-w-black);color:var(--brand-ink);margin-bottom:4px}
.cards span,.points span{color:var(--brand-ink-2);font-size:var(--k-fs-16)}

/* ---------- Kite hiểu học viên: steps on a string, real screens at 1:1 ---------- */
.learn{background:linear-gradient(180deg,var(--dawn) 0,var(--brand-page) 360px)}
.learn__row{display:grid;gap:var(--k-s-10);align-items:center}
.learn__row+.learn__row{margin-top:96px}
@media (min-width:1024px){.learn__row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}.learn__row--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.learn__row--flip>:first-child{order:2}}
.learn__row>*{min-width:0}
.steps{list-style:none;margin:0;padding:0 0 0 56px;position:relative;display:grid;gap:var(--k-s-8);counter-reset:step}
.steps--top{counter-reset:step 2}
.steps::before{content:"";position:absolute;left:18px;top:14px;bottom:14px;border-left:1.6px solid var(--k-string)}
.steps li{position:relative;counter-increment:step}
.steps li::before{content:"";position:absolute;left:-44px;top:10px;width:12px;height:12px;border-radius:2px;transform:rotate(45deg);background:var(--k-string-strong);box-shadow:0 0 0 6px var(--brand-page)}
.steps li.is-top::before{background:var(--k-wing);box-shadow:0 0 0 6px var(--brand-page),0 0 0 11px color-mix(in srgb,var(--k-wing) 22%,transparent)}
.steps b::before{content:counter(step,decimal-leading-zero);display:block;font-size:var(--k-fs-14);font-weight:var(--k-w-black);letter-spacing:.08em;color:var(--k-wing);margin-bottom:2px}
.steps b{display:block;font-size:clamp(20px,1.9vw,26px);font-weight:var(--k-w-black);letter-spacing:-.02em;line-height:1.2;margin-bottom:6px}
.steps span{display:block;color:var(--brand-ink-2);font-size:var(--k-fs-16);max-width:460px}
/* Crops: object-fit:none draws the screenshot at its own size (1 image px = 1 CSS px), object-position picks the area. */
.learn__screens{position:relative;display:grid;gap:var(--k-s-4)}
.crop{position:relative;overflow:hidden;border-radius:var(--k-r-md);background:var(--brand-surface);box-shadow:var(--lift),0 0 0 1px var(--brand-line)}
.crop img{width:100%;max-width:none;object-fit:none}
.crop--table img{height:360px;object-position:-232px -140px}
.crop--profile img{height:420px;object-position:-1082px -430px}
.browser__bar{display:flex;align-items:center;gap:var(--k-s-2);height:32px;padding:0 var(--k-s-3);background:var(--k-head);border-bottom:1px solid var(--k-line)}
.browser__bar i{width:10px;height:10px;border-radius:50%;background:var(--k-line-2);flex:none}
.browser__url{margin-left:var(--k-s-2);flex:1;max-width:320px;height:20px;border-radius:var(--k-r-pill);background:var(--k-raised);border:1px solid var(--k-line);font-size:var(--k-fs-11);color:var(--k-muted);display:flex;align-items:center;padding:0 var(--k-s-3);white-space:nowrap;overflow:hidden}
@media (min-width:1024px){
  .learn__screens{display:block;padding-bottom:250px}
  .crop--table{margin-right:0}
  .crop--table img{height:520px}
  .crop--profile{position:absolute;right:-40px;bottom:0;width:340px;transform:rotate(1.5deg)}
  .crop--profile img{height:470px}
}
/* Below 1024px: the learner profile from the screenshot, rebuilt at phone size (admin tokens, like the live demo). */
.learner{width:100%;max-width:400px;justify-self:center;background:var(--k-surface);color:var(--k-ink);border:1px solid var(--k-line);border-radius:var(--k-r-lg);box-shadow:var(--lift),0 0 0 1px var(--brand-line);padding:var(--k-s-5)}
.learner p{margin:0}
.learner__crumb{font-size:var(--k-fs-13);color:var(--k-muted);margin-bottom:var(--k-s-2)!important}
.learner__head{display:flex;align-items:center;gap:var(--k-s-3)}
.learner__av{flex:none;width:48px;height:48px;border-radius:var(--k-r-md);display:grid;place-items:center;background:var(--k-select);color:var(--k-string-strong);font-style:normal;font-weight:var(--k-w-heavy);font-size:var(--k-fs-15)}
.learner__head b{display:block;font-size:var(--k-fs-20);font-weight:var(--k-w-black);letter-spacing:-.01em;line-height:1.25}
.learner__head small{display:block;font-size:var(--k-fs-14);color:var(--k-ink-2);overflow-wrap:anywhere}
.learner__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-s-2);margin:var(--k-s-4) 0}
.learner__stats div{background:var(--k-raised);border:1px solid var(--k-line);border-radius:var(--k-r-sm);padding:var(--k-s-2) var(--k-s-3)}
.learner__stats dt{font-size:var(--k-fs-13);font-weight:var(--k-w-bold);color:var(--k-muted)}
.learner__stats dd{margin:0;font-size:var(--k-fs-20);font-weight:var(--k-w-heavy)}
.learner__h{font-size:var(--k-fs-13);font-weight:var(--k-w-heavy);letter-spacing:.08em;text-transform:uppercase;color:var(--k-muted);margin-bottom:var(--k-s-2)!important}
.learner__course+.learner__course{margin-top:var(--k-s-4);padding-top:var(--k-s-4);border-top:1px solid var(--k-line)}
.learner__ct{display:flex;justify-content:space-between;align-items:baseline;gap:var(--k-s-3);font-size:var(--k-fs-16)}
.learner__ct b{font-weight:var(--k-w-heavy)}
.learner__ct .num{font-weight:var(--k-w-heavy);color:var(--k-ink-2)}
.learner__bar{display:block;height:6px;margin:6px 0;border-radius:var(--k-r-pill);background:var(--k-bar);overflow:hidden}
.learner__bar i{display:block;height:100%;border-radius:inherit;background:var(--k-cobalt)}
.learner__bar--3 i{width:3%}
.learner__bar--100 i{width:100%;background:var(--k-paid-dot)}
.learner__meta{font-size:var(--k-fs-15);color:var(--k-ink-2)}
.learner__stop{display:flex;gap:var(--k-s-2);align-items:flex-start;margin-top:var(--k-s-2)!important;padding:var(--k-s-2) var(--k-s-3);border-radius:var(--k-r-sm);background:var(--k-wait-bg);color:var(--k-wait);font-size:var(--k-fs-15);font-weight:var(--k-w-bold)}
.learner__stop svg{width:16px;height:16px;flex:none;margin-top:3px}
.learn__phone{position:relative;display:flex;justify-content:flex-start;padding:var(--k-s-6) 0 var(--k-s-8)}
.learn__phone::before{content:"";position:absolute;inset:6% 0 0 10%;border-radius:50%;background:radial-gradient(closest-side,var(--dawn-2),transparent)}
.learn__steps{position:relative;padding-top:150px}
.learn__kite{position:absolute;left:8px;top:0;width:120px;height:auto}
.phone{position:relative;flex:none;background:var(--brand-ink);border-radius:40px;padding:9px;box-shadow:var(--lift)}
.phone__screen{background:var(--brand-surface);border-radius:32px;overflow:hidden;position:relative}
.phone__screen img{width:100%;display:block;padding-top:16px;background:var(--brand-surface)}
.phone__notch{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:1;width:84px;height:18px;background:var(--brand-ink);border-radius:0 0 12px 12px}
.learn__phone .phone{width:min(78%,498px);transform:rotate(-3deg)}
.phone--crop .phone__screen{height:min(116vw,500px)}
.phone--crop .phone__screen img{height:auto}
.cert-img{position:absolute;z-index:2;right:-24px;bottom:-56px;width:min(54%,360px);border-radius:var(--k-r-md);box-shadow:var(--k-sh-dialog);transform:rotate(4deg)}
@media (max-width:1023px){.cert-img{right:0;bottom:0}}

/* ---------- Tăng trưởng: segments as tags, the win-back chat under kites flying home ---------- */
.grow-sec{background:var(--brand-page)}
.grow{display:grid;gap:var(--k-s-10);align-items:start}
@media (min-width:1024px){.grow{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px}}
.grow>*{min-width:0}
.grow__side{display:grid;gap:var(--k-s-10);align-content:start}
.segs{background:var(--dawn);border-radius:var(--k-r-xl);padding:var(--k-s-6)}
.segs__label{font-size:var(--k-fs-13);font-weight:var(--k-w-heavy);letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink-2);margin-bottom:var(--k-s-4)}
.segs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--k-s-2)}
.segs li{display:inline-flex;align-items:center;gap:var(--k-s-2);font-size:var(--k-fs-15);font-weight:var(--k-w-bold);color:var(--brand-ink);background:var(--brand-surface);border:1px solid var(--brand-line-2);border-radius:var(--k-r-pill);padding:7px 14px;box-shadow:0 6px 14px -10px rgba(36,48,66,.4)}
.segs li:nth-child(2n){margin-left:var(--k-s-6)}
.segs li svg{width:10px;height:10px;color:var(--k-wing);flex:none}
.grid-points{list-style:none;margin:0;padding:0;display:grid;gap:var(--k-s-6) var(--k-s-6);counter-reset:gp}
@media (min-width:560px){.grid-points{grid-template-columns:1fr 1fr}}
.grid-points li{counter-increment:gp;border-top:1.6px solid var(--k-string);padding-top:var(--k-s-3)}
.grid-points b::before{content:counter(gp,decimal-leading-zero);display:block;font-size:var(--k-fs-14);font-weight:var(--k-w-black);letter-spacing:.08em;color:var(--k-wing);margin-bottom:2px}
.grid-points b{display:block;font-size:var(--k-fs-18);font-weight:var(--k-w-black);margin-bottom:4px}
.grid-points span{color:var(--brand-ink-2)}
.grow__chat{position:relative;padding-top:104px}
.demo__impact--solo{display:grid;gap:2px;margin:0 0 var(--k-s-4);font-size:var(--k-fs-15);color:var(--brand-ink-2)}
.demo__impact--solo b{font-size:clamp(18px,1.6vw,21px);font-weight:var(--k-w-black);letter-spacing:-.01em;color:var(--brand-ink)}
.grow__art{position:absolute;right:0;top:0;width:min(320px,86%);height:auto}
.art .dots{stroke-dasharray:2 7}
.grow__chat .chat{box-shadow:var(--lift),0 0 0 1px var(--brand-line)}
.trust{margin:var(--k-s-10) 0 0;display:flex;gap:var(--k-s-3);align-items:flex-start;padding:var(--k-s-5) var(--k-s-6);border-radius:var(--k-r-lg);background:var(--k-ok-bg);color:var(--k-ok);max-width:880px}
.trust svg{width:22px;height:22px;flex:none;margin-top:1px}
.trust b{color:var(--k-ok)}

/* ---------- Vận hành: the night scene (deep field), then day again ---------- */
.own__night{position:relative;overflow:hidden;background:var(--k-m-field);color:var(--k-m-ink);padding:var(--k-s-12) 0 var(--k-s-12)}
@media (min-width:768px){.own__night{padding:112px 0 96px}}
.own__sky{position:absolute;left:0;top:0;width:100%;height:auto;min-height:420px;pointer-events:none}
.own__sky .moon{fill:var(--dawn)}
.own__sky .star path{fill:var(--k-m-ink-2);opacity:.75}
.own__sky .night-str{fill:none;stroke:var(--k-m-ink-2);stroke-width:1.6;stroke-linecap:round;opacity:.55}
.own__sky .night-kite__body{fill:var(--k-m-700)}
.own__sky .night-kite__wing{fill:var(--k-m-wing)}
.own__sky .night-kite__line{fill:none;stroke:var(--k-m-ink);stroke-width:2.5;stroke-linejoin:round}
.own__night .wrap{position:relative}
.own__night .eyebrow{color:var(--k-m-ink-2)}
.own__night .eyebrow::before{background:var(--k-m-wing)}
.own__copy{max-width:720px}
.own__copy h2{font-size:clamp(34px,4.6vw,62px);font-weight:300;letter-spacing:-.04em;line-height:1.05;margin:var(--k-s-3) 0 var(--k-s-5);color:var(--k-m-ink)}
.own__copy .hl{color:var(--k-m-wing)}
.own__night .lead{font-size:var(--k-fs-18);color:var(--k-m-ink-2);max-width:560px;margin:0}
.own__phones{display:flex;justify-content:center;align-items:flex-start;gap:var(--k-s-4);margin-top:var(--k-s-10)}
.own__phones .phone{width:calc(50% - 8px);max-width:498px;padding:6px;border-radius:30px;background:var(--k-m-900);box-shadow:0 40px 80px -30px rgba(0,0,0,.6),0 0 0 1px var(--k-m-glass-line)}
.own__phones .phone__screen{border-radius:24px}
.own__phones .phone__notch{background:var(--k-m-900)}
.phone--qr .phone__screen{height:min(110vw,640px)}
.phone--paid{margin-top:48px}
@media (max-width:639px){.own__phones{display:grid;gap:0}.own__phones .phone{width:84%}.phone--paid{justify-self:end;margin-top:-38%;z-index:1}.learn__phone .phone{width:92%}.cert-img{width:50%;bottom:-28px}}
@media (min-width:1024px){.own__phones{gap:96px;margin-top:64px}.own__phones .phone{padding:9px;border-radius:40px}.own__phones .phone__screen{border-radius:32px}.phone--paid{margin-top:96px}}
.own__fix{display:grid;gap:var(--k-s-8);align-items:center;margin-top:96px}
@media (min-width:1024px){.own__fix{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}}
.own__fix>*{min-width:0}
.points{list-style:none;margin:0;padding:0;display:grid;gap:var(--k-s-6)}
.points li{padding-left:var(--k-s-6);position:relative}
.points li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:var(--k-wing)}
.own__night .points b{color:var(--k-m-ink);font-size:var(--k-fs-20)}
.own__night .points span{color:var(--k-m-ink-2)}
.own__night .points li::before{background:var(--k-m-wing)}
.own__night .demo__impact{color:var(--k-m-ink-2)}
.own__night .demo__impact b{color:var(--k-m-ink)}
.own__night .demo__cap{color:var(--k-m-ink-2)}
.own__night .chat{box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.own__night .demo-ctrl{background:var(--k-m-glass);color:var(--k-m-ink);border-color:var(--k-m-glass-line)}
.own__night .demo-ctrl:hover{background:var(--k-m-glass-line)}
.own__night :focus-visible{outline-color:var(--k-ring-on-field)}
.own__day{padding:var(--k-s-12) 0;background:linear-gradient(180deg,var(--dawn) 0,var(--brand-page) 100%)}
@media (min-width:768px){.own__day{padding:96px 0}}
.own-h{font-size:clamp(28px,3.2vw,40px);font-weight:300;letter-spacing:-.03em;margin:0 0 var(--k-s-6)}
.own-cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--k-s-3)}
@media (min-width:640px){.own-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.own-cards{grid-template-columns:repeat(4,1fr);gap:var(--k-s-4)}}
.own-cards li{background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:var(--k-r-lg);padding:var(--k-s-6)}
.own-cards svg{width:28px;height:28px;color:var(--k-cobalt);margin-bottom:var(--k-s-4);display:block}
@media (max-width:639px){.own-cards li{display:grid;grid-template-columns:28px 1fr;column-gap:var(--k-s-3);padding:var(--k-s-5)}.own-cards svg{grid-row:span 2;margin:0}}
.own-cards b{display:block;font-size:var(--k-fs-20);font-weight:var(--k-w-black);letter-spacing:-.01em;margin-bottom:4px}
.own-cards span{color:var(--brand-ink-2)}
/* Below 1024px the ownership cards and the growth features are compact 2×2 grids. */
@media (max-width:1023px){
  .own-cards{grid-template-columns:1fr 1fr;gap:var(--k-s-2)}
  .own-cards li{display:block;padding:var(--k-s-4)}
  .own-cards svg{width:24px;height:24px;margin:0 0 var(--k-s-2)}
  .own-cards b{font-size:var(--k-fs-16);line-height:1.3}
  .own-cards span{display:block;font-size:var(--k-fs-15);line-height:1.5}
  .grid-points{grid-template-columns:1fr 1fr;gap:var(--k-s-5) var(--k-s-4)}
  .grid-points b{font-size:var(--k-fs-16);line-height:1.3}
  .grid-points span{display:block;font-size:var(--k-fs-15);line-height:1.5}
}

/* ---------- Dành cho ai: the class illustration (src/art/class-scene.svg) in an arched window over a dawn sun ---------- */
.fit-sec{overflow:hidden;background:linear-gradient(180deg,var(--brand-page) 0,var(--dawn) 100%)}
.fitwrap{display:grid;gap:var(--k-s-10);align-items:center}
@media (min-width:1024px){.fitwrap{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px}}
.fitwrap>*{min-width:0}
.class-art{position:relative;margin:0;max-width:440px;justify-self:center;width:100%}
.class-art::before{content:"";position:absolute;z-index:0;width:72%;aspect-ratio:1;right:-14%;bottom:-8%;border-radius:50%;background:var(--dawn-2)}
.class-art__frame{position:relative;z-index:1;aspect-ratio:4/5;overflow:hidden;border-radius:999px 999px var(--k-r-xl) var(--k-r-xl);background:var(--dawn);box-shadow:var(--lift)}
.class-art__svg{width:100%;height:100%}
@media (max-width:1023px){.class-art{max-width:340px}}
.class-art figcaption{position:absolute;z-index:2;left:var(--k-s-4);bottom:var(--k-s-4);font-size:var(--k-fs-12);background:var(--k-toast-bg);color:var(--k-toast-ink);padding:2px 10px;border-radius:var(--k-r-pill)}
/* Class scene motion: the kite flies on its string, the teacher points at the board; loops while in view. */
@media (prefers-reduced-motion:no-preference){
  .class-art .cls-kite{transform-box:view-box;transform-origin:330px 166px}
  .class-art .cls-point{transform-box:view-box;transform-origin:142px 206px}
  .class-art .cls-head{transform-box:view-box;transform-origin:124px 176px}
  .class-art.is-in .cls-kite{animation:cls-fly 4s ease-in-out infinite}
  .class-art.is-in .cls-point{animation:cls-point 3.2s ease-in-out infinite}
  .class-art.is-in .cls-head{animation:cls-head 3.2s ease-in-out infinite}
}
@keyframes cls-fly{0%,100%{transform:rotate(-9deg) translate(-4px,4px)}50%{transform:rotate(9deg) translate(6px,-14px)}}
@keyframes cls-point{0%,100%{transform:none}25%,55%{transform:rotate(-14deg)}40%{transform:rotate(-8deg)}}
@keyframes cls-head{0%,100%{transform:none}25%,60%{transform:rotate(8deg)}}
.fit{display:grid;gap:var(--k-s-4)}
@media (min-width:900px){.fit{grid-template-columns:1fr 1fr;gap:var(--k-s-5)}}
.fit__col{border-radius:var(--k-r-lg);padding:var(--k-s-6);background:var(--brand-surface);border:1px solid var(--brand-line)}
.fit__col--no{background:transparent;border:1.5px dashed var(--brand-line-2)}
.fit__col h3{font-size:var(--k-fs-20);font-weight:var(--k-w-black);margin-bottom:var(--k-s-4);display:flex;gap:var(--k-s-2);align-items:center}
.fit__col h3 svg{width:22px;height:22px;flex:none}
.fit__col ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--k-s-3);color:var(--brand-ink)}
.fit__col li{padding-left:var(--k-s-5);position:relative}
.fit__col li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:1.5px;transform:rotate(45deg);background:var(--k-wing)}
.fit__col--no li::before{background:transparent;border:1.5px solid var(--k-string-strong)}
.ico-yes{color:var(--k-wing)}
.ico-no{color:var(--brand-muted)}

/* ---------- Pricing: TBU set light and large; the recommended plan is a cobalt field ---------- */
.pricing{background:var(--brand-page)}
.plans{display:grid;gap:var(--k-s-4)}
@media (min-width:1024px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch;gap:var(--k-s-5)}}
.plan{position:relative;display:flex;flex-direction:column;background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:var(--k-r-xl);padding:var(--k-s-8) var(--k-s-6) var(--k-s-6)}
.plan h3{font-size:var(--k-fs-24);font-weight:var(--k-w-black);letter-spacing:-.02em}
.plan__for{font-size:var(--k-fs-15);color:var(--brand-ink-2);margin:var(--k-s-1) 0 var(--k-s-6);min-height:3em}
.plan__price{font-size:clamp(56px,6vw,76px);font-weight:300;letter-spacing:-.04em;line-height:.95;color:var(--brand-ink)}
.plan__sub{font-size:var(--k-fs-14);color:var(--brand-ink-2);margin:var(--k-s-2) 0 var(--k-s-6);min-height:1.5em}
.plan ul{list-style:none;margin:0 0 var(--k-s-8);padding:var(--k-s-5) 0 0;border-top:1.6px solid var(--k-string);display:grid;gap:var(--k-s-3);font-size:var(--k-fs-15);color:var(--brand-ink)}
.plan li{display:flex;gap:var(--k-s-2);align-items:flex-start}
.plan li svg{width:18px;height:18px;flex:none;color:var(--k-wing);margin-top:3px}
.plan .btn{margin-top:auto;width:100%}
.btn--ghost{background:var(--brand-raised);color:var(--brand-ink);border-color:var(--brand-line-2)}
.btn--ghost:hover{background:var(--brand-surface)}
.plan--pick{background:var(--k-m-field);border:0;color:var(--k-m-ink);box-shadow:0 40px 80px -36px rgba(19,42,102,.7)}
@media (min-width:1024px){.plan--pick{transform:translateY(-16px)}}
.plan--pick h3,.plan--pick .plan__price,.plan--pick ul{color:var(--k-m-ink)}
.plan--pick .plan__for,.plan--pick .plan__sub{color:var(--k-m-ink-2)}
.plan--pick ul{border-top-color:var(--k-m-glass-line)}
.plan--pick li svg{color:var(--k-m-wing)}
.plan--pick :focus-visible{outline-color:var(--k-ring-on-field)}
.plan__badge{position:absolute;top:-14px;left:var(--k-s-6);background:var(--k-wing);color:var(--k-on-cobalt);font-size:var(--k-fs-13);font-weight:var(--k-w-heavy);padding:4px 14px;border-radius:var(--k-r-pill)}
/* White button on the field: ink on white 12.4:1 */
.btn--on-field{background:var(--brand-raised);color:var(--brand-deep)}
.btn--on-field:hover{background:var(--brand-surface)}
.plans-row{display:grid;gap:var(--k-s-4);margin-top:var(--k-s-5)}
@media (min-width:900px){.plans-row{grid-template-columns:1fr 1fr}}
.plan--slim{padding:var(--k-s-6);background:var(--dawn);border:0}
.plan--slim .plan__top{display:flex;justify-content:space-between;gap:var(--k-s-4);align-items:baseline;flex-wrap:wrap}
.plan--slim .plan__price{font-size:40px}
.plan--slim h3{font-size:var(--k-fs-20)}
.plan--slim p{color:var(--brand-ink);font-size:var(--k-fs-15);margin-top:var(--k-s-2)}
.no-discount{margin-top:var(--k-s-6);font-size:var(--k-fs-15);color:var(--brand-ink-2)}
/* Kite Complete is first in the markup (the first card on phones); from 1024px Kite goes back to the left. */
@media (min-width:1024px){.plans>:nth-child(2){order:-1}}
/* Below 1024px: the plans are a swipe row (see Swipeable rows) with room for the badge; the two add-ons share
   one compact card after it. */
@media (max-width:1023px){
  .plans.swipe{padding-top:var(--k-s-5);padding-bottom:var(--k-s-6)}
  .plan{padding:var(--k-s-7) var(--k-s-5) var(--k-s-5)}
  .plan__for{min-height:0;margin-bottom:var(--k-s-4)}
  .plan__price{font-size:52px}
  .plan__sub{margin-bottom:var(--k-s-4)}
  .plan ul{margin-bottom:var(--k-s-6);padding-top:var(--k-s-4)}
  .plans-row{grid-template-columns:1fr;gap:0;margin-top:var(--k-s-3);background:var(--dawn);border-radius:var(--k-r-xl)}
  .plan--slim{background:none;border-radius:0;padding:var(--k-s-4) var(--k-s-5)}
  .plan--slim+.plan--slim{border-top:1px solid var(--dawn-2)}
  .plan--slim h3{font-size:var(--k-fs-16);line-height:1.3}
  .plan--slim .plan__top{flex-wrap:nowrap}
  .plan--slim .plan__price{font-size:var(--k-fs-24);flex:none}
  .plan--slim p{margin-top:var(--k-s-1)}
  .no-discount{margin-top:var(--k-s-4)}
}

/* ---------- FAQ: sticky head with a kite resting; answers on hairlines ---------- */
.faq-sec{background:linear-gradient(180deg,var(--brand-page) 0,var(--dawn) 100%)}
.faq-grid{display:grid;gap:var(--k-s-6)}
@media (min-width:1024px){.faq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}.faq-head{position:sticky;top:calc(var(--k-topbar) + 40px)}}
.faq-head{margin-bottom:0}
.faq__art{width:min(260px,70%);height:auto;margin-top:var(--k-s-8)}
@media (max-width:1023px){.faq__art{display:none}}
.faq{display:grid;border-top:1.6px solid var(--k-string)}
.faq details{border-bottom:1px solid var(--brand-line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--k-s-4);align-items:center;padding:var(--k-s-5) var(--k-s-2);min-height:64px;font-weight:var(--k-w-heavy);font-size:clamp(17px,1.5vw,20px);letter-spacing:-.01em;border-radius:var(--k-r-sm);transition:background-color var(--k-dur) var(--k-ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;border-radius:2px;transform:rotate(45deg);flex:none;border:1.6px solid var(--k-string-strong);transition:background-color var(--k-dur) var(--k-ease)}
.faq details[open] summary::after{background:var(--k-wing);border-color:var(--k-wing)}
.faq summary:hover{background:color-mix(in srgb,var(--dawn-2) 45%,transparent)}
.faq .faq__a{padding:0 var(--k-s-10) var(--k-s-6) var(--k-s-2);color:var(--brand-ink-2);font-size:var(--k-fs-16)}

/* ---------- Final CTA: dawn, the tagline set big, a kite flying high over the form ---------- */
.wl{position:relative;overflow:hidden;padding:var(--k-s-12) 0;background:linear-gradient(180deg,var(--dawn) 0%,var(--brand-page) 100%)}
@media (min-width:768px){.wl{padding:128px 0}}
.wl__art{position:absolute;left:0;bottom:0;width:100%;height:100%;pointer-events:none}
@media (max-width:1023px){.wl__art{height:auto;top:auto}}
.wl__grid{position:relative;display:grid;gap:var(--k-s-10);align-items:center}
@media (min-width:1024px){.wl__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px}.wl .form{margin-top:120px}}
.wl h2{font-size:clamp(48px,7vw,104px);font-weight:300;letter-spacing:-.05em;line-height:.96;margin:var(--k-s-4) 0 var(--k-s-6);color:var(--brand-ink)}
.wl h2 span,.wl h2 .hl{display:block}
.wl h2 .hl{letter-spacing:-.05em}
.wl__copy>p{font-size:var(--k-fs-18);color:var(--brand-ink-2);max-width:480px}
.wl__points{list-style:none;padding:0;margin:var(--k-s-6) 0 0;display:grid;gap:var(--k-s-3)}
.wl__points li{display:flex;gap:var(--k-s-3);color:var(--brand-ink)}
.wl__points svg{width:16px;height:16px;flex:none;margin-top:5px;color:var(--k-wing)}
.form{position:relative;background:var(--brand-surface);color:var(--brand-ink);border:1px solid var(--brand-line);border-radius:var(--k-r-xl);padding:var(--k-s-6);box-shadow:var(--lift)}
@media (min-width:640px){.form{padding:var(--k-s-8)}}
.form h3{font-size:var(--k-fs-20);font-weight:var(--k-w-black);margin-bottom:var(--k-s-1)}
.form .form__intro{font-size:var(--k-fs-14);color:var(--k-muted);margin-bottom:var(--k-s-5)}
.fld{margin-bottom:var(--k-s-5)}
.fld label{display:block;font-weight:var(--k-w-bold);font-size:var(--k-fs-15);margin-bottom:6px;color:var(--k-ink)}
.fld .hint{display:block;font-size:var(--k-fs-13);color:var(--k-muted);margin:-2px 0 6px}
.fld input,.fld select{width:100%;min-height:48px;padding:0 var(--k-s-4);font:inherit;font-size:var(--k-fs-16);color:var(--k-ink);background-color:var(--k-raised);border:1.5px solid var(--k-line-2);border-radius:var(--k-r-sm);transition:border-color var(--k-dur) var(--k-ease)}
/* Chevron: data URI cannot read tokens; stroke = --k-muted #4F596A */
.fld select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27m6 9 6 6 6-6%27 fill=%27none%27 stroke=%27%234F596A%27 stroke-width=%272.2%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");background-position:right 14px center;background-size:20px 20px;background-repeat:no-repeat;padding-right:var(--k-s-10)}
.fld input::placeholder{color:var(--k-muted);opacity:1}
.fld input:hover,.fld select:hover{border-color:var(--k-muted)}
.fld input:focus-visible,.fld select:focus-visible{outline:var(--k-ring-w) solid var(--k-focus);outline-offset:0;border-color:var(--k-cobalt)}
.fld [aria-invalid="true"]{border-color:var(--k-under)}
.err{display:none;margin-top:6px;font-size:var(--k-fs-14);font-weight:var(--k-w-semi);color:var(--k-under)}
.err.is-on{display:flex;gap:6px;align-items:flex-start}
.form .btn{width:100%}
.form .btn[disabled]{opacity:.7;cursor:progress}
.form .form__fine{font-size:var(--k-fs-13);color:var(--k-muted);margin-top:var(--k-s-3);text-align:center}
.status{display:none;margin-top:var(--k-s-4);padding:var(--k-s-3) var(--k-s-4);border-radius:var(--k-r-sm);font-size:var(--k-fs-15)}
.status.is-on{display:block}
.status--ok{background:var(--k-ok-bg);color:var(--k-ok)}
.status--warn{background:var(--k-wait-bg);color:var(--k-wait)}
.status--err{background:var(--k-under-bg);color:var(--k-under)}

/* Footer */
.foot{padding:var(--k-s-10) 0;border-top:1px solid var(--brand-line);font-size:var(--k-fs-14);color:var(--brand-muted);background:var(--brand-page)}
.foot__in{display:flex;flex-direction:column;gap:var(--k-s-4)}
@media (min-width:768px){.foot__in{flex-direction:row;justify-content:space-between;align-items:center}}
.foot .tag{font-weight:var(--k-w-bold);color:var(--k-ink-2)}
.foot a{color:var(--k-ink-2);display:inline-flex;align-items:center;min-height:var(--k-hit)}
.foot .logo{color:var(--k-ink)}

/* Sprite + icon helpers (classes instead of inline style attributes: CSP style-src without 'unsafe-inline') */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wing-fill{fill:var(--k-wing)}

/* Motion: reveal is a short lift, transform only; content is never hidden. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{transform:translateY(16px);transition:transform var(--k-dur-slow) var(--k-ease-lift)}
  .js .reveal.is-in{transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none !important;animation:none !important}}

/* Art motion: the hero kite rises once and its string of steps draws; nothing loops. Reduced motion = end state. */
@media (prefers-reduced-motion:no-preference){
  .hero-kite{transform-box:fill-box;transform-origin:30% 100%;animation:art-rise var(--k-dur-celebrate) var(--k-ease-lift) .2s 1 both}
  .hero-string{stroke-dasharray:420;stroke-dashoffset:420;animation:art-draw var(--k-dur-celebrate) var(--k-ease) 1 forwards}
  .hero-steps .step{animation:art-pop var(--k-dur-slow) var(--k-ease-lift) 1 both}
  .hero-steps .step:nth-child(2){animation-delay:.3s}.hero-steps .step:nth-child(3){animation-delay:.6s}.hero-steps .step:nth-child(4){animation-delay:.9s}
}
@keyframes art-rise{from{opacity:0;transform:translate(-36px,60px) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes art-draw{to{stroke-dashoffset:0}}
@keyframes art-pop{from{opacity:0}to{opacity:1}}

/* ---------- Section heads: light 300 display, one black-wing phrase ---------- */
.head{max-width:880px;margin-bottom:var(--k-s-10)}
.head h2{font-size:clamp(34px,4.6vw,62px);font-weight:300;letter-spacing:-.04em;line-height:1.05;margin:var(--k-s-3) 0 var(--k-s-5);color:var(--brand-ink)}
.head>p,.head--split>p{font-size:var(--k-fs-18);color:var(--brand-ink-2);max-width:640px;margin:0}
.head--split{max-width:none}
@media (min-width:1024px){.head--split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--k-s-12);align-items:end}.head--split h2{margin-bottom:0}}
.eyebrow::before{background:var(--k-wing)}
.hl-soft{font-weight:var(--k-w-heavy);color:var(--brand-ink);background:linear-gradient(transparent 60%,var(--dawn-2) 60%);padding:0 1px}

/* ---------- Kite Agent at a café: phone on the table, live admin on a laptop, a cup on the table ---------- */
.cafe{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--brand-page) 0%,var(--dawn) 100%)}
.cafe__scene{position:relative;isolation:isolate}
.cafe .demo__stage{position:relative}
/* The table: a dawn-2 top whose back edge meets the laptop base, running off both sides of the page. */
.cafe .demo__stage::before{content:"";position:absolute;z-index:-1;left:-50vw;right:-50vw;bottom:-260px;height:300px;background:linear-gradient(180deg,var(--dawn-2) 0,color-mix(in srgb,var(--dawn-2) 60%,var(--dawn)) 100%);border-top:2px solid var(--brand-surface);box-shadow:0 -1px 0 color-mix(in srgb,var(--k-wing) 22%,var(--brand-surface))}
.cafe .demo__cap{position:relative;z-index:3}
.cafe .scn{background:var(--brand-surface);border-color:var(--brand-line)}
.cafe .scn:hover{background:var(--brand-raised)}
.cafe .scn[aria-selected="true"]{background:var(--brand-raised);border-color:var(--k-wing);box-shadow:inset 0 0 0 1px var(--k-wing)}
.cafe .scn[aria-selected="true"] .scn__n{color:var(--k-wing)}
/* Phone: ink bezel, round corners, a notch over the chat bar. */
.live__phone{position:relative;min-width:0}
.cafe .chat{position:relative;z-index:1;border:6px solid var(--brand-ink);border-radius:30px;box-shadow:var(--lift)}
.cafe .chat__bar{position:relative}
.cafe .chat__bar::before{content:"";position:absolute;left:50%;top:0;width:72px;height:12px;margin-left:-36px;border-radius:0 0 10px 10px;background:var(--brand-ink)}
.chat__hist{display:flex;flex-direction:column;gap:var(--k-s-4)}
/* Laptop: the admin is its screen, the base is drawn under it. */
.live__laptop{position:relative;min-width:0;padding-bottom:14px}
.cafe .adm{position:relative;z-index:1;border:8px solid var(--brand-ink);border-bottom-width:12px;border-radius:14px;box-shadow:var(--lift)}
.live__laptop::after{content:"";position:absolute;z-index:1;left:-5%;right:-5%;bottom:0;height:16px;border-radius:3px 3px 18px 18px;background:linear-gradient(180deg,var(--brand-ink-2),var(--brand-ink))}
.live__laptop::before{content:"";position:absolute;z-index:2;left:50%;bottom:9px;width:84px;height:5px;margin-left:-42px;border-radius:0 0 6px 6px;background:var(--brand-ink-2)}
.cafe__cup{display:none}
@media (min-width:1024px){
  .cafe .live{grid-template-columns:340px minmax(0,1fr);gap:72px;align-items:end}
  .cafe .live .chat{--chat-h:500px;border-width:10px;border-radius:44px}
  .cafe .chat__bar{padding-top:8px}
  .cafe .chat__bar::before{width:84px;height:16px;margin-left:-42px}
  .cafe .adm{height:612px;border-width:12px;border-bottom-width:18px;border-radius:18px}
  .cafe .demo__cap{padding-left:412px}
  .cafe__scene{padding-bottom:132px}
}
@media (min-width:1360px){.cafe__cup{display:block;position:absolute;z-index:2;right:-150px;bottom:40px;width:128px;height:auto}}

/* ---------- Swipeable rows (below 1024px): one scroll-snap row that runs to the screen edges, the next card
   peeking. CSS does the layout; landing.js only lights the dot of the card in view and makes the row focusable
   while it scrolls (arrow keys then scroll it). The dots ({{dots:n}}) are aria-hidden decoration: the list is
   what screen readers read. From 1024px every row is the grid it always was. ---------- */
@media (max-width:1023px){
  .swipe{--edge:var(--k-s-5);display:flex;gap:var(--k-s-3);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);margin:0 calc(-1 * var(--edge));padding:var(--k-s-1) var(--edge) var(--k-s-3);list-style:none;scrollbar-width:none}
  .swipe::-webkit-scrollbar{display:none}
  .swipe>*{flex:0 0 min(84%,360px);min-width:0;scroll-snap-align:start}
  .swipe:focus-visible{outline-offset:-3px}
  .dots{display:flex;justify-content:center;gap:var(--k-s-3);margin:var(--k-s-1) 0 0}
  .dots i{width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:var(--k-string);transition:background-color var(--k-dur) var(--k-ease),transform var(--k-dur) var(--k-ease)}
  .dots i.is-on{background:var(--k-wing);transform:rotate(45deg) scale(1.25)}
  /* Kite hiểu học viên: the four points as cards */
  .learn__points{counter-reset:lp}
  .learn__points li{counter-increment:lp;background:var(--brand-surface);border:1px solid var(--brand-line);border-radius:var(--k-r-lg);padding:var(--k-s-5)}
  .learn__points b{display:block;font-size:var(--k-fs-18);font-weight:var(--k-w-black);letter-spacing:-.01em;line-height:1.25;margin-bottom:6px}
  .learn__points b::before{content:counter(lp,decimal-leading-zero);display:block;font-size:var(--k-fs-14);font-weight:var(--k-w-black);letter-spacing:.08em;color:var(--k-wing);margin-bottom:2px}
  .learn__points span{display:block;color:var(--brand-ink-2)}
  .learn .dots{margin-bottom:var(--k-s-8)}
}
@media (min-width:768px) and (max-width:1023px){.swipe{--edge:var(--k-s-8)}}

/* ---------- Sticky "Vào First Flight" bar (below 1024px). Hidden = off screen and visibility:hidden (out of the
   tab order); landing.js adds .is-on between the hero and the First Flight form. Safe-area aware. ---------- */
.dock{position:fixed;z-index:60;left:0;right:0;bottom:0;padding:var(--k-s-2) max(var(--k-s-5),env(safe-area-inset-right)) calc(var(--k-s-2) + env(safe-area-inset-bottom)) max(var(--k-s-5),env(safe-area-inset-left));background:color-mix(in srgb,var(--brand-page) 88%,transparent);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-top:1px solid color-mix(in srgb,var(--brand-line) 70%,transparent);transform:translateY(110%);visibility:hidden;transition:transform var(--k-dur-slow) var(--k-ease-lift),visibility 0s linear var(--k-dur-slow)}
.dock.is-on{transform:none;visibility:visible;transition-delay:0s}
.dock .btn{width:100%;max-width:480px;margin:0 auto;display:flex}
/* Phones in landscape: keep content clear of the notch now that the page runs edge to edge (viewport-fit=cover). */
@media (max-width:767px){.wrap{padding-left:max(var(--k-s-5),env(safe-area-inset-left));padding-right:max(var(--k-s-5),env(safe-area-inset-right))}}
@media (min-width:768px) and (max-width:1023px){.wrap{padding-left:max(var(--k-s-8),env(safe-area-inset-left));padding-right:max(var(--k-s-8),env(safe-area-inset-right))}}

/* ---------- Phones and tablets (below 1024px): tighter rhythm so the page reads in about half the scrolling.
   Same content and order; only air, illustration sizes and demo heights shrink. Desktop is untouched. ---------- */
@media (max-width:1023px){
  .sec,.own__day{padding:var(--k-s-10) 0}
  .own__night{padding:var(--k-s-10) 0}
  .wl{padding:var(--k-s-10) 0 var(--k-s-12)}
  .head{margin-bottom:var(--k-s-6)}
  .head h2{margin-bottom:var(--k-s-3)}
  .head>p,.head--split>p{font-size:var(--k-fs-16)}
  .big-line{margin-top:var(--k-s-8);font-size:var(--k-fs-24)}
  /* The shift */
  .vs__col{padding:var(--k-s-5)}
  .vs__col h3{font-size:var(--k-fs-20);margin-bottom:var(--k-s-3)}
  .tangle{margin-bottom:var(--k-s-3)}
  .tools{padding:var(--k-s-3) 0}
  .vs__list{gap:var(--k-s-2);font-size:var(--k-fs-15)}
  .vs__tag{margin-bottom:var(--k-s-4)}
  /* Kite Agent */
  .safe{margin-top:var(--k-s-8)}
  .safe h3{margin-bottom:var(--k-s-3)}
  .cards li{padding:var(--k-s-5)}
  .cards svg{width:40px;height:40px;padding:10px;margin-bottom:var(--k-s-3)}
  /* Kite hiểu học viên: the lesson phone and certificate, smaller */
  .learn__row{gap:var(--k-s-6)}
  .learn__row+.learn__row{margin-top:var(--k-s-8)}
  .learn__phone{padding:0 0 var(--k-s-6)}
  .learn__phone .phone{width:min(74%,360px)}
  .learn__phone .phone--crop .phone__screen{height:min(92vw,400px)}
  /* Growth: the segments wrap as a cloud of tags; less sky above the win-back chat */
  .grow,.grow__side{gap:var(--k-s-8)}
  .segs{padding:var(--k-s-5)}
  .segs ul{flex-direction:row;flex-wrap:wrap}
  .segs li:nth-child(2n){margin-left:0}
  .grow__chat{padding-top:72px}
  .grow__art{width:min(260px,72%)}
  .demo.demo--solo .chat{--chat-h:300px} /* beats chat-demo.css, which loads later */
  .trust{margin-top:var(--k-s-8);padding:var(--k-s-4) var(--k-s-5);font-size:var(--k-fs-15)}
  /* The night scene: the two phones overlap more */
  .own__phones{margin-top:var(--k-s-8)}
  .own__fix{margin-top:var(--k-s-10);gap:var(--k-s-6)}
  .points{gap:var(--k-s-4)}
  .own-h{margin-bottom:var(--k-s-4)}
  /* Dành cho ai */
  .fitwrap{gap:var(--k-s-8)}
  .class-art{max-width:260px}
  .fit__col{padding:var(--k-s-5)}
  .fit__col h3{margin-bottom:var(--k-s-3)}
  .fit__col ul{gap:var(--k-s-2)}
  /* FAQ + First Flight */
  .faq summary{padding:var(--k-s-4) var(--k-s-2);min-height:56px}
  .wl__grid{gap:var(--k-s-8)}
  .wl h2{margin-bottom:var(--k-s-4)}
  .wl__points{margin-top:var(--k-s-4)}
  .form{padding:var(--k-s-5)}
  .fld{margin-bottom:var(--k-s-4)}
  .foot{padding:var(--k-s-8) 0}
}
@media (max-width:639px){
  .own__phones .phone{width:70%}
  .phone--qr .phone__screen{height:min(96vw,440px)}
  .phone--paid{margin-top:-52%}
  .demo--hero .chat{--chat-h:360px}
}