/* ─────────────────────────────────────────────────────────────
   Arutai design system
   Apple compositional discipline, Arutai material.

   What is borrowed from Apple's HIG (developer.apple.com/design):
   - Materials: the glass/translucent layer is used ONLY for the
     functional layer (nav). HIG is explicit that Liquid Glass must
     not enter the content layer, so content surfaces stay opaque.
   - Typography: tracking tightens as size grows; hierarchy is built
     from size + weight, never from color alone.
   - Motion: purposeful only, brief, always cancellable, and fully
     disabled under prefers-reduced-motion.
   - Layout: one idea per screen, generous whitespace, concentric radii.

   What stays Arutai:
   - Warm paper #FBFAF7 / ink #141413, hairlines instead of shadows.
   - Signal red #E5310E is reserved for risk. Nothing else.
   - Dashed border = AI draft (provisional). Solid = sent by a human
     (committed). This encodes red line #1 directly in the UI.
   ───────────────────────────────────────────────────────────── */

/* ── fonts ── */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500 800;font-display:swap;src:url("/assets/cf22582e1b.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500 800;font-display:swap;src:url("/assets/f25c0b730a.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/b4aee2c6c0.woff2") format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/3774b678a6.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/1771837459.woff2") format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url("/assets/1dc044f482.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/442b3ec987.woff2") format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/2c9bacf024.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/f49291b791.woff2") format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/3a2668b94b.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── tokens ── */
:root{
  /* material */
  --paper:#FBFAF7; --paper-deep:#F3F1EC; --paper-raised:#FFFFFF;
  --ink:#141413; --sub:#6F6B63; --faint:#A6A299;
  --hair:#E8E5DE; --hair-soft:#F0EEE8;
  --signal:#E5310E;   /* risk only */
  --wait:#8A6A00; --ok:#2E6B4F;

  /* type */
  --display:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --text:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  /* radii — concentric: inner = outer − padding */
  --r-lg:20px; --r-md:14px; --r-sm:10px; --r-xs:8px;

  /* rhythm */
  --gutter:clamp(20px,5vw,48px);
  --measure:1080px;
  --scene-y:clamp(88px,14vh,176px);
  --stack:36px;   /* vertical gap inside a scene */

  /* motion — Apple's signature deceleration curve */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.62s; --dur-fast:.26s;
}

/* ── reset ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}

/* ── type scale — tracking tightens as size grows (HIG) ── */
.d-xl{font-family:var(--display);font-weight:800;font-size:clamp(44px,8.6vw,104px);line-height:.95;letter-spacing:-.035em}
.d-l {font-family:var(--display);font-weight:800;font-size:clamp(34px,5.6vw,68px);line-height:1.0;letter-spacing:-.03em}
.d-m {font-family:var(--display);font-weight:700;font-size:clamp(27px,3.9vw,44px);line-height:1.08;letter-spacing:-.024em}
.d-s {font-family:var(--display);font-weight:700;font-size:clamp(21px,2.6vw,29px);line-height:1.18;letter-spacing:-.018em}
.lead{font-size:clamp(17px,1.65vw,21px);line-height:1.5;color:var(--sub)}
.body{font-size:16.5px;line-height:1.6;color:var(--sub)}
.small{font-size:14px;line-height:1.55;color:var(--sub)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sub)}
.kicker--risk{color:var(--signal)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ink{color:var(--ink)}

/* ── layout ── */
.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:760px}
.scene{padding-block:var(--scene-y);position:relative}
.scene--hair{border-top:1px solid var(--hair)}
.scene--deep{background:var(--paper-deep)}
.scene--ink{background:var(--ink);color:var(--paper)}
.scene--ink .lead,.scene--ink .body,.scene--ink .kicker{color:#A6A299}
.grid-2{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
@media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr}.grid-2--flip>*:first-child{order:2}}

