/* Deploy 59: self-hosted fonts (Latin subset, upright). The fallback face is size-matched to Archivo so text does not reflow when it arrives. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo-100-900.4c98b9d4.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.c36f509c.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-600.ad4580d8.woff2) format('woff2')}
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:99%;ascent-override:92%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Plex Mono Fallback';src:local('Menlo'),local('Consolas'),local('Courier New');size-adjust:100%}
/* iMPACT Pickleball · impactpaddle.com
   Design system · Marquee & Co.
   Type: Archivo (variable width/weight) + IBM Plex Mono for spec data
   Palette: carbon black, court chalk, iMPACT cobalt. Burn orange is reserved
   exclusively for CourtFull cross-references. */

:root{
  --carbon:#0A0B0D;
  --carbon-2:#131519;
  --chalk:#F4F5F2;
  --white:#FFFFFF;
  --blue:#2E5BEA;
  --blue-deep:#1B3FB8;
  --blue-bright:#4D77FF;
  --burn:#E8541F;
  --burn-deep:#B23407;
  --steel:#9BA1AB;
  --ink:#15181C;
  --ink-soft:#565C64;
  --line-d:#23262B;
  --line-l:#DFE2DD;
  --radius:4px;
  --max:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--carbon);overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  background:var(--carbon);color:var(--chalk);
  font-family:'Archivo','Archivo Fallback',system-ui,sans-serif;
  font-size:16.5px;line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(18px,4.5vw,44px)}

/* ---------- type ---------- */
.display{
  font-weight:900;font-stretch:118%;text-transform:uppercase;
  line-height:.94;letter-spacing:.005em;
}
h1.display{font-size:clamp(33px,7.6vw,108px)}
h2.display{font-size:clamp(30px,4.6vw,58px)}
h3{font-weight:800;font-size:18px;letter-spacing:.01em;margin-bottom:8px}
.eyebrow{
  font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--blue-bright);
  margin-bottom:14px;display:block;
}
.light .eyebrow{color:var(--blue)}
.lede{font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:var(--steel);max-width:62ch}
.light .lede{color:var(--ink-soft)}
.mono{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace}

/* ---------- nav ---------- */
header.site{
  position:sticky;top:0;z-index:60;background:rgba(10,11,13,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line-d);
}
.navrow{display:flex;align-items:center;gap:26px;padding:15px 0}
.navlogo{display:flex;align-items:center;gap:11px;text-decoration:none}
.navlogo img{width:34px;height:auto;filter:invert(1)}
.navlogo b{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:17px;letter-spacing:.03em}
.navlogo b i{font-style:normal;color:var(--blue-bright)}
.navspacer{flex:1}
.navlinks{display:flex;gap:18px;align-items:center}
/* The row fits on one line at every desktop width once the items are allowed
   to keep their words together. Without this the flex row breaks each label at
   its narrowest word and the header doubles in height. */
.navlinks > a{white-space:nowrap}
.navlinks a{
  font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  text-decoration:none;color:var(--chalk);opacity:.85;padding:6px 0;
  border-bottom:2px solid transparent;
}
.navlinks a:hover{opacity:1;border-bottom-color:var(--chalk)}
.navlinks a.active{opacity:1;border-bottom-color:var(--blue-bright)}
.navlinks .btn{border-bottom:none}
#navtoggle{display:none;background:none;border:1px solid var(--line-d);color:var(--chalk);
  padding:8px 12px;border-radius:var(--radius);font-family:inherit;font-weight:700;cursor:pointer}
