/* Manhooei Solutions Lab · design system (Glow)
   Everything visual comes from the tokens in :root. Components only reference tokens,
   so a change to a token changes the whole site. Rules and rationale: DESIGN.md.
   No inline styles anywhere, so the Content-Security-Policy stays strict (style-src 'self'). */

/* ======================================================================== fonts */
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-400i.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-400i.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}

/* ======================================================================== tokens */
:root{
  /* Color roles. Neutrals carry a slight blue-teal tint from the brand hue. */
  --color-bg:#04070B;            /* page */
  --color-bg-raise:#080D13;      /* raised page areas */
  --color-surface:rgba(255,255,255,.035);  /* glass fill, inner panels */
  --color-surface-2:rgba(255,255,255,.06); /* hover fill */
  --color-border:rgba(255,255,255,.09);    /* default hairline */
  --color-border-strong:rgba(255,255,255,.16); /* chips, inputs, hovered cards */
  --color-border-heavy:rgba(255,255,255,.24);  /* outline buttons */
  --color-text:#EDF2F4;          /* headings, primary text */
  --color-text-2:#A9B6BC;        /* body text on dark */
  --color-text-3:#93A1A8;        /* labels, meta, captions */
  --color-text-tone:#8FA0A8;     /* the italic second half of headlines */
  --color-accent:#7FD3E6;        /* links and the one accent */
  --color-accent-hover:#BDEBF5;
  --color-accent-deep:#2A8FA8;   /* glow light only, never text */
  --color-accent-line:rgba(127,211,230,.45); /* resting underline under prose links */
  --color-on-light:#04070B;      /* text on the light button */
  --color-success:#8FD9A8;
  --color-error:#F3A6A6;
  --color-method-gold:#C7A24A;   /* The Manhooei Method's own accent, used only for the show */

  /* Type. Serif for display, sans for text, mono for labels and actions. */
  --font-display:"Instrument Serif","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-text:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --weight-regular:400;
  --weight-strong:700;

  /* Type scale: 1.25 (major third) from 16px. Display sizes are fluid. */
  --text-2xs:.75rem;     /* 12 mono micro labels */
  --text-xs:.8125rem;    /* 13 mono labels, buttons */
  --text-sm:.875rem;     /* 14 meta, captions */
  --text-base:1rem;      /* 16 body */
  --text-md:1.125rem;    /* 18 lead */
  --text-lg:1.25rem;     /* 20 large lead */
  --text-xl:1.5625rem;   /* 25 card titles */
  --text-2xl:clamp(1.75rem,2.6vw,2rem);       /* 28 to 32 small section titles */
  --text-3xl:clamp(2.25rem,4.4vw,3.25rem);    /* 36 to 52 section titles */
  --text-4xl:clamp(2.6rem,6.4vw,4.5rem);      /* 42 to 72 page titles */
  --text-5xl:clamp(2.9rem,7.6vw,5.25rem);     /* 46 to 84 home hero */
  --leading-tight:1.04;
  --leading-snug:1.2;
  --leading-body:1.6;
  --tracking-display:-.012em;
  --tracking-label:.04em;
  --tracking-caps:.14em;
  --measure:38em;        /* about 65 characters at text sizes */

  /* Space: 4px base. */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px; --space-11:80px; --space-12:104px;

  /* Radius with intent: pills are things you press or that label something,
     cards contain, insets sit inside cards, small is for marks and covers. */
  --radius-pill:999px;
  --radius-card:18px;
  --radius-inset:12px;
  --radius-sm:6px;
  --radius-device:34px;

  /* Motion. */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --duration-fast:160ms;
  --duration:240ms;
  --duration-reveal:520ms;
  --ease-reveal:cubic-bezier(.22,1,.36,1);  /* long, soft landing; never bounces */

  /* Layout. */
  --wrap:1160px;
  --gutter:24px;
  --glow:rgba(42,143,168,.55);
}

/* ======================================================================== base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--color-bg)}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-text);font-size:var(--text-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-feature-settings:"kern"}
img,svg{display:block;max-width:100%}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--weight-regular);letter-spacing:var(--tracking-display);line-height:var(--leading-snug);text-wrap:balance}
h1 .tone,h2 .tone,h3 .tone{font-style:italic;color:var(--color-text-tone)}
b,strong{font-weight:var(--weight-strong)}
em{font-style:italic}

/* Links, rule 1: a link inside a sentence is always underlined (never color alone). */
a{color:var(--color-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--color-accent-line);transition:color var(--duration-fast) var(--ease-out),text-decoration-color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--color-accent-hover);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-3);top:-60px;z-index:50;background:var(--color-text);color:var(--color-on-light);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--text-xs);text-decoration:none}
.skip:focus{top:var(--space-3)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--font-mono)}
.tone{color:var(--color-text-tone)}
.muted{color:var(--color-text-2)}
.center{text-align:center}

