/* Agent Hub pages, version 2 (2026-10-18): ACN v2's look on hub.myanchorgroup.com.
   Michael's call: the hub pages move from the website's look (topo lines, Inter) to Anchor Client
   Navigator's (the moving silk background, Geist, brass on navy), one page at a time, starting with
   /checkout. Pages still on hub.css are untouched by this file.
   GoHighLevel writes its own element styles with id selectors, so overrides on its native elements
   (order form, buttons, text) carry !important. Our own blocks (.hub-*) do not need it.
   Tokens are ACN v2's (ACN-v2/anchor-client-navigator/vault/tokens.css). */

:root {
  --bg: #0A1628;
  --bg-deep: #07111D;
  --surface: #19283E;
  --border: #28374F;
  --border-strong: #3A4A66;
  --hair: rgba(251, 248, 242, .10);
  --text-strong: #FBF8F2;
  --text: #B3B6B9;
  --text-dim: #848A93;
  --accent: #D5B06C;
  --accent-strong: #BE9749;
  --accent-hi: #F2DBA8;
  --accent-text: #E8C589;
  --on-accent: #1A1206;
  --ink: #101725;
  --ink-2: #4B5563;
  --field-line: #D5DAE1;
  --rule: #E7EAEE;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Page: the silk canvas (hub-bg.js) sits fixed behind everything; this gradient shows until it
   draws, and stays if WebGL is unavailable. */
html, body { background: var(--bg-deep) !important; }
body {
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background:
    radial-gradient(ellipse 72% 56% at 50% 40%, rgba(213, 176, 108, .07), transparent 66%),
    linear-gradient(180deg, #08121F, #0A1526) fixed !important;
}
.hub-silk { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; }
#__nuxt { position: relative; z-index: 1; background: transparent !important; min-height: 100vh; }
#__nuxt .preview-container, #__nuxt .hl_page-preview--content { background: transparent !important; }
/* GoHighLevel's page background is its own fixed white layer (.bgCover, inside #__nuxt), which hid the silk on the
   first live publish, 2026-10-18. */
#__nuxt .bgCover { display: none !important; }

/* GoHighLevel's layout: one section, one row, one column. Reset all of it. */
.c-section, .fullSection {
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.c-section > .inner { max-width: 640px !important; margin: 0 auto !important; padding: 0 20px !important; }
.c-row { padding: 0 !important; margin: 0 !important; background: transparent !important; }
.c-row > .inner { padding: 0 !important; margin: 0 !important; }
.c-column { padding: 0 !important; margin: 0 !important; background: transparent !important; }
.c-column > .inner { padding: 0 !important; margin: 0 !important; background: transparent !important; }
.c-divider { display: none !important; }

/* Two-column pages (a .hub-split block inside): the hero on the left, the order form on the right.
   The custom code elements are unwrapped (display: contents) so the header, hero, fine print and
   footer inside them become cells of one grid alongside GoHighLevel's order form. */
.c-section > .inner:has(.hub-split) { max-width: 1200px !important; padding: 0 40px !important; }
.c-column > .inner:has(.hub-split) > .c-custom-code,
.c-column > .inner:has(.hub-split) > .c-custom-code > .custom-code-container { display: contents !important; }
/* Desktop layout (Michael's pick, 2026-10-18, "form under the price, no panel"): the headline, price and form on the
   left, What you get on the right behind a hairline. The other layouts are in v2-preview/layout-options.css. */
@media (min-width: 1024px) {
  .c-column > .inner:has(.hub-split) {
    display: grid !important;
    grid-template-columns: minmax(380px, 460px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    column-gap: clamp(48px, 7vw, 96px);
  }
  .c-column > .inner:has(.hub-split) .hub-split { display: contents; }
  .c-column > .inner:has(.hub-split) .hub-top { grid-column: 1 / -1; grid-row: 1; }
  .c-column > .inner:has(.hub-split) .hub-hero { grid-column: 1; grid-row: 2; padding-bottom: 32px; }
  .c-column > .inner:has(.hub-split) .hub-hero h1 { font-size: 54px; }
  .c-column > .inner:has(.hub-split) > .c-order { grid-column: 1; grid-row: 3; align-self: start; margin-top: 0 !important; }
  .c-column > .inner:has(.hub-split) .hub-fine { grid-column: 1; grid-row: 4; align-self: start; }
  .c-column > .inner:has(.hub-split) .hub-feats {
    grid-column: 2; grid-row: 2 / span 3; align-self: start;
    margin: 84px 0 0; padding: 0 0 0 48px;
    border-top: 0; border-left: 1px solid var(--hair);
  }
  .c-column > .inner:has(.hub-split) .hub-foot { grid-column: 1 / -1; grid-row: 5; }
}

/* Header */
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 0 0; }
.hub-logo { display: block; line-height: 0; }
.hub-logo img { height: 34px; width: auto; display: block; }
/* The Anchor CRM wordmark (Michael, 2026-10-18: option B, with the gold anchor from ACN's sign-in screen,
   ACN-v2/anchor-client-navigator/assets/login-anchor-gold.webp, cropped to public/anchor-gold.webp): replaces the Anchor Financial Group logo on version 2 pages. */
.hub-wordmark { display: inline-flex; align-items: center; gap: 11px; color: var(--text-strong); text-decoration: none; }
.hub-wordmark img { height: 40px; width: auto; display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.hub-wordmark span { font: 600 26px/1 var(--font); letter-spacing: -0.035em; white-space: nowrap; }
.hub-wordmark em {
  font-style: normal;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent) 60%, var(--accent-strong));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hub-login {
  color: var(--text);
  font: 500 14px/1 var(--font);
  text-decoration: none;
  padding: 10px 0;
  transition: color .15s;
}
.hub-login:hover { color: var(--text-strong); }

/* Hero */
.hub-hero { padding: 72px 0 32px; }
.hub-eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font: 600 12px/1.2 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hub-hero h1 {
  margin: 0 0 18px;
  color: var(--text-strong);
  font: 600 clamp(40px, 7vw, 64px)/1.02 var(--font);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hub-hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent) 60%, var(--accent-strong));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hub-lede { margin: 0; max-width: 44ch; color: var(--text); font: 400 18px/1.55 var(--font); text-wrap: pretty; }
/* The price sits with the lede (16px) and well clear of the form (32px), so it reads as part of the offer, not as a
   label floating halfway between (Michael's pick, 2026-10-18). */
.hub-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 16px 0 0; color: var(--text); font: 400 16px/1.2 var(--font); }
.hub-price strong { color: var(--text-strong); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* What you get: a grid of icon tiles, no cards */
.hub-feats { margin: 44px 0 0; padding: 36px 0 0; border-top: 1px solid var(--hair); }
.hub-feats h2, .hub-section h2 {
  margin: 0 0 24px;
  color: var(--text-strong);
  font: 600 20px/1.3 var(--font);
  letter-spacing: -0.015em;
}
.hub-feat-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.hub-feat { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.hub-feat strong { display: block; margin: 1px 0 4px; color: var(--text-strong); font: 600 16px/1.3 var(--font); letter-spacing: -0.01em; }
.hub-feat p { margin: 0; color: var(--text); font: 400 15px/1.5 var(--font); text-wrap: pretty; }
/* A tile with a title and no line under it centers the title on its icon (hosting page, 2026-10-22) */
.hub-feat:not(:has(p)) { align-self: start; align-items: center; }
.hub-feat > div:not(:has(p)) strong { margin: 0; }

/* The icon tile: ACN's rail mark, a lit square with the glyph in brass */
.hub-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(160deg, #2E3D54, var(--surface));
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .14);
  color: var(--accent);
}
.hub-ico svg { width: 22px; height: 22px; fill: currentColor; display: block; }

/* One standout row (Anchor Academy): wider, its own line under the grid */
.hub-feature-wide {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  margin: 32px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--hair);
}
.hub-feature-wide strong { display: block; margin: 1px 0 4px; color: var(--text-strong); font: 600 16px/1.3 var(--font); }
.hub-feature-wide p { margin: 0; max-width: 56ch; color: var(--text); font: 400 15px/1.5 var(--font); text-wrap: pretty; }

/* Steps with icons (upsell pages: how it works, what it costs) */
.hub-section { margin: 40px 0 0; padding: 32px 0 0; border-top: 1px solid var(--hair); }
.hub-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.hub-rows li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.hub-rows p { margin: 0; color: var(--text); font: 400 16px/1.5 var(--font); text-wrap: pretty; }
.hub-rows p strong { color: var(--text-strong); font-weight: 600; }

/* Native text GoHighLevel still renders */
.text-output, .text-output p, .text-output li, .text-output h1, .text-output h2, .text-output h3 {
  font-family: var(--font) !important;
  color: var(--text) !important;
  text-align: left !important;
  text-shadow: none !important;
}

/* Native buttons (the one-click upsell): the first is the yes, the next one is "no thanks" */
.c-button { margin: 12px 0 0 !important; }
.c-button button, .c-button a {
  width: 100% !important;
  min-height: 56px !important;
  padding: 14px 24px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-strong)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 28px -12px rgba(213, 176, 108, .6) !important;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.c-button button:hover, .c-button a:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(213, 176, 108, .18), 0 14px 32px -12px rgba(213, 176, 108, .65) !important;
}
.c-button .main-heading-button { font: 600 16px/1.25 var(--font) !important; letter-spacing: -0.01em; color: var(--on-accent) !important; }
/* Michael, 2026-10-18: the faint second line on the yes button was hard to read. The price line now
   sits just above the button, at the end of the page block (.hub-before-btn), and the button's own sub-text is hidden. */
