/* CareLoop Health holding site */
@font-face { font-family: "Lexend Deca"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/LexendDeca-400.woff2) format("woff2"); }
@font-face { font-family: "Lexend Deca"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/LexendDeca-600.woff2) format("woff2"); }
@font-face { font-family: "Lexend Deca"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/LexendDeca-700.woff2) format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #FFFFFF; }
img { max-width: 100%; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: #3A2445; color: #FFFFFF; font: 600 15px "Lexend Deca", Arial, sans-serif; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- CareLoop site styles ---------- */
.site {
  --teal: #14868E; --teal-700: #0E6A70; --teal-500: #0CA1A5; --mint-050: #F1FAF9; --mint-100: #E4F6F4;
  --mint-300: #C4F0E8; --mint-400: #A8E8E8; --plum: #4A2E57; --plum-700: #3A2445; --plum-300: #8B6C9B;
  --lav-tint: #F0EDF7; --lav-200: #E1DAF0; --lav-text: #6B4FA8; --slate: #434342; --grey: #6E6E6C;
  --line: #E3E6E5; --card-line: #D7ECED; --neutral: #B7B7B7; --ink: #241B2B; --white: #FFFFFF;
  container-type: inline-size; container-name: site;
  position: relative; background: var(--white); color: var(--slate);
  font-family: "Lexend Deca", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5;
  overflow: hidden; color-scheme: light;
}
.site h1, .site h2, .site h3, .site p { margin: 0; }
:where(.site) a { color: inherit; }
.site :focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.site .on-dark :focus-visible { outline-color: var(--mint-300); }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(20px, 4cqi, 48px); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.kicker .rule { width: 28px; height: 1.5px; background: currentColor; }
.logo { display: block; width: auto; color: var(--teal); }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 48px; padding: 0 24px; border: 0; border-radius: 999px; font: inherit; font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 220ms ease-out, box-shadow 220ms ease-out, transform 220ms ease-out; }
.btn.has-badge { padding-right: 6px; }
.btn .badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.btn .badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-teal { background: var(--teal-700); color: var(--white); }
.btn-teal:hover { background: #0B5A5F; }
.btn-plum { background: var(--plum); color: var(--white); }
.btn-plum:hover { background: var(--plum-700); }
.btn-lg { height: 56px; font-size: 17px; }
.btn-lg .badge { width: 42px; height: 42px; }
.field { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 4px; border: 1.5px solid var(--neutral); border-radius: 999px; background: var(--white); transition: border-color 220ms ease-out, box-shadow 220ms ease-out; }
.field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20,134,142,0.14); }
.field input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 16px; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--slate); }
.field input::placeholder { color: var(--grey); }
.field:has(input[aria-invalid="true"]), input.solo[aria-invalid="true"] { border-color: #B23A33 !important; }
.consent { font-size: 13px; line-height: 1.5; color: var(--grey); padding-left: 4px; }
.consent a { text-decoration: underline; text-underline-offset: 2px; }
.signup .done { display: none; }
.signup.sent form { display: none; }
.signup.sent .done { display: flex; }
.done { align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--mint-050); border: 1px solid var(--card-line); }
.done .tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--teal-700); }
.done .tick svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.done p { flex: 1 1 auto; font-size: 16px; color: var(--slate); }
.done button { flex: none; min-height: 44px; padding: 0 6px; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--teal-700); text-decoration: underline; cursor: pointer; }
.mail-link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.big-mail { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; font-size: clamp(21px, 2.4cqi, 30px); font-weight: 600; text-decoration: none; padding-bottom: 5px; border-bottom: 2px solid var(--mint-400); overflow-wrap: anywhere; transition: border-color 220ms ease-out; }
.big-mail:hover { border-bottom-color: currentColor; }
.big-mail svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.urgent { display: flex; gap: 14px; }
.urgent .ring { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--teal-700); }
.urgent h2 { font-size: 18px; font-weight: 600; color: var(--slate); margin-bottom: 6px; }
.urgent p { font-size: 15px; line-height: 1.6; color: var(--slate); }
.waves { position: absolute; z-index: 0; pointer-events: none; }
.waves canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lift { position: relative; z-index: 1; }