/* ======================================================================== actions */
/* Links, rule 2: a standalone action link (cards, link rows, pagers) is mono, teal, with an
   arrow, and underlines on hover. Inside a card that is itself a link, it underlines when the card is hovered. */
.link{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label);color:var(--color-accent);text-decoration:none;text-underline-offset:.3em;text-decoration-thickness:1px}
a.link:hover,a:hover > .link,a.glass:hover .link{color:var(--color-accent-hover);text-decoration:underline}
.link-row{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6)}

/* Buttons: mono pills. Light = the one primary action in a section; outline = everything else. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label);line-height:1;text-decoration:none;padding:13px var(--space-5);border-radius:var(--radius-pill);border:1px solid var(--color-border-heavy);background:rgba(4,7,11,.4);color:var(--color-text);cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out)}
.btn:hover{background:var(--color-surface-2);border-color:rgba(255,255,255,.36);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--light{background:var(--color-text);color:var(--color-on-light);border-color:var(--color-text)}
.btn--light:hover{background:#fff;color:var(--color-on-light);border-color:#fff}
.btn--sm{min-height:40px;padding:10px var(--space-4)}
.btn[disabled]{opacity:.55;cursor:wait}
.btns{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.btns--center,.center .btns{justify-content:center}

/* Chips label things; they are never clickable. */
.chip{display:inline-block;width:fit-content;font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);line-height:1.2;color:#C9D3D8;border:1px solid var(--color-border-strong);background:var(--color-surface);border-radius:var(--radius-pill);padding:6px var(--space-3)}
.live{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);color:var(--color-success);white-space:nowrap}

/* ======================================================================== header */
.site-header{position:relative;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:22px;padding-bottom:22px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-text)}
.brand:hover{color:var(--color-text)}
.brand img{width:28px;height:28px}
.brand-name{display:flex;flex-direction:column;line-height:1}
.brand-name b{font-family:var(--font-text);font-size:17px;letter-spacing:.1em}
.brand-name span{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;color:var(--color-text-3);margin-top:var(--space-1)}
.pillnav{display:flex;gap:2px;padding:5px;border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:rgba(10,18,26,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pillnav a{font-family:var(--font-mono);font-size:var(--text-xs);color:#B9C5CB;text-decoration:none;padding:var(--space-2) 13px;border-radius:var(--radius-pill);transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}
.pillnav a:hover{color:var(--color-text);background:var(--color-surface)}
.pillnav a[aria-current="page"]{color:var(--color-text);background:rgba(255,255,255,.09)}
.nav-cta{display:flex;align-items:center;gap:10px}
.menu-btn{display:none;width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid var(--color-border-strong);background:rgba(4,7,11,.5);color:var(--color-text);align-items:center;justify-content:center;cursor:pointer}
.menu-btn svg{width:18px;height:18px}
.menu{display:none}
.menu.is-open{display:block;position:absolute;left:var(--gutter);right:var(--gutter);top:76px;padding:10px;border:1px solid var(--color-border-strong);border-radius:var(--radius-card);background:rgba(8,13,19,.97)}
.menu a{display:block;padding:14px var(--space-4);border-radius:var(--radius-inset);text-decoration:none;color:var(--color-text);font-size:var(--text-md)}
.menu a[aria-current="page"],.menu a:hover{background:var(--color-surface-2);color:var(--color-text)}

/* ======================================================================== hero */
.glow{position:relative;background:
  radial-gradient(60% 70% at 32% 0%,var(--glow) 0%,rgba(42,143,168,0) 70%),
  radial-gradient(45% 60% at 78% 35%,rgba(26,84,112,.45) 0%,rgba(26,84,112,0) 70%),
  var(--color-bg);border-bottom:1px solid rgba(255,255,255,.06)}
.glow--soft{background:
  radial-gradient(55% 80% at 30% 0%,rgba(42,143,168,.38) 0%,rgba(42,143,168,0) 70%),
  radial-gradient(40% 70% at 82% 20%,rgba(26,84,112,.3) 0%,rgba(26,84,112,0) 70%),
  var(--color-bg)}
.hero{padding-top:var(--space-12);padding-bottom:var(--space-10);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-6)}
.hero h1{font-size:var(--text-5xl);line-height:var(--leading-tight);max-width:14em}
.hero .lede{font-size:var(--text-md);line-height:var(--leading-body);color:var(--color-text-2);max-width:var(--measure)}
.hero--page{padding-top:var(--space-11);padding-bottom:72px}
.hero--page h1{font-size:var(--text-4xl);max-width:15em}
.hero--left{align-items:flex-start;text-align:left}
.strip{padding-top:28px;padding-bottom:56px;display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
.strip > span{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-text-3)}
.strip ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4) var(--space-9);font-family:var(--font-display);font-size:var(--text-xl);color:#8394A0}

/* ======================================================================== sections */
.section{padding-top:var(--space-12);padding-bottom:var(--space-8)}
.section--tight{padding-top:72px}
.section--last{padding-bottom:var(--space-12)}
.section-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);margin-bottom:var(--space-9)}
.section-head h2{font-size:var(--text-3xl);line-height:1.08;max-width:16em}
.section-head p{color:var(--color-text-2);font-size:var(--text-md);max-width:var(--measure)}
.section-head--left{align-items:flex-start;text-align:left}
.split-title{font-size:var(--text-3xl);line-height:1.08;margin:var(--space-4) 0 var(--space-5)}
.split-btns{margin-top:26px}
.prose-lead{font-size:var(--text-md);line-height:var(--leading-body);color:var(--color-text-2);max-width:var(--measure)}
.prose-lead + .prose-lead{margin-top:14px}
.note{font-size:var(--text-sm);color:var(--color-text-3);line-height:var(--leading-body)}
.note-gap{margin-top:28px}
.subtitle{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label);color:var(--color-text-3);text-transform:uppercase}
.cta-line{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);margin-top:var(--space-9);text-align:center}
.cta-line span{font-size:var(--text-base);color:var(--color-text-2)}

