/*
 * myBrux theme styles, ported from the Astro site (src/styles/global.css).
 * WordPress-specific rules are at the end of the file.
 */

:root {
   --ink: #082543;
   --ink-soft: #40566e;
   --ink-faint: #5d7188;
   --signal: #007aff;
   --link: #0a5fd6;
   --enamel: #f2f6fa;
   --ice: #dcebff;
   --tension: #d93f26;
   --rest: #0b8a60;
   --white: #fff;
   --on-ink: #e7eff8;
   --on-ink-soft: #a9bdd3;
   --gutter: clamp(20px, 4.5vw, 72px);
   --section: clamp(72px, 11vw, 160px);
   --release: cubic-bezier(0.16, 0.84, 0.24, 1);
   color-scheme: light;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 88px;
   -webkit-text-size-adjust: 100%;
}

body {
   margin: 0;
   background: var(--enamel);
   color: var(--ink);
   font-family: "Archivo Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
   font-size: 1.0625rem;
   line-height: 1.6;
   overflow-x: clip;
}

img,
video,
svg {
   display: block;
   max-width: 100%;
   height: auto;
}

h1,
h2,
h3,
p,
ul,
ol {
   margin: 0;
}

ul,
ol {
   padding: 0;
   list-style: none;
}

a {
   color: inherit;
}

:root h2 {
   font-size: clamp(2.25rem, 5.6vw, 4.75rem);
   font-stretch: 88%;
   font-weight: 700;
   line-height: 1.02;
   letter-spacing: -0.02em;
   text-wrap: balance;
}

:root h3 {
   font-size: 1.3rem;
   font-weight: 650;
   line-height: 1.2;
}

:focus-visible {
   outline: 3px solid var(--signal);
   outline-offset: 3px;
   border-radius: 4px;
}

.skip {
   position: absolute;
   left: 12px;
   top: -60px;
   z-index: 30;
   padding: 10px 16px;
   background: var(--ink);
   color: var(--white);
   border-radius: 8px;
}

.skip:focus {
   top: 12px;
}

/* Buttons and links */

.button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 52px;
   padding: 0 26px;
   border: 0;
   border-radius: 999px;
   background: var(--ink);
   color: var(--white);
   font: inherit;
   font-weight: 600;
   text-decoration: none;
   cursor: pointer;
   transition: background-color 0.2s;
}

.button:hover {
   background: var(--signal);
}

.button-quiet {
   background: transparent;
   color: var(--ink);
   box-shadow: inset 0 0 0 1.5px var(--ink);
}

.button-quiet:hover {
   background: var(--ink);
   color: var(--white);
}

.button-small {
   min-height: 42px;
   padding: 0 18px;
   font-size: 0.95rem;
}

.button-light {
   background: var(--white);
   color: var(--ink);
}

.button-light:hover {
   background: var(--ice);
}

.text-link {
   color: var(--link);
   font-weight: 600;
   text-underline-offset: 4px;
}

/* Header */

.top {
   display: flex;
   align-items: center;
   gap: 28px;
   padding: 12px var(--gutter);
   background: rgb(242 246 250 / 0.88);
   backdrop-filter: blur(14px);
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 1.2rem;
   font-weight: 750;
   text-decoration: none;
}

.brand img {
   border-radius: 8px;
}

.top-links {
   display: flex;
   gap: clamp(14px, 1.8vw, 26px);
   margin-left: auto;
   font-size: 0.98rem;
}

.top-links a {
   white-space: nowrap;
   text-decoration: none;
   color: var(--ink-soft);
}

.top-links a:hover {
   color: var(--ink);
}

.top-actions {
   display: flex;
   align-items: center;
   gap: 14px;
}

.language {
   position: relative;
}

.language summary {
   padding: 8px 10px;
   font-size: 0.95rem;
   font-weight: 600;
   cursor: pointer;
   list-style: none;
}

.language summary::-webkit-details-marker {
   display: none;
}

.language ul {
   position: absolute;
   right: 0;
   top: calc(100% + 6px);
   min-width: 160px;
   padding: 8px;
   background: var(--white);
   border-radius: 12px;
   box-shadow: 0 14px 40px rgb(8 37 67 / 0.16);
}

.language a {
   display: block;
   padding: 8px 12px;
   border-radius: 8px;
   text-decoration: none;
}

.language a:hover {
   background: var(--enamel);
}

.language a[aria-current] {
   font-weight: 700;
}

/* Phone */

