/* ==============================================
   Shared Checkout Stylesheet — all brands
   Brand colors are CSS custom properties;
   override in brand/css/theme.css
   ============================================= */

/* ---- Design tokens ---- */
:root {
  /* Page gutter — single source of truth for horizontal spacing */
  --co-page-gutter:    40px;

  /* Action / feedback colors */
  --co-accent:         #FF7200;
  /* Deeper orange used wherever the accent carries TEXT — orange type on a light
     background, or white type on an orange fill. #FF7200 tops out at 2.74:1
     against white, so anything with words on it uses this instead. Decorative
     accent (icon strokes, focus rings, the slider thumb) keeps --co-accent. */
  --co-accent-text:    #EE5F00;
  --co-success:        #1D8449;
  --co-step-bar-fill:  #FF7200;
  --co-error:          #E53E3E;

  /* Light theme tokens */
  --co-body-bg:          #F6F6F6;
  --co-body-color:       #16141A;
  --co-logo-height:      22px;
  --co-logo-width:       auto;
  --co-card-bg:          rgba(255,255,255,.9);
  /* The same card color at full opacity. Cards are translucent so the page
     gradient shows through, but a card holding an opaque iframe (the Calendly
     embed) would show a visible seam where the two backgrounds meet. Every
     theme that overrides --co-card-bg must override this to match. */
  --co-card-bg-solid:    #FFFFFF;
  /* Tells the browser which way to draw native controls it renders itself —
     today the date picker's icon and calendar popup. Dark themes flip it. */
  --co-color-scheme:     light;
  --co-card-border:      #EFEAE3;
  --co-card-shadow:      10px 10px 50px rgba(0,0,0,.07);
  --co-card-h3:          #16141A;
  --co-text-muted:       #65615B;
  --co-text-secondary:   #5C554E;
  --co-input-bg:         #FCFBF9;
  --co-input-border:     #E6E0D8;
  --co-placeholder-color: #9B9490;
  --co-input-color:      #16141A;
  --co-input-option-bg:  #FCFBF9;
  /* Select chevron. Selects are appearance:none so every browser draws the
     same arrow (Safari's is a double chevron, Chrome's a single one), which
     means we supply it. A data-URI cannot interpolate a custom property, so
     the two inked variants are defined here once and a theme picks one rather
     than restating the shape. */
  --co-chevron-ink:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none' stroke='%239B9490' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5'/%3E%3C/svg%3E");
  --co-chevron-snow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none' stroke='%23B8B4AE' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 5 5.5 9 1.5'/%3E%3C/svg%3E");
  --co-select-chevron: var(--co-chevron-ink);
  --co-divider:          #EDE7DE;
  --co-footer-border:    rgba(0,0,0,.07);
  --co-footer-span:      #5C554E;
  --co-footer-copy:      #706B64;
  --co-header-right:     #65615B;
  --co-btn-back:         #65615B;
  --co-secure-note:      #65615B;
  --co-pricing-note:     #706B64;
  --co-price-color:      #16141A;
  --co-price-muted:      #65615B;
  --co-toggle-active-bg:       #16141A;
  --co-toggle-active-color:    #fff;
  --co-toggle-inactive-color:  #5C554E;
  --co-summary-title:    #16141A;
  --co-summary-product:  #16141A;
  --co-summary-sub:      #65615B;
  --co-summary-row:      #5C554E;
  --co-summary-strong:   #16141A;
  --co-summary-total:    #16141A;
  --co-summary-note:     #65615B;
  --co-text-faint:       #706B64;
  --co-expect-text:      #3A352F;
  --co-expect-who-text:  #5C554E;

  /* Plan page chrome */
  --co-plan-size-label:   #000000;
  --co-plan-heading:      #16141A;
  --co-plan-subhead:      #5C554E;
  --co-mobile-bar-key:    #16141A;
  --co-billing-wrap-bg:   #fff;
  /* Schools' K-12/University tabs. Same role as the billing toggle's track, so
     a dark brand that ever gains audience tabs overrides it the same way. */
  --co-tabs-bg:           #fff;
  --co-slider-track-bg:   #EDE9E4;
  --co-slider-thumb-bg:   #fff;
  --co-slider-fill-bg:    linear-gradient(90deg,rgb(111,96,255),rgb(243,124,136) 55%,rgb(255,114,0));
  --co-feature-icon-size: 40px;
  --co-micro-gradient:    linear-gradient(135deg,#5b52e8,#9b6dbf,#e8835c);

  /* Success page: launch checklist */
  --co-task-box:        #C9C3BB;
  --co-task-divider:    #F0EDE8;
  --co-task-next-bg:    #FAF8F5;

  /* Step 2 "A Successful Start" card — outlined, so it sits on the page
     background by default. Dark themes fill it instead. */
  --co-start-card-bg:   transparent;
  --co-launch-or-line:  #DCD6CE;
  /* Step 3's section heading. Orange on the light brands, white on the dark
     ones — see the dark block below. */
  --co-launch-heading:  var(--co-accent-text);
  --co-pill-urgent-bg:  #FCE9E2;
  --co-pill-urgent-fg:  #B23B1E;
}

/* ---- Shared dark palette ----
   Selected by data-theme="dark" on <html>, which CheckoutLayout sets from a
   brand's `theme` field. At Work and Microchurch both use it; before this they
   each carried their own near-identical 70-line copy and every dark fix had to
   be made twice.

   A brand's own theme.css loads after this file, so to override a token here it
   must match this selector — a bare `:root` is less specific and would lose. */
:root[data-theme="dark"] {
  --co-pricing-note:     rgba(255,255,255,.75);
  --co-body-bg:          #111013;
  --co-body-color:       #F0EDE8;
  --co-card-bg:          rgba(28,26,32,.9);
  /* Opaque twin of the line above — see --co-card-bg-solid in checkout.css.
     This is the color the Calendly embed is themed to, so the card holding
     it and the iframe inside it meet with no seam. */
  --co-card-bg-solid:    #1C1A20;
  /* Dark: the browser draws the date picker's icon and calendar to match. */
  --co-color-scheme:     dark;
  /* Light chevron for the selects — see --co-select-chevron in checkout.css. */
  --co-select-chevron:   var(--co-chevron-snow);
  --co-card-border:      rgba(255,255,255,.07);
  --co-card-shadow:      none;
  --co-card-h3:          #F0EDE8;
  --co-text-muted:       rgba(255,255,255,.6);
  --co-text-secondary:   rgba(255,255,255,.75);
  --co-input-bg:         rgba(255,255,255,.06);
  --co-input-border:     rgba(255,255,255,.1);
  --co-placeholder-color: rgba(255,255,255,.35);
  --co-input-color:      #F0EDE8;
  --co-input-option-bg:  #1C1A20;
  --co-divider:          rgba(255,255,255,.08);
  /* Success-page launch checklist. The shared defaults are near-white, which
     would draw a bright line and a white block across these dark cards. */
  --co-task-divider:     rgba(255,255,255,.08);
  --co-task-next-bg:     rgba(255,255,255,.06);
  --co-launch-or-line:   rgba(255,255,255,.18);
  /* Orange on this near-black card reads as a warning rather than a heading. */
  --co-launch-heading:   #fff;
  --co-footer-border:    rgba(255,255,255,.06);
  --co-footer-span:      rgba(255,255,255,.55);
  --co-footer-copy:      rgba(255,255,255,.5);
  --co-header-right:     rgba(22,20,26,.8);
  --co-btn-back:         rgba(255,255,255,.65);
  --co-secure-note:      rgba(255,255,255,.6);
  --co-price-color:      #fff;
  --co-price-muted:      #9A938C;
  --co-toggle-active-bg:       #fff;
  --co-toggle-active-color:    #16141A;
  --co-toggle-inactive-color:  rgba(255,255,255,.75);
  --co-summary-title:    #F0EDE8;
  --co-summary-product:  #F0EDE8;
  --co-summary-sub:      rgba(255,255,255,.6);
  --co-summary-row:      rgba(255,255,255,.75);
  --co-summary-strong:   #F0EDE8;
  --co-summary-total:    #F0EDE8;
  --co-summary-note:     rgba(255,255,255,.6);
  --co-text-faint:       rgba(255,255,255,.5);
  --co-expect-text:      #C8C2BB;
  --co-expect-who-text:  #9B9490;


  /* Plan page chrome */
  --co-billing-wrap-bg:   rgba(255,255,255,.07);
  --co-slider-track-bg:   rgba(255,255,255,.1);
  --co-slider-thumb-bg:   #1C1A20;
  --co-feature-icon-size: 35px;

  /* Plan page chrome — these were per-element rules in both theme files
     (.co-plan-size-label, .co-plan-heading, .co-plan-subhead and the mobile
     bar key); they are tokens now so the dark value lives here with the rest. */
  --co-plan-size-label:   #F0EDE8;
  --co-plan-heading:      #fff;
  --co-plan-subhead:      rgba(255,255,255,.8);
  --co-mobile-bar-key:    #F0EDE8;
}

/* Responsive gutter — one change applies everywhere */
@media (max-width: 880px) { :root { --co-page-gutter: 24px; } }
@media (max-width: 640px) { :root { --co-page-gutter: 16px; } }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  font-family: 'aktiv-grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll;
  background-color: var(--co-body-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--co-body-color);
}
input, select, textarea, button { font-family: inherit; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Screen-reader-only — visually hidden but accessible */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---- Animations ---- */
@keyframes rnmfade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rnmpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,114,0,.45); }
  50%       { box-shadow: 0 0 0 9px rgba(255,114,0,0); }
}

