/* Arrow Tempo — shared site stylesheet. Dusk Range design system (design.md).
 * Linked by every page except index.html (which inlines the same tokens).
 * Hallmark · genre: atmospheric · design-system: design.md · designed-as-app */

:root{
  --color-paper:oklch(17% 0.006 60);
  --color-paper-2:oklch(21% 0.008 60);
  --color-paper-3:oklch(25% 0.010 55);
  --color-paper-4:oklch(29% 0.012 55);
  --color-ink:oklch(92% 0.015 80);
  --color-ink-dim:oklch(92% 0.015 80 / 0.62);
  --color-ink-mut:oklch(92% 0.015 80 / 0.40);
  --color-rule:oklch(84% 0.045 75 / 0.11);
  --color-rule-2:oklch(84% 0.045 75 / 0.20);
  --color-accent:oklch(70% 0.15 45);
  --color-accent-deep:oklch(56% 0.13 45);
  --color-accent-ink:oklch(18% 0.02 60);
  --color-brass:oklch(71% 0.07 75);
  --color-sand:oklch(84% 0.045 75);
  --color-gold:oklch(83% 0.16 90);
  --color-red:oklch(66% 0.15 25);
  --color-droid:oklch(80% 0.18 155);
  --color-focus:oklch(78% 0.13 55);

  --font-display:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;
  --font-body:var(--font-display);
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --space-2xs:.5rem;--space-xs:.75rem;--space-sm:1rem;--space-md:1.5rem;
  --space-lg:2rem;--space-xl:3rem;--space-2xl:4.5rem;--space-3xl:7rem;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.4,0,1,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-short:.18s;--dur-mid:.4s;--dur-reveal:.7s;

  --radius-card:18px;--radius-frame:24px;--radius-pill:999px;
  --maxw:1180px;--maxw-doc:760px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:88px;}
body{margin:0;background:var(--color-paper);color:var(--color-ink);
  font-family:var(--font-body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;height:auto;}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px;border-radius:5px;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,32px);}
.doc{max-width:var(--maxw-doc);margin:0 auto;padding:0 clamp(20px,4vw,24px);}

/* ── type ── */
.eyebrow{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--color-accent);font-weight:600;display:inline-flex;align-items:center;gap:10px;}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7;}
.eyebrow.gold{color:var(--color-gold);}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-style:normal;
  overflow-wrap:anywhere;min-width:0;}
h1{font-size:clamp(40px,6vw,72px);}
h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.025em;}
h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.015em;}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--color-ink-dim);line-height:1.55;max-width:46ch;}
.accent{color:var(--color-accent);}
.sand{color:var(--color-sand);}

/* ── buttons ── */
.store-badge{display:inline-block;line-height:0;border-radius:12px;
  transition:transform var(--dur-short) var(--ease-out),opacity var(--dur-short) var(--ease-out);}
.store-badge:hover{transform:translateY(-2px);opacity:.9;}
.store-badge img{height:54px;width:auto;display:inline-block;}
.ghost{display:inline-flex;align-items:center;gap:8px;color:var(--color-ink);font-weight:600;font-size:15px;
  padding:12px 2px;border-bottom:1px solid var(--color-rule-2);
  transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out);}
.ghost:hover{color:var(--color-accent);border-color:var(--color-accent);}
.mailbtn{display:inline-block;background:var(--color-accent);color:var(--color-accent-ink);font-weight:700;
  padding:13px 22px;border-radius:12px;letter-spacing:.01em;
  transition:transform var(--dur-short) var(--ease-out),opacity var(--dur-short) var(--ease-out);}
.mailbtn:hover{transform:translateY(-2px);opacity:.92;}

/* ── nav · N5 floating pill ── */
.nav{position:fixed;top:14px;left:0;right:0;z-index:60;display:flex;justify-content:center;
  padding:0 16px;pointer-events:none;}
.nav .bar{pointer-events:auto;display:flex;align-items:center;gap:clamp(16px,3vw,32px);
  width:100%;max-width:var(--maxw);height:58px;padding:0 10px 0 20px;
  border-radius:var(--radius-pill);border:1px solid var(--color-rule-2);
  background:oklch(21% 0.008 60 / 0.72);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 10px 34px -14px rgba(0,0,0,.65);}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:17px;color:var(--color-ink);}
