/* ==========================================================================
   5TH WHEEL
   Visual system taken from Devin's own site: an off-white page with hard
   black bands, Instrument Sans headings set tight and heavy, Inter for
   everything else, thin outline buttons with a small radius. No uppercase
   anywhere, no accent colour, no borders drawn for decoration.
   The only thing carried over from the old site is the wheel mark.
   ========================================================================== */

:root{
  --paper:#FAFAFA;
  --paper-2:#F1F1F1;
  --ink:#000000;
  --ink-2:#1C1C1C;
  --ink-3:#2A2A2A;

  --text:#0A0A0A;
  --text-soft:#565656;
  --on-dark:#FAFAFA;
  --on-dark-soft:rgba(250,250,250,.68);
  --dim:#DCDCDC;

  --line:rgba(10,10,10,.13);
  --line-dark:rgba(250,250,250,.17);

  --display:'Instrument Sans','Inter',-apple-system,Segoe UI,sans-serif;
  --body:'Inter',-apple-system,Segoe UI,Helvetica,Arial,sans-serif;

  --r:6px;
  --gutter:clamp(20px,5vw,56px);
  --maxw:1280px;
  --pad-sec:clamp(62px,8.5vw,132px);
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.475;
  letter-spacing:-0.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-0.04em;
  line-height:1.03;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(38px,6.6vw,86px)}
h2{font-size:clamp(29px,4.1vw,54px)}
h3{font-size:clamp(20px,2.1vw,26px);line-height:1.12}
h4{font-size:19px;line-height:1.15}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--on-dark);padding:12px 18px;border-radius:0 0 var(--r) 0;
}
.skip:focus{left:0}

a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ==========================================================================
   SHARED PIECES
   ========================================================================== */

.label{
  display:block;font-family:var(--body);font-size:13.5px;font-weight:500;
  letter-spacing:-0.01em;color:var(--text-soft);margin-bottom:14px;
}
.lede{font-size:clamp(17px,1.5vw,19.5px);color:var(--text-soft);max-width:60ch}
.lede--gap{margin-bottom:clamp(20px,2.6vw,32px)}

.sec{padding-block:var(--pad-sec)}
.sec--tint{background:var(--paper-2)}
.sec-head{margin-bottom:clamp(26px,3.6vw,46px);max-width:72ch}
.sec-head h2{margin-bottom:16px}

.band--night{background:var(--ink);color:var(--on-dark);padding-block:var(--pad-sec)}
.band--night h2,.band--night h3{color:var(--on-dark)}
.band--night .label{color:var(--on-dark-soft)}
.band--night .lede{color:var(--on-dark-soft)}

.band{background:var(--paper-2);padding-block:clamp(40px,6vw,76px)}
.band--card{background:var(--ink-2)}
.lockup{display:flex;justify-content:center}

/* ---- buttons: Devin's outline style, plus one solid for the real CTA ---- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--body);font-size:16px;font-weight:500;letter-spacing:-0.02em;
  padding:13px 22px;border-radius:var(--r);border:1px solid var(--ink);
  background:var(--ink);color:var(--on-dark);text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease,opacity .16s ease;
}
.btn:hover,.btn:focus-visible{background:var(--ink-3);border-color:var(--ink-3)}
.btn--out{background:transparent;color:var(--text);border-color:rgba(10,10,10,.3)}
.btn--out:hover,.btn--out:focus-visible{background:transparent;border-color:var(--ink);color:var(--text)}
.btn--sm{font-size:14.4px;padding:9px 17px}
.btn--hero{font-size:17px;padding:15px 28px}
.btn-arrow{font-size:1.05em;line-height:0}

/* on dark ground the solid button inverts, the outline goes light */
.site-header .btn,.band--night .btn,.hero--dark .btn,.photo-band .btn,.signup .btn,.band--card .btn{
  background:var(--on-dark);color:var(--ink);border-color:var(--on-dark);
}
.site-header .btn:hover,.band--night .btn:hover,.hero--dark .btn:hover,.photo-band .btn:hover,.signup .btn:hover{
  background:#fff;border-color:#fff;
}
.band--night .btn--out,.hero--dark .btn--out,.photo-band .btn--out{
  background:transparent;color:var(--dim);border-color:var(--dim);
}
.band--night .btn--out:hover,.hero--dark .btn--out:hover,.photo-band .btn--out:hover{
  background:rgba(250,250,250,.08);color:#fff;border-color:#fff;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header{background:var(--ink);color:var(--on-dark)}
.header-row{display:flex;align-items:center;gap:24px;min-height:62px;padding-block:11px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--on-dark);margin-right:auto}
.brand-name{
  display:block;font-family:var(--display);font-size:19px;font-weight:700;
  letter-spacing:-0.04em;line-height:1.05;
}
.brand-sub{display:block;font-size:12.5px;color:var(--on-dark-soft);letter-spacing:-0.01em;line-height:1.3}

