/* ============================================================================
   Shared styles for the document pages: /terms, /privacy, /cookies, /help, /blog.

   index.html is one self-contained file because everything in it is inlined
   photography. These pages carry little of their own (the compare pages link a
   handful of screenshots from /img), so they share this sheet instead of each
   keeping its own copy of the tokens: duplicates would drift the first time a
   colour changed. The token block below is the same one index.html
   declares, and must stay in step with it.
   ========================================================================= */

/* ============ TOKENS - dark-first (the app icon is a night scene) ============ */
:root{
  --ground:#191c1d; --ground-deep:#101314; --panel:#202523;
  --rule:rgba(240,230,210,.13); --rule-soft:rgba(240,230,210,.07);
  --text:#f0e6d2; --text-dim:#aeaa9c; --text-faint:#888c81;
  --accent:#9db081; --accent-dim:#7d8f63; --hill:#4f5d3c; --hill-deep:#3b462d;
  --chip:rgba(240,230,210,.05); --chip-on:rgba(157,176,129,.14);
  --max:1100px;
  --f-display:Fraunces,Georgia,"Times New Roman",serif;
  --f-body:Figtree,ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Courier Prime",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
/* Light = dawn over the same hills. Guarded so an explicit dark choice wins. */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#f3ecdc; --ground-deep:#e9e0cb; --panel:#fbf7ec;
    --rule:rgba(27,31,28,.16); --rule-soft:rgba(27,31,28,.08);
    --text:#1b1f1c; --text-dim:#525749; --text-faint:#5f6457;
    --accent:#47552f; --accent-dim:#5d6e45; --hill:#7b8b61; --hill-deep:#66754e;
    --chip:rgba(27,31,28,.045); --chip-on:rgba(71,85,47,.12);
  }
}
:root[data-theme="light"]{
  --ground:#f3ecdc; --ground-deep:#e9e0cb; --panel:#fbf7ec;
  --rule:rgba(27,31,28,.16); --rule-soft:rgba(27,31,28,.08);
  --text:#1b1f1c; --text-dim:#525749; --text-faint:#5f6457;
  --accent:#47552f; --accent-dim:#5d6e45; --hill:#7b8b61; --hill-deep:#66754e;
  --chip:rgba(27,31,28,.045); --chip-on:rgba(71,85,47,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{width:min(100% - 44px,var(--max)); margin-inline:auto}

h1,h2,h3{text-wrap:balance; margin:0}
h1,h2{font-family:var(--f-display); font-optical-sizing:auto; font-weight:400; letter-spacing:-.014em}
h1{font-size:clamp(35px,4vw,55px); line-height:1.08}
h2{font-size:clamp(23px,2.3vw,29px); line-height:1.16}
h3{font-family:var(--f-body); font-weight:600; font-size:17.5px; line-height:1.35; letter-spacing:-.01em}
p{margin:0}
.lede{color:var(--text-dim); font-size:clamp(16.5px,1.3vw,18.5px); max-width:62ch}

.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:11px;
}
.eyebrow::before{content:""; width:20px; height:1px; background:var(--accent-dim); flex:none}

/* ============ NAV ============ */
.nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--ground) 88%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--rule-soft)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 0}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; font-weight:600; letter-spacing:-.02em; font-size:18px}
.brand img{width:33px; height:33px; border-radius:9px}
.nav-links{display:flex; align-items:center; gap:28px}
.nav-links a:not(.btn){text-decoration:none; font-size:14.5px; color:var(--text-dim); transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a.btn{text-decoration:none}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-body); font-size:15px; font-weight:600; text-decoration:none;
  padding:12px 21px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s;
}
.btn-primary{background:var(--text); color:var(--ground)}
.btn-primary:hover{transform:translateY(-2px)}
.nav .btn{padding:10px 17px; font-size:14px}

/* ============ DOCUMENT HEADER ============ */
.doc-head{padding:clamp(44px,5.5vw,72px) 0 clamp(28px,3.4vw,42px); border-bottom:1px solid var(--rule-soft)}
.doc-head .eyebrow{margin-bottom:16px}
.doc-head .lede{margin-top:18px}
.doc-meta{
  margin-top:26px; display:flex; gap:26px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.05em; color:var(--text-faint);
}
/* The byline is a link into /about. `a{color:inherit}` alone leaves it looking
   like the dead text either side of it, which defeats the point of having it. */