/* Entrance: content is fully visible at rest; the rise only plays when motion is on */
/* Starts mostly visible, so a paused or background tab never shows blank text */
@keyframes rise { from { opacity: 0.55; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.site.play .rise { animation: rise 1100ms cubic-bezier(0.16,1,0.3,1) both; }
.site.play .r1 { animation-delay: 90ms; }
.site.play .r2 { animation-delay: 180ms; }
.site.play .r3 { animation-delay: 300ms; }
.site.play .r4 { animation-delay: 420ms; }
@media (prefers-reduced-motion: reduce) { .site.play .rise { animation-duration: 1ms; animation-delay: 0ms; } }

/* Feature switches */

/* ---------- Plum footer ---------- */
.foot-plum { background: var(--plum); color: var(--white); }
.foot-plum .wrap { padding-block: clamp(48px, 6cqi, 72px) 0; display: flex; flex-direction: column; gap: 36px; }
.fp-cols { display: flex; flex-wrap: wrap; gap: 36px clamp(40px, 6cqi, 96px); }
.fp-brand { flex: 1.4 1 280px; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.fp-brand p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.84); }
.fp-col { flex: 1 1 200px; display: flex; flex-direction: column; gap: 10px; }
.fp-col h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-300); margin-bottom: 4px; }
.fp-col a { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: 15px; color: rgba(255,255,255,0.88); text-decoration: none; }
.fp-col a:hover { color: var(--white); text-decoration: underline; }
.fp-col p { display: flex; gap: 10px; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.88); }
.fp-col .ico { color: var(--mint-300); margin-top: 3px; }
.round { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); color: var(--white); transition: background 220ms ease-out; }
.round:hover { background: rgba(255,255,255,0.2); }
.round svg { width: 18px; height: 18px; fill: currentColor; }
.fp-certs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: 22px; border-top: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); }
.fp-certs > span { font-size: 14px; font-weight: 600; }
.fp-certs div { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.fp-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.fp-base { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 8px; }
.fp-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-bottom: 20px; font-size: 13px; color: rgba(255,255,255,0.8); }
.fp-base button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border: 0; background: transparent; color: rgba(255,255,255,0.88); font: inherit; font-size: 13px; cursor: pointer; }
.fp-base button:hover { color: var(--white); }

