/* ============================================================
   AUTELI — full site styles
   Light editorial parent brand + warm counter-accent.
   KarmaKnot overlay carries the product's own dark vivid world.
   ============================================================ */
:root{
  --paper:#FAFAF8; --surface:#FFFFFF; --ink:#0E0E10; --ink-2:#43434A;
  --muted:#7A7A80; --hairline:#E7E6E0; --accent:#2D5BFF; --accent-hover:#1E47E0;
  --accent-ink:#FFFFFF; --warm:#E0A458; --warm-soft:#F3E7D4;

  --band-bg:#0E0E10; --band-ink:#FAFAF8; --band-muted:#9A9AA1; --band-hairline:#2A2A2F;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --glow:34%; --knot-size:440px;
  --gutter:clamp(20px,5vw,72px); --maxw:1160px;
  --edge:max(var(--gutter), calc((100vw - var(--maxw)) / 2));
}
/* Wide displays (27" iMac/Studio Display etc.): scale the system up a notch
   instead of letting a 1160px column float in a 2560px void. */
@media (min-width:1600px){
  :root{ --maxw:1300px; --knot-size:560px }
}
html[data-theme="dark"]{
  --paper:#0E0E10; --surface:#161619; --ink:#F2F1EC; --ink-2:#C8C8CE;
  --muted:#84848C; --hairline:#26262B; --accent:#4169FF; --accent-hover:#6485FF;
  --band-bg:#161619; --band-ink:#F2F1EC; --band-muted:#84848C; --band-hairline:#2A2A2F;
  --glow:24%;
}
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after{
  transition:background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), fill .5s var(--ease), stroke .5s var(--ease) !important;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
html.lenis{ scroll-behavior:auto }
html, body{ overflow-x:clip }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
body.kk-open{ overflow:hidden }
::selection{ background:var(--accent); color:var(--accent-ink) }
img, svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
:focus{ outline:none }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px }
.container{ width:min(var(--maxw), calc(100% - var(--gutter)*2)); margin-inline:auto }