@media (max-width:960px){
  #navtoggle{display:block}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--carbon);
    flex-direction:column;align-items:stretch;padding:8px clamp(18px,4.5vw,44px) 16px;
    gap:4px;border-bottom:1px solid var(--line-d)}
  .navlinks a{display:flex;align-items:center;min-height:44px;padding:6px 0}
  .navlinks a.btn{justify-content:center;margin-top:8px;padding:15px 28px}
  /* The active marker is a border-bottom. Stretched to the full menu width it
     reads as a divider rather than as a marker, so it is drawn under the text
     only. */
  .navlinks a:not(.btn){border-bottom:none;position:relative}
  .navlinks a:not(.btn)::after{content:"";position:absolute;left:0;bottom:6px;height:2px;
    width:0;background:var(--blue-bright);transition:width .15s}
  .navlinks a.active:not(.btn)::after{width:2.2em}
  .navlinks.open{display:flex}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:'Archivo','Archivo Fallback',sans-serif;font-weight:800;font-size:14.5px;
  letter-spacing:.05em;text-transform:uppercase;padding:15px 28px;
  border-radius:var(--radius);text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;transition:background .15s,color .15s,border-color .15s;
}
.btn.blue{background:var(--blue);color:#fff}
.btn.blue:hover{background:var(--blue-deep)}
.btn.chalk{background:var(--chalk);color:var(--carbon)}
.btn.chalk:hover{background:#fff}
.btn.ghost{background:transparent;color:var(--chalk);border-color:var(--chalk)}
.btn.ghost:hover{background:var(--chalk);color:var(--carbon)}
.light .btn.ghost{color:var(--ink);border-color:var(--ink)}
.light .btn.ghost:hover{background:var(--ink);color:#fff}
.btn.burnbtn{background:var(--burn-deep);color:#fff}
.btn.burnbtn:hover{background:#8F2905}
.btn:focus-visible,a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue-bright);outline-offset:2px}

/* ---------- sections ---------- */
section.band{padding:clamp(52px,7vw,92px) 0;background:var(--carbon)}
.band.light{background:var(--chalk);color:var(--ink)}
.band.dark2{background:var(--carbon-2)}
section.band.tight{padding:clamp(40px,5vw,64px) 0}
.light{background:var(--chalk);color:var(--ink)}
.dark2{background:var(--carbon-2)}
.rule{border:none;border-top:1px solid var(--line-d)}
.light .rule{border-top-color:var(--line-l)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--carbon);padding:clamp(48px,4.5vw,68px) 0 clamp(56px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,64px);align-items:center}
/* The paddle is much taller than the copy, so centering the two columns left a
   large gap above the eyebrow. Top aligning the copy on desktop lifts it
   without changing the paddle size. */
@media (min-width:881px){.hero-grid{align-items:start}.hero-grid > div:first-child{padding-top:clamp(8px,2.5vw,34px)}}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr}.hero-img img.cutout{height:auto !important;width:min(78%,340px) !important;margin:0 auto}}
.hero-img{position:relative}
.hero-photo{display:block;position:relative;width:min(100%,520px);justify-self:end;text-align:center}
.hero-photo img{display:block;width:100%;height:auto;margin:0 auto;border-radius:var(--radius);border:1px solid var(--line-d);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.hero-photo figcaption.hero-tag{position:static;display:inline-flex;margin-top:14px;left:auto;right:auto;bottom:auto;transform:none}
.hero-grid.hero-grid-photo{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.hero-photo .hero-tag{position:static;display:inline-flex;margin-top:14px}
.hero-grid-photo h1.display{font-size:clamp(32px,4.6vw,64px)}
@media (max-width:880px){.hero-grid.hero-grid-photo{grid-template-columns:1fr}.hero-photo{width:min(100%,420px);justify-self:center;margin-top:8px}}
.hero-note{margin-top:22px;color:var(--steel);font-size:14.5px;line-height:1.6;max-width:56ch}
.hero-note a{color:var(--blue-bright);text-decoration:underline;text-underline-offset:3px}
.hero-img img{border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.hero-tag{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:rgba(20,23,29,.85);color:var(--steel);border:1px solid var(--line-d);
  font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;padding:8px 13px;border-radius:999px;
}
.hero-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue-bright);flex:none}
.hero-img{display:flex;flex-direction:column;align-items:center}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* ---------- spec strip ---------- */
.specstrip{border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);background:var(--carbon-2)}
.specstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.spec{
  padding:26px 22px;border-left:1px solid var(--line-d);
}
.spec:first-child{border-left:none}
.spec b{font-weight:900;font-stretch:118%;font-size:clamp(22px,2.6vw,34px);display:block;line-height:1.1}
.spec span{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
@media (max-width:760px){
  .specstrip .wrap{grid-template-columns:1fr 1fr}
  .spec:nth-child(3){border-left:none}
}

/* ---------- cards / grids ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.5vw,44px)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,30px)}
@media (max-width:880px){.grid2,.grid3{grid-template-columns:1fr}}
.card{
  border:1px solid var(--line-d);border-radius:var(--radius);
  padding:26px;background:var(--carbon-2);
}
.light .card{border-color:var(--line-l);background:#fff}
.card .mono-h{
  font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:12px;display:block;
}
.light .card .mono-h{color:var(--blue)}
.card p{color:var(--steel);font-size:15.5px}
.light .card p{color:var(--ink-soft)}

/* ---------- process rows ---------- */
.prow{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--line-d)}
.light .prow{border-top-color:var(--line-l)}
.prow:last-of-type{border-bottom:1px solid var(--line-d)}
.light .prow:last-of-type{border-bottom-color:var(--line-l)}
.prow .pnum{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--blue-bright);padding-top:3px}
.light .prow .pnum{color:var(--blue)}
.prow p{color:var(--steel);max-width:62ch}
.light .prow p{color:var(--ink-soft)}
@media (max-width:640px){.prow{grid-template-columns:1fr;gap:6px}}

