/* SmileMaxer.com — "Marigold on paper": white canvas, vivid #FF8C29 ink,
   charting-grid texture, crisp editorial cards, diamond motif. */

:root {
  /* ONE orange. Two colours on this site, orange and white (2026-08-18,
     Max's call). Lightened from the SmileMaxer marigold #FF8C29 to the PerioMaxer light orange #FF8C29 on
     2026-08-19 (Max: match the light orange of the app icon). The steps
     below are the same ink laid over white at lower strength, not new
     hues, because a wash of a colour is still the colour.

     What that costs, and how it is paid. #FF8C29 is a LIGHT colour: on
     white it measures 2.1:1, and white on it about the same. It cannot
     carry text at either polarity. So orange is a FILL here and never
     type. Type is ink, including type sitting on an orange fill, where
     ink measures about 9:1. If you find yourself wanting a darker
     orange to make orange text readable, the answer is ink, not a
     tenth shade. */
  --orange-50:  #FFF7EF;   /* marigold at ~8% over white */
  --orange-100: #FFEFDF;   /* ~16% */
  --orange-200: #FFE1C4;   /* ~30%, light enough to hold ink */
  --orange-500: #FF8C29;   /* the logo */

  /* Cool accent so the blue app screenshots pop against the orange */
  --app-blue:   #1E6ED2;
  --app-blue-2: #3C8CE6;

  /* Neutrals — paper white + warm near-black ink */
  --cream:      #FFFFFF;   /* page canvas is pure white now */
  --white:      #FFFFFF;
  --ink:        #1A1206;
  --ink-soft:   #5C5142;
  --ink-faint:  #8A8170;

  /* Surfaces — solid white cards, warm hairlines (glass var names kept
     for backwards compat with every page already referencing them) */
  --glass-bg:       #FFFFFF;
  --glass-bg-hi:    #FFFFFF;
  --surface-tint:   #FFF8F0;        /* faint warm wash for alt surfaces */
  --glass-border:   #F0E6D6;        /* warm hairline */
  --glass-border-2: rgba(255, 140, 41, 0.28);
  --line:           #ECE2D2;
  --hairline-orange: rgba(255, 140, 41, 0.32);

  /* Shadows — refined, marigold-tinted */
  --shadow-sm: 0 1px 2px rgba(26, 18, 6, 0.05), 0 2px 8px rgba(255, 140, 41, 0.07);
  --shadow-md: 0 4px 16px rgba(255, 140, 41, 0.12), 0 2px 6px rgba(26, 18, 6, 0.05);
  --shadow-lg: 0 24px 60px rgba(255, 140, 41, 0.16), 0 8px 20px rgba(26, 18, 6, 0.08);

  /* Radius + type — tightened for an editorial, precise feel */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --container: 1120px;

  /* Short aliases used across the portal + staff JSX. These were
     referenced long before they were declared, so every page that used
     them fell back to the browser default (usually black or nothing).
     Values track the palette above. */
  --bg:      #FFFFFF;   /* page canvas, same as --cream */
  --muted:   #8A8170;   /* secondary text, same as --ink-faint */
  --accent:  #FF8C29;   /* brand orange, same as --orange-500 */
  --success: #047857;   /* matches the var(--success, #047857) fallbacks */
  --warning: #B45309;   /* matches the var(--warning, #b45309) fallbacks */
  --danger:  #B3261E;   /* same red form.stack .error already uses */
}

/* Per-site palette: periomaxer.com (the default :root values) runs the
   lighter product orange #FF8C29; the SmileMaxer hub keeps its darker
   marigold. The body class comes from Layout. */
body.site-smilemaxer {
  --orange-50:  #FFF6EA;
  --orange-100: #FFEDD9;
  --orange-200: #FFDFBC;
  --orange-500: #FF8C29;
  --accent:     #FF8C29;
  --hairline-orange: rgba(255, 140, 41, 0.32);
  --glass-border-2:  rgba(255, 140, 41, 0.28);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

/* White canvas + a single soft marigold glow at the top. The page reads
   as white; the warmth only kisses the masthead. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 520px at 50% -8%, rgba(255, 140, 41, 0.10) 0%, transparent 70%),
    var(--white);
}

/* Charting-paper texture: a fine marigold dot-grid — a nod to the perio
   chart's graph-paper lineage. Subtle enough that the page stays white. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(rgba(255, 140, 41, 0.16) 1.1px, transparent 1.5px);
  background-size: 24px 24px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
  pointer-events: none;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p  { margin: 0 0 1rem; color: var(--ink-soft); }
/* Links.
   Orange used to be what told a link from body text. It cannot be any
   more: #FF8C29 on white is 2.1:1, so orange type is unreadable, and
   ink type alone leaves a link invisible inside a sentence. A marigold
   underline does the job with the two colours we have, and it is the
   one link affordance that never depended on telling colours apart.

   Underline PROSE links only. A nav item, a footer item, a card, a
   button and a brand mark are all anchors too, and underlining those
   turns the page into a rash. */
a { color: var(--ink); text-decoration: none; transition: background .18s ease; }

p a,
li a,
dd a,
td a,
.lede a,
.hint a,
.pmx-note a,
.alert a,
.baa-doc-body a,
.legal a:not(.btn),
.content-card a:not(.btn) {
  border-bottom: 1.5px solid var(--orange-500);
}
p a:hover,
li a:hover,
dd a:hover,
td a:hover,
.lede a:hover,
.hint a:hover,
.pmx-note a:hover,
.alert a:hover,
.baa-doc-body a:hover,
.legal a:not(.btn):hover,
.content-card a:not(.btn):hover {
  background: var(--orange-50);
}

img { max-width: 100%; display: block; }

::selection { background: var(--orange-100); color: var(--ink); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Nav ---------- */

/* The bar is ReadyMaxer's (2026-09-01, Max's call): full width,
   stuck to the top, white with a light blur and one hairline under it.
   It used to float as a rounded glass pill 12px below the top edge,
   which read as a widget on the page rather than as the page's own
   top edge. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 0;
  margin-top: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  height: 62px;
  padding: 0 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--orange-500);
  display: grid;
  place-items: center;
  box-shadow: 0 3px 10px rgba(255, 140, 41, 0.40), inset 0 0 0 1px rgba(255,255,255,0.18);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
}

/* App-icon brand mark + two-tone wordmark (Smile = ink, Maxer = marigold),
   matching the in-app logo treatment. */
.brand-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: block;
  box-shadow: 0 3px 10px rgba(255, 140, 41, 0.30);
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
  white-space: nowrap;
}

.brand-name .max { color: var(--orange-500); }

/* Nav links are TEXT, not chips (2026-08-18).
   Every one of these used to be a pill: 8px/14px of padding and a
   999px radius, so a bar of five links read as five buttons. Plain
   text with real space between them reads as navigation, and it
   leaves the one pill in the row looking like the one action. Same
   shape ReadyMaxer's bar uses. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links a {
  padding: 6px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 0;
  /* Never let a link label break in two ("Log in" → "Log" / "in")
     when the CTA pill squeezes the row at narrow widths. */
  white-space: nowrap;
  transition: color .18s ease;
}

.nav-links a:hover { color: var(--ink); background: none; }

/* The page you are on: weight and ink, not a filled chip. */
.nav-links a.active { color: var(--ink); }

.nav-cta {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.02em;
  background: var(--orange-500) !important;
  color: var(--ink) !important;
  padding: 3px 11px 4px !important;
  border-radius: 7px;
  font-weight: 800 !important;
  white-space: nowrap;
}

.nav-cta:hover { background: var(--orange-500) !important; }





@media (max-width: 760px) {
  .site-smilemaxer .nav-links .nav-link { display: none; }
  /* Keep product navigation reachable beside the compact icon on phones. */
  .site-periomaxer .nav-links { gap: 16px; }
  .site-periomaxer .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 0.98rem; }
  .nav-inner { padding: 0 14px; gap: 12px; }
  .nav-links { gap: 12px; }
}

/* ---------- Glass primitives ---------- */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.glass-strong {
  background: var(--glass-bg-hi);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 12px;
  background: var(--orange-50);
  border: 1px solid var(--glass-border-2);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Diamond dot — echoes the ◆ brand mark */
.chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--orange-500);
  transform: rotate(45deg);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn-primary {
  background: var(--orange-500);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(255, 140, 41, 0.38), inset 0 1px 0 rgba(255,255,255,0.28);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--orange-500);
  box-shadow: 0 12px 28px rgba(255, 140, 41, 0.48), inset 0 1px 0 rgba(255,255,255,0.28);
  color: var(--ink);
}

/* Irreversible actions only (account deletion). Deliberately not the
   brand orange: this button must not read as the normal way forward. */
.btn-danger {
  background: #C0392B;
  color: white;
  box-shadow: 0 8px 22px rgba(192, 57, 43, 0.32), inset 0 1px 0 rgba(255,255,255,0.22);
}

.btn-danger:hover {
  transform: translateY(-2px);
  background: #A93226;
  color: white;
}

.btn-glass {
  background: var(--white);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn-glass:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-orange);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: 72px 0 48px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.hero-copy .chip { margin-bottom: 20px; }

.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

/* Accent word: marigold ink with a soft marker-stroke underline behind it */
.hero-title .accent {
  position: relative;
  color: var(--orange-500);
  white-space: nowrap;
}

.hero-title .accent::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.02em;
  height: 0.36em;
  z-index: -1;
  background: var(--orange-100);
  border-radius: 999px 4px 999px 6px;
  transform: rotate(-0.8deg);
}

.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 0 32px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* App showcase on hero (blue phone pops against orange) */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
}

.hero-visual::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 140, 41, 0.30) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 0;
}

.phone {
  position: relative;
  width: 300px;
  max-width: 80%;
  aspect-ratio: 9 / 19.5;
  border-radius: 52px;
  padding: 9px;                      /* uniform titanium bezel */
  /* Brushed-titanium rail: angled metallic gradient catches light on the
     diagonal edges */
  background:
    linear-gradient(135deg,
      #54545c 0%, #26262c 13%, #101015 30%, #0b0b0f 50%,
      #101015 70%, #26262c 87%, #5c5c64 100%);
  box-shadow:
    /* rail edge speculars */
    inset 0 1.5px 1px rgba(255,255,255,0.45),
    inset 0 -1.5px 1px rgba(255,255,255,0.22),
    inset 2px 0 1.5px rgba(255,255,255,0.16),
    inset -2px 0 1.5px rgba(255,255,255,0.16),
    /* hairline outer rim */
    0 0 0 1px rgba(0,0,0,0.4),
    /* lift, grounded drop shadow, brand glow */
    0 2px 4px rgba(26,18,6,0.20),
    0 26px 50px -14px rgba(26,18,6,0.55),
    0 40px 90px rgba(255,140,41,0.22);
  z-index: 1;
  transform: rotate(-2deg);
}

/* Power button (right rail) */
.phone::before {
  content: "";
  position: absolute;
  right: -2.5px;
  top: 30%;
  width: 3px;
  height: 64px;
  border-radius: 2px;
  background: linear-gradient(180deg, #40404a 0%, #15151a 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.30), 1px 0 1px rgba(0,0,0,0.3);
}

/* Left rail: action switch + volume rocker (cloned via box-shadow) */
.phone::after {
  content: "";
  position: absolute;
  left: -2.5px;
  top: 25%;
  width: 3px;
  height: 30px;
  border-radius: 2px;
  background: linear-gradient(180deg, #40404a 0%, #15151a 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.30),
    -1px 0 1px rgba(0,0,0,0.3),
    0 44px 0 -0.5px #18181c,    /* volume down */
    0 -34px 0 -0.5px #18181c;   /* action button */
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 44px;
  overflow: hidden;
  background: #000;
  position: relative;
  /* thin black inner bezel between rail and glass */
  box-shadow: inset 0 0 0 2px #000;
  display: grid;
  place-items: center;
}

/* Only the full-bleed screenshot (a direct child) fills the screen — NOT
   nested imgs like the home-hero launcher logo, which sets its own size. */
.phone-screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Glass reflection sweeping across the display */
.phone-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(125deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.06) 15%,
    transparent 33%,
    transparent 100%);
  pointer-events: none;
  z-index: 4;
}

/* Dynamic Island — hidden by default; enabled per phone context below. */
.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 24px;
  background: #000;
  border-radius: 999px;
  z-index: 5;
  display: none;
}

/* Hookup visual: the cropped screenshot gets a clean white status safe-area
   plus a real Dynamic Island, so the phone reads as an actual iPhone
   without the time/battery/Wi-Fi clutter. */
.hookup .phone-screen { background: #fff; }
.hookup .phone-screen img {
  height: calc(100% - 28px);
  margin-top: 28px;
}
.hookup .phone .phone-notch {
  display: block;
  top: 7px;
  width: 64px;
  height: 18px;
}

.hero-float-card {
  position: absolute;
  padding: 14px 18px;
  background: var(--glass-bg-hi);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  z-index: 2;
  animation: floaty 6s ease-in-out infinite;
}

.hero-float-card.fc-1 { top: 12%; left: -4%; }
.hero-float-card.fc-2 { bottom: 14%; right: -2%; animation-delay: -3s; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.fc-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(30, 110, 210, 0.12);
  color: var(--app-blue);
  font-size: 16px;
}

.fc-icon.orange {
  background: rgba(255, 140, 41, 0.15);
  color: var(--ink);
}

/* ---------- Sections ---------- */

section { padding: 56px 0; }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.section-head .chip { margin-bottom: 14px; }

.section-head p {
  font-size: 1.05rem;
  color: var(--ink-soft);
}

/* ---------- Feature grid ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 860px) { .features { grid-template-columns: 1fr; } }

.feature {
  position: relative;
  padding: 28px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Signature: a short marigold index-tab on the top edge */
.feature::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 34px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--orange-500);
}

.feature:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-orange);
  box-shadow: var(--shadow-lg);
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: var(--orange-500);
  color: var(--ink);
  font-size: 22px;
  box-shadow: 0 8px 20px rgba(255, 140, 41, 0.35);
}

.feature-icon.blue {
  background: linear-gradient(135deg, var(--app-blue-2) 0%, var(--app-blue) 100%);
  box-shadow: 0 8px 20px rgba(30, 110, 210, 0.35);
}

.feature h3 { margin-bottom: 8px; }
.feature p  { margin: 0; font-size: 0.95rem; }

/* Inline SVG glyph inside the marigold tile (replaces emoji) */
.feature-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Hub app catalog (smilemaxer.com) ---------- */
/* Cards built around the real app icons — a 2×2 grid of clickable tiles. */

.app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 860px) { .app-grid { grid-template-columns: 1fr; } }

.app-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  color: inherit;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* Same signature index-tab as .feature */
.app-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 34px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--orange-500);
}

.app-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-orange);
  box-shadow: var(--shadow-lg);
  color: inherit;
}

.app-tile {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(26, 18, 6, 0.18);
}

.app-card-body h3 { margin-bottom: 8px; }
.app-card-body p  { margin: 0 0 12px; font-size: 0.95rem; }

.app-card-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  transition: color .18s ease;
}

.app-card:hover .app-card-link { color: var(--ink); }

@media (max-width: 480px) {
  .app-card { flex-direction: column; }
}

/* Per-app brand color on the card's index-tab */
.app-card.is-periomaxer::before      { background: var(--orange-500); }
.app-card.is-readymaxer::before      { background: #FFE14D; }
.app-card.is-dentaldiffusion::before { background: #00C2C7; }
.app-card.is-maximouse::before       { background: var(--app-blue-2); }

/* ---------- Hub hero: floating app-icon constellation ---------- */
/* The four real app icons drift gently in the hero's right column.
   Pure CSS; stilled under prefers-reduced-motion. */

.app-constellation {
  position: relative;
  min-height: 380px;
}

.app-constellation .orb {
  position: absolute;
  border-radius: 26%;
  box-shadow: 0 18px 44px rgba(26, 18, 6, 0.20);
  animation: orb-drift 7s ease-in-out infinite;
}

.orb-periomaxer {
  width: 120px; height: 120px;
  top: 12%; left: 16%;
  transform: rotate(-6deg);
}

.orb-readymaxer {
  width: 96px; height: 96px;
  top: 2%; right: 14%;
  transform: rotate(7deg);
  animation-delay: -2.3s;
}

.orb-dentaldiffusion {
  width: 88px; height: 88px;
  bottom: 14%; left: 30%;
  transform: rotate(5deg);
  animation-delay: -4.1s;
}

.orb-maximouse {
  width: 72px; height: 72px;
  bottom: 26%; right: 22%;
  transform: rotate(-8deg);
  animation-delay: -5.6s;
}

@keyframes orb-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-constellation .orb { animation: none; }
}

@media (max-width: 860px) {
  .app-constellation { display: none; }
}

/* Availability tag in the card corner */
.feature-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.feature-tag.now  { background: var(--orange-100); color: var(--ink); }
.feature-tag.soon { background: #F1ECE2; color: var(--ink-faint); }

/* Muted (coming-soon) icon tile — de-emphasized vs the marigold tiles */
.feature-icon.muted {
  background: #EFE8DC;
  box-shadow: none;
}

.feature-icon.muted svg { stroke: var(--ink-faint); }

/* ---------- Screenshot strip ---------- */

.shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 860px) { .shots { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .shots { grid-template-columns: 1fr; } }

.shot {
  position: relative;
  padding: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.shot img {
  width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  border-radius: 22px;
  background: #000;
  box-shadow: 0 20px 50px rgba(255, 140, 41, 0.25);
}

.shot-caption {
  margin-top: 12px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- Pricing ---------- */

.pricing {
  display: grid;
  grid-template-columns: 1fr 1.08fr 1fr;
  gap: 18px;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .pricing { grid-template-columns: 1fr; max-width: 420px; }
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition: transform .22s ease, box-shadow .22s ease;
}

.plan:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.plan-featured {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 239, 223, 0.85) 100%);
  border: 1.5px solid rgba(255, 140, 41, 0.45);
  box-shadow:
    0 20px 50px rgba(255, 140, 41, 0.25),
    0 8px 20px rgba(26, 18, 6, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-8px);
}

.plan-featured:hover {
  transform: translateY(-12px);
}

@media (max-width: 900px) {
  .plan-featured { transform: none; }
  .plan-featured:hover { transform: translateY(-3px); }
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: var(--orange-500);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255, 140, 41, 0.4);
}

.plan-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}

.plan-price {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-display);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 4px;
}

.plan-currency {
  font-size: 1.4rem;
  font-weight: 600;
  align-self: flex-start;
  margin-top: 8px;
  color: var(--ink);
}

.plan-amount {
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: var(--orange-500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.plan-cents {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.plan-period {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 6px;
  margin-bottom: 6px;
}

.plan-effective {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.plan-effective strong {
  color: var(--ink);
}

.plan-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}

.plan-perks li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 0.93rem;
  color: var(--ink);
  border-bottom: 1px dashed rgba(255, 140, 41, 0.18);
}

.plan-perks li:last-child { border-bottom: 0; }

.plan-perks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 2px 6px rgba(255, 140, 41, 0.35);
}

.plan-perks li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  width: 8px;
  height: 4px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
}

.plan-cta {
  width: 100%;
  padding: 13px 20px;
  font-size: 0.95rem;
}

.pricing-note {
  text-align: center;
  margin-top: 28px;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

/* ---------- CTA block ---------- */

.cta-block {
  position: relative;
  padding: 56px 40px;
  text-align: center;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255, 140, 41, 0.25) 0%, transparent 70%),
    var(--glass-bg-hi);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cta-block::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 140, 41, 0.35) 0%, transparent 70%);
  filter: blur(30px);
}

.cta-block h2 { margin-bottom: 12px; }
.cta-block p  { max-width: 560px; margin: 0 auto 24px; }
.cta-block .hero-ctas { justify-content: center; }

/* ---------- Legal (markdown) pages ---------- */

.legal-wrap {
  padding: 40px 0 80px;
}

.legal-header {
  text-align: center;
  padding: 32px 24px 40px;
}

.legal-header h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--ink);
}

.legal-header p {
  color: var(--ink-faint);
  font-size: 0.95rem;
}

.legal {
  padding: 48px clamp(24px, 5vw, 64px);
  background: var(--glass-bg-hi);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  max-width: 860px;
  margin: 0 auto;
}

.legal h1, .legal h2, .legal h3 {
  color: var(--ink);
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.legal h1 { font-size: 2rem; margin-top: 0; }
.legal h2 { font-size: 1.45rem; color: var(--ink); }
.legal h3 { font-size: 1.15rem; color: var(--ink); }

.legal p,
.legal li {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.7;
}

.legal ul, .legal ol {
  padding-left: 1.4em;
  margin: 0.6em 0 1.2em;
}

.legal li { margin-bottom: 0.4em; }

.legal strong { color: var(--ink); font-weight: 700; }

.legal hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange-200), transparent);
  margin: 2.4em 0;
}

.legal blockquote {
  margin: 1.2em 0;
  padding: 14px 20px;
  border-left: 3px solid var(--orange-500);
  background: rgba(255, 140, 41, 0.08);
  border-radius: 0 12px 12px 0;
  color: var(--ink);
}

.legal code {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  background: rgba(255, 140, 41, 0.1);
  border-radius: 6px;
  color: var(--ink);
}

.legal a {
  color: var(--ink);
  border-bottom: 1px solid rgba(255, 140, 41, 0.35);
  transition: border-color .18s, color .18s;
}

.legal a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.legal a.btn {
  border-bottom: 0;
}

.legal a.btn-primary,
.legal a.btn-primary:hover {
  color: var(--ink);
}

.legal a.btn-glass,
.legal a.btn-glass:hover {
  color: var(--ink);
}

.legal-loading {
  text-align: center;
  padding: 80px 24px;
  color: var(--ink-faint);
}

.toc {
  margin-bottom: 32px;
  padding: 20px 24px;
  background: rgba(255, 246, 234, 0.7);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-md);
}

.toc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}

.toc ol {
  margin: 0;
  padding-left: 1.2em;
  columns: 2;
  column-gap: 24px;
}

@media (max-width: 600px) { .toc ol { columns: 1; } }

.toc li {
  font-size: 0.9rem;
  margin-bottom: 4px;
  break-inside: avoid;
}

.toc a {
  color: var(--ink-soft);
  border: 0;
}

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

/* ---------- About page ---------- */

.about-hero {
  padding: 48px 0 24px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 20px;
  background: var(--orange-500);
  display: grid;
  place-items: center;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  box-shadow: 0 16px 40px rgba(255, 140, 41, 0.35), inset 0 1px 0 rgba(255,255,255,0.3);
  border: 4px solid white;
}

.about-bio {
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 40px;
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.7;
}

.about-bio p { color: var(--ink); }

.about-socials {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
}

.social {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--glass-bg-hi);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.social:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--orange-200);
  color: var(--ink);
}

.social svg {
  width: 20px;
  height: 20px;
}

.interests {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 760px;
  margin: 32px auto 0;
}

@media (max-width: 720px) { .interests { grid-template-columns: repeat(2, 1fr); } }

.interest {
  text-align: center;
  padding: 20px 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}

.interest .emoji { font-size: 1.6rem; display: block; margin-bottom: 6px; }

/* ---------- Footer ---------- */
/* ReadyMaxer's footer (2026-09-01): one ink band, the wordmark on the
   left, the links as one small line on the right. It used to be a
   white strip with a row of grey links, which read as the page
   petering out rather than ending. */

