/* Landing page only. The shared component styles (job cards, media grid,
   quality picker) live in style.css and are reused verbatim, so the public
   page and the workspace render results identically. */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── header ─────────────────────────────────────────────────────────────── */
.top-nav{display:flex;gap:22px}
.top-nav a{
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:600;
}
.top-nav a:hover{color:var(--text)}
.nav-cta{
  height:34px;padding:0 15px;border-radius:999px;
  background:#111827;color:#fff;font-size:12px;font-weight:700;
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
}
.nav-cta:hover{background:#252b35}
.nav-cta.ghost{
  background:#fff;color:#374151;border:1px solid var(--line);
}
.nav-cta.ghost:hover{background:#f3f4f6}
@media(max-width:820px){ .top-nav{display:none} }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero-band{
  background:
    radial-gradient(ellipse 60% 70% at 50% -10%,rgba(17,24,39,.07),transparent),
    var(--bg);
  padding:64px 0 52px;
}
.hero-inner{width:min(760px,calc(100% - 40px));margin:0 auto;text-align:center}
.hero-inner h1{
  margin:0;font-size:clamp(30px,5.2vw,50px);line-height:1.08;
  letter-spacing:-1.8px;text-wrap:balance;
}
.hero-sub{
  margin:16px auto 0;max-width:560px;
  color:var(--muted);font-size:16px;line-height:1.8;
}

.paste-box{
  position:relative;display:flex;margin-top:32px;
  background:var(--surface);border:1px solid #dfe3e8;border-radius:16px;
  box-shadow:0 12px 35px rgba(15,23,42,.08);
  transition:border-color .18s,box-shadow .18s;
}
.paste-box:focus-within{
  border-color:#9ca3af;box-shadow:0 12px 35px rgba(15,23,42,.12);
}
.paste-box textarea{
  flex:1;min-width:0;min-height:60px;padding:19px 18px;resize:none;
  border:0;outline:0;background:transparent;color:var(--text);
  font:inherit;font-size:15px;line-height:1.5;
}
.paste-box textarea::placeholder{color:#a1a7b0}
.paste-go{
  flex-shrink:0;margin:9px;padding:0 20px;height:auto;min-height:42px;
  display:inline-flex;align-items:center;gap:10px;
  border-radius:11px;background:#111827;color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;
}
.paste-go:hover{background:#252b35}
.paste-go:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:640px){
  .paste-box{flex-direction:column}
  .paste-go{margin:0 9px 9px;justify-content:center}
}

.paste-meta{
  display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;margin-top:14px;
}
.link-btn{
  background:transparent;color:var(--muted);
  font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;
}
.link-btn:hover{color:var(--text)}
.quota-note{color:var(--muted-2);font-size:12px}

.hero-inner .quality-panel{margin-top:16px;text-align:left}

.trust-row{
  display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
  margin:26px 0 0;padding:0;list-style:none;
  color:#4b5563;font-size:12.5px;
}
.trust-row li::before{content:"✓ ";color:var(--success);font-weight:700}

/* ── shared section shell ───────────────────────────────────────────────── */
.section-inner{width:min(1040px,calc(100% - 40px));margin:0 auto}
.band{padding:66px 0}
.band.alt{background:var(--surface)}
.section-heading.center{justify-content:center;text-align:center;margin-bottom:34px}
.section-heading.center h2{font-size:26px;letter-spacing:-.7px}

.results{padding:40px 0 8px}
.results .section-heading{margin-bottom:14px}

.platforms{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.platforms .platform-list{justify-content:center}

/* ── how it works ───────────────────────────────────────────────────────── */
.steps-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:20px;margin:0;padding:0;list-style:none;
}
.steps-grid li{
  padding:24px;border:1px solid var(--line);border-radius:15px;
  background:var(--surface);
}
.band.alt .steps-grid li{background:var(--bg)}
.step-num{
  display:inline-grid;place-items:center;width:29px;height:29px;
  border-radius:9px;background:#111827;color:#fff;
  font-size:13px;font-weight:800;margin-bottom:13px;
}
.steps-grid h3{margin:0 0 7px;font-size:16px;letter-spacing:-.2px}
.steps-grid p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.75}

/* ── features ───────────────────────────────────────────────────────────── */
.feature-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;
}
.feature-grid article{
  padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--bg);
}
.feature-grid h3{margin:0 0 8px;font-size:15.5px;letter-spacing:-.2px}
.feature-grid p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.75}
.tag{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:#f3f4f6;color:#596170;font-size:10.5px;font-weight:700;
  vertical-align:middle;
}