.phone {
   position: relative;
   aspect-ratio: 402 / 874;
   padding: 2.6%;
   border-radius: 13.5% / 6.4%;
   background: #0d1a2a;
   box-shadow: 0 40px 70px -30px rgb(8 37 67 / 0.5);
}

.phone img {
   width: 100%;
   height: 100%;
   border-radius: 11.5% / 5.4%;
   object-fit: cover;
}

/* Hero */

.hero {
   padding: clamp(28px, 5vw, 64px) var(--gutter) 0;
   overflow: hidden;
}

.hero h1 {
   max-width: 15ch;
   font-size: min(11.2vw, 19vh, 11rem);
   font-stretch: 100%;
   font-weight: 620;
   line-height: 0.96;
   letter-spacing: -0.025em;
   text-wrap: balance;
   transition:
      font-stretch 1s var(--release),
      font-weight 1s var(--release),
      letter-spacing 1s var(--release),
      color 0.6s;
   animation: release 1.9s var(--release) 0.35s backwards;
}

/* Takes its height from the hero's top padding, so the store badges stay in the first view. */
.hero-kicker {
   display: block;
   max-width: none;
   margin-top: calc(clamp(28px, 5vw, 64px) * -0.45);
   margin-bottom: 0.9em;
   font-size: clamp(0.95rem, 1.5vw, 1.25rem);
   font-stretch: 100%;
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: 0;
   color: var(--wp--preset--color--ink-soft);
}

@keyframes release {
   from {
      font-stretch: 62%;
      font-weight: 900;
      letter-spacing: -0.045em;
      color: var(--tension);
   }
}

.hero[data-state="tension"] h1 {
   font-stretch: 62%;
   font-weight: 900;
   letter-spacing: -0.04em;
   color: var(--tension);
}

.hero[data-state="rest"] h1 {
   font-stretch: 118%;
   font-weight: 430;
   letter-spacing: -0.01em;
   color: var(--rest);
}

.hero-body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) clamp(240px, 26vw, 360px);
   gap: clamp(32px, 6vw, 96px);
   margin-top: clamp(28px, 4vw, 52px);
}

.hero-check {
   padding-bottom: clamp(48px, 7vw, 96px);
}

