/* === BlockToBlock theme (merged + tightened) ============================== */
:root{
  /* Colors (match the app) */
  --bg:#ecf0f4; --surface:#ffffff; --ink:#12222e; --muted:#828f9d;
  --accent:#2a5a6c; --accent-2:#1f3f4c; --blueprint-grid:#9fb3c820;
  --warning:#f24d42;

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem; --space-6:2rem;

  /* Radius / shadows / width */
  --radius-lg:16px; --radius-xl:22px;
  --shadow:0 6px 20px rgba(0,0,0,.06);
  --shadow-md: 0 5px 18px rgba(0,0,0,.12);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.15);
  --max:1120px;
  --max-header:1400px;

  /* Link colors */
  --link:#1d4ed8; --link-hover:#0f2ba8; --link-active:#0b1f7a; --link-visited:#5b21b6;
  
/* Button + focus tokens (soft-block look) */
  --btn-bg:        var(--accent);
  --btn-fg:        #fff;
  --btn-outline:   color-mix(in srgb, var(--accent) 35%, transparent);
  --btn-focus:     color-mix(in srgb, var(--accent) 35%, transparent);
  --btn-ghost-fg:  var(--accent);
  --btn-highlight: color-mix(in srgb, #fff 45%, transparent); /* bevel hint */

  /* Block/brick surface tokens */
  --block-card-radius: 22px;           /* cards/tiles */
  --block-button-radius: 14px;         /* buttons */
  --block-shadow:        0 6px 20px rgba(0,0,0,.06);
  --block-shadow-hover:  0 10px 30px rgba(0,0,0,.12);
  --block-inset:         color-mix(in srgb, #fff 42%, transparent); /* light edge */
}

/* Dark theme */
:root[data-theme="dark"]{
  --bg:#0d1c2c; --surface:#1e1e1e; --ink:#e6ecf0; --muted:#9fb3c8;
  --accent:#7ea0ae; --accent-2:#2a5a6c; --blueprint-grid:#e6ecf033;
  --link:#93c5fd; --link-hover:#bfdbfe; --link-active:#e0f2fe; --link-visited:#c4b5fd;
 /* Button + focus (dark) */
  --btn-bg:        var(--accent);
  --btn-fg:        #fff;
  --btn-outline:   color-mix(in srgb, var(--accent) 55%, transparent);
  --btn-focus:     color-mix(in srgb, var(--accent) 55%, transparent);
  --btn-ghost-fg:  var(--accent);
  --btn-highlight: color-mix(in srgb, #fff 18%, transparent);

  /* Block/brick surfaces (dark) */
  --block-shadow:        0 5px 18px rgba(0,0,0,.28);
  --block-shadow-hover:  0 10px 30px rgba(0,0,0,.38);
  --block-inset:         color-mix(in srgb, #fff 12%, transparent);
}

/* Respect system pref by default; your toggle sets data-theme override */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1c2c; --surface:#1e1e1e; --ink:#e6ecf0; --muted:#9fb3c8;
    --accent:#7ea0ae; --accent-2:#2a5a6c; --blueprint-grid:#e6ecf033;
  }
}

/* Base -------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  min-height:100dvh;
}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--space-3)}

/* Optional blueprint backdrop */
.bg-blueprint{
  background:
    repeating-linear-gradient(0deg, var(--blueprint-grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--blueprint-grid) 0 1px, transparent 1px 24px),
    radial-gradient(1200px 1200px at 50% -300px, rgba(42,90,108,.12), transparent 70%),
    var(--bg);
}

/* Top bar strip (if you use it) */
.topbar{
  background: linear-gradient(180deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 70%, transparent));
  color: var(--ink);
  padding: .9rem 0;
}

/* === Header =============================================================== */
.site-header{
  position: sticky; top: 0; z-index: 60;
  background:var(--surface);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 12%, transparent);
}