/* ---------- Framed and calm layout ---------- */
.o3-head { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; column-gap: 24px; max-width: 1440px; margin: 0 auto; padding: 16px clamp(16px, 3cqi, 40px); }
.o3-mail { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; color: var(--slate); text-decoration: none; }
.o3-mail:hover { color: var(--teal-700); }
.o3-mail .dot { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mint-100); color: var(--teal-700); }
.o3-mail .dot .ico { width: 16px; height: 16px; }
.o3-cta { justify-self: end; display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: 999px; background: var(--plum-700); color: var(--white); font-size: 15px; font-weight: 600; text-decoration: none; transition: background 220ms ease-out; }
.o3-cta:hover { background: var(--plum); }
button.o3-cta { border: 0; font-family: inherit; cursor: pointer; }
button.o3-cta:focus-visible { outline: 3px solid var(--teal-500); outline-offset: 2px; }
.o3-pad { padding-inline: clamp(8px, 1.5cqi, 24px); }
.o3-panel { position: relative; overflow: hidden; border-radius: 40px; background: var(--plum-700); color: var(--white); }
.o3-panel .waves { inset: 0; }
.o3-panel .lift { max-width: 1200px; margin: 0 auto; padding: clamp(48px, 8cqi, 112px) clamp(20px, 4cqi, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 44px 64px; }
.o3-text { flex: 1.25 1 420px; display: flex; flex-direction: column; gap: 26px; }
.o3-text .kicker { color: var(--mint-300); }
.o3-text h1 { font-size: clamp(44px, 6.2cqi, 92px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 400; color: var(--white); text-wrap: balance; }
.o3-text h1 em { font-style: normal; color: var(--mint-300); }
.o3-text .lead { font-size: clamp(17px, 1.6cqi, 20px); line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 44ch; }
.o3-certs { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 10px; }
.o3-certs .sep { width: 1px; height: 34px; background: rgba(255,255,255,0.22); }
.o3-card { flex: 1 1 340px; max-width: 470px; background: var(--white); color: var(--slate); border-radius: 28px; box-shadow: 0 40px 80px rgba(20,10,30,0.35); padding: clamp(26px, 3cqi, 40px); display: flex; flex-direction: column; gap: 18px; }
.o3-card h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 400; color: var(--slate); }
.o3-card label { font-size: 16px; line-height: 1.6; color: var(--grey); }
.o3-card form { display: flex; flex-direction: column; gap: 12px; }
.o3-card input.solo { width: 100%; height: 54px; padding: 0 20px; border: 1.5px solid var(--neutral); border-radius: 999px; outline: none; background: var(--white); font: inherit; font-size: 16px; color: var(--slate); transition: border-color 220ms ease-out, box-shadow 220ms ease-out; }
.o3-card input.solo:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(20,134,142,0.14); }
.o3-card input.solo::placeholder { color: var(--grey); }
.o3-card .btn { width: 100%; justify-content: space-between; padding-left: 28px; }
.o3-card .consent { padding-left: 0; }
.o3-contact { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 8cqi, 104px) clamp(20px, 4cqi, 48px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 72px; }
.o3-contact > div { flex: 1.25 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.o3-contact .kicker { color: var(--teal-700); }
.o3-contact h2 { font-size: clamp(30px, 3cqi, 40px); line-height: 1.12; font-weight: 400; letter-spacing: -0.02em; }
.o3-contact p { font-size: 18px; line-height: 1.6; }
.o3-contact .big-mail { color: var(--plum); border-bottom-color: var(--lav-200); }
.o3-urgent { flex: 1 1 300px; max-width: 480px; padding: 28px; border-radius: 20px; background: var(--mint-050); border: 1px solid var(--card-line); }

/* ---------- Compact holding-page rhythm: most of each page sits in one screen ---------- */
.foot-plum .wrap { padding-block: clamp(36px, 4cqi, 52px) 0; gap: 28px; }
.fp-cols { gap: 28px clamp(32px, 5cqi, 80px); }
.fp-certs { padding-block: 16px; }
.o3-head { padding-block: 10px; }
.o3-panel .lift { padding: clamp(36px, 5cqi, 72px) clamp(20px, 4cqi, 48px); gap: 32px 56px; }
.o3-text { gap: 18px; }
.o3-text h1 { font-size: clamp(40px, 4.8cqi, 70px); }
.o3-card { padding: clamp(22px, 2.4cqi, 32px); gap: 14px; }
.o3-card h2 { font-size: 23px; }
.o3-card input.solo { height: 50px; }
.o3-contact { padding: clamp(36px, 4.5cqi, 60px) clamp(20px, 4cqi, 48px); gap: 28px 64px; }
.o3-contact h2 { font-size: clamp(26px, 2.4cqi, 32px); }
.o3-contact .o3-urgent h2 { font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }

/* ---------- One alignment grid ----------
   Header, panel text, sign-up card, contact section and footer all share the same
   1200px column and side gutter, so their left and right edges line up at every width.
   The panel is inset from the window edge, so its inner padding subtracts that inset. */
.site { --gutter: clamp(20px, 4cqi, 48px); --inset: clamp(8px, 1.5cqi, 24px); }
.wrap, .o3-contact { max-width: 1200px; padding-inline: var(--gutter); }
.o3-head { max-width: 1200px; padding-inline: var(--gutter); }
.o3-pad { padding-inline: var(--inset); }
.o3-panel .lift { max-width: calc(1200px - 2 * var(--inset)); padding-inline: calc(var(--gutter) - var(--inset)); }
/* The wordmark keeps its own proportions, so it sits flush left instead of floating in a stretched box */
.logo { aspect-ratio: 200.567 / 50.657; flex: none; }
.fp-brand .logo { align-self: flex-start; }
/* Contact row uses the same two columns as the panel, so the urgent-help card sits under the sign-up card */
.o3-contact { column-gap: 56px; }
.o3-contact > div { flex: 1.25 1 420px; }
.o3-urgent { flex: 1 1 340px; max-width: 470px; }

/* ---------- Narrow sites (phone frame or small screens) ---------- */
@container site (max-width: 760px) {
  .o3-head { grid-template-columns: 1fr; justify-items: center; row-gap: 8px; }
  .o3-head .logo-cell { order: -1; }
  .o3-mail { justify-self: center; }
  .o3-cta { justify-self: center; }
  .o3-panel { border-radius: 28px; }
}

/* ---------- Request a demo dialog ---------- */
.demo-dialog { border: 0; padding: 0; border-radius: 28px; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; background: var(--white); color: var(--slate); font-family: inherit; box-shadow: 0 40px 80px rgba(20,10,30,0.35); }
.demo-dialog::backdrop { background: rgba(36,27,43,0.62); }
.demo-card { padding: clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.demo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.demo-head h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 400; color: var(--slate); }
.demo-card p { font-size: 16px; line-height: 1.6; color: var(--grey); }
.demo-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mint-050); color: var(--teal-700); cursor: pointer; }
.demo-close:hover { background: var(--mint-100); }
.demo-fail a { color: var(--teal-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Policy pages ---------- */
.logo-link { display: inline-flex; border-radius: 8px; }
.pol-hero .lift { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 14px; padding-block: clamp(32px, 4.5cqi, 64px); }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.8); }
.crumbs a { color: var(--mint-300); text-decoration: underline; text-underline-offset: 3px; }
.pol-hero h1 { font-size: clamp(34px, 4cqi, 56px); line-height: 1.06; letter-spacing: -0.025em; font-weight: 400; color: var(--white); text-wrap: balance; }
.pol-meta { font-size: 15px; color: rgba(255,255,255,0.86); }
.pol-body { max-width: 1200px; margin: 0 auto; padding: clamp(36px, 4.5cqi, 64px) var(--gutter) clamp(48px, 6cqi, 88px); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 56px; }
.pol-toc { flex: 0 1 250px; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border-radius: 18px; background: var(--mint-050); border: 1px solid var(--card-line); }
.pol-toc p { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-700); }
.pol-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pol-toc a { display: block; padding: 6px 10px; margin-inline: -10px; border-radius: 8px; font-size: 14px; line-height: 1.4; color: var(--slate); text-decoration: none; transition: background 200ms ease-out, color 200ms ease-out; }
.pol-toc a:hover { background: var(--white); color: var(--teal-700); }
.pol-article { flex: 1 1 520px; min-width: 0; max-width: 72ch; display: flex; flex-direction: column; gap: 22px; font-size: 16.5px; line-height: 1.7; color: var(--slate); }
.pol-article p { margin: 0; }
.pol-article ul, .pol-article ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.pol-article li::marker { color: var(--teal); }
.pol-article strong { font-weight: 600; }
.pol-article .mail-link { color: var(--teal-700); }
.pol-lead { font-size: 19px; line-height: 1.6; }
.pol-sec { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.pol-sec h2 { font-size: clamp(22px, 2cqi, 27px); font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; color: var(--plum); }
.pol-sec h3 { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--slate); margin-top: 8px; }
.pol-part { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-700); margin-bottom: -6px !important; }
.pol-summary { padding: 24px 28px; border: 1px solid var(--card-line); border-radius: 20px; background: var(--mint-050); }
.ticks { list-style: none; padding-left: 0 !important; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0.3em; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--teal-700); color: var(--white); font-size: 11px; line-height: 1; }
.pol-choice { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px dashed var(--neutral); border-radius: 14px; }
.pol-choice-k { font-size: 14px; }
.pol-callout { padding: 16px 20px; border-radius: 14px; background: var(--lav-tint); color: var(--plum); font-weight: 600; }
.pol-dl { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.pol-dl > div { display: grid; grid-template-columns: minmax(150px, 0.4fr) 1fr; gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pol-dl dt { font-weight: 600; font-size: 15px; line-height: 1.6; }
.pol-dl dd { margin: 0; }
.pol-steps { list-style: none; padding-left: 0 !important; gap: 16px !important; }
.pol-steps > li { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 6px 20px rgba(74,46,87,0.05); }
.pol-steps h3 { margin-top: -4px; font-size: 19px; }
.pol-step-k { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-700); }
.pol-timing { padding: 12px 16px; border-radius: 12px; background: var(--mint-050); font-size: 15px; }
.pol-urgent { padding: 20px 22px; border-radius: 18px; background: var(--mint-050); border: 1px solid var(--card-line); }
.pol-urgent h2, .pol-urgent h3 { font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.35; color: var(--slate); margin: 0 0 4px; }
.pol-urgent p { font-size: 15.5px; }
#com-help { border-top: 0; padding-top: 0; }
.pol-dates { display: flex; gap: 10px; font-size: 15px; }
.pol-dates span { font-weight: 600; }
.pol-links { list-style: none; padding-left: 0 !important; }
.pol-links a { color: var(--teal-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pol-small { font-size: 13px; color: var(--grey); }
/* Items to confirm: square-bracket text, highlighted when the switch is on */
.tbc { background: transparent; color: inherit; }
[data-tbc="on"] .tbc { background: #FCF2E0; color: #6E4A0E; border-radius: 4px; padding: 0 3px; box-shadow: inset 0 -1.5px 0 #E0B566; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-tbc="on"] .on-dark .tbc { background: rgba(247,177,85,0.22); color: #FFE7C2; box-shadow: inset 0 -1.5px 0 rgba(247,177,85,0.7); }

/* When contact and urgent help stack, centre them. 886px is where the two columns
   (420 + 340 + 56 gap, inside the 4% side gutters) no longer fit side by side. */
@container site (max-width: 886px) {
  .o3-contact { flex-direction: column; align-items: center; text-align: center; }
  .o3-contact > div { flex: none; width: 100%; align-items: center; }
  .o3-contact .big-mail { align-self: center; }
  .o3-urgent { flex: none; width: 100%; max-width: 470px; flex-direction: column; align-items: center; text-align: center; }
}
/* Phones: the plum panel runs edge to edge with no rounded frame */
@container site (max-width: 600px) {
  .o3-pad, .o3-panel { --inset: 0px; }
  .o3-panel { border-radius: 0; }
  .pol-dl > div { grid-template-columns: 1fr; }
  .pol-toc { flex-basis: 100%; }
}


/* ---------- Sign-up form additions ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { font-size: 14px; line-height: 1.5; color: #B23A33; }
.form-error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.btn[disabled] { opacity: 0.7; cursor: progress; }