/* EndFrame page, dark redesign (2026-10-29).
   Self contained: does not load styles.css or endframe.css, so Script Cutter's
   page is untouched while this one changes. One family (Switzer) for all text,
   JetBrains Mono for the small labels because the panel itself uses mono there.
   Colours: near black, warm off white, EndFrame amber, and the panel's own
   teal for "matched". Nothing else. */

@font-face { font-family: "Switzer"; src: url("assets/fonts/Switzer-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("assets/fonts/Switzer-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("assets/fonts/Switzer-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Black base. Scalepro's navy was tried and the owner preferred black (2026-10-29). */
  --bg: #050505;
  --bg-2: #0e0e10;
  --bg-3: #161618;
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --ink: #f1efea;
  --ink-2: #a8a6a0;
  --ink-3: #6b6964;
  --amber: #f2b544;
  --amber-ink: #1a1408;
  --teal: #4fb39a;
  --glow: 242, 181, 68;      /* this page's accent as r, g, b for glows */
  --r: 24px;
  --wrap: 1180px;
  --sans: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 500; color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  font: 500 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--amber); color: var(--amber-ink); box-shadow: 0 8px 30px -10px rgba(242, 181, 68, .6), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-ghost { background: rgba(255, 255, 255, .04); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .3); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 20; padding: 14px 0; background: linear-gradient(var(--bg) 40%, rgba(5, 5, 5, 0)); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -.01em; text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.nav-links {
  display: flex; gap: 4px; padding: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
.nav-links a { padding: 8px 16px; border-radius: 999px; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.nav-links a.is-here { color: var(--ink); background: rgba(255, 255, 255, .08); }
.nav-right { display: flex; align-items: center; gap: 10px; }

/* ---------- hero ---------- */
.hero { padding: 6px 0 0; }
.hero-box {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r); border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 0%, #17161a 0%, var(--bg-2) 55%, #0d0d0f 100%);
  padding: 96px 24px 88px; text-align: center;
}
/* Dot grid, faded toward the edges, and rings centred on the chip. */
.hero-box::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%);
}
.rings { position: absolute; left: 50%; top: 70px; z-index: -1; width: 0; height: 0; }
.rings i {
  position: absolute; left: 50%; top: 50%; border-radius: 50%;
  border: 1px solid rgba(242, 181, 68, .12); transform: translate(-50%, -50%);
  animation: ring 7s ease-in-out infinite;
}
.rings i:nth-child(1) { width: 180px; height: 180px; }
.rings i:nth-child(2) { width: 330px; height: 330px; animation-delay: .6s; border-color: rgba(242, 181, 68, .08); }
.rings i:nth-child(3) { width: 500px; height: 500px; animation-delay: 1.2s; border-color: rgba(255, 255, 255, .05); }
@keyframes ring { 50% { transform: translate(-50%, -50%) scale(1.04); opacity: .6; } }

.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: rgba(23, 23, 26, .9); border: 1px solid var(--line-2);
  font-size: 13px; color: var(--ink-2); text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(79, 179, 154, .15); }
.chip b { color: var(--ink); }

.hero h1 {
  margin: 30px auto 0; max-width: 15ch;
  font-weight: 700; font-size: clamp(44px, 8.4vw, 108px); line-height: 1.02; letter-spacing: -.045em;
  color: var(--ink);
}
.hero h1 .soft { color: var(--ink-2); }
.hero h1 .line { display: block; white-space: nowrap; }
.hero h1 .line.soft { color: var(--ink-2); }
/* "built" wears an After Effects style layer selection: a thin box with
   square handles on the corners and edges, and a small layer name tag. */
.sel { position: relative; display: inline-block; padding: 0 .1em; margin-left: .04em; }
.sel::before { content: ""; position: absolute; inset: .06em -.02em -.02em; border: 1.5px solid var(--amber); pointer-events: none; }
.sel .h { position: absolute; width: 9px; height: 9px; background: var(--bg-2); border: 1.5px solid var(--amber); transform: translate(-50%, -50%); }
.sel .tl { left: -.02em; top: .06em; } .sel .tr { left: calc(100% + .02em); top: .06em; }
.sel .bl { left: -.02em; top: calc(100% + .02em); } .sel .br { left: calc(100% + .02em); top: calc(100% + .02em); }
.sel .tm { left: 50%; top: .06em; } .sel .bm { left: 50%; top: calc(100% + .02em); }
.sel .ml { left: -.02em; top: 53%; } .sel .mr { left: calc(100% + .02em); top: 53%; }
.sel-tag {
  position: absolute; left: -.02em; bottom: calc(100% - .02em);
  padding: 4px 8px 3px; background: var(--amber); color: var(--amber-ink);
  font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .sel::before, .sel .h, .sel-tag { animation: selIn .5s .5s ease both; }
}
@keyframes selIn { from { opacity: 0; } }

