/* Skryve website — dark theme.
   Type and accents match the extension panel: Instrument Sans, near-black surfaces,
   orange accent (#FF9D00), blue timestamps (#4A9EFF), soft orange glows.
   Spacing follows one rhythm: tight inside a group, generous between groups. */

@font-face { font-family: 'Instrument Sans'; font-weight: 400; font-display: swap; src: url(fonts/instrument-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 500; font-display: swap; src: url(fonts/instrument-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 600; font-display: swap; src: url(fonts/instrument-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Sans'; font-weight: 700; font-display: swap; src: url(fonts/instrument-sans-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Averia Serif Libre'; font-weight: 400; font-display: swap; src: url(fonts/averia-serif-libre-latin-400-normal.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #0B0B0B;
  --surface: #161616;
  --surface-2: #1F1F1F;      /* = extension panel */
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  --text: #F2F2F2;
  --body: #A8A8A8;
  --muted: #747474;
  --orange: #FF9D00;
  --orange-2: #FFB84D;
  --orange-tint: rgba(255, 157, 0, .12);
  --blue: #4A9EFF;

  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Averia Serif Libre', Georgia, serif;
  --radius: 18px;
  --shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06);
  --max: 1160px;
  --gutter: 24px;
  --section: 144px;          /* between groups */
  --head-gap: 72px;          /* section heading to its content */
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 760px) { :root { --gutter: 16px; --section: 96px; --head-gap: 48px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  background: var(--bg); color: var(--body);
  font-family: var(--font); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
::selection { background: rgba(255, 157, 0, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- type ---------- */
h1, h2, h3, h4 { color: var(--text); line-height: 1.06; letter-spacing: -.035em; font-weight: 700; }
h1 { font-size: clamp(44px, 6.4vw, 80px); }
h2 { font-size: clamp(32px, 4.4vw, 52px); }
h3 { font-size: 19px; letter-spacing: -.015em; line-height: 1.3; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.lead { font-size: clamp(18px, 2vw, 20px); color: var(--body); max-width: 640px; line-height: 1.6; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
strong { color: var(--text); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 16px/1 var(--font); text-decoration: none; white-space: nowrap;
  padding: 16px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--orange); color: #141008; box-shadow: 0 0 0 1px rgba(255, 157, 0, .5), 0 14px 34px -12px rgba(255, 157, 0, .65); }
.btn-primary:hover { background: #FFAA1F; box-shadow: 0 0 0 1px rgba(255, 157, 0, .6), 0 18px 40px -12px rgba(255, 157, 0, .8); }
.btn-ghost { background: rgba(255, 255, 255, .06); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.link-arrow { font-weight: 600; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.link-arrow::after { content: '→'; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- header: fixed, invisible at the top, soft blur once you scroll ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.site-header::before {
  content: ''; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(11, 11, 11, .92), rgba(11, 11, 11, .6) 70%, rgba(11, 11, 11, 0));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent);
  transition: opacity .3s;
}
.site-header.scrolled::before { opacity: 1; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 28px; line-height: 1; color: #D4D4D4; letter-spacing: -.01em; }
.brand img { width: 24px; height: 24px; }
.site-footer .brand { font-size: 25px; }
.site-footer .brand img { width: 21px; height: 21px; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--body); transition: color .2s; }
.nav-links a:hover { color: var(--text); }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------- sections ---------- */
section { padding: var(--section) 0; }
.section-head { margin-bottom: var(--head-gap); }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 + .lead { margin-top: 20px; }

/* glow + faint grid behind the top of every page, under the header */
.top-glow { position: relative; isolation: isolate; }
.top-glow::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -340px; width: 2200px; height: 1000px; transform: translate(calc(-50% + var(--gx, 0px)), var(--gy, 0px)); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
  /* 2026-10-16: grey, like the panel's own backdrop - no more orange wash */
  background: radial-gradient(closest-side, rgba(255, 255, 255, .045), rgba(255, 255, 255, .014) 55%, transparent 78%);
}
.top-glow::after {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .09) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 30%, transparent 80%);
}
/* below the hero, a wide soft torch follows the cursor and lights a dot grid under the page (site.js sets --x / --y) */
.torch { position: fixed; inset: 0; z-index: -1; pointer-events: none; --x: 50vw; --y: 50vh; opacity: 0; transition: opacity .8s ease; }
.torch.on { opacity: 1; }
.torch i { position: absolute; inset: 0; }
.torch .g { background: radial-gradient(900px circle at var(--x) var(--y), rgba(255, 255, 255, .025), rgba(255, 255, 255, .012) 40%, rgba(255, 255, 255, .004) 70%, transparent 100%); }
.torch .d { background-image: radial-gradient(circle, rgba(255, 255, 255, .16) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(700px circle at var(--x) var(--y), #000 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .05) 82%, transparent 100%);
  mask-image: radial-gradient(700px circle at var(--x) var(--y), #000 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .2) 60%, rgba(0, 0, 0, .05) 82%, transparent 100%); }

/* ---------- hero: centred copy, panels below ---------- */
.hero { padding: 184px 0 var(--section); overflow: hidden; text-align: center; }
.hero h1 { max-width: 900px; margin: 0 auto 24px; }
.hero .lead { margin: 0 auto; max-width: 760px; }
@media (max-width: 760px) { .br-d { display: none; } .hero .lead { max-width: 620px; } }
.platform-pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 32px;
  padding: 7px 16px 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2);
  font-size: 14px; font-weight: 500; color: var(--body);
}
.platform-pill svg { width: 18px; height: 18px; }
.platform-pill b { color: var(--text); font-weight: 600; }
.hero .actions { display: flex; gap: 40px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 44px; }
.cta-note { margin-top: 16px; font-size: 14px; color: var(--muted); }
.cta-note i { font-style: normal; margin: 0 10px; opacity: .5; }
@media (max-width: 760px) {
  .hero { padding-top: 136px; }
  .hero .actions { flex-direction: column; gap: 18px; margin-top: 36px; }
  .hero .actions .btn-primary { width: 100%; max-width: 340px; justify-content: center; }
  .cta-note { margin-top: 22px; font-size: 13px; line-height: 1.7; }
  .cta-note i { margin: 0 7px; }
  .cta-note .g { display: block; }
  .cta-note .sep { display: none; }
}

/* ---------- hero reel: the examples, centre panel largest, neighbours a step smaller ---------- */
.reel-stage { position: relative; margin-top: 72px; }
.gallery.reel { -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
/* 2026-10-16: the orange glow behind the carousel is gone; the hero glow carries the light now */
.gallery.reel { position: relative; gap: 24px; align-items: flex-start; padding: calc(var(--cap-h) + 16px) calc(50% - var(--w) / 2) 24px; }
.gallery.reel figure { width: var(--w); position: relative; transform-origin: center top; }
.gallery.reel figure:not(.is-center) .fx-frame { visibility: hidden; animation-play-state: paused; }
/* panel width follows the window height too, so a panel and its title always fit on screen together
   (panel is 2.06x as tall as wide; ~280px is the header, the title above and a little room below) */
.reel-stage { --w: clamp(240px, calc((100svh - 280px) / 2.06), 380px); --cap-box: clamp(84px, calc(84px + (var(--w) - 300px) * .15), 96px); --cap-h: calc(var(--cap-box) + 12px); overflow-x: clip; }
.reel-group { display: flex; gap: inherit; flex: none; margin: 0 28px; }   /* a little extra room either side of the group */

/* panel titles (Figma 1149:131): pill, title, one or two lines of text, hung from a common top line so every
   pill sits at the same height; the box is tall enough for two lines of text */
.gallery.reel figcaption, .group-cap { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  text-align: center; font-size: clamp(11px, calc(var(--w) * .037), 14px); line-height: 1.43; color: var(--muted); }   /* type scales with the panel */
.gallery.reel figcaption { position: absolute; left: 0; right: 0; bottom: calc(100% + 16px); height: var(--cap-box); margin: 0;
  opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.gallery.reel figcaption .k, .group-cap .k { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: clamp(10px, calc(var(--w) * .03), 11.5px); line-height: 1.4; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--body); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); }
.gallery.reel figcaption b, .group-cap b { display: block; margin: 0; padding-top: 5px; color: var(--text); font-size: clamp(14px, calc(var(--w) * .045), 17px); line-height: 1.35; font-weight: 600; }
.gallery.reel .k-layout figcaption .k, .group-cap .k { color: var(--orange); background: var(--orange-tint); border-color: rgba(255, 157, 0, .3); }
.reel-stage.caps .gallery.reel figcaption { opacity: .5; transform: none; }
.reel-stage.caps .gallery.reel figure.is-center figcaption { opacity: 1; }
.group-cap { position: absolute; top: 0; left: 0; width: min(440px, 86vw); height: var(--cap-h); padding-top: calc(var(--cap-h) - var(--cap-box)); z-index: 2;
  pointer-events: none; will-change: transform; opacity: 0; transition: opacity .5s ease; }
.reel-stage.caps .group-cap { opacity: .5; }
.reel-stage.caps .group-cap.lit { opacity: 1; }
.reel-hint { text-align: center; font-size: 14px; color: var(--muted); margin-top: 8px; }
@media (max-width: 760px) {
  .reel-stage { margin-top: 0; --w: min(224px, 60vw, calc((100svh - 300px) / 2.06)); --cap-h: 136px; --cap-box: 84px; }
  .gallery.reel { gap: 12px; padding-top: 148px; }
  /* exact Figma sizes on phones */
  .gallery.reel figcaption, .group-cap { gap: 1.8px; font-size: 11px; line-height: 17.5px; }
  .gallery.reel figcaption { bottom: calc(100% + 12px); }
  .gallery.reel figcaption .k, .group-cap .k { padding: 3px 9px; font-size: 10px; line-height: 14.7px; letter-spacing: .42px; }
  .gallery.reel figcaption b, .group-cap b { padding-top: 4.2px; font-size: 14px; line-height: 19.5px; }
  .group-cap { width: min(224px, 60vw); }   /* no wider than a panel, so it never runs into the neighbouring titles */
}
}

/* ---------- panel shots with live overlays ---------- */
.shot { position: relative; border-radius: 4px; box-shadow: var(--shadow); }
.shot img { width: 100%; border-radius: 4px; display: block; }
.shot .fx { position: absolute; pointer-events: none; }
/* clip progress: moves at playback speed (0:52 of 2:08 played), like the panel */
.fx-progress { background: #e53935; border-radius: 4px; transform-origin: left center; animation: clipPlay 76s linear infinite; }
@keyframes clipPlay { from { transform: scaleX(.406); } to { transform: scaleX(1); } }
/* now-playing equaliser: the panel's own three keyframes and durations (panel.html qtEqBar1-3) */
.fx-bars { display: flex; align-items: flex-end; gap: 0 18%; }
.fx-bars i { flex: 1; border-radius: 8px; background: currentColor; transform-origin: bottom; }
.fx-bars i:nth-child(1) { height: 36%; animation: qtEqBar1 .7s ease-in-out infinite; }
.fx-bars i:nth-child(2) { height: 100%; animation: qtEqBar2 .85s ease-in-out infinite; }
.fx-bars i:nth-child(3) { height: 64%; animation: qtEqBar3 .6s ease-in-out infinite; }
.fx-bars.label i:nth-child(3) { height: 82%; }
@keyframes qtEqBar1 { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(2.4); } 60% { transform: scaleY(1.4); } }
@keyframes qtEqBar2 { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.45); } 70% { transform: scaleY(.8); } }
@keyframes qtEqBar3 { 0%, 100% { transform: scaleY(1); } 35% { transform: scaleY(1.5); } 65% { transform: scaleY(.7); } }
/* hot-clip flame: the panel's 4-frame flip-book (qtFlameCycle) */
.fx-flame svg { width: 100%; height: 100%; overflow: visible; }
.fx-flame g { visibility: hidden; }
.fx-flame .qt-flame-f1 { animation: qtFlameCycle var(--d) steps(1, end) var(--ph) infinite; }
.fx-flame .qt-flame-f2 { animation: qtFlameCycle var(--d) steps(1, end) calc(var(--ph) + var(--d) * .25) infinite; }
.fx-flame .qt-flame-f3 { animation: qtFlameCycle var(--d) steps(1, end) calc(var(--ph) + var(--d) * .5) infinite; }
.fx-flame .qt-flame-f4 { animation: qtFlameCycle var(--d) steps(1, end) calc(var(--ph) + var(--d) * .75) infinite; }
@keyframes qtFlameCycle { 0%, 24.99% { visibility: visible; } 25%, 100% { visibility: hidden; } }
/* hero only: frames grow one after another, as when hovered in the panel: from 57x32 to 284x160, from the thumb's
   left edge, centred on it, radius 4px -> 20px, with the panel's shadow, after the panel's 350 ms hover delay */
.fx-frame { overflow: hidden; border-radius: 7.04% / 12.5%; transform-origin: left center; transform: scale(.2007, .2);
  z-index: 2; animation: frameZoom 12.5s ease infinite; }
.fx-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes frameZoom {
  0%, 2.8% { transform: scale(.2007, .2); box-shadow: none; }
  4% { transform: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); z-index: 3; }
  16.8% { transform: none; box-shadow: 0 6px 24px rgba(0, 0, 0, .5); z-index: 3; }
  18%, 100% { transform: scale(.2007, .2); box-shadow: none; }
}
/* the playing transcript line steps down the topic */
.fx-row { background: rgba(64, 64, 64, .3); opacity: 0; animation: row 9s step-end infinite; }
.fx-row::before { content: ''; position: absolute; left: 3.3%; top: 46%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--blue); }
.fx-row.r1 { animation-delay: 0s; } .fx-row.r2 { animation-delay: -6s; } .fx-row.r3 { animation-delay: -3s; }
@keyframes row { 0% { opacity: 1; } 33.33% { opacity: 0; } 100% { opacity: 0; } }
/* blinking cursor in the ask bar */
.fx-caret { width: 1.5px; background: #e0e0e0; animation: blink 1.1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* fade up as sections enter */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- the name: word on the left, meaning on the right ---------- */
.word { max-width: 920px; margin: 0 auto; }
.word-grid { display: grid; grid-template-columns: auto 1fr; gap: 0 64px; align-items: center; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.word .w { font-size: clamp(48px, 6vw, 68px); font-weight: 700; letter-spacing: -.035em; color: var(--text); line-height: 1; }
.word .say { margin-top: 10px; font-size: 15px; color: var(--muted); }
.word .say i { color: var(--orange); margin-left: 8px; }
.word .parts { display: grid; gap: 16px; }
.word .part { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: baseline; }
.word .part b { font-size: 20px; font-weight: 600; color: var(--text); }
.word .part span { color: var(--body); }
.word .tagline { margin-top: 32px; text-align: center; font-size: clamp(18px, 2vw, 20px); color: var(--text); }
@media (max-width: 700px) { .word-grid { grid-template-columns: 1fr; gap: 24px; text-align: left; } }

/* ---------- who it's for: a light list, icon beside a title and one line ---------- */
.who-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 48px; max-width: 1000px; margin: 0 auto; }
.who-item { display: flex; gap: 16px; align-items: flex-start; }
.who-item .ic { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--orange-tint); display: grid; place-items: center; }
.who-item .ic svg { width: 20px; height: 20px; }
.who-item h3 { font-size: 17px; margin: 1px 0 4px; }
.who-item p { font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { .who-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .who-list { grid-template-columns: 1fr; gap: 28px; } }
/* ---------- how it works (floating, centred columns) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; text-align: center; }
.step .n { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; color: var(--orange); letter-spacing: .1em; margin-bottom: 20px; }
.step .n svg { width: 40px; height: 40px; }
.step h3 { font-size: 22px; margin-bottom: 10px; }
.step p { max-width: 320px; margin: 0 auto; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 56px; } }

/* ---------- features: copy row, then a full-width illustration ---------- */
.feature + .feature { margin-top: 176px; }
/* the library, moved up into its own section (2026-10-15): one feature block, then its own call to action */
.lib-cta { display: flex; justify-content: center; margin-top: 72px; }
@media (max-width: 760px) { .lib-cta { margin-top: 48px; } .lib-cta .btn { width: 100%; max-width: 340px; justify-content: center; } }
.f-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 72px; align-items: start; margin-bottom: 88px; }
.f-copy .eyebrow { margin-bottom: 16px; }
.f-copy h2 { font-size: clamp(30px, 3.4vw, 44px); }
.f-copy .f-text { padding-top: 34px; }
.f-copy ul { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.f-copy li { display: flex; gap: 12px; color: var(--body); }
.f-copy li::before {
  content: ''; flex: none; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%;
  background: var(--orange-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%23FF9D00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.f-visual { position: relative; }
.f-visual::before { content: ''; position: absolute; left: 50%; top: 50%; width: 140%; height: 170%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .075), rgba(255, 255, 255, .03) 55%, transparent 85%); filter: blur(28px); }
.f-visual img { width: 100%; height: auto; }
@media (max-width: 900px) {
  .f-copy { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
  .f-copy .f-text { padding-top: 0; }
  .feature + .feature { margin-top: 120px; }
  .f-visual { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }   /* bleeds to both screen edges */
  .f-visual::before { display: none; }
  .f-visual::-webkit-scrollbar { display: none; }
  .f-visual img { width: var(--mw, 820px); max-width: none; }   /* per illustration: the first card ends ~3/4 across, so the next one peeks in */
}

/* ---------- looping, draggable carousel ---------- */
.gallery {
  display: flex; gap: 32px; overflow-x: auto; padding: 12px var(--gutter) 40px;
  scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.gallery::-webkit-scrollbar { display: none; }
.gallery.dragging { cursor: grabbing; }
.gallery figure { flex: none; width: 300px; }
.gallery .shot img { pointer-events: none; -webkit-user-drag: none; }
.gallery figcaption { margin-top: 20px; font-size: 15px; color: var(--muted); }
.gallery figcaption b { display: block; color: var(--text); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
@media (max-width: 600px) { .gallery { gap: 20px; } .gallery figure { width: 252px; } }

/* ---------- comparison with other tools ---------- */
.vs-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-bottom: 88px; text-align: center; }
.vs-points .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--orange-tint); display: grid; place-items: center; margin: 0 auto; }
.vs-points .ic svg { width: 22px; height: 22px; }
.vs-points h3 { font-size: 20px; margin: 18px 0 8px; }
.vs-points p { max-width: 320px; margin: 0 auto; }
@media (max-width: 860px) { .vs-points { grid-template-columns: 1fr; gap: 44px; } }
.vs-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
.vs { width: 100%; min-width: 1080px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.vs th, .vs td { padding: 16px 12px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.vs thead th { color: var(--text); font-weight: 600; font-size: 14px; line-height: 1.3; padding-bottom: 20px; }
.vs thead th small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; margin-top: 2px; }
.vs th:first-child, .vs td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; width: 23%; padding-left: 0; }
.vs td:first-child { color: var(--text); }
.vs td:first-child small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.vs .me { background: rgba(255, 157, 0, .045); }
.vs thead .me { border-radius: 14px 14px 0 0; color: var(--orange); }
.vs tbody tr:last-child .me { border-radius: 0 0 14px 14px; }
.vs .y { color: var(--orange); font-weight: 700; font-size: 16px; }
.vs .p { color: var(--body); font-size: 13px; line-height: 1.4; }
.vs .q { color: var(--muted); font-size: 12.5px; font-style: italic; }
.vs .n { color: #4a4a4a; }
@media (max-width: 760px) {
  .vs { min-width: 820px; font-size: 13.5px; }
  .vs-scroll { padding-left: 0; }
  .vs th:first-child, .vs td:first-child { width: 168px; padding-left: var(--gutter); padding-right: 12px; background: var(--bg); }   /* solid, from the screen edge, where it scrolls over the other columns */
  .vs td:first-child small { font-size: 12px; }
}
.vs-legend { margin-top: 24px; font-size: 13px; color: var(--muted); max-width: 900px; }

/* ---------- pricing ---------- */
.billing-toggle { display: inline-flex; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px; margin-top: 36px; }
.billing-toggle button { font: 600 14px var(--font); border: 0; background: transparent; color: var(--body); padding: 9px 22px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.billing-toggle button[aria-pressed="true"] { background: var(--text); color: #111; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); gap: 24px; justify-content: center; margin-top: 56px; text-align: left; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 36px; display: flex; flex-direction: column; position: relative; transition: transform .3s var(--ease), border-color .3s; }
.plan:hover { transform: translateY(-4px); }
.plan.pro { background: linear-gradient(180deg, rgba(255, 157, 0, .10), rgba(255, 157, 0, .02) 40%), var(--surface); border-color: rgba(255, 157, 0, .55); box-shadow: 0 30px 80px -40px rgba(255, 157, 0, .5); }
.plan .tag { position: absolute; top: -12px; left: 36px; background: var(--orange); color: #141008; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.plan h3 { font-size: 22px; }
.plan .desc { font-size: 15px; color: var(--muted); margin-top: 6px; }
.price { margin: 28px 0 8px; display: flex; align-items: baseline; gap: 8px; color: var(--text); }
.price .amt { font-size: 54px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.price .per { color: var(--muted); font-size: 15px; white-space: nowrap; }
.price-note { font-size: 14px; color: var(--muted); white-space: nowrap; }
.plan ul { list-style: none; margin: 28px 0 36px; display: grid; gap: 12px; font-size: 15.5px; flex: 1; }
.plan li { display: flex; gap: 10px; }
.plan li::before { content: '✓'; color: var(--orange); font-weight: 700; }
.plan .btn { width: 100%; }
.small-print { max-width: 760px; margin: 44px auto 0; font-size: 14px; color: var(--muted); text-align: center; }
.small-print a, .faq a, .doc a, .vs-legend a { color: var(--orange-2); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

.compare-wrap { max-width: 880px; margin: 0 auto; }
.compare { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { color: var(--text); font-weight: 600; font-size: 15px; }
.compare td:first-child { color: var(--text); }
.compare td small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 24%; }
.compare .group td { padding-top: 44px; border-bottom-color: var(--line-2); color: var(--orange); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-align: left; }
.compare .yes { color: var(--orange); font-weight: 700; }
.table-scroll { overflow-x: auto; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 26px 0; font-weight: 600; font-size: 18px; color: var(--text); display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--orange); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 26px; font-size: 16px; max-width: 680px; }

/* ---------- final CTA ---------- */
.final { border: 1px solid var(--line); border-radius: 32px; padding: 104px 32px; text-align: center; position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 100% at 50% 120%, rgba(255, 157, 0, .35), transparent 70%), var(--surface); }
.final p { margin: 20px auto 40px; max-width: 520px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 40px; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.foot-grid h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 600; }
.foot-grid ul { list-style: none; display: grid; gap: 10px; }
.foot-grid a { text-decoration: none; color: var(--body); transition: color .2s; }
.foot-grid a:hover { color: var(--text); }
.identity { margin-top: 16px; color: var(--muted); max-width: 400px; }
.identity a { color: var(--body); }
.legal-line a { color: var(--body); text-decoration: none; margin-left: 16px; }
.legal-line a:hover { color: var(--text); }
.legal-line { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- legal / document pages ---------- */
.doc-hero { padding: 168px 0 32px; }
.doc-hero h1 { font-size: clamp(36px, 5vw, 54px); margin-top: 16px; }
.doc-hero .muted { margin-top: 16px; }
.doc { max-width: 760px; margin: 0 auto; padding: 24px var(--gutter) var(--section); }
.doc h2 { font-size: 26px; margin: 56px 0 14px; letter-spacing: -.02em; }
.doc h3 { font-size: 19px; margin: 32px 0 10px; }
.doc p { margin: 12px 0; }
.doc ul, .doc ol { margin: 10px 0 14px 22px; display: grid; gap: 6px; }
.doc ul ul { margin-top: 6px; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.doc th, .doc td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.doc thead th, .doc tbody th { color: var(--text); font-weight: 600; }
.doc thead th { background: var(--surface-2); }
.doc tr:last-child td, .doc tr:last-child th { border-bottom: 0; }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 24px; margin: 8px 0; }
.toc ol { columns: 2; column-gap: 32px; margin: 10px 0 0 20px; display: block; }
.toc li { margin-bottom: 4px; }
.toc a { color: var(--body); }
@media (max-width: 600px) { .toc ol { columns: 1; } }
.callout { background: var(--orange-tint); border: 1px solid rgba(255, 157, 0, .3); border-radius: 14px; padding: 18px 20px; margin: 20px 0; color: var(--text); }

/* tiles (contact page) */
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; }
.tile .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--orange-tint); display: grid; place-items: center; margin-bottom: 18px; }
.tile .ic svg { width: 22px; height: 22px; }
.tile h3 { font-size: 19px; margin-bottom: 8px; }
.tile p { font-size: 15.5px; }
.tile a { color: var(--orange-2); }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

/* launch page: message with a burst of confetti */
.launch { position: relative; overflow: hidden; }
.launch-msg { position: relative; max-width: 640px; margin: 0 auto; }
.launch-msg > :not(.burst) { position: relative; z-index: 1; }
/* confetti: bursts out from behind the message once, then stays */
.burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 0; pointer-events: none; }
.bit { position: absolute; left: 0; top: 0; display: block; opacity: 0; transform: translate(-50%, -50%) scale(.2);
  animation: burstOut 1s cubic-bezier(.16, 1, .3, 1) var(--d) forwards; }
@keyframes burstOut { to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(var(--s)); opacity: var(--o); } }
.bit-bar { width: 14px; height: 5px; border-radius: 3px; background: currentColor; }
.bit-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.bit-ring { width: 11px; height: 11px; border-radius: 50%; border: 2px solid currentColor; }
.bit-tri { width: 12px; height: 12px; }
.bit-wave { width: 24px; height: 10px; }
.bit svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  .bit { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(var(--s)); opacity: var(--o); }
}
.launch-icon { width: 72px; height: 72px; margin: 0 auto 28px; }
.launch .eyebrow { margin-bottom: 16px; }
.launch h1 { font-size: clamp(38px, 5.6vw, 64px); }
.launch p { max-width: 560px; }
.launch-actions { display: flex; gap: 40px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.launch-note { margin-top: 40px !important; font-size: 15px; }
.status.launch a.link-arrow { color: var(--text); }

/* status pages */
.status { min-height: 78vh; display: grid; place-items: center; text-align: center; padding: 160px 0 96px; }
.status .icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 28px; background: var(--orange-tint); }
.status h1 { font-size: clamp(34px, 5vw, 48px); }
.status p { margin: 16px auto 32px; max-width: 480px; }
.status a:not(.btn) { color: var(--orange-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- "Also in every video": the secondary features as a short text grid (2026-10-15) ---------- */
.also-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.also-item { padding: 32px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.also-item:nth-child(3n) { border-right: 0; }
.also-item:nth-last-child(-n+3) { border-bottom: 0; }
.also-item h3 { font-size: 19px; margin-bottom: 8px; letter-spacing: -.02em; }
.also-item p { font-size: 15.5px; line-height: 1.55; }
@media (max-width: 860px) {
  .also-grid { grid-template-columns: 1fr 1fr; }
  .also-item:nth-child(3n) { border-right: 1px solid var(--line); }
  .also-item:nth-child(2n) { border-right: 0; }
  .also-item:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .also-item:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .also-grid { grid-template-columns: 1fr; }
  .also-item { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 24px 22px; }
  .also-item:last-child { border-bottom: 0 !important; }
}

/* 2026-10-20 (user): the glow band that framed the hero text (and ringed the pricing cards) is gone. */

/* ---------- the name, small, in the footer under the brand (2026-10-16) ---------- */
.foot-word { margin-top: 20px; max-width: 340px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.foot-word > b { color: var(--text); font-size: 14px; }
.foot-word .say { margin-left: 4px; }
.foot-word .say i { color: var(--orange); font-style: italic; }
.foot-word p { margin-top: 6px; }
.foot-word p b { color: var(--body); font-weight: 600; }

/* ---------- 2026-10-16: the homepage hero glow, exactly as in Figma (RushTUbe 1153:830) ----------
   Two blurred shapes (blur 50) laid on the page from the very top: a 3845x1648 ellipse filled with a radial gradient
   (#BFBFBF to a warm #27261F, Figma 1158:87). Its grain is Figma's own noise filter, tuned (55% cover, 60% strength)
   so Chrome draws it as fine as Figma does - the exported settings came out twice as coarse, and over it a 1410x630 dark bowl (#111, as in Figma), so only a soft grey
   rim shows around the hero text. Both are flipped vertically, as in the design. Each SVG carries 100px of blur room
   on every side, so the images are 200px bigger than the shapes. */
.hero-glow { --hb: 606px; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--hb) + 400px); overflow: hidden; z-index: -1; pointer-events: none; }
.hero-glow img { position: absolute; left: 50%; max-width: none; }
/* --hb = where the bowl's bottom edge sits (site.js puts it under the hero text, as Figma has it 124px under);
   the ring moves down with it, the bowl stretches to reach it */
/* finer, softer grain (2026-10-16): noise frequency 1.6, strength 50%, then a 0.4px blur */
.hero-glow { will-change: transform; }
.hero-glow .hg-ring { filter: blur(.4px); width: 4045px; height: 1848px; top: calc(var(--hb) - 1679px); transform: translateX(calc(-50% - 19.5px)) scaleY(-1); }
.hero-glow .hg-bowl { width: calc(100% + 170px); max-width: 1610px; height: calc((var(--hb) + 24px) * 830 / 630); top: calc(-24px - (var(--hb) + 24px) * 100 / 630); transform: translateX(-50%) scaleY(-1); }
/* progressive blur: crisp along the bottom middle, soft toward the sides and the top. The two copies of the bowl
   (blur 50 and blur 5) share the work through opposite masks. The image is flipped, so its "top" in mask terms is
   the bowl's bottom edge (at 12%). */
.hero-glow .hg-bowl, .hero-glow .hg-sharp { --m: radial-gradient(ellipse 42% 38% at 50% 12%, #000 35%, transparent 100%); }
.hero-glow .hg-bowl:not(.hg-sharp) { -webkit-mask-image: linear-gradient(#000, #000), var(--m); mask-image: linear-gradient(#000, #000), var(--m); -webkit-mask-composite: xor; mask-composite: exclude; }
.hero-glow .hg-sharp { -webkit-mask-image: var(--m); mask-image: var(--m); }
/* the two masked halves add up (plus-lighter) to one solid bowl - laid normally, their soft overlap let the bright
   ring show through the middle */
.hero-glow .hg-bowls { position: absolute; inset: 0; isolation: isolate; }
.hero-glow .hg-sharp { mix-blend-mode: plus-lighter; }
/* Figma 1158:87 proportions: the glow stays its designed size (bowl edge 606px down, cards 92px under it), so the
   hero copy is set a little tighter to sit inside the dark part (desktop) */
@media (min-width: 761px) {
  .hero.glow-fig { padding-top: 128px; }
  .glow-fig .platform-pill { margin-bottom: 24px; }
  .glow-fig h1 { font-size: clamp(44px, 5.2vw, 72px); margin-bottom: 20px; }
  .glow-fig .lead { font-size: 18px; }
  .glow-fig .actions { margin-top: 32px; }
  .glow-fig .cta-note { margin-top: 12px; }
}
/* the older glows stand down on this hero */
.hero.glow-fig::before, .hero.glow-fig::after, .hero.glow-fig > .wrap::before { display: none; }   /* Figma has no dot grid here either */


/* ---------- phones: the "Get webstore link" sheet (site.js) ---------- */
.getlink { position: fixed; inset: 0; z-index: 200; }
.getlink[hidden] { display: none; }
.getlink-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .25s var(--ease); }
.getlink-card {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface-2); border-top: 1px solid var(--line-2); border-radius: var(--radius) var(--radius) 0 0;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .26s var(--ease);
}
.getlink.on .getlink-backdrop { opacity: 1; }
.getlink.on .getlink-card { transform: none; }
.getlink-card h2 { font-size: 20px; line-height: 1.3; margin: 0 36px 8px 0; color: var(--text); }
.getlink-card p { margin: 0; color: var(--body); font-size: 15px; line-height: 1.5; }
.getlink-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.getlink-actions .btn { width: 100%; }
.getlink-x {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .06); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
}
html.getlink-lock { overflow: hidden; }