.doc-meta a{color:var(--text-dim); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.doc-meta a:hover{color:var(--accent)}

/* ============ DOCUMENT BODY ============ */
/* The measure is the point of this layout: legal text is read line by line, and
   anything past ~72ch loses the reader on the return sweep. */
.doc{display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr); gap:clamp(30px,5vw,72px); align-items:start; padding:clamp(38px,4.5vw,60px) 0 clamp(60px,7vw,92px)}

.toc{position:sticky; top:96px; display:flex; flex-direction:column; gap:2px}
.toc-label{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-faint); padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--rule-soft)}
.toc a{text-decoration:none; font-size:14px; color:var(--text-dim); padding:6px 0; transition:color .2s}
.toc a:hover{color:var(--accent)}

.prose{max-width:72ch; min-width:0}
.prose section{scroll-margin-top:92px}
.prose section + section{margin-top:clamp(38px,4vw,52px)}
.prose h2{margin-bottom:16px}
.prose h3{margin:26px 0 9px}
.prose p{color:var(--text-dim); font-size:16px; margin-bottom:14px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text); font-weight:600}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.prose ul{color:var(--text-dim); font-size:16px; margin:0 0 14px; padding-left:20px; display:flex; flex-direction:column; gap:8px}
.prose li::marker{color:var(--accent-dim)}
.prose ol{color:var(--text-dim); font-size:16px; margin:0 0 14px; padding-left:22px; display:flex; flex-direction:column; gap:8px}
/* A quote in a blog post: the line in the display face, who wrote it underneath. */
.prose blockquote{margin:22px 0; padding:2px 0 2px 20px; border-left:2px solid var(--accent-dim)}
.prose blockquote p{font-family:var(--f-display); font-size:clamp(19px,1.7vw,21px); line-height:1.42; color:var(--text); margin-bottom:7px}
.prose blockquote cite{display:block; font-style:normal; font-size:14px; color:var(--text-faint)}
.prose blockquote cite a{color:inherit}
.prose li > strong:first-child{color:var(--text)}

/* A number that carries the section's point, pulled out of the paragraph. */
.stat{display:flex; align-items:baseline; gap:12px; margin-bottom:14px}
.stat b{font-family:var(--f-display); font-size:31px; font-weight:400; line-height:1; color:var(--accent)}
.stat span{font-size:15px; color:var(--text-dim)}

/* ============ CALLOUT ============ */
.callout{
  background:var(--panel); border:1px solid var(--rule-soft); border-radius:16px;
  padding:20px 22px; margin:0 0 18px; display:flex; flex-direction:column; gap:9px;
}
.callout .callout-label{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent)}
.callout p{margin:0; font-size:15.5px}
.callout.plain{background:none; border-left:2px solid var(--accent-dim); border-radius:0; border-top:0; border-right:0; border-bottom:0; padding:2px 0 2px 20px}

/* ============ TABLE ============ */
/* Wide tables scroll inside their own box; the page itself never does. */
.table-scroll{overflow-x:auto; margin:0 0 18px; border:1px solid var(--rule-soft); border-radius:14px}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:15px}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--rule-soft); vertical-align:top; color:var(--text-dim)}
th{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-faint); font-weight:400; background:var(--ground-deep)}
tr:last-child td{border-bottom:0}
td strong{color:var(--text)}

/* ============ FILL-IN PLACEHOLDER ============ */
/* Deliberately loud. Anything still highlighted when the page is published is a
   blank that was never filled in, and it should be impossible to miss. */
.fill{
  background:#ffd84d; color:#2a2205; font-family:var(--f-mono); font-size:.88em;
  padding:1px 7px; border-radius:5px; font-weight:400; white-space:nowrap;
}

/* ============ HELP PAGE ============ */
.help-search{margin-top:26px; max-width:520px; position:relative}
.help-search input{
  width:100%; font-family:var(--f-body); font-size:16px; color:var(--text);
  background:var(--chip); border:1px solid var(--rule); border-radius:13px;
  padding:14px 17px 14px 44px;
}
.help-search input::placeholder{color:var(--text-faint)}
.help-search svg{position:absolute; left:16px; top:50%; translate:0 -50%; width:17px; height:17px; stroke:var(--text-faint); fill:none; stroke-width:2}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:clamp(16px,2vw,22px); margin-bottom:clamp(38px,4vw,50px)}
.card{
  background:var(--panel); border:1px solid var(--rule-soft); border-radius:18px;
  padding:22px; display:flex; flex-direction:column; gap:8px; text-decoration:none;
  transition:border-color .2s, transform .18s;
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 42%,transparent); transform:translateY(-2px)}
/* `.prose a` sets an underline and outranks `.card` on specificity, and the
   decoration would inherit down into the card's heading and blurb. */