.hero-lead {
   max-width: 56ch;
   color: var(--ink-soft);
   font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.hero-prompt {
   margin-top: 36px;
   font-weight: 650;
}

.faces {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 6px;
   margin-top: 14px;
}

.face {
   display: grid;
   justify-items: center;
   gap: 8px;
   padding: 10px 2px;
   border: 0;
   border-radius: 14px;
   background: none;
   color: var(--ink-soft);
   font: inherit;
   font-size: 0.86rem;
   line-height: 1.2;
   cursor: pointer;
   transition: background-color 0.2s;
}

.face img {
   width: clamp(52px, 5.4vw, 76px);
   transition: transform 0.35s var(--release);
}

.face:hover {
   background: var(--white);
   color: var(--ink);
}

.face:hover img {
   transform: scale(1.06);
}

.face[aria-pressed="true"] {
   background: var(--white);
   color: var(--ink);
   font-weight: 650;
   box-shadow: inset 0 0 0 2px var(--signal);
}

.hero-reply {
   min-height: 92px;
   margin-top: 16px;
}

.hero-reply-text {
   max-width: 60ch;
   font-size: 1.1rem;
   font-weight: 550;
}

.hero-saved {
   margin-top: 2px;
   color: var(--ink-faint);
   font-size: 0.92rem;
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
}

.hero-phone {
   align-self: end;
   margin-bottom: -38%;
}

/* Statement */

.band {
   position: relative;
   z-index: 1;
   padding: clamp(56px, 8vw, 112px) var(--gutter);
   background: var(--ink);
   color: var(--white);
}

.band p {
   max-width: 30ch;
   font-size: clamp(1.9rem, 4.6vw, 4rem);
   font-stretch: 88%;
   font-weight: 600;
   line-height: 1.08;
   letter-spacing: -0.015em;
   text-wrap: balance;
}

/* How it works */

.how {
   padding: var(--section) var(--gutter);
}

.how-intro p {
   margin-top: 16px;
   color: var(--ink-soft);
   font-size: 1.2rem;
}

.how-grid {
   display: grid;
   grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
   gap: clamp(32px, 7vw, 120px);
   margin-top: clamp(32px, 5vw, 64px);
}

.how-stage {
   position: sticky;
   top: 96px;
   align-self: start;
   display: grid;
   justify-items: center;
}

.how-stage .phone {
   width: min(100%, calc((100vh - 130px) * 402 / 874), 380px);
}

.how-stage .phone img {
   position: absolute;
   inset: 2.6%;
   width: 94.8%;
   height: 94.8%;
   opacity: 0;
   transition: opacity 0.45s ease;
}

.how-stage .phone img.is-active {
   opacity: 1;
}

.how-step {
   display: grid;
   align-content: center;
   min-height: 74vh;
}

.how-copy {
   max-width: 30rem;
   opacity: 0.32;
   transition: opacity 0.35s;
}

.how-step.is-active .how-copy {
   opacity: 1;
}

.how-copy h3 {
   font-size: clamp(1.7rem, 3vw, 2.5rem);
   font-stretch: 92%;
   font-weight: 680;
   letter-spacing: -0.012em;
   line-height: 1.08;
}

.how-copy p {
   margin-top: 14px;
   color: var(--ink-soft);
   font-size: 1.15rem;
}

.how-inline {
   display: none;
}

/* Breathing */

.breath {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   align-items: center;
   gap: clamp(32px, 7vw, 120px);
   padding: var(--section) var(--gutter);
   background: var(--ice);
}

.breath-copy p {
   max-width: 44ch;
   margin-top: 16px;
   color: var(--ink-soft);
   font-size: 1.15rem;
}

.breath-copy .button {
   margin-top: 26px;
}

.breath-copy .breath-done {
   margin-top: 16px;
   color: var(--ink);
   font-weight: 600;
}

.breath-box {
   position: relative;
   width: min(100%, 440px);
   justify-self: center;
}

.breath-box svg {
   width: 100%;
   overflow: visible;
}

.breath-box rect {
   fill: rgb(255 255 255 / 0.55);
   stroke: rgb(8 37 67 / 0.18);
   stroke-width: 2;
}

.breath-trace {
   fill: none;
   stroke: var(--signal);
   stroke-width: 4;
   stroke-linejoin: round;
   stroke-dasharray: 4;
   stroke-dashoffset: 4;
}

.breath-dot {
   fill: var(--signal);
}

.breath-readout {
   position: absolute;
   inset: 0;
   display: grid;
   place-content: center;
   text-align: center;
   font-weight: 600;
}

.breath-readout strong {
   font-size: clamp(3rem, 8vw, 5.5rem);
   font-weight: 750;
   line-height: 1;
}

.breath-readout strong[data-idle] {
   color: var(--ink-faint);
   font-size: clamp(1.6rem, 4vw, 2.4rem);
   font-weight: 600;
}

/* Doctors */

.doctors {
   padding: var(--section) var(--gutter);
   background: var(--ink);
   color: var(--white);
}

.doctors-intro p {
   max-width: 60ch;
   margin-top: 18px;
   color: var(--on-ink);
   font-size: 1.2rem;
}

.doctors-video {
   margin: clamp(32px, 5vw, 64px) 0 0;
}

.doctors-video video {
   width: 100%;
   border-radius: 14px;
   background: var(--white);
}

.doctors-features {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: clamp(24px, 4vw, 56px);
   margin-top: clamp(40px, 5vw, 64px);
}

.doctors-features p {
   margin-top: 8px;
   color: var(--on-ink-soft);
}

.pricing {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: clamp(24px, 4vw, 56px);
   margin-top: clamp(48px, 6vw, 80px);
   padding-top: clamp(32px, 4vw, 48px);
   border-top: 1px solid rgb(255 255 255 / 0.2);
}

.pricing-amount p {
   margin-top: 8px;
   color: var(--on-ink-soft);
}

.pricing-amount strong {
   display: block;
   color: var(--white);
   font-size: clamp(3rem, 6vw, 5rem);
   font-stretch: 88%;
   font-weight: 700;
   line-height: 1;
   letter-spacing: -0.02em;
}

.pricing ul li + li {
   margin-top: 8px;
}

.pricing-actions {
   display: grid;
   justify-items: start;
   gap: 14px;
}

.pricing-actions p {
   color: var(--on-ink-soft);
   font-size: 0.95rem;
}

.link-light {
   color: var(--white);
   font-weight: 600;
   text-underline-offset: 4px;
}

/* Trust */

.trust {
   display: grid;
   grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
   gap: clamp(40px, 7vw, 120px);
   padding: var(--section) var(--gutter);
}

.trust-main ul {
   margin: clamp(24px, 3vw, 40px) 0;
}

.trust-main li {
   font-size: clamp(1.3rem, 2.4vw, 2rem);
   font-stretch: 92%;
   font-weight: 550;
   line-height: 1.35;
}

.trust-plus {
   display: grid;
   grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
   align-items: center;
   gap: 28px;
}

.trust-plus .phone {
   box-shadow: 0 24px 40px -22px rgb(8 37 67 / 0.5);
}

.trust-plus p {
   margin: 8px 0 18px;
   color: var(--ink-soft);
}

.store-badges {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
}

.store-badges a {
   display: block;
   border-radius: 8px;
}

.store-badges img {
   width: auto;
   height: 52px;
}

/* Questions */

.faq {
   display: grid;
   grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
   gap: clamp(24px, 5vw, 80px);
   padding: 0 var(--gutter) var(--section);
}

.faq details {
   padding: 18px 0;
   border-top: 1px solid rgb(8 37 67 / 0.16);
}

.faq details:last-child {
   border-bottom: 1px solid rgb(8 37 67 / 0.16);
}

.faq summary {
   font-size: 1.2rem;
   font-weight: 620;
   cursor: pointer;
}

.faq details p {
   max-width: 62ch;
   margin-top: 10px;
   color: var(--ink-soft);
}

/* Footer */

.foot {
   padding: clamp(48px, 6vw, 80px) var(--gutter) 36px;
   background: var(--ink);
   color: var(--on-ink);
}

.foot-main {
   display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
   gap: 32px;
}

.foot-brand {
   color: var(--white);
   font-size: 1.5rem;
   font-weight: 750;
}

.foot-links a {
   display: inline-block;
   padding: 3px 0;
   text-decoration: none;
}

.foot-links a:hover {
   text-decoration: underline;
}

.foot-note {
   margin-top: 40px;
   padding-top: 20px;
   border-top: 1px solid rgb(255 255 255 / 0.18);
   color: var(--on-ink-soft);
   font-size: 0.92rem;
}

/* Legal pages */

.legal {
   max-width: 46rem;
   overflow-wrap: break-word;
   hyphens: auto;
   margin: 0 auto;
   padding: clamp(32px, 5vw, 64px) var(--gutter) var(--section);
}

.legal h1 {
   margin-top: 24px;
   font-size: clamp(2.4rem, 6vw, 4rem);
   font-stretch: 88%;
   font-weight: 700;
   line-height: 1.04;
   letter-spacing: -0.02em;
}

.legal-meta {
   margin-top: 10px;
   color: var(--ink-faint);
   font-size: 0.95rem;
}

.legal-toc {
   margin-top: 32px;
   padding: 20px 24px;
   background: var(--white);
   border-radius: 12px;
}

.legal-toc h2 {
   font-size: 1.05rem;
   font-stretch: 100%;
   letter-spacing: 0;
}

.legal-toc ol {
   margin-top: 8px;
   padding-left: 1.4em;
   list-style: decimal;
}

.legal-toc a {
   text-decoration: none;
   color: var(--link);
}

.legal-body {
   margin-top: 36px;
}

.legal-body h2 {
   margin-top: 44px;
   font-size: 1.55rem;
   font-stretch: 94%;
   line-height: 1.2;
   letter-spacing: -0.008em;
   scroll-margin-top: 88px;
}

.legal-body h3 {
   margin-top: 26px;
   font-size: 1.12rem;
}

.legal-body p,
.legal-body ul,
.legal-body ol {
   margin-top: 12px;
}

.legal-body ul {
   padding-left: 1.2em;
   list-style: disc;
}

.legal-body ol {
   padding-left: 1.4em;
   list-style: decimal;
}

.legal-body li + li {
   margin-top: 6px;
}

.legal-body a {
   color: var(--link);
   text-underline-offset: 3px;
}

.legal-body blockquote {
   margin: 18px 0 0;
   padding: 14px 18px;
   background: var(--ice);
   border-radius: 10px;
}

.legal-body blockquote p:first-child {
   margin-top: 0;
}

.legal-body mark {
   padding: 0 4px;
   background: #ffe08a;
   border-radius: 3px;
}

/* Not found */

.missing {
   display: grid;
   justify-items: start;
   align-content: center;
   gap: 12px;
   min-height: 100vh;
   padding: var(--gutter);
}

.missing img {
   border-radius: 12px;
}

.missing h1 {
   font-size: clamp(2.4rem, 6vw, 4rem);
   font-stretch: 88%;
   line-height: 1.05;
}

.missing ul {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
}

/* WordPress: sticky header wrapper and template parts */

.site-header {
   position: sticky;
   top: var(--wp-admin--admin-bar--height, 0px);
   z-index: 20;
}

/* The skip link sits inside the sticky header, so it is pinned to the viewport instead. */
.site-header .skip {
   position: fixed;
}

/* Below 600px the admin bar scrolls with the page, so the header sticks to the very top. */
@media (max-width: 600px) {
   .site-header {
      top: 0;
   }
}

.site-header > .wp-block-mybrux-header,
.site-footer > .wp-block-mybrux-footer {
   margin: 0;
}

/* WordPress: buttons */

.wp-block-buttons {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
}

.wp-block-button .wp-block-button__link {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 52px;
   padding: 0 26px;
   border: 0;
   border-radius: 999px;
   background: var(--ink);
   color: var(--white);
   font: inherit;
   font-weight: 600;
   text-decoration: none;
   transition: background-color 0.2s;
}

.wp-block-button .wp-block-button__link:hover {
   background: var(--signal);
   color: var(--white);
}

.wp-block-button.is-quiet .wp-block-button__link {
   background: transparent;
   color: var(--ink);
   box-shadow: inset 0 0 0 1.5px var(--ink);
}

.wp-block-button.is-quiet .wp-block-button__link:hover {
   background: var(--ink);
   color: var(--white);
}

.wp-block-button.is-light .wp-block-button__link {
   background: var(--white);
   color: var(--ink);
}

.wp-block-button.is-light .wp-block-button__link:hover {
   background: var(--ice);
}

/* WordPress: images and video */

.wp-block-image.phone,
.phone .wp-block-image,
.store-badges .wp-block-image,
.wp-block-video.doctors-video {
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 0;
}

.wp-block-image.phone,
.phone .wp-block-image,
.store-badges .wp-block-image {
   margin-top: 0;
}

.wp-block-image.phone img {
   width: 100%;
   height: 100%;
   border-radius: 11.5% / 5.4%;
   object-fit: cover;
}

.how-stage .phone .wp-block-image img {
   height: 94.8%;
}

.store-badges .wp-block-image a {
   display: block;
   border-radius: 8px;
}

.store-badges .wp-block-image img {
   width: auto;
   height: 52px;
}

.wp-block-video.doctors-video {
   margin-top: clamp(32px, 5vw, 64px);
}

/* WordPress: the hero check-in widget is a Custom HTML block */

.hero-widget .faces button {
   appearance: none;
}

/* WordPress: generic pages and posts use the legal page styles */

.legal .wp-block-post-title {
   margin-top: 24px;
   font-size: clamp(2.4rem, 6vw, 4rem);
   font-stretch: 88%;
   font-weight: 700;
   line-height: 1.04;
   letter-spacing: -0.02em;
}

.legal .wp-block-post-title a {
   text-decoration: none;
}

.legal .wp-block-post-template > li + li {
   margin-top: 36px;
}

.legal .wp-block-query-pagination {
   margin-top: 36px;
   gap: 16px;
}

.legal-body img {
   height: auto;
}

/* WordPress: blog list */

.top-links a[aria-current] {
   color: var(--ink);
   font-weight: 600;
}

.blog {
   max-width: 1280px;
   margin: 0 auto;
   padding: clamp(32px, 5vw, 64px) var(--gutter) var(--section);
}

.blog-intro {
   max-width: 46rem;
}

.blog-intro .wp-block-post-title {
   margin-top: 24px;
   font-size: clamp(2.4rem, 6vw, 4rem);
   font-stretch: 88%;
   font-weight: 700;
   line-height: 1.04;
   letter-spacing: -0.02em;
}

.blog-intro p {
   margin-top: 16px;
   color: var(--ink-soft);
   font-size: 1.2rem;
}

.blog-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
   gap: clamp(20px, 3vw, 32px);
   margin-top: clamp(36px, 5vw, 64px);
}

