/* Home, section 9 (pricing): Tyler's pick B (10/6, "the two sections design"), built from the ?pricing=b mockup and
   polished on 10/6 evening (Tyler: title spacing, the care every membership includes, Plus as a proper section, one
   screen each). Two sections, both direct children of main:
     #membership  light: "Memberships with a wellness budget", the household switch, the care every membership
                  includes (urgent care, virtual primary care, root-cause visits, the care team, the app), then
                  Emerald, Sapphire and Onyx
     #plus        dark, its own section: "Gabriel Plus", the Plus card beside the categories it prices, then the Free
                  line, two links and the fine print
   Each fills one screen under the fixed header (68px) and lands exactly from a link or anchor (the header's glass
   sits over the section's own top padding, so nothing above shows through it). No scroll snapping: tested 10/6,
   Chrome's proximity snap pulled a mouse wheel back to the section start for every scroll under about 300px, so a
   reader scrolling slowly could not leave #membership. The one-screen sizing stays.
   Layers on style.css (the plan cards .pl-card, .pl-crown, .pl-price, .pl-budget and the switch .pl-switch).
   The household switch and its prices: page.js. Phones: each budget plan is one tappable line, and one closed list
   says what each adds. The mockup files (pricing-mock.js/.css) stay on disk as reference only; nothing loads them. */

/* ---------- Both sections: one screen each, the content centred under the header ---------- */
.plans.pm-sec{
  --pm-nav:calc(68px + env(safe-area-inset-top,0px)); /* the fixed header */
  /* Spacing follows the screen's height: the full rhythm from about 900px tall, compact by 800px */
  --pm-top:clamp(18px,calc(22vh - 162px),44px);      /* header to eyebrow: 36px at 900 */
  --pm-bottom:clamp(14px,calc(13vh - 90px),36px);
  --pm-k:clamp(12px,calc(4vh - 20px),16px);          /* eyebrow to title: 16px */
  --pm-t:clamp(12px,calc(6vh - 36px),18px);          /* title to intro: 18px */
  --pm-gap:clamp(22px,calc(14vh - 90px),40px);       /* intro to the next block: 36px */
  --pm-gap2:clamp(16px,calc(12vh - 82px),32px);      /* between the blocks below: 26px */
  display:flex;flex-direction:column;justify-content:center;
  min-height:100vh;min-height:100svh;
  padding:calc(var(--pm-nav) + var(--pm-top)) 0 var(--pm-bottom);
  scroll-margin-top:0
}
.pm-sec.pm-b1+.pm-sec.pm-b2{border-top:0}
.pm-sec.is-still .pl-knob{transition:none}

/* The title block: eyebrow, title, one line; on #membership the household switch sits at the right, its bottom on
   the intro line, its right edge on the cards' right edge */
.pm-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:40px;margin-bottom:var(--pm-gap)}
.pm-head-t{display:flex;flex-direction:column;min-width:0}
.pm-sec .pm-k{margin:0 0 var(--pm-k)}
.pm-h{margin:0 0 var(--pm-t);font-size:clamp(30px,2.9vw,42px);font-weight:300;letter-spacing:-.035em;line-height:1.06;text-wrap:balance}
.pm-ctx{margin:0;max-width:46em;font-size:var(--fs-17);line-height:1.5;color:var(--ash);text-wrap:pretty}
.pm-hh-wrap{display:flex;align-items:center;gap:14px}
.pm-hh-k{font-size:var(--fs-15);color:var(--ash);white-space:nowrap}

/* Arrow links: never underlined; the arrow nudges on hover. The keyboard focus ring hugs the words inside the link's
   own 44px box (it was drawn around the whole box, 6px under the Plus card, and touched it), and only for keyboard
   focus: Chrome turns a clicked link's ring on at the next key press, even Shift or Cmd (a screenshot shortcut). */
.pm-arrow{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-15);color:var(--emerald);text-decoration:none;white-space:nowrap}
.pm-arrow>span{display:inline-block;transition:transform .18s var(--ease-out)}
.pm-arrow:hover>span{transform:translateX(4px)}
.pm-arrow:focus-visible{outline:0}
.pm-arrow:focus-visible::before{content:"";position:absolute;inset:8px -6px;border-radius:8px;outline:2px solid currentColor;pointer-events:none}