.c-button .sub-heading-button { display: none !important; }
.c-button + .c-button button, .c-button + .c-button a {
  background: transparent !important;
  box-shadow: none !important;
  min-height: 48px !important;
}
.c-button + .c-button button:hover, .c-button + .c-button a:hover { transform: none; box-shadow: none !important; }
.c-button + .c-button .main-heading-button { color: var(--text) !important; font-weight: 500 !important; font-size: 15px !important; }
.c-button + .c-button button:hover .main-heading-button { color: var(--text-strong) !important; }
.c-button .button-icon-start, .c-button .button-icon-end { display: none !important; }
.hub-before-btn { margin: 40px 0 6px; color: var(--text); font: 400 15px/1.5 var(--font); text-align: center; }
.hub-before-btn strong { color: var(--text-strong); font-weight: 600; }

/* Order form: a white card on the silk, so Stripe's card field (its own light frame) stays readable */
.c-order { margin: 0 !important; }
.c-order, .c-order *:not(i):not([class*="fa-"]) { font-family: var(--font) !important; }
.c-order .container-order-form-two-step,
.c-order .container-order-form-one-step {
  background: #fff !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 40px 80px -36px rgba(0, 0, 0, .75), 0 12px 24px -16px rgba(0, 0, 0, .5) !important;
  color: var(--ink) !important;
}
.c-order .form-title, .c-order .divider-form { display: none !important; }
.c-order .form-body { padding: 0 !important; margin: 0 !important; border: 0 !important; }
.c-order .order-form-footer { display: none !important; }

.c-order .info { display: grid !important; gap: 12px; }
.c-order .form-input, .c-order input[type="text"], .c-order input[type="tel"], .c-order input[type="email"] {
  box-sizing: border-box !important;
  height: 52px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 1px solid var(--field-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  box-shadow: none !important;
  outline: none !important;
  caret-color: var(--accent-strong);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.c-order .form-input::placeholder { color: #6B7280 !important; }
@media (hover: hover) and (pointer: fine) {
  .c-order .form-input:hover:not(:focus) { border-color: #B9C1CC !important; }
}
/* Focus: "liquid gold", ACN's sign-in field. A 1.5px metallic brass edge that slowly turns, no outline ring.
   Michael picked it from five (2026-10-18; the others are in v2-preview/focus-options.css). The edge is a
   conic gradient in the border box under a white padding box, so it works on GoHighLevel's bare inputs. */
@property --hub-sheen { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hub-sheen { to { --hub-sheen: 360deg; } }
.c-order .form-input, .c-order input[type="text"], .c-order input[type="tel"], .c-order input[type="email"] { border-width: 1.5px !important; }
.c-order .form-input:focus {
  border-color: transparent !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--hub-sheen), #7a5a22, #fbe9bd 9%, #a98542 19%, #e7c98b 31%, #6c4f1b 44%, #fff4d8 55%, #946f2e 67%, #efd49a 79%, #7a5a22 90%, #7a5a22) border-box !important;
  box-shadow: 0 8px 22px -14px rgba(122, 90, 34, .6) !important;
  animation: hub-sheen 7s linear infinite;
}
.c-order .form-input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: inset 0 0 0 100px #fff !important; }
.c-order .error, .c-order .form-error, .c-order [class*="error"] { color: #B42318 !important; font-size: 13px !important; }

.c-order .form-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: auto !important;
  min-height: 54px !important;
  margin: 20px 0 0 !important;
  padding: 14px 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-strong)) !important;
  color: var(--on-accent) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(190, 151, 73, .7) !important;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
}
.c-order .form-btn:not(.disabled):not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(213, 176, 108, .22), 0 14px 28px -12px rgba(190, 151, 73, .75) !important; }
/* GoHighLevel disables the button until the fields are filled. Michael, 2026-10-18: it stays full gold anyway
   (a dimmed button read as broken); it only skips the hover lift while disabled. */
.c-order .form-btn.disabled, .c-order .form-btn:disabled { opacity: 1 !important; cursor: default; }
.c-order .form-btn .main-text { font: 600 16px/1.2 var(--font) !important; letter-spacing: -0.01em; color: var(--on-accent) !important; }
.c-order .form-btn .sub-text, .c-order .form-btn br, .c-order .form-btn .cart-icon { display: none !important; }

/* The form: "No card" (Michael's pick, 2026-10-18, after Brass edge read too blue against the silk). The fields sit
   right on the moving background, the way ACN's sign-in screen does it. Dark fields, Liquid gold on focus. The other
   cards (Brass edge and its fills, Glass, Smoked glass) are in v2-preview/card-options.css and in "Anchor ACN Looks" on
   his desktop; he wants Glass and Smoked glass kept for other uses. Both steps checked live with a test contact. */
.c-order .container-order-form-two-step {
  --field-bg: #1E2B40;
  --field-line: transparent;
  --field-line-hover: transparent;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--text) !important;
}
.c-order .container-order-form-two-step .form-input { box-shadow: inset 0 1px 0 rgba(251, 248, 242, .05) !important; }
/* Fields: "Icon tile" (the same lit gradient as the icon squares beside What you get) with a still brass edge at rest;
   the brass starts moving (Liquid gold) on hover and while typing. No glow behind a field in any state. Locked in by
   Michael 2026-10-18 after trying Lit navy live; Midnight and Lit navy are in v2-preview/card-options.css. */