/* ---------- courtfull band ---------- */
section.band.cf-band{background:#F5F6F3;color:#191D1B;border-top:6px solid var(--burn)}
.cf-band .eyebrow{color:var(--burn-deep)}
.cf-band .lede{color:#5A615D}
.cf-band .card{border-color:#DDE1DC;background:#fff}
.cf-band .card .mono-h{color:var(--burn-deep)}
.cf-band .card p{color:#5A615D}

/* ---------- forms ---------- */
form .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:640px){form .frow{grid-template-columns:1fr}}
label.f{display:block;font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:7px}
.light label.f{color:var(--ink-soft)}
input.f,select.f,textarea.f{
  width:100%;padding:13px 14px;border:1px solid var(--line-d);border-radius:var(--radius);
  background:var(--carbon);color:var(--chalk);font-family:'Archivo','Archivo Fallback',sans-serif;font-size:15.5px;
}
.light input.f,.light select.f,.light textarea.f{background:#fff;color:var(--ink);border-color:var(--line-l)}
textarea.f{min-height:120px;resize:vertical}
.hint{font-size:13px;color:var(--steel)}
.light .hint{color:var(--ink-soft)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line-d);background:var(--carbon);padding:clamp(44px,6vw,72px) 0 34px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
@media (max-width:820px){.fgrid{grid-template-columns:1fr}}
footer.site h4{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);margin-bottom:14px}
footer.site a{color:var(--chalk);text-decoration:none;opacity:.85}
footer.site a:hover{opacity:1;text-decoration:underline}
footer.site ul{list-style:none}
footer.site li{margin-bottom:9px;font-size:15px}
.fnote{color:var(--steel);font-size:14px;max-width:56ch;line-height:1.65}
.fbottom{display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line-d);color:var(--steel);font-size:13px}
.fbottom a{color:var(--steel)}

/* ---------- blog ---------- */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,28px)}
@media (max-width:880px){.postgrid{grid-template-columns:1fr}}
.postcard{border:1px solid var(--line-l);border-radius:var(--radius);background:#fff;
  padding:24px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s}
