/* ============================================================
   Photo Heat Map landing page
   Palette lifted from the extension icon. Warm charcoal ground rather
   than the usual blue-black, so the amber heat is the only colour on
   the page that carries meaning.
   ============================================================ */

:root {
  --ink-900:#0b0a09;
  --ink-850:#121110;
  --ink-800:#1a1817;
  --ink-700:#232120;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.05);

  --text:#f1ede9;
  --text-dim:#b0a79f;
  --muted:#8b827a;

  --heat-1:#ffe08a;
  --heat-2:#ff9d3f;
  --heat-3:#f0492f;
  --heat-4:#c81e3a;

  --wrap:1160px;
  --pad:clamp(20px,5vw,40px);

  --f-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink-900);
  color:var(--text);
  font-family:var(--f-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap.narrow{max-width:820px}
.mono{font-family:var(--f-mono);font-size:.92em;color:var(--heat-1)}

.skip{position:absolute;left:-9999px;top:0;background:var(--heat-2);color:#000;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:2px solid var(--heat-2);outline-offset:3px;border-radius:4px}

/* ─────────────────── header ─────────────────── */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ink-900) 82%,transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.head-inner{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:11px;font-weight:650;letter-spacing:-.02em;text-decoration:none;font-size:16px}
.brand-mark{width:28px;height:28px;flex:none}
.head-nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
.head-nav a{color:var(--text-dim);text-decoration:none;transition:color .15s}
.head-nav a:hover{color:var(--text)}

/* ─────────────────── buttons ─────────────────── */
.btn{
  display:inline-block;
  background:linear-gradient(180deg,var(--heat-1),var(--heat-2));
  color:#2a1400;
  font-weight:680;
  letter-spacing:-.01em;
  text-decoration:none;
  border-radius:9px;
  padding:11px 20px;
  font-size:15px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 24px -10px rgba(255,157,63,.8);
  transition:transform .15s,box-shadow .15s,filter .15s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 30px -10px rgba(255,157,63,.95)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:9px 16px;font-size:14px}
.btn-lg{padding:15px 30px;font-size:17px;border-radius:11px}
.btn-ghost{
  color:var(--text-dim);text-decoration:none;font-size:15.5px;font-weight:520;
  border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;transition:color .15s,border-color .15s;
}
.btn-ghost:hover{color:var(--heat-1);border-color:var(--heat-2)}

/* ─────────────────── hero ─────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(64px,11vw,132px) 0 clamp(80px,12vw,150px)}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-3;opacity:.95}
/* A pool of dark under the copy, not a curtain across half the canvas, so
   the world stays readable edge to edge and only dims where text sits. */
.hero-veil{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(63% 80% at 22% 52%,
      rgba(11,10,9,.97) 0%, rgba(11,10,9,.93) 32%, rgba(11,10,9,.70) 52%,
      rgba(11,10,9,.28) 72%, rgba(11,10,9,.05) 88%, transparent 100%),
    linear-gradient(180deg,rgba(11,10,9,.86) 0%,transparent 16%),
    linear-gradient(0deg,rgba(11,10,9,.55) 0%,transparent 22%);
}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:180px;z-index:-1;background:linear-gradient(180deg,transparent,var(--ink-900))}
/* Keep the full 1160 wrap so the copy stays LEFT in it; the children
   carry the measure. Setting max-width here instead would inherit
   .wrap's margin-inline:auto and centre the column into the map. */
.hero-inner{position:relative;max-width:var(--wrap)}
.hero-inner > *{max-width:625px}

.eyebrow{
  margin:0 0 22px;font-size:12.5px;font-weight:640;letter-spacing:.14em;text-transform:uppercase;
  color:var(--heat-2);
}
.hero h1{
  margin:0 0 26px;
  font-size:clamp(2.9rem,7.4vw,5.1rem);
  line-height:1.02;
  letter-spacing:-.038em;
  font-weight:700;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--heat-1) 8%,var(--heat-2) 46%,var(--heat-3) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{margin:0 0 34px;font-size:clamp(1.06rem,2.1vw,1.28rem);line-height:1.62;color:var(--text-dim);max-width:48ch}
.lede-tight{margin-bottom:40px}
.lede strong{color:var(--text);font-weight:620}

.cta-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-bottom:30px}
.proof{margin:0;font-size:14.5px;color:var(--muted);display:flex;align-items:center;gap:4px 7px;flex-wrap:wrap}
.proof .pgroup{white-space:nowrap}
.proof strong{color:var(--text);font-weight:640}
.stars{color:var(--heat-2);letter-spacing:.1em;font-size:13px}
/* Unearned stars when the average is not a clean 5. */
.star-dim{opacity:.26}
.dot{opacity:.45}

/* ─────────────────── trust strip ─────────────────── */
.strip{border-block:1px solid var(--line-soft);background:var(--ink-850)}
.strip-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2px 30px;padding-block:22px}
.strip-item{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--text-dim);padding-block:6px}
.tick{width:15px;height:15px;flex:none;border-radius:50%;background:rgba(255,157,63,.13);position:relative}
.tick::after{
  content:"";position:absolute;left:4.5px;top:3px;width:4px;height:7.5px;
  border:solid var(--heat-2);border-width:0 1.8px 1.8px 0;transform:rotate(43deg);
}

