/* Kith marketing site — tokens and primitives.
   Fonts: Helvetica Neue throughout (matches the live app).
   Palette derives from theme.jsx so the site and the product read as one thing. */
:root{
/* colour */
--ink:#1A1A2E;--paper:#F5F3F0;--card:#FFFFFF;--moss:#2D6A4F;--moss-deep:#14341F;--honey:#C9A84C;--slate:#6E6558;
--faint:#A89E90;--rule:rgba(26,26,46,.12);--rule-soft:rgba(26,26,46,.07);--tint:#FBF7F4;--moss-tint:#E7EFEA;
/* type — Helvetica Neue everywhere */
--display:'Helvetica Neue',Helvetica,Arial,sans-serif;
--body:'Helvetica Neue',Helvetica,Arial,sans-serif;
--label:'Helvetica Neue',Helvetica,Arial,sans-serif;
/* modular scale, 1.25 */
--t-xs:.75rem;--t-sm:.875rem;--t-base:1.0625rem;--t-md:1.25rem;--t-lg:1.5625rem;--t-xl:1.953rem;--t-2xl:2.441rem;--t-3xl:3.05rem;--t-4xl:3.815rem;--t-5xl:4.5rem;
/* space */
--s-1:.5rem;--s-2:.75rem;--s-3:1rem;--s-4:1.5rem;--s-5:2rem;--s-6:3rem;--s-7:4.5rem;--s-8:7rem;
--sec:5.5rem;--sec-lg:8rem;--sec-sm:3.5rem;
--grid:1200px;--gutter:clamp(1.25rem,4vw,2.5rem);--measure:68ch;
--r:4px;--r-pill:999px;
/* motion: three curves, three durations */
--e-out:cubic-bezier(.16,1,.3,1);--e-inout:cubic-bezier(.4,0,.2,1);--e-lin:linear;
--d-1:150ms;--d-2:200ms;--d-3:500ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--t-base);line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:proportional-nums}
h1,h2,h3,h4{margin:0;font-weight:600;text-wrap:balance}
h1{font-family:var(--display);font-size:clamp(2.441rem,5.4vw,var(--t-5xl));line-height:1.04;letter-spacing:-.022em}
h2{font-family:var(--display);font-size:clamp(1.953rem,3.6vw,var(--t-3xl));line-height:1.08;letter-spacing:-.018em}
h3{font-size:var(--t-md);letter-spacing:-.012em;line-height:1.28}
p{margin:0;text-wrap:pretty}
a{color:var(--moss);text-decoration:none}
a:hover{color:var(--moss-deep)}
img,svg{display:block}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--card);color:var(--ink);padding:var(--s-2) var(--s-3);border:1px solid var(--rule);font-size:var(--t-sm);font-weight:600}
.skip:focus{left:var(--s-3);top:var(--s-3)}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--grid);margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
section{padding:var(--sec) 0}
.sec-lg{padding:var(--sec-lg) 0}
.ruled{border-top:1px solid var(--rule-soft)}
.tinted{background:var(--tint)}
.measure{max-width:var(--measure)}

/* ── primitives ─────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--label);font-size:var(--t-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.lede{font-size:var(--t-md);line-height:1.5;color:var(--slate)}
.said{font-family:var(--display);font-style:italic}
.prose p+p{margin-top:var(--s-3)}
.prose p{color:var(--slate)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--body);font-size:var(--t-sm);font-weight:600;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;padding:.875rem 1.5rem;transition:background var(--d-1) var(--e-inout),color var(--d-1) var(--e-inout),border-color var(--d-1) var(--e-inout)}
.btn-primary{background:var(--moss);color:#fff}
.btn-primary:hover{background:var(--moss-deep);color:#fff}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-secondary:hover{background:var(--card);color:var(--ink);border-color:var(--ink)}
.btn-sm{padding:.625rem 1.125rem;font-size:var(--t-sm)}
.tlink{font-weight:600;font-size:var(--t-sm);color:var(--ink);position:relative}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--d-1) var(--e-inout)}
.tlink:hover{color:var(--ink)}
.tlink:hover::after{transform:scaleX(1)}

.card{background:var(--card);border:1px solid var(--rule-soft);border-radius:var(--r);padding:var(--s-4)}
.mark{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#F6DD9A,var(--honey) 62%,#B68E2C);flex-shrink:0}

/* email capture */
.capture{display:flex;gap:var(--s-1);max-width:452px;margin-top:var(--s-4);flex-wrap:wrap}
.capture label{position:absolute;left:-9999px}
.capture input{flex:1;min-width:220px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:.875rem 1rem;font-family:var(--body);font-size:1rem;color:var(--ink)}
.capture input::placeholder{color:var(--faint)}
.capture input:focus{outline:none;border-color:var(--moss)}
.capture .btn{flex-shrink:0}
.capture-note{font-size:var(--t-sm);color:var(--faint);margin-top:var(--s-2)}