.footer {
  margin-top: 80px;
  padding: 40px 0;
  background: var(--ink);
  color: #c9c4bb;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #fff;
}
.footer-brand .brand-name { color: #fff; font-size: 1.05rem; }
.footer-brand .brand-name .max { color: var(--orange-500); }

.footer-links {
  display: flex;
  gap: 4px 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 760px;
  font-size: 11.5px;
  letter-spacing: .05em;
}

.footer-links a {
  color: #e9e5dd;
  border-bottom: 0;
  white-space: nowrap;
}

.footer-links a:hover { color: #fff; border-bottom-color: var(--orange-500); }

.footer-meta {
  width: 100%;
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .02em;
  color: #8f8a80;
  margin-top: 20px;
}

@media (max-width: 720px) {
  .footer-links { justify-content: flex-start; }
}

/* ---------- Auth card (login, two-factor, forgot, reset) ---------- */
/* ReadyMaxer's sign-in shape: a small white card centred on a warm
   ground that fills the viewport under the bar. */

.auth-wrap {
  min-height: calc(100vh - 62px);
  display: grid;
  place-items: center;
  padding: 40px 20px;
  background: var(--surface-tint);
}
.auth-card {
  width: 100%;
  max-width: 430px;
  padding: 24px 22px;
  background: var(--white);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.auth-card h1 {
  font-size: 1.5rem;
  margin: 0 0 14px;
}
.auth-card p { margin: 0 0 14px; }
.auth-card form.stack { max-width: none; }
.auth-card form.stack .btn { width: 100%; }
.auth-card .hint { margin-top: 14px !important; text-align: center; }

/* ---------- Branded 404 ---------- */

.not-found {
  padding: 96px 0 80px;
  text-align: center;
}
.not-found .container { max-width: 640px; }
.not-found .eyebrow { color: var(--ink-faint); }
.not-found h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); letter-spacing: -0.03em; }
.not-found .hero-sub { margin: 0 auto 26px; }
.not-found .hero-ctas { justify-content: center; margin: 0 0 18px; }
.not-found-links { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.not-found-links a { color: var(--ink); }

/* ---------- Utilities ---------- */

.text-center { text-align: center; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-md);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
  transition: background 160ms ease, box-shadow 160ms ease;
}

.faq-item[open] {
  background: var(--glass-bg-hi);
  box-shadow: var(--shadow-md);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  outline: none;
}

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

.faq-item summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--orange-500);
  transition: transform 160ms ease;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.faq-item p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 0.97rem;
}

/* ---------- Clinical disclaimer ---------- */

.clinical-disclaimer {
  max-width: 760px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border: 1px dashed var(--glass-border-2);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.45);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.clinical-disclaimer strong {
  display: inline-block;
  margin-right: 6px;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Cloud-app extras — forms, alerts, admin shell, prelaunch banner.
   Visually consistent with the glass theme above.
   ============================================================ */

/* ---------- Pre-launch banner ---------- */

.banner-prelaunch {
  position: relative;
  padding: 10px 24px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink);
  background:
    radial-gradient(600px 100px at 50% 0%, rgba(255, 140, 41, 0.18) 0%, transparent 70%),
    var(--glass-bg-hi);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--glass-border-2);
}

.banner-prelaunch strong {
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-right: 8px;
}

/* ---------- Generic content cards (for non-marketing pages) ---------- */

.content-wrap {
  padding: 32px 0 56px;
}

.content-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 40px;
  background: var(--glass-bg-hi);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}

.content-card h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  color: var(--ink);
  margin-bottom: 14px;
}

.content-card h2 {
  font-size: 1.35rem;
  color: var(--ink);
  margin-top: 1.8em;
}

.content-card h3 {
  font-size: 1.1rem;
  margin-top: 1.4em;
}

.content-card p, .content-card li {
  color: var(--ink);
  line-height: 1.7;
}

.content-card .lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.content-card .hint {
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.content-card ul, .content-card ol {
  padding-left: 1.4em;
  margin: 0.6em 0 1.2em;
}

.content-card li { margin-bottom: 0.4em; }

.content-card hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange-200), transparent);
  margin: 2.4em 0;
}

.content-card code {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  background: rgba(255, 140, 41, 0.1);
  border-radius: 6px;
  color: var(--ink);
}

.content-card a {
  color: var(--ink);
  border-bottom: 1px solid rgba(255, 140, 41, 0.35);
}

.content-card a:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.content-card a.btn { border-bottom: 0; }
.content-card a.btn-primary, .content-card a.btn-primary:hover { color: var(--ink); }
.content-card a.btn-glass, .content-card a.btn-glass:hover { color: var(--ink); }

/* ---------- Tables (used in /how-it-works etc.) ---------- */

table.plain {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  background: var(--glass-bg);
  border-radius: var(--r-md);
  overflow: hidden;
}

table.plain th, table.plain td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border-2);
  font-size: 0.95rem;
}

table.plain th {
  font-weight: 600;
  color: var(--ink);
  background: rgba(255, 140, 41, 0.06);
  letter-spacing: 0.02em;
}

table.plain tr:last-child td { border-bottom: 0; }

/* ---------- Forms (stacked layout) ---------- */

form.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 28rem;
}

form.stack label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
}

form.stack input,
form.stack select,
form.stack textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--glass-border-2);
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Native select fallback (no JS): same taller, bubbly metrics as the
   enhanced .dd-btn below, so the page does not shift when dd.js runs. */
form.stack select {
  padding: 12px 13px;
  border: 1.5px solid var(--glass-border-2);
  border-radius: 11px;
  font-size: 15px;
  line-height: 1.35;
  background: #fff;
}

form.stack input::placeholder { color: var(--ink-faint); }

form.stack input:focus,
form.stack select:focus,
form.stack textarea:focus {
  outline: none;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(255, 140, 41, 0.18);
}

/* ---------- Bubbly dropdown (progressive enhancement) ----------
   /static/dd.js wraps every <select> in a .dd, hides the native
   control, and draws a button + listbox. The native select stays in
   the form and stays the source of truth, so a no-JS page still
   submits and still looks right (see the form.stack select rule). */

.dd { position: relative; }

.dd select { display: none; }

.dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 13px;
  border-radius: 11px;
  border: 1.5px solid var(--glass-border-2);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  line-height: 1.35;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.dd-btn::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  flex: none;
  margin-left: auto;
}

.dd-btn:focus-visible,
.dd.open .dd-btn {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(255, 140, 41, 0.35);
}

.dd-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.dd-list {
  position: absolute;
  z-index: 90;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--glass-border-2);
  border-radius: 11px;
  box-shadow: var(--shadow-md);
  padding: 5px;
  max-height: 280px;
  overflow: auto;
  display: none;
}

.dd.open .dd-list { display: block; }

.dd-opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 10px 11px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.35;
}

.dd-opt:hover,
.dd-opt.hl { background: var(--orange-50); }

.dd-opt[aria-selected="true"] { font-weight: 700; }

.dd-opt[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  background: transparent;
}

form.stack .hint {
  font-size: 0.84rem;
  color: var(--ink-faint);
  font-weight: 400;
}

form.stack .error {
  color: #b3261e;
  font-size: 0.9rem;
}

form.stack button.btn { align-self: flex-start; }

/* Wider variant for multi-field forms (signup, BAA, etc.) — fills the
   content-card width so City/State/ZIP rows have breathing room. */
form.stack.stack-wide { max-width: 100%; }

/* Inline row of labels, e.g. City + State + ZIP. Children declare
   their relative width with .grow-1 / .grow-2. */
form.stack .form-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

form.stack .form-row > label {
  flex: 1 1 0;
  min-width: 0;
}

form.stack .form-row > label.grow-2 { flex-grow: 2; }
form.stack .form-row > label.grow-1 { flex-grow: 1; }

/* On narrow screens, collapse the row to a column so fields aren't
   crushed below the legible-input-width threshold. */
@media (max-width: 520px) {
  form.stack .form-row {
    flex-direction: column;
    gap: 16px;
  }
  form.stack .form-row > label { flex: 1 1 auto; width: 100%; }
}

.hint { font-size: 0.85rem; color: var(--ink-faint); font-weight: 400; }

/* ---------- Alerts ---------- */

.alert {
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border-2);
  background: var(--glass-bg);
  margin: 16px 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.alert-success {
  background: rgba(30, 110, 70, 0.08);
  border-color: rgba(30, 110, 70, 0.25);
  color: #185c33;
}

.alert-error {
  background: rgba(179, 38, 30, 0.07);
  border-color: rgba(179, 38, 30, 0.25);
  color: #762019;
}

/* ---------- Secondary button alias used by older pages ---------- */

.btn-secondary {
  background: var(--glass-bg-hi);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  color: var(--ink);
}

.btn-link {
  background: transparent;
  color: var(--ink);
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Pricing-grid alias (used by older /pricing page) ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 28px 0;
}

.price-card {
  position: relative;
  padding: 28px 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition: transform .22s ease, box-shadow .22s ease;
}

.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.price-card.featured {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 239, 223, 0.85) 100%);
  border: 1.5px solid rgba(255, 140, 41, 0.45);
}

.price-card .price {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 8px 0 4px;
  background: var(--orange-500);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price-card .price small {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  -webkit-text-fill-color: var(--ink-soft);
  display: block;
  margin-top: 4px;
}

.price-card ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
}

.price-card li {
  font-size: 0.9rem;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 140, 41, 0.18);
}

.price-card li:last-child { border-bottom: 0; }

.price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: var(--orange-500);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(255, 140, 41, 0.4);
}

/* ---------- Admin portal shell ---------- */

.admin-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  max-width: var(--container);
  margin: 24px auto;
  padding: 0 24px;
}

.admin-side {
  padding: 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  height: fit-content;
}

.admin-side nav { display: flex; flex-direction: column; gap: 4px; }

.admin-side nav a {
  padding: 9px 14px;
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 0.93rem;
  font-weight: 500;
  border-bottom: 0;
}

.admin-side nav a:hover {
  background: rgba(255, 140, 41, 0.1);
  color: var(--ink);
}

.admin-side nav a.active {
  background: var(--orange-500);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(255, 140, 41, 0.35);
}

.admin-content {
  padding: 24px 0;
}

@media (max-width: 720px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side { border-radius: var(--r-md); }
}

/* ---------- main wrapper for non-marketing pages ---------- */

main { display: block; }

/* ============================================================
   Phone → Desktop hookup visual.
   Used in the hero of the landing page to show how the SmileMaxer
   mobile app on a clinician's phone hooks into a PMS on the
   operatory desktop.
   ============================================================ */

.hookup {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  min-height: 540px;
  padding: 0 4%;
}

@media (max-width: 720px) {
  .hookup {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 0;
  }
}

.hookup .phone {
  width: 220px;
  max-width: 90%;
  justify-self: end;
  transform: rotate(-4deg);
  margin-right: -28px;
}

@media (max-width: 720px) {
  .hookup .phone {
    justify-self: center;
    margin-right: 0;
    transform: rotate(0);
  }
}

.hookup-arrow {
  position: absolute;
  top: 50%;
  left: 48%;
  width: 80px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg,
    rgba(255, 140, 41, 0) 0%,
    rgba(255, 140, 41, 0.6) 30%,
    rgba(255, 140, 41, 0.9) 70%,
    rgba(255, 140, 41, 0.6) 100%);
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}

.hookup-arrow::before,
.hookup-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  width: 10px;
  height: 2px;
  background: rgba(255, 140, 41, 0.9);
  border-radius: 999px;
}

.hookup-arrow::before { top: -4px; transform: rotate(35deg); transform-origin: right center; }
.hookup-arrow::after  { top:  4px; transform: rotate(-35deg); transform-origin: right center; }

@media (max-width: 720px) {
  .hookup-arrow { display: none; }
}

/* Faux desktop window showing the PMS being typed into */
.desktop-window {
  position: relative;
  width: 100%;
  max-width: 380px;
  justify-self: start;
  padding: 0;
  background: var(--glass-bg-hi);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow:
    0 30px 80px rgba(255, 140, 41, 0.18),
    0 10px 24px rgba(26, 18, 6, 0.08);
  transform: rotate(3deg);
  overflow: hidden;
  z-index: 2;
}

@media (max-width: 720px) {
  .desktop-window {
    justify-self: center;
    transform: rotate(0);
  }
}

.desktop-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 247, 239, 0.85) 100%);
  border-bottom: 1px solid var(--glass-border-2);
}

.desktop-dots {
  display: flex;
  gap: 6px;
}

.desktop-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #e0e0e0;
}

.desktop-dots span:nth-child(1) { background: #ff6058; }
.desktop-dots span:nth-child(2) { background: #ffbd2e; }
.desktop-dots span:nth-child(3) { background: #28c941; }

.desktop-title {
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.desktop-body {
  padding: 18px 18px 20px;
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
}

.pms-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 0.84rem;
  color: var(--ink);
}

.pms-row .pms-label {
  width: 72px;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.pms-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 140, 41, 0.08);
  border: 1px solid rgba(255, 140, 41, 0.18);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.85rem;
}

.pms-cell.filled {
  background: var(--orange-500);
  border-color: rgba(255, 140, 41, 0.35);
  color: var(--ink);
  animation: cell-pop 320ms ease both;
}

.pms-cell.filled:nth-child(3) { animation-delay: 600ms; opacity: 0; animation-fill-mode: both; }
.pms-cell.filled:nth-child(4) { animation-delay: 1100ms; opacity: 0; animation-fill-mode: both; }
.pms-cell.filled:nth-child(5) { animation-delay: 1600ms; opacity: 0; animation-fill-mode: both; }

.pms-cursor {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--orange-500);
  margin-left: 2px;
  animation: cursor-blink 1.1s steps(2) infinite;
}

@keyframes cell-pop {
  0% { opacity: 0; transform: translateY(-4px) scale(0.85); }
  60% { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.desktop-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 140, 41, 0.22);
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.desktop-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2bb673;
  box-shadow: 0 0 0 3px rgba(43, 182, 115, 0.2);
}

/* ============================================================
   "Three pieces" explainer block on the homepage.
   ============================================================ */

.three-pieces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 860px) {
  .three-pieces { grid-template-columns: 1fr; }
}

.piece {
  position: relative;
  padding: 28px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.piece::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 34px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--orange-500);
}

.piece-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--orange-500);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(255, 140, 41, 0.35);
}

.piece h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.piece p {
  font-size: 0.93rem;
  margin: 0;
}


/* ============================================================
   SmileMaxer hub window (homepage hero) — the Creative-Cloud-style
   "window of apps" the practice actually installs. Replaces the
   old phone mockup as the hero visual.
   ============================================================ */

.hub-window {
  position: relative;
  width: 100%;
  max-width: 500px;
  background: var(--glass-bg-hi);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(255, 140, 41, 0.20),
    0 12px 28px rgba(26, 18, 6, 0.10);
  overflow: hidden;
  transform: rotate(-1.5deg);
  z-index: 1;
}

@media (max-width: 900px) { .hub-window { transform: rotate(0); } }

.hub-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 247, 239, 0.85) 100%);
  border-bottom: 1px solid var(--glass-border-2);
}

.hub-titlebar-brand {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
}

.hub-titlebar-brand img {
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

/* Balances the traffic-dot cluster so the window title optically centers. */
.hub-titlebar-pad { width: 45px; }

.hub-body {
  display: grid;
  grid-template-columns: 128px 1fr;
  min-height: 348px;
  background: #fff;
}

.hub-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  background: var(--surface-tint);
  border-right: 1px solid var(--line);
}

.hub-side-item {
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.hub-side-item.active {
  background: var(--orange-500);
  color: var(--ink);
  box-shadow: 0 4px 10px rgba(255, 140, 41, 0.35);
}

.hub-main {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 14px;
}

.hub-main-label {
  margin: 0 0 10px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hub-tiles {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.hub-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(26, 18, 6, 0.04);
}

.hub-tile-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--orange-500);
  box-shadow: 0 5px 12px rgba(255, 140, 41, 0.35);
}

.hub-tile-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-tile-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hub-tile-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
}

.hub-tile-desc {
  font-size: 0.7rem;
  color: var(--ink-soft);
}

.hub-tile-cta {
  flex: none;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--orange-500);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

/* trailing "more coming" placeholder tile */
.hub-tile-more {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}
.hub-tile-more .hub-tile-icon { background: var(--surface-tint); box-shadow: none; }
.hub-tile-more .hub-tile-icon svg { stroke: var(--ink-faint); }
.hub-tile-more .hub-tile-name { color: var(--ink-soft); }

.hub-foot {
  margin-top: auto;
  padding-top: 12px;
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

@media (max-width: 460px) {
  .hub-body { grid-template-columns: 1fr; min-height: 0; }
  .hub-side {
    flex-direction: row;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ============================================================
   MaxiMouse brand identity — black & white. The one app whose
   surfaces are monochrome; the cursor it draws is a white circle,
   so the white circle IS the icon. SmileMaxer chrome and
   PerioMaxer marigold stay untouched.
   ============================================================ */

.hub-tile-icon.mono,
.feature-icon.mono {
  background: linear-gradient(135deg, #34343a 0%, #0b0b0e 100%);
  box-shadow: 0 5px 12px rgba(12, 12, 14, 0.35);
}

.feature-icon.mono { box-shadow: 0 8px 20px rgba(12, 12, 14, 0.30); }

/* The white-circle cursor mark, sized by context. */
.mm-cursor-dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.55);
}

.feature-icon.mono .mm-cursor-dot {
  width: 20px;
  height: 20px;
  border-width: 3px;
}

/* ---------- App-card extras (homepage catalog) ---------- */

a.feature { display: block; }

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.platform {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-tint);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}

a.feature:hover .feature-link { color: var(--ink); }

/* ============================================================
   MaxiMouse app page — monochrome brand surface. Scopes the
   marigold accents to black & white for everything inside
   .theme-mono; global nav/footer outside it stay marigold.
   ============================================================ */

.theme-mono .chip {
  background: #131316;
  border-color: #131316;
  color: #fff;
}
.theme-mono .chip-dot { background: #fff; }

.theme-mono .hero-title .accent { color: #131316; }
.theme-mono .hero-title .accent::after { background: #E6E6EA; }

.theme-mono .btn-primary {
  background: #131316;
  /* The base rule paints the label var(--ink), which is near-black and
     was invisible on this near-black button. */
  color: #fff;
  box-shadow: 0 8px 22px rgba(12, 12, 14, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.theme-mono .btn-primary:hover {
  background: #000;
  color: #fff;
  box-shadow: 0 12px 28px rgba(12, 12, 14, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.theme-mono .btn-glass:hover { color: #131316; border-color: #131316; }

.theme-mono .feature::before { background: #131316; }
.theme-mono .feature:hover { border-color: rgba(19, 19, 22, 0.30); }
.theme-mono .feature-icon {
  background: linear-gradient(135deg, #34343a 0%, #0b0b0e 100%);
  box-shadow: 0 8px 20px rgba(12, 12, 14, 0.30);
}
.theme-mono .feature-tag.soon { background: #ECECEF; color: #5a5a64; }

.theme-mono .hero-visual::before {
  background: radial-gradient(circle at 50% 50%, rgba(12, 12, 14, 0.16) 0%, transparent 60%);
}

.theme-mono .platform {
  background: #F4F4F6;
  border-color: #E2E2E7;
  color: #5a5a64;
}

/* ---------- MaxiMouse demo window: dark screen, white-circle cursor ---------- */

.mm-window {
  position: relative;
  width: 100%;
  max-width: 460px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #232328;
  background: #101014;
  box-shadow:
    0 30px 80px rgba(12, 12, 14, 0.45),
    0 12px 28px rgba(12, 12, 14, 0.25);
  transform: rotate(1.5deg);
  z-index: 1;
}

@media (max-width: 900px) { .mm-window { transform: rotate(0); } }

.mm-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #17171c;
  border-bottom: 1px solid #232328;
}

.mm-titlebar .desktop-dots span { background: #3a3a42; }

.mm-title {
  flex: 1;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
  color: #9a9aa4;
  letter-spacing: 0.03em;
}

.mm-screen {
  position: relative;
  padding: 22px 20px 26px;
  min-height: 280px;
}

.mm-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.mm-block {
  height: 38px;
  border-radius: 9px;
  background: #1b1b21;
  border: 1px solid #26262d;
  flex: 1;
}

.mm-block.wide { flex: 2; }
.mm-block.tall { height: 96px; }

/* The cursor MaxiMouse draws: a bright white circle, easy to find on
   any screen. Drifts between targets and "dwells" like a real session. */
.mm-cursor {
  position: absolute;
  top: 38%;
  left: 30%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.12),
    0 0 22px rgba(255, 255, 255, 0.45);
  animation: mm-drift 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* click pulse while the cursor dwells on a target */
.mm-cursor::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.7);
  opacity: 0;
  animation: mm-click 7s ease-out infinite;
}

@keyframes mm-drift {
  0%, 100% { top: 38%; left: 30%; }
  32%      { top: 58%; left: 64%; }
  52%      { top: 58%; left: 64%; }
  74%      { top: 28%; left: 52%; }
}

@keyframes mm-click {
  0%, 38%  { opacity: 0; transform: scale(1); }
  42%      { opacity: 0.9; transform: scale(1); }
  52%      { opacity: 0; transform: scale(2.1); }
  53%, 100% { opacity: 0; }
}

.mm-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px dashed #2a2a31;
  color: #9a9aa4;
  font-size: 0.78rem;
}

.mm-caption-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Mono theme: the white chip-dot is for the black chip pill only — the
   bare hero-meta dots sit on the white page, so they go ink. */
.theme-mono .hero-meta .chip-dot { background: #131316; }

/* Mono theme: CTA block loses the marigold wash — neutral graphite glow. */
.theme-mono .cta-block {
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(19, 19, 22, 0.10) 0%, transparent 70%),
    var(--glass-bg-hi);
}
.theme-mono .cta-block::before {
  background: radial-gradient(circle, rgba(19, 19, 22, 0.16) 0%, transparent 70%);
}

/* ============================================================
   PerioMaxer production marketing — public launch surfaces
   ============================================================ */

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.narrow {
  max-width: 820px;
}

.prod-hero {
  padding-top: 88px;
  padding-bottom: 76px;
}

.prod-hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.12fr);
  gap: 52px;
}

.trust-list,
.check-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
}

.trust-list li,
.check-list li {
  position: relative;
  padding-left: 25px;
  color: var(--ink-soft);
}

.trust-list li {
  font-size: .86rem;
  font-weight: 650;
}

.trust-list li::before,
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink);
  font-weight: 900;
}

.check-list {
  display: grid;
  gap: 12px;
}

.connection-visual {
  position: relative;
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(98px, .45fr) minmax(190px, .9fr);
  align-items: center;
  isolation: isolate;
}

.connection-visual::before {
  content: "";
  position: absolute;
  inset: 6% -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,41,.23), transparent 67%);
  filter: blur(26px);
}

.connection-phone {
  display: grid;
  place-items: center;
}

.connection-phone .phone {
  width: 225px;
  max-width: none;
  border-radius: 40px;
  transform: rotate(-2.5deg);
}

.connection-phone .phone-screen {
  border-radius: 33px;
}

.connection-phone .phone-notch {
  display: block;
  width: 62px;
  height: 18px;
  top: 9px;
}

.connection-line {
  display: grid;
  gap: 9px;
  align-items: center;
  color: var(--ink);
  text-align: center;
}

.connection-line span {
  position: relative;
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange-500), transparent);
}

.connection-line span:first-child::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 0 0 7px rgba(255,140,41,.15);
  transform: translate(-50%, -50%);
}