.nav-toggle{
  display:none;align-items:center;gap:8px;background:none;border:0;cursor:pointer;
  color:var(--on-dark);font-family:var(--body);font-size:15px;letter-spacing:-0.02em;padding:8px 2px;
}
.nav-toggle svg{width:22px;height:22px}

.nav-list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav-list a{
  color:var(--on-dark-soft);text-decoration:none;font-size:14.4px;letter-spacing:-0.02em;
  transition:color .15s ease;
}
.nav-list a:hover,.nav-list a:focus-visible,.nav-list a[aria-current="page"]{color:var(--on-dark)}
.nav-list .btn--nav{color:var(--ink)}
.nav-list .btn--nav:hover{color:var(--ink)}

/* ---- the launch strip above the header ---- */
.ks-strip{background:var(--paper);color:var(--text);border-bottom:1px solid var(--line)}
.ks-strip .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;
  padding-block:11px;font-size:14px;letter-spacing:-0.02em;text-align:center;
}
.ks-strip b{font-weight:600}
.ks-strip a{color:var(--text)}

/* ==========================================================================
   LOGO
   Two masked layers on one drawing area, traced from Devin's artwork, so the
   wheel can turn on its own and both halves take the colour around them.
   ========================================================================== */

/* The nav and footer use the original artwork, flipped to white because both
   bars are black. The centre dot has been erased from the PNG files
   themselves, so nothing here has to work around it. */
.brand-mark{display:block;height:34px;width:auto;flex:none;filter:brightness(0) invert(1)}
.foot-lockup{
  display:block;width:clamp(150px,19vw,205px);height:auto;max-width:100%;
  filter:brightness(0) invert(1);
}

/* ---- the animated lockup --------------------------------------------
   The original clip, unchanged apart from two things: it never plays sound,
   and the black dot in the middle of the hub is covered over. It is a
   transparent WebM of dark artwork, so it sits on a light band rather than
   over the photo, which is where it was before.
   ---------------------------------------------------------------------- */
.logo-band{background:var(--paper);padding-block:clamp(36px,5.5vw,70px)}
.logo-band .wrap{display:flex;justify-content:center}
.logo-stage{position:relative;display:inline-block;line-height:0;max-width:100%}
.hero-logo{display:block;width:min(540px,80vw);height:auto;max-width:100%}
.hero-logo--still{width:min(330px,62vw)}

/* The hub dot sits dead centre of the wheel and does not move for the whole
   clip, so a disc of the band colour in the same place takes it out.
   Measured off the frame: 53.60% across, 49.07% down, 0.55% of the width
   wide. This is wider than that, and still well inside the ring around it. */