.postcard:hover{border-color:var(--blue)}
.postcard time{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
.postcard h3{font-size:19px;line-height:1.3;font-weight:800}
.postcard p{color:var(--ink-soft);font-size:14.5px;line-height:1.55}
article.post{max-width:760px;margin:0 auto}
article.post h1{font-weight:900;font-stretch:112%;font-size:clamp(30px,4.6vw,46px);line-height:1.1;margin-bottom:12px}
article.post .pmeta{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:34px}
.postbody{font-size:17.5px;line-height:1.75;color:#26292D}
.postbody h1,.postbody h2{font-weight:800;font-size:clamp(21px,2.4vw,27px);line-height:1.25;margin:38px 0 12px}
.postbody h3,.postbody h4{font-weight:800;font-size:19px;margin:30px 0 10px}
.postbody p{margin-bottom:18px}
.postbody ul,.postbody ol{margin:0 0 18px 24px}
.postbody li{margin-bottom:8px}
.postbody img{border-radius:var(--radius);margin:22px 0}
.postbody a{color:var(--blue)}
.postcta{margin-top:52px;border:1px solid var(--line-l);border-left:4px solid var(--blue);
  border-radius:var(--radius);background:#fff;padding:26px}
.postcta p{color:var(--ink-soft);margin:8px 0 16px}

/* ---------- misc ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- client wall ---------- */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pcard{position:relative;margin:0;border:1px solid var(--line-d);border-radius:var(--radius);
  overflow:hidden;background:var(--carbon-2)}
.pcard::before{content:"";display:block;padding-top:125%}
.pcard img{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  filter:saturate(.92) contrast(1.04);transition:transform .35s ease}
.pcard:hover img{transform:scale(1.045)}
.pcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,11,13,.12) 0%,rgba(10,11,13,0) 28%,rgba(10,11,13,0) 55%,rgba(10,11,13,.82) 100%)}
.pcard .cap{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;
  font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#E9EBEE}
.band.light .pcard{border-color:var(--line-l)}
@media (max-width:960px){.wall{grid-template-columns:repeat(2,1fr);gap:10px}}

/* ---------- featured build ---------- */
.feature-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4.5vw,60px);align-items:center}
.feature-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:960px){.feature-grid{grid-template-columns:1fr}}

/* ---------- founder ---------- */
.founder-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(26px,4.5vw,60px);align-items:center}
.founder-grid img{width:100%;max-width:420px;border-radius:var(--radius);border:1px solid var(--line-l);display:block}
@media (max-width:960px){.founder-grid{grid-template-columns:1fr}.founder-grid img{max-width:340px}}

/* ---------- showroom ---------- */
.showroom{margin:0;border:1px solid var(--line-d);border-radius:var(--radius);overflow:hidden}
.showroom img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)}



/* ---------- hero read-through ----------
   Each headline line is underlined in turn, once, then the primary button
   wakes. The rhythm is meant to pull the eye down the three lines and land on
   the call to action. It never loops and it is skipped entirely under
   prefers-reduced-motion. */
.hero-h1 .ul{position:relative;display:inline-block}
.hero-h1 .ul::after{
  content:"";position:absolute;left:0;right:0;
  bottom:var(--ul-bottom,.069em);
  height:var(--ul-height,.055em);border-radius:2px;
  background:var(--blue-bright);
  clip-path:inset(0 100% 0 0);
}
.hero-h1 .ul-3::after{background:#FFFFFF}
.hero-h1 .ul-1::after{animation:ulsweep 1.25s cubic-bezier(.4,0,.2,1) .70s 1 both}
.hero-h1 .ul-2::after{animation:ulsweep 1.25s cubic-bezier(.4,0,.2,1) 1.85s 1 both}
.hero-h1 .ul-3::after{animation:ulsweep 1.25s cubic-bezier(.4,0,.2,1) 3.00s 1 both}
@keyframes ulsweep{
  0%{clip-path:inset(0 100% 0 0)}
  36%{clip-path:inset(0 0 0 0)}   /* drawn in .45s */
  72%{clip-path:inset(0 0 0 0)}   /* held .45s so the eye can land on it */
  100%{clip-path:inset(0 0 0 100%)}
}
/* The primary action lights up when the third line finishes underlining and
   then stays lit, so it still marks the main path for someone who scrolls back
   later. The glow lives on its own layer and only opacity is animated, which
   the compositor handles without repainting the button on every frame. */
.btn-wake{position:relative;isolation:isolate;transition:background .18s,border-color .18s}
.btn-wake::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 4px rgba(46,91,234,.55),0 0 30px 6px rgba(46,91,234,.70);
  opacity:0;
  animation:wakeon .55s ease-out 4.35s 1 forwards, breathe 5s ease-in-out 4.90s infinite;
}
.btn-wake{animation:wakefill .55s ease-out 4.35s 1 forwards}
@keyframes wakefill{to{background:#4A72F5;border-color:#7E99FF}}
@keyframes wakeon{from{opacity:0}to{opacity:1}}
/* a shallow breath: the glow layer scales and brightens a little, nothing flashes */
@keyframes breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.82;transform:scale(1.012)}
}
.btn-wake:hover::before{box-shadow:0 0 0 5px rgba(46,91,234,.72),0 0 40px 9px rgba(70,115,255,.92)}
.btn-wake:hover{background:#5A80FF;border-color:#A8BEFF}
/* both hero actions share one width so neither looks like the secondary one */
.hero .hero-ctas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;width:max-content;max-width:100%}
.hero .hero-ctas .btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;width:100%;white-space:nowrap}
@media (max-width:1100px){.hero .hero-ctas{grid-template-columns:1fr;width:100%;max-width:340px}}
/* Reduced motion: no sweep, no breath, but the button still rests lit so the
   hierarchy it provides is not lost. */