/* ---------- #membership: the care every membership includes ---------- */
.pm-every{margin-bottom:var(--pm-gap2)}
.pm-every-k{display:flex;align-items:center;gap:16px;margin:0 0 clamp(10px,calc(6vh - 38px),16px);font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--emerald)}
.pm-every-k::after{content:"";flex:1;height:1px;background:rgba(37,42,43,.12)}
.pm-every-list{display:grid;grid-template-columns:1fr 1.12fr 1.36fr 1fr 1.12fr;gap:16px 24px}/* wider where the words are longer */
.pm-every-list li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:start}
.pm-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(54,94,76,.09);color:var(--emerald)}
.pm-ic svg{width:20px;height:20px}
.pm-every-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pm-every-t b{font-size:var(--fs-15);font-weight:500;line-height:1.3;letter-spacing:-.005em;color:var(--ink)}
.pm-every-s{font-size:var(--fs-13);line-height:1.45;color:var(--ash)}

/* ---------- #membership: the cards (plan header, price, budget, what each adds, one button) ---------- */
.pm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pm-card .pl-crown{height:clamp(68px,calc(16vh - 60px),84px);padding:12px 20px}/* 68px by 800 tall: name and line still clear */
.pm-card .pl-mark{top:12px;left:20px}
.pm-card .pl-rec{top:12px;right:12px;padding:6px 10px}
.pm-card .pl-name{font-size:20px}
.pm-card .pl-cap{margin-top:6px}
.pm-body{display:flex;flex-direction:column;gap:clamp(8px,calc(4vh - 24px),12px);flex:1;padding:clamp(12px,calc(6vh - 36px),18px) 20px clamp(14px,calc(6vh - 34px),20px)}
.pm-card .pl-price b{font-size:clamp(32px,2.8vw,40px)}
.pm-row-budget{display:none}
.pm-card .pl-budget{margin:0;padding:clamp(8px,calc(4vh - 24px),12px) 14px}
.pm-card .pl-budget-num{margin-top:4px}
.pm-card .pl-budget-num b{font-size:22px}
.pm-inc-k{font-size:var(--fs-13);color:var(--ink)}
.pm-checks li{position:relative;margin-top:clamp(3px,calc(3vh - 21px),6px);padding-left:22px;font-size:var(--fs-15);line-height:1.45;color:var(--ash)}
.pm-checks li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;border-left:1.5px solid var(--emerald);border-bottom:1.5px solid var(--emerald);transform:rotate(-45deg)}
.pm-join{margin-top:auto;width:100%;height:clamp(40px,calc(6vh - 8px),46px)}
.pm-incs{display:none}
.pm-term{margin:clamp(8px,calc(6vh - 40px),14px) 0 0;font-size:var(--fs-13);color:var(--ash)}

/* ---------- #plus: its own dark section ---------- */
.pm-sec.pm-b2{border-bottom:1px solid rgba(240,243,241,.06)}/* the FAQ below is dark too */
.pm-b2 .pm-ctx{max-width:60em;color:var(--silver)}
.pm-b2 :focus-visible{outline-color:var(--jade)}
.pm-b2 .pm-arrow{color:var(--jade)}
.pm-plus-row{display:grid;grid-template-columns:minmax(320px,400px) minmax(0,1fr);gap:clamp(32px,4.4vw,64px);align-items:stretch}