.eyebrow{ font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
h1,h2,h3{ font-family:var(--serif); font-weight:400; color:var(--ink) }
.serif-display{ letter-spacing:-.015em; line-height:1.05; text-wrap:balance }

/* link underline */
.u-link{ position:relative; display:inline-block; font-weight:500; color:var(--ink); cursor:pointer }
.u-link::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease) }
.u-link:hover::after, .u-link:focus-visible::after{ transform:scaleX(1); transform-origin:left }
.u-link .arr{ display:inline-block; transition:transform .45s var(--ease) }
.u-link:hover .arr{ transform:translateX(4px) }
.u-link--accent{ color:var(--accent) } .u-link--accent:hover{ color:var(--accent-hover) }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:999px; font-size:15px; font-weight:500; line-height:1; white-space:nowrap; transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); will-change:transform }
.btn--primary{ background:var(--accent); color:var(--accent-ink) } .btn--primary:hover{ background:var(--accent-hover) }
.btn--ghost{ border:1px solid var(--hairline); color:var(--ink); background:transparent } .btn--ghost:hover{ border-color:var(--ink-2) }
.btn--paper{ background:var(--band-ink); color:var(--band-bg) } .btn--paper:hover{ background:#fff }

/* fixed chrome */
.progress{ position:fixed; top:0; left:0; z-index:120; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; pointer-events:none }
.grain{ position:fixed; inset:-50%; z-index:110; width:200%; height:200%; pointer-events:none; opacity:.05; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }

/* global accent cursor dot */
.cursor-dot{ position:fixed; top:0; left:0; z-index:130; width:9px; height:9px; border-radius:50%; background:var(--accent); transform:translate(-100px,-100px); pointer-events:none; opacity:0; transition:width .25s var(--ease), height .25s var(--ease), background-color .25s var(--ease), opacity .3s var(--ease) }
.cursor-dot.is-active{ opacity:1 }
.cursor-dot.is-hot{ width:42px; height:42px; background:color-mix(in srgb,var(--accent) 16%,transparent) }
/* Tweak hooks: classes toggled by the Tweaks panel */
html.no-grain .grain{ display:none }
html.no-cursor-dot .cursor-dot{ display:none !important }
html.grain-strong .grain{ opacity:.09 }

/* ============================================================ HEADER */
/* Transparent at the very top so the hero glow flows seamlessly up behind it
   (no hard "warm → black" line under the bar). Tint + blur + hairline fade in
   only once scrolled, to keep the bar legible over real content. */
.site-header{ position:sticky; top:0; z-index:100; background:transparent; border-bottom:1px solid transparent; transition:border-color .4s var(--ease), background-color .4s var(--ease), backdrop-filter .4s var(--ease) }
.site-header.scrolled{ background:color-mix(in srgb,var(--paper) 28%,transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-bottom-color:var(--hairline) }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:72px }
.brand{ display:inline-flex; align-items:center; gap:11px }
.brand .wordmark{ font-family:var(--serif); font-size:23px; font-weight:500; letter-spacing:-.01em; color:var(--ink); line-height:1; transform:translateY(-1px) }
.brand-knot{ width:30px; height:30px; flex:none; color:var(--ink); transition:transform .6s var(--ease) }
.brand:hover .brand-knot{ transform:rotate(120deg) }
.nav-links{ display:flex; align-items:center; gap:34px; list-style:none }
.nav-links a{ font-size:14px; font-weight:500; color:var(--ink-2) } .nav-links a:hover{ color:var(--ink) }
.nav-right{ display:flex; align-items:center; gap:16px }

.theme-toggle{ position:relative; display:inline-flex; align-items:center; width:60px; height:32px; padding:3px; border:1px solid var(--hairline); border-radius:999px; background:var(--surface); transition:border-color .3s var(--ease), background-color .5s var(--ease) }
.theme-toggle:hover{ border-color:var(--muted) }
.theme-toggle .tt-thumb{ position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:var(--ink); transition:transform .5s var(--ease) }
html[data-theme="dark"] .theme-toggle .tt-thumb{ transform:translateX(28px) }
.theme-toggle .tt-icon{ position:relative; z-index:1; width:24px; height:24px; flex:none; display:grid; place-items:center; color:var(--muted); transition:color .5s var(--ease) }
.theme-toggle .tt-icon svg{ width:13px; height:13px }
html:not([data-theme="dark"]) .tt-icon--sun{ color:var(--paper) }
html[data-theme="dark"] .tt-icon--moon{ color:var(--paper) }

.menu-btn{ display:none; width:40px; height:40px; align-items:center; justify-content:center; border:1px solid var(--hairline); border-radius:999px }
.menu-btn .bars{ position:relative; width:16px; height:10px }
.menu-btn .bars::before, .menu-btn .bars::after{ content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--ink); transition:transform .4s var(--ease), top .4s var(--ease) }
.menu-btn .bars::before{ top:0 } .menu-btn .bars::after{ top:8.5px }
body.menu-open .menu-btn .bars::before{ top:4px; transform:rotate(45deg) }
body.menu-open .menu-btn .bars::after{ top:4px; transform:rotate(-45deg) }
.mobile-menu{ position:fixed; inset:0; z-index:90; background:var(--paper); display:flex; flex-direction:column; justify-content:center; padding:0 var(--gutter); opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s .45s }
body.menu-open .mobile-menu{ opacity:1; visibility:visible; transition:opacity .45s var(--ease) }
.mobile-menu ul{ list-style:none; display:flex; flex-direction:column; gap:8px }
.mobile-menu a{ font-family:var(--serif); font-size:clamp(34px,9vw,44px); color:var(--ink); line-height:1.3; display:inline-block; transform:translateY(16px); opacity:0; transition:transform .6s var(--ease), opacity .6s var(--ease) }
body.menu-open .mobile-menu a{ transform:none; opacity:1 }
body.menu-open .mobile-menu li:nth-child(2) a{ transition-delay:.05s }
body.menu-open .mobile-menu li:nth-child(3) a{ transition-delay:.1s }
body.menu-open .mobile-menu li:nth-child(4) a{ transition-delay:.15s }
@media (max-width:719px){ .nav-links{ display:none } .menu-btn{ display:inline-flex } }

