/* HOODRICH.
   Warm paper, purple ink, a serif with opinions. This is a shopping product, so the page
   is lit rather than dark and reads like an editorial spread instead of a dashboard.
   Purple carries every piece of meaning: the price, the accent, the type. Nothing else
   gets a colour.

   Motion is scroll-driven and one-way. Nothing loops, nothing bounces, nothing moves
   unless you moved first. */

:root{
  --paper:#f7f4ef;          /* warm off-white, not white: white is a spreadsheet */
  --paper-2:#fffdfa;
  --sunken:#efe9e0;
  --line:rgba(43,15,99,.11);
  --line-2:rgba(43,15,99,.22);

  --ink:#241046;
  --muted:#6b5b8a;
  --dim:#8d80a6;
  --faint:#b0a5c2;

  --violet:#6d28d9;
  --violet-deep:#4c1d95;
  --violet-wash:rgba(109,40,217,.08);

  --r:18px; --r-md:13px; --r-sm:8px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --serif:"Sentient","Zodiak",Georgia,"Times New Roman",serif;
  --sans:"General Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
img{max-width:100%;display:block}

.wrap{max-width:1240px;margin:0 auto;padding:0 30px}
.eyebrow{
  font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);
}

/* ---------------------------------------------------------------- nav -- */
.nav{position:sticky;top:0;z-index:60;background:rgba(247,244,239,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:30px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:23px;letter-spacing:-.02em}
.brand i{width:23px;height:23px;display:block;flex:none;
  background:url("mark.svg") center/contain no-repeat}
.nav .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav .icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
.nav .icon svg{width:15px;height:15px}
.nav .icon:hover{color:var(--ink);border-color:var(--line);background:var(--paper-2)}
.nav .tab{font-size:14px;color:var(--muted);padding:9px 14px;border-radius:999px;
  transition:color .2s,background .2s}
.nav .tab:hover{color:var(--ink);background:var(--paper-2)}

.btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);
  border:none;border-radius:999px;padding:13px 24px;font-size:14.5px;font-weight:500;cursor:pointer;
  transition:transform .18s var(--ease),background .18s}
.btn:hover{transform:translateY(-1px);background:var(--violet)}
.btn i{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;
  place-items:center;font-style:normal;font-size:12px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn.ghost:hover{border-color:var(--violet);color:var(--violet);background:transparent}
.btn.sm{padding:9px 17px;font-size:13.5px}

/* --------------------------------------------------------------- hero -- */
.hero{display:grid;grid-template-columns:1.02fr .98fr;min-height:calc(100vh - 74px);align-items:center}
/* the hero is full bleed, so the copy column has to reproduce the wrap's gutter itself
   or the headline sits flush to the window edge while the nav above it does not */
.hero-copy{max-width:none;padding:70px 60px 70px max(30px,calc((100vw - 1240px) / 2 + 30px))}
h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(44px,5.4vw,82px);line-height:1.02;
  letter-spacing:-.025em;margin:0;
}
h1 em{font-style:italic}


.lede{font-size:17px;line-height:1.68;color:var(--muted);margin:26px 0 0;max-width:44ch}
.lede em{font-family:var(--serif);font-style:italic;font-size:18.5px;color:var(--ink)}
.hero .ctas{display:flex;gap:11px;margin-top:34px;flex-wrap:wrap}
.hero-note{margin-top:26px;font-size:13.5px;color:var(--dim)}
.hero-note s{color:var(--faint)}

.hero-art{position:relative;height:100%;min-height:520px;overflow:hidden}
.hero-art picture{display:contents}
.hero-art img{position:absolute;inset:-8% 0 -8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
/* the floating labels, which say the thing the picture cannot */
.float{position:absolute;z-index:3;background:var(--paper-2);border-radius:999px;padding:11px 20px;
  font-size:15px;box-shadow:0 14px 34px -20px rgba(36,16,70,.55);white-space:nowrap}
.float.i{font-family:var(--serif);font-style:italic}
.float.dot{padding:11px 14px}

/* ------------------------------------------------------------ section -- */
.section{padding:110px 0;border-top:1px solid var(--line);position:relative}
.shead{margin-bottom:44px}
.shead h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.2vw,54px);
  letter-spacing:-.025em;margin:0;line-height:1.06}
.shead h2 em{font-style:italic;color:var(--violet)}
.shead p{color:var(--muted);margin:16px 0 0;font-size:16px;max-width:54ch;line-height:1.65}

/* ---------------------------------------------------------------- calc -- */
.calc{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:28px;
  box-shadow:0 30px 70px -50px rgba(36,16,70,.5)}