/* ── nav: the ONLY glass surface on the site (HIG: functional layer) ── */
.nav{
  position:sticky;top:0;z-index:60;
  border-bottom:1px solid var(--hair);
  background:rgba(251,250,247,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
@supports not (backdrop-filter:blur(1px)){.nav{background:var(--paper)}}
.nav__in{display:flex;align-items:center;gap:12px;height:56px}
.nav__brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.02em}
.nav__links{display:none;margin-left:20px;gap:26px}
@media(min-width:900px){.nav__links{display:flex}}
.nav__links a{font-size:14.5px;color:var(--sub);transition:color var(--dur-fast) var(--ease)}
.nav__links a:hover{color:var(--ink)}
.nav__end{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid var(--hair);border-radius:var(--r-xs);overflow:hidden;font-family:var(--mono);font-size:11px}
.lang span,.lang a{padding:4px 9px}
.lang [aria-current]{background:var(--ink);color:var(--paper)}
.lang a{color:var(--sub)}

/* Narrow screens: the nav must never push the page wider than the viewport.
   Russian CTA labels are ~40% longer than English, so reclaim space by
   dropping the language switcher (also present in the footer) and tightening
   the buttons. Sign-in stays — it is the entry point to the real product. */
@media(max-width:600px){
  .nav__end .lang{display:none}
  .nav .btn--sm{padding:7px 11px;font-size:12.5px}
  .nav__end{gap:7px}
  .nav__brand span{font-size:17px}
}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border-radius:var(--r-md);border:1px solid transparent;
  font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.btn:active{transform:scale(.975)}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:#000}
.btn--ghost{border-color:var(--hair);background:transparent;color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--sm{padding:8px 15px;font-size:13.5px;border-radius:var(--r-sm)}
.btn--on-ink{background:var(--paper);color:var(--ink)}
.btn--ghost-on-ink{border-color:#3A3A38;color:var(--paper)}
.btn--ghost-on-ink:hover{border-color:var(--paper)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:15px;font-weight:500}
.link-arrow svg{transition:transform var(--dur-fast) var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ── surfaces (content layer: opaque, hairlines not shadows) ── */
.card{background:var(--paper-raised);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
.card--lift{box-shadow:0 32px 64px -40px rgba(20,20,19,.28)}
.card__bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 15px;border-bottom:1px solid var(--hair-soft);
  font-family:var(--mono);font-size:11px;color:var(--faint);
}
.dots{display:flex;gap:4px;flex-shrink:0}
.dots i{width:4px;height:4px;border-radius:99px;background:var(--hair)}

/* the signature: dashed = provisional, solid = committed */
.draft{border:1.5px dashed rgba(20,20,19,.35);background:#fff;border-radius:var(--r-sm)}
.sent{border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:var(--r-sm)}

/* ── reveal, fallback path: IntersectionObserver toggles .is-in ──
   Used where scroll-driven CSS animation is unavailable (Firefox today). */
.reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}

/* ── reveal, preferred path: scroll-linked ──
   Apple's motion is tied to scroll position rather than fired by a trigger —
   the element tracks your thumb instead of playing a canned animation at you.
   `view()` gives each element its own timeline over its trip through the
   viewport, so scrolling back up rewinds it. site.js skips the observer when
   this is supported, so the two systems never both drive an element. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      opacity:1;transform:none;transition:none;
      animation:rise both linear;
      animation-timeline:view();
      animation-range:entry 4% cover 20%;
    }
    .reveal[data-d="1"]{animation-range:entry 4% cover 24%}
    .reveal[data-d="2"]{animation-range:entry 4% cover 28%}
    .reveal[data-d="3"]{animation-range:entry 4% cover 32%}
    .reveal[data-d="4"]{animation-range:entry 4% cover 36%}

    /* surfaces settle into place rather than sliding */
    .card--lift,.demo__frame{
      animation:settle both linear;
      animation-timeline:view();
      animation-range:entry 0% cover 26%;
    }

    /* the hero recedes as you leave it, the way a pinned Apple scene does */
    .hero__in{
      animation:recede both linear;
      animation-timeline:view();
      animation-range:exit 0% exit 90%;
    }
  }
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:translateY(30px) scale(.965)}to{opacity:1;transform:none}}
@keyframes recede{to{opacity:0;transform:translateY(-32px) scale(.97)}}

/* ── sticky scene: art holds while the copy scrolls past it ── */
@media(min-width:860px){
  .pin{position:sticky;top:calc(56px + 6vh);align-self:start}
}

/* ── hero ── */
.hero{padding-top:clamp(56px,9vh,104px);padding-bottom:var(--scene-y);position:relative;overflow:hidden}
.hero__flow{position:absolute;inset:0;pointer-events:none;opacity:.55}
.hero__in{position:relative}
@keyframes dashflow{to{stroke-dashoffset:-24}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes caret{50%{opacity:0}}
.flow-line{stroke-dasharray:3 9;stroke-linecap:round;fill:none;animation:dashflow 2.8s linear infinite}

/* ── stat row ── */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;border-top:1px solid var(--hair);padding-top:32px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat__n{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,40px);letter-spacing:-.025em;line-height:1}
.stat__l{margin-top:7px;font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.4}

/* ── feature list ── */
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;padding-block:7px}
.checks svg{flex-shrink:0;margin-top:3px}