/* ── pricing ────────────────────────────────────────────────────────────── */
.plan-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:18px;align-items:start;
}
.plan-card{
  position:relative;display:flex;flex-direction:column;
  padding:26px 24px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);
}
.plan-card.is-featured{
  border-color:#111827;box-shadow:0 12px 35px rgba(15,23,42,.09);
}
.plan-flag{
  position:absolute;top:-11px;left:24px;padding:3px 11px;border-radius:999px;
  background:#111827;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.04em;
}
.plan-card h3{margin:0;font-size:19px;letter-spacing:-.4px}
.plan-note{margin:5px 0 18px;color:var(--muted-2);font-size:12px}
.plan-card ul{
  flex:1;margin:0 0 22px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:10px;
}
.plan-card li{
  padding-left:19px;position:relative;color:#4b5563;font-size:13.5px;line-height:1.6;
}
.plan-card li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--success);
}
.plan-card li.off{color:var(--muted-2)}
.plan-card li.off::before{background:#d9dde3}
.plan-card li b{color:var(--text)}
.plan-cta{
  height:42px;border-radius:11px;background:#111827;color:#fff;
  font-size:13px;font-weight:700;cursor:pointer;width:100%;
}
.plan-cta:hover{background:#252b35}
.plan-cta.ghost{background:#f3f4f6;color:#374151}
.plan-cta.ghost:hover{background:#e5e7eb}
.plan-foot{
  margin:22px 0 0;text-align:center;color:var(--muted-2);font-size:12px;
}

/* ── faq ────────────────────────────────────────────────────────────────── */
.faq-list{
  max-width:720px;margin:0 auto;
  border:1px solid var(--line);border-radius:15px;
  background:var(--bg);overflow:hidden;
}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:last-child{border-bottom:0}
.faq-list summary{
  padding:17px 20px;cursor:pointer;font-size:14.5px;font-weight:650;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";color:var(--muted-2);font-size:19px;font-weight:400;flex-shrink:0;
}
.faq-list details[open] summary::after{content:"−"}
.faq-list summary:hover{background:var(--surface-2)}
.faq-list p{
  margin:0;padding:0 20px 19px;color:var(--muted);font-size:13.5px;line-height:1.85;
}
.faq-list p b{color:#4b5563}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer{padding:34px 0;border-top:1px solid var(--line);background:var(--surface)}
.footer-inner{
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.footer-inner strong{font-size:14px}
.footer-inner span{margin-left:9px;color:var(--muted-2);font-size:12px}
.footer-note{margin:0;max-width:520px;color:var(--muted-2);font-size:11.5px;line-height:1.7}

.brand-tagline {
  margin: 0 0 14px;
  color: var(--muted-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── motion ─────────────────────────────────────────────────────────────────
   Everything below is gated on `.motion`, which is set at runtime by the head
   script in landing.html and removed again if motion.js never arrives. Nothing
   here may be the only thing standing between a visitor and the content.

   Only `transform` and `opacity` are animated on scroll and load: they are
   composited, so the browser does that work off the main thread. Hover and
   press states may touch colour and shadow — they fire once per interaction,
   not once per frame.
   ───────────────────────────────────────────────────────────────────────── */

/* Hero. Hidden from first paint rather than when the script gets round to it,
   otherwise the text renders, disappears, and animates back in. */
.motion .hero-inner > *{
  opacity:0;
  transform:translateY(12px);
}

.motion .reveal{
  opacity:0;
  transform:translateY(14px);
}
/* The transition lives on the revealed state, so it describes the way in and
   never fires on the way to being primed. */
.motion .reveal.is-in,
.motion .hero-inner > .reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
}

/* Sits at the very top of the document and never moves; the header watches it
   to know whether the page has scrolled. Absolute so it occupies no layout. */
.scroll-sentinel{
  position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;
}
.site-header{transition:box-shadow .25s ease,border-color .25s ease}
.site-header.is-stuck{
  box-shadow:0 6px 22px rgba(15,23,42,.07);
  border-bottom-color:rgba(203,209,217,.9);
}

/* ── the paste box ──────────────────────────────────────────────────────── */

/* What you pasted looks like a link. Said with the button rather than a
   message, because the button is where you are about to go. */
.paste-box.has-link{border-color:#111827}
.paste-box.has-link .paste-go{transform:translateY(-1px)}
.paste-go{transition:background .18s ease,transform .18s ease}
.paste-go .btn-arrow{
  display:inline-block;
  transition:transform .18s cubic-bezier(.22,.61,.36,1);
}
.paste-go:hover .btn-arrow{transform:translateX(4px)}

/* ── hover: lift, never grow ────────────────────────────────────────────────
   translateY only. Animating width/height or a box-shadow spread would relayout
   or repaint the card on every frame of the transition. */
.platform-chip,
.steps-grid li,
.feature-grid article,
.plan-card{
  transition:transform .22s cubic-bezier(.22,.61,.36,1),
             border-color .22s ease,
             box-shadow .22s ease;
}
.platform-chip:hover{transform:translateY(-3px);border-color:#c8ced6}
.steps-grid li:hover,
.feature-grid article:hover{
  transform:translateY(-3px);
  border-color:#c8ced6;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.plan-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(15,23,42,.09);
}
.plan-card.is-featured:hover{box-shadow:0 18px 42px rgba(15,23,42,.14)}

/* The step badge is the one place a number means order, so it reacts as one. */
.step-num{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.steps-grid li:hover .step-num{transform:scale(1.12) rotate(-4deg)}

/* ── press ──────────────────────────────────────────────────────────────────
   A button that does not move under the finger feels broken on touch, where
   there is no hover state to have told you it was pressable. */
.paste-go:active,
.plan-cta:active,
.nav-cta:active,
.secondary-btn:active,
.row-btn:active{transform:scale(.97)}
.plan-cta,.nav-cta{transition:background .18s ease,transform .12s ease}

/* ── faq ────────────────────────────────────────────────────────────────────
   The answer fades in; its height is left to snap. Animating height here would
   mean relayout on every frame of every open — the fade reads as motion and
   costs a fraction of it. */
.faq-list summary::after{
  transition:transform .2s cubic-bezier(.22,.61,.36,1),color .2s ease;
}
.faq-list details[open] summary::after{transform:rotate(180deg)}
.faq-list summary{transition:background .18s ease}
.faq-list details[open] > p{animation:faq-answer .3s cubic-bezier(.22,.61,.36,1) both}
@keyframes faq-answer{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}

/* ── the escape hatch ───────────────────────────────────────────────────────
   Honoured by motion.js too, which skips the reveals outright. This block is
   the belt to that braces: it also catches the transitions declared above and
   `scroll-behavior:smooth` from style.css, none of which pass through JS. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .motion .hero-inner > *,
  .motion .reveal{opacity:1;transform:none}
}