/* /start: the onboarding. One question a screen, in the middle of it, and the
   button pinned in the same place at the bottom of every screen. Built on
   site.css (colours, type, buttons); this is only the funnel's own layout. */
.start-page { min-height: 100svh; background: var(--bg); }
.start-page .nav, .start-page .skip { display: none; }

.st-top { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; height: 64px; padding: 0 var(--gutter); background: linear-gradient(var(--bg) 70%, transparent); }
.st-top .logo { grid-column: 2; justify-self: center; }
.st-back { grid-column: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text-2); cursor: pointer; }
.st-back svg { width: 18px; height: 18px; }
.st-back:hover { color: var(--text); border-color: var(--line-3); }
.st-bar { grid-column: 1 / -1; height: 3px; margin-top: -3px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; align-self: end; }
.st-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #ff3d5a, #ff9a6b); transition: width 0.5s var(--ease); }

/* The screen fills the window under the header; its content sits in the
   middle of what is left above the pinned button, and scrolls when it is taller. */
:root { --cta-room: calc(96px + env(safe-area-inset-bottom)); }
.st { width: min(100% - 2 * var(--gutter), 560px); margin: 0 auto; }
.st-screen { display: flex; flex-direction: column; min-height: calc(100svh - 64px); padding: 12px 0 var(--cta-room); opacity: 1; transform: none; transition: opacity 0.26s var(--ease), transform 0.34s var(--ease); }
.st-screen.out { opacity: 0; transform: translateY(-8px); transition-duration: 0.16s; }
.st-screen.pre { opacity: 0; transform: translateY(14px); transition: none; }
.st-body { margin: auto 0; display: grid; gap: 20px; align-content: center; }

.st-kicker { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.st-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.st h1 { font: 600 clamp(30px, 6.6vw, 44px)/1.04 var(--tight); letter-spacing: -0.04em; text-wrap: balance; max-width: 16ch; }
.st .st-sub { margin: -6px 0 0; color: var(--text-2); font-size: clamp(16px, 1.6vw, 18.5px); line-height: 1.5; }
.st-small { margin: -6px 0 0; color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.st-small b { color: var(--text); font-weight: 600; }
.st-small a { color: var(--text); }

/* the app they pasted, above the first question */
.st-chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text-2); font: 500 13.5px/1 var(--sans); }
.st-chip img { width: 18px; height: 18px; border-radius: 5px; }