@media (prefers-reduced-motion:reduce){
  .hero-h1 .ul::after{animation:none;display:none}
  .btn.btn-wake{animation:none;background:#4A72F5;border-color:#7E99FF}
  .btn-wake::before{animation:none;opacity:1}
}

/* ---------- cutout renders ---------- */
.hero-img img.cutout{border-radius:0;box-shadow:none;width:min(78%,440px);margin:0 auto;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.6))}
.float-imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.5vw,28px);align-items:end}
.float-imgs figure{margin:0;text-align:center}
.float-imgs img{width:min(100%,300px);margin:0 auto;display:block;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55))}
.float-imgs figcaption{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-top:14px}

.hero-img img.cutout,.float-imgs img{object-fit:contain}
.showroom img{max-height:420px}
@media (max-width:640px){
  .hero-tag{font-size:9.5px;max-width:94%;letter-spacing:.09em}
}

/* ---------- custom paddles hero ---------- */
.cp-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.cp-minis{grid-template-columns:1fr 1fr;gap:12px}
.cp-hero h1.display{font-size:clamp(33px,4.8vw,68px)}
@media (max-width:960px){
  .cp-hero{grid-template-columns:1fr}
  .cp-minis{margin-top:6px}
}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--line-d);border-radius:var(--radius);background:var(--carbon);margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 18px;font-family:'Archivo','Archivo Fallback',sans-serif;font-weight:700;font-size:15.5px;
  color:var(--chalk);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::after{content:"+";font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;color:var(--blue-bright);font-size:17px;flex:none}
.faq[open] summary::after{content:"\2013"}
.faq p{padding:0 18px 16px;color:var(--steel);font-size:14.5px;line-height:1.65;max-width:64ch}


/* ---------- launch program grids ---------- */
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.wcard{border:1px solid var(--line-d);border-radius:var(--radius);background:var(--carbon);padding:22px 20px}
.wcard .mono-h{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue-bright);display:block}
.wcard h3{margin-top:10px;font-size:17.5px}
.wcard p{margin-top:8px;color:var(--steel);font-size:14px;line-height:1.6}
@media (max-width:1020px){.wgrid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.wgrid{grid-template-columns:1fr}}

/* ---------- floating Text Us pill ---------- */
#textus{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;
  display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;text-decoration:none;
  font-family:'Archivo','Archivo Fallback',sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding:11px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 24px rgba(0,0,0,.45);opacity:.96;
  transition:opacity .2s ease, transform .2s ease}
#textus:hover{background:var(--blue-bright);opacity:1}
#textus.tu-hide{opacity:0;transform:translateY(14px);pointer-events:none}
#textus .tu-l{display:none}
@media (hover:hover) and (pointer:fine){
  #textus .tu-s{display:none}
  #textus .tu-l{display:inline}
}
@media (max-width:640px){
  footer.site{padding-bottom:78px}
}