/* ============================================================ HERO */
/* Clip horizontally only (the wide glow must not cause side-scroll), but leave
   the vertical axis open so the warm glow can bleed up under the transparent
   header instead of being cut by a hard line at the hero's top edge. */
.hero{ position:relative; min-height:calc(100svh - 72px); display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,7vh,90px) 0 clamp(48px,7vh,80px); overflow-x:clip; overflow-y:visible }
.hero-glow{ position:absolute; z-index:0; right:4%; top:50%; width:min(640px,56vw); aspect-ratio:1; border-radius:50%; transform:translateY(-50%); background:radial-gradient(circle, color-mix(in srgb,var(--warm) var(--glow),transparent), transparent 62%); filter:blur(16px); pointer-events:none; transition:opacity .6s var(--ease) }
@media (max-width:860px){ .hero-glow{ right:-20%; top:32%; width:90vw; opacity:.7 } }
.hero-grid{ position:relative; z-index:2; display:grid; align-items:center; gap:clamp(28px,4vw,64px); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr } }
.hero-eyebrow{ margin-bottom:26px }
.hero-h1{ font-size:clamp(46px,8.4vw,104px); font-weight:400; max-width:12ch }
.hero-h1 .w{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em }
.hero-h1 .wi{ display:inline-block }
.hero-h1 .wi--accent em{ font-style:italic; color:var(--warm) }
html.motion .hero-h1 .wi{ transform:translateY(112%); animation:wordUp .95s var(--ease) forwards; animation-delay:calc(.2s + var(--i)*.08s) }
@keyframes wordUp{ to{ transform:translateY(0) } }
.hero-sub{ margin-top:clamp(24px,3.5vh,34px); max-width:46ch; font-size:clamp(16.5px,1.6vw,19px); line-height:1.62; color:var(--ink-2); text-wrap:pretty }
@media (min-width:1600px){
  .hero-h1{ font-size:clamp(46px,8.4vw,116px) }
  .hero-sub{ font-size:20px }
}
.hero-ctas{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,4vh,40px) }
html.motion .hero-fade{ opacity:0; transform:translateY(20px); animation:fadeUp .9s var(--ease) forwards }
html.motion .hero-eyebrow{ animation-delay:.05s }
html.motion .hero-sub{ animation-delay:.75s }
html.motion .hero-ctas{ animation-delay:.85s }
html.motion .hero-knot-wrap{ animation-delay:.4s }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0) } }

.hero-knot-wrap{ position:relative; display:grid; place-items:center }
/* glow that lives behind the knot — used in dark mode so the mark sits
   in the centre of the warm sphere */
.hero-knot-wrap::before{
  content:""; position:absolute; left:50%; top:50%; z-index:-1;
  width:min(150%, 132vw); aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%) scale(.55);
  background:radial-gradient(circle, color-mix(in srgb,var(--warm) calc(var(--glow) + 4%),transparent), transparent 64%);
  filter:blur(20px); opacity:0; pointer-events:none;
  transition:opacity .6s var(--ease), transform .7s var(--ease);
}
/* DARK MODE: knot blends into the centre of the sphere (default on;
   the Tweaks panel can switch it off by adding .knot-free) */