/* ======================================================================== cards */
/* One level of containment: the glass card. Inner groups use insets or hairlines, never another card. */
.glass{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid var(--color-border);border-radius:var(--radius-card)}
a.glass{display:flex;flex-direction:column;text-decoration:none;color:var(--color-text);transition:border-color var(--duration) var(--ease-out),transform var(--duration) var(--ease-out)}
a.glass:hover{border-color:var(--color-border-strong);color:var(--color-text)}
@media (hover:hover) and (pointer:fine){a.glass:hover{transform:translate3d(0,-2px,0)}}
.inset{border-radius:var(--radius-inset);background:var(--color-surface);border:1px solid rgba(255,255,255,.06)}
/* Card rhythm: title, text, then the action pinned to the bottom edge. */
.card-title{font-size:var(--text-xl);line-height:1.15}
.card-text{font-size:var(--text-base);line-height:var(--leading-body);color:var(--color-text-2)}

/* Doors (home routing) */
.doors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.door{padding:var(--space-6);gap:var(--space-3);min-height:280px}
.door .door-art{height:96px;border-radius:var(--radius-inset);background:var(--color-surface);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:var(--space-2)}
.door h3{font-size:var(--text-xl);line-height:1.15}
.door p{font-size:var(--text-base);line-height:1.55;color:var(--color-text-2)}
.door .link{margin-top:auto;padding-top:var(--space-2)}

/* ======================================================================== show */
.split{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center}
.split > *{flex:1 1 420px;min-width:0}
.split--top{align-items:flex-start}
.split--media{align-items:stretch}
.player{position:relative;aspect-ratio:16/9;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--color-border-strong);background:
  radial-gradient(70% 90% at 25% 15%,rgba(199,162,74,.28),rgba(199,162,74,0) 60%),
  radial-gradient(60% 80% at 85% 90%,rgba(42,143,168,.3),rgba(42,143,168,0) 60%),#0B0D11;display:flex;flex-direction:column;justify-content:space-between;padding:26px;text-decoration:none;color:var(--color-text);transition:border-color var(--duration) var(--ease-out)}
.player:hover{border-color:var(--color-border-heavy);color:var(--color-text)}
.split--media .player{aspect-ratio:auto;min-height:340px}
.player-top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.player-top .mono{font-size:var(--text-xs)}
/* The show keeps its own voice: bold condensed caps and Method gold. */
.player-title{font-family:var(--font-text);font-weight:var(--weight-strong);font-size:clamp(1.7rem,3.4vw,2.4rem);letter-spacing:.01em;line-height:1;text-transform:uppercase;max-width:9em}
.player-title span{color:var(--color-method-gold)}
.play{width:68px;height:68px;border-radius:50%;background:var(--color-text);display:flex;align-items:center;justify-content:center;align-self:flex-end;transition:transform var(--duration) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.player:hover .play{transform:scale(1.06)}}
.play svg{width:22px;height:22px;margin-left:var(--space-1)}
.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:26px 0 30px}
.topics li{padding:var(--space-4) 18px;line-height:1.45}
.topics b{display:block;font-family:var(--font-display);font-weight:var(--weight-regular);font-size:var(--text-lg);margin-bottom:var(--space-1)}
.topics span{color:var(--color-text-2);font-size:var(--text-base)}