.brand .mk{width:24px;height:24px;flex:none;border-radius:6px;object-fit:cover;}
.navlinks{display:flex;gap:26px;margin-left:auto;}
.navlinks a{font-size:14px;color:var(--color-ink-dim);font-weight:500;transition:color var(--dur-short) var(--ease-out);}
.navlinks a:hover{color:var(--color-ink);}
.nav .store-badge{margin-left:6px;}
.nav .store-badge img{height:38px;}
.nav .navcta{margin-left:auto;font-size:14px;color:var(--color-ink-dim);font-weight:600;
  transition:color var(--dur-short) var(--ease-out);}
.nav .navcta:hover{color:var(--color-accent);}
@media(max-width:900px){.navlinks{display:none;}.nav .store-badge{margin-left:auto;}}

/* ── section frame ── */
section{position:relative;}
.pad{padding:clamp(64px,9vw,112px) 0;}

/* ── Long Document (SEO + legal prose) ── */
main.doc{padding-top:clamp(120px,15vw,150px);padding-bottom:clamp(56px,8vw,96px);}
.crumb{font-family:var(--font-mono);font-size:12px;color:var(--color-ink-mut);letter-spacing:.02em;margin:0 0 14px;}
.crumb a{color:var(--color-ink-mut);}
.crumb a:hover{color:var(--color-ink);}
.doc h1{font-size:clamp(34px,5.2vw,54px);line-height:1.04;margin:0 0 18px;}
.doc h2{font-size:clamp(23px,3vw,32px);letter-spacing:-.025em;line-height:1.12;margin:clamp(40px,5vw,52px) 0 14px;}
.doc h3{font-size:18px;letter-spacing:-.015em;line-height:1.2;margin:26px 0 8px;}
.doc .meta{color:var(--color-ink-mut);font-size:14px;margin:0 0 34px;}
.doc p,.doc li{color:var(--color-ink-dim);font-size:16.5px;line-height:1.65;margin:0 0 14px;}
.doc li{margin-bottom:8px;}
.doc ul{padding-left:22px;margin:0 0 14px;}
.doc strong{color:var(--color-ink);font-weight:600;}
.doc a{color:var(--color-accent);}
.doc a:hover{text-decoration:underline;}
.doc em{font-style:italic;}
.doc .lede{font-size:clamp(17px,1.6vw,19px);margin:0 0 14px;max-width:60ch;}
.shotimg{border-radius:var(--radius-frame);border:1px solid var(--color-rule-2);
  box-shadow:0 34px 78px -34px rgba(0,0,0,.65);margin:34px auto;}
.qa-block{border-top:1px solid var(--color-rule);margin-top:8px;padding-top:6px;}
.note{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:14px;
  padding:16px 20px;font-size:14px;color:var(--color-ink-mut);margin:26px 0;}
.doc hr{border:none;border-top:1px solid var(--color-rule);margin:40px 0;}
.cta-box{background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-card);
  padding:34px 28px;margin:52px 0;text-align:center;}
.cta-box h2{margin:0 0 8px;}
.cta-box p{margin:0 0 6px;color:var(--color-ink-dim);font-size:16px;}
.cta-box .store-badge{margin-top:14px;}

/* ── landing hero (android / beta) ── */
.lp{padding-top:clamp(120px,15vw,158px);padding-bottom:clamp(56px,8vw,100px);position:relative;overflow:hidden;}
.lp .bloom{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 82% 6%,oklch(70% 0.15 45 / .16),transparent 60%),
             linear-gradient(180deg,var(--color-paper-2),var(--color-paper) 62%);}
.lp .grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(32px,5vw,68px);align-items:center;}
.lp .grid>*{min-width:0;}
.lp-copy{display:flex;flex-direction:column;gap:22px;}
.lp h1{font-size:clamp(36px,5.4vw,58px);max-width:15ch;}
@media(max-width:900px){.lp .grid{grid-template-columns:1fr;gap:40px;}.lp-stage{order:-1;}}

/* ── form card (android) ── */
.card{background:var(--color-paper-3);border:1px solid var(--color-rule);border-radius:var(--radius-card);
  padding:24px 22px 26px;max-width:480px;width:100%;}
.card form{display:flex;flex-direction:column;gap:14px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:13px;font-weight:600;color:var(--color-ink-dim);letter-spacing:.01em;}
.input{width:100%;background:var(--color-paper);border:1px solid var(--color-rule-2);border-radius:12px;
  padding:13px 14px;color:var(--color-ink);font-family:var(--font-body);font-size:15px;
  transition:border-color var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out);}
