/* content.win: one stylesheet, no build step needed.
   Type: Sora (sans) + Source Serif 4 (serif). Headlines mix the two: quiet serif lines, one bold sans line.
   Tool pages add a stylesheet of their own under css/tools/ for what only they draw. */

:root {
  --ink: #0e0807;
  --ink-2: #171717;
  --muted: rgba(14, 8, 7, 0.55);
  --muted-2: rgba(14, 8, 7, 0.38);
  --paper: #ffffff;
  --paper-2: #f5f5f5;
  --line: rgba(14, 8, 7, 0.08);
  --orange: #f2543d;
  --blue: #2556b6;
  --purple: #7b68c8;
  --sky: #adc8e6;
  --olive: #bac78d;
  --yellow: #ffd15c;
  --green: #17a06a;
  --sans: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --pill: 999px;
  --r-card: 32px;
  --r-panel: 40px;
  --r-frame: 28px;
  --shadow-nav: 0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 12px 30px -12px rgba(0, 0, 0, 0.28);
  --shadow-frame: 0 40px 90px -40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.04);
  --container: 1240px;
  /* motion: one easing, three durations; one focus ring, drawn as an outline so no box-shadow can hide it */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 0.12s;
  --t: 0.18s;
  --t-slow: 0.3s;
  --ring: 3px solid rgba(14, 8, 7, 0.16);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Controls on every page ----------
   The contract every control keeps: only paint eases (colour, background, border, shadow, opacity), never size or
   position, so a click always ends on the control it started on; focus is one outline ring; a disabled control
   takes no pointer; an icon inside a button is not an event target of its own. :where() keeps these at zero
   specificity, so any rule below may say otherwise. */
:where(a, button, summary, label, input, select, textarea) { transition: color var(--t) var(--ease), background-color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), opacity var(--t) var(--ease); }
:where(button, summary, [role="button"]) { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
:where(button, .btn) svg { pointer-events: none; }
:where(:focus-visible) { outline: var(--ring); outline-offset: 0; }
:where(button, .btn):disabled { opacity: 0.5; pointer-events: none; }
/* a block that appears (a progress row, a result) rises into place; --rise sets how far from */
@keyframes cw-rise { from { opacity: 0; transform: translateY(var(--rise, 4px)); } }
:where(.tool-progress, .tool-result) { animation: cw-rise var(--t-slow) var(--ease); }
/* a folding block: .ui-fold around one child, shut under .is-closed. Its row eases to nothing and back, and once shut it
   leaves the tab order (visibility flips at the end of a close, at the start of an open). It lives here, in the first
   stylesheet, so a card drawn shut is shut at first paint. */
.ui-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-slow) var(--ease), visibility var(--t-slow); }
.ui-fold > * { min-height: 0; overflow: hidden; }
.is-closed .ui-fold { grid-template-rows: 0fr; visibility: hidden; }

