/* VOW "Threshold" theme — mirrors the iOS DesignSystem tokens (ink canvas, dawn / shield / freedom moments). */
:root{--ink:#0A0C12;--raised:#151924;--inset:#212636;--elevated:#1A1F2C;--mist:#F4F5FA;--text-2:#A9B0C3;--text-3:#8A92A8;--separator:#2A3042;--control:#4A5268;--highlight:rgba(255,255,255,.1);--accent:#FF9A4D;--accent-fill:#FF8A3A;--on-accent:#160C05;--dawn:linear-gradient(135deg,#FF7A2F,#FFB547);--shield:#8B87FF;--freedom:#3EE0A1;--r-control:18px;--r-card:26px;--r-hero:32px;--gutter:clamp(1.25rem,5vw,4rem);--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{position:relative;isolation:isolate;margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--mist);font:1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Horizon glow: static, dawn from the upper right with a faint shield wash on the left. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 110% 70% at 88% -8%,rgba(255,138,58,.26),rgba(255,138,58,.07) 45%,transparent 72%),radial-gradient(ellipse 80% 60% at -12% 38%,rgba(139,135,255,.11),transparent 70%)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.25em;overflow-wrap:anywhere}
a:hover{color:#FFB547}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--shield);outline-offset:3px}
::selection{background:rgba(255,138,58,.35);color:var(--mist)}
.skip{position:absolute;left:1rem;top:-8rem;z-index:3;padding:.6rem 1rem;border-radius:999px;background:var(--elevated);color:var(--mist)}
.skip:focus{top:1rem}

/* Chrome */
header,main,footer{width:100%;max-width:1160px;margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
header{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:1.4rem;padding-bottom:1.4rem}
header::after,footer::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);height:1px;background:linear-gradient(90deg,transparent,var(--separator) 18%,var(--separator) 82%,transparent)}
header::after{bottom:0}
.brand{display:inline-block;color:var(--mist);text-decoration:none;font:700 1.3rem/1 var(--display);font-stretch:125%;letter-spacing:.34em;margin-right:-.34em;padding:.7rem 0}
.brand::first-letter{color:var(--accent-fill)}
.brand:hover{color:var(--mist)}
nav{display:flex;flex-wrap:wrap;gap:.25rem}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .85rem;border-radius:999px;color:var(--text-2);text-decoration:none;font-size:.9375rem;font-weight:500}
nav a:hover{color:var(--mist);background:rgba(255,255,255,.05)}
nav a[aria-current="page"]{color:var(--mist);background:var(--raised);box-shadow:inset 0 1px 0 var(--highlight),inset 0 0 0 1px var(--separator)}
main{flex:1;padding-top:4rem;padding-bottom:5rem}
footer{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1.5rem;padding-top:1.75rem;padding-bottom:max(2rem,env(safe-area-inset-bottom));font-size:.875rem;color:var(--text-3)}
footer::before{top:0}
footer p{margin:0;color:var(--text-3)}

/* Type */
h1,h2,h3{font-family:var(--display);font-stretch:125%;font-weight:700;color:var(--mist);text-wrap:balance}
h1{font-size:clamp(2.35rem,1.2rem + 4.6vw,4.4rem);line-height:1.04;letter-spacing:-.025em;max-width:16ch;margin:0 0 1.5rem}
h2{font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem);line-height:1.25;letter-spacing:-.01em;margin:3rem 0 .9rem}
p,li{max-width:70ch;color:var(--text-2)}
strong{color:var(--mist);font-weight:600}
.eyebrow,.loop-title{font:600 .75rem/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 1.25rem}
.intro{font-size:clamp(1.125rem,1.05rem + .3vw,1.3rem);line-height:1.55;color:var(--mist);opacity:.92;max-width:50ch;margin:0 0 1rem}

/* Surfaces: raised card with a hairline highlight; hero card with a dawn gradient border. */
.loop,article ul li{background:linear-gradient(var(--raised),var(--raised)) padding-box,linear-gradient(180deg,var(--highlight),rgba(42,48,66,.6)) border-box;border:1px solid transparent}

/* Home */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.hero h1{max-width:18ch;font-size:clamp(2.35rem,1.2rem + 4.6vw,3.9rem)}
.lede{margin:0;max-width:52ch}
.download{margin:2rem 0 1rem}
.download-button{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:1rem 1.6rem;border-radius:999px;background:var(--dawn);color:var(--on-accent);font:700 1.0625rem/1.3 var(--display);text-decoration:none;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 32px -12px rgba(255,122,47,.6)}
.download-button:hover{color:var(--on-accent);filter:brightness(1.07)}
.download-note{font-size:.9375rem;color:var(--text-2)}
.loop{border-radius:var(--r-card);padding:1.75rem}
.loop-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.seal{flex:none;width:64px;height:64px}
.loop-title{margin:0;color:var(--text-2)}
.loop ol{padding:0;margin:0;list-style:none}
.loop li{display:grid;grid-template-columns:2.75rem 1fr;column-gap:1rem;align-items:start;max-width:none;padding:1.1rem 0;border-top:1px solid var(--separator)}
.loop li:last-child{padding-bottom:0}
.loop li span{--tone:var(--accent);grid-row:span 2;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:14px;font:600 .8125rem/1 var(--mono);letter-spacing:.06em;color:var(--tone);background:color-mix(in srgb,var(--tone) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 28%,transparent)}
.loop .step-shield span{--tone:var(--shield)}
.loop .step-freedom span{--tone:var(--freedom)}
.loop li strong{font:700 1.125rem/1.3 var(--display);font-stretch:125%;letter-spacing:-.005em}
.loop li small{display:block;font-size:.9375rem;line-height:1.5;color:var(--text-2);margin-top:.3rem}

/* Legal, support, notices */
article{max-width:72ch}
article h1{font-size:clamp(2.1rem,1.3rem + 3vw,3.4rem);max-width:none}
article h2{padding-top:1.75rem;border-top:1px solid var(--separator)}
article p{line-height:1.75}
article ul{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;gap:.75rem}
article ul li{max-width:none;padding:1.1rem 1.25rem;border-radius:var(--r-control);line-height:1.6}
article ul li strong{display:block;margin-bottom:.2rem;font-family:var(--display);font-stretch:125%}
main>h1+p,main>h1+.intro{font-size:1.125rem}

@media (prefers-reduced-motion:no-preference){
  .hero-copy,.loop,article{animation:rise .6s cubic-bezier(.2,.8,.2,1) both}
  .loop{animation-delay:.08s}
  @keyframes rise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:2rem}
  .loop,
}
@media (max-width:640px){
  body{font-size:1rem}
  header{padding-top:.9rem;padding-bottom:.9rem}
  .brand{font-size:1.15rem}
  nav{gap:0;margin-right:-.6rem}
  nav a{padding:0 .6rem;font-size:.875rem}
  main{padding-top:2.25rem;padding-bottom:3.5rem}
  .eyebrow{margin-bottom:1rem}
  h1{margin-bottom:1.1rem}
  
  
  
  .loop{padding:1.4rem}
  .seal{width:56px;height:56px}
  footer{flex-direction:column}
}
@media (max-width:360px){
  nav a{padding:0 .45rem}
  .brand{letter-spacing:.24em;margin-right:-.24em}
}