/* ---- Checkout Header ---- */
.co-header { z-index: 100; padding: 10px 0; }
.co-header-inner { max-width: 1250px; margin: 0 auto; padding: 0 var(--co-page-gutter); }
.co-header-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(227 228 232 / 82%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 50px;
  height: 54px;
  padding: 0 20px 0 26px;
  /* backdrop-filter above makes this a stacking context, which traps anything
     absolutely positioned inside it — the region menu could not rise above the
     step indicator no matter what z-index it was given, because the contest is
     between the PILL and the steps, not between their children. Below 900px the
     steps render after the pill, so without this they win. */
  position: relative;
  z-index: 2;
}
/* The logo and the help slot each take an equal share of the leftover space, so
   the step bar lands dead centre no matter how wide the logo is or whether the
   brand fills the help slot at all. */
.co-logo-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; flex: 1 1 0; justify-content: flex-start; }
.co-logo-btn img { height: var(--co-logo-height); width: var(--co-logo-width); display: block; }

/* Step indicator */
@keyframes stepDotIn {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes stepBarFill {
  from { width: 0; }
  to   { width: 100%; }
}
.co-steps { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.co-step  { display: flex; align-items: center; gap: 7px; }
.co-step-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: #f6f2ed; color: #65615B; flex-shrink: 0;
  animation: stepDotIn .35s cubic-bezier(.34,1.56,.64,1) both;
}
.co-step:nth-child(1) .co-step-dot { animation-delay: .05s; }
.co-step:nth-child(3) .co-step-dot { animation-delay: .25s; }
.co-step:nth-child(5) .co-step-dot { animation-delay: .45s; }
.co-step-dot--done   { background: var(--co-success); color: #fff; }
.co-step-dot--active { background: var(--co-accent-text); color: #fff; animation: stepDotIn .35s cubic-bezier(.34,1.56,.64,1) both, rnmpulse 2s ease-in-out 0.4s infinite; }
.co-step-label { font-size: 14px; font-weight: 600; color: #5B5751; }
.co-step-label--done   { font-weight: 600; color: #16141A; }
.co-step-label--active { font-weight: 700; color: #16141A; }
.co-step-bar {
  position: relative; overflow: hidden;
  width: 52px; height: 1.5px; background: #f6f2ed; flex-shrink: 0;
}
.co-step-bar::after {
  content: ''; position: absolute; top: 0; left: 0; height: 100%;
  width: 0; animation: stepBarFill .4s ease-out both;
}
.co-step-bar:nth-child(2)::after { animation-delay: .15s; }
.co-step-bar:nth-child(4)::after { animation-delay: .35s; }
.co-step-bar--done::after   { background: var(--co-step-bar-fill); animation-delay: .15s; width: 100%; }
.co-step-bar--active::after { background: var(--co-step-bar-fill); animation-delay: .35s; width: 100%; }

/* Header right */
/* min-width keeps an empty slot from collapsing entirely; flex matches the logo
   side so the steps stay centred. See .co-logo-btn. */
.co-header-right { font-size: 14px; color: var(--co-header-right); flex: 1 1 0; min-width: 80px; text-align: right; }
.co-header-right a { color: var(--co-accent-text); font-weight: 700; text-decoration: none; }

/* ---- Header region switcher ---- */
.co-region { position: relative; display: inline-block; text-align: left; }
.co-region-summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 8px;
  /* The caret inherits this color via stroke="currentColor", so setting it here
     covers both the label and the chevron. */
  font-size: 13px; font-weight: 700; color: #5B5751;
  cursor: pointer; user-select: none;
  transition: background-color .15s ease, color .15s ease;
}
.co-region-label { font-size: 13px; }
.co-region-summary:hover { background: rgba(0,0,0,.05); color: var(--co-accent-text); }
.co-region-summary:focus-visible { outline: 2px solid var(--co-accent); outline-offset: 2px; }
/* The asset's own size — upscaling it thickens the stroke it was drawn with. */
.co-region-globe { width: 15px; height: 15px; display: block; flex: 0 0 auto; }
.co-region-caret { transition: transform .18s ease; }
.co-region[open] .co-region-caret { transform: rotate(180deg); }

.co-region-menu {
  position: absolute; z-index: 200; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px; list-style: none;
  min-width: 250px;
  background: var(--co-card-bg-solid);
  border: 1px solid var(--co-card-border); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
}
/* Scoped through .co-header-right to outrank its blanket `a` rule, which would
   otherwise render every region orange and bold — accent styling belongs on the
   one FAQ link that rule was written for, not on a list of nine items. */
.co-header-right .co-region-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 8px;
  font-size: 14px; font-weight: 500; line-height: 1.35;
  color: var(--co-card-h3); text-decoration: none;
}
.co-header-right a.co-region-item:hover {
  background: rgba(0,0,0,.05); color: var(--co-accent-text);
}
/* The region this page already is: stated, not offered. */
.co-header-right .co-region-item--current { font-weight: 700; cursor: default; }
.co-region-check { color: var(--co-accent-text); font-weight: 700; flex: 0 0 auto; }

/* Colocated with the rules above — the shared @media block sits earlier in the
   file. The pill has less room once the steps drop out of it below 900px, so
   the code alone carries the meaning and the menu widens to fit the longest
   region name rather than the button. */
@media (max-width: 900px) {
  .co-region-menu { min-width: 0; width: max-content; max-width: 78vw; }
}

/* ---- Page layout ---- */
.co-page { max-width: 1250px; margin: 0 auto; padding: 0 var(--co-page-gutter); width: 100%; }
.co-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 40px; align-items: start; }

/* ---- Cards ---- */
.co-card {
  background: var(--co-card-bg);
  border-radius: 20px;
  margin-bottom: 20px;
  padding: 34px;
  box-shadow: var(--co-card-shadow);
}
.co-card h3 { font-size: 21px; font-weight: 700; margin: 0 0 18px; color: var(--co-card-h3); }

/* Sidebar */
.co-sidebar { position: sticky; top: 24px; }

/* Order summary */
.co-summary-card {
  background: var(--co-card-bg);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--co-card-shadow);
  margin-bottom: 16px;
}
.co-summary-title { font-size: 16px; font-weight: 700; margin: 0 0 18px; color: var(--co-summary-title); letter-spacing: .02em; text-transform: uppercase; }
.co-summary-product { font-size: 15px; font-weight: 700; color: var(--co-summary-product); }
.co-summary-sub     { font-size: 13px; color: var(--co-summary-sub); margin-bottom: 16px; }
.co-summary-row { display: flex; justify-content: space-between; font-size: 15px; color: var(--co-summary-row); margin-bottom: 10px; }
.co-summary-row strong { font-weight: 700; color: var(--co-summary-strong); }
.co-divider { height: 1px; background: var(--co-divider); margin: 6px 0 18px; }
.co-summary-total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.co-summary-total-label  { font-size: 19px; font-weight: 700; color: var(--co-summary-total); letter-spacing: -.01em; }
.co-summary-total-amount { font-size: 30px; font-weight: 700; color: var(--co-summary-total); letter-spacing: -.02em; }
.co-summary-dollar { font-size: 16px; font-weight: 700; color: var(--co-summary-total); vertical-align: super; line-height: 0; position: relative; top: 0; }
.co-summary-cents  { font-size: 16px; font-weight: 700; color: var(--co-summary-total); }
.co-summary-note { font-size: 14px; color: var(--co-summary-note); line-height: 1.5; margin: 0; }

/* ---- Forms ---- */
.co-input, .co-select {
  width: 100%;
  /* An explicit height, NOT vertical padding. Left to compute, a field's height
     is padding + border + whatever the browser decides its inner content box
     is — and for input[type=date] that inner box is ::-webkit-datetime-edit, a
     shadow element with its own metrics that each engine sizes differently.
     Chrome made the launch-date field 49px against 47 everywhere else; Safari
     made it shorter than everything else. Fixing the box removes the question:
     box-sizing is border-box globally, so this is 48px in every engine for
     every field type, and browsers centre a single line inside it. */
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--co-input-border);
  border-radius: 10px;
  /* 16px, not 15: iOS Safari zooms the whole page in whenever a focused input
     is under 16px, so tapping any field threw the checkout out of position. */
  font-size: 16px;
  color: var(--co-input-color);
  background: var(--co-input-bg);
  transition: border-color .15s;
  outline: none;
}
.co-input:focus, .co-select:focus { border-color: var(--co-accent); }
/* appearance:none for two reasons. macOS Safari treats our font-size as
   advisory on a native select and renders it at the system size instead, so
   the selects came out visibly smaller than the inputs beside them. And the
   native arrow differs per platform — a double chevron on Safari, a single one
   on Chrome — so the same form looked different per browser. Turning the
   native control off fixes both, at the cost of drawing the arrow ourselves. */
.co-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: var(--co-select-chevron);
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
}
.co-select:has(option[value=""]:checked) { color: var(--co-placeholder-color); }
/* Ignored by Safari, which renders the open list as a native OS menu no CSS
   can reach. Kept for the browsers that do honor it. */