/* ======================================================================== book */
.book{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;padding:36px}
.book + .book{margin-top:var(--space-5)}
.cover{flex:0 0 220px;aspect-ratio:2/3;border-radius:var(--radius-sm);overflow:hidden;background:linear-gradient(135deg,#16232B 0%,#0B1116 60%,#070A0E 100%);border:1px solid var(--color-border-strong);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);padding:var(--space-6) var(--space-5);display:flex;flex-direction:column;justify-content:space-between}
.cover img{width:100%;height:100%;object-fit:cover}
.cover--img{padding:0;background:none}
.cover b{font-family:var(--font-display);font-weight:var(--weight-regular);font-size:var(--text-2xl);line-height:1.05}
.cover span{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-caps);color:var(--color-accent)}
.book-body{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:14px}
.book-body h2,.book-body h3{font-size:var(--text-3xl);line-height:1.05}
.book-body p{color:var(--color-text-2);font-size:var(--text-md);line-height:var(--leading-body);max-width:var(--measure)}
.book-body .subtitle{margin-top:calc(-1 * var(--space-1))}
.book-body .btns{margin-top:var(--space-2)}

/* ======================================================================== apps */
.app-icon{border-radius:23%;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.app-card{overflow:hidden}
.app-stage{height:260px;display:flex;align-items:flex-end;justify-content:center}
.app-body{padding:var(--space-6) 26px 26px;display:flex;flex-direction:column;gap:10px;border-top:1px solid rgba(255,255,255,.07);flex:1}
.app-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.app-name{display:flex;align-items:center;gap:var(--space-3)}
.app-name img{width:36px;height:36px}
.app-body h3{font-size:var(--text-xl);line-height:1.1}
.app-body p{font-size:var(--text-base);line-height:1.55;color:var(--color-text-2)}
.app-body .link{margin-top:auto;padding-top:var(--space-1)}
.stage--iw{background:radial-gradient(60% 80% at 50% 100%,rgba(255,142,142,.35),rgba(142,140,255,.12) 55%,rgba(4,7,11,0) 80%)}
.stage--ss{background:radial-gradient(60% 80% at 50% 100%,rgba(90,212,255,.32),rgba(255,140,110,.12) 55%,rgba(4,7,11,0) 80%)}
.stage--ms{background:radial-gradient(60% 80% at 50% 100%,rgba(242,181,98,.3),rgba(143,211,199,.1) 55%,rgba(4,7,11,0) 80%)}
.stage--dm{background:radial-gradient(60% 80% at 50% 100%,rgba(255,179,138,.3),rgba(120,70,130,.16) 55%,rgba(4,7,11,0) 80%)}
.app-row{display:flex;flex-wrap:wrap;overflow:hidden}
.app-row + .app-row{margin-top:var(--space-5)}
.app-row .app-info{flex:999 1 480px;min-width:0;padding:36px;display:flex;flex-direction:column;gap:18px}
.app-row .app-stage{flex:1 1 320px;height:auto;min-height:340px;align-items:center;padding:var(--space-8) var(--space-6)}
.app-row h2{font-size:var(--text-2xl);line-height:1.1}
.app-row .app-name img{width:56px;height:56px}
.app-row .app-name span{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-3)}
.app-row p.desc{font-size:var(--text-md);line-height:1.55;color:var(--color-text-2);max-width:var(--measure)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--color-border)}
.facts div{padding:var(--space-3) var(--space-3) var(--space-3) 0;border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;gap:2px}
.facts dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--color-text-3);text-transform:uppercase}
.facts dd{margin:0;font-size:var(--text-sm)}
.next-card{margin-top:var(--space-5);padding:30px 36px;border:1.5px dashed var(--color-border-strong);border-radius:var(--radius-card);display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;justify-content:space-between}
.next-card h2{font-size:var(--text-2xl)}
.next-card p{color:var(--color-text-2)}