.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.narrow { width: min(720px, calc(100% - 48px)); margin-inline: auto; }
.serif { font-family: var(--serif); font-weight: 400; }
.sans { font-family: var(--sans); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--pill); border: 1px solid transparent;
  font: 500 13px/1 var(--sans); white-space: nowrap; cursor: pointer;
}
.btn-solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-solid:hover { background: #000; border-color: #000; box-shadow: 0 8px 18px -12px rgba(14, 8, 7, 0.55); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { background: var(--paper-2); border-color: rgba(14, 8, 7, 0.2); }
.btn-lg { font-size: 16px; padding: 17px 24px; }
.link-arrow { font: 500 15px/1 var(--sans); color: var(--ink); opacity: 0.75; }
.link-arrow:hover { opacity: 1; }
/* a small pill button in a toolbar; .is-on is the chosen one */
.chip-btn { padding: 9px 13px; border-radius: var(--pill); border: 1px solid var(--line); background: #fff; font: 500 13px/1 var(--sans); color: var(--ink); cursor: pointer; }
.chip-btn:hover { background: var(--paper-2); border-color: rgba(14, 8, 7, 0.2); }
.chip-btn.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
/* a segmented control of buttons; .is-on is the chosen one */
.seg { display: inline-flex; padding: 4px; background: var(--paper-2); border-radius: var(--pill); justify-self: start; }
.seg button { padding: 9px 16px; border: 0; border-radius: var(--pill); background: transparent; font: 500 14px/1 var(--sans); color: var(--muted); cursor: pointer; }
.seg button:hover:not(.is-on) { color: var(--ink); }
.seg button.is-on { background: var(--ink); color: #fff; }

/* ---------- Form fields ---------- */
.field { display: grid; gap: 6px; }
.field > span { font: 500 13px/1 var(--sans); color: var(--muted); }
.field > span em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 4px; }
.field input { width: 100%; padding: 13px 14px; border: 1px solid rgba(14, 8, 7, 0.18); border-radius: 12px; background: #fff; font: 400 15px/1.3 var(--sans); color: var(--ink); }
.field input::placeholder { color: var(--muted-2); }
.field input[type="text"], .field input[type="url"], .field input[type="email"], .field input[type="tel"], .field textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: 500 14px/1.2 var(--sans); color: var(--ink); }
.field textarea { font-weight: 400; line-height: 1.5; resize: vertical; }
.field select, .field input[type="number"] { width: 100%; appearance: none; -webkit-appearance: none; padding: 11px 38px 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: 500 14px/1.2 var(--sans); color: var(--ink); }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e0807' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.field input[type="number"] { padding-right: 14px; }
.field input[type="range"] { width: 100%; accent-color: var(--ink); }
.field input[type="color"] { width: 100%; height: 42px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 8px; }
.field :is(input, select, textarea):focus-visible, .text-box:focus-visible { border-color: var(--ink); }
.field.range > span { display: flex; justify-content: space-between; }
.field.range b { color: var(--ink); font-weight: 600; }
.text-box { width: 100%; min-height: 200px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; font: 400 16px/1.55 var(--sans); color: var(--ink); resize: vertical; }
.check { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; cursor: pointer; font: 500 14px/1.2 var(--sans); }
.check input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.extras { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ---------- Navigation ---------- */
.nav-wrap { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; padding: 0 5%; pointer-events: none; }
.nav {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 60px; margin: 0 auto; max-width: 1200px;
  padding: 10px 12px 10px 22px;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--shadow-nav);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-name { font: 600 19px/1 var(--sans); letter-spacing: -0.03em; }
.brand-dot { color: var(--orange); }
.brand-light { color: #fff; }
.brand-light .brand-mark circle { fill: #fff; }
.brand-light .brand-mark path { stroke: var(--ink-2); }
.nav-menu { display: flex; align-items: center; gap: 40px; }
.nav-links { display: flex; gap: 30px; font: 500 14px/1 var(--sans); }
.nav-links a { padding: 8px 0; opacity: 0.92; }
.nav-links a:hover { opacity: 1; }
.nav-actions { display: flex; gap: 10px; }
.nav-toggle {
  display: none; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #f0f0f2; cursor: pointer; place-items: center; position: relative;
}
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-slow) var(--ease), top var(--t-slow) var(--ease); }
.nav-toggle span:first-child { top: 15px; }
.nav-toggle span:last-child { top: 23px; }
.nav.is-open .nav-toggle span:first-child { top: 19px; transform: rotate(45deg); }
.nav.is-open .nav-toggle span:last-child { top: 19px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .nav-wrap { padding: 0 12px; }
  .nav { padding-left: 16px; }
  .nav-toggle { display: grid; }
  .nav-menu {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 20px;
    padding: 22px; border-radius: 24px; background: #fff; box-shadow: var(--shadow-nav);
  }
  .nav.is-open .nav-menu { display: flex; }
  .nav-links { flex-direction: column; gap: 4px; font-size: 16px; }
  .nav-links a { display: block; padding: 10px 4px; }
  .nav-actions { flex-direction: column; }
  .nav-actions .btn { padding: 14px 18px; font-size: 14px; }
}

/* ---------- Sections and headings ---------- */
.section { padding: 120px 0; }
.section-gray { background: var(--paper-2); }
.section-title {
  text-align: center; font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 3.2vw, 40px); letter-spacing: -0.02em; line-height: 1.25;
}
.section-lede { text-align: center; font-family: var(--serif); color: var(--muted); font-size: 18px; max-width: 560px; margin: 16px auto 0; }
.eyebrow { font-family: var(--serif); color: var(--muted); font-size: 17px; }
.kicker { font: 500 12.5px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* ---------- Page hero (home, tools, guides) ---------- */
/* the search dropdown must escape the hero; clip only sideways so the orbs never widen the page */
.page-hero { position: relative; padding: 156px 0 24px; text-align: center; overflow-x: clip; overflow-y: visible; }
.page-hero .eyebrow { margin-bottom: 18px; }
.hero-title { margin: 0 auto; max-width: 15ch; font-size: clamp(42px, 6vw, 86px); line-height: 1.05; letter-spacing: -0.035em; }
.hero-title .serif, .hero-title .sans { display: block; }
.hero-title .serif { font-weight: 400; }
.hero-title .sans { font-weight: 600; letter-spacing: -0.04em; }
.page-hero .hero-title { max-width: 16ch; }
.hero-sub {
  font-family: var(--serif); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45;
  color: var(--muted); max-width: 660px; margin: 28px auto 0;
}
.page-hero .hero-sub { max-width: 700px; }
/* Individual tool pages only: a smaller headline with a quieter second line, so long qualifiers don't dominate.
   Section heroes (tools index, product, guides) keep the big bold second line. */
.page-hero.tool-hero .hero-title { max-width: 18ch; font-size: clamp(36px, 4.8vw, 62px); line-height: 1.06; }
.page-hero.tool-hero .hero-title .sans { font-size: 0.6em; font-weight: 600; letter-spacing: -0.02em; margin-top: 0.55em; }
.hero-browse { margin: 18px 0 0; }
/* a small coloured badge above the eyebrow on a few tool pages; used sparingly */
.hero-accent { width: 56px; height: 56px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; box-shadow: 0 10px 30px -10px currentColor; }
.hero-accent svg { width: 24px; height: 24px; }
.hero-marks { display: flex; justify-content: center; gap: 10px; margin: 0 auto 18px; }
.hero-marks .hero-accent { margin: 0; width: 46px; height: 46px; }
.hero-marks .hero-accent svg { width: 20px; height: 20px; }
@media (max-width: 760px) { .page-hero { padding-top: 120px; } }

.orbs { position: absolute; inset: 0; pointer-events: none; }
.orb {
  position: absolute; width: var(--s, 110px); height: var(--s, 110px);
  border-radius: 50%; display: grid; place-items: center; color: var(--ink);
  animation: float 7s ease-in-out infinite alternate;
}
.orb::before {
  content: ''; position: absolute; inset: -28%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, var(--glow, rgba(0, 0, 0, 0.08)) 0%, rgba(255, 255, 255, 0) 70%);
}
.orb svg { width: 46%; height: 46%; }
.orb-1 { --s: 108px; --glow: rgba(242, 84, 61, 0.28); background: var(--orange); top: 100px; left: 17%; animation-delay: -1s; }
.orb-2 { --s: 108px; --glow: rgba(173, 200, 230, 0.7); background: var(--sky); top: 160px; right: 12%; animation-delay: -3s; }
.orb-4 { --s: 120px; --glow: rgba(123, 104, 200, 0.35); background: var(--purple); top: 450px; left: 13%; animation-delay: -2s; }
@keyframes float { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@media (max-width: 1100px) { .orb { --s: 84px !important; } }
@media (max-width: 1000px) { .page-hero .orb-4 { display: none; } }
@media (max-width: 760px) { .orbs { display: none; } }

/* ---------- Home page search: loose words in, the closest tools out ---------- */
.tool-search { position: relative; max-width: 620px; margin: 30px auto 0; text-align: left; z-index: 6; }
.ts-label { position: absolute; left: -9999px; }
.ts-box { position: relative; display: flex; align-items: center; height: 60px; padding: 0 16px 0 20px; background: #fff; border: 1px solid rgba(14, 8, 7, 0.14); border-radius: 999px; box-shadow: 0 10px 30px rgba(14, 8, 7, 0.06); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.ts-box:focus-within { border-color: rgba(14, 8, 7, 0.4); box-shadow: 0 12px 36px rgba(14, 8, 7, 0.1); }
.ts-icon { width: 20px; height: 20px; flex: 0 0 20px; color: var(--muted); }
.ts-input { flex: 1; min-width: 0; height: 100%; margin-left: 12px; border: 0; background: none; font: 400 17px/1 var(--sans); color: var(--ink); outline: none; -webkit-appearance: none; appearance: none; }   /* the box carries the focus */
.ts-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.js .ts-input::placeholder { color: transparent; }
.ts-input::placeholder { color: var(--muted); }
.ts-hint { position: absolute; left: 52px; right: 56px; top: 50%; transform: translateY(-50%); font: 400 17px/1.3 var(--sans); color: var(--muted); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--t-slow) var(--ease); }
.ts-hint.is-out, .ts-hint.is-off { opacity: 0; }
.ts-kbd { font: 500 12px/1 var(--sans); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
.ts-results { position: absolute; left: 6px; right: 6px; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px rgba(14, 8, 7, 0.12); z-index: 40; }
.ts-results a, .ts-empty { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.ts-results li.is-active a, .ts-results a:hover { background: var(--paper-2); }
.ts-results .tool-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: var(--paper-2); font: 600 14px/1 var(--sans); }
.ts-results .tool-icon svg { width: 16px; height: 16px; }
.ts-results b { display: block; font: 600 14px/1.3 var(--sans); letter-spacing: -0.01em; }
.ts-results p { margin: 1px 0 0; font: 400 12.5px/1.4 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-tag { font: 500 11px/1 var(--sans); color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; white-space: nowrap; }
.ts-empty { grid-template-columns: 1fr; font: 400 14px/1.45 var(--sans); color: var(--muted); }
.ts-empty a { display: inline; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .ts-box { height: 54px; padding: 0 14px 0 16px; } .ts-kbd { display: none; } .ts-hint { left: 46px; right: 14px; font-size: 16px; } .ts-input { font-size: 16px; } .ts-results a { grid-template-columns: 32px minmax(0, 1fr); } .ts-tag { display: none; } .ts-results a[data-want] { grid-template-columns: 32px minmax(0, 1fr) auto; } .ts-results a[data-want] .ts-tag { display: inline-block; } }

/* ---------- Home: the premium tools, and under them the row of paid tools they replace ---------- */
.feat-section { padding: 64px 0 0; }
.feat-head { text-align: center; }
.feat-head .section-lede { margin-top: 10px; }
.section-title.feat-title, .section-title.hub-title { font-size: clamp(26px, 3.4vw, 34px); }
.feat-grid { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 1000px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
.feat { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); transition: border-color var(--t) var(--ease); }
.feat:hover { border-color: rgba(14, 8, 7, 0.3); }
.feat-main { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; color: inherit; text-decoration: none; }
.feat-icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.feat-icon svg { width: 16px; height: 16px; }
.feat-text { min-width: 0; }
.feat-text b { display: block; font: 600 14px/1.3 var(--sans); letter-spacing: -0.01em; }
.feat-text p { margin: 2px 0 0; font: 400 12.5px/1.4 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-soon { font: 500 11px/1 var(--sans); color: var(--muted); border: 1px solid var(--line); border-radius: var(--pill); padding: 6px 9px; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.feat:hover .feat-soon { background: var(--ink); color: #fff; border-color: var(--ink); }
.feat-live-tag { background: var(--ink); color: #fff; border-color: var(--ink); }
.feat.feat-live:hover .feat-live-tag { background: var(--green); color: var(--ink); border-color: var(--green); }
.replaces-section { padding: 112px 0 0; }
.replaces { text-align: center; }
.replaces-label { margin: 0 0 22px; font: 400 14px/1.4 var(--sans); color: var(--muted); }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { flex: 0 0 auto; display: flex; align-items: center; gap: 52px; list-style: none; margin: 0; padding: 0 26px; animation: marquee 40s linear infinite; }
.marquee-track li { display: flex; align-items: center; }
.marquee-track img { display: block; height: 22px; width: auto; filter: brightness(0); opacity: 0.6; transition: opacity var(--t) var(--ease); }
.marquee-track li.mark img { height: 26px; }
.marquee-track li:hover img { opacity: 1; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }   /* exactly one track: the second track starts where the first began, so the loop has no seam */
.daily-section { padding-top: 144px; }
.daily-head { text-align: center; }
.daily-head .section-lede { margin-top: 10px; }
@media (max-width: 900px) { .feat-section { padding-top: 48px; } .replaces-section { padding-top: 88px; } .daily-section { padding-top: 112px; } }
@media (max-width: 700px) {
  .feat-section { padding-top: 40px; } .replaces-section { padding-top: 64px; } .replaces-label { margin-bottom: 16px; } .daily-section { padding-top: 88px; }
  .feat-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 6px; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .feat { flex: 0 0 236px; scroll-snap-align: start; }
}

/* ---------- Home: a product's head, its name large and what it does in a serif line under it ---------- */
.product-head { text-align: center; }
.product-title .name { display: block; font: 600 clamp(40px, 5.6vw, 76px)/1.02 var(--sans); letter-spacing: -0.045em; }
.product-title .line { display: block; margin-top: 16px; font: 400 clamp(22px, 2.3vw, 30px)/1.3 var(--serif); letter-spacing: -0.015em; }
.product-head .section-lede { max-width: 760px; }   /* two lines under the heading, not a narrow block */

/* ---------- Home: Moments, its film, and the four things it does ---------- */
.moments-section { padding-top: 120px; }
.moments-points { list-style: none; margin: 44px auto 0; padding: 0; width: min(1100px, 100%); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.moments-points li { font: 400 15px/1.5 var(--sans); color: var(--muted); }
.moments-points b { display: block; margin-bottom: 6px; font-weight: 600; color: var(--ink); }
@media (max-width: 900px) { .moments-section { padding-top: 96px; } .moments-points { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .moments-points { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- Home: the product sections' call to action and their demo loop in a dark frame ---------- */
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; }
.demo-note { font-family: var(--serif); color: var(--muted); font-size: 16px; }
.demo-shot { margin: 56px auto 0; width: min(1100px, 100%); padding: 12px; border-radius: var(--r-frame); background: #111; box-shadow: var(--shadow-frame); }
.demo-video { display: block; width: 100%; height: auto; border-radius: 16px; background: #f5f5f5; }
@media (max-width: 720px) { .demo-shot { padding: 6px; border-radius: 18px; } .demo-video { border-radius: 12px; } }
/* a demo loop with sound starts muted; its button sits in the frame's corner and turns the sound on and off */
.demo-shot { position: relative; }
.sound-toggle { position: absolute; right: 30px; bottom: 30px; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(14, 8, 7, 0.62); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sound-toggle:hover { background: rgba(14, 8, 7, 0.82); }
.sound-toggle svg { width: 24px; height: 24px; }
.sound-toggle .on, .sound-toggle[aria-pressed="true"] .off { display: none; }
.sound-toggle[aria-pressed="true"] .on { display: block; }
@media (max-width: 720px) { .sound-toggle { right: 16px; bottom: 16px; width: 44px; height: 44px; } .sound-toggle svg { width: 20px; height: 20px; } }

/* ---------- Home: Auto captions, an endless strip of vertical clips captioned live in one look each ---------- */
/* two copies of the cards in a row, both moved by home-captions.mjs a frame at a time at the logo strip's pace, the
   second taking the first's place as it leaves; the edges fade under two white gradients. A card is a poster, its clip
   playing unseen, and a canvas its frames and captions are drawn on. A card's width is set as a width: everything in it
   is absolutely placed, and Safari (every browser on an iPhone) sizes a row of flex items from their content, not their
   flex-basis, which left each copy of the row 198 px wide and the copies on top of each other */
.captions-section { --cap-w: clamp(200px, 19vw, 276px); --cap-gap: 22px; padding-top: 100px; }
.cap-reel { position: relative; display: flex; overflow: hidden; margin-top: 40px; padding: 24px 0 40px; }
.cap-reel::before, .cap-reel::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 10%; pointer-events: none; }
.cap-reel::before { left: 0; background: linear-gradient(90deg, var(--paper), rgb(255 255 255 / 0)); }
.cap-reel::after { right: 0; background: linear-gradient(270deg, var(--paper), rgb(255 255 255 / 0)); }
.cap-track { flex: 0 0 auto; display: flex; gap: var(--cap-gap); padding: 0 calc(var(--cap-gap) / 2); will-change: transform; }
.cap-card { position: relative; flex: none; width: var(--cap-w); aspect-ratio: 9 / 16; margin: 0; border-radius: 26px; overflow: hidden; background: #111; box-shadow: var(--shadow-float); }
.cap-card img, .cap-card video, .cap-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cap-card img { object-fit: cover; }
.cap-card video { opacity: 0; }   /* it plays unseen; its frames are drawn on the canvas */
@media (max-width: 900px) { .captions-section { padding-top: 88px; } }

/* ---------- Home: the editor section ---------- */
/* the grey ground eases in from the white section above and back out to the one below, no edge either side */
.editor-section { background: linear-gradient(to bottom, var(--paper) 0, var(--paper-2) 220px, var(--paper-2) calc(100% - 220px), var(--paper) 100%); padding-top: 100px; }

/* ---------- Home: the tools hub, grouped cards with one row per tool, the same list the app shows ---------- */
.tool-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-top: 48px; }
.tool-group { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.tool-group h2 { margin: 0; padding: 22px 22px 18px; border-bottom: 1px solid var(--line); font: 600 17px/1.3 var(--sans); letter-spacing: -0.01em; }
.tool-group h2 small { display: block; margin-top: 4px; font: 400 14px/1.4 var(--sans); color: var(--muted); letter-spacing: 0; }
/* long groups scroll inside their card instead of running down the page */
.tool-list { list-style: none; margin: 0; padding: 0; max-height: 536px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.tool { position: relative; padding: 14px 22px; transition: background-color var(--t) var(--ease); }
.tool + .tool { border-top: 1px solid var(--line); }
.tool:hover { background: var(--paper-2); }
.tool-main { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 16px; align-items: center; color: inherit; text-decoration: none; }
.tool-main::after { content: ""; position: absolute; inset: 0; }
.tool .tool-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.tool .tool-icon svg { width: 18px; height: 18px; }
.tool h3 { font: 500 15px/1.35 var(--sans); letter-spacing: -0.01em; margin: 0; }
.tool p { margin: 2px 0 0; font: 400 13px/1.4 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-go { font: 500 15px/1 var(--sans); color: var(--muted-2); transition: color var(--t) var(--ease); }
.tool:hover .tool-go { color: var(--ink); }
/* the intent pages of a tool, as small links under its row; the row stays one anchor, these sit above it */
.tool-links { position: relative; z-index: 1; display: block; margin: 6px 0 0 56px; font: 400 12.5px/1.6 var(--sans); color: var(--muted); }
.tool-links a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(14, 8, 7, 0.25); text-underline-offset: 2px; }
.tool-links a:hover { color: var(--ink); }
@media (max-width: 900px) { .tool-groups { grid-template-columns: 1fr; gap: 20px; } .tool-list { max-height: 460px; } }
@media (max-width: 600px) { .tool { padding: 12px 16px; } .tool-links { margin-left: 0; } }

/* ---------- Home: four cards on grey ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 64px; }
.card { background: #fff; border-radius: var(--r-card); padding: 40px; }
.card-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 52px; color: var(--ink); }
.card-icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 22px; letter-spacing: -0.015em; }
.card p { font-family: var(--serif); font-size: 19px; line-height: 1.35; margin-top: 12px; }
.grid-2.plain .card { padding: 48px; min-height: 310px; }
.grid-2.plain .card-icon { margin-bottom: 40px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- Blue closing CTA, with the app as the closing picture ---------- */
.cta { background: var(--blue); color: #fff; padding: 140px 0 0; text-align: center; overflow: hidden; }
.cta h2 { font-size: clamp(38px, 4.8vw, 66px); letter-spacing: -0.035em; line-height: 1.05; }
.cta > .container > p { font-family: var(--serif); font-size: 19px; color: rgba(255, 255, 255, 0.85); margin-top: 18px; }
.cta .btn-solid { margin-top: 44px; }
.cta-shot { margin: 72px auto 0; width: min(980px, 100%); }
.frame {
  border-radius: var(--r-frame); background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-frame); overflow: hidden;
}
.cta-shot .frame { border-radius: 28px 28px 0 0; border: 0; padding: 14px 14px 0; background: #111; box-shadow: 0 -30px 80px -40px rgba(0, 0, 0, 0.6); }
/* the signed-in home page, drawn to match app.content.win */
.cta-shot .am { border-radius: 18px 18px 0 0; overflow: hidden; min-height: 360px; max-height: 380px; text-align: left; color: var(--ink); background: var(--paper-2); font-family: var(--sans); }
.am-bar { height: 52px; display: flex; align-items: center; gap: 22px; padding: 0 22px; background: #fff; border-bottom: 1px solid var(--line); }
.am-brand { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--sans); letter-spacing: -0.01em; }
.am-brand i { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; } .am-brand i svg { width: 12px; height: 12px; } .am-brand em { font-style: normal; color: var(--orange); }
.am-nav { display: flex; gap: 2px; font-size: 12.5px; color: var(--muted); } .am-nav span { padding: 6px 10px; border-radius: 999px; } .am-nav .on { background: var(--paper-2); color: var(--ink); font-weight: 500; }
.am-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.am-badge { font: 500 11.5px/1 var(--sans); padding: 6px 9px; border-radius: 999px; background: var(--paper-2); font-variant-numeric: tabular-nums; }
.am-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; font: 600 12px/1 var(--sans); }
.am-body { padding: 22px 22px 0; }
.am-hello b { display: block; font: 600 21px/1.2 var(--sans); letter-spacing: -0.02em; } .am-hello small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
.am-cards { display: grid; grid-template-columns: 1fr 1.15fr 1.2fr; gap: 12px; margin-top: 18px; align-items: stretch; }
.am-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; min-width: 0; }
.am-card h4 { margin: 0; font: 600 13.5px/1.3 var(--sans); } .am-card .sub { margin: 3px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.am-num { font: 600 32px/1 var(--sans); letter-spacing: -0.02em; margin-top: 16px; font-variant-numeric: tabular-nums; } .am-split { font-size: 11px; color: var(--muted); margin-top: 6px; }
.am-btn { display: inline-block; margin-top: 14px; padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line); font: 500 12px/1 var(--sans); }
.am-jobs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; font-size: 12.5px; }
.am-jobs li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .am-jobs li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-jobs small { color: var(--muted); font-size: 11px; white-space: nowrap; } .am-jobs small.live { color: var(--green); font-weight: 500; }
.am-tools { list-style: none; margin: 10px -16px -16px; padding: 0; border-top: 1px solid var(--line); }
.am-tools li { display: flex; align-items: center; gap: 10px; padding: 7px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.am-tools .dot { width: 26px; height: 26px; } .am-tools .dot svg { width: 12px; height: 12px; }
.am-tools .tag { margin-left: auto; font: 500 10.5px/1 var(--sans); padding: 5px 7px; border-radius: 999px; background: var(--paper-2); color: var(--muted); white-space: nowrap; }
.dot { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.dot svg { width: 16px; height: 16px; }
.dot-orange { background: var(--orange); } .dot-blue { background: var(--blue); } .dot-olive { background: var(--olive); }
.dot-purple { background: var(--purple); } .dot-yellow { background: var(--yellow); } .dot-sky { background: var(--sky); } .dot-green { background: var(--green); }
.tag { font: 500 11px/1 var(--sans); padding: 5px 9px; border-radius: var(--pill); background: var(--paper-2); }
@media (max-width: 900px) { .am-cards { grid-template-columns: 1fr 1fr; } .am-cards .am-card:last-child { grid-column: 1 / -1; } .am-nav { display: none; } }
@media (max-width: 560px) { .am-cards { grid-template-columns: 1fr; } .am-cards .am-card:last-child { grid-column: auto; } .am-body { padding: 18px 16px 0; } .am-bar { padding: 0 16px; } }

/* ---------- Footer ---------- */
.footer { background: var(--ink-2); color: #fff; padding: 76px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px; }
.footer-brand p { margin-top: 20px; max-width: 300px; color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.5; }
.footer h4 { font: 500 13px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 22px; }
.footer ul { display: grid; gap: 14px; }
.footer nav a { color: rgba(255, 255, 255, 0.82); font-size: 15px; }
.footer nav a:hover { color: #fff; }
.footer-bottom {
  margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: rgba(255, 255, 255, 0.55);
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a:hover { color: #fff; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Simple inner pages ---------- */
.page { padding: 170px 0 100px; }
.page-head h1 { font-size: clamp(40px, 5vw, 64px); letter-spacing: -0.03em; line-height: 1.05; }
.page-head h1 .serif, .page-head h1 .sans { display: block; }
.page-head p { font-family: var(--serif); font-size: 19px; color: var(--muted); margin-top: 20px; max-width: 34em; line-height: 1.45; }
.prose { font-family: var(--serif); font-size: 19px; line-height: 1.55; }
.prose p + p, .prose ul { margin-top: 18px; }
.prose ul { padding-left: 22px; list-style: disc; }
.prose li + li { margin-top: 8px; }
.prose h2 { font-family: var(--sans); font-size: 24px; margin-top: 44px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose code { font: 500 0.85em/1 var(--sans); background: var(--paper-2); padding: 3px 7px; border-radius: 6px; }
.prose strong { font-family: var(--sans); font-weight: 600; font-size: 0.95em; }
@media (max-width: 600px) { .page { padding-top: 130px; } }

/* ---------- Guides: editorial index ---------- */
.feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px; }
.feature:hover { box-shadow: var(--shadow-frame); }
.feature-art { aspect-ratio: 4 / 3; border-radius: 22px; display: grid; place-items: center; color: var(--ink); }
.feature-art svg { width: 84px; height: 84px; }
.feature-copy { padding: 12px 24px 12px 0; }
.feature-copy h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.025em; line-height: 1.12; margin-top: 14px; }
.feature-copy p:not(.kicker) { font-family: var(--serif); font-size: 19px; line-height: 1.45; margin-top: 16px; max-width: 34em; }
.feature-copy .link-arrow { display: inline-block; margin-top: 22px; }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.post-card { display: grid; gap: 12px; align-content: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 14px 26px; }
.post-card:hover { box-shadow: var(--shadow-frame); }
.post-art { aspect-ratio: 16 / 10; border-radius: 18px; display: grid; place-items: center; color: var(--ink); margin-bottom: 8px; }
.post-art svg { width: 44px; height: 44px; }
.post-card h3 { font-size: 21px; letter-spacing: -0.015em; line-height: 1.2; padding: 0 8px; }
.post-card p:not(.kicker) { font-family: var(--serif); font-size: 17px; line-height: 1.4; padding: 0 8px; }
.post-card .kicker { padding: 0 8px; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: 12px; } .feature-copy { padding: 10px 10px 8px; } .posts { grid-template-columns: 1fr; } }

/* ---------- Guides: article ---------- */
.article { padding: 150px 0 110px; }
.article .link-arrow { display: inline-block; margin-bottom: 36px; }
.article .kicker { margin-bottom: 14px; }
.article h1 { font-size: clamp(38px, 5vw, 60px); letter-spacing: -0.03em; line-height: 1.05; }
.article .dek { font-family: var(--serif); font-size: 21px; line-height: 1.45; color: var(--muted); margin-top: 22px; max-width: 34em; }
.article .prose { margin-top: 48px; }
.article .prose h2 { font-size: 26px; margin: 48px 0 12px; }
.article .prose p + p { margin-top: 18px; }
.article .prose ul { margin-top: 12px; }
@media (max-width: 600px) { .article { padding-top: 120px; } }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 56px auto 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font: 600 19px/1.3 var(--sans); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 300 26px/1 var(--sans); color: var(--muted); transition: transform var(--t) var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { font-family: var(--serif); font-size: 18px; line-height: 1.5; padding: 0 0 24px; max-width: 62ch; }
.faq-title { font: 600 26px/1.2 var(--sans); letter-spacing: -0.02em; margin: 0; }
.narrow .faq, .tool-wide .faq { margin-top: 8px; max-width: none; }
.tool-wide .faq p { max-width: 78ch; }

/* ---------- Tool page: a column of tools beside the page ---------- */
/* .tool-page holds a tool page on one grid: the hero across the top, then aside.tool-side (the page itself
   first, then its related tools, each with its hub icon, added by the build) beside section.tool-slot (the
   tool), then the copy and the FAQ across the page. The column and the tool share one row and one rule, so
   they start and end together and the column grows with the tool. On narrow screens there is no column; a
   page with .tool-page-solo has none at any width. */
.tool-page { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; padding-top: 108px; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 0 40px; align-items: start; }
.tool-page-main { display: contents; }
.tool-page-main > * { grid-column: 1 / -1; min-width: 0; }
.tool-page-main > .page-hero { grid-row: 1; }
.tool-side, .tool-slot { grid-row: 2; align-self: stretch; margin: 16px 0 96px; }
.tool-slot { grid-column: 2; display: grid; padding: 0; }
.tool-slot > * { display: grid; width: 100%; }
.tool-slot .tool-ui { align-content: start; }
.tool-page-solo .tool-slot { grid-column: 1 / -1; }
.tool-page .tool-copy .tool-wide, .tool-page .tool-copy .container { max-width: 960px; margin-left: 0; }
.tool-page-main .tool-wide, .tool-page-main .page-hero .container { width: 100%; }
.tool-page .page-hero { padding: 8px 0 20px; text-align: left; }
.tool-page .page-hero .eyebrow { margin-bottom: 12px; }
.tool-page .page-hero .hero-title, .tool-page .page-hero .hero-sub { margin-left: 0; margin-right: 0; }
.tool-page .page-hero.tool-hero .hero-title { max-width: 22ch; font-size: clamp(32px, 4vw, 52px); }
.tool-page .page-hero .hero-sub { margin-top: 20px; }
.tool-side { grid-column: 1; display: flex; flex-direction: column; padding: 14px 10px 12px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow-nav); }
.tool-side .btn { margin-top: auto; width: 100%; padding: 14px 18px; font-size: 14px; }
.tool-side h2 { margin: 2px 0 8px 12px; font: 500 12px/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tool-side .related-list { display: grid; gap: 2px; margin-bottom: 20px; font: inherit; }
.tool-side .related-list li { margin: 0; }
.tool-side .related-list a { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; font: 500 14.5px/1.25 var(--sans); color: var(--ink); text-decoration: none; }
.tool-side .related-list a:hover { background: var(--paper-2); }
.tool-side .related-list .is-current a { background: var(--paper-2); font-weight: 600; }
.tool-side .tool-icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.tool-side .tool-icon svg { width: 16px; height: 16px; }
@media (max-width: 960px) {
  .tool-page { grid-template-columns: minmax(0, 1fr); padding-top: 96px; }
  .tool-slot { grid-column: 1; }
  .tool-side { display: none; }
}
@media (max-width: 760px) { .tool-page .page-hero { padding-top: 0; } }

/* ---------- Tool page: the tool itself ---------- */
.tool-wide { width: min(1040px, calc(100% - 48px)); margin-inline: auto; }
.tool-ui { background: #fff; border: 1px solid var(--line); border-radius: var(--r-frame); padding: 32px; display: grid; gap: 18px; box-shadow: var(--shadow-frame); }
.drop-zone { display: grid; justify-items: center; gap: 6px; padding: 56px 20px; border: 1.5px dashed rgba(14, 8, 7, 0.24); border-radius: 20px; text-align: center; cursor: pointer; }
.drop-zone:hover, .drop-zone.is-over { border-color: var(--ink); background: var(--paper-2); }
.drop-zone b { font: 500 16px/1.3 var(--sans); }
.drop-zone small { color: var(--muted); font-size: 13px; max-width: 36ch; }
.drop-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; margin-bottom: 8px; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--paper-2); border-radius: 14px; font: 500 14px/1.3 var(--sans); }
.file-row small { color: var(--muted); font-weight: 400; }
.file-row .link-arrow { margin-left: auto; background: none; border: 0; cursor: pointer; }
.tool-settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool-settings.target-row { grid-template-columns: 2fr 1fr; }
.tool-settings.two { grid-template-columns: repeat(2, 1fr); }
.tool-settings.three { grid-template-columns: repeat(3, 1fr); }
.tool-settings.four { grid-template-columns: repeat(4, 1fr); }
.tool-settings.is-flash select { border-color: var(--ink); outline: var(--ring); }   /* drawn to the eye after a platform pick */
.turnstile-slot { min-height: 0; }
.tool-error { font: 400 14px/1.4 var(--sans); color: #c23a24; }
.tool-error a { color: inherit; text-decoration: underline; }
.tool-ui > .btn { width: 100%; }
.tool-progress { display: grid; gap: 8px; }
.tool-progress small { color: var(--muted); font-size: 13px; }
.bar { height: 6px; border-radius: 6px; background: rgba(14, 8, 7, 0.1); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--green); border-radius: 6px; }
.tool-progress .bar i { background: var(--ink); transition: width var(--t-slow) var(--ease); }
.tool-result { display: grid; gap: 14px; padding: 18px; background: var(--paper-2); border-radius: 18px; }
.tool-result small { color: var(--muted); font-size: 12.5px; }
.tool-result .link-arrow { background: none; border: 0; cursor: pointer; justify-self: start; }
.tool-result .result-note { margin: 0; font: 500 14px/1.3 var(--sans); color: var(--green); }
.result-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.result-row .file { font-weight: 500; }
.result-row .size { color: var(--muted); }
.result-row .size b { color: var(--ink); font-weight: 600; }
.tool-result .result-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font: 500 14px/1.3 var(--sans); }
.tool-result .result-row .file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-result .result-row .size { color: var(--muted); white-space: nowrap; }
.tool-paused { margin: 0; padding: 14px 16px; background: var(--paper-2); border-radius: 14px; font: 500 14px/1.4 var(--sans); color: var(--muted); }
.tool-ui.is-paused .drop-zone, .tool-ui.is-paused .tool-settings, .tool-ui.is-paused .turnstile-slot { opacity: 0.35; pointer-events: none; }
.tool-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.tool-stats { font: 400 13.5px/1.3 var(--sans); color: var(--muted); }
.tool-actions { display: flex; gap: 8px; }
.tool-actions .btn { padding: 11px 18px; }
.tool-note { margin: 0; font: 400 13px/1.45 var(--sans); color: var(--muted); }
@media (max-width: 900px) { .tool-settings.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .tool-ui { padding: 18px; } .drop-zone { padding: 40px 16px; } }
@media (max-width: 600px) { .tool-settings, .tool-settings.target-row, .tool-settings.two, .tool-settings.three, .tool-settings.four { grid-template-columns: 1fr; } }

/* ---------- Tool page: the copy under the tool ---------- */
.tool-copy { padding-top: 24px; padding-bottom: 24px; }
.tool-copy h2 { font: 600 26px/1.2 var(--sans); letter-spacing: -0.02em; margin: 0 0 22px; }
.tool-copy .lede { font: 400 18px/1.5 var(--serif); color: var(--muted); margin: 0 0 20px; }
.tool-steps { padding-left: 22px; margin: 0; font: 400 17px/1.55 var(--serif); }
.tool-steps li + li { margin-top: 12px; }
.tool-steps b { font: 600 17px/1.3 var(--sans); }
.setting-list { margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 40px; }
.setting-list dt { font: 600 16px/1.3 var(--sans); margin-bottom: 4px; }
.setting-list dd { margin: 0; font: 400 17px/1.55 var(--serif); color: #3a3432; max-width: 66ch; }
.glance-list dd { max-width: 78ch; }
.plain-list { list-style: disc; padding-left: 20px; margin: 0; font: 400 17px/1.55 var(--serif); }
.plain-list li + li { margin-top: 8px; }
.related-list { list-style: none; padding: 0; margin: 0; font: 400 17px/1.55 var(--serif); }
.related-list li + li { margin-top: 8px; }
.related-list a { font: 600 16px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.tool-copy .lede, .plain-list, .tool-steps, .related-list { max-width: none; }
@media (max-width: 760px) { .setting-list { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .tool-copy h2, .faq-title { font-size: 22px; } }

/* ---------- Platform cards ---------- */
.platforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 6px; }
.platform { display: grid; gap: 6px; justify-items: start; text-align: left; padding: 20px 20px 18px; background: #fff; border: 1px solid var(--line); border-radius: 20px; cursor: pointer; font-family: var(--sans); color: var(--ink); }
.platform:hover, .platform:focus-visible { box-shadow: var(--shadow-frame); border-color: rgba(14, 8, 7, 0.18); }
.platform-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, #fff); margin-bottom: 6px; }
.platform-logo svg { width: 22px; height: 22px; }
.platform-name { font: 600 16px/1.2 var(--sans); }
.platform-limit { font: 400 13.5px/1.4 var(--sans); color: var(--muted); min-height: 2.8em; }
.platform-pick { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 7px 11px; border-radius: var(--pill); background: var(--paper-2); font: 500 12.5px/1 var(--sans); color: var(--ink); transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.platform:hover .platform-pick, .platform:focus-visible .platform-pick { background: var(--ink); color: #fff; }
@media (max-width: 900px) { .platforms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .platforms { grid-template-columns: 1fr; } .platform-limit { min-height: 0; } }

/* ---------- Shared layout for the editor-style image tools: a live preview stage with a control panel beside it ---------- */
.tool-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.tool-stage { position: relative; display: grid; place-items: center; min-height: 280px; padding: 12px; background: repeating-conic-gradient(#f0efec 0 25%, #fff 0 50%) 0 0 / 18px 18px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; touch-action: none; }
.tool-stage canvas, .tool-stage img, .tool-stage video { max-width: 100%; max-height: 72vh; width: auto; height: auto; display: block; }
.tool-panel { display: grid; gap: 12px; align-content: start; }
.tool-panel h3 { margin: 6px 0 0; font: 600 13px/1.2 var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 860px) { .tool-workspace { grid-template-columns: 1fr; } .tool-stage { min-height: 160px; } .tool-stage canvas, .tool-stage img, .tool-stage video { max-height: 60vh; } }

/* ---------- Text tools ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.stat { display: grid; gap: 4px; padding: 14px 12px; background: var(--paper-2); border-radius: 14px; text-align: center; }
.stat b { font: 600 22px/1.1 var(--sans); letter-spacing: -0.02em; }
.stat span { font: 500 12px/1.2 var(--sans); color: var(--muted); }
.wc-panels { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.wc-panel { padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; }
.wc-panel h3 { margin: 0 0 10px; font: 600 14px/1.2 var(--sans); color: var(--muted); }
.fit-list, .top-words { list-style: none; margin: 0; padding: 0; }
.fit-list li, .top-words li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.3 var(--sans); }
.fit-list li:last-child, .top-words li:last-child { border-bottom: 0; }
.fit-count { color: var(--muted); white-space: nowrap; }
.fit-list li.is-ok .fit-count { color: var(--green); }
.fit-list li.is-over .fit-count { color: #c23a24; }
.fit-list li.is-ok .fit-count::before { content: '✓ '; }
.fit-list li.is-over .fit-count::before { content: 'over '; font-weight: 500; }
.top-words li b { font-weight: 600; }
.top-words .muted { color: var(--muted); }
.pw-output { display: grid; gap: 14px; padding: 20px; background: var(--paper-2); border-radius: 18px; }
.pw-output output { display: block; font: 500 24px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.01em; word-break: break-all; min-height: 1.4em; }
.pw-actions { display: flex; gap: 8px; }
.pw-actions .btn { padding: 11px 18px; }
.pw-strength { display: flex; align-items: center; gap: 12px; font: 500 13.5px/1.3 var(--sans); color: var(--muted); }
.pw-meter { display: flex; gap: 4px; }
.pw-meter i { width: 26px; height: 6px; border-radius: 3px; background: var(--line); }
.pw-strength.level-1 i:nth-child(-n+1) { background: #c23a24; }
.pw-strength.level-2 i:nth-child(-n+2) { background: var(--yellow); }
.pw-strength.level-3 i:nth-child(-n+3) { background: var(--green); }
.pw-strength.level-4 i { background: var(--green); }
.pw-options { display: grid; gap: 16px; }
.bt-list { display: grid; gap: 6px; }
.bt-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; }
.bt-name { font: 600 12.5px/1.2 var(--sans); color: var(--muted); }
.bt-text { font-size: 17px; line-height: 1.4; word-break: break-word; }
.cs-check, .utm-check { align-self: end; padding-bottom: 12px; }
.tc-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 22px; }
.utm-out { display: grid; gap: 10px; padding: 16px; background: var(--paper-2); border-radius: 16px; }
.utm-result { display: block; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; font: 500 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); word-break: break-all; }
.utm-result.is-ready { color: var(--ink); }
.utm-list li { align-items: center; }
.utm-list code { font: 400 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .wc-panels { grid-template-columns: 1fr; } .pw-output output { font-size: 19px; } .bt-row { grid-template-columns: 1fr auto; } .bt-name { grid-column: 1 / -1; } .tc-opts { grid-template-columns: 1fr; } }

/* ---------- QR, calculators, colour picker ---------- */
.qr-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
.qr-form { display: grid; gap: 16px; }
.qr-fields { display: grid; gap: 12px; }
.seg.qr-types { flex-wrap: wrap; }
.color-field { display: flex; gap: 8px; align-items: center; }
.color-field input[type="color"] { width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: none; cursor: pointer; }
.color-field input[type="text"] { flex: 1; }
.qr-logo-btn { cursor: pointer; }
.qr-hidden { align-self: end; padding-bottom: 12px; }
.qr-preview { display: grid; gap: 12px; justify-items: center; padding: 20px; background: var(--paper-2); border-radius: 18px; position: sticky; top: 90px; }
.qr-preview canvas { width: 100%; max-width: 320px; height: auto; border-radius: 12px; background: #fff; }
.qr-hint { margin: 0; font: 400 13px/1.4 var(--sans); color: var(--muted); text-align: center; }
.qr-preview .tool-actions { flex-wrap: wrap; justify-content: center; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.calc-card { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; align-content: start; }
.calc-card h3 { margin: 0; font: 600 16px/1.2 var(--sans); }
.calc-card .calc-h3 { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.calc-big { margin: 0; font: 600 30px/1.1 var(--sans); letter-spacing: -0.02em; }
.calc-sub { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--muted); }
.calc-sub b { color: var(--ink); font-weight: 600; }
.calc-result { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.ar-shape-wrap { width: 200px; height: 140px; display: grid; place-items: center; }
.ar-shape { display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper-2); font: 500 11px/1 var(--sans); color: var(--muted); transition: width var(--t) var(--ease), height var(--t) var(--ease); overflow: hidden; }
.cp-toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.cp-top { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: stretch; }
.cp-swatch { display: grid; place-items: end start; min-height: 168px; padding: 14px; border-radius: 14px; font: 600 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; transition: background var(--t) var(--ease); }
.cp-actions { flex-wrap: wrap; }
.cp-native { position: relative; overflow: hidden; }
.cp-native input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cp-hexfield { width: 150px; }
.cp-hexfield input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#cp-support:empty { display: none; }
.cp-image { display: grid; grid-template-columns: 1fr 260px; gap: 18px; padding: 16px; background: var(--paper-2); border-radius: 18px; }
.cp-canvas-wrap { overflow: auto; }
.cp-canvas-wrap canvas { display: block; max-width: 100%; height: auto; border-radius: 10px; cursor: crosshair; }
.cp-side { display: grid; gap: 10px; align-content: start; }
.cp-side h3 { margin: 6px 0 0; font: 600 13px/1.2 var(--sans); color: var(--muted); }
.cp-hover { display: flex; gap: 12px; align-items: center; }
.cp-hover canvas { width: 72px; height: 72px; border-radius: 12px; border: 1px solid var(--line); background: #fff; image-rendering: pixelated; }
.cp-hover b { display: block; font: 600 16px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.cp-hover span { font: 400 12.5px/1.3 var(--sans); color: var(--muted); }
.cp-formats { display: grid; align-content: start; padding: 2px 14px; border: 1px solid var(--line); border-radius: 14px; }
.cp-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); min-height: 34px; }
.cp-row:last-child { border-bottom: 0; }
.cp-row .chip-btn { padding: 4px 10px; font-size: 12px; }
.cp-row-name { font: 600 11.5px/1 var(--sans); letter-spacing: 0.04em; color: var(--muted); }
.cp-row-value { font: 500 13.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.cp-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cp-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-sw { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(14, 8, 7, 0.12); cursor: pointer; padding: 0; }
.cp-sw:hover { border-color: var(--ink); box-shadow: inset 0 0 0 2px #fff; }
.cp-contrast { display: grid; gap: 6px; }
.cp-ct { padding: 10px 12px; border-radius: 10px; font: 400 13px/1.3 var(--sans); }
.cp-ct b { font-weight: 600; }
@media (max-width: 900px) { .qr-layout, .calc-grid, .cp-panels { grid-template-columns: 1fr; } .qr-preview { position: static; } .cp-image { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cp-top { grid-template-columns: 1fr; } .cp-swatch { min-height: 110px; } .calc-result { grid-template-columns: 1fr; } }

/* ---------- Image tools: results in cards ---------- */
.img-results { display: grid; gap: 12px; }
.img-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.img-card { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; }
.img-thumb { display: grid; place-items: center; height: 140px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 16px 16px; border-radius: 10px; overflow: hidden; }
.img-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.img-meta { display: grid; gap: 4px; justify-items: start; }
.img-meta b { font: 600 13px/1.3 var(--sans); word-break: break-all; }
.img-meta span { font: 400 12.5px/1.4 var(--sans); color: var(--muted); }
.vt-player { display: grid; gap: 14px; }
.vt-player video { width: 100%; max-height: 480px; background: #000; border-radius: 14px; }
.vt-controls { display: grid; gap: 10px; }
.vt-controls input[type="range"] { width: 100%; accent-color: var(--ink); }
.cs2-preview { display: flex; gap: 4px; overflow-x: auto; padding: 12px; background: var(--paper-2); border-radius: 14px; }
.cs2-preview canvas { flex: none; border-radius: 4px; outline: 1px solid rgba(14, 8, 7, 0.15); }
.gif-result { display: grid; gap: 10px; padding: 14px; background: var(--paper-2); border-radius: 14px; }
.gif-result img { max-width: 100%; border-radius: 10px; justify-self: center; }
.audio-card { grid-template-columns: 1fr; }
.audio-card audio { width: 100%; }
.img-list:has(.audio-card) { grid-template-columns: 1fr; }

/* ---------- Video downloader ---------- */
.dl-status { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 500 13px/1 var(--sans); color: var(--muted); }
.dl-status span { display: inline-flex; align-items: center; gap: 6px; }
.dl-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.dl-status .is-ok i { background: var(--green); }
.dl-status .is-paused i { background: #c23a24; }
.dl-badge { padding: 11px 14px; border: 1px dashed var(--line); border-radius: 14px; font: 500 14px/1.2 var(--sans); color: var(--muted); }
.dl-badge.is-ok { border-style: solid; color: var(--ink); }
.dl-badge.is-bad { color: #c23a24; }
.tool-ui.is-paused .dl-status, .tool-ui.is-paused .field, .tool-ui.is-paused .turnstile-slot { opacity: 0.35; pointer-events: none; }
/* the YouTube Save button: a bookmark to drag to the bookmarks bar */
.yt-save { display: grid; gap: 10px; padding: 16px 18px; background: var(--paper-2); border-radius: 18px; font: 400 14px/1.45 var(--sans); }
.yt-save-desk { display: grid; gap: 10px; }
.yt-save p { margin: 0; }
.yt-save-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: yt; }
.yt-save-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; counter-increment: yt; }
.yt-save-steps li::before { content: counter(yt); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 12px/1 var(--sans); }
.yt-save-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--pill); background: #ff0000; color: #fff; font: 600 13.5px/1 var(--sans); text-decoration: none; cursor: grab; box-shadow: var(--shadow-float); }
.yt-save-btn:active { cursor: grabbing; }
.yt-save-btn svg { width: 14px; height: 14px; fill: currentColor; }
.yt-save-hint { color: #c23a24; font-weight: 500; }
.yt-save small { color: var(--muted); }
.dl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dl-items:empty { display: none; }
.dl-item { display: grid; gap: 8px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.dl-item-media { aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; background: #000; }
.dl-item-media img, .dl-item-media video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.dl-item-meta { display: grid; gap: 4px; justify-items: start; font: 500 12.5px/1.3 var(--sans); }
.dl-item-meta span { color: var(--muted); font-weight: 400; }
.dl-preview { justify-self: start; width: fit-content; max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--line); }
.dl-preview video, .dl-preview img { display: block; max-width: 100%; max-height: 440px; width: auto; height: auto; pointer-events: none; }
.dl-preview.has-ratio video, .dl-preview.has-ratio img { width: 100%; height: 100%; max-height: none; object-fit: cover; }

/* ---------- About: how the tools work, as three cards ---------- */
.how-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.how-card { border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px 22px; background: #fff; }
.how-card .card-icon { width: 44px; height: 44px; margin-bottom: 18px; }
.how-card .card-icon svg { width: 20px; height: 20px; }
.how-card h3 { margin: 0 0 8px; font: 600 17px/1.3 var(--sans); letter-spacing: -0.01em; }
.how-card p { margin: 0; font: 400 14.5px/1.55 var(--sans); color: var(--muted); }
.how-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.how-tags a { font: 500 12px/1 var(--sans); padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--pill); color: var(--ink); text-decoration: none; }
.how-tags a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.how-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; font: 500 14px/1.45 var(--sans); }
.how-checks li { position: relative; padding-left: 26px; }
.how-checks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
.how-checks li::after { content: ""; position: absolute; left: 5.5px; top: 5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 900px) { .how-cards { grid-template-columns: 1fr; } }

/* ---------- Reveal on scroll (only when JS is running): a block fades and rises in once it is on screen ---------- */
.js .reveal { opacity: 0; }
.js .reveal.in { opacity: 1; --rise: 14px; animation: cw-rise 0.6s var(--ease); }

/* ---------- People who asked for less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; }
  .orb { animation: none; }
  .demo-video { pointer-events: none; }
  .cap-reel { overflow-x: auto; }
  .cap-track[aria-hidden] { display: none; }
  .marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 24px 36px; }
  .marquee-track[aria-hidden] { display: none; }
}