.connection-line small {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.desktop-card {
  position: relative;
  padding: 28px 24px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  transform: rotate(1.5deg);
}

.desktop-card::before {
  content: "";
  position: absolute;
  inset: 8px 12px auto;
  height: 1px;
  background: var(--line);
}

.desktop-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 999px;
  background: #2FA24F;
  box-shadow: 0 0 0 5px rgba(47,162,79,.12);
}

.desktop-card strong {
  font-size: .98rem;
}

.desktop-card p {
  margin: 12px 0 20px;
  font-size: .82rem;
  line-height: 1.55;
}

.desktop-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.desktop-row i {
  height: 24px;
  border: 1px solid #C9D8EB;
  border-radius: 4px;
  background: #F6FAFF;
}

.desktop-row i:nth-child(3) {
  border-color: var(--orange-500);
  box-shadow: inset 0 -4px 0 var(--orange-500);
}

/* ─── Hero devices: real desktop screenshot + phone overlapping ─────── */

.hero-devices {
  position: relative;
  isolation: isolate;
  padding: 0 0 20px 46px;
}

.hero-devices::before {
  content: "";
  position: absolute;
  inset: -6% -8% 4% -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,41,.22), transparent 68%);
  filter: blur(28px);
}

.device-desktop {
  margin: 0;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotate(-.6deg);
}

.device-desktop > img {
  display: block;
  width: 100%;
  height: auto;
}

.device-desktop figcaption {
  padding: 12px 16px 14px 118px;
  border-top: 1px solid var(--line);
  background: rgba(255,248,238,.7);
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--ink-soft);
}

.device-phone {
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 132px;
  text-align: center;
}

.device-phone .phone {
  width: 132px;
  max-width: none;
  border-radius: 24px;
  transform: rotate(-3deg);
}

.device-phone .phone-screen {
  border-radius: 19px;
  background: #000;
}

.device-phone .phone-notch {
  display: block;
  width: 38px;
  height: 11px;
  top: 6px;
}

.device-phone-tag {
  display: block;
  margin-top: 10px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-sub-mic {
  margin-top: 14px;
  font-size: .93rem;
  font-weight: 620;
  color: var(--ink-soft);
}

/* ─── Microphone options ────────────────────────────────────────────── */

.mic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mic-card {
  padding: 26px 24px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.06));
}

.mic-card-lead {
  border-color: rgba(255,140,41,.55);
  box-shadow: 0 10px 28px rgba(255,140,41,.13);
}

.mic-tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,140,41,.14);
  color: var(--ink);
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mic-card h3 {
  margin: 0 0 10px;
  font-size: 1.04rem;
}

.mic-card p {
  margin: 0;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.mic-note {
  margin: 24px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ─── Plan cards + CSS-only cadence toggle ──────────────────────────── */

.cad-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Monthly / Annual as two plain words with one straight 2px underline
   that slides between them (Max, 2026-09-11: no switch, the same
   underline the nav draws). Still CSS-only: each word carries its own
   bar, scaled from the edge that faces the other word, so the outgoing
   bar shrinks toward the incoming one while that one grows. Read as one
   bar travelling across. */
.cadence-toggle {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 32px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 32px;
  padding: 0;
  background: none;
}

#cadence-monthly:focus-visible ~ .cadence-toggle label[for="cadence-monthly"],
#cadence-annual:focus-visible ~ .cadence-toggle label[for="cadence-annual"] {
  outline: 2px solid var(--product-orange, var(--orange-500));
  outline-offset: 4px;
  border-radius: 4px;
}

.plan-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cadence-toggle label {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 6px 0 8px;
  font-size: .95rem;
  font-weight: 650;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease;
}
.cadence-toggle label:hover { color: var(--ink); }

.cadence-toggle label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--product-orange, var(--orange-500));
  transform: scaleX(0);
  transition: transform .26s ease;
}
.cadence-toggle label[for="cadence-monthly"]::after { transform-origin: right center; }
.cadence-toggle label[for="cadence-annual"]::after { transform-origin: left center; }
@media (prefers-reduced-motion: reduce) {
  .cadence-toggle label::after { transition: none; }
}

.cadence-toggle label em {
  font-style: normal;
  font-weight: 700;
  font-size: .72rem;
  color: var(--product-orange, var(--orange-500));
}

#cadence-monthly:checked ~ .cadence-toggle label[for="cadence-monthly"],
#cadence-annual:checked ~ .cadence-toggle label[for="cadence-annual"] {
  color: var(--ink);
}
#cadence-monthly:checked ~ .cadence-toggle label[for="cadence-monthly"]::after,
#cadence-annual:checked ~ .cadence-toggle label[for="cadence-annual"]::after {
  transform: scaleX(1);
}

#cadence-monthly:checked ~ .plan-grid .cad-annual,
#cadence-annual:checked ~ .plan-grid .cad-monthly {
  display: none;
}

.plan-grid {
  display: grid;
  /* Four plans since 2026-08-19 (Solo/Small/Medium/Max). */
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  width: 100%;
  align-items: start;
}

/* Four abreast needs real width; two-by-two in between, one column on
   phones (the existing 980px rule below). */
@media (max-width: 1180px) and (min-width: 981px) {
  .plan-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.06));
}

.plan-card.featured {
  border-color: var(--orange-500);
  box-shadow: 0 16px 40px rgba(255,140,41,.18);
}

.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--orange-500);
  color: var(--ink);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-card h3 {
  margin: 0 0 4px;
  font-size: 1.18rem;
}

.plan-capacity {
  margin: 0 0 18px;
  font-size: .84rem;
  font-weight: 650;
  color: var(--ink-soft);
}

.plan-price strong {
  font-size: 2.5rem;
  font-weight: 850;
  letter-spacing: -.02em;
}

.plan-price small {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.plan-renewal {
  margin: 8px 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.plan-card .check-list {
  margin: 20px 0 24px;
  font-size: .84rem;
}

.plan-card .btn-block {
  margin-top: auto;
}

.plan-everyplan {
  margin: 34px auto 0;
  max-width: 820px;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink-soft);
}

.pricing-preview-foot {
  margin-top: 32px;
  text-align: center;
}

/* ─── Pricing FAQ ───────────────────────────────────────────────────── */

.pricing-faq {
  margin: 64px auto 0;
  max-width: 820px;
}

.pricing-faq h2 {
  margin: 6px 0 24px;
}

/* On /pricing the FAQ is a flat divided list, not stacked cards: the
   card rule above left the items touching with doubled borders, which
   read as broken spacing. */
.pricing-faq .faq-item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 16px 2px 18px;
}
.pricing-faq .faq-item:last-of-type { border-bottom: 0; }
.pricing-faq .faq-item[open] {
  background: none;
  box-shadow: none;
}
.pricing-faq .faq-item p {
  margin-top: 12px;
  max-width: 700px;
}

.faq-item summary {
  padding: 18px 30px 18px 0;
  position: relative;
  font-size: .97rem;
  font-weight: 720;
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--ink);
}

.faq-item[open] summary::after { content: "−"; }

.faq-item p {
  margin: 0 0 20px;
  font-size: .88rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.price-table-details {
  margin: 40px auto 0;
  max-width: 900px;
}

.price-table-details summary {
  font-size: .85rem;
  font-weight: 720;
  cursor: pointer;
  color: var(--ink);
}

/* ─── PMS compatibility + "build next" vote ─────────────────────────── */

.pms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.pms-card {
  padding: 26px 24px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(16,24,40,.06));
}

.pms-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pms-card h3 {
  margin: 0;
  font-size: 1.14rem;
}

.pms-status {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(47,162,79,.12);
  color: #1F7A3A;
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pms-edition {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink);
}

.pms-versions {
  margin-top: 8px;
  font-size: .8rem;
  color: var(--muted, #667);
}

.pms-card p {
  margin: 14px 0 0;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pms-vote {
  margin-top: 42px;
  padding: 32px 28px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: rgba(255,249,241,.72);
  text-align: center;
}

.pms-vote h3 {
  margin: 0 0 8px;
  font-size: 1.24rem;
}

.pms-vote > p {
  margin: 0 auto 22px;
  max-width: 560px;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.pms-vote-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.pms-vote-btn {
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .2s ease;
}

.pms-vote-btn:hover:not(:disabled) {
  border-color: var(--orange-500);
  background: rgba(255,140,41,.08);
}

.pms-vote-btn:disabled {
  cursor: default;
}

.pms-vote-btn.is-chosen {
  border-color: var(--orange-500);
  background: var(--orange-500);
  color: var(--ink);
}

.pms-vote-btn.is-dimmed {
  opacity: .38;
}

/* Both classes, because ".pms-vote > p" (class + type) outranks a lone
   class and was zeroing the top margin: the thanks sat flush against
   the buttons. */
.pms-vote .pms-vote-thanks {
  margin: 26px auto 0;
  max-width: 520px;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.6;
  color: var(--ink);
}

/* ─── Tables inside legal documents ─────────────────────────────────── */

.legal-table-wrap {
  margin: 22px 0;
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}

.legal-table th,
.legal-table td {
  padding: 10px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.legal-table th {
  background: rgba(255,248,238,.8);
  font-weight: 750;
  white-space: nowrap;
}

.proof-strip {
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255,248,238,.78);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 22px;
  padding-bottom: 22px;
}

.proof-grid > div {
  padding: 5px 24px;
  border-right: 1px solid var(--line);
}

.proof-grid > div:first-child {
  padding-left: 0;
}

.proof-grid > div:last-child {
  padding-right: 0;
  border-right: 0;
}

.proof-grid strong,
.proof-grid span {
  display: block;
}

.proof-grid strong {
  margin-bottom: 3px;
  color: var(--ink);
  font-size: .9rem;
}

.proof-grid span {
  color: var(--ink-faint);
  font-size: .74rem;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.step-card,
.catalog-card,
.plan-card,
.security-card {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.step-card {
  min-height: 260px;
  padding: 30px 28px;
}

.step-number {
  display: inline-grid;
  width: 42px;
  height: 42px;
  margin-bottom: 32px;
  place-items: center;
  border: 1px solid var(--glass-border-2);
  border-radius: 50%;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 800;
}

.step-card h3 {
  font-size: 1.35rem;
}

.step-card p {
  margin-bottom: 0;
  font-size: .94rem;
}

.split-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #FFFDF9, var(--surface-tint));
}

.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 7vw, 84px);
  align-items: center;
}

.privacy-card {
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.privacy-kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--ink);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.privacy-card > a {
  display: inline-block;
  margin-top: 22px;
  font-weight: 750;
}

.store-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.store-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 11px 17px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--white);
  font-size: .82rem;
  font-weight: 750;
  box-shadow: var(--shadow-sm);
}

.store-link:hover {
  background: #000;
  color: var(--white);
  transform: translateY(-1px);
}

.pricing-preview {
  padding-top: 72px;
  padding-bottom: 72px;
}

.price-callout {
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.price-callout span,
.price-callout strong {
  display: block;
}

.price-callout span {
  margin-bottom: 3px;
  color: var(--ink-faint);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.price-callout strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.65rem;
}

.page-hero,
.hub-hero {
  padding-top: 110px;
  padding-bottom: 78px;
  text-align: center;
}

.page-hero .container,
.hub-hero .container {
  margin-inline: auto;
}

.page-hero h1,
.hub-hero h1 {
  font-size: clamp(2.45rem, 6vw, 4.5rem);
}

.page-hero .hero-sub,
.hub-hero .hero-sub {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.page-hero .hero-ctas,
.page-hero .store-links {
  justify-content: center;
}

.screenshot-card {
  max-width: 430px;
  margin-inline: auto;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 34px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.2deg);
}

.screenshot-card img {
  border-radius: 24px;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}

.feature-list article {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.feature-list article:last-child {
  border-bottom: 0;
}

.feature-list h3 {
  margin-bottom: 6px;
}

.feature-list p {
  margin: 0;
  font-size: .94rem;
}

.center-cta {
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--surface-tint);
}

.center-cta .btn {
  margin-top: 10px;
}

.hub-hero {
  padding-bottom: 44px;
}

.hub-hero .hero-sub {
  font-size: 1.2rem;
}

.hub-products {
  padding-top: 24px;
}

.product-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.catalog-card {
  min-height: 270px;
  padding: 30px;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.catalog-card:hover {
  color: var(--ink);
  border-color: var(--glass-border-2);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.catalog-card img {
  margin-bottom: 25px;
  border-radius: 16px;
}

.catalog-card .feature-tag {
  position: absolute;
  top: 30px;
  right: 30px;
}

.catalog-featured {
  background:
    linear-gradient(135deg, rgba(255,140,41,.08), transparent 55%),
    var(--white);
}

.feature-tag.live {
  background: var(--orange-100);
  color: var(--ink);
}

.office-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.office-flow article {
  min-height: 260px;
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}

.office-flow article:last-child {
  border-right: 0;
}

.office-flow article > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  margin-bottom: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--orange-100);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 900;
}

.office-flow p {
  margin-bottom: 0;
  font-size: .9rem;
}

.timeline {
  max-width: 940px;
}

.timeline article {
  display: grid;
  grid-template-columns: 145px 1fr;
  gap: 40px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}

.timeline article:last-child {
  border-bottom: 1px solid var(--line);
}

.timeline article > span {
  color: var(--ink);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.timeline h2 {
  font-size: 1.55rem;
}

.pricing-hero {
  padding-bottom: 42px;
}

.pricing-section {
  padding-top: 26px;
}

.pricing-table-wrap {
  overflow-x: auto;
  margin-bottom: 38px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.pricing-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: left;
}

.pricing-table th,
.pricing-table td {
  padding: 20px 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.pricing-table tr > *:last-child {
  border-right: 0;
}

.pricing-table tbody tr:last-child > * {
  border-bottom: 0;
}

.pricing-table thead th {
  background: var(--surface-tint);
  color: var(--ink-faint);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pricing-table tbody th {
  width: 29%;
}

.pricing-table strong,
.pricing-table span {
  display: block;
}

.pricing-table span {
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: .8rem;
  font-weight: 500;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.plan-card {
  padding: 30px 27px 27px;
  display: flex;
  flex-direction: column;
}

.plan-card.featured {
  border-color: var(--glass-border-2);
  box-shadow: var(--shadow-lg);
  background:
    linear-gradient(180deg, rgba(255,140,41,.07), transparent 34%),
    var(--white);
}

.plan-card .plan-badge {
  position: static;
  align-self: flex-start;
  margin: -15px 0 20px;
}

.plan-capacity {
  min-height: 68px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.plan-capacity strong {
  display: block;
  color: var(--ink);
  font-size: 2.2rem;
  line-height: 1;
}

.plan-card .check-list {
  flex: 1;
  margin: 6px 0 28px;
  padding: 16px 0 0;
}

.plan-card .check-list li {
  font-size: .87rem;
}

.plan-price-block {
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.plan-price-block > span,
.plan-price-block > strong,
.plan-price-block > em {
  display: block;
}

.plan-price-block > span {
  color: var(--ink-faint);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.plan-price-block > strong {
  margin: 6px 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 2rem;
}

.plan-price-block small {
  color: var(--ink-faint);
  font-size: .82rem;
  font-weight: 600;
}

.plan-price-block > em {
  color: var(--ink-faint);
  font-size: .76rem;
  font-style: normal;
}

.btn-block {
  width: 100%;
}

.annual-link {
  display: block;
  margin-top: 13px;
  text-align: center;
  font-size: .76rem;
  font-weight: 700;
}

.competitor-note,
.trial-disclosure,
.dso-callout {
  margin-top: 32px;
  padding: clamp(26px, 4vw, 42px);
  border-radius: var(--r-xl);
}

.competitor-note {
  border: 1px solid #DCE7F4;
  background: #F6FAFF;
}

.competitor-note h2 {
  max-width: 900px;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.competitor-note p {
  margin-bottom: 0;
}

.trial-disclosure {
  border: 1px solid var(--glass-border-2);
  background: var(--surface-tint);
}

.trial-disclosure p:last-child {
  margin-bottom: 0;
}

.dso-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.dso-callout p {
  margin-bottom: 0;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.security-card {
  padding: clamp(28px, 5vw, 46px);
  overflow: hidden;
}

.security-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: var(--orange-500);
}

.security-card.cloud::before {
  background: var(--app-blue);
}

.security-card > span {
  display: block;
  margin-bottom: 10px;
  color: var(--ink-faint);
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.legal-note {
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 22px;
  border: 1px dashed var(--glass-border-2);
  border-radius: var(--r-md);
  font-size: .88rem;
}

.signup-heading {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.signup-heading h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.signup-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 28px 0 34px;
  padding: 0;
  list-style: none;
}

.signup-progress li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-faint);
  font-size: .75rem;
  font-weight: 750;
}

.signup-progress li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  border-radius: 99px;
  background: var(--line);
}

.signup-progress li.active {
  color: var(--ink);
}

.signup-progress li.active::after {
  background: var(--orange-500);
}

.signup-progress span {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  font-size: .68rem;
}

.signup-progress li.active span {
  border-color: var(--orange-500);
  color: var(--ink);
}

/* Signup sections (Max, 2026-09-13): no card around each one. Only the
   card's top line is kept, and the section heading sits on it, so the
   form reads as one column divided by headed rules. */
form.stack .form-section {
  margin: 0;
  padding: 18px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}

form.stack .form-section legend {
  padding: 0 12px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 750;
}

@media (max-width: 980px) {
  .prod-hero-grid {
    grid-template-columns: 1fr;
  }

  .connection-visual {
    max-width: 620px;
    margin-inline: auto;
  }

  .hero-devices {
    max-width: 640px;
    margin-inline: auto;
  }

  .mic-grid,
  .plan-grid,
  .pms-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .office-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .office-flow article:nth-child(2) {
    border-right: 0;
  }

  .office-flow article:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }

  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: 620px;
    margin-inline: auto;
  }
}

@media (max-width: 760px) {
  .prod-hero,
  .page-hero,
  .hub-hero {
    padding-top: 74px;
  }

  .connection-visual {
    min-height: 480px;
    grid-template-columns: 1fr 72px 1fr;
  }

  /* Phone stops overlapping the desktop shot once there is no room for it. */
  .hero-devices {
    padding: 0;
  }

  .device-phone {
    position: static;
    width: auto;
    margin: 22px auto 0;
  }

  .device-phone .phone {
    width: 150px;
    margin-inline: auto;
  }

  .cadence-toggle label {
    font-size: .88rem;
  }

  .connection-phone .phone {
    width: 175px;
    border-radius: 32px;
  }

  .connection-phone .phone-screen {
    border-radius: 25px;
  }

  .desktop-card {
    padding: 22px 18px;
  }

  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 0;
  }

  .proof-grid > div,
  .proof-grid > div:first-child,
  .proof-grid > div:last-child {
    padding: 5px 18px;
    border-right: 0;
  }

  .proof-grid > div:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .steps-grid,
  .split-grid,
  .product-catalog,
  .security-grid {
    grid-template-columns: 1fr;
  }

  .app-detail-grid {
    gap: 54px;
  }

  .price-callout,
  .dso-callout {
    align-items: stretch;
    flex-direction: column;
  }

  .timeline article {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .office-flow {
    grid-template-columns: 1fr;
  }

  .office-flow article,
  .office-flow article:nth-child(2) {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .office-flow article:last-child {
    border-bottom: 0;
  }

  .office-flow article > span {
    margin-bottom: 20px;
  }
}

@media (max-width: 560px) {
  .prod-hero {
    padding-top: 62px;
  }

  .hero-title {
    font-size: clamp(2.25rem, 13vw, 3.25rem);
  }

  .hero-ctas,
  .store-links,
  .price-callout {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-ctas .btn,
  .store-link {
    width: 100%;
    justify-content: center;
  }

  .connection-visual {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 26px;
    padding-top: 16px;
  }

  .connection-line {
    width: 72%;
    margin-inline: auto;
  }

  .connection-line span {
    transform: rotate(90deg);
  }

  .desktop-card {
    max-width: 280px;
    margin-inline: auto;
    transform: none;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  .proof-grid > div,
  .proof-grid > div:nth-child(odd) {
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
  }

  .proof-grid > div:last-child {
    border-bottom: 0;
  }

  .signup-progress {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 12px;
  }

  form.stack .form-section {
    padding: 16px 0 4px;
  }
}

/* ============================================================
   Business Associate Agreement (src/pages/baa.tsx)
   A contract is the one page on this site where the reader is
   expected to read every word, so it gets a document, not a page:
   a measured column, numbered sections, and a jump list. Used by
   /baa/sign (in a scrolling panel beside the signature block) and
   /baa/text (the whole thing, print-clean).
   ============================================================ */

/* Draft state, said the same way in both places. Marigold, not the
   red error box it used to use: nothing has gone wrong, the text is
   simply out with counsel. */
.baa-draft-note {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid var(--hairline-orange);
  border-left: 4px solid var(--orange-500);
  border-radius: var(--r-md);
  background: var(--orange-50);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.6;
}

.baa-doc {
  margin: 24px 0 8px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.baa-doc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--orange-50);
}
.baa-doc-ver {
  display: block;
  margin-top: 2px;
  font-size: 0.84rem;
  color: var(--ink-faint);
}
.baa-doc-actions .btn { padding: 7px 14px; font-size: 0.86rem; }

/* The jump list. Nine sections is more than anyone finds by scrolling,
   and a reviewer wants to go straight to section 2 or section 9. */
.baa-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--glass-border);
}
.baa-toc a {
  padding: 5px 11px;
  border: 1px solid var(--glass-border-2);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border-2);
  white-space: nowrap;
}
.baa-toc a:hover {
  border-color: var(--orange-500);
  background: var(--orange-50);
  color: var(--ink);
}

/* The scroll region. Tall enough to read in, focusable so a keyboard
   can scroll it, and it says where it ends with a real border rather
   than fading out mid-sentence. */
.baa-doc-scroll {
  max-height: 30rem;
  overflow-y: auto;
  padding: 4px 22px 18px;
  scroll-behavior: smooth;
}
.baa-doc-scroll:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.baa-doc-body { max-width: 62ch; }
.baa-doc-body p {
  margin: 0 0 0.9em;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink);
}
.baa-preamble {
  padding-top: 16px;
  font-style: italic;
  color: var(--ink-soft);
}
/* The marketing sheet gives every bare <section> 56px of top and
   bottom padding (line 666), and each clause here IS a <section>. That
   put ~112px of dead air between clauses and made the agreement read
   as if half of it were missing. */
.baa-section { padding: 0; scroll-margin-top: 12px; }
.baa-section h3 {
  margin: 1.6em 0 0.5em;
  font-size: 1.02rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.baa-section:first-of-type h3 { margin-top: 1em; }

.baa-scroll-hint { margin: 0 0 28px; }

/* Signing closed. A plain statement, not an error: there is nothing
   for the practice to fix. */
.baa-blocked {
  margin-top: 32px;
  padding: 20px 22px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass-bg);
}
.baa-blocked h2 { margin: 0 0 6px; font-size: 1.15rem; }
.baa-blocked p { margin: 0 0 8px; }
.baa-blocked > :last-child { margin-bottom: 0; }

/* The consent box, kept whole. House rule: the checkbox never gets
   buried, and its label never wraps under the box. */
.baa-agree {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px !important;
  padding: 14px 16px;
  border: 1px solid var(--hairline-orange);
  border-radius: var(--r-md);
  background: var(--orange-50);
  font-weight: 400 !important;
  line-height: 1.55;
}
.baa-agree input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ink);
}

/* ---- /baa/text: the whole agreement on one page ---- */

.baa-page .baa-doc-body { max-width: none; }
.baa-page .baa-toc {
  padding: 14px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 8px;
}
.baa-page .baa-section { scroll-margin-top: 80px; }
.baa-back { margin-bottom: 6px; }
.baa-foot { margin-top: 32px; }

@media print {
  /* Paper: drop the site furniture and the panel, print the words. */
  .nav, .footer, .baa-doc-head, .baa-toc, .baa-back, .baa-doc-actions {
    display: none !important;
  }
  .content-card {
    max-width: none;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
    backdrop-filter: none;
  }
  .baa-doc { border: 0; box-shadow: none; }
  .baa-doc-scroll { max-height: none; overflow: visible; padding: 0; }
  .baa-section { break-inside: avoid-page; }
  .baa-draft-note { border: 1px solid #000; background: none; }
}

@media (max-width: 620px) {
  .baa-doc-scroll { max-height: 22rem; padding: 4px 14px 14px; }
  .baa-doc-head, .baa-toc { padding: 12px 14px; }
}

/* ============================================================
   Customer-portal shell (src/pages/admin-shell.tsx) — portal-only.
   Since 2026-09-09 the signed-in pages wear the home page's own
   chrome (Max's call): the sticky white bar with the round icon at
   the top left, text links across, the account at the right, and
   one centred column of content under it with ReadyMaxer's admin
   spacing. The .nav/.nav-inner/.brand/.nav-links rules above are
   the home page's and are reused as-is; everything here is scoped
   to .pmx-portal-body so the marketing sheet is untouched.
   ============================================================ */

.pmx-portal-body {
  --portal-accent:      var(--orange-500);   /* #FF8C29 marigold */
  --portal-accent-deep: var(--orange-500);   /* one orange now */
  --portal-accent-text: var(--ink);          /* orange cannot carry text */
  --portal-hairline:    var(--glass-border); /* warm hairline */
}
/* Secondary text, portal only. The shared #8A8170 measures 3.85:1 on
   white, under the 4.5:1 floor, and the portal leans on it hard: every
   hint, note, stat label and offline marker is that colour, some at
   13px. #6E6555 measures 5.74:1 and still reads as secondary. */
.pmx-portal-body {
  --ink-faint: #6E6555;
  --muted: #6E6555;
}

/* ---- headings: admin scale, not the marketing hero scale ----
   The shared h1 clamps to 5vw, which put "Computers" on screen at
   60.8px on a 1280px monitor. These rules must stay ABOVE the
   .pmx-card > h2/h3 rules below: both sides are one class plus one
   type, so source order is what decides. */
.pmx-portal-body h1 {
  font-size: 1.9rem;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.pmx-portal-body h2 { font-size: 1.3rem; margin: 40px 0 8px; }
.pmx-portal-body h3 { font-size: 1.02rem; margin: 0 0 6px; }

/* The one-line intro under a page title. ReadyMaxer's .muted under
   its h1: soft ink, a readable measure, room before the first card. */
.pmx-lede {
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 22px;
}
.pmx-portal-body h1 + p:not(.pmx-lede) {
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0 0 22px;
}

/* ---- the bar ----
   .nav is the home page's bar. The portal adds the wordmark beside
   the icon, its own link group, and the account at the right. */
.pmx-nav-inner { gap: 28px; position: relative; }
.pmx-brand { gap: 0; }
/* The four doors sit in the exact middle of the bar whatever the icon
   and the account block measure: taken out of the flex row and centred
   on the bar itself (Max, 2026-09-11). */
.pmx-nav-links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.pmx-brand-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(255, 140, 41, 0.28);
}
.pmx-brand .brand-name { font-size: 1.12rem; }
.pmx-nav-links { gap: 26px; }
/* Where you are: ink, with the underline ReadyMaxer's bar draws. */
.pmx-nav-links a { padding-bottom: 6px; }
.pmx-nav-links a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.pmx-nav-user {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.pmx-nav-who {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  max-width: 18rem;
}
.pmx-nav-office {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18rem;
}
.pmx-nav-email {
  font-size: 0.74rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18rem;
}
.pmx-nav-user form { margin: 0; }
.pmx-logout {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink-soft);
  white-space: nowrap;
  cursor: pointer;
}
.pmx-logout:hover { color: var(--ink); background: none; transform: none; }

@media (max-width: 900px) {
  .pmx-nav-who { display: none; }
}
@media (max-width: 640px) {
  .pmx-nav-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; row-gap: 6px; gap: 14px; }
  .pmx-nav-links { position: static; transform: none; order: 3; flex-basis: 100%; gap: 18px; overflow-x: auto; justify-content: center; }
  .pmx-nav-user { margin-left: auto; }
  .pmx-brand .brand-name { font-size: 1rem; }
}

/* ---- the column ---- */

.pmx-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 36px 24px 80px;
  min-width: 0;
}
/* The marketing sheet gives every bare <section> 56px of top and
   bottom padding, and the portal's content column IS a <section>. */