/* The Plus card: the brushed-silver header, price, what it includes, Join, and the way to the Plus page */
.pm-plus{background:rgba(240,243,241,.04);border-color:var(--line);color:var(--pearl)}
/* Gabriel Plus wears graphite with jade, as on /plus (Tyler 2026-10-11: pearl Ask Gabriel, silver Core, graphite and jade Plus) */
.pm-plus .pl-crown{color:var(--pearl);--tint:linear-gradient(110deg,#0f1719eb,#34423f99 55%,#0f1719e0);border-top:3px solid #93bba9}
.pm-plus .pl-crown::before{filter:saturate(0) contrast(1.3) brightness(.55)}
.pm-plus .pl-crown .pl-mark{color:#93bba9}
.pm-plus .metal-light{opacity:.35}
.pm-plus .pm-buy{display:flex;flex-direction:column;gap:6px}
.pm-plus .pl-price span,.pm-fee{font-size:var(--fs-15);color:var(--silver)}
.pm-plus .pm-inc-k{color:var(--pearl)}
.pm-plus .pm-checks li{color:var(--silver)}
.pm-plus .pm-checks li::before{border-color:var(--jade)}
.pm-plus .pm-join{margin-top:auto}
.pm-plus .pm-more{align-self:center;margin:-2px 0 -10px}

/* The categories it prices: four photo tiles with room between them, then one plain arrow link */
.pm-tiles{display:flex;flex-direction:column;min-width:0}
.pm-tiles-k{margin:0 0 clamp(10px,calc(6vh - 38px),16px);font-family:var(--mono);font-weight:500;font-size:var(--fs-12);letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.pm-tile-row{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;min-height:0}
.pm-tile-row li{position:relative;display:flex;min-width:0;min-height:0}
.pm-tile-img{position:relative;display:block;flex:1;min-height:160px;overflow:hidden;border-radius:14px;background:var(--obsidian)}
.pm-tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
.pm-tile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,18,0) 46%,rgba(12,16,18,.78) 100%)}
.pm-tile-t{position:absolute;left:14px;right:12px;bottom:12px;font-size:var(--fs-15);line-height:1.25;letter-spacing:-.01em;color:var(--pearl);text-wrap:balance}
.pm-explore{align-self:flex-start;margin:clamp(4px,1vh,10px) 0 -10px}

/* The Free line, the two links, then the fine print, dimmed */
.pm-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 32px;margin-top:var(--pm-gap);padding-top:clamp(10px,1.8vh,18px);border-top:1px solid rgba(240,243,241,.12)}
.pm-free{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:0;font-size:var(--fs-15);color:var(--silver)}
.pm-free b{font-size:var(--fs-h3);font-weight:300;letter-spacing:-.03em;color:var(--pearl);font-variant-numeric:tabular-nums}
.pm-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 28px;margin:0}
.plans .pm-fine{grid-column:1/-1;max-width:none;margin:clamp(4px,1vh,10px) 0 0;font-size:var(--fs-12);line-height:1.55;color:var(--dim)}
.pm-incs-note{display:none}

/* Narrower desktops (861 to 1100px): the Recommended pill keeps clear of the plan name; the tiles go two by two */
@media (max-width:1100px) and (min-width:861px){
  .pm-every-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px}
  .pm-tile-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .pm-tile-img{min-height:110px}
}
@media (max-width:1080px) and (min-width:861px){.pm-rec-more{display:none}}
@media (max-width:960px) and (min-width:861px){.pm-card .pl-rec{padding:5px 8px;font-size:11px}.pm-cards .pl-name{font-size:18px;letter-spacing:.14em}}