.co-select option { background: var(--co-input-option-bg); color: var(--co-input-color); }
.co-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Grid items default to min-width:auto and refuse to shrink below their
   content's minimum. iOS reports a wide minimum for input[type=date] — it
   reserves room for its internal date text whatever width we ask for — so the
   launch-date cell pushed out past the card's edge on iPhone. */
.co-form-grid > * { min-width: 0; }
.co-span-2 { grid-column: 1 / -1; }
.co-field-error {
  display: none; position: absolute; top: 0; right: 0;
  font-size: 12px; font-weight: 600; color: var(--co-error);
}

/* ---- Launch date field + its help tooltip ---- */

.co-date-field { position: relative; }
/* Padding matches every other field — the "?" sits outside the input now, on
   its top-right corner, so nothing has to make room for it.
   color-scheme is what tells the browser to draw its own calendar icon and
   calendar popup light or dark — without it, a dark theme gets a near-black
   icon on a near-black field and a white popup. */
/* appearance:none stops iOS sizing the field to its own content and ignoring
   width:100%. Verified in Chrome that it does NOT remove
   ::-webkit-calendar-picker-indicator, so the icon below survives. */
.co-date-input {
  color-scheme: var(--co-color-scheme);
  appearance: none; -webkit-appearance: none;
  width: 100%;
}
/* The calendar icon is drawn by the browser and takes no color of ours, but it
   does take opacity — which touches the icon alone and nothing else in the
   field. WebKit/Blink only; Firefox has no equivalent pseudo-element and keeps
   its default icon. */