.pmx-main section { padding: 0; }
.pmx-content { max-width: 100%; }
.pmx-empty {
  color: var(--ink-soft);
}

/* ---- stat tiles (Overview) ---- */

.pmx-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 0 0 24px;
}
.pmx-stat {
  background: var(--white);
  border: 1px solid var(--portal-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}
.pmx-stat .n {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
/* "3 of 4": the ceiling in soft ink, smaller, so the number the office
   acts on is the one that reads first. */
.pmx-stat .n .of {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.pmx-stat .l {
  margin-top: 4px;
  font-size: 0.84rem;
  color: var(--ink-faint);
}
.pmx-stat .l a { color: inherit; border-bottom: 1px solid var(--hairline-orange); }
.pmx-stat .l a:hover { color: var(--ink); }
/* ReadyMaxer's thin usage bar under "3 of 9 rooms": green while there
   is room, red at the cap. Colour repeats what the number says. */
.pmx-meter {
  height: 5px;
  border-radius: 3px;
  background: rgba(26, 18, 6, 0.08);
  margin-top: 12px;
  overflow: hidden;
}
.pmx-meter > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #2f9e5f;
}
.pmx-meter.is-full > span { background: var(--danger); }
/* A tile whose value is a word, not a number. The display face at
   1.7rem turns "Curve Dental (SuperHero)" into two crowded lines. */
.pmx-stat .n.word {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

/* ---- generic portal card + card grid (Downloads, and reusable) ---- */

.pmx-card {
  background: var(--white);
  border: 1px solid var(--portal-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin: 0 0 16px;
}
.pmx-card > h2 { margin: 0 0 4px; font-size: 1.1rem; }
.pmx-card > h3 { margin: 0 0 4px; font-size: 1rem; }
.pmx-card > p { margin: 0 0 10px; }
.pmx-card > :last-child { margin-bottom: 0; }
/* Unscoped on purpose: a caption between two cards is still a caption.
   Scoped to .pmx-card, it rendered at full body size on Downloads. */
.pmx-portal-body .pmx-note { font-size: 0.84rem; color: var(--ink-faint); }
.pmx-card code { overflow-wrap: anywhere; }

.pmx-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.pmx-card-grid .pmx-card { margin: 0; }

.pmx-section-title {
  margin: 34px 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- getting-started checklist (Overview) ---- */

.pmx-checklist,
.pmx-main section.pmx-checklist {
  background: var(--white);
  border: 1px solid var(--portal-hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin: 0 0 24px;
}
.pmx-checklist h2 { margin: 0 0 4px; font-size: 1.1rem; }
.pmx-checklist .pmx-progress {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: 0.88rem;
}
.pmx-checklist ul { list-style: none; padding: 0; margin: 8px 0 0; }
/* One comfortable 44px row per step. Rows used to sit at 8px of
   padding with the shared orange link-underline on every pending step
   and a strikethrough on every done one, which read as a wall of
   corrections rather than a list. */
.pmx-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--portal-hairline);
}
.pmx-checklist li:last-child { border-bottom: 0; }
/* A step link is a row, not prose: no underline (overrides the shared
   `li a` rule), full remaining width so the whole row reads as the
   target, hover tint for affordance. */
.pmx-checklist li a {
  flex: 1;
  border-bottom: 0;
  padding: 6px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 500;
}
.pmx-checklist li a:hover {
  background: var(--orange-50);
  border-bottom: 0;
}
.pmx-check {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
}
.pmx-check.done { background: rgba(4, 120, 87, 0.14); color: var(--success); }
.pmx-check.todo { background: rgba(26, 18, 6, 0.07); color: var(--ink-faint); }
/* Done reads as done from the check and the muted ink alone; a
   strikethrough on top made every finished step look like an error. */
.pmx-checklist .done-label { color: var(--ink-faint); }

/* The same-network note sits tight under the section above it: the
   checklist card on Overview, the page intro on Operatories. */
.pmx-network-note { max-width: 64ch; margin: -6px 0 24px; }
h1 + p + .pmx-network-note { margin: -8px 0 24px; }

/* ---- controls: buttons, fields and the rows they sit in ----
   Everything below is scoped to .pmx-portal-body so the public
   marketing pages, which share .btn, table.plain and form.stack, are
   untouched. */

/* A white button on a white table on a white page reads as text, not a
   control. The portal's secondary button gets the pale marigold it
   should always have had, and drops a backdrop blur that had nothing
   translucent to blur and cost a compositing layer per button. */
.pmx-portal-body .btn-secondary {
  background: var(--orange-50);
  border: 1px solid var(--hairline-orange);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pmx-portal-body .btn-secondary:hover {
  background: var(--orange-100);
  border-color: var(--orange-500);
  color: var(--ink);
}

/* One size for a button that lives in a table row or beside a field.
   The page had three heights: 25.5px, 30.6px and 49px, the last of
   them the same size as the page's main call to action. No hover lift
   either, because a row that jumps as the pointer crosses it is noise. */
.pmx-portal-body table .btn,
.pmx-portal-body .pmx-op-foot .btn,
.pmx-portal-body .pmx-inline-form .btn {
  padding: 7px 13px;
  font-size: 0.86rem;
  border-radius: 9px;
  white-space: nowrap;
}
.pmx-portal-body table .btn:hover,
.pmx-portal-body .pmx-op-foot .btn:hover,
.pmx-portal-body .pmx-inline-form .btn:hover { transform: none; }

/* One field style. The Devices page had four hand-rolled inputs with
   four paddings, three radii and no focus state at all. */
.pmx-portal-body input[type="text"],
.pmx-portal-body input[type="email"],
.pmx-portal-body input[type="number"],
.pmx-portal-body input[type="search"],
.pmx-portal-body select,
.pmx-portal-body textarea {
  padding: 10px 13px;
  border: 1px solid var(--glass-border-2);
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
  min-width: 0;
}
.pmx-portal-body input:focus,
.pmx-portal-body select:focus,
.pmx-portal-body textarea:focus {
  outline: none;
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(255, 140, 41, 0.18);
}
/* The native select is what a reader sees before dd.js runs, and for
   ever with JS off. It used to be styled only inside form.stack, which
   is why a dropdown placed anywhere else showed raw OS chrome. */
.pmx-portal-body select { appearance: none; padding-right: 34px; }

/* A field and its button on one line. flex-wrap used to drop the Save
   button onto a second row, turning one table cell into three. */
.pmx-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.pmx-inline-form input { flex: 1 1 12rem; }

/* form.stack caps itself at 28rem, which left a reply box occupying
   half its card. Inside a card the form fills it; the fields keep a
   readable measure of their own. */
.pmx-portal-body .pmx-card form.stack { max-width: 100%; }
.pmx-portal-body .pmx-card form.stack input,
.pmx-portal-body .pmx-card form.stack select { max-width: 30rem; }

/* The 30rem cap lands on the native <select>, which dd.js then hides.
   The .dd-btn it draws in its place is width: 100%, so the moment the
   script runs the dropdown jumps to 858px beside a 480px field. Cap the
   wrapper and the two match with JS on and off. */
.pmx-portal-body .pmx-card form.stack .dd { max-width: 30rem; }
.pmx-portal-body .pmx-card form.stack textarea { max-width: 100%; }

/* ---- tables ----
   body carries overflow-x: hidden, so a table wider than the phone was
   simply cut off with no way to reach the rest: on Devices, 345px of
   every row, including every action button, sat off-screen. Wrapping
   the table in its own scroller is the fix; the border and radius move
   to the wrapper so the corners still round. table.plain is a PUBLIC
   class (marketing uses it), so none of this is global. */
.pmx-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--portal-hairline);
  border-radius: var(--r-lg);
  margin: 0 0 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.pmx-tablewrap > table.plain {
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  min-width: 560px;
}
.pmx-portal-body table.plain th {
  white-space: nowrap;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pmx-portal-body table.plain th,
.pmx-portal-body table.plain td {
  padding: 11px 14px;
  vertical-align: top;
}
.pmx-portal-body table.plain tbody tr:hover { background: var(--orange-50); }
/* A raw install URL has no break point, so it bid for 57% of the table
   and squeezed the name column to nothing. */
.pmx-portal-body table.plain a,
.pmx-portal-body table.plain code { overflow-wrap: anywhere; }

/* ---- operatory cards ---- */

.pmx-op { padding: 16px 18px; }
.pmx-op-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pmx-op-head h3 { margin: 0; }
.pmx-op-body > :last-child { margin-bottom: 0; }
.pmx-op-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--portal-hairline);
}
.pmx-op-foot form { margin: 0; }
.pmx-op-foot .pmx-inline-form { flex: 1 1 15rem; }
.pmx-op-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.pmx-keyline { margin: 10px 0 4px; }
.pmx-keyline code {
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--orange-50);
  overflow-wrap: anywhere;
}
.pmx-danger-link { color: var(--danger); margin-left: auto; }

/* ---- operatory list (2026-08-20 redesign) ----
   ReadyMaxer density: one compact row per chair instead of a card per
   chair. Row line: name field + Rename, the key with its copy control,
   the stage pill, right-aligned actions. A set-up chair gets one muted
   meta line under it. Everything in a row shares one 34px control
   height, so the buttons match the inputs beside them. */

.pmx-oplist {
  background: var(--white);
  border: 1px solid var(--portal-hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  margin: 0 0 18px;
}
.pmx-oprow {
  padding: 10px 14px;
  border-bottom: 1px solid var(--portal-hairline);
}
.pmx-oprow:last-child { border-bottom: 0; }
.pmx-oprow-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 34px;
}
.pmx-oprow-name {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0;
  flex: 0 1 auto;
}
.pmx-oprow input[type="text"] {
  padding: 6px 10px;
  font-size: 0.9rem;
  border-radius: 8px;
  width: 11rem;
}
.pmx-oprow .btn {
  padding: 6px 11px;
  font-size: 0.84rem;
  border-radius: 8px;
  white-space: nowrap;
}
.pmx-oprow .btn:hover { transform: none; }
.pmx-oprow-title { font-size: 0.95rem; }
.pmx-oprow-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.pmx-oprow-actions form { margin: 0; }
.pmx-oprow .pmx-danger-link { margin-left: 4px; font-size: 0.84rem; }
.pmx-oprow-meta { margin: 4px 0 0; }

/* The key and its copy control are one click target: monospace key,
   copy icon beside it, either copies. On success copy.js adds .copied
   (data-copy-class) and the icon swaps to a check; textContent is
   never rewritten, so the inline SVGs survive. */
.pmx-keycopy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--hairline-orange);
  border-radius: 8px;
  background: var(--orange-50);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.pmx-keycopy:hover { background: var(--orange-100); }
.pmx-keycopy code {
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  background: none;
  padding: 0;
  white-space: nowrap;
}
.pmx-keycopy svg { flex: none; color: var(--ink-faint); }
.pmx-keycopy .ico-check { display: none; color: var(--success); }
.pmx-keycopy.copied .ico-copy { display: none; }
.pmx-keycopy.copied .ico-check { display: inline; }
.pmx-keycopy.copied { border-color: var(--success); }

/* Add-an-operatory: the one form on the page whose button must match
   the full-size input beside it, not the compact row controls. */
.pmx-addform {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 0;
}
.pmx-addform input { flex: 0 1 20rem; }
.pmx-addform .btn {
  padding: 10px 20px;
  font-size: 0.95rem;
  border-radius: 10px;
}
.pmx-addform .btn:hover { transform: none; }
.pmx-addcard { margin-bottom: 22px; }
.pmx-addcard .pmx-note { margin-top: 8px; }

/* ---- downloads: three tiles (2026-08-20) ----
   Deliberately unscoped: the same tiles render inside the portal shell
   and on the public /downloads page. */

.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 0 0 16px;
}
.dl-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: var(--white);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
a.dl-tile:hover {
  border-color: var(--orange-500);
  box-shadow: var(--shadow-md);
  background: var(--white);
}
.dl-tile .dl-ico { flex: none; color: var(--ink); }
.dl-tile.is-waiting { color: var(--ink-faint); }
.dl-tile.is-waiting .dl-ico { color: var(--ink-faint); }
.dl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-body strong { font-size: 1rem; line-height: 1.2; }
.dl-sub { font-size: 0.82rem; color: var(--ink-faint); line-height: 1.35; }
.dl-free { max-width: 62ch; color: var(--ink-soft); margin: 0 0 26px; }

/* ---- small parts: pills, badges, fact rows, disclosures ---- */

.pmx-pill,
.pmx-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.pmx-badge {
  color: var(--ink);
  background: var(--orange-50);
  vertical-align: middle;
}

/* Support used to hand-roll its pill in a 168-character style= string,
   which is why it was the one thing on the page that looked unfinished.
   Tones are named by role, not by ticket state, so Operatories and
   Settings can drop their inline fg/bg onto the same four. No blue: the
   portal accent is marigold, and blue belongs to the chart cursor. */
.pmx-pill {
  background: rgba(26, 18, 6, 0.07);
  color: var(--ink-faint);
}
/* Moving, and on our side of the net. */
.pmx-pill.is-live {
  background: var(--orange-100);
  color: var(--ink);
}
/* Waiting on the reader. White on marigold is about 2.2:1 and fails AA
   at this size, so the extra weight is a ring, never an inverted pill. */
.pmx-pill.is-you {
  background: var(--orange-100);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--orange-500);
}
.pmx-pill.is-good {
  background: rgba(4, 120, 87, 0.13);
  color: #0b6b45;
}
.pmx-pill.is-mute {
  background: rgba(26, 18, 6, 0.07);
  color: var(--ink-faint);
}

/* Label-over-value pairs. Reads better than a two-column table for the
   handful of facts a card carries, and it wraps instead of scrolling. */
.pmx-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin: 0 0 10px;
}
.pmx-facts > div { min-width: 0; }
.pmx-facts dt {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pmx-facts dd { margin: 2px 0 0; font-size: 0.95rem; }

.pmx-details { margin: 12px 0 18px; }
.pmx-details > summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--ink);
}

/* ---- support: ticket rows ----
   A five-column table for a list that will hold four rows was the wrong
   instrument, and on a phone 345px of every row sat off-screen. The row
   is one link now, so the tap target is the row. */

.pmx-tickets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}
.pmx-tickets .pmx-card { margin: 0; }