/* Make the header span the full viewport width (with safe side gutters) */
.site-header .header-inner{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto; /* brand | nav | actions */
  align-items: center;
  gap: var(--space-3);

  /* full width, no centering cap */
  max-width: none;
  width: 100%;                 /* use 100% to avoid 100vw scrollbar issues */
  margin: 0;

  /* gutters so content doesn’t touch edges */
  padding-left: clamp(12px, 2vw, 28px);
  padding-right: clamp(12px, 2vw, 28px);
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.header-inner > *{ min-width:0; }

.brand{display:flex;gap:.5rem;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;letter-spacing:.2px}
.brand .logo{height:28px;width:auto;display:block}
.brand span{color:var(--ink);}

/* Desktop: left-align nav; actions sit at far right */
.nav.desktop{
  display:flex;width:100%;justify-self:stretch;align-items:center;
  justify-content:flex-start;                 /* left aligned */
  gap:clamp(.6rem,1.2vw,1.25rem);
  white-space:nowrap;
  padding:0 .25rem;
}
.nav a{ color:var(--ink); text-decoration:none; padding:.5rem .55rem; opacity:.92; }
.nav a:hover{opacity:1;text-decoration:underline}
.nav a:visited{ color: var(--ink); }

/* Header actions */
.header-actions{ display:flex; gap:.75rem; align-items:center; justify-self:end; flex-wrap:nowrap; }

/* Keep store badges tidy on desktop */
.site-header .header-actions a{ display:inline-flex; align-items:center; line-height:0; }
.site-header .header-actions .store-badge{ height:28px; width:auto; display:block; }

/* Theme toggle / hamburger buttons */
/* .icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px;
  background:transparent; border:1px solid color-mix(in srgb,var(--ink) 20%, transparent);
  color:var(--ink); cursor:pointer;
} */
 .icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  background:transparent; border:1px solid color-mix(in srgb,var(--ink) 20%, transparent);
  color:var(--ink); cursor:pointer;
}

.icon-btn:hover{ background:color-mix(in srgb, var(--accent) 10%, transparent) }
.icon-btn:focus{ outline:2px solid color-mix(in srgb,var(--accent) 50%, transparent); outline-offset:2px }

.hamburger{
  display:none; align-items:center; justify-content:center;
  width:44px;height:44px;border-radius:12px;background:transparent;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  color:var(--accent);
}

/* Header: mobile behavior */
@media (max-width:900px){
  .nav.desktop{display:none}
  .header-actions picture{ display:none; }  /* hide store badges in header on phones */
  .header-actions{ gap:.5rem; }
  .hamburger{display:inline-flex}
}

/* === Drawer (mobile) ===================================================== */
.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:70;
}
.mobile-drawer{
  position:fixed; top:0; right:0; height:100dvh; width:min(86vw,340px);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); z-index:80;
  transform:translateX(100%); transition:transform .2s ease;
  padding:1rem; display:flex; flex-direction:column; gap:.25rem;
  border-left:1px solid rgba(0,0,0,.06);
}
.mobile-drawer a{
  padding:.65rem .55rem; border-radius:10px; border:none; background:transparent;
}
.mobile-drawer a:hover{ background:color-mix(in srgb, var(--accent) 8%, transparent) }

/* Hidden state is controlled by JS via [hidden] */
#scrim[hidden], #mobile-drawer[hidden]{ display:none; }

/* Open state */
body[data-nav-open="true"] .scrim{opacity:1; pointer-events:auto}
body[data-nav-open="true"] .mobile-drawer{transform:translateX(0)}
body[data-nav-open="true"] { overflow: hidden; } /* lock background scroll */

