/* ============================================================
   site.css — components shared by the new pages (index additions,
   help, faq, guides). Builds on the tokens in styles.css.
   ============================================================ */

/* ---------- page header (non-home pages) ---------- */
.page-hero{ padding: clamp(3rem,7vw,5rem) 0 clamp(1.5rem,4vw,2.5rem); border-bottom:1px solid var(--line); }
.page-hero h1{ font-size: clamp(2rem,5vw,3.6rem); line-height:1.05; font-weight:720; letter-spacing:-0.03em; max-width:18ch; }
.page-hero .lead{ margin-top:1rem; max-width:58ch; }
.crumbs{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--faint); display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.crumbs a{ color:var(--dim); text-decoration:none; } .crumbs a:hover{ color:var(--text); }
.crumbs span::before{ content:"/"; margin-right:0.5rem; color:var(--line-2); }

/* nav: current page */
.nav-links a[aria-current="page"]{ color:var(--text); }
.nav-links a[aria-current="page"]::after{ content:""; display:block; height:2px; margin-top:2px; background:var(--cyan); border-radius:2px; }

/* ---------- device frame (real iPhone screenshots) ---------- */
.device{
  --w: 300px;
  width: var(--w); aspect-ratio: 9 / 19.5; position:relative; margin-inline:auto;
  border-radius: calc(var(--w) * 0.155);
  background:#0b0e1c;
  padding: calc(var(--w) * 0.028);
  box-shadow:
    0 0 0 1.5px rgba(160,170,210,0.35),
    0 0 0 calc(var(--w)*0.012) #05060d,
    0 40px 90px -30px rgba(0,0,0,0.9),
    var(--glow-cyan);
}
.device.warm{ box-shadow: 0 0 0 1.5px rgba(200,180,140,0.35), 0 0 0 calc(var(--w)*0.012) #05060d, 0 40px 90px -30px rgba(0,0,0,0.9), var(--glow-gold); }
.device .screen{
  width:100%; height:100%; border-radius: calc(var(--w) * 0.128); overflow:hidden; background:#000;
  position:relative;
}
.device .screen img{ width:100%; height:100%; object-fit:cover; display:block; }
.device::after{ /* dynamic island */
  content:""; position:absolute; top: calc(var(--w)*0.052); left:50%; transform:translateX(-50%);
  width: calc(var(--w)*0.31); height: calc(var(--w)*0.085); border-radius:999px; background:#000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
/* Two phones always sit side by side, equal size, on one line. Each frame is sized from the
   pair's own width (container units), so the pair never wraps whatever column it lands in. */
.device-pair{ display:flex; gap:clamp(0.8rem,3vw,2rem); justify-content:center; align-items:center; flex-wrap:nowrap;
  width:100%; container-type:inline-size; }
.device-pair .device{ --w: min(270px, 21vw); margin-inline:0; flex:none; }            /* fallback: two-column layout */
@media (max-width: 860px){ .device-pair .device{ --w: min(270px, 42vw); } }           /* fallback: stacked layout */
@supports (width: 1cqw){
  .device-pair .device{ --w: min(270px, 45cqw); }
  @media (max-width: 860px){ .device-pair .device{ --w: min(270px, 45cqw); } }
}
@media (max-width: 560px){ .device{ --w: 240px; } }
.device-cap{ text-align:center; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; color:var(--faint); margin-top:1rem; text-transform:uppercase; }

/* spotlight with a device instead of a panel */
.spotlight .devwrap{ display:flex; flex-direction:column; align-items:center; }

/* ---------- feature gallery strip (home) ---------- */
.gallery{ display:grid; grid-template-columns: repeat(4,1fr); gap:1.2rem; margin-top:2.6rem; }
@media (max-width: 980px){ .gallery{ grid-template-columns: repeat(2,1fr);} }
.gallery .device{ --w: 100%; max-width:230px; }
.gallery figure{ margin:0; text-align:center; }
.gallery figcaption{ margin-top:0.9rem; font-size:0.9rem; color:var(--dim); }
.gallery figcaption b{ display:block; color:var(--text); font-weight:600; margin-bottom:0.15rem; }

/* ---------- store CTA row ---------- */
.store-row{ display:flex; flex-wrap:wrap; gap:0.8rem; align-items:center; margin-top:1.6rem; }
.store-badge{
  display:inline-flex; align-items:center; gap:0.6rem; padding:0.6rem 1rem 0.6rem 0.8rem; border-radius:12px;
  border:1px solid var(--line-2); background: rgba(255,255,255,0.03); text-decoration:none; color:var(--text);
  transition: transform .18s, border-color .2s;
}
.store-badge:hover{ transform:translateY(-2px); border-color: rgba(150,166,224,0.45); }
.store-badge svg{ width:22px; height:22px; flex:none; }
.store-badge .t{ display:flex; flex-direction:column; line-height:1.1; }
.store-badge .t small{ font-size:0.64rem; color:var(--faint); letter-spacing:0.04em; text-transform:uppercase; }
.store-badge .t span{ font-size:0.95rem; font-weight:600; }

/* ---------- two-column doc layout (help) ---------- */
.doc{ display:grid; grid-template-columns: 240px 1fr; gap: clamp(2rem,5vw,4rem); align-items:start; padding: clamp(2rem,5vw,3.5rem) 0; }
@media (max-width: 900px){ .doc{ grid-template-columns:1fr; } .toc{ position:static !important; } }
.toc{ position:sticky; top: calc(var(--nav-h) + 20px); }
.toc h4{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); margin:0 0 0.8rem; }
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:0.2rem; }
.toc a{ display:block; padding:0.4rem 0.7rem; border-radius:8px; color:var(--dim); text-decoration:none; font-size:0.9rem; border-left:2px solid transparent; }
.toc a:hover{ color:var(--text); background: rgba(255,255,255,0.03); }
.toc a.active{ color:var(--text); border-left-color: var(--cyan); background: rgba(73,198,229,0.06); }
.doc-body{ min-width:0; }
.doc-body > section{ padding-bottom: clamp(2.5rem,5vw,4rem); margin-bottom: clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line); }
.doc-body > section:last-child{ border-bottom:none; }
.doc-body h2{ font-size: clamp(1.5rem,3vw,2.1rem); margin-bottom:0.8rem; }
.doc-body h3{ margin: 1.8rem 0 0.6rem; font-size:1.12rem; }
.doc-body p{ color:var(--dim); max-width:66ch; }
.doc-body p + p{ margin-top:0.8rem; }
.doc-body ul, .doc-body ol{ color:var(--dim); max-width:66ch; padding-left:1.3rem; }
.doc-body li{ margin:0.35rem 0; }
.doc-body li b, .doc-body p b{ color:var(--text); font-weight:600; }