.hero-sub { max-width: 600px; margin: 28px auto 0; font-size: 18px; color: var(--ink-2); }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.hero-meta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 30px; }
.works { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.app.sm { width: 26px; height: 26px; border-radius: 7px; font-size: 12px; }
.works .app.pr { margin-left: -4px; margin-right: 2px; }

/* ---------- product shot ---------- */
.shot { padding: 16px 0 0; }
.shot-box {
  position: relative; overflow: hidden; border-radius: var(--r);
  padding: 72px 24px 0;
  background:
    radial-gradient(60% 70% at 18% 0%, rgba(242, 181, 68, .55), transparent 70%),
    radial-gradient(55% 65% at 90% 10%, rgba(79, 179, 154, .35), transparent 70%),
    linear-gradient(180deg, #2a1f0d 0%, #120f0a 60%, #0d0c0b 100%);
}
.shot-box::after { /* fine grain so the gradient does not band */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.panel-frame {
  position: relative; z-index: 1; width: min(720px, 100%); margin: 0 auto;
  border-radius: 16px 16px 0 0; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16); border-bottom: 0;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
  background: #1b1c1f;
}
.panel-frame img { width: 100%; height: auto; }
.panel-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(13, 12, 11, 0), #0d0c0b); }
/* Labels that point at real rows of the screenshot, like the name tags in Runlyx. */
.tag {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  background: rgba(17, 17, 19, .92); border: 1px solid var(--line-2); color: var(--ink);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tag i { width: 8px; height: 8px; border-radius: 50%; }
.tag.ok i { background: var(--teal); }
.tag.held { border-color: rgba(242, 181, 68, .5); }
.tag.held i { background: var(--amber); }
.panel-wrap { position: relative; width: min(760px, 100%); margin: 0 auto; }
.panel-wrap .panel-frame { width: 100%; }
/* Tops are the rows' positions in panel-match.webp: "The Long Walk Home"
   sits at 53% of the crop, "Paper Kites" (the held one) at 74%. */
.tag-1 { right: calc(100% - 28px); top: 51%; }
.tag-2 { left: calc(100% - 28px); top: 72%; }

/* ---------- sections ---------- */
section.band { padding: 128px 0 0; }
.kicker { display: inline-flex; align-items: center; gap: 10px; }
.kicker::before { content: ""; width: 18px; height: 1px; background: var(--amber); }
h2 {
  margin: 18px 0 0; max-width: 18ch;
  font-weight: 700; font-size: clamp(34px, 5vw, 60px); line-height: 1.04; letter-spacing: -.035em;
}
h3 { margin: 0; font-weight: 500; font-size: 21px; line-height: 1.3; letter-spacing: -.01em; }
.lede { max-width: 620px; margin: 22px 0 0; font-size: 18px; color: var(--ink-2); }
p { margin: 0; }

/* Three ruled columns rather than a card grid. */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; margin-top: 64px; }
.col { border-top: 1px solid var(--line-2); padding-top: 26px; }
.col .n { display: block; margin-bottom: 40px; color: var(--amber); }
.col p { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.proof { margin-top: 24px; font-family: var(--mono); font-size: 13px; }
.proof div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--line); color: var(--ink-2); }
.proof .ok span:last-child { color: var(--teal); }
.proof .held span:last-child { color: var(--amber); }

/* ---------- the two halves ---------- */
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; }
.half { border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-2); padding: 36px; display: flex; flex-direction: column; }
.half-top { display: flex; align-items: center; gap: 14px; }
.app { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.app.ae { background: #00005b; color: #9999ff; }
.app.pr { background: #00005b; color: #e599ff; }
.half .role { margin-top: 10px; color: var(--ink-2); }
.half ul { list-style: none; margin: 28px 0 0; padding: 0; flex: 1; }
.half li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink-2); }
.half li::before { content: ""; position: absolute; left: 2px; top: 21px; width: 8px; height: 8px; border-radius: 2px; background: var(--teal); opacity: .8; }
.half-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.amt { font-weight: 700; font-size: 34px; letter-spacing: -.03em; }
.per { color: var(--ink-3); font-size: 15px; }
.note { margin-top: 24px; color: var(--ink-2); }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 64px; counter-reset: s; }
.step { position: relative; padding: 30px 28px 32px; border-radius: 22px; background: var(--bg-2); border: 1px solid var(--line); }
.step .mono { display: flex; justify-content: space-between; }
.step h3 { margin-top: 56px; }
.step p { margin-top: 10px; font-size: 16px; color: var(--ink-2); }