html[data-theme="dark"]:not(.knot-free) .hero-glow{ opacity:0 }
html[data-theme="dark"]:not(.knot-free) .hero-knot-wrap::before{
  opacity:1;
  /* Edgeless warm wash on OLED black.
     The eye detects a glow's "edge" where the colour changes fastest, so we
     front-load the brightness drop near the centre (hidden behind the knot)
     and give the outer two-thirds an almost-flat, hue-consistent tail that
     reaches zero alpha. Large footprint + heavy blur push the perimeter
     off-screen / below perception — no ring, no banding. */
  /* Centred on the knot (as before). Generous size so the warmth reaches up
     under the now-transparent header and fades to black at the screen edges. */
  width:min(180%, 155vw);
  transform:translate(-50%,-50%) scale(1);
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--warm) 32%,transparent) 0%,
    color-mix(in srgb,var(--warm) 22%,transparent) 12%,
    color-mix(in srgb,var(--warm) 13%,transparent) 26%,
    color-mix(in srgb,var(--warm) 6%,transparent) 44%,
    color-mix(in srgb,var(--warm) 2.5%,transparent) 62%,
    color-mix(in srgb,var(--warm) 1%,transparent) 80%,
    color-mix(in srgb,var(--warm) 0%,transparent) 94%);
  filter:blur(60px);
}
.hero-knot{ width:min(var(--knot-size),82%); height:auto; overflow:visible; color:var(--ink) }
.hero-knot .hk-draw{ stroke-dasharray:100 }
html.motion .hero-knot .hk-draw{ stroke-dashoffset:100; animation:hkDraw 1.6s var(--ease) .35s forwards }
@keyframes hkDraw{ to{ stroke-dashoffset:0 } }
.hero-knot .ring{ fill:none; stroke-width:1.3; transition:transform .6s var(--ease) }
.hero-knot .ring--ink{ stroke:var(--ink) } .hero-knot .ring--accent{ stroke:var(--accent) }
.hero-knot .over{ fill:none; stroke:var(--ink); stroke-width:1.3 }
.hero-knot .draw{ stroke-dasharray:100 100; stroke-dashoffset:100 }
html.motion .hero-knot .ring--ink.draw{ animation:drawRing 1.4s var(--ease) .55s forwards }
html.motion .hero-knot .ring--accent.draw{ animation:drawRing 1.4s var(--ease) .8s forwards }
.hero-knot .over{ opacity:0 }
html.motion .hero-knot .over{ animation:fadeIn .5s var(--ease) 2s forwards }
@keyframes drawRing{ to{ stroke-dashoffset:0 } }
@keyframes fadeIn{ to{ opacity:1 } }
@media (max-width:860px){ .hero-knot-wrap{ order:-1; margin-bottom:8px } .hero-knot{ width:min(300px,62%) } }

.scroll-hint{ position:absolute; bottom:26px; left:var(--gutter); display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); z-index:2 }
.scroll-hint::after{ content:""; width:48px; height:1px; background:var(--hairline) }
html.motion .scroll-hint{ opacity:0; animation:fadeIn 1s var(--ease) 1.6s forwards }

/* ============================================================ MANIFESTO */
.manifesto{ padding:clamp(110px,20vh,220px) 0; border-top:1px solid var(--hairline) }
.manifesto-eyebrow{ margin-bottom:clamp(34px,6vw,60px) }
.manifesto-text{ font-family:var(--serif); font-weight:400; font-size:clamp(32px,6.2vw,82px); line-height:1.12; letter-spacing:-.018em; max-width:18ch }
.manifesto-text em{ font-style:italic; color:var(--warm) }
.manifesto-text .mw{ display:inline-block }
html.motion .manifesto-text .mw{ opacity:.12; transition:opacity .5s var(--ease) }
html.motion .manifesto-text.lit .mw{ opacity:1 }
html.motion .manifesto-text .mw{ transition-delay:calc(var(--mi,0) * .05s) }