.logo-stage .hub-patch{
  position:absolute;left:53.6%;top:49.07%;width:1.4%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--paper);
}
/* the still lockup, used on the investor page banner */
.lockup-img{display:block;width:clamp(200px,30vw,340px);height:auto;max-width:100%;filter:brightness(0) invert(1)}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{position:relative;isolation:isolate}
/* content sits low in the frame so the film is the thing you see first */
.hero--dark{background:var(--ink);color:var(--on-dark);display:flex;align-items:flex-end;min-height:min(92vh,900px)}
.hero--dark h1,.hero--dark h2{color:var(--on-dark)}
/* the hero film fills the whole band behind the headline, the way Devin's did */
.hero-photo{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
  pointer-events:none;border:0;background:var(--ink);
}
/* Light at the top so the footage reads, heavier only down where the words
   are. The headline carries a shadow as well, so the gradient does not have
   to be dark enough to kill the picture. */
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(0,0,0,.26) 0%,
    rgba(0,0,0,.12) 26%,
    rgba(0,0,0,.34) 56%,
    rgba(0,0,0,.72) 100%);
}
/* a big top pad and a small bottom one puts the whole block low in the film */
.hero--dark .wrap{width:100%;padding-block:clamp(130px,22vw,300px) clamp(44px,5.5vw,76px)}
.hero--center{text-align:center}
.hero--center h1{
  margin:0 auto;max-width:22ch;
  font-size:clamp(33px,5vw,66px);line-height:1.1;
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.hero-sub{
  margin:clamp(18px,2.2vw,26px) auto 0;max-width:52ch;
  font-size:clamp(16.5px,1.5vw,19px);color:rgba(255,255,255,.88);
  text-shadow:0 1px 16px rgba(0,0,0,.6);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:clamp(24px,3vw,34px)}
.hero--center .hero-cta{justify-content:center}
.slash{opacity:.42}

/* ---- countdown ---- */
.countdown{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.8vw,30px)}
.hero--dark .cd{
  border-color:rgba(255,255,255,.3);background:rgba(0,0,0,.28);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.hero--center .countdown,.signup .countdown{justify-content:center}
.cd{
  min-width:84px;padding:11px 14px 9px;text-align:center;
  border:1px solid var(--line-dark);border-radius:var(--r);
}
.cd b{display:block;font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-0.04em;line-height:1}
.cd span{display:block;font-size:12px;color:var(--on-dark-soft);margin-top:5px;letter-spacing:-0.01em}
.sec .cd{border-color:var(--line)}
.sec .cd span{color:var(--text-soft)}

/* ---- the stat row ---- */
.ribbon{background:var(--ink-2);color:var(--on-dark)}
.ribbon--bar{
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw);margin:0 auto;padding:clamp(26px,3.4vw,40px) var(--gutter);gap:18px;
}
.ribbon--bar div{display:flex;flex-direction:column;gap:5px}
.ribbon--bar b{font-family:var(--display);font-size:clamp(24px,2.8vw,34px);font-weight:700;letter-spacing:-0.04em;line-height:1}
.ribbon--bar span{font-size:13.5px;color:var(--on-dark-soft);letter-spacing:-0.01em}

/* ==========================================================================
   CONTENT BLOCKS
   ========================================================================== */

/* a centred section: the claim loses its left rule, since a rule down one
   side of centred text reads as a mistake */
.sec--center{text-align:center}
.sec--center .sec-head{margin-inline:auto}
.sec--center .lede{margin-inline:auto}
.sec--center .claim{border-left:0;padding-left:0;margin-inline:auto}
.sec--center .hero-cta{justify-content:center}

.claim{max-width:62ch;margin-top:clamp(14px,2vw,22px)}
.claim p{font-size:clamp(19px,2.2vw,26px);line-height:1.32;letter-spacing:-0.025em;color:var(--text)}

/* ---- two up ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,70px);align-items:center}
.split-media{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
/* height follows the picture, not the column beside it, so a portrait shot is
   not cropped down to a letterbox by whatever length the copy happens to be */
.split-media img{display:block;width:100%;height:auto}

.feat-list{list-style:none;margin:clamp(20px,2.6vw,30px) 0 0;padding:0;display:grid;gap:20px}
.feat-list li{display:flex;gap:14px;align-items:flex-start}
.feat-ico{
  flex:none;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:var(--r);
}
.feat-ico svg{width:18px;height:18px}
.feat-list b{display:block;font-weight:600;letter-spacing:-0.025em;margin-bottom:3px}
.feat-list p{font-size:15.5px;color:var(--text-soft);margin:0}
.band--night .feat-ico{border-color:var(--line-dark)}
.band--night .feat-list p{color:var(--on-dark-soft)}

/* ---- shop ------------------------------------------------------------- */
.products{display:grid;gap:clamp(20px,3vw,40px)}
.product{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,44px);align-items:center;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);
}
/* the figure stretches to the row rather than being given a percentage height,
   which left it zero-high at first layout */
.product{align-items:stretch}
.product-media{margin:0;line-height:0;background:var(--ink-2);display:flex}
.product-media img{display:block;width:100%;height:auto;min-height:280px;object-fit:cover;flex:1}
.product-body{display:flex;flex-direction:column;justify-content:center}
.product-body{padding:clamp(20px,3vw,40px) clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0}
.product-body h3{margin:0 0 6px;font-size:clamp(24px,3vw,34px)}
.product-price{
  font-family:var(--body);font-size:14px;color:var(--text-soft);
  margin:0 0 16px;letter-spacing:-0.01em;
}
.product-body p{font-size:15.5px;color:var(--text-soft)}
.product-tag{color:var(--text) !important;font-weight:500}
.product-body .btn{margin-top:8px}
@media (max-width:760px){
  .product{grid-template-columns:1fr}
  .product-media img{min-height:0;aspect-ratio:4/3}
  .product-body{padding:clamp(18px,4vw,26px)}
}