/* ---------- Tablets and phones ---------- */
@media (max-width:860px){
  .plans.pm-sec{--pm-top:clamp(10px,1.7vh,18px);--pm-bottom:clamp(10px,1.5vh,16px);--pm-k:10px;--pm-t:10px;--pm-gap:clamp(14px,2.2vh,22px);--pm-gap2:clamp(12px,2vh,18px)}
  .pm-head{display:flex;flex-direction:column;align-items:stretch}
  .pm-hh-wrap{display:block;margin-top:clamp(12px,2vh,18px)}
  .pm-hh-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pm-sec .pl-switch{display:flex}
  .pm-sec .pl-switch button{flex:1;padding:0 6px}
  .pm-h{font-size:28px}
  .pm-ctx{font-size:var(--fs-15)}
  .pm-d{display:none}

  /* The included care: one short line each, the icon beside it */
  .pm-every-k{margin-bottom:10px}
  .pm-every-list{grid-template-columns:minmax(0,1fr);gap:7px}
  .pm-every-list li{grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:center}
  .pm-ic{width:28px;height:28px;border-radius:8px}
  .pm-ic svg{width:17px;height:17px}
  .pm-every-t{gap:1px;padding-top:0}
  .pm-every-t b{font-size:14px;line-height:1.3}

  /* Budget plans: each one tappable line */
  .pm-cards{grid-template-columns:minmax(0,1fr);gap:8px}
  .pm-cards .pm-card{display:grid;grid-template-columns:104px minmax(0,1fr) auto;grid-template-areas:"crown buy join" "crown inc inc";position:relative;border-radius:14px}
  .pm-card .pl-crown{grid-area:crown;height:auto;min-height:60px;padding:9px 12px}
  .pm-card .pl-mark{display:none}
  .pm-card .pl-name{font-size:13px;letter-spacing:.16em}
  .pm-card .pl-cap{margin-top:4px;font-size:11px}
  .pm-card .pl-rec{position:static;align-self:flex-start;order:-1;margin-bottom:auto;padding:4px 7px;font-size:10px}
  .pm-rec-more{display:none}
  .pm-body{display:contents}
  .pm-buy{grid-area:buy;align-self:center;min-width:0;padding:8px 4px 8px 14px}
  .pm-card .pl-price{flex-wrap:wrap;gap:0 6px}
  .pm-card .pl-price b{font-size:26px}
  .pm-card .pl-price span{font-size:var(--fs-13);white-space:nowrap}/* "/ month" never breaks in two; if it can't fit, it goes under the price */
  .pm-row-budget{display:block;margin-top:3px;font-size:var(--fs-13);color:var(--ash)}
  .pm-row-budget b{font-weight:500;color:var(--emerald)}
  .pm-card .pl-budget,.pm-cards .pm-inc{display:none}
  .pm-join{grid-area:join;align-self:center;width:auto;height:40px;margin:0 12px 0 4px;padding:0 16px}
  .pm-join:active{transform:none}
  .pm-cards .pm-join::after{content:"";position:absolute;inset:0;border-radius:inherit}
  .pm-vh-m{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pm-incs{display:block;margin-top:4px}
  .pm-incs summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none;font-size:var(--fs-15);color:var(--ink)}
  .pm-incs summary::-webkit-details-marker{display:none}
  .pm-incs summary::after{content:"+";font-size:20px;line-height:1;color:var(--ash)}
  .pm-incs[open] summary::after{content:"–"}
  .pm-incs-in{display:grid;gap:12px;padding:2px 0 10px}
  .pm-incs-n{font-size:var(--fs-13);font-weight:500;color:var(--ink)}
  .pm-incs .pm-checks li{margin-top:4px;font-size:var(--fs-13)}
  .pm-incs-note{display:block;font-size:var(--fs-12);color:var(--ash)}
  .pm-term{margin-top:2px}
  .pm-d-only{display:none}

  /* Plus: the header, then the card (silver header, price and Join, what it includes, the Plus page link), then the
     four tiles two by two (all in view: no hidden swipe row), then the links */
  .pm-plus-row{display:flex;flex-direction:column;gap:clamp(18px,3vh,26px)}
  .pm-plus{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"crown crown" "buy join" "inc inc" "more more";border-radius:14px}
  .pm-plus .pl-crown{grid-area:crown;height:auto;min-height:44px;padding:9px 14px;justify-content:center}
  .pm-plus .pm-buy{grid-area:buy;gap:2px;padding:12px 4px 8px 14px}
  .pm-plus .pl-price span,.pm-fee{font-size:var(--fs-13)}
  .pm-plus .pm-join{margin:0 12px 0 4px}
  .pm-plus .pm-inc{grid-area:inc;padding:2px 14px 0}
  .pm-plus .pm-inc-k{display:none}
  .pm-plus .pm-checks li{margin-top:3px;font-size:14px}
  .pm-plus .pm-more{grid-area:more;justify-self:start;margin:2px 14px 2px;font-size:14px}
  .pm-tiles-k{margin-bottom:10px}
  .pm-tile-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pm-tile-img{flex:1;aspect-ratio:3/2;min-height:0;border-radius:12px}
  .pm-tile-t{left:12px;right:10px;bottom:10px;font-size:14px}
  .pm-explore{margin:4px 0 -10px;font-size:14px}
  /* The Free line and the links: one short paragraph, one row of links */
  .pm-foot{display:block;margin-top:clamp(18px,3vh,26px);padding-top:10px}
  .pm-free{display:block;font-size:14px;line-height:1.5}
  .pm-free b{margin-right:4px;font-size:18px}
  .pm-free .pm-arrow{display:inline;min-height:0;font-weight:500;white-space:normal}/* inside the sentence: weight, not an underline, sets it apart */
  .pm-links{justify-content:flex-start;gap:0 18px}
  .pm-arrow{font-size:14px}
  .plans .pm-fine{margin-top:2px}
}
/* Short phones (about 740px tall or less, like 375x667): the included care goes two by two, the plan rows and tiles
   get smaller, so #membership still fits one screen */
