/* ============================================================
   V2 — structural reskin on top of "Cold Instrument"
   Three moves a colour change cannot make.
   ============================================================ */

/* ---- MOVE 1: reclaim the dead scroll -------------------------------
   The original pins a 765px card and scrubs it across 7,900px of scroll.
   GSAP is not in this build, so that was 7,135px of nothing. Collapse it. */
.pin-spacer,[data-rx-collapsed]{
  height:auto!important;min-height:0!important;padding:0!important;margin:0!important;
}
.pin-spacer > *{position:static!important;top:auto!important;left:auto!important;
  width:auto!important;transform:none!important}
.main-card{position:relative!important;top:auto!important;transform:none!important}
.card-sheen{display:none!important}   /* the sweep only read as motion under the pin */

/* ---- MOVE 2: break the uniform rhythm ------------------------------
   Every section ran py-24/py-32. Alternate the beat so the page has pacing. */
section{padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px)}
section:nth-of-type(even){
  padding-top:clamp(96px,11vw,168px);padding-bottom:clamp(96px,11vw,168px);
  background-color:#080D11!important;
}
section:nth-of-type(even)::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ci-rule) 15%,var(--ci-rule) 85%,transparent);
}
section:nth-of-type(3n){padding-bottom:clamp(120px,14vw,200px)}

/* ---- MOVE 3: the authored hero ------------------------------------ */
#cg7-line{background:
  radial-gradient(ellipse 80% 60% at 70% 40%,rgba(255,122,26,.055),transparent 70%),
  linear-gradient(180deg,#080D11,#06090C);
  border:1px solid var(--ci-rule);border-radius:var(--ci-radius);overflow:hidden}
#cg7-line::after{                       /* corner bracket, top-left only — asymmetry is the point */
  content:"";position:absolute;left:0;top:0;width:14px;height:14px;pointer-events:none;
  border-left:1px solid var(--ci-heat);border-top:1px solid var(--ci-heat);opacity:.55}
.cg7-line-fallback{
  display:flex;align-items:center;justify-content:center;height:100%;padding:24px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ci-dim);text-align:center}

/* ---- nav: sharpen ---- */
header nav a{font-family:var(--font-mono)!important;font-size:11px!important;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ci-dim)!important;
  transition:color .16s ease}
header nav a:hover{color:var(--ci-heat)!important}

/* ---- headline: give the display face room to be the image ---- */
h1{font-size:clamp(44px,5.6vw,86px)!important;line-height:.98!important;text-wrap:balance}
h2{font-size:clamp(30px,3.4vw,52px)!important;line-height:1.04!important;text-wrap:balance}

/* ---- one deliberate asymmetry: the hero column is not 50/50 ---- */
@media (min-width:1024px){
  section:first-of-type [class*="grid-cols-2"]{grid-template-columns:1.15fr .85fr!important}
}

@media (prefers-reduced-motion:reduce){
  #cg7-line{background:linear-gradient(180deg,#080D11,#06090C)}
}

/* ---- MOVE 1b: recover the copy the reveal was hiding ----------------
   `.gsap-reveal { visibility: hidden }` gates 7,204 characters inside the
   pinned stage. GSAP was supposed to reveal them; this build has no GSAP,
   so the section rendered as an empty 900px box. Content visible by
   default; motion is enhancement, never the gate. */
.gsap-reveal,[class*="gsap-reveal"]{visibility:visible!important;opacity:1!important}

/* the stage was locked to one viewport (w-screen h-screen) to be scrubbed.
   Unlocked, it becomes an ordinary section that sizes to its content. */
.pin-spacer [class*="h-screen"]{height:auto!important;min-height:0!important}
.pin-spacer [class*="w-screen"]{width:100%!important}
.pin-spacer [class*="absolute"][class*="inset-0"]:not(.film-grain):not(.bg-grid-theme){
  position:relative!important;inset:auto!important}
