/* Habit Tracker landing · SFA Coaching
   Sarah's Brand Board: black #1C1C1C, white, beige #E5DBC9, taupe #BFB1A6, gold #E5C55D. The app adds cream #F4EFE6.
   Text on gold is always black. Everything here is class-scoped so it never leaks into the app inside the phones (.dt). */

:root {
  --ink: #1C1C1C;
  --ink-2: #2A2A2A;
  --paper: #F4EFE6;
  --beige: #E5DBC9;
  --beige-2: #D8CCB6;
  --taupe: #BFB1A6;
  --gold: #E5C55D;
  --gold-2: #D6B444;
  --white: #FFFFFF;
  --muted: #5E5650;
  --line: rgba(28, 28, 28, .12);
  --line-dark: rgba(229, 219, 201, .16);
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1360px;
  /* Tallest a phone may be on screen: the pinned hero phone, and the two phones in Trevor's section. */
  --ph: clamp(480px, calc(100vh - 125px), 880px);
  --ph2: clamp(480px, calc(100vh - 110px), 880px);
  --pw: 384px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--taupe) var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 1280px) { body { font-size: 20px; } }
::selection { background: var(--gold); color: var(--ink); }
[hidden] { display: none !important; }

/* Two versions of one page: ?members hides Sarah's parts; members-only lines hide in Sarah's version. */
.is-members [data-audience="sarah"] { display: none !important; }
html:not(.is-members) [data-audience="members"] { display: none !important; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.band-dark :focus-visible { outline-color: var(--gold); }

/* ---------- type ---------- */

.h1, .h2, .h3, .h4 { font-family: var(--display); color: var(--ink); margin: 0; text-wrap: balance; }
.h1 { font-size: clamp(46px, 5.6vw, 88px); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; }
.h2 { font-size: clamp(36px, 3.6vw, 60px); font-weight: 600; line-height: 1.08; letter-spacing: -.015em; margin-bottom: .55em; }
.h3 { font-size: clamp(22px, 1.7vw, 28px); font-weight: 600; line-height: 1.2; }
.h4 { font-size: clamp(22px, 1.5vw, 26px); font-weight: 600; line-height: 1.2; }
.band-dark .h1, .band-dark .h2, .band-dark .h3, .band-dark .h4 { color: var(--paper); }

.lede { font-size: clamp(21px, 1.55vw, 26px); line-height: 1.5; color: var(--ink-2); max-width: 34ch; margin: 28px 0 0; }
.lead { font-size: clamp(19px, 1.3vw, 22px); line-height: 1.55; color: var(--muted); max-width: 52ch; margin: 0 0 32px; }
.band-dark .lead { color: var(--taupe); }
.copy p { max-width: 58ch; margin: 0 0 1.1em; }
.copy p:last-child { margin-bottom: 0; }
.copy p:last-child { color: var(--ink); font-weight: 500; }

.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- top bar ---------- */

.top { border-bottom: 1px solid var(--line); background: var(--paper); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 14px; margin: 0; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--ink); letter-spacing: -.01em; }
.brand-sep { width: 1px; height: 22px; background: var(--taupe); }
.brand-app { font-size: 16px; font-weight: 500; color: var(--muted); }
.top-link { font-size: 16px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--taupe); }
.top-link:hover { text-decoration-color: var(--ink); }
@media (max-width: 560px) { .brand-sep, .brand-app { display: none; } .top-link { font-size: 15px; } }

/* ---------- buttons ---------- */

.btn, .jump, .show, .yn button, .seg button, .switch {
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.btn:active, .jump:active, .show:active, .yn button:active, .seg button:active, .switch:active { transform: scale(.97); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 999px; font: 600 17px/1.2 var(--sans); cursor: pointer; border: 1px solid transparent; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-2); }
.btn-gold:disabled { background: rgba(229, 197, 93, .35); color: rgba(28, 28, 28, .7); cursor: default; transform: none; }
.btn-line { background: transparent; color: var(--paper); border-color: rgba(229, 219, 201, .4); }
.btn-line:hover { border-color: var(--paper); }