.co-date-input::-webkit-calendar-picker-indicator {
  opacity: .45; transition: opacity .18s ease; cursor: pointer;
}
.co-date-input:hover::-webkit-calendar-picker-indicator,
.co-date-input:focus::-webkit-calendar-picker-indicator { opacity: .75; }

/* A native date input takes no placeholder, so the label is painted over the
   top of it. account.js adds .co-date-input--filled once there is a value; the
   :focus half is CSS's own. Hiding the input's text rather than a pseudo
   element keeps this working in Firefox, which has no ::-webkit-datetime-edit
   to target. The calendar icon is drawn by the browser and stays visible. */
.co-date-input:not(:focus):not(.co-date-input--filled) {
  color: transparent;
  /* `color` alone is not enough. WebKit/Blink paint the date's sub-fields
     through -webkit-text-fill-color, and the year field ignores the inherited
     color — it showed through the overlay as a bare "2026". */
  -webkit-text-fill-color: transparent;
}
.co-date-input:not(:focus):not(.co-date-input--filled)::-webkit-datetime-edit {
  color: transparent; -webkit-text-fill-color: transparent;
}
/* And the reverse once there IS a date: WebKit renders the year sub-field in
   its own muted color rather than the input's, so a chosen date came out as a
   black day and month with a grey year. State it for each sub-field. */
.co-date-input--filled::-webkit-datetime-edit-month-field,
.co-date-input--filled::-webkit-datetime-edit-day-field,
.co-date-input--filled::-webkit-datetime-edit-year-field {
  color: var(--co-input-color); -webkit-text-fill-color: var(--co-input-color);
}
.co-date-overlay {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--co-placeholder-color);
  pointer-events: none; transition: opacity .18s ease;
}
.co-date-input:focus ~ .co-date-overlay,
.co-date-input--filled ~ .co-date-overlay { opacity: 0; }

.co-help-btn {
  /* Pinned to the field's top-right corner and hanging slightly off it, clear
     of both the value and the browser's own calendar icon. It overlaps the
     input's border, so the background is opaque rather than transparent —
     --co-card-bg-solid is white on the light themes and the card's own near
     black on At Work, which is what "sitting on the card" means either way. */
  position: absolute; right: -5px; top: -5px; z-index: 2;
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--co-text-muted); background: var(--co-card-bg-solid);
  color: var(--co-text-muted); font-size: 11px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color .18s ease, border-color .18s ease;
}
.co-help-btn:hover, .co-help-btn:focus-visible {
  color: var(--co-accent-text); border-color: var(--co-accent-text);
}

/* No box of its own — the bubble inside it anchors to .co-date-field. */
.co-help-passthrough { display: contents; }

/* Inline use (step 1, at the end of a sentence): the button sits in the text
   flow and the bubble hangs beneath it, centred. */
.co-help-anchor { position: relative; display: inline-block; }
.co-help-anchor .co-help-btn {
  position: static; transform: none;
  display: inline-flex; vertical-align: middle;
  margin-left: 6px; margin-top: -2px;
}
/* Hangs to the LEFT of the button rather than centred on it. The button sits
   at the end of a sentence, so a centred bubble spills past the card's right
   edge — and past the viewport on a narrow screen. Growing leftward from the
   button keeps it on the page at every width. */
.co-help-anchor .co-help-bubble {
  left: auto; right: -8px; width: min(280px, 76vw);
}
/* Colocated with the rule above, which it overrides. Narrow screens wrap the
   sentence, so the button can end up anywhere on its last line — including far
   enough left that a 280px bubble hanging leftward runs off the page. Below the
   breakpoint it stops chasing the button and spans the note instead. */
@media (max-width: 880px) {
  .co-help-anchor { position: static; }
  .co-help-anchor .co-help-bubble { left: 0; right: 0; width: auto; }
}

.co-help-bubble {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 9px);
  background: var(--co-card-bg-solid); border: 1px solid var(--co-accent-text);
  border-radius: 12px; padding: 13px 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  /* Closed state. visibility (not display) so the fade actually runs, and
     nothing inside is focusable or read aloud while it is closed. */
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.co-help-bubble--open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .2s ease, transform .2s ease, visibility 0s;
}
.co-help-text {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--co-text-secondary);
  /* The bubble is narrow (265px at phone widths), so the last line was landing
     a single word on its own — "out." Not `balance`: that would even out all
     five lines of what is body copy, where this only fixes the tail. Ignored
     by browsers that don't support it, which just wrap as before. */
  text-wrap: pretty;
}
/* Desktop points at the real list in the sidebar instead. */
.co-help-steps { display: none; }

/* The sidebar reacts to the tooltip. The two live in different subtrees, so
   account.js flags the whole page rather than this being a sibling selector. */
/* An orange-tinted glow rather than a plain drop shadow: At Work's start card
   already carries an orange outline, so a second ring would just thicken it. */
.co-launch-help-open .co-start-card {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1.5px var(--co-accent-text), 0 16px 40px rgba(238,95,0,.28);
}
.co-start-card { transition: transform .28s ease, box-shadow .28s ease; }
/* transform-origin belongs on the BASE rule, not just the open state: declared
   only on the open state it snapped back to the default centre the instant the
   class came off, while the transform was still animating — the bullet visibly
   jumped rather than settling. Same reason the resting filter is a zero
   drop-shadow instead of `none`: `none` is not interpolable, so closing had
   nothing to animate from. */