/* ─────────────────── sections ─────────────────── */
.section{padding-block:clamp(72px,10vw,124px);position:relative}
.section.alt{background:var(--ink-850);border-block:1px solid var(--line-soft)}

.kicker{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-size:12.5px;font-weight:640;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.kicker span{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0;
  color:var(--heat-2);border:1px solid rgba(255,157,63,.32);border-radius:5px;
  padding:2px 7px;background:rgba(255,157,63,.07);
}
h2{
  margin:0 0 24px;
  font-size:clamp(1.95rem,4.3vw,3rem);
  line-height:1.1;letter-spacing:-.032em;font-weight:690;max-width:19ch;
}
h3{margin:0 0 10px;font-size:1.11rem;font-weight:650;letter-spacing:-.015em}

.grid-2{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,6vw,84px);align-items:start}
.grid-2 h2{margin-bottom:0}
.prose p{margin:0 0 20px;color:var(--text-dim);font-size:1.06rem}
.prose p:last-child{margin-bottom:0}
.prose em{color:var(--text);font-style:italic}
.pull{
  border-left:2px solid var(--heat-3);padding-left:20px;
  color:var(--text)!important;font-size:1.12rem!important;font-weight:520;
}

/* ─────────────────── steps ─────────────────── */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(26px,4vw,44px);counter-reset:s}
.steps li{position:relative;padding-top:24px;border-top:1px solid var(--line)}
.steps li::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:34px;background:var(--heat-2)}
.step-n{
  display:block;margin-bottom:9px;
  font-family:var(--f-mono);font-size:12.5px;font-weight:640;
  letter-spacing:.06em;color:var(--heat-2);
}
.steps h3{margin-bottom:9px}
.steps p{margin:0;color:var(--text-dim);font-size:.985rem}
.steps strong{color:var(--text)}

/* ─────────────────── features ─────────────────── */
/* 6-col grid, deliberately uneven: 4+2 / 2+2+2 / 6. Every row fills. */
.features{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:48px}
.feat{
  grid-column:span 2;
  background:linear-gradient(168deg,var(--ink-800),var(--ink-850));
  border:1px solid var(--line);border-radius:14px;padding:26px 24px 28px;
  position:relative;overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.feat::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,157,63,.55),transparent);
  opacity:0;transition:opacity .25s;
}
.feat:hover{border-color:rgba(255,157,63,.28);transform:translateY(-2px)}
.feat:hover::before{opacity:1}
.feat-wide{grid-column:span 4}
.feat-full{grid-column:span 6}
.feat p{margin:0;color:var(--text-dim);font-size:.975rem}

/* ─────────────────── privacy ─────────────────── */
.privacy{
  background:
    radial-gradient(90% 60% at 78% 8%,rgba(255,157,63,.075),transparent 62%),
    var(--ink-900);
}
.privacy h2{max-width:22ch}
.priv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:34px}
.priv-card{background:var(--ink-850);padding:30px 28px}
.priv-card h3{color:var(--heat-1);font-size:1.03rem;margin-bottom:11px}
.priv-card p{margin:0;color:var(--text-dim);font-size:.975rem}
.priv-card strong{color:var(--text);font-weight:620}
.priv-foot{margin:0;color:var(--muted);font-size:.95rem;max-width:72ch}
.priv-foot a{color:var(--heat-2);text-decoration:none;font-weight:560;white-space:nowrap}
.priv-foot a:hover{text-decoration:underline}