/* step with screenshot */
.step{ display:grid; grid-template-columns: 1fr 260px; gap: clamp(1.2rem,3vw,2.4rem); align-items:center; margin: 1.6rem 0; padding:1.4rem; border:1px solid var(--line); border-radius:16px; background: rgba(21,26,58,0.35); }
.step .device{ --w: 200px; }
.step .n{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.16em; color:var(--cyan); text-transform:uppercase; margin-bottom:0.4rem; display:block; }
.step h3{ margin:0 0 0.5rem; }
@media (max-width: 700px){ .step{ grid-template-columns:1fr; } .step .device{ margin-top:0.6rem; } }

.tip{ border-left:3px solid var(--gold); background: rgba(246,180,75,0.06); padding:0.9rem 1.1rem; border-radius:0 12px 12px 0; margin:1.2rem 0; color:var(--dim); }
.tip b{ color:var(--gold-2); }
.tip.cool{ border-left-color: var(--cyan); background: rgba(73,198,229,0.06); } .tip.cool b{ color:var(--cyan-2); }
kbd{ font-family:var(--mono); font-size:0.8em; padding:0.1em 0.45em; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; background: rgba(255,255,255,0.04); color:var(--text); }

/* ---------- FAQ ---------- */
.faq-cats{ display:flex; flex-wrap:wrap; gap:0.5rem; margin: 1.4rem 0 2rem; }
.faq-cats a{ font-size:0.85rem; padding:0.45rem 0.9rem; border-radius:999px; border:1px solid var(--line-2); color:var(--dim); text-decoration:none; }
.faq-cats a:hover{ color:var(--text); border-color: rgba(150,166,224,0.45); }
.faq-group{ margin-bottom: clamp(2rem,5vw,3.2rem); }
.faq-group h2{ font-size: clamp(1.3rem,2.6vw,1.8rem); margin-bottom:0.8rem; display:flex; align-items:center; gap:0.6rem; }
.faq-group h2 svg{ width:20px; height:20px; color:var(--cyan); }
details.q{ border:1px solid var(--line); border-radius:12px; background: rgba(21,26,58,0.3); margin:0.5rem 0; overflow:hidden; }
details.q summary{ list-style:none; cursor:pointer; padding:0.95rem 1.1rem; font-weight:600; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
details.q summary::-webkit-details-marker{ display:none; }
details.q summary::after{ content:"+"; font-family:var(--mono); color:var(--cyan); font-size:1.1rem; flex:none; transition: transform .2s; }
details.q[open] summary::after{ transform: rotate(45deg); }
details.q[open] summary{ border-bottom:1px solid var(--line); }
details.q .a{ padding:0.9rem 1.1rem 1.1rem; color:var(--dim); max-width:70ch; }
details.q .a p + p{ margin-top:0.6rem; }
details.q .a b{ color:var(--text); font-weight:600; }

/* ---------- guides hub ---------- */
.guides-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.1rem; margin-top:2.2rem; }
@media (max-width: 900px){ .guides-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .guides-grid{ grid-template-columns:1fr;} }
.gcard{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; background: linear-gradient(180deg, rgba(21,26,58,0.5), rgba(11,16,39,0.35)); transition: transform .2s, border-color .2s; }
.gcard:hover{ transform:translateY(-4px); border-color: var(--line-2); }
.gcard .art{ aspect-ratio: 16/9; position:relative; overflow:hidden; }
.gcard .art svg{ width:100%; height:100%; display:block; }
.gcard .txt{ padding:1.1rem 1.2rem 1.3rem; }
.gcard .kicker{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--cyan); margin-bottom:0.4rem; }
.gcard h3{ margin-bottom:0.4rem; font-size:1.08rem; }
.gcard p{ color:var(--dim); font-size:0.9rem; }
.gcard .meta{ margin-top:0.8rem; font-family:var(--mono); font-size:0.7rem; color:var(--faint); letter-spacing:0.04em; }
.gcard.featured{ grid-column: span 2; } .gcard.featured .art{ aspect-ratio: 21/9; }
@media (max-width: 560px){ .gcard.featured{ grid-column: span 1; } }