.pin-spacer{padding:clamp(72px,9vw,140px) 0!important}
.pin-spacer .film-grain,.pin-spacer .bg-grid-theme{display:none!important}

/* ---- the recovered card: bring it into Cold Instrument -------------- */
.main-card,.premium-depth-card{
  background:var(--ci-panel)!important;background-image:none!important;
  border:1px solid var(--ci-rule)!important;border-radius:var(--ci-radius)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
  padding:clamp(28px,3.4vw,56px)!important;
}
.main-card *,.premium-depth-card *{background-image:none!important}
.main-card [class*="text-6xl"],.main-card [class*="text-7xl"],
.main-card [class*="text-8xl"]{font-size:clamp(28px,3.2vw,46px)!important;line-height:1.05!important}
/* the ghosted wordmark was a depth trick for the pinned stage; it reads as noise flat */
.main-card [class*="opacity-"][class*="text-"],
.main-card [class*="select-none"]{opacity:.06!important}
/* the stage reserved a viewport of empty room under the card */
.pin-spacer [class*="justify-center"]{justify-content:flex-start!important}
.pin-spacer [class*="min-h-"]{min-height:0!important}

/* ---- size the recovered card to its content, inside the site container ---- */
.pin-spacer{display:flex;justify-content:center}
.pin-spacer > *{width:100%;max-width:1152px;margin:0 auto}
.main-card,.premium-depth-card{
  height:auto!important;min-height:0!important;max-width:1152px;margin:0 auto!important;
  display:grid!important;grid-template-columns:minmax(0,1fr);gap:0;
}
.main-card > *,.premium-depth-card > *{height:auto!important;min-height:0!important}
.main-card [class*="max-w-"]{max-width:62ch!important}
/* it was built for a 100vh stage; nothing inside needs viewport height */
.main-card [class*="h-full"],.main-card [class*="h-screen"],
.premium-depth-card [class*="h-full"]{height:auto!important}

/* ---- mobile: the promoted CTA label is long and blew out the header ----
   "Create your free website now" is ~2.4x the old label. Below md the hero
   carries the same action two screens down, so the nav copy is redundant
   there — shorten it rather than let the header overflow. */
@media (max-width:1023px){
  header a[class*="bg-orange"]{font-size:11px!important;padding:9px 12px!important;letter-spacing:0}
  header a[class*="bg-orange"] span{display:none}
}
@media (max-width:767px){
  header a[class*="bg-orange"],header [class*="ml-auto"] a[class*="bg-orange"]{display:none!important}
  header [class*="ml-auto"]{gap:10px!important}
}
/* belt and braces: nothing in the header may set the page width */
header,header *{max-width:100%}

/* GSAP bakes an inline width AND height onto .pin-spacer when it creates it.
   The height was stripped at build time; the width was not, so the spacer
   stayed frozen at the 1440px capture viewport and set the page width at
   every smaller breakpoint. */
.pin-spacer{width:auto!important;max-width:100%!important}
.pin-spacer [class*="w-screen"]{width:100%!important;max-width:100%!important}
.pin-spacer [class*="absolute"]{max-width:100%}

/* final overflow pass — two culprits, measured not guessed */
/* 1. the long promoted CTA still rendered at exactly 768px (my earlier
      breakpoint stopped at 767). The hero carries the same action. */
@media (max-width:1023px){
  header a[class*="bg-orange"]{display:none!important}
  header [class*="ml-auto"]{gap:10px!important;margin-left:auto!important}
}
/* 2. a showcase frame sized past the phone viewport */
[class*="h-[30rem]"],[class*="h-\[30rem\]"]{max-width:100%!important}
img,canvas,svg,video,spline-viewer{max-width:100%}
/* targeted: only clamp containers that actually exceed the viewport, and
   clip (not hidden) so position:sticky keeps working. */
[class*="max-w-5xl"]{max-width:min(100%,64rem)!important}
html,body{overflow-x:clip}