/* JointSignal — jointsignal.app
   Self-contained. No CDN, no webfonts, no analytics: the site should be able
   to make the same claim the app does. System fonts only, which also means it
   renders instantly and looks native on the device most visitors arrive on. */

:root {
  --navy:        #0A1120;
  --navy-deep:   #060B14;
  --card:        #131C2E;
  --card-raised: #18233A;
  --rule:        #22304A;
  --teal:        #3DDCC4;
  --teal-deep:   #2BB8A3;
  --ink:         #EAF1FA;
  --ink-muted:   #8698B3;
  --ink-faint:   #5D6E88;
  --amber:       #F2A863;

  --wrap: 1080px;
  --radius: 16px;
  --radius-lg: 22px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-deep); text-decoration: underline; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Skip link — keyboard users should not have to tab the whole nav. */
.skip {
  position: absolute; left: -9999px;
  background: var(--teal); color: var(--navy-deep);
  padding: 10px 16px; border-radius: 8px; font-weight: 600;
}
.skip:focus { left: 16px; top: 16px; z-index: 100; }

/* ---------- Navigation ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 14px 24px;
  background: rgba(10, 17, 32, 0.86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule);
}
.nav .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 650; font-size: 17px; letter-spacing: -0.01em;
}
.nav .brand:hover { text-decoration: none; }
.nav .brand img { border-radius: 22.37%; }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--ink-muted); font-size: 15px; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav { justify-content: space-between; }
}

/* ---------- Buttons ---------- */

.btn, .btn-ghost {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 12px;
  font-weight: 600; font-size: 16px;
  min-height: 48px; line-height: 22px;
}
.btn { background: var(--teal); color: var(--navy-deep); }
.btn:hover { background: var(--teal-deep); color: var(--navy-deep); text-decoration: none; }
.btn-ghost { border: 1px solid var(--rule); color: var(--ink); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); text-decoration: none; }

/* ---------- Hero ---------- */

.hero { padding: 72px 0 56px; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 56px; align-items: center;
}
.eyebrow {
  color: var(--teal); font-size: 13px; font-weight: 650;
  letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 14px;
}
h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.1; letter-spacing: -0.025em;
  margin: 0 0 20px; font-weight: 700;
}
.lede { font-size: 19px; color: var(--ink-muted); margin: 0 0 28px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fineprint { font-size: 14px; color: var(--ink-faint); margin: 18px 0 0; }

.shot { width: 100%; height: auto; border-radius: 26px; display: block; }
.shot-wrap {
  border: 1px solid var(--rule); border-radius: 30px; padding: 8px;
  background: var(--card); max-width: 340px; margin: 0 auto;
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 48px 0 40px; }
}

/* ---------- Strip ---------- */

.strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  /* Overrides the generic `section` padding. The strip's own background is the
     divider colour, showing through the 1px grid gaps — so any padding on the
     container becomes a pale band above and below the columns instead of
     space. Specificity collision, caught in the render rather than the source. */
  padding: 0;
}
.strip > div { background: var(--navy); padding: 26px 24px; }
.strip b { display: block; font-size: 15px; margin-bottom: 4px; }
.strip span { color: var(--ink-muted); font-size: 15px; }
@media (max-width: 760px) { .strip { grid-template-columns: 1fr; } }

/* ---------- Sections ---------- */

