/* www.corevisos.com: homepage concept 4 · 밤의 작업공간 (2026-10-15; chosen for launch 2026-10-17). The subpages'
   styles (pricing, support, legal, 404) are at the end of this file.
   Concept notes:
   Concept 3's layout and hands-on way of explaining (hero, "말 → 지도" studio, six-tile bento with live widgets,
   use-case tabs, compare, pricing, questions) staged in concept 1's night: deep navy base, raised panels with hairlines,
   lavender light, cinematic stills and video loops. No white surfaces. Amber appears only in the demo's approval
   moments. The owner removed the particle ribbon from this concept, so the hero rests on a quiet sky and the product. */
@font-face{font-family:CorevisSans;src:url('/assets/fonts/CorevisSans-subset.woff2') format('woff2');font-weight:100 900;font-display:swap}
@property --orbit{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  --bg:#05060c;--bg-raised:#0b0d18;--bg-deep:#030409;--bg-panel:#090a15;--bg-card:#0c0e1b;--bg-well:rgba(4,5,11,.55);
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.13);--line-3:rgba(255,255,255,.22);
  --text:#f3f1fb;--text-2:rgba(243,241,251,.88);--body:rgba(236,233,250,.74);--muted:rgba(236,233,250,.6);--dim:rgba(236,233,250,.46);
  --accent:#b6aaee;--accent-hi:#d9d1fb;--accent-line:rgba(182,170,238,.32);--accent-wash:rgba(182,170,238,.12);
  --ribbon-1:#7D8DDB;--ribbon-2:#A494EF;--ribbon-3:#F0E9FF;
  --now:#a9b9ff;--now-hi:#eef1ff;--now-line:rgba(169,185,255,.42);--now-wash:#0f1329;
  --star:#efe3c9;--star-line:rgba(239,227,201,.32);--star-wash:#100f17;
  --turn:#f1b779;--turn-line:rgba(241,183,121,.55);--turn-wash:rgba(241,183,121,.07);
  --ink:#07080f;
  --wrap:1440px;--gutter:clamp(16px,2.8vw,40px);
  --section:clamp(60px,6vw,96px);--header-h:64px;
  --radius:20px;--radius-lg:26px;
  --ease:cubic-bezier(.22,.8,.24,1);--ease-out:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.45,.5,1);
  --sparkle:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  --stars:radial-gradient(circle at 22px 34px,rgba(240,233,255,.55) 0 .7px,transparent 1.3px),radial-gradient(circle at 150px 96px,rgba(182,170,238,.5) 0 .65px,transparent 1.2px),radial-gradient(circle at 96px 190px,rgba(240,233,255,.32) 0 .55px,transparent 1.1px),radial-gradient(circle at 300px 250px,rgba(240,233,255,.42) 0 .7px,transparent 1.3px),radial-gradient(circle at 250px 40px,rgba(240,233,255,.25) 0 .5px,transparent 1px);
  --stars-size:236px 262px,236px 262px,236px 262px,372px 318px,372px 318px;
  --glass:linear-gradient(160deg,rgba(28,30,56,.84),rgba(12,13,26,.8));
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(0,0,0,.95),0 24px 60px -34px rgba(124,106,220,.5);
  color-scheme:dark;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--body);font-family:CorevisSans,-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic','Apple SD Gothic Neo',sans-serif;font-size:17px;line-height:1.75;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3,p,figure,dl,dd,blockquote{margin:0}
h1,h2,h3{color:var(--text);font-weight:760;letter-spacing:-.03em;text-wrap:balance}
p,li,dd{text-wrap:pretty}
:lang(ko) :is(h1,h2,h3,p,li,dt,dd,summary,a,span,b,th,td,em,strong){word-break:keep-all;overflow-wrap:break-word}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,svg,canvas,video{display:block}
img,video{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:rgba(182,170,238,.35);color:#fff}
[hidden]{display:none!important}
.nowrap{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-80px;left:16px;z-index:100;padding:12px 18px;border-radius:12px;background:var(--text);color:var(--ink);font-weight:700}
.skip-link:focus{top:12px}
main:focus{outline:none}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Layout: one wide measure (up to 1440px) so sections use the window instead of sitting in a narrow column. */
.wrap{width:min(var(--wrap),calc(100% - 2 * var(--gutter)));margin-inline:auto}
/* Each section is its own group with the page colour behind it, so the renders' lighten blending has a real backdrop. */
.section{position:relative;padding-block:var(--section);isolation:isolate;background:var(--bg)}
.section-head{max-width:860px}
.section-head.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);align-items:end;gap:20px clamp(32px,6vw,96px);max-width:none}
.section-head.split .lede{margin:0 0 10px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;color:var(--accent);font-size:14.5px;font-weight:650;line-height:1.3}
.eyebrow::before{content:'';width:9px;height:9px;background:currentColor;clip-path:var(--sparkle)}
.section-head h2{font-size:clamp(36px,5vw,72px);line-height:1.12;font-weight:780;letter-spacing:-.045em}
.lede{max-width:38em;font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.8;color:var(--body)}
.section-head .lede{margin-top:24px}

