:root{
  --ink:#0b0b16; --ink-soft:#5c5c72; --ink-faint:#8b8b9e;
  --paper:#ffffff; --paper-soft:#f6f6fb; --paper-line:rgba(11,11,22,.08);
  --dark:#08080f; --dark2:#0d0d1a; --dark-card:#131320; --dark-line:rgba(255,255,255,.1);
  --dark-text:#f7f7fb; --dark-muted:#a9a9bc;
  --pink:#ff2d9a; --purple:#a13cff; --indigo:#5b5cff;
  --radius:24px; --shadow:0 24px 64px rgba(20,10,45,.10);
  --shadow-dark:0 28px 80px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
.wrap{width:min(1160px,calc(100% - 40px));margin:auto}
.gradient-text{
  background:linear-gradient(90deg,var(--pink),var(--purple) 48%,#8587ff);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:600
}
.pill-dark{border:1px solid var(--dark-line);background:rgba(255,255,255,.05);color:#d8d8e5}
.pill-light{border:1px solid var(--paper-line);background:var(--paper-soft);color:var(--ink-soft)}
.dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--indigo));box-shadow:0 0 16px var(--pink)}
.dot-sm{width:5px;height:5px;display:inline-block;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px rgba(61,220,132,.6)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 20px;border-radius:14px;font-weight:700;font-size:14px;
  border:1px solid transparent;transition:.2s ease;cursor:pointer;white-space:nowrap
}
.btn:hover{transform:translateY(-1px)}
.nav-cta-short{display:none}
.btn-primary{
  position:relative;isolation:isolate;
  color:#fff;background:linear-gradient(100deg,var(--pink),var(--purple) 48%,var(--indigo));
  box-shadow:0 14px 34px rgba(155,60,255,.28)
}
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn-primary::before,.btn-primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from var(--angle),var(--pink),var(--purple),var(--indigo),var(--pink));
  animation:btn-glow-spin 3s linear infinite
}
.btn-primary::before{
  z-index:-1;padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude
}
.btn-primary::after{
  z-index:-2;inset:-6px;filter:blur(12px);opacity:.75;
  animation:btn-glow-spin 3s linear infinite,btn-glow-pulse 2s ease-in-out infinite
}
@keyframes btn-glow-spin{to{--angle:360deg}}
@keyframes btn-glow-pulse{0%,100%{opacity:.5}50%{opacity:.95}}
@media (prefers-reduced-motion:reduce){
  .btn-primary::before,.btn-primary::after{animation:none}
}
.btn-dark-ghost{background:rgba(255,255,255,.05);border-color:var(--dark-line);color:var(--dark-text)}
.btn-light-ghost{background:var(--paper);border-color:var(--paper-line);color:var(--ink)}
.btn-solid-dark{background:#0b0b16;color:#fff;border-color:#0b0b16}

/* logo mark reused in nav / footer / demo — clean SVG "R", not the raster AI concept
   (that file has an opaque background and can't sit on either theme cleanly) */
.mark{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;
  background:linear-gradient(145deg,var(--pink),var(--purple) 55%,var(--indigo));flex:0 0 auto}
.mark svg{display:block}

nav{position:sticky;top:0;z-index:30;background:#000;
  border-bottom:1px solid var(--dark-line)}
.nav-inner{height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--dark-text)}
.brand-logo{height:34px;width:auto;display:block}
.footer-logo{height:28px}
.nav-links{display:flex;gap:26px;align-items:center;font-size:14px;color:#fff}

.hero{background:
    radial-gradient(circle at 12% -10%, rgba(255,45,154,.15), transparent 32%),
    radial-gradient(circle at 92% 6%, rgba(91,92,255,.18), transparent 34%),
    var(--dark);
  color:var(--dark-text);padding:90px 0}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero h1{margin:22px 0 16px;font-size:clamp(40px,4.6vw,62px);line-height:1.02;letter-spacing:-.045em}
.hero p.lead{max-width:520px;color:var(--dark-muted);font-size:clamp(15.5px,1.4vw,17.5px)}
.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hero-actions .btn-dark-ghost{gap:8px}
.micro{margin-top:16px;color:#83839a;font-size:13px;display:flex;align-items:center;gap:6px}
.social-proof{margin-top:26px}
.proof-label{font-size:13.5px;color:#9a9aad;font-weight:600}
.chrome-badge{display:flex;width:fit-content;align-items:center;gap:14px;margin-top:18px;padding:16px 26px 16px 18px;
  border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--dark-line);
  color:#f1f1f6;font-size:19px;font-weight:700}
.chrome-badge svg{width:34px;height:34px;flex:0 0 auto}

/* product mockup — a compact rendering of the extension's own side panel, not a browser
   window; matches what the panel actually looks like (title bar, tab strip, brand
   picker, post-preview cards, action row) so it's an honest preview, not an illustration
   of something the product doesn't do. */
.app{border-radius:22px;overflow:hidden;text-align:left;
  background:linear-gradient(180deg,#17172a,#0e0e19);border:1px solid var(--dark-line);box-shadow:var(--shadow-dark)}
.app-titlebar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--dark-line)}
.app-dots{display:flex;gap:6px}
.app-dots i{width:9px;height:9px;border-radius:50%;background:#3b3b4d}
.app-dots i.r{background:#ff5f57}.app-dots i.y{background:#febc2e}.app-dots i.g{background:#28c840}
.app-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--dark-text)}
.app-tabs{margin-left:auto;display:flex;gap:18px;font-size:12.5px;color:#83839a}
.app-tabs .on{color:#fff;font-weight:700}
.app-toolbar{display:flex;align-items:center;justify-content:flex-end;padding:12px 18px;gap:8px;
  border-bottom:1px solid var(--dark-line);font-size:12.5px;color:#9a9aad}
.brand-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--dark-line);color:#d8d8e5;font-weight:600}
.app-body{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:14px;padding:22px}
.app-col-label{font-size:11px;font-weight:700;color:#83839a;margin-bottom:8px}
.app-arrow{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--indigo));flex:0 0 auto;margin-top:60px}
.app-actions{display:flex;flex-direction:column;gap:8px;padding:0 18px 20px}
.app-actions .btn{min-height:40px;font-size:12.5px;padding:0 10px}
.app-actions-row{display:flex;gap:8px}
.app-actions-row .btn{flex:1}

/* hero mockup cycling demo — fake cursor clicks the Rehatch button, right card
   "hatches" into the next example. Content swaps are driven by script.js; every visual
   here is a plain opacity/transform transition, no independent keyframe loop to desync. */
.hero-cursor-stage{position:relative;display:inline-flex}
.hero-rehatch-btn{min-height:32px;padding:0 14px;font-size:12px;transition:transform 150ms ease}
.hero-rehatch-btn.is-pressed{transform:scale(.9)}
.hero-cursor{position:absolute;top:6px;right:-4px;pointer-events:none;
  transform:translate(56px,-46px) rotate(-18deg) scale(.7);opacity:0;
  transition:transform 480ms cubic-bezier(.34,1.56,.64,1),opacity 250ms ease;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.hero-cursor.is-visible{opacity:1;transform:translate(6px,4px) rotate(-18deg) scale(1)}

.hero-cycle-post{transition:opacity 260ms ease}
.hero-cycle-post.is-swapping{opacity:0}

.hero-right-img-wrap{position:relative}
.hero-hatching{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;background:rgba(8,8,15,.78);color:#fff;font-size:12px;font-weight:600;
  opacity:0;transition:opacity 300ms ease;pointer-events:none}
.hero-hatching.is-visible{opacity:1}

@media (prefers-reduced-motion:reduce){
  .hero-cursor,.hero-rehatch-btn,.hero-cycle-post,.hero-hatching{transition:none}
}

section{padding:96px 0}
.section-soft{background:var(--paper-soft)}
.eyebrow{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;margin-bottom:10px}
.eyebrow-purple{color:#9b3fd6}
.eyebrow-dark-purple{color:#d071ff}
h2{font-size:clamp(32px,3.8vw,50px);line-height:1.06;letter-spacing:-.04em;margin:0 0 16px;color:var(--ink)}
h2.on-dark{color:var(--dark-text)}
.section-intro{max-width:680px;color:var(--ink-soft);font-size:16.5px}
.section-intro.on-dark{color:var(--dark-muted)}

/* whole idea — full-browser walkthrough demo. Fixed 980x648 layout inside .bdemo,
   scaled to the container width by script.js (so cursor coordinates stay deterministic
   at every viewport size). Beats are cumulative s-* classes on #browserDemo. */
.live-demo-spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);
  border-top-color:#fff;animation:live-demo-spin .8s linear infinite}
@keyframes live-demo-spin{to{transform:rotate(360deg)}}

.bdemo-wrap{margin-top:40px;overflow:hidden}
.bdemo{width:1240px;height:911px;transform-origin:top left;position:relative;text-align:left;
  border-radius:18px;overflow:hidden;border:1px solid var(--dark-line);background:#0e0e19;box-shadow:var(--shadow-dark)}
.bdemo-chrome{height:48px;display:flex;align-items:center;gap:14px;padding:0 16px;
  background:#17172a;border-bottom:1px solid var(--dark-line)}
.bdemo-url{flex:1;max-width:420px;margin:0 auto;background:rgba(255,255,255,.07);border-radius:8px;
  color:#c2c2d0;font-size:12.5px;padding:6px 14px;text-align:center}
.bdemo-ext{width:22px;height:22px;border-radius:6px}
.bdemo-body{display:grid;grid-template-columns:1fr 340px;height:863px}

.bdemo-feed{position:relative;overflow:hidden;background:#f0f2f5}
.bdemo-feed-scroll{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;gap:16px;
  padding:20px 220px;transition:transform 1400ms cubic-bezier(.4,0,.2,1)}
.s-scrolled .bdemo-feed-scroll{transform:translateY(-480px)}
.bdemo-img-wrap{position:relative}
.bdemo-capture-box{position:absolute;inset:0;border:2px dashed #fff;border-radius:4px;
  background:rgba(91,92,255,.18);clip-path:inset(0% 100% 100% 0%);opacity:0;
  transition:clip-path 800ms cubic-bezier(.4,0,.2,1),opacity 250ms ease}
.s-selected .bdemo-capture-box{clip-path:inset(0% 0% 0% 0%);opacity:1}
.s-captured .bdemo-capture-box{opacity:0}

.bdemo-panel{background:linear-gradient(180deg,#17172a,#0e0e19);border-left:1px solid var(--dark-line);
  padding:14px;display:flex;flex-direction:column;gap:10px}
.bdemo-panel-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--dark-text)}
.bdemo-panel-tabs{margin-left:auto;display:flex;gap:10px;font-size:10.5px;font-weight:600;color:#83839a}
.bdemo-panel-tabs b{color:#fff}
.bdemo-btn{min-height:38px;font-size:12px;padding:0 10px;width:100%;cursor:default;
  transition:transform 150ms ease,opacity 350ms ease}
.is-pressed{transform:scale(.9)!important}
#bdemoRehatchBtn,#bdemoPostBtn{opacity:.35}
.s-captured #bdemoRehatchBtn{opacity:1}
.s-result #bdemoPostBtn{opacity:1}
/* Square (1/1) rather than a fixed pixel height: the demo assets are mostly 1024x1024, so a
   full-width square box shows them at full size with no cropping and no letterboxing. The
   one 4:3 asset gets thin bars top/bottom via object-fit:contain — never a crop. */
.bdemo-thumb{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;flex:0 0 auto;
  background:#0b0b16;border:1px dashed rgba(255,255,255,.18);display:grid;place-items:center}
.bdemo-thumb-hint{font-size:11px;color:#83839a}
.bdemo-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 400ms ease}
.s-captured .bdemo-thumb img{opacity:1}
.bdemo-result-imgwrap{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;flex:0 0 auto;
  background:#0b0b16;border:1px dashed rgba(255,255,255,.12)}
.bdemo-result-imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity 600ms ease}
.s-result .bdemo-result-imgwrap img{opacity:1}
.bdemo-hatch{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;background:rgba(8,8,15,.78);color:#fff;font-size:11.5px;font-weight:600;
  opacity:0;transition:opacity 300ms ease;pointer-events:none}
.s-hatching .bdemo-hatch{opacity:1}
.s-result .bdemo-hatch{opacity:0}
.bdemo-result-caption{font-size:12px;color:var(--dark-muted);min-height:18px;opacity:0;transition:opacity 400ms ease}
.s-result .bdemo-result-caption{opacity:1}

.bdemo-modal{position:absolute;left:50%;top:44px;transform:translateX(-50%) scale(.96);width:400px;
  background:#fff;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.35);color:#050505;
  opacity:0;transition:opacity 300ms ease,transform 300ms ease;pointer-events:none}
.s-modal .bdemo-modal{opacity:1;transform:translateX(-50%) scale(1)}
.s-posted .bdemo-modal{opacity:0;transform:translateX(-50%) scale(.96)}
.bdemo-modal-head{position:relative;text-align:center;font-weight:700;font-size:15px;padding:12px;
  border-bottom:1px solid #e4e6eb}
.bdemo-modal-x{position:absolute;right:14px;top:11px;color:#65676b;font-weight:400}
.bdemo-modal-text{padding:0 14px 10px;font-size:13.5px}
.bdemo-modal-img{display:block;width:100%;height:auto}
.bdemo-modal-post{display:block;width:calc(100% - 28px);margin:12px 14px 14px;min-height:36px;
  background:#1877f2;color:#fff;border:none;border-radius:8px;font-weight:700;font-size:14px;
  cursor:default;transition:transform 150ms ease}

.bdemo-newpost{position:absolute;left:220px;right:220px;top:20px;opacity:0;transform:translateY(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.18);transition:opacity 450ms ease,transform 450ms ease}
.s-posted .bdemo-newpost{opacity:1;transform:translateY(0)}

/* top/left:0 is required, not cosmetic: with them omitted the used position falls back to the
   static position — which, since this svg is the last child after .bdemo-body, is the demo's
   bottom edge (y=911). Every translate() below was then offset by +911px and landed outside
   the overflow:hidden box, so the cursor never rendered at all. Anchored at 0,0 the
   coordinates are absolute within the 1240x911 layout. Each pair is the target button's
   measured centre minus (4,2), the svg's pointer-tip offset inside its 26x26 box. */
.bdemo-cursor{position:absolute;top:0;left:0;z-index:5;pointer-events:none;opacity:0;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));transform:translate(700px,700px);
  transition:transform 650ms cubic-bezier(.4,0,.2,1),opacity 250ms ease}
.s-cursor-capture .bdemo-cursor{opacity:1;transform:translate(1066px,110px)}
.s-cursor-rehatch .bdemo-cursor{opacity:1;transform:translate(1066px,479px)}
.s-cursor-post .bdemo-cursor{opacity:1;transform:translate(1066px,877px)}
.s-cursor-modalpost .bdemo-cursor{opacity:1;transform:translate(446px,554px)}
.s-posted .bdemo-cursor{opacity:0}
.is-resetting *{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .bdemo-feed-scroll,.bdemo-capture-box,.bdemo-btn,.bdemo-thumb img,.bdemo-result-imgwrap img,
  .bdemo-hatch,.bdemo-result-caption,.bdemo-modal,.bdemo-newpost,.bdemo-cursor{transition:none}
  .live-demo-spinner{animation:none}
}

/* Shared Facebook-style post card — used for the hero mockup (compact) and the
   before/after demo (default size). Modeled on real Facebook post chrome (header with
   avatar/name/timestamp/menu, reaction badge stack, comment/share counts, and a
   Like/Comment/Share action row) rather than an abstract card, so it reads as an actual
   post preview rather than generic UI. */
.fb-post{background:#fff;border:1px solid #dadde1;border-radius:8px;overflow:hidden;text-align:left;color:#050505}
.fb-post-head{display:flex;align-items:center;gap:8px;padding:12px}
.fb-avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7d7d8c,#2c2c38)}
.fb-avatar img{width:130%;height:130%;object-fit:cover;display:block}
.fb-post-names{flex:1;min-width:0}
.fb-post-name{font-size:14.5px;font-weight:600;line-height:1.3}
.fb-post-meta{font-size:12px;color:#65676b;display:flex;align-items:center;gap:3px}
.fb-post-menu{color:#65676b;font-size:16px;line-height:1;flex:0 0 auto}
.fb-post-text{padding:0 12px 10px;font-size:14.5px;line-height:1.4}
/* No forced aspect-ratio: the example assets are a mix of 1024x1024 and 1200x896, and any
   fixed box + object-fit:cover crops one of the two (a 4/3 box ate the bottom of the square
   images, a 1/1 box ate the sides of the 4:3 ones — both cut off the baked-in caption text).
   Natural height renders every asset whole. */
.fb-post-img{display:block;width:100%;height:auto}
.fb-post-stats{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:12.5px;color:#65676b}
.fb-reactions{display:flex;align-items:center;gap:5px}
.fb-reaction-icons{display:flex}
.fb-reaction-icons span{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;border:1.5px solid #fff;margin-left:-5px}
.fb-reaction-icons span:first-child{margin-left:0;background:#1877f2;color:#fff;z-index:2}
.fb-reaction-icons span:last-child{background:#f33e58;color:#fff}
.fb-post-actions{display:flex;border-top:1px solid #dadde1;padding:2px 6px}
.fb-post-actions span{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:8px;font-size:13px;font-weight:600;color:#65676b}

/* compact variant for the hero mockup, sitting two-up in a narrower panel */
.fb-post.compact .fb-post-head{padding:8px 10px}
.fb-post.compact .fb-avatar{width:28px;height:28px}
.fb-post.compact .fb-post-name{font-size:12px}
.fb-post.compact .fb-post-meta{font-size:10.5px}
.fb-post.compact .fb-post-text{padding:0 10px 8px;font-size:11.5px}
.fb-post.compact .fb-post-stats{padding:6px 10px;font-size:10.5px}
.fb-post.compact .fb-post-actions span{padding:6px;font-size:11px}

.steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:center;margin-top:38px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}
.step,.feature{border:1px solid var(--paper-line);background:var(--paper);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.step-arrow{color:var(--ink-faint);font-size:20px;font-weight:700}
.icon-box{position:relative;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;color:#fff}
.step-num{position:absolute;top:-8px;left:-8px;width:20px;height:20px;border-radius:50%;background:var(--ink);
  color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid var(--paper)}
.step h3,.feature h3{margin:0 0 8px;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.step p,.feature p{margin:0;color:var(--ink-soft);font-size:13.5px}

/* privacy — dark */
.privacy{background:
    radial-gradient(circle at 88% 12%, rgba(91,92,255,.2), transparent 34%),
    var(--dark);color:var(--dark-text)}
.privacy-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.privacy-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;
  border:1px solid var(--dark-line);background:rgba(255,255,255,.04);font-size:12.5px;color:#d8d8e5}
.shield-wrap{min-height:300px;border-radius:24px;display:grid;place-items:center;position:relative;
  background:linear-gradient(145deg,#1a1a2e,#0f0f1b);border:1px solid var(--dark-line);overflow:hidden}
.shield-wrap:before{content:"";position:absolute;width:240px;height:240px;border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--indigo));filter:blur(60px);opacity:.28}
.shield-wrap video{width:100%;height:100%;object-fit:cover;position:relative;border-radius:inherit}

/* pricing */
.price-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start;margin-top:40px}
.price-card{border-radius:26px;padding:32px;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,var(--pink),var(--purple),var(--indigo)) border-box;
  border:1.5px solid transparent;box-shadow:var(--shadow)}
.price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.price-old{font-size:22px;color:var(--ink-faint);text-decoration:line-through}
.price-new{font-size:52px;line-height:1;font-weight:850;letter-spacing:-.04em}
.price-once{color:var(--ink-soft);font-size:13.5px;margin-top:6px}
.checks{display:grid;gap:11px;margin:22px 0;color:var(--ink);font-size:14px}
.check:before{content:"✓";margin-right:10px;color:var(--purple);font-weight:900}
.fine{color:var(--ink-faint);font-size:12px;margin-top:12px}
.compare-wrap{display:flex;flex-direction:column;gap:14px}
.compare-card{border:1px solid var(--paper-line);border-radius:24px;padding:28px;background:var(--paper-soft)}
.compare-title{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
.compare-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;
  border-bottom:1px dashed var(--paper-line);font-size:13.5px;color:var(--ink-soft)}
.compare-row:last-of-type{border-bottom:0}
.compare-x{color:#e04b6b;font-weight:800}
.compare-caption{margin:0 0 0 8px;font-size:13.5px;font-style:italic;color:var(--ink-faint);line-height:1.4}

.faq{max-width:820px;margin:38px auto 0;display:grid;gap:10px}
details{border:1px solid var(--paper-line);border-radius:16px;background:var(--paper);padding:18px 20px;box-shadow:var(--shadow)}
summary{cursor:pointer;font-weight:700;list-style:none;color:var(--ink)}
summary::-webkit-details-marker{display:none}
details p{color:var(--ink-soft);margin:12px 0 0;font-size:14px}

footer{background:var(--dark);color:var(--dark-muted);padding:56px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px;padding-bottom:36px;border-bottom:1px solid var(--dark-line)}
.footer-brand .brand{margin-bottom:10px}
.footer-brand p{font-size:13.5px;color:#83839a;max-width:280px;margin:0 0 16px}
.social{display:flex;gap:10px}
.social a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--dark-line);background:rgba(255,255,255,.04);color:#c2c2d0}
.footer-col h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:#83839a;margin:0 0 14px}
.footer-col a{display:block;font-size:14px;color:#c2c2d0;margin-bottom:10px}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:22px;font-size:12.5px;color:#6d6d82}

/* legal pages (privacy.html / terms.html) — plain prose column under a compact dark header */
.legal-hero{background:var(--dark);color:var(--dark-text);padding:56px 0 44px;text-align:left}
.legal-hero h1{font-size:clamp(32px,4.5vw,48px);letter-spacing:-.03em;margin:14px 0 8px}
.legal-hero .updated{color:#83839a;font-size:13px}
.legal-body{max-width:760px;margin:0 auto;padding:64px 0}
.legal-body h2{font-size:22px;margin:40px 0 12px}
.legal-body h2:first-child{margin-top:0}
.legal-body p,.legal-body li{color:var(--ink-soft);font-size:15px;line-height:1.7}
.legal-body ul{padding-left:20px;margin:10px 0}
.legal-body a{color:var(--purple);text-decoration:underline}

/* updates.html — a dated, reverse-chronological release log */
.updates-list{max-width:760px;margin:0 auto;padding:64px 0;display:grid;gap:20px}
.update-entry{border:1px solid var(--paper-line);background:var(--paper);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.update-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.update-date{font-size:12.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em}
.update-version{font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;color:#fff;
  background:linear-gradient(100deg,var(--pink),var(--purple) 48%,var(--indigo))}
.update-entry h3{margin:0 0 8px;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.update-entry p{margin:0;color:var(--ink-soft);font-size:14.5px;line-height:1.6}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero{text-align:center;padding-bottom:56px}
  .hero p.lead{margin:0 auto}
  .hero-actions{justify-content:center}
  .micro{justify-content:center}
  .app{margin:48px auto 0;max-width:600px}
  /* The hero centres via text-align here, which can't reach .chrome-badge — it's a flex box
     with width:fit-content, so it stayed pinned left. Auto margins centre it properly. */
  .chrome-badge{margin-left:auto;margin-right:auto}
  /* Flex the copy column purely so the Chrome badge can sit directly under the buttons,
     with the two "your own key / nothing leaves your browser" lines pushed below it. Reads
     tighter on a phone, where the badge is the strongest trust signal in the block. */
  .hero-copy{display:flex;flex-direction:column}
  .micro{order:1;margin-top:20px}
  .social-proof{margin-top:22px}
}
@media(max-width:900px){
  .nav-links a:not(.btn){display:none}
  .privacy-grid,.price-wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .step-arrow{display:none}
  .features{grid-template-columns:1fr 1fr}
  .app-body{grid-template-columns:1fr}
  .app-arrow{transform:rotate(90deg);margin:0 auto}
}
@media(max-width:640px){
  .wrap{width:min(calc(100% - 24px),1160px)}
  .hero{padding-top:56px}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%}
  .features{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  section{padding:64px 0}
  .app{margin-top:36px}
  .price-card,.compare-card{padding:24px}
  .compare-wrap{align-items:center;text-align:center}
  .compare-caption{margin-left:0}
  .app-actions-row{flex-direction:column}
}
@media(max-width:480px){
  .nav-inner{height:auto;padding:12px 0}
  .nav-cta-full{display:none}
  .nav-cta-short{display:inline}
  .btn{padding:0 14px;min-height:42px;font-size:13px}
  .micro{flex-direction:column;gap:4px}
  /* the tab strip in the hero's app mockup is decorative and doesn't fit this narrow —
     drop it rather than let it clip "Craft" off the edge */
  .app-tabs{display:none}
}