/* ---- the install clip -------------------------------------------------
   Portrait phone footage, so it is set beside the copy rather than across
   the page. It is 19 MB, which is why nothing is preloaded beyond the
   metadata: the file is only fetched when somebody presses play. */
.watch{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:center;
}
.watch h2{margin-bottom:16px}
.watch-media{margin:0;border-radius:var(--r);overflow:hidden;background:#000;line-height:0}
.watch-media video{display:block;width:100%;height:auto}
.watch-body h3{margin:0 0 12px}
.watch-body p{color:var(--on-dark-soft);font-size:16px;max-width:52ch}
.watch-note{font-size:14px !important;opacity:.62;margin-top:14px}
@media (max-width:760px){
  .watch{grid-template-columns:1fr}
  .watch-media{max-width:300px;margin-inline:auto}
}

/* ---- three up ---- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px)}
.trio article{display:flex;flex-direction:column}
.trio-media{border-radius:var(--r);overflow:hidden;background:var(--ink-2);aspect-ratio:4/3}
.trio-media img{display:block;width:100%;height:100%;object-fit:cover}
.trio-body{padding-top:18px}
.trio-body .n{
  display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;
  background:var(--ink);color:var(--paper);margin-bottom:12px;
  font-size:13.5px;font-weight:600;letter-spacing:0;line-height:1;
}
.band--night .trio-body .n{background:var(--on-dark);color:var(--ink)}
.trio-body h3{margin:0 0 8px}
.trio-body p{font-size:15.5px;color:var(--text-soft);margin:0}
.band--night .trio-body p{color:var(--on-dark-soft)}

/* ---- cards that send you to the other pages ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper);
  transition:border-color .16s ease,transform .16s ease;
}
.card:hover,.card:focus-visible{border-color:var(--ink);transform:translateY(-2px)}
.card-media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}
.card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{display:block;padding:clamp(18px,2.2vw,26px)}
.card-body h3{margin:0 0 9px}
.card-body p{font-size:15.5px;color:var(--text-soft);margin:0}

/* ---- the closing call to action on the inner pages ---- */
.cta-band{text-align:center}
.cta-band .label{margin-inline:auto}
.cta-band h2{margin-bottom:6px}
.cta-band .hero-cta,.cta-band .countdown{justify-content:center}

/* ---- contact details ---- */
.contact-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.contact-cols h3{margin-bottom:10px}
.contact-cols p{color:var(--text-soft);margin:0}

/* ---- photo grid ---- */
.gallery{
  display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;
  grid-auto-rows:clamp(130px,17vw,215px);gap:clamp(8px,1vw,12px);
  margin-top:clamp(26px,3.4vw,42px);
}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink-2)}
.gallery img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.gallery figure:hover img{transform:scale(1.035)}
.gallery .tall{grid-row:span 2}
.gallery .wide{grid-column:span 2}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 15px 12px;color:#fff;
  font-size:13.5px;letter-spacing:-0.02em;
  background:linear-gradient(to top,rgba(0,0,0,.74),transparent);
}

/* ---- full bleed photo band ---- */
.photo-band{
  position:relative;min-height:clamp(340px,50vw,580px);
  display:grid;place-items:center;overflow:hidden;color:var(--on-dark);
}
.photo-band img,.photo-band .band-film{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;border:0;background:var(--ink);
}
.photo-band .scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.56) 48%,rgba(0,0,0,.14) 100%),
    linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 44%);
}
.photo-band .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(44px,6vw,80px)}
.photo-band h2{color:var(--on-dark);max-width:17ch;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.photo-band .lede,.photo-band .label{text-shadow:0 1px 14px rgba(0,0,0,.6)}
.photo-band .label{color:var(--on-dark-soft)}
.photo-band .lede{color:var(--on-dark-soft);max-width:50ch;margin-top:16px}

/* ---- spec cards and table ---- */
.spec-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:clamp(10px,1.3vw,16px);margin-top:clamp(22px,3vw,34px);
}
.spec-card{border:1px solid var(--line);border-radius:var(--r);padding:20px}
.spec-card b{display:block;font-family:var(--display);font-size:clamp(27px,3.3vw,38px);font-weight:700;letter-spacing:-0.04em;line-height:1}
.spec-card span{display:block;font-size:13.5px;color:var(--text-soft);margin-top:9px;letter-spacing:-0.01em}
.spec-card p{font-size:14.5px;color:var(--text-soft);margin:11px 0 0}
.band--night .spec-card{border-color:var(--line-dark)}
.band--night .spec-card span,.band--night .spec-card p{color:var(--on-dark-soft)}