/* ---------- trial ---------- */
.trial-box {
  position: relative; overflow: hidden; border-radius: var(--r);
  border: 1px solid rgba(242, 181, 68, .25);
  background: radial-gradient(80% 120% at 50% 120%, rgba(242, 181, 68, .22), transparent 60%), var(--bg-2);
  padding: 80px 24px; text-align: center;
}
.trial-box h2 { margin-left: auto; margin-right: auto; }
.trial-box .lede { margin-left: auto; margin-right: auto; }
.trial-box .hero-ctas { margin-top: 36px; }
.fine { max-width: 620px; margin: 26px auto 0; font-size: 15px; color: var(--ink-3); }
.fine a { color: var(--ink-2); }

/* ---------- pricing ---------- */
.billing { display: inline-flex; gap: 4px; margin-top: 36px; padding: 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); }
.ef-bill-opt { border: 0; background: none; color: var(--ink-2); font: 500 14px/1 var(--sans); padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.ef-bill-opt.is-on { background: var(--ink); color: var(--bg); }
.save { margin-left: 6px; color: var(--teal); }
.ef-bill-opt.is-on .save { color: #1d6b57; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.pricing-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-2); padding: 32px; }
.pricing-card.pro { border-color: rgba(242, 181, 68, .45); background: linear-gradient(180deg, rgba(242, 181, 68, .09), rgba(242, 181, 68, 0) 50%), var(--bg-2); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.best { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; background: var(--amber); color: var(--amber-ink); }
.pricing-card h3 { margin-top: 26px; }
.plan-for { margin-top: 6px; font-size: 15px; color: var(--ink-3); }
.plan-amt { margin-top: 26px; display: flex; align-items: baseline; gap: 8px; }
.ef-was { color: var(--ink-3); text-decoration: line-through; font-size: 18px; }
.ef-was:empty { display: none; }
.ef-amt-now { font-weight: 700; font-size: 48px; letter-spacing: -.04em; line-height: 1; }
.ef-per { color: var(--ink-3); }
.ef-plan-note { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.pricing-card ul, .tier ul { list-style: none; margin: 26px 0 30px; padding: 0; flex: 1; }
.pricing-card li, .tier li { position: relative; padding: 9px 0 9px 24px; font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--line); }
.pricing-card li::before, .tier li::before { content: ""; position: absolute; left: 0; top: 14px; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.pricing-card li.no { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .2); }
.pricing-card li.no::before { border-color: var(--ink-3); width: 10px; height: 0; border-left: 0; transform: none; top: 20px; }
.pricing-card .btn { width: 100%; }

/* ---------- teams: one row per tier ---------- */
.tiers { margin-top: 56px; border-top: 1px solid var(--line-2); }
.tier { display: grid; grid-template-columns: 1.1fr 1fr 1.6fr auto; gap: 32px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--line-2); }
.tier-name { font-weight: 700; font-size: 28px; letter-spacing: -.02em; }
.tier-for { margin-top: 6px; font-size: 15px; color: var(--ink-3); }
.tier-amt { font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
.tier-amt span { font-weight: 400; font-size: 15px; color: var(--ink-3); letter-spacing: 0; }
.tier-year { margin-top: 6px; font-size: 14px; color: var(--ink-3); }
.tier ul { margin: 0; }
.tier li:first-child { border-top: 0; padding-top: 0; }
.tier li:first-child::before { top: 5px; }

/* ---------- questions ---------- */
.faq { margin-top: 56px; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-weight: 500; font-size: 20px; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-weight: 400; color: var(--ink-2); transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { max-width: 760px; padding: 0 0 28px; color: var(--ink-2); }
.faq .a p + p { margin-top: 12px; }
.faq-group { margin-top: 72px; }
.faq-group:first-of-type { margin-top: 56px; }

/* ---------- footer ---------- */
footer { margin-top: 140px; border-top: 1px solid var(--line); padding: 56px 0 40px; overflow: hidden; }
.foot { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.foot p { margin-top: 12px; color: var(--ink-3); font-size: 15px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; }
.foot-links a { color: var(--ink-2); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
.wordmark {
  margin-top: 56px; font-weight: 700; font-size: clamp(80px, 19vw, 260px); line-height: .8; letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .09); user-select: none; white-space: nowrap;
}
.copy { margin-top: 28px; color: var(--ink-3); font-size: 13px; }

/* ---------- reveal on scroll ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rings i { animation: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .tag-1 { right: auto; left: 12px; }
  .tag-2 { left: auto; right: 12px; }
}
@media (max-width: 920px) {
  .nav-links { display: none; }
  .cols, .steps { grid-template-columns: 1fr; gap: 16px; }
  .col .n { margin-bottom: 18px; }
  .cols { gap: 36px; }
  .halves, .plans { grid-template-columns: 1fr; }
  .tier { grid-template-columns: 1fr; gap: 18px; }
  .step h3 { margin-top: 28px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .hero-box { padding: 72px 16px 64px; }
  /* "while you edit." is the longest line and must fit 358px. */
  .hero h1 { font-size: clamp(32px, 10.4vw, 64px); }
  .hero-sub { font-size: 16px; }
  .hero-ctas .btn { width: 100%; }
  .works { flex-wrap: wrap; justify-content: center; text-align: center; font-size: 13px; }
  .sel .h { width: 7px; height: 7px; }
  .sel-tag { font-size: 9px; padding: 3px 6px 2px; }
  .nav-right .btn-ghost { display: none; }
  .shot-box { padding: 40px 12px 0; }
  .tag { font-size: 12px; padding: 6px 11px; }
  section.band { padding-top: 96px; }
  .half, .pricing-card { padding: 26px 22px; }
  .trial-box { padding: 56px 18px; }
  .faq summary { font-size: 17px; }
}

/* ---------- home: choose a tool ---------- */
.home-hero { padding-bottom: 96px; }
.choose { padding-top: 16px; }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tool {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 640px; padding: 36px 36px 0; border-radius: var(--r);
  border: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: border-color .25s ease, transform .25s ease;
}
.tool:hover { transform: translateY(-3px); }
.tool-ef { background: radial-gradient(90% 60% at 20% 0%, rgba(242, 181, 68, .28), transparent 70%), var(--bg-2); }
.tool-ef:hover { border-color: rgba(242, 181, 68, .5); }
.tool-sc { background: radial-gradient(90% 60% at 20% 0%, rgba(139, 116, 255, .3), transparent 70%), var(--bg-2); }
.tool-sc:hover { border-color: rgba(139, 116, 255, .55); }
.tool-head { display: flex; justify-content: space-between; align-items: center; }
.tool-mark { width: 44px; height: 44px; }
.tool-apps { display: inline-flex; gap: 6px; }
.tool h2 { margin-top: 44px; font-size: clamp(36px, 4.4vw, 56px); }
.tool-line { margin-top: 14px; max-width: 460px; color: var(--ink-2); }
.tool-go { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.tool-go span { transition: transform .25s ease; }
.tool:hover .tool-go span { transform: translateX(4px); }
.tool-shot {
  position: relative; margin: 40px auto 0; width: 82%; flex: 1; min-height: 260px;
  border-radius: 14px 14px 0 0; overflow: hidden; border: 1px solid var(--line-2); border-bottom: 0;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9);
}
.tool-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.tool-sc .tool-shot { width: 62%; }
@media (max-width: 920px) {
  .tools { grid-template-columns: 1fr; }
  .tool { min-height: 560px; }
}
@media (max-width: 640px) {
  .tool { padding: 26px 22px 0; min-height: 500px; }
  .tool h2 { margin-top: 28px; }
  .tool-shot, .tool-sc .tool-shot { width: 92%; }
}
/* The EndFrame shot is a wide panel; show its left part larger so the rows read. */
.tool-ef .tool-shot img { width: 150%; max-width: none; height: auto; right: auto; bottom: auto; object-fit: initial; }
@media (max-width: 640px) { .tool-ef .tool-shot img { width: 170%; } }


/* =====================================================================
   Scalepro feel (owner's pick, 2026-10-29): softer medium weight type,
   glass cards with a lit top edge, centred section heads with a small tag,
   a statement paragraph over a beam of light, dotted corners on the trial
   box, a glowing line above the footer. Layout and colours stay ours.
   ===================================================================== */
body { background:
  radial-gradient(1200px 600px at 50% -200px, rgba(var(--glow), .10), transparent 70%),
  var(--bg); }

.hero h1 { font-weight: 500; letter-spacing: -.04em; }
.hero h1 .line.soft { color: transparent; background: linear-gradient(180deg, #cfccc4, #807d76); -webkit-background-clip: text; background-clip: text; }
h2 { font-weight: 500; letter-spacing: -.03em; line-height: 1.08; }
.tier-name, .amt, .ef-amt-now, .tier-amt { font-weight: 500; }

/* Hero box: dark glass with a glow rising behind the headline. */
.hero-box {
  background:
    radial-gradient(50% 45% at 50% 38%, rgba(var(--glow), .14), transparent 70%),
    radial-gradient(120% 90% at 50% 0%, #19191c 0%, var(--bg-2) 55%, #080809 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Section heads: centred, with a small tag above. */
.band > .wrap > .kicker,
.band > .wrap > h2,
.band > .wrap > .lede { display: block; margin-left: auto; margin-right: auto; text-align: center; }
.band > .wrap > .kicker { width: max-content; }
.band > .wrap > h2 { max-width: 20ch; }
.kicker {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03); font-size: 11px; color: var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.kicker::before { display: none; }
.billing { display: flex; width: max-content; margin-left: auto; margin-right: auto; }

/* Glass cards with a lit top edge. */
.half, .step, .pricing-card, .tool, .tier-wrap {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 40%), var(--bg-2);
  border-color: var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -40px rgba(0, 0, 0, .9);
}
.half::after, .pricing-card::after, .step::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--glow), .55), transparent);
}
.half { position: relative; }
.pricing-card.pro {
  background: linear-gradient(180deg, rgba(var(--glow), .12), rgba(var(--glow), 0) 45%), var(--bg-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 60px -20px rgba(var(--glow), .35);
}
.btn-primary { box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 10px 34px -8px rgba(var(--glow), .65); }
.btn-ghost { background: rgba(255, 255, 255, .03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

/* Statement over a beam of light. */
.statement { padding: 140px 0 0; text-align: center; }
.statement p {
  max-width: 900px; margin: 22px auto 0;
  font-weight: 500; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.25; letter-spacing: -.025em; color: var(--ink);
}
.statement .dim { color: var(--ink-3); }
.statement .hl { color: transparent; background: linear-gradient(90deg, #ffd27a, var(--amber) 60%, #e08a2e); -webkit-background-clip: text; background-clip: text; }
.beam { position: relative; height: 280px; margin-top: 40px; pointer-events: none; }
.beam::before { /* the bright horizon */
  content: ""; position: absolute; left: 50%; top: 40px; width: min(760px, 90%); height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--glow), .9) 30%, #fff 50%, rgba(var(--glow), .9) 70%, transparent);
  box-shadow: 0 0 40px 6px rgba(var(--glow), .45);
}
.beam::after { /* the shaft of light dropping from it */
  content: ""; position: absolute; left: 50%; top: 40px; width: 160px; height: 240px; transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 0%, rgba(255, 244, 220, .9), rgba(var(--glow), .45) 30%, transparent 75%);
  filter: blur(6px); opacity: .85;
}
.statement + .band { padding-top: 0; margin-top: -120px; position: relative; }

/* Trial box: dotted texture in two corners. */
.trial-box { border-color: var(--line-2); background: radial-gradient(70% 120% at 50% 120%, rgba(var(--glow), .2), transparent 60%), var(--bg-2); }
.trial-box::before, .trial-box::after {
  content: ""; position: absolute; width: 260px; height: 220px; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.5px); background-size: 9px 9px;
}
.trial-box::before { left: 0; top: 0; -webkit-mask-image: radial-gradient(100% 100% at 0 0, #000, transparent 70%); mask-image: radial-gradient(100% 100% at 0 0, #000, transparent 70%); }
.trial-box::after { right: 0; bottom: 0; -webkit-mask-image: radial-gradient(100% 100% at 100% 100%, #000, transparent 70%); mask-image: radial-gradient(100% 100% at 100% 100%, #000, transparent 70%); }
.trial-box > * { position: relative; }

/* Glowing line above the footer. */
footer { position: relative; border-top: 0; }
footer::before {
  content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 90%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(var(--glow), .9), #fff, rgba(var(--glow), .9), transparent);
  box-shadow: 0 0 30px 4px rgba(var(--glow), .45);
}
footer::after {
  content: ""; position: absolute; left: 50%; top: -60px; width: min(700px, 80%); height: 60px; transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 100%, rgba(var(--glow), .25), transparent 70%); pointer-events: none;
}

/* FAQ in a glass panel. */
.faq { border: 1px solid var(--line-2); border-radius: var(--r); padding: 0 32px; background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%), var(--bg-2); }
.faq details:last-child { border-bottom: 0; }
.faq { max-width: 900px; margin-left: auto; margin-right: auto; }

/* Home: each tool card glows in its own colour. */
.tool-ef { --glow: 242, 181, 68; }
.tool-sc { --glow: 139, 116, 255; }
.tool { position: relative; }
.tool::after { content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--glow), .7), transparent); }
.tool-ef { background: radial-gradient(80% 55% at 25% 0%, rgba(242, 181, 68, .22), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%), var(--bg-2); }
.tool-sc { background: radial-gradient(80% 55% at 25% 0%, rgba(139, 116, 255, .26), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%), var(--bg-2); }
body.home { --glow: 190, 170, 255; }
body.home .beam::before { background: linear-gradient(90deg, transparent, rgba(242, 181, 68, .9) 25%, #fff 50%, rgba(139, 116, 255, .9) 75%, transparent); box-shadow: 0 0 40px 6px rgba(190, 160, 255, .35); }
body.home .statement .hl { background: linear-gradient(90deg, #ffd27a, #f2b544 35%, #b9a6ff 65%, #8b74ff); -webkit-background-clip: text; background-clip: text; }

@media (max-width: 640px) {
  .statement { padding-top: 100px; }
  .beam { height: 200px; }
  .statement + .band { margin-top: -90px; }
  .faq { padding: 0 18px; }
  .trial-box::before, .trial-box::after { width: 140px; height: 120px; }
}
/* Stronger beam, and a warm panel backdrop on black. */
.beam { height: 340px; }
.beam::before { height: 2px; box-shadow: 0 0 50px 10px rgba(var(--glow), .5), 0 0 120px 20px rgba(var(--glow), .2); }
.beam::after { width: 240px; height: 300px; opacity: 1; filter: blur(10px);
  background: radial-gradient(45% 100% at 50% 0%, #fff8e8 0%, rgba(var(--glow), .7) 22%, rgba(var(--glow), .18) 55%, transparent 80%); }
.statement + .band { margin-top: -160px; }
.shot-box {
  background:
    radial-gradient(60% 70% at 20% 0%, rgba(242, 181, 68, .5), transparent 70%),
    radial-gradient(55% 65% at 88% 8%, rgba(110, 100, 255, .4), transparent 70%),
    linear-gradient(180deg, #1c160c 0%, #0d0b09 60%, #080808 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.panel-frame::after { background: linear-gradient(rgba(8, 8, 8, 0), #080808); }
@media (max-width: 640px) { .beam { height: 240px; } .beam::after { height: 210px; } .statement + .band { margin-top: -110px; } }


/* No glows (owner, 2026-10-29): the beam, the footer line, lit card edges,
   button halos and the soft colour washes are all switched off here. The
   flat structure from the Scalepro pass stays. */
body { background: var(--bg); }
.hero-box { background: radial-gradient(120% 90% at 50% 0%, #19191c 0%, var(--bg-2) 55%, #080809 100%); }
.half::after, .pricing-card::after, .step::after, .tool::after, footer::before, footer::after { display: none; }
.half, .step, .pricing-card, .tool { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.pricing-card.pro { background: var(--bg-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); border-color: rgba(242, 181, 68, .45); }
.btn-primary { box-shadow: none; }
.btn-ghost { box-shadow: none; }
.chip { box-shadow: none; }
.chip .dot { box-shadow: none; }
.tag { box-shadow: none; }
.trial-box { background: var(--bg-2); }
.tool-ef, .tool-sc { background: var(--bg-2); }
.statement { padding-bottom: 20px; }
.statement + .band { margin-top: 0; padding-top: 128px; }
.statement .hl { background: none; color: var(--amber); }
body.home .statement .hl { background: none; color: var(--ink); }
footer { border-top: 1px solid var(--line); }
@media (max-width: 640px) { .statement + .band { margin-top: 0; padding-top: 96px; } }
.shot-box { background: var(--bg-2); border: 1px solid var(--line); box-shadow: none; }
.shot-box::after { display: none; }
.panel-frame { box-shadow: none; }
.panel-frame::after { background: linear-gradient(rgba(14, 14, 16, 0), var(--bg-2)); }

/* ---------- free tools page (2026-10-29) ---------- */
.free-list { padding-top: 96px; }
.free-tool { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; padding: 72px 0; border-top: 1px solid var(--line); }
.free-tool:first-child { border-top: 0; padding-top: 0; }
.free-tool.flip .free-shot { order: 2; }
.free-shot { display: flex; justify-content: center; }
.free-shot img { width: min(340px, 100%); height: auto; border-radius: 18px; border: 1px solid var(--line-2); background: var(--bg-2); }
.free-shot.glitch { flex-direction: column; align-items: center; gap: 16px; }
.free-shot.glitch .gf { width: 100%; max-width: 520px; border-radius: 14px; background: #000; }
.free-shot.glitch .gp { width: min(300px, 100%); }
.free-tags { display: flex; align-items: center; gap: 10px; }
.free-copy h2 { margin-top: 18px; max-width: none; font-size: clamp(34px, 4vw, 52px); }
.free-line { margin-top: 14px; max-width: 520px; color: var(--ink-2); font-size: 18px; }
.free-points { list-style: none; margin: 22px 0 0; padding: 0; max-width: 520px; }
.free-points li { position: relative; padding: 9px 0 9px 24px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px; }
.free-points li::before { content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 7px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }
.free-form { margin-top: 28px; max-width: 520px; }
.free-label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--ink-3); }
.free-row { display: flex; gap: 10px; }
.free-row input[type=email] {
  flex: 1; min-width: 0; height: 48px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); font: 400 15px var(--sans);
}
.free-row input[type=email]:focus { outline: none; border-color: rgba(255, 255, 255, .4); }
.free-row .btn[disabled] { opacity: .6; cursor: default; transform: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.free-msg { min-height: 22px; margin-top: 10px; font-size: 14px; color: var(--ink-3); }
.free-msg.ok { color: var(--teal); }
.free-msg.err { color: #ef8b6b; }
.free-more { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.free-more a { color: var(--ink-2); }
.free-fine { max-width: 640px; margin: 24px auto 0; text-align: center; font-size: 13.5px; color: var(--ink-3); }
.free-fine a { color: var(--ink-2); }
.paid-mini { margin-top: 48px; }
.paid-mini .tool { min-height: 0; padding: 32px 32px 30px; }
.paid-mini .tool h3 { font-size: 28px; font-weight: 500; letter-spacing: -.02em; }
@media (max-width: 920px) {
  .free-tool { grid-template-columns: 1fr; gap: 36px; padding: 56px 0; }
  .free-tool.flip .free-shot { order: 0; }
}
@media (max-width: 640px) {
  .free-row { flex-direction: column; }
  .free-row input[type=email] { flex: none; width: 100%; }
  .free-row .btn { width: 100%; }
}
.free-strip { display: flex; align-items: center; gap: 20px; margin-top: 16px; padding: 22px 28px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--bg-2); text-decoration: none; color: var(--ink); }
.free-strip .mono { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(79, 179, 154, .45); color: var(--teal); }
.free-strip-text { flex: 1; color: var(--ink-2); }
.free-strip-text b { color: var(--ink); font-weight: 500; }
.free-strip:hover { border-color: rgba(255, 255, 255, .3); }
@media (max-width: 640px) { .free-strip { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; } }
.free-how { margin-top: 26px; max-width: 520px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); }
.free-how-title { margin: 0 0 10px; }
.free-how ol { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.free-how li { position: relative; padding: 6px 0 6px 32px; font-size: 15px; color: var(--ink-2); counter-increment: st; }
.free-how li::before { content: counter(st); position: absolute; left: 0; top: 6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 400 11px/1 var(--mono); color: var(--ink-3); }