/* Script Cutter page, restyle (2026-10-29).
   Loaded after styles.css. The page's HTML, sections and scripts are untouched
   and its violet stays; this layer gives it the same look as the home and
   EndFrame pages (ef.css): black base, Switzer medium headings, the hero in a
   rounded box over a dot grid, centred section heads with a small tag, quiet
   cards, round buttons, no glows. Owner: "maintain the colors of script
   cutter, but restyle it". */

/* The headings were Clash Display. Pointing that family at Switzer swaps every
   heading in styles.css at once, including the ones that name it directly. */
@font-face { font-family: 'Clash Display'; src: url('assets/fonts/Switzer-Medium.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url('assets/fonts/Switzer-Medium.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* One dark palette, also under data-theme="light" so a visitor who once picked
   light mode still gets this page; the toggle itself is hidden below. */
:root, :root[data-theme="light"] {
  --bg: #050505;
  --surface: #0e0e10;
  --surface-2: #141416;
  --surface-3: #1b1b1e;
  --text: #f1efea;
  --muted: #a8a6a0;
  --faint: #6b6964;
  --primary: #7c6cff;
  --primary-2: #9f7bff;
  --primary-3: #b7a9ff;
  --primary-grad: linear-gradient(135deg, #7c6cff, #9f7bff);
  --primary-soft: rgba(124, 108, 255, 0.14);
  --primary-rgb: 124, 108, 255;
  --keep: #34c98d;
  --keep-soft: rgba(52, 201, 141, 0.13);
  --cut: #ef6b6b;
  --warn: #f2b544;
  --warn-soft: rgba(242, 181, 68, 0.13);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 24px;
  --shadow: none;
  --bg-grad: #050505;
  --nav-bg: rgba(5, 5, 5, 0.82);
  --strike: rgba(255, 255, 255, 0.28);
  --shot-bg: #0e0e10;
  --ic-hover-fg: #fff;
  --grain-opacity: 0;
  color-scheme: dark;
}
.theme-toggle { display: none !important; }
body { background: #050505; }
body::before, body::after { opacity: 0 !important; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 500; letter-spacing: -0.03em; }
.hero-copy h1 { font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; font-size: clamp(42px, 6vw, 72px); }
section h2 { font-weight: 500; letter-spacing: -0.035em; line-height: 1.06; font-size: clamp(32px, 4.6vw, 54px); }
.cmp-title, .show-copy h3 { font-weight: 500; letter-spacing: -0.02em; }

/* ---------- buttons ---------- */
.btn { border-radius: 999px; font-weight: 500; font-size: 15px; height: 48px; padding: 0 24px; }
.btn-primary { box-shadow: none; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { background: rgba(255, 255, 255, 0.03); border-color: var(--line-strong); }
.btn-outline:hover { border-color: rgba(255, 255, 255, 0.3); }

/* ---------- nav: links in one rounded group ---------- */
.nav { background: linear-gradient(#050505 40%, rgba(5, 5, 5, 0)); border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav-links { gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.nav-links a { padding: 8px 14px; border-radius: 999px; }
.nav-links a:hover { background: rgba(255, 255, 255, 0.05); }
.nav-links a.nav-dl { padding: 8px 16px; box-shadow: none; }

/* ---------- small tags above headings ---------- */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-weight: 400; font-size: 11px; letter-spacing: 0.06em;
  padding: 6px 12px; border-radius: 999px;
  color: var(--primary-3); background: rgba(124, 108, 255, 0.08);
  border: 1px solid rgba(124, 108, 255, 0.3); box-shadow: none;
}

/* ---------- hero: same two columns, now inside a rounded box ---------- */
.hero { padding: 6px 0 0; }
.hero::before, .hero::after { display: none; }
.hero > .wrap:not(.hero-cards) {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 1132px; padding: 72px 56px;
  border-radius: 28px; border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 0%, #19191c 0%, #0e0e10 55%, #080809 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hero > .wrap:not(.hero-cards)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(70% 80% at 50% 40%, #000 20%, transparent 75%);
}
.hero-stage, .hero-visual { box-shadow: none !important; }
.hero-stage::before, .hero-stage::after, .hero-visual::before, .hero-visual::after { box-shadow: none !important; filter: none !important; }
.hero-cards { margin-top: 16px; }
.hc { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 20px; border-color: var(--line-strong); }

/* ---------- section heads: centred ---------- */
section { padding: 128px 0 0; }
section > .wrap > .eyebrow,
section > .wrap > h2,
section > .wrap > .section-sub { display: block; width: fit-content; margin-left: auto; margin-right: auto; text-align: center; }
section > .wrap > h2 { max-width: 20ch; width: auto; }
section > .wrap > .section-sub { max-width: 640px; width: auto; margin-bottom: 56px; }
section > .wrap > .eyebrow { display: flex; }

/* ---------- cards: quiet, rounded, a faint top highlight ---------- */
.tool-card, .feature-card, .pricing-card, .show-card, .beta-box, .cmp-scroll, .sc-founders, .sc-free {
  border-radius: 24px;
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%), var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tool-card::before, .tool-card::after, .pricing-card::before, .pricing-card::after, .beta-box::before, .beta-box::after { box-shadow: none !important; }
.tool-mini, .faq-item { border-radius: 18px; background: var(--surface); border-color: var(--line-strong); box-shadow: none; }
.pricing-card.pro {
  border-color: rgba(124, 108, 255, 0.55);
  background: linear-gradient(180deg, rgba(124, 108, 255, 0.10), rgba(124, 108, 255, 0) 45%), var(--surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: none;
}
.card-hover:hover { box-shadow: none; }
.show-shot img, .show-card figure img { box-shadow: none; border-radius: 16px; }
.tool-media { border-radius: 18px 18px 0 0; }
.sc-bill-opt.is-on, .sc-billing .is-on { box-shadow: none; }
.cmp-table th, .cmp-table td { border-color: var(--line); }
.cmp-n { color: var(--faint); }

/* FAQ sits centred like the other sections. */
#faq .faq-item { max-width: 820px; margin-left: auto; margin-right: auto; }
#faq > .wrap > p:last-child { text-align: center; }

/* ---------- footer ---------- */
footer { margin-top: 140px; border-top: 1px solid var(--line); padding: 56px 0 48px; }

@media (max-width: 860px) {
  .hero > .wrap:not(.hero-cards) { padding: 56px 22px; }
}
@media (max-width: 640px) {
  .hero > .wrap:not(.hero-cards) { margin: 0 16px; width: auto; padding: 48px 18px; border-radius: 22px; }
  section { padding-top: 96px; }
  .hero-copy h1 { font-size: clamp(38px, 11vw, 56px); }
}

/* FAQ rows full width inside their centred column; pricing notes and the
   billing switch centred under the centred heading. */
#faq .faq-item { display: block; width: 100%; }
.sc-founders, .sc-free { margin-left: auto !important; margin-right: auto !important; }
.sc-billing { margin-left: auto !important; margin-right: auto !important; width: fit-content; display: flex; }
#faq .faq-list { margin: 40px auto 0; }
.nav-brand { white-space: nowrap; }

/* ---------- flat navy, like the Scalepro reference (owner, 2026-10-29) ----------
   No gradients on this page: one flat deep navy ground, flat navy cards. The
   violet sits naturally on it. EndFrame and the home page stay black. */
:root, :root[data-theme="light"] {
  --bg: #08081a;
  --surface: #0f0f24;
  --surface-2: #14142c;
  --surface-3: #1a1a35;
  --line: rgba(190, 190, 255, 0.08);
  --line-strong: rgba(190, 190, 255, 0.14);
  --text: #f0eff6;
  --muted: #a5a4ba;
  --faint: #6c6b84;
  --bg-grad: #08081a;
  --nav-bg: rgba(8, 8, 26, 0.85);
  --shot-bg: #0f0f24;
}
body { background: #08081a; }
.nav { background: #08081a; }
.hero > .wrap:not(.hero-cards) { background: var(--surface); }
.tool-card, .feature-card, .pricing-card, .show-card, .beta-box, .cmp-scroll, .sc-founders, .sc-free, .tool-mini, .faq-item, .hc {
  background: var(--surface);
}
.pricing-card.pro { background: var(--surface); }
.hero-copy h1 .hl { background: none; -webkit-text-fill-color: currentColor; color: var(--primary-3); }

/* ---------- two real panel screens, one in front of the other ---------- */
.shot-pair { position: relative; min-height: 560px; }
.shot-pair img {
  position: absolute; width: 58%; height: auto;
  border-radius: 18px; border: 1px solid var(--line-strong); background: var(--surface);
}
.shot-pair .sp-back { right: 0; top: 0; opacity: .55; }
.shot-pair .sp-front { left: 4%; top: 48px; }
.shot-pair figcaption { position: absolute; left: 0; right: 0; bottom: -34px; text-align: center; }
#showcase .show-lead .shot-pair, #create .shot-pair { aspect-ratio: 10 / 11.5; min-height: 0; margin-bottom: 40px; }
.show-shot.single img { width: min(380px, 100%); margin: 0 auto; border-radius: 18px; border: 1px solid var(--line-strong); }

/* The Talk to Claude section: copy beside screens, second row mirrored. */
.talk-lead { margin-top: 24px; }
.talk-lead + .talk-lead { margin-top: 96px; }
.beta-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 9px 2px; border-radius: 999px;
  font: 400 11px/1.4 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase;
  color: var(--primary-3); border: 1px solid rgba(124, 108, 255, 0.4); background: rgba(124, 108, 255, 0.1);
}
@media (min-width: 861px) {
  .talk-lead.flip { grid-template-columns: 0.95fr 1.05fr; }
}
@media (max-width: 860px) {
  .talk-lead.flip .show-shot { order: 2; }
  .shot-pair img { width: 66%; }
  .shot-pair .sp-front { left: 0; }
}
#showcase .show-lead, #create .show-lead { grid-template-columns: 1fr 1fr; gap: 64px; border-bottom: 0; }
@media (max-width: 860px) { #showcase .show-lead, #create .show-lead { grid-template-columns: 1fr; gap: 40px; } }
.hero-stage::before, .hero-stage::after, .hero::after { display: none !important; background: none !important; }
.hero > .wrap:not(.hero-cards)::after { display: none; }

/* No gradients at all on this page: the ambient glow blobs, the gradient
   headline word, the Buy now button and the small icon tiles go flat. */
.ambient, .ambient i { display: none !important; }
.sc-site .hero-copy h1 .hl, .hero-copy h1 .hl { background: none !important; -webkit-text-fill-color: var(--primary-3) !important; color: var(--primary-3) !important; }
.nav-links a.nav-dl, .nav-beta-link { background: var(--primary) !important; }
.ht-ic { background: var(--primary) !important; }
#scCut, .sc-cut { background: var(--surface) !important; }

/* The screen pair: tall enough for both screens, caption underneath. */
#showcase .show-lead .shot-pair, #create .shot-pair { aspect-ratio: 1 / 1.34; margin-bottom: 48px; }
.shot-pair .sp-back { opacity: .7; }
.shot-pair figcaption { bottom: -40px; }
#create .talk-lead:not(.flip) .shot-pair { aspect-ratio: 1 / 1.46; }
@media (max-width: 860px) {
  #showcase .show-lead .shot-pair, #create .shot-pair, #create .talk-lead:not(.flip) .shot-pair { aspect-ratio: auto; height: calc(100vw * 1.62); max-height: 1100px; margin-bottom: 56px; }
}