/* ---------- homepage router ---------- */
.route-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.route-grid > .route:nth-child(5):last-child{grid-column:1/-1}
.route-grid > .route:nth-child(5):last-child p{max-width:62ch}
.route{display:block;border:1px solid var(--line-d);border-radius:var(--radius);background:var(--carbon-2);
  padding:22px 20px;text-decoration:none;color:var(--chalk);transition:border-color .2s ease, transform .2s ease}
.route:hover{border-color:var(--blue);transform:translateY(-2px)}
.route h3{margin-top:10px;font-size:17px;color:var(--chalk)}
.route p{margin-top:8px;color:var(--steel);font-size:14px;line-height:1.6}
.route .route-cta{display:inline-block;margin-top:14px;font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11.5px;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-bright)}
.route .mono-h{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);display:block}
.route-grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1020px){.route-grid.three{grid-template-columns:1fr}}
@media (max-width:820px){.route-grid{grid-template-columns:1fr}}

.route[aria-pressed="true"]{border-color:var(--blue);background:#101726}
.route[aria-pressed="true"] .route-cta::after{content:"  \2713"}


/* ---------- Build Room mode accordion ---------- */
.modes{margin-top:26px;display:grid;gap:10px}
.mode{border:1px solid var(--line-d);border-radius:var(--radius);background:var(--carbon-2);overflow:hidden}
.mode-head{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;
  background:none;border:0;cursor:pointer;padding:15px 18px;text-align:left;color:var(--chalk)}
.mode-head .mono-h{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel)}
.mode-title{font-family:'Archivo','Archivo Fallback',sans-serif;font-weight:700;font-size:15.5px}
.mode-arrow{color:var(--blue-bright);margin-left:6px}
.mode.open{border-color:var(--blue);background:#0F1626}
.mode.open .mode-head .mono-h{color:var(--blue-bright)}
.mode-body{padding:2px 18px 20px}
.mode-body > p{color:var(--steel);font-size:14.5px;line-height:1.65;max-width:62ch}
.mode-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.gq{margin-top:18px}
.gq-label{display:block;font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:9px}
.gq-chips{display:flex;flex-wrap:wrap;gap:8px}
.gchip{padding:9px 13px}
.gchip b{font-size:13.5px}
.gchip[aria-pressed="true"]{border-color:var(--blue);background:#101B33}
#rec{margin-top:22px;border:1px solid var(--blue);border-radius:var(--radius);background:var(--carbon);padding:18px}
.rec-spec{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;margin-top:12px}
.rec-spec dt{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);align-self:center}
.rec-spec dd{font-family:'Archivo','Archivo Fallback',sans-serif;font-weight:700;font-size:14px;color:var(--chalk)}
#ref-done{margin-top:18px;border-top:1px solid var(--line-d);padding-top:16px}

/* ---------- stage label + thickness profile ---------- */
.stagelabel{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 10px}
.stagelabel span{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:10.5px;font-weight:600;letter-spacing:.18em;color:var(--blue-bright)}
.stagelabel em{font-style:normal;font-size:11.5px;color:var(--steel)}
.thickrow{display:flex;align-items:center;gap:12px;margin-top:14px}
.thickrow small{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:10px;letter-spacing:.16em;color:var(--steel)}
.thickbar{flex:1;max-width:130px;display:flex;align-items:center}
.thickbar i{display:block;width:100%;border-radius:3px;background:linear-gradient(180deg,#3A4150,#181C24);
  border:1px solid #2A2F3A;transition:height .25s ease}
.thickrow b{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:12px;color:var(--chalk);letter-spacing:.08em}

/* ---------- nav lockup + hero fit ---------- */
.navlockup{width:auto !important;height:52px !important;filter:none !important}
@media (max-width:640px){.navlockup{height:42px}}
h1.hero-h1{font-size:clamp(33px,4.5vw,68px)}
.hero-h1 span{white-space:nowrap}
@media (max-width:400px){h1.hero-h1{font-size:clamp(30px,8vw,36px)}}


/* ---------- typography flow: no orphans, no clipped headlines ---------- */
h1,h2,h3,h4{text-wrap:balance}
p,.lede,li,dd{text-wrap:pretty}

/* ---------- atmosphere: faint cinematic backgrounds ---------- */
.atmo{position:relative;overflow:hidden}
.atmo::before{content:"";position:absolute;inset:0;background-image:var(--bg);
  background-size:cover;background-position:center right;
  opacity:.11;filter:saturate(.75);pointer-events:none}
.atmo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.55) 55%, rgba(10,11,13,.85) 100%),
    radial-gradient(120% 90% at 50% 100%, rgba(10,11,13,.9), transparent 60%)}
