/* site.css — the chrome every page shares: design tokens, reset, nav, buttons, footer.
   Loaded by index.html, privacy.html, terms.html and thanks.html. Page-specific styles live
   with their page. If a value belongs to more than one page, it belongs in here, not there. */

:root{
  /* Paper canvas. White page, near-white section fills, one saturated blue doing all the work of
     accent, CTA and focus — everything else is a neutral ramp. The dark canvas this replaced made
     every screenshot glow and dated the whole site; on paper the product imagery is the only thing
     with colour in it, which is the same principle inverted. */
  --bg:#FFFFFF; --surface:#F9FAFB; --surface-2:#F3F4F6; --line:#E5E7EB;
  /* Text on paper: a cool neutral ramp, never pure black. #111827 for headings, slate for body —
     full black on white is harsh at display sizes and reads as unstyled. */
  --ink:#111827; --muted:#4B5563; --faint:#6B7280;   /* slate-500 darkened: the brief's #70747D lands at 4.48:1 on the section fill, just under AA */
  /* The one accent. Used for links, the primary button, focus rings and nothing decorative. */
  --accent:#2142E7; --accent-deep:#182FA5; --accent-wash:#EEF2FF;
  --serif:"Manrope","Helvetica Neue",sans-serif;   /* display face (var name kept) */
  --sans:"Inter","Helvetica Neue",sans-serif;
  --mono:"JetBrains Mono",monospace;
  /* Feature tints, inverted for paper: -b is now a pale wash to sit behind -t, which is the
     legible ink. They were deep-bg/light-ink for the dark canvas and would vanish here. */
  --red-b:#FEF2F2; --red-t:#B42318;
  --blue-b:#EEF2FF; --blue-t:#2142E7;
  /* Blue-led identity: blue carries the CTAs and the pricing badge, teal is the secondary
     accent, and a muted violet gives the third step without reaching for another hue family.
     Green survives only on the pricing ticks, where it means "yes, included" rather than
     decoration. Red and yellow are kept for real states (errors, warnings), not for feature
     colouring, which is what made the grid read as a generic multicolour SaaS icon set. */
  --teal-b:#ECFAF7; --teal-t:#0E6E66;
  --violet-b:#F1EFFD; --violet-t:#4F3FB8;
  --green-b:#ECFDF3; --green-t:#067647;
  --yellow-b:#FFFAEB; --yellow-t:#B54708;
  --dark:17 24 39;                       /* ink bars (footer); use rgb(var(--dark)) */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-pill:999px;
  /* Elevation is a stack of very low-opacity cool shadows plus a hairline ring, not one hard
     drop — that is what keeps a white card on a white page readable without a heavy border. */
  --shadow-ring:0 0 0 1px rgba(17,24,39,.08);
  --shadow-card:0 0 0 1px rgba(17,24,39,.08),0 2px 2px -1px rgba(17,24,39,.03),
                0 8px 8px -4px rgba(17,24,39,.03),0 16px 16px -8px rgba(17,24,39,.03);
  --shadow-lift:0 0 0 1px rgba(17,24,39,.10),0 4px 4px -2px rgba(17,24,39,.04),
                0 12px 12px -6px rgba(17,24,39,.05),0 24px 24px -12px rgba(17,24,39,.05);
  /* one type scale — use these everywhere, no one-off sizes */
  --fs-mono:12px; --fs-sm:14px; --fs-base:16px; --fs-lead:18px; --fs-h3:20px;
  --fs-h2:clamp(1.9rem,4vw,2.8rem); --fs-h1:clamp(2.4rem,5.6vw,4.4rem);
  --fs-title:clamp(2.2rem,5vw,3.2rem);   /* prose/legal page titles: smaller than the hero h1 */
  --fs-display:clamp(2.6rem,7.5vw,5.8rem);
  /* Tracking follows size: the bigger the type, the tighter it sets. Only these three, and
     Inter (body, labels, buttons) always sets at 0. Nothing on this site tracks positive. */
  --ls-display:-.038em;   /* Manrope 45px+  : h1, footer wordmark, CTA */
  --ls-head:-.028em;      /* Manrope 20-44px: h2, section leads, price */
  --ls-tight:-.014em;     /* Manrope under 20px: brand, h3, FAQ summary */
  /* Spacing scale — the site's de-facto ladder, made explicit. Margin/padding/gap snap to these;
     near-duplicates (11/13→12, 15→14, 24→22, 26/30→28, 36/38→40, 48→44) were merged into it. */
  --sp-1:4px; --sp-2:8px; --sp-3:10px; --sp-4:12px; --sp-5:14px; --sp-6:16px;
  --sp-7:18px; --sp-8:22px; --sp-9:28px; --sp-10:40px; --sp-11:44px; --sp-12:64px;
  --page-max:1200px;                     /* the brief's container; was 1080 */
  --pad:clamp(72px,8vw,112px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
/* Lives here, not in index.html, so every page gets the canvas. The legal pages used to paint
   their own and drifted the moment the palette changed. */
body{background:transparent;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent-wash);color:var(--accent-deep)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 28px}

/* nav — sits flush and transparent at the top, then lifts into a floating paper bar once you
   scroll. `.scrolled` is toggled from index.html. Transitioning INTO elevation rather than
   starting with it keeps the hero uninterrupted, and gives the bar a reason to exist the moment
   content passes underneath it. */
nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:clamp(16px,2.2vw,28px) clamp(24px,4vw,64px);pointer-events:none}
.nav-in{pointer-events:auto;max-width:var(--page-max);margin:0 auto;height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:0 24px;border-radius:var(--r-xl);
  background:transparent;box-shadow:none;
  transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease}