.appstore{display:inline-flex;align-items:center;gap:.55rem;margin-top:var(--s-4);border:1px solid var(--rule);border-radius:var(--r);padding:.6rem 1rem;color:var(--ink)}
.appstore:hover{color:var(--ink);border-color:var(--ink)}
.appstore b{font-size:var(--t-sm);font-weight:600;line-height:1.1}
.appstore i{display:block;font-family:var(--label);font-size:.625rem;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}

/* screenshot placeholder — replaced with real images at launch */
.shot{background:var(--tint);border:1px solid var(--rule-soft);border-radius:var(--r);overflow:hidden;position:relative}
.shot-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--label);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:center;padding:var(--s-4)}

/* partner logo slots */
.logo{height:78px;border:1px solid var(--rule-soft);border-radius:var(--r);background:var(--card);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--s-2)}
.logo img{max-width:100%;max-height:100%;object-fit:contain}

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:50;background:var(--paper);transition:border-color var(--d-2) var(--e-inout)}
.site-head[data-transparent]{background:transparent;border-bottom-color:transparent}
.site-head{border-bottom:1px solid var(--rule-soft)}
.head-in{display:flex;align-items:center;gap:var(--s-5);height:72px;max-width:var(--grid);margin:0 auto;padding:0 var(--gutter)}
.wordmark{display:flex;align-items:center;gap:.55rem;color:var(--ink);font-family:var(--display);font-size:var(--t-md);font-weight:600;letter-spacing:-.01em}
.head-nav{display:flex;gap:var(--s-4);margin-left:auto}
.head-nav a{font-size:var(--t-sm);font-weight:500;color:var(--slate)}
.head-nav a:hover,.head-nav a[aria-current]{color:var(--ink)}
.head-cta{display:flex;align-items:center;gap:var(--s-3)}
.burger{display:none;margin-left:auto;width:40px;height:40px;border:1px solid var(--rule);border-radius:var(--r);background:transparent;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.drawer{display:none}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--rule);padding:var(--s-7) 0 var(--s-5);margin-top:var(--s-5)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:var(--s-5)}
.foot-about{font-family:var(--display);font-style:italic;font-size:var(--t-base);line-height:1.5;color:var(--slate);margin-top:var(--s-3);max-width:24ch}
.foot-col h4{font-family:var(--label);font-size:var(--t-xs);font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--slate);margin-bottom:var(--s-3)}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem}
.foot-col a{font-size:var(--t-sm);color:var(--slate)}
.foot-col a:hover{color:var(--ink)}
.foot-base{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--rule-soft);font-size:var(--t-sm);color:var(--faint);flex-wrap:wrap}
.foot-base nav{display:flex;gap:var(--s-3)}
.foot-base nav a{color:var(--faint)}
.foot-base nav a:hover{color:var(--ink)}

/* ── scroll reveal ─────────────────────────────────────────────────────────
   Content visible by default. JS class gates the animation. */
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal[data-in]{opacity:1;transform:none;transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out)}

@media(max-width:900px){
:root{--sec:3.5rem;--sec-lg:4.5rem}
.grid{grid-template-columns:repeat(6,1fr)}
.head-nav,.head-cta{display:none}
.burger{display:flex}
.drawer[data-open]{display:flex;position:fixed;inset:72px 0 0;z-index:49;background:var(--paper);flex-direction:column;padding:var(--s-5) var(--gutter);gap:var(--s-4)}
.drawer a{font-family:var(--display);font-size:var(--t-xl);color:var(--ink)}
.drawer .btn{margin-top:auto;width:100%}
.foot-grid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
.js .reveal,.js .reveal[data-in]{opacity:1;transform:none;transition:opacity 180ms linear}
*{animation-duration:.01ms!important;animation-iteration-count:1!important}
}