.c-order .container-order-form-two-step .form-input:not(:hover):not(:focus) {
  background:
    linear-gradient(160deg, #26354C, #172336) padding-box,
    linear-gradient(160deg, #F2DBA8, #8a6a2e 45%, #D5B06C 75%, #6c4f1b) border-box !important;
}
.c-order .container-order-form-two-step .form-body { background: transparent !important; }
/* GoHighLevel pads the card step's form 10px, which set the extras, totals and card panel in from the text around them */
.c-order .container-order-form-two-step .form-payment { padding-left: 0 !important; padding-right: 0 !important; }
.c-order .container-order-form-two-step .form-input {
  background: var(--field-bg) !important;
  border-color: var(--field-line) !important;
  color: var(--text-strong) !important;
  caret-color: var(--accent);
}
.c-order .container-order-form-two-step .form-input::placeholder { color: var(--text-dim) !important; }
.c-order .container-order-form-two-step .form-input:hover,
.c-order .container-order-form-two-step .form-input:focus {
  border-color: transparent !important;
  background:
    linear-gradient(var(--field-bg), var(--field-bg)) padding-box,
    conic-gradient(from var(--hub-sheen), #7a5a22, #fbe9bd 9%, #a98542 19%, #e7c98b 31%, #6c4f1b 44%, #fff4d8 55%, #946f2e 67%, #efd49a 79%, #7a5a22 90%, #7a5a22) border-box !important;
  box-shadow: inset 0 1px 0 rgba(251, 248, 242, .05) !important;
  animation: hub-sheen 7s linear infinite;
}
.c-order .container-order-form-two-step .form-input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-strong);
  box-shadow: inset 0 0 0 100px var(--field-bg) !important;
}
.c-order .container-order-form-two-step .error,
.c-order .container-order-form-two-step [class*="error"] { color: #F87171 !important; }

/* Step two: what you're buying */
.c-order .forward-shopping-details { display: inline-block; margin: 0 0 18px !important; color: var(--ink-2) !important; font-size: 14px !important; cursor: pointer; }
.c-order .forward-shopping-details:hover { color: var(--ink) !important; }
.c-order .product-title .item {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ink-2) !important;
}
.c-order .divider-product { background: var(--rule) !important; border-color: var(--rule) !important; }
.c-order .product-description { color: var(--ink) !important; font-size: 15px !important; }
.c-order .product-name, .c-order .product-name strong { color: var(--ink) !important; font-weight: 600 !important; }
.c-order .item-description, .c-order .item-description strong,
.c-order .product-description .description, .c-order .product-description p {
  color: var(--ink-2) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.c-order .item-price { color: var(--ink) !important; font-weight: 600 !important; }
.c-order input[type="checkbox"], .c-order input[type="radio"] { accent-color: var(--accent-strong); width: 18px !important; height: 18px !important; }

/* Order bumps: plain cards, no flashing arrow */
.c-order .order-bump-container {
  background: #F7F7F5 !important;
  border: 1px solid var(--rule) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin: 10px 0 0 !important;
}
.c-order .order-bump-container .main-section { background: transparent !important; border: 0 !important; padding: 0 !important; }
.c-order .product-bump-divider { border: 0 !important; margin: 0 !important; padding: 0 !important; }
.c-order .bump--flashing-arrow { display: none !important; }
.c-order .bump-header { display: flex !important; align-items: center; gap: 10px; }
.c-order .bump-headline { color: var(--ink) !important; font-size: 15px !important; font-weight: 600 !important; animation: none !important; }
.c-order .order-bump-container .main-section + div { padding-left: 28px; color: var(--ink-2) !important; font-size: 14px !important; line-height: 1.5 !important; }
.c-order .order-bump-container .main-section + div span { color: var(--ink-2) !important; }
.c-order .oto-headline { display: block !important; margin: 6px 0 4px !important; color: var(--ink) !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; }

/* Totals and payment */
.c-order .coupon-container { display: none !important; }
.c-order .separator {
  margin: 24px 0 8px !important;
  color: var(--ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.c-order .separator::before, .c-order .separator::after { border-color: var(--rule) !important; background: var(--rule) !important; }
.c-order .order-total .item, .c-order .order-total strong, .c-order .order-total .item-price { color: var(--ink) !important; font-size: 17px !important; font-weight: 700 !important; }
.c-order .payment-content { margin-top: 20px !important; }

/* Card step in the dark card (checked live 2026-10-18 with a test contact). Stripe's Payment Element draws its own
   light fields with dark labels inside its frame, so that one block sits on a light panel of its own. */
.c-order .container-order-form-two-step .forward-shopping-details { color: var(--text) !important; }
.c-order .container-order-form-two-step .forward-shopping-details:hover { color: var(--text-strong) !important; }
.c-order .container-order-form-two-step .product-title .item { color: var(--text-dim) !important; }
.c-order .container-order-form-two-step .divider-product { background: var(--hair) !important; border-color: var(--hair) !important; }
.c-order .container-order-form-two-step .product-description,
.c-order .container-order-form-two-step .product-name,
.c-order .container-order-form-two-step .product-name strong,
.c-order .container-order-form-two-step .product-description .item { color: var(--text-strong) !important; }
.c-order .container-order-form-two-step .item-description,
.c-order .container-order-form-two-step .item-description strong,
.c-order .container-order-form-two-step .product-description .description,
.c-order .container-order-form-two-step .product-description p { color: var(--text) !important; }
.c-order .container-order-form-two-step .item-price { color: var(--text-strong) !important; }
.c-order .container-order-form-two-step .order-bump-container {
  background: rgba(251, 248, 242, .035) !important;
  border: 1px solid var(--field-line) !important;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.c-order .container-order-form-two-step .order-bump-container:hover { border-color: var(--field-line-hover) !important; }
.c-order .container-order-form-two-step .order-bump-container:has(input:checked) { border-color: rgba(213, 176, 108, .6) !important; background: rgba(213, 176, 108, .06) !important; }
.c-order .container-order-form-two-step .bump-headline { color: var(--text-strong) !important; }
.c-order .container-order-form-two-step .oto-headline { color: var(--accent-text) !important; }
.c-order .container-order-form-two-step .order-bump-container .main-section + div,
.c-order .container-order-form-two-step .order-bump-container .main-section + div span { color: var(--text) !important; }
.c-order .container-order-form-two-step input[type="checkbox"] { accent-color: var(--accent); }
.c-order .container-order-form-two-step .separator { color: var(--text-dim) !important; }
.c-order .container-order-form-two-step .separator::before,
.c-order .container-order-form-two-step .separator::after { border-color: var(--hair) !important; background: var(--hair) !important; }
.c-order .container-order-form-two-step .order-total .item,
.c-order .container-order-form-two-step .order-total strong,
.c-order .container-order-form-two-step .order-total .item-price { color: var(--text-strong) !important; }
.c-order .container-order-form-two-step .v-moon { background-color: var(--accent) !important; }
.c-order .container-order-form-two-step .payment-form {
  padding: 16px;
  border-radius: 14px;
  background: #FBFAF7;
  box-shadow: inset 0 1px 0 #fff, 0 12px 28px -18px rgba(0, 0, 0, .7);
}

/* Fine print and footer */
.hub-fine { margin: 18px 0 0; color: var(--text-dim); font: 400 13px/1.6 var(--font); text-wrap: pretty; }
.hub-fine a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(179, 182, 185, .45); text-underline-offset: 3px; }
.hub-fine a:hover { color: var(--text-strong); text-decoration-color: var(--accent); }
.hub-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 88px 0 0;
  padding: 28px 0 44px;
  border-top: 1px solid var(--hair);
  color: var(--text-dim);
  font: 400 13px/1.4 var(--font);
}
.hub-foot img { width: 18px; height: auto; display: block; }
.hub-foot nav { display: flex; gap: 20px; }
.hub-foot a { color: var(--text-dim); text-decoration: none; transition: color .15s; }
.hub-foot a:hover { color: var(--text-strong); }
.hub-foot p { margin: 0 0 0 auto; }

:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 3px; }
.c-order .form-input:focus-visible { outline: none !important; }

@media (max-width: 1023px) {
  .c-section > .inner:has(.hub-split) { max-width: 640px !important; padding: 0 20px !important; }
  .hub-hero { padding-bottom: 8px; }
  /* stacked: the form comes right after the price, the features after the form */
  .c-column > .inner:has(.hub-split) { display: flex !important; flex-direction: column; }
  .c-column > .inner:has(.hub-split) .hub-top { order: 1; }
  .c-column > .inner:has(.hub-split) .hub-split { display: contents; }
  .c-column > .inner:has(.hub-split) .hub-hero { order: 2; padding-bottom: 0; }
  .c-column > .inner:has(.hub-split) > .c-order { order: 3; margin-top: 32px !important; }
  .c-column > .inner:has(.hub-split) .hub-fine { order: 4; }
  .c-column > .inner:has(.hub-split) .hub-feats { order: 5; }
  .c-column > .inner:has(.hub-split) .hub-foot { order: 6; }
}
@media (max-width: 560px) {
  .hub-top { padding-top: 20px; }
  .hub-logo img { height: 28px; }
  .hub-wordmark img { height: 30px; }
  .hub-wordmark span { font-size: 22px; }
  .hub-hero { padding-top: 44px; }
  .hub-lede { font-size: 17px; }
  .hub-feat-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* the one-step forms keep their card; the checkout's two-step form has none, so it stays flush with the text */
  .c-order .container-order-form-one-step { padding: 22px !important; border-radius: 16px !important; }
  .c-section > .inner, .c-section > .inner:has(.hub-split) { padding: 0 16px !important; }
  .hub-foot p { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .c-order .form-input:focus { animation: none; }
}

/* ===== The last five pages (2026-10-18): /plans, /call, /terms, /privacy, /cancel-plan.
   Every rule here is scoped to classes only these pages use, so the pages already live on version 2 do not change. */

/* Wide pages (plans, call): the same 1200 width as the two-column pages */
.c-section > .inner:has(.hub-plans), .c-section > .inner:has(.hub-call) { max-width: 1200px !important; padding: 0 40px !important; }

/* Plans: three tiers side by side, no plan pushed over another (Michael, 2026-10-18: "let them choose"). The cards are
   Smoked glass (the silk moves behind them, softly blurred), each with the brass edge and the same gold button. */
.hub-hero-center { text-align: center; padding-bottom: 48px; }
.hub-hero-center .hub-lede { margin: 0 auto; }
.hub-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.hub-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  border: 1px solid transparent;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(28, 34, 44, .55), rgba(10, 14, 20, .62));
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
          backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -36px rgba(0, 0, 0, .8), 0 0 60px -30px rgba(213, 176, 108, .3);
}
/* the brass rim is drawn on a masked layer, so the see-through fill does not show the gradient behind it */
.hub-tier::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(242, 219, 168, .75), rgba(190, 151, 73, .18) 40%, rgba(190, 151, 73, .08) 70%, rgba(242, 219, 168, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.hub-tier h2 { margin: 0 0 8px; color: var(--text-strong); font: 600 24px/1.2 var(--font); letter-spacing: -0.02em; }
/* two lines held for every card, so the three prices line up */
.hub-tier-lede { margin: 0; min-height: 3em; color: var(--text); font: 400 15px/1.5 var(--font); text-wrap: pretty; }
.hub-tier .hub-price { margin: 24px 0 0; }
.hub-tier .hub-price strong { font-size: 40px; }
.hub-tier-note { margin: 6px 0 0; color: var(--text-dim); font: 400 14px/1.4 var(--font); }
.hub-tier-body { margin: 28px 0 32px; padding: 28px 0 0; border-top: 1px solid var(--hair); }
.hub-tier-plus { margin: 0 0 20px; color: var(--text-strong); font: 600 15px/1.4 var(--font); }
.hub-tier-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.hub-tier-feats li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.hub-tier-feats .hub-ico { width: 36px; height: 36px; border-radius: 10px; }
.hub-tier-feats .hub-ico svg { width: 18px; height: 18px; }
.hub-tier-feats strong { display: block; margin: 0 0 3px; color: var(--text-strong); font: 600 15px/1.35 var(--font); letter-spacing: -0.01em; }
.hub-tier-feats p { margin: 0; color: var(--text); font: 400 14px/1.5 var(--font); text-wrap: pretty; }
.hub-tier-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: auto 0 0;
  padding: 0 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent-strong));
  color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 24px -12px rgba(190, 151, 73, .7);
  font: 600 16px/1 var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* the whole card is the link */
.hub-tier-cta::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.hub-tier:hover .hub-tier-cta { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(213, 176, 108, .22), 0 14px 28px -12px rgba(190, 151, 73, .75); }
.hub-fine-center { max-width: 60ch; margin: 32px auto 0; text-align: center; }

/* Call: Michael and what happens on the left, the calendar card on the right; stacked below 1080px. */
.hub-call-grid { display: grid; gap: 32px; padding: 40px 0 0; }
.hub-call-hero { padding: 0; }
.hub-call-hero h1 { font-size: clamp(36px, 8vw, 52px); }
.hub-call-host { display: flex; align-items: center; gap: 14px; margin: 28px 0 0; }
/* the photo (public/michael-v2.webp, from Signature Studio, 2026-10-18) carries its own gold ring */
.hub-call-host img { width: 64px; height: 64px; border-radius: 50%; display: block; }
.hub-call-host p { margin: 0; display: grid; gap: 2px; color: var(--text); font: 400 15px/1.4 var(--font); }
.hub-call-host strong { color: var(--text-strong); font-weight: 600; font-size: 17px; }
.hub-call-next { margin: 32px 0 0; padding: 28px 0 0; border-top: 1px solid var(--hair); }
.hub-call-next h2 { margin: 0 0 20px; color: var(--text-strong); font: 600 18px/1.3 var(--font); letter-spacing: -0.015em; }
.hub-call-next .hub-rows { gap: 16px; }
.hub-call-next .hub-rows p { font-size: 15px; }
/* The card is Smoked glass with the brass edge, like the plans cards; the calendar inside goes see-through and dark
   because the iframe asks for look=v2 (calendar-call-v2.css, Michael 2026-10-18). */