.pmx-ticket {
  display: block;
  padding: 13px 16px;
  color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease, color .18s ease;
}
.pmx-ticket:hover {
  color: var(--ink);
  border-color: var(--hairline-orange);
  box-shadow: var(--shadow-md);
}
.pmx-ticket-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pmx-ticket-subject {
  margin-right: auto;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pmx-ticket-meta {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  color: var(--ink-faint);
}
.pmx-ticket.is-settled { background: #fdfcfa; box-shadow: none; }
.pmx-ticket.is-settled .pmx-ticket-subject {
  font-weight: 500;
  color: var(--ink-soft);
}

/* The one mark on the list that is colour before it is words, so it is
   never alone: the pill reads "Waiting on you", the line under it says
   we replied, and a screen reader gets "New reply" beside the dot. */
.pmx-new {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange-500);
  box-shadow: 0 0 0 3px rgba(255, 140, 41, 0.22);
}

/* ---- support: the fixes that sit above the form ---- */

.pmx-fixes ul { list-style: none; margin: 10px 0 12px; padding: 0; }
.pmx-fix {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-top: 1px solid var(--portal-hairline);
}
.pmx-fix:first-child { border-top: 0; padding-top: 4px; }
.pmx-fix b { display: block; font-size: 0.93rem; color: var(--ink); }
.pmx-fix span {
  display: block;
  margin-top: 2px;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pmx-fix > a {
  flex: none;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.pmx-fix > a:hover { text-decoration: underline; }

/* ---- support: the thread ----
   Shaped like the staff console's .sfx-thread but built on the portal
   tokens. The .sfx-* rules resolve --sfx-line and --sfx-head-bg, which
   are declared only on .sfx-body and are empty on a portal page. */

.pmx-thread {
  list-style: none;
  margin: 18px 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pmx-msg {
  background: var(--white);
  border: 1px solid var(--portal-hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pmx-msg-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 15px;
  background: #fbfaf8;
  border-bottom: 1px solid var(--portal-hairline);
  font-size: 0.79rem;
  color: var(--ink-faint);
}
.pmx-msg-head strong { font-size: 0.85rem; color: var(--ink); }
.pmx-msg-body {
  padding: 13px 15px;
  white-space: pre-wrap;
  font-size: 0.93rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
}
/* A border, not an inset shadow: the head carries its own opaque wash
   and would paint over a shadow, leaving the rail beside the body only. */
.pmx-msg.is-us {
  border-color: var(--orange-200);
  border-left: 3px solid var(--orange-500);
}
.pmx-msg.is-us .pmx-msg-head {
  background: var(--orange-50);
  border-bottom-color: var(--orange-100);
}
.pmx-msg.is-us .pmx-msg-head strong { color: var(--ink); }
.pmx-msg.is-system { border-style: dashed; }
.pmx-msg.is-system .pmx-msg-head {
  background: transparent;
  border-bottom: 0;
  padding-bottom: 0;
}
.pmx-msg.is-system .pmx-msg-body {
  padding-top: 4px;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ---- support: the PHI line, and the four asks ----
   One line, sitting on top of whatever the person is about to type
   into. It used to be a third of a paragraph on a page with no input on
   it. The .pmx-portal-body prefix is load-bearing: `.pmx-card > p` is
   the more specific selector otherwise and would restore the margin. */

.pmx-portal-body .pmx-guard {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 9px 12px 9px 10px;
  border-radius: 10px;
  background: var(--orange-50);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink);
}
.pmx-portal-body .pmx-guard::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  min-height: 1.1em;
  border-radius: 999px;
  background: var(--orange-500);
}

.pmx-asks {
  margin: 0;
  padding: 0 0 0 18px;
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ink-faint);
}
.pmx-asks li::marker { color: var(--orange-500); }

/* A label, its help and its field are one thing. form.stack's 16px gap
   scatters them otherwise. */
.pmx-field { display: flex; flex-direction: column; gap: 7px; }
.pmx-field > label { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.pmx-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
/* A <button class="btn"> is 8px shorter than an <a class="btn"> beside
   it: the button takes line-height normal and carries no border. The
   pair stretches to one height here. `form.stack` is in the selector to
   outrank `form.stack button.btn { align-self: flex-start }`, which
   would otherwise pin the button to the top of the row. */
form.stack .pmx-form-actions .btn {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- an empty list says what to do next, not only that it is empty ---- */

.pmx-empty { text-align: center; border-style: dashed; box-shadow: none; }
.pmx-portal-body .pmx-empty p {
  margin: 0 auto;
  max-width: 44ch;
  font-size: 0.9rem;
  color: var(--ink-faint);
}

/* ---- keyboard ----
   Nothing in the portal had a focus ring except the bubbly dropdown,
   and .btn sets border: 0 so the default ring had nothing to follow.
   No border-radius here on purpose: setting one would change each
   control's shape the moment it takes focus. */
.pmx-portal-body a:focus-visible,
.pmx-portal-body .btn:focus-visible,
.pmx-portal-body button:focus-visible,
.pmx-portal-body input:focus-visible,
.pmx-portal-body select:focus-visible,
.pmx-portal-body textarea:focus-visible,
.pmx-portal-body summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---- responsive: phones ---- */

@media (max-width: 880px) {
  .pmx-main { padding: 22px 16px 48px; }
  .pmx-portal-body h1 { font-size: 1.55rem; }
  /* On a phone the stat tiles pair up instead of stacking. */
  .pmx-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
  }
  .pmx-stat { padding: 14px 16px; }
  .pmx-stat .n { font-size: 1.45rem; }
  .pmx-op-foot .pmx-inline-form { flex: 1 1 100%; }
  .pmx-danger-link { margin-left: 0; }
  /* Without this the fix text and its Steps link fight for one line. */
  .pmx-fix { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   Staff console (src/pages/staff/*) — internal, cross-practice.
   A sibling of the .pmx-* customer portal above, but tuned for
   dense operator work: wide content column, sticky-header data
   tables, tabular numerals, status badges, filter bars.

   Palette: marigold, white and ink — the same three the marketing
   pages and the customer portal use. No separate console colour
   scheme. Every tint here is either --orange-* or white; the rules
   and header washes are marigold at low alpha rather than beige, so
   nothing in the console reads brown.

   /staff is the one surface that reads every practice's data. That
   is signalled by the STAFF CONSOLE strap and the permanent
   "All practices" bar, not by painting the chrome a different colour.

   Everything is prefixed .sfx- so nothing here can collide with
   the marketing or portal rules above.
   ============================================================ */

.sfx-body {
  --sfx-accent:      var(--orange-500);
  --sfx-accent-deep: var(--orange-500);
  --sfx-accent-text: var(--orange-500);
  --sfx-side:        var(--orange-50);            /* #FFF7EF, same as the portal */
  --sfx-side-line:   var(--glass-border);
  --sfx-side-text:   var(--ink-soft);
  --sfx-side-dim:    var(--ink-faint);
  --sfx-line:        var(--glass-border);         /* #F0E6D6 site hairline */
  --sfx-line-soft:   rgba(255, 140, 41, 0.16);    /* marigold rule, not taupe */
  --sfx-head-bg:     var(--orange-50);
  --sfx-row-hover:   rgba(255, 140, 41, 0.06);
  --sfx-maxw:        1180px;                      /* ReadyMaxer's console is 1100 + room for wider tables */
  background: var(--white);
}

/* The marketing canvas paints a marigold glow + dot grid on the
   body pseudo-elements. The console wants flat white behind the
   tables so hairlines stay crisp. */
.sfx-body::before,
.sfx-body::after { display: none; }

.sfx-top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--sfx-line);
}
.sfx-top-inner {
  max-width: var(--sfx-maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 22px;
  height: 62px;
  padding: 0 26px;
}
.sfx-top-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 0;
  color: var(--ink);
}
.sfx-top-brand:hover { border-bottom: 0; color: var(--ink); }
.sfx-top-brand .brand-name { font-size: 1.25rem; color: var(--ink); }
.sfx-top-brand .brand-name .max { color: var(--orange-500); }

/* "Staff console" strap beside the wordmark */
.sfx-top-strap {
  font-size: 0.8rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.sfx-top-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.sfx-top-links a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-faint);
  border-bottom: 0;
  white-space: nowrap;
}
.sfx-top-links a:hover { color: var(--ink); border-bottom: 0; }
.sfx-top-links form { margin: 0; }
.sfx-top-email {
  font-size: 0.8rem;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.sfx-signout {
  padding: 8px 12px;
  font-size: 0.82rem;
  white-space: nowrap;
  border-radius: 10px;
  background: var(--white);
  border: 1.5px solid rgba(26, 18, 6, 0.12);
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sfx-signout:hover {
  background: var(--white);
  border-color: var(--ink);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

/* ---------- tab row ---------- */

/* One flat row of pills, one per page, 6px apart, wrapping when the
   window is narrow. The one you are on is filled ink with white text,
   the rest are plain text: the row ReadyMaxer's Site admin uses. */
.sfx-tabs-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.sfx-tabs-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.sfx-tabs-nav a:hover {
  background: rgba(255, 140, 41, 0.14);
  color: var(--ink);
  border-bottom: 0;
}
.sfx-tabs-nav a.active {
  background: var(--ink);
  color: #fff;
}

/* Count chip on a tab: open tickets, chart orders to review, open
   errors, open crashes. Work waiting on a person, so every one is the
   same red pill, on a plain tab and on the ink one alike (ReadyMaxer). */
.sfx-navcount {
  min-width: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #B3261E;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  vertical-align: 1px;
}

/* ---------- main column ---------- */

.sfx-main {
  min-width: 0;
  padding: 0 0 64px;
  background: var(--white);
}
.sfx-wrap {
  max-width: var(--sfx-maxw);
  margin: 0 auto;
  padding: 22px 26px 0;
}

/* The marketing sheet gives every bare <section> 56px of vertical
   padding. Inside the console a <section> is a panel, not a page band. */
.sfx-main section { padding: 0; }

/* Slim line that keeps the cross-practice scope always visible. */
.sfx-scope {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 14px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--sfx-line);
  font-size: 0.76rem;
  color: var(--ink-faint);
}
.sfx-scope b {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.68rem;
  white-space: nowrap;
}

/* Practice lookup, reachable from every page instead of only the
   practices list. */
.sfx-scope-find { margin-left: auto; }
.sfx-scope-find input[type="search"] {
  min-width: 200px;
  padding: 5px 12px;
  font-size: 0.8rem;
  border-radius: 999px;
  border-color: var(--sfx-line);
}

.sfx-content { max-width: 100%; }

@media (max-width: 720px) {
  .sfx-top-inner { padding: 0 16px; gap: 12px; }
  .sfx-top-email, .sfx-top-strap { display: none; }
  .sfx-top-links { gap: 12px; }
  .sfx-wrap { padding: 16px 16px 0; }
  .sfx-scope-find { margin-left: 0; width: 100%; }
  .sfx-scope-find input[type="search"] { width: 100%; }
}

/* ---------- page header ---------- */

.sfx-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--sfx-line);
}
.sfx-head h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.sfx-head .sfx-lede {
  margin: 5px 0 0;
  max-width: 76ch;
  font-size: 0.885rem;
  line-height: 1.55;
  color: var(--ink-faint);
}
.sfx-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Divider heading between two blocks on one page. */
.sfx-section-h {
  margin: 28px 0 4px;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}

.sfx-back {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.84rem;
  color: var(--ink-faint);
  border-bottom: 0;
}
.sfx-back:hover { color: var(--ink); border-bottom: 0; }

/* ---------- stat tiles ---------- */

.sfx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px;
  margin: 0 0 26px;
}

.sfx-stat {
  display: block;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  color: inherit;
  border-bottom: 1px solid var(--sfx-line);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
a.sfx-stat:hover {
  border-color: var(--hairline-orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: inherit;
}
.sfx-stat-l {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sfx-stat-n {
  margin-top: 3px;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sfx-stat-h {
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.sfx-stat.is-warn .sfx-stat-n { color: #A32116; }
.sfx-stat.is-good .sfx-stat-n { color: #15693C; }
/* A tile that is signalling something actionable gets a rail. */
.sfx-stat.is-warn { border-left: 3px solid #C0392B; }

/* A tile with nowhere to go must not look like the six beside it that
   do. Only the anchor variant lifts on hover; the div variant sits back. */
div.sfx-stat {
  background: #FAFAF9;
  box-shadow: none;
}

/* A modelled number is not a measured one. */
.sfx-est {
  border-bottom: 1px dotted var(--ink-faint);
  cursor: help;
}

/* The one tile a page leads with (Sales: Paying now). Brand wash and an
   ink edge, the way ReadyMaxer's accent tile sits on its yellow. */
.sfx-stat.is-accent {
  background: var(--orange-50);
  border-color: var(--ink);
}
a.sfx-stat.is-accent:hover { border-color: var(--ink); }

/* Week-over-week chip on the Sales momentum tiles. */
.sfx-delta { font-weight: 700; }
.sfx-delta.is-good { color: #15693C; }
.sfx-delta.is-bad { color: #A32116; }
.sfx-delta.is-mute { color: var(--ink-faint); }

/* Sales chart: legend swatches beside the panel title, and the bars. */
.sfx-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.sfx-legend i {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  margin-left: 10px;
}
.sfx-legend i:first-child { margin-left: 0; }
.sfx-legend i.is-signups { background: var(--orange-500); }
.sfx-legend i.is-trials { background: var(--ink); }
.sfx-chart { display: block; }

/* Where a practice stopped on the onboarding walk (Practices list),
   or Live once it has charted. */
.sfx-stall { color: #8A5A00; font-weight: 600; white-space: nowrap; }
.sfx-live { color: #15693C; font-weight: 600; }

.sfx-footnote { margin: 14px 0 0; font-size: 0.78rem; line-height: 1.55; }

/* ---------- panels ---------- */

.sfx-panel {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  margin: 0 0 20px;
  /* clip, not hidden: `hidden` makes the panel a scroll container, which
     would kill the sticky thead of a table inside it. The `hidden` line
     is the fallback for browsers without `clip`. */
  overflow: hidden;
  overflow: clip;
}
/* Side-by-side panels share a row height, so a short table leaves its
   slack inside its own frame instead of as a hole in the page. */
.sfx-panel > .sfx-table-wrap { flex: 1; }
.sfx-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--sfx-head-bg);
  border-bottom: 1px solid var(--sfx-line);
}
.sfx-panel-head h2,
.sfx-panel-head h3 {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.sfx-panel-head .sfx-panel-note {
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.sfx-panel-body { padding: 16px; }
.sfx-panel-body > :last-child { margin-bottom: 0; }
/* A panel whose only child is a table: no inner padding, the table
   supplies its own gutters. */
.sfx-panel > .sfx-table-wrap { border: 0; border-radius: 0; }

.sfx-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
  align-items: stretch;
}
.sfx-grid-2 > .sfx-panel { margin-bottom: 4px; }
.sfx-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

/* ---------- toolbar + filter pills ---------- */

.sfx-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.sfx-toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.sfx-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--sfx-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--sfx-line);
  white-space: nowrap;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.sfx-filter:hover {
  border-color: var(--hairline-orange);
  background: var(--orange-50);
  color: var(--ink);
}
/* Same marigold fill as the active nav item, so "you are here" looks
   the same in the sidebar and in a filter bar. */
.sfx-filter.is-on {
  background: linear-gradient(135deg, var(--sfx-accent) 0%, var(--sfx-accent-deep) 100%);
  border-color: var(--sfx-accent-deep);
  color: var(--ink);
  font-weight: 600;
}
.sfx-filter-n {
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-faint);
}
.sfx-filter.is-on .sfx-filter-n { color: rgba(255, 255, 255, 0.85); }

/* Inline search / filter form */
.sfx-find {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
.sfx-find input[type="search"],
.sfx-find input[type="text"] {
  min-width: 260px;
  padding: 7px 12px;
  border: 1px solid var(--sfx-line);
  border-radius: 9px;
  font: inherit;
  font-size: 0.875rem;
  background: var(--white);
  color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.sfx-find input:focus {
  outline: none;
  border-color: var(--sfx-accent);
  box-shadow: 0 0 0 3px rgba(255, 140, 41, 0.18);
}
.sfx-find select {
  padding: 7px 10px;
  border: 1px solid var(--sfx-line);
  border-radius: 9px;
  font: inherit;
  font-size: 0.875rem;
  background: var(--white);
}
.sfx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid var(--sfx-line);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid var(--sfx-line);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.sfx-btn:hover {
  border-color: var(--hairline-orange);
  background: var(--orange-50);
  color: var(--ink);
}
/* Marigold fill, ink label. There is no darker marigold to reach for
   any more, and there does not need to be: ink on the brand orange is
   about 9:1. */
.sfx-btn.is-primary {
  background: var(--orange-500);
  border-color: var(--orange-500);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(255, 140, 41, 0.28);
}
.sfx-btn.is-primary:hover {
  background: var(--orange-500);
  border-color: var(--ink);
  color: var(--ink);
}
.sfx-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 140, 41, 0.35);
}

/* ---------- data table ---------- */

.sfx-table-wrap {
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
  overflow: auto;
  max-height: 74vh;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  margin: 0 0 18px;
}

table.sfx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* White, not the marigold wash the panel title uses. Inside a panel the
   two would stack into one tall orange block; on its own the bottom
   rule plus the marigold hairline under it is separation enough. */
table.sfx-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 9px 14px;
  background: var(--white);
  border-bottom: 1px solid var(--sfx-line);
  box-shadow: 0 1px 0 rgba(255, 140, 41, 0.16);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

table.sfx-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--sfx-line-soft);
  color: var(--ink);
  vertical-align: top;
}
table.sfx-table tbody tr:last-child td { border-bottom: 0; }
table.sfx-table tbody tr:hover td { background: var(--sfx-row-hover); }
/* A row that needs a person (staff Office link: a session that failed). */
table.sfx-table tbody tr.is-failed td { background: #FBE7E4; }
table.sfx-table tbody tr.is-failed:hover td { background: #F7D9D4; }

table.sfx-table a { border-bottom: 0; font-weight: 500; }
table.sfx-table a:hover { border-bottom: 0; text-decoration: underline; }
table.sfx-table code {
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(26, 18, 6, 0.05);
  color: var(--ink-soft);
}

/* Column helpers */
.sfx-num  { text-align: right; }
.sfx-nowrap { white-space: nowrap; }
.sfx-dim  { color: var(--ink-faint); }
.sfx-time { white-space: nowrap; color: var(--ink-faint); font-size: 0.8rem; }
/* Long free text (metadata blobs) that must not blow the layout out */
.sfx-clip {
  display: block;
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sfx-strong { font-weight: 600; }

/* A dense table inside a panel loses its own frame */
.sfx-panel table.sfx-table { border-radius: 0; }

/* ---------- status badges ---------- */

.sfx-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: #F1F1F0;
  color: #5C5C5A;
}
.sfx-tag.is-good { background: #E4F3EA; color: #15693C; }
/* "warn" is the marigold ramp itself, so a state that needs attention
   is the brand colour rather than a fourth hue. */
.sfx-tag.is-warn { background: var(--orange-100); color: var(--ink); }
.sfx-tag.is-bad  { background: #FBE7E4; color: #A32116; }
.sfx-tag.is-info { background: #E7EFFA; color: #17518F; }
.sfx-tag.is-mute { background: #F1F1F0; color: #5C5C5A; }
/* The only SOLID badge in the console. Reserved for work that is
   blocked or losing money — past-due billing, an urgent ticket, an
   uncollectible invoice — so it outranks every tinted badge on the
   same screen at a glance. */
.sfx-tag.is-crit { background: #B3261E; color: #fff; }
/* Outline variant for secondary facts (cadence, platform, category) */
.sfx-tag.is-plain {
  background: transparent;
  border: 1px solid var(--sfx-line);
  color: var(--ink-soft);
  font-weight: 600;
}

.sfx-yes { color: #15693C; font-weight: 700; }
.sfx-no  { color: var(--ink-faint); }
.sfx-star { color: var(--orange-500); }

/* ---------- empty state ---------- */

.sfx-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.885rem;
  background: var(--white);
  border: 1px dashed var(--sfx-line);
  border-radius: var(--r-md);
  margin: 0 0 18px;
}
.sfx-empty strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 3px;
}
.sfx-empty.is-good strong { color: #15693C; }

/* ---------- key/value list (detail pages) ---------- */

.sfx-kv {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 0;
  margin: 0;
  font-size: 0.875rem;
}
.sfx-kv dt {
  padding: 7px 0;
  color: var(--ink-faint);
  font-weight: 600;
  border-bottom: 1px solid var(--sfx-line-soft);
}
.sfx-kv dd {
  padding: 7px 0;
  margin: 0;
  color: var(--ink);
  border-bottom: 1px solid var(--sfx-line-soft);
  overflow-wrap: anywhere;
}
.sfx-kv dt:last-of-type,
.sfx-kv dd:last-of-type { border-bottom: 0; }

/* ---------- bar rows (funnel, breakdowns) ---------- */

.sfx-bars { display: flex; flex-direction: column; gap: 7px; }
.sfx-bar {
  display: grid;
  /* The label column gives way first: these bars sit in half-width
     panels as often as full-width ones. */
  grid-template-columns: minmax(96px, 200px) minmax(0, 1fr) 68px;
  align-items: center;
  gap: 12px;
}
.sfx-bar-l {
  font-size: 0.865rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sfx-bar-l small { color: var(--ink-faint); font-size: 0.76rem; }
.sfx-bar-track {
  height: 22px;
  border-radius: 6px;
  background: var(--orange-50);
  border: 1px solid var(--sfx-line-soft);
  overflow: hidden;
}
.sfx-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--orange-500);
}
.sfx-bar-n {
  text-align: right;
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.sfx-bar-step {
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  /* Sits under the label column, whatever width it resolved to. */
  display: grid;
  grid-template-columns: minmax(96px, 200px) minmax(0, 1fr);
  gap: 12px;
}
.sfx-bar-step span { grid-column: 2; }

/* Compact ranked list (source / PMS breakdown sidebars) */
.sfx-rank { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.sfx-rank li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--sfx-line-soft);
}
.sfx-rank li:last-child { border-bottom: 0; }
.sfx-rank b { font-variant-numeric: tabular-nums; }

/* ---------- message thread (support tickets) ---------- */

.sfx-thread { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; }
.sfx-msg {
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
  background: var(--white);
  overflow: hidden;
}
.sfx-msg-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 8px 14px;
  background: var(--sfx-head-bg);
  border-bottom: 1px solid var(--sfx-line-soft);
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.sfx-msg-head strong { color: var(--ink); font-size: 0.85rem; }
.sfx-msg-body { padding: 12px 14px; white-space: pre-wrap; font-size: 0.9rem; line-height: 1.6; }
.sfx-msg.is-customer { background: #FAFAFA; }
.sfx-msg.is-customer .sfx-msg-head { background: #F3F3F3; }
.sfx-msg.is-note { border-color: var(--orange-200); }
.sfx-msg.is-note .sfx-msg-head {
  background: var(--orange-100);
  color: var(--ink);
}
.sfx-msg.is-note .sfx-msg-head strong { color: var(--ink); }

/* Scroll frame for the heatmap canvas. */
.sfx-canvas-frame {
  display: inline-block;
  max-width: 100%;
  max-height: 74vh;
  overflow: auto;
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* ---------- code / JSON viewer ---------- */

.sfx-code {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  /* Neutral black, not a warm one — a brown code block reads as a
     stain next to white panels. */
  background: #14161A;
  color: #E8EAED;
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  overflow: auto;
  max-height: 460px;
}

/* ---------- forms inside the console ---------- */

.sfx-form { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.sfx-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.sfx-form label.is-inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.sfx-form input[type="text"],
.sfx-form input[type="email"],
.sfx-form input[type="number"],
.sfx-form select,
.sfx-form textarea {
  padding: 8px 12px;
  border: 1px solid var(--sfx-line);
  border-radius: 9px;
  font: inherit;
  font-size: 0.9rem;
  background: var(--white);
  color: var(--ink);
  font-weight: 400;
}
.sfx-form textarea { resize: vertical; min-height: 90px; line-height: 1.55; }
.sfx-form input:focus,
.sfx-form select:focus,
.sfx-form textarea:focus {
  outline: none;
  border-color: var(--sfx-accent);
  box-shadow: 0 0 0 3px rgba(255, 140, 41, 0.18);
}
.sfx-form .sfx-hint { font-size: 0.79rem; color: var(--ink-faint); font-weight: 400; }
.sfx-form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* /static/dd.js replaces every native <select> with a .dd-btn + listbox
   at marketing scale (47px tall, 15px text, 11px radius), which stands a
   head above the 40px inputs beside it in a console form. Metrics only —
   the native select stays where dd.js put it and stays the source of
   truth, so nothing here touches its display or its parent. */
.sfx-form .dd-btn,
.sfx-find .dd-btn {
  border-width: 1px;
  border-color: var(--sfx-line);
  font-size: 0.9rem;
  padding: 8px 12px;
  border-radius: 9px;
  /* An <input> resolves a taller intrinsic height than a <button> at the
     same padding, so the two are pinned rather than left to agree. */
  min-height: 40px;
}
.sfx-find .dd-btn {
  padding: 7px 10px;
  font-size: 0.875rem;
  min-height: 36px;
}
.sfx-form .dd-btn:focus-visible,
.sfx-find .dd-btn:focus-visible,
.sfx-form .dd.open .dd-btn,
.sfx-find .dd.open .dd-btn {
  border-color: var(--sfx-accent);
  box-shadow: 0 0 0 3px rgba(255, 140, 41, 0.18);
}
.sfx-form .dd-list,
.sfx-find .dd-list {
  border-width: 1px;
  border-color: var(--sfx-line);
  border-radius: 9px;
}
.sfx-form .dd-opt,
.sfx-find .dd-opt { font-size: 0.875rem; padding: 8px 10px; }

/* Inline table inputs (release delivery knobs) */
table.sfx-table input[type="text"],
table.sfx-table input[type="number"] {
  padding: 4px 8px;
  border: 1px solid var(--sfx-line);
  border-radius: 7px;
  font: inherit;
  font-size: 0.82rem;
  background: var(--white);
}
table.sfx-table input:focus {
  outline: none;
  border-color: var(--sfx-accent);
  box-shadow: 0 0 0 2px rgba(255, 140, 41, 0.2);
}

/* ---------- sub-tabs (one page, several views) ---------- */

.sfx-tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--sfx-line);
}
.sfx-tabs a {
  padding: 8px 14px;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--sfx-line);
  border-radius: 9px 9px 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-faint);
}
.sfx-tabs a:hover { color: var(--ink); }
.sfx-tabs a.is-on {
  background: var(--white);
  border-color: var(--sfx-line);
  border-bottom-color: var(--white);
  color: var(--ink);
  font-weight: 600;
}

/* ---------- inline notices ---------- */

.sfx-note {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--sfx-line);
  background: var(--surface-tint);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.sfx-note.is-good { background: #E4F3EA; border-color: #B9DFC8; color: #15693C; }
.sfx-note.is-bad  { background: #FBE7E4; border-color: #F2C4BD; color: #A32116; }

.sfx-foot {
  margin: 26px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--sfx-line);
  font-size: 0.78rem;
  color: var(--ink-faint);
  max-width: 88ch;
}

/* ---------- responsive ---------- */

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

@media (max-width: 880px) {
  .sfx-tabs-nav a { padding: 6px 11px; font-size: 0.84rem; }
  .sfx-bar { grid-template-columns: 128px minmax(0, 1fr) 58px; }
  .sfx-bar-step { padding-left: 140px; }
  .sfx-kv { grid-template-columns: minmax(0, 1fr); }
  .sfx-kv dt { padding-bottom: 0; border-bottom: 0; }
}

/* ============================================================
   Staff console, second wave: world map, live feed, marketing
   cards, crash and error rows, meters.

   Same three colours as the block above. Two things here are new
   and worth saying out loud:

   1. The globe card is the one dark surface in the console. Its
      backdrop is a warm brown rather than the neutral black of
      .sfx-code, because the land and the dots are marigold and
      they go muddy on a cool ground.
   2. Two dots need to tell categories apart: the live feed row and
      the globe legend key. A class per category would multiply
      fast, so both read a --sfx-dot custom property and fall back
      to the accent. A page sets it to a token, never to a literal:
      style="--sfx-dot: var(--success)".

   Widths on .sfx-gauge-fill and positions on .sfx-globe-tip are the
   only inline values a page should write here. Both are geometry,
   not colour.
   ============================================================ */

/* ---------- world globe ---------- */

.sfx-globe-wrap {
  /* The tooltip is placed against this box, so it has to be the
     positioned ancestor. */
  position: relative;
  padding: 14px;
  border-radius: var(--r-md);
  /* Warm brown, a shade off --ink so the card's own edge still reads.
     See note 1 at the head of this section. */
  background: #241809;
  border: 1px solid #34240E;
  box-shadow: var(--shadow-sm);
}

.sfx-globe {
  display: block;
  width: 100%;
  cursor: grab;
  /* A drag on the globe must spin it, not scroll the page under it. */
  touch-action: none;
  border-radius: var(--r-sm);
}
.sfx-globe:active { cursor: grabbing; }
.sfx-globe:focus-visible {
  outline: 2px solid var(--sfx-accent);
  outline-offset: 3px;
}

/* Hidden until the pointer is over a plotted city. The script sets
   display, left and top; everything else is fixed here. */
.sfx-globe-tip {
  position: absolute;
  z-index: 5;
  display: none;
  pointer-events: none;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  background: rgba(26, 18, 6, 0.94);
  border: 1px solid var(--hairline-orange);
  color: var(--white);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Legend plus attribution, on the dark card under the canvas. */
.sfx-globe-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
}
.sfx-globe-legend a { color: rgba(255, 255, 255, 0.72); border-bottom: 0; }
.sfx-globe-legend a:hover { color: var(--white); border-bottom: 0; }
.sfx-globe-legend a:focus-visible {
  outline: 2px solid var(--sfx-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* One legend entry. The dot is drawn by the rule, so the key carries
   only its label text. */
.sfx-globe-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
}
.sfx-globe-key::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sfx-dot, var(--sfx-accent));
}

/* ---------- live feed ---------- */

/* Newest first, capped so the column cannot outgrow the globe beside
   it. The rows come and go under a poll, so the cap is on the list and
   not on the panel around it. */
.sfx-live {
  display: flex;
  flex-direction: column;
  max-height: 560px;
  overflow-y: auto;
}

.sfx-live-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--sfx-line-soft);
  transition: background .14s ease;
}
.sfx-live-row:last-child { border-bottom: 0; }
.sfx-live-row:hover { background: var(--sfx-row-hover); }

.sfx-live-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sfx-dot, var(--sfx-accent));
  animation: sfx-live-pulse 2.4s ease-out infinite;
}
@keyframes sfx-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 140, 41, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(255, 140, 41, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 140, 41, 0); }
}

/* Place on the first line, what kind of visit on the second. Both
   truncate: a long city and region pair must not push the age off the
   row. Either markup works, a <small> or two children carrying
   .sfx-strong and .sfx-dim, so the rule sizes and clips whatever the
   feed script puts inside. */
.sfx-live-where {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sfx-live-where > *,
.sfx-live-where small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sfx-live-where > :first-child { font-weight: 600; }
.sfx-live-where > * + *,
.sfx-live-where small {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-faint);
}

.sfx-live-when {
  flex: none;
  margin-left: auto;
  font-size: 0.74rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- marketing cards ---------- */

/* A card per outside service. Same frame as .sfx-panel, but the head
   carries a subtitle and an open-in-a-new-tab link rather than a note,
   so it is its own block. */
.sfx-mkt-card {
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  margin: 0 0 16px;
}

.sfx-mkt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.sfx-mkt-head h2,
.sfx-mkt-head h3 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.sfx-mkt-head small {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

.sfx-mkt-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* The env-var hint for a service nobody has connected yet. Warm ink,
   not the neutral black of .sfx-code: this is four lines inside a white
   card, too small to read as a stain. */
.sfx-mkt-setup {
  margin: 8px 0 0;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--white);
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.76rem;
  line-height: 1.6;
  overflow-x: auto;
}

/* ---------- tag chips (which site tags are live) ---------- */

.sfx-tagstrip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sfx-tagchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--sfx-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.82rem;
  color: var(--ink-faint);
  white-space: nowrap;
}
.sfx-tagchip strong { color: var(--ink); font-weight: 600; }

.sfx-tagchip-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* Set, and therefore loading on the public pages. */
.sfx-tagchip.is-on { border-color: var(--sfx-accent); }
.sfx-tagchip.is-on .sfx-tagchip-dot { background: var(--success); }

/* ---------- expandable row detail (stacks, payloads) ---------- */

.sfx-detail { margin: 0; }

.sfx-detail-sum {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  /* The native triangle sits too low next to a 0.875rem line and it
     differs per browser, so it goes and the caret below replaces it. */
  list-style: none;
}
.sfx-detail-sum::-webkit-details-marker { display: none; }
.sfx-detail-sum::before {
  content: "\25B8";
  flex: none;
  color: var(--sfx-accent-text);
  transition: transform .14s ease;
}
.sfx-detail[open] > .sfx-detail-sum::before { transform: rotate(90deg); }
.sfx-detail-sum:hover { color: var(--sfx-accent-text); }
.sfx-detail-sum:focus-visible {
  outline: none;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 3px rgba(255, 140, 41, 0.35);
}

/* A stack trace or a metadata blob. Long lines wrap, and anything that
   cannot wrap (one long path) scrolls sideways instead of widening the
   table it sits in. */
.sfx-stackpre {
  margin: 8px 0 0;
  padding: 10px 12px;
  max-height: 320px;
  border: 1px solid var(--sfx-line-soft);
  border-radius: var(--r-sm);
  background: rgba(26, 18, 6, 0.05);
  color: var(--ink-soft);
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: auto;
}

/* ---------- row actions ---------- */

/* Resolve and delete belong on one line, whatever the row height. */
.sfx-rowacts {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Bare icon button that removes a row. Muted until the pointer or the
   keyboard reaches it, then danger red: a destructive control should
   not shout from every row of a full table. */
.sfx-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, border-color .14s ease;
}
/* rgba of --danger. CSS cannot take an alpha off a var, and the sheet
   already carries this red at low alpha above. */
.sfx-x:hover {
  color: var(--danger);
  background: rgba(179, 38, 30, 0.08);
  border-color: rgba(179, 38, 30, 0.28);
}
.sfx-x:focus-visible {
  outline: none;
  color: var(--danger);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.3);
}

/* ---------- thin meter ---------- */

/* One number against its ceiling: requests in flight, a quota, a
   share. The page sets the fill width and nothing else. */
.sfx-gauge {
  height: 8px;
  border-radius: 999px;
  background: var(--orange-50);
  border: 1px solid var(--sfx-line-soft);
  overflow: hidden;
}
.sfx-gauge-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sfx-accent) 0%, var(--sfx-accent-deep) 100%);
  transition: width .2s ease;
}

/* ---------- responsive ---------- */

@media (max-width: 820px) {
  .sfx-mkt-cols { grid-template-columns: minmax(0, 1fr); }
}

/* The sheet already stills every animation and transition under a
   reduced-motion setting. Named again here so the two moving parts of
   this section, the live dot and the row highlight, are covered even if
   that blanket rule is ever narrowed. */
@media (prefers-reduced-motion: reduce) {
  .sfx-live-dot { animation: none; }
  .sfx-live-row { transition: none; }
  .sfx-gauge-fill { transition: none; }
  .sfx-detail-sum::before { transition: none; }
}

/* ============================================================
   Staff console restyle (Max, 2026-09-13)

   The console now follows the same rules as the customer portal:
   - the round site logo in the top left, not the word PerioMaxer;
   - two button styles only: the one action is an orange word with
     an arrow (.sfx-btn.is-primary), every other button is an ink
     word with an orange underline (.sfx-btn);
   - light orange and white are the surface colours. No translucent
     orange washes, glows or gradients, and no dark globe card;
   - small corners (4 to 8px) in place of pills and 10px cards.
   Kept last in the staff block so it wins over the rules above.
   ============================================================ */

.sfx-body {
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --sfx-line-soft: var(--orange-100);
  --sfx-row-hover: var(--orange-50);
  --sfx-head-bg: var(--orange-50);
}

/* Top bar: flat white, logo left. */
.sfx-top {
  background: var(--white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sfx-top-brand { align-items: center; }
.sfx-top-logo { display: block; width: 38px; height: 38px; border-radius: 50%; }
.sfx-top-strap { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.sfx-top-links { gap: 22px; }

/* Tab row: small corners, light orange for "you are here". */
.sfx-tabs-nav { gap: 4px; }
.sfx-tabs-nav a { border-radius: var(--r-md); padding: 7px 12px; }
.sfx-tabs-nav a:hover { background: var(--orange-50); }
.sfx-tabs-nav a.active {
  background: var(--orange-100);
  color: var(--ink);
  font-weight: 700;
}
.sfx-navcount { border-radius: var(--r-sm); padding: 1px 6px; }
.sfx-scope-find input[type="search"] { border-radius: var(--r-md); }

/* Tiles, panels, tables: white, hairline, no shadow, no lift. */
.sfx-stat,
div.sfx-stat,
.sfx-panel,
.sfx-table-wrap,
.sfx-mkt-card,
.sfx-canvas-frame { background: var(--white); box-shadow: none; }
.sfx-stat.is-accent { background: var(--orange-50); border-color: var(--orange-200); }
a.sfx-stat:hover,
a.sfx-stat.is-accent:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--orange-500);
}
table.sfx-table thead th { box-shadow: none; }
table.sfx-table code { border-radius: 3px; }
.sfx-tag { border-radius: var(--r-sm); }
.sfx-legend i { border-radius: 2px; }
.sfx-bar-track { border-radius: 3px; }
.sfx-bar-fill { border-radius: 2px; }
.sfx-gauge { border-radius: 3px; }
.sfx-gauge-fill { border-radius: 2px; background: var(--orange-500); }
.sfx-note { background: var(--orange-50); border-color: var(--orange-100); }

/* Filters: small corners, light orange when on. */
.sfx-filter { border-radius: var(--r-md); }
.sfx-filter:hover { background: var(--orange-50); border-color: var(--orange-200); }
.sfx-filter.is-on {
  background: var(--orange-100);
  border-color: var(--orange-200);
  color: var(--ink);
}
.sfx-filter.is-on .sfx-filter-n { color: var(--ink-soft); }
.sfx-tagchip { border-radius: var(--r-md); }
.sfx-tagchip.is-on { border-color: var(--orange-200); background: var(--orange-50); }

/* Inputs: small corners, a solid light orange focus ring. */
.sfx-find input[type="search"],
.sfx-find input[type="text"],
.sfx-find select,
.sfx-form input[type="text"],
.sfx-form input[type="email"],
.sfx-form input[type="number"],
.sfx-form select,
.sfx-form textarea,
table.sfx-table input[type="text"],
table.sfx-table input[type="number"],
.sfx-form .dd-btn,
.sfx-find .dd-btn,
.sfx-form .dd-list,
.sfx-find .dd-list { border-radius: var(--r-md); }
.sfx-find input:focus,
.sfx-form input:focus,
.sfx-form select:focus,
.sfx-form textarea:focus,
table.sfx-table input:focus,
.sfx-form .dd-btn:focus-visible,
.sfx-find .dd-btn:focus-visible,
.sfx-form .dd.open .dd-btn,
.sfx-find .dd.open .dd-btn {
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px var(--orange-100);
}
.sfx-tabs a { border-radius: var(--r-md) var(--r-md) 0 0; }

/* ---- Buttons are words ---- */
.sfx-btn,
.sfx-btn:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  cursor: pointer;
}
.sfx-btn:hover { text-decoration-color: var(--ink); }
.sfx-btn.is-primary,
.sfx-btn.is-primary:hover {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--orange-500);
  font-weight: 700;
  text-decoration: none;
}
.sfx-btn.is-primary::after { content: "\2192"; }
.sfx-btn.is-primary:hover {
  color: #d66d16;
  /* No underline on hover (Max, 2026-09-13): the arrow already says it
     is the action; only the colour deepens. */
  text-decoration: none;
}
.sfx-btn:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 3px;
  box-shadow: none;
}
.sfx-signout { padding: 6px 0; font-size: 0.875rem; }
.sfx-head-actions,
.sfx-toolbar-right,
.sfx-form-actions,
.sfx-rowacts { gap: 18px; }
.sfx-x { border-radius: var(--r-sm); }
.sfx-detail-sum:focus-visible { box-shadow: 0 0 0 3px var(--orange-100); }

/* Code and setup blocks: light orange, ink text. */
.sfx-code,
.sfx-mkt-setup,
.sfx-stackpre {
  background: var(--orange-50);
  color: var(--ink);
  border: 1px solid var(--orange-100);
  border-radius: var(--r-md);
}

/* ---- Globe: a white card, a light globe ---- */
.sfx-globe-wrap {
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
  box-shadow: none;
}
.sfx-globe { border-radius: 0; }
.sfx-globe-tip {
  background: var(--white);
  border: 1px solid var(--orange-200);
  border-radius: var(--r-sm);
  color: var(--ink);
}
.sfx-globe-legend { color: var(--ink-faint); }
.sfx-globe-key { color: var(--ink-soft); }
@keyframes sfx-live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--orange-200); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Signed-BAA receipt (src/pages/baa.tsx, /baa/signed). Four facts an
   owner may need to quote to an auditor, so they read as a record and
   not as a sentence. */
.baa-receipt {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin: 20px 0;
  padding: 18px 20px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--white);
}
.baa-receipt dt {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.baa-receipt dd { margin: 2px 0 0; font-size: 0.98rem; color: var(--ink); }

/* ─── ReadyMaxer-shaped home (2026-08-19) ───────────────────────────
   Centered hero over the device collage, small-caps proof strip,
   numbered steps, bordered feature cells, dark pricing teaser. Copy
   stays at one to two lines per element. */

.rm-hero { padding: 78px 0 30px; text-align: center; }
.rm-hero-title { margin: 16px 0 18px; }
.rm-hero-sub {
  max-width: 640px;
  margin: 0 auto 28px;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  line-height: 1.65;
}
.rm-hero-sub strong { color: var(--ink); font-weight: 700; }
.rm-hero-ctas { justify-content: center; margin-bottom: 54px; }
.rm-hero-stage { max-width: 880px; margin: 0 auto; text-align: left; }

.rm-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.rm-proof span {
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.rm-section { padding: 72px 0; }
.rm-h2 {
  margin: 10px 0 30px;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.rm-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}
.rm-step-n {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-weight: 800;
}
.rm-steps h3 { margin: 14px 0 7px; font-size: 1.04rem; }
.rm-steps p { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }

.rm-cells-wrap { padding-top: 0; }
.rm-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}
.rm-cell {
  padding: 24px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rm-cell:nth-child(3n) { border-right: 0; }
.rm-cell:nth-last-child(-n+3) { border-bottom: 0; }
.rm-cell:hover { background: var(--orange-50); }
.rm-cell h3 { margin: 0 0 7px; font-size: 1rem; }
.rm-cell p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }

.rm-security { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-tint); }
.rm-security-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 44px;
  align-items: start;
}
.rm-security .rm-h2 { margin-bottom: 0; }
.rm-security .check-list li { font-size: .95rem; }

.rm-price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
}
.rm-price-copy p { color: var(--ink-soft); margin: 0 0 22px; max-width: 400px; }
.rm-price-card {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 32px 32px 28px;
}
.rm-from {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 6px;
}
.rm-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.rm-price strong { font-family: var(--font-display); font-size: 3.1rem; letter-spacing: -0.02em; }
.rm-price span { opacity: .75; font-size: .95rem; }
.rm-price-checks { list-style: none; margin: 0 0 22px; padding: 0; }
.rm-price-checks li {
  position: relative;
  padding: 5px 0 5px 26px;
  font-size: .92rem;
  line-height: 1.5;
}
.rm-price-checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--orange-500);
  font-weight: 800;
}