.co-start-steps li {
  transform-origin: left center;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  transition: transform .28s ease, filter .28s ease;
}
/* The one bullet the tooltip is about lifts out of the list, growing away from
   the card edge rather than into it. */
.co-launch-help-open .co-start-steps li[data-step-key='launch-date'] {
  transform: scale(1.07) translateX(5px);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.28));
}

/* Colocated with the rules above: the shared @media block sits earlier in this
   file and would lose to them. Below 880px the sidebar is display:none, so the
   tooltip grows into a real popup and carries the checklist itself. */
@media (max-width: 880px) {
  .co-help-bubble { padding: 16px 18px; }
  .co-help-steps { display: block; margin-top: 14px; }
  .co-help-steps-title {
    font-size: 12px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--co-text-muted); margin-bottom: 10px;
  }
  .co-help-steps .co-start-steps { margin: 0; }
  .co-help-steps .co-start-steps li { font-size: 13.5px; margin-bottom: 7px; }
}

/* Nothing here carries meaning on its own — it all still works as an instant
   state change. */
@media (prefers-reduced-motion: reduce) {
  .co-help-bubble, .co-date-overlay, .co-start-card, .co-start-steps li,
  .co-help-btn { transition: none; }
  .co-launch-help-open .co-start-steps li[data-step-key='launch-date'] {
    transform: none;
  }
}

/* ---- Action buttons ---- */
.co-btn-primary {
  width: 100%;
  background: var(--co-accent-text);
  color: #fff;
  border: none;
  padding: 18px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Compact variant — used in sidebars, scheduler, and mobile bar */
.co-btn-primary--compact {
  padding: 16px;
  font-size: 16px;
  border-radius: 13px;
  box-shadow: 0 10px 26px rgba(255,114,0,.3);
}
.co-btn-back {
  background: none; border: none; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--co-btn-back);
  font-size: 14px; font-weight: 600; cursor: pointer; margin-bottom: 14px;
}
.co-pricing-note {
  font-size: 12px; color: var(--co-pricing-note); line-height: 1.6;
  margin: 0 auto 14px; text-align: center; max-width: 500px;
}
.co-secure-note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; color: var(--co-secure-note);
  font-size: 13px; text-align: center; line-height: 1.5;
}

/* ---- Step 1: secondary text CTAs ---- */
.co-demo-cta {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--co-text-faint);
  text-align: center;
  text-wrap: balance;
}
.co-demo-cta a {
  color: var(--co-accent-text);
  font-weight: 700;
  text-decoration: none;
}
/* Sits above the microchurch note with a clear gap between the two. */
.co-demo-cta + .co-micro-note { margin-top: 20px; }

/* Puts "Request a demo to learn more." on its own line under the lead-in. */
.co-demo-cta-lead { display: block; }

/* Small lock ahead of the secure-checkout note (.co-secure-note is a flex row,
   so the gap handles spacing — no margin needed here). */
.co-secure-icon { width: 13px; height: 13px; flex: 0 0 auto; }

/* Sidebar card: what happens after purchase */
/* Outlined rather than filled, so it reads as a note beside the order summary
   rather than a second summary card. */
.co-start-card {
  padding: 28px; margin-top: 20px;
  background: var(--co-start-card-bg);
  border: 1.5px solid var(--co-accent);
  box-shadow: none;
}
.co-start-card h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; }
/* Step 1's closing note, inside the features card. The generous top margin and
   the rule are what keep it from reading as a seventh feature. */
