/* Atlas v2 · the pages beside the lander (campaign-atlas-growth-system 001b, Adam's copy of 2026-10-30): What is CGM?,
   Pricing and FAQ. They share the lander's header, footer and palette (v2.css, chrome.css) and its one family of dark
   glass cards; in place of the lander's living spine, a quiet lit line runs down the left with a pulse travelling it.
   Every page reads complete with scripts off: beyond chrome.js, FAQ and Pricing carry a few lines of their own, to fold
   answers and plans (011, 012), and the three of them share pages.js, their entrance; they fold and hide only once
   html.js is set. Every booking goes to the form on the home page (/v2/#book). */

body.page { background: radial-gradient(1100px 640px at 80% -10%, rgba(63,157,255,.14), transparent 62%), radial-gradient(900px 700px at -12% 38%, rgba(63,157,255,.06), transparent 62%), var(--midnight); }
/* the line down the left: where the lander's spine runs, so the pages feel like the same building */
body.page::before, body.page::after { content: ""; position: fixed; left: 40px; top: 0; width: 2px; margin-left: -1px; pointer-events: none; z-index: 0; }
body.page::before { bottom: 0; background: linear-gradient(180deg, rgba(127,220,255,0), rgba(127,220,255,.5) 16%, rgba(127,220,255,.22) 72%, rgba(127,220,255,.06));
  box-shadow: 0 0 10px rgba(127,220,255,.28); }
body.page::after { height: 160px; top: -160px; background: linear-gradient(180deg, rgba(233,251,255,0), rgba(233,251,255,.95), rgba(127,220,255,0));
  filter: drop-shadow(0 0 6px rgba(127,220,255,.9)); animation: pg-pulse 6.5s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes pg-pulse { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(calc(100vh + 160px)); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { body.page::after { display: none; } }
@media (max-width: 720px) { body.page::before, body.page::after { left: 13px; } }

.pg { position: relative; z-index: 1; }
.pg .wrap { padding-left: max(var(--gut), 72px); }
@media (max-width: 720px) { .pg .wrap { padding-left: 34px; padding-right: 16px; } }
.pg section { padding-block: clamp(44px, 5.4vw, 84px); }
.page footer .wrap { padding-left: max(var(--gut), 72px); }   /* (the footer lines up with the content, clear of the line) */
@media (max-width: 720px) { .page footer .wrap { padding-left: 34px; padding-right: 16px; } }
.pg h2 { font-size: clamp(30px, 3.2vw, 50px); }
.pg .sec-head { margin-bottom: clamp(30px, 3.6vw, 52px); }
.pg .sec-head .lede { max-width: 36em; }

/* the page's opening: a label, the headline, the plain answer */
.pg-hero { padding-block: clamp(64px, 8vw, 120px) clamp(28px, 4vw, 56px) !important; }
.pg-hero h1 { margin: 24px 0 26px; max-width: 18ch; font-size: clamp(40px, 5.2vw, 80px); line-height: 1.02; text-shadow: 0 0 40px rgba(127,220,255,.14); }
.pg-hero .lede { max-width: 34em; }
.pg-hero.tight h1 { max-width: 24ch; font-size: clamp(36px, 4.2vw, 64px); margin-block: 20px 20px; }
.pg-hero.tight { padding-bottom: 8px !important; }

/* the one family of dark glass cards */
.card { position: relative; border-radius: 22px; padding: clamp(24px, 2.4vw, 34px); border: 1px solid var(--line-hi);
  background: linear-gradient(160deg, rgba(36,49,68,.66), rgba(14,22,32,.66)); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(230,241,255,.07);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.card h3 { font-size: clamp(20px, 1.6vw, 24px); }
.card p { color: var(--muted); }
.k, .pg h2.k { font: 400 12px/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--light); text-shadow: none; margin: 0; }

/* the closing call: one line and the booking */
.cta-band { display: grid; justify-items: center; gap: 28px; text-align: center; padding: clamp(40px, 5vw, 72px) clamp(22px, 4vw, 60px); border-radius: 28px; border: 1px solid rgba(127,220,255,.36);
  background: radial-gradient(70% 120% at 50% 0%, rgba(63,157,255,.22), transparent 70%), linear-gradient(180deg, rgba(22,40,62,.85), rgba(10,18,28,.85));
  box-shadow: 0 0 70px -20px rgba(63,157,255,.5), inset 0 1px 0 rgba(230,241,255,.1); }
.cta-band h2 { max-width: 18em; }
.cta-band .btn { padding: 18px 28px; font-size: 16.5px; }
.cta-band .cta-note { font: 400 12px/1.5 var(--mono); color: var(--muted); }

/* ——— What is CGM? ——— */
/* the shift: the words on the left; on the right the tools that helped us remember, dim, and the step past them, lit */
.shift { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.shift .big { color: var(--head); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; letter-spacing: -.015em; margin-top: 22px; }
.eras { position: relative; display: grid; gap: 12px; margin: 0; padding: 0 0 0 30px; }
.eras::before { content: ""; position: absolute; left: 7px; top: 16px; bottom: 30px; width: 1px; background: linear-gradient(180deg, rgba(154,166,178,.25), rgba(127,220,255,.8)); }
.eras li { position: relative; list-style: none; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); background: rgba(59,72,90,.2); color: #7d8996;
  font: 400 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.eras li::before { content: ""; position: absolute; left: -28px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--midnight); border: 1px solid rgba(154,166,178,.45); }
/* (the year beside each era, so the timeline reads as one, Yusef 2026-11-01) */
.eras li { display: flex; align-items: baseline; gap: 16px; }
.eras .yr { flex: none; min-width: 5.2em; color: rgba(127,220,255,.6); font-size: 11px; letter-spacing: .14em; }
.eras li.now .yr { color: var(--light); }
.eras li.now { padding: 22px 22px; color: var(--light-hi); font-size: 15px; border-color: rgba(127,220,255,.55); background: linear-gradient(90deg, rgba(30,62,104,.85), rgba(14,28,46,.85));
  box-shadow: 0 0 40px -10px rgba(63,157,255,.7), inset 0 0 24px rgba(127,220,255,.06); }
.eras li.now::before { background: var(--light); border-color: var(--light-hi); box-shadow: 0 0 14px var(--light); }
@media (max-width: 900px) { .shift { grid-template-columns: 1fr; } }

/* the whole journey: six steps on one lit line */
.journey { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.journey::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: linear-gradient(90deg, rgba(127,220,255,.25), rgba(127,220,255,.9), rgba(127,220,255,.25));
  box-shadow: 0 0 8px rgba(127,220,255,.5); }
.journey li { position: relative; display: grid; align-content: start; gap: 12px; counter-increment: step; }
.journey li::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 50% 40%, #1c3654, #0b1622); border: 1px solid rgba(127,220,255,.6); color: var(--light-hi); font: 400 12px/1 var(--mono); letter-spacing: .06em;
  box-shadow: 0 0 18px rgba(63,157,255,.45); }
.journey li > span { display: block; color: var(--muted); font-size: 15.5px; line-height: 1.45; padding-right: 6px; }
.journey li b { display: block; color: var(--head); font-weight: 500; font-size: 20px; letter-spacing: -.015em; line-height: 1.2; margin-bottom: 4px; }
@media (max-width: 1000px) { .journey { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; } .journey::before { display: none; } }
@media (max-width: 600px) {
  .journey { grid-template-columns: 1fr; row-gap: 22px; padding-left: 0; }
  .journey::before { display: block; left: 21px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(127,220,255,.9), rgba(127,220,255,.25)); }
  .journey li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .journey li > span { padding-top: 2px; }
}