.rm-cta { border-top: 1px solid var(--line); padding: 60px 0 26px; }
.rm-cta-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.rm-cta h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.02em;
}

@media (max-width: 860px) {
  .rm-steps { grid-template-columns: 1fr; gap: 26px; }
  .rm-cells { grid-template-columns: 1fr; }
  .rm-cell { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .rm-cell:last-child { border-bottom: 0 !important; }
  .rm-security-grid, .rm-price-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Two-cell variant of the feature grid (app page: who pays what). */
.rm-cells-2 { grid-template-columns: repeat(2, 1fr); }
.rm-cells-2 .rm-cell { border-bottom: 0; }
.rm-cells-2 .rm-cell:nth-child(3n) { border-right: 1px solid var(--line); }
.rm-cells-2 .rm-cell:nth-child(2n) { border-right: 0; }
@media (max-width: 860px) {
  .rm-cells-2 { grid-template-columns: 1fr; }
}

/* ── Registered computers + change plan (2026-08-24) ─────────────────
   The sign-in-only licensing model gave the portal two new pages: one
   row per computer with the button that frees its slot, and one card
   per plan with the prorated figure. Both use the portal's existing
   card, stat and button pieces; only the row layout is new here. */

.pmx-computer-list {
  display: flex;
  flex-direction: column;
  padding: 4px 24px;
}
.pmx-computer-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--portal-hairline);
}
.pmx-computer-row:last-child { border-bottom: 0; }
.pmx-computer-main { flex: 1 1 16rem; min-width: 0; }
.pmx-computer-row form { margin: 0; margin-left: auto; }
.pmx-computer-row .btn { padding: 8px 14px; font-size: 0.88rem; border-radius: 10px; }
.pmx-computer-row .btn:hover { transform: none; }
.pmx-computer-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.pmx-computer-meta {
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin-top: 2px;
}
.pmx-computer-locked {
  margin: 0 0 0 auto;
  max-width: 18rem;
  text-align: right;
}
.pmx-details > .pmx-computer-list { margin-top: 10px; }

/* ---- share the app (2026-09-09) ---- */

.pmx-share-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 14px 0 10px;
}
.pmx-share-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  min-width: 0;
}
.pmx-share-form input { width: 100%; }
.pmx-share-form .btn { padding: 10px 18px; white-space: nowrap; }
.pmx-share-form .btn:hover { transform: none; }
.pmx-optional { font-weight: 400; color: var(--ink-faint); }
@media (max-width: 720px) {
  .pmx-share-form { grid-template-columns: 1fr; }
}
.pmx-sharecard {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.pmx-share-qr {
  flex: 0 0 auto;
  width: 176px;
  height: 176px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--portal-hairline);
  border-radius: var(--r-md);
}
.pmx-share-qr svg { width: 100%; height: 100%; display: block; }
.pmx-share-body { flex: 1 1 18rem; min-width: 0; }
.pmx-share-url code {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--orange-50);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}
.pmx-share-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.pmx-share-actions .btn:hover { transform: none; }
.pmx-dl-next p { margin: 0 0 10px; }
.pmx-dl-next p:last-child { margin-bottom: 0; }

.pmx-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.pmx-plan { display: flex; flex-direction: column; gap: 6px; }
.pmx-plan h3 { margin: 0; }
.pmx-plan-current { border-color: var(--brand-orange, #ff8c29); }
.pmx-plan-price { font-size: 1.25rem; font-weight: 700; }
.pmx-plan-computers { font-size: 0.9rem; }
.pmx-plan-due {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-orange, #ff8c29);
}
.pmx-plan .btn { margin-top: auto; text-align: center; }
.pmx-proration { margin: 10px 0 0; padding-left: 1.1rem; }
.pmx-proration li { margin: 3px 0; }
.pmx-proration-detail { margin-top: 10px; font-size: 0.9rem; }

@media (max-width: 640px) {
  .pmx-computer-list { padding: 4px 16px; }
  .pmx-computer-row form,
  .pmx-computer-locked {
    margin-left: 0;
    text-align: left;
    width: 100%;
  }
}

/* ─── Public /downloads, ReadyMaxer-shaped (2026-09-01) ──────────────
   The page ReadyMaxer's /downloads is, in orange: a left-set hero with
   a soft glow, then four numbered bands (account first, the phones,
   the operatory computer, pairing), install cards with an icon tile,
   and a drawn preview of the code on the office screen with the phone
   scanning it. Every class is prefixed .dlp- so nothing here touches
   the portal's three .dl-tile tiles or the marketing sheet above. */

.dlp-kicker {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dlp-muted { color: var(--ink-soft); }

.dlp-hero {
  padding: 84px 0 70px;
  background:
    radial-gradient(620px 360px at 84% 20%, rgba(255, 140, 41, .26), transparent 72%),
    linear-gradient(180deg, #fff 0%, var(--white) 100%);
}
.dlp-hero h1 { max-width: 790px; margin: 12px 0 18px; font-size: clamp(2.3rem, 5.4vw, 3.9rem); letter-spacing: -0.03em; }
.dlp-hero .hero-sub { max-width: 690px; font-size: 1.15rem; }
.dlp-hero .hero-ctas { margin-top: 4px; }

.dlp-band { padding: 66px 0; }
.dlp-band-tint {
  background: var(--surface-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.dlp-band .btn { text-align: center; }

.dlp-head {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr);
  gap: 54px;
  align-items: end;
  margin-bottom: 30px;
}
.dlp-head h2 { margin: 10px 0 0; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
.dlp-head > p { margin: 0; font-size: 16px; color: var(--ink-soft); }

.dlp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dlp-steps article {
  position: relative;
  background: var(--white);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-lg);
  padding: 26px 24px 24px;
  box-shadow: var(--shadow-sm);
}
.dlp-steps article > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange-500);
  border: 1.5px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  margin-bottom: 18px;
}
.dlp-steps h3 { font-size: 19px; margin: 0 0 8px; }
.dlp-steps p { color: var(--ink-soft); font-size: 14px; line-height: 1.62; margin: 0; }
.dlp-steps p a { color: var(--ink); }

.dlp-grid { display: grid; gap: 18px; }
.dlp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.dlp-grid-3 { grid-template-columns: repeat(3, 1fr); }

.dlp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-xl);
  padding: 26px;
  box-shadow: var(--shadow-sm);
}
.dlp-card-featured {
  border: 2px solid var(--ink);
  box-shadow: 0 7px 0 rgba(255, 140, 41, .9);
}
.dlp-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dlp-card-head h3 { margin: 0 0 6px; font-size: 22px; }
.dlp-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink);
  background: var(--surface-tint);
  border: 1px solid var(--glass-border-2);
  border-radius: 14px;
}
.dlp-icon svg { width: 30px; height: 30px; }
.dlp-card > p { font-size: 14px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 16px; }
.dlp-note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 4px 0 20px;
  padding: 13px 14px;
  background: var(--orange-50);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
}
.dlp-note span { color: var(--ink-soft); }
.dlp-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.dlp-actions .btn { white-space: normal; line-height: 1.25; text-align: center; padding: 12px 20px; font-size: .95rem; }
.dlp-actions-stack { flex-direction: column; align-items: stretch; }
.dlp-actions-stack .btn { width: 100%; }
.dlp-waiting {
  cursor: not-allowed;
  opacity: .55;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  width: 100%;
}
.dlp-tag {
  position: absolute;
  right: 20px;
  top: 0;
  transform: translateY(-50%);
  background: var(--orange-500);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dlp-fineprint { color: var(--ink-faint); font-size: 11.5px; line-height: 1.55; margin: 14px 0 0; }
.dlp-fineprint a { color: var(--ink-soft); }

/* The pairing explainer: copy on the left, the drawn screens on the right. */
.dlp-qr-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: 64px;
  align-items: center;
}
.dlp-qr-copy h2 { margin: 12px 0 0; max-width: 610px; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
.dlp-qr-copy > .hero-sub { max-width: 610px; font-size: 16px; margin: 14px 0 28px; }
.dlp-job {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--glass-border-2);
}
.dlp-job > span {
  align-self: start;
  justify-self: start;
  background: var(--orange-500);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dlp-job h3 { font-size: 18px; margin: 2px 0 6px; }
.dlp-job p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; margin: 0; }