/* Buttons and status */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 24px;border:1px solid transparent;border-radius:999px;font-size:15.5px;font-weight:660;line-height:1.1;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,opacity .2s,transform .15s var(--ease)}
.btn:active{transform:scale(.98)}
.btn .icon{width:17px;height:17px}
.btn-xs{--h:36px;padding:0 16px;font-size:14px}
.btn-sm{--h:40px;padding:0 16px;font-size:14.5px}
.btn-lg{--h:54px;padding:0 28px;font-size:16.5px}
.btn-primary{background:var(--text);color:var(--ink)}
.btn-primary:hover{background:#fff}
.btn-secondary{border-color:var(--line-3);background:rgba(8,9,18,.55);color:var(--text)}
.btn-secondary:hover{border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.08)}
.btn-ghost{background:transparent;color:var(--body)}
.btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--text)}
/* The app's "my turn / approval" amber, used only inside the demos' approval moments. */
.btn-turn{background:var(--turn);color:#1e1407}
.btn-turn:hover{background:#f6c895}
.btn:disabled{opacity:.4;cursor:default;pointer-events:none}
/* Store status while the listing is not public: a quiet label, deliberately not shaped like a button. */
.store-chip{display:inline-flex;align-items:center;gap:10px;margin:0;padding:0 4px;color:var(--text-2);font-size:14.5px;font-weight:620;line-height:1.3;cursor:default}
.store-dot{position:relative;width:7px;height:7px;flex:none;border-radius:50%;background:var(--accent)}
.store-dot::after{content:'';position:absolute;inset:-5px;border:1px solid rgba(182,170,238,.55);border-radius:50%;animation:dot-breathe 3s var(--ease) infinite}
@keyframes dot-breathe{0%{opacity:.85;transform:scale(.55)}100%{opacity:0;transform:scale(1.6)}}
.text-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:15.5px;font-weight:680}
.text-link:hover{color:var(--accent-hi)}
.text-link .icon{width:16px;height:16px;transition:transform .2s var(--ease)}
.text-link:hover .icon{transform:translateX(3px)}
.inline-link{color:var(--accent);font-weight:650;text-decoration:underline;text-decoration-color:rgba(182,170,238,.45);text-underline-offset:3px}
.inline-link:hover{color:var(--accent-hi)}
.spark{width:10px;height:10px;flex:none;background:var(--accent);clip-path:var(--sparkle)}
.slogan-gradient{padding-right:.04em;background:linear-gradient(100deg,var(--ribbon-1) 0%,var(--ribbon-2) 40%,var(--ribbon-3) 94%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Orbit light: a thin light running around the border of whatever is being worked on now. */
@keyframes orbit{to{--orbit:360deg}}
.map-node::after,.mm-node[data-state="now"]::after,.ct-step::after,.shot-now::after,.due[data-state="now"]::after{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--orbit),transparent 0deg 215deg,color-mix(in srgb,var(--orbit-color,var(--now)) 55%,transparent) 288deg,var(--orbit-hi,var(--now-hi)) 330deg,color-mix(in srgb,var(--orbit-color,var(--now)) 55%,transparent) 346deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}

/* Header: transparent over the hero, night glass after scrolling. */
.site-header{position:fixed;inset:0 0 auto;z-index:50;border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s}
.site-header[data-scrolled],.site-header[data-menu-open]{background:rgba(6,7,14,.72);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.site-header[data-menu-open]{background:rgba(6,7,14,.96)}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;width:min(var(--wrap),calc(100% - 2 * var(--gutter)));height:var(--header-h);margin-inline:auto}
.brand{display:inline-flex;align-items:center;gap:10px;justify-self:start;color:var(--text);font-size:15.5px;font-weight:760;letter-spacing:.18em;line-height:1}
.nav{display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(10,11,22,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav a{padding:7px 17px;border-radius:999px;color:var(--body);font-size:14.5px;font-weight:600;line-height:1.3;transition:background-color .2s,color .2s}
.nav a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.nav a[aria-current]{background:rgba(255,255,255,.1);color:var(--text)}
.header-actions{display:flex;align-items:center;justify-self:end;gap:10px}
/* KO / EN: a small pill beside the header button; the page you are on is marked. */
.lang-switch{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(10,11,22,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.lang-switch a{display:grid;place-items:center;min-width:36px;height:30px;padding:0 9px;border-radius:999px;color:var(--muted);font-size:12.5px;font-weight:700;letter-spacing:.06em;line-height:1;transition:background-color .2s,color .2s}
.lang-switch a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.lang-switch a[aria-current]{background:rgba(255,255,255,.12);color:var(--text)}
/* 로그인 / Sign in: a quiet glass pill like the language switch, beside the one bright button; it leads to the account site. */
.header-login{--h:38px;padding:0 16px;border-color:var(--line-2);background:rgba(10,11,22,.5);color:var(--text-2);font-size:14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.header-login:hover{border-color:var(--line-3);background:rgba(255,255,255,.07);color:var(--text)}
.menu-login{display:none}
.menu-button{display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:44px;height:44px;padding:0;border:1px solid var(--line-2);border-radius:13px;background:rgba(255,255,255,.03);cursor:pointer}
.menu-button span{display:block;width:17px;height:1.5px;border-radius:2px;background:var(--text);transition:transform .25s var(--ease)}
.menu-button[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-button[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mobile-menu{padding:4px var(--gutter) 22px;border-top:1px solid var(--line)}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{padding:15px 2px;border-bottom:1px solid var(--line);color:var(--text);font-size:18px;font-weight:620}
.mobile-menu-status{display:flex;align-items:center;gap:12px;padding-top:18px;color:var(--body);font-size:14.5px}

/* Hero: headline left under a quiet night sky, the product at night on the right. */
.hero{position:relative;padding:calc(var(--header-h) + clamp(28px,4vw,60px)) 0 clamp(48px,5vw,80px);overflow:clip;isolation:isolate}
/* The sky: two faint star layers (one breathes very slowly), a low lavender light behind the headline and a cooler one
   where the monitor glows. Nothing follows the pointer or the scroll. */
.hero-sky{position:absolute;inset:0;z-index:-3;background:radial-gradient(38% 46% at 24% 40%,rgba(124,106,220,.15),transparent 72%),radial-gradient(44% 52% at 74% 42%,rgba(125,141,219,.14),transparent 70%),radial-gradient(60% 40% at 50% 100%,rgba(164,148,239,.07),transparent 70%),var(--bg)}
.hero-sky::before{content:'';position:absolute;inset:0;background-image:var(--stars);background-size:var(--stars-size);opacity:.55;-webkit-mask-image:radial-gradient(95% 85% at 40% 40%,#000 30%,transparent 90%);mask-image:radial-gradient(95% 85% at 40% 40%,#000 30%,transparent 90%)}
.hero-sky::after{content:'';position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,var(--bg))}
.hero-stars{position:absolute;inset:0;background-image:radial-gradient(circle at 60px 80px,rgba(240,233,255,.9) 0 .9px,transparent 1.6px),radial-gradient(circle at 340px 210px,rgba(214,206,255,.75) 0 .8px,transparent 1.5px),radial-gradient(circle at 520px 40px,rgba(240,233,255,.6) 0 .7px,transparent 1.4px),radial-gradient(circle at 180px 330px,rgba(169,185,255,.7) 0 .8px,transparent 1.5px);background-size:610px 420px,610px 420px,610px 420px,610px 420px;opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);animation:sky-breathe 9s ease-in-out infinite alternate}
@keyframes sky-breathe{from{opacity:.28}to{opacity:.62}}
/* A thin horizon of light under the headline area, like the edge of a lit desk at night. */
.hero-light{position:absolute;left:-10%;right:30%;top:62%;height:42%;background:radial-gradient(50% 50% at 50% 0%,rgba(182,170,238,.1),transparent 70%);filter:blur(10px)}
/* The app screen takes the larger share of the width so its labels stay readable; it may run a little past the column. */
.hero-grid{--shot-bleed:24px;position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"copy visual" "lower visual";column-gap:clamp(24px,3vw,48px)}
.hero-copy{grid-area:copy;align-self:end;position:relative}
.hero-lower{grid-area:lower;align-self:start;position:relative;margin-top:30px}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:24px;padding:7px 16px 7px 13px;border:1px solid var(--line-2);border-radius:999px;background:rgba(10,11,22,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-2);font-size:14px;font-weight:620;line-height:1.3}
.hero-title{font-size:clamp(54px,8.6vw,128px);line-height:1.02;font-weight:800;letter-spacing:-.055em}
.hero-title .nowrap,.hero-title .slogan-gradient{display:block}
/* One soft sheen across "Corevis" on arrival; the band starts and ends outside the word. */
.hero-title .slogan-gradient{width:fit-content;background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%),linear-gradient(100deg,var(--ribbon-1) 0%,var(--ribbon-2) 40%,var(--ribbon-3) 94%);background-size:250% 100%,100% 100%;background-repeat:no-repeat;background-position:100% 0,0 0;animation:sheen 1.9s var(--ease) .7s 1 both}
@keyframes sheen{from{background-position:100% 0,0 0}to{background-position:0% 0,0 0}}
.hero-sub{margin-top:22px;color:var(--text);font-size:clamp(21px,1.95vw,28px);font-weight:650;line-height:1.42;letter-spacing:-.028em}
.hero-intro{max-width:31em;color:var(--body);font-size:clamp(16.5px,1.22vw,18px);line-height:1.8}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:28px}
.hero-note{margin-top:16px;color:var(--muted);font-size:14.5px}
.hero-note a{color:var(--accent);font-weight:650;text-decoration:underline;text-decoration-color:rgba(182,170,238,.45);text-underline-offset:3px}
/* "Pause motion" (WCAG 2.2.2): a small switch in the hero and the footer; app.js shows it and keeps aria-pressed. */
.motion-toggle{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 4px;border:0;background:none;color:var(--muted);font:inherit;font-size:13.5px;font-weight:620;line-height:1.2;cursor:pointer;transition:color .2s}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{color:var(--text)}
.motion-switch{position:relative;width:26px;height:15px;flex:none;border:1px solid var(--line-3);border-radius:999px;transition:background-color .2s,border-color .2s}
.motion-switch::after{content:'';position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:var(--muted);transition:transform .2s var(--ease),background-color .2s}
.motion-toggle[aria-pressed="true"]{color:var(--text-2)}
.motion-toggle[aria-pressed="true"] .motion-switch{border-color:var(--accent-line);background:rgba(182,170,238,.2)}
.motion-toggle[aria-pressed="true"] .motion-switch::after{transform:translateX(11px);background:var(--accent)}
.motion-toggle-hero{margin-left:14px;vertical-align:middle}

/* The app screen from the monitor still (c1-hero-monitor.webp), live in HTML/CSS/SVG: the rail, a project map whose
   current step glows, and that step's workbench. Inside the window everything is measured in the screen's own design
   pixels (--px), so the whole screen scales like one picture yet the text stays crisp.
   Wide window: rail + map + workbench (860 x 600). Medium: rail + map (640 x 600). Phones: a crop of the map (410 x 380). */
.hero-visual{grid-area:visual;position:relative;align-self:center;min-width:0}
.app-shot{container:appshot / inline-size;position:relative;width:calc(100% + var(--shot-bleed,0px));animation:aw-rise 1.1s var(--ease-out) .05s both}
@keyframes aw-rise{from{opacity:0;transform:translateY(22px) scale(.985)}}
.aw{--px:calc(100cqw / 860);position:relative;aspect-ratio:860 / 600;border:1px solid rgba(255,255,255,.11);border-radius:calc(16 * var(--px));background:#0a0d26;box-shadow:0 50px 110px -50px rgba(0,0,0,.95),0 40px 130px -60px rgba(124,106,220,.6),inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden;isolation:isolate;color:#dfe1f2;font-size:calc(12 * var(--px));line-height:1.3;-webkit-user-select:none;user-select:none}
.aw::after{content:'';position:absolute;top:0;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,233,255,.5),transparent);pointer-events:none}
.aw svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Rail: the lavender logo key, the app's sections, account and settings at the foot. */
.aw-rail{position:absolute;inset:0 auto 0 0;display:flex;flex-direction:column;align-items:center;gap:calc(9 * var(--px));width:calc(50 * var(--px));padding:calc(12 * var(--px)) 0;border-right:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,#0c0e20,#090b19)}
.aw-logo{display:grid;place-items:center;width:calc(32 * var(--px));height:calc(32 * var(--px));margin-bottom:calc(6 * var(--px));border-radius:calc(9 * var(--px));background:linear-gradient(150deg,#968bf8,#5f54d2);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 0 calc(16 * var(--px)) rgba(124,106,240,.5);color:#fff}
.aw .aw-logo svg{width:calc(17 * var(--px));height:calc(17 * var(--px));fill:currentColor;stroke:none}
.aw-btn{display:grid;place-items:center;width:calc(30 * var(--px));height:calc(30 * var(--px));border-radius:calc(8 * var(--px));background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.055);color:rgba(222,224,248,.55)}
.aw .aw-btn svg{width:calc(15 * var(--px));height:calc(15 * var(--px));stroke-width:1.6}
.aw-btn.is-on{background:rgba(143,132,247,.18);box-shadow:inset 0 0 0 1px rgba(170,160,255,.32);color:#d8d1ff}
.aw-round{border-radius:50%}
.aw-foot{margin-top:auto}
/* The map: deep navy with a very faint grid; cards and lines share one coordinate system (590 x 600). */
.aw-map{position:absolute;left:calc(50 * var(--px));top:0;width:calc(590 * var(--px));height:calc(600 * var(--px));background:radial-gradient(58% 52% at 40% 48%,rgba(70,82,190,.15),transparent 72%),linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px) 0 0 / calc(26 * var(--px)) calc(26 * var(--px)),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px) 0 0 / calc(26 * var(--px)) calc(26 * var(--px)),linear-gradient(180deg,#0b1030,#080b22)}
.aw-crumb{position:absolute;left:calc(20 * var(--px));top:calc(18 * var(--px));display:flex;align-items:center;gap:calc(8 * var(--px));color:#e8e9f8;font-size:calc(12.5 * var(--px));white-space:nowrap}
.aw-crumb b{font-weight:700}
.aw-crumb em{padding:0 calc(7 * var(--px));border:1px solid rgba(255,255,255,.2);border-radius:999px;color:rgba(223,225,242,.75);font-size:calc(10.5 * var(--px));font-style:normal;font-weight:650;line-height:1.6}
.aw-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Connectors draw themselves in once; arrow tips arrive as each line lands. */
.aw .aw-line{stroke:rgba(150,162,230,.6);stroke-width:1.5;stroke-dasharray:100;animation:aw-draw .85s var(--ease-out) var(--d,0s) backwards}
.aw .aw-line.is-live{stroke:rgba(188,176,255,.92)}
@keyframes aw-draw{from{stroke-dashoffset:100}}
.aw .aw-tip{fill:rgba(170,180,240,.85);stroke:none;animation:aw-fade .35s ease var(--d,0s) backwards}
.aw .aw-tip.is-live{fill:#d6ccff}
@keyframes aw-fade{from{opacity:0}}
.aw .aw-glow{stroke:rgba(160,140,255,.2);stroke-width:5;animation:aw-fade .8s ease 1.6s backwards}
/* A light travels down the line into the step happening now; the card answers with one soft ring. */
.aw .aw-pulse{stroke:#f4f1ff;stroke-width:2.6;stroke-dasharray:6 94;stroke-dashoffset:6;opacity:0;filter:drop-shadow(0 0 3px rgba(200,186,255,.95));animation:aw-pulse 6s linear 2s infinite}
@keyframes aw-pulse{0%{stroke-dashoffset:6;opacity:0}2%{opacity:1}22%{stroke-dashoffset:-94;opacity:1}24%,100%{stroke-dashoffset:-94;opacity:0}}
.aw-card{position:absolute;left:calc(var(--x) * var(--px));top:calc(var(--y) * var(--px));display:flex;align-items:center;gap:calc(10 * var(--px));width:calc(var(--w) * var(--px));height:calc(58 * var(--px));padding:0 calc(12 * var(--px));border:1px solid rgba(166,176,240,.2);border-radius:calc(12 * var(--px));background:linear-gradient(180deg,rgba(44,50,88,.96),rgba(30,35,66,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 calc(14 * var(--px)) calc(28 * var(--px)) calc(-14 * var(--px)) rgba(0,0,0,.9)}
.aw-chip{display:grid;place-items:center;width:calc(32 * var(--px));height:calc(32 * var(--px));flex:none;border-radius:calc(9 * var(--px));background:linear-gradient(160deg,rgba(120,130,206,.36),rgba(78,86,152,.3));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#eeedff}
.aw .aw-chip svg{width:calc(16 * var(--px));height:calc(16 * var(--px))}
/* Finished steps keep the page's warm starlight in their icon. */
.aw-card.is-done .aw-chip{color:var(--star)}
.aw-name{overflow:hidden;color:#e9eaf8;font-size:calc(14 * var(--px));font-weight:650;letter-spacing:-.012em;white-space:nowrap;text-overflow:ellipsis}
/* The step happening now: bright lavender border, a violet glow that breathes slowly. */
.aw-card.is-now{border-color:rgba(206,192,255,.95);background:linear-gradient(180deg,rgba(56,56,106,.97),rgba(38,38,82,.97));box-shadow:0 0 0 1px rgba(196,180,255,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.aw-card.is-now .aw-chip{background:linear-gradient(160deg,rgba(160,146,255,.48),rgba(104,92,200,.4));color:#fff}
.aw-card.is-now::before,.aw-card.is-now::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none}
.aw-card.is-now::before{box-shadow:0 0 calc(18 * var(--px)) calc(1 * var(--px)) rgba(160,132,255,.62),0 0 calc(46 * var(--px)) rgba(124,96,240,.4);animation:aw-breathe 4.8s ease-in-out infinite alternate}
@keyframes aw-breathe{from{opacity:.55}to{opacity:1}}
.aw-card.is-now::after{animation:aw-ping 6s ease-out 2s infinite}
@keyframes aw-ping{0%,21%{box-shadow:0 0 0 0 rgba(206,192,255,0)}23%{box-shadow:0 0 0 0 rgba(206,192,255,.6)}42%,100%{box-shadow:0 0 0 calc(16 * var(--px)) rgba(206,192,255,0)}}
/* Four small tool circles under every step. */
.aw-tools{position:absolute;left:calc(var(--x) * var(--px));top:calc(var(--y) * var(--px));display:flex;gap:calc(6 * var(--px))}
.aw-tools i{display:grid;place-items:center;width:calc(22 * var(--px));height:calc(22 * var(--px));border-radius:50%;background:#181c34;box-shadow:inset 0 0 0 1px rgba(255,255,255,.075);color:rgba(214,218,246,.62)}
.aw .aw-tools svg{width:calc(11 * var(--px));height:calc(11 * var(--px));stroke-width:2}
/* Workbench of the step happening now: goal and done criteria, method, skills, MCP servers, then the button. */
.aw-panel{position:absolute;inset:0 0 0 auto;display:flex;flex-direction:column;gap:calc(8 * var(--px));width:calc(220 * var(--px));padding:calc(24 * var(--px)) calc(10 * var(--px)) calc(10 * var(--px));border-left:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,#121527,#0e1120)}
.awp-min{position:absolute;top:calc(11 * var(--px));right:calc(14 * var(--px));width:calc(9 * var(--px));height:calc(1.5 * var(--px));border-radius:2px;background:rgba(223,225,242,.45)}
.awp-card{display:flex;flex-direction:column;gap:calc(5 * var(--px));padding:calc(9 * var(--px)) calc(11 * var(--px)) calc(10 * var(--px));border:1px solid rgba(255,255,255,.06);border-radius:calc(11 * var(--px));background:rgba(255,255,255,.035)}
.awp-head{display:flex;align-items:center;gap:calc(8 * var(--px));margin:calc(-9 * var(--px)) calc(-11 * var(--px)) calc(4 * var(--px));padding:calc(9 * var(--px)) calc(11 * var(--px));border-bottom:1px solid rgba(255,255,255,.06);border-radius:calc(11 * var(--px)) calc(11 * var(--px)) 0 0;background:rgba(255,255,255,.04);color:#eceaff;font-size:calc(13 * var(--px))}
.awp-head b{flex:1;min-width:0;font-weight:700}
.awp-radio{position:relative;width:calc(14 * var(--px));height:calc(14 * var(--px));flex:none;border-radius:50%;box-shadow:inset 0 0 0 calc(1.5 * var(--px)) #9d8ff9}
.awp-radio::after{content:'';position:absolute;inset:calc(3.5 * var(--px));border-radius:50%;background:#b8adff}
.aw .awp-x{width:calc(12 * var(--px));height:calc(12 * var(--px));flex:none;color:rgba(223,225,242,.42);stroke-width:2}
.awp-label{color:rgba(205,208,232,.62);font-size:calc(11 * var(--px));font-weight:650}
.awp-row{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--px))}
.awp-text{margin-bottom:calc(3 * var(--px));color:#e4e5f5;font-size:calc(12 * var(--px))}
.awp-checks{display:grid;gap:calc(5 * var(--px))}
.awp-checks li{display:flex;align-items:center;gap:calc(8 * var(--px));color:#d8daec;font-size:calc(12 * var(--px));white-space:nowrap}
.awp-checks i{width:calc(9 * var(--px));height:calc(9 * var(--px));flex:none;border-radius:50%;background:#8e80f6;box-shadow:0 0 calc(8 * var(--px)) rgba(142,128,246,.6)}
/* The last done criterion fills in once the light reaches the card. */
.awp-checks .is-filling i{animation:awp-fill .7s var(--spring) 3.4s backwards}
@keyframes awp-fill{from{background:transparent;box-shadow:inset 0 0 0 calc(1.5 * var(--px)) #6f7cc8;transform:scale(.85)}}
.awp-field{overflow:hidden;padding:calc(6 * var(--px)) calc(9 * var(--px));border:1px solid rgba(255,255,255,.13);border-radius:calc(7 * var(--px));background:rgba(4,5,14,.35);color:#cfd2e8;font-size:calc(11.5 * var(--px));white-space:nowrap;text-overflow:ellipsis}
.awp-field.is-add{color:rgba(205,208,232,.5)}
.awp-pick{display:flex;align-items:center;gap:calc(7 * var(--px));color:#e1e3f4;font-size:calc(12 * var(--px));white-space:nowrap}
.awp-pick i{width:calc(8 * var(--px));height:calc(8 * var(--px));flex:none;border-radius:50%;background:#8e80f6}
.awp-pick i+i{margin-left:calc(8 * var(--px))}
.awp-pick.is-idle i{background:rgba(205,208,232,.32)}
.awp-go{gap:calc(9 * var(--px));margin-top:auto}
.awp-due{display:flex;align-items:center;gap:calc(6 * var(--px));color:rgba(214,217,238,.78);font-size:calc(11.5 * var(--px));white-space:nowrap}
.aw .awp-due svg{width:calc(13 * var(--px));height:calc(13 * var(--px))}
.awp-due span{flex:1}
.aw .awp-ring{width:calc(15 * var(--px));height:calc(15 * var(--px));transform:rotate(-90deg)}
.awp-ring circle{stroke:rgba(255,255,255,.14);stroke-width:2.6}
.awp-ring .awp-ring-on{stroke:#a395ff;stroke-dasharray:31.4 44}
.awp-due b{color:#e6e7f6;font-weight:700;font-variant-numeric:tabular-nums}
.awp-btn{position:relative;display:grid;place-items:center;height:calc(34 * var(--px));overflow:hidden;border-radius:calc(9 * var(--px));background:linear-gradient(180deg,#7167e2,#5a50c9);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 calc(8 * var(--px)) calc(20 * var(--px)) calc(-8 * var(--px)) rgba(110,96,230,.8);color:#fff;font-size:calc(12.5 * var(--px));font-weight:700;white-space:nowrap}
/* One soft sheen once the step is ready to be confirmed. */
.awp-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%) 0 0 / 260% 100% no-repeat;animation:awp-sheen 1.3s var(--ease) 4.2s both}
@keyframes awp-sheen{from{background-position:100% 0}to{background-position:0 0}}
/* Narrower containers: first the workbench goes, then (phones) the rail, and the map is cropped around the step now. */
@container appshot (max-width: 699px){
  .aw{--px:calc(100cqw / 640);aspect-ratio:640 / 600}
  .aw-panel{display:none}
}
@container appshot (max-width: 519px){
  .aw{--px:calc(100cqw / 410);aspect-ratio:410 / 380}
  .aw-rail{display:none}
  .aw-map{left:0;top:calc(-180 * var(--px))}
  .aw-crumb{top:calc(192 * var(--px))}
  /* The map runs on past the right edge: let it fade rather than stop. */
  .aw::before{content:'';position:absolute;inset:0 0 0 auto;z-index:1;width:16%;background:linear-gradient(90deg,rgba(8,11,34,0),rgba(8,11,34,.88));pointer-events:none}
}
/* Animations pause while the hero is off screen (app.js). */
.hero-visual[data-paused] *,.hero-visual[data-paused] *::before,.hero-visual[data-paused] *::after{animation-play-state:paused!important}
.hero-float{position:absolute;z-index:3}
@keyframes drift{50%{transform:translateY(-7px)}}
/* From any chat: the one line that moves the map on, floating over the window's edge. */
.hero-bubble{left:43%;top:-30px;display:flex;flex-direction:column;gap:5px;padding:12px 18px 13px 15px;border:1px solid rgba(255,255,255,.15);border-radius:18px 18px 18px 6px;background:var(--glass);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);animation:hb-in .7s var(--spring) 1.4s backwards,drift 6.5s ease-in-out 2.1s infinite}
@keyframes hb-in{from{opacity:0;translate:0 10px;scale:.94}}
.hb-who{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11.5px;font-weight:700;line-height:1.2}
.hb-who i{width:7px;height:7px;border-radius:50%;background:var(--now);box-shadow:0 0 0 3px rgba(169,185,255,.18)}
.hb-text{color:var(--text);font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap}

/* 2 · Say it, get a map */
.try{padding-top:clamp(48px,6vw,96px)}
/* The heading on the left, the "chat becomes a map" scene on the right running to the window edge; the scene's lower
   edge slips under the studio's glass (the studio blurs what is behind it). */
.try-intro{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;gap:clamp(20px,3vw,48px);margin-bottom:calc(-1 * clamp(40px,5vw,72px))}
.try-intro .section-head{padding-bottom:clamp(40px,5vw,72px)}
/* An elliptical mask (no straight edges) plus lighten: the render's faint navy glow fades out with no visible box. */
.try-visual{position:relative;margin:0 calc(-1 * var(--gutter)) 0 0;aspect-ratio:1920 / 1086;pointer-events:none;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(76% 72% at 56% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(76% 72% at 56% 50%,#000 58%,transparent 100%)}
.try-visual img{width:100%;height:100%;object-fit:cover}
.studio{position:relative;z-index:1;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(180deg,rgba(17,19,36,.82),rgba(8,9,18,.94) 260px);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 60px 140px -60px rgba(0,0,0,.95),0 40px 120px -60px rgba(124,106,220,.42);overflow:hidden}
.studio::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,233,255,.7),transparent);pointer-events:none}
.composer{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main side" "reply reply";align-items:end;gap:14px 32px;padding:22px 26px 18px;border-bottom:1px solid var(--line)}
.composer-main{grid-area:main;min-width:0}
.composer-side{grid-area:side;min-width:0}
.composer-label{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--muted);font-size:13px;line-height:1.3}
.composer-label .icon{width:16px;height:16px;color:var(--accent)}
.composer-label b{color:var(--text);font-weight:700}
.composer-label span::before{content:'·';margin-right:8px;color:var(--dim)}
.composer-field{display:flex;align-items:center;gap:3px;min-height:60px;padding:8px 8px 8px 20px;border:1px solid var(--line-2);border-radius:16px;background:rgba(4,5,11,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);transition:border-color .3s,box-shadow .3s}
.composer-field[data-state="typing"]{border-color:rgba(169,185,255,.5);box-shadow:0 0 0 4px rgba(169,185,255,.1)}
.composer-text{min-width:0;overflow:hidden;color:var(--text);font-size:18px;font-weight:600;line-height:1.4;white-space:nowrap;text-overflow:ellipsis}
.composer-text:empty::before{content:attr(data-placeholder);color:var(--muted);font-weight:500}
.caret{width:2px;height:22px;flex:none;margin-right:auto;border-radius:2px;background:var(--now);opacity:0}
.composer-field[data-state="typing"] .caret,.composer-field[data-state="idle"] .caret{opacity:1;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.composer-send{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:rgba(255,255,255,.06);color:var(--body);transition:background-color .25s,color .25s}
.composer-field[data-state="typing"] .composer-send,.composer-field[data-state="sent"] .composer-send{background:var(--text);color:var(--ink)}
.composer-field[data-state="sending"] .composer-send{background:var(--accent);color:var(--ink);animation:send-pop .45s var(--spring)}
@keyframes send-pop{40%{transform:scale(.86)}}
.chips-label{margin-bottom:10px;color:var(--muted);font-size:13px;font-weight:600;line-height:1.3}
.prompt-chips{display:flex;flex-wrap:wrap;gap:8px}
.prompt-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03);color:var(--text-2);font-size:15px;font-weight:640;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .15s var(--ease)}
.prompt-chip::before{content:'';width:8px;height:8px;background:var(--accent);clip-path:var(--sparkle);transition:background-color .2s}
.prompt-chip:hover{border-color:var(--line-3);background:rgba(255,255,255,.07)}
.prompt-chip:active{transform:scale(.97)}
.prompt-chip[aria-pressed="true"]{border-color:var(--text);background:var(--text);color:var(--ink)}
.prompt-chip[aria-pressed="true"]::before{background:#5b4fc9}
.composer-reply{grid-area:reply;display:flex;align-items:center;gap:10px;min-height:26px;color:var(--body);font-size:14.5px;line-height:1.5}
.reply-dot{width:9px;height:9px;flex:none;background:var(--star);clip-path:var(--sparkle)}
.composer-reply[data-state="drafting"] .reply-dot,.composer-reply[data-state="typing"] .reply-dot{border-radius:50%;clip-path:none;background:var(--now);animation:pulse 1s var(--ease) infinite}
@keyframes pulse{50%{transform:scale(.6);opacity:.5}}

/* Live map: night edition of the renewal demo (plain lines, flowing light, orbit on "now", starlight for done). */
.map-demo{position:relative;container:demo / inline-size}
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;padding:12px 20px 12px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.demo-name{display:flex;align-items:center;gap:9px;min-width:0;color:var(--muted);font-size:13.5px;line-height:1.3;white-space:nowrap}
.demo-name img{opacity:.9}
.demo-app{color:var(--text);font-size:11.5px;font-weight:760;letter-spacing:.16em}
.demo-name i{color:rgba(236,233,250,.28);font-style:normal}
.demo-name b{color:var(--text);font-size:15px;font-weight:720}
.demo-kind{padding-left:9px;border-left:1px solid var(--line-2)}
.demo-meta{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.demo-chip{padding:2px 10px;border:1px solid var(--line-3);border-radius:999px;color:var(--body);font-size:12px;font-weight:650}
.demo-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"map" "bar" "panel"}
.demo-map{grid-area:map;position:relative;display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;background:radial-gradient(60% 70% at 40% 46%,rgba(125,141,219,.09),transparent 72%),radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0 / 22px 22px,rgba(5,6,12,.72);transition:opacity .4s var(--ease),filter .4s var(--ease)}
[data-compose][data-phase="typing"] .demo-map{opacity:.45;filter:saturate(.6)}
.demo-panel{grid-area:panel;container:panel / inline-size;padding:26px 28px 28px;border-top:1px solid var(--line);background:rgba(10,11,22,.92);transition:opacity .35s var(--ease)}
.demo-panel.is-drafting{opacity:.35}
@container demo (min-width: 1040px){
  .demo-body{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"map panel" "bar bar"}
  .demo-panel{min-height:var(--panel-h,auto);border-top:0;border-left:1px solid var(--line)}
}
.demo-bar{grid-area:bar;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:11px 14px 11px 22px;border-top:1px solid var(--line);background:rgba(10,11,22,.92);transition:background-color .35s,border-color .35s}
.demo-bar[data-mode="approval"]{border-top-color:rgba(241,183,121,.34);background:linear-gradient(rgba(241,183,121,.06),rgba(241,183,121,.06)),rgba(10,11,22,.94)}
.demo-status{display:flex;align-items:center;gap:12px;min-height:40px;color:var(--text);font-size:15px;line-height:1.45}
.status-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--now);box-shadow:0 0 0 4px rgba(169,185,255,.14);transition:background-color .3s,box-shadow .3s}
.demo-status[data-state="turn"] .status-dot,.demo-status[data-state="approval"] .status-dot{background:var(--turn);box-shadow:0 0 0 4px rgba(241,183,121,.16)}
.demo-status[data-state="done"] .status-dot{background:var(--star);box-shadow:0 0 0 4px rgba(239,227,201,.14)}
.demo-status[data-state="drafting"] .status-dot{animation:pulse 1s var(--ease) infinite}
.demo-actions{display:flex;flex:none;align-items:center;gap:8px;margin-left:auto;transition:opacity .35s var(--ease),transform .35s var(--ease)}
html:not(.js) .demo-actions{display:none}
.map-demo[data-busy] .demo-actions{opacity:0;transform:translateY(4px);pointer-events:none}
.map-demo[data-invite] [data-demo-action="next"]{animation:invite 1.5s var(--ease) .3s 2}
@keyframes invite{from{box-shadow:0 0 0 0 rgba(217,209,251,.5)}to{box-shadow:0 0 0 14px rgba(217,209,251,0)}}
.demo-foot{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 32px;margin-top:20px;padding-inline:4px}
.demo-hint{max-width:62ch;color:var(--body);font-size:15px;line-height:1.7}
.demo-label{display:flex;align-items:flex-start;gap:9px;max-width:56ch;color:var(--muted);font-size:14px;line-height:1.6}
.demo-label .icon{width:16px;height:16px;margin-top:3px}

.map-stage{--cols:6;--card-w:134px;--card-h:100px;--row-gap:100px;--mid:46%;--pad:30px;position:relative;flex:1 0 auto;height:500px;min-width:calc(var(--cols) * 152px + 2 * var(--pad))}
.map-stage.cols-5{--cols:5}.map-stage.cols-6{--cols:6}.map-stage.cols-7{--cols:7}
.map-stage[data-entering]{animation:stage-in .45s var(--ease) both}
@keyframes stage-in{from{opacity:0;transform:translateY(8px)}}
.map-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.map-edge path{fill:none;stroke-linecap:round}
.edge-line{stroke:rgba(255,255,255,.16);stroke-width:1.3;transition:stroke .6s var(--ease)}
.map-edge[data-state="done"] .edge-line{stroke:rgba(239,227,201,.5)}
.map-edge[data-state="active"] .edge-line{stroke:rgba(169,185,255,.42)}
.edge-glow,.edge-flow{opacity:0;transition:opacity .5s}
.map-edge[data-state="active"] .edge-glow{opacity:.55;stroke:rgba(169,185,255,.32);stroke-width:6;stroke-dasharray:16 84;animation:edge-flow 2.1s linear infinite}
.map-edge[data-state="active"] .edge-flow{opacity:1;stroke:#e6ebff;stroke-width:1.8;stroke-dasharray:9 91;animation:edge-flow 2.1s linear infinite}
@keyframes edge-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
/* When the whole map is done, one warm light runs along every line, once. */
.map-demo[data-finished] .map-edge .edge-flow{opacity:1;stroke:#fff1d6;stroke-width:1.8;stroke-dasharray:14 200;animation:edge-sweep 1.9s var(--ease) both}
@keyframes edge-sweep{from{stroke-dashoffset:14}to{stroke-dashoffset:-100}}
.map-nodes{list-style:none}
.map-slot{--col:0;--row:0;position:absolute;width:var(--card-w);height:var(--card-h);left:calc(var(--pad) + (100% - 2 * var(--pad) - var(--card-w)) * var(--col) / (var(--cols) - 1));top:calc(var(--mid) + var(--row) * var(--row-gap) - var(--card-h) / 2)}
.col-1{--col:1}.col-2{--col:2}.col-3{--col:3}.col-4{--col:4}.col-5{--col:5}.col-6{--col:6}
.row-n1{--row:-1}.row-p1{--row:1}
.map-node{--orbit-color:var(--now);--orbit-hi:var(--now-hi);position:relative;display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:11px 12px 10px 13px;border:1px solid var(--line-2);border-radius:15px;background:var(--bg-card);color:var(--text);text-align:left;cursor:pointer;isolation:isolate;box-shadow:0 14px 30px -18px rgba(0,0,0,.9);transition:border-color .5s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease),transform .2s var(--ease)}
.map-node:hover{border-color:rgba(255,255,255,.3);transform:translateY(-1px)}
.map-node[aria-pressed="true"]{box-shadow:0 0 0 3px rgba(182,170,238,.28),0 14px 30px -18px rgba(0,0,0,.9)}
.map-node::after{opacity:0;transition:opacity .5s}
.node-kind{color:var(--muted);font-size:11.5px;font-weight:650;line-height:1.2;white-space:nowrap}
.node-title{display:-webkit-box;overflow:hidden;color:var(--text);font-size:15px;font-weight:680;line-height:1.3;letter-spacing:-.012em;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-wrap:balance}
.node-state{display:flex;align-items:center;gap:6px;min-width:0;color:var(--muted);font-size:11.5px;font-weight:650;line-height:1.2;white-space:nowrap;transition:color .4s}
.node-state-text{overflow:hidden;text-overflow:ellipsis}
.map-node[data-external] .node-kind{padding-right:20px}
.node-dot{width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.node-flag{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:21px;height:21px;border:1px solid var(--line-3);border-radius:50%;color:var(--muted);transition:color .4s,border-color .4s,background-color .4s}
.node-flag .icon{width:12px;height:12px;stroke-width:1.7}
.map-node[data-state="waiting"] .node-title{color:rgba(243,241,251,.72)}
.map-node[data-state="draft"] .node-title{color:rgba(243,241,251,.6)}
.map-node[data-state="draft"] .node-state{color:var(--dim)}
.map-node[data-state="now"]{border-color:var(--now-line);background:var(--now-wash);box-shadow:0 0 0 5px rgba(169,185,255,.07),0 16px 34px -18px rgba(90,110,220,.55)}
.map-node[data-state="now"] .node-state{color:var(--now)}
.map-node[data-state="turn"]{--orbit-color:var(--turn);--orbit-hi:#ffe6c8;border-color:rgba(241,183,121,.4);background:#14111a}
.map-node[data-state="turn"] .node-state{color:var(--turn)}
.map-node[data-state="now"]::after,.map-node[data-state="turn"]::after{opacity:1;animation:orbit 3.2s linear infinite}
.map-node[data-state="approval"]{border-color:rgba(241,183,121,.62);background:#17120f;box-shadow:0 0 0 4px rgba(241,183,121,.1)}
.map-node[data-state="approval"] .node-state,.map-node[data-state="approval"] .node-flag{color:var(--turn);border-color:rgba(241,183,121,.5)}
.map-node[data-state="done"]{border-color:var(--star-line);background:var(--star-wash);box-shadow:none}
.map-node[data-state="done"] .node-state{color:var(--star)}
.map-node[data-state="done"] .node-dot{width:8px;height:8px;border-radius:0;clip-path:var(--sparkle)}
.map-node.just-done{animation:node-settle 1.1s var(--ease)}
@keyframes node-settle{from{box-shadow:0 0 0 0 rgba(239,227,201,.4)}to{box-shadow:0 0 0 12px rgba(239,227,201,0)}}
.node-tools{position:absolute;top:100%;left:50%;display:flex;gap:14px;transform:translateX(-50%);pointer-events:none}
.node-tool{display:flex;flex-direction:column;align-items:center;color:var(--muted);font-size:11.5px;font-weight:650;line-height:1.2;white-space:nowrap}
.node-tool::before{content:'';width:1px;height:16px;background:rgba(255,255,255,.16)}
.node-tool i{width:13px;height:13px;margin-bottom:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6f2ff 0%,#a494ef 52%,#3f3a7a 100%);opacity:.5;transition:opacity .5s,box-shadow .5s}
.map-slot:has(.map-node[data-state="now"]) .node-tool i{opacity:1;box-shadow:0 0 10px rgba(169,185,255,.5)}
.map-slot:has(.map-node[data-state="now"]) .node-tool{color:var(--body)}
.map-slot:has(.map-node[data-state="done"]) .node-tool i{background:radial-gradient(circle at 35% 30%,#fffaf0 0%,#efe3c9 52%,#6f6250 100%);opacity:.75}
.map-slot.kind-start .map-node,.map-slot.kind-result .map-node{border-radius:24px}
/* Assembling: the cards pop in one by one and the lines draw themselves (map-demo.js). */
.map-stage[data-assembling] .map-slot{opacity:0;transform:translateY(10px) scale(.9)}
.map-stage[data-assembling] .map-slot.is-in{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .55s var(--spring)}
.map-stage[data-assembling] .node-tools{opacity:0;transform:translate(-50%,-6px)}
.map-stage[data-assembling] .is-in .node-tools{opacity:1;transform:translateX(-50%);transition:opacity .4s var(--ease) .18s,transform .5s var(--spring) .18s}
.map-stage[data-assembling] .edge-line{stroke-dasharray:100 100;stroke-dashoffset:100;stroke:rgba(182,170,238,.45)}
.map-stage[data-assembling] .map-edge.is-drawn .edge-line{stroke-dashoffset:0;transition:stroke-dashoffset .42s var(--ease)}

/* Seven steps in a row (the new project): slightly narrower cards so the whole line fits beside the panel. */
.map-stage.cols-7{--card-w:124px;--pad:22px;min-width:calc(var(--cols) * 138px + 2 * var(--pad))}

/* Week view ("이번 주 마감 정리해 줘"): this week's days with the steps due on them; the panel becomes the dashboard. */
.map-demo[data-view="week"] .demo-actions{display:none}
/* The week fills the same height as the map stage, so switching between the map and the week never moves the page. */
.week{flex:1 0 auto;display:flex;flex-direction:column;align-self:stretch;min-width:780px;min-height:500px;padding:22px}
.week-days{flex:1;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;min-height:300px}
.week-day{display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 9px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.015)}
.week-day.has-due{border-color:var(--line-2);background:rgba(255,255,255,.03)}
.wd-head{display:flex;align-items:baseline;gap:6px;padding-inline:3px;color:var(--muted);font-size:12.5px;font-weight:650;line-height:1.2}
.wd-head b{color:var(--text);font-size:20px;font-weight:760;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.wd-items{display:grid;gap:8px}
.wd-empty{flex:1;border-radius:10px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 6px,transparent 6px 12px)}
.due{--orbit-color:var(--now);--orbit-hi:var(--now-hi);position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;padding:10px 10px 9px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-card);isolation:isolate}
.due-step{color:var(--text);font-size:14px;font-weight:700;line-height:1.3}
.due-project{color:var(--muted);font-size:12px;font-weight:600;line-height:1.3}
.due-state{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11.5px;font-weight:680;line-height:1.2}
.due-state i{width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.due-state .icon{width:12px;height:12px}
.due[data-state="done"]{border-color:var(--star-line);background:var(--star-wash)}
.due[data-state="done"] .due-state{color:var(--star)}
.due[data-state="done"] .due-state i{width:8px;height:8px;border-radius:0;clip-path:var(--sparkle)}
.due[data-state="now"]{border-color:var(--now-line);background:var(--now-wash)}
.due[data-state="now"] .due-state{color:var(--now)}
.due[data-state="now"]::after{animation:orbit 3.2s linear infinite}
.due[data-state="check"] .due-state,.due[data-state="approval"] .due-state{color:var(--accent-hi)}
.due[data-state="approval"]{border-color:var(--accent-line)}
.week[data-assembling] .due{opacity:0;transform:translateY(8px) scale(.94)}
.week[data-assembling] .due.is-in{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .5s var(--spring)}
.dash-projects{display:grid;gap:14px;margin-top:20px}
.dash-projects li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px 12px}
.dp-name{color:var(--text);font-size:14.5px;font-weight:680;line-height:1.3}
.dp-num{grid-row:1;grid-column:2;color:var(--muted);font-size:12.5px;font-weight:680;font-variant-numeric:tabular-nums}
.dp-bar{grid-row:2;grid-column:1 / -1;height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.dp-bar i{display:block;height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--ribbon-1),var(--ribbon-2) 70%,var(--ribbon-3))}
.week-dash .panel-list{margin-top:24px}

/* Step panel */
.panel-inner{animation:none}
.demo-panel.is-fresh .panel-inner{animation:panel-in .38s var(--ease)}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}}
.panel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--muted);font-size:13px;font-weight:650}
.panel-chip{padding:2px 9px;border:1px solid var(--line-3);border-radius:999px;color:var(--body);font-size:12px}
.panel-chip[data-state="now"]{border-color:rgba(169,185,255,.36);color:var(--now)}
.panel-chip[data-state="turn"],.panel-chip[data-state="approval"]{border-color:rgba(241,183,121,.42);color:var(--turn)}
.panel-chip[data-state="done"]{border-color:var(--star-line);color:var(--star)}
.panel-title{margin-top:10px;font-size:22px;font-weight:720;line-height:1.3;letter-spacing:-.02em}
.panel-list{display:grid;gap:18px;margin-top:20px}
.panel-row dt{margin-bottom:6px;color:var(--muted);font-size:12.5px;font-weight:650}
.panel-row dd{color:var(--text);font-size:15px;line-height:1.6}
.panel-steps,.panel-checks{display:grid;gap:7px;list-style:none}
.panel-steps{counter-reset:step}
.panel-steps li{display:grid;grid-template-columns:18px 1fr;gap:6px;color:var(--body);counter-increment:step}
.panel-steps li::before{content:counter(step);color:var(--accent);font-size:12.5px;font-weight:700;line-height:1.9;font-variant-numeric:tabular-nums}
.panel-checks li{position:relative;padding-left:20px;color:var(--body)}
.panel-checks li::before{content:'';position:absolute;top:.55em;left:2px;width:9px;height:9px;background:var(--star);clip-path:var(--sparkle)}
.panel-tools{display:flex;flex-wrap:wrap;gap:8px}
.tool-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 11px 3px 7px;border:1px solid var(--line-3);border-radius:999px;color:var(--body);font-size:13px}
.tool-chip i{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6f2ff 0%,#a494ef 55%,#3f3a7a 100%)}
.panel-note{margin-top:18px;padding:12px 14px;border:1px solid rgba(241,183,121,.22);border-radius:12px;background:rgba(241,183,121,.04);color:var(--body);font-size:14px;line-height:1.6}
.panel-note[data-state="approval"]{border-color:rgba(241,183,121,.5);color:var(--text)}
@container panel (min-width: 620px){
  .panel-inner{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 36px;align-items:start}
  .panel-title,.panel-meta{grid-column:1}
  .panel-list{grid-column:2;grid-row:1 / span 3;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;margin-top:0}
  .panel-note{grid-column:1;margin-top:14px}
  .week-dash .dash-projects{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .week-dash .panel-list{grid-column:1 / -1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}
}

/* 3 · Features: bento grid of night tiles */
.features::before{content:'';position:absolute;z-index:-1;left:0;right:0;top:18%;height:70%;background:radial-gradient(50% 40% at 70% 40%,rgba(124,106,220,.08),transparent 70%),radial-gradient(40% 30% at 20% 75%,rgba(125,141,219,.06),transparent 70%);pointer-events:none}
.features .section-head{margin-bottom:clamp(36px,4vw,56px)}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"map map cont" "ref brain cont" "appr sched sched";gap:16px}
.tile{position:relative;display:flex;flex-direction:column;gap:22px;min-width:0;padding:28px 28px 26px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(90% 60% at 100% 0%,rgba(124,106,220,.11),transparent 62%),linear-gradient(180deg,#0d0f1e,#090a14);overflow:hidden;isolation:isolate;transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.tile::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,233,255,.32),transparent);pointer-events:none}
.tile:hover{border-color:rgba(182,170,238,.26);box-shadow:0 30px 80px -50px rgba(124,106,220,.5)}
.reveal-ready .tile[data-reveal]{transition:opacity .7s var(--ease),transform .8s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.tile-map{grid-area:map}.tile-continue{grid-area:cont}.tile-refine{grid-area:ref}.tile-brain{grid-area:brain}.tile-approve{grid-area:appr}.tile-schedule{grid-area:sched}
.tile-head{position:relative;z-index:1;max-width:480px;padding-right:112px}
.tile-continue .tile-head,.tile-brain .tile-head,.tile-refine .tile-head{padding-right:0}
.tile-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--accent);font-size:13.5px;font-weight:700;line-height:1.3}
.tile-kicker .icon{width:16px;height:16px}
.tile h3{font-size:clamp(20px,1.65vw,24px);font-weight:760;line-height:1.35;letter-spacing:-.03em}
.tile-head p:not(.tile-kicker){margin-top:9px;color:var(--body);font-size:15px;line-height:1.7}
/* The glass icons come on black: screen blending drops the black and keeps the glass and its light.
   The soft fade at the bottom keeps the render's floor reflection from ending on a hard edge. */
.tile-icon,.plan-icon{position:absolute;top:12px;right:14px;width:112px;height:112px;margin:0;pointer-events:none}
.tile-icon img,.plan-icon img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
/* A video loop behind a widget: dimmed, masked and always under the content. */
.w-media{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.w-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.w-media::after{content:'';position:absolute;inset:0}

/* Widget 1: mini map */
.w-minimap{position:relative;flex:1;min-height:220px;margin-top:auto;border:1px solid var(--line);border-radius:18px;background:radial-gradient(60% 80% at 40% 50%,rgba(125,141,219,.08),transparent 72%),radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0 / 20px 20px,var(--bg-well);overflow:hidden}
.mm-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mm-lines path{fill:none;stroke-linecap:round}
.mm-line{stroke:rgba(255,255,255,.16);stroke-width:1.3;transition:stroke .5s}
.mm-line[data-state="done"]{stroke:rgba(239,227,201,.5)}
.mm-line[data-state="active"]{stroke:rgba(169,185,255,.42)}
.mm-flow{stroke:#e6ebff;stroke-width:1.8;stroke-dasharray:9 91;opacity:0;transition:opacity .4s}
.mm-flow[data-state="active"]{opacity:1;animation:edge-flow 1.8s linear infinite}
.mm-node{--orbit-color:var(--now);--orbit-hi:var(--now-hi);position:absolute;display:flex;align-items:center;gap:7px;height:40px;margin-top:-20px;padding:0 13px 0 11px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-card);color:var(--muted);font-size:13.5px;font-weight:680;line-height:1;white-space:nowrap;isolation:isolate;transition:border-color .45s var(--ease),background-color .45s var(--ease),color .45s,box-shadow .45s}
.mm-node::before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:var(--dim);transition:background-color .4s}
.mm-pill{border-radius:999px}
.mm-node[data-state="now"]{border-color:var(--now-line);background:var(--now-wash);color:var(--text);box-shadow:0 0 0 4px rgba(169,185,255,.07)}
.mm-node[data-state="now"]::before{background:var(--now)}
.mm-node[data-state="now"]::after{animation:orbit 3s linear infinite}
.mm-node[data-state="done"]{border-color:var(--star-line);background:var(--star-wash);color:var(--star)}
.mm-node[data-state="done"]::before{border-radius:0;width:9px;height:9px;background:var(--star);clip-path:var(--sparkle)}
.mm-node.just-done{animation:node-settle 1s var(--ease)}
/* Wide: one row with a branch, like the app. */
.mm-node[data-key="0"]{left:2.5%;top:50%}
.mm-node[data-key="1"]{left:22%;top:25%}
.mm-node[data-key="2"]{left:22%;top:75%}
.mm-node[data-key="3"]{left:43%;top:50%}
.mm-node[data-key="4"]{left:63.5%;top:50%}
.mm-node[data-key="5"]{left:84%;top:50%}
.mm-progress{position:absolute;left:14px;bottom:10px;color:var(--muted);font-size:12.5px;font-weight:650;line-height:1.2;font-variant-numeric:tabular-nums}
.mm-progress b{color:var(--text)}

/* Widget 2: continue in any chat, over the "continue" loop */
.w-continue{position:relative;flex:1;display:flex;flex-direction:column;gap:18px;min-height:380px;padding:20px 18px 18px;border:1px solid var(--line);border-radius:18px;background:var(--bg-well);overflow:hidden}
.w-continue .w-media video{opacity:.7;object-position:50% 50%}
.w-continue .w-media::after{background:linear-gradient(180deg,rgba(5,6,12,.62) 0%,rgba(5,6,12,.2) 38%,rgba(5,6,12,.2) 62%,rgba(5,6,12,.7) 100%)}
.ct-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ct-line{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round;opacity:.85}
.ct-chat{position:relative;z-index:1;display:flex;flex-direction:column;gap:7px;max-width:84%;transition:opacity .45s var(--ease),transform .55s var(--spring)}
.ct-a{align-self:flex-start}
.ct-b{align-self:flex-end;align-items:flex-end}
.ct-who{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;line-height:1.2}
.ct-who b{padding:3px 9px;border-radius:999px;background:var(--text);color:var(--ink);font-size:12px;font-weight:700}
.ct-b .ct-who b{background:rgba(5,6,12,.6);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-3)}
.ct-bubble{padding:11px 15px;border:1px solid var(--line-2);border-radius:16px 16px 16px 5px;background:rgba(14,16,30,.86);color:var(--text);font-size:15px;font-weight:620;line-height:1.45;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ct-b .ct-bubble{border-radius:16px 16px 5px 16px;border-color:rgba(182,170,238,.36);background:rgba(58,50,112,.78)}
.ct-hub{position:relative;z-index:1;align-self:center;display:inline-flex;align-items:center;gap:9px;margin-block:auto;padding:5px 15px 5px 5px;border:1px solid var(--line-3);border-radius:999px;background:rgba(10,11,22,.88);color:var(--text);font-size:13.5px;font-weight:700;line-height:1.2;box-shadow:0 0 0 6px rgba(182,170,238,.08)}
.ct-hub-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(120% 120% at 30% 20%,#34306a,#14132b 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ct-hub-mark img{width:20px;height:20px}
.ct-hub.is-hit{animation:hub-hit .8s var(--ease)}
@keyframes hub-hit{from{box-shadow:0 0 0 0 rgba(182,170,238,.5)}to{box-shadow:0 0 0 18px rgba(182,170,238,0)}}
.ct-mem{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:12px;font-weight:650;line-height:1.3}
.ct-mem span{margin-right:2px}
.ct-mem b{padding:3px 9px;border:1px solid var(--line-2);border-radius:999px;background:rgba(10,11,22,.82);color:var(--text-2);font-size:12px;font-weight:680}
.ct-step{--orbit-color:var(--now);--orbit-hi:var(--now-hi);position:relative;z-index:1;align-self:center;display:flex;flex-direction:column;gap:6px;width:min(100%,240px);padding:14px 16px;border:1px solid var(--now-line);border-radius:16px;background:rgba(15,19,41,.92);box-shadow:0 0 0 5px rgba(169,185,255,.06);isolation:isolate}
.ct-step::after{animation:orbit 3.2s linear infinite}
.ct-step.is-hit{animation:hit .9s var(--ease)}
@keyframes hit{from{box-shadow:0 0 0 0 rgba(169,185,255,.45)}to{box-shadow:0 0 0 16px rgba(169,185,255,0)}}
.ct-kind{color:var(--now);font-size:12px;font-weight:700;line-height:1.2}
.ct-title{color:var(--text);font-size:17px;font-weight:760;line-height:1.3;letter-spacing:-.02em}
.ct-meta{display:flex;align-items:center;gap:7px;color:var(--star);font-size:12.5px;font-weight:620;line-height:1.3}
.ct-meta i{width:9px;height:9px;flex:none;background:var(--star);clip-path:var(--sparkle)}
.w-continue[data-play] .ct-chat{opacity:0;transform:translateY(10px) scale(.96)}
.w-continue[data-play] .ct-chat.is-in{opacity:1;transform:none}
.w-continue[data-play] .ct-line{stroke-dashoffset:0;opacity:0;transition:opacity .4s}
.w-continue[data-play] .ct-line.is-in{opacity:.85;animation:ct-dash 1.2s linear infinite}
@keyframes ct-dash{to{stroke-dashoffset:-18}}

/* Widget 3: refine before / after */
.w-refine{display:flex;flex-direction:column;gap:14px;margin-top:auto}
.seg{display:inline-flex;align-self:flex-start;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03)}
.seg button{min-height:36px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:var(--body);font-size:13.5px;font-weight:680;cursor:pointer;transition:background-color .25s,color .25s}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--ink)}
.rf-steps{display:grid;gap:0;padding:6px 12px;border:1px solid var(--line);border-radius:16px;background:var(--bg-well)}
.rf-step{display:grid;grid-template-rows:auto 1fr;padding:9px 2px;border-bottom:1px dashed var(--line-2)}
.rf-step:last-child{border-bottom:0}
.rf-title{display:flex;align-items:center;gap:8px;color:var(--text);font-size:14.5px;font-weight:680;line-height:1.35}
.rf-title::before{content:'';width:7px;height:7px;flex:none;border-radius:50%;background:var(--accent)}
.rf-title em{padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:11px;font-style:normal;font-weight:760}
.rf-meta{display:block;padding-left:15px;margin-top:3px;color:var(--muted);font-size:12.5px;font-weight:560;line-height:1.5}
.rf-meta-after{color:var(--turn)}
.rf-meta-before{color:var(--dim)}
.w-refine[data-view="before"] .rf-meta-after,.w-refine:not([data-view="before"]) .rf-meta-before{display:none}
.rf-new{background:linear-gradient(90deg,rgba(182,170,238,.16),transparent 80%);margin-inline:-12px;padding-inline:14px;border-radius:10px;transition:opacity .45s var(--ease),max-height .55s var(--ease),padding .55s var(--ease);max-height:5.2em;overflow:hidden}
.w-refine[data-view="before"] .rf-new{opacity:0;max-height:0;padding-block:0;border-bottom-width:0;visibility:hidden;transition:opacity .3s var(--ease),max-height .5s var(--ease),padding .5s var(--ease),visibility 0s linear .5s}
.rf-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;color:var(--body);font-size:13px;line-height:1.55}
.rf-note b{color:var(--accent-hi);font-weight:720}
.rf-note-before b{color:var(--text-2)}
.w-refine[data-view="before"] .rf-note-after,.w-refine:not([data-view="before"]) .rf-note-before{display:none}

/* Widget 4: second brain, memories gathering over the "local" loop */
.w-brain{flex:1;display:flex;flex-direction:column;gap:14px;margin-top:auto}
.br-cloud{position:relative;flex:1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;min-height:236px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--bg-well);overflow:hidden}
/* The glowing cube sits under the memories: the clip is nudged down so the chips float above the light. */
.br-cloud .w-media video{opacity:.85;object-position:50% 50%;transform:translateY(17%) scale(1.04)}
.br-cloud .w-media::after{background:linear-gradient(180deg,rgba(5,6,12,.92) 0%,rgba(5,6,12,.5) 26%,rgba(5,6,12,.04) 58%,rgba(5,6,12,.28) 100%)}
.br-chip{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border:1px solid var(--line-2);border-radius:999px;background:rgba(12,13,26,.84);color:var(--text-2);font-size:13px;font-weight:600;line-height:1.3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .4s var(--ease),transform .55s var(--spring),border-color .4s,box-shadow .4s}
.br-chip b{padding:2px 7px;border-radius:999px;background:rgba(182,170,238,.16);color:var(--accent-hi);font-size:11.5px;font-weight:720}
.w-brain[data-play] .br-chip{opacity:0;transform:translateY(8px) scale(.9)}
.w-brain[data-play] .br-chip.is-in{opacity:1;transform:none}
.br-chip.is-pass{border-color:rgba(169,185,255,.55);box-shadow:0 0 0 4px rgba(169,185,255,.1)}
.br-foot{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:620;line-height:1.3}
.br-foot .icon{width:16px;height:16px;color:var(--accent)}
.br-foot em{margin-left:auto;padding:3px 10px;border-radius:999px;background:rgba(169,185,255,.12);color:var(--now);font-size:12px;font-style:normal;font-weight:700;transition:opacity .4s}
.w-brain[data-play]:not([data-pass]) .br-foot em{opacity:0}

/* Widget 5: approve before it goes outside (a demo approval moment, so amber) */
.w-approve{display:flex;flex-direction:column;gap:14px;margin-top:auto}
/* The steps before it are done; the line runs down into the step that waits for approval. */
.ap-path{display:grid;gap:8px;margin:0 0 -14px 21px;padding:2px 0 18px 20px;border-left:1px solid var(--star-line)}
.ap-path li{position:relative;display:flex;align-items:baseline;gap:10px;color:var(--text-2);font-size:13.5px;font-weight:650;line-height:1.4}
.ap-path li i{position:absolute;left:-25px;top:.3em;width:10px;height:10px;background:var(--star);clip-path:var(--sparkle)}
.ap-path li span{color:var(--star);font-size:12px;font-weight:620}
.ap-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--turn-line);border-radius:16px;background:linear-gradient(var(--turn-wash),var(--turn-wash)),#100e13;box-shadow:0 0 0 5px rgba(241,183,121,.06);transition:border-color .5s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease)}
.ap-kind{color:var(--muted);font-size:12px;font-weight:650;line-height:1.2}
.ap-title{color:var(--text);font-size:17px;font-weight:760;line-height:1.3}
.ap-state{display:flex;align-items:center;gap:7px;color:var(--turn);font-size:13px;font-weight:680;line-height:1.3;transition:color .4s}
.ap-state i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ap-flag{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(241,183,121,.5);border-radius:50%;color:var(--turn)}
.ap-flag .icon{width:14px;height:14px}
.w-approve[data-state="done"] .ap-card{border-color:var(--star-line);background:var(--star-wash);box-shadow:0 0 0 5px rgba(239,227,201,.05)}
.w-approve[data-state="done"] .ap-state{color:var(--star)}
.w-approve[data-state="done"] .ap-state i{width:10px;height:10px;border-radius:0;clip-path:var(--sparkle)}
.w-approve[data-state="done"] .ap-flag{border-color:var(--star-line);color:var(--star)}
.ap-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ap-btn{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--turn);color:#1e1407;font-size:14.5px;font-weight:720;cursor:pointer;transition:background-color .2s,transform .15s var(--ease),opacity .3s}
.ap-btn:hover{background:#f6c895}
.ap-btn .icon{width:16px;height:16px}
.ap-btn.is-pressing{transform:scale(.94)}
.w-approve[data-state="done"] .ap-btn{opacity:.4;pointer-events:none}
.ap-msg{color:var(--muted);font-size:13.5px;line-height:1.45}

/* Widget 6: schedule and dashboard */
.w-schedule{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;margin-top:auto}
.cal,.dash{padding:14px 16px 16px;border:1px solid var(--line);border-radius:16px;background:var(--bg-well)}
.cal-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;color:var(--muted);font-size:12px;line-height:1.2}
.cal-head b{color:var(--text);font-size:14px;font-weight:720}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.cal-grid .dow{padding-bottom:3px;color:var(--muted);font-size:11px;font-weight:680}
.cal-grid .day{position:relative;display:grid;place-items:center;height:26px;border-radius:8px;color:var(--body);font-weight:560;transition:background-color .35s,color .35s,box-shadow .35s}
.cal-grid .day.is-due{background:rgba(182,170,238,.14);color:var(--accent-hi);font-weight:760}
.cal-grid .day.is-due::after{content:'';position:absolute;bottom:3px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent)}
.cal-grid .day.is-hot{background:var(--accent);color:var(--ink);box-shadow:0 0 18px -4px rgba(182,170,238,.7)}
.cal-grid .day.is-hot::after{background:var(--ink)}
.dash{display:flex;flex-direction:column;gap:10px}
.dash-head{color:var(--muted);font-size:12px;font-weight:680;line-height:1.2}
.dash-list{display:grid;gap:9px}
.dash-list li{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr) 30px;align-items:center;gap:10px;padding:5px 6px;border-radius:9px;transition:background-color .35s}
.dash-list li.is-hot{background:rgba(255,255,255,.06)}
.dash-name{overflow:hidden;color:var(--text);font-size:13px;font-weight:680;line-height:1.2;white-space:nowrap;text-overflow:ellipsis}
.dash-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.dash-bar i{display:block;height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--ribbon-1),var(--ribbon-2) 70%,var(--ribbon-3));transition:width 1.1s var(--ease)}
.w-schedule[data-play]:not([data-filled]) .dash-bar i{width:0}
.dash-num{color:var(--muted);font-size:12px;font-weight:680;text-align:right;font-variant-numeric:tabular-nums}
.dash-next{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:10px;border-top:1px dashed var(--line-2);color:var(--muted);font-size:12px;line-height:1.3}
.dash-next b{color:var(--text);font-size:13.5px;font-weight:720}

/* Under the bento: the app at night on a desk (c1-hero-monitor.webp) beside the three facts that keep it yours.
   The photo bleeds to the band's edges and melts into it; the glowing card on its screen carries the orbit light. */
.pc-band{--pad:clamp(20px,2.4vw,32px);position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:clamp(20px,3vw,48px);margin-top:16px;padding:var(--pad);border:1px solid var(--line);border-radius:26px;background:radial-gradient(60% 90% at 28% 50%,rgba(124,106,220,.12),transparent 72%),linear-gradient(180deg,#0b0c18,#07080f);overflow:hidden;isolation:isolate}
.pc-band::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,233,255,.32),transparent);pointer-events:none}
.pc-shot{position:relative;margin:0 0 0 calc(-1 * var(--pad))}
.shot-frame{position:relative;aspect-ratio:1920 / 1086;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 70%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 86%,transparent 100%);mask-composite:intersect}
.shot-frame img{width:100%;height:100%;object-fit:cover}
/* Its box is measured on the still in % of the frame (frame and still share the 1920:1086 shape). */
.shot-now{--orbit-color:var(--accent);--orbit-hi:#f4f0ff;position:absolute;left:31.7%;top:49.8%;width:8.56%;height:7.06%;border-radius:11% / 24%;pointer-events:none}
.shot-now::after{inset:0;padding:1.6px;animation:orbit 3.2s linear infinite}
.shot-note{position:absolute;left:calc(var(--pad) + 4px);bottom:14px;color:var(--muted);font-size:12px;line-height:1.4}
.pc-copy{position:relative;padding-block:6px}
.pc-title{font-size:clamp(26px,2.4vw,34px);font-weight:770;line-height:1.25;letter-spacing:-.035em}
.facts{display:grid;gap:10px;margin-top:22px}
.facts li{display:flex;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}
.facts .icon{width:22px;height:22px;margin-top:2px;color:var(--accent)}
.facts b{color:var(--text);font-size:15.5px;font-weight:720}
.facts p{margin-top:3px;color:var(--body);font-size:14.5px;line-height:1.6}

/* 4 · Use cases: the workspace island beside the heading, then tabs with a cinematic still per example and the
   example map as a step list */
.uses::before{content:'';position:absolute;z-index:-1;inset:10% 0 0;background:radial-gradient(46% 40% at 28% 48%,rgba(124,106,220,.1),transparent 72%);pointer-events:none}
.uses-intro{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(20px,3vw,48px);margin-bottom:clamp(24px,3vw,40px)}
/* The island render carries a little starry sky above and below; a 2:1 crop keeps the island and its path. */
.uses-visual{margin:0 calc(-1 * var(--gutter)) 0 0;aspect-ratio:2 / 1;pointer-events:none;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(72% 78% at 52% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(72% 78% at 52% 50%,#000 60%,transparent 100%)}
.uses-visual img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.uses-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1fr);gap:20px;align-items:start}
.use-left{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:12px}
.use-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03);overflow-x:auto;scrollbar-width:none}
.use-tabs::-webkit-scrollbar{display:none}
.use-tab{flex:1 0 auto;min-height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--body);font-size:15px;font-weight:660;cursor:pointer;transition:background-color .2s,color .2s}
.use-tab:hover{color:var(--text)}
.use-tab[aria-selected="true"]{background:var(--text);color:var(--ink)}
/* The focused tab is also the selected (white) one, so the ring sits outside it, on the dark tablist (inside its 4px padding). */
.use-tab:focus-visible{outline-offset:2px}
.use-scene{position:relative;aspect-ratio:16 / 10;margin:0;border:1px solid var(--line);border-radius:26px;background:#07080f;overflow:hidden;box-shadow:0 50px 120px -70px rgba(124,106,220,.5)}
.use-scene::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,transparent 58%,rgba(5,6,12,.7));box-shadow:inset 0 1px 0 rgba(255,255,255,.07);pointer-events:none}
.use-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .7s var(--ease),transform 1.4s var(--ease-out)}
.use-still.is-active{opacity:1;transform:none}
.scene-caption{position:absolute;left:18px;bottom:18px;z-index:2;display:inline-flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(8,9,18,.62);color:var(--text);font-size:14px;font-weight:680;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ic-dot{width:9px;height:9px;background:var(--accent);clip-path:var(--sparkle)}
.scene-tag{position:absolute;top:16px;left:16px;z-index:2;padding:3px 11px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(5,6,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text);font-size:12.5px;font-weight:650;line-height:1.5}
.use-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.use-stats div{padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025)}
.use-stats dt{color:var(--muted);font-size:12.5px;font-weight:680;line-height:1.3}
.use-stats dd{margin-top:4px;color:var(--muted);font-size:13px;font-weight:620}
.use-stats dd b{margin-right:2px;color:var(--text);font-size:26px;font-weight:780;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.use-tabs-wrap{display:flex;flex-direction:column;min-width:0;padding:26px 28px 24px;border:1px solid var(--line);border-radius:26px;background:radial-gradient(100% 50% at 100% 0%,rgba(124,106,220,.1),transparent 60%),linear-gradient(180deg,#0d0f1e,#090a14)}
.use-panel{animation:panel-in .4s var(--ease)}
.use-panel:focus-visible{outline-offset:6px;border-radius:14px}
.use-who{color:var(--accent);font-size:13.5px;font-weight:700;line-height:1.3}
.use-title{margin-top:6px;font-size:clamp(26px,2.3vw,32px);font-weight:770;line-height:1.25;letter-spacing:-.035em}
.use-line{margin-top:8px;color:var(--body);font-size:15.5px;line-height:1.7}
.use-steps{position:relative;display:grid;gap:0;margin-top:18px}
.use-steps::before{content:'';position:absolute;left:15px;top:18px;bottom:18px;width:1.5px;background:linear-gradient(var(--accent-line),rgba(239,227,201,.4))}
.use-step{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:7px 0}
.use-num{position:relative;z-index:1;display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--line-3);border-radius:10px;background:#0c0e1b;color:var(--accent-hi);font-size:12px;font-weight:760;font-variant-numeric:tabular-nums}
.use-step.is-external .use-num{border-color:var(--accent);background:rgba(182,170,238,.16);color:var(--text)}
.use-step.kind-result .use-num{border-color:var(--star-line);background:var(--star-wash);color:var(--star)}
.use-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;min-width:0;padding-top:2px}
.use-body .use-step-title,.use-body .use-goal{grid-column:1}
.use-body .use-tools{grid-column:2;grid-row:1 / span 2;margin-top:0;justify-content:flex-end}
.use-step-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;color:var(--text);font-size:15.5px;font-weight:700;line-height:1.4}
.use-goal{color:var(--muted);font-size:14px;line-height:1.55}
.use-tag{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border:1px solid var(--line-3);border-radius:999px;color:var(--muted);font-size:11.5px;font-weight:680;line-height:1.5}
.use-tag .icon{width:12px;height:12px}
.use-tag-approve{border-color:var(--accent-line);background:rgba(182,170,238,.12);color:var(--accent-hi)}
.use-tag-check{border-color:rgba(169,185,255,.36);color:var(--now)}
.use-tag-done{border-color:var(--star-line);color:var(--star)}
.use-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.use-tool{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 6px;border:1px solid var(--line-2);border-radius:999px;color:var(--text-2);font-size:12px;font-weight:620}
.use-tool i{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f6f2ff,#a494ef 52%,#3f3a7a)}
.use-try{margin-top:18px}

/* 5 · Compare */
.compare .section-head{margin-bottom:clamp(36px,4vw,56px)}
.compare-wrap{position:relative}
.compare-wrap::before{content:'';position:absolute;top:-10px;bottom:-10px;right:0;width:42%;border:1px solid rgba(182,170,238,.3);border-radius:26px;background:radial-gradient(100% 40% at 50% 0%,rgba(124,106,220,.2),transparent 70%),linear-gradient(180deg,#0f1022,#0a0b16);box-shadow:0 50px 120px -60px rgba(124,106,220,.5)}
.compare-wrap::after{content:'';position:absolute;top:-10px;right:calc(42% * .14);width:calc(42% * .72);height:1px;background:linear-gradient(90deg,transparent,rgba(240,233,255,.9),transparent)}
.compare-table{position:relative;z-index:1;width:100%;border-collapse:collapse;table-layout:fixed}
.c-topic{width:16%}.c-alone{width:42%}.c-with{width:42%}
.compare-table th,.compare-table td{padding:24px 28px;text-align:left;vertical-align:top}
.compare-table thead th{padding-block:20px 16px;color:var(--muted);font-size:14.5px;font-weight:700}
.compare-table .th-with{color:var(--text)}
.th-viz{display:flex;align-items:center;height:54px;margin-bottom:12px}
.th-chat{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;width:170px}
.th-chat i{display:block;height:9px;border-radius:999px;background:rgba(255,255,255,.12)}
.th-chat i:nth-child(1){width:72%}
.th-chat i:nth-child(2){width:44%;margin-left:30%;background:rgba(255,255,255,.08)}
.th-chat i:nth-child(3){width:58%;margin-left:8%}
.th-chat i:nth-child(4){width:30%;margin-left:52%;background:rgba(255,255,255,.06)}
.th-map i{flex:none;width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.18)}
.th-map i.d{width:15px;height:15px;border-radius:0;background:var(--star);clip-path:var(--sparkle)}
.th-map i.n{background:var(--now);box-shadow:0 0 0 5px rgba(169,185,255,.16),0 0 14px rgba(169,185,255,.6)}
.th-map b{width:40px;height:1.5px;background:var(--star-line)}
.th-map b.on{background:linear-gradient(90deg,var(--star-line),var(--now))}
.th-map b:last-of-type{background:rgba(255,255,255,.14)}
.th-with-in{display:inline-flex;align-items:center;gap:9px;font-size:15.5px}
.compare-table tbody tr+tr th,.compare-table tbody tr+tr td{border-top:1px solid var(--line)}
.compare-table tbody th{padding-left:6px;color:var(--text);font-size:16px;font-weight:720;line-height:1.5}
.compare-table td{position:relative;padding-left:58px;font-size:16px;line-height:1.65}
.td-alone{color:var(--muted)}
.td-alone .icon{position:absolute;left:28px;top:27px;width:18px;height:18px;color:var(--dim)}
.td-with{color:var(--text);font-weight:560}
.spark-dot{position:absolute;left:31px;top:31px;width:13px;height:13px;background:linear-gradient(135deg,var(--ribbon-3),var(--ribbon-2) 50%,var(--ribbon-1));clip-path:var(--sparkle)}

/* 6 · Pricing */
.pricing::before{content:'';position:absolute;z-index:-1;inset:20% 0 10%;background:radial-gradient(40% 50% at 50% 50%,rgba(124,106,220,.1),transparent 70%);pointer-events:none}
.pricing .section-head{margin-bottom:clamp(36px,4vw,56px)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.6vw,38px);border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,#0d0f1e,#090a14);isolation:isolate}
.plan-plus .plan-top{padding-right:100px}
.plan-icon{top:14px;right:16px;width:104px;height:104px}
.plan-plus{border-color:rgba(182,170,238,.36);background:radial-gradient(120% 70% at 50% 0%,rgba(124,106,220,.22),transparent 62%),linear-gradient(180deg,#0f1022,#0a0b16);box-shadow:0 50px 120px -60px rgba(124,106,220,.55)}
.plan-plus::before{content:'';position:absolute;top:-1px;left:14%;right:14%;height:1px;background:linear-gradient(90deg,transparent,rgba(240,233,255,.95),transparent)}
.plan-team{border-style:dashed;border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.015)}
.plan-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.plan-name{font-size:19px;font-weight:720;line-height:1.3;letter-spacing:-.015em}
.plan-badge{padding:4px 11px;border:1px solid var(--accent-line);border-radius:999px;background:rgba(182,170,238,.12);color:var(--accent-hi);font-size:12.5px;font-weight:700}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:20px;color:var(--text)}
.plan-price b{font-size:clamp(40px,3.8vw,56px);font-weight:780;line-height:1.05;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.plan-price span{color:var(--muted);font-size:17px;font-weight:600}
.plan-price-soon b{color:var(--text-2);font-size:clamp(32px,3vw,44px)}
.plan-sub{margin-top:10px;color:var(--body);font-size:15px;line-height:1.6}
.plan-list{display:grid;gap:12px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.plan-list li{position:relative;padding-left:26px;color:var(--text-2);font-size:15.5px;line-height:1.55}
.plan-list li::before{content:'';position:absolute;left:2px;top:.4em;width:12px;height:12px;background:linear-gradient(135deg,var(--ribbon-3),var(--ribbon-2) 50%,var(--ribbon-1));clip-path:var(--sparkle)}
.plan-free .plan-list li::before{background:var(--accent);opacity:.75}
.plan-status{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:28px;color:var(--body);font-size:14px;font-weight:620;line-height:1.4}
.plan-status .store-dot::after{display:none}
.plan-team-note{margin-top:auto;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px;line-height:1.65}
.plan-foot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px 48px;margin-top:16px;padding:26px 30px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.02)}
.plan-included h3{font-size:15.5px;font-weight:720}
.plan-included ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;margin-top:12px}
.plan-included li{position:relative;padding-left:20px;color:var(--body);font-size:14.5px;line-height:1.55}
.plan-included li::before{content:'';position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--star);clip-path:var(--sparkle)}
.plan-note{align-self:end;color:var(--muted);font-size:14px;line-height:1.7}

/* 7 · FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:40px clamp(40px,6vw,104px);align-items:start}
.faq .section-head{position:sticky;top:calc(var(--header-h) + 40px)}
.faq-list{border-top:1px solid var(--line-2)}
.faq-list details{border-bottom:1px solid var(--line-2)}
.faq-list summary{position:relative;display:block;padding:24px 56px 24px 4px;color:var(--text);font-size:18px;font-weight:650;line-height:1.5;cursor:pointer;list-style:none;transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'';position:absolute;right:8px;top:50%;width:30px;height:30px;margin-top:-15px;border:1px solid var(--line-3);border-radius:50%;background:linear-gradient(var(--text),var(--text)) center / 11px 1.5px no-repeat;transition:border-color .3s,background-color .3s}
.faq-list summary::before{content:'';position:absolute;right:22.25px;top:50%;width:1.5px;height:11px;margin-top:-5.5px;background:var(--text);z-index:1;transition:transform .3s var(--ease),opacity .3s}
.faq-list details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq-list summary:hover{color:var(--accent-hi)}
.faq-list summary:hover::after{border-color:var(--accent-line)}
.faq-list details p{max-width:68ch;padding:0 56px 26px 4px;color:var(--body);font-size:16px;line-height:1.8}

/* 8 · Closing band over the constellation loop */
.final-band{position:relative;display:flex;align-items:flex-end;min-height:clamp(620px,86vh,880px);overflow:hidden;isolation:isolate;text-align:center}
.final-media{position:absolute;inset:0;z-index:-2;background:var(--bg)}
/* The constellation sits a little higher than the frame's centre so it crowns the slogan instead of crossing it. */
.final-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:translateY(-10%)}
.final-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--bg) 0%,rgba(5,6,12,0) 18%,rgba(5,6,12,.08) 46%,rgba(5,6,12,.78) 74%,var(--bg) 100%)}
.final-inner{padding-block:clamp(240px,32vh,340px) clamp(96px,10vw,150px)}
.final-kicker{color:var(--accent);font-size:clamp(16px,1.4vw,19px);font-weight:650}
.final-title{margin-top:16px;font-size:clamp(54px,8.6vw,128px);line-height:1.04;font-weight:800;letter-spacing:-.055em}
.final-lede{max-width:34em;margin:26px auto 0;color:var(--body);font-size:clamp(16.5px,1.3vw,18.5px)}
.final-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:40px}
.final-actions .store-chip{flex:1 1 100%;justify-content:center;margin-bottom:6px}

/* Footer and operator information */
.site-footer{padding:72px 0 40px;border-top:1px solid var(--line);background:var(--bg-deep)}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:48px}
.footer-slogan{margin-top:18px;color:var(--text);font-size:16px;font-weight:650}
.footer-status{margin-top:6px;color:var(--muted);font-size:14px}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.footer-cols h2{margin-bottom:14px;color:var(--muted);font-size:13px;font-weight:650;letter-spacing:0}
.footer-cols ul{display:grid;gap:10px}
.footer-cols a{color:var(--body);font-size:15px;overflow-wrap:anywhere}
.footer-cols a:hover{color:var(--text)}
.footer-cols strong{color:var(--text);font-weight:700}
.footer-operator{margin-top:52px;padding-top:26px;border-top:1px solid var(--line)}
/* Separators sit left of each item; the clip hides the one that starts a line. */
.operator-clip{overflow:hidden}
.operator{display:flex;flex-wrap:wrap;gap:4px 0;margin-left:-25px;color:var(--muted);font-size:13.5px;line-height:1.75}
.operator>span{position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 6px;padding-left:25px}
.operator>span::before{content:'';position:absolute;left:12px;top:50%;width:1px;height:12px;margin-top:-6px;background:rgba(236,233,250,.22)}
.operator a{display:inline-flex;align-items:center;gap:3px;color:var(--body);text-decoration:underline;text-decoration-color:rgba(236,233,250,.28);text-underline-offset:3px}
.operator a:hover{color:var(--text)}
.operator .icon{width:12px;height:12px}
.operator strong{color:var(--text);font-weight:700}
.operator-policy{gap:0 6px}
.footer-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;margin-top:16px}
.copyright{color:var(--muted);font-size:13.5px}
.footer-end .motion-toggle{margin-right:-4px}

/* Reveal once per block. Content on screen at load is never hidden; nothing moves under reduced motion. */
.reveal-ready [data-reveal]:not(.is-visible){opacity:0;transform:translateY(20px)}
.reveal-ready [data-reveal]{transition:opacity .8s var(--ease-out),transform .9s var(--ease-out)}
.reveal-ready .plan[data-reveal]:nth-child(2){transition-delay:.06s}
.reveal-ready .plan[data-reveal]:nth-child(3){transition-delay:.12s}

/* Below 1200px the app screen moves under the headline so it can keep a readable size. */
@media (max-width:1199px){
  .hero-grid{--shot-bleed:0px;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "visual" "lower";row-gap:0}
  .hero-copy{max-width:760px}
  .hero-visual{width:100%;max-width:900px;margin-top:34px}
  .hero-bubble{left:30%;top:auto;bottom:-5%}
  .hero-lower{margin-top:34px;max-width:700px}
}
/* Laptops and tablets (721-1199px, e.g. a 1366x768 screen at 125%): the description and the button stay on the first
   screen, above the app window; only phones keep the window between the title and the description. */
@media (min-width:721px) and (max-width:1199px){
  .hero-grid{grid-template-areas:"copy" "lower" "visual"}
  .hero-lower{margin-top:24px}
  .hero-visual{margin-top:44px}
}
/* From 900px the title and the description sit side by side, so both fit on a 615px-high first screen. */
@media (min-width:900px) and (max-width:1199px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"copy lower" "visual visual";column-gap:clamp(32px,4vw,56px)}
  .hero-copy{max-width:none}
  .hero-lower{align-self:end;margin-top:0;max-width:none}
}
/* Tablet */
@media (max-width:1180px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"map map" "cont ref" "cont brain" "appr appr" "sched sched"}
  .uses-grid{grid-template-columns:minmax(0,1fr)}
  .use-left{position:static}
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq .section-head{position:static}
  .composer{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "side" "reply"}
}
@media (max-width:960px){
  .section-head.split{grid-template-columns:minmax(0,1fr)}
  .section-head.split .lede{margin:0}
  .try-intro,.uses-intro{grid-template-columns:minmax(0,1fr)}
  .try-intro{margin-bottom:calc(-1 * clamp(28px,6vw,48px))}
  .try-intro .section-head{padding-bottom:0}
  .try-visual{margin:8px calc(-1 * var(--gutter)) 0}
  .uses-visual{margin:8px calc(-1 * var(--gutter)) 0}
  .pc-band{grid-template-columns:minmax(0,1fr)}
  .pc-shot{margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0}
  .shot-frame{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .plans{grid-template-columns:minmax(0,1fr)}
  .plan-foot{grid-template-columns:minmax(0,1fr)}
  .footer-top{grid-template-columns:minmax(0,1fr)}
}
/* The bright header button needs room: from 1024px beside the menu pill, on tablets (721-860px) once the pill has
   folded into the menu button; on small laptops and phones the header keeps the language switch and 로그인 / Sign in. */
@media (min-width:861px) and (max-width:1023px){
  .header-cta{display:none}
}
@media (max-width:860px){
  .header-inner{grid-template-columns:1fr auto}
  .nav{display:none}
  .menu-button{display:flex}
}
@media (max-width:720px){
  .header-cta{display:none}
}
/* Phones: 로그인 stays in the header, a little tighter; below 368px it moves into the menu. */
@media (max-width:420px){
  .header-actions{gap:6px}
  .header-login{padding:0 12px;font-size:13.5px}
  .lang-switch a{min-width:32px;padding:0 7px}
}
@media (max-width:367px){
  .header-login{display:none}
  .mobile-menu nav a.menu-login{display:block}
}

/* Phone */
@media (max-width:720px){
  :root{--header-h:60px;--section:80px}
  body{font-size:16.5px}
  .hero{padding-top:calc(var(--header-h) + 26px)}
  .hero-kicker{margin-bottom:18px;font-size:13px;padding:6px 13px 6px 11px}
  .hero-title{font-size:clamp(50px,15.4vw,76px);line-height:1.04}
  .hero-sub{margin-top:14px}
  .hero-visual{margin-top:24px}
  .hero-bubble{left:auto;right:10px;bottom:-26px;padding:9px 13px 10px 12px}
  .hb-text{font-size:14.5px}
  .hero-lower{margin-top:44px}
  .hero-actions{gap:14px}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .hero-actions .store-chip{flex:1 1 100%;justify-content:center}
  .motion-toggle-hero{display:flex;margin:8px 0 0 -4px}
  .motion-toggle-hero[hidden]{display:none}
  .section-head h2{font-size:clamp(32px,8.6vw,42px)}
  .try-visual{margin:4px calc(-1 * var(--gutter)) 0}
  .studio{border-radius:20px}
  .composer{padding:18px 16px 14px}
  .composer-label span{display:none}
  .composer-field{min-height:54px;padding-left:16px}
  .composer-text{font-size:16.5px}
  .prompt-chip{min-height:42px;padding:0 15px;font-size:14px}
  .map-stage{--card-w:112px;--card-h:90px;--pad:18px;height:410px;min-width:calc(var(--cols) * 130px + 2 * var(--pad))}
  .map-stage.cols-7{--card-w:112px;--pad:18px;min-width:calc(var(--cols) * 128px + 2 * var(--pad))}
  .week{min-width:700px;min-height:410px;padding:16px}
  .week-days{min-height:260px}
  .demo-top{padding:11px 14px}
  .demo-app,.demo-name>i,.demo-kind,.demo-meta .demo-chip{display:none}
  .demo-bar{padding:12px 14px}
  .demo-status{min-height:0;width:100%;font-size:14.5px}
  .demo-actions{width:100%;justify-content:flex-end}
  .demo-panel{padding:22px 18px 24px}
  .bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"map" "cont" "ref" "brain" "appr" "sched"}
  .tile{padding:22px 20px 20px;border-radius:22px}
  .tile-head{padding-right:84px}
  .tile-continue .tile-head,.tile-brain .tile-head,.tile-refine .tile-head{padding-right:0}
  .tile-icon{top:10px;right:8px;width:86px;height:86px}
  .plan-icon{width:84px;height:84px}
  .plan-plus .plan-top{padding-right:80px}
  .w-minimap{min-height:310px}
  .mm-node[data-key="0"]{left:6%;top:14%}
  .mm-node[data-key="1"]{left:6%;top:38%}
  .mm-node[data-key="2"]{left:auto;right:6%;top:38%}
  .mm-node[data-key="3"]{left:33%;top:62%}
  .mm-node[data-key="4"]{left:6%;top:86%}
  .mm-node[data-key="5"]{left:auto;right:6%;top:86%}
  .mm-progress{left:auto;right:12px;bottom:auto;top:12px}
  .w-continue{min-height:470px}
  .w-schedule{grid-template-columns:minmax(0,1fr)}
  .use-scene{border-radius:22px}
  .use-stats{gap:6px}
  .use-stats div{padding:10px 10px 9px;border-radius:14px}
  .use-stats dt{font-size:11.5px}
  .use-stats dd b{font-size:21px}
  .use-body{grid-template-columns:minmax(0,1fr)}
  .use-body .use-tools{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:6px}
  .use-tabs-wrap{padding:18px 16px;border-radius:22px}
  .use-tab{padding:0 12px;font-size:14px}
  .compare-wrap::before,.compare-wrap::after{display:none}
  .compare-table,.compare-table tbody,.compare-table tr,.compare-table th,.compare-table td{display:block;width:100%}
  .compare-table thead,.compare-table colgroup{display:none}
  .compare-table tbody{display:grid;gap:12px}
  .compare-table tbody tr{padding:18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#0d0f1e,#090a14)}
  .compare-table tbody tr+tr th,.compare-table tbody tr+tr td{border-top:0}
  .compare-table tbody th{padding:0 0 10px}
  .compare-table td{padding:10px 0 0;font-size:15px}
  .compare-table td::before{content:attr(data-label);display:block;margin-bottom:4px;color:var(--muted);font-size:12.5px;font-weight:680}
  .compare-table .td-with{margin-top:8px;padding:12px 14px;border:1px solid var(--accent-line);border-radius:14px;background:rgba(182,170,238,.08)}
  .compare-table .td-with::before{color:var(--accent-hi)}
  .td-alone .icon,.td-with .spark-dot{display:none}
  .plan{padding:24px 22px 26px}
  .plan-foot{padding:22px 20px}
  .plan-included ul{grid-template-columns:minmax(0,1fr)}
  .faq-list summary{font-size:16.5px;padding-right:50px}
  .faq-list details p{padding-right:8px}
  .final-band{min-height:0}
  .final-inner{padding-block:280px 96px}
  .final-title .nowrap{display:block}
  .final-actions .btn{flex:0 1 auto}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-cols>div:last-child{grid-column:1 / -1}
  .operator{flex-direction:column;gap:2px;margin-left:0}
  .operator>span{padding-left:0}
  .operator>span::before{display:none}
}
@media (max-width:420px){
  .demo-actions .btn-ghost span{display:none}
}

/* Reduced motion: posters only (media.js), a still sky, no orbit, no flowing light, no reveals. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .hero-title .slogan-gradient,.hero-stars{animation:none!important}
  /* The app screen rests on its final frame: lines drawn, the step glowing, every done criterion filled. */
  .app-shot,.app-shot *,.app-shot *::before,.app-shot *::after,.hero-float{animation:none!important}
  .store-dot::after{display:none}
  .map-edge .edge-glow,.map-edge .edge-flow,.mm-flow{display:none}
  .reveal-ready [data-reveal]:not(.is-visible){opacity:1;transform:none}
}
/* "Pause motion" (the site's own switch, WCAG 2.2.2, app.js sets html[data-motion="off"]): the same still page as reduced motion. */
:root[data-motion="off"]{scroll-behavior:auto}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
:root[data-motion="off"] .hero-title .slogan-gradient,:root[data-motion="off"] .hero-stars{animation:none!important}
:root[data-motion="off"] .app-shot,:root[data-motion="off"] .app-shot *,:root[data-motion="off"] .app-shot *::before,:root[data-motion="off"] .app-shot *::after,:root[data-motion="off"] .hero-float{animation:none!important}
:root[data-motion="off"] .store-dot::after{display:none}
:root[data-motion="off"] .map-edge .edge-glow,:root[data-motion="off"] .map-edge .edge-flow,:root[data-motion="off"] .mm-flow{display:none}
:root[data-motion="off"] .reveal-ready [data-reveal]:not(.is-visible){opacity:1;transform:none}
@media (forced-colors: active){
  .slogan-gradient,.hero-title .slogan-gradient{background:none;color:CanvasText}
  .map-node,.btn,.prompt-chip,.mm-node,.motion-switch{border:1px solid CanvasText}
}

/* ============================================================================================================
   Subpages: pricing, support, the legal pages and 404 (launch 2026-10-17). Same night palette, tokens and type as
   the home page; long-form text gets a calmer measure and brighter body copy for reading.
   ============================================================================================================ */
.page-hero{position:relative;padding:calc(var(--header-h) + clamp(44px,6vw,92px)) 0 clamp(28px,3vw,44px);overflow:clip;isolation:isolate}
.page-hero .hero-sky{position:absolute;inset:0;z-index:-1}
.page-hero h1{max-width:18em;font-size:clamp(40px,6vw,84px);line-height:1.06;font-weight:800;letter-spacing:-.05em}
.page-legal .page-hero h1{font-size:clamp(36px,4.6vw,64px)}
.page-hero .lede{margin-top:22px}
.hero-note-line{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:10px 18px 10px 16px;border:1px solid rgba(182,170,238,.24);border-radius:999px;background:rgba(182,170,238,.08);color:var(--text-2);font-size:14.5px;font-weight:600;line-height:1.4}
.page-pricing .section,.page-support .section{padding-block:clamp(32px,4vw,64px)}
.sub-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:clamp(20px,2.4vw,32px)}
.sub-head h2{font-size:clamp(28px,3.2vw,44px);line-height:1.15;font-weight:780;letter-spacing:-.04em}
.sub-head p{color:var(--body);font-size:16px}

/* Plans: the cards are shared by the home page and the pricing page. */
.plans-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.plans-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan-for{margin-top:12px;color:var(--muted);font-size:14.5px;line-height:1.6}
.plan-cta{display:grid;gap:10px;margin-top:auto;padding-top:28px}
.plan-cta .btn{width:100%}
/* The yearly way to buy: a quiet link under the Subscribe button. */
.plan-year{justify-self:center;padding:4px 6px;color:var(--accent);font-size:14.5px;font-weight:650;line-height:1.4;text-decoration:underline;text-decoration-color:rgba(182,170,238,.4);text-underline-offset:3px}
.plan-year:hover{color:var(--accent-hi);text-decoration-color:currentColor}
.plan-buy-note{color:var(--muted);font-size:13px;line-height:1.5;text-align:center}
.plan-paid{background:radial-gradient(120% 70% at 50% 0%,rgba(125,141,219,.12),transparent 62%),linear-gradient(180deg,#0d0f1e,#090a14)}
.plan-plus-team{border-color:rgba(182,170,238,.3)}
.plan-team{border-style:solid;border-color:var(--line-2);background:radial-gradient(120% 70% at 50% 0%,rgba(125,141,219,.14),transparent 62%),linear-gradient(180deg,#0d0f1e,#090a14)}
.plan-team .plan-sub{margin-top:12px}
.team-rows{display:grid;gap:8px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.team-rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.tr-name{display:grid;gap:2px;min-width:0}
.tr-name b{color:var(--text);font-size:15.5px;font-weight:720}
.tr-name span{color:var(--muted);font-size:13px;line-height:1.45}
.tr-price{flex:none;color:var(--muted);font-size:13px;white-space:nowrap}
.tr-price b{margin-right:4px;color:var(--text);font-size:18px;font-weight:760;font-variant-numeric:tabular-nums}
.team-year{color:var(--muted);font-size:13.5px}
.plan-note{display:grid;gap:12px;align-content:end}
.team-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.team-how li{position:relative;padding:18px 20px 18px 44px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02);color:var(--body);font-size:15px;line-height:1.65}
.team-how li::before,.star-list li::before{content:'';position:absolute;width:11px;height:11px;background:linear-gradient(135deg,var(--ribbon-3),var(--ribbon-2) 50%,var(--ribbon-1));clip-path:var(--sparkle)}
.team-how li::before{left:20px;top:23px}

/* Compare table: scrolls inside its own box on narrow screens, never the page. */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#0b0c18,#07080f)}
.table-scroll:focus-visible{outline-offset:2px}
.plan-table{width:100%;min-width:720px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.plan-table th,.plan-table td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;font-size:15px;line-height:1.5}
.plan-table thead th{color:var(--text);font-size:14.5px;font-weight:720}
.plan-table tbody th{color:var(--muted);font-weight:620}
/* The row labels stay in view while the table scrolls sideways on phones. */
.plan-table tbody th,.plan-table thead th:first-child{position:sticky;left:0;z-index:1;background:#0a0b16}
@media (max-width:720px){.plan-table{min-width:640px}.plan-table th,.plan-table td{padding:13px 14px;font-size:14px}.plan-table tbody th{min-width:128px}}
.plan-table td{color:var(--text-2)}
.plan-table tbody tr:last-child th,.plan-table tbody tr:last-child td{border-bottom:0}
.plan-table td:nth-child(3),.plan-table th:nth-child(3){background:rgba(182,170,238,.06)}
.table-note{max-width:80ch;margin-top:16px;color:var(--muted);font-size:14px;line-height:1.75}

/* Facts in a grid (payment terms) and the two-column info band under it. */
.fact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fact-grid>div{padding:22px 24px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.02)}
.fact-grid dt{color:var(--text);font-size:16px;font-weight:720}
.fact-grid dd{margin:8px 0 0;color:var(--body);font-size:15px;line-height:1.7}
.info-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 48px;margin-top:16px;padding:28px 30px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(70% 120% at 0% 0%,rgba(124,106,220,.1),transparent 70%),rgba(255,255,255,.015)}
.info-band h3{font-size:17px;font-weight:720}
.info-band p{margin-top:12px;color:var(--body);font-size:15px;line-height:1.7}
.star-list{display:grid;gap:10px;margin-top:14px}
.star-list li{position:relative;padding-left:24px;color:var(--body);font-size:15px;line-height:1.65}
.star-list li::before{left:1px;top:.5em}

/* Support */
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.contact-card{display:flex;flex-direction:column;padding:26px 26px 24px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(90% 60% at 100% 0%,rgba(124,106,220,.11),transparent 62%),linear-gradient(180deg,#0d0f1e,#090a14)}
.contact-card .tile-kicker .icon{width:17px;height:17px}
.contact-main{margin:4px 0 10px;color:var(--text);font-size:clamp(19px,1.8vw,24px);font-weight:740;letter-spacing:-.02em;line-height:1.35;overflow-wrap:anywhere}
.contact-main a{text-decoration:underline;text-decoration-color:rgba(182,170,238,.45);text-underline-offset:5px;text-decoration-thickness:1px}
.contact-main a:hover{color:var(--accent-hi)}
.contact-card p:not(.contact-main):not(.tile-kicker){color:var(--body);font-size:15px;line-height:1.65}
.reply-note{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:8px 32px;margin-top:16px;padding:22px 26px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.02)}
.reply-note h2{font-size:16px;font-weight:720;letter-spacing:-.01em}
.reply-note p{color:var(--body);font-size:15px;line-height:1.7}
.topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.topic{padding:24px 26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,#0c0e1b,#090a14);scroll-margin-top:calc(var(--header-h) + 20px)}
.topic h3{font-size:18px;font-weight:720;letter-spacing:-.02em}
.topic p{margin-top:10px;color:var(--body);font-size:15.5px;line-height:1.75}
.topic b{color:var(--text);font-weight:680}

/* Support: service notices (notices.json) and how to report a problem. */
.notice-list{display:grid;gap:12px}
.notice{padding:20px 24px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.02)}
.notice-outage{border-color:var(--turn-line);background:var(--turn-wash)}
.notice-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.notice-kind{padding:3px 10px;border:1px solid var(--accent-line);border-radius:999px;color:var(--accent-hi);font-size:13px;font-weight:700}
.notice-outage .notice-kind{border-color:var(--turn-line);color:var(--turn)}
.notice h3{margin-top:10px;font-size:17px;font-weight:720}
.notice p:not(.notice-meta){margin-top:8px;color:var(--body);font-size:15px;line-height:1.7}
.notice-empty{display:flex;align-items:center;gap:12px;padding:18px 22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02);color:var(--body);font-size:15px;line-height:1.6}
.notice-empty .store-dot::after{display:none}
.report-lede{max-width:62em;margin:-8px 0 18px;color:var(--body);font-size:16px;line-height:1.75}
.report-lede a,.support-notices .sub-head a,.info-band p a{color:var(--accent-hi);text-decoration:underline;text-decoration-color:rgba(182,170,238,.45);text-underline-offset:3px}
.topic .report-include{margin-top:14px;color:var(--text);font-size:14.5px;font-weight:700}
.support-report .topic .star-list{margin-top:8px}

/* Getting started: the app's needs, four numbered steps, where data lives. */
.hero-req{max-width:62em;margin-top:14px;color:var(--body);font-size:15px;line-height:1.7}
.step-list{counter-reset:none}
.step-list .topic{position:relative}
.step-num{display:grid;place-items:center;width:34px;height:34px;margin-bottom:14px;border:1px solid var(--accent-line);border-radius:50%;background:var(--accent-wash);color:var(--accent-hi);font-size:15px;font-weight:760;font-variant-numeric:tabular-nums;line-height:1}
.fact-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.topic .inline-link,.fact-grid .inline-link,.info-band .inline-link{overflow-wrap:anywhere}

/* Legal pages: a contents column beside a calm reading column. */
.legal-meta{margin-top:20px;color:var(--muted);font-size:14.5px;font-variant-numeric:tabular-nums}
.legal-notice{max-width:62em;margin-top:14px;padding:14px 18px;border:1px solid var(--accent-line);border-radius:16px;background:var(--accent-wash);color:var(--text-2);font-size:14.5px;line-height:1.7}
.legal-notice a,.legal-article a{color:var(--accent-hi);text-decoration:underline;text-decoration-color:rgba(182,170,238,.45);text-underline-offset:3px;overflow-wrap:anywhere}
.legal-notice a:hover,.legal-article a:hover{color:#fff}
.legal-switch{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.legal-switch a{padding:8px 15px;border:1px solid var(--line-2);border-radius:999px;color:var(--body);font-size:14px;font-weight:620}
.legal-switch a:hover{color:var(--text);border-color:var(--line-3)}
.legal-switch a[aria-current]{border-color:var(--accent-line);background:rgba(182,170,238,.12);color:var(--text)}
.legal-switch strong{font-weight:760}
.page-legal .legal-section{padding-block:clamp(24px,3vw,40px) clamp(64px,7vw,110px)}
.legal-layout{display:grid;grid-template-columns:minmax(0,260px) minmax(0,780px);justify-content:start;gap:clamp(40px,6vw,96px);align-items:start}
.legal-toc{position:sticky;top:calc(var(--header-h) + 24px);max-height:calc(100vh - var(--header-h) - 48px);overflow:auto;padding:4px 6px 4px 0;scrollbar-width:thin}
.toc-title{margin-bottom:12px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.02em}
.legal-toc ol,.legal-toc-mobile ol{display:grid;gap:2px;counter-reset:toc}
.legal-toc a,.legal-toc-mobile a{display:block;padding:6px 10px;border-radius:10px;color:var(--body);font-size:14px;line-height:1.45}
.legal-toc a:hover,.legal-toc-mobile a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.legal-toc-mobile{display:none}
.legal-article{min-width:0;max-width:780px}
.legal-article section{padding:28px 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 16px)}
.legal-article section:first-child{padding-top:0;border-top:0}
.legal-article h2{color:var(--text);font-size:clamp(20px,1.7vw,24px);line-height:1.35;font-weight:740;letter-spacing:-.025em}
.legal-article p{margin-top:14px;color:var(--text-2);font-size:16.5px;line-height:1.9}
.legal-article strong{color:var(--text);font-weight:700}

/* 404 */
.page-notfound .page-hero{min-height:72vh;display:flex;align-items:center}
.nf-en{display:block;margin-top:10px;color:var(--muted);font-size:.5em;letter-spacing:-.03em}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

@media (max-width:1180px){
  .legal-layout{grid-template-columns:minmax(0,1fr)}
  .legal-toc{display:none}
  .legal-toc-mobile{display:block;padding:4px 16px;border:1px solid var(--line-2);border-radius:18px;background:rgba(255,255,255,.02)}
  .legal-toc-mobile summary{padding:12px 2px;color:var(--text);font-size:15px;font-weight:680;cursor:pointer}
  .legal-toc-mobile ol{padding-bottom:12px}
}
@media (max-width:960px){
  .plans-2,.plans-3,.team-how,.fact-grid,.contact-grid,.topic-grid,.info-band{grid-template-columns:minmax(0,1fr)}
  .reply-note{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .page-hero{padding-top:calc(var(--header-h) + 34px)}
  .page-hero h1{font-size:clamp(34px,10vw,48px)}
  .page-legal .page-hero h1{font-size:clamp(30px,8.4vw,40px)}
  .hero-note-line{border-radius:18px}
  .info-band{padding:22px 20px}
  .contact-card,.topic{padding:22px 20px}
  .legal-article p{font-size:16px;line-height:1.85}
  .team-rows li{padding:11px 12px}
}