/* fields */
.st-field { display: grid; gap: 8px; }
.st-field label { font: 500 13px/1 var(--sans); color: var(--dim); }
.st-field input { height: 56px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: 500 16px/1 var(--sans); outline: none; width: 100%; }
.st-field input:focus { border-color: var(--line-3); }
.st-field input::placeholder { color: var(--faint); }
.st-code { text-align: center; letter-spacing: 0.4em; font: 600 26px/1 var(--mono) !important; height: 64px !important; }
.st-error { color: #ff8f9f; font-size: 14px; line-height: 1.45; margin: -6px 0 0; }
.st-error:empty { display: none; }
.st-error a { color: var(--text); }
.st-link { justify-self: center; background: none; border: 0; padding: 6px; color: var(--dim); font: 500 14.5px/1 var(--sans); cursor: pointer; }
.st-link:hover { color: var(--text); }
.st-google { display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; border-radius: 14px; background: #fff; color: #1f1f1f; font: 600 16px/1 var(--sans); text-decoration: none; }
.st-google svg { width: 20px; height: 20px; }
.st-google:hover { background: #f1f1f1; }
.st-or { display: flex; align-items: center; gap: 14px; color: var(--faint); font-size: 13px; }
.st-or::before, .st-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* answer cards: one tap, and on */
.st-opts { display: grid; gap: 10px; }
.st-opt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; min-height: 60px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-align: left; cursor: pointer; font: 500 16.5px/1.3 var(--sans); transition: border-color 0.18s, background 0.18s, transform 0.18s var(--ease); }
.st-opt em { font-style: normal; color: var(--dim); font: 500 12px/1 var(--mono); }
.st-opt:hover { border-color: var(--line-3); background: var(--card-2); }
.st-opt:active { transform: scale(0.99); }
.st-opt.on { border-color: var(--accent); background: rgba(255, 61, 90, 0.1); }
.st-opt.on em { color: var(--accent); }
.st-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.st-pill { height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: 500 15.5px/1 var(--sans); cursor: pointer; transition: border-color 0.18s, background 0.18s, color 0.18s; }
.st-pill:hover { border-color: var(--line-3); }
.st-pill.on { border-color: var(--accent); background: var(--accent); color: #fff; }

/* the answer read back */
.st-mirror { padding: 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 10px; }
.st-mirror h2 { font: 600 clamp(22px, 4.6vw, 28px)/1.15 var(--tight); letter-spacing: -0.03em; }
.st-mirror p { margin: 0; color: var(--text-2); line-height: 1.55; }
.st-mirror .st-num { font: 600 clamp(34px, 8vw, 52px)/1 var(--tight); letter-spacing: -0.04em; color: #ff8f9f; }

/* the proof: two of Typally's ads and one line from them, short enough to sit above the button */
.st-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-proof video { width: 100%; height: min(36svh, 330px); object-fit: cover; border-radius: 16px; background: #000; border: 1px solid var(--line-2); }
.st-quote { padding: 16px 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 6px; }
.st-quote .stars { display: flex; gap: 3px; color: #f5b301; }
.st-quote .stars svg { width: 14px; height: 14px; }
.st-quote p { margin: 0; color: var(--text-2); line-height: 1.45; font-size: 15px; }
.st-quote b { font-size: 13px; color: var(--dim); font-weight: 500; }

/* the checklist that waits on a job */
.st-list { display: grid; gap: 12px; }
.st-item { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 16px; transition: color 0.3s; }
.st-item i { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-3); display: grid; place-items: center; flex: none; transition: background 0.3s, border-color 0.3s; }
.st-item svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity 0.2s; }
.st-item.now { color: var(--text); }
.st-item.now i { border-color: var(--accent); animation: st-pulse 1.2s ease-in-out infinite; }
.st-item.done { color: var(--text); }
.st-item.done i { background: var(--ok); border-color: var(--ok); }
.st-item.done svg { opacity: 1; }
@keyframes st-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 61, 90, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(255, 61, 90, 0); } }

/* the small cube that turns while a site is read (same as the loading screen) */
.st-cube { width: 54px; height: 54px; position: relative; transform-style: preserve-3d; animation: boot-turn 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite; margin: 6px 0 4px; }
.st-cube b { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px; box-sizing: border-box; background: #000; border-radius: 6px; backface-visibility: hidden; }
.st-cube i { display: block; border-radius: 2px; background: var(--m); animation: boot-solve 2.6s steps(1) infinite; }
@keyframes boot-turn { 0% { transform: rotateX(-24deg) rotateY(147deg); } 45%, 100% { transform: rotateX(-24deg) rotateY(-33deg); } }
@keyframes boot-solve { 0%, 30% { background: var(--m); } 44%, 100% { background: var(--c); } }

/* the three looks. The previews carry a working stamp along their foot; the
   frame is a little shorter than the film so it never shows. */
.st-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.st-style { display: grid; gap: 8px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; text-align: left; }
.st-style .st-look { position: relative; aspect-ratio: 9 / 15; border-radius: 14px; overflow: hidden; background: var(--card-2); border: 1.5px solid var(--line); transition: border-color 0.18s, transform 0.2s var(--ease); }
.st-style .st-look video, .st-style .st-look img { position: absolute; left: 0; top: 0; width: 100%; height: 108%; object-fit: cover; object-position: 50% 0; }
.st-style:hover .st-look { border-color: var(--line-3); transform: translateY(-2px); }
.st-style.on .st-look { border-color: var(--accent); }
.st-style b { font: 600 15px/1.2 var(--sans); }

/* how many */
.st-count { display: flex; align-items: center; gap: 18px; }
.st-count button { width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: 600 24px/1 var(--sans); cursor: pointer; }
.st-count button:disabled { opacity: 0.35; cursor: default; }
.st-count output { font: 600 44px/1 var(--tight); letter-spacing: -0.04em; min-width: 2ch; text-align: center; }

/* The button: pinned to the bottom of the window on every screen, so it is
   always in the same place under the thumb, whatever the screen holds. */
.st-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 22px var(--gutter) max(18px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 34%); }
.st-cta .btn { display: flex; width: min(100%, 560px); margin: 0 auto; height: 58px; font-size: 16.5px; border-radius: 15px; }
.st-cta .btn[disabled] { opacity: 0.45; cursor: default; transform: none; box-shadow: none; }
.st-cta[hidden] { display: none; }

.st-noscript { padding: 40px var(--gutter); text-align: center; color: var(--text-2); }

@media (max-width: 420px) {
  .st-styles { gap: 8px; }
  .st-style b { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) { .st-screen, .st-bar i, .st-cube, .st-cube i { transition: none; animation: none; } }