.input::placeholder{color:var(--color-ink-mut);}
.input:focus-visible{outline:none;border-color:var(--color-accent);
  box-shadow:0 0 0 3px oklch(70% 0.15 45 / .22);}
.input.bad{border-color:var(--color-red);box-shadow:0 0 0 3px oklch(66% 0.15 25 / .22);}
select.input{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A06B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--color-ink-dim);
  line-height:1.5;cursor:pointer;}
.consent input{margin-top:2px;width:17px;height:17px;accent-color:var(--color-accent);flex:none;}
.err{margin:0;color:var(--color-red);font-size:13px;line-height:1.4;}
.err[hidden]{display:none;}
.submit{margin-top:2px;width:100%;background:var(--color-accent);color:var(--color-accent-ink);font-weight:700;
  font-size:15px;border:none;border-radius:12px;padding:14px 18px;cursor:pointer;
  transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);}
.submit:hover{opacity:.92;transform:translateY(-1px);}
.submit:disabled{opacity:.6;cursor:default;transform:none;}
.fine{margin:0;color:var(--color-ink-mut);font-size:12.5px;line-height:1.5;}
.success{display:none;background:var(--color-paper-3);border:1px solid var(--color-rule-2);
  border-radius:var(--radius-card);padding:30px 26px;max-width:480px;width:100%;}
.success.show{display:block;animation:popIn var(--dur-mid) var(--ease-out);}
@keyframes popIn{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:none;}}
.success .tick{width:46px;height:46px;border-radius:50%;background:oklch(80% 0.18 155 / .16);
  color:var(--color-droid);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.success h2{font-size:24px;outline:none;}
.success p{margin:12px 0 0;color:var(--color-ink-dim);font-size:15px;line-height:1.6;}
.success strong{color:var(--color-sand);}

/* iOS-only note (beta) */
.osnote{display:flex;gap:10px;align-items:flex-start;margin:0;max-width:480px;
  background:oklch(83% 0.16 90 / .09);border:1px solid oklch(83% 0.16 90 / .30);border-radius:12px;
  padding:12px 15px;font-size:14px;line-height:1.5;color:var(--color-ink-dim);}
.osnote svg{flex:none;margin-top:2px;color:var(--color-gold);}
.osnote b{color:var(--color-sand);}
.osnote a{color:var(--color-gold);font-weight:600;}
.osnote a:hover{text-decoration:underline;}

/* ── bullet cards (android / beta) ── */
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(34px,4vw,44px);}
.bcard{background:var(--color-paper-3);border:1px solid var(--color-rule);border-radius:var(--radius-card);
  padding:24px 22px;display:flex;flex-direction:column;gap:11px;
  transition:border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);}
.bcard:hover{border-color:var(--color-rule-2);transform:translateY(-3px);
  box-shadow:0 24px 60px -30px oklch(70% 0.15 45 / .3);}
.bcard .ic{width:42px;height:42px;border-radius:11px;flex:none;background:oklch(70% 0.15 45 / .13);
  color:var(--color-accent);display:flex;align-items:center;justify-content:center;}
.bcard .ic svg{width:23px;height:23px;}
.bcard h3{font-size:16.5px;}
.bcard p{margin:0;color:var(--color-ink-dim);font-size:14.5px;line-height:1.55;}
@media(max-width:820px){.bgrid{grid-template-columns:1fr;}}

/* ── footer · Ft5 statement ── */
footer{border-top:1px solid var(--color-rule);padding:clamp(46px,6vw,68px) 0;margin-top:clamp(48px,7vw,72px);}
.f-statement{font-size:clamp(21px,3vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.14;max-width:24ch;}
.f-statement .accent{color:var(--color-accent);}
.f-row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;
  margin-top:clamp(30px,4vw,42px);}
.flinks{display:flex;gap:8px 22px;flex-wrap:wrap;max-width:640px;}
.flinks a{font-size:13.5px;color:var(--color-ink-mut);transition:color var(--dur-short) var(--ease-out);}
.flinks a:hover{color:var(--color-ink);}
.copy{font-size:12.5px;color:var(--color-ink-mut);font-family:var(--font-mono);width:100%;margin-top:18px;}

/* ── reveal ── */
.rv{opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out);}
.rv.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;transition:opacity .15s linear;}
  .store-badge:hover,.bcard:hover,.submit:hover,.mailbtn:hover{transform:none;}
  .success.show{animation:none;}
}