.table-scroll{overflow-x:auto;margin-top:clamp(22px,3vw,34px);border:1px solid var(--line);border-radius:var(--r)}
.spec-table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:560px}
.spec-table caption{
  caption-side:bottom;text-align:left;font-size:13.5px;color:var(--text-soft);
  padding:14px 18px;border-top:1px solid var(--line);
}
.spec-table th,.spec-table td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line)}
.spec-table thead th{font-weight:600;font-size:13.5px;color:var(--text-soft)}
.spec-table tbody th{font-weight:500}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:0}

/* ==========================================================================
   STORY
   ========================================================================== */

.founder-grid{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1fr);gap:clamp(28px,4.4vw,66px);align-items:start}
.portrait{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2);position:sticky;top:30px}
.portrait img{display:block;width:100%;height:auto}
.founder-role{display:block;font-size:13.5px;color:var(--text-soft);margin-bottom:18px;letter-spacing:-0.01em}
.pullquote{
  margin:clamp(26px,3.4vw,40px) 0 0;padding:0 0 0 clamp(18px,2.4vw,28px);
  border-left:2px solid var(--ink);
  font-family:var(--display);font-size:clamp(21px,2.5vw,30px);font-weight:700;
  letter-spacing:-0.04em;line-height:1.14;
}
.pullquote cite{
  display:block;margin-top:16px;font-family:var(--body);font-size:14px;font-weight:400;
  font-style:normal;color:var(--text-soft);letter-spacing:-0.01em;
}

.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,66px);align-items:center}
.shot-wide{margin:0;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.shot-wide img{display:block;width:100%;height:auto}
.mission-grid .btn{margin-top:8px}

.journey-scroll{overflow-x:auto;margin-top:clamp(24px,3.2vw,38px)}
.journey{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:clamp(14px,2vw,24px);list-style:none;margin:0;padding:0 0 6px}
.jr{position:relative;padding-top:26px}
.jr::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line)}
.jr-dot{position:absolute;top:1px;left:0;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.jr-box b{display:block;font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-0.04em}
.jr-box span{display:block;font-size:13.5px;color:var(--text-soft);margin:5px 0 9px;letter-spacing:-0.01em}
.jr-box p{font-size:15px;color:var(--text-soft);margin:0}

/* ==========================================================================
   FORM
   ========================================================================== */

.signup{
  background:var(--ink);color:var(--on-dark);border-radius:var(--r);
  padding:clamp(28px,4.4vw,62px);
}
.signup h2{color:var(--on-dark);margin-bottom:14px}
.signup .label{color:var(--on-dark-soft)}
.signup .lede{color:var(--on-dark-soft)}
.signup .form-note{font-size:13.5px;color:rgba(250,250,250,.5);margin-top:20px;max-width:70ch}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:clamp(22px,3vw,32px) 0 22px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1 / -1}
.field label{font-size:13.5px;color:var(--on-dark-soft);letter-spacing:-0.01em}
.field input,.field select,.deck-card textarea{
  font-family:var(--body);font-size:16px;letter-spacing:-0.02em;color:var(--on-dark);
  background:rgba(250,250,250,.06);border:1px solid var(--line-dark);border-radius:var(--r);
  padding:12px 14px;width:100%;
}
.field input::placeholder{color:rgba(250,250,250,.4)}
.field input:focus,.field select:focus,.deck-card textarea:focus{
  outline:none;border-color:var(--on-dark);background:rgba(250,250,250,.1);
}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.field select option{color:#111;background:#fff}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-msg{margin-top:14px;font-size:15px;display:none}
.form-msg.show{display:block}
.form-msg.ok{color:#8FE3B0}
.form-msg.err{color:#FF9F9F}

/* ==========================================================================
   SOCIAL
   ========================================================================== */

/* Each tile takes its platform's own colour on hover. The colours only ever
   appear on hover, so the page at rest stays the two-tone thing Devin's site
   is, and the brand colours do the work of telling the six apart. */
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.3vw,16px);margin-top:clamp(24px,3.2vw,38px)}
.social-card{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;gap:15px;text-decoration:none;color:inherit;
  border:1px solid var(--line-dark);border-radius:12px;padding:18px 20px;
  transition:border-color .2s ease,transform .2s ease;
  --net:rgba(250,250,250,.1);--net-fg:#fff;
}
.social-card::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--net);
  opacity:0;transition:opacity .22s ease;
}
.social-card:hover,.social-card:focus-visible{border-color:transparent;transform:translateY(-2px);color:var(--net-fg)}
.social-card:hover::before,.social-card:focus-visible::before{opacity:1}