/* ============================================================ SECTION scaffolding */
.section{ padding:clamp(90px,12vw,150px) 0 }
.section--hairline{ border-top:1px solid var(--hairline) }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:clamp(40px,6vw,64px) }
.section-head .idx{ font-family:var(--serif); font-size:15px; color:var(--muted); font-weight:400 }
.section-head .eyebrow{ font-size:12px }
html.motion [data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:var(--rd,0s) }
html.motion [data-reveal].in{ opacity:1; transform:none }

/* ============================================================ PRODUCTS */
.products-grid{ display:grid; gap:22px; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) }
@media (max-width:840px){ .products-grid{ grid-template-columns:1fr } }
.card{ background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:clamp(30px,4.5vw,52px); display:flex; flex-direction:column; align-items:flex-start; transition:border-color .4s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease) }
.card--product{ position:relative; overflow:hidden; cursor:pointer }
.card--product:hover{ border-color:color-mix(in srgb,var(--muted) 55%,var(--hairline)); transform:translateY(-4px); box-shadow:0 24px 48px -32px rgba(14,14,16,.18) }
.card-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100% }
.card-appicon{ width:56px; height:56px; border-radius:14px; box-shadow:0 8px 22px -10px rgba(14,14,16,.4); flex:none }
.tag{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid var(--hairline); border-radius:999px; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2) }
.tag .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none }
.card h3{ font-size:clamp(32px,4vw,44px); font-weight:400; letter-spacing:-.01em; margin-top:clamp(40px,7vw,84px) }
.card .desc{ margin-top:14px; max-width:46ch; color:var(--ink-2); font-size:16px; text-wrap:pretty }
.card .card-foot{ margin-top:clamp(24px,4vw,36px) }
/* hover peek — product screens slide up at the corner */
.card-peek{ position:absolute; right:clamp(20px,4vw,44px); bottom:-40%; display:flex; gap:12px; opacity:0; transform:translateY(20px) rotate(-4deg); transition:opacity .5s var(--ease), transform .6s var(--ease); pointer-events:none }
.card-peek img{ width:clamp(90px,12vw,120px); aspect-ratio:9/19.5; object-fit:cover; object-position:top; border-radius:14px; border:3px solid #0E0E10; box-shadow:0 24px 50px -18px rgba(14,14,16,.5) }
.card-peek img:nth-child(2){ transform:translateY(22px) }
.card--product:hover .card-peek{ opacity:1; transform:translateY(-6%) rotate(-4deg) }
/* Single-column layouts (mobile/tablet): no hover, so the screens peek from the
   card's bottom corner permanently and rise into place when the card scrolls in
   (reuses the data-reveal .in class — no extra JS). */
@media (max-width:840px){
  .card--product{ padding-bottom:200px }
  .card-peek{ display:flex; right:20px; bottom:-30px; opacity:1; transform:rotate(-4deg) }
  html.motion .card--product .card-peek{ opacity:0; transform:translateY(26px) rotate(-4deg) }
  html.motion .card--product.in .card-peek{ opacity:1; transform:translateY(0) rotate(-4deg); transition-delay:.3s }
}

.card--ghost{ border-style:dashed; background:transparent; justify-content:center; align-items:center; text-align:center; min-height:280px; color:var(--muted) }
.card--ghost .ghost-mark{ opacity:.5; margin-bottom:18px; width:52px; height:52px; color:var(--muted) }
.card--ghost .knot .ring--accent{ stroke:var(--muted) }
.card--ghost p{ font-family:var(--serif); font-size:21px; color:var(--ink-2) }
.card--ghost span{ margin-top:6px; font-size:13px }

/* ============================================================ PRINCIPLES (pinned horizontal) */
.principles{ border-top:1px solid var(--hairline); position:relative }
.pin-wrap{ padding:clamp(80px,10vw,120px) 0 }
.principles .section-head{ padding-inline:var(--edge); margin-bottom:clamp(36px,5vw,56px) }
.principles .section-head .eyebrow{ font-size:12px }
.p-track{ display:flex; gap:clamp(16px,2vw,26px); padding-inline:var(--edge); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none }
.p-track::-webkit-scrollbar{ display:none }
.principle{ flex:0 0 min(82vw,470px); scroll-snap-align:start; background:var(--surface); border:1px solid var(--hairline); border-radius:18px; padding:clamp(30px,3.5vw,48px); min-height:clamp(320px,42vh,420px); display:flex; flex-direction:column }
.principle .num{ font-family:var(--serif); font-size:clamp(54px,6vw,76px); font-weight:300; line-height:1; color:var(--hairline); -webkit-text-stroke:.5px var(--muted) }
.principle h3{ margin-top:auto; padding-top:48px; font-size:clamp(26px,2.6vw,32px); letter-spacing:-.01em }
.principle p{ margin-top:12px; color:var(--ink-2); max-width:36ch; text-wrap:pretty }
.principles.is-pinned .pin-wrap{ height:100svh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:0 }
.principles.is-pinned .p-track{ overflow:visible; width:max-content; scroll-snap-type:none; padding-right:var(--edge); will-change:transform }
.principles.is-pinned .principle{ flex-basis:clamp(420px,38vw,520px) }
.swipe-hint{ padding-inline:var(--edge); margin-top:18px; font-size:12px; color:var(--muted) }
.principles.is-pinned .swipe-hint{ display:none }

/* ============================================================ PROOF */
.proof{ border-top:1px solid var(--hairline); padding:clamp(34px,4.5vw,48px) 0 }
.proof ul{ list-style:none; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px clamp(20px,4vw,48px); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.proof li{ display:flex; align-items:center; gap:clamp(20px,4vw,48px) }
.proof li + li::before{ content:"·"; color:var(--hairline); font-size:18px; line-height:0 }

/* ============================================================ COMPANY */
.company{ position:relative; overflow:clip }
.company .ghost-knot{ position:absolute; right:-12%; top:50%; width:min(560px,60vw); height:auto; opacity:.5; pointer-events:none; transform:translateY(-50%); color:var(--hairline) }
.company .ghost-knot .ring{ fill:none; stroke:var(--hairline); stroke-width:.7 }
.company-inner{ position:relative; max-width:780px }
.company blockquote{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,4.2vw,46px); line-height:1.25; letter-spacing:-.012em; margin-top:26px; color:var(--ink); text-wrap:balance }
.company .u-link{ margin-top:34px; font-size:15px }
.founder-note{ margin-top:clamp(28px,4vw,40px); max-width:62ch }
.founder-note p{ color:var(--ink-2); font-size:clamp(16px,1.5vw,18px); line-height:1.7; text-wrap:pretty }
.founder-note p + p{ margin-top:16px }
.founder-sign{ margin-top:26px; font-family:var(--serif); font-style:italic; color:var(--ink); font-size:clamp(17px,1.6vw,19px) }

/* ============================================================ FOOTER */
.site-footer{ border-top:1px solid var(--hairline); padding:clamp(60px,8vw,96px) 0 40px }
.footer-grid{ display:grid; gap:48px 32px; grid-template-columns:1.6fr repeat(3,minmax(120px,1fr)) }
@media (max-width:840px){ .footer-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr } }
.footer-brand p{ margin-top:18px; max-width:30ch; color:var(--muted); font-size:14px }
.footer-col h4{ font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:18px }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:11px }
.footer-col a{ font-size:14px; color:var(--ink-2); cursor:pointer } .footer-col a:hover{ color:var(--ink) }
.footer-legal{ margin-top:clamp(48px,7vw,72px); padding-top:26px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 24px; font-size:13px; color:var(--muted) }

