/* The Good Life IV — the inner pages. Every band is one of a small family (prose, cards, steps, questions, the
   closing call) so 130 pages read as one site; each page type adds its own hero and signature band. Colors come from
   the page's subject: a drip's bag label (--room, --accent), a peptide's violet, an event's photo. */

body { --room: #d9f1f6; --accent: var(--aqua-d); --accent-ink: #06677c; }

/* ---------- breadcrumb ---------- */
.crumbs { margin-bottom: clamp(18px, 2.4vw, 30px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; font: 500 13.5px/1.3 var(--f); color: var(--mute); }
.crumbs li + li::before { content: '/'; margin: 0 10px; color: rgba(14,16,19,.25); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the family of bands ---------- */
.sec { padding: clamp(80px, 9vw, 140px) var(--pad); background: var(--paper); }
.sec--alt { background: var(--white); }
.sec__head { max-width: 860px; margin-bottom: clamp(36px, 4vw, 56px); }
.sec__h { font: 700 clamp(36px, 4.3vw, 64px)/1.02 var(--f); letter-spacing: -.042em; text-wrap: balance; }
.sec__intro { margin-top: 18px; }
.sec__intro p, .sec__head > p:not(.label) { font-size: clamp(17.5px, 1.4vw, 20px); color: var(--ink-2); max-width: 58ch; }
.sec__intro p + p { margin-top: 12px; }

.prose__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.prose__h { position: sticky; top: calc(var(--hd) + 32px); }
.prose__body > p { font-size: clamp(17.5px, 1.3vw, 19px); line-height: 1.7; color: var(--ink-2); max-width: 62ch; }
.prose__body > p + p { margin-top: 18px; }
.prose__body > p.lead { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.5; color: var(--ink); letter-spacing: -.01em; }
.prose__body .cards { margin-top: 36px; }
.prose__body .dots { margin: 18px 0; }

.dots { display: grid; gap: 10px; }
.dots li { position: relative; padding-left: 26px; color: var(--ink-2); }
.dots li::before { content: ''; position: absolute; left: 3px; top: .62em; width: 9px; height: 9px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.ticks { display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; font-size: 17.5px; }
.ticks li::before { content: ''; position: absolute; left: 3px; top: .45em; width: 11px; height: 11px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.ticks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }

.cards { display: grid; gap: 18px; }
.cards--1 { grid-template-columns: minmax(0, 720px); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { padding: clamp(24px, 2.4vw, 32px); border-radius: 26px; background: var(--white); box-shadow: 0 1px 0 rgba(14,16,19,.04); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.sec--alt .card { background: var(--paper); }
.card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgba(14,16,19,.35); }
.card__label { font: 600 12px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); margin-bottom: 10px; }
.card__h { font: 700 clamp(20px, 1.7vw, 24px)/1.18 var(--f); letter-spacing: -.02em; }
.card p { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.card .dots { margin-top: 12px; font-size: 15.5px; }

/* safety */
.caution-wrap { background: var(--paper); }
.caution { max-width: 1040px; margin: 0 auto; padding: clamp(30px, 4vw, 56px); border-radius: 32px; background: var(--ink); color: #fff; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px 48px; }
.caution__tag { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1 var(--f); letter-spacing: .16em; text-transform: uppercase; color: #ffb3c8; }
.caution__tag::before { content: '!'; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ff5c8a; color: #fff; font-size: 13px; letter-spacing: 0; }
.caution__h { font: 700 clamp(28px, 3vw, 42px)/1.05 var(--f); letter-spacing: -.035em; text-wrap: balance; }
.caution__body p { color: rgba(255,255,255,.8); }
.caution__body p + p, .caution__body .dots, .caution__body .dots + p { margin-top: 12px; }
.caution__body .dots li { color: rgba(255,255,255,.88); }
.caution__body .dots li::before { background: #ff7aa0; }
.caution__body h3 { margin-top: 18px; font: 700 18px/1.3 var(--f); }

/* the visit, start to finish (dark, like the home page) */
.steps-band { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; padding: clamp(90px, 10vw, 150px) var(--pad); background: radial-gradient(900px 600px at 85% 0%, rgba(26,178,211,.16), transparent 70%), var(--dark); color: #fff; overflow: hidden; }
.steps-band__pic { aspect-ratio: 4 / 5; border-radius: 30px; background: #1d2126; max-height: 720px; }
.steps-band h2 { font: 700 clamp(38px, 4.4vw, 66px)/1 var(--f); letter-spacing: -.045em; text-wrap: balance; }
.steps-band__intro p { margin-top: 16px; color: rgba(255,255,255,.76); max-width: 52ch; }
.steps { margin-top: 28px; border-top: 1px solid rgba(255,255,255,.14); }
.steps li { position: relative; padding: 16px 0 16px 30px; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 15.5px; color: rgba(255,255,255,.72); }
.steps li::before { content: ''; position: absolute; left: 4px; top: 23px; width: 11px; height: 11px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--aqua); }
.steps b { display: block; margin-bottom: 2px; font-size: 17.5px; color: #fff; }

/* questions */
.faq { background: var(--white); }
.faq__head { max-width: 760px; }
.faq__head > p:not(.label) { margin-top: 16px; font-size: 17px; color: var(--ink-2); }
/* the questions side by side: two columns that each open on their own (one column on phones) */
.faq__list { margin-top: clamp(28px, 3.4vw, 44px); }
.faq__list--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); align-items: start; }
.faq__ask a { color: var(--ink); font-weight: 600; text-decoration-color: var(--aqua); text-underline-offset: 3px; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; font: 600 clamp(18px, 1.45vw, 21px)/1.35 var(--f); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 30px; height: 30px; margin-top: -2px; border-radius: 50%; background: var(--paper); transition: background-color .25s, transform .35s var(--ease); }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 9px; right: 9px; top: 14px; height: 2px; border-radius: 2px; background: var(--ink); }
.qa summary i::after { transform: rotate(90deg); transition: transform .35s var(--ease); }
.qa[open] summary i { background: var(--accent); }
.qa[open] summary i::before, .qa[open] summary i::after { background: #fff; }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa summary:hover span { color: var(--accent-ink, var(--accent)); }
.qa__a { padding: 0 60px 24px 0; }
.qa__a p { font-size: 16.5px; color: var(--ink-2); }
.qa__a p + p, .qa__a .dots { margin-top: 10px; }

/* the membership nudge */
.nudge { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(80px, 9vw, 130px) var(--pad); background: linear-gradient(165deg, #ecf9fc 0%, #d5f0f6 100%); overflow: hidden; }
.nudge__card { perspective: 1200px; display: grid; place-items: center; }
.vip--sm { width: min(100%, 420px); }
.nudge h2 { font: 700 clamp(36px, 4.2vw, 60px)/1 var(--f); letter-spacing: -.045em; text-wrap: balance; }
.nudge__text p:not(.label) { margin: 16px 0 26px; font-size: clamp(17px, 1.35vw, 19px); color: var(--ink-2); max-width: 52ch; }
.nudge__text p b { color: var(--ink); }

/* the booking bar that follows a product page once its hero has scrolled away */
.buybar { position: fixed; z-index: 40; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(14,16,19,.08); box-shadow: 0 24px 50px -24px rgba(14,16,19,.45); transform: translate(-50%, 140%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s linear .5s; max-width: calc(100vw - 24px); }
.buybar.is-on { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.buybar img { width: 30px; height: 44px; object-fit: contain; }
.buybar__t { display: grid; line-height: 1.2; min-width: 0; }
.buybar__t b { font: 700 15.5px/1.2 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar__t span { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.buybar .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }

/* the closing call, in the page's own color */
.close { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: clamp(90px, 10vw, 150px) var(--pad); background: var(--room); }
.close::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 78% 60%, rgba(255,255,255,.75), transparent 55%); }
.close__h { font-size: clamp(48px, 7vw, 116px); line-height: .9; letter-spacing: -.055em; text-wrap: balance; }
.close__h .b { color: var(--accent); }
.close__p { margin: 22px 0 30px; font-size: clamp(17.5px, 1.4vw, 20px); color: var(--ink-2); max-width: 48ch; }
.close__bag { width: clamp(150px, 16vw, 250px); margin-right: clamp(0px, 4vw, 60px); }
.close__bag img { width: 100%; height: auto; filter: drop-shadow(0 40px 30px rgba(14,16,19,.2)); animation: bob 6s ease-in-out infinite; }
.close--dark { background: var(--dark); color: #fff; }
/* (launch audit, 2026-10-16: the white glow turned grey on the dark band and the deep teal words sank into it) */
.close--dark::before { background: radial-gradient(circle at 78% 60%, rgba(26,178,211,.2), transparent 55%); }
.close--dark .close__h .b { color: var(--aqua); }
.close--dark .close__p { color: rgba(255,255,255,.8); }
.close--dark .btn--ink { background: var(--aqua); color: #06232a; --fill: #5fd3ea; }
.close--dark .btn--line { border-color: rgba(255,255,255,.55); color: #fff; }

/* ================= a drip's page ================= */
.dh { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: min(calc(100vh - var(--hd)), 900px); padding: clamp(28px, 3.6vw, 52px) var(--pad) clamp(56px, 6vw, 96px); }
.dh__flood { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 74% 46%, var(--room) 0%, color-mix(in srgb, var(--room) 55%, var(--paper)) 42%, var(--paper) 78%); clip-path: circle(var(--flood) at 74% 44%); transition: --flood 1.8s cubic-bezier(.3,.6,.2,1); }
.dh.in .dh__flood, .no-js .dh__flood { --flood: 150%; }
.dh__for { color: var(--accent-ink, var(--accent)); }
.dh__for::before { background: var(--accent); }
/* The big headlines run at line-height .9, so each line's letter box reaches ~10px above the line into the label
   over it (no letters touch: a gap shows). The label sits on top so a tap, a screen reader or the "nothing covered"
   check finds the label, not the headline (40-page launch check, 2026-10-16). */
.dh__for, .hh__for, .cx__for, .eh__for, .sh__for, .ph__for, .ch__for { position: relative; z-index: 1; }
.dh__text { container-type: inline-size; }
/* the name fills its column: --ems is the widest line's width in em, measured in Outfit */
.dh__h { font-size: min(150px, calc(100cqi / var(--ems, 6))); line-height: .9; letter-spacing: -.055em; }
.dh__line { display: block; white-space: nowrap; }
.dh__h .b { color: var(--accent); }
.dh__tag { margin-top: clamp(14px, 1.6vw, 22px); font: 300 clamp(24px, 2.3vw, 36px)/1.15 var(--f); letter-spacing: -.025em; text-wrap: balance; }
.dh__lede { margin-top: 16px; max-width: 54ch; }
.dh__lede p { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); }
.dh__lede p + p { margin-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.66); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); font: 500 14px/1 var(--f); color: var(--ink); }
.chips li::before { content: ''; width: 8px; height: 8px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 28px; padding: 18px 18px 18px 26px; border-radius: 26px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 30px 60px -44px rgba(14,16,19,.4); max-width: 640px; }
.buy__price { flex: 1 1 auto; }
.buy__two, .buy__doses { display: flex; gap: 26px; }
.buy__doses { gap: 18px; }
.buy dt { font: 600 11.5px/1.3 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.buy dd { font: 700 32px/1.1 var(--f); letter-spacing: -.025em; }
.buy__doses dd { font-size: 24px; }
.buy__note, .buy__dose { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); max-width: 44ch; }
.buy__dose { margin-top: 0; font-size: 15px; }
.buy__dose b { color: var(--ink); }
.buy .cta { flex: none; }
.dh__stage { position: relative; height: clamp(440px, 46vw, 700px); display: grid; grid-template: 100% / 100%; place-items: center; }
.dh__bag { position: relative; z-index: 2; height: 86%; width: auto; filter: drop-shadow(0 50px 40px rgba(14,16,19,.22)); animation: bob 5.5s ease-in-out infinite; }
.dh__pool { position: absolute; z-index: 1; left: 50%; bottom: 2%; width: 56%; height: 34px; margin-left: -28%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent); animation: pool 5.5s ease-in-out infinite; }
@keyframes pool { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(.86); opacity: .55; } }
.dh__ripples { position: absolute; left: 50%; top: 58%; width: 0; height: 0; z-index: 0; }
.dh__ripples i { position: absolute; left: -210px; top: -210px; width: 420px; height: 420px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; animation: ring 5.4s ease-out infinite; }
.dh__ripples i:nth-child(2) { animation-delay: 1.8s; }
.dh__ripples i:nth-child(3) { animation-delay: 3.6s; }
.dh__drop { position: absolute; z-index: 3; left: 50%; top: 8%; width: 22px; height: 22px; margin-left: -11px; border-radius: 0 50% 50% 50%; background: var(--accent); transform: rotate(45deg); opacity: 0; pointer-events: none; }
.dh.falling .dh__drop { animation: dfall .75s cubic-bezier(.55,0,1,.45) forwards; }
@keyframes dfall { 0% { transform: translateY(-240px) rotate(45deg); opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(0) rotate(45deg) scale(.4); opacity: 0; } }

/* what's inside */
.inside { padding: clamp(90px, 10vw, 150px) var(--pad); background: color-mix(in srgb, var(--room) 62%, var(--white)); }
.inside__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.inside__head { position: sticky; top: calc(var(--hd) + 32px); }
.inside__head .label { color: var(--accent-ink, var(--accent)); }
.inside__head .label::before { background: var(--accent); }
.inside__head > p { margin-top: 16px; font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); max-width: 46ch; }
.inside__bag { margin-top: 30px; width: min(220px, 50%); }
.inside__bag img { width: 100%; height: auto; filter: drop-shadow(0 30px 26px rgba(14,16,19,.16)); transform: rotate(-4deg); }
.inside__list { display: grid; gap: 12px; }
.ing { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 16px; padding: 24px 26px; border-radius: 24px; background: rgba(255,255,255,.78); }
.ing__drop { grid-row: 1 / span 2; width: 14px; height: 14px; margin-top: 9px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); }
.ing h3 { font: 700 clamp(20px, 1.6vw, 23px)/1.2 var(--f); letter-spacing: -.02em; }
.ing p { font-size: 16px; color: var(--ink-2); }
.ing p + p { margin-top: 8px; }
.ing--opt { display: block; background: transparent; border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
.ing--opt .dots { margin: 12px 0 14px; }

/* good for */
.fit { background: var(--paper); }
.fit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fit__card { position: relative; padding: 30px 28px 28px; border-radius: 26px; background: var(--white); overflow: hidden; transition: background-color .4s ease, transform .4s var(--ease); }
.fit__card::before { content: ''; display: block; width: 16px; height: 16px; margin-bottom: 20px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.fit__card:hover { background: var(--room); transform: translateY(-3px); }
.fit__card h3 { font: 700 clamp(20px, 1.7vw, 24px)/1.18 var(--f); letter-spacing: -.02em; }
.fit__card p { margin-top: 10px; font-size: 16px; color: var(--ink-2); }

/* add-ons */
.addons { background: var(--white); }
.addons__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
.addons__grid > header > p:not(.label) { margin-top: 16px; font-size: 17px; color: var(--ink-2); max-width: 46ch; }
.addons__price { padding: 16px 18px; border-radius: 18px; background: var(--paper); }
.addons__price b { color: var(--ink); }
.addons .more { margin-top: 20px; }
.addons__list { display: grid; gap: 4px; }
.addon { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.addon > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--room); color: var(--accent); font: 300 28px/1 var(--f); font-style: normal; }
.addon h3 { font: 700 21px/1.2 var(--f); letter-spacing: -.02em; }
.addon p { margin-top: 6px; font-size: 16px; color: var(--ink-2); }

/* drips that pair well */
.related { background: var(--paper); }
.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.related__all { margin-top: 28px; }
.dcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 22px 20px 16px; border-radius: 26px; background: var(--room); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.dcard:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--accent) 70%, transparent); }
.dcard__bag img { width: 96px; height: auto; filter: drop-shadow(0 16px 12px rgba(14,16,19,.16)); transition: transform .5s var(--ease); }
.dcard:hover .dcard__bag img { transform: translateY(-6px) rotate(-3deg); }
.dcard__for { display: block; font: 600 11.5px/1.3 var(--f); letter-spacing: .13em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); }
.dcard__name { margin-top: 6px; font: 800 clamp(21px, 1.7vw, 25px)/1.08 var(--f); letter-spacing: -.03em; }
.dcard__line, .dcard__note { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.dcard__price { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.dcard__price b { font-weight: 700; color: var(--ink); }
.dcard__price i { font-style: normal; margin: 0 4px; color: var(--mute); }

/* ================= widths ================= */
@media (max-width: 1100px) {
  .dh { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); }
  .buy { flex-direction: column; align-items: flex-start; }
  .fit__grid, .related__grid, .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dh { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .dh__stage { order: -1; height: clamp(300px, 52vw, 460px); margin-top: -8px; }
  .dh__ripples i { left: -150px; top: -150px; width: 300px; height: 300px; }
  .prose__grid, .inside__grid, .addons__grid, .steps-band, .nudge, .caution { grid-template-columns: minmax(0, 1fr); }
  .prose__h, .inside__head { position: static; }
  .inside__bag { display: none; }
  .steps-band__pic { max-width: 560px; aspect-ratio: 5 / 4; }
  .close { grid-template-columns: minmax(0, 1fr); }
  .close__bag { display: none; }
}
@media (max-width: 760px) {
  .faq__list--two { grid-template-columns: minmax(0, 1fr); }
  .faq__list--two .faq__col + .faq__col .qa:first-child { border-top: 0; }
  .dh { padding-top: 12px; }
  .dh__stage { height: 300px; }
  .buy { width: 100%; padding: 18px; }
  .buy .cta, .buy .cta .btn { width: 100%; }
  .buy__doses { flex-wrap: wrap; gap: 12px 18px; }
  .fit__grid, .related__grid, .cards--2, .cards--3, .ticks--cols { grid-template-columns: minmax(0, 1fr); }
  .dcard { grid-template-columns: 76px minmax(0, 1fr); }
  .dcard__bag img { width: 76px; }
  .qa__a { padding-right: 0; }
  .close .cta .btn { flex: 1 1 auto; }
}

/* ================= a peptide's page ================= */
.ph { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: min(calc(100vh - var(--hd)), 880px); padding: clamp(28px, 3.6vw, 52px) var(--pad) clamp(56px, 6vw, 96px); }
.ph__flood { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 72% 50%, #ddd6fb 0%, #ebe7f8 34%, var(--paper) 74%); clip-path: circle(var(--flood) at 72% 50%); transition: --flood 1.8s cubic-bezier(.3,.6,.2,1); }
.ph.in .ph__flood { --flood: 150%; }
.ph__text { container-type: inline-size; }
.ph__for { color: var(--violet-d); }
.ph__for::before { background: var(--violet); }
.ph__h { font-size: min(150px, calc(100cqi / var(--ems, 5))); line-height: .9; letter-spacing: -.055em; color: var(--violet-d); }
.ph__line { display: block; white-space: nowrap; }
.ph__tag { margin-top: clamp(14px, 1.6vw, 22px); font: 300 clamp(22px, 2.1vw, 32px)/1.2 var(--f); letter-spacing: -.02em; text-wrap: balance; max-width: 28ch; }
.ph__lede { margin-top: 16px; max-width: 54ch; }
.ph__lede p { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); }
.buy--pep dd { color: var(--violet-d); }
.ph__stage { position: relative; height: clamp(440px, 44vw, 660px); display: grid; grid-template: 100% / 100%; place-items: center; }
.ph__halo { position: absolute; width: min(74%, 560px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.5) 38%, rgba(107,85,200,.14) 62%, transparent 72%); }
.ph__ring { position: absolute; width: min(62%, 470px); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed rgba(85,65,173,.28); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ph__vial { position: relative; z-index: 2; height: 70%; animation: bob 6s ease-in-out infinite; }
.ph__vial img { height: 100%; width: auto; filter: drop-shadow(0 40px 30px rgba(40,20,110,.25)); }
/* a light passes over the glass, masked to the vial's own shape */
.ph__glint { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.7) 48%, transparent 56%); background-size: 280% 100%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; animation: glint 6s ease-in-out infinite; }
@keyframes glint { 0%, 50% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.ph__plinth { position: absolute; z-index: 1; bottom: 9%; width: 46%; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(85,65,173,.3), transparent); }

.fornot { background: var(--paper); }
.fornot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.fornot__for, .fornot__not { padding: clamp(28px, 3.4vw, 48px); border-radius: 32px; }
.fornot__for { background: var(--lilac); }
.fornot__for .label { color: var(--violet-d); }
.fornot__for .label::before { background: var(--violet); }
.fornot__for .sec__h { font-size: clamp(30px, 3.2vw, 46px); }
.fornot__for > p { margin-top: 16px; font-size: 17px; color: var(--ink-2); }
.fornot__for .ticks { margin-top: 20px; }
.fornot__for .ticks li { font-size: 16.5px; }
.fornot__for .ticks li::before { background: var(--violet); }
.fornot__not { background: var(--ink); color: #fff; }
.fornot__not h2 { margin-top: 14px; font: 700 clamp(28px, 2.8vw, 40px)/1.05 var(--f); letter-spacing: -.035em; }
.fornot__not > p { margin-top: 14px; color: rgba(255,255,255,.78); }
.fornot__not .dots { margin-top: 18px; }
.fornot__not .dots li { color: rgba(255,255,255,.88); }
.fornot__not .dots li::before { background: #ff7aa0; }
.fornot__note { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); font-size: 15px; }

.benefits__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.benefits__list li { position: relative; padding: 18px 0 18px 34px; border-bottom: 1px solid var(--line); font: 500 clamp(18px, 1.5vw, 21px)/1.35 var(--f); letter-spacing: -.01em; }
.benefits__list li::before { content: ''; position: absolute; left: 4px; top: 26px; width: 12px; height: 12px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.benefits__ask { margin-top: 22px; font-size: 17px; color: var(--ink-2); }
.benefits__ask a { font-weight: 600; color: var(--accent-ink, var(--accent)); }

.vcards__grid { display: grid; gap: 16px; }
.vcards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vcards__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vcard { padding: 30px 28px; border-radius: 26px; background: var(--paper); transition: transform .4s var(--ease), background-color .4s; }
.vcard:hover { transform: translateY(-3px); background: var(--room); }
.vcard > i { display: block; width: 30px; height: 30px; margin: 4px 0 20px 4px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 45%, white)); }
.vcard h3 { font: 700 clamp(20px, 1.6vw, 23px)/1.2 var(--f); letter-spacing: -.02em; }
.vcard p { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.vcard .dots { margin-top: 12px; font-size: 15.5px; }

.pband { padding: clamp(24px, 3vw, 40px) var(--pad); background: var(--paper); }
.pband__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px) clamp(28px, 5vw, 72px); border-radius: 34px; background: radial-gradient(700px 400px at 20% 0%, rgba(185,174,255,.35), transparent 70%), linear-gradient(135deg, #2d2270, #16113b); color: #fff; overflow: hidden; }
.pband__vial img { height: clamp(180px, 20vw, 280px); width: auto; filter: drop-shadow(0 30px 24px rgba(0,0,0,.4)); }
.pband__price { font: 300 clamp(20px, 1.8vw, 26px)/1.2 var(--f); }
.pband__price b { font: 800 clamp(54px, 6vw, 92px)/1 var(--f); letter-spacing: -.05em; color: var(--violet-l); margin-right: 8px; }
.pband__p { margin: 14px 0 24px; color: rgba(255,255,255,.8); max-width: 54ch; }

.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pcard { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 22px 20px 16px; border-radius: 26px; background: var(--white); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .4s; }
.pcard:hover { transform: translateY(-4px); background: var(--lilac); box-shadow: 0 30px 60px -36px rgba(85,65,173,.5); }
.pcard__vial img { width: 84px; height: auto; filter: drop-shadow(0 16px 12px rgba(14,16,19,.14)); transition: transform .5s var(--ease); }
.pcard:hover .pcard__vial img { transform: translateY(-6px) rotate(-3deg); }
.pcard__name { font: 800 clamp(20px, 1.6vw, 24px)/1.08 var(--f); letter-spacing: -.03em; color: var(--violet-d); }
.pcard__line { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.pcard__price { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.pcard__price b { color: var(--ink); }
.page-peptide .qa[open] summary i { background: var(--violet); }
.page-peptide .close .btn--ink { background: var(--violet-d); }

@media (max-width: 1100px) {
  .ph { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); }
  .vcards__grid--3, .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ph { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ph__stage { order: -1; height: clamp(300px, 52vw, 440px); margin-top: -8px; }
  .fornot__grid { grid-template-columns: minmax(0, 1fr); }
  .pband__in { grid-template-columns: minmax(0, 1fr); }
  .pband__vial { display: none; }
}
@media (max-width: 760px) {
  .ph { padding-top: 12px; }
  .vcards__grid--3, .vcards__grid--2, .pgrid { grid-template-columns: minmax(0, 1fr); }
  .pcard { grid-template-columns: 70px minmax(0, 1fr); }
  .pcard__vial img { width: 70px; }
}

/* ================= heroes for the other page types (.xh) ================= */
.xh { position: relative; isolation: isolate; overflow: clip; padding: clamp(28px, 3.6vw, 52px) var(--pad) clamp(56px, 6vw, 96px); }
.xh__flood { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 70% 40%, var(--room) 0%, color-mix(in srgb, var(--room) 50%, var(--paper)) 45%, var(--paper) 80%); clip-path: circle(var(--flood) at 70% 40%); transition: --flood 1.8s cubic-bezier(.3,.6,.2,1); }
.xh.in .xh__flood { --flood: 150%; }

/* ================= a symptom's page ================= */
.sh { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.sh__text { container-type: inline-size; }
.sh__for { color: var(--accent-ink, var(--accent)); }
.sh__h { letter-spacing: -.055em; }
.sh__h .v { display: block; font-size: clamp(30px, 3.3vw, 50px); line-height: 1; letter-spacing: -.03em; margin-bottom: .12em; }
.sh__h .b { display: block; font-size: min(124px, calc(100cqi / var(--ems, 5.6))); line-height: .9; color: var(--accent); text-wrap: balance; }
.sh__lede { margin-top: 22px; max-width: 52ch; }
.sh__lede p { font-size: clamp(17.5px, 1.4vw, 20px); color: var(--ink-2); }
.sh__trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; margin: 22px 0 28px; max-width: 580px; }
.sh__trust li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.sh__trust li::before { content: ''; position: absolute; left: 2px; top: .4em; width: 9px; height: 9px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.sh__media { position: relative; padding-bottom: 40px; }
.sh__photo { aspect-ratio: 4 / 4.6; border-radius: 32px; background: #1d2126; box-shadow: 0 60px 100px -60px rgba(8,122,147,.55); }
.sh__pick { position: absolute; left: clamp(-40px, -3vw, -16px); bottom: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; max-width: 330px; padding: 12px 20px 12px 12px; border-radius: 22px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 30px 60px -30px rgba(14,16,19,.45); text-decoration: none; transition: transform .4s var(--ease); }
.sh__pick:hover { transform: translateY(-3px); }
.sh__pick-bag { display: grid; place-items: center; height: 76px; border-radius: 14px; background: var(--room); }
.sh__pick-bag img { height: 64px; width: auto; }
.sh__pick i { display: block; font: 600 11px/1.3 var(--f); letter-spacing: .13em; text-transform: uppercase; font-style: normal; color: var(--accent-ink, var(--accent)); }
.sh__pick b { display: block; margin-top: 4px; font: 800 19px/1.1 var(--f); letter-spacing: -.02em; }
.sh__pick em { display: block; margin-top: 4px; font-size: 13px; font-style: normal; color: var(--ink-2); }
.sh__pick em b { display: inline; font: 700 13px/1 var(--f); letter-spacing: 0; }
.sh__pick em span, .sh__pick em i { display: inline; font: 400 13px/1 var(--f); letter-spacing: 0; text-transform: none; color: var(--ink-2); }

.lead-p { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; margin-bottom: 22px; }
.after-p { margin-top: 20px; color: var(--ink-2); }

.picks { background: var(--white); }
.picks__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* four drips (the new menu puts its own drip first, then their page's picks) sit four across, not three and one */
@media (min-width: 1101px) { .picks__grid:has(> .pick:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pick { position: relative; display: flex; flex-direction: column; padding: 16px 16px 24px; border-radius: 30px; background: var(--paper); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.pick:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -46px color-mix(in srgb, var(--accent) 80%, transparent); }
.pick__bag { display: grid; grid-template: 100% / 100%; place-items: center; height: clamp(220px, 20vw, 290px); margin-bottom: 20px; border-radius: 22px; background: radial-gradient(circle at 50% 60%, #fff, var(--room) 70%); }
.pick__bag img { height: 84%; width: auto; filter: drop-shadow(0 26px 20px rgba(14,16,19,.2)); transition: transform .6s var(--ease); }
.pick:hover .pick__bag img { transform: translateY(-8px) rotate(-2deg); }
.pick__top { position: absolute; top: 28px; left: 28px; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 11.5px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; }
.pick > *:not(.pick__bag):not(.pick__top) { padding: 0 10px; }
.pick__name { font: 800 clamp(22px, 1.9vw, 27px)/1.1 var(--f); letter-spacing: -.03em; }
.pick__name a { text-decoration: none; }
.pick__name a:hover { color: var(--accent-ink, var(--accent)); }
.pick p:not(.pick__top):not(.pick__price) { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.pick__price { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.pick__price b { color: var(--ink); font-size: 16px; }
.pick__price i { font-style: normal; margin: 0 4px; color: var(--mute); }
.pick__cta { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 20px; }
.pick__cta .btn { min-height: 46px; padding: 0 24px; font-size: 15px; }

.others { background: var(--paper); }
.others__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.others__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-radius: 18px; background: var(--white); font: 600 17px/1.2 var(--f); text-decoration: none; transition: background-color .3s, transform .3s var(--ease); }
.others__list a svg { color: var(--accent); transition: transform .3s var(--ease); }
.others__list a:hover { background: var(--room); transform: translateY(-2px); }
.others__list a:hover svg { transform: translateX(4px); }

@media (max-width: 1100px) {
  .picks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .others__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sh { grid-template-columns: minmax(0, 1fr); }
  .sh__media { max-width: 620px; }
  .sh__pick { left: 12px; }
}
@media (max-width: 760px) {
  .sh__trust { grid-template-columns: minmax(0, 1fr); }
  .picks__grid, .others__list { grid-template-columns: minmax(0, 1fr); }
  .sh .cta .btn { flex: 1 1 auto; }
}

/* ================= a city page ================= */
.ch { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ch__text { container-type: inline-size; }
.ch__for { color: var(--accent-ink, var(--accent)); }
.ch__h { letter-spacing: -.055em; }
.ch__h .v { display: block; font-size: clamp(28px, 3.1vw, 46px); line-height: 1; letter-spacing: -.03em; margin-bottom: .14em; }
.ch__h .b { display: block; font-size: min(132px, calc(100cqi / var(--ems, 5.6))); line-height: .9; color: var(--accent); }
.ch__lede { margin-top: 22px; max-width: 56ch; }
.ch__lede p { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); }
.ch__lede p + p { margin-top: 12px; }
.ch__facts { display: grid; gap: 8px; margin: 24px 0 28px; }
.ch__facts li { position: relative; padding-left: 24px; font-size: 15.5px; color: var(--ink-2); }
.ch__facts li::before { content: ''; position: absolute; left: 3px; top: .5em; width: 10px; height: 10px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.ch__facts b { color: var(--ink); font-weight: 600; }
.citymap { position: relative; aspect-ratio: 1; border-radius: 34px; overflow: hidden; background: #f3fbfc; border: 1px solid rgba(8,122,147,.14); box-shadow: 0 60px 100px -70px rgba(8,122,147,.6); }
.citymap__zoom { position: absolute; inset: 0; width: 100%; height: 100%; }
.citymap__zoom .grid { stroke: rgba(8,122,147,.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.citymap__zoom .near { fill: rgba(8,122,147,.07); stroke: rgba(8,122,147,.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.citymap__zoom .me { fill: var(--aqua); fill-opacity: .9; stroke: var(--aqua-d); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.citymap__inset { position: absolute; right: 16px; top: 16px; width: 28%; padding: 10px; border-radius: 18px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 16px 30px -18px rgba(14,16,19,.35); }
.citymap__az { width: 100%; height: auto; overflow: visible; }
.citymap__az .st { fill: #eef6f7; stroke: rgba(14,16,19,.35); stroke-width: 4; stroke-linejoin: round; }
.citymap__az .dot { fill: rgba(8,122,147,.45); }
.citymap__az .on { fill: var(--pink); stroke: #fff; stroke-width: 5; }
.citymap__az .studio circle { fill: var(--ink); }
.citymap__az .studio .pulse { fill: var(--aqua); opacity: .35; transform-box: fill-box; transform-origin: center; animation: pin 2.4s ease-out infinite; }
@keyframes pin { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(3.2); opacity: 0; } }
.citymap figcaption { position: absolute; left: 18px; bottom: 18px; display: grid; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.citymap figcaption b { font: 800 20px/1.1 var(--f); letter-spacing: -.02em; }
.citymap figcaption span { font-size: 13px; color: var(--mute); }

.citymenu { background: var(--white); }
.citymenu__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.citymenu__list a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 18px; background: var(--paper); text-decoration: none; transition: background-color .3s, transform .3s var(--ease); }
.citymenu__list a:hover { background: var(--room); transform: translateY(-2px); }
.citymenu__bag { display: grid; place-items: center; height: 58px; border-radius: 12px; background: color-mix(in srgb, var(--room) 80%, white); }
.citymenu__bag img { height: 50px; width: auto; }
.citymenu__t b { display: block; font: 700 16px/1.2 var(--f); }
.citymenu__t i { display: block; font: 400 13px/1.3 var(--f); font-style: normal; color: var(--mute); }
.citymenu__p { font: 700 18px/1 var(--f); letter-spacing: -.02em; }
.citymenu__more { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; }

.areas__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.area { padding: 26px; border-radius: 24px; background: var(--white); }
.sec--alt .area { background: var(--paper); }
.area h3 { font: 700 21px/1.2 var(--f); letter-spacing: -.02em; }
.area p { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }
.area__pop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.area__pop span { width: 100%; margin-bottom: 2px; font: 600 11px/1.3 var(--f); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.area__pop a, .area__pop em { padding: 6px 12px; border-radius: 999px; background: var(--room, var(--paper)); font: 600 13.5px/1.2 var(--f); font-style: normal; text-decoration: none; color: var(--ink); }
.area__pop a:hover { box-shadow: inset 0 0 0 1.5px rgba(14,16,19,.2); }

.nearby { background: var(--paper); }
.nearby__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.nearby__grid header > p:not(.label) { margin-top: 16px; font-size: 17px; color: var(--ink-2); }
.nearby__grid header a { color: var(--accent-ink, var(--accent)); font-weight: 600; }
.nearby__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nearby__list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--white); font: 600 16.5px/1.2 var(--f); text-decoration: none; transition: background-color .3s; }
.nearby__list a:hover { background: var(--room); }
.nearby__list svg { color: var(--accent); }
.nearby__all { background: var(--ink) !important; color: #fff; }
.nearby__all svg { color: var(--aqua-l) !important; }

@media (max-width: 1100px) {
  .citymenu__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ch { grid-template-columns: minmax(0, 1fr); }
  .citymap { max-width: 560px; }
  .nearby__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .citymenu__list, .nearby__list { grid-template-columns: minmax(0, 1fr); }
  .ch .cta .btn { flex: 1 1 auto; }
}

/* ================= reading pages: guides, blog posts, legal ================= */
.ah { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 80px); align-items: center; --room: #dff2ee; }
.ah--legal { grid-template-columns: minmax(0, 1fr); }
.ah__kind { color: var(--aqua-d); }
.ah__h { font: 700 clamp(40px, 5vw, 80px)/1 var(--f); letter-spacing: -.045em; text-wrap: balance; max-width: 18ch; }
.ah--legal .ah__h { max-width: 22ch; }
.ah__dek { margin-top: 18px; font: 300 clamp(21px, 2vw, 30px)/1.25 var(--f); letter-spacing: -.02em; max-width: 34ch; text-wrap: balance; }
.ah__meta { margin-top: 20px; font-size: 14px; color: var(--mute); }
.ah__pic { aspect-ratio: 4 / 3.3; border-radius: 30px; background: #1d2126; }
.art { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); padding: clamp(40px, 5vw, 80px) var(--pad) clamp(80px, 8vw, 120px); background: var(--white); }
.art--solo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.art__toc { position: sticky; top: calc(var(--hd) + 28px); align-self: start; }
.art__toc-h { font: 600 12px/1.3 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.art__toc ol { display: grid; gap: 2px; border-left: 2px solid var(--line); }
.art__toc a { display: block; padding: 7px 0 7px 16px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); text-decoration: none; transition: color .2s, border-color .2s; }
.art__toc a:hover, .art__toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--aqua); }
.art__body { width: 100%; min-width: 0; max-width: 720px; }
.art__lede p { font: 400 clamp(20px, 1.7vw, 24px)/1.55 var(--f); letter-spacing: -.01em; color: var(--ink); }
.art__lede p + p { margin-top: 14px; }
.art__lede .dots { margin-top: 16px; }
.art__sec { padding-top: 44px; }
.art__sec h2 { font: 700 clamp(28px, 2.6vw, 38px)/1.1 var(--f); letter-spacing: -.035em; text-wrap: balance; scroll-margin-top: calc(var(--hd) + 24px); }
.art__sec h3 { margin-top: 30px; font: 700 clamp(20px, 1.6vw, 23px)/1.25 var(--f); letter-spacing: -.02em; }
.art__label { display: block; margin-bottom: 4px; font: 600 12px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-d); }
.art__sec p { margin-top: 14px; font-size: 18px; line-height: 1.75; color: var(--ink-2); }
.art__sec .dots { margin-top: 14px; font-size: 17.5px; line-height: 1.6; }
.art__sec .pairs { margin-top: 18px; }
.art__sec .tbl { margin-top: 22px; }
.art__card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: 44px; padding: 22px 24px 22px 18px; border-radius: 26px; background: var(--room); }
.art__card img { width: 84px; height: auto; filter: drop-shadow(0 16px 12px rgba(14,16,19,.15)); }
.art__card-k { font: 600 11.5px/1.3 var(--f); letter-spacing: .13em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); }
.art__card-h { margin-top: 4px; font: 800 24px/1.1 var(--f); letter-spacing: -.03em; }
.art__card-p { margin-top: 6px; font-size: 15.5px; color: var(--ink-2); }
.art__card-cta { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.art__card-cta .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
.more-read__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.more-read__list a { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; height: 100%; padding: 22px 24px; border-radius: 22px; background: var(--white); text-decoration: none; transition: transform .3s var(--ease), background-color .3s; }
.more-read__list a:hover { transform: translateY(-3px); background: var(--mint); }
.more-read__k { font: 600 11.5px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-d); }
.more-read__t { font: 700 20px/1.25 var(--f); letter-spacing: -.02em; }
.more-read__list svg { color: var(--aqua-d); }

/* their comparison tables */
.tbl { max-width: 100%; margin: 22px 0; overflow-x: auto; border-radius: 22px; border: 1px solid var(--line); background: var(--white); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.tbl th, .tbl td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th { font: 700 14px/1.3 var(--f); letter-spacing: .02em; background: var(--paper); }
.tbl tbody th { font-weight: 600; white-space: nowrap; }
.tbl td { color: var(--ink-2); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }

@media (max-width: 1000px) {
  .art { grid-template-columns: minmax(0, 1fr); }
  .art__toc { display: none; }
  .art__body { margin: 0 auto; }
}
@media (max-width: 900px) {
  .ah { grid-template-columns: minmax(0, 1fr); }
  .ah__pic { max-width: 620px; }
  .more-read__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .art__card { grid-template-columns: 64px minmax(0, 1fr); }
  .art__card img { width: 64px; }
  .tbl tbody th { white-space: normal; }
}

/* ================= section front pages (hubs) ================= */
.hh__top { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.hh__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.hh__for { color: var(--accent-ink, var(--accent)); }
.hh__for::before { background: var(--accent); }
.hh__h { font-size: clamp(44px, 8.4vw, 140px); line-height: .9; letter-spacing: -.055em; }
.hh__h .v, .hh__h .b { white-space: nowrap; }
@media (max-width: 760px) { .hh__h { font-size: 12vw; } }
.hh__h .b { color: var(--accent); }
/* (a split hero's column stops growing at 580px; past ~1480px wide the headline kept growing and ran under the card
   beside it: "Make wellness", "weight loss." Launch audit, 2026-10-16) */
@media (min-width: 761px) { .hh__split .hh__h { font-size: clamp(44px, 8.4vw, 124px); } }
.hh__tag { margin-top: 18px; font: 300 clamp(22px, 2.2vw, 32px)/1.2 var(--f); letter-spacing: -.02em; max-width: 30ch; }
.hh__lede { margin-top: 14px; max-width: 58ch; }
.hh__lede p { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); }
.hh .cta { margin-top: 24px; }
.hh .sh__trust { margin-top: 18px; }

/* every bag (or vial) standing on one line, each a link to its page */
.shelf-line { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(2px, .6vw, 10px); margin-top: clamp(36px, 4vw, 56px); padding-bottom: 34px; }
.shelf-line::after { content: ''; position: absolute; left: 0; right: 0; bottom: 32px; height: 2px; border-radius: 2px; background: var(--ink); }
.shelf-line li { flex: 1 1 0; min-width: 0; max-width: 110px; }
.shelf-line a { position: relative; display: block; text-decoration: none; }
.shelf-line img { width: 100%; height: auto; transform-origin: 50% 100%; transition: transform .45s var(--ease), filter .45s; filter: drop-shadow(0 14px 10px rgba(14,16,19,.14)); }
.shelf-line a:hover img, .shelf-line a:focus-visible img { transform: translateY(-14px) scale(1.05); filter: drop-shadow(0 26px 22px color-mix(in srgb, var(--accent, #087a93) 45%, transparent)); }
.shelf-line span { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap; font: 600 11.5px/1 var(--f); color: var(--mute); transition: color .3s; }
.shelf-line a:hover span { color: var(--ink); }
.shelf-line--vials li { max-width: 86px; }
/* the drip hub's row holds all nineteen bags on the new menu (2026-09-25): a name shows on the bag under the pointer,
   like the home page's lineup; the menu below names every one */
.shelf-line:not(.shelf-line--vials) li:not(:hover) span { opacity: 0; }
.shelf-line li:hover span { z-index: 1; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 26px; }
.filters button { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: 600 14.5px/1 var(--f); cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.filters button:hover { border-color: rgba(14,16,19,.3); }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
[data-grid] > [hidden] { display: none; }
.dcard--plain { grid-template-columns: minmax(0, 1fr); }

.wband { padding: clamp(24px, 3vw, 40px) var(--pad) clamp(60px, 7vw, 100px); background: var(--white); }
.wband__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 34px; background: radial-gradient(700px 400px at 10% 0%, rgba(185,174,255,.3), transparent 70%), linear-gradient(135deg, #2d2270, #16113b); color: #fff; }
.wband h2 { font: 700 clamp(30px, 3.4vw, 48px)/1.05 var(--f); letter-spacing: -.04em; }
.wband p:not(.label) { margin-top: 14px; color: rgba(255,255,255,.8); }
.wband p a { color: var(--violet-l); font-weight: 600; }
.wband__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wcard { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 18px 16px 12px; border-radius: 22px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; text-decoration: none; transition: background-color .3s, transform .3s var(--ease); }
.wcard:hover { background: rgba(255,255,255,.14); transform: translateY(-3px); }
.wcard img { width: 70px; height: auto; }
.wcard b { display: block; font: 800 21px/1.1 var(--f); letter-spacing: -.02em; }
.wcard i { display: block; margin-top: 4px; font: 400 13.5px/1.4 var(--f); font-style: normal; opacity: .8; }
.wcard em { display: block; margin-top: 8px; font: 700 18px/1 var(--f); font-style: normal; color: var(--violet-l); }
.wl-cards { display: grid; gap: 12px; }
.wcard--light { background: var(--white); color: var(--ink); border-color: rgba(85,65,173,.14); grid-template-columns: 96px minmax(0, 1fr); }
.wcard--light img { width: 96px; }
.wcard--light:hover { background: var(--lilac); }
.wcard--light em { color: var(--violet-d); font-size: 22px; }
.wl-note { font-size: 14px; color: var(--ink-2); }

/* symptoms: "I'm feeling..." */
.feelpick { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.feelpick__list { margin-top: 18px; border-top: 1px solid var(--line); }
.feelpick__list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 4px; border-bottom: 1px solid var(--line); font: 300 clamp(26px, 2.6vw, 40px)/1.15 var(--f); letter-spacing: -.03em; color: rgba(14,16,19,.55); text-decoration: none; transition: color .25s, padding-left .3s var(--ease); }
.feelpick__list a svg { opacity: 0; color: var(--accent); transition: opacity .25s, transform .3s var(--ease); }
.feelpick__list a:hover, .feelpick__list a:focus-visible, .feelpick__list a[aria-current="true"] { color: var(--ink); font-weight: 700; padding-left: 10px; }
.feelpick__list a:hover svg, .feelpick__list a[aria-current="true"] svg { opacity: 1; transform: translateX(4px); }
.feelpick__note { margin-top: 20px; font-size: 16px; color: var(--ink-2); max-width: 56ch; }
.feelpick__pic { aspect-ratio: 4 / 4.8; border-radius: 32px; overflow: hidden; background: #1d2126; box-shadow: 0 60px 100px -60px rgba(8,122,147,.55); }
.feelpick__pic img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
.feelpick__pic.swap img { opacity: .2; }

/* events: every kind of group */
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 220px); gap: 12px; margin-top: clamp(32px, 4vw, 52px); }
.mosaic__i--0 { grid-column: span 2; grid-row: span 2; }
.mosaic__i--3 { grid-column: span 2; }
.mosaic a { position: relative; display: block; height: 100%; border-radius: 24px; overflow: hidden; color: #fff; text-decoration: none; background: #1b1f24; }
.mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.mosaic a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.7)); }
.mosaic a:hover img { transform: scale(1.05); }
.mosaic span { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; display: flex; align-items: center; gap: 8px; font: 700 clamp(17px, 1.5vw, 21px)/1.2 var(--f); letter-spacing: -.01em; }
.mosaic__i--0 span { font-size: clamp(22px, 2.2vw, 30px); }
.hh--ev .eh__facts { margin-top: 24px; }

/* the service area: Arizona and every city */
.azmap-wrap { position: relative; padding: clamp(16px, 2vw, 28px); border-radius: 34px; background: #f3fbfc; border: 1px solid rgba(8,122,147,.14); }
.azmap { width: 100%; height: auto; max-height: 72vh; }
.azmap .st { fill: #fff; stroke: rgba(14,16,19,.35); stroke-width: 2; stroke-linejoin: round; }
.azmap .city { fill: var(--aqua); fill-opacity: .8; stroke: var(--aqua-d); stroke-width: .8; transition: fill .2s; }
.azmap a:hover .city, .azmap a:focus .city { fill: var(--pink); fill-opacity: 1; }
.azmap .studio circle { fill: var(--ink); }
.azmap .studio .pulse { fill: var(--aqua); opacity: .35; transform-box: fill-box; transform-origin: center; animation: pin 2.4s ease-out infinite; }
.azmap-wrap figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.azmap__key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--aqua); }
.azmap__key--studio { border-radius: 50%; background: var(--ink); margin-left: 8px; }
.loc { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 18px; align-items: center; margin: 26px 0 0; padding: 16px; border-radius: 22px; background: var(--white); max-width: 560px; }
.loc img { width: 124px; height: 124px; object-fit: cover; border-radius: 16px; }
.loc__state { font: 600 12px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-d); }
.loc__name { margin-top: 4px; font: 700 22px/1.1 var(--f); letter-spacing: -.02em; }
.loc p:not(.loc__state):not(.loc__name) { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.loc a { text-decoration-color: var(--aqua); text-underline-offset: 3px; }
.regions { background: var(--white); }
.regions__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.region { padding: 26px; border-radius: 26px; background: var(--paper); }
.region h3 { font: 700 22px/1.15 var(--f); letter-spacing: -.02em; }
.region > p { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.region__tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--mint); color: var(--aqua-d) !important; font-weight: 600; font-size: 13px !important; }
.region ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.region a { display: inline-block; padding: 8px 13px; border-radius: 999px; background: var(--white); font: 600 14px/1 var(--f); text-decoration: none; transition: background-color .2s, color .2s; }
.region a:hover { background: var(--aqua-d); color: #fff; }
.next { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(90px, 10vw, 150px) var(--pad); background: var(--paper); }
.next .usmap { width: 100%; height: auto; overflow: visible; }
.next .usmap path { fill: #e6e4de; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.next .usmap path.open { fill: var(--aqua); }
.next .usmap__pin circle { fill: var(--ink); }
.next .usmap__pin .usmap__pulse { opacity: .35; transform-box: fill-box; transform-origin: center; animation: pin 2.4s ease-out infinite; }
.next h2 { font-size: clamp(48px, 5.6vw, 90px); line-height: .9; letter-spacing: -.05em; }
.next h2 .b { color: var(--aqua-d); }
.next p:not(.label) { margin: 18px 0 26px; font-size: clamp(17px, 1.35vw, 19.5px); color: var(--ink-2); max-width: 44ch; }

/* guides and the blog */
.guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.guides a { display: grid; gap: 10px; height: 100%; padding: clamp(24px, 2.6vw, 34px); border-radius: 26px; background: var(--paper); text-decoration: none; transition: background-color .3s, transform .3s var(--ease); }
.guides a:hover { background: var(--mint); transform: translateY(-3px); }
.guides__n { font: 700 clamp(24px, 2.2vw, 32px)/1.1 var(--f); letter-spacing: -.035em; }
.guides__d { font-size: 16px; color: var(--ink-2); }
.guides__go { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--f); color: var(--aqua-d); }
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.posts a { display: grid; grid-template-rows: auto auto 1fr; gap: 10px; height: 100%; padding: 26px; border-radius: 24px; background: var(--paper); text-decoration: none; transition: background-color .3s, transform .3s var(--ease); }
.posts a:hover { background: var(--blush); transform: translateY(-3px); }
.posts__date { font: 600 12px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--pink-d); }
.posts__t { font: 700 21px/1.2 var(--f); letter-spacing: -.02em; }
.posts__d { font-size: 15px; color: var(--ink-2); }

@media (max-width: 1100px) {
  .regions__grid, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf-line li:not(:hover) span { opacity: 0; }
}
@media (max-width: 900px) {
  .hh__split, .feelpick, .wband__in, .next { grid-template-columns: minmax(0, 1fr); }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic__i--0 { grid-column: span 2; grid-row: span 1; }
  .mosaic__i--3 { grid-column: span 1; }
  .guides { grid-template-columns: minmax(0, 1fr); }
  .feelpick__pic { max-width: 560px; aspect-ratio: 5 / 4; order: -1; }
}
@media (max-width: 760px) {
  /* the swipe row runs edge to edge, its first bag on the page edge like every other band (the home's bag row too) */
  .shelf-line { justify-content: flex-start; overflow-x: auto; padding: 22px var(--pad) 44px; margin-inline: calc(-1 * var(--pad)); scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .shelf-line::-webkit-scrollbar { display: none; }
  .shelf-line::after { display: none; }
  .shelf-line li { flex: 0 0 76px; scroll-snap-align: center; }
  .shelf-line li span { opacity: 1 !important; white-space: normal; width: 72px; text-align: center; line-height: 1.2; }
  .shelf-line { padding-bottom: 58px; }
  .regions__grid, .posts, .wband__cards { grid-template-columns: minmax(0, 1fr); }
  .mosaic { grid-auto-rows: 150px; }
  .loc { grid-template-columns: 92px minmax(0, 1fr); }
  .loc img { width: 92px; height: 92px; }
}

/* ================= the practical pages ================= */
.jump { margin-top: clamp(28px, 3vw, 40px); }
.jump ul { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { display: inline-block; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.75); border: 1px solid var(--line); font: 600 14.5px/1 var(--f); text-decoration: none; transition: background-color .2s, color .2s; }
.jump a:hover { background: var(--ink); color: #fff; }
.ptable { background: var(--paper); }
.ptable:nth-of-type(even) { background: var(--white); }
.ptable__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ptable__grid > header { position: sticky; top: calc(var(--hd) + 32px); }
.ptable__grid > header > p:not(.label) { margin-top: 14px; font-size: 16.5px; color: var(--ink-2); }
.ptable .tbl td { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ptable .tbl tbody th { white-space: normal; }
.ptable__bags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 22px; }
.ptable__bags a { display: block; width: 34px; transition: transform .3s var(--ease); }
.ptable__bags a:hover { transform: translateY(-4px); }
.ptable__bags img { width: 100%; height: auto; }
.ptable__more { margin-top: 18px; }
.twocards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.twocards .card { padding: clamp(26px, 3vw, 40px); }
.twocards .card__h { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 8px; }
.twocards .dots { margin-top: 12px; }
.plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 40px); border-radius: 30px; background: var(--paper); }
.plan--pop { background: linear-gradient(160deg, #ecf9fc, #d5f0f6); box-shadow: 0 40px 80px -50px rgba(8,122,147,.6); }
.plan__pop { position: absolute; top: 20px; right: 20px; z-index: 1; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 11.5px/1 var(--f); letter-spacing: .08em; text-transform: uppercase; }
.plan h3 { font: 700 26px/1.1 var(--f); letter-spacing: -.03em; }
/* (on a phone the badge sat on "VIP Membership": there it takes its own line above the name) */
@media (max-width: 600px) { .plan__pop { position: static; align-self: flex-start; margin-bottom: 14px; } }
.plan__price { margin: 12px 0 20px; font: 500 17px/1 var(--f); color: var(--ink-2); }
.plan__price b { font: 800 clamp(48px, 4.6vw, 68px)/1 var(--f); letter-spacing: -.05em; color: var(--ink); margin-right: 6px; }
.plan .ticks { margin-bottom: 26px; }
.plan .ticks li { font-size: 16px; }
.plan .ticks li::before { background: var(--aqua-d); }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plans__note { margin-top: 22px; padding: 16px 20px; border-radius: 18px; background: var(--paper); font-size: 15px; color: var(--ink-2); }
.hh__split .nudge__card { perspective: 1200px; }
.about__film { position: relative; margin-top: clamp(28px, 3.6vw, 48px); aspect-ratio: 2.25 / 1; border-radius: var(--r); overflow: hidden; background: #15181c; box-shadow: 0 60px 120px -70px rgba(8,122,147,.55); }
.about__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brandline { padding: clamp(80px, 9vw, 140px) var(--pad); background: var(--paper); text-align: center; }
.brandline__line { font-size: clamp(40px, 7vw, 120px); line-height: .95; letter-spacing: -.05em; text-wrap: balance; }
.brandline .b--a { color: var(--aqua-d); }
.brandline .b--p { color: var(--pink); }
.brandline .b--v { color: var(--violet); }
.brandline__sub { max-width: 640px; margin: 26px auto 0; }
.brandline__sub p { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); }
.brandline__sub p + p { margin-top: 12px; }
.team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(90px, 10vw, 150px) var(--pad); background: var(--white); }
.team__pic { aspect-ratio: 4 / 3.4; border-radius: 30px; background: #1d2126; }
.team h2 { font: 700 clamp(36px, 4.2vw, 62px)/1 var(--f); letter-spacing: -.045em; text-wrap: balance; }
.team h2 em { font-style: normal; font-weight: 200; color: var(--aqua-d); }
.team__text > p:not(.label):not(.team__score) { margin-top: 18px; font-size: clamp(17px, 1.35vw, 19px); color: var(--ink-2); max-width: 50ch; }
.team__rev { display: grid; gap: 16px; margin-top: 26px; }
.team__rev blockquote { padding-left: 18px; border-left: 3px solid var(--aqua); }
.team__rev p { font-size: 17px; }
.team__rev footer { margin-top: 6px; font-size: 13px; color: var(--mute); }
.team__score { margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.team__score b { font: 800 26px/1 var(--f); color: var(--aqua-d); margin-right: 6px; }
.nurses { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(40px, 6vw, 100px) var(--pad); background: linear-gradient(135deg, #0b3b44 0%, var(--dark) 70%); color: #fff; }
.nurses__film { aspect-ratio: 9 / 16; max-height: 640px; border-radius: 30px; overflow: hidden; background: #000; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.nurses__film video { width: 100%; height: 100%; object-fit: cover; }
.nurses h1 { font-size: clamp(50px, 6.4vw, 104px); line-height: .9; letter-spacing: -.05em; text-wrap: balance; }
.nurses h1 .b { color: var(--aqua); }
.nurses__text > p:not(.label) { margin-top: 18px; max-width: 50ch; font-size: clamp(17px, 1.35vw, 19.5px); color: rgba(255,255,255,.85); }
.nurses__req { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 8px; }
.nurses__req li { padding: 9px 14px; border-radius: 999px; font-size: 14.5px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.nurses__text .btn { margin-top: 14px; }
.crumbs--on ol, .crumbs--on a { color: rgba(255,255,255,.7); }
.crumbs--on li + li::before { color: rgba(255,255,255,.3); }
.apply { background: var(--white); }
.apply__in { max-width: 860px; padding: clamp(28px, 4vw, 56px); border-radius: 32px; background: var(--mint); }
.apply__in > p:not(.label) { margin: 16px 0 24px; font-size: 17px; color: var(--ink-2); }
.reach { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 3.6vw, 48px); }
.reach a { display: grid; gap: 6px; height: 100%; padding: 24px; border-radius: 24px; background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.9); text-decoration: none; box-shadow: 0 30px 60px -44px rgba(14,16,19,.4); transition: transform .3s var(--ease), background-color .3s; }
.reach a:hover { transform: translateY(-3px); background: #fff; }
.reach__k { font: 600 12px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-d); }
.reach b { font: 700 clamp(18px, 1.6vw, 22px)/1.2 var(--f); letter-spacing: -.02em; overflow-wrap: anywhere; }
.reach i { font: 400 14px/1.4 var(--f); font-style: normal; color: var(--ink-2); }
.visitcard__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.visitcard__pic { aspect-ratio: 4 / 3.3; border-radius: 30px; background: #1d2126; }
.visitcard__grid p:not(.label) { margin-top: 12px; font-size: 17px; color: var(--ink-2); }
.visitcard__addr a { font: 600 20px/1.3 var(--f); color: var(--ink); text-decoration-color: var(--aqua); text-underline-offset: 4px; }
.visitcard .cta { margin-top: 24px; }
.booker__frame { border-radius: 26px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: 0 40px 80px -60px rgba(14,16,19,.4); }
.booker iframe { display: block; width: 100%; height: min(1100px, 150vh); border: 0; }
.booker__alt { margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.booker__alt a { color: var(--aqua-d); font-weight: 600; }

@media (max-width: 1100px) {
  .reach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans__grid { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
}
@media (max-width: 900px) {
  .ptable__grid, .twocards, .team, .visitcard__grid, .nurses { grid-template-columns: minmax(0, 1fr); }
  .ptable__grid > header { position: static; }
  .nurses__film { max-width: 300px; }
  .nurses--page .nurses__film { order: 2; max-height: 420px; max-width: 240px; }
  .about__film { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .reach { grid-template-columns: minmax(0, 1fr); }
}

/* a short line and its description, as a list of terms */
.pairs { display: grid; gap: 10px; margin: 18px 0; }
.pairs div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 6px 24px; padding: 16px 18px; border-radius: 18px; background: var(--white); }
.sec--alt .pairs div { background: var(--paper); }
.pairs dt { font: 700 17px/1.3 var(--f); }
.pairs dd { font-size: 15.5px; color: var(--ink-2); }

/* ================= an event page ================= */
.eh__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.eh__for { color: var(--accent-ink, var(--accent)); }
.eh__for::before { background: var(--accent); }
.eh__h { font: 800 clamp(46px, 6.2vw, 100px)/.92 var(--f); letter-spacing: -.05em; text-wrap: balance; color: var(--ink); }
.eh__h .v { font-weight: 200; color: var(--accent); }
.eh__tag { margin-top: 16px; font: 300 clamp(22px, 2vw, 30px)/1.2 var(--f); letter-spacing: -.02em; }
.eh__lede p { font-size: clamp(17px, 1.3vw, 19px); color: var(--ink-2); }
.eh__side .cta { margin-top: 22px; }
.eh__photo { position: relative; margin-top: clamp(28px, 3.6vw, 48px); aspect-ratio: 2.3 / 1; border-radius: var(--r); background: #1d2126; box-shadow: 0 60px 120px -70px color-mix(in srgb, var(--accent) 70%, transparent); }
.eh__photo img { object-position: var(--pos, 50% 40%); }
.eh__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--line); }
.eh__facts li { padding: 18px 20px 4px 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.eh__facts li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.eh__facts b { display: block; margin-bottom: 4px; font: 800 clamp(24px, 2.2vw, 32px)/1.05 var(--f); letter-spacing: -.03em; color: var(--accent); }

.plan { background: var(--paper); }
.plan__line { position: relative; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.plan__line::before { content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 8px, transparent 8px 16px); }
.plan__step { position: relative; padding: 0 4px; }
.plan__label { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 60px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 14px/1 var(--f); letter-spacing: .1em; text-transform: uppercase; }
.plan__step h3 { margin-top: 22px; font: 700 clamp(22px, 1.9vw, 27px)/1.15 var(--f); letter-spacing: -.025em; }
.plan__step p { margin-top: 10px; font-size: 16px; color: var(--ink-2); }
.plan__step .plan__label { color: #fff; } /* the rule above had turned the pill's words dark grey on the pink */
.nudge .label { color: var(--ink-2); }
.dpicks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.dpicks__label { width: 100%; font: 600 11.5px/1.3 var(--f); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); }
.dpick { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--room, var(--white)); font: 600 14.5px/1.2 var(--f); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; }
.dpick img { width: 28px; height: 40px; object-fit: contain; padding: 2px; border-radius: 999px; background: rgba(255,255,255,.7); }
a.dpick:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(14,16,19,.4); }
.card--picks .dpicks { margin-top: 18px; }

.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chipset li { padding: 10px 16px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 15.5px; }
.sec--alt .chipset li { background: var(--paper); }

.strip { padding: clamp(60px, 7vw, 100px) 0 clamp(40px, 5vw, 70px) var(--pad); background: var(--white); overflow: hidden; }
.strip__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; padding-right: var(--pad); }
.strip__pic--1 { margin-top: 48px; }
.strip__pic { aspect-ratio: 4 / 5; border-radius: 24px; background: #1d2126; }

.strip__cap { margin-top: 18px; font-size: 14.5px; color: var(--mute); }
.strip__cap a { color: var(--accent-ink, var(--accent)); font-weight: 600; }

.otherev { background: var(--paper); }
.otherev__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.otherev__grid a { position: relative; display: block; height: 180px; border-radius: 22px; overflow: hidden; color: #fff; text-decoration: none; background: #1b1f24; }
.otherev__grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.otherev__grid a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.66)); }
.otherev__grid a:hover img { transform: scale(1.05); }
.otherev__grid span { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; font: 700 19px/1.2 var(--f); letter-spacing: -.01em; }

@media (max-width: 1100px) {
  .eh__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .eh__top { grid-template-columns: minmax(0, 1fr); }
  .eh__photo { aspect-ratio: 4 / 3; }
  .plan__line { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .plan__line::before { left: 29px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--accent) 45%, transparent) 0 8px, transparent 8px 16px); }
  .otherev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .eh__photo { aspect-ratio: 4 / 3.4; }
  .eh__facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .pairs div { grid-template-columns: minmax(0, 1fr); }
  .strip__row { grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .strip__pic { scroll-snap-align: start; }
  .strip__pic--1 { margin-top: 0; }
  .otherev__grid { grid-template-columns: minmax(0, 1fr); }
  .eh .cta .btn { flex: 1 1 auto; }
}

/* ---------- city pages, round five: the redesign (on three sample cities first; city.mjs REDESIGN) ----------
   Ian: "the location pages need work... design-wise". The home page's language: every section opens centered, less
   reading, the city's name big, a house call on film beside the city's own map, one line per neighborhood, the
   local events people book around, one list of who we see instead of two. */
.page-city--new .sec__head { margin-inline: auto; text-align: center; }
.page-city--new .sec__head .label, .page-city--new .faq__head .label { justify-content: center; }
.page-city--new .sec__head > p:not(.label) { max-width: 60ch; margin: 16px auto 0; font-size: 17px; color: var(--ink-2); text-wrap: balance; }
.page-city--new .faq__head { margin-inline: auto; text-align: center; }
.cx { padding: clamp(24px, 3vw, 44px) var(--pad) clamp(64px, 7vw, 104px); background: linear-gradient(180deg, var(--room) 0%, var(--paper) 72%); }
.cx__top { container-type: inline-size; display: grid; justify-items: center; max-width: 940px; margin: 0 auto; text-align: center; }
.cx__top .crumbs ol { justify-content: center; }
.cx__for { color: var(--accent-ink, var(--accent)); }
.cx__h { width: 100%; letter-spacing: -.055em; }
.cx__h .v { display: block; margin-bottom: .12em; font-size: clamp(28px, 3.1vw, 46px); line-height: 1; letter-spacing: -.03em; }
.cx__h .b { display: block; font-size: min(var(--cap, 150px), calc(100cqi / var(--ems, 5.6))); line-height: .9; color: var(--accent); }
.cx__lede { max-width: 58ch; margin-top: 20px; font-size: clamp(17px, 1.3vw, 19.5px); color: var(--ink-2); text-wrap: balance; }
.cx__top .cta { justify-content: center; margin-top: 26px; }
.cx__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 22px; font-size: 14.5px; color: var(--ink-2); }
.cx__facts li { position: relative; padding-left: 18px; }
.cx__facts li::before { content: ''; position: absolute; left: 1px; top: .45em; width: 9px; height: 9px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.cx__stage { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1fr) minmax(0, .6fr); gap: 14px; max-width: 1240px; margin: clamp(36px, 4vw, 56px) auto 0; }
.cx__film { position: relative; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #15181c; box-shadow: 0 50px 90px -60px rgba(14,16,19,.6); }
.cx__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx__map { aspect-ratio: auto; height: 100%; }
/* neighborhoods: one line each, and the drips each one books */
.hoods { background: var(--white); }
.hoods__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 1240px; margin: 0 auto; }
.hood { flex: 1 1 290px; max-width: 400px; padding: 26px 24px 24px; border-radius: 24px; background: var(--paper); }
.hood h3 { display: flex; align-items: center; gap: 10px; font: 700 21px/1.2 var(--f); letter-spacing: -.02em; }
.hood h3::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.hood p { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }
.hood__pop { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px !important; }
.hood__pop a { padding: 6px 12px; border-radius: 999px; background: var(--room); color: var(--ink); font: 600 13px/1.2 var(--f); text-decoration: none; }
.hood__pop a:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* what's on: the local events people book around (src/data/local-events.mjs) */
.whatson { background: linear-gradient(135deg, #0b3b44 0%, var(--dark) 72%); color: #fff; }
.whatson .sec__head > p:not(.label), .whatson .sec__intro p { color: rgba(255,255,255,.78); }
.whatson .sec__intro a { color: var(--aqua-l); }
.whatson .label { color: rgba(255,255,255,.74); }
.whatson__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; max-width: 1240px; margin: 0 auto; }
.ev2 { display: grid; align-content: start; gap: 8px; padding: 28px 26px; border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.ev2__when { font: 700 12.5px/1.2 var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--aqua-l); }
.ev2__name { font: 700 clamp(22px, 1.9vw, 27px)/1.1 var(--f); letter-spacing: -.02em; }
.ev2__where { font-size: 14px; color: rgba(255,255,255,.6); }
.ev2__line { font-size: 15.5px; color: rgba(255,255,255,.84); }
.ev2 .more { margin-top: 8px; color: var(--aqua-l); }
/* who we see: one list where there were two */
.occ__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; max-width: 1000px; margin: 0 auto; }
.occ__list li { position: relative; padding: 15px 0 15px 28px; border-bottom: 1px solid var(--line); font-size: 16.5px; }
.occ__list li::before { content: ''; position: absolute; left: 3px; top: 1.45em; width: 10px; height: 10px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.nearby--c .nearby__list { max-width: 900px; margin: 0 auto; }
@media (max-width: 900px) {
  .cx__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx__map { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 11; height: auto; }
  .cx__film { aspect-ratio: 3 / 4; }
}
@media (max-width: 760px) {
  .occ__list { grid-template-columns: minmax(0, 1fr); }
  .cx__map { aspect-ratio: 1; }
  .cx__film { border-radius: 22px; }
}

/* ---------- the studio, room by room (contact, about): their studio shoot, round six ---------- */
.studiogal { background: var(--white); }
.studiogal .sec__head { margin-inline: auto; text-align: center; }
.studiogal .sec__head .label { justify-content: center; }
.studiogal .sec__head > p:not(.label) { max-width: 60ch; margin: 16px auto 0; font-size: 17px; color: var(--ink-2); }
.studiogal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1240px; margin: 0 auto; }
.studiogal figure { display: grid; gap: 10px; }
.studiogal img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; }
.studiogal figcaption { font: 600 14px/1.3 var(--f); color: var(--ink-2); text-align: center; }
@media (max-width: 760px) { .studiogal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .studiogal img { border-radius: 16px; } }

/* ---------- the Arizona events calendar (round six) and the links to it ---------- */
.whatson__all { margin-top: 28px; text-align: center; }
.whatson__all .more { color: var(--aqua-l); }
.azcal { background: var(--white); }
.azcal__in { display: grid; gap: clamp(36px, 4vw, 56px); max-width: 1160px; margin: 0 auto; }
.azcal__month { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.azcal__m { position: sticky; top: calc(var(--hd) + 24px); font: 800 clamp(34px, 3.4vw, 52px)/1 var(--f); letter-spacing: -.04em; color: var(--accent); }
.azcal__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.ev2--light { background: var(--paper); border-color: transparent; color: var(--ink); }
.ev2--light .ev2__when { color: var(--accent-ink, var(--accent)); }
.ev2--light .ev2__where { color: var(--mute); }
.ev2--light .ev2__line { color: var(--ink-2); }
.ev2--light .more { color: var(--accent-ink, var(--accent)); }
.azcal__note { max-width: 1160px; margin: 44px auto 0; font-size: 14.5px; color: var(--mute); text-align: center; }
.azlink { padding-top: 0; }
.azlink__in { display: grid; justify-items: center; gap: 8px; max-width: 900px; margin: 0 auto; padding: 36px 28px; border-radius: 28px; background: var(--room); text-align: center; text-decoration: none; color: var(--ink); transition: transform .3s var(--ease); }
.azlink__in:hover { transform: translateY(-2px); }
.azlink__in .label { margin: 0; justify-content: center; }
.azlink__in b { font: 700 clamp(26px, 2.6vw, 38px)/1.1 var(--f); letter-spacing: -.03em; }
.azlink__in span:last-child { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
@media (max-width: 760px) { .azcal__month { grid-template-columns: minmax(0, 1fr); gap: 14px; } .azcal__m { position: static; } }

/* ---------- IV add-ons as cards (round six): their vial renders, one plain line each ---------- */
.addons2 { background: var(--paper); }
.addons2__h { max-width: 1240px; margin: 34px auto 6px; font: 700 clamp(22px, 2vw, 28px)/1.15 var(--f); letter-spacing: -.02em; }
.addons2__h:first-of-type { margin-top: 0; }
.addons2__note { max-width: 1240px; margin: 0 auto 14px; font-size: 15px; color: var(--mute); }
.addons2 .pgrid { max-width: 1240px; margin: 14px auto 0; }
.pcard--add .pcard__name { color: var(--aqua-d); }
.pcard--add:hover { background: var(--mint); box-shadow: 0 30px 60px -36px rgba(8,122,147,.45); }
.pcard__also { display: block; margin-top: 3px; font: 600 12.5px/1.3 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.pcard__drop { display: block; width: 26px; height: 26px; margin: 0 auto; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--aqua); opacity: .8; }

/* ---------- round six, part two (2026-09-26) ---------- */
/* the medical sign-off under the headline of every IV page (their approved pages: "Medically cleared by Mellisa
   Kerchief, NP, our Lead Nurse Practitioner") */
.care { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.care svg { flex: none; color: var(--accent, var(--aqua-d)); }
.care b { font-weight: 700; color: var(--ink); }

/* Arizona event pages (/events/<event>-iv-therapy/): the event big, its year light, "IV therapy" under it */
.evx__h .evx__iv { display: block; margin-top: .2em; font-size: .34em; font-weight: 300; letter-spacing: -.02em; color: var(--ink-2); }
.eh__photo--film { overflow: hidden; }
.eh__photo--film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evx .eh__facts b { font-size: clamp(20px, 1.9vw, 28px); }
/* sections open centered (Ian's taste); lists, steps and cards stay left inside */
.page-azevent .sec__head { margin-inline: auto; text-align: center; }
.page-azevent .sec__head .label, .page-azevent .faq__head .label { justify-content: center; }
.page-azevent .faq__head { margin-inline: auto; text-align: center; }
.page-azevent .sec__head > p:not(.label), .page-azevent .sec__intro p { margin-inline: auto; text-wrap: balance; }

/* quick facts, as a ticket: the event's room color, notched at the fold */
.evticket { background: var(--white); }
.evticket__card { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px clamp(32px, 5vw, 80px); max-width: 1240px; margin: 0 auto; padding: clamp(28px, 3.6vw, 52px); border-radius: var(--r); background: var(--room); }
.evticket__card::before, .evticket__card::after { content: ''; position: absolute; left: calc(40% - 14px); width: 28px; height: 28px; border-radius: 50%; background: var(--white); }
.evticket__card::before { top: -14px; }
.evticket__card::after { bottom: -14px; }
.page-azevent .evticket__head { text-align: left; }
.evticket__head .sec__h { margin-top: 10px; }
.evticket__note { margin-top: 16px; font-size: 14.5px; color: var(--ink-2); }
.evticket__list { display: grid; gap: 0; border-left: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent); padding-left: clamp(24px, 3vw, 44px); }
.evticket__list div { display: grid; grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); }
.evticket__list div:last-child { border-bottom: 0; }
.evticket__list dt { font: 700 14px/1.35 var(--f); letter-spacing: .01em; color: var(--accent-ink, var(--accent)); }
.evticket__list dd { font-size: 15.5px; line-height: 1.45; color: var(--ink); }

/* the drips for the event: the add-ons line under the cards */
.evmenu__after { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 16px; color: var(--ink-2); }

/* the week, day by day */
.evweek__list { display: grid; gap: 12px; max-width: 980px; margin: 0 auto; counter-reset: day; }
.evweek__day { display: grid; grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr); gap: 20px clamp(20px, 3vw, 40px); padding: clamp(20px, 2.2vw, 28px); border-radius: 22px; background: var(--white); }
.evweek__when { align-self: start; padding: 8px 14px; border-radius: 999px; background: var(--room); font: 700 14px/1.3 var(--f); color: var(--accent-ink, var(--accent)); text-align: center; text-wrap: balance; }
.evweek__what h3 { font: 700 clamp(18px, 1.5vw, 21px)/1.3 var(--f); letter-spacing: -.01em; }
.evweek__drip { margin-top: 8px; font-size: 16px; }
.evweek__drip b { display: inline-block; margin-right: 8px; font: 700 12px/1 var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); }
.evweek__why { margin-top: 6px; font-size: 15px; color: var(--ink-2); }

/* where we deliver: an area each */
.evdeliver__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1240px; margin: 0 auto; }
.evdeliver__area { padding: clamp(22px, 2.4vw, 30px); border-radius: 24px; background: var(--white); }
.sec--alt .evdeliver__area { background: var(--paper); }
.evdeliver__area h3 { margin-bottom: 14px; font: 700 18px/1.3 var(--f); color: var(--accent-ink, var(--accent)); }
.evdeliver__area .chipset li { padding: 8px 13px; font-size: 14.5px; }
.evdeliver__after { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 16px; color: var(--ink-2); }

/* their Google reviews */
.evrev { background: var(--white); }
.evrev__score { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.evrev__score b { font: 800 24px/1 var(--f); color: var(--ink); }
.evrev .stars { display: inline-flex; gap: 4px; }
.evrev .stars i { width: 10px; height: 10px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--accent); }
.evrev__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1240px; margin: 0 auto; }
.evrev__q { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: clamp(24px, 2.6vw, 34px); border-radius: 26px; background: var(--room); }
.evrev__q p { font: 400 17.5px/1.5 var(--f); color: var(--ink); }
.evrev__q footer { font: 700 13px/1.3 var(--f); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); }

/* more events: twelve, four across */
.evmore .otherev__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.evmore .otherev__grid span i { display: block; margin-top: 4px; font: 500 13px/1.3 var(--f); font-style: normal; opacity: .85; }

@media (max-width: 1100px) {
  .evmore .otherev__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .evrev__grid { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
}
@media (max-width: 900px) {
  .evticket__card { grid-template-columns: minmax(0, 1fr); }
  .evticket__card::before, .evticket__card::after { display: none; }
  .evticket__list { border-left: 0; padding-left: 0; border-top: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent); padding-top: 8px; }
  .evdeliver__grid { grid-template-columns: minmax(0, 1fr); }
  .evmore .otherev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .evweek__day { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .evweek__when { justify-self: start; }
  .evticket__list div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* twelve cards stacked one per row was two phone screens of scrolling: two across, smaller type */
  .evmore .otherev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .evmore .otherev__grid a { height: 156px; border-radius: 18px; }
  .evmore .otherev__grid span { left: 12px; right: 12px; bottom: 12px; font-size: 15px; }
  .evmore .otherev__grid span i { font-size: 12px; }
}
.evdeliver__tail { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
/* a centered header (the new city pages): the sign-off centers as one line of words, the shield inline before them */
.cx .care { display: block; text-align: center; text-wrap: balance; }
.cx .care svg { display: inline-block; margin-right: 6px; vertical-align: -4px; }
.care b { white-space: nowrap; }

/* add-on pages (/boosters-and-add-ons/<slug>/): the drip page, with the vial in the bag's place */
.adh__vial { height: 78%; }
.adh__also { text-transform: none; letter-spacing: .02em; font-weight: 500; }
.adh__mark { position: relative; z-index: 2; width: clamp(150px, 16vw, 230px); aspect-ratio: 1; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 55%, #fff), var(--accent)); box-shadow: 0 50px 60px -30px color-mix(in srgb, var(--accent) 60%, transparent); animation: bob 5.5s ease-in-out infinite; }
.adh__mark--sm { width: 30px; box-shadow: none; animation: none; }
.addmore { background: var(--white); }
.addmore .sec__head { margin-inline: auto; text-align: center; }
.addmore .sec__head .label { justify-content: center; }
.addmore__list { justify-content: center; max-width: 980px; margin: 0 auto; }
.addmore__list a { text-decoration: none; color: inherit; }
.addmore__list li:hover { background: var(--room); }

/* coming soon (2026-09-26): the states opening next, striped in aqua; the key under the map names them */
.usmap path.soon { fill: url(#usmap-soon); }
.usmap__key { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 14px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.usmap__key > span { display: inline-flex; align-items: center; gap: 8px; }
.usmap__dot { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.usmap__dot--open { background: var(--aqua); }
.usmap__dot--soon { background: repeating-linear-gradient(45deg, #d7f1f7 0 3px, color-mix(in srgb, #1ab2d3 55%, #d7f1f7) 3px 6px); }

/* ---------- city page options (Ian 2026-09-26: "not really loving the map sketch as the main design feature. maybe as
   a secondary feature"): three openings, and the map steps down beside the nearby cities ---------- */
.optbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; padding: 10px var(--pad); background: var(--ink); color: #fff; font: 500 13.5px/1.2 var(--f); }
.optbar__t { margin-right: 6px; font: 700 11.5px/1.2 var(--f); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.optbar a { padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.09); color: #fff; text-decoration: none; }
.optbar a b { margin-right: 3px; color: var(--aqua-l); }
.optbar a[aria-current] { background: #fff; color: var(--ink); }
.optbar a[aria-current] b { color: var(--aqua-d); }
.optbar .optbar__all { background: none; text-decoration: underline; text-underline-offset: 3px; }

/* A: three of their films, edge to edge, the words on them */
.cx--films { position: relative; overflow: hidden; display: grid; align-content: center; min-height: min(900px, calc(100svh - var(--hd) - 44px)); padding-block: clamp(40px, 6vw, 84px); background: #0e1013; color: #fff; }
.cx__wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cx__wall video { width: 100%; height: 100%; object-fit: cover; }
.cx__wall { gap: 4px; background: #0e1013; }
.cx__shade { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 78% at 50% 50%, rgba(8,12,14,.74) 0%, rgba(8,12,14,.56) 58%, rgba(8,12,14,.34) 100%); }
.cx--films .cx__top { position: relative; z-index: 1; width: 100%; }
.cx--films .crumbs ol, .cx--films .crumbs a { color: rgba(255,255,255,.76); }
.cx--films .crumbs li + li::before { color: rgba(255,255,255,.35); }
.cx--films .cx__for { color: var(--aqua-l); }
.cx--films .cx__h .b { color: var(--aqua-l); }
.cx--films .cx__lede, .cx--films .cx__facts, .cx--films .care { color: rgba(255,255,255,.88); }
.cx--films .care b { color: #fff; }
.cx--films .care svg { color: var(--aqua-l); }
.cx--films .cx__facts li::before { background: var(--aqua-l); }

/* B: the words on the left, and where a nurse comes, in their own pictures, on the right */
.cx--split .cx__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; max-width: 1240px; margin: 0 auto; }
.cx--split .cx__top { justify-items: start; width: 100%; max-width: none; margin: 0; text-align: left; }
.cx--split .cx__top .crumbs ol, .cx--split .cx__top .cta, .cx--split .cx__facts { justify-content: flex-start; }
.cx--split .care { text-align: left; }
.cx__places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.place { position: relative; aspect-ratio: 1; border-radius: 26px; overflow: hidden; background: #15181c; box-shadow: 0 50px 90px -60px rgba(14,16,19,.6); }
.place img, .place video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* (the at-home film is a tall phone video: cropped square from its middle, the nurse lost her head; launch audit 10/16) */
.place video { object-position: 50% 15%; }
.place::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.62)); }
.place span { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; font: 700 clamp(18px, 1.55vw, 22px)/1.15 var(--f); letter-spacing: -.01em; color: #fff; }

/* C: the drips their own write-ups call popular here, on the first screen; the opening line follows them */
.cx__shelf { max-width: 1240px; margin: clamp(26px, 3vw, 40px) auto 0; text-align: center; }
.cx__after { display: grid; justify-items: center; max-width: 940px; margin: clamp(26px, 3vw, 40px) auto 0; text-align: center; }
.cx__after .cx__lede { margin-top: 0; }
.cx__shelf-h { justify-content: center; color: var(--accent-ink, var(--accent)); }
.shelf4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.shelf4 a { display: grid; justify-items: center; align-content: start; gap: 4px; height: 100%; padding: 28px 18px 26px; border-radius: 28px; background: linear-gradient(180deg, var(--room) 0%, var(--white) 88%); color: var(--ink); text-decoration: none; box-shadow: 0 40px 70px -56px rgba(14,16,19,.5); transition: transform .35s var(--ease); }
.shelf4 a:hover { transform: translateY(-4px); }
.shelf4__bag { display: block; height: clamp(160px, 15vw, 230px); margin-bottom: 14px; }
.shelf4__bag img { width: auto; height: 100%; filter: drop-shadow(0 24px 22px rgba(14,16,19,.18)); }
.shelf4 b { font: 700 19px/1.2 var(--f); letter-spacing: -.01em; text-wrap: balance; }
.shelf4 i { font-size: 14px; font-style: normal; color: var(--ink-2); }
.shelf4 em { margin-top: 8px; font: 700 15px/1 var(--f); font-style: normal; color: var(--accent-ink, var(--accent)); }
.cx__shelf-all { margin-top: 20px; }

/* the map, second: beside the nearby cities */
.nearby__split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1240px; margin: 0 auto; }
.page-city--new .nearby--map .sec__head { margin-inline: 0; text-align: left; }
.page-city--new .nearby--map .sec__head .label { justify-content: flex-start; }
.page-city--new .nearby--map .sec__head > p:not(.label) { margin-left: 0; }
.nearby--map .nearby__list { max-width: none; margin: 0; }
.nearby__mapfig { width: 100%; max-width: 460px; aspect-ratio: 1; justify-self: end; }

@media (max-width: 1000px) {
  /* B stacks, centered again: the words, then the four pictures */
  .cx--split .cx__split { grid-template-columns: minmax(0, 1fr); }
  .cx--split .cx__top { justify-items: center; max-width: 940px; margin: 0 auto; text-align: center; }
  .cx--split .cx__top .crumbs ol, .cx--split .cx__top .cta, .cx--split .cx__facts { justify-content: center; }
  .cx--split .care { text-align: center; }
  .cx--split .cx__places { max-width: 720px; width: 100%; margin: 0 auto; }
}
@media (max-width: 900px) {
  .shelf4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nearby__split { grid-template-columns: minmax(0, 1fr); }
  .page-city--new .nearby--map .sec__head { margin-inline: auto; text-align: center; }
  .page-city--new .nearby--map .sec__head .label { justify-content: center; }
  .page-city--new .nearby--map .sec__head > p:not(.label) { margin-inline: auto; }
  .nearby__mapfig { justify-self: center; max-width: 420px; }
}
@media (max-width: 760px) {
  /* one film on a phone: the house call, full screen */
  .cx__wall { grid-template-columns: minmax(0, 1fr); }
  .cx__wall video:not(:nth-child(2)) { display: none; }
  .cx--films .cx__shade { background: rgba(8,12,14,.6); }
  .place { border-radius: 20px; }
  .place span { left: 14px; right: 14px; bottom: 12px; font-size: 16px; }
  .shelf4 a { padding: 20px 12px 18px; border-radius: 22px; }
  .shelf4 b { font-size: 16.5px; }
  .shelf4 i { font-size: 13px; }
}
@media (max-width: 560px) {
  /* the options strip: the three choices only, on one line where it fits */
  .optbar { gap: 6px; padding: 8px 12px; }
  .optbar__t, .optbar .optbar__all { display: none; }
  .optbar a { padding: 6px 10px; font-size: 12.5px; }
}

/* ---------- the new states (round seven): coming soon, the quick facts, boosters, the maps ---------- */
.cx__soon { margin-top: 18px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 9%, #fff); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); font-size: 15.5px; line-height: 1.45; color: var(--ink); text-align: left; }
.cx__soon b { color: var(--accent-ink, var(--accent)); }
.sfacts { background: var(--white); }
.sfacts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; max-width: 1240px; margin: 0 auto; }
.sfacts__grid div { padding: 18px 20px; border-radius: 18px; background: var(--paper); }
.sfacts__grid dt { font: 700 12px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); }
.sfacts__grid dd { margin: 6px 0 0; font-size: 16px; color: var(--ink); }
.addons2__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; max-width: 1240px; margin: 0 auto; }
.addons2__grid a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; height: 100%; padding: 16px 18px; border-radius: 16px; background: var(--white); color: var(--ink); text-decoration: none; transition: box-shadow .3s; }
.addons2__grid a:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
.addons2__grid b { font: 700 16.5px/1.2 var(--f); }
.addons2__grid span { grid-column: 1; font-size: 14.5px; color: var(--ink-2); }
.addons2__grid svg { grid-column: 2; grid-row: 1 / span 2; color: var(--accent); }
.addons2__all { margin-top: 18px; text-align: center; }
.nearby__list a span i { display: block; margin-top: 3px; font: 500 13px/1.3 var(--f); font-style: normal; color: var(--mute); }
.citymap__zoom .nearpin { fill: rgba(8,122,147,.45); }
.citymap__zoom .mepin { fill: var(--pink); stroke: #fff; stroke-width: .6; }
.citymap__zoom .mepin__ring { fill: var(--pink); opacity: .18; }
.citymap.citymap--state { aspect-ratio: auto; display: grid; place-items: center; padding: 26px 26px 84px; }
.citymap__statemap { width: 100%; height: auto; max-height: 560px; overflow: visible; }
.citymap__statemap .st { fill: #eef6f7; stroke: rgba(14,16,19,.35); stroke-width: 3; stroke-linejoin: round; }
.citymap__statemap .town { fill: var(--aqua); fill-opacity: .8; stroke: var(--aqua-d); stroke-width: 1; vector-effect: non-scaling-stroke; }
.citymap__statemap .dot { fill: var(--aqua-d); }
/* a card that holds a table (their altitude and ski season tables) takes the whole row */
.page-state .card:has(table) { grid-column: 1 / -1; }
.page-state .card table { width: 100%; }
/* the four states opening next, under Arizona on the locations page */
.regions--soon { background: var(--paper); }
.regions--soon .region h3 a { color: inherit; text-decoration: none; }
.regions--soon .region h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* the opening's column never grows past its box: a name set too big overflows its line, not the whole column */
.cx__top { grid-template-columns: minmax(0, 1fr); }
.cx__top > * { max-width: 100%; }
/* an event with its own page links from the events band */
.ev2__name a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 4px; }
.ev2__name a:hover { text-decoration-color: currentColor; }

/* ---------- the site map (every page, grouped) ---------- */
.smap-hero .hh__top { padding-bottom: clamp(28px, 4vw, 48px); }
.smap__count { margin-top: 14px; font-size: 18px; color: var(--ink-2); }
.smap { background: var(--paper); }
.smap__grid { columns: 3 300px; column-gap: 16px; max-width: 1240px; margin: 0 auto; }
.smap__g { break-inside: avoid; margin: 0 0 16px; padding: 22px 22px 18px; border-radius: 22px; background: var(--white); }
.smap__g h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 700 19px/1.2 var(--f); letter-spacing: -.01em; margin-bottom: 10px; }
.smap__g h2 i { font: 600 13px/1 var(--f); font-style: normal; padding: 5px 9px; border-radius: 999px; background: var(--room, #dff2ee); color: var(--accent-ink, var(--aqua-d)); }
.smap__g ul { display: grid; gap: 2px; }
.smap__g a { display: block; padding: 5px 0; font-size: 14.5px; line-height: 1.35; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.smap__g a:hover { color: var(--aqua-d); }
.smap__sub { margin: 14px 0 4px; font: 700 12px/1.3 var(--f); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-d); }