.atmo > .wrap{position:relative;z-index:1}
.atmo.light::before{opacity:.07}
@media (max-width:640px){.atmo::before{opacity:.08;background-position:center}}
.usecase-line{margin-top:22px;font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);line-height:2}

.cf-band h2.display{font-size:clamp(30px,4.2vw,46px)}
/* Three short sentences set on three explicit lines. The default display size
   is 108px, at which "Branded paddles." does not fit the 1200px column and the
   browser splits it. */
h1.display.ypc-beats{font-size:clamp(30px,5.6vw,74px)}

/* Deploy 48: read-more footnotes to Inside the Paddle */
.readmore{margin:14px 0 0;font:600 11px/1.7 'IBM Plex Mono','Plex Mono Fallback',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.readmore a{color:var(--blue-bright);text-decoration:none}
.readmore a:hover{text-decoration:underline;text-underline-offset:3px}
.light .readmore a,.faq .readmore a,.card .readmore a{color:var(--blue)}
.faq .readmore{margin-top:8px}

/* Deploy 53: Custom Paddles conversion additions */
.cp-hero-note{margin-top:14px;font-size:16px;line-height:1.55;color:var(--chalk);font-weight:600}
.cp-hero-or{margin:12px 0 0;font-size:14px;color:var(--steel)}
.cp-minis .pcard{padding-top:100%}
.cp-hero-or a{color:var(--chalk);text-decoration:underline;text-underline-offset:3px}
#see-your-brand{scroll-margin-top:86px}
.cp-proofband{padding:18px 0 !important;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);background:var(--carbon-2)}
.cp-proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cp-proof li{display:flex;align-items:baseline;gap:10px;justify-content:center;font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;letter-spacing:.08em;text-transform:uppercase}
.cp-proof b{font-family:'Archivo','Archivo Fallback',sans-serif;font-weight:900;font-size:22px;letter-spacing:0;color:var(--chalk)}
.cp-proof span{font-size:11px;color:var(--steel)}
@media (max-width:720px){.cp-proof{grid-template-columns:repeat(2,1fr);gap:10px 8px}.cp-proof li{justify-content:flex-start;flex-direction:column;gap:2px}.cp-proof b{font-size:20px}}
.cp-viz .qv{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,3vw,40px);margin-top:28px;align-items:start}
@media (max-width:880px){.cp-viz .qv{grid-template-columns:1fr}}
.qv-stagecard{background:radial-gradient(120% 90% at 50% 0%,#1A1D22,#0A0B0D 70%);border:1px solid var(--line-d);border-radius:var(--radius);padding:16px}
.qv-stagecard svg{display:block;width:min(100%,420px);height:auto;margin:6px auto 0}
@media (max-width:880px){.qv-stagecard svg{width:min(100%,360px)}}
.qv-steplabel{display:block;font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-bright);margin-bottom:6px}
.qv-artrow{margin-top:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.qv-artrow .btn{width:100%;justify-content:center}
.qv-hint{font-size:13px;line-height:1.5;color:var(--steel);margin:0}
.qv-layers{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;width:100%}
.qv-layers[hidden]{display:none}
.qv-layers li{display:inline-flex;align-items:center;border:1px solid var(--line-d);border-radius:999px;overflow:hidden;max-width:100%}
.qv-layers li.on{border-color:var(--blue-bright);background:rgba(46,91,234,.16)}
.qv-layers button{font:600 12px/1 'Archivo','Archivo Fallback',sans-serif;color:var(--chalk);background:transparent;border:0;padding:9px 10px 9px 12px;cursor:pointer;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-layers button.x{padding:6px 10px;font-size:18px;line-height:1;color:var(--steel);border-left:1px solid var(--line-d)}
.qv-layers button.x:hover{color:#fff;background:#E5484D}
.qv-tools[hidden]{display:none}
.qv-tools{margin-top:12px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 10px;align-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line-d);border-radius:var(--radius);padding:10px 12px}
.qv-zoomlab{font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
#qv-zoom{width:100%;accent-color:var(--blue-bright);height:32px}
.qv-btns{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.qv-btns button,.qv-seg button{font:600 13px/1 'Archivo','Archivo Fallback',sans-serif;color:var(--chalk);background:transparent;border:1px solid var(--line-d);border-radius:999px;padding:10px 14px;cursor:pointer;min-height:40px}
.qv-btns button[aria-pressed="true"],.qv-seg button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.qv-opts{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.qv-opts{grid-template-columns:1fr}}
.qv-optlab{display:block;font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:8px}
.qv-seg{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qv-swatch input{width:40px;height:40px;border:1px solid var(--line-d);border-radius:999px;padding:0;background:transparent;cursor:pointer}
.qv-swatch[hidden]{display:none}
.qv-opt .qv-hint{margin-top:8px}
.qv-side{background:var(--carbon-2);border:1px solid var(--line-d);border-radius:var(--radius);padding:clamp(18px,2.4vw,26px)}
.qv-form h3,.qv-done h3{font-size:22px;margin:0 0 6px}
.qv-formnote{font-size:14px;color:var(--steel);margin:0 0 16px}
.qv-fields{display:grid;gap:12px}
.qv-fields label{display:block;font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.qv-fields input{margin-top:6px;font:16px 'Archivo','Archivo Fallback',sans-serif;letter-spacing:0;text-transform:none}
.qv-fields input[aria-invalid="true"]{border-color:#E5484D}
.qv-opt-tag{text-transform:none;letter-spacing:0;color:var(--steel);opacity:.8}
.qv-nohoney{position:absolute;left:-9999px}
.qv-status{margin:12px 0 0;font-size:14px;color:var(--steel)}
.qv-status.bad{color:#F08A8D}
.qv-form .btn{margin-top:16px;width:100%;justify-content:center}
.qv-done p{color:var(--steel)}
.qv-done-img{display:block;width:min(100%,300px);height:auto;margin:14px auto;border-radius:var(--radius);border:1px solid var(--line-d);background:#F4F5F2}
.qv-done-actions{display:flex;gap:10px;flex-wrap:wrap}
.qv-done-actions .btn{flex:1 1 180px;justify-content:center}
.qv-more{margin:22px 0 0;text-align:center;font-family:'IBM Plex Mono','Plex Mono Fallback',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.qv-more a{color:var(--blue-bright);text-decoration:underline;text-underline-offset:3px}
.qv-more-top{display:none;margin:0;text-align:left}
@media (max-width:880px){.qv-more-top{display:block}.cp-viz > .wrap > .qv-more{display:none}}
.cp-how .cp-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:960px){.cp-how .cp-steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cp-how .cp-steps{grid-template-columns:1fr}}
.cp-steps li{background:#fff;border:1px solid var(--line-l);border-radius:var(--radius);padding:18px 18px 20px}
.cp-steps h3{font-size:17px;margin:8px 0 8px;letter-spacing:-.01em}
.cp-steps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.cp-steps .mono-h{color:var(--blue)}
/* Deploy 54: balanced visualizer columns */
.cp-viz .qv{align-items:stretch}
.qv-side{display:flex;flex-direction:column;gap:14px;background:transparent;border:0;padding:0}
.qv-optscard,.qv-form,.qv-done{background:var(--carbon-2);border:1px solid var(--line-d);border-radius:var(--radius);padding:clamp(18px,2.4vw,26px)}
.qv-form{flex:1 1 auto;display:flex;flex-direction:column}
.qv-form .qv-fields{flex:1 1 auto}
.qv-optscard .qv-opts{margin-top:8px}