/* ---------- the story: text on the left, the live phone pinned on the right ---------- */

.story { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero { padding: clamp(44px, 9vw, 88px) 0 40px; }
.where { display: inline-flex; align-items: center; gap: 12px; margin: 32px 0 0; padding: 12px 20px; border: 1px solid var(--beige-2); border-radius: 999px; background: var(--white); color: var(--ink-2); font-size: 18px; line-height: 1.3; }
.where b { font-weight: 600; color: var(--ink); }
.jump { display: flex; width: fit-content; align-items: center; gap: 10px; margin-top: 20px; min-height: 52px; padding: 14px 24px; border-radius: 999px; background: var(--gold); color: var(--ink); font-weight: 600; font-size: 18px; text-decoration: none; }
.jump:hover { background: var(--gold-2); }

.story-aside { display: flex; flex-direction: column; align-items: center; padding-bottom: 24px; }
.aside-in { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; width: 100%; }
/* A low morning glow behind the phone. */
.aside-in::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 8%;
  width: min(560px, 130%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(229, 197, 93, .30) 0%, rgba(229, 197, 93, .12) 42%, rgba(229, 197, 93, 0) 70%);
  pointer-events: none;
}
.phone-cap { font-size: 15px; color: var(--muted); text-align: center; margin: 16px 0 0; max-width: 32ch; }

.block { padding-block: clamp(56px, 8vw, 112px); }
.story .block { padding-block: clamp(56px, 7vw, 104px) 0; }
.story .block:last-of-type { padding-bottom: clamp(64px, 8vw, 120px); }

@media (min-width: 1024px) {
  .story { grid-template-columns: minmax(0, 1fr) var(--pw); column-gap: clamp(48px, 6vw, 120px); }
  .story > section { grid-column: 1; min-width: 0; }
  .story-aside { grid-column: 2; grid-row: 1 / span 5; padding-bottom: 0; }
  .aside-in { position: sticky; top: max(12px, calc((100vh - var(--ph) - 70px) / 2)); padding-top: 12px; }
  #hero-wrap { --fit-h: var(--ph); }
  .hero { min-height: calc(var(--ph) + 56px); display: flex; flex-direction: column; justify-content: center; padding-block: 28px; }
}

/* ---------- phone frame: an iPhone 15 Pro drawn in CSS (same mounting as app/demo.html) ----------
   The app renders on a true-size screen, 393 x 852, inside a 14px bezel (421 x 880 in all).
   The whole device is then scaled down to fit: --k is the smaller of "fits the column" and "fits the
   screen height", never above 1. tan(atan2(a, b)) is a / b as a plain number, in CSS.
   The bezel is the border, so the app's full-screen layers (the vision board) still fill the screen exactly.
   ::before is the status bar, ::after the Dynamic Island and the home bar, .phone-wrap::before the side buttons. */

.aside-in, .duo-phone, .home-mock { container-type: inline-size; }
.phone-wrap {
  --fit-h: 880px;   /* no height limit unless a layout sets one */
  --k: min(1, tan(atan2(100cqw, 421px)), tan(atan2(var(--fit-h), 880px)));
  position: relative;
  isolation: isolate;
  flex: none;
  width: calc(421px * var(--k));
  height: calc(880px * var(--k));
}
@media (min-width: 820px) { .duo .phone-wrap { --fit-h: var(--ph2); } }
.phone {
  --bezel: #0B0B0C;
  --rim: #3F3C38;
  --sb: 54px;   /* status bar height */
  position: absolute;
  top: 0;
  left: 0;
  width: 421px;
  height: 880px;
  background: var(--paper);
  border: 14px solid var(--bezel);
  border-radius: 68px;
  overflow: hidden;
  transform: scale(var(--k));   /* also keeps the app's full-screen layers inside the phone */
  transform-origin: 0 0;
  box-shadow:
    0 0 0 1.5px var(--rim),
    0 0 0 2.5px #161616,
    0 2px 4px rgba(28, 28, 28, .10),
    0 26px 50px -22px rgba(28, 28, 28, .34),
    0 70px 120px -44px rgba(28, 28, 28, .48);
}
.phone .dt-scroll {
  height: 100%;
  padding-top: var(--sb);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;   /* phones show no scrollbar, and a hidden one would still take 10px of the screen */
}