.co-start-note {
  margin-top: 40px; padding-top: 26px;
  border-top: 1px solid var(--co-divider);
  /* Below 880px the help bubble anchors to this block rather than to the "?"
     itself — see .co-help-anchor. */
  position: relative;
}
.co-start-note-title {
  margin: 0 0 6px; font-size: 17px; font-weight: 800;
  letter-spacing: -.01em; color: var(--co-card-h3);
}
.co-start-note-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--co-text-secondary); }
.co-start-intro  { font-size: 14px; color: var(--co-text-secondary); line-height: 1.55; margin: 0 0 14px; }
.co-start-steps  { list-style: none; margin: 0 0 14px; padding: 0; }
.co-start-steps li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; font-weight: 700; color: var(--co-card-h3);
  line-height: 1.5; margin-bottom: 9px;
}
.co-start-steps li::before {
  content: '✓';
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  border: 1.5px solid var(--co-accent); border-radius: 50%;
  color: var(--co-accent); font-size: 10px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.co-start-steps li:last-child { margin-bottom: 0; }
.co-start-outro  { font-size: 14px; color: var(--co-text-secondary); line-height: 1.55; margin: 0; }
/* Colocated: the shared mobile block sits above this rule and would lose. */
@media (max-width: 880px) {
  .co-start-card { padding: 20px; }
}

.co-faq-link {
  margin: 0 0 20px;
  text-align: center;
  font-size: 15px;
}
.co-faq-link a {
  color: var(--co-accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Billing toggle ---- */
.co-billing-btn--active   { background: var(--co-toggle-active-bg) !important; color: var(--co-toggle-active-color) !important; font-weight: 700 !important; }
.co-billing-btn--inactive { background: transparent !important; color: var(--co-toggle-inactive-color) !important; font-weight: 600 !important; }

/* ---- Price display ---- */
.co-price-dollar { font-size: 20px; font-weight: 700; color: var(--co-price-color); vertical-align: super; line-height: 0; position: relative; top: -8px; }
.co-price-whole  { font-size: 42px; font-weight: 700; color: var(--co-price-color); letter-spacing: -.03em; line-height: 1; }
.co-price-cents  { font-size: 18px; font-weight: 700; color: var(--co-price-color); }
.co-price-unit   { font-size: 15px; font-weight: 600; color: var(--co-price-muted); margin-left: 4px; }
@media (max-width: 640px) {
  .co-price-whole  { font-size: 34px; }
  .co-price-dollar { font-size: 17px; }
  .co-price-cents  { font-size: 15px; }
}

/* ---- Reusable components ---- */

/* Checklist (success page feature list) */

/* "What to Expect" icon+text rows (demo pages) */
.co-expect-list { list-style: none; margin: 0; padding: 0; }
.co-expect-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.co-expect-item:last-child { margin-bottom: 0; }
.co-expect-icon {
  flex-shrink: 0; width: 44px; height: 44px;
  background: var(--co-accent); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.co-expect-text { font-size: 16px; color: var(--co-expect-text); line-height: 1.45; padding-top: 10px; }
.co-expect-heading     { font-size: 17px; font-weight: 800; color: var(--co-card-h3); margin-bottom: 20px; letter-spacing: -.01em; }
.co-expect-who         { border-top: 1px solid var(--co-divider); padding-top: 18px; margin-top: 24px; }
.co-expect-who--spaced { margin-bottom: 16px; }
.co-expect-who-title   { font-size: 15px; font-weight: 700; color: var(--co-card-h3); margin-bottom: 6px; }
.co-expect-who-text    { font-size: 14px; color: var(--co-expect-who-text); line-height: 1.55; }
.co-expect-cross-title { font-size: 14px; font-weight: 700; color: var(--co-card-h3); margin-bottom: 4px; }
.co-expect-cross-link  { font-size: 14px; font-weight: 700; color: var(--co-accent-text); text-decoration: none; }

/* Feature list ("Included in All Plans") */
.co-feature-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 28px 24px; }
.co-feature-item-title { font-size: 16px; font-weight: 700; color: var(--co-card-h3); margin-bottom: 5px; }
.co-feature-item-desc  { font-size: 14px; color: var(--co-text-secondary); line-height: 1.55; }

/* ---- Footer ---- */
.co-footer { margin-top: auto; border-top: 1px solid var(--co-footer-border); background: transparent; }
.co-footer-inner { max-width: 1250px; margin: 0 auto; padding: 22px var(--co-page-gutter); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; width: 100%; }
.co-footer-links { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; }
.co-footer-links a, .co-footer-links span { color: var(--co-footer-span); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.co-footer-privacy { display: inline-flex; align-items: center; gap: 8px; color: var(--co-footer-span); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.co-footer-privacy img { width: 16px; height: 16px; display: block; }
.co-footer-copy { color: var(--co-footer-copy); font-size: 13px; }

/* ---- reCAPTCHA ---- */
.g-recaptcha, .recaptcha-div, .recaptcha-webtolead {
  transform: scale(0.62);
  -webkit-transform: scale(0.62);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  margin: 0 -120px -20px 0;
}

/* ---- Responsive ---- */
.co-steps-standalone { display: none; }

@media (max-width: 900px) {
  .co-header-pill .co-steps { display: none; }
  .co-steps-standalone {
    display: flex;
    align-items: center;
    margin-top: 17px;
    padding: 0 var(--co-page-gutter) 14px;
  }
  .co-steps-standalone .co-step-label { display: none; }
  .co-steps-standalone .co-step-bar   { flex: 1; min-width: 0; width: auto; }
}
.co-plan-size-label { color: var(--co-plan-size-label); font-size: 18px; font-weight: 700; margin-bottom: 29px; }
.co-plan-intro      { padding-top: 48px; }
.co-plan-intro--step2 { padding-top: 40px; }
.co-plan-heading    { font-size: 38px; font-weight: 800; letter-spacing: -.03em; margin: 0; color: var(--co-plan-heading); }
.co-plan-subhead    { font-size: 17px; color: var(--co-plan-subhead); line-height: 1.5; margin: 8px 0 0; }
.co-plan-intro--step2 .co-plan-subhead { margin-top: 10px; }

/* ---- Billing toggle ---- */
.co-billing-wrap {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--co-billing-wrap-bg); border-radius: 999px; padding: 4px;
}
.co-billing-btn {
  padding: 9px 22px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 15px; font-family: inherit; transition: all .18s;
  background: transparent; color: var(--co-toggle-inactive-color); font-weight: 600;
}
/* Compact variant: toggle sits inside the plan card rather than above the grid. */
.co-billing-slot                          { margin-bottom: 20px; }
.co-billing-wrap--compact                 { padding: 3px; }
.co-billing-wrap--compact .co-billing-btn { padding: 7px 18px; font-size: 14px; }

/* ---- Plan card: size header ---- */
.co-plan-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  /* Positioning context for .co-price-note, which lines up with the size
     label at the top of the row rather than sitting next to the price. */
  position: relative;
}
.co-plan-size-row   { display: flex; align-items: baseline; gap: 8px; }
.co-plan-size-value { font-size: 36px; font-weight: 800; color: var(--co-price-color); letter-spacing: -.02em; }
.co-plan-size-unit  { font-size: 15px; color: var(--co-price-muted); font-weight: 600; }
.co-plan-alt-label  { text-align: right; font-size: 18px; font-weight: 800; color: var(--co-price-color); }

/* The price disclaimer. ABSOLUTE on purpose, and anchored to the head row
   rather than the price: it sits at the top right, on the size label's line
   ("Weekly Attendance"), not against the price figure. The row is
   align-items:flex-end, so anything in the flow here would push the price up
   and break the alignment between its bottom edge and the tier figure. */
.co-price-note {
  position: absolute; top: 6px; right: 0;
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--co-text-faint);
  white-space: nowrap; pointer-events: none;
}

/* Flat-price brands (one tier, no slider — Microchurch). Without a slider the
   card is a single row, so the price leads: it IS the offer, where on a tiered
   brand the size the visitor picks is. Attendance stays for reassurance but
   steps back. Keyed off a modifier class rather than a brand stylesheet so any
   future flat brand inherits it. */
.co-plan-card--flat { padding-top: 40px; padding-bottom: 40px; }
.co-plan-card--flat .co-plan-size-label { margin-bottom: 10px; }
.co-plan-card--flat .co-plan-size-value { font-size: 28px; }
.co-plan-card--flat .co-price-whole  { font-size: 64px; }
.co-plan-card--flat .co-price-dollar { font-size: 28px; top: -14px; }
.co-plan-card--flat .co-price-cents  { font-size: 24px; }
.co-plan-card--flat .co-price-unit   { font-size: 17px; }
/* Colocated: the shared @media section is declared earlier in this file and
   would lose to the rules above. */
@media (max-width: 880px) {
  .co-plan-card--flat .co-price-whole  { font-size: 48px; }
  .co-plan-card--flat .co-price-dollar { font-size: 22px; top: -10px; }
  .co-plan-card--flat .co-price-cents  { font-size: 19px; }
}

/* ---- Plan card: slider ---- */
.co-slider-row    { position: relative; height: 44px; display: flex; align-items: center; margin: 24px 0 6px; }
.co-slider-track  { position: absolute; left: 0; right: 0; height: 8px; border-radius: 999px; background: var(--co-slider-track-bg); }
.co-slider-fill   { position: absolute; left: 0; height: 8px; border-radius: 999px; background: var(--co-slider-fill-bg); }
.co-slider-ticks  { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
.co-slider-thumb  {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--co-slider-thumb-bg); border: 4px solid var(--co-accent);
  box-shadow: 0 5px 16px rgba(255,114,0,.45); pointer-events: none;
}
.co-slider-input  { position: absolute; left: 0; right: 0; width: 100%; height: 44px; margin: 0; opacity: 0; cursor: pointer; }
.co-slider-bounds { display: flex; justify-content: space-between; color: var(--co-text-faint); font-size: 13px; font-weight: 600; }

/* ---- Feature list icons ---- */
.co-feature-icon {
  width: var(--co-feature-icon-size); height: var(--co-feature-icon-size);
  display: block; margin-bottom: 12px;
}

/* ---- Summary card: alternate states (micro / custom quote) ---- */
.co-summary-alt-text { font-size: 14px; color: var(--co-text-secondary); line-height: 1.5; margin: 0 0 18px; }
.co-summary-alt-btn  {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--co-toggle-active-bg); color: var(--co-toggle-active-color);
  border: none; padding: 16px; border-radius: 13px;
  font-size: 16px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none;
}
.co-summary-alt-btn--accent { background: var(--co-accent-text); color: #fff; margin-bottom: 10px; }
.co-plan-cta { margin-top: 20px; }

/* ---- Microchurch upsell (RNM) ---- */
.co-micro-note      { margin: 14px 0 0; }
.co-micro-note-text { font-size: 13px; color: var(--co-text-faint); line-height: 1.5; margin: 0 0 10px; text-align: center; }
.co-micro-note-btn  {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--co-micro-gradient); color: #fff; border: none;
  padding: 14px; border-radius: 13px;
  font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none;
}

/* ---- Audience tabs (Schools) ---- */
/* The background is a token, not a literal. It used to be an inline
   background:#fff in PlanPage.astro, which was invisible on a dark brand and,
   being inline, could not be overridden from a theme at all. */
.co-school-tabs {
  display: flex; gap: 4px;
  background: var(--co-tabs-bg); border-radius: 16px; padding: 4px;
}
@media (max-width: 880px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-sidebar { display: none; }
  .co-feature-list { grid-template-columns: 1fr; }
  lottie-player { width: 55px !important; height: 55px !important; }

  /* Plan page — mobile typography + layout */
  .co-plan-intro   { padding-top: 0 !important; }
  .co-plan-heading { font-size: 26px !important; }
  .co-plan-subhead  { font-size: 14px !important; }
  .co-plan-size-label { text-align: center; font-size: 17px; margin-bottom: 15px; }
  #plan-label { font-size: 24px !important; color: #FF7200 !important; text-align: center; display: block; }
  #plan-price { text-align: center; }
  .co-plan-size-unit { display: none; }
  #plan-slider { margin-bottom: 0 !important; }
}

/* ---- Mobile bottom bar (plan page) ---- */
.co-mobile-bar { display: none; }
@media (max-width: 880px) {
  .co-mobile-bar {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    gap: 10px;
    padding: 14px var(--co-page-gutter) 16px;
    background: var(--co-card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--co-card-border);
    box-shadow: 0 -4px 24px rgba(0,0,0,.10);
    z-index: 200;
  }
  .co-mobile-bar-rows { display: flex; flex-direction: column; gap: 3px; width: 100%; }
  .co-mobile-bar-row  { display: flex; justify-content: space-between; align-items: baseline; }
  .co-mobile-bar-key  { font-weight: 600; color: var(--co-mobile-bar-key); }
  .co-mobile-bar-val  { font-weight: 800; color: var(--co-body-color); }
  .co-mobile-bar-row:first-child .co-mobile-bar-key { font-size: 16px; font-weight: 400; }
  .co-mobile-bar-row:first-child .co-mobile-bar-val { font-size: 17px; }
  .co-mobile-bar-row:last-child .co-mobile-bar-key  { font-size: 19px; color: var(--co-mobile-bar-key); }
  .co-mobile-bar-row:last-child .co-mobile-bar-val  { font-size: 23px; }
  .co-mobile-bar-btns { display: flex; gap: 10px; }
  .co-mobile-bar-btns .co-mobile-bar-btn { flex: 1; width: auto !important; }
  .co-mobile-bar-btn  { width: 100% !important; padding: 14px !important; font-size: 15px !important; border-radius: 12px !important; }
  .co-mobile-bar-micro-btn { background: linear-gradient(135deg,#5b52e8,#9b6dbf,#e8835c) !important; }
  body.has-mobile-bar { padding-bottom: 128px; }
  .co-card { padding: 20px; }
}
@media (max-width: 640px) {
  .co-header-pill  { padding: 0 12px 0 16px; }
  .co-form-grid    { grid-template-columns: 1fr; }
  .co-footer-inner { padding: 18px var(--co-page-gutter); }
  .co-feature-list { gap: 20px; }
}

/************** Cookie Consent Styles **************/

.osano-cm-button { border-style: none; }
.osano-cm-dialog { padding: 1.5em 2.3em 1.5em 2em; font-size: .9em; }
.osano-cm-widget { display: none; }

/* ---- Success page ---- */
.co-success-main   { padding-top: 56px; padding-bottom: 72px; }
.co-success-intro  { text-align: center; margin-bottom: 54px; animation: rnmfade .6s ease both; }
.co-success-lottie { width: 65px; height: 65px; margin: 0 auto 16px; display: block; }
.co-success-heading { line-height: 1.05; text-wrap: balance; }
.co-success-subhead { margin: 10px auto 0; max-width: 560px; text-wrap: balance; }
/* Emphasised clause inside the success subhead */
/* The emphasised clause is the next action, so it gets its own line rather than
   starting and ending mid-line. As an inline span its bold run began wherever
   the greeting happened to end, which left a ragged block of bold across three
   lines — and the longer the brand name, the worse it read. */
.co-success-subhead strong { display: block; color: var(--co-body-color); font-weight: 700; }

/* Lead-in above the two routes */
.co-why {
  max-width: 560px; margin: 6px auto 30px; text-align: center;
  font-size: 16.5px; line-height: 1.55; color: var(--co-body-color);
}
/* Colocated with the rule above, which is declared after the shared @media
   section and would otherwise win the cascade.
   14px matches .co-plan-subhead's mobile size, so this reads as a continuation
   of the paragraph above it rather than a step up in scale. */
@media (max-width: 880px) {
  .co-why { font-size: 14px; }
}

/* Section heading above the lead-in. Tried flanking rules here once; they
   looked wrong at every width, so it is a plain centered heading. */
.co-launch-heading {
  font-size: 28px; font-weight: 800; letter-spacing: -.02em;
  text-align: center; margin: 38px 0 0; color: var(--co-launch-heading);
}

/* Two launch routes */
/* Equal widths. align-items:start is deliberate — the Calendly embed needs a
   fixed 700px and the checklist is much shorter, so stretching the checklist
   to match would leave it a third empty. The cards are meant to be uneven.
   The divider opts back into stretch so its rules still span the full height. */
.co-launch-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px;
  align-items: start;
}
.co-launch-grid > .co-launch-or { align-self: stretch; }
.co-launch-grid > .co-card { margin-bottom: 0; }
/* One route (a brand with no onboarding calendar): a single centered card
   rather than a full-width slab of checklist. */
.co-launch-grid--single {
  grid-template-columns: minmax(0, 620px); justify-content: center;
}
/* Colocated on purpose: this block lives after the shared @media section, so a
   stacking rule declared up there would lose the cascade to the line above. */
@media (max-width: 880px) {
  .co-launch-grid { grid-template-columns: 1fr; }
}

/* "OR" divider between the two routes. The rules run vertically on desktop and
   flip horizontal once the cards stack. */
.co-launch-or {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--co-text-secondary);
}
.co-launch-or::before,
.co-launch-or::after {
  content: ''; flex: 1; width: 1px; background: var(--co-launch-or-line);
}
@media (max-width: 880px) {
  .co-launch-or { flex-direction: row; gap: 16px; }
  .co-launch-or::before,
  .co-launch-or::after { width: auto; height: 1px; }
}
.co-launch-head  { display: flex; align-items: center; gap: 11px; margin: 0 0 6px; }
.co-launch-icon  { flex: 0 0 auto; display: block; }
/* Scoped through .co-launch-head to outrank `.co-card h3`, which would
   otherwise add its own 18px bottom margin under the title. */
.co-launch-head .co-launch-title { font-size: 28px; font-weight: 800; margin: 0; color: var(--co-card-h3); }
/* Colocated with the rule it modifies: the shared @media section sits earlier
   in this file, so a size set up there would lose to the line above. */
@media (max-width: 880px) {
  .co-launch-head .co-launch-title { font-size: 24px; }
}
.co-launch-lead  { font-size: 14.5px; color: var(--co-text-secondary); margin: 0 0 24px; }
/* Colocated deliberately. This lived in the shared @media block much earlier in
   the file, where the base rule above silently beat it and mobile rendered
   14.5px like everywhere else — the size never applied. */
@media (max-width: 880px) {
  .co-launch-lead { font-size: 14px; }
}
.co-launch-undercopy { font-size: 13.5px; color: var(--co-text-secondary); margin: 2px 0 0; }

/* Launch checklist */
/* The 24px below matches .co-launch-lead's own bottom margin, so the gap under
   the checklist reads the same as the gap above it — and the same as the
   spacing in the guided card next door. */
.co-tasklist { list-style: none; margin: 0 0 24px; padding: 0; }
.co-task {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 10px; font-size: 15px;
  /* Pull the rows back out to the card's text edge — the inline padding only
     exists so the "next" highlight has room to breathe around the text. */
  margin: 0 -10px;
  border-bottom: 1px solid var(--co-task-divider);
}
.co-tasklist .co-task:last-child { border-bottom: 0; }
.co-task--next { background: var(--co-task-next-bg); }
/* Circle markers carry the state:
   done -> orange ring + orange check | next -> orange ring | ahead -> grey ring */
.co-task-box {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--co-task-box);
  flex: 0 0 auto; margin-top: 3px; position: relative;
}
.co-task--done .co-task-box,
.co-task--next .co-task-box { border-color: var(--co-accent); }
.co-task--done .co-task-box::after {
  content: '✓'; color: var(--co-accent);
  font-size: 11px; font-weight: 700; line-height: 1;
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
}
.co-task--done .co-task-text { color: var(--co-text-secondary); }
.co-task-text { flex: 1; }
.co-task-sub  { display: block; font-size: 12.5px; margin-top: 1px; color: var(--co-text-muted); }
.co-task-sub--accent { color: var(--co-accent-text); font-weight: 600; }

