/* Calling Starboard - landing page styles.
   Palette, fonts, and component patterns (parchment card, brass button,
   mono eyebrow labels) are lifted 1:1 from CallingStarboard/Sources/Theme/Theme.swift
   and prototype/sailboat-right-of-way-simulator.html, so the site reads as the
   same brand as the app. Shared by index.html (variant A) and b.html (variant B). */

:root{
  --water-deep:#0A2A38;
  --water-mid:#0F3F52;
  --water-light:#175A72;
  --parchment:#F1E9D8;
  --parchment-edge:#DCCFA9;
  --ink:#1B2A2F;
  --ink-soft:#425055;
  --brass:#C08A34;
  --brass-dark:#8C6423;
  --port-red:#D1352B;
  --starboard-green:#2E8B4F;
  --paper-white:#F8F5EE;
  --muted:#9db4bc;
  --muted-2:#b9cdd4;
  --faint:#6f8890;
  --max:760px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}

body{
  background:radial-gradient(ellipse at 50% -10%, #123f52 0%, var(--water-deep) 55%, #071b24 100%);
  color:var(--paper-white);
  font-family:'Space Grotesk', system-ui, -apple-system, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px;}

h1,h2{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.15;
  margin:0;
}

.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass);
  margin:0 0 10px;
}