/* Status bar: 9:41, signal, wifi, battery. Frosted cream so the app scrolls under it. */
.phone::before {
  content: "9:41";
  position: absolute;
  z-index: 15;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sb);
  padding: 21px 0 0 48px;
  font: 600 17px/1 var(--sans);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='12' viewBox='0 0 68 12'><g fill='%231C1C1C'><rect x='0' y='7.6' width='3.1' height='4.4' rx='.9'/><rect x='4.6' y='5.4' width='3.1' height='6.6' rx='.9'/><rect x='9.2' y='3' width='3.1' height='9' rx='.9'/><rect x='13.8' y='.5' width='3.1' height='11.5' rx='.9'/></g><g fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linecap='round'><path d='M23.6 4.6a9.6 9.6 0 0 1 13.6 0'/><path d='M26.4 7.4a5.6 5.6 0 0 1 8 0'/></g><circle cx='30.4' cy='10.3' r='1.6' fill='%231C1C1C'/><rect x='43.5' y='.5' width='21' height='11' rx='3.4' fill='none' stroke='%231C1C1C' stroke-opacity='.4'/><rect x='45.5' y='2.5' width='17' height='7' rx='1.8' fill='%231C1C1C'/><path d='M66 4.2v3.6c.8-.3 1.4-1 1.4-1.8s-.6-1.5-1.4-1.8z' fill='%231C1C1C' fill-opacity='.45'/></svg>") right 29px top 23px / 76px 13.4px no-repeat,
    rgba(244, 239, 230, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  pointer-events: none;
}
/* Dynamic Island and home bar, above everything in the screen. */
.phone::after {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 35'><rect width='120' height='35' rx='17.5' fill='%23050505'/><circle cx='101.5' cy='17.5' r='6' fill='%230D1017'/><circle cx='101.5' cy='17.5' r='3.2' fill='%23161C2B'/><circle cx='100.4' cy='16.4' r='1' fill='%23384870' fill-opacity='.8'/></svg>") center top 11px / 126px 37px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 5'><rect width='134' height='5' rx='2.5' fill='%231C1C1C'/></svg>") center bottom 8px / 134px 5px no-repeat;
}
/* Side buttons: action and volume on the left, power on the right. */
.phone-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 17%;
  left: -3px;
  right: -3px;
  height: 26%;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--btn, #2E2C29) 0 10%, transparent 10% 24%, var(--btn, #2E2C29) 24% 56%, transparent 56% 64%, var(--btn, #2E2C29) 64% 96%, transparent 96%) left top / 4px 100% no-repeat,
    linear-gradient(to bottom, transparent 0 16%, var(--btn, #2E2C29) 16% 62%, transparent 62%) right top / 4px 100% no-repeat;
}
/* Room for the home bar under the app's tab bar and the full-screen board. */
.phone .dt-nav { padding-bottom: 24px; }
.phone .dt-viewer-top { padding-top: calc(var(--sb) + 4px); }
.phone .dt-viewer-low { padding-bottom: 34px; }
.phone .dt-sheet-in { padding-bottom: 30px; }

.band-dark .phone {
  --rim: #55514B;
  box-shadow:
    0 0 0 1.5px var(--rim),
    0 0 0 2.5px #0A0A0A,
    0 30px 60px -24px rgba(0, 0, 0, .7),
    0 80px 120px -50px rgba(0, 0, 0, .8);
}
.band-dark .phone-wrap { --btn: #4A4641; }

.phone-fail { padding: 48px 24px; text-align: center; font: 16px/1.5 var(--sans); color: var(--ink-2); }
.phone-fail a { display: inline-block; margin-top: 12px; color: var(--ink); font-weight: 600; }

/* The one authored moment: Sarah's screen answers when Trevor comes back. */
.phone-wrap::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 2px solid var(--gold);
  border-radius: calc(68px * var(--k) + 12px);
  opacity: 0;
  pointer-events: none;
  transform: scale(.985);
}
.phone-wrap.is-flash::after { animation: lp-ring 1500ms var(--ease-out) both; }
@keyframes lp-ring {
  0% { opacity: 0; transform: scale(.985); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.045); }
}