.social-ico{
  flex:none;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  border:1px solid var(--line-dark);transition:border-color .2s ease,background .2s ease;
}
.social-card:hover .social-ico{border-color:currentColor;background:rgba(0,0,0,.12)}
.social-ico svg{width:23px;height:23px;fill:currentColor}

.social-txt{display:block;min-width:0}
.social-txt b{display:block;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-0.035em}
.social-txt span{display:block;font-size:13.5px;opacity:.66;letter-spacing:-0.01em;margin-top:1px}

.social-go{
  margin-left:auto;flex:none;font-size:17px;line-height:1;opacity:.4;
  transition:opacity .2s ease,transform .2s ease;
}
.social-card:hover .social-go{opacity:1;transform:translate(3px,-3px)}

.social-card[data-net="instagram"]{--net:linear-gradient(135deg,#F9CE34 0%,#EE2A7B 52%,#6228D7 100%)}
.social-card[data-net="tiktok"]   {--net:linear-gradient(135deg,#25F4EE 0%,#111 48%,#FE2C55 100%)}
.social-card[data-net="youtube"]  {--net:#FF0033}
.social-card[data-net="facebook"] {--net:#1877F2}
.social-card[data-net="x"]        {--net:#FAFAFA;--net-fg:#0A0A0A}
.social-card[data-net="snapchat"] {--net:#FFFC00;--net-fg:#0A0A0A}

/* the footer row picks up the same colours, at pill size */
.socials a[data-net]:hover,.socials a[data-net]:focus-visible{
  background:var(--net);border-color:transparent;color:var(--net-fg);
}
.socials a[data-net="instagram"]{--net:linear-gradient(135deg,#F9CE34,#EE2A7B 52%,#6228D7);--net-fg:#fff}
.socials a[data-net="tiktok"]   {--net:linear-gradient(135deg,#25F4EE,#111 48%,#FE2C55);--net-fg:#fff}
.socials a[data-net="youtube"]  {--net:#FF0033;--net-fg:#fff}
.socials a[data-net="facebook"] {--net:#1877F2;--net-fg:#fff}
.socials a[data-net="x"]        {--net:#FAFAFA;--net-fg:#0A0A0A}
.socials a[data-net="snapchat"] {--net:#FFFC00;--net-fg:#0A0A0A}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer{background:var(--ink);color:var(--on-dark);padding-block:clamp(48px,6.5vw,86px);text-align:center}
.foot-mark{display:flex;flex-direction:column;align-items:center}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:clamp(28px,3.6vw,40px)}
.socials a{
  font-size:14px;letter-spacing:-0.02em;color:var(--dim);text-decoration:none;
  border:1px solid var(--line-dark);border-radius:var(--r);padding:9px 16px;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.socials a:hover,.socials a:focus-visible{background:rgba(250,250,250,.08);border-color:var(--on-dark);color:#fff}
.foot-fine{font-size:13.5px;line-height:1.85;color:rgba(250,250,250,.46);margin-top:clamp(26px,3.4vw,38px)}
.foot-fine a{color:rgba(250,250,250,.62)}

/* ==========================================================================
   INVESTORS
   ========================================================================== */

.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,66px);align-items:start}
.inv-col{display:flex;flex-direction:column}
.inv-title{font-size:clamp(24px,3vw,36px);margin:0 0 14px}
.inv-h{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-0.04em;margin:28px 0 12px}
.inv-col .inv-h:first-child{margin-top:0}
.inv-p{color:var(--text-soft);margin-bottom:18px}
.inv-bottom{margin-top:clamp(34px,4.6vw,66px)}

.chart-card{border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,28px);margin:0}
.chart-title{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-0.04em;margin-bottom:16px}
.chart svg{display:block;width:100%;height:auto}
.chart-src{font-size:13px;color:var(--text-soft);margin-top:14px}

.inv-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:26px}
.inv-stats div{display:flex;flex-direction:column;gap:5px}
.inv-stats b{font-family:var(--display);font-size:clamp(24px,2.8vw,32px);font-weight:700;letter-spacing:-0.04em;line-height:1}
.inv-stats span{font-size:13.5px;color:var(--text-soft);letter-spacing:-0.01em}

.roadmap{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.roadmap li{padding-left:20px;position:relative}
.roadmap li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.roadmap b{display:block;font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-0.04em}
.roadmap span{display:block;font-size:13.5px;color:var(--text-soft);margin:3px 0 6px;letter-spacing:-0.01em}
.roadmap p{font-size:15px;color:var(--text-soft);margin:0}

.deck-card{background:var(--ink);color:var(--on-dark);border-radius:var(--r);padding:clamp(22px,3.2vw,36px)}
.deck-card h3{color:var(--on-dark);margin-bottom:10px}
.deck-card > p{color:var(--on-dark-soft);font-size:15.5px}
.deck-card .field{margin-top:14px}
.deck-card textarea{min-height:110px;resize:vertical}
.deck-card .btn{margin-top:18px;background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.deck-card .form-note{font-size:13px;color:rgba(250,250,250,.5);margin-top:14px}

/* ==========================================================================
   404 AND THE OLD REVIEW PAGE
   ========================================================================== */

.nf{padding-block:clamp(80px,14vw,180px);text-align:center}
.nf h1{font-size:clamp(68px,13vw,150px)}
.nf p{color:var(--text-soft);margin:18px 0 28px}

.preview-bar{background:var(--ink-2);color:var(--on-dark);font-size:14px}
.preview-bar .wrap{display:flex;flex-wrap:wrap;gap:6px 14px;padding-block:10px;align-items:center}
.preview-bar a{color:var(--dim)}
.decs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px}
.dec{border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:9px}
.dec--risk{border-color:rgba(10,10,10,.34)}
.dec__who{font-size:13px;color:var(--text-soft);letter-spacing:-0.01em}
.dec h3{font-size:19px}
.dec p{font-size:15px;color:var(--text-soft);margin:0}
.dec code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13.5px;background:var(--paper-2);padding:1px 5px;border-radius:3px}
.dec__why{font-size:14px;color:var(--text-soft)}

[hidden]{display:none !important}

/* ==========================================================================
   NARROWER SCREENS
   ========================================================================== */

@media (max-width:980px){
  .split,.mission-grid,.founder-grid,.inv-grid{grid-template-columns:1fr}
  .portrait{position:static;max-width:460px}
  .trio{grid-template-columns:1fr}
  .trio-media{aspect-ratio:16/9}
  .ribbon--bar{grid-template-columns:repeat(2,1fr);gap:22px}
  .social-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .decs{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .card-media{aspect-ratio:16/9}
  .contact-cols{grid-template-columns:1fr}
}

@media (max-width:760px){
  .nav-toggle{display:inline-flex}
  .nav{display:none;width:100%}
  .nav.open{display:block}
  .header-row{flex-wrap:wrap;gap:12px}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding-bottom:10px}
  .nav-list li{border-top:1px solid var(--line-dark)}
  .nav-list a{display:block;padding:14px 2px;font-size:17px}
  .nav-list .btn--nav{display:inline-flex;margin-top:12px;justify-content:center;width:100%}
  .nav-list li:has(.btn--nav){border-top:0}

  .form-grid{grid-template-columns:1fr}
  .hero-cta .btn{width:100%;justify-content:center}
  .photo-band .scrim{background:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.86) 58%)}
  .photo-band h2,.photo-band .lede{max-width:none}
}

@media (max-width:620px){
  .ks-strip .wrap{font-size:13px;padding-block:9px;gap:2px 12px}
  .countdown{gap:7px}
  .cd{min-width:0;flex:1 1 0;padding:9px 6px 8px}
  .cd b{font-size:25px}
  .cd span{font-size:11px}
  .hero--dark{min-height:0}
  .gallery{grid-auto-rows:clamp(112px,30vw,164px)}
  .gallery figcaption{font-size:12px;padding:20px 11px 9px}
  .social-grid{grid-template-columns:1fr}
  .journey{grid-template-columns:repeat(4,minmax(165px,1fr))}
}