/* ── team ── */
.people{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:700px){.people{grid-template-columns:1fr 1fr}}
.person{background:var(--paper-raised);padding:24px}
.person__n{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.015em}
.person__r{margin-top:3px;font-size:14px;color:var(--sub)}
.person__loc{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.person__links{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.person__links a,.person__links span{
  font-family:var(--mono);font-size:11px;padding:4px 9px;
  border:1px solid var(--hair);border-radius:var(--r-xs);color:var(--sub);
}
.person__links a:hover{border-color:var(--ink);color:var(--ink)}
.person__links .todo{border-style:dashed;color:var(--faint)}

/* ── legal / prose pages ── */
.prose{max-width:720px}
.prose h2{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.4vw,27px);letter-spacing:-.018em;line-height:1.2;margin-top:44px;padding-top:28px;border-top:1px solid var(--hair)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-family:var(--display);font-weight:700;font-size:17.5px;letter-spacing:-.012em;margin-top:28px}
.prose p,.prose li{font-size:16px;line-height:1.68;color:#33322F}
.prose p{margin-top:15px}
.prose ul{margin-top:15px;display:flex;flex-direction:column;gap:9px}
.prose ul li{padding-left:19px;position:relative}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:99px;background:var(--faint)}
.prose a{border-bottom:1px solid var(--hair);color:var(--ink)}
.prose a:hover{border-color:var(--ink)}
.prose strong{font-weight:600;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;margin-top:20px;font-size:14.5px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--hair);vertical-align:top}
.prose th{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--sub);font-weight:400;white-space:nowrap}
.note{
  margin-top:24px;padding:18px 20px;border:1.5px dashed rgba(20,20,19,.35);
  border-radius:var(--r-md);background:var(--paper-deep);
  font-size:14.5px;line-height:1.6;color:var(--sub);
}
.note strong{color:var(--ink)}
.toc{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.toc a{font-family:var(--mono);font-size:11px;padding:6px 11px;border:1px solid var(--hair);border-radius:var(--r-xs);color:var(--sub)}
.toc a:hover{border-color:var(--ink);color:var(--ink)}

/* ── page header for sub-pages ── */
.phead{padding-block:clamp(56px,8vh,96px) clamp(36px,5vh,56px);border-bottom:1px solid var(--hair)}

/* ── footer ── */
.foot{border-top:1px solid var(--hair);background:var(--paper-deep);padding-block:56px 40px}
.foot__cols{display:grid;gap:36px 24px;grid-template-columns:repeat(2,1fr)}
@media(min-width:820px){.foot__cols{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.foot__h{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.foot__l{display:flex;flex-direction:column;gap:10px}
.foot__l a{font-size:14.5px;color:var(--sub);transition:color var(--dur-fast) var(--ease)}
.foot__l a:hover{color:var(--ink)}
.foot__base{margin-top:44px;padding-top:24px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline}
.foot__fine{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--faint);max-width:620px}

/* ── mobile: same content, far less scrolling ──
   Desktop rhythm relies on generous vertical air. Carried to a 390px screen
   that air becomes dead scroll — the page ran to twelve screens. These rules
   tighten the vertical scale only; nothing is hidden and no copy is cut. */
@media(max-width:720px){
  :root{--scene-y:52px;--stack:24px}
  .hero{padding-top:36px;padding-bottom:56px}
  .phead{padding-block:40px 28px}

  .d-xl{font-size:clamp(38px,10.5vw,52px);line-height:1.0}
  .d-l{font-size:clamp(30px,8vw,40px)}
  .d-m{font-size:clamp(24px,6.4vw,32px)}
  .lead{font-size:16.5px;line-height:1.45}

  .stats{gap:20px 16px;padding-top:22px}
  .stat__l{margin-top:5px}
  .grid-2{gap:26px}
  .checks li{padding-block:5px;font-size:14.5px}

  .demo{gap:22px}
  /* The chapter list's phone treatment lives in demo.css, which loads after
     this file — an override here would lose to it at equal specificity. */

  /* security detail: same four points, less air */
  .scene .stats .stat__n[style]{font-size:16px!important}
  .stat__l{font-size:11px;line-height:1.35}

  .person{padding:18px}
  .prose h2{margin-top:30px;padding-top:20px}
  .prose p,.prose li{font-size:15.5px;line-height:1.6}
  .foot{padding-block:40px 30px}
  .foot__cols{gap:26px 20px}
  .foot__base{margin-top:30px;padding-top:18px}
}
@media(max-width:400px){
  .foot__cols{grid-template-columns:1fr}
}

/* ── reduced motion: HIG says make motion optional ── */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
  .reveal,.card--lift,.demo__frame,.hero__in{opacity:1;transform:none}
  .pin{position:static}
}

/* ── safety net ──
   .reveal begins at opacity 0 and depends on either the scroll timeline or the
   observer to bring it back, so ANY failure of that machinery renders a blank
   page. It has happened once: an immutable-cached stylesheet met fresh markup
   and the hero disappeared in production. site.js measures after paint and sets
   this class if anything in the first screen is still invisible — content wins
   over animation, always. */
html.sda-off .reveal,
html.sda-off .hero__in,
html.sda-off .card--lift,
html.sda-off .demo__frame{
  animation:none!important;opacity:1!important;transform:none!important;transition:none!important;
}