/* A section Sarah just turned on: his phone scrolls to it and rings it once. */
#phone-hero .lp-new { outline: 2px solid transparent; outline-offset: 3px; animation: lp-new 1800ms var(--ease-out) both; }
@keyframes lp-new {
  0% { outline-color: rgba(229, 197, 93, 0); }
  15%, 70% { outline-color: var(--gold); }
  100% { outline-color: rgba(229, 197, 93, 0); }
}

/* ---------- how it works ---------- */

.steps { list-style: none; margin: 8px 0 0; padding: 0; }
.step-row, .rail-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.step-row:last-child { border-bottom: 1px solid var(--line); }
.step-row p, .rail-step p { margin: 8px 0 0; max-width: 46ch; }
.num {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink); color: var(--ink);
  font: 600 19px/1 var(--display);
  transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.step-row.is-on .num { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.show { display: none; margin-top: 12px; padding: 6px 0; background: none; border: 0; font: 600 16px/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--gold); text-decoration-thickness: 2px; cursor: pointer; }
.show:hover { text-decoration-color: var(--ink); }
@media (min-width: 1024px) { .show { display: inline-block; } }

.aside-note { margin: 36px 0 0; padding: 22px 26px; background: var(--white); border-radius: 16px; box-shadow: 0 1px 2px rgba(28, 28, 28, .06), 0 18px 40px -28px rgba(28, 28, 28, .35); color: var(--ink); max-width: 58ch; }

/* ---------- it's not another app: the two ways in, and a home screen ---------- */

.web .lead { margin-bottom: 36px; }
.web-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.home-mock { width: min(100%, 236px); justify-self: center; }
@media (min-width: 680px) {
  .web-grid { grid-template-columns: 220px minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
  .home-mock { width: 220px; justify-self: start; position: sticky; top: 24px; }
}
.ways .group-h { margin-bottom: 14px; }
.way { padding: 22px 24px 20px; background: var(--white); border-radius: 16px; box-shadow: 0 1px 2px rgba(28, 28, 28, .06), 0 18px 40px -28px rgba(28, 28, 28, .35); }
.way + .way { margin-top: 14px; }
.way .h4 { margin-bottom: 12px; }
.way > p { margin: -4px 0 6px; color: var(--muted); font-size: .92em; }
.mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.mini li { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; line-height: 1.35; color: var(--ink); }
/* The arrow ends a step, so a wrapped line starts with the next step, not with an arrow. */
.mini li:not(:last-child)::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 14px 0 4px;
  border-top: 1.8px solid var(--taupe);
  border-right: 1.8px solid var(--taupe);
  transform: rotate(45deg);
}
.mini b { font-weight: 600; }
.ui-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-dots { fill: var(--ink); stroke: none; }
.os { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 14px 0 2px; margin-top: 12px; border-top: 1px solid var(--line); }
.os-name { margin: 0; font: 600 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 520px) { .os { grid-template-columns: minmax(0, 1fr); } .way { padding: 20px 18px 18px; } }
.web-note { margin: 20px 0 0; max-width: 54ch; color: var(--ink); }
.web-sarah { margin-top: 10px; color: var(--muted); font-size: .92em; }