.blog-card {
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background: var(--white);
   border-radius: 20px;
   transition: transform 0.25s var(--release), box-shadow 0.25s var(--release);
}

.blog-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 18px 40px -18px rgb(8 37 67 / 0.35);
}

.blog-card:focus-within {
   outline: 3px solid var(--signal);
   outline-offset: 3px;
}

.blog-card-image {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 1200 / 630;
   object-fit: cover;
   background: var(--ice);
}

.blog-card-placeholder {
   display: grid;
   place-items: center;
}

.blog-card-placeholder img {
   border-radius: 14px;
}

.blog-card-body {
   display: flex;
   flex: 1;
   flex-direction: column;
   gap: 10px;
   padding: 22px 24px 26px;
}

.blog-card-date {
   color: var(--ink-faint);
   font-size: 0.95rem;
}

.blog-card .blog-card-title {
   font-size: 1.45rem;
   font-stretch: 94%;
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -0.008em;
}

.blog-card-title a {
   text-decoration: none;
}

/* The whole card is clickable through the title link. */
.blog-card-title a::after {
   content: "";
   position: absolute;
   inset: 0;
}

.blog-card-title a:focus-visible {
   outline: none;
}

.blog-card-excerpt {
   color: var(--ink-soft);
}

.blog-card-more {
   margin-top: auto;
   padding-top: 6px;
   color: var(--link);
   font-weight: 600;
}

