/* KiS Creative Factory — calm lake: white, ink, cobalt */
:root{
  color-scheme:light;
  --cobalt:#0047AB;                                            /* set from the admin page */
  --cobalt-deep:color-mix(in srgb,var(--cobalt) 72%,#000);
  --tint:color-mix(in srgb,var(--cobalt) 6%,#fff);
  --tint-2:color-mix(in srgb,var(--cobalt) 12%,#fff);
  --white:#FFFFFF; --panel:#FFFFFF;
  --ink:#0F1012; --muted:#55585F; --faint:#8A8D94;
  --line:rgba(15,16,18,.08); --line-2:rgba(15,16,18,.14);
  --max:1200px; --gutter:clamp(16px,3.4vw,40px);
  --font:Inter,'Noto Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;  /* set from the admin page */
  --font-head:var(--font);
  --band:var(--tint-2); --footer:#0B1530;
  --w-head:650; --w-body:450; --w-ui:600;
  --edit-w:0px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}

html,body{background:var(--white);color:var(--ink)}
body{font-family:var(--font);font-weight:var(--w-body);letter-spacing:-.015em;line-height:1.6;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:hidden}
html[lang=ko] body{letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:6px}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.blue{color:var(--cobalt)}

/* Type scale */
.label{font-size:calc(12px * var(--fs-label,1) * var(--k,1));color:var(--fc-label,var(--cobalt));letter-spacing:.1em;text-transform:uppercase;font-weight:var(--fw-label,var(--w-ui))}
html[lang=ko] .label{letter-spacing:.03em}
.h-xl,.h-l,.h-m,.h-s,.hero-slogan,.hero-sub,.essay-em,.essay-quote,.q-card .q,.brand,.menu-sheet a.big,.create-list li{font-family:var(--font-head)}
.h-xl{font-size:calc(clamp(58px,8vw,116px) * var(--fs-xl,1) * var(--k,1));line-height:.98;letter-spacing:-.045em;font-weight:var(--fw-xl,var(--w-head));color:var(--fc-xl,var(--ink))}
.h-l{font-size:calc(clamp(38px,4.8vw,62px) * var(--fs-l,1) * var(--k,1));line-height:1.08;letter-spacing:-.035em;font-weight:var(--fw-l,var(--w-head));color:var(--fc-l,var(--ink));text-wrap:balance}
.h-m{font-size:calc(clamp(27px,2.9vw,38px) * var(--fs-m,1) * var(--k,1));line-height:1.18;letter-spacing:-.03em;font-weight:var(--fw-m,var(--w-head));color:var(--fc-m,var(--ink));text-wrap:balance}
.h-s{font-size:calc(clamp(20px,1.9vw,25px) * var(--fs-s,1) * var(--k,1));line-height:1.3;letter-spacing:-.02em;font-weight:var(--fw-s,var(--w-head));color:var(--fc-s,var(--ink));text-wrap:balance}
.body{font-size:calc(16px * var(--fs-body,1) * var(--k,1));line-height:1.75;color:var(--fc-body,var(--muted));font-weight:var(--fw-body,var(--w-body));max-width:62ch}
.lead{font-size:calc(clamp(17px,1.4vw,19px) * var(--fs-lead,1) * var(--k,1));line-height:1.65;color:var(--fc-lead,var(--muted));font-weight:var(--fw-lead,var(--w-body));max-width:46ch}
/* "both" language mode: the Korean line under the English one */
.alt{display:block;font-size:.72em;line-height:1.45;letter-spacing:-.005em;opacity:.78;margin-top:.3em;font-weight:inherit;text-wrap:pretty}
.tag .alt,.nav .alt,.label .alt,.pill .alt,.q-card .q .alt,.sub-links .alt,.flow b .alt,.method b .alt,.seg .alt,.crumb .alt,.meta .alt,.create-list .alt{display:inline;font-size:inherit;margin:0;opacity:.7}
.tag .alt:before,.nav .alt:before,.label .alt:before,.pill .alt:before,.sub-links .alt:before,.flow b .alt:before,.method b .alt:before,.seg .alt:before,.crumb .alt:before,.meta .alt:before{content:" · "}
.create-list .alt{display:block;font-size:.8em;margin-top:.2em}
.link:has(.alt){display:inline-block;line-height:1.5}
.link .alt{font-size:.85em}

/* Controls */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:26px;padding:12px 20px;font-size:14px;font-weight:var(--w-ui);background:var(--tint-2);color:var(--cobalt-deep);letter-spacing:-.01em;transition:background .2s,color .2s}
.pill:hover{background:color-mix(in srgb,var(--cobalt) 18%,#fff)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.pill.dark{background:var(--cobalt);color:#fff}
.pill.dark:hover{background:var(--cobalt-deep)}
.pill.light{background:#fff;color:var(--cobalt-deep)}
.pill.light:hover{background:var(--tint)}
.pill.ghost-w{background:rgba(255,255,255,.12);color:#fff}
.pill.ghost-w:hover{background:rgba(255,255,255,.2)}
.link{color:var(--cobalt);font-size:15px;font-weight:var(--w-ui);border-bottom:1px solid currentColor;padding-bottom:1px;display:inline-flex;gap:6px;align-items:center}
.link .arr{transition:transform .2s}
.link:hover .arr,.card:hover .arr{transform:translateX(3px)}
.tag{display:inline-block;border:1px solid color-mix(in srgb,var(--cobalt) 40%,#fff);background:var(--tint);color:var(--cobalt);border-radius:9999px;padding:4px 12px;font-size:12px;font-weight:var(--w-ui);letter-spacing:.02em;line-height:1.5;transition:background .2s,color .2s}
a.tag:hover{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.tag.soft{border-color:var(--line-2);background:#fff;color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:8px}

/* Floating pill navigation (no side labels) */
.nav{position:fixed;top:calc(20px + env(safe-area-inset-top,0px));left:calc(50% + var(--edit-w) / 2);transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:14px;padding:7px 7px 7px 18px;white-space:nowrap;max-width:calc(100vw - var(--edit-w) - 32px)}
.brand{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:var(--w-head);letter-spacing:-.02em;margin-right:16px}
.brand b{color:var(--cobalt);font-weight:inherit}
.nav .item{font-size:calc(14px * var(--fs-nav,1) * var(--k,1));font-weight:var(--fw-nav,var(--w-ui));color:var(--fc-nav,var(--ink));padding:8px 14px;border-radius:10px;letter-spacing:.04em;transition:background .2s,color .2s}
.nav .item:hover{background:var(--tint);color:var(--cobalt)}
.nav .item.on{background:var(--tint-2);color:var(--cobalt)}
.nav .sep{width:1px;height:18px;background:var(--line-2);margin:0 6px}
.lang{display:flex;gap:2px;padding:0 4px}
.lang button{font-size:12px;font-weight:var(--w-ui);padding:6px 8px;border-radius:8px;color:var(--faint);letter-spacing:.03em}
.lang button.on{color:var(--cobalt);background:var(--tint-2)}
.nav .pill{padding:9px 16px;font-size:13px;margin-left:4px}
.burger{display:none;width:40px;height:40px;border-radius:11px;border:1px solid var(--line-2);place-items:center}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);box-shadow:0 5px 0 var(--ink);transform:translateY(-2.5px)}
.menu-sheet{position:fixed;inset:0;z-index:25;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:90px 24px 40px;opacity:0;pointer-events:none;transition:opacity .25s}
.menu-sheet.open{opacity:1;pointer-events:auto}
.menu-sheet a.big{font-size:40px;letter-spacing:-.04em;font-weight:var(--w-head)}
.menu-sheet a.big:hover{color:var(--cobalt)}
.menu-sheet .sub-links{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 18px}
.menu-sheet .pill{margin-top:22px;align-self:flex-start}

/* Views */
.site{margin-left:var(--edit-w)}
.view[hidden]{display:none!important}
/* Two stacked pages — the "Got YeoYoo?" question, then the main hero — over one pinned water background.
   A short scroll moves a whole page (app.js); the lake centre follows the scroll (hero-water.js). */
.hero-stage{position:relative;background:var(--white)}
.hero-bg{position:sticky;top:0;height:100vh;height:100lvh;min-height:600px;margin-bottom:calc(-1 * max(100vh, 600px));margin-bottom:calc(-1 * max(100lvh, 600px));overflow:hidden;z-index:0}
.hero-bg canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.hero-page{position:relative;z-index:1;height:100vh;height:100lvh;min-height:600px;pointer-events:none}
/* the question page is taller than one screen, so it fills the first view on its own with no edge of page 2 showing */
.intro-page{height:125vh;height:125lvh;min-height:720px}
.hero-page a,.hero-page button{pointer-events:auto}
.scroll-cue{position:absolute;z-index:3;left:50%;top:calc(max(100svh, 600px) - 92px - env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;font-weight:var(--w-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt)}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(var(--cobalt),transparent);animation:cue 2.4s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero-copy{position:absolute;z-index:2;left:max(var(--gutter),calc((100% - var(--max))/2 + var(--gutter)));bottom:clamp(56px,11vh,110px);pointer-events:none;padding-right:var(--gutter)}
.hero-copy .label{margin-bottom:24px;display:flex;gap:10px;align-items:center}
.hero-copy .label:before{content:"";width:28px;height:1px;background:var(--cobalt)}
.ko-mark{font-size:.34em;letter-spacing:0;color:var(--cobalt);margin-left:.28em;vertical-align:.95em;font-weight:var(--w-head)}
/* "Got YeoYoo(여유)?" floats up slowly above the ripples */
.hero-slogan{position:absolute;z-index:2;left:50%;top:calc(max(100svh, 600px) * .46);margin:0;width:max-content;max-width:calc(100% - 2 * var(--gutter));text-align:center;font-size:calc(clamp(27px,4.27vw,69px) * var(--fs-slogan,1) * var(--k,1));line-height:1.05;font-weight:var(--fw-slogan,var(--w-head));letter-spacing:-.04em;color:var(--fc-slogan,var(--ink));pointer-events:none;
  transform:translate(-50%,-50%)}
.hero-slogan b{font-weight:inherit}
/* every "YeoYoo(여유)" is the same point colour; "Create" stays ink */
.yy,.band .h-l b.blue{color:var(--cobalt);font-weight:inherit}
.hero-slogan>span{display:inline-block;opacity:0;animation:slogan-rise 1.1s cubic-bezier(.22,.7,.2,1) .15s forwards,slogan-float 7s ease-in-out 1.3s infinite}
@keyframes slogan-rise{from{opacity:0;transform:translateY(28px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes slogan-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.hero-slogan>span{animation:none;opacity:1}.scroll-cue i{animation:none}}
.hero-copy .hero-sub{margin-top:22px;font-size:calc(clamp(22px,2.4vw,34px) * var(--fs-sub,1) * var(--k,1));line-height:1.2;letter-spacing:-.025em;font-weight:var(--fw-sub,var(--w-head));color:var(--fc-sub,var(--ink))}
.hero-copy .hero-sub+.lead{margin-top:18px}
.hero-copy .lead{margin-top:28px}
.hero-copy .ctas{margin-top:32px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;pointer-events:auto}

.sec{padding-block:clamp(72px,10vw,110px)}
.sec.tint{background:var(--tint)}
.sec-head{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;margin-bottom:52px}
.split3{display:grid;grid-template-columns:220px 1fr 1fr;gap:40px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:40px;padding:clamp(28px,4vw,48px);transition:border-color .25s,box-shadow .25s}
a.card{display:block}
a.card:hover{border-color:color-mix(in srgb,var(--cobalt) 45%,#fff)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card .tag+.h-s{margin-top:24px}
.card .body{margin-top:10px}
.card-link{margin-top:28px;display:inline-flex}

/* Overview cards: the question word is the headline, in cobalt */
.q-card .q{font-size:calc(clamp(44px,5vw,64px) * var(--fs-q,1) * var(--k,1));line-height:1;letter-spacing:-.04em;font-weight:var(--fw-q,var(--w-head));color:var(--fc-q,var(--cobalt))}
.q-card .q-name{margin-top:14px}

/* Page header */
.page-head{position:relative;overflow:hidden;padding-top:clamp(140px,16vw,190px);padding-bottom:clamp(56px,7vw,90px);background:linear-gradient(180deg,#fff 0%,var(--tint) 100%)}
.page-head .crumb{display:flex;gap:10px;align-items:center;margin-bottom:26px;flex-wrap:wrap}
.page-head .crumb .tag{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.page-head .crumb a.label:hover{text-decoration:underline}
.page-head .lead{margin-top:22px}
.rings{position:absolute;right:-80px;top:70px;width:560px;height:360px;pointer-events:none}

/* Long-form text (WHY / HOW) */
.essay{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:start}
.essay-side{position:sticky;top:110px}
.essay-side .h-m{margin-top:10px}
.essay-body{display:flex;flex-direction:column;gap:20px;max-width:64ch}
.essay-p{font-size:calc(17px * var(--fs-essay,1) * var(--k,1));line-height:1.8;color:var(--fc-essay,var(--muted));font-weight:var(--fw-essay,var(--w-body))}
.essay-em{font-size:calc(clamp(20px,1.9vw,24px) * var(--fs-em,1) * var(--k,1));line-height:1.45;font-weight:var(--fw-em,var(--w-head));letter-spacing:-.02em;color:var(--fc-em,var(--ink));padding:6px 0 6px 20px;border-left:3px solid var(--cobalt)}
.essay-quote{font-size:calc(clamp(24px,2.5vw,32px) * var(--fs-quote,1) * var(--k,1));line-height:1.35;font-weight:var(--fw-quote,var(--w-head));letter-spacing:-.025em;color:var(--fc-quote,var(--cobalt));margin-bottom:8px}
.closing-note{background:#fff;text-align:left}
.closing-title{margin-top:14px}

/* WHY */
.why-row{padding-block:clamp(56px,7vw,90px);border-top:1px solid var(--line-2)}
.why-row:first-child{border-top:0}
.create-list{list-style:none;border-top:1px solid var(--line-2)}
.create-list li{padding:22px 0;border-bottom:1px solid var(--line-2);font-size:clamp(19px,2vw,24px);font-weight:var(--w-head);letter-spacing:-.02em;display:grid;grid-template-columns:44px 1fr;gap:10px}
.create-list li>span{color:var(--cobalt);font-size:13px;padding-top:6px;font-variant-numeric:tabular-nums}

/* WHO */
.person{padding:18px;border-radius:36px}
.portrait{aspect-ratio:4/5;border-radius:26px;background:var(--tint);position:relative;overflow:hidden;display:grid;place-items:center}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait .rings-s{position:absolute;inset:0;width:100%;height:100%}
.portrait .label{position:absolute;bottom:24px}
.person .who-meta{padding:20px 10px 6px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.person .p-name{padding:0 10px;font-size:17px;font-weight:var(--w-ui)}
.person .p-bio{padding:4px 10px 6px;font-size:14px;color:var(--muted);line-height:1.7}

/* HOW list */
.prog{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.prog .h-m{margin-top:20px}
.prog .desc{font-size:17px;line-height:1.7;color:var(--ink)}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:20px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line-2)}
.meta p:last-child{margin-top:6px;font-size:15px;font-weight:var(--w-ui)}
.stack{display:flex;flex-direction:column;gap:16px}

/* HOW detail */
.detail-top{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:end}
.meta.big{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-top:52px}
.seg{display:inline-flex;gap:4px;background:var(--tint);padding:5px;border-radius:14px;flex-wrap:wrap}
.seg button{border-radius:10px;padding:8px 16px;font-size:14px;font-weight:var(--w-ui);color:var(--muted)}
.seg button.on{background:var(--cobalt);color:#fff}
.modules{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;margin-top:22px}
.modules li{display:grid;grid-template-columns:44px 1fr;gap:4px 10px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.modules li>span{color:var(--cobalt);font-size:13px;font-weight:var(--w-ui);font-variant-numeric:tabular-nums;padding-top:2px}
.modules li p{font-size:16px;font-weight:var(--w-ui)}
.modules li p+p{font-size:14px;font-weight:var(--w-body);color:var(--muted);margin-top:2px}
.method{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:40px}
.method div{background:var(--tint);border-radius:22px;padding:20px}
.method b{display:block;font-weight:var(--w-head);color:var(--cobalt);font-size:13px;letter-spacing:.06em}
.method div>span{display:block;font-size:14px;color:var(--muted);margin-top:6px}
.flow{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-top:8px}
.flow li{position:relative;padding:26px 14px 0 0;border-top:2px solid var(--tint-2)}
.flow li:before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--cobalt)}
.flow li:last-child:before{background:var(--cobalt)}
.flow b{display:block;font-weight:var(--w-head);font-size:13px;letter-spacing:.06em;color:var(--cobalt)}
.flow li>span{font-size:14px;color:var(--muted)}
.included{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.included li{padding:15px 0 15px 24px;border-bottom:1px solid var(--line-2);position:relative;color:var(--ink)}
.included li:before{content:"";position:absolute;left:0;top:23px;width:12px;height:2px;background:var(--cobalt)}
.soon-box{display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.detail-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:40px}
.block-title{margin-bottom:22px}

/* WHAT */
.outcome{padding:40px;border-radius:36px}
.outcome .num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--tint-2);color:var(--cobalt);font-size:13px;font-weight:var(--w-head);font-variant-numeric:tabular-nums}
.outcome .h-s{margin-top:36px}

/* Consultation band — the one full cobalt moment */
.band-sec{background:var(--band);color:var(--ink);padding-block:clamp(64px,8vw,96px)}
.band{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band .h-l{margin-top:12px}
.band .body{margin-top:14px}
.band .ctas{display:flex;gap:12px;flex-wrap:wrap}
.footer{background:var(--footer);color:#EEF1F7;padding:64px 0 calc(48px + env(safe-area-inset-bottom,0px))}
.footer .row{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.footer .brand{font-size:19px}
.footer .brand b{color:color-mix(in srgb,var(--cobalt) 45%,#fff)}
.footer p{color:#99A2B8;font-size:13px;margin-top:10px}
.footer nav{display:flex;flex-wrap:wrap;gap:22px 28px;font-size:13px;font-weight:var(--w-ui);color:#C9D0E0;letter-spacing:.05em}
.footer nav a:hover{color:#fff}
.footer .copy{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#7F88A0}

/* WhatsApp */
.wa{position:fixed;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:20;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--line-2);display:grid;place-items:center;transition:transform .2s}
.wa:hover{transform:scale(1.05)}
.wa svg{width:24px;height:24px;fill:#25D366}

/* Enquiry modal */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .25s}
.modal.open{opacity:1;pointer-events:auto}
.modal-bg{position:absolute;inset:0;background:rgba(11,21,48,.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-box{position:relative;width:100%;max-width:520px;max-height:calc(100svh - 32px);overflow-y:auto;background:#fff;border-radius:32px;padding:clamp(28px,4vw,44px);transform:translateY(12px);transition:transform .3s}
.modal.open .modal-box{transform:none}
.modal-x{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;font-size:22px;color:var(--muted);display:grid;place-items:center}
.modal-x:hover{background:var(--tint)}
.modal .h-m{margin:10px 0 24px}
.field{margin-bottom:16px}
.field>label,.field>.flabel{display:block;font-size:12px;font-weight:var(--w-ui);color:var(--muted);margin-bottom:7px;letter-spacing:.03em}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--tint);border:1px solid transparent;border-radius:14px;padding:12px 14px;transition:border-color .2s,background .2s}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;background:#fff;border-color:var(--cobalt)}
.field.bad input{border-color:#C0392B}
.err{display:block;color:#B42318;font-size:13px;margin-top:6px}
.err:empty{display:none}
.chips{display:flex;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;border:1px solid var(--line-2);border-radius:9999px;padding:8px 16px;font-size:14px;font-weight:var(--w-ui);transition:all .2s}
.chips input:checked+span{border-color:var(--cobalt);background:var(--cobalt);color:#fff}
.chips input:focus-visible+span{outline:2px solid var(--cobalt);outline-offset:2px}
.modal .pill.dark{width:100%;padding:14px;margin-top:8px}
.demo-note{font-size:12px;color:var(--faint);margin-top:12px;text-align:center}
.done{text-align:center;padding:24px 0 6px}
.done .rings-done{width:120px;height:70px;margin:0 auto 18px}
.done .body{margin:12px auto 26px}

.toast{position:fixed;left:calc(50% + var(--edit-w) / 2);bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);z-index:80;background:#0B1530;color:#fff;padding:12px 20px;border-radius:26px;font-size:14px;opacity:0;pointer-events:none;transition:all .3s;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#B42318}

.view.enter>*{animation:settle .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes settle{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.view.enter>*{animation:none}}

/* Blocks added in the admin page: text, colour, image */
.blk{position:relative}
.cblk .label+h2,.cblk .label+.cb-body{margin-top:14px}
.cblk h2+.cb-body{margin-top:18px}
.cb-body{max-width:64ch}
.cb-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}
.cb-color{background:var(--bg);color:var(--fg);--ink:var(--fg);--muted:var(--fg);--fc-xl:initial;--fc-l:initial;--fc-m:initial;--fc-s:initial;--fc-body:initial;--fc-lead:initial;--fc-label:initial}
.cb-color .label{color:var(--fg);opacity:.82}
.cb-color .body{color:var(--fg);opacity:.88}
.cb-color .yy,.cb-color b.blue{color:var(--fg);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:.06em}
.cb-color .pill.light{background:var(--fg);color:var(--bg)}
.cb-card{border-radius:40px;padding:clamp(32px,5vw,64px)}
.cb-img img{width:100%;border-radius:32px;object-fit:cover}
.cb-img.wide img,.cb-img.wide .cb-ph{aspect-ratio:21/9}
.cb-img.photo img,.cb-img.photo .cb-ph{aspect-ratio:3/2}
.cb-img.natural img{height:auto}
.cb-img.natural .cb-ph{aspect-ratio:16/9}
.cb-ph{border:1.5px dashed var(--line-2);border-radius:32px;display:grid;place-items:center;color:var(--faint);font-size:14px;background:var(--tint)}
.cb-img figcaption{margin-top:14px}

.edit-fab{position:fixed;left:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--cobalt);color:#fff;border-radius:999px;padding:12px 18px;font-size:14px;font-weight:var(--w-ui);box-shadow:0 6px 18px rgba(11,21,48,.22)}
.edit-fab:hover{background:var(--cobalt-deep)}
body.editing .edit-fab{display:none}

/* Responsive */
@media (max-width:900px){
  .nav{left:16px;right:16px;transform:none;justify-content:space-between;padding:6px 6px 6px 16px}
  .nav .item,.nav .sep,.nav .pill{display:none}
  .nav .lang{margin-left:auto;margin-right:6px}
  .brand{margin-right:auto}
  .burger{display:grid}
  .sec-head,.split3,.grid-2,.prog,.detail-top,.essay{grid-template-columns:1fr;gap:20px}
  .essay-side{position:static}
  .hero-slogan{top:calc(max(100svh, 600px) * .47);font-size:calc(clamp(23px,6.7vw,35px) * var(--fs-slogan,1) * var(--k,1))}
  .grid-3{grid-template-columns:1fr 1fr}
  .modules,.included{grid-template-columns:1fr}
  .rings{width:380px;height:250px;right:-120px;top:60px;opacity:.7}
}
@media (max-width:600px){
  .grid-3{grid-template-columns:1fr}
  .card{border-radius:28px}
  .hero-copy .ctas .pill{flex:1 1 100%}
  .band .ctas{width:100%}
  .band .ctas .pill{flex:1}
}