/* ---- topbar ---- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max);
  margin:0 auto;
  padding:22px 20px 0;
}
.wordmark{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--paper-white);
}
.wordmark img{width:22px; height:22px; border-radius:5px;}
.cta-small{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--brass);
  text-decoration:underline;
  text-underline-offset:3px;
}
.cta-small:hover{color:#dba951;}

/* ---- hero ---- */
.hero{
  max-width:var(--max);
  margin:0 auto;
  padding:52px 20px 8px;
  text-align:center;
}
.hero h1{
  font-size:clamp(1.65rem, 4.6vw, 2.5rem);
  max-width:21ch;
  margin:0 auto;
}
.hero-sub{
  color:var(--muted-2);
  font-size:1.02rem;
  max-width:52ch;
  margin:18px auto 0;
}
.cta-row{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.btn-primary{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  background:linear-gradient(180deg, #d9a24e, var(--brass));
  border:1px solid var(--brass-dark);
  border-radius:8px;
  padding:15px 26px;
  text-decoration:none;
  box-shadow:0 3px 0 var(--brass-dark);
  transition:transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary:active{transform:translateY(2px); box-shadow:0 1px 0 var(--brass-dark);}
.cta-note{font-size:.8rem; color:var(--muted); margin:0;}

.trust-row{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  list-style:none;
  margin:36px auto 0;
  padding:0 20px 36px;
  border-bottom:1px solid rgba(241,233,216,.14);
  max-width:var(--max);
  color:var(--muted);
  font-size:.83rem;
  font-family:'JetBrains Mono', monospace;
}

/* ---- interactive demo ---- */
.demo{padding:56px 0; border-bottom:1px solid rgba(241,233,216,.14); text-align:center;}
.demo .inner{max-width:var(--max); margin:0 auto; padding:0 20px;}
.demo h2{font-size:1.5rem; margin:0 auto 8px; max-width:22ch;}
.demo-sub{color:var(--muted-2); max-width:46ch; margin:0 auto 28px; font-size:.98rem;}

.phone{
  position:relative;
  width:100%;
  max-width:280px;
  margin:0 auto;
  aspect-ratio:860/1870;
  border-radius:30px;
  overflow:hidden;
  border:1px solid rgba(241,233,216,0.22);
  box-shadow:0 14px 34px rgba(0,0,0,0.45);
  cursor:pointer;
  background:#000;
}
.phone:focus-visible{outline:2px solid var(--brass); outline-offset:4px;}
.frame{
  position:absolute; inset:8px;
  width:calc(100% - 16px); height:calc(100% - 16px);
  border-radius:22px;
  object-fit:cover;
  transition:opacity .35s ease;
}
.frame-a{opacity:0;}
.phone.is-answered .frame-q{opacity:0;}
.phone.is-answered .frame-a{opacity:1;}

/* Visually hidden but still announced by screen readers - the visible UI
   is the tappable screenshot itself, no on-page instructional copy. */
.demo-caption{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---- copy sections ---- */
section.copy{padding:56px 0; border-bottom:1px solid rgba(241,233,216,.14);}
section.copy .inner{max-width:var(--max); margin:0 auto; padding:0 20px;}
.copy h2{font-size:1.4rem; max-width:24ch; margin-bottom:16px;}
.copy p{color:var(--muted-2); max-width:62ch; font-size:1rem;}
.copy p + p{margin-top:12px;}
.copy strong{color:var(--paper-white); font-weight:600;}

/* ---- situations ---- */
.situations{display:flex; flex-direction:column; margin-top:24px;}
.situation{display:flex; gap:18px; padding:20px 0; border-top:1px solid rgba(241,233,216,.14);}
.situation:last-child{border-bottom:1px solid rgba(241,233,216,.14);}
.situation .icon{flex:none; width:36px; height:36px; display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1;}
.situation h3{font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:1.05rem; margin:0 0 4px;}
.situation p{margin:0; color:var(--muted-2); font-size:.94rem;}

/* ---- who it's for ---- */
.who-list{margin:18px 0 0; padding:0; list-style:none; color:var(--muted-2);}
.who-list li{padding:10px 0; border-top:1px solid rgba(241,233,216,.14); font-size:.96rem;}
.who-list li:last-child{border-bottom:1px solid rgba(241,233,216,.14);}
.who-list strong{color:var(--paper-white); font-weight:600;}

/* ---- final: parchment "ship's plate" card ---- */
.final{padding:64px 0 80px;}
.plate{
  position:relative;
  max-width:480px;
  margin:0 20px;
  margin-inline:auto;
  background:var(--parchment);
  color:var(--ink);
  border-radius:14px;
  padding:36px 28px 30px;
  text-align:center;
  box-shadow:0 16px 34px rgba(0,0,0,.4);
  border:1px solid var(--parchment-edge);
}
.plate::before{
  content:"";
  position:absolute; inset:9px;
  border:1px dashed rgba(140,100,35,.4);
  border-radius:9px;
  pointer-events:none;
}
.rivet{position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e9c987, var(--brass-dark));
  box-shadow:0 1px 2px rgba(0,0,0,.4);}
.rivet.tl{top:11px;left:11px;} .rivet.tr{top:11px;right:11px;}
.rivet.bl{bottom:11px;left:11px;} .rivet.br{bottom:11px;right:11px;}
.plate .eyebrow{color:var(--brass-dark);}
.plate h2{font-size:1.5rem; max-width:18ch; margin:0 auto 6px;}
.price{font-family:'JetBrains Mono', monospace; font-weight:700; font-size:2rem; margin:18px 0 2px;}
.price-note{color:var(--ink-soft); font-size:.85rem; margin:0 0 22px;}
.plate .cta-row{margin-top:0;}
.langs{margin-top:24px; padding-top:18px; border-top:1px dashed rgba(140,100,35,.35); color:var(--ink-soft); font-size:.76rem;}

/* ---- footer ---- */
footer{text-align:center; padding:34px 20px 50px; color:var(--faint); font-size:.8rem;}
footer p{margin:4px 0;}
footer a{color:var(--muted); text-decoration:underline; text-underline-offset:2px;}

/* ---- simple doc pages (privacy.html) ---- */
.doc{max-width:640px; margin:0 auto; padding:60px 20px 80px;}
.doc h1{font-size:1.8rem; margin-bottom:6px;}
.doc .updated{color:var(--muted); font-size:.85rem; margin-bottom:30px;}
.doc h2{font-size:1.1rem; margin:30px 0 10px; color:var(--paper-white);}
.doc p, .doc li{color:var(--muted-2); font-size:.96rem;}
.doc a{color:var(--brass);}

@media (max-width:560px){
  .trust-row{gap:14px; font-size:.78rem;}
  .situation{gap:12px;}
}