/* Supertime site. Layout: an editor's dark room. The hero is a live viewer (frame + timeline + playhead);
   sections below sit on hairline bands. Red appears only where the brand says "now": playhead, accents, primary CTA. */
:root {
  --bg: #0E0E10; --raise: #151518; --panel: #1B1B1F; --line: #26262B; --line2: #33333A;
  --fg: #EDEDEF; --mute: #A1A1AA; --dim: #6F6F78;
  --red: #F2382B; --red-hi: #FF5045; --yellow: #FFD100; --blue: #4C8DFF;
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --wide: 1180px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--fg); color: var(--bg); padding: 8px 12px; border-radius: 6px; z-index: 50; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 28px;
  max-width: var(--wide); margin: 0 auto; padding-block: 16px; padding-inline: 24px;
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); }
.nav .brand img { height: 30px; width: auto; }
.nav nav { display: flex; gap: 24px; margin-left: auto; }
.nav nav a { text-decoration: none; color: var(--mute); font-size: 14px; font-weight: 500; }
.nav nav a:hover { color: var(--fg); }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 9px; font: 600 14.5px var(--body);
  text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.btn.primary { background: var(--red); color: #fff; }
.btn.primary:hover { background: var(--red-hi); }
.btn.ghost { border: 1px solid var(--line2); color: var(--fg); }
.btn.ghost:hover { border-color: var(--mute); }
.nav .btn { height: 36px; padding: 0 14px; font-size: 13.5px; }

/* hero */
.hero { max-width: var(--wide); margin: 0 auto; padding-inline: 24px; padding-block: 56px 88px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(242,56,43,.18); }
.hero h1 { font-size: clamp(56px, 8.4vw, 112px); font-weight: 900; letter-spacing: -.045em; line-height: .9; margin-top: 22px; }
.red { color: var(--red); }
.lead { margin-top: 26px; font-size: 18px; line-height: 1.6; color: var(--mute); max-width: 46ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fine { margin-top: 14px; font-size: 13px; color: var(--dim); }
.sel { user-select: all; color: var(--mute); font-family: var(--mono); font-size: 12.5px; }

/* viewer demo */
.viewer { margin: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.02); }
.frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  background: radial-gradient(120% 100% at 72% 20%, #4a5260 0%, #252a31 40%, #0b0c0f 100%); }
.safe { position: absolute; inset: 10%; border: 1px dashed rgba(255,255,255,.12); }
.stylename { position: absolute; left: 12px; top: 10px; font: 600 11px var(--mono); letter-spacing: .08em; color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 5px; }
.tc { font: 600 12px var(--mono); color: #d9d9dd; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc.dim { color: var(--dim); }
.viewer figcaption { padding: 10px 14px 12px; font-size: 12.5px; color: var(--dim); background: #0b0b0d; }
/* sections */
.band { max-width: var(--wide); margin: 0 auto; padding-inline: 24px; padding-block: 88px; border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 44px; }
.eyebrow { font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.band h2, .closer h2 { font-size: clamp(32px, 4.4vw, 50px); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
.sub { color: var(--mute); font-size: 17px; max-width: 60ch; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.steps li { padding: 28px 24px 30px; background: var(--raise); display: grid; gap: 12px; align-content: start; border-left: 1px solid var(--line); position: relative; }
.steps li:first-child { border-left: 0; }
.steps .n { font: 600 12px var(--mono); color: var(--red); }
.steps h3 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
.steps p { color: var(--mute); font-size: 15px; }

.swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sw { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; padding: 18px 18px 34px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  background: radial-gradient(120% 100% at 80% 0%, #3d434c, #17191d 70%); border: 1px solid var(--line); container-type: inline-size; }
.sw small { position: absolute; left: 14px; bottom: 10px; font: 600 11px var(--mono); color: rgba(255,255,255,.55); letter-spacing: .04em; }
.sw div { font-size: 11cqw; line-height: 1; color: #fff; }
.sw i { font-style: normal; font-size: 5.6cqw; line-height: 1; color: #fff; align-self: flex-start; }
.s-punch div { font: italic 900 10cqw/1 "Montserrat", sans-serif; text-shadow: .06em .06em 0 var(--red); } .s-punch b { color: var(--yellow); }
.s-kitchen div { font: italic 900 11cqw/1 "Playfair Display", serif; background: #1D3A2A; padding: 2cqw 4cqw; align-self: flex-start; } .s-kitchen b { color: #D9E86A; }
.s-steel div { font: 400 11cqw/1 "Archivo Black", sans-serif; text-shadow: .05em .05em 0 #000; }
.s-steel i { font: 800 4.6cqw/1 "Inter Tight", sans-serif; letter-spacing: .2em; color: #111; background: #FFD200; padding: 1.4cqw 2.2cqw; }
.s-bleach div { font: 400 11.5cqw/1 "Archivo Black", sans-serif; color: #1F4FC8; -webkit-text-stroke: 1.2cqw #fff; paint-order: stroke fill; } .s-bleach b { color: var(--red); font-weight: 400; }
.s-jet div { font: italic 900 10cqw/1 "Kanit", sans-serif; text-shadow: 0 .04em .2em rgba(0,0,0,.6); } .s-jet b { color: #FFDD00; font-weight: 900; }
.s-script i { font: 700 12cqw/1 "Caveat", cursive; color: #fff; } .s-script div { font: 900 8cqw/1 "Inter Tight", sans-serif; text-shadow: 0 .05em .25em rgba(0,0,0,.6); }
.s-sweet div { font: 400 13cqw/1 "Lilita One", sans-serif; color: #FF4F8B; -webkit-text-stroke: 1.4cqw #fff; paint-order: stroke fill; }
.s-anton div { font: 400 14cqw/1 "Anton", sans-serif; text-shadow: .06em .06em 0 #000; } .s-anton div span { color: var(--yellow); }
.s-anton i { font: 400 5cqw/1 "Anton", sans-serif; color: #111; background: #FFD100; padding: 1cqw 2cqw; transform: skewX(-10deg); }
.note { margin-top: 22px; color: var(--mute); font-size: 15px; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--raise); border: 1px solid var(--line); border-radius: 14px; padding: 30px; display: grid; gap: 14px; align-content: start; }
.card h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--mute); }
.card li { padding-left: 20px; position: relative; }
.card li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--red); }
.spec { font: 400 12.5px var(--mono); color: var(--dim); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.split .sec-head { margin: 0; align-content: start; }
.facts { margin: 0; display: grid; gap: 0; }
.facts div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding-block: 20px; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; padding-top: 4px; }
.facts dt { font: 700 16px var(--display); }
.facts dd { margin: 0; color: var(--mute); }

.closer { max-width: var(--wide); margin: 0 auto; padding-inline: 24px; padding-block: 96px 110px; border-top: 1px solid var(--line);
  display: grid; justify-items: center; text-align: center; }
.closer h2 { font-size: clamp(36px, 5.6vw, 68px); font-weight: 900; letter-spacing: -.04em; }
.foot { max-width: var(--wide); margin: 0 auto; padding-inline: 24px; padding-block: 28px 40px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px; color: var(--dim); font-size: 13.5px; }
.foot img { height: 22px; width: auto; margin-right: auto; }
.foot a { color: var(--mute); text-decoration: none; }

@media (max-width: 980px) {
  .hero, .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero { padding-block: 32px 64px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps li:nth-child(3) { border-left: 0; }
  .steps li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nav { gap: 14px; padding-inline: 16px; } .nav nav { display: none; } .nav .btn { margin-left: auto; }
  .hero, .band, .closer, .foot { padding-inline: 16px; }
  .band { padding-block: 64px; }
  .steps, .cards { grid-template-columns: minmax(0, 1fr); }
  .steps li { border-left: 0; border-top: 1px solid var(--line); } .steps li:first-child { border-top: 0; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lead { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .super.in .l1, .super.in .l2 { animation: none; } }

/* pricing */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tier { background: var(--raise); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.tier.hot { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 30px 60px -40px rgba(242,56,43,.6); }
.tier .price { font: 800 44px/1 var(--display); letter-spacing: -.03em; margin-top: 4px; }
.tier .price span { font: 500 15px var(--body); color: var(--dim); margin-left: 4px; letter-spacing: 0; }
.tier .engine { color: var(--mute); font-weight: 500; }
.tier ul { margin: 6px 0 14px; padding: 0; list-style: none; display: grid; gap: 9px; color: var(--mute); flex: 1; }
.tier li { padding-left: 20px; position: relative; }
.tier li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--red); }
.tier .btn { justify-content: center; }
@media (max-width: 980px) { .tiers { grid-template-columns: minmax(0, 1fr); } }

/* hero demo: 12-second spot (canvas B-roll, supers, offer build, three-lane timeline) */
.frame .scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sup { position: absolute; visibility: hidden; }
.sup-a { left: 10%; bottom: 15%; display: grid; gap: .6cqw; }
.sup-a .l1 { font: italic 900 5.6cqw/1 "Montserrat", sans-serif; color: #fff; text-shadow: .06em .06em 0 var(--red); white-space: nowrap; }
.sup-a .l1 .w { display: inline-block; transform-origin: 50% 70%; }
.sup-a .l1 b { color: var(--yellow); }
.sup-a .l2 { font: italic 900 2.5cqw/1 "Montserrat", sans-serif; color: #fff; justify-self: start; border-bottom: .3cqw solid var(--red); padding-bottom: .35cqw; }
.sup-b { left: 10%; bottom: 14%; display: flex; align-items: center; gap: 1.6cqw; }
.sup-b .num { font: 400 15cqw/.8 "Archivo Black", sans-serif; color: var(--yellow); text-shadow: .04em .04em 0 #000; transform-origin: 50% 60%; }
.sup-b .num span { font-size: .5em; margin-left: .05em; }
.sup-b .unit { font: 900 2.2cqw/1.15 "Inter Tight", sans-serif; color: #fff; letter-spacing: .14em; text-shadow: 0 .1em .3em rgba(0,0,0,.6); }
.sup-b .unit b { display: block; font-size: 2.3em; letter-spacing: .02em; color: #fff; background: #FFD200; color: #111; padding: .05em .25em; margin-bottom: .3em; width: max-content; }
.offer { position: absolute; inset: 0; visibility: hidden; }
.offer .panel { position: absolute; top: 0; bottom: 0; right: 0; width: 44%; background: linear-gradient(180deg, #17171b, #0d0d10); box-shadow: -1cqw 0 3cqw rgba(0,0,0,.5); }
.offer .ocol { position: absolute; top: 7%; bottom: 20%; right: 0; width: 44%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; }
.offer .price .lab { font: 900 1.5cqw/1 "Montserrat", sans-serif; letter-spacing: .1em; color: #fff; text-align: center; margin-bottom: .6cqw; }
.offer .pr { display: flex; align-items: center; gap: 1.6cqw; }
.offer .was { position: relative; font: 900 2.3cqw/1 "Montserrat", sans-serif; color: #fff; display: grid; text-align: center; }
.offer .was i { font: 900 1cqw/1 "Montserrat", sans-serif; font-style: normal; margin-bottom: .3cqw; }
.offer .was::after { content: ""; position: absolute; left: -6%; right: -6%; top: 62%; height: .32cqw; background: var(--red); transform: rotate(-12deg); border-radius: 1px; }
.offer .now { font: 400 7.2cqw/.8 "Archivo Black", sans-serif; color: var(--yellow); display: flex; align-items: flex-start; }
.offer .now .cur, .offer .now .cen { font-size: .42em; line-height: 1; margin-top: .08em; }
.offer .oband { width: 44cqw; align-self: flex-end; background: var(--yellow); color: #111; text-align: center; font: 900 1.9cqw/1 "Montserrat", sans-serif; padding: .9cqw 0; }
.offer .oband b { color: var(--red); }
.offer .seals { display: flex; gap: 2cqw; }
.offer .seal { width: 9.2cqw; aspect-ratio: 1; border-radius: 50%; background: var(--red); box-shadow: inset 0 0 0 .5cqw var(--red), inset 0 0 0 .75cqw #fff; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; }
.offer .seal b { font: 400 3.4cqw/.9 "Archivo Black", sans-serif; }
.offer .seal i { font: 900 1.25cqw/1 "Montserrat", sans-serif; font-style: normal; }
.offer .seal small { font: 800 .75cqw/1 "Montserrat", sans-serif; margin-top: .2cqw; }
.offer .cta { font: italic 900 4.6cqw/1 "Montserrat", sans-serif; color: var(--yellow); }
.offer .cta b { color: #fff; }
.offer .url { position: absolute; left: 0; bottom: 6%; width: 52%; padding: 1.1cqw 0 1.1cqw 10%; background: var(--yellow); color: #111; font: 900 3.2cqw/1 "Montserrat", sans-serif;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); }
.offer .url b { color: var(--red); }
.stylename { z-index: 2; }
.tl2 { background: #0b0b0d; border-top: 1px solid #1f1f23; padding: 10px 14px 12px; }
.tlhead { display: flex; justify-content: space-between; margin-bottom: 8px; }
.lanes { position: relative; display: grid; gap: 5px; }
.trk { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.trk .lab { font: 600 10px var(--mono); letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.lane { position: relative; height: 20px; background: #141418; border-radius: 4px; overflow: hidden; }
.lane.vo { height: 18px; background: repeating-linear-gradient(90deg, #1b1b21 0 2px, transparent 2px 5px); }
.lane .clip { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; background: #29354d; color: rgba(255,255,255,.75); font: 600 10px/16px var(--body);
  padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; margin-left: 1px; }
.lane .clip.sclip { background: #2f3a52; }
.lane .clip.on { box-shadow: inset 0 0 0 1px var(--blue); background: #3b5890; color: #fff; }
.lane .clip.shot.on { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.lane .word { position: absolute; top: 2px; display: none; font: 500 9.5px/14px var(--body); color: var(--dim); padding: 0 3px; border-radius: 3px; white-space: nowrap; }
.lane .word.on { display: block; color: #111; background: var(--yellow); font-weight: 700; }
.phwrap { position: absolute; left: 60px; right: 0; top: -6px; bottom: -4px; pointer-events: none; }
.phwrap .ph { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); margin-left: -1px; }
.phwrap .ph::before { content: ""; position: absolute; left: -6px; top: -2px; width: 14px; height: 12px; background: var(--red); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
@media (max-width: 640px) { .trk { grid-template-columns: 44px minmax(0, 1fr); } .phwrap { left: 52px; } }