/* ---------- article ---------- */
.article{ padding: clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem); }
.article .wrapper{ display:grid; grid-template-columns: 1fr 260px; gap: clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width: 960px){ .article .wrapper{ grid-template-columns:1fr; } .article aside{ position:static !important; } }
.article aside{ position:sticky; top: calc(var(--nav-h) + 20px); display:grid; gap:1rem; }
.prose{ min-width:0; max-width:70ch; }
.prose .byline{ font-family:var(--mono); font-size:0.74rem; letter-spacing:0.06em; color:var(--faint); display:flex; flex-wrap:wrap; gap:0.4rem 1rem; margin: 0.8rem 0 1.6rem; }
.prose .cover{ margin:0 0 2rem; border-radius:16px; overflow:hidden; border:1px solid var(--line-2); aspect-ratio: 16/8; }
.prose .cover svg{ width:100%; height:100%; display:block; }
.prose h2{ font-size: clamp(1.45rem,3vw,2rem); margin: 2.4rem 0 0.8rem; scroll-margin-top: calc(var(--nav-h) + 16px); }
.prose h3{ font-size:1.15rem; margin: 1.6rem 0 0.5rem; }
.prose p{ color:#c8cfe6; font-size:1.04rem; line-height:1.72; }
.prose p + p{ margin-top:1rem; }
.prose ul, .prose ol{ color:#c8cfe6; font-size:1.02rem; line-height:1.7; padding-left:1.4rem; }
.prose li{ margin:0.45rem 0; }
.prose b, .prose strong{ color:var(--text); font-weight:600; }
.prose a{ color:var(--cyan-2); text-decoration:underline; text-decoration-color: rgba(73,198,229,0.35); text-underline-offset:3px; }
.prose a:hover{ text-decoration-color: var(--cyan); }
.prose .key{ border:1px solid var(--line-2); border-radius:14px; padding:1.1rem 1.3rem; background: rgba(21,26,58,0.45); margin: 1.4rem 0 2rem; }
.prose .key h4{ margin:0 0 0.5rem; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); }
.prose .key ul{ margin:0; padding-left:1.2rem; font-size:0.98rem; }
.prose table{ width:100%; border-collapse:collapse; font-size:0.94rem; margin:1.2rem 0; }
.prose .tbl{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.prose th, .prose td{ text-align:left; padding:0.65rem 0.9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); background: rgba(255,255,255,0.025); }
.prose tr:last-child td{ border-bottom:none; }
.prose td{ color:#c8cfe6; font-variant-numeric: tabular-nums; }
.prose .app-note{ display:flex; gap:0.9rem; align-items:flex-start; border:1px solid rgba(73,198,229,0.3); background: rgba(73,198,229,0.06); border-radius:14px; padding:1rem 1.1rem; margin:1.6rem 0; }
.prose .app-note svg{ width:22px; height:22px; color:var(--cyan); flex:none; margin-top:0.15rem; }
.prose .app-note p{ font-size:0.96rem; margin:0; }
.prose figure{ margin: 1.6rem 0; }
.prose figcaption{ font-size:0.85rem; color:var(--faint); margin-top:0.5rem; text-align:center; }
.aside-box{ border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; background: rgba(21,26,58,0.35); }
.aside-box h4{ margin:0 0 0.6rem; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); }
.aside-box ol{ list-style:none; margin:0; padding:0; display:grid; gap:0.3rem; }
.aside-box ol a{ color:var(--dim); text-decoration:none; font-size:0.88rem; display:block; padding:0.25rem 0; }
.aside-box ol a:hover{ color:var(--text); }
.aside-box .device{ --w: 180px; margin:0.4rem auto 0; }
.related{ margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); }
.related h3{ margin-bottom:1rem; }