.dlp-preview {
  position: relative;
  min-height: 510px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 34px 48px 48px 18px;
  background: var(--surface-tint);
  border: 1px solid var(--glass-border-2);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.dlp-preview::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 140, 41, .5);
  right: -90px;
  top: -100px;
}
.dlp-desktop {
  position: relative;
  z-index: 1;
  width: 390px;
  background: #18151d;
  border: 7px solid #29252f;
  border-radius: 18px;
  box-shadow: 0 26px 44px rgba(20, 16, 10, .22);
  overflow: hidden;
}
.dlp-titlebar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 12px; color: #d8d2c9; font-size: 11px; }
.dlp-titlebar i { width: 8px; height: 8px; border-radius: 50%; background: #E25A52; }
.dlp-titlebar i:nth-child(2) { background: #E9BA43; }
.dlp-titlebar i:nth-child(3) { background: #64B95F; }
.dlp-titlebar strong { margin-left: 8px; font-weight: 600; }
.dlp-screen { background: var(--white); text-align: center; padding: 22px 22px 26px; }
.dlp-screen h3 { font-size: 20px; margin: 7px 0 14px; }
.dlp-screen .dlp-qr { width: 210px; height: 210px; margin: 0 auto; background: #fff; border-radius: 9px; overflow: hidden; }
.dlp-screen .dlp-qr svg { display: block; width: 100%; height: 100%; }
.dlp-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--ink-faint);
  margin-top: 10px;
}
.dlp-phone {
  position: absolute;
  z-index: 2;
  right: 25px;
  bottom: 42px;
  width: 174px;
  height: 342px;
  background: #17131d;
  border: 6px solid #302b36;
  border-radius: 34px;
  color: #fff;
  text-align: center;
  padding: 24px 14px 16px;
  box-shadow: 0 24px 42px rgba(20, 16, 10, .3);
}
.dlp-phone-top { position: absolute; top: 7px; left: 58px; width: 48px; height: 13px; border-radius: 10px; background: #060509; }
.dlp-phone > strong { display: block; font-size: 13px; margin: 4px 0 18px; }
.dlp-scanner { position: relative; height: 174px; display: grid; place-items: center; background: #28232f; border-radius: 19px; overflow: hidden; }
.dlp-scanner::before, .dlp-scanner::after, .dlp-scanner span::before, .dlp-scanner span::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--orange-500);
  border-style: solid;
}
.dlp-scanner::before { left: 10px; top: 10px; border-width: 3px 0 0 3px; }
.dlp-scanner::after { right: 10px; top: 10px; border-width: 3px 3px 0 0; }
.dlp-scanner span::before { left: 10px; bottom: 10px; border-width: 0 0 3px 3px; }
.dlp-scanner span::after { right: 10px; bottom: 10px; border-width: 0 3px 3px 0; }
.dlp-scanner .dlp-qr { width: 112px; height: 112px; opacity: .8; border-radius: 5px; background: #fff; overflow: hidden; }
.dlp-scanner .dlp-qr svg { display: block; width: 100%; height: 100%; }
.dlp-scan-button { width: 46px; height: 46px; margin: 15px auto 0; background: var(--orange-500); border: 4px solid rgba(255, 255, 255, .22); border-radius: 50%; }
.dlp-caption { position: absolute; left: 18px; bottom: 14px; color: var(--ink-faint); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; }

.dlp-cta {
  background: var(--surface-tint);
  border-top: 1px solid var(--line);
}
.dlp-cta .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 56px;
  padding-bottom: 56px;
}
.dlp-cta h2 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -0.02em; }
.dlp-cta p { margin: 10px 0 0; color: var(--ink-soft); max-width: 660px; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }

@media (max-width: 980px) {
  .dlp-grid-3 { grid-template-columns: 1fr 1fr; }
  .dlp-grid-3 .dlp-card:last-child { grid-column: 1 / -1; }
  .dlp-qr-grid { grid-template-columns: 1fr; gap: 34px; }
  .dlp-preview { max-width: 650px; width: 100%; margin: 0 auto; }
}
@media (max-width: 720px) {
  .dlp-hero { padding: 58px 0 50px; }
  .dlp-head { grid-template-columns: 1fr; gap: 10px; }
  .dlp-steps, .dlp-grid-2, .dlp-grid-3 { grid-template-columns: 1fr; }
  .dlp-grid-3 .dlp-card:last-child { grid-column: auto; }
  .dlp-preview { min-height: 460px; padding-left: 10px; }
  .dlp-desktop { width: 82%; }
  .dlp-phone { right: 12px; transform: scale(.85); transform-origin: right bottom; }
}
@media (max-width: 520px) {
  .dlp-hero .hero-ctas .btn, .dlp-cta .btn { width: 100%; white-space: normal; line-height: 1.25; text-align: center; }
  .dlp-preview { min-height: 410px; padding: 20px 8px 42px; align-items: flex-start; }
  .dlp-desktop { width: 92%; }
  .dlp-screen { padding: 18px 12px 22px; }
  .dlp-screen .dlp-qr { width: 176px; height: 176px; }
  .dlp-phone { transform: scale(.7); right: 4px; bottom: 30px; }
  .dlp-job { grid-template-columns: 1fr; gap: 8px; }
}

/* Sub-heading inside a panel body (Onboarding: one per setup question). */
.sfx-sub {
  margin: 10px 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Product palette, September 5, 2026: light orange accents and outlines,
   white button surfaces and warm orange text for readable contrast. */
body.site-periomaxer {
  --product-orange: #ff9b45;
  --product-action: #97470e;
  --product-action-hover: #7d3909;
  --ink: #34302d;
  --ink-soft: #625b55;
  --ink-faint: #756b63;
  --muted: #756b63;
  --surface-tint: #fffaf6;
  --glass-border: #eee5dd;
  --glass-border-2: #e6d6c8;
  --line: #eee5dd;
  --shadow-sm: 0 2px 8px rgba(78,48,25,.05);
  --shadow-md: 0 8px 24px rgba(78,48,25,.08);
  --shadow-lg: 0 24px 60px rgba(78,48,25,.12);
}
.site-periomaxer::before { background: var(--white); }
.site-periomaxer::after { display: none; }
.site-periomaxer .hero-title .accent { color: #e57718; white-space: normal; }
.site-periomaxer .hero-title .accent::after { display: none; }
.site-periomaxer .btn-primary,
.site-periomaxer .nav-cta {
  background: #fff !important;
  color: var(--product-action) !important;
  box-shadow: inset 0 0 0 2px var(--product-orange);
}
.site-periomaxer .btn-primary:hover,
.site-periomaxer .nav-cta:hover {
  background: #fff4e9 !important;
  color: var(--product-action-hover) !important;
  box-shadow: inset 0 0 0 2px var(--product-orange);
  transform: none;
}
.site-periomaxer .btn:focus-visible,
.site-periomaxer .nav-cta:focus-visible {
  outline: 3px solid var(--product-action);
  outline-offset: 4px;
}
.site-periomaxer .hero-devices::before { inset: -2% 0; background: #fff0e2; opacity: .6; }
.site-periomaxer .device-desktop { transform: none; box-shadow: var(--shadow-lg); }
.site-periomaxer .rm-price-card {
  background: #fff4ea;
  color: var(--ink);
  border: 1px solid var(--line);
}
.site-periomaxer .rm-price-checks li::before { color: var(--product-action); }
.site-periomaxer .footer {
  background: #fffaf6;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.site-periomaxer .footer-brand,
.site-periomaxer .footer-brand .brand-name,
.site-periomaxer .footer-brand .brand-name .max { color: var(--ink); }
.site-periomaxer .footer-links a,
.site-periomaxer .footer-meta { color: var(--ink-soft); }
.site-periomaxer .footer-links a:hover { color: var(--product-action); }
.site-periomaxer .auth-main { background: #fffaf6; }

/* Small labels share a light orange wash, without black on orange fills. */
.site-periomaxer .brand-name .max { color: var(--product-orange); }
.site-periomaxer .feature-icon,
.site-periomaxer .plan-badge,
.site-periomaxer .dlp-steps article > span,
.site-periomaxer .dlp-tag,
.site-periomaxer .dlp-job > span {
  background: #fff0e2;
  color: var(--product-action);
  border-color: #ffd2ac;
}
.site-periomaxer .plan-amount {
  background: var(--product-action);
  background-clip: text;
  -webkit-background-clip: text;
}

/* Real screenshots inside device frames. Both displays share a top edge. */
.site-periomaxer .rm-hero-stage { max-width: 1120px; }
.site-periomaxer .hero-devices {
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px 32px;
  max-width: 1120px;
  padding: 0;
  margin-inline: auto;
}
.site-periomaxer .device-desktop,
.site-periomaxer .device-phone {
  position: static;
  width: auto;
  min-width: 0;
  margin: 0;
  transform: none;
  text-align: center;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.site-periomaxer .desktop-device-frame {
  padding: 8px 8px 0;
  border: 1px solid #aeb8c5;
  border-radius: 16px;
  background: linear-gradient(135deg, #edf0f4, #d3dae3);
  box-shadow: 0 18px 45px rgba(36,50,71,.13), inset 0 1px #fff;
}
.site-periomaxer .device-screen { display: block; overflow: hidden; background: #fff; }
.site-periomaxer .device-screen:focus-visible { outline: 3px solid var(--product-action); outline-offset: 4px; }
.site-periomaxer .desktop-device-frame .device-screen { border-radius: 8px 8px 2px 2px; }
.site-periomaxer .device-screen img { display: block; width: 100%; height: auto; }
.site-periomaxer .desktop-device-chin { height: 20px; display: grid; place-items: center; }
.site-periomaxer .desktop-device-chin span { width: 4px; height: 4px; border-radius: 50%; background: #8793a3; }
.site-periomaxer .desktop-device-stand {
  width: 30%; height: 30px; margin: 0 auto;
  background: linear-gradient(#aeb9c7, #dce2e9 75%, #a7b2c0);
  clip-path: polygon(35% 0, 65% 0, 73% 80%, 96% 85%, 100% 100%, 0 100%, 4% 85%, 27% 80%);
}
.site-periomaxer .phone-device-frame {
  position: relative;
  padding: 8px;
  border: 1px solid #687482;
  border-radius: 34px;
  background: #26303c;
  box-shadow: 0 18px 45px rgba(36,50,71,.16), inset 0 0 0 2px #475361;
}
.site-periomaxer .phone-device-frame .device-screen { border-radius: 25px; }
.site-periomaxer .phone-device-frame::before,
.site-periomaxer .phone-device-frame::after {
  content: ""; position: absolute; width: 3px; border-radius: 2px; background: #687482;
}
.site-periomaxer .phone-device-frame::before { height: 30px; left: -3px; top: 20%; box-shadow: 0 38px #687482; }
.site-periomaxer .phone-device-frame::after { height: 45px; right: -3px; top: 25%; }
.site-periomaxer .device-desktop figcaption,
.site-periomaxer .device-phone figcaption {
  padding: 12px 0 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.5;
}
.site-periomaxer .hero-devices figcaption strong { display: block; color: var(--ink); font-weight: 700; }
.site-periomaxer .hero-devices figcaption span { display: block; margin-top: 2px; }
.site-periomaxer .device-demo-caption {
  grid-column: 1 / -1; margin: 0; color: var(--muted);
  text-align: center; font-size: .8rem; line-height: 1.5;
}
@media (max-width: 600px) {
  .site-periomaxer .hero-devices { grid-template-columns: 1fr; gap: 28px; }
  .site-periomaxer .device-phone { width: min(240px, calc(100% - 8px)); justify-self: center; }
  .site-periomaxer .desktop-device-frame { padding: 5px 5px 0; border-radius: 12px; }
  .site-periomaxer .desktop-device-chin { height: 14px; }
  .site-periomaxer .desktop-device-stand { height: 24px; }
}

.site-periomaxer .nav .brand-icon { width: 42px; height: 42px; border-radius: 50%; box-shadow: none; }
.site-periomaxer .nav .brand { min-width: 44px; min-height: 44px; }

/* One product accent: the logo orange. Controls use neutral text on white. */
body.site-periomaxer{--product-orange:#ff8c29;--product-action:var(--ink);--product-action-hover:var(--ink);--orange-400:#ff8c29;--orange-500:#ff8c29;--orange-600:#ff8c29}
.site-periomaxer .nav-login,.site-periomaxer .nav-login:hover,.site-periomaxer .nav-login:focus-visible{background:transparent!important;background-image:none!important;color:var(--ink)!important;border:0;box-shadow:none!important;border-radius:0;padding:5px 0!important;font-weight:600!important;text-decoration:underline;text-decoration-color:var(--product-orange);text-decoration-thickness:2px;text-underline-offset:7px}
.site-periomaxer .nav-login::before,.site-periomaxer .nav-login::after{display:none!important}
.site-periomaxer .btn-primary:hover{background:#fff!important;color:var(--ink)!important}
.site-periomaxer .hero-title .accent{color:var(--ink);text-decoration:underline;text-decoration-color:var(--product-orange);text-underline-offset:.12em;text-decoration-thickness:3px}
.site-periomaxer .demo-heading h1 span{color:var(--ink);text-decoration:underline;text-decoration-color:var(--product-orange);text-underline-offset:.12em;text-decoration-thickness:3px}

.site-periomaxer a[href="/privacy"]{text-decoration:none!important;border-bottom:0;background-image:none}

/* Pricing keeps the emphasis on the plan, with simple text actions. */
.site-periomaxer .plan-card.featured {
  border: 3px solid var(--product-orange);
  background: #fff;
  box-shadow: none;
}
.site-periomaxer .plan-card .plan-badge {
  transform: none;
  background: var(--product-orange);
  color: #fff;
  box-shadow: none;
  border: 0;
  border-radius: 999px;
}
.site-periomaxer .pricing-section a.btn,
.site-periomaxer .pricing-section a.btn:hover,
.site-periomaxer a.btn[href^="mailto:"],
.site-periomaxer a.btn[href^="mailto:"]:hover {
  color: var(--ink) !important;
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--product-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/* Compact install hub with familiar system typography. */
.downloads-page { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.downloads-page :is(h1,h2,h3,.eyebrow,.dlp-kicker,.dlp-tag,.dlp-job>span,.dlp-steps article>span,.btn) { font-family: inherit; }
.downloads-page .eyebrow,.downloads-page .dlp-kicker { text-transform: none; letter-spacing: .01em; font-size: 13px; }
.downloads-page .dlp-hero { padding: 38px 0 28px; background: #fff; }
.downloads-page .dlp-hero h1 { font-size: clamp(32px,4vw,44px); margin: 6px 0 10px; font-weight: 650; letter-spacing: -.025em; }
.downloads-page .hero-sub { font-size: 16px; line-height: 1.5; margin-bottom: 12px; }
.downloads-page .dlp-band { padding: 28px 0; }
.downloads-page .dlp-band-tint { background: #fafafa; }
.downloads-page .dlp-head { gap: 24px; margin-bottom: 16px; }
.downloads-page :is(.dlp-head h2,.dlp-qr-copy h2) { margin: 4px 0 0; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.downloads-page .dlp-head>p { font-size: 14px; }
.downloads-page .dlp-steps article { padding: 18px; border-radius: 14px; box-shadow: none; }
.downloads-page .dlp-steps article>span { width: 26px; height: 26px; margin-bottom: 10px; border: 0; background: #eee; color: var(--ink); font-size: 14px; font-weight: 600; }
.downloads-page .dlp-steps h3 { font-size: 17px; font-weight: 650; margin-bottom: 6px; }
.downloads-page .dlp-steps p { line-height: 1.5; }
.downloads-page .dlp-card { padding: 20px; border-radius: 16px; box-shadow: none; }
.downloads-page .dlp-card-featured { border: 1px solid var(--product-orange); box-shadow: none; }
.downloads-page .dlp-card-head { gap: 12px; margin-bottom: 10px; }
.downloads-page .dlp-card-head h3 { font-size: 20px; font-weight: 650; margin-bottom: 2px; }
.downloads-page .dlp-icon { width: 36px; height: 36px; background: transparent; color: var(--ink); border: 0; box-shadow: none; }
.downloads-page .dlp-icon svg { width: 28px; height: 28px; }
.downloads-page .dlp-card>p { line-height: 1.5; margin-bottom: 10px; }
.downloads-page .dlp-tag { position: static; transform: none; align-self: flex-start; margin: 0 0 12px; padding: 3px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.downloads-page .dlp-actions { padding-top: 4px; }
.site-periomaxer .downloads-page a.btn,
.site-periomaxer .downloads-page a.btn:hover { color: var(--ink) !important; background: transparent !important; border: 0; border-radius: 0; box-shadow: none; transform: none; padding: 10px 0; min-height: 44px; width: auto; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--product-orange); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.downloads-page .dlp-actions-stack { align-items: flex-start; }
.downloads-page .dlp-waiting { padding: 0; min-height: 0; background: none; border: 0; box-shadow: none; text-align: left; font-size: 14px; }
.downloads-page .dlp-fineprint { margin-top: 10px; }
.downloads-page .dlp-qr-copy>.hero-sub { margin: 10px 0 16px; }
.downloads-page .dlp-job { margin-top: 14px; gap: 8px; grid-template-columns: 1fr; }
.downloads-page .dlp-job>span { background: none; border: 0; padding: 0; color: var(--ink-soft); font-size: 12px; letter-spacing: 0; text-transform: none; }
.downloads-page .dlp-job h3 { font-size: 17px; font-weight: 600; }
.downloads-page .dlp-preview { box-shadow: none; background: #f6f6f6; }
.downloads-page .dlp-cta .container { padding-top: 24px; padding-bottom: 24px; gap: 16px; }
.downloads-page .dlp-cta h2 { font-size: 23px; font-weight: 650; }
.downloads-page .dlp-cta p { margin-top: 6px; font-size: 14px; }
@media (max-width:720px) {
 .downloads-page .dlp-hero { padding-top: 28px; }
 .downloads-page .dlp-band { padding: 22px 0; }
 .downloads-page .dlp-head { gap: 8px; }
 .downloads-page .dlp-steps { gap: 10px; }
 .downloads-page .dlp-steps article { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; padding: 14px; }
 .downloads-page .dlp-steps article>span { grid-row: 1 / 3; margin: 0; }
 .downloads-page .dlp-steps p { grid-column: 2; }
 .downloads-page .dlp-card { padding: 16px; }
 .downloads-page .dlp-qr-grid { gap: 20px; }
 .downloads-page .hero-ctas { gap: 24px; }
}

.site-periomaxer .downloads-page a.btn.dlp-download,
.site-periomaxer .downloads-page a.btn.dlp-download:hover {
 background: var(--product-orange) !important; color: #fff !important;
 border-radius: 10px; padding: 11px 16px; text-decoration: none;
 font-weight: 650; min-height: 44px;
}
.downloads-page .dlp-preview { min-height: 430px; padding: 30px 100px 55px 20px; background: #f2f3f5; border-radius: 20px; }
.downloads-page .dlp-preview::before { display: none; }
.downloads-page .dlp-desktop { width: 380px; border: 1px solid #d5d8df; border-radius: 8px; background: #fff; box-shadow: 0 12px 32px #16223422; font-family: "Segoe UI", system-ui, sans-serif; }
.downloads-page .dlp-titlebar { height: 38px; padding: 0 10px; gap: 8px; background: #f8f9fb; color: #242424; border-bottom: 1px solid #e5e7eb; }
.downloads-page .dlp-titlebar img { border-radius: 50%; }
.downloads-page .dlp-titlebar strong { margin: 0; font-size: 11px; }
.downloads-page .dlp-window-controls { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.downloads-page .dlp-window-controls svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1; }
.downloads-page .dlp-screen { padding: 18px 16px 20px; background: #fff; }
.downloads-page .dlp-window-location { text-align: left; font-size: 10px; color: #666; margin-bottom: 18px; }
.downloads-page .dlp-screen h3 { font-size: 18px; margin: 0 0 5px; font-weight: 600; }
.downloads-page .dlp-window-help { font-size: 11px; color: #666; margin: 0 0 12px; }
.downloads-page .dlp-screen .dlp-qr { width: 150px; height: 150px; border: 1px solid #eee; border-radius: 6px; padding: 5px; }
.downloads-page .dlp-code { font: 11px "Segoe UI", system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.downloads-page .dlp-code span { color: #8b8b8b; margin-right: 4px; }
.downloads-page .dlp-phone { width: 172px; height: 336px; right: 18px; bottom: 48px; padding: 32px 12px 18px; background: #fff; color: #252525; border: 6px solid #36383c; border-radius: 32px; box-shadow: 0 12px 24px #1622342b; }
.downloads-page .dlp-phone-top { left: 50%; transform: translateX(-50%); top: 7px; width: 50px; height: 13px; }
.downloads-page .dlp-phone-logo { margin: 0 auto 10px; border-radius: 50%; }
.downloads-page .dlp-phone>strong { font-size: 14px; line-height: 1.3; margin: 0 0 14px; }
.downloads-page .dlp-phone-plans { display: flex; gap: 5px; margin-bottom: 10px; font-size: 10px; }
.downloads-page .dlp-phone-plans span { flex: 1; padding: 10px 3px; border: 1px solid #ddd; border-radius: 7px; }
.downloads-page .dlp-phone-subscribe { display: block; padding: 7px; border-radius: 7px; background: #f0f0f0; font-size: 11px; }
.downloads-page .dlp-office-choice { display: block; margin-top: 18px; font-size: 11px; line-height: 1.5; font-weight: 650; text-decoration: underline; text-decoration-color: var(--product-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.downloads-page .dlp-phone-legal { display: block; margin-top: 14px; font-size: 8px; color: #777; }
.downloads-page .dlp-caption { font: 11px/1.4 system-ui, sans-serif; letter-spacing: 0; text-transform: none; left: 16px; right: 16px; bottom: 12px; }
@media(max-width:520px) {
 .downloads-page .dlp-preview { min-height: 595px; padding: 18px 12px 55px; }
 .downloads-page .dlp-desktop { width: 90%; }
 .downloads-page .dlp-window-controls { gap: 12px; }
 .downloads-page .dlp-phone { transform: scale(.72); transform-origin: right bottom; right: 6px; bottom: 42px; }
 .downloads-page .dlp-screen { padding: 12px 10px 16px; }
 .downloads-page .dlp-window-location { margin-bottom: 12px; font-size: 9px; }
 .downloads-page .dlp-screen h3 { font-size: 15px; }
 .downloads-page .dlp-window-help { max-width: 140px; margin: 0 auto 10px; }
 .downloads-page .dlp-screen .dlp-qr { width: 128px; height: 128px; }
}

/* ---- Signup foot (2026-09-12): consent on the left, one orange text
   action on the right. No box around the consent (Max). ---- */
.signup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 8px;
}
/* form.stack label sets a column layout at one class plus one type;
   this selector matches it so the box stays beside its text. */
.signup-agree,
form.stack label.signup-agree {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* The consent box (Max, 2026-09-12): a grey rectangle; checked fills
   it with an orange square, no check mark. */
/* form.stack input gives every input text-box padding (11px 14px), which
   stretched this box to 31x25. Pin it square. */
.signup-agree input[type="checkbox"],
form.stack .signup-agree input[type="checkbox"] {
  flex: 0 0 18px;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  border: 1.5px solid #b9b3ab;
  border-radius: 3px;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.signup-agree input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 1px;
  background: var(--orange-500);
  transform: scale(0);
  transition: transform .12s ease;
}
.signup-agree input[type="checkbox"]:checked { border-color: var(--orange-500); }
.signup-agree input[type="checkbox"]:checked::before { transform: scale(1); }
.signup-agree input[type="checkbox"]:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }
.signup-agree a { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--orange-500); }
.signup-agree a:hover { color: var(--orange-600, #d66d16); }
.btn-text-primary {
  border: 0;
  background: none;
  padding: 8px 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--orange-500);
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}
.btn-text-primary:hover { color: var(--orange-600, #d66d16); text-decoration: none; }
.btn-text-primary:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 4px; border-radius: 4px; }

/* A required field the browser refused: red border, and the label's
   text goes red too. Cleared the moment the field is valid. */
form.stack input.is-invalid,
form.stack select.is-invalid {
  border-color: #d9432b !important;
  box-shadow: 0 0 0 3px rgba(217, 67, 43, 0.16) !important;
}
form.stack label.is-invalid { color: #b3361f; }
.signup-agree.is-invalid { color: #b3361f; }
.signup-agree.is-invalid input { outline: 2px solid #d9432b; outline-offset: 2px; border-radius: 3px; }

/* The server's own word on a refused field, printed under it (signup,
   reset password). Same red as the border; hidden once fixed. */
.field-error {
  display: block;
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #b3361f;
}
.field-error[hidden] { display: none; }

/* Home and /demo: the trial link under the heading, above the devices. */
.demo-page .demo-heading .demo-trial-link { margin-top: 14px; }

/* A form on its way to the server (public/form-busy.js): the button that
   sent it reads "Working…" and a small ring turns beside it. */
.is-busy {
  cursor: progress !important;
  opacity: 0.75;
}
.is-busy::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: smx-busy-spin 0.7s linear infinite;
}
input.is-busy::after { content: none; }
@keyframes smx-busy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .is-busy::after { animation: none; border-right-color: currentColor; opacity: 0.5; }
}

/* ---- Archived agreement pages: the version line above the text ---- */
.legal-version-note {
  margin: 0 0 24px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--orange-50);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ---- Downloads: the app's own office button, with an arrow to it ---- */
.pmx-app-button-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 4px;
  flex-wrap: wrap;
}
.pmx-app-button-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange-500);
  font-size: 0.86rem;
  font-weight: 600;
  font-style: italic;
}
.pmx-app-button-arrow svg { flex: none; transform: scaleX(-1) rotate(10deg); }
.pmx-app-button-arrow span { order: -1; }
.pmx-app-office-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--hairline-orange);
  box-shadow: var(--shadow-sm);
  color: #c2651a;
  font-size: 0.88rem;
  font-weight: 650;
  white-space: nowrap;
}

/* ---- Docs (2026-09-12): a card for the side nav, a readable column ---- */
.docs-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  padding: 0 0 0;
  align-items: stretch;
}
/* One vertical line on the right of the nav, header to footer; the nav
   sits inside it and stays put while the page scrolls (Max, 2026-09-12). */
.docs-side {
  border-right: 1px solid var(--hairline-orange, rgba(255, 140, 41, 0.28));
  padding: 24px 0 48px;
}
.docs-side-card {
  position: sticky;
  top: 92px;
  padding: 0 14px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.docs-body { padding: 28px 0 64px; }
.docs-side-title {
  margin: 0 0 6px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.docs-nav { display: flex; flex-direction: column; gap: 2px; }
.docs-nav .docs-link {
  display: block;
  padding: 8px 14px;
  border-radius: 0;
  border-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.3;
}
.docs-nav .docs-link:hover { background: var(--orange-50); color: var(--ink); }
.docs-nav .docs-link.is-active { background: var(--orange-50); color: var(--ink); font-weight: 650; }
.docs-body { max-width: 70ch; min-width: 0; }
.docs-body h1 { font-size: clamp(1.9rem, 3vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.15; margin: 4px 0 10px; }
.docs-body .lede,
.docs-body h1 + p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; margin: 0 0 26px; }
.docs-body h2 { font-size: 1.25rem; letter-spacing: -0.01em; margin: 38px 0 10px; padding-top: 6px; }
.docs-body h2:first-of-type { margin-top: 24px; }
.docs-body p, .docs-body li { font-size: 0.98rem; line-height: 1.65; color: var(--ink-soft); }
.docs-body p { margin: 0 0 14px; }
.docs-body ul, .docs-body ol { padding-left: 1.35em; margin: 0 0 16px; }
.docs-body li { margin-bottom: 6px; }
.docs-body li::marker { color: var(--orange-500); font-weight: 700; }
.docs-body strong { color: var(--ink); }
.docs-body a:not(.btn) { color: var(--ink); font-weight: 600; border-bottom: 1.5px solid var(--orange-500); }
.docs-body a:not(.btn):hover { color: var(--orange-600, #d66d16); }
.docs-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 0.92rem; }
.docs-table th, .docs-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--portal-hairline, rgba(26, 18, 6, 0.1)); vertical-align: top; color: var(--ink-soft); }
.docs-table th { color: var(--ink); font-weight: 650; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.docs-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
@media (max-width: 820px) {
  .docs-grid { grid-template-columns: 1fr; gap: 20px; }
  .docs-side { border-right: 0; border-bottom: 1px solid var(--hairline-orange, rgba(255, 140, 41, 0.28)); padding: 12px 0; }
  .docs-side-card { position: static; padding: 0; }
  .docs-body { padding-top: 8px; }
  .docs-side-title { display: none; }
  .docs-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .docs-nav .docs-link { padding: 7px 11px; font-size: 0.88rem; }
}

/* Orange text link with an arrow, no underline: the "Contact us" of the
   custom-plan card and any sibling that wants one action word. */
.link-orange {
  color: var(--orange-500);
  font-weight: 700;
  border-bottom: 0;
  white-space: nowrap;
}
.link-orange:hover { color: var(--orange-600, #d66d16); border-bottom: 0; }

/* ---- Sign in (2026-09-12): white ground, text action lower right ---- */
.auth-wrap { background: var(--white); }
.auth-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-top: 6px;
}
.auth-foot .btn-text-primary { margin-left: 0; }
.auth-forgot,
.auth-foot a.auth-forgot {
  color: var(--ink-faint);
  font-size: 0.86rem;
  font-weight: 500;
  border-bottom: 0;
  text-decoration: none;
}
.auth-forgot:hover { color: var(--ink); border-bottom: 0; }

/* ---- Buttons are words (Max, 2026-09-12) ----
   Two styles only, site-wide: the one action is an orange word with an
   arrow; a secondary action is an ink word with an orange underline.
   The outlined pills are gone from forms, cards, and the portal. Plan
   cards keep their underlined CTA (.btn-block), and a copy button reads
   as secondary because an arrow on "Copy" says the wrong thing. */
.site-periomaxer .btn-primary:not(.btn-block):not([data-copy]):not(.nav-cta) {
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0;
  padding: 8px 0 !important;
  color: var(--product-orange) !important;
  font-weight: 700;
  transform: none !important;
  width: auto;
}
.site-periomaxer .btn-primary:not(.btn-block):not([data-copy]):not(.nav-cta)::after {
  content: " \2192";
}
.site-periomaxer .btn-primary:not(.btn-block):not([data-copy]):not(.nav-cta):hover {
  background: none !important;
  color: #d66d16 !important;
  /* No underline on hover (Max, 2026-09-13); only the colour deepens. */
  text-decoration: none;
}
.site-periomaxer .btn-secondary,
.site-periomaxer .btn-glass,
.site-periomaxer .btn-primary[data-copy],
.pmx-portal-body .btn-secondary {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0;
  padding: 8px 0 !important;
  color: var(--ink) !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--product-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none !important;
}
.site-periomaxer .btn-secondary:hover,
.site-periomaxer .btn-glass:hover,
.site-periomaxer .btn-primary[data-copy]:hover,
.pmx-portal-body .btn-secondary:hover {
  background: none !important;
  color: var(--ink) !important;
  text-decoration-color: var(--ink);
}
/* A form's one action sits at the lower right. */
.site-periomaxer form.stack > .btn-primary,
.site-periomaxer form.stack > .btn-text-primary,
.pmx-portal-body form.stack > .btn-primary { align-self: flex-end; margin-top: 4px; }
.site-periomaxer .hero-ctas,
.site-periomaxer .pmx-share-actions { gap: 24px; align-items: center; }

/* ---- Portal density (Max, 2026-09-13): tighter corners, less air ---- */
.pmx-portal-body { --r-md: 8px; --r-lg: 8px; --r-xl: 10px; }
.pmx-portal-body .pmx-card { padding: 16px 18px; margin-bottom: 12px; box-shadow: none; }
.pmx-portal-body .pmx-stat { padding: 12px 16px; box-shadow: none; }
.pmx-portal-body .pmx-stat .n { font-size: 1.5rem; }
.pmx-portal-body .pmx-stat-grid { gap: 10px; margin-bottom: 16px; }
.pmx-portal-body h1 { margin-bottom: 4px; }
.pmx-portal-body h2 { font-size: 1.1rem; margin: 26px 0 6px; }
.pmx-portal-body .pmx-lede,
.pmx-portal-body h1 + p:not(.pmx-lede) { margin-bottom: 14px; font-size: 0.95rem; }
.pmx-portal-body .pmx-note { font-size: 0.86rem; margin: 6px 0 12px; }
.pmx-portal-body input[type="text"],
.pmx-portal-body input[type="email"],
.pmx-portal-body input[type="number"],
.pmx-portal-body input[type="search"],
.pmx-portal-body input[type="password"],
.pmx-portal-body select { border-radius: 6px; }
.pmx-portal-body .alert { border-radius: 6px; padding: 10px 14px; }
.pmx-portal-body table.plain th,
.pmx-portal-body table.plain td { padding: 8px 10px; font-size: 0.92rem; }
.pmx-portal-body .pmx-checklist,
.pmx-main section.pmx-checklist { padding: 14px 18px; box-shadow: none; }
.pmx-portal-body .pmx-checklist li { min-height: 38px; padding: 2px; }
.pmx-portal-body .pmx-pill { border-radius: 4px; }
.pmx-portal-body .pmx-office-link .pmx-share-url code { border-radius: 4px; }

.pmx-count-line { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 12px; }
.pmx-count-line strong { color: var(--ink); font-size: 1.05rem; }

/* ============================================================
   App sales dashboard (2026-09-13)

   /staff/app-sales: App Store and Google Play sales, ported from the
   PerioMaxer Sales Dashboard and drawn by public/staff-app-sales/*.js.
   The same rules as the staff console restyle: white and light orange
   surfaces, ink text, the orange accent, 4 to 8px corners, and no
   gradients, glows or dark cards.

   The --asd-* colours are the chart palette. core.js reads them from
   #asd-root, so a colour is changed here and nowhere else. Each is dark
   enough to read on white. The tooltip layer sits on <body>, outside
   the root, so it carries the same set.
   ============================================================ */

.asd-root,
.asd-tip {
  --asd-monthly: #0d9488;
  --asd-semester: #0891b2;
  --asd-annual: #7c3aed;
  --asd-downloads: #0891b2;
  --asd-updates: #d97706;
  --asd-trials: #0d9488;
  --asd-conversions: #7c3aed;
  --asd-renewals: #0284c7;
  --asd-trial-cancels: #94a3b8;
  --asd-paid-cancels: #e11d48;
  --asd-refunds: #d97706;
  --asd-reactivations: #059669;
  --asd-proceeds: #047857;
  --asd-gross: #0e7490;
  --asd-total: #0e7490;
  --asd-actual: #64748b;
  --asd-projected: #b45309;
  --asd-forecast: #7c3aed;
  --asd-week-ago: #a16207;
  --asd-month-ago: #c2410c;
  --asd-now: #8a8170;
  --asd-band: #059669;
  --asd-grid: #f0e6d6;
  --asd-axis: #8a8170;
  --asd-cursor: #fff1e2;
  --asd-track: #f1ede6;
  --asd-reddit: #ea580c;
  --asd-tiktok: #db2777;
  --asd-instagram: #7c3aed;
  --asd-youtube: #dc2626;
  --asd-x: #0284c7;
  --asd-other: #64748b;
  --asd-good: #15693c;
  --asd-bad: #a32116;
  --asd-warn: #8a5a00;
  --asd-info: #17518f;
  --asd-mute: #8a8170;
  --asd-ink: #1a1206;
  --asd-ink-soft: #5c5142;
  --asd-accent: #ff8c29;
  --asd-surface: #ffffff;
  --asd-surface-tint: #fff7ef;
}

.asd-root { min-width: 0; }
.asd-loading,
.asd-noscript { margin: 18px 0; font-size: 0.9rem; color: var(--ink-faint); }

/* ---- Toolbar: coverage, last sync, and the sync forms ---- */
.asd-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
}
.asd-meta { font-size: 0.82rem; line-height: 1.5; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.asd-meta b { color: var(--ink); font-weight: 600; }
.asd-syncforms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-left: auto; }
.asd-syncform { display: flex; align-items: center; gap: 10px; margin: 0; }
.asd-days { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-soft); }
.asd-days input {
  width: 4.5rem;
  padding: 5px 8px;
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
}
.asd-days input:focus { outline: none; border-color: var(--orange-500); box-shadow: 0 0 0 3px var(--orange-100); }
.asd-gaps { margin-top: 6px; font-size: 0.8rem; }
.asd-gaps summary { cursor: pointer; color: var(--ink-soft); }
.asd-envlist { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; vertical-align: middle; }

/* ---- Sections ---- */
.asd-section { margin: 0 0 28px; min-width: 0; }
.asd-section:empty { display: none; }
.asd-section-head { margin: 0 0 12px; }
.asd-eyebrow {
  margin-bottom: 2px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.asd-section-title { margin: 0; font-size: 1.15rem; letter-spacing: -0.015em; color: var(--ink); }
.asd-section-sub { max-width: 76ch; margin: 4px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }

/* ---- Grids: one column on a phone, more as the window widens ---- */
.asd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 12px; }
@media (min-width: 700px) {
  .asd-cols-2, .asd-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asd-cols-3, .asd-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .asd-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .asd-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .asd-span-2 { grid-column: span 2; }
  .asd-span-3 { grid-column: span 3; }
}

/* ---- Card ---- */
.asd-card {
  min-width: 0;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
}
.asd-card.is-tint { background: var(--orange-50); border-color: var(--orange-100); }
.asd-card-title {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.asd-help { margin: 0 0 10px; font-size: 0.8rem; line-height: 1.5; color: var(--ink-faint); }

/* ---- Stat tiles ---- */
.asd-bigstat,
.asd-metric {
  position: relative;
  min-width: 0;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-left: 3px solid var(--asd-rule, var(--sfx-line));
  border-radius: var(--r-md);
}
.asd-bigstat.is-highlight { background: var(--orange-50); border-color: var(--orange-200); border-left-color: var(--asd-rule, var(--orange-500)); }
.asd-bigstat-l,
.asd-metric-l,
.asd-mini-l {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.asd-bigstat-n,
.asd-metric-n {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.asd-bigstat-badge { margin-top: 8px; }
.asd-bigstat-sub,
.asd-metric-sub { margin-top: 6px; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); }
.asd-metric-net { margin-top: 2px; font-size: 0.75rem; color: var(--ink-faint); }
.asd-mini {
  min-width: 0;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
}
.asd-mini.is-highlight { background: var(--orange-50); border-color: var(--orange-200); }
.asd-mini-n { margin-top: 3px; font-size: 1.1rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.asd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  background: var(--orange-50);
  border: 1px solid var(--orange-200);
  border-radius: var(--r-sm);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
}
.asd-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--asd-pill, var(--orange-500)); }
.asd-delta { margin-left: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Text tones and small helpers ---- */
.asd-tone-good { color: var(--asd-good); }
.asd-tone-bad { color: var(--asd-bad); }
.asd-tone-warn { color: var(--asd-warn); }
.asd-tone-info { color: var(--asd-info); }
.asd-tone-mute,
.asd-dim { color: var(--ink-faint); }
.asd-strong { font-weight: 700; color: var(--ink); }
.asd-num { font-variant-numeric: tabular-nums; }
.asd-mono { font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 0.76rem; }
.asd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.asd-row.is-between { justify-content: space-between; }
.asd-stack > * + * { margin-top: 10px; }
.asd-divider { display: inline-block; width: 1px; height: 16px; background: var(--sfx-line); }
.asd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.asd-controls-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.asd-codechip {
  display: inline-block;
  padding: 1px 6px;
  background: var(--orange-50);
  border: 1px solid var(--orange-100);
  border-radius: var(--r-sm);
  font-family: "SF Mono", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

/* ---- Toggles: a segmented choice, and an on/off chip ---- */
.asd-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
}
.asd-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.asd-seg-btn:hover { background: var(--orange-50); color: var(--ink); }
.asd-seg-btn.is-on { background: var(--orange-100); color: var(--ink); }
.asd-seg-btn:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 1px; }
.asd-seg.is-large .asd-seg-btn { padding: 8px 16px; font-size: 0.9rem; }
.asd-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.asd-chip:hover { background: var(--orange-50); border-color: var(--orange-200); color: var(--ink); }
.asd-chip.is-on { background: var(--orange-50); border-color: var(--asd-chip, var(--orange-500)); color: var(--ink); }
.asd-chip:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 1px; }
.asd-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sfx-line); }
.asd-chip.is-on .asd-chip-dot { background: var(--asd-chip, var(--orange-500)); }

.asd-money { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 16px; }
.asd-money-note { max-width: 84ch; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); }
.asd-tabbar { margin: 4px 0 20px; }
.asd-tabbar-desc { margin: 6px 0 0 2px; font-size: 0.8rem; color: var(--ink-faint); }
.asd-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--orange-50);
  border: 1px solid var(--orange-200);
  border-left: 3px solid var(--orange-500);
  border-radius: var(--r-md);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ---- Slider ---- */
.asd-slider { min-width: 0; }
.asd-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.asd-slider-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.asd-slider-value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--asd-slider, var(--ink));
  font-variant-numeric: tabular-nums;
}
.asd-range { width: 100%; margin: 0; accent-color: var(--asd-slider, var(--orange-500)); cursor: pointer; }
.asd-slider-marks {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 1.3em;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--ink-faint);
}
.asd-slider-mark { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; color: var(--asd-good); }

/* ---- Bars drawn with boxes (funnel, per-plan rates) ---- */
.asd-funnel-stage + .asd-funnel-stage { margin-top: 12px; }
.asd-funnel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.asd-funnel-label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.asd-funnel-sub { margin-left: 8px; font-size: 0.78rem; color: var(--ink-faint); }
.asd-funnel-n { font-size: 1.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.asd-funnel-track,
.asd-bar-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  background: var(--asd-track);
  border-radius: 3px;
}
.asd-bar-track { height: 8px; }
.asd-funnel-fill,
.asd-bar-fill { height: 100%; border-radius: 2px; background: var(--asd-bar, var(--orange-500)); }
.asd-bar-band { position: absolute; top: 0; bottom: 0; background: var(--asd-band); opacity: 0.14; }

/* ---- Charts ---- */
.asd-chart { position: relative; width: 100%; min-width: 0; }
.asd-chart-plot { position: relative; width: 100%; }
.asd-chart-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.asd-chart-text { font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.asd-chart-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  color: var(--ink);
  pointer-events: none;
}
.asd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 0.78rem; color: var(--ink-soft); }
.asd-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.asd-swatch { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; }

/* ---- Tooltip layer (one box on <body>) ---- */
.asd-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  display: none;
  max-width: min(360px, calc(100vw - 24px));
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--orange-200);
  border-radius: 4px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
}
.asd-tip.is-on { display: block; }
.asd-tip-title { margin: 0 0 6px; font-weight: 700; color: var(--ink); }
.asd-tip-rows { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 8px; }
.asd-tip-row { display: contents; }
.asd-tip-label { color: var(--ink-soft); }
.asd-tip-grid3 { display: grid; grid-template-columns: 1fr auto auto; gap: 2px 10px; }
.asd-tip-grid2 { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
.asd-tip-span { grid-column: 1 / -1; font-weight: 600; }
.asd-tip-rule,
.asd-tip-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--sfx-line); }
.asd-tip-foot { color: var(--ink-faint); }
.asd-tip .asd-num { text-align: right; }
.asd-info { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-sm); cursor: help; }
.asd-info-icon { flex: none; color: var(--ink-faint); }
.asd-info.is-open .asd-info-icon,
.asd-info:focus-visible .asd-info-icon { color: var(--orange-500); }
.asd-info:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }

/* ---- Tables: use div.sfx-table-wrap > table.sfx-table; these tighten it ---- */
.asd-scroll { max-height: 420px; overflow: auto; }
table.sfx-table.asd-compact thead th { padding: 7px 10px; }
table.sfx-table.asd-compact tbody td { padding: 6px 10px; }
.asd-card > .sfx-table-wrap { margin: 0; box-shadow: none; }

/* ---- Forms inside a section (marketing events) ---- */
.asd-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 8px;
  margin: 0 0 12px;
}
.asd-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.74rem; font-weight: 600; color: var(--ink-soft); }
.asd-form input[type="text"],
.asd-form input[type="url"],
.asd-form input[type="number"],
.asd-form input[type="date"],
.asd-form select,
.asd-form textarea {
  width: 100%;
  padding: 6px 9px;
  background: var(--white);
  border: 1px solid var(--sfx-line);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
}
.asd-form input:focus,
.asd-form select:focus,
.asd-form textarea:focus { outline: none; border-color: var(--orange-500); box-shadow: 0 0 0 3px var(--orange-100); }
.asd-form .asd-wide { grid-column: 1 / -1; }
.asd-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.asd-postbutton { display: inline; margin: 0; }
.asd-details summary { font-size: 0.8rem; color: var(--ink-soft); cursor: pointer; }

.asd-missing {
  padding: 14px 16px;
  background: var(--white);
  border: 1px dashed var(--sfx-line);
  border-radius: var(--r-md);
  font-size: 0.86rem;
  color: var(--ink-faint);
}
.asd-footer {
  margin: 32px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--sfx-line);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-faint);
}
.asd-footer p { margin: 0 0 4px; }
.asd-footer code { padding: 0 4px; background: var(--orange-50); border-radius: 3px; font-size: 0.74rem; color: var(--ink-soft); }

@media (max-width: 700px) {
  .asd-syncforms { margin-left: 0; }
  .asd-bigstat-n,
  .asd-metric-n { font-size: 1.5rem; }
}