/* ============================================================
Perennial Wellness & Longevity — refinement layer
------------------------------------------------------------
Load this AFTER your existing stylesheet:
cells carry no labels. Result on every phone:
both tier names AND both prices disappear, and each row-card
shows two unlabelled values with no way to tell which tier
is which. The most important conversion element on the site
is unreadable on mobile.
Needs a one-line HTML change too — see the .md file.
------------------------------------------------------------ */
@media (max-width: 640px) {
/* Restore the header as a standalone price band. */
.membership-table thead {
display: block;
}
.membership-table thead tr {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0 12px 16px;
border: 0;
background: none;
}
.membership-table thead th:first-child {
display: none; /* the "Feature" label is noise here */
}
.membership-table thead th {
padding: 16px 14px;
text-align: center;
border: 1px solid var(--line);
border-radius: var(--radius);
background: rgba(36, 79, 115, 0.06);
}
.membership-table thead th span {
font-size: 22px;
}
/* Label each value with its tier inside the row-cards. */
.membership-table tbody td::before {
content: attr(data-tier);
display: block;
margin-bottom: 4px;
color: var(--blue-deep);
font-family: var(--font-body);
font-size: 11px;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.membership-table tbody td + td {
border-top: 1px solid var(--line);
}
.membership-table tbody th {
background: rgba(36, 79, 115, 0.06);
}
}
/* Final type sweep: use one display face and one seven-step scale. */
.hero-strip strong,
.hero-strip .hs strong,
#reviews strong,
#reviews blockquote,
.reviews-section strong,
.reviews-section blockquote,
.rating-value,
.review-quote,
.consultation-section h3,
.membership-section h3,
.section-intro h3,
.portal-score strong,
.comparison-intro h3,
.consult-price strong {
font-family: var(--font-display);
font-optical-sizing: auto;
}
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3,
.section-intro h3,
.consultation-section h3,
.membership-section h3,
.comparison-intro h3,
.tier-panel h3 {
font-size: var(--fs-h3);
line-height: 1.2;
}
.hero-strip strong,
.hero-strip .hs strong,
#reviews .rating-value,
.reviews-section strong {
font-size: clamp(26px, 2.6vw, 32px);
font-weight: 500;
line-height: 1;
font-variant-numeric: lining-nums tabular-nums;
}
#reviews blockquote,
.reviews-section blockquote {
max-width: 34ch;
font-size: var(--fs-lede);
font-style: normal;
line-height: 1.45;
}
.price,
.price-block .price,
.consult-price strong {
font-size: clamp(44px, 4.4vw, 58px);
}
.measure-band .measure-body {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
.measure-band .measure-body .diagnostic-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.measure-band .measure-body .diagnostic-grid article {
min-height: 0;
}
.measure-band .measure-body .inside-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.measure-band .inside-card img {
aspect-ratio: 16 / 9;
}
.measure-band .inside-card figcaption {
padding: 10px;
font-size: var(--fs-micro);
}
.measure-band .diagnostic-guides {
margin-top: 16px;
padding-top: 18px;
}
.measure-band .diagnostic-guides-heading {
margin-bottom: 14px;
}
.measure-band .diagnostic-guide-card {
min-height: 106px;
padding: 16px;
}
.measure-band .diagnostic-guide-card strong {
margin: 5px 0 8px;
font-size: 22px;
}
@media (max-width: 980px) {
.measure-band .measure-body {
grid-template-columns: 1fr;
}
.measure-band .measure-body .inside-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
}
/* One complete diagnostic taxonomy, with optional guide links. */
.measure-band .measure-list {
display: grid;
gap: 0;
max-width: 980px;
margin-top: clamp(24px, 3vw, 40px);
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.measure-band .measure-row {
display: grid;
grid-template-columns: minmax(190px, 0.9fr) minmax(0, 1.35fr) minmax(226px, 0.85fr);
gap: clamp(14px, 2vw, 32px);
align-items: center;
min-height: 104px;
padding: 16px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.measure-band .measure-row h3 {
margin: 0;
color: #fff;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 500;
line-height: 1.2;
}
.measure-band .measure-row p {
max-width: 48ch;
margin: 0;
color: rgba(255, 255, 255, 0.8);
font-size: var(--fs-small);
line-height: 1.55;
}
.measure-band .measure-row--text p {
grid-column: 2 / 4;
max-width: 72ch;
}
.measure-band .measure-row .measure-cta {
display: flex;
width: 100%;
min-height: 62px;
padding: 11px 14px;
align-items: center;
justify-content: flex-start;
gap: 11px;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 13px;
font-weight: 720;
letter-spacing: 0;
text-decoration: none;
text-transform: none;
white-space: normal;
box-shadow: 0 8px 24px rgba(5, 24, 38, 0.1);
transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.measure-band .measure-row .measure-cta:hover,
.measure-band .measure-row .measure-cta:focus-visible {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.16);
}
.measure-cta small {
display: block;
margin-bottom: 2px;
color: rgba(255, 255, 255, 0.7);
font-size: 10px;
font-weight: 780;
letter-spacing: 0.12em;
line-height: 1.2;
text-transform: uppercase;
}
.measure-play {
display: grid;
flex: 0 0 36px;
width: 36px;
height: 36px;
padding-left: 2px;
place-items: center;
border-radius: 999px;
background: #fff;
color: var(--blue-deep);
font-size: 12px;
box-shadow: 0 5px 16px rgba(5, 24, 38, 0.2);
}
.measure-band .measure-row .measure-cta--toolkit {
justify-content: space-between;
border-color: rgba(255, 255, 255, 0.2);
background: transparent;
}
.measure-cta--toolkit strong {
font-size: 20px;
}
.measure-band a,
.measure-band p a {
color: #fff;
text-decoration-color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 720px) {
.measure-band .measure-row {
grid-template-columns: 1fr;
gap: 8px;
}
.measure-band .measure-row a {
justify-self: stretch;
}
.measure-band .measure-row--text p {
grid-column: auto;
}
}
.doctor-card img {
height: clamp(420px, 44vw, 620px);
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center 48%;
}
@media (max-width: 640px) {
.measure-band .measure-body .diagnostic-grid {
grid-template-columns: 1fr;
}
}
/* Hero portrait: keep the headline and headshot as distinct visual regions. */
@media (min-width: 981px) {
.hero {
grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.72fr);
align-items: end;
min-height: 900px;
}
.hero-content {
min-width: 0;
max-width: 650px;
align-self: center;
}
.hero-content h1 {
max-width: 9.5ch;
}
.hero-bg {
inset: 118px clamp(20px, 6vw, 88px) auto auto;
z-index: 0;
width: min(39vw, 590px);
height: 520px;
overflow: hidden;
border: 1px solid rgba(36, 79, 115, 0.12);
border-radius: 28px;
background: #e8eceb;
box-shadow: 0 24px 70px rgba(23, 59, 87, 0.12);
margin: 0;
}
.hero-bg::after {
background: linear-gradient(180deg, transparent 68%, rgba(23, 59, 87, 0.12));
}
.hero-bg img {
inset: 0;
width: 100%;
height: 100%;
object-position: center 14%;
filter: saturate(0.94) contrast(1.02);
}
.hero-bg figcaption {
position: absolute;
top: 18px;
left: 18px;
z-index: 2;
padding: 8px 11px;
border-radius: 999px;
background: rgba(23, 59, 87, 0.78);
color: #fff;
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 650;
line-height: 1;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hero-panel {
z-index: 3;
align-self: end;
width: min(100%, 590px);
margin-top: 390px;
transform: none;
}
}
@media (max-width: 980px) {
.hero-bg {
margin: 0;
}
.hero-bg figcaption {
display: none;
}
}
/* ------------------------------------------------------------
9. IMAGE CROPS
consult.jpg is 1350×900 (3:2) displayed at 2.90:1, so
~50% of the frame is discarded by object-fit with no
art direction. dr-mottram-running.jpg is 1400×787 (16:9)
displayed at 2.77:1. Declaring the ratio prevents layout
shift; re-export at the ratio you actually show.
------------------------------------------------------------ */
.consult-photo img,
.doctor-banner img {
display: block;
width: 100%;
aspect-ratio: 21 / 9;
object-fit: cover;
border-radius: var(--radius);
}
/* App screenshots are stretched, not fitted. `fill` ignores
aspect ratio; these are phone captures and should never
distort. */
.app-row img,
.app-screen {
object-fit: contain;
}
/* The six equipment thumbnails render at 248×186 from 1200×900
sources — 4.8× more pixels than needed, and too small to read
as evidence. Fewer, larger. */
.inside-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* ------------------------------------------------------------
10. BRITTLE POSITIONING — worth revisiting in your source
Your app-screen layer uses physical units and a magic number:
.app-screen-labs { top: 1cm; }
.app-screen-calendar { top: 2cm; }
.app-screen-home { left: calc(55% - 188.976px); }
Centimetres don't scale with the viewport and 188.976px is
just 5cm converted. Replace with rem/% so the fan of phones
holds together across breakpoints.
------------------------------------------------------------ */
:root {
--app-step: 2.5rem;
}
.app-screen-labs { top: var(--app-step); }
.app-screen-calendar { top: calc(var(--app-step) * 2); }
.app-screen-comm { top: calc(var(--app-home-top) + var(--app-step)); }
/* ------------------------------------------------------------
11. QUALITY FLOOR
------------------------------------------------------------ */
:where(a, button, summary, input, [tabindex]):focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
border-radius: 4px;
}
/* Header nav links are 17px tall. 44px is the accessible
minimum for touch. */
@media (max-width: 980px) {
.site-nav a,
.site-nav button {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
12. RESTRUCTURE LAYER
Styles for the single-action funnel described in CODEX-TASK.md.
Everything above this line is the typography/spacing pass;
everything below supports the new section structure.
============================================================ */
/* --- Hero: one button, one quiet secondary path -------------- */
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 18px;
}
.hero-secondary {
max-width: 46ch;
color: var(--ink-muted);
font-size: var(--fs-small);
line-height: 1.55;
}
.hero-secondary a {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
/* --- Button discipline --------------------------------------
After the CTA reduction, .button-primary means exactly one
thing: book the assessment. Nothing else may borrow it.
------------------------------------------------------------ */
.button-primary {
font-size: var(--fs-small);
font-weight: 650;
letter-spacing: 0.01em;
padding: 15px 26px;
min-height: 48px;
}
/* .button-soft survives only as a link-like tertiary control.
If nothing uses it after the restructure, delete the rule. */
.button-soft {
font-weight: 600;
}
/* --- Assessment section ------------------------------------- */
.assessment-body {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
gap: clamp(28px, 4vw, 64px);
align-items: start;
margin-top: clamp(28px, 3vw, 44px);
}
.assessment-points {
display: grid;
gap: 26px;
margin: 0;
padding: 0;
list-style: none;
}
.assessment-points li {
padding-left: 20px;
border-left: 2px solid var(--gold);
}
.assessment-points p {
margin-top: 6px;
max-width: 52ch;
color: var(--ink-soft);
line-height: 1.6;
}
/* --- Price blocks ------------------------------------------- */
.price-block {
display: grid;
justify-items: start;
gap: 2px;
margin: 4px 0 22px;
}
.price-block .price {
font-family: var(--font-display);
font-size: clamp(46px, 4.6vw, 62px);
font-weight: 500;
line-height: 1;
color: var(--blue-deep);
font-variant-numeric: lining-nums tabular-nums;
}
.price-period {
font-size: var(--fs-small);
font-weight: 600;
color: var(--ink-soft);
}
.price-sub {
margin-top: 6px;
font-size: var(--fs-micro);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--ink-muted);
font-variant-numeric: lining-nums;
}
/* --- Single-tier membership panel --------------------------- */
.membership-single {
display: grid;
gap: 20px;
width: 100%;
min-width: 0;
max-width: none;
}
.tier-panel {
display: grid;
grid-template-columns: minmax(250px, 0.7fr) minmax(0, 1.3fr);
grid-template-areas:
"heading benefits"
"price benefits"
"action benefits";
column-gap: clamp(36px, 6vw, 84px);
align-items: start;
min-width: 0;
padding: clamp(26px, 3vw, 42px);
}
.tier-panel h3 {
grid-area: heading;
margin-bottom: 4px;
}
.tier-panel .price-block {
grid-area: price;
}
.tier-panel .tier-list {
grid-area: benefits;
}
.tier-panel > .button {
grid-area: action;
justify-self: start;
}
.tier-list {
display: grid;
gap: 12px;
margin: 0 0 28px;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
padding-top: 22px;
}
.tier-list li {
position: relative;
padding-left: 26px;
max-width: 56ch;
color: var(--ink-soft);
line-height: 1.55;
}
.tier-list li::before {
content: "";
position: absolute;
left: 4px;
top: 0.62em;
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--gold);
}
/* Concierge callout: premium, intentional, still secondary to the main tier. */
.concierge-secondary {
width: 100%;
max-width: none;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(18px, 3vw, 34px);
align-items: center;
padding: clamp(18px, 2.4vw, 26px);
border: 1px solid rgba(36, 79, 115, 0.16);
border-radius: var(--radius);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 248, 0.62)),
radial-gradient(circle at 100% 0%, rgba(185, 157, 107, 0.08), transparent 42%);
box-shadow: 0 12px 32px rgba(23, 59, 87, 0.055);
color: var(--ink-soft);
}
.concierge-secondary .eyebrow {
margin-bottom: 8px;
}
.concierge-secondary h3 {
margin: 0 0 8px;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(25px, 2.35vw, 34px);
font-weight: 500;
line-height: 1.08;
}
.concierge-secondary p {
max-width: 70ch;
margin: 0;
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.55;
}
.concierge-secondary-action {
display: grid;
justify-items: end;
gap: 10px;
min-width: 180px;
}
.concierge-secondary-action strong {
color: var(--blue-deep);
font-family: var(--font-display);
font-size: clamp(30px, 3vw, 42px);
font-weight: 650;
line-height: 1;
white-space: nowrap;
}
.concierge-secondary-action span {
color: var(--ink-muted);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 750;
}
.concierge-secondary-action a {
color: var(--blue);
font-weight: 750;
white-space: nowrap;
}
/* --- Newsletter: demoted buttons become links --------------- */
.newsletter-links {
margin-top: 18px;
font-size: var(--fs-small);
color: var(--ink-muted);
}
.newsletter-links a {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- Comparison table header (concierge-medicine page) ------ */
.membership-table thead th small {
font-family: var(--font-body);
font-size: var(--fs-micro);
font-weight: 600;
}
.membership-table thead th .th-sub {
display: block;
margin-top: 6px;
color: var(--ink-muted);
font-weight: 500;
letter-spacing: 0.02em;
}
/* --- Responsive --------------------------------------------- */
@media (max-width: 980px) {
.assessment-body {
grid-template-columns: 1fr;
}
.hero-actions .button-primary {
width: 100%;
justify-content: center;
text-align: center;
}
.tier-panel {
grid-template-columns: 1fr;
grid-template-areas:
"heading"
"price"
"benefits"
"action";
}
}
@media (max-width: 640px) {
.tier-panel .button-primary {
width: 100%;
white-space: normal;
}
.concierge-secondary {
grid-template-columns: 1fr;
padding: 20px;
}
.concierge-secondary-action {
justify-items: start;
min-width: 0;
}
.concierge-secondary-action a {
white-space: normal;
}
}
/* --- Conversion page additions ----------------------------- */
.measure-band .inside-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 2vw, 24px);
margin-top: clamp(28px, 4vw, 48px);
}
.inside-card {
margin: 0;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.08);
}
.inside-card img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.inside-card figcaption {
padding: 14px 16px 16px;
color: rgba(255, 255, 255, 0.86);
font-size: var(--fs-small);
}
.diagnostic-guides {
margin-top: clamp(32px, 5vw, 64px);
padding-top: clamp(28px, 4vw, 48px);
border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.diagnostic-guides-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
}
.diagnostic-guides-heading h3 {
max-width: 18ch;
margin: 0;
color: #fff;
}
.diagnostic-guides-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.diagnostic-guide-card {
display: flex;
min-height: 190px;
padding: 22px;
flex-direction: column;
justify-content: flex-end;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 18px;
color: #fff;
text-decoration: none;
background: linear-gradient(155deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}
.diagnostic-guide-card:hover,
.diagnostic-guide-card:focus-visible {
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.48);
background: linear-gradient(155deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.07));
}
.diagnostic-guide-card span,
.diagnostic-guide-card small {
color: rgba(255, 255, 255, 0.76);
font-size: var(--fs-micro);
}
.diagnostic-guide-card strong {
margin: 8px 0 18px;
font-family: var(--font-display);
font-size: clamp(22px, 2vw, 28px);
font-weight: 500;
line-height: 1.15;
}
@media (max-width: 900px) {
.diagnostic-guides-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.diagnostic-guides-heading {
display: block;
}
.diagnostic-guides-grid {
grid-template-columns: 1fr;
}
.diagnostic-guide-card {
min-height: 148px;
}
}
.portal-section {
grid-template-columns: minmax(0, 0.85fr) minmax(460px, 1fr);
}
.portal-copy {
width: 100%;
min-width: 0;
}
.patient-app-showcase {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
gap: clamp(10px, 1.2vw, 18px);
width: min(720px, 50vw);
min-height: 0;
transform: none;
}
.patient-app-showcase::before {
inset: 8% 0;
}
.patient-app-showcase .app-screen {
position: static;
width: 100%;
height: auto;
border-radius: clamp(20px, 2vw, 30px);
}
.membership-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.membership-table {
width: 100%;
border-collapse: collapse;
}
@media (max-width: 980px) {
.portal-section {
grid-template-columns: 1fr;
}
.patient-app-showcase {
width: min(680px, 100%);
min-width: 0;
max-width: none;
}
}
@media (max-width: 640px) {
.measure-band .inside-grid {
grid-template-columns: 1fr;
}
.patient-app-showcase {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 100%;
}
.consult-price {
width: 100%;
min-width: 0;
}
.consult-price .button {
box-sizing: border-box;
width: 100%;
max-width: 100%;
padding-inline: 14px;
justify-content: center;
text-align: center;
white-space: normal;
}
}
/* Physician biography dialog */
.physician-bio-dialog {
width: min(1040px, calc(100vw - 40px));
max-width: none;
max-height: min(860px, calc(100dvh - 40px));
margin: auto;
padding: 0;
overflow: auto;
border: 1px solid rgba(36, 79, 115, 0.18);
border-radius: 24px;
background: rgba(252, 252, 249, 0.98);
color: var(--ink);
box-shadow: 0 30px 90px rgba(11, 31, 48, 0.32);
}
.physician-bio-dialog::backdrop {
background: rgba(9, 25, 38, 0.58);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.physician-bio-close {
position: sticky;
top: 18px;
z-index: 2;
display: grid;
width: 48px;
height: 48px;
margin: 18px 18px -66px auto;
padding: 0 0 5px;
place-items: center;
border: 1px solid rgba(36, 79, 115, 0.18);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: var(--blue-deep);
box-shadow: 0 8px 24px rgba(23, 59, 87, 0.14);
font: 400 36px/1 Arial, sans-serif;
cursor: pointer;
}
.physician-bio-close:hover,
.physician-bio-close:focus-visible {
background: var(--blue-deep);
color: #fff;
}
.physician-bio-layout {
display: grid;
grid-template-columns: 1fr;
max-width: 980px;
margin: 0 auto;
padding: clamp(28px, 5vw, 64px);
}
.physician-bio-portrait {
display: none;
}
.physician-bio-portrait {
position: sticky;
top: 64px;
align-self: start;
margin: 0;
}
.physician-bio-portrait img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 18px;
}
.physician-bio-content {
min-width: 0;
padding-top: 10px;
}
.physician-bio-content h2 {
margin: 8px 56px 18px 0;
font-size: clamp(40px, 5vw, 68px);
line-height: 0.98;
}
.physician-bio-content h3 {
margin: 30px 0 8px;
font-size: clamp(23px, 2.5vw, 31px);
}
.physician-bio-content p,
.physician-bio-content li {
color: var(--ink-soft);
font-size: 17px;
line-height: 1.65;
}
.physician-bio-content p {
margin: 0;
}
.physician-bio-content ul {
margin: 10px 0 0;
padding-left: 22px;
}
.physician-bio-lead {
font-size: 19px !important;
}
body:has(.physician-bio-dialog[open]) {
overflow: hidden;
}
@media (max-width: 720px) {
.physician-bio-dialog {
width: calc(100vw - 20px);
max-height: calc(100dvh - 20px);
border-radius: 18px;
}
.physician-bio-layout {
grid-template-columns: 1fr;
gap: 24px;
padding: 20px;
}
.physician-bio-portrait {
position: static;
width: min(280px, 78%);
}
.physician-bio-content h2 {
margin-right: 38px;
}
}
/* Concierge membership page: wider, calmer comparison surface. */
.concierge-page {
max-width: 1180px;
}
.concierge-page .membership-table-wrap {
overflow-x: visible;
}
.concierge-page .membership-table {
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
border: 1px solid rgba(36, 79, 115, 0.16);
border-radius: var(--radius);
background: #fff;
}
.concierge-page .membership-table th,
.concierge-page .membership-table td {
padding: clamp(15px, 1.8vw, 22px);
border-bottom: 1px solid rgba(36, 79, 115, 0.12);
color: var(--ink);
font-size: 16px;
line-height: 1.45;
vertical-align: top;
}
.concierge-page .membership-table th:first-child {
width: 22%;
}
.concierge-page .membership-table th:nth-child(2),
.concierge-page .membership-table td:nth-child(2),
.concierge-page .membership-table th:nth-child(3),
.concierge-page .membership-table td:nth-child(3) {
width: 39%;
}
.concierge-page .membership-table thead th {
background: rgba(36, 79, 115, 0.055);
color: var(--blue-deep);
font-family: var(--font-body);
font-size: 15px;
font-weight: 850;
letter-spacing: 0;
text-align: left;
}
.concierge-page .membership-table thead th span {
margin-top: 12px;
font-size: clamp(32px, 3.2vw, 46px);
}
.concierge-page .membership-table tbody th {
color: var(--blue-deep);
font-weight: 850;
text-align: left;
}
.concierge-page .membership-table tbody tr:last-child th,
.concierge-page .membership-table tbody tr:last-child td {
border-bottom: 0;
}
@media (max-width: 980px) {
.concierge-page {
max-width: 760px;
}
.concierge-hero,
.concierge-explain,
.concierge-boundaries {
grid-template-columns: 1fr;
}
.concierge-page .membership-table-wrap {
overflow-x: auto;
}
.concierge-page .membership-table {
min-width: 760px;
}
}
@media (max-width: 640px) {
.concierge-page {
padding-top: 104px;
}
.concierge-page .membership-table {
min-width: 0;
border: 0;
background: transparent;
}
.concierge-page .membership-table thead tr {
margin: 0 0 14px;
}
.concierge-page .membership-table tbody th,
.concierge-page .membership-table tbody td {
display: block;
width: 100%;
}
}
/* Concierge page reset: premium card-first layout, no comparison spreadsheet. */
.concierge-page {
max-width: 1180px;
padding-top: clamp(112px, 12vw, 150px);
}
.concierge-page .back-link {
margin-bottom: clamp(24px, 3vw, 38px);
box-shadow: none;
}
.concierge-hero {
align-items: stretch;
padding-bottom: clamp(34px, 5vw, 64px);
border-bottom: 1px solid rgba(36, 79, 115, 0.14);
}
.concierge-hero h1 {
max-width: 760px;
font-size: clamp(44px, 5.4vw, 72px);
line-height: 1.02;
}
.concierge-hero-panel {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 280px;
background:
linear-gradient(145deg, rgba(23, 59, 87, 0.96), rgba(35, 80, 115, 0.88)),
radial-gradient(circle at 20% 0%, rgba(185, 157, 107, 0.25), transparent 45%);
color: #fff;
}
.concierge-hero-panel span,
.concierge-hero-panel small {
color: rgba(255, 255, 255, 0.72);
}
.hero-price-stack {
display: grid;
gap: 8px;
margin: 18px 0 12px;
}
.concierge-hero-panel strong {
color: #fff;
font-size: clamp(32px, 3.5vw, 48px);
line-height: 0.98;
white-space: nowrap;
}
.membership-overview,
.access-difference,
.membership-next-step,
.concierge-boundaries {
display: grid;
grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);
gap: clamp(24px, 4vw, 56px);
margin-top: clamp(30px, 5vw, 60px);
padding: clamp(26px, 4vw, 42px);
border: 1px solid rgba(36, 79, 115, 0.14);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 18px 48px rgba(23, 59, 87, 0.07);
}
.membership-overview h2,
.access-difference h2,
.membership-next-step h2,
.concierge-boundaries h2 {
margin: 0;
font-size: clamp(28px, 3vw, 42px);
}
.membership-overview p,
.membership-next-step p,
.concierge-boundaries p {
max-width: 720px;
margin: 0;
}
.membership-tiers {
margin-top: clamp(42px, 7vw, 82px);
}
.tier-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 3vw, 28px);
margin-top: 24px;
}
.tier-card {
display: flex;
min-height: 560px;
flex-direction: column;
justify-content: space-between;
padding: clamp(26px, 4vw, 42px);
border: 1px solid rgba(36, 79, 115, 0.15);
border-radius: var(--radius);
background:
linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.7)),
radial-gradient(circle at 10% 0%, rgba(185, 157, 107, 0.12), transparent 42%);
box-shadow: 0 24px 70px rgba(23, 59, 87, 0.1);
}
.tier-card--featured {
border-color: rgba(23, 59, 87, 0.38);
background:
linear-gradient(145deg, rgba(23, 59, 87, 0.98), rgba(35, 80, 115, 0.9)),
radial-gradient(circle at 8% 0%, rgba(185, 157, 107, 0.24), transparent 44%);
color: #fff;
}
.tier-card .eyebrow {
margin: 0 0 16px;
}
.tier-card h3 {
max-width: 11ch;
margin: 0 0 26px;
color: var(--ink);
font-size: clamp(36px, 4vw, 56px);
line-height: 1.02;
}
.tier-card--featured h3 {
color: #fff;
}
.tier-price {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 8px;
}
.tier-price strong {
color: var(--blue-deep);
font-family: var(--font-display);
font-size: clamp(48px, 6vw, 76px);
font-weight: 500;
line-height: 0.95;
}
.tier-price span,
.tier-billing {
color: var(--ink-muted);
font-size: 15px;
font-weight: 750;
}
.tier-card--featured .tier-price strong,
.tier-card--featured .tier-price span,
.tier-card--featured .tier-billing {
color: #fff;
}
.concierge-page .tier-card ul {
display: grid;
gap: 12px;
margin: 34px 0 0;
padding: 0;
list-style: none;
}
.concierge-page .tier-card li {
position: relative;
padding: 0 0 0 24px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--ink-soft);
font-size: 17px;
line-height: 1.45;
}
.concierge-page .tier-card li::before {
content: "";
position: absolute;
top: 0.62em;
left: 0;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--gold);
}
.concierge-page .tier-card--featured li {
color: rgba(255, 255, 255, 0.84);
}
.access-difference {
align-items: start;
}
.access-list {
display: grid;
gap: 1px;
overflow: hidden;
border: 1px solid rgba(36, 79, 115, 0.14);
border-radius: var(--radius);
background: rgba(36, 79, 115, 0.12);
}
.access-list > div {
display: grid;
grid-template-columns: minmax(130px, 0.34fr) minmax(0, 1fr);
gap: 16px;
padding: 18px 20px;
background: rgba(255, 255, 255, 0.82);
}
.access-list span {
color: var(--gold);
font-size: 12px;
font-weight: 850;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.access-list strong {
color: var(--ink);
font-size: 18px;
line-height: 1.35;
}
.membership-next-step {
align-items: center;
}
.membership-next-step .button {
justify-self: end;
}
@media (max-width: 980px) {
.concierge-hero,
.membership-overview,
.access-difference,
.membership-next-step,
.concierge-boundaries {
grid-template-columns: 1fr;
}
.tier-card-grid {
grid-template-columns: 1fr;
}
.tier-card {
min-height: auto;
}
.membership-next-step .button {
justify-self: start;
}
}
@media (max-width: 640px) {
.concierge-page {
padding-top: 104px;
}
.concierge-hero-panel {
min-height: 220px;
}
.access-list > div {
grid-template-columns: 1fr;
gap: 6px;
}
}
/* Concierge final polish: remove prototype framing and tighten hierarchy. */
.concierge-page {
max-width: 1160px;
overflow-x: clip;
}
.concierge-page h2,
.concierge-page h3,
.concierge-page p {
text-wrap: pretty;
}
.concierge-hero {
grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
align-items: end;
gap: clamp(32px, 6vw, 90px);
padding-bottom: clamp(44px, 6vw, 74px);
}
.concierge-hero h1 {
max-width: 740px;
font-size: clamp(42px, 5vw, 66px);
line-height: 1.06;
}
.concierge-hero .lead {
max-width: 680px;
margin-bottom: 0;
}
.concierge-hero-panel {
min-height: 250px;
padding: clamp(28px, 4vw, 40px);
border: 0;
border-radius: 18px;
box-shadow: 0 28px 70px rgba(23, 59, 87, 0.16);
}
.concierge-hero-panel span {
max-width: 18ch;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
line-height: 1.35;
}
.concierge-hero-panel small {
color: rgba(255, 255, 255, 0.78);
}
.hero-price-stack {
gap: 6px;
margin: 20px 0 14px;
}
.concierge-hero-panel strong {
font-size: clamp(34px, 3.8vw, 46px);
letter-spacing: 0;
}
.membership-overview {
display: grid;
grid-template-columns: minmax(240px, 0.46fr) minmax(0, 1fr);
margin-top: clamp(36px, 6vw, 72px);
padding: 0 0 clamp(36px, 5vw, 60px);
border: 0;
border-bottom: 1px solid rgba(36, 79, 115, 0.14);
border-radius: 0;
background: transparent;
box-shadow: none;
}
.membership-overview h2 {
max-width: 12ch;
font-size: clamp(30px, 3.4vw, 44px);
line-height: 1.08;
}
.membership-overview p {
align-self: end;
max-width: 720px;
font-size: clamp(18px, 1.55vw, 22px);
line-height: 1.62;
}
.membership-tiers {
margin-top: clamp(42px, 6vw, 72px);
}
.section-heading-row {
display: block;
max-width: 760px;
margin-bottom: 26px;
}
.section-heading-row h2 {
margin-top: 8px;
font-size: clamp(32px, 3.8vw, 50px);
line-height: 1.08;
}
.tier-card-grid {
gap: clamp(18px, 2.5vw, 28px);
}
.tier-card {
min-height: 0;
padding: clamp(26px, 3.6vw, 40px);
border-radius: 18px;
box-shadow: 0 22px 56px rgba(23, 59, 87, 0.1);
}
.tier-card--featured {
box-shadow: 0 30px 76px rgba(23, 59, 87, 0.2);
}
.tier-card .eyebrow {
color: var(--gold);
}
.tier-card--featured .eyebrow {
color: rgba(236, 221, 190, 0.88);
}
.tier-card h3 {
max-width: 13ch;
font-size: clamp(34px, 3.6vw, 48px);
line-height: 1.08;
}
.tier-price strong {
font-size: clamp(46px, 5.2vw, 66px);
}
.concierge-page .tier-card li {
font-size: 16px;
line-height: 1.46;
}
.access-difference,
.membership-next-step,
.concierge-boundaries {
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.access-difference {
grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
padding: clamp(42px, 6vw, 72px) 0 0;
border-top: 1px solid rgba(36, 79, 115, 0.14);
}
.access-difference h2 {
max-width: 11ch;
}
.access-list {
gap: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
}
.access-list > div {
grid-template-columns: minmax(145px, 0.32fr) minmax(0, 1fr);
padding: 18px 0;
border-bottom: 1px solid rgba(36, 79, 115, 0.13);
background: transparent;
}
.access-list > div:first-child {
padding-top: 0;
}
.access-list strong {
font-size: clamp(18px, 1.5vw, 21px);
font-weight: 650;
}
.membership-next-step {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
margin-top: clamp(48px, 7vw, 84px);
padding: clamp(28px, 4vw, 40px);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.66)),
radial-gradient(circle at 10% 0%, rgba(185, 157, 107, 0.12), transparent 44%);
box-shadow: 0 20px 54px rgba(23, 59, 87, 0.08);
}
.membership-next-step h2 {
max-width: 14ch;
font-size: clamp(30px, 3.4vw, 44px);
}
.membership-next-step p {
max-width: 620px;
font-size: 17px;
line-height: 1.62;
}
.membership-next-step .button {
justify-self: end;
width: max-content;
max-width: min(100%, 440px);
white-space: normal;
}
.concierge-boundaries {
grid-template-columns: minmax(230px, 0.36fr) minmax(0, 1fr);
margin-top: clamp(36px, 5vw, 58px);
padding: clamp(28px, 4vw, 42px) 0 0;
border-top: 1px solid rgba(36, 79, 115, 0.14);
}
.concierge-boundaries h2 {
max-width: 13ch;
font-size: clamp(26px, 3vw, 38px);
}
.concierge-boundaries p {
max-width: 760px;
font-size: 17px;
}
.concierge-page .page-note {
max-width: 760px;
margin: clamp(34px, 5vw, 56px) 0 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ink-muted);
box-shadow: none;
}
@media (max-width: 980px) {
.concierge-hero,
.membership-overview,
.access-difference,
.membership-next-step,
.concierge-boundaries {
grid-template-columns: 1fr;
}
.membership-next-step .button {
justify-self: start;
}
}
@media (max-width: 640px) {
.concierge-hero {
gap: 24px;
}
.membership-next-step {
padding: 24px;
}
.tier-card h3 {
max-width: 100%;
}
}
/* Price figures: keep dollar signs plain and easy to read. */
.price,
.price-block .price,
.consult-price strong,
.small-price,
.tier-price strong,
.concierge-hero-panel strong,
.concierge-secondary-action strong {
font-family: var(--font-body);
font-weight: 720;
letter-spacing: -0.01em;
}