/* === Hero ================================================================ */
.hero{padding:var(--space-6) 0}
.h-title{font-size:clamp(1.6rem,2.4vw,2.25rem);line-height:1.2;margin:.5rem 0}
.h-sub{color:#6b7280;margin:.25rem 0 1rem;max-width:65ch}
.hero .store-badges{ justify-content:center; }

/* === Grid ================================================================ */
.grid{display:grid;gap:var(--space-3)}
.grid.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
@media (max-width:560px){
  .grid.grid-2,.grid.grid-3{grid-template-columns:1fr}
}

/* === Cards / tiles ======================================================= */
.card{
  background:var(--surface);
  border:1px solid #e5e7eb;
  border-radius:var(--block-card-radius);
  padding:var(--space-3) var(--space-4);
  box-shadow: var(--block-shadow), inset 0 1px 0 var(--block-inset);
  transition: box-shadow .16s ease, transform .14s ease;
}
.card.tile{ /* tiles lift a touch on hover */
  display:flex; flex-direction:column; gap:.35rem; align-items:flex-start;
  padding:var(--space-3) var(--space-3); min-height:140px;
}
.card.tile:hover{ box-shadow: var(--block-shadow-hover); transform: translateY(-2px); }
.card.tile:active{ transform: translateY(-1px); }

/* .card{
  background:var(--surface);
  border:1px solid #e5e7eb;
  border-radius:var(--radius-xl);
  padding:var(--space-3) var(--space-4);
  box-shadow:var(--shadow);
}
.card h3{margin:.25rem 0 .25rem;font-size:1.05rem}
.card p{margin:.25rem 0 .5rem}

.card.tile{
  display:flex; flex-direction:column; gap:.35rem; align-items:flex-start;
  padding:var(--space-3) var(--space-3); min-height:140px;
} */

/* Icon circle */
.icon-circle{
  width:40px;height:40px;border-radius:12px; display:grid;place-items:center;
  background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent);
}

/* Buttons */
/* .btn{display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.2rem;border-radius:999px;border:1px solid transparent;
  background:var(--accent); color:white; font-weight:600;
}
.btn.secondary{background:transparent;border-color:color-mix(in srgb, var(--accent) 35%, transparent); color:var(--accent)}
.btn.warning{background:var(--warning)}
.btn + .btn{margin-left:.6rem} */

/* Buttons */
/* .btn{
  --_bg: var(--btn-bg);
  --_fg: var(--btn-fg);

  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.85rem 1.25rem;
  border-radius:999px; border:1px solid transparent;
  background:var(--_bg); color:var(--_fg); font-weight:700;
  text-decoration:none; line-height:1;
} */
/* Final .btn (merge of both) */
.btn{
  /* existing tokens for color */
  --_bg: var(--btn-bg);
  --_fg: var(--btn-fg);

  /* keep sizing & layout from your current rule */
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.85rem 1.25rem;

  /* switch to block-like shape + depth */
  border-radius: var(--block-button-radius);
  border:1px solid transparent;
  background:var(--_bg); color:var(--_fg); font-weight:700;
  text-decoration:none; line-height:1;

  /* added “soft block” effect */
  box-shadow: var(--block-shadow), inset 0 1px 0 var(--btn-highlight);
  transition: box-shadow .16s ease, transform .12s ease, filter .12s ease;
}

.btn:hover{ filter:brightness(.985); box-shadow: var(--block-shadow-hover), inset 0 1px 0 var(--btn-highlight); }
.btn:active{ transform: translateY(1px); box-shadow: var(--block-shadow), inset 0 1px 0 var(--btn-highlight); }
.btn:focus-visible{
  outline:3px solid var(--btn-focus); outline-offset:2px;
}

/* Secondary (outlined) */
.btn.secondary{
  --_bg: transparent; --_fg: var(--btn-ghost-fg);
  background:transparent; color:var(--_fg);
  border-color: var(--btn-outline);
}
.btn.secondary:hover{
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

/* Tertiary (ghost) */
.btn.tertiary{
  --_bg: transparent; --_fg: var(--btn-ghost-fg);
  background:transparent; color:var(--_fg);
  border-color: transparent;
}
.btn.tertiary:hover{
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Disabled (future-proofing) */
.btn[disabled], .btn[aria-disabled="true"]{
  opacity:.55; pointer-events:none;
}



/* Store badges */
.store-badges{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.store-badge{height:48px;width:auto;display:block}
@media (max-width:560px){ .store-badge{height:42px} }

/* Images / helpers */
img.responsive{display:block;max-width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow-lg)}
.spacer{height:var(--space-2)}
.kicker{letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Links */
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
a:active { color: var(--link-active); }
a:visited { color: var(--link-visited); }
.prose a { text-decoration-thickness: 1.5px; }


/* Ensure anchor buttons keep their intended text color (white for primary) */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active {
  color: var(--_fg);
  text-decoration: none;
}
/* Brick pattern: stagger every other block on wider screens */
.brick-grid > * { transition: transform .16s ease; }
@media (min-width: 900px){
  .brick-grid > *:nth-child(odd){ transform: translateY(8px); }
}
/* Subtle material texture for large hero cards (opt-in) */
.surface-texture::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.04), transparent 35%),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,.035), transparent 40%);
  mix-blend-mode: soft-light; opacity:.7;
}