nav.scrolled .nav-in{background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(16px);
  box-shadow:var(--shadow-card)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:650;font-size:var(--fs-h3);letter-spacing:var(--ls-tight);color:var(--ink)}
.brand svg{width:26px;height:26px;color:var(--ink);stroke-width:2.4}
.nav-r{display:flex;align-items:center;gap:22px}
.nav-r .l{font-size:var(--fs-sm);color:var(--muted);transition:color .2s}
.nav-r .l:hover{color:var(--ink)}
.nav-sep{width:1px;height:22px;background:var(--line)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--fs-base);border-radius:var(--r-lg);padding:11px 20px;transition:background .2s,transform .1s,box-shadow .2s;font-family:var(--sans);white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--shadow-card)}
.btn-ghost:hover{background:var(--surface)}
.btn-sm{padding:var(--sp-2) var(--sp-5);font-size:var(--fs-sm)}
.btn-quiet{background:#fff;color:var(--ink);box-shadow:var(--shadow-card)}
.btn-quiet:hover{background:var(--surface)}

/* The primary action. One saturated blue, a soft halo rather than a hard drop, and a deeper
   inset ring so the edge reads as lit from within rather than outlined. */
.btn-primary{background:var(--accent);color:#fff;
  box-shadow:0 0 0 1px var(--accent-deep) inset,0 2px 2px -1px rgba(17,24,39,.06),
             0 8px 8px -4px rgba(33,66,231,.18),0 16px 16px -8px rgba(33,66,231,.14)}
.btn-primary:hover{background:var(--accent-deep)}

/* Paper, like the rest of the page — a section fill and a hairline rather than an ink slab. The
   dark version was a hangover from the dark canvas: on a white site it reads as a different
   website bolted to the bottom. */
footer{background:var(--surface);border-top:1px solid var(--line);margin-top:0}
footer .wrap{max-width:var(--page-max);container-type:inline-size}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;padding:64px 0 40px}
.fbrand{max-width:36ch}
.fbrand .brand{margin-bottom:14px}
.fbrand p{color:var(--muted);font-size:var(--fs-base);margin-bottom:18px;line-height:1.55}
.fcontact{display:inline-block;color:var(--muted);font-size:var(--fs-base);margin-bottom:18px}
.fcontact:hover{color:var(--ink)}
.fsocial{display:flex;gap:10px}
.fsocial a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:background .2s}
.fsocial a:hover{background:rgba(255,255,255,.18)}
.fsocial svg{width:16px;height:16px;fill:currentColor}
.fcol h4{font-family:var(--sans);font-weight:600;font-size:var(--fs-sm);color:var(--faint);margin-bottom:16px}
.fcol a{display:block;color:var(--muted);font-size:var(--fs-base);margin-bottom:var(--sp-4);transition:color .2s}
.fcol a:hover{color:var(--ink)}
/* Wordmark spans the wrap exactly: "ShipYourClips" in Manrope 600 at --ls-display (-.038em)
   measures 6.075x its font-size, so (container width / 6.075) fills it edge to edge without
   stretching. Re-measure this divisor if the tracking or the weight ever changes. */
.flogo{font-family:var(--serif);font-weight:600;letter-spacing:var(--ls-display);color:var(--surface-2);line-height:1;
  padding:var(--sp-9) 0;white-space:nowrap;font-size:calc(100cqw / 6.075)}
.fbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
  border-top:1px solid var(--line);padding:var(--sp-8) 0 var(--sp-9)}
.fbar .cright{font-family:var(--sans);font-size:var(--fs-sm);color:var(--faint)}

/* Two breakpoints site-wide: 560 (mobile) and 820 (tablet). Nothing else. */
@media(max-width:820px){
  .nav-r .l{display:none}
  .nav-sep{display:none}          /* nothing left to separate once the links hide */
  .nav-in{padding:0 14px}         /* floating pill on mobile; give the CTA room so it never wraps */
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
  .fbrand{grid-column:1 / -1;max-width:none}
}

/* Inline caveat on a feature claim — quiet, but present. A requirement the buyer only discovers
   after paying is the kind of surprise that generates refunds. */
.req{color:var(--faint);font-size:var(--fs-sm);white-space:nowrap}