.blog-pagination {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 40px;
}

.blog-pagination .page-numbers {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 44px;
   min-height: 44px;
   padding: 0 14px;
   border-radius: 999px;
   background: var(--white);
   font-weight: 600;
   text-decoration: none;
}

.blog-pagination .page-numbers.current {
   background: var(--ink);
   color: var(--white);
}

.blog-empty {
   margin-top: 36px;
   color: var(--ink-soft);
}

/* WordPress: blog post */

/* Long-form reading: no automatic hyphenation, unlike the legal pages. */
.article {
   hyphens: manual;
}

.article-back {
   margin-top: 8px;
}

.article-meta {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.wp-block-post-featured-image.article-image {
   margin: 32px 0 0;
}

.wp-block-post-featured-image.article-image img {
   width: 100%;
   height: auto;
   border-radius: 20px;
}

.legal-body .legal-toc {
   margin-top: 32px;
}

.legal-body .legal-toc ol {
   margin-top: 6px;
}

.legal-body details {
   margin-top: 12px;
   padding: 16px 20px;
   background: var(--white);
   border-radius: 12px;
}

.legal-body summary {
   font-weight: 650;
   cursor: pointer;
}

.legal-body details p {
   color: var(--ink-soft);
}

.legal-body .article-note {
   margin-top: 40px;
   color: var(--ink-faint);
   font-size: 0.95rem;
}

.article-cta {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 150px;
   gap: clamp(24px, 4vw, 40px);
   align-items: center;
   margin-top: 56px;
   padding: clamp(26px, 4vw, 40px);
   background: var(--ink);
   color: var(--on-ink);
   border-radius: 24px;
}

.article-cta-title {
   color: var(--white);
   font-size: clamp(1.6rem, 3.4vw, 2.2rem);
   font-stretch: 88%;
   font-weight: 700;
   line-height: 1.08;
   letter-spacing: -0.015em;
}

.article-cta-copy > p:not(.article-cta-title) {
   margin-top: 12px;
}

.article-cta .store-badges {
   margin-top: 22px;
}

.article-cta .article-cta-note {
   color: var(--on-ink-soft);
   font-size: 0.9rem;
}

.article-cta-phone {
   box-shadow: none;
}

@media (max-width: 640px) {
   .article-cta {
      grid-template-columns: minmax(0, 1fr);
   }

   .article-cta-phone {
      display: none;
   }
}

/* WordPress: editor previews */

.editor-styles-wrapper .site-header {
   position: static;
}

.editor-styles-wrapper .hero h1 {
   animation: none;
}

.editor-styles-wrapper .hero-phone {
   margin-bottom: 0;
}

.editor-styles-wrapper .how-copy {
   opacity: 1;
}

.editor-styles-wrapper .how-stage {
   position: static;
}

.editor-styles-wrapper .how-stage .phone {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
   aspect-ratio: auto;
   padding: 10px;
   border-radius: 14px;
}

.editor-styles-wrapper .how-stage .phone img {
   position: static;
   width: 100%;
   height: auto;
   opacity: 1;
}

/* Tablets and phones */

@media (max-width: 1040px) {
   .top-links {
      display: none;
   }

   .top-actions {
      margin-left: auto;
   }
}

@media (max-width: 860px) {
   .hero-reply {
      min-height: 0;
      margin-bottom: 20px;
   }

   .hero h1 {
      font-size: min(14.6vw, 5.2rem);
   }

   .hero-body {
      grid-template-columns: minmax(0, 1fr);
   }

   .hero-check {
      padding-bottom: 0;
   }

   .hero-phone {
      justify-self: center;
      width: min(68vw, 300px);
      margin-bottom: -30%;
   }

   .faces {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }

   .how-grid {
      grid-template-columns: minmax(0, 1fr);
   }

   .how-stage {
      display: none;
   }

   .how-step {
      min-height: 0;
      gap: 28px;
      padding: 28px 0;
   }

   .how-copy {
      opacity: 1;
   }

   .how-inline {
      display: block;
      justify-self: center;
      width: min(72vw, 300px);
   }

   .breath,
   .trust,
   .faq {
      grid-template-columns: minmax(0, 1fr);
   }

   .doctors-features,
   .pricing {
      grid-template-columns: minmax(0, 1fr);
   }

   .foot-main {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .foot-main > :first-child {
      grid-column: 1 / -1;
   }
}

/* Clinics and pricing pages */

.offer-hero {
   padding: clamp(32px, 6vw, 96px) var(--gutter) clamp(48px, 7vw, 104px);
}

/* The panel recording sits half on this section and half on the dark one below it. */
.offer-hero.has-overlap,
.offer-panel {
   --overlap: clamp(48px, 13vw, 208px);
}

.offer-hero.has-overlap {
   padding-bottom: calc(var(--overlap) + clamp(40px, 5vw, 72px));
}

.offer-hero h1 {
   max-width: 20ch;
   font-size: clamp(2.75rem, 8.4vw, 7.5rem);
   font-stretch: 88%;
   font-weight: 700;
   line-height: 0.98;
   letter-spacing: -0.025em;
   text-wrap: balance;
}

.offer-kicker {
   display: block;
   margin-bottom: 0.9em;
   color: var(--ink-soft);
   font-size: clamp(0.95rem, 1.5vw, 1.25rem);
   font-stretch: 100%;
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: 0;
}

.offer-lead {
   max-width: 56ch;
   margin-top: clamp(20px, 2.5vw, 32px);
   color: var(--ink-soft);
   font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.offer-hero .wp-block-buttons,
.offer-link {
   margin-top: clamp(24px, 3vw, 36px);
}

/* flow-root stops the recording's negative margin from pulling the whole section up with it. */
.offer-panel {
   display: flow-root;
   padding-top: 0;
}

.offer-panel .doctors-video {
   margin-top: calc(var(--overlap) * -1);
   margin-bottom: clamp(48px, 6vw, 88px);
}

.offer-panel .doctors-video video {
   box-shadow: 0 40px 70px -30px rgb(8 37 67 / 0.5);
}

.offer-section {
   padding: var(--section) var(--gutter) 0;
}

.offer-steps {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: clamp(24px, 3vw, 48px);
   margin-top: clamp(32px, 5vw, 64px);
   counter-reset: step;
}

.offer-steps li,
.offer-grid > * {
   padding-top: 16px;
   border-top: 1.5px solid var(--ink);
}

.offer-steps li {
   counter-increment: step;
}

.offer-steps li::before {
   content: counter(step);
   display: block;
   font-size: clamp(3rem, 6vw, 5rem);
   font-stretch: 88%;
   font-weight: 700;
   line-height: 1;
   letter-spacing: -0.02em;
}

.offer-steps strong {
   display: block;
   margin-top: 16px;
   font-size: 1.3rem;
   font-weight: 650;
   line-height: 1.2;
}

.offer-steps span {
   display: block;
   margin-top: 8px;
   color: var(--ink-soft);
}

.offer-split {
   display: grid;
   grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
   gap: clamp(24px, 5vw, 80px);
   padding: var(--section) var(--gutter) 0;
}

.offer-split h2,
.offer-faq h2 {
   font-size: clamp(2rem, 3.8vw, 3.5rem);
   overflow-wrap: break-word;
}

.offer-split-intro p,
.offer-faq-intro p {
   margin-top: 16px;
   color: var(--ink-soft);
}

.offer-phones {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: clamp(20px, 3vw, 48px);
}

.offer-phone .phone {
   max-width: 240px;
   margin: 0;
   box-shadow: 0 24px 44px -24px rgb(8 37 67 / 0.45);
}

.offer-phone h3 {
   margin-top: 24px;
}

.offer-phone p {
   margin-top: 8px;
   color: var(--ink-soft);
}

.offer-consent li {
   padding: 18px 0;
   border-top: 1px solid rgb(8 37 67 / 0.16);
   font-size: clamp(1.2rem, 2vw, 1.6rem);
   font-stretch: 92%;
   font-weight: 550;
   line-height: 1.35;
}

.offer-consent li:first-child {
   padding-top: 0;
   border-top: 0;
}

.offer-links {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 24px;
   margin-top: 16px;
}

/* A section with only the plan needs no line above it and less room around it. */
.offer-plan {
   padding-block: clamp(48px, 7vw, 96px);
}

.offer-split + .offer-plan {
   margin-top: var(--section);
}

.offer-plan .pricing {
   margin-top: 0;
   padding-top: 0;
   border-top: 0;
}

.pricing-amount .pricing-title {
   font-size: 1.3rem;
   font-stretch: 100%;
   font-weight: 650;
   line-height: 1.2;
   letter-spacing: 0;
}

.offer-table.wp-block-table {
   margin: 0;
   font-variant-numeric: tabular-nums;
}

.offer-table.wp-block-table thead {
   border: 0;
}

.offer-table.wp-block-table th,
.offer-table.wp-block-table td {
   padding: 14px 16px 14px 0;
   border: 0;
   border-top: 1px solid rgb(8 37 67 / 0.16);
   text-align: left;
   vertical-align: baseline;
}

.offer-table.wp-block-table th {
   padding-top: 0;
   padding-bottom: 12px;
   border-top: 0;
   color: var(--ink-soft);
   font-size: 0.95rem;
   font-weight: 600;
}

.offer-table.wp-block-table td {
   font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.offer-table.wp-block-table th:last-child,
.offer-table.wp-block-table td:last-child {
   padding-right: 0;
   text-align: right;
}

.offer-table.wp-block-table td:last-child {
   font-size: clamp(1.7rem, 3.6vw, 3rem);
   font-stretch: 88%;
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -0.02em;
}

.offer-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px);
   align-self: start;
}

.offer-grid p {
   margin-top: 8px;
   color: var(--ink-soft);
}

.offer-grid ul {
   margin-top: 12px;
}

.offer-grid li + li {
   margin-top: 6px;
}

.offer-grid .offer-note {
   margin-top: 16px;
   color: var(--ink-faint);
   font-size: 0.95rem;
}

.faq.offer-faq {
   padding-top: var(--section);
}

.offer-faq-intro .wp-block-buttons {
   margin-top: 20px;
}

@media (max-width: 860px) {
   .offer-split {
      grid-template-columns: minmax(0, 1fr);
   }

   .offer-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .offer-phones {
      grid-template-columns: minmax(0, 1fr);
   }

   /* Beside the text, a small phone keeps the three steps within reach of a thumb. */
   .offer-phone {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr);
      gap: 20px;
      align-items: center;
   }

   .offer-phone h3 {
      margin-top: 0;
   }
}

@media (max-width: 560px) {
   .offer-steps,
   .offer-grid {
      grid-template-columns: minmax(0, 1fr);
   }
}

/* Cookie consent: a card that leaves the page usable. Both answers look the same on purpose. */

.consent {
   position: fixed;
   right: var(--gutter);
   bottom: max(20px, env(safe-area-inset-bottom));
   z-index: 25;
   display: grid;
   gap: 8px;
   width: min(420px, 100vw - 2 * var(--gutter));
   max-height: calc(100dvh - 40px);
   overflow-y: auto;
   padding: 22px;
   border-radius: 18px;
   background: var(--ink);
   color: var(--on-ink);
   font-size: 0.95rem;
   line-height: 1.5;
   box-shadow: 0 18px 48px rgb(8 37 67 / 0.32);
   animation: consent-rise 0.5s var(--release);
}

.consent[hidden] {
   display: none;
}

.consent-title {
   color: var(--white);
   font-size: 1.1rem;
   font-weight: 650;
}

.consent a {
   color: var(--white);
   text-underline-offset: 3px;
}

.consent-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
   margin-top: 8px;
}

.consent .button {
   min-height: 46px;
   padding: 0 12px;
}

@keyframes consent-rise {
   from {
      opacity: 0;
      transform: translateY(12px);
   }
}

.foot-links button {
   padding: 3px 0;
   border: 0;
   background: none;
   color: inherit;
   font: inherit;
   text-align: left;
   cursor: pointer;
}

.foot-links button:hover {
   text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   *,
   *::before,
   *::after {
      animation: none !important;
      transition: none !important;
   }

   .breath-dot {
      display: none;
   }
}