/* The home screen, drawn at true size inside the same iPhone frame and scaled with it. */
.phone-home::before {
  color: #FFFFFF;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='68' height='12' viewBox='0 0 68 12'><g fill='%23FFFFFF'><rect x='0' y='7.6' width='3.1' height='4.4' rx='.9'/><rect x='4.6' y='5.4' width='3.1' height='6.6' rx='.9'/><rect x='9.2' y='3' width='3.1' height='9' rx='.9'/><rect x='13.8' y='.5' width='3.1' height='11.5' rx='.9'/></g><g fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round'><path d='M23.6 4.6a9.6 9.6 0 0 1 13.6 0'/><path d='M26.4 7.4a5.6 5.6 0 0 1 8 0'/></g><circle cx='30.4' cy='10.3' r='1.6' fill='%23FFFFFF'/><rect x='43.5' y='.5' width='21' height='11' rx='3.4' fill='none' stroke='%23FFFFFF' stroke-opacity='.5'/><rect x='45.5' y='2.5' width='17' height='7' rx='1.8' fill='%23FFFFFF'/><path d='M66 4.2v3.6c.8-.3 1.4-1 1.4-1.8s-.6-1.5-1.4-1.8z' fill='%23FFFFFF' fill-opacity='.5'/></svg>") right 29px top 23px / 76px 13.4px no-repeat;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.phone-home::after {
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 35'><rect width='120' height='35' rx='17.5' fill='%23050505'/><circle cx='101.5' cy='17.5' r='6' fill='%230D1017'/><circle cx='101.5' cy='17.5' r='3.2' fill='%23161C2B'/></svg>") center top 11px / 126px 37px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 5'><rect width='134' height='5' rx='2.5' fill='%23FFFFFF'/></svg>") center bottom 8px / 134px 5px no-repeat;
}
.hs {
  position: absolute;
  inset: 0;
  padding: 80px 26px 0;
  background:
    radial-gradient(120% 70% at 90% 0%, rgba(229, 197, 93, .55) 0%, rgba(229, 197, 93, 0) 55%),
    radial-gradient(110% 60% at 0% 100%, rgba(28, 28, 28, .55) 0%, rgba(28, 28, 28, 0) 60%),
    linear-gradient(165deg, #CDBFAF 0%, #9C8E82 55%, #5E5650 100%);
}
.hs-grid { display: grid; grid-template-columns: repeat(4, 64px); justify-content: space-between; row-gap: 26px; }
.app { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.app-ic { display: block; width: 64px; height: 64px; border-radius: 15px; background: rgba(255, 255, 255, .24); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.app-ic svg { display: block; width: 100%; height: 100%; }
.app-nm { font: 500 12.5px/1.2 var(--sans); color: #FFFFFF; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); opacity: .78; }
.app-circle .app-ic, .app-ht .app-ic { background: none; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.app-circle .app-nm, .app-ht .app-nm { opacity: 1; font-weight: 600; }
.app-ht .app-ic { box-shadow: 0 0 0 4px rgba(229, 197, 93, .9), 0 0 0 9px rgba(229, 197, 93, .28), 0 12px 24px -8px rgba(0, 0, 0, .55); }
.hs-dots { position: absolute; left: 0; right: 0; bottom: 128px; display: flex; justify-content: center; gap: 8px; }
.hs-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.hs-dots span:first-child { background: #FFFFFF; }
.hs-dock {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  height: 94px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 36px;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* ---------- what's inside ---------- */

.cos { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(22px, 1.6vw, 27px); line-height: 1.4; color: var(--ink); max-width: 40ch; margin: -8px 0 40px; }
.group-h { font: 600 15px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }

.core { list-style: none; margin: 0 0 48px; padding: 4px 28px; background: var(--white); border-radius: 16px; box-shadow: 0 1px 2px rgba(28, 28, 28, .06), 0 22px 48px -32px rgba(28, 28, 28, .35); }
.core-item { padding: 22px 0 22px 26px; position: relative; border-top: 1px solid var(--line); }
.core-item:first-child { border-top: 0; }
.core-item::before { content: ""; position: absolute; left: 0; top: 33px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.core-item p { margin: 6px 0 0; color: var(--muted); max-width: 54ch; }

.opt-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 680px) { .opt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.opt {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 22px 18px;
  border: 1px solid var(--beige-2);
  border-radius: 16px;
  background: transparent;
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.opt p { margin: 0; color: var(--muted); font-size: .92em; flex: 1; }
.opt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; min-height: 44px; }
.opt-state { font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.opt.is-on { background: var(--white); border-color: transparent; box-shadow: 0 1px 2px rgba(28, 28, 28, .06), 0 18px 40px -28px rgba(28, 28, 28, .4); }
.opt.is-on .opt-state { color: var(--ink); }

.switch { position: relative; flex: none; width: 56px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: var(--beige-2); cursor: pointer; }
.switch .knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(28, 28, 28, .25); transition: transform 220ms var(--ease-out); }
.switch[aria-checked="true"] { background: var(--gold); }
.switch[aria-checked="true"] .knob { transform: translateX(24px); }
.switch::before { content: ""; position: absolute; inset: -6px; }   /* 44px touch target */
.note { font-size: 16px; color: var(--muted); margin: 18px 0 0; }

/* ---------- dark bands ---------- */

.band { padding-block: clamp(64px, 9vw, 128px); }
.band-dark { background: var(--ink); color: var(--beige); }

/* ---------- try it: his phone, the three steps, her screen ---------- */

.try-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px; margin-bottom: 48px; }
.try-head .lead { margin-bottom: 0; }
.try-head .btn { margin-bottom: 4px; }

.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: center; }
.duo-phone { margin: 0; width: min(100%, var(--pw)); display: flex; flex-direction: column; align-items: center; }
.cap { font: 600 14px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--taupe); margin: 0 0 16px; }
.rail { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 640px; order: -1; }
.rail .h3 { font-size: clamp(21px, 1.5vw, 25px); }
.rail-step p { font-size: 18px; }
.rail-step { border-top-color: var(--line-dark); }
.rail-step:last-child { border-bottom: 1px solid var(--line-dark); }
.rail-step p { color: var(--taupe); }
.rail-step .num { border-color: rgba(229, 219, 201, .45); color: var(--beige); }
.rail-step.is-active .num { border-color: var(--gold); color: var(--gold); }
.rail-step.is-done .num { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.rail-step .btn { margin-top: 16px; }
.rail-step.is-back p[data-step3] { color: var(--gold); font-weight: 600; }

@media (min-width: 820px) {
  .duo { grid-template-columns: repeat(2, minmax(0, var(--pw))); justify-content: center; column-gap: clamp(32px, 5vw, 72px); row-gap: 48px; }
  .rail { grid-column: 1 / -1; grid-row: 1; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; }
  .rail-step { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; border-bottom: 1px solid var(--line-dark); }
  .duo-his { grid-row: 2; grid-column: 1; }
  .duo-hers { grid-row: 2; grid-column: 2; }
}
@media (min-width: 1280px) {
  .duo { grid-template-columns: minmax(0, var(--pw)) minmax(290px, 1fr) minmax(0, var(--pw)); column-gap: 44px; align-items: start; }
  .rail { grid-column: 2; grid-row: 1; display: block; padding-top: 34px; }
  .rail-step { border-bottom: 0; }
  .rail-step:last-child { border-bottom: 1px solid var(--line-dark); }
  .duo-his { grid-row: 1; grid-column: 1; }
  .duo-hers { grid-row: 1; grid-column: 3; }
}

/* The DM he gets in Circle */
.dm { margin-top: 16px; padding: 14px 16px 16px; border-radius: 16px; background: #2A2A2A; color: var(--paper); font-size: 17px; line-height: 1.5; animation: lp-in 320ms var(--ease-out) both; }
.dm-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dm-av { width: 34px; height: 34px; border-radius: 50%; background: var(--beige); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font: 600 14px/1 var(--display); flex: none; }
.dm-who { font-size: 15px; font-weight: 600; color: var(--paper); }
.dm-when { font-size: 14px; color: var(--taupe); margin-left: auto; }
.dm p { margin: 0; color: var(--paper); }
.dm .dm-link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.dm-none { color: var(--taupe); }
@keyframes lp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- privacy ---------- */

.priv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 36px; }
@media (min-width: 760px) { .priv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.priv-col { padding: 30px 30px 26px; border-radius: 16px; background: var(--white); box-shadow: 0 1px 2px rgba(28, 28, 28, .06), 0 22px 48px -32px rgba(28, 28, 28, .35); }
.priv-col .h3 { margin-bottom: 14px; }
.priv-yours { background: var(--ink); color: var(--beige); }
.priv-yours .h3 { color: var(--paper); }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding: 10px 0 10px 24px; border-top: 1px solid var(--line); }
.ticks li:first-child { border-top: 0; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.priv-yours .ticks li { border-top-color: var(--line-dark); }

/* ---------- coach: the morning email ---------- */

.coach-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 1024px) { .coach-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(48px, 6vw, 96px); align-items: start; } }
.coach-copy p { max-width: 54ch; margin: 0 0 1em; }
.needs { list-style: none; margin: 0 0 28px; padding: 0; }
.needs li { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line-dark); }
.needs li:last-child { border-bottom: 1px solid var(--line-dark); }
.needs p { margin: 0; color: var(--paper); }
.chip { justify-self: start; font: 600 14px/1.2 var(--sans); border-radius: 999px; padding: 7px 12px; white-space: nowrap; }
.chip-back { background: #fdf1cc; color: #7a5a00; }
.chip-quiet { background: #ffe7e1; color: #b33a1c; }
.quiet-note { color: var(--taupe); font-size: .9em; }
@media (max-width: 480px) { .needs li { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

.mail-card { background: var(--paper); color: var(--ink-2); border-radius: 18px; padding: 22px; box-shadow: 0 44px 80px -36px rgba(0, 0, 0, .7); }
.seg { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 999px; background: var(--beige); margin-bottom: 18px; }
.seg button { min-height: 40px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; font: 600 15px/1.2 var(--sans); color: var(--muted); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 3px rgba(28, 28, 28, .14); }
.mail { min-height: 220px; }
.mail-meta { font-size: 14px; color: var(--muted); line-height: 1.5; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mail-subj { font: 600 22px/1.25 var(--display); color: var(--ink); margin: 14px 0 12px; }
.mail-body { margin: 0; white-space: pre-wrap; font: 16px/1.6 var(--sans); color: var(--ink-2); max-height: 440px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--beige-2) transparent; }
.mail-empty { color: var(--muted); font-size: 17px; margin: 8px 0 0; }

/* ---------- members' close ---------- */

.start .lead { color: var(--ink-2); }

/* ---------- your call ---------- */

.call { background: var(--beige); color: var(--ink); }
.calls { list-style: none; margin: 8px 0 0; padding: 0; }
.call-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px 20px; align-items: start; padding: 28px 0; border-top: 1px solid rgba(28, 28, 28, .18); }
.call-item:last-child { border-bottom: 1px solid rgba(28, 28, 28, .18); }
.call-q { margin: 6px 0 0; font-size: clamp(20px, 1.45vw, 24px); line-height: 1.45; color: var(--ink); max-width: 46ch; }
.call-q p { margin: 0; }
.dm-quote { margin: 12px 0; font: italic 500 clamp(21px, 1.5vw, 25px)/1.45 var(--display); color: var(--ink); max-width: 44ch; }
.yn { grid-column: 2; display: flex; gap: 10px; flex-wrap: wrap; }
.yn button { min-height: 48px; min-width: 96px; padding: 10px 22px; border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 600 17px/1.2 var(--sans); cursor: pointer; }
.yn button:hover { background: rgba(28, 28, 28, .06); }
.yn button[data-answer="yes"][aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.yn button[data-answer="no"][aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (min-width: 900px) {
  .call-item { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; }
  .yn { grid-column: 3; justify-content: flex-end; }
}

/* ---------- footer ---------- */

.foot { padding: 36px 0 48px; }
.foot-in p { margin: 0; font-size: 16px; color: var(--muted); text-align: center; }

/* ---------- small screens ---------- */

@media (max-width: 600px) {
  .where { font-size: 17px; padding: 10px 16px; border-radius: 16px; }
  .core { padding: 4px 20px; }
  .priv-col { padding: 24px 22px 20px; }
  .mail-card { padding: 18px; }
  .step-row, .rail-step { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .jump, .show, .yn button, .seg button, .switch, .switch .knob, .opt, .num { transition: none; }
  .dm { animation: none; }
  .phone-wrap.is-flash::after { animation: none; opacity: 1; transform: none; }
  #phone-hero .lp-new { animation: none; outline-color: var(--gold); }
}