/* Phone mocks (each in its app's own colors) */
.phone{overflow:hidden;width:190px;height:230px;border-radius:28px 28px 0 0;border:1px solid rgba(255,255,255,.18);border-bottom:0;display:flex;flex-direction:column;padding:var(--space-6) 18px 0;gap:14px;font-family:var(--font-text)}
.phone--full{width:220px;height:420px;border-radius:var(--radius-device);border:6px solid #1E2530;padding:var(--space-6) var(--space-5);justify-content:center}
.phone-iw{background:#121826;align-items:center;text-align:center;color:#fff}
.phone-ss{background:#0A0E1A;color:#fff}
.phone-ms{background:#0C0C0E;color:#F5F3EE;align-items:center;text-align:center}
.phone-dm{background:#16111A;color:#F6EFE6}
.phone .q{font-size:15px;font-weight:var(--weight-strong);line-height:1.25}
.phone--full .q{font-size:19px}
.orb{width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#FFC983,#FF8E8E 42%,#8E8CFF 74%,#4FC3E8);flex:none}
.phone--full .orb{width:120px;height:120px}
.pill-btn{font-size:var(--text-xs);font-weight:var(--weight-strong);background:#fff;color:#121826;border-radius:var(--radius-pill);padding:10px 18px}
.start{width:92px;height:92px;border-radius:50%;background:#F5F3EE;color:#0C0C0E;display:flex;align-items:center;justify-content:center;font-weight:var(--weight-strong);font-size:15px;flex:none}
.phone--full .start{width:110px;height:110px}
.tiny{font-family:var(--font-mono);font-size:11px;color:#B8C2DC}
.big-stat{font-family:var(--font-text);font-weight:var(--weight-strong);font-size:40px;color:#FFB38A;line-height:1.05}
.phone--full .big-stat{font-size:48px}
.dm-sub{font-size:var(--text-xs);line-height:1.4;color:#D8CDC6}
.dots{display:flex;gap:var(--space-2)}
.dots i{width:9px;height:9px;border-radius:50%;background:#3A3A40}
.dots i.a{background:#F2B562}.dots i.b{background:#8FD3C7}
.feel{border-radius:var(--radius-inset);background:#1B2440;padding:11px var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-strong)}
.feel.on{background:#2A3A78}
.export{border-radius:var(--radius-pill);background:#fff;color:#0A0E1A;padding:var(--space-3);text-align:center;font-weight:var(--weight-strong);font-size:var(--text-sm)}
.export.ghost{background:none;color:#fff;border:1px solid #3A4566}
.ring{width:130px;height:130px;border-radius:50%;border:6px solid #2A2A30;border-top-color:#F2B562;border-right-color:#F2B562;display:flex;align-items:center;justify-content:center;font-weight:var(--weight-strong);font-size:38px;flex:none}
.sky{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;width:100%}
.sky i{width:10px;height:10px;border-radius:50%;background:#26262B;justify-self:center}
.sky i.a{background:#F2B562;box-shadow:0 0 10px #F2B562}.sky i.b{background:#8FD3C7;box-shadow:0 0 10px #8FD3C7}.sky i.c{background:#E79BD0;box-shadow:0 0 10px #E79BD0}
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%}
.month i{aspect-ratio:1;border-radius:var(--radius-sm);background:#1C2436}
.month i.w1{background:#FFC983}.month i.w2{background:#FF8E8E}.month i.w3{background:#8E8CFF}.month i.w4{background:#4FC3E8}
.guess{display:flex;justify-content:space-between;font-size:var(--text-xs);padding:var(--space-2) 0;border-bottom:1px solid #30263A}
.guess b{color:#FFB38A}

/* Rules bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.bento > .glass{padding:22px;display:flex;flex-direction:column;gap:14px}
.bento .wide{grid-column:span 3;flex-direction:row;flex-wrap:wrap;align-items:center;gap:28px;padding:var(--space-6) 26px}
.bento h3{font-size:var(--text-xl);line-height:1.15}
.bento p{font-size:var(--text-base);line-height:1.55;color:var(--color-text-2)}
.art{height:140px;border-radius:var(--radius-inset);background:var(--color-surface);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;gap:var(--space-4)}
.art .mono{font-size:var(--text-2xs);color:var(--color-text-3);line-height:1.8;text-align:left}
.art-pill{font-family:var(--font-mono);font-size:var(--text-xs);padding:9px 14px;border-radius:var(--radius-pill);border:1px solid var(--color-border-strong)}
.art-pill.on{background:var(--color-text);color:var(--color-on-light);border-color:var(--color-text)}
.wide-text{flex:1 1 300px;display:flex;flex-direction:column;gap:var(--space-2)}
.layers{flex:2 1 420px;display:flex;flex-direction:column;gap:var(--space-2)}
.layers div{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:var(--space-3)}
.layers span{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--color-text-3);white-space:nowrap}
.layers b{display:block}
.layers i{display:block;height:8px;border-radius:4px}
.l1{width:22%;background:var(--color-accent)}.l2{width:48%;background:#4C9DB1}.l3{width:74%;background:#2C5F6E}

/* ======================================================================== numbers arc */
.numbers{padding-top:var(--space-12);padding-bottom:var(--space-8);text-align:center}
.numbers h2{font-size:var(--text-2xl);margin-bottom:var(--space-10)}
.arc{position:relative;height:250px;border-radius:50% 50% 0 0/100% 100% 0 0;border-top:1px solid rgba(127,211,230,.6);background:radial-gradient(70% 90% at 50% 0%,rgba(42,143,168,.28),rgba(4,7,11,0) 70%);box-shadow:0 -18px 50px -20px rgba(127,211,230,.45)}
.stats{position:absolute;left:8%;right:8%;top:96px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.stats div{display:flex;flex-direction:column;gap:6px;align-items:center}
.stats b{font-family:var(--font-display);font-weight:var(--weight-regular);font-size:clamp(2.75rem,5vw,3.5rem);line-height:1;font-variant-numeric:lining-nums}
.stats span{font-size:var(--text-sm);color:var(--color-text-2)}

/* ======================================================================== services */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.service{padding:26px;display:flex;flex-direction:column;gap:10px}
.service svg{width:22px;height:22px;color:var(--color-text)}
.service h3{font-size:var(--text-xl);line-height:1.15;margin-top:var(--space-1)}
.service p{font-size:var(--text-base);line-height:1.55;color:var(--color-text-2)}
.service .for{color:var(--color-text-3)}
.service .gets{margin-top:auto;padding-top:14px;border-top:1px solid var(--color-border);font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);color:var(--color-accent)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}
.steps li{border-top:1px solid var(--color-accent);padding-top:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.steps .n{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-label);color:var(--color-accent)}
.steps b{font-family:var(--font-display);font-weight:var(--weight-regular);font-size:var(--text-xl);line-height:1.15}
.steps p{font-size:var(--text-base);line-height:1.55;color:var(--color-text-2)}

/* ======================================================================== person */
.who{padding:28px;display:flex;flex-wrap:wrap;gap:var(--space-7);align-items:center}
.portrait{flex:0 0 auto;width:220px;height:220px;border-radius:14px;border:1px solid rgba(255,255,255,.08);overflow:hidden;background:radial-gradient(80% 70% at 50% 25%,#1E3A44,#0A1015);display:flex;align-items:center;justify-content:center}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait b{font-family:var(--font-display);font-weight:var(--weight-regular);font-size:56px;color:rgba(237,242,244,.85)}
.portrait--lg{width:300px;height:300px}
.who-body{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}
.who-body .big{font-size:var(--text-lg);line-height:var(--leading-body);color:var(--color-text);max-width:var(--measure)}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags li{font-family:var(--font-mono);font-size:var(--text-xs);padding:var(--space-2) 14px;border-radius:var(--radius-pill);border:1px solid var(--color-border-strong);background:var(--color-surface)}
.tags-gap,.spec--gap,.notes-gap{margin-top:var(--space-4)}
.prose{max-width:var(--measure);display:flex;flex-direction:column;gap:18px;font-size:var(--text-md);line-height:1.7;color:var(--color-text-2)}
.prose h2{font-size:var(--text-2xl);color:var(--color-text);margin-top:var(--space-6)}
.prose h3{font-size:var(--text-xl);color:var(--color-text);margin-top:var(--space-2)}
.prose ul{display:flex;flex-direction:column;gap:var(--space-2);padding-left:var(--space-5);list-style:disc}
.prose strong{color:var(--color-text)}
.about-prose{gap:var(--space-4)}
.about-prose p{font-size:var(--text-md)}

/* ======================================================================== app detail */
.crumbs{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text-3);display:flex;gap:var(--space-2);align-items:center}
.crumbs a{color:var(--color-text-3);text-decoration:none}
.crumbs a:hover{color:var(--color-text);text-decoration:underline}
.app-hero{padding-top:56px;padding-bottom:var(--space-10);display:flex;flex-direction:column;gap:22px}
.app-hero-row{display:flex;flex-wrap:wrap;gap:var(--space-7);align-items:flex-end;justify-content:space-between}
.app-hero-text{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:var(--space-5)}
.app-hero img.icon{width:84px;height:84px}
.app-hero h1{font-size:var(--text-4xl);line-height:1}
.app-hero .lede{font-size:var(--text-lg);line-height:1.5;color:var(--color-text-2);max-width:30em}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);padding:56px 36px;border-radius:var(--radius-card);border:1px solid var(--color-border)}
.shots figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.shots figcaption{font-size:var(--text-sm);color:var(--color-text-2);text-align:center}
.shots--iw{background:radial-gradient(70% 90% at 50% 100%,rgba(255,142,142,.18),rgba(4,7,11,0) 70%),#0B1018}
.shots--ss{background:radial-gradient(70% 90% at 50% 100%,rgba(90,212,255,.16),rgba(4,7,11,0) 70%),#080C16}
.shots--ms{background:radial-gradient(70% 90% at 50% 100%,rgba(242,181,98,.14),rgba(4,7,11,0) 70%),#09090B}
.shots--dm{background:radial-gradient(70% 90% at 50% 100%,rgba(255,179,138,.16),rgba(4,7,11,0) 70%),#110D14}
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.points .glass{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.points h3{font-size:var(--text-xl);line-height:1.15}
.points p{color:var(--color-text-2);line-height:var(--leading-body)}
.spec{display:grid;grid-template-columns:170px minmax(0,1fr);border-top:1px solid var(--color-border-strong)}
.spec dt,.spec dd{margin:0;padding:14px 0;border-bottom:1px solid var(--color-border)}
.spec dt{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.06em;color:var(--color-text-3);text-transform:uppercase;padding-top:17px}
.spec dd{font-size:var(--text-base)}
.lab-notes{padding:26px;display:flex;flex-direction:column;gap:14px;color:var(--color-text-2);line-height:var(--leading-body)}
.disclaimer{font-size:var(--text-sm);color:var(--color-text-3);margin-top:var(--space-4)}
.press-line{padding:26px 28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-5)}
.press-line h2{font-size:var(--text-xl);margin-bottom:6px}
.press-line p{color:var(--color-text-2)}
.pager{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);padding-top:var(--space-8)}

/* ======================================================================== forms */
.form{padding:30px;display:flex;flex-direction:column;gap:var(--space-4)}
.form h2{font-size:var(--text-2xl)}
.field{display:flex;flex-direction:column;gap:7px;font-size:var(--text-sm);font-weight:var(--weight-strong)}
.field input,.field select,.field textarea{font:inherit;font-weight:var(--weight-regular);font-size:var(--text-base);color:var(--color-text);background:rgba(4,7,11,.6);border:1px solid var(--color-border-strong);border-radius:var(--radius-inset);padding:13px 14px;width:100%;transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-text-2) 50%),linear-gradient(135deg,var(--color-text-2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:var(--space-8)}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(127,211,230,.18)}
.field .hint{font-weight:var(--weight-regular);color:var(--color-text-3);font-size:var(--text-xs)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:var(--text-base);line-height:1.5;color:var(--color-text-2);min-height:1.5em}
.form-status.ok{color:var(--color-success)}
.form-status.err{color:var(--color-error)}
.contact-grid{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:flex-start}
.contact-grid > *{min-width:0}
.contact-side{flex:1 1 320px;display:flex;flex-direction:column;gap:var(--space-4)}
.contact-side .glass{padding:22px;display:flex;flex-direction:column;gap:var(--space-2)}
.contact-side h3{font-size:var(--text-xl)}
.contact-side p{color:var(--color-text-2)}
.contact-form{flex:1.4 1 460px}
.mail-list li{display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--color-border);font-size:var(--text-sm)}
.mail-list li:last-child{border-bottom:0}
.mail-list a{font-family:var(--font-mono);font-size:var(--text-xs)}

/* ======================================================================== press */
.press-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4)}
.asset{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.asset img{width:72px;height:72px}
.asset .links{display:flex;gap:14px}
.bio{padding:26px;display:flex;flex-direction:column;gap:var(--space-3)}
.bio p{color:var(--color-text-2);line-height:1.7}
.bio h3{font-size:var(--text-xl)}

/* ======================================================================== 404 */
.lost{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;padding-top:var(--space-11);padding-bottom:var(--space-11)}
.lost h1{font-size:var(--text-4xl)}
.lost p{color:var(--color-text-2);font-size:var(--text-md);max-width:30em}

/* ======================================================================== footer */
/* Links, rule 3: lists of links (footer, nav) are recognized by position, so no underline until hover. */
.site-footer{border-top:1px solid rgba(255,255,255,.07);margin-top:var(--space-8)}
.foot{padding-top:56px;padding-bottom:var(--space-8);display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:var(--space-7)}
.foot h2{font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);color:var(--color-text-3);text-transform:uppercase;margin-bottom:14px}
.foot ul{display:flex;flex-direction:column;gap:10px}
.foot ul a,.foot-social a,.foot-base a{color:var(--color-text-2);text-decoration:none}
.foot ul a:hover,.foot-social a:hover,.foot-base a:hover{color:var(--color-text);text-decoration:underline;text-decoration-color:var(--color-border-heavy)}
.foot-brand{display:flex;flex-direction:column;gap:14px}
.foot-brand p{color:var(--color-text-2);font-size:var(--text-sm);max-width:24em}
.foot-mail{font-family:var(--font-mono);font-size:var(--text-xs);text-decoration:none}
.foot-mail:hover{text-decoration:underline}
.foot-base{background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)) center top/calc(100% - 2*var(--gutter)) 1px no-repeat;padding-top:22px;padding-bottom:30px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-3);font-size:var(--text-xs);color:var(--color-text-3)}
.foot-social{display:flex;flex-wrap:wrap;gap:var(--space-5)}

/* ======================================================================== style guide page */
.sg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.sg-swatch{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.sg-chip{height:64px;border-radius:var(--radius-inset);border:1px solid var(--color-border)}
.sg-swatch code,.sg-row code{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--color-text-3)}
.sg-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-6);padding:var(--space-4) 0;border-bottom:1px solid var(--color-border)}
.sg-row code{flex:0 0 160px}
.sg-block{padding:28px;display:flex;flex-direction:column;gap:var(--space-5)}
.sg-c-bg{background:var(--color-bg)}.sg-c-raise{background:var(--color-bg-raise)}.sg-c-text{background:var(--color-text)}.sg-c-text2{background:var(--color-text-2)}
.sg-c-text3{background:var(--color-text-3)}.sg-c-accent{background:var(--color-accent)}.sg-c-deep{background:var(--color-accent-deep)}.sg-c-gold{background:var(--color-method-gold)}
.sg-c-success{background:var(--color-success)}.sg-c-error{background:var(--color-error)}.sg-c-surface{background:var(--color-surface)}.sg-c-border{background:var(--color-border-strong)}
.t-5xl{font-family:var(--font-display);font-size:var(--text-5xl);line-height:var(--leading-tight)}
.t-4xl{font-family:var(--font-display);font-size:var(--text-4xl);line-height:var(--leading-tight)}
.t-3xl{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.08}
.t-3xl .tone{font-style:italic}
.t-2xl{font-family:var(--font-display);font-size:var(--text-2xl)}
.t-xl{font-family:var(--font-display);font-size:var(--text-xl)}
.t-lg{font-size:var(--text-lg)}.t-md{font-size:var(--text-md)}.t-base{font-size:var(--text-base)}.t-sm{font-size:var(--text-sm)}
.t-xs{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-label)}

/* ======================================================================== motion */
.reveal{transition:opacity var(--duration-reveal) var(--ease-reveal),transform var(--duration-reveal) var(--ease-reveal),border-color var(--duration) var(--ease-out)}
.reveal.is-pending{opacity:0;transform:translate3d(0,14px,0)}
/* The GPU layer is held only while an element fades in, then released (site.js). */
.reveal.is-revealing{will-change:opacity,transform;backface-visibility:hidden}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0ms !important}
  .reveal,.reveal.is-pending{opacity:1;transform:none}
  a.glass:hover,.btn:active,.player:hover .play{transform:none}
}

/* ======================================================================== responsive */
@media (max-width:1020px){
  .doors,.sg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .press-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:span 2}
}
@media (max-width:900px){
  .pillnav{display:none}
  .nav-cta .btn{display:none}
  .menu-btn{display:inline-flex}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento .wide{grid-column:auto}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shots{grid-template-columns:minmax(0,1fr);padding:var(--space-8) var(--space-5)}
  .split--media .player{aspect-ratio:16/9;min-height:0}
}
@media (max-width:720px){
  :root{--gutter:16px}
  .apps,.services,.points,.topics,.doors{grid-template-columns:minmax(0,1fr)}
  .press-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .door{min-height:0}
  .hero{padding-top:72px;padding-bottom:var(--space-9)}
  .section,.numbers{padding-top:var(--space-11)}
  .numbers h2{margin-bottom:var(--space-9)}
  .arc{height:auto;border-radius:28px 28px 0 0;padding:36px 0 28px}
  .stats{position:static;grid-template-columns:minmax(0,1fr);gap:28px}
  .app-row .app-info{padding:26px}
  .book{padding:26px;gap:28px}
  .cover{flex-basis:170px}
  .spec{grid-template-columns:120px minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr)}
  .foot-brand{grid-column:auto}
  .strip ul{gap:var(--space-3) 28px;font-size:var(--text-lg)}
}