/* Row pills — same shape, different tone */
.co-pill {
  margin-left: auto; align-self: center; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px;
}
.co-pill--next   { color: #fff; background: var(--co-accent-text); }
.co-pill--urgent { color: var(--co-pill-urgent-fg); background: var(--co-pill-urgent-bg); }

/* Guided route */
/* "45 minutes · Free", directly above the calendar. With the embed loaded as
   hide_event_type_details=1 this is the only place the duration is stated. */
.co-sched-metalabel {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--co-text-muted); margin-bottom: 16px;
}

/* Calendly inline embed. The iframe cannot size itself, so the height is ours
   to set — and the calendar is simply taller than the checklist beside it, so
   the two cards are deliberately uneven rather than the calendar scrolling
   inside a short box. Calendly stacks its columns on narrow screens and needs
   noticeably more room there.

   It MUST be `height`, not `min-height`: widget.js injects an iframe styled
   height:100%, and a percentage height resolves against the parent's `height`
   property. Against `height:auto` it has nothing to resolve to and the iframe
   collapses to a sliver. */
.co-calendly { height: 700px; }
/* Opaque, unlike every other card: the iframe inside it is opaque, so a
   translucent card lets the page gradient show through around an embed that
   doesn't get it — a visible rectangle where the two meet. */
.co-launch-card--calendar { background: var(--co-card-bg-solid); }
/* Colocated with the rule it modifies: the shared @media section sits earlier
   in this file, so a height set up there would lose to the line above. */
@media (max-width: 880px) {
  .co-calendly { height: 1000px; }
}