/* who does the work: three departments */
.depts3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.depts3 .card { display: grid; align-content: start; gap: 14px; }
.depts3 .card .k { color: var(--muted); }
.depts3 .card p { color: var(--ivory); font-size: 16.5px; line-height: 1.5; }
.depts3 .card p::first-letter { text-transform: uppercase; }
@media (max-width: 900px) { .depts3 { grid-template-columns: 1fr; } }

/* you stay in charge · works with your tools */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.duo .card { display: grid; gap: 14px; align-content: start; }
.duo .card p { color: var(--ivory); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; letter-spacing: -.01em; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; } }

/* CRM vs CGM: the home page's comparison, still and readable */
.vs { display: grid; gap: 10px; max-width: 1000px; }
.vs .row { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
.vs .cell { padding: 18px 22px; border-radius: 12px; font-size: 16.5px; line-height: 1.4; }
.vs .crm { background: rgba(59,72,90,.22); border: 1px solid var(--line); color: var(--muted); }
.vs .cgm { background: linear-gradient(90deg, rgba(26,36,51,.92), rgba(36,52,74,.92)); border: 1px solid rgba(127,220,255,.42); color: var(--ivory);
  box-shadow: 0 0 0 1px rgba(127,220,255,.1), 0 0 24px rgba(127,220,255,.1); }
.vs .arrow { text-align: center; color: var(--light); }
.vs .row.head .cell { background: none; border: 0; box-shadow: none; padding-block: 4px; font: 400 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.vs .row.head .cgm { color: var(--light); }
.vs + .vs-note { margin-top: 18px; font: 400 12px/1.5 var(--mono); color: var(--dim); max-width: 60em; }
@media (max-width: 720px) { .vs .row { grid-template-columns: 1fr; gap: 6px; } .vs .arrow { display: none; } .vs .row:not(.head) { margin-bottom: 10px; } .vs .row.head { display: none; }
  .vs .crm::before, .vs .cgm::before { display: block; margin-bottom: 6px; font: 400 10.5px/1 var(--mono); letter-spacing: .18em; color: var(--dim); }
  .vs .crm::before { content: "CRM"; } .vs .cgm::before { content: "CGM"; color: var(--light); } }

/* the goal, said once and large */
.goal { text-align: center; }
.goal p { margin: 0 auto; max-width: 20ch; color: var(--head); font-size: clamp(32px, 4.4vw, 68px); font-weight: 500; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; text-shadow: 0 0 40px rgba(127,220,255,.14); }

/* ——— Pricing (012, Adam's handoff of 2026-10-31). Three equal-height cards in one card system: Pro lit cyan, Executive
   warm. Then the compact comparison, the custom-build possibilities, the terms strip and one closing booking. On a phone
   the cards stack as summaries with one plan's outcomes open at a time, and the comparison reads plan by plan.
   One set of rows for all three cards (Yusef 2026-11-01: "a bit cluttered… uniform spacing and layout rules"): name and
   For line · rule · setup line · price · rule · the list's header · the list · button, each row the same height across
   the three (subgrid) and every space from one scale (8, 16, 24, 32). The setup line sits on the price, so a setup line
   that wraps (Executive's) leaves the prices level ——— */
.pg section.plans-sec { padding-top: clamp(28px, 3vw, 44px); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tier { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 0; padding: 32px 28px 28px; }
.tier header { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.tier .tier-name { font-size: clamp(24px, 1.9vw, 28px); letter-spacing: -.02em; }
.tier .tier-for { margin: 8px 0 0; color: var(--ivory); font-size: 15.5px; line-height: 1.5; }
.tier .setup { align-self: end; margin: 0; padding-top: 24px; font: 400 12.5px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted); }
.price { margin: 0; padding: 8px 0 24px; border-bottom: 1px solid var(--line); }
.price .mo { color: var(--head); font-size: 17px; letter-spacing: -.01em; }
.price .mo b { font-size: clamp(40px, 3.1vw, 46px); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--frost-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.outcomes { display: contents; }   /* (its header and list are rows of the card; on a phone it is the fold) */
.incl-head { margin: 0; padding: 24px 0 16px; color: var(--light); font: 400 12.5px/1.5 var(--mono); letter-spacing: .02em; }
.tier .btn { align-self: end; justify-content: center; width: 100%; margin-top: 32px; padding-block: 16px; font-size: 15px; }
.tier .btn.ghost { color: var(--ivory); }
.peek { display: none; }
/* each outcome: its name on one line in the heading colour, what it covers beneath in muted, beside one check */
.incl { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 16px; }
.incl li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.incl li::before { content: ""; grid-row: 1; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: rgba(127,220,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%237fdcff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.incl li b { color: var(--head); font-weight: 500; font-size: 15px; line-height: 1.35; letter-spacing: -.005em; }
.incl li span { grid-column: 2; display: block; margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.incl li span::first-letter { text-transform: uppercase; }
.incl .incl-note { display: block; margin-top: 4px; color: var(--muted); font: 400 12.5px/1.5 var(--mono); letter-spacing: .02em; }
.incl .incl-note::before { display: none; }   /* (not .note: the lander's notification class of that name waits unseen) */
.tier .setup .nw { white-space: nowrap; }
/* Pro: the strongest cyan; Executive: the warm border, same card */
.tier.pop { border-color: rgba(127,220,255,.7); background: radial-gradient(90% 50% at 50% 0%, rgba(63,157,255,.24), transparent 70%), linear-gradient(170deg, rgba(30,56,88,.92), rgba(12,22,36,.92));
  box-shadow: 0 0 0 1px rgba(127,220,255,.2), 0 0 70px -12px rgba(63,157,255,.6), 0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(233,251,255,.16); }
.tier.top-tier { border-color: rgba(200,169,120,.45); background: linear-gradient(170deg, rgba(40,40,44,.7), rgba(14,18,24,.75)); }
.tier.top-tier .tier-name { color: #f3e6cf; }
.tier.top-tier .price .mo b { background: linear-gradient(100deg, #f6ead2, #d9bd8c 60%, #c8a978); -webkit-background-clip: text; background-clip: text; }
.tier.top-tier .incl li::before { background-color: rgba(200,169,120,.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23d9bd8c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E"); }
.tier.top-tier .incl-head { color: #d9bd8c; }
@media (max-width: 1060px) { .tiers { grid-template-columns: minmax(0, 1fr); max-width: 620px; } .tier { grid-template-rows: none; grid-row: auto; } }

/* the compact comparison: eight rows in words */
.pg section.cmp-sec { padding-top: 0; }
.pg .k + .cmp-wrap { margin-top: 18px; }
.cmp-wrap.card { padding: 0; overflow: hidden; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.35; }
.cmp th, .cmp td { padding: 14px 22px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th { padding-block: 18px 14px; font: 400 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.cmp thead th.c-pro { color: var(--light); } .cmp thead th.c-exec { color: #d9bd8c; }
.cmp tbody th { width: 34%; color: var(--head); font-weight: 400; }
.cmp td { color: var(--ivory); }
.cmp .c-pro { background: rgba(127,220,255,.06); }
.cmp .no, .cmp-plan .no { color: var(--dim); }
.cmp-plans { display: none; }

/* what a custom build can include: six small tiles */
.cb { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cb .card { display: grid; align-content: start; gap: 8px; padding: 20px 22px; border-radius: 16px; }
.cb h3 { font-size: 18px; letter-spacing: -.015em; }
.cb p { margin: 0; font-size: 15px; line-height: 1.5; }

/* the terms strip */
.pg section.terms-sec { padding-top: 0; }
.terms-strip { margin: 0; padding: 18px 0; list-style: none; display: grid; gap: 8px; border-block: 1px solid var(--line); }
.terms-strip li { position: relative; padding-left: 20px; font: 400 12.5px/1.55 var(--mono); color: var(--muted); }
.terms-strip li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--light); }
.pg section.close-sec { padding-top: 0; }

@media (max-width: 900px) { .cb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  /* (a little more air, Yusef 2026-11-01: "a tad bit too vertically packed on mobile"); the same rows and scale */
  .tiers { gap: 24px; }
  .tier { padding: 28px 20px 24px; }
  .tier .tier-for { font-size: 15px; }
  .price .mo b { font-size: 40px; }
  /* one plan's outcomes open at a time (the script keeps it to one; with scripts off all show) */
  .js .peek { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 24px 0 0; border: 0; background: none; color: var(--light); cursor: pointer;
    font: 400 12px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-align: left; }
  .js .peek:focus-visible { outline: 2px solid var(--light-hi); outline-offset: 4px; border-radius: 4px; }
  .peek .pm { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-hi); }
  .peek .pm::before, .peek .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px; background: var(--light); }
  .peek .pm::after { transform: rotate(90deg); }
  .tier.open .peek .pm::after { display: none; }
  .outcomes { display: block; }
  .js .tier:not(.open) .outcomes { display: none; }
  .js .incl-head { padding-top: 20px; }
  .js .incl-head.base { display: none; }   /* (the fold's own label already says it) */
  .js .incl-head.base + .incl { margin-top: 20px; }
  .tier .btn { margin-top: 24px; }
  .tier.top-tier .peek { color: #d9bd8c; }
  /* the comparison, plan by plan */
  .cmp { display: none; }
  .cmp-wrap.card { padding: 6px 18px; }
  .cmp-plans { display: grid; }
  .cmp-plan { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .cmp-plan:last-child { border-bottom: 0; }
  .cmp-plan h3 { margin-bottom: 10px; font: 400 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
  .cmp-plan.c-pro h3 { color: var(--light); } .cmp-plan.c-exec h3 { color: #d9bd8c; }
  .cmp-plan dl { margin: 0; display: grid; gap: 10px; }
  .cmp-plan dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: baseline; }
  .cmp-plan dt { color: var(--ivory); font-size: 14px; line-height: 1.45; }
  .cmp-plan dd { margin: 0; color: var(--head); font-size: 13.5px; text-align: right; }
  .cb { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cb .card { gap: 8px; padding: 18px 18px; } .cb h3 { font-size: 16.5px; } .cb p { font-size: 14.5px; }
  .pg section.cb-sec { padding-block: 48px; }
}

/* ——— FAQ (011, Adam's handoff of 2026-10-31): a sticky context panel on 4 of 12 columns, the eight questions on the
   other 8. Each row is a heading holding a native button; its node on the list's rail brightens while it is open, and a
   faint line reaches from the node toward the answer. Answers open by height and opacity, rising 8px, in 280ms ——— */
.faq-sec { padding-top: clamp(48px, 6vw, 96px) !important; }
.faq-sec .wrap { max-width: 1680px; }   /* (wider than the site's 1360: on a big screen the questions sat in a narrow column, Yusef 2026-11-01) */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 2.6vw, 40px); align-items: start; }
.faq-ctx { grid-column: 1 / span 4; position: sticky; top: 112px; display: grid; gap: 22px; justify-items: start; }
.faq-ctx h1 { margin: 2px 0 0; font-size: clamp(34px, 3.1vw, 50px); line-height: 1.06; text-shadow: 0 0 40px rgba(127,220,255,.14); }
.faq-ctx .lede { font-size: clamp(17px, 1.25vw, 19px); color: var(--ivory); }
.faq-prompts { margin: 4px 0 0; padding: 18px 0 0; list-style: none; display: grid; gap: 12px; width: 100%; border-top: 1px solid var(--line); }
.faq-prompts li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 14px; align-items: center; font: 400 12px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--light); }
.faq-prompts li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--light); box-shadow: 0 0 10px rgba(127,220,255,.5); }
.faq-book { display: grid; gap: 14px; justify-items: start; margin-top: 8px; }
.faq-book .cta-note { margin: 0; max-width: 28em; font: 400 12px/1.55 var(--mono); color: var(--muted); }

/* the questions, on a quiet rail of their own */
.faq-list { grid-column: 5 / span 8; position: relative; display: grid; gap: 12px; padding-left: 34px; }
.faq-list::before { content: ""; position: absolute; left: 6px; top: 34px; bottom: 34px; width: 1px; background: linear-gradient(180deg, rgba(127,220,255,.4), rgba(127,220,255,.12)); }
.fq { position: relative; border-radius: 18px; border: 1px solid var(--line-hi); background: linear-gradient(160deg, rgba(36,49,68,.6), rgba(14,22,32,.6)); transition: border-color .28s, box-shadow .28s, background .28s; }
.fq::before { content: ""; position: absolute; left: -33px; top: 30px; width: 11px; height: 11px; border-radius: 50%; background: var(--midnight); border: 1px solid rgba(127,220,255,.4); transition: background .28s, box-shadow .28s, border-color .28s; }
.fq::after { content: ""; position: absolute; left: -22px; top: 35px; width: 22px; height: 1px; background: linear-gradient(90deg, rgba(127,220,255,.7), rgba(127,220,255,0)); opacity: 0; transition: opacity .28s; }
.fq:hover { border-color: rgba(127,220,255,.45); }
.fq.open { border-color: rgba(127,220,255,.55); background: linear-gradient(160deg, rgba(30,62,104,.55), rgba(14,28,46,.7)); box-shadow: 0 0 40px -16px rgba(63,157,255,.6); }
.fq.open::before { background: var(--light); border-color: var(--light-hi); box-shadow: 0 0 14px var(--light); }
.fq.open::after { opacity: 1; }
.fq h2 { margin: 0; font: inherit; letter-spacing: normal; text-shadow: none; }
.fq button { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; grid-template-areas: "n cat pm" "n q pm"; column-gap: 14px; row-gap: 8px; align-items: center; width: 100%;
  padding: 22px 24px; border: 0; border-radius: 18px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fq button:focus-visible { outline: 2px solid var(--light-hi); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(127,220,255,.18); }
.fq .n { grid-area: n; align-self: start; padding-top: 2px; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--light); }
.fq .cat { grid-area: cat; font: 400 11.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.fq .q { grid-area: q; color: var(--head); font-size: clamp(18px, 1.45vw, 21px); line-height: 1.3; letter-spacing: -.015em; }
.fq .pm { grid-area: pm; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-hi); }
.fq .pm::before, .fq .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--light); transition: opacity .28s; }
.fq .pm::after { transform: rotate(90deg); }
.fq.open .pm::after { opacity: 0; }
.fa > div { overflow: hidden; }
.fa p { margin: 0; padding: 0 24px 26px 68px; color: var(--ivory); font-size: 16.5px; line-height: 1.65; max-width: 62em; }
/* collapsed only with the script running; with scripts off every answer shows. Closed answers leave the tab order and
   the reading order (visibility), after their fold */
.js .fa { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(-8px); visibility: hidden;
  transition: grid-template-rows .28s cubic-bezier(.2,.7,.2,1), opacity .28s, transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s .28s; }
.js .fq.open .fa { grid-template-rows: 1fr; opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .js .fa, .js .fq.open .fa, .fq, .fq::before, .fq::after, .fq .pm::after { transition: none; } .js .fa { transform: none; } }
@media (max-width: 1000px) {
  .faq { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .faq-ctx, .faq-list { grid-column: 1; }
  .faq-ctx { position: static; }
  .faq-ctx h1 { font-size: clamp(34px, 6vw, 52px); max-width: 16ch; }
}
@media (max-width: 720px) {
  .faq-list { padding-left: 0; }
  .faq-list::before, .fq::before, .fq::after { display: none; }
  .fq button { grid-template-columns: minmax(0, 1fr) 30px; grid-template-areas: "cat pm" "q pm"; row-gap: 10px; padding: 22px 18px; }
  /* (more air between the lines and the blocks, Yusef 2026-11-01: "too vertically packed") */
  .faq { row-gap: 56px; } .faq-ctx { gap: 30px; } .faq-ctx .lede { line-height: 1.65; } .faq-prompts { gap: 18px; padding-top: 24px; }
  .faq-list { gap: 16px; } .fq .q { line-height: 1.35; }
  .fq .n { display: none; }
  .fq .q { font-size: 18px; }
  .fa p { padding: 0 18px 24px; font-size: 15.5px; line-height: 1.7; }
  .faq-book, .faq-book .btn { width: 100%; } .faq-book .btn { justify-content: center; }
}

/* ——— the entrance (Yusef 2026-11-01: "for these 3 pages on load/refresh animate in one section at a time dynamically
   with variety"): What is CGM?, Pricing and FAQ mark their blocks data-in="<kind>", and pages.js adds .in to each in
   reading order, setting --d, its start. Until then a block's parts wait unseen (only with html.js and motion allowed;
   with scripts off or reduced motion nothing here applies and every block simply shows). Each kind enters its own way,
   in the site's one easing, on transform, opacity and a little blur, never on layout. The waiting state is opacity
   alone; each animation fills backwards from its own first frame and then hands back to the page's own styles, so the
   hover and open transitions below are untouched ——— */
[data-in] { --d: 0ms; --e: cubic-bezier(.2,.7,.2,1); }
@keyframes pg-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes pg-lift { from { opacity: 0; transform: translateY(26px) scale(.985); } }
@keyframes pg-focus { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }
@keyframes pg-fade { from { opacity: 0; } }
@keyframes pg-from-left { from { opacity: 0; transform: translateX(-16px); } }
@keyframes pg-from-right { from { opacity: 0; transform: translateX(24px); } }
@keyframes pg-draw-x { from { transform: scaleX(0); } }
@keyframes pg-draw-y { from { transform: scaleY(0); } }
@keyframes pg-pop { from { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.18); } }
@keyframes pg-flip { from { opacity: 0; transform: perspective(900px) rotateY(-50deg); } }
@keyframes pg-settle { from { opacity: 0; transform: scale(.96); filter: blur(10px); } }
@keyframes pg-glow { 0% { box-shadow: 0 0 0 0 rgba(127,220,255,0); } 40% { box-shadow: 0 0 60px -6px rgba(63,157,255,.9), inset 0 0 24px rgba(127,220,255,.12); } }

@media (prefers-reduced-motion: no-preference) {
  /* waiting: each kind's moving parts, unseen */
  html.js [data-in="hero"]:not(.in) > *, html.js [data-in="hero"]:not(.in) .faq-prompts li,
  html.js [data-in="rise"]:not(.in), html.js [data-in="card"]:not(.in), html.js [data-in="tier"]:not(.in), html.js [data-in="q"]:not(.in),
  html.js [data-in="shift"]:not(.in) .k, html.js [data-in="shift"]:not(.in) .big, html.js [data-in="shift"]:not(.in) .eras::before, html.js [data-in="shift"]:not(.in) .eras li,
  html.js [data-in="journey"]:not(.in)::before, html.js [data-in="journey"]:not(.in) li,
  html.js [data-in="vs"]:not(.in) > *, html.js [data-in="goal"]:not(.in) p, html.js [data-in="cta"]:not(.in), html.js [data-in="cta"]:not(.in) > *,
  html.js [data-in="rail"]:not(.in)::before { opacity: 0; }

  /* a page's opening: the label's line draws out and its words follow, the headline rises out of a blur, then the
     plain answer; on the FAQ the three prompts step in from the left, then the booking */
  [data-in="hero"].in > * { animation: pg-rise .7s var(--e) backwards; animation-delay: calc(var(--d) + 220ms); }
  [data-in="hero"].in .eyebrow { animation: pg-fade .5s ease backwards; animation-delay: calc(var(--d) + 120ms); }
  [data-in="hero"].in .eyebrow::before { transform-origin: left center; animation: pg-draw-x .45s var(--e) backwards; animation-delay: var(--d); }
  [data-in="hero"].in h1 { animation: pg-focus .8s var(--e) backwards; animation-delay: calc(var(--d) + 80ms); }
  [data-in="hero"].in .faq-prompts { animation: pg-fade .4s ease backwards; animation-delay: calc(var(--d) + 300ms); }
  [data-in="hero"].in .faq-prompts li { animation: pg-from-left .5s var(--e) backwards; }
  [data-in="hero"].in .faq-prompts li:nth-child(1) { animation-delay: calc(var(--d) + 340ms); }
  [data-in="hero"].in .faq-prompts li:nth-child(2) { animation-delay: calc(var(--d) + 410ms); }
  [data-in="hero"].in .faq-prompts li:nth-child(3) { animation-delay: calc(var(--d) + 480ms); }
  [data-in="hero"].in .faq-book { animation-delay: calc(var(--d) + 520ms); }

  /* a heading, a table, a strip: rises */
  [data-in="rise"].in { animation: pg-rise .7s var(--e) backwards; animation-delay: var(--d); }
  /* a card in a row: lifts, a little larger as it lands */
  [data-in="card"].in { animation: pg-lift .75s var(--e) backwards; animation-delay: var(--d); }

  /* What is CGM?'s shift: the words, then the timeline draws down and lights each era in turn, today's last and glowing */
  [data-in="shift"].in .k { animation: pg-rise .6s var(--e) backwards; animation-delay: var(--d); }
  [data-in="shift"].in .big { animation: pg-focus .8s var(--e) backwards; animation-delay: calc(var(--d) + 90ms); }
  [data-in="shift"].in .eras::before { transform-origin: top center; animation: pg-draw-y .7s var(--e) backwards; animation-delay: calc(var(--d) + 160ms); }
  [data-in="shift"].in .eras li { animation: pg-from-left .55s var(--e) backwards; }
  [data-in="shift"].in .eras li::before { animation: pg-pop .45s var(--e) backwards; }
  [data-in="shift"].in .eras li:nth-child(1), [data-in="shift"].in .eras li:nth-child(1)::before { animation-delay: calc(var(--d) + 220ms); }
  [data-in="shift"].in .eras li:nth-child(2), [data-in="shift"].in .eras li:nth-child(2)::before { animation-delay: calc(var(--d) + 320ms); }
  [data-in="shift"].in .eras li:nth-child(3), [data-in="shift"].in .eras li:nth-child(3)::before { animation-delay: calc(var(--d) + 420ms); }
  [data-in="shift"].in .eras li:nth-child(4), [data-in="shift"].in .eras li:nth-child(4)::before { animation-delay: calc(var(--d) + 520ms); }
  [data-in="shift"].in .eras li.now { animation: pg-from-left .55s var(--e) backwards, pg-glow 1.1s ease-out backwards; animation-delay: calc(var(--d) + 640ms), calc(var(--d) + 800ms); }
  [data-in="shift"].in .eras li.now::before { animation-delay: calc(var(--d) + 640ms); }

  /* the journey: its line draws across, then each step's number pops on and its words follow */
  [data-in="journey"].in::before { transform-origin: left center; animation: pg-draw-x .8s var(--e) backwards; animation-delay: var(--d); }
  [data-in="journey"].in li { animation: pg-rise .6s var(--e) backwards; }
  [data-in="journey"].in li::before { animation: pg-pop .45s var(--e) backwards; animation-delay: inherit; }
  [data-in="journey"].in li:nth-child(1) { animation-delay: calc(var(--d) + 100ms); }
  [data-in="journey"].in li:nth-child(2) { animation-delay: calc(var(--d) + 190ms); }
  [data-in="journey"].in li:nth-child(3) { animation-delay: calc(var(--d) + 280ms); }
  [data-in="journey"].in li:nth-child(4) { animation-delay: calc(var(--d) + 370ms); }
  [data-in="journey"].in li:nth-child(5) { animation-delay: calc(var(--d) + 460ms); }
  [data-in="journey"].in li:nth-child(6) { animation-delay: calc(var(--d) + 550ms); }

  /* CRM against CGM, row by row: the CRM side fades up, the arrow follows, the CGM side swings open from its left edge */
  [data-in="vs"].in .crm { animation: pg-fade .5s ease backwards; animation-delay: var(--d); }
  [data-in="vs"].in .arrow { animation: pg-from-left .45s var(--e) backwards; animation-delay: calc(var(--d) + 120ms); }
  [data-in="vs"].in .cgm { transform-origin: left center; animation: pg-flip .7s var(--e) backwards; animation-delay: calc(var(--d) + 200ms); }

  /* the goal: comes into focus */
  [data-in="goal"].in p { animation: pg-settle 1s var(--e) backwards; animation-delay: var(--d); }

  /* the closing call: the band settles, then its line, the button and the note */
  [data-in="cta"].in { animation: pg-lift .7s var(--e) backwards; animation-delay: var(--d); }
  [data-in="cta"].in > * { animation: pg-rise .6s var(--e) backwards; }
  [data-in="cta"].in > :nth-child(1) { animation-delay: calc(var(--d) + 140ms); }
  [data-in="cta"].in > :nth-child(2) { animation-delay: calc(var(--d) + 240ms); }
  [data-in="cta"].in > :nth-child(3) { animation-delay: calc(var(--d) + 320ms); }

  /* a price card: rises, its rules draw across, and its price counts up (pages.js) */
  [data-in="tier"].in { animation: pg-lift .8s var(--e) backwards; animation-delay: var(--d); }
  [data-in="tier"].in header, [data-in="tier"].in .price { animation: pg-fade .5s ease backwards; animation-delay: calc(var(--d) + 120ms); }
  [data-in="tier"].in .incl li { animation: pg-rise .5s var(--e) backwards; animation-delay: calc(var(--d) + 260ms); }

  /* the FAQ: its rail draws down, and each question slides in from the right as its node pops on */
  [data-in="rail"].in::before { transform-origin: top center; animation: pg-draw-y 1s var(--e) backwards; animation-delay: var(--d); }
  [data-in="q"].in { animation: pg-from-right .6s var(--e) backwards; animation-delay: var(--d); }
  [data-in="q"].in::before { animation: pg-pop .45s var(--e) backwards; animation-delay: calc(var(--d) + 120ms); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  [data-in="journey"].in::before { transform-origin: top center; animation-name: pg-draw-y; }   /* (the phone's line runs down) */
}

/* ——— Privacy and Terms (001c): plain reading pages in one column; the "in short" box uses the same glass card ——— */
.legal { max-width: 46em; }
.pg .legal h2 { margin: 48px 0 14px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; }
.pg .legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--ivory); font-size: 16.5px; line-height: 1.65; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 6px; }
.legal li::marker { color: var(--light); }
.legal b { color: var(--head); font-weight: 500; }
.legal a { color: var(--light); text-underline-offset: 3px; }
.legal .card { margin-bottom: 48px; }
.legal .card ul { margin: 12px 0 0; }
.legal-date { margin-top: 18px; font: 400 12.5px/1.5 var(--mono); letter-spacing: .06em; color: var(--muted); }
@media (max-width: 720px) { .legal p, .legal li { font-size: 15.5px; } .pg .legal h2 { margin-top: 38px; } }

/* ——— Meet the Founders, the written page (013 "Now"): Adam's story in one reading column, his chapters marked warm
   and Yusef's cyan (the storyboard's two paths), then the two founder cards, what they believe and the closing. Every
   placeholder is a dashed amber box, so it can never pass for copy ——— */
.fd .pg-hero h1 { max-width: 16ch; }
.fd-began { margin: 22px 0 0; color: var(--light); font: 400 13px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.fd-story { display: grid; gap: clamp(44px, 5vw, 72px); padding-block: clamp(24px, 3vw, 44px) clamp(44px, 5.4vw, 84px); }
.pg section.fd-ch { position: relative; max-width: 44em; display: grid; gap: 16px; padding: 0 0 0 26px; }
.fd-ch::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; }
.fd-ch.adam::before { background: linear-gradient(180deg, #f6ead2, rgba(200,169,120,.15)); box-shadow: 0 0 10px rgba(217,189,140,.35); }
.fd-ch.yusef::before { background: linear-gradient(180deg, var(--light-hi), rgba(127,220,255,.15)); box-shadow: 0 0 10px rgba(127,220,255,.4); }
.fd-ch.both::before { background: linear-gradient(180deg, #f6ead2, var(--light) 55%, rgba(127,220,255,.15)); box-shadow: 0 0 10px rgba(127,220,255,.3); }
.fd-ch.adam .k { color: #d9bd8c; }
.fd-ch p { margin: 0; color: var(--ivory); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; }
.fd-ch p.fd-beat { color: var(--head); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; letter-spacing: -.015em; }
.fd-ch p.fd-q { color: var(--head); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; letter-spacing: -.015em; }
.fd-ch p.fd-line { color: var(--head); font-size: clamp(22px, 2.2vw, 32px); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
/* the paths meet: Adam's line warm on the left, Yusef's cyan on the right */
.fd-pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; margin: 4px 0; }
.fd-pairs p { padding: 14px 18px; border-radius: 12px; font-size: 16px; line-height: 1.45; }
.fd-pairs .a { border: 1px solid rgba(200,169,120,.4); background: rgba(200,169,120,.07); color: #f3e6cf; }
.fd-pairs .y { border: 1px solid rgba(127,220,255,.4); background: rgba(127,220,255,.06); color: var(--light-hi); }
/* the two founders */
.pg section.fd-meet-sec { padding-top: 0; }
.fd-meet { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fd-card { display: grid; align-content: start; gap: 12px; }
.fd-card h3 { font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -.025em; }
.fd-card .fd-title { margin: 0; font: 400 12.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fd-card p:not(.fd-title) { margin: 6px 0 0; color: var(--ivory); font-size: 16.5px; line-height: 1.6; }
.fd-card.adam { border-color: rgba(200,169,120,.45); background: linear-gradient(170deg, rgba(40,40,44,.7), rgba(14,18,24,.75)); }
.fd-card.adam .k { color: #d9bd8c; }
.fd-card.yusef { border-color: rgba(127,220,255,.5); }
/* what they believe */
.fd-believe { margin: 18px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.fd-believe li { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line-hi); background: rgba(26,36,51,.5); color: var(--head); font-size: 16.5px; line-height: 1.45; }
.pg section.fd-close-sec { padding-top: 0; }
.fd-closing { margin: 0; max-width: 32em; color: var(--head); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; letter-spacing: -.015em; }
/* a placeholder, waiting on Yusef's own approved words: never publish one */
.ph { display: inline-block; padding: 6px 12px; border: 1.5px dashed #e8a33d; border-radius: 8px; background: rgba(232,163,61,.1); color: #f2c27a !important; font-family: var(--mono) !important; font-size: 14px !important; letter-spacing: .02em; line-height: 1.5 !important; }
p.ph { display: block; }
p.ph::before { content: "PLACEHOLDER · "; color: #e8a33d; }
@media (max-width: 900px) { .fd-meet { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .fd-pairs { grid-template-columns: 1fr; gap: 8px; } .fd-pairs .y { margin-bottom: 10px; } .pg section.fd-ch { padding-left: 18px; } }