.hub-call-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(28, 34, 44, .55), rgba(10, 14, 20, .62));
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
          backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -36px rgba(0, 0, 0, .8), 0 0 60px -30px rgba(213, 176, 108, .3);
}
.hub-call-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(242, 219, 168, .75), rgba(190, 151, 73, .18) 40%, rgba(190, 151, 73, .08) 70%, rgba(242, 219, 168, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.hub-call-frame { display: block; width: 100%; min-height: 560px; border: 0; background: transparent; color-scheme: dark; }
.hub-js .hub-call-card:not(.is-ready) .hub-call-frame {
  position: absolute !important; inset: 0 auto auto 0; visibility: hidden; opacity: 0; pointer-events: none;
}
.hub-call-ph { display: none; padding: 28px 24px 32px; min-height: 560px; }
.hub-js .hub-call-card:not(.is-ready) .hub-call-ph { display: block; }
.hub-call-ph-line { margin: 0 0 24px; color: var(--text); font: 500 16px/1.5 var(--font); }
.hub-call-ph-line a { color: var(--text-strong); font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.hub-call-ph i, .hub-call-ph b, .hub-call-ph u { display: block; background: rgba(251, 248, 242, .06); border-radius: 8px; }
.hub-call-ph i { height: 12px; margin: 0 0 10px; }
.hub-call-ph i.w30 { width: 30%; } .hub-call-ph i.w40 { width: 40%; } .hub-call-ph i.w60 { width: 60%; }
.hub-call-ph b { height: 48px; margin: 0 0 22px; border-radius: 12px; }
.hub-call-ph b.tall { height: 120px; }
.hub-call-ph u { height: 54px; width: 100%; margin-top: 8px; border-radius: 999px; background: rgba(213, 176, 108, .22); }
.is-slow .hub-call-ph i, .is-slow .hub-call-ph b, .is-slow .hub-call-ph u { display: none; }
.hub-call-after { margin: 12px 0 0; text-align: center; font: 400 14px/1.5 var(--font); }
.hub-call-after a { display: inline-block; padding: 12px 4px; color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(132, 138, 147, .5); }
.hub-call-after a:hover { color: var(--text-strong); text-decoration-color: var(--accent); }
@media (min-width: 1080px) {
  .hub-call-grid { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 64px; }
  .hub-call-side { position: sticky; top: 24px; padding-top: 8px; }
  .hub-call-hero h1 { font-size: 48px; }
}
/* Stacked (phones, tablets): the calendar comes straight after Michael's name, before "After you book". */
@media (max-width: 1079px) {
  .hub-call-side { display: contents; }
  .hub-call-hero { order: 1; }
  .hub-call-host { order: 2; margin: 0; }
  .hub-call-cardcol { order: 3; }
  .hub-call-next { order: 4; margin: 0; }
}

/* Terms and privacy: long reading text in the 640 column */
.hub-hero:has(+ .hub-legal) h1 { font-size: clamp(36px, 7vw, 52px); }
.hub-legal { color: var(--text); font: 400 16px/1.65 var(--font); }
.hub-legal h2 { margin: 48px 0 12px; color: var(--text-strong); font: 600 20px/1.3 var(--font); letter-spacing: -0.015em; }
.hub-legal p { margin: 0 0 14px; text-wrap: pretty; }
.hub-legal strong { color: var(--text-strong); font-weight: 600; }
.hub-legal a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(213, 176, 108, .45); text-underline-offset: 3px; overflow-wrap: anywhere; }
.hub-legal a:hover { color: var(--accent-hi); text-decoration-color: var(--accent); }
.hub-legal ul { margin: 0 0 14px; padding: 0 0 0 20px; }
.hub-legal li { margin: 0 0 8px; }
.hub-legal li::marker { color: var(--accent); }
.hub-legal table { width: 100%; margin: 4px 0 18px; border-collapse: collapse; font-size: 15px; }
.hub-legal th, .hub-legal td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.hub-legal th { color: var(--text-dim); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.hub-legal td:first-child { color: var(--text-strong); }

/* Help pages (/help/password, /help/id-check, /help/calendar, 2026-10-27): numbered steps, one action each, with the
   screen below. The pictures are light screenshots, so they sit on their own with a hairline and no card. Built from
   gohighlevel/emails/agent-steps/src/build.py, which also writes the short emails that link here. */
.hub-hero:has(+ .hub-steps) h1 { font-size: clamp(36px, 7vw, 52px); }
.hub-steps { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: step; }
.hub-steps li { position: relative; margin: 0 0 40px; padding: 0 0 0 32px; counter-increment: step; }
.hub-steps li::before {
  content: counter(step) ".";
  position: absolute; left: 0; top: 0;
  color: var(--accent-text);
  font: 600 17px/1.55 var(--font); font-variant-numeric: tabular-nums;
}
.hub-steps p { margin: 0; color: var(--text-strong); font: 400 17px/1.55 var(--font); text-wrap: pretty; }
.hub-steps img { display: block; max-width: 100%; height: auto; margin: 16px 0 0; border-radius: 10px; border: 1px solid var(--hair); }
.hub-steps a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(213, 176, 108, .45); text-underline-offset: 3px; }
.hub-help-foot { margin: 8px 0 28px; padding: 24px 0 0; border-top: 1px solid var(--hair); color: var(--text); font: 400 16px/1.6 var(--font); }
.hub-help-foot a { color: var(--accent-text); text-decoration: underline; text-decoration-color: rgba(213, 176, 108, .45); text-underline-offset: 3px; }

/* Cancel: GoHighLevel's form in its iframe, on a white card (the form draws itself light) */
.hub-form-card { margin: 8px 0 28px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .8); }
.hub-form-card iframe { display: block; width: 100%; height: 460px; border: 0; border-radius: 10px; }