section { padding: 72px 0; }
h2 {
  font-size: clamp(26px, 3.4vw, 34px); line-height: 1.2;
  letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 700;
}
.section-lede { color: var(--ink-muted); font-size: 18px; max-width: 62ch; margin: 0 0 36px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Features ---------- */

.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.features-grid article {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 24px;
}
.features-grid h3 { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.features-grid p { margin: 0; color: var(--ink-muted); font-size: 15px; }

/* ---------- Screens ---------- */

.screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
.screens figure { margin: 0; }
.screens img {
  width: 100%; height: auto; display: block;
  border-radius: 18px; border: 1px solid var(--rule);
}
.screens figcaption { color: var(--ink-muted); font-size: 14px; margin-top: 12px; }
.screens b { color: var(--ink); display: block; font-size: 15px; }

/* ---------- The rule ---------- */

.rule-band { background: var(--card); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.promises { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.promises li { padding-left: 26px; position: relative; color: var(--ink-muted); }
.promises li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}
.promises b { color: var(--ink); }

/* ---------- Pricing ---------- */

.price-card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 36px; max-width: 480px;
  margin: 0 auto; text-align: center;
}
.price { font-size: 46px; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
.price em { font-size: 17px; font-weight: 400; color: var(--ink-muted); font-style: normal; }
.price-alt { color: var(--ink-muted); margin: 6px 0 0; font-size: 16px; }
.price-trial { color: var(--teal); font-weight: 600; font-size: 15px; margin: 8px 0 22px; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 26px; text-align: left; display: grid; gap: 10px; }
.price-card li { padding-left: 26px; position: relative; color: var(--ink-muted); font-size: 15px; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }

/* ---------- FAQ ---------- */

.faq-list { display: grid; gap: 10px; max-width: 760px; }
details {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 18px 22px;
}
summary { cursor: pointer; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--teal); font-weight: 400; font-size: 20px; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { color: var(--ink-muted); margin: 12px 0 0; font-size: 15px; }

/* ---------- Story ---------- */

.story { max-width: 68ch; }
.story p { color: var(--ink-muted); }
.story p:first-of-type { color: var(--ink); font-size: 19px; }

/* ---------- Footer ---------- */

.foot { border-top: 1px solid var(--rule); padding: 44px 0 56px; background: var(--navy-deep); }
.foot-top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; }
.foot-brand { display: flex; gap: 12px; align-items: center; }
.foot-brand img { border-radius: 22.37%; }
.foot-brand b { display: block; }
.foot-brand span { color: var(--ink-faint); font-size: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 20px; }
.foot-links a { color: var(--ink-muted); font-size: 15px; }
.disclaimer {
  color: var(--ink-faint); font-size: 13px; margin: 32px 0 0;
  padding-top: 22px; border-top: 1px solid var(--rule); max-width: 76ch;
}

/* ---------- Long-form legal pages ---------- */

.doc { max-width: 74ch; padding: 56px 0 72px; }
.doc h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 8px; }
.doc .updated { color: var(--ink-faint); font-size: 15px; margin: 0 0 40px; }
.doc h2 { font-size: 22px; margin: 40px 0 12px; }
.doc h3 { font-size: 17px; margin: 26px 0 8px; }
.doc p, .doc li { color: var(--ink-muted); }
.doc strong { color: var(--ink); }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
.doc .callout {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px 24px; margin: 28px 0;
}
.doc .callout p:last-child { margin-bottom: 0; }
.doc .callout p:first-child { margin-top: 0; }

/* Anchored headings should not hide under the sticky nav. */
:target { scroll-margin-top: 84px; }

/* ---------- Light appearance ---------- */
/* The site commits to the dark brand field. Respecting a light preference
   here would mean maintaining two designs for a one-page site; the contrast
   ratios below are checked for the dark one, which is the only one shipped. */

::selection { background: var(--teal); color: var(--navy-deep); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* ---------- Hero glow ---------- */
/* Two soft radial washes lift the hero off the flat navy without any image
   or animation. Kept faint: the phone shot is the point of focus. */
.hero {
  background:
    radial-gradient(ellipse 60% 50% at 72% 12%, rgba(61, 220, 196, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 45% at 12% 85%, rgba(43, 106, 184, 0.12), transparent 70%);
}
.trust-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.trust-chips li {
  border: 1px solid var(--rule); border-radius: 999px;
  padding: 5px 14px; font-size: 13px; color: var(--ink-muted);
}

/* ---------- Illustrated feature cards ---------- */

.feature-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px; margin-bottom: 16px;
}
.feature-cards article {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.feature-cards .feature-copy { padding: 24px 24px 20px; }
.feature-cards h3 { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.feature-cards p { margin: 0; color: var(--ink-muted); font-size: 15px; }
/* The shot shows the top of the screen and runs off the card's bottom edge,
   so every card reads as a phone mid-use rather than a framed poster. */
.feature-shot {
  margin-top: auto; padding: 22px 28px 0; display: flex; justify-content: center;
  height: 300px; overflow: hidden;
}
.feature-shot img {
  width: 236px; height: 100%; object-fit: cover; object-position: top;
  border-radius: 24px 24px 0 0;
  border: 1px solid var(--rule); border-bottom: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.feature-cards-pair { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.feature-cards-pair .feature-shot img { width: 300px; }

/* ---------- Appointments / report section ---------- */

#appointments {
  background:
    radial-gradient(ellipse 55% 40% at 85% 8%, rgba(61, 220, 196, 0.07), transparent 70%),
    var(--navy-deep);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.report-fan {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px; align-items: start; margin: 44px 0 18px;
}
.report-fan img {
  width: 100%; height: auto; display: block; border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.report-fan img:nth-child(1) { transform: rotate(-1.6deg); }
.report-fan img:nth-child(2) { transform: translateY(-12px); }
.report-fan img:nth-child(3) { transform: rotate(1.6deg); }
.report-notes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  margin: 26px 0 0;
}
.report-notes div { color: var(--ink-muted); font-size: 14px; }
.report-notes b { color: var(--ink); display: block; font-size: 15px; }
.appt-split {
  display: grid; grid-template-columns: 0.8fr 1.2fr;
  gap: 56px; align-items: center; margin-top: 72px;
}
.appt-split h3 { margin: 0 0 8px; font-size: 19px; font-weight: 650; }
.appt-split p { color: var(--ink-muted); margin: 0 0 24px; }
/* The questions screen is mostly empty below the list, so it gets the same
   treatment as the feature cards: a fixed frame cropped to the part that says
   something. Width and height are set independently — a width-proportional
   height just reproduces the image's own aspect and crops nothing. */
.appt-shot { display: flex; justify-content: center; align-items: flex-start; }
.appt-shot img {
  width: 300px; height: 440px; object-fit: cover; object-position: top;
  border-radius: 28px 28px 0 0;
  border: 1px solid var(--rule); border-bottom: none;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
@media (max-width: 860px) {
  .report-fan, .report-notes { grid-template-columns: 1fr; }
  .report-fan img { transform: none !important; max-width: 480px; margin: 0 auto; }
  .appt-split { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- Story ---------- */

.story-grid {
  display: grid; grid-template-columns: 1.25fr 0.75fr;
  gap: 56px; align-items: start;
}
.story-aside { display: grid; gap: 16px; }
.story-photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); border: 1px solid var(--rule);
}
.story-photo figcaption { color: var(--ink-faint); font-size: 13px; margin-top: 10px; }
.story-card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px 24px;
}
.story-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.story-card li { padding-left: 24px; position: relative; color: var(--ink-muted); font-size: 15px; }
.story-card li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Store badges (dormant until launch — see LAUNCH-KIT.md) ---------- */
/* Sized so Apple's badge renders at 44px high with clear space, per their
   guidelines. Nothing on the live site uses these classes until the launch
   kit is pasted in. */
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 22px 0 0; }
.store-badges img { height: 44px; width: auto; display: block; }
.store-badges a:hover { opacity: 0.85; }

/* ---------- Guide article extras ---------- */

.doc .lead { font-size: 19px; color: var(--ink); }
.doc .checklist {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 24px 26px; margin: 30px 0;
}
.doc .checklist ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.doc .checklist li { padding-left: 28px; position: relative; margin: 0; }
.doc .checklist li::before {
  content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700;
}