.pm-hp2{display:none}
@media (max-width:860px) and (max-height:740px){
  .pm-h{font-size:26px}
  .pm-every-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
  .pm-every-list li{grid-template-columns:24px minmax(0,1fr);column-gap:8px;align-items:start}
  .pm-ic{width:24px;height:24px;border-radius:7px}
  .pm-ic svg{width:15px;height:15px}
  .pm-every-t b{font-size:13px;line-height:1.25}
  .pm-every-s{font-size:12px;line-height:1.3}
  .pm-hp{display:none}
  .pm-hp2{display:inline}
  .pm-cards .pm-card .pl-crown{min-height:54px;padding:7px 12px}
  .pm-cards .pm-buy{padding-block:5px}
  .pm-cards .pm-card .pl-price b{font-size:24px}
  .pm-incs summary{min-height:40px}
  .pm-tile-img{aspect-ratio:2/1}
  .pm-tile-t{left:10px;right:8px;bottom:8px;font-size:13px}
}
/* Small phones: a household price with four digits stays on one line, and the switch labels stay on one line */
@media (max-width:380px){.pm-card .pl-price b{font-size:24px}.pm-sec .pl-switch button{padding:0 4px;font-size:14px;white-space:nowrap}.pm-plus .pm-checks li{font-size:13.5px}.pm-links{gap:0 14px}.pm-links .pm-arrow{font-size:13px}}
@media (max-width:360px){
  .pm-cards .pm-card{grid-template-columns:92px minmax(0,1fr) auto}/* the budget rows only: Plus keeps its own two columns */
  .pm-buy{padding-left:10px}
  .pm-join{margin-right:10px;padding:0 14px}
  .pm-sec .pl-switch button{flex:1 1 auto;padding:0 6px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.pm-arrow>span{transition:none}.pm-sec .pl-knob{transition:none}}
/* 10/6 late (Tyler): the "included in every membership" row and the Plus foot are gone; the term line carries the link */
.pm-term .pm-arrow{margin-left:14px;white-space:nowrap}
.pm-fee[hidden]{display:none}
/* 10/7 (Tyler): "Compare every membership" was nearly invisible; it is now an outline button beside the billing line (stacked on phones) */
.pm-term-row{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin:clamp(10px,calc(6vh - 38px),18px) 0 0}
.pm-term-row .pm-term{margin:0}
.pm-compare{height:44px;padding:0 20px;font-size:var(--fs-15);white-space:nowrap}
@media (max-width:760px){.pm-term-row{flex-direction:column;align-items:stretch}.pm-compare{justify-content:center}}
/* 10/7 (Tyler): round-17 product photos in the Plus tiles. Desktop keeps the tall tiles with the caption on the photo; at 1100px and below (the 2x2 tiles and phones) the 3:2 crop shows whole, caption under it, 3:2 on short phones too (image-round17/HANDOFF.md; its 860px cut cropped the tall photos into short 2x2 boxes at 861-1100) */
.pm-tile-img picture{display:contents}
.pm-tile-subtitle{display:block;margin-top:4px;font-size:13px;line-height:1.3;letter-spacing:0;color:#cadad2}
@media (max-width:1100px){
  .pm-tile-row{row-gap:18px;align-items:start}
  .pm-tile-row li{flex-direction:column;gap:8px}
  .pm-tile-row .pm-tile-img{flex:none;width:100%;aspect-ratio:3/2;min-height:0}
  .pm-tile-img img{object-fit:contain;filter:none}
  .pm-tile-img::after{display:none}
  .pm-tile-row .pm-tile-t{position:static;display:block;font-size:14px;line-height:1.3;min-height:36.4px;text-wrap:balance}
}