.calc h3{margin:0;font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:-.02em}
.calc .row{display:flex;gap:10px;margin-top:18px}
.field{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 15px}
.field label{display:block;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint)}
.field input,.field select{width:100%;background:none;border:none;outline:none;font-size:20px;
  font-family:var(--mono);font-weight:500;letter-spacing:-.02em;padding:4px 0 0;color:var(--ink)}
.field select{cursor:pointer}
.limit{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.limit .big{font-family:var(--mono);font-size:48px;font-weight:600;letter-spacing:-.045em;
  line-height:1;color:var(--violet)}
.split{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}
.split div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px;text-align:center}
.split b{display:block;font-family:var(--mono);font-size:15px;font-weight:500}
.split span{font-size:10px;color:var(--faint);font-family:var(--sans);font-weight:700;letter-spacing:.07em}
.note{margin-top:16px;font-size:12.5px;color:var(--dim);line-height:1.6}
.note b{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------- cards -- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;
  cursor:pointer;transition:transform .26s var(--ease),box-shadow .26s,border-color .26s}
.card:hover{transform:translateY(-5px);border-color:var(--line-2);
  box-shadow:0 26px 50px -32px rgba(36,16,70,.55)}
/* Each card carries its own tint rather than a shared picture. Eight cards wearing the
   same artwork read as a placeholder, which is what they were. */
.card .face{height:130px;border-radius:10px;overflow:hidden;position:relative;margin-bottom:15px;
  background:#fff;border:1px solid var(--line);display:grid;place-items:center;padding:22px;
  transition:transform .45s var(--ease)}
.card:hover .face{transform:scale(1.015)}
.card .face img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.card.off{opacity:.4}
.card .nm{font-weight:600;font-size:15px}
.card .px{display:flex;align-items:baseline;gap:9px;margin-top:4px}
.card .px b{font-family:var(--mono);font-size:15px;font-weight:500}
.card .px span{font-size:12.5px;color:var(--violet);font-weight:500}

/* ------------------------------------------------------- scroll focus -- */
/* Lines that sharpen as they reach the middle of the screen. The blur is the point: it
   makes you read one line at a time instead of skimming the block. */
.focus{max-width:900px;margin:0 auto;padding:22vh 0}
.focus li{list-style:none;font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,3.6vw,46px);line-height:1.28;letter-spacing:-.02em;
  padding:.32em 0;color:var(--ink);
  filter:blur(7px);opacity:.24;transform:scale(.97);
  transition:filter .45s var(--ease),opacity .45s var(--ease),transform .45s var(--ease);
}
.focus li.on{filter:blur(0);opacity:1;transform:none}
.focus li em{font-style:italic;color:var(--violet)}


/* ----------------------------------------------------------- steps/etc -- */

/* ---------------------------------------------------------------- rail -- */
/* A tall section that pins its contents, so scrolling down walks the cards sideways.
   The height is what buys the travel: four screens of scroll for four cards. */
.rail{height:380vh;position:relative}
.rail-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;perspective:1500px}
.rail-head{padding:0 max(30px,calc((100vw - 1240px) / 2 + 30px));margin-bottom:42px}
.rail-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.2vw,54px);
  letter-spacing:-.025em;margin:0;line-height:1.06}
.rail-head h2 em{font-style:italic;color:var(--violet)}

.track{display:flex;gap:30px;padding:0 max(30px,calc((100vw - 1240px) / 2 + 30px));
  transform-style:preserve-3d;will-change:transform}
.slab{
  flex:0 0 min(400px,76vw);min-height:min(430px,52vh);
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 32px;display:flex;flex-direction:column;
  transform-style:preserve-3d;will-change:transform;
  box-shadow:0 30px 60px -44px rgba(36,16,70,.6);
}
.slab .n{font-family:var(--mono);font-size:11px;color:var(--violet);letter-spacing:.18em}
/* The graphic takes the empty upper half of the slab; h4 keeps its auto top margin so the
   copy still sits on the floor of the card however tall the artwork is. */
.slab .art{width:132px;height:auto;display:block;margin:30px 0 0}
.slab h4{font-family:var(--serif);font-weight:400;font-size:29px;letter-spacing:-.025em;
  margin:auto 0 14px}
.slab p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.65}
.slab.end{background:var(--ink);border-color:var(--ink)}
.slab.end h4{color:var(--paper)}
.slab.end p{color:rgba(247,244,239,.66)}
.slab.end .btn{background:var(--paper);color:var(--ink);align-self:flex-start;margin-top:22px}
.slab.end .btn i{background:rgba(36,16,70,.1)}