.prose a.card,.prose a.card:hover{text-decoration:none}
.card .card-icon{font-size:21px; line-height:1; margin-bottom:4px}
.card p{color:var(--text-dim); font-size:14.5px; margin:0}

/* ============ SCREENSHOT ============
   A single phone capture beside the paragraph it illustrates on a wide
   screen, above it on a narrow one. height:auto is load-bearing: the width
   and height attributes on the <img> become presentational hints, and
   height:900px would otherwise beat the ratio and stretch the shot. */
.shots{display:grid; grid-template-columns:minmax(0,186px); gap:9px; margin:0 0 20px}
.shots figure{margin:0; display:flex; flex-direction:column; gap:9px; min-width:0}
.shots img{
  width:100%; height:auto; aspect-ratio:414/900; border-radius:15px;
  border:1px solid var(--rule-soft); background:var(--ground-deep);
}
.shots figcaption{font-size:13.5px; line-height:1.45; color:var(--text-faint); text-wrap:pretty}
/* A crop of the part of a capture that matters (the widget, the notification),
   shown at column width so its words can actually be read. */
.shot-zoom{margin:26px 0; max-width:560px; display:flex; flex-direction:column; gap:9px}
.shot-zoom.narrow{max-width:400px}
.shot-zoom img{width:100%; height:auto; border-radius:18px; border:1px solid var(--rule-soft); background:var(--ground-deep)}
.shot-zoom figcaption{font-size:13.5px; line-height:1.45; color:var(--text-faint); text-wrap:pretty}

.shot-aside{display:grid; grid-template-columns:186px minmax(0,1fr); gap:clamp(18px,2.4vw,30px); align-items:start; margin-bottom:20px}
.shot-aside .shots{margin:0}
.shot-aside .shot-body > p:last-child{margin-bottom:0}

@media (max-width:620px){
  .shot-aside{grid-template-columns:1fr; gap:16px}
  .shots{grid-template-columns:minmax(0,58%)}
}

/* ============ FAQ / DETAILS ============ */
.faq{max-width:72ch}
details{border-bottom:1px solid var(--rule-soft)}
summary{cursor:pointer; list-style:none; padding:19px 40px 19px 0; position:relative; font-weight:500; font-size:16.5px; transition:color .2s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--accent)}
summary::after{
  content:""; position:absolute; right:8px; top:50%; width:9px; height:9px;
  border-right:1.5px solid var(--text-faint); border-bottom:1.5px solid var(--text-faint);
  translate:0 -60%; rotate:45deg; transition:rotate .22s, border-color .2s;
}
details[open] summary::after{rotate:225deg; translate:0 -30%; border-color:var(--accent)}
details .details-body{padding:0 6ch 21px 0; max-width:64ch}
details .details-body p{color:var(--text-dim); font-size:15.5px; margin-bottom:12px}
details .details-body p:last-child{margin-bottom:0}
details .details-body ul{color:var(--text-dim); font-size:15.5px; margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:7px}
details .details-body ol{color:var(--text-dim); font-size:15.5px; margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:7px}
details .details-body a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
details .details-body strong{color:var(--text)}
.no-results{color:var(--text-faint); font-size:15.5px; padding:24px 0; display:none}

/* ============ CONTACT STRIP ============ */
.strip{background:var(--ground-deep); border-top:1px solid var(--rule-soft); padding:clamp(50px,6vw,76px) 0}
.strip-in{display:flex; flex-direction:column; align-items:center; text-align:center; gap:17px}
.strip .lede{text-align:center}

/* ============ FOOTER ============ */
footer{
  padding:26px 0 30px; border-top:1px solid var(--rule-soft);
  display:flex; justify-content:space-between; gap:14px 26px; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.05em; color:var(--text-faint);
}
footer nav{display:flex; gap:22px; flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--accent)}