/* ============================================================
   KARMAKNOT OVERLAY — product's own dark, vivid world
   ============================================================ */
.kk{
  --kk-bg:#0B0712; --kk-bg2:#1A0F2B; --kk-ink:#F3EEFA; --kk-ink2:#B9AECD;
  --kk-muted:#7C7393; --kk-line:rgba(255,255,255,.10);
  --kk-gold:#E9A23B; --kk-rose:#E08AB0; --kk-green:#7BE08A; --kk-violet:#A36BFF;
  position:fixed; inset:0; z-index:200;
  background:
    radial-gradient(120% 80% at 75% 12%, #2A1644 0%, transparent 55%),
    radial-gradient(100% 70% at 12% 88%, #2A0F2E 0%, transparent 55%),
    linear-gradient(180deg,#0B0712,#0B0712);
  color:var(--kk-ink); font-family:var(--sans);
  opacity:0; visibility:hidden; transform:scale(1.02);
  transition:opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s;
}
.kk.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity .5s var(--ease), transform .6s var(--ease) }
.kk-stars{ position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 70% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 85% 60%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 35% 75%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 55% 50%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 10% 60%, rgba(255,255,255,.4), transparent);
  background-repeat:no-repeat;
}
.kk-close{ position:fixed; top:22px; right:clamp(18px,4vw,40px); z-index:210; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--kk-line); background:rgba(255,255,255,.05); color:var(--kk-ink); backdrop-filter:blur(8px); transition:background-color .3s var(--ease), transform .3s var(--ease) }
.kk-close:hover{ background:rgba(255,255,255,.12); transform:rotate(90deg) }
.kk-close svg{ width:20px; height:20px }
.kk-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain }
.kk-inner{ width:min(1080px, calc(100% - clamp(32px,8vw,96px))); margin-inline:auto; padding:clamp(64px,12vh,120px) 0 clamp(60px,9vh,100px) }

