/* What every product page shares (site.html): the still linen layer, page, type, top bar,
   footer, buttons, links, small labels, bullets and fade-ins. Colors, fonts and shapes come from
   brand.css only. */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--bar)}
:root{--pad:clamp(20px,5vw,64px);--bar:64px}
body{background:var(--brand-paper);color:var(--brand-ink);font:400 var(--brand-text)/1.6 var(--brand-font-ui);overflow-x:hidden}
/* the still layer: linen and its fabric texture (and the home page's watermark) stay put while
   the page scrolls over them as one sheet of glass, each section's tint starting on a hard line */
.linen{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--brand-paper)}
/* the folds are one picture that covers the screen once, so no pattern repeats; only the fine
   weave is tiled (tools/linen.py) */
.linen::before{content:"";position:absolute;inset:0;background:url(/brand/linen-weave.jpg) 0 0/155px,url(/brand/linen-folds.jpg) center/cover no-repeat;background-blend-mode:overlay,normal;mix-blend-mode:multiply;opacity:.26}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad);width:100%}
svg.h{fill:currentColor;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--brand-ink);color:var(--brand-paper);padding:12px 16px;border-radius:var(--brand-radius)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--brand-accent);outline-offset:3px}

/* type */
.eyebrow{font:600 12px/1.4 var(--brand-font-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink-2)}
.eyebrow .num{color:var(--brand-accent)}
.eyebrow::before{content:"";display:inline-block;width:22px;height:2px;margin-right:10px;vertical-align:.3em;border-radius:2px;background:var(--brand-quiet)}
h1,h2{font-family:var(--brand-font-body);font-weight:400}
h2{font-size:clamp(36px,6vw,64px);line-height:1.05;letter-spacing:-.015em;margin-top:12px}
h1 em,h2 em{display:block;font-weight:300}
.lede{color:var(--brand-ink-2);max-width:40ch;margin-top:18px}

/* links and buttons */
.tlink{font:500 17px/1 var(--brand-font-ui);display:inline-flex;gap:10px;align-items:center;min-height:var(--brand-tap);padding:14px 0 8px;border-bottom:1px solid currentColor;transition:color .2s}
@media (hover:hover){.tlink:hover{color:var(--brand-accent)}}
.tlink svg{width:15px;height:15px;flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 24px;background:var(--brand-ink);color:var(--brand-paper);font:500 17px/1 var(--brand-font-ui);border:1px solid var(--brand-ink);border-radius:var(--brand-radius);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
@media (hover:hover){.btn:hover{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--brand-accent-ink)}}
.btn svg{width:15px;height:15px;flex:none}
.btn.light{background:transparent;color:var(--brand-ink)}
@media (hover:hover){.btn.light:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--brand-paper)}}
.btn[disabled]{opacity:.6;cursor:default}

/* bullets: the mark's two slanted bars */
.bars{width:24px;height:19px;flex:none;fill:var(--brand-quiet)}
.ticks{list-style:none;margin-top:14px;display:grid;gap:8px}
.ticks li{display:flex;gap:12px;align-items:flex-start}
.ticks .bars{margin-top:5px;width:20px;height:16px}

/* questions that open */
.qs{border-bottom:1px solid var(--brand-rule)}
.qs details{border-top:1px solid var(--brand-rule)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:64px;padding:14px 0;font:400 22px/1.3 var(--brand-font-body)}
.qs summary::-webkit-details-marker{display:none}
.qs details p{color:var(--brand-ink-2);padding:0 0 22px;max-width:60ch}
details summary svg{width:16px;height:16px;flex:none;transition:transform .3s}
details[open] > summary svg{transform:rotate(45deg)}

/* top bar */
.bar{position:sticky;top:0;z-index:40;background:var(--brand-bar-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--bar);gap:20px}
.brand{display:flex;align-items:center;gap:10px;min-height:var(--brand-tap)}
.word{font:400 23px/1 var(--brand-font-body);letter-spacing:-.01em;white-space:nowrap}
/* the wordmark's H is the solid small-print mark, slanted like the rest of the name */
.word .hm,.big .hm,.vs .hm{display:inline-block;height:.7em;width:auto;aspect-ratio:828.3/773;margin:0 .02em 0 .03em;vertical-align:baseline;fill:var(--brand-accent-big);position:relative;top:.01em}
.vs .hm{fill:var(--brand-accent-on-dark)}
.word span,.big span,.vs .us span{color:var(--brand-ink-2)}
.nav{display:flex;align-items:center;gap:30px}
.nav a.l{display:none;font:500 16px/1 var(--brand-font-ui);color:var(--brand-ink-2);padding:14px 0}
@media (hover:hover){.nav a.l:hover{color:var(--brand-ink)}}
.bar .btn{min-height:44px;padding:0 18px;font-size:16px}
@media (min-width:900px){.nav a.l{display:block}}

/* footer */
/* the big name, then one line: the copyright on the left, the links on the right (phones: links above) */
.foot{padding:36px 0 32px;overflow:hidden}
.foot .big{font:400 clamp(44px,13.5vw,170px)/.9 var(--brand-font-body);letter-spacing:-.035em;white-space:nowrap}
.foot .big .hm.logo{height:1.9em;margin:0 -.19em 0 .06em;top:0}
.foot .row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 24px;color:var(--brand-ink-2);font-size:17px;margin-top:16px}
.foot .links{display:flex;flex-wrap:wrap;gap:0 24px;margin-left:auto}
.foot .links a{color:var(--brand-ink-2);padding:10px 0;min-height:var(--brand-tap);display:inline-flex;align-items:center}
@media (hover:hover){.foot .links a:hover{color:var(--brand-ink)}}
@media (max-width:600px){.foot .row{flex-direction:column-reverse;align-items:flex-start}.foot .links{margin-left:0}}

/* fade-ins, only once the page's script says motion is on (home/js/reveal.js) */
.motion [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.motion [data-reveal].in{opacity:1;transform:none}
.motion [data-reveal="2"]{transition-delay:.12s}
.motion [data-reveal="3"]{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion [data-reveal]{transform:none;transition:opacity .9s ease}
}