/* ─────────────────── changelog ─────────────────── */
.log{list-style:none;margin:0;padding:0;position:relative}
.log::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:1px;background:var(--line)}
.log > li{position:relative;padding:0 0 40px 34px}
.log > li:last-child{padding-bottom:0}
.log > li::before{
  content:"";position:absolute;left:0;top:9px;width:13px;height:13px;border-radius:50%;
  background:var(--ink-850);border:2px solid var(--line);
}
.log > li:first-child::before{border-color:var(--heat-2);background:var(--heat-3);box-shadow:0 0 0 4px rgba(240,73,47,.16)}
.log-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ver{font-family:var(--f-mono);font-size:1.16rem;font-weight:640;letter-spacing:-.01em}
.log-head time{font-size:14px;color:var(--muted)}
.badge{font-size:11px;font-weight:660;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:20px}
.badge-now{background:rgba(255,157,63,.14);color:var(--heat-2);border:1px solid rgba(255,157,63,.3)}
.log-items{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.log-items li{position:relative;padding-left:19px;font-size:1rem;color:var(--text-dim)}
.log-items li::before{
  content:"";position:absolute;left:0;top:.65em;width:7px;height:1.5px;
  background:var(--heat-2);opacity:.8;
}

/* ─────────────────── faq ─────────────────── */
details{border-bottom:1px solid var(--line);padding:5px 0}
details summary{
  cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-size:1.045rem;font-weight:580;letter-spacing:-.012em;transition:color .15s;
}
details summary::-webkit-details-marker{display:none}
details summary:hover{color:var(--heat-1)}
details summary::after{
  content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;
  border:solid var(--muted);border-width:0 1.6px 1.6px 0;
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details[open] summary{color:var(--heat-1)}
details p{margin:0 0 20px;color:var(--text-dim);font-size:1rem;max-width:68ch;padding-right:20px}

/* ─────────────────── final cta ─────────────────── */
.final{
  text-align:center;padding-block:clamp(80px,11vw,132px);
  background:
    radial-gradient(66% 108% at 50% 118%,rgba(240,73,47,.19),transparent 66%),
    radial-gradient(46% 78% at 50% 108%,rgba(255,157,63,.16),transparent 62%),
    var(--ink-850);
  border-top:1px solid var(--line-soft);
}
.final h2{margin-inline:auto;max-width:16ch;margin-bottom:16px}
.final > .wrap > p{margin:0 auto 32px;color:var(--text-dim);max-width:50ch;font-size:1.08rem}
.final-note{margin:22px auto 0!important;max-width:none!important;font-size:13.5px!important;color:var(--muted)!important;letter-spacing:.01em}

/* ─────────────────── footer ─────────────────── */
.site-foot{border-top:1px solid var(--line-soft);padding-block:44px 52px;background:var(--ink-900)}
.foot-inner{display:grid;grid-template-columns:1fr auto;gap:26px 40px;align-items:start}
.foot-brand{margin:0;font-weight:640;letter-spacing:-.02em}
.foot-by{margin:3px 0 0;color:var(--muted);font-size:14px}
.foot-nav{display:flex;gap:24px;flex-wrap:wrap;font-size:14.5px}
.foot-nav a{color:var(--text-dim);text-decoration:none}
.foot-nav a:hover{color:var(--heat-1)}
.foot-fine{grid-column:1/-1;margin:14px 0 0;font-size:12.8px;line-height:1.7;color:#6c645c;max-width:78ch}


/* ============================================================
   Document pages (privacy policy). Same tokens and the same type
   scale as the landing page, so the two never drift apart: this
   lives here rather than in a <style> block on the page itself.
   ============================================================ */
.doc{padding-block:clamp(56px,8vw,92px)}
.doc h1{
  margin:0 0 14px;
  font-size:clamp(2.3rem,5.4vw,3.4rem);
  line-height:1.06;letter-spacing:-.035em;font-weight:700;max-width:none;
}
.doc .meta{color:var(--muted);font-size:14.5px;margin:0 0 44px}
.doc .intro{
  font-size:clamp(1.06rem,2.1vw,1.24rem);line-height:1.62;
  color:var(--text-dim);margin:0 0 8px;max-width:56ch;
}
.doc h2{
  margin:52px 0 18px;max-width:none;
  font-size:clamp(1.5rem,3.1vw,1.95rem);
  line-height:1.16;letter-spacing:-.03em;font-weight:690;
}
.doc p,.doc li{color:var(--text-dim);font-size:1.06rem}
.doc p{margin:0 0 19px}
.doc ul{margin:0 0 19px;padding-left:22px;display:grid;gap:12px}
.doc ul ul{margin:12px 0 0}
.doc strong{color:var(--text);font-weight:620}
.doc a{color:var(--heat-2)}
.doc .back{
  display:inline-block;margin-bottom:32px;color:var(--text-dim);
  text-decoration:none;font-size:14.5px;
}
.doc .back:hover{color:var(--heat-1)}

/* ─────────────────── responsive ─────────────────── */
@media (max-width:1000px){
  .priv-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr;gap:24px}
  .features{grid-template-columns:repeat(2,1fr)}
  .feat,.feat-wide,.feat-full{grid-column:span 1}
}
@media (max-width:720px){
  .head-nav{display:none}
  .head-inner{gap:14px}
  .features{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}
  /* Drop the trailing 'on the Chrome Web Store' on a phone: the button
     right above it already says Chrome, and it wrapped to a lone line.
     Targeted by class, not :last-of-type, which matches on element type:
     every child here is a span, so .dot:last-of-type matched nothing and
     left a dangling separator. */
  .proof .dot-store,.proof .pgroup-store{display:none}
  .cta-row{gap:18px}
  .btn-lg{width:100%;text-align:center}
  /* Copy sits up top on a phone, so darken only the top and let the heat
     breathe underneath it rather than veiling the whole canvas. */
  .hero-veil{background:
    linear-gradient(180deg,rgba(11,10,9,.95) 0%,rgba(11,10,9,.92) 42%,
      rgba(11,10,9,.68) 62%,rgba(11,10,9,.28) 80%,rgba(11,10,9,.06) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .btn,.feat{transition:none}
  .btn:hover,.feat:hover{transform:none}
}

/* Light-mode users still get the dark design: it is the product's own
   palette, and a map is read against dark ground. Declared explicitly so
   the browser paints our background rather than borrowing one. */
:root{color-scheme:dark}