/* kk entrance: children rise once open */
.kk [data-kkr]{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.kk.is-open [data-kkr].kin{ opacity:1; transform:none }

.kk-hero{ text-align:center; max-width:760px; margin-inline:auto }
.kk-brandrow{ display:inline-flex; align-items:center; gap:16px; text-align:left; margin-bottom:clamp(30px,5vw,46px) }
.kk-appicon{ width:72px; height:72px; border-radius:18px; box-shadow:0 16px 40px -12px rgba(163,107,255,.6) }
.kk-name{ font-family:var(--serif); font-size:26px; font-weight:500; line-height:1 }
.kk-tag{ display:inline-flex; align-items:center; gap:8px; margin-top:8px; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--kk-ink2) }
.kk-tag .kk-dot{ width:6px; height:6px; border-radius:50%; background:var(--kk-gold); box-shadow:0 0 10px var(--kk-gold) }
.kk-headline{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,6vw,68px); line-height:1.06; letter-spacing:-.02em; color:#fff; text-wrap:balance }
.kk-lede{ margin-top:24px; font-size:clamp(16px,1.7vw,19px); line-height:1.65; color:var(--kk-ink2); text-wrap:pretty }
.kk-by{ margin-top:22px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--kk-muted) }

/* feature rows */
.kk-feature{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(28px,6vw,80px); margin-top:clamp(70px,12vw,140px) }
.kk-feature--rev .kk-shot{ order:2 }
@media (max-width:760px){ .kk-feature, .kk-feature--rev{ grid-template-columns:1fr; gap:30px } .kk-feature--rev .kk-shot{ order:0 } }
.kk-shot{ display:grid; place-items:center }
.kk-phone{ position:relative; width:min(300px,76%); aspect-ratio:9/19.5; border-radius:38px; padding:8px; background:linear-gradient(160deg,#2a2336,#15101f); border:1px solid rgba(255,255,255,.12); box-shadow:0 50px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4) inset }
/* Dynamic Island — black pill sitting in the status bar */
.kk-phone::after{ content:""; position:absolute; top:3%; left:50%; transform:translateX(-50%); width:30%; aspect-ratio:3.5 / 1; border-radius:99px; background:#000; box-shadow:0 0 0 1px rgba(0,0,0,.5), inset -7px 0 0 -5px rgba(255,255,255,.04); z-index:2 }
.kk-phone img{ width:100%; height:100%; object-fit:cover; border-radius:30px }
.kk-text .kk-step{ font-family:var(--serif); font-size:15px; color:var(--kk-muted) }
.kk-text h3{ font-family:var(--serif); color:#fff; font-weight:400; font-size:clamp(26px,3.4vw,40px); letter-spacing:-.01em; margin-top:12px }
.kk-text p{ margin-top:14px; max-width:40ch; color:var(--kk-ink2); font-size:clamp(15.5px,1.6vw,18px); line-height:1.6; text-wrap:pretty }

.kk-foot{ text-align:center; margin-top:clamp(80px,12vw,150px); padding-top:clamp(40px,6vw,60px); border-top:1px solid var(--kk-line) }
.kk-soon{ font-family:var(--serif); font-size:clamp(26px,4vw,40px); color:#fff; background:linear-gradient(90deg,var(--kk-gold),var(--kk-rose)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.kk-foot-note{ margin-top:14px; color:var(--kk-muted); font-size:14px }
.kk-back{ margin-top:30px; padding:13px 26px; border-radius:999px; border:1px solid var(--kk-line); color:var(--kk-ink); font-size:14px; font-weight:500; transition:background-color .3s var(--ease) }
.kk-back:hover{ background:rgba(255,255,255,.08) }

/* ============================================================
   LEGAL / SUPPORT PAGES (privacy.html, terms.html, support.html)
   Same editorial system, narrow reading column.
   ============================================================ */
.legal{ padding:clamp(44px,7vw,84px) 0 clamp(90px,12vw,140px) }
.legal .container{ --maxw:760px }
.legal-head h1{ font-size:clamp(38px,6.4vw,64px); letter-spacing:-.015em; line-height:1.06; margin-top:16px }
.legal-updated{ margin-top:14px; font-size:13px; color:var(--muted) }
.legal-body{ margin-top:clamp(34px,5.5vw,52px) }
.legal-body h2{ font-size:clamp(22px,2.7vw,28px); letter-spacing:-.01em; margin:clamp(34px,5vw,46px) 0 12px }
.legal-body h3{ font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink); margin:26px 0 8px }
.legal-body p, .legal-body li{ color:var(--ink-2); font-size:15.5px; line-height:1.7 }
.legal-body p{ margin-bottom:12px }
.legal-body ul{ list-style:disc; padding-left:20px; margin:0 0 12px }
.legal-body li{ margin-bottom:8px }
.legal-body strong{ color:var(--ink); font-weight:600 }
.legal-body a:not(.btn){ color:var(--accent); border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent); transition:border-color .3s var(--ease) }
.legal-body a:not(.btn):hover{ border-bottom-color:var(--accent) }
.legal-note{ border:1px solid var(--hairline); background:var(--surface); border-radius:14px; padding:18px 20px; margin:22px 0 }
.legal-note p{ margin:0 }
.legal-note--warn{ border-left:3px solid var(--warm) }
.legal-cta{ margin-top:26px }
/* current page marker in the small legal nav */
.nav-links a[aria-current="page"]{ color:var(--ink) }

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  html.motion [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important }
  html.motion .manifesto-text .mw{ opacity:1 !important }
  html.motion .hero-fade, html.motion .hero-h1 .wi{ opacity:1 !important; transform:none !important; animation:none !important }
  .hero-knot .draw, .hero-knot .hk-draw{ stroke-dashoffset:0 !important; animation:none !important } .hero-knot .over{ opacity:1 !important; animation:none !important }
  .kk [data-kkr]{ opacity:1 !important; transform:none !important }
  *, *::before, *::after{ animation-duration:.001s !important; animation-delay:0s !important; transition-duration:.001s !important; scroll-behavior:auto !important }
  .grain{ display:none } .cursor-dot{ display:none }
}