@media (max-width: 1023px) {
  .c-section > .inner:has(.hub-plans), .c-section > .inner:has(.hub-call) { padding: 0 20px !important; }
}
@media (max-width: 960px) {
  .hub-tiers { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .hub-tier-lede { min-height: 0; }
}
@media (max-width: 560px) {
  .c-section > .inner:has(.hub-plans), .c-section > .inner:has(.hub-call) { padding: 0 16px !important; }
  .hub-hero-center { padding-bottom: 32px; }
  .hub-tier { padding: 28px 22px 24px; }
  .hub-call-grid { padding-top: 28px; gap: 24px; }
  .hub-call-card { margin: 0 -8px; border-radius: 16px; }
  .hub-legal table { font-size: 14px; }
}

/* "Edit your details" on the card step (Michael, 2026-10-19): GoHighLevel draws its back arrow as a black SVG and turns
   the link blue on hover, both lost on the dark page. The arrow takes the text color; hover and focus go gold. */
#__nuxt .forward-shopping-details { color: var(--text) !important; cursor: pointer; transition: color .2s var(--ease); }
#__nuxt .forward-shopping-details * { color: inherit !important; }
#__nuxt .forward-shopping-details svg, #__nuxt .forward-shopping-details svg polygon,
#__nuxt .forward-shopping-details svg path { fill: currentColor !important; }
#__nuxt .forward-shopping-details:hover, #__nuxt .forward-shopping-details:focus-visible { color: var(--accent-text) !important; }

/* Plans page, approved 2026-10-19 (Michael's plan review, decisions 3 and 4): the cards build up as the plans go up.
   Starter is quiet glass with no brass rim and an outlined button; Managed keeps the brass rim and gold button; Managed
   Plus is as dark as the others, its rim turns slowly (the fields' Liquid gold) and its name shimmers. Still under
   reduced motion. */
.hub-tier--quiet::before { display: none; }
.hub-tier--quiet { border: 1px solid var(--border); background: linear-gradient(180deg, rgba(24, 30, 40, .45), rgba(10, 14, 20, .55)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 40px 80px -36px rgba(0, 0, 0, .8); }
.hub-tier--quiet .hub-tier-cta { background: transparent; color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--border-strong); }
.hub-tier--quiet:hover .hub-tier-cta { box-shadow: inset 0 0 0 1px var(--accent); transform: none; }
.hub-tier--quiet .hub-price strong { color: var(--text-strong); }
.hub-tier--crown::before {
  padding: 1.5px;
  background: conic-gradient(from var(--hub-sheen), #7a5a22, #fbe9bd 9%, #a98542 19%, #e7c98b 31%, #6c4f1b 44%, #fff4d8 55%, #946f2e 67%, #efd49a 79%, #7a5a22 90%, #7a5a22);
  animation: hub-sheen 8s linear infinite;
}
.hub-shine {
  background: linear-gradient(100deg, var(--accent-strong) 0%, var(--accent) 22%, #fff4d8 34%, var(--accent-hi) 42%, var(--accent) 60%, var(--accent-strong) 78%, var(--accent-strong) 100%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hub-shine 6s linear infinite;
}
@keyframes hub-shine { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .hub-tier--crown::before, .hub-shine { animation: none; } }
/* "Why not buy HighLevel yourself?" under Starter's price: an aside, dimmer and smaller than the plan's own lines;
   its last line, what Starter does instead, in gold (Michael, 2026-10-26) */
.hub-compare { margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hair); display: grid; gap: 6px; }
.hub-compare p { margin: 0; color: var(--text-dim); font: 400 13.5px/1.5 var(--font); }
.hub-compare strong { color: var(--text); font-weight: 600; }
.hub-compare .hub-compare-win { color: var(--accent-text); font-weight: 500; }

/* Texting fees under a plan's price (decision 8, 2026-10-19: "It's not just $50"). Opens on tap. */
.hub-fees { margin: 10px 0 0; max-width: 46ch; color: var(--text); font: 400 14px/1.5 var(--font); }
.hub-fees summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; color: var(--accent-text); font-weight: 500; }
.hub-fees summary::-webkit-details-marker { display: none; }
.hub-fees summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.hub-fees[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.hub-fees summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.hub-fees ul { margin: 12px 0 0; padding: 14px 16px; list-style: none; display: grid; gap: 8px; border: 1px solid var(--hair); border-radius: 12px; background: rgba(10, 14, 20, .35); }
.hub-fees li strong { color: var(--text-strong); font-weight: 600; }

/* Small labels, option 1 "in the words" (Michael's pick, 2026-10-19): no spaced capitals over titles anywhere. The
   eyebrows and tier tags are gone from the blocks; who and when are said in the words, the when in gold. The card
   step's two GoHighLevel headings drop their capitals the same way. */
.hub-tier-lede em { font-style: normal; color: var(--accent-text); }
.hub-hero-center h1 { margin-bottom: 14px; }
.c-order .product-title .item, .c-order .separator {
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}

/* /my-plan (2026-10-22): agents already on Anchor CRM move up a plan in their own account, or add one extra.
   Opened from the CRM's menu link, which passes ?loc={{location.id}} so Upgrade lands on that account's Billing. */
.hub-myplan-h { margin: 56px 0 20px; color: var(--text-strong); font: 600 26px/1.2 var(--font); letter-spacing: -0.02em; text-align: center; }
.hub-myplan .hub-hero-center + .hub-myplan-h { margin-top: 0; }
.hub-tiers--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin: 0 auto; }
/* one upgrade card since the two-plan lineup (2026-10-27) */
.hub-tiers--one { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 auto; }
.hub-myplan-how { max-width: 880px; margin: 28px auto 0; padding: 24px 0 0; border-top: 1px solid var(--hair); }
.hub-myplan-how h3 { margin: 0 0 16px; color: var(--text-strong); font: 600 16px/1.3 var(--font); }
.hub-myplan-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hub-myplan-how li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.hub-myplan-how span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(160deg, #2E3D54, var(--surface)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); color: var(--accent); font: 600 15px/1 var(--font); }
.hub-myplan-how p { margin: 5px 0 0; color: var(--text); font: 400 14px/1.5 var(--font); text-wrap: pretty; }
.hub-myplan-sub { margin: -8px 0 24px; color: var(--text); font: 400 15px/1.5 var(--font); text-align: center; }
.hub-myplan-extras { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hub-myplan-extras a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 22px 20px 52px; border-radius: 16px; border: 1px solid var(--hair); background: linear-gradient(180deg, rgba(28, 34, 44, .45), rgba(10, 14, 20, .5)); text-decoration: none; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.hub-myplan-extras a:hover, .hub-myplan-extras a:focus-visible { border-color: rgba(213, 176, 108, .55); transform: translateY(-1px); }
.hub-myplan-extras strong { color: var(--text-strong); font: 600 16px/1.3 var(--font); letter-spacing: -0.01em; }
.hub-myplan-extras em { margin: 6px 0 0; color: var(--accent-text); font: 500 14px/1.4 var(--font); font-style: normal; }
.hub-myplan-extras p { margin: 10px 0 0; color: var(--text); font: 400 14px/1.5 var(--font); text-wrap: pretty; }
.hub-myplan-go { position: absolute; left: 20px; bottom: 18px; color: var(--accent); transition: transform .2s var(--ease); }
.hub-myplan-go svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.hub-myplan-extras a:hover .hub-myplan-go { transform: translateX(3px); }
@media (max-width: 1023px) { .hub-myplan-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .hub-tiers--two { grid-template-columns: minmax(0, 560px); } .hub-myplan-how ol { grid-template-columns: 1fr; gap: 14px; } }
@media (max-width: 560px) { .hub-myplan-extras { grid-template-columns: 1fr; } .hub-myplan-h { font-size: 22px; margin-top: 44px; } }

/* /extras/hosting (2026-10-22): a framed screenshot of a site we built and host (Danny's), above the four tiles */
.hub-site h2 { margin-bottom: 20px; }
.hub-site-shot { margin: 0 0 28px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.hub-site-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #1E2B40; }
.hub-site-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.hub-site-bar em { margin-left: 10px; color: var(--text-dim); font: 400 12.5px/1 var(--font); font-style: normal; }
.hub-site-shot img { display: block; width: 100%; height: auto; }
/* after Upgrade is tapped, the steps light up and stay on this page while Billing is open in the other tab */
.hub-myplan-how-note { display: none; margin: -6px 0 22px !important; color: var(--accent-text); font: 500 15px/1.5 var(--font); }
.hub-myplan-how { transition: border-color .3s var(--ease), background .3s var(--ease), padding .3s var(--ease); }
.hub-myplan-how.is-live { padding: 24px 26px 26px; border: 1px solid rgba(213, 176, 108, .55); border-radius: 16px; background: linear-gradient(160deg, rgba(46, 61, 84, .5), rgba(25, 40, 62, .3)); }
.hub-myplan-how.is-live h3 { font-size: 20px; }
.hub-myplan-how.is-live .hub-myplan-how-note { display: block; }
.hub-myplan-how.is-live p { color: var(--text-strong); }
.hub-myplan-how.is-live .hub-myplan-how-note { color: var(--accent-text); }

/* ---- Plans page, two plans (2026-10-27, from proposal-2026-10-27/proposal.css) ---- */
/* Plans page, two plans (mockup 2026-10-27, for Michael's 2026-10-26 lineup). Goes into hub-v2.css on his go.
   Scenes follow Resend's product panels (refero style b2f7a9d7): each scene is one contained panel with a hairline rim
   and no drop shadow, text on one side and the panel on the other, alternating, one moment per screen. Colour inside a
   panel only where the real thing has it (a gold time slot, a green delivered tick); the page around stays navy and brass. */

/* two cards, centred, a little wider each than the three-card row */
.hub-plans--two .hub-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; gap: 24px; }
/* Starter is the plain one (Michael, 2026-10-27: side by side it read as the no-brainer, because its tiles looked as rich
   as Managed's). A short list with no icons and no descriptions, in the body colour, so Managed's tiles are the only
   rich list on the row. */
.hub-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hub-plain li { position: relative; padding-left: 18px; color: var(--text); font: 400 15px/1.45 var(--font); text-wrap: pretty; }
.hub-plain li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); }
.hub-tiers { align-items: start; }
.hub-tier--quiet .hub-tier-body--plain { margin-bottom: 28px; }
.hub-tier-more { position: relative; z-index: 1; display: inline-block; margin: 22px 0 0; color: var(--accent-text); font: 500 14px/1.4 var(--font); text-decoration: underline; text-decoration-color: rgba(213, 176, 108, .4); text-underline-offset: 3px; }
.hub-tier-more:hover { text-decoration-color: var(--accent); }

/* What's in Managed: hairline rows, the price it sells for alone struck through on the right */
.hub-break, .hub-scenes { max-width: 1000px; margin: 120px auto 0; }
/* the breakdown sits on the quiet card's glass, so its rows read over the moving silk */
.hub-break { box-sizing: border-box; padding: 48px 48px 40px; border: 1px solid var(--border); border-radius: 24px; background: linear-gradient(180deg, rgba(24, 30, 40, .55), rgba(10, 14, 20, .65)); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.hub-break-head { max-width: 640px; margin: 0 0 40px; }
.hub-break-head h2, .hub-close h2 { margin: 0 0 12px; color: var(--text-strong); font: 600 clamp(30px, 4.4vw, 44px)/1.08 var(--font); letter-spacing: -0.03em; text-wrap: balance; }
.hub-break-head p { margin: 0; color: var(--text); font: 400 17px/1.55 var(--font); text-wrap: pretty; }
/* section labels in sentence case (Michael, 2026-10-27, after the setting-type pass on the first scene's): the body's size,
   one weight up from it, gold, the font's own spacing */
.hub-break-label { margin: 40px 0 6px; color: var(--accent); font: 500 16.5px/1.3 var(--font); letter-spacing: 0; }
.hub-break-rows { list-style: none; margin: 0; padding: 0; }
.hub-break-rows li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.hub-break-rows .hub-ico, .hub-break-grid .hub-ico { width: 36px; height: 36px; border-radius: 10px; }
.hub-break-rows .hub-ico svg, .hub-break-grid .hub-ico svg { width: 18px; height: 18px; }
.hub-break-rows strong { display: block; margin: 0 0 3px; color: var(--text-strong); font: 600 16px/1.35 var(--font); letter-spacing: -0.01em; }
.hub-break-rows div p { margin: 0; max-width: 56ch; color: var(--text); font: 400 14.5px/1.5 var(--font); text-wrap: pretty; }
.hub-was { margin: 0; display: grid; justify-items: end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub-was s { color: var(--text); font: 400 15px/1.3 var(--font); text-decoration-color: var(--accent); text-decoration-thickness: 1px; }
.hub-was span { color: var(--accent-text); font: 600 14px/1.3 var(--font); }
.hub-was--only span { color: var(--text); font-weight: 500; }
.hub-break-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.hub-break-grid li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.hub-break-grid strong { color: var(--text-strong); font: 500 15px/1.35 var(--font); }
.hub-break-total { margin: 32px 0 0; color: var(--text); font: 400 16px/1.5 var(--font); }
.hub-break-total strong { color: var(--text-strong); font-weight: 600; }

/* One number against hiring someone */
.hub-vs { max-width: 1000px; margin: 96px auto 0; padding: 48px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center; }
.hub-vs .hub-vs-num { margin: 0; max-width: none; font: 600 clamp(88px, 14vw, 156px)/.9 var(--font); letter-spacing: -0.06em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent) 60%, var(--accent-strong)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hub-vs-num span { font-size: .5em; letter-spacing: -0.02em; }
.hub-vs h2 { margin: 0 0 10px; color: var(--text-strong); font: 600 28px/1.15 var(--font); letter-spacing: -0.025em; }
.hub-vs p { margin: 0; max-width: 52ch; color: var(--text); font: 400 17px/1.55 var(--font); text-wrap: pretty; }
.hub-vs .hub-vs-src { margin: 14px 0 0; color: var(--text-dim); font-size: 13px; }

/* Scenes */
.hub-scene { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--hair); }
.hub-scene--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hub-scene--flip .hub-scene-copy { order: 2; }
.hub-scene-copy .hub-break-label { margin: 0 0 12px; }
.hub-scene-copy h3 { margin: 0 0 12px; color: var(--text-strong); font: 600 28px/1.15 var(--font); letter-spacing: -0.025em; text-wrap: balance; }
.hub-scene-copy p:last-child { margin: 0; color: var(--text); font: 400 16.5px/1.55 var(--font); text-wrap: pretty; }
.hub-stage { position: relative; display: grid; place-items: center; min-height: 420px; padding: 40px 24px; border: 1px solid var(--hair); border-radius: 24px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(58, 74, 102, .35), rgba(7, 17, 29, .55) 70%); overflow: hidden; }
.hub-stage svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sc-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(160deg, #2E3D54, var(--surface)); color: var(--accent-text); font: 600 12px/1 var(--font); }

/* 1 and 2: phones at real iPhone size (375 by 812 points, Michael 2026-10-27: "make it real size"). The stage shows the
   top two thirds and the phone runs off its bottom edge, fading out, so the scene stays a screen tall. */
.hub-stage--phone { display: block; height: 600px; min-height: 0; padding: 56px 24px 0; text-align: center;
  -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
.sc-phone, .sc-lock { position: relative; display: inline-flex; flex-direction: column; width: min(375px, 100%); aspect-ratio: 375 / 812; box-sizing: border-box;
  padding: 14px 18px; border-radius: 56px; text-align: left; background: #05080d; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 8px #0e141d, 0 0 0 9px rgba(255, 255, 255, .08); }
.sc-status { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 18px; color: #fff; font: 600 16px/1 -apple-system, var(--font); }
.sc-status::after { content: ""; width: 26px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); background: linear-gradient(90deg, #fff 70%, transparent 70%) 2px 2px / 20px 8px no-repeat; }
.sc-island { position: absolute; top: 22px; left: 50%; width: 120px; height: 34px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.sc-phone-top { display: grid; justify-items: center; gap: 6px; padding: 14px 0 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); color: #F2F2F7; font: 600 15px/1.2 -apple-system, var(--font); }
.sc-phone-top .sc-avatar { width: 56px; height: 56px; font-size: 19px; }
.sc-phone-top small, .sc-note small { color: #8E8E93; font: 400 13px/1.2 -apple-system, var(--font); }
.sc-thread { flex: 1; padding: 18px 4px; display: grid; align-content: start; gap: 12px; }
.sc-time { margin: 0; text-align: center; color: #8E8E93; font: 500 13px/1 -apple-system, var(--font); }
.sc-missed { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: #FF6961; font: 500 14px/1 -apple-system, var(--font); }
.sc-bubble, .sc-typing { justify-self: start; max-width: 80%; margin: 0; padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: #26262A; color: #F2F2F7; font: 400 17px/1.3 -apple-system, var(--font); }
.sc-typing { display: none; gap: 5px; padding: 15px 16px; }
.sc-typing i { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; }

/* 2. lock screen */
.sc-lock { align-items: center;
  background: radial-gradient(90% 60% at 30% 10%, #3A4A66, transparent 70%), radial-gradient(80% 70% at 80% 90%, rgba(190, 151, 73, .35), transparent 70%), #0B1626; }
.sc-lock .sc-status { align-self: stretch; }
.sc-lock-date { margin: 28px 0 0; color: rgba(255, 255, 255, .85); font: 600 20px/1 -apple-system, var(--font); }
.sc-lock-clock { margin: 6px 0 48px; color: rgba(255, 255, 255, .92); font: 600 96px/1 var(--font); letter-spacing: -0.04em; }
.sc-note { width: calc(100% - 20px); box-sizing: border-box; padding: 12px 14px; border-radius: 22px; background: rgba(245, 245, 250, .16); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.sc-note-top { display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: center; margin: 0 0 5px; color: #fff; font: 600 13.5px/1 -apple-system, var(--font); }
.sc-note-app { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #34C759; color: #fff; font-size: 15px; }
.sc-note p { margin: 0; color: rgba(255, 255, 255, .94); font: 400 13.5px/1.35 -apple-system, var(--font); }

/* 3. booking page */
.sc-book, .sc-site, .sc-mail { width: 100%; max-width: 520px; border-radius: 16px; overflow: hidden; background: #0C1522; box-shadow: inset 0 0 0 1px var(--border); }
.sc-url { margin: 0; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-dim); font: 400 12.5px/1 var(--font); background: #08101B; }
.sc-book-body { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; padding: 20px; }
.sc-book-who { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; color: var(--text-strong); font: 600 15px/1.2 var(--font); }
.sc-book-who small { display: block; color: var(--text-dim); font: 400 12.5px/1.4 var(--font); }
.sc-cal-month { margin: 0 0 10px; color: var(--text-strong); font: 600 13px/1 var(--font); }
.sc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font: 500 12px/28px var(--font); font-variant-numeric: tabular-nums; }
.sc-cal-grid span { color: var(--text-dim); font-size: 10.5px; }
.sc-cal-grid i { font-style: normal; color: #4A5568; border-radius: 8px; }
.sc-cal-grid i.on { color: var(--text-strong); background: rgba(213, 176, 108, .10); }
.sc-cal-grid i.pick { background: linear-gradient(180deg, var(--accent-hi), var(--accent-strong)); color: var(--on-accent); }
.sc-slots { display: grid; align-content: start; gap: 8px; }
.sc-slots p { margin: 0 0 4px; color: var(--text-strong); font: 600 13px/1 var(--font); }
.sc-slots > span { padding: 9px 0; border-radius: 10px; text-align: center; color: var(--text-strong); font: 500 13px/1 var(--font); box-shadow: inset 0 0 0 1px var(--border-strong); }
.sc-slots > span.pick { box-shadow: none; background: linear-gradient(180deg, var(--accent-hi), var(--accent-strong)); color: var(--on-accent); }
.sc-remind { margin: 0; display: flex; gap: 8px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--border); color: var(--text); font: 400 13px/1.4 var(--font); }
.sc-remind svg { color: var(--accent); }

/* 4. the report email */
.sc-mail { max-width: 460px; background: #F7F5F0; box-shadow: none; color: #1A2433; }
.sc-mail-head { padding: 18px 22px 14px; border-bottom: 1px solid #E2DED5; }
.sc-mail-head p { margin: 0; display: flex; justify-content: space-between; font: 600 13px/1.3 var(--font); }
.sc-mail-head small { color: #7A8290; font-weight: 400; }
.sc-mail-head .sc-mail-subj { margin: 6px 0 0; font: 600 19px/1.25 var(--font); letter-spacing: -0.015em; }
.sc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 18px 22px 0; background: #E2DED5; border-radius: 12px; overflow: hidden; }
.sc-stats div { padding: 14px 16px; background: #FFFFFF; }
.sc-stats span { display: block; color: #0A1628; font: 600 30px/1 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sc-stats small { color: #5F6875; font: 400 12.5px/1.3 var(--font); }
.sc-bars { display: flex; align-items: end; gap: 8px; height: 70px; margin: 20px 22px 0; }
.sc-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #D5B06C, #BE9749); transform-origin: bottom; }
.sc-bars-cap { margin: 8px 22px 20px; color: #7A8290; font: 400 11.5px/1 var(--font); }

/* 5. Danny's site */

/* Closing ask */
.hub-close { max-width: 640px; margin: 96px auto 0; text-align: center; }
.hub-close p { margin: 0 0 28px; color: var(--text); font: 400 17px/1.55 var(--font); }
.hub-close .hub-tier-cta { display: inline-flex; min-width: 260px; }
.hub-close .hub-tier-cta::after { display: none; }

/* Scenes in motion (src/_scenes.js). The markup is each scene's last frame; while a loop plays the scene has .sc-run,
   and each rule below holds back a piece until its step's s-<name> class arrives. Reduced motion never adds .sc-run. */
.sc-run .sc-missed, .sc-run .sc-bubble, .sc-run .sc-note, .sc-run .sc-slots, .sc-run .sc-confirm, .sc-run .sc-remind, .sc-run .sc-mail,
.sc-run .sc-bars i, .sc-run .sc-site-view img, .sc-call, .sc-t1, .sc-t2 { transition: opacity .45s var(--ease), transform .6s var(--ease), background .25s, color .25s, box-shadow .25s; }
/* 1. the call that goes unanswered, then the text, then their reply */
.sc-call { position: absolute; inset: 0; z-index: 2; display: grid; justify-items: center; align-content: start; gap: 8px; padding-top: 150px; border-radius: inherit;
  background: linear-gradient(180deg, #1c2533, #05080d 70%); color: #fff; font: 500 30px/1.1 -apple-system, var(--font); opacity: 0; pointer-events: none; }
.sc-call .sc-avatar { width: 92px; height: 92px; font-size: 30px; margin-bottom: 10px; }
.sc-call small { color: #A1A1AA; font: 400 17px/1 -apple-system, var(--font); animation: sc-pulse 1.4s ease-in-out infinite; }
.sc-endbtn { display: grid; place-items: center; width: 72px; height: 72px; margin-top: 170px; border-radius: 50%; background: #FF3B30; font-size: 32px; }
@keyframes sc-pulse { 50% { opacity: .35; } }
.sc-run.s-calling .sc-call { opacity: 1; }
.sc-run:not(.s-missed) .sc-missed { opacity: 0; }
.sc-slot { display: grid; justify-items: start; }
.sc-slot > * { grid-area: 1 / 1; align-self: start; }
.sc-run:not(.s-text) .sc-slot .sc-bubble { opacity: 0; transform: translateY(10px) scale(.97); transform-origin: left bottom; }
.sc-run.s-typing .sc-typing { display: flex; }
.sc-bubble { overflow-wrap: anywhere; }
.sc-bubble--me { justify-self: end; border-radius: 20px 20px 6px 20px; background: #0A84FF; color: #fff; }
.sc-run:not(.s-reply) .sc-bubble--me { opacity: 0; transform: translateY(10px) scale(.97); transform-origin: right bottom; }
/* 2. 9:59 turns 10:00 and the text lands with a buzz */
.sc-lock-clock { display: grid; justify-items: center; }
.sc-lock-clock span { grid-area: 1 / 1; }
.sc-t1 { opacity: 0; }
.sc-run:not(.s-ten) .sc-t1 { opacity: 1; }
.sc-run:not(.s-ten) .sc-t2 { opacity: 0; }
.sc-run:not(.s-note) .sc-note { opacity: 0; transform: translateY(-28px) scale(.94); }
.sc-run.s-buzz .sc-lock { animation: sc-buzz .5s linear; }
@keyframes sc-buzz { 10%, 50%, 90% { transform: translateX(-3px) rotate(-.4deg); } 30%, 70% { transform: translateX(3px) rotate(.4deg); } }
/* 3. a pointer books a time */
.sc-book { position: relative; }
.sc-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 22px; margin: -3px 0 0 -4px; opacity: 0; pointer-events: none;
  transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.sc-cursor svg { display: block; width: 100%; height: 100%; }
.sc-run .sc-cursor { opacity: 1; }
.sc-cursor.click svg { transform: scale(.82); transition: transform .1s; }
.sc-run:not(.s-day) .sc-cal-grid i.pick { background: rgba(213, 176, 108, .10); color: var(--text-strong); }
.sc-run:not(.s-day) .sc-slots { opacity: 0; transform: translateX(10px); }
.sc-run:not(.s-slot) .sc-slots span.pick { background: none; color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--border-strong); }
.sc-confirm { position: relative; display: grid; margin-top: 4px; padding: 10px 0; border-radius: 10px; text-align: center; background: var(--text-strong); color: var(--ink); font: 600 13px/1 var(--font); }
.sc-confirm em { grid-area: 1 / 1; display: inline-flex; justify-content: center; align-items: center; gap: 5px; font-style: normal; transition: opacity .25s; }
.sc-confirm em:first-child { opacity: 0; }
.sc-run:not(.s-booked) .sc-confirm em:first-child { opacity: 1; }
.sc-run:not(.s-booked) .sc-confirm em:last-child { opacity: 0; }
.sc-run:not(.s-slot) .sc-confirm { opacity: 0; }
.sc-run:not(.s-remind) .sc-remind { opacity: 0; transform: translateY(8px); }
/* 4. the report lands, numbers count up, bars grow */
.sc-run:not(.s-mail) .sc-mail { opacity: 0; transform: translateY(36px); }
.sc-bars i { transform-origin: bottom; }
.sc-run:not(.s-bars) .sc-bars i { transform: scaleY(0); }
.sc-bars i:nth-child(2) { transition-delay: .05s } .sc-bars i:nth-child(3) { transition-delay: .1s } .sc-bars i:nth-child(4) { transition-delay: .15s }
.sc-bars i:nth-child(5) { transition-delay: .2s } .sc-bars i:nth-child(6) { transition-delay: .25s } .sc-bars i:nth-child(7) { transition-delay: .3s }
.sc-bars i:nth-child(8) { transition-delay: .35s }
/* 5. the address types in, the site loads, then scrolls down and back */
.sc-site-view { aspect-ratio: 1280 / 800; overflow: hidden; }
.sc-site-view img { display: block; width: 100%; height: auto; }
.sc-run:not(.s-load) .sc-site-view img { opacity: 0; }
.sc-run.s-scroll .sc-site-view img { transform: translateY(var(--scroll, 0)); transition: transform 7s cubic-bezier(.45, 0, .3, 1), opacity .45s; }
.sc-run:not(.s-scroll) .sc-site-view img { transition: transform 1.6s cubic-bezier(.45, 0, .3, 1), opacity .45s; }

@media (max-width: 960px) {
  .hub-plans--two .hub-tiers { grid-template-columns: 1fr; max-width: 560px; }
  .hub-scene, .hub-vs { grid-template-columns: 1fr; gap: 28px; }
  .hub-scene--flip { grid-template-columns: 1fr; }
  .hub-scene--flip .hub-scene-copy { order: 0; }
  .hub-break, .hub-scenes { margin-top: 88px; }
}
@media (max-width: 600px) {
  .hub-break-rows li { grid-template-columns: 36px minmax(0, 1fr); row-gap: 8px; }
  .hub-was { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: 10px; }
  .hub-break-grid { grid-template-columns: 1fr; }
  .hub-break { padding: 28px 18px 24px; border-radius: 20px; }
  .hub-stage { min-height: 0; padding: 28px 22px; border-radius: 20px; }
  .sc-book-body { grid-template-columns: 1fr; }
  .hub-stage--phone { height: 560px; padding-top: 36px; }
  .sc-bubble, .sc-typing { font-size: 16px; }
  .sc-phone, .sc-lock { width: min(340px, 100%); padding: 12px 14px; border-radius: 50px; }
  .sc-lock-clock { font-size: 84px; }
  .hub-vs { padding: 36px 0; gap: 12px; }
}

/* ---- Trust & Will offer pages (2026-11-04, gohighlevel/trust-will/build_pages.py) ---- */
.hub-tw-hero h1 { text-wrap: balance; }
.hub-tw-price { margin: 28px 0 0; }
.hub-tw-was { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--text); font: 500 17px/1.3 var(--font); }
.hub-tw-was s { position: relative; text-decoration: none; color: var(--text); }
.hub-tw-was s::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 2px; border-radius: 2px; background: var(--accent); transform-origin: left; animation: hub-tw-strike .5s var(--ease) .2s both; }
.hub-tw-now { margin: 6px 0 0; color: var(--text-strong); font: 600 clamp(64px, 9vw, 84px)/1 var(--font); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
@keyframes hub-tw-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hub-tw-side h2, .hub-tw-seven h2 { margin: 0 0 20px; color: var(--text-strong); font: 600 20px/1.3 var(--font); letter-spacing: -0.015em; }
.hub-tw-how { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--hair); }
.hub-tw-how.hub-section { margin-top: 40px; }

.hub-tw-seven { margin: 72px 0 0; padding: 48px 0 0; border-top: 1px solid var(--hair); }
.hub-tw-seven h2 { margin: 0 0 32px; font: 600 clamp(28px, 4vw, 40px)/1.1 var(--font); letter-spacing: -0.03em; text-wrap: balance; }
.hub-tw-seven ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); }
.hub-tw-seven li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.hub-tw-seven strong { display: block; margin: 1px 0 4px; color: var(--text-strong); font: 600 17px/1.3 var(--font); letter-spacing: -0.012em; }
.hub-tw-seven li p { margin: 0; color: var(--text); font: 400 15px/1.5 var(--font); text-wrap: pretty; }
.hub-tw-docs { margin: 28px 0 0; max-width: 76ch; color: var(--text); font: 400 15px/1.6 var(--font); text-wrap: pretty; }
.hub-tw-docs strong { color: var(--text-strong); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .hub-tw-was s::after { animation: none; } }
@media (min-width: 1024px) {
  .c-column > .inner:has(.hub-tw-side) { grid-template-rows: auto auto auto 1fr auto auto; }
  .c-column > .inner:has(.hub-split) .hub-tw-seven { grid-column: 1 / -1; grid-row: 5; }
  .c-column > .inner:has(.hub-tw-side) .hub-foot { grid-row: 6; }
}
@media (max-width: 1023px) {
  .c-column > .inner:has(.hub-split) .hub-tw-seven { order: 6; }
  .c-column > .inner:has(.hub-tw-side) .hub-foot { order: 7; }
  .hub-tw-seven ol { grid-template-columns: minmax(0, 1fr); }
}

/* Trust & Will checkout, Michael 2026-11-04: the card panel felt tight, and GoHighLevel's gold spinner on the gold button was
   invisible. While it works, the button holds a .v-spinner and is disabled: it turns navy with a brass edge, a moving ring and words. */
.c-column > .inner:has(.hub-tw-side) .container-order-form-two-step .payment-form { padding: 28px 28px 30px; }
.c-column > .inner:has(.hub-tw-side) .payment-content .form-btn { margin-top: 26px !important; }
.c-column > .inner:has(.hub-tw-side) .form-btn:has(.v-spinner) {
  gap: 12px;
  background: #101B2E !important;
  box-shadow: inset 0 0 0 1.5px var(--accent) !important;
  cursor: wait;
  transform: none !important;
}
.c-column > .inner:has(.hub-tw-side) .form-btn:has(.v-spinner) .v-spinner { display: none !important; }
.c-column > .inner:has(.hub-tw-side) .form-btn:has(.v-spinner)::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 2.5px solid rgba(232, 197, 137, .28);
  border-top-color: var(--accent-hi);
  animation: hub-tw-spin .8s linear infinite;
}
.c-column > .inner:has(.hub-tw-side) .form-btn:has(.v-spinner)::after {
  content: "One moment";
  color: var(--accent-hi);
  font: 600 16px/1.2 var(--font);
  letter-spacing: -0.01em;
}
.c-column > .inner:has(.hub-tw-side) .payment-content .form-btn:has(.v-spinner)::after { content: "Processing your payment"; }
@keyframes hub-tw-spin { to { transform: rotate(360deg); } }
@media (max-width: 1023px) {
  .c-column > .inner:has(.hub-tw-side) .container-order-form-two-step .payment-form { padding: 20px 20px 22px; }
}

/* ---- Trust & Will page, Michael's lock of 2026-11-04: mock source was trust-will/compare-mockups. ---- */
.tw-note { margin: 10px 0 0; color: var(--text); font: 400 15px/1.5 var(--font); text-wrap: pretty; }

/* D. Bars to scale: every bar starts at zero. Solid up to the low price, fading out at the high price. Ours is the one bar in
   gold and the one number set bigger, so the eye lands on it. */
.tw-d-rows { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.tw-d-rows li > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.tw-d-rows span { color: var(--text); font: 400 15px/1.3 var(--font); }
.tw-d-rows strong { color: var(--text-strong); font: 500 16px/1.3 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-d-bar { display: block; height: 12px; border-radius: 3px; }
.tw-d-bar--one { width: 71.43%; background: linear-gradient(90deg, #4A5A78 48%, rgba(74, 90, 120, 0)); }
.tw-d-bar--two { width: 100%; background: linear-gradient(90deg, #4A5A78 51.43%, rgba(74, 90, 120, 0)); }
.tw-d-bar--you { background: linear-gradient(180deg, var(--accent-hi), var(--accent) 60%, var(--accent-strong)); }
.tw-d-rows .tw-d-you span, .tw-d-rows .tw-d-you strong { color: var(--accent-text); }
.tw-d-rows .tw-d-you strong { font: 600 24px/1.2 var(--font); letter-spacing: -0.02em; }
.tw-d .tw-note { margin-top: 20px; }

/* ---- How it works: gold circles, a dark number badge, a dashed line between them (Danny's "How the call works", Michael 2026-11-04).
   The same markup in three layouts. The line sits on each step but the last. ---- */
.tw-how { --c: 72px; --dash: 2px dashed rgba(213, 176, 108, .55); }
.tw-steps { list-style: none; margin: 0; padding: 0; }
.tw-steps li { position: relative; }
.tw-step-ico { position: relative; display: grid; place-items: center; width: var(--c); height: var(--c); border-radius: 50%; background: linear-gradient(180deg, var(--accent-hi), var(--accent) 60%, var(--accent-strong)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px -14px rgba(190, 151, 73, .7); color: var(--on-accent); }
.tw-step-ico svg { width: 46%; height: 46%; fill: currentColor; display: block; }
.tw-step-ico b { position: absolute; top: -3px; right: -5px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1.5px var(--accent-strong); color: var(--accent-text); font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; }
.tw-steps strong { display: block; margin: 0 0 6px; color: var(--text-strong); font: 600 18px/1.3 var(--font); letter-spacing: -0.012em; }
.tw-steps p { margin: 0; color: var(--text); font: 400 15px/1.55 var(--font); text-wrap: pretty; }
.tw-steps li:last-child::after { display: none; }

/* Up and down: the base for every layout, and what a phone gets */
.tw-steps li { display: grid; grid-template-columns: var(--c) minmax(0, 1fr); column-gap: 20px; min-height: calc(var(--c) + 56px); padding-bottom: 32px; }
.tw-steps li:last-child { min-height: 0; padding-bottom: 0; }
.tw-steps li > div { padding-top: 6px; }
.tw-steps li::after { content: ""; position: absolute; left: calc(var(--c) / 2 - 1px); top: calc(var(--c) + 8px); bottom: 8px; border-left: var(--dash); }

/* Full-width layouts: the attorney section moves above, centered, and How it works gets a section heading like Seven things */
.c-column > .inner:has(.tw-hero) .hub-feats:has(.tw-how-wide) { display: block; }
.hub-feats:has(.tw-how-wide) .hub-tw-compare { width: min(100%, 560px); margin: 0 auto; }
.hub-feats:has(.tw-how-wide) .hub-tw-compare h2 { text-align: center; }
.c-column > .inner:has(.tw-hero) .hub-feats .tw-how-wide { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--hair); }
.tw-how-wide h2 { margin-bottom: 36px; font: 600 clamp(28px, 4vw, 40px)/1.1 var(--font); letter-spacing: -0.03em; }

/* Ladder: each step one rung lower and further right. The line drops from one circle, then runs right into the next,
   so it never crosses words, however long a step gets. */
@media (min-width: 721px) {
  .tw-how--ladder { --c: 88px; --rung: clamp(96px, 15vw, 200px); }
  .tw-how--ladder .tw-steps li { padding-bottom: 40px; column-gap: 24px; }
  .tw-how--ladder .tw-steps li:last-child { padding-bottom: 0; }
  .tw-how--ladder .tw-steps li > div { max-width: 58ch; padding-top: 10px; }
  .tw-how--ladder .tw-steps li:nth-child(2) { margin-left: var(--rung); }
  .tw-how--ladder .tw-steps li:nth-child(3) { margin-left: calc(var(--rung) * 2); }
  .tw-how--ladder .tw-steps li::after { top: calc(var(--c) + 8px); bottom: calc(var(--c) / -2); width: calc(var(--rung) - var(--c) / 2 - 10px); border-bottom: var(--dash); border-bottom-left-radius: 14px; }
}

@media (max-width: 560px) {
  .tw-how { --c: 60px; }
  .tw-steps li { column-gap: 16px; }
  .tw-step-ico b { width: 26px; height: 26px; font-size: 12px; }
  .tw-how-wide h2 { margin-bottom: 28px; }
}

/* ---- The page: one grid at every width. The price block and GoHighLevel's order form stay separate elements,
   one centered column on the silk, no card. The top may run wider than the form, the form stays 500. ---- */
.c-column > .inner:has(.tw-hero) {
  --card: 500px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(7, auto) !important;
  column-gap: 0 !important;
}
.hub-hero.tw-hero { display: contents; }
.c-column > .inner:has(.tw-hero) .hub-top { grid-column: 1 / -1; grid-row: 1; }
.c-column > .inner:has(.tw-hero) .tw-cardtop, .c-column > .inner:has(.tw-hero) > .c-order { grid-column: 1; justify-self: center; position: relative; z-index: 1; }
.c-column > .inner:has(.tw-hero) .tw-cardtop { grid-row: 2; width: min(100%, 900px); margin: 36px 0 0; padding: 28px 0 30px; text-align: center; }
.c-column > .inner:has(.tw-hero) > .c-order { grid-row: 3; width: min(100%, var(--card)); align-self: start; margin: 0 !important; padding: 0; }
.c-column > .inner:has(.tw-hero) .hub-hero h1 { margin: 0; font-size: clamp(40px, 5vw, 56px); line-height: 1.04; }
.c-column > .inner:has(.tw-hero) .hub-fine { grid-column: 1 / -1; grid-row: 4; justify-self: center; width: 100%; max-width: 64ch; margin: 18px 0 0; text-align: center; }
.c-column > .inner:has(.tw-hero) .hub-feats { grid-column: 1 / -1; grid-row: 5; margin: 56px 0 0; padding: 44px 0 0; border: 0; border-top: 1px solid var(--hair); }
.c-column > .inner:has(.hub-split):has(.tw-hero) .hub-tw-seven { grid-column: 1 / -1; grid-row: 6; }
.c-column > .inner:has(.tw-hero) .hub-foot { grid-column: 1 / -1; grid-row: 7; }
@media (min-width: 1024px) {
  .c-column > .inner:has(.tw-hero) .hub-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 7vw, 96px); align-items: start; }
  .c-column > .inner:has(.tw-hero) .hub-tw-how { margin-top: 0; padding-top: 0; border-top: 0; }
}
@media (max-width: 560px) {
  .c-column > .inner:has(.tw-hero) .tw-cardtop, .c-column > .inner:has(.tw-hero) > .c-order { width: auto; justify-self: stretch; }
  .c-column > .inner:has(.tw-hero) .tw-cardtop { margin-top: 24px; }
}

/* ---- 13. The research's size rule: the sale price bigger than the old price, a little over 2 to 1 (Dyson's deals page is
   36 to 16, Saatva's mattress 24 to 24; nothing measured goes near the 10 to 1 this replaced). The old price stays
   grey and the new one bright, so they read as two different things. ---- */
.tw-c .hub-tw-price { margin-top: 28px; }
.tw-c .hub-tw-was { justify-content: center; align-items: baseline; gap: 8px; }
.tw-c .hub-tw-was s { font: 500 clamp(32px, 3.2vw, 42px)/1.15 var(--font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tw-c .hub-tw-was s::after { top: 50%; height: 3px; }
.tw-c .hub-tw-was span { color: var(--text); font: 400 clamp(16px, 1.4vw, 18px)/1.3 var(--font); }
.tw-h13 .hub-tw-now { margin: 2px 0 0; font: 600 clamp(72px, 7.4vw, 96px)/1 var(--font); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }

/* ---- Motion (Michael, 2026-11-04), driven by public/tw-motion.js. Only under html.tw-anim, so reduced motion and a failed script get the plain
   page. Filter, opacity and transform only, nothing that moves the layout. The list matches SEL in tw-motion.js. ---- */
.tw-lead { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: top; transition: max-width .4s var(--ease), opacity .12s linear; }
.tw-lead.is-gone { max-width: 0 !important; opacity: 0; }
html.tw-anim :is(.hub-tw-compare h2, .tw-d-rows li, .tw-note, .tw-how h2, .tw-steps li, .hub-tw-seven h2, .hub-tw-seven li, .hub-tw-docs) {
  transition: opacity .9s var(--ease) var(--d, 0ms), filter .9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms);
}
html.tw-anim :is(.hub-tw-compare h2, .tw-d-rows li, .tw-note, .tw-how h2, .tw-steps li, .hub-tw-seven h2, .hub-tw-seven li, .hub-tw-docs):not(.is-in) {
  opacity: 0; filter: blur(8px); transform: translate3d(0, 14px, 0);
}
/* The bars grow, the ladder's dashed line draws toward the next step, the circles settle */
html.tw-anim .tw-d-bar { transform-origin: left center; transform: scaleX(0); transition: transform 1.2s var(--ease) calc(var(--d, 0ms) + .15s); }
html.tw-anim .is-in .tw-d-bar { transform: none; }
html.tw-anim .tw-steps li::after { clip-path: inset(0 100% 100% 0); transition: clip-path .9s var(--ease) calc(var(--d, 0ms) + .35s); }
html.tw-anim .tw-steps li.is-in::after { clip-path: inset(-4px); }
html.tw-anim .tw-step-ico { transition: transform 1s var(--ease) var(--d, 0ms); }
html.tw-anim .tw-steps li:not(.is-in) .tw-step-ico { transform: scale(.9); }
@media (max-width: 560px) {
  html.tw-anim :is(.hub-tw-compare h2, .tw-d-rows li, .tw-note, .tw-how h2, .tw-steps li, .hub-tw-seven h2, .hub-tw-seven li, .hub-tw-docs):not(.is-in) { filter: blur(6px); }
}