/* ============ APP STORE BADGE ============ */
/* Apple's official badge artwork (img/app-store-badge.svg, from Apple's
   marketing tools), unmodified. Apple asks for at least 40px of height. */
.store-badge{display:inline-block; line-height:0; border-radius:9px; transition:transform .18s, box-shadow .18s}
.store-badge:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.28)}
.store-badge img{height:52px; width:auto}

/* ============ BLOG ============ */
.post-hero{margin:clamp(26px,3vw,40px) 0 0; border-radius:22px; overflow:hidden; background:var(--panel); aspect-ratio:21/9}
.post-hero img{width:100%; height:100%; object-fit:cover}
.post-hero.wide{aspect-ratio:3/1}
.post-hero.wide img{object-position:50% 70%}

/* A quote set over a photograph, the way the app shows one. */
.prose .qfig{position:relative; margin:30px 0; max-width:400px; aspect-ratio:4/5; border-radius:22px; overflow:hidden;
  display:flex; align-items:flex-end; background:#2a2a26; box-shadow:0 22px 54px rgba(0,0,0,.28)}
.qfig img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.qfig::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,14,12,.05) 30%,rgba(12,14,12,.8) 100%)}
.prose .qfig blockquote{position:relative; z-index:2; margin:0; padding:0 28px 28px; border:0}
.prose .qfig blockquote p{color:#f4ecdc; font-size:clamp(22px,2.3vw,27px); line-height:1.28; text-shadow:0 1px 16px rgba(0,0,0,.5)}
.prose .qfig blockquote cite{color:rgba(244,236,220,.82)}

.blog-hub{padding:clamp(40px,5vw,64px) 0 clamp(64px,7vw,96px)}
.blog-hub section + section{margin-top:clamp(52px,6vw,80px)}
.hub-head{display:flex; flex-direction:column; gap:10px; max-width:62ch; margin-bottom:26px}
.hub-head p{color:var(--text-dim); font-size:16px}
.post-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.2vw,28px)}
.post-card{
  display:flex; flex-direction:column; text-decoration:none; border-radius:20px; overflow:hidden;
  background:var(--panel); border:1px solid var(--rule-soft); transition:transform .2s, border-color .2s, box-shadow .2s;
}
.post-card:hover{transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 40%,transparent); box-shadow:0 18px 40px rgba(0,0,0,.18)}
.post-card-img{aspect-ratio:16/9; overflow:hidden; background:var(--ground-deep)}
.post-card-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.post-card:hover .post-card-img img{transform:scale(1.04)}
.post-card-body{display:flex; flex-direction:column; gap:8px; padding:18px 20px 22px}
.post-card-kicker{display:flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent)}
.post-card h3{font-family:var(--f-display); font-weight:400; font-size:21px; line-height:1.2; letter-spacing:-.01em}
.post-card p{color:var(--text-dim); font-size:14.5px; line-height:1.5}
.ico{width:20px; height:20px; flex:none}
.post-card.feature{grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.post-card.feature .post-card-img{aspect-ratio:auto; min-height:300px}
.post-card.feature .post-card-body{justify-content:center; padding:clamp(24px,3.4vw,44px); gap:12px}
.post-card.feature h3{font-size:clamp(26px,2.6vw,34px)}
.post-card.feature p{font-size:16px}
.hub-app{max-width:72ch; padding-top:28px; border-top:1px solid var(--rule-soft)}
.hub-app p{color:var(--text-dim); font-size:15.5px}
.hub-app a{color:var(--accent)}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .doc{grid-template-columns:1fr; gap:34px}
  /* Sticky is wrong once the list sits above the text rather than beside it. */
  .toc{position:static; flex-direction:row; flex-wrap:wrap; gap:8px 18px}
  .toc-label{width:100%; margin-bottom:0}
  /* The blog and guides links stay on small screens; the rest fold away. */
  .nav-links{gap:18px}
  .nav-links a:not(.btn):not([href="/blog/"]):not([href="/guides/"]){display:none}
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post-card.feature{grid-template-columns:1fr}
  .post-card.feature .post-card-img{aspect-ratio:16/9; min-height:0}
}
@media (max-width:560px){
  body{font-size:16.5px}
  .wrap{width:min(100% - 32px,var(--max))}
  .post-grid{grid-template-columns:1fr}
  .post-hero{aspect-ratio:16/10; border-radius:16px}
  .prose .qfig{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}