/* footer sitemap */
.footgrid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:2rem; padding: 2.6rem 0 1.6rem; border-top:1px solid var(--line); }
@media (max-width: 760px){ .footgrid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .footgrid{ grid-template-columns: 1fr; } }
.footgrid h4{ font-family:var(--mono); font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); margin:0 0 0.7rem; }
.footgrid ul{ list-style:none; margin:0; padding:0; display:grid; gap:0.4rem; }
.footgrid a{ color:var(--dim); text-decoration:none; font-size:0.9rem; } .footgrid a:hover{ color:var(--text); }
.footgrid .about p{ color:var(--dim); font-size:0.9rem; max-width:34ch; margin-top:0.6rem; }
.footbar{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.6rem; padding:1rem 0 2rem; color:var(--faint); font-size:0.8rem; border-top:1px solid var(--line); }

/* nav store badge: compact on phones (the tagline line goes, "App Store" stays) */
@media (max-width: 600px){
  .nav .store-badge{ padding:0.45rem 0.7rem; gap:0.45rem; }
  .nav .store-badge .t small{ display:none; }
  .nav .store-badge .t span{ font-size:0.85rem; }
  .nav .store-badge svg{ width:18px; height:18px; }
}

/* Guides hub: themed groups */
.hub-group{ margin-bottom:3.5rem; }
.hub-group h2{ font-size:1.5rem; margin:0 0 0.35rem; }
.hub-group > .lead{ color:var(--dim); margin:0 0 1.4rem; font-size:1rem; }
.hub-group + .hub-group{ padding-top:2.5rem; border-top:1px solid var(--line); }

/* ---------- real photographs in guides (licensed, always credited) ---------- */
.prose figure.photo{ margin:2rem 0; }
.prose figure.photo img{ width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--line); background:#05060d; }
.prose figure.photo figcaption{ margin-top:0.7rem; font-size:0.9rem; color:var(--dim); line-height:1.5; }
.prose figure.photo .credit{ display:block; margin-top:0.25rem; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.04em; color:var(--faint); }
.prose figure.photo .credit a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.prose figure.photo.portrait{ max-width:440px; margin-inline:auto; }
.prose figure.photo.square{ max-width:640px; margin-inline:auto; }
.prose figure.photo.small{ max-width:640px; margin-inline:auto; }

/* ---------- screenshots: device tabs ---------- */
.shots-tabs{ display:flex; justify-content:center; gap:0.4rem; margin:2rem auto 0; padding:0.3rem; width:max-content; max-width:100%;
  border:1px solid var(--line); border-radius:999px; background:rgba(11,16,39,0.55); }
.shots-tabs button{ appearance:none; border:0; background:transparent; color:var(--dim); font:inherit; font-weight:600; font-size:0.95rem;
  padding:0.55rem 1.3rem; border-radius:999px; cursor:pointer; transition:background .2s, color .2s; }
.shots-tabs button:hover{ color:var(--text); }
.shots-tabs button[aria-selected="true"]{ background:rgba(73,198,229,0.16); color:var(--text); box-shadow:inset 0 0 0 1px rgba(73,198,229,0.45); }
.shots-tabs button:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.gallery.wide{ grid-template-columns: repeat(2,1fr); gap:2rem 1.6rem; }
@media (max-width: 760px){ .gallery.wide{ grid-template-columns:1fr; } }
.tablet{ border-radius:22px; padding:10px; background:#0b0e1c;
  box-shadow: 0 0 0 1.5px rgba(160,170,210,0.35), 0 0 0 5px #05060d, 0 40px 90px -30px rgba(0,0,0,0.9), var(--glow-cyan); }
.tablet img{ display:block; width:100%; height:auto; border-radius:13px; }
.macshot{ border-radius:12px; overflow:hidden; border:1px solid rgba(160,170,210,0.3);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), var(--glow-cyan); background:#05060d; }
.macshot img{ display:block; width:100%; height:auto; }