.rail-progress{position:absolute;left:max(30px,calc((100vw - 1240px) / 2 + 30px));
  right:max(30px,calc((100vw - 1240px) / 2 + 30px));bottom:52px;height:2px;background:var(--line)}
.rail-progress span{display:block;height:100%;width:0;background:var(--violet);transition:width .1s linear}

.assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.asset{background:var(--paper-2);padding:17px 19px;display:flex;align-items:center;gap:14px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.asset .tick{width:96px;height:46px;border-radius:9px;background:#fff;flex:none;
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;padding:8px 10px}
.asset .tick img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.asset .tick b{color:var(--violet-deep);font-size:11px}
.asset .nm{font-weight:600;font-size:14.5px}
.asset .sub{font-size:12px;color:var(--dim);margin-top:2px}
.asset .ltv{margin-left:auto;text-align:right}
.asset .ltv b{display:block;font-family:var(--mono);font-size:14px;color:var(--violet)}
.asset .ltv span{font-size:9.5px;color:var(--faint);font-family:var(--mono);letter-spacing:.1em}

.plain{max-width:64ch}
.plain p{color:var(--muted);line-height:1.78;font-size:16px}
.plain p b{color:var(--ink);font-weight:600}
.warn{border:1px solid rgba(190,30,70,.2);background:rgba(190,30,70,.045);border-radius:var(--r-md);
  padding:20px 22px;margin-top:26px}
.warn p{margin:0;color:#7d1236;font-size:15px;line-height:1.68}

footer{border-top:1px solid var(--line);padding:52px 0 70px;color:var(--dim);font-size:13.5px}
footer .wrap{display:flex;flex-direction:column;gap:26px}
.frow{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.flinks{display:flex;gap:24px;margin-left:auto}
.flinks a{color:var(--muted);transition:color .2s}
.flinks a:hover{color:var(--ink)}
.fnote{display:flex;gap:26px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint)}
.fnote span:last-child{margin-left:auto}

/* ------------------------------------------------------------- reveal -- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none}
  .focus li{filter:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

@media(max-width:1080px){
  .counter-grid{grid-template-columns:1fr !important}
}
@media(max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:56px 0 40px}
  .hero-art{min-height:60vh;border-radius:var(--r);overflow:hidden}
  .nav nav{display:none}
  .rail{height:340vh}
}
@media(max-width:560px){
  .split{grid-template-columns:repeat(2,1fr)}
}
/* Pinning a section hijacks the scroll, which is exactly the thing a reduced-motion
   preference is asking us not to do. So it stops being a rail and becomes a list. */
@media(prefers-reduced-motion:reduce){
  .rail{height:auto}
  .rail-sticky{position:static;height:auto;overflow:visible;padding:90px 0}
  .track{flex-wrap:wrap;transform:none !important}
  .slab{flex:1 1 300px;transform:none !important}
  .rail-progress{display:none}
}

/* ---- long-form pages: docs, terms, privacy ------------------------------------------ */
.doc{padding:76px 0 90px}
.doc .wrap{max-width:760px}
.doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,62px);
  letter-spacing:-.03em;line-height:1.04;margin:0 0 20px}
.doc .lede{font-size:18px;line-height:1.62;color:var(--muted);margin:0 0 12px;max-width:62ch}
.doc h2{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:-.02em;
  margin:46px 0 12px}
.doc p{margin:0 0 14px;font-size:15.5px;line-height:1.72;color:var(--muted)}
.doc p b{color:var(--ink);font-weight:600}
.doc table{width:100%;border-collapse:collapse;margin:20px 0 8px;font-size:14.5px}
.doc th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);padding:0 14px 10px 0}
.doc td{padding:11px 14px 11px 0;border-top:1px solid var(--line);color:var(--muted)}
.doc td:first-child{font-family:var(--mono);font-size:13.5px;color:var(--ink)}
.doc td:last-child{font-family:var(--mono);color:var(--violet);text-align:right;padding-right:0}
.doc th:last-child{text-align:right;padding-right:0}
.doc .note,.doc .warn{border-radius:var(--r-md);padding:16px 19px;margin:24px 0;
  font-size:14.5px;line-height:1.65}
.doc .note{background:var(--violet-wash);border:1px solid rgba(109,40,217,.18);color:var(--ink)}
.doc .warn{background:var(--sunken);border:1px solid var(--line)}
.doc .warn p{margin:0;color:var(--ink)}