/* Support form layout */
.form-card{ max-width: 920px; margin: 0 auto; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
@media (max-width: 720px){ .form-grid{ grid-template-columns: 1fr; } }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field.full{ grid-column: 1 / -1; }
label{ font-weight:600; color: var(--ink); opacity:.9; }

/* Input tokens (light/dark) */
:root{ --field-bg:#ffffff; --field-border: rgba(0,0,0,.15); --field-bg-muted: color-mix(in srgb, var(--accent) 4%, transparent); }
:root[data-theme="dark"]{ --field-bg:#151515; --field-border: rgba(255,255,255,.18); --field-bg-muted: color-mix(in srgb, var(--accent) 14%, transparent); }

input[type="text"], input[type="email"], textarea{
  width:100%; background: var(--field-bg); color: var(--ink);
  border:1px solid var(--field-border); border-radius: var(--radius-lg);
  padding:.75rem .9rem; outline:none; box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}
textarea{ resize: vertical; min-height: 8rem; }
input:focus, textarea:focus{
  border-color: color-mix(in srgb, var(--accent) 45%, var(--field-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Actions row */
.actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.actions.full { grid-column: 1 / -1; }


/* Helper text */
.muted{ color: var(--muted); font-size:.95rem; }

/* Anchor offset for in-page links */
.section[id], .hero[id], .card[id] { scroll-margin-top: 90px; }

/* === Footer ============================================================= */
.site-footer{margin:var(--space-6) 0 var(--space-3);text-align:center;color:#6b7280}
.site-footer .brandline{
  display:flex; flex-wrap:wrap; gap:.5rem .75rem; align-items:center; justify-content:center; font-size:.95rem;
}
.site-footer .brandline .logo { height: 18px; width: auto; }
.site-footer a { text-decoration: underline; }

/* === Mobile breathing room & alignments ================================ */
/* Stronger side gutters on phones */
/* .container { width: min(100% - 2rem, var(--max)); margin-inline: auto; } */
@media (max-width:480px){
  .container { width: min(100% - 2.5rem, var(--max)); }
  .card.tile { padding: 1rem 1.1rem; }
}

/* Center “Exit / Get the App” CTA rows where used */
.cta-center { display:flex; justify-content:center; }

/* Prefer parent gap over sibling margins for wrapping rows */

.btn-row, .actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
@media (max-width:480px){
  .card .actions, .cta-center, .btn-row { display:flex; justify-content:center; }
}
/* .btn-row { display:flex; gap:.6rem; flex-wrap:wrap; } */

/* Optional: center CTA rows inside tiles on small screens */
/* @media (max-width:480px){
  .card .actions, .cta-center, .btn-row { display:flex; justify-content:center; }
  .card .btn { margin-inline:.25rem; }
} */

/* Tiny phones: a little more gutter */
@media (max-width:420px){
  .container { width: min(100% - 2.75rem, var(--max)); }
}

/* Guard rails (optional):
@media (max-width: 560px){
  .page > .hero,
  .page > .section,
  .page > .grid,
  .page > .card {
    padding-inline: 1rem;
  }
}
*/

/* Vertical rhythm: space between successive siblings */
.flow > * + * {
  margin-top: clamp(20px, 2.2vw, 36px);
}

/* Optional: a hair more space between large blocks on wide screens */
@media (min-width: 1200px){
  .flow > * + * { margin-top: clamp(24px, 2.4vw, 44px); }
}

/* If a page uses .flow inside .container, ensure first child has no extra gap */
.flow > :first-child { margin-top: 0; }


/* === Site-wide blueprint background ===================================== */
/* Image URL comes from base.html: --blueprint-img */
:root{
  --site-bg-opacity: .28;       /* light mode */
}
:root[data-theme="dark"]{
  --site-bg-opacity: .20;       /* a bit dimmer in dark for contrast */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --site-bg-opacity: .20; }
}

/* Keep normal color as fallback */
body.has-blueprint-bg { background-color: var(--bg); position: relative; }

/* Render the image on a fixed layer behind everything */
body.has-blueprint-bg::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;                  /* sits behind page content */
  pointer-events: none;

  background-image: var(--blueprint-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  opacity: var(--site-bg-opacity);
}

/* Make sure real content sits above the background layer */
header, main, footer, .site-header { position: relative; z-index: 1; }


/* Success page tweaks */
.success-hero{
  text-align:center;
  padding: min(10vh, 6rem) 0 14vh;   /* comfy spacing vs header/footer */
}
.success-hero .icon-circle{
  width:56px; height:56px; margin:0 auto var(--space-2);
  font-size:1.35rem;
}


/* Home hero */
.hero-home{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  align-items:center;
  gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(2rem, 6vw, 6rem);
}
.hero-media{ display:flex; justify-content:center; }
.device-frame{
  width: min(360px, 45vw);
  aspect-ratio: 9 / 19.5;
  border-radius: 36px;
  background: #000;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow: hidden;
  border: 8px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
.device-video{ width:100%; height:100%; object-fit:cover; display:block; }

/* “See it in action” strip */
.devices-strip{ padding-block: clamp(1.5rem, 5vw, 3rem); }
.devices-row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin-top: .75rem;
}
.device-shot{
  display:block;
  width:100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  background:#000;
  border-radius: 30px;
  border:8px solid color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow: var(--shadow-lg);
}

/* Mobile layout */
@media (max-width: 900px){
  .hero-home{ grid-template-columns: 1fr; text-align:center; }
  .hero-media{ order:-1; margin-bottom: .75rem; }
}


/* === Announcement banner ================================================== */
:root{
  --announce-bg: color-mix(in srgb, var(--accent) 9%, var(--surface));
  --announce-ink: var(--ink);
  --announce-border: color-mix(in srgb, var(--ink) 12%, transparent);
}
:root[data-theme="dark"]{
  --announce-bg: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --announce-ink: var(--ink);
  --announce-border: color-mix(in srgb, var(--ink) 20%, transparent);
}

.announce{
  background: var(--announce-bg);
  color: var(--announce-ink);
  border-bottom: 1px solid var(--announce-border);
  position: relative;
}
.announce-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem 1rem;
  padding: .6rem var(--space-3);
  flex-wrap: wrap;
  text-align: center;
}
.announce-text,
.announce-offer{
  margin: 0;
  font-size: .95rem;
}
.announce-footnote{
  font-size: .85em;
  opacity: .8;
  margin-left: .35rem;
}
.announce-ctas{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.announce-close{
  position: absolute;
  right: clamp(8px, 1.2vw, 14px);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  width: 32px; height: 32px;
  line-height: 1;
  font-size: 1.1rem;
  color: inherit;
  cursor: pointer;
}
.announce-close:hover{
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

@media (max-width: 560px){
  .announce-inner{ align-items: flex-start; }
  .announce-close{ top: 10px; transform: none; }
  .announce-footnote{ display: block; margin: .25rem 0 0 0; }
}

/* @media (max-width: 400px){
  .announce-ctas .btn.secondary { display: none; }
} */
/* On small screens, make banner CTAs full-width and stacked */
@media (max-width: 420px){
  .announce-ctas { width:100%; }
  .announce-ctas .btn{ flex:1 1 100%; }
}

.cookie-banner{
  position:sticky; top:0; z-index:1000;
  background: var(--surface); color: var(--ink);
  border-bottom:1px solid rgba(0,0,0,.08);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}
:root[data-theme="dark"] .cookie-banner{
  border-bottom-color: rgba(255,255,255,.12);
}
.cookie-inner{
  max-width: var(--max-header, 1200px);
  margin: 0 auto; padding: .75rem 1rem;
  display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.cookie-actions{ display:flex; gap:.5rem; }