/* Cura Core · site.css
   The public website, in the approved "Bento" look (design/bento-home-approved.html):
   a stack of raised plates, the logo's own motif.
     .lift      every plate (card, tile, path, benefit, step, board, price, policy card) lifts
                straight up 6px with a very slight scale and catches a soft top-down light on
                hover and keyboard focus. It never tilts toward the pointer. Touch screens get a
                small press instead; reduced motion turns the movement off.
     .site-head the floating rounded pill header; the four tabs in a pill rail, the active one a raised navy pill
     .bento     the home mosaic: navy headline plate, teal phone plate, two path plates, two benefit plates
     .w-hero    the navy plate that opens every other page, with a raised glass card on the right
     .w-sec     a section; .w-alt fades white to paper. .w-head: eyebrow and serif title left, one line right
     .w-card    the one white plate; .dark is the featured navy one. .w-ico is the gradient "cube" icon tile
     .w-steps   numbered coin steps joined by a dashed line
     .cta-band  the rounded closing band with the faint logo stack, then the dark footer
   Buttons are raised and fully rounded: gradient, inner highlight, a bottom edge, and a press-down on click.
   Colours, fonts and the logo come from tokens.css; the few in-between shades below are the mockup's own. */

/* ---------------- plate system ---------------- */

.site {
  --paper-2: #EDE8DD;
  --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --lift: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 2px 4px rgba(22, 34, 44, .06), 0 12px 24px -8px rgba(22, 34, 44, .14), 0 28px 48px -24px rgba(22, 34, 44, .22);
  --lift-hi: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 4px 8px rgba(22, 34, 44, .08), 0 22px 40px -12px rgba(22, 34, 44, .24), 0 44px 70px -30px rgba(22, 34, 44, .34);
  --lift-dark: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 20px 50px -20px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .3);
  --lift-navy: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 40px 70px -30px rgba(22, 34, 44, .75);
  --lift-navy-hi: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 54px 90px -34px rgba(22, 34, 44, .85);
  --ease-plate: cubic-bezier(.2, .8, .2, 1);
  --sh: var(--lift); --sh-hi: var(--lift-hi);
  background: var(--bg); min-height: 100vh; color: var(--ink); overflow-x: clip;
}
.site main:focus { outline: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.site :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Dark plates: mint focus ring, cream text. */
.site .w-hero-in, .site .t-head, .site .t-scene, .site .w-card.dark, .site .w-board, .site .w-price.featured, .site .vp-main, .site .w-aside-cta, .site .cta-band, .site .w-hcard {
  --focus: var(--mint); color-scheme: dark;
}

.site .lift {
  position: relative; box-shadow: var(--sh);
  transform: translateY(0) scale(1);
  transition: transform .35s var(--ease-plate), box-shadow .35s var(--ease-plate);
}
.site .lift::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 45%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity .35s ease;
}
a.lift, a.lift:hover { text-decoration: none; color: inherit; }
@media (hover: hover) {
  .site .lift:hover { transform: translateY(-6px) scale(1.012); box-shadow: var(--sh-hi); }
  .site .lift:hover::after { opacity: 1; }
}
/* Keyboard focus gets the same lift as hover: on the plate itself, or on the plate holding the focused control. */
.site .lift:focus-visible, .site .lift:has(:focus-visible) {
  transform: translateY(-6px) scale(1.012); box-shadow: var(--sh-hi);
  transition: transform .35s var(--ease-plate), box-shadow .35s var(--ease-plate);
}
.site .lift:focus-visible { outline-offset: 4px; }
.site .lift:focus-visible::after, .site .lift:has(:focus-visible)::after { opacity: 1; }
/* Touch screens: no hover, a small press instead. */
@media (hover: none) {
  .site .lift { -webkit-tap-highlight-color: transparent; }
  .site .lift:active { transform: translateY(-3px) scale(1.006); box-shadow: var(--sh-hi); transition-duration: .15s; }
  .site .lift:active::after { opacity: 1; }
}

/* ---------------- buttons: raised, fully rounded, press down on click ---------------- */

.site .btn {
  border: 0; border-radius: 999px; min-height: 44px; padding: 0 20px; gap: 10px; font: 600 15px/1 var(--font-sans);
  position: relative; filter: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.site .btn .i { width: 18px; height: 18px; transition: transform .2s ease; }
.site .btn:active:not(:disabled) { transform: translateY(2px) scale(.98); filter: none; }
.site .btn-lg { min-height: 48px; padding: 0 22px; font-size: 15.5px; border-radius: 999px; }
.site .btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; gap: 6px; border-radius: 999px; }
.site .btn-sm .i { width: 15px; height: 15px; }
.site .btn-primary {
  color: #fff; background: linear-gradient(180deg, #1E6EA2 0%, var(--blue-deep) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 -2px 0 rgba(0, 0, 0, .18) inset, 0 6px 14px -4px rgba(19, 75, 112, .55), 0 2px 0 #0E3A57;
}
.site .btn-primary:hover { color: #fff; background: linear-gradient(180deg, #1E6EA2 0%, var(--blue-deep) 100%); }
.site .btn-white {
  color: var(--navy); background: linear-gradient(180deg, #fff, #ECE7DC);
  box-shadow: 0 1px 0 #fff inset, 0 6px 16px -6px rgba(0, 0, 0, .45), 0 2px 0 #C9C1B1;
}
.site .btn-white:hover { color: var(--navy); background: linear-gradient(180deg, #fff, #ECE7DC); }
.site .btn-glass {
  color: #fff; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset, 0 8px 20px -10px rgba(0, 0, 0, .6);
}
.site .btn-glass:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.site .btn-secondary {
  color: var(--ink); background: var(--surface);
  box-shadow: 0 0 0 1px var(--line) inset, 0 4px 10px -6px rgba(22, 34, 44, .2), 0 2px 0 var(--line);
}
.site .btn-secondary:hover { color: var(--ink); background: var(--surface); }
.site .btn-ghost { color: var(--ink-2); background: transparent; box-shadow: 0 0 0 1px var(--line) inset; }
.site .btn-ghost:hover { color: var(--ink); background: var(--surface); }
@media (hover: hover) {
  .site .btn:hover > .i:last-child:not(:first-child) { transform: translateX(3px); }
  .site .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 -2px 0 rgba(0, 0, 0, .18) inset, 0 12px 22px -6px rgba(19, 75, 112, .6), 0 4px 0 #0E3A57; }
  .site .btn-white:hover { transform: translateY(-2px); box-shadow: 0 1px 0 #fff inset, 0 14px 26px -8px rgba(0, 0, 0, .5), 0 4px 0 #C9C1B1; }
  .site .btn-glass:hover { transform: translateY(-2px); }
  .site .btn-secondary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--line-2) inset, 0 10px 18px -8px rgba(22, 34, 44, .25), 0 3px 0 var(--line); }
}
.site .btn-secondary.busy::after, .site .btn-ghost.busy::after, .site .btn-white.busy::after { border-color: var(--blue) var(--blue) transparent transparent; }

/* form controls: softer, rounder */
.site .input, .site select.input, .site textarea.input { border-radius: var(--r-sm); }
.site .input-icon .input { border-radius: 999px; }

/* ---------------- frame: the floating pill header ---------------- */

.w-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 999px;
  background: var(--cover); color: #fff; font: 600 14px/1.2 var(--font-sans);
}
.w-skip:focus { top: 12px; }

.site-head { position: sticky; top: 0; z-index: 50; padding: 14px 0; pointer-events: none; }
.site-head .in { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.site-head .head-bar {
  pointer-events: auto; display: flex; align-items: center; gap: 22px; padding: 10px 10px 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 0 0 1px rgba(227, 221, 209, .9) inset, 0 10px 30px -14px rgba(22, 34, 44, .28);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-head.scrolled .head-bar { background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(227, 221, 209, .9) inset, 0 14px 34px -14px rgba(22, 34, 44, .36); }
.site-head .brand, .site-head .brand:hover { padding: 0; color: var(--ink); border: 0; margin: 0; flex: none; text-decoration: none; }
.site-head .brand-name { font-size: 22px; font-weight: 500; }
.site-head .brand-name .core { color: var(--teal-ink); }
.site-head .brand-name small { white-space: nowrap; color: var(--ink-3); }
.site-nav { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--paper-2); box-shadow: 0 1px 2px rgba(22, 34, 44, .08) inset; margin-left: 8px; }
.site-nav a, .site-tabs a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px; border-radius: 999px;
  font: 500 14.5px/1 var(--font-sans); white-space: nowrap; color: var(--ink-2); text-decoration: none;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.site-nav a:hover, .site-tabs a:hover { color: var(--ink); background: rgba(255, 255, 255, .7); text-decoration: none; }
.site-nav a.on, .site-tabs a.on, .site-nav a.on:hover, .site-tabs a.on:hover {
  color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 12px -4px rgba(22, 34, 44, .5);
}
.site-head .actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.site-head .actions .btn { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
/* Page tabs for narrow screens: the same pill rail, under the bar. */
.site-tabs { display: none; }

/* ---------------- the home mosaic ---------------- */

.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(120px, auto); gap: 16px; padding-top: 4px; }
.b-tile { border-radius: var(--r-xl); padding: 28px; overflow: hidden; min-width: 0; }
.t-head {
  grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; color: var(--cover-ink);
  background: radial-gradient(70% 90% at 100% 0%, rgba(30, 156, 138, .45), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(23, 91, 135, .5), transparent 60%), var(--navy);
  --sh: 0 40px 80px -40px rgba(22, 34, 44, .8); --sh-hi: 0 54px 96px -40px rgba(22, 34, 44, .9);
}
.t-head .w-kicker { align-self: flex-start; }
.t-head h1 { font: 500 clamp(40px, 5vw, 70px)/1.06 var(--font-serif); letter-spacing: -.015em; color: #fff; margin: 18px 0 16px; text-wrap: balance; }
.t-head h1 em { font-style: italic; color: var(--mint); }
.t-head .w-lead { margin: 0; color: var(--cover-ink); max-width: 52ch; }
.t-head .w-btns { margin-top: 26px; }
/* teal-ink at the top so the white copy keeps AA contrast; the teal comes up behind the phone */
.t-scene {
  grid-column: span 2; grid-row: span 2; position: relative; padding: 24px 22px 0; color: #fff;
  background: linear-gradient(175deg, var(--teal-ink) 0%, #0E7F70 45%, var(--teal) 100%);
  --sh: 0 40px 70px -40px rgba(11, 107, 94, .8); --sh-hi: 0 54px 90px -40px rgba(11, 107, 94, .9);
}
.t-scene h2 { font: 500 22px/1.2 var(--font-serif); color: #fff; }
.t-scene p { color: rgba(255, 255, 255, .92); font: 400 14px/1.5 var(--font-sans); margin: 6px 0 0; }
.t-path { grid-column: span 3; display: block; background: var(--surface); color: var(--ink); }
.t-path .k { display: block; font: 500 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.t-path b { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 500 26px/1.15 var(--font-serif); margin: 10px 0 6px; color: var(--navy); }
.t-path b .i { width: 22px; height: 22px; color: var(--teal-ink); flex: none; transition: transform .2s ease; }
.t-path:hover b .i, .t-path:focus-visible b .i { transform: translateX(4px); }
.t-path .t { display: block; font: 400 15.5px/1.5 var(--font-sans); color: var(--ink-2); }
.t-ben { grid-column: span 3; display: flex; gap: 16px; align-items: center; padding: 22px 24px; background: var(--surface); font: 500 16px/1.35 var(--font-sans); color: var(--ink); }
.t-ben small { display: block; color: var(--ink-3); font-size: 13.5px; font-weight: 400; margin-top: 2px; }

/* the phone on the teal plate */
.h-phone {
  position: relative; width: 176px; margin: 20px auto -24px; padding: 8px; border-radius: 30px; transform: rotate(-4deg);
  background: linear-gradient(160deg, #2A3B49, #0F1820); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 40px 70px -24px rgba(0, 0, 0, .8);
}
.h-phone .scr { border-radius: 23px; background: #fff; padding: 14px 12px 16px; color: var(--ink); }
.h-phone .top { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.h-phone .top i { width: 18px; height: 18px; border-radius: 5px; background: var(--paper-2); display: grid; place-items: center; font: normal 600 7.5px var(--font-sans); color: var(--ink-2); flex: none; }
.h-phone .top span { font: 600 9px var(--font-sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-phone .h { font: 500 14px/1.2 var(--font-serif); margin: 10px 0 2px; }
.h-phone .s { font: 500 8.5px var(--font-mono); color: var(--ink-3); }
.h-phone .box { margin: 9px 0; padding: 8px; border-radius: 9px; background: var(--teal-soft); font: 9.5px/1.4 var(--font-sans); }
.h-phone .box b { display: block; font: 600 7.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-ink); margin-bottom: 2px; }
.h-phone .lbl { font: 600 8px var(--font-sans); color: var(--ink-2); margin-bottom: 4px; }
.h-phone .sig { border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 8px; font: italic 400 11px var(--font-serif); }
.h-phone .go { margin-top: 8px; border-radius: 9px; padding: 8px; text-align: center; color: #fff; font: 600 10px var(--font-sans); background: linear-gradient(180deg, #0E7F70, var(--teal-ink)); box-shadow: 0 2px 0 #08554B; }

/* ---------------- the navy plate that opens every other page ---------------- */

.w-hero { padding-top: 4px; }
.w-hero-in {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 34px; padding: 64px 56px; color: var(--cover-ink);
  background: radial-gradient(70% 90% at 100% 0%, rgba(30, 156, 138, .42), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(23, 91, 135, .5), transparent 60%), var(--navy);
  box-shadow: 0 40px 80px -40px rgba(22, 34, 44, .8);
}
.w-hero-in::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.w-hero-in.has-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 40px 56px; align-items: center; }
.w-hero-side { min-width: 0; }
.w-hero-copy { max-width: 760px; min-width: 0; }
.w-kicker {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset;
  font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint);
}
.w-kicker i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(180deg, var(--teal), #137C6E); box-shadow: 0 0 0 4px rgba(127, 214, 199, .15); }
.w-kicker i::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.w-hero h1 {
  font: 500 clamp(38px, 4.2vw, 56px)/1.06 var(--font-serif); letter-spacing: -.015em;
  color: #fff; margin: 20px 0 0; max-width: 22ch; text-wrap: balance;
}
.w-hero h1 em { font-style: italic; font-weight: 500; color: var(--mint); }
.w-lead { font: 400 18px/1.55 var(--font-sans); color: var(--cover-ink); max-width: 60ch; margin: 16px 0 0; }
.w-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.w-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 500 14px/1.4 var(--font-sans); color: var(--cover-ink-2); margin-bottom: 4px; }
.w-crumbs a { color: var(--cover-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cover-line-2); }
.w-crumbs a:hover { color: #fff; }
.w-crumbs .i { width: 14px; height: 14px; color: var(--cover-label); }
.w-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px; font: 500 14px/1.4 var(--font-sans); color: var(--cover-ink-2); }
.w-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(127, 214, 199, .12); box-shadow: 0 0 0 1px rgba(127, 214, 199, .4) inset; color: var(--mint); font: 600 13px/1.2 var(--font-sans); }
.w-pill .i { width: 14px; height: 14px; }

/* the raised glass card on the right of a page hero */
.site .w-hcard {
  border-radius: 26px; padding: 24px; color: var(--cover-ink);
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  --sh: 0 0 0 1px rgba(255, 255, 255, .12) inset, var(--lift-dark);
  --sh-hi: 0 0 0 1px rgba(127, 214, 199, .45) inset, 0 30px 60px -24px rgba(0, 0, 0, .7);
}
.w-hcard-h { font: 500 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); padding-bottom: 14px; border-bottom: 1px solid var(--cover-line); }
.w-hcard-f { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--cover-line); display: flex; justify-content: space-between; align-items: center; gap: 4px 16px; flex-wrap: wrap; font: 13.5px/1.4 var(--font-sans); color: var(--cover-ink-2); }
.w-hcard-f a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--mint); }
.w-hcard-f a .i { width: 15px; height: 15px; }
.w-hcard-f a:hover { color: #fff; }

/* Policies: each live or in-development state with its three services */
.w-hst { width: 100%; border-collapse: collapse; font-family: var(--font-sans); }
.w-hst thead th { padding: 14px 4px 8px; font: 600 11.5px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--cover-label); text-align: center; }
.w-hst tbody th { padding: 8px 8px 8px 0; text-align: left; font: 500 18px/1.2 var(--font-serif); color: var(--cover-cream); white-space: nowrap; }
.w-hst td { padding: 5px 4px; text-align: center; }
.w-hst tbody tr + tr { border-top: 1px solid var(--cover-line); }
.w-hst-b {
  display: inline-grid; place-items: center; width: 100%; max-width: 76px; min-height: 36px; border-radius: 999px; cursor: pointer;
  border: 0; box-shadow: 0 0 0 1px var(--cover-line-2) inset; background: transparent; color: var(--cover-ink-2);
  transition: box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.w-hst-b .i { width: 17px; height: 17px; }
.w-hst-b .dash { font: 600 15px/1 var(--font-sans); }
.w-hst-b.live { background: rgba(127, 214, 199, .14); box-shadow: 0 0 0 1px rgba(127, 214, 199, .5) inset; color: var(--mint); }
.w-hst-b:hover { box-shadow: 0 0 0 1px var(--mint) inset, 0 6px 12px -6px rgba(0, 0, 0, .6); background: var(--cover-hover); }
.w-hst-b:active { transform: translateY(1px) scale(.97); }
.w-hst-key { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; }
.w-hst-key > span { display: inline-flex; align-items: center; gap: 5px; }
.w-hst-key .i { width: 13px; height: 13px; }

/* Pricing: how pricing works; Get started: what happens next */
.w-hlist, .w-hsteps { list-style: none; margin: 0; padding: 0; }
.w-hlist li, .w-hsteps li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--cover-line); }
.w-hlist li:last-child, .w-hsteps li:last-child { border-bottom: 0; padding-bottom: 0; }
.w-hlist-i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(145deg, #2BB39F, var(--teal-ink)); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 8px 14px -6px rgba(0, 0, 0, .5); }
.w-hlist-i .i { width: 18px; height: 18px; }
.w-hsteps .n { width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; flex: none; font: 500 15px/1 var(--font-serif); font-variant-numeric: lining-nums; color: var(--navy); background: linear-gradient(145deg, #fff, var(--mint)); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -2px 0 rgba(0, 0, 0, .14) inset, 0 6px 12px -6px rgba(0, 0, 0, .6); }
.w-hlist b, .w-hsteps b { display: block; font: 600 15.5px/1.35 var(--font-sans); color: #fff; }
.w-hlist li div > span, .w-hsteps li div > span { display: block; font: 14px/1.5 var(--font-sans); color: var(--cover-ink-2); margin-top: 2px; }

/* What's included: at a glance */
.w-hgroup { padding: 14px 0 0; }
.w-hgroup + .w-hgroup { margin-top: 14px; border-top: 1px solid var(--cover-line); }
.w-hgroup-h { display: flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--cover-label); margin-bottom: 8px; }
.w-hgroup-h .i { width: 14px; height: 14px; color: var(--mint); }
.w-hticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.w-hticks li { display: flex; gap: 10px; align-items: flex-start; font: 14.5px/1.45 var(--font-sans); color: var(--cover-ink); padding: 3px 0; }
.w-hticks .i { width: 16px; height: 16px; color: var(--mint); flex: none; margin-top: 2px; }

/* One policy: the facts */
.w-facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; margin: 0; }
.w-facts > div { padding: 12px 0; border-bottom: 1px solid var(--cover-line); min-width: 0; }
.w-facts > div.wide { grid-column: 1 / -1; }
.w-facts > div:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
.w-facts dt { font: 600 11.5px/1.2 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--cover-label); }
.w-facts dd { margin: 5px 0 0; font: 500 15.5px/1.4 var(--font-sans); color: #fff; overflow-wrap: anywhere; }
.w-facts dd.mono { font-family: var(--font-mono); font-size: 14.5px; }

/* ---------------- sections and their heads ---------------- */

.w-sec { padding: 96px 0; }
.w-alt { background: linear-gradient(180deg, #fff, var(--bg)); }
.w-sec-tight { padding: 48px 0 96px; }
#pk-body > .w-sec:first-child { padding-top: 56px; }
.w-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px 40px; margin-bottom: 40px; }
.w-head > div:first-child { min-width: 0; max-width: 680px; }
.w-head-r { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 46ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink); }
.eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--blue)); flex: none; }
.w-head h2 { font: 500 clamp(32px, 4vw, 46px)/1.08 var(--font-serif); letter-spacing: -.015em; margin-top: 14px; color: var(--ink); text-wrap: balance; max-width: 20ch; }
.w-head p { font: 400 17px/1.55 var(--font-sans); color: var(--ink-2); margin: 0; }
.w-link, .w-more { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1.3 var(--font-sans); color: var(--blue); white-space: nowrap; min-height: 44px; }
.w-link .i, .w-more .i { width: 16px; height: 16px; transition: transform .2s ease; }
.w-link:hover .i, .w-more:hover .i, .lift:hover .w-more .i, .lift:focus-visible .w-more .i { transform: translateX(4px); }
.w-note { font: 400 15px/1.5 var(--font-sans); color: var(--ink-2); margin: 32px 0 0; }
.w-sub { margin: 56px 0 24px; }
.w-sub h3 { font: 500 28px/1.2 var(--font-serif); color: var(--ink); }
.w-sub p { font: 400 16px/1.5 var(--font-sans); color: var(--ink-2); margin: 6px 0 0; }

/* ---------------- the one card, and the cube ---------------- */

.w-grid { display: grid; gap: 22px; }
.w-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.w-card {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 30px;
  background: var(--surface); border-radius: var(--r-xl); color: var(--ink);
}
.w-ico {
  --c1: #2A80B8; --c2: #134B70; --cs: rgba(19, 75, 112, .6);
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 8px 14px -6px var(--cs);
}
.w-ico .i { width: 22px; height: 22px; }
.w-ico.c-blue { --c1: #2A80B8; --c2: #134B70; --cs: rgba(19, 75, 112, .6); }
.w-ico.c-teal { --c1: #2BB39F; --c2: #0B6B5E; --cs: rgba(11, 107, 94, .55); }
.w-ico.c-navy { --c1: #34495A; --c2: #16222C; --cs: rgba(22, 34, 44, .6); }
.w-ico.c-gold { --c1: #B8730F; --c2: #7F540C; --cs: rgba(154, 102, 16, .5); }
.w-card h3 { font: 500 27px/1.15 var(--font-serif); letter-spacing: -.01em; color: var(--ink); margin-top: 22px; }
.w-card p { font: 400 15.5px/1.55 var(--font-sans); color: var(--ink-2); margin: 10px 0 0; }
.w-card .w-more { margin-top: auto; padding-top: 18px; }
.w-card .w-tag { align-self: flex-start; margin-bottom: 16px; font: 500 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); background: var(--mint); padding: 6px 10px; border-radius: 999px; box-shadow: 0 4px 10px -4px rgba(127, 214, 199, .6); }
.w-card.dark {
  color: var(--cover-ink);
  background: radial-gradient(120% 80% at 100% 0%, rgba(30, 156, 138, .35), transparent 55%), linear-gradient(170deg, var(--navy-3), var(--navy));
  --sh: 0 0 0 1px rgba(127, 214, 199, .25) inset, 0 40px 70px -30px rgba(22, 34, 44, .75);
  --sh-hi: 0 0 0 1px rgba(127, 214, 199, .35) inset, 0 54px 90px -34px rgba(22, 34, 44, .85);
}
.w-card.dark h3 { color: #fff; }
.w-card.dark p, .w-card.dark .ticks li { color: var(--cover-ink); }
.w-card.dark .ticks .i { color: var(--mint); background: rgba(127, 214, 199, .18); }
.w-card.dark .w-more { color: var(--mint); }
.w-card.compact { padding: 24px; border-radius: var(--r-lg); }
.w-card.compact .w-ico { width: 42px; height: 42px; border-radius: 13px; }
.w-card.compact .w-ico .i { width: 20px; height: 20px; }
.w-card.compact h3 { font-size: 20px; line-height: 1.25; margin-top: 18px; }
.w-card.compact p { font-size: 14.5px; }

/* ticks: a check in a small teal coin */
.site .ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.site .ticks li { display: flex; gap: 10px; align-items: flex-start; padding: 0; line-height: 1.45; }
.site .ticks .i { flex: none; width: 20px; height: 20px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--teal-soft); color: var(--teal-ink); stroke-width: 3; }

/* Who we help: the stacked logo plates */
.w-who-card { padding: 26px 26px 22px; overflow: hidden; }
.w-plates { position: relative; display: block; width: 100%; height: 92px; margin-bottom: 8px; }
.w-plates > span:not(.w-ico) {
  position: absolute; left: 0; width: 120px; height: 44px; border-radius: 12px; transform: skewY(-14deg) rotate(14deg);
  transition: transform .4s var(--ease-plate); box-shadow: 0 12px 20px -10px rgba(22, 34, 44, .4);
}
.w-plates > span:nth-child(1) { top: 0; background: rgba(23, 91, 135, .35); }
.w-plates > span:nth-child(2) { top: 20px; background: rgba(23, 91, 135, .7); }
.w-plates > span:nth-child(3) { top: 40px; background: var(--teal); }
.w-plates .w-ico { position: absolute; left: 146px; top: 20px; width: 52px; height: 52px; border-radius: 16px; }
.w-plates .w-ico .i { width: 24px; height: 24px; }
@media (hover: hover) {
  .w-who-card:hover .w-plates > span:nth-child(1) { transform: skewY(-14deg) rotate(14deg) translateY(-14px); }
  .w-who-card:hover .w-plates > span:nth-child(2) { transform: skewY(-14deg) rotate(14deg) translateY(-6px); }
}
.w-who-card:focus-visible .w-plates > span:nth-child(1) { transform: skewY(-14deg) rotate(14deg) translateY(-14px); }
.w-who-card:focus-visible .w-plates > span:nth-child(2) { transform: skewY(-14deg) rotate(14deg) translateY(-6px); }
.w-who-card h3 { font-size: 26px; margin-top: 4px; }
.w-who-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.w-who-meta span { font: 600 12px/1 var(--font-sans); padding: 8px 11px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.w-who-card .w-more { padding-top: 14px; }

/* groups on What's included: "In every package", "Added with Premium" */
.w-group + .w-group { margin-top: 48px; }
.w-group-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 18px; }
.w-group-h h3 { font: 500 26px/1.2 var(--font-serif); color: var(--ink); }
.w-group-h > span:not(.badge) { font: 500 14px/1.3 var(--font-sans); color: var(--ink-3); }
.w-group-h .w-link { margin-left: auto; }
.site .badge { border-radius: 999px; }

/* ---------------- steps: coins on plates, joined by a dashed line ---------------- */

.w-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; position: relative; }
.w-steps.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w-steps.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.w-steps::before {
  content: ''; position: absolute; left: 12%; right: 12%; top: 60px; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--teal) 0 10px, transparent 10px 18px); opacity: .5;
}
.w-step { padding: 30px; background: var(--surface); border-radius: var(--r-xl); }
.w-step .n {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 22px;
  font: 500 26px/1 var(--font-serif); font-variant-numeric: lining-nums; color: #fff;
  background: linear-gradient(145deg, var(--navy-3), var(--navy));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 -4px 0 rgba(0, 0, 0, .3) inset, 0 14px 24px -10px rgba(22, 34, 44, .7);
}
.w-step:nth-child(4n+2) .n { background: linear-gradient(145deg, #2A80B8, var(--blue-deep)); }
.w-step:nth-child(4n+3) .n { background: linear-gradient(145deg, #2BB39F, var(--teal-ink)); }
.w-step h3 { font: 500 23px/1.2 var(--font-serif); color: var(--ink); }
.w-step p { margin: 8px 0 0; font: 400 15.5px/1.55 var(--font-sans); color: var(--ink-2); }

/* ---------------- text beside a picture ---------------- */

.w-spot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.w-spot + .w-spot { margin-top: 80px; }
.w-spot.flip > :first-child { order: 2; }
.w-spot h2, .w-spot h3 { font: 500 clamp(30px, 3.4vw, 40px)/1.1 var(--font-serif); letter-spacing: -.015em; margin-top: 14px; color: var(--ink); text-wrap: balance; }
.w-spot.top h2 { font-size: clamp(32px, 4vw, 46px); }
.w-spot p { font: 400 17.5px/1.55 var(--font-sans); color: var(--ink-2); margin: 16px 0 0; max-width: var(--measure); }
.w-spot .ticks { font-size: 15.5px; margin-top: 22px; }
.w-visual { border-radius: var(--r-xl); padding: 32px; background: linear-gradient(170deg, #fff, var(--surface-2)); }

/* the sign-off board */
.w-board {
  border-radius: var(--r-xl); padding: 26px; color: var(--cover-ink);
  background: radial-gradient(100% 70% at 0% 0%, rgba(23, 91, 135, .5), transparent 60%), linear-gradient(170deg, var(--navy-3), var(--navy));
  --sh: 0 50px 90px -40px rgba(22, 34, 44, .8), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  --sh-hi: 0 64px 110px -44px rgba(22, 34, 44, .9), 0 0 0 1px rgba(255, 255, 255, .08) inset;
}
.w-board .tv-top { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.big-ring { flex: none; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--mint) 0 var(--p, 0%), rgba(255, 255, 255, .12) 0); box-shadow: 0 0 40px -6px rgba(127, 214, 199, .45); }
.big-ring i { width: 98px; height: 98px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-2); font: normal 500 34px/1 var(--font-serif); color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .4) inset; font-variant-numeric: lining-nums; }
.w-board .tv-who { flex: 1; min-width: 200px; }
.w-board .tv-name { font: 500 23px/1.2 var(--font-serif); color: #fff; }
.w-board .tv-sub { color: var(--cover-ink-2); font: 13.5px/1.4 var(--font-sans); margin-top: 4px; font-variant-numeric: tabular-nums lining-nums; }
.w-board .tv-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.w-board .tv-tags span { font: 600 11.5px/1 var(--font-sans); padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14) inset; color: var(--cover-ink); }
.w-board .tv-tags span.ok { background: rgba(127, 214, 199, .18); color: var(--mint); }
.w-board .tv-card { margin-top: 22px; background: #fff; color: var(--ink); border-radius: var(--r-md); padding: 18px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.w-board .tv-card-h { font: 600 11px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.w-board .job { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; margin-top: 12px; font: 14px/1.3 var(--font-sans); font-variant-numeric: tabular-nums; }
.w-board .job b { font-weight: 600; }
.w-board .job > span:not(.job-bar) { color: var(--ink-2); }
.w-board .job-bar { grid-column: 1 / -1; display: block; height: 9px; border-radius: 9px; background: #ECE6DA; overflow: hidden; }
.w-board .job-bar span { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, var(--teal), var(--mint)); box-shadow: 0 0 12px rgba(30, 156, 138, .5); }

/* the phone visual: the staff reading list in a bezel */
.w-visual .phone { width: 300px; height: 560px; min-height: 0; margin: 0 auto; padding: 10px; border-radius: 44px; }
.w-visual .phone::before { top: 18px; width: 84px; height: 22px; margin-left: -42px; border-radius: 16px; }
.pl-scr { height: 100%; border-radius: 36px; background: #fff; overflow: hidden; padding: 48px 16px 16px; color: var(--ink); }
.pl-hi { font: 500 22px/1.15 var(--font-serif); }
.pl-sub { font: 12.5px/1.45 var(--font-sans); color: var(--ink-2); margin: 5px 0 12px; }
.pl-prog { border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line) inset; }
.pl-prog-top { display: flex; justify-content: space-between; gap: 8px; font: 600 12px var(--font-sans); margin-bottom: 7px; font-variant-numeric: tabular-nums lining-nums; }
.pl-prog-top span:last-child { color: var(--ink-3); font-weight: 500; }
.pl-prog .bar { border-radius: 6px; }
.pl-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font: 500 12.5px/1.35 var(--font-sans); }
.pl-row .state-ico { width: 26px; height: 26px; }
.pl-row .state-ico .i { width: 14px; height: 14px; }
.pl-row .pl-t { flex: 1; min-width: 0; }
.pl-row > .i { width: 15px; height: 15px; color: var(--ink-3); }

/* ---------------- the CTA band: the same on every page ---------------- */

.w-cta-sec { padding: 0 0 96px; }
.w-alt + .w-cta-sec { padding-top: 96px; }
.cta-band {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center;
  border-radius: 36px; padding: 64px 56px; color: var(--cover-ink);
  background: radial-gradient(60% 120% at 100% 0%, rgba(30, 156, 138, .55), transparent 60%), radial-gradient(50% 100% at 0% 100%, rgba(23, 91, 135, .6), transparent 60%), var(--navy);
  box-shadow: 0 50px 90px -40px rgba(22, 34, 44, .8);
}
.cta-band > div { position: relative; z-index: 1; min-width: 0; }
.cta-band .w-stack { position: absolute; right: -40px; bottom: -60px; width: 260px; height: 260px; opacity: .18; pointer-events: none; }
.cta-band h2 { font: 500 clamp(30px, 3.6vw, 46px)/1.08 var(--font-serif); letter-spacing: -.015em; color: #fff; max-width: 18ch; text-wrap: balance; }
.cta-band p { font: 400 16.5px/1.55 var(--font-sans); color: var(--cover-ink); margin: 12px 0 0; max-width: 52ch; }
.cta-band .btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------- footer ---------------- */

.site-foot { background: var(--navy); color: var(--cover-ink); padding: 56px 0 32px; contain: paint; }
.site-foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.site-foot .brand, .site-foot .brand:hover { color: #fff; padding: 0; border: 0; margin: 0; text-decoration: none; }
.site-foot .brand-name .core { color: var(--mint); }
.site-foot .brand-name small { color: var(--cover-label); }
.site-foot p { font: 14px/1.55 var(--font-sans); color: var(--cover-ink-2); margin-top: 16px; max-width: 340px; }
.site-foot h4 { font: 500 11.5px/1.2 var(--font-mono); color: var(--cover-label); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 12px; }
.site-foot a { display: block; font: 14.5px var(--font-sans); color: var(--cover-ink); padding: 5px 0; transition: color var(--dur-1) var(--ease); }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--cover-line); font: 13px/1.5 var(--font-sans); color: var(--cover-label); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------------- state and service picker: a floating plate under the header ---------------- */

.pick-bar { position: sticky; top: calc(var(--site-head-h, 90px) - 8px); z-index: 20; padding-top: 18px; pointer-events: none; }
.pick {
  pointer-events: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 12px 14px 12px 22px; border-radius: 30px;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 0 0 1px rgba(227, 221, 209, .9) inset, var(--lift);
}
.pick-state { display: flex; align-items: center; gap: 12px; }
.pick-title { font: 500 11.5px/1.2 var(--font-mono); color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; }
.pick-state .input { min-width: 220px; min-height: 44px; font-weight: 600; border-radius: 999px; padding-left: 16px; }
.pick-svc { display: flex; gap: 6px; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: var(--paper-2); box-shadow: 0 1px 2px rgba(22, 34, 44, .08) inset; }
.pick-tab {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 16px; min-height: 44px; border: 0; border-radius: 999px; background: transparent;
  font: 600 15px/1.2 var(--font-sans); color: var(--ink); cursor: pointer; transition: background .2s ease, box-shadow .2s ease, color .2s ease, transform .18s ease;
}
.pick-tab:hover { background: rgba(255, 255, 255, .8); }
.pick-tab:active { transform: translateY(1px) scale(.98); }
.pick-tab.on, .pick-tab.on:hover { color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy)); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 12px -4px rgba(22, 34, 44, .5); }
.st { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--font-sans); font-style: normal; padding: 6px 9px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); white-space: nowrap; }
.st .i { width: 13px; height: 13px; }
.st.live { background: var(--teal-soft); color: var(--teal-ink); }
.st.development { background: var(--blue-soft); color: var(--blue-ink); }
.pick-tab.on .st { background: rgba(255, 255, 255, .16); color: #fff; }
.pick-tab.on .st.live { background: var(--mint); color: var(--cover); }

/* the "not live yet" panel */
.w-coming { max-width: 760px; margin: 0 auto; text-align: center; background: var(--surface); border-radius: 34px; padding: 52px 44px; box-shadow: var(--lift); }
.w-coming h2 { font: 500 34px/1.15 var(--font-serif); margin: 16px 0 12px; text-wrap: balance; }
.w-coming p { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 52ch; margin: 0 auto 24px; }
.w-coming .btn-group { display: flex; justify-content: center; gap: 10px; }
.w-coming-live { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font: 500 14px var(--font-sans); color: var(--ink-3); }
.site .w-coming-live .chip { min-height: 38px; border-radius: 999px; border: 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset, 0 4px 10px -6px rgba(22, 34, 44, .25); transition: transform .18s ease, box-shadow .18s ease; }
.site .w-coming-live .chip:active { transform: translateY(1px) scale(.98); }
.w-coming-live .chip .i { width: 14px; height: 14px; color: var(--teal-ink); }
.w-coming .st .i { width: 13px; height: 13px; }
.w-coming-also { font-size: 15px !important; color: var(--ink-3) !important; margin: 20px auto 0 !important; }

/* the live library's cover on Policies: what it is on the left, its numbers and price on the right */
.w-pack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); background: var(--surface); border-radius: 34px; overflow: hidden; box-shadow: var(--lift); }
.w-pack-t { padding: 44px; }
.w-pack-t h2 { font: 500 clamp(30px, 3.2vw, 38px)/1.1 var(--font-serif); letter-spacing: -.015em; margin-top: 14px; color: var(--ink); }
.w-pack-t p { font: 400 16.5px/1.55 var(--font-sans); color: var(--ink-2); margin: 10px 0 0; max-width: 62ch; }
.w-pack-x { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 14.5px/1.4 var(--font-sans); color: var(--ink-2); }
.w-pack-x li { display: flex; align-items: center; gap: 8px; }
.w-pack-x .i { width: 16px; height: 16px; color: var(--teal-ink); flex: none; }
.w-pack-b { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.w-pack-n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; column-gap: 16px; margin: 0; padding: 24px 32px; background: linear-gradient(170deg, var(--surface-2), var(--paper-2)); }
.w-pack-n div { padding: 16px 0; border-bottom: 1px solid var(--line-2); min-width: 0; }
.w-pack-n div.price { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 4px; }
.w-pack-n dt { font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.w-pack-n dd { margin: 6px 0 0; font: 500 32px/1.1 var(--font-serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.w-pack-n dd small { font: 500 14px var(--font-sans); color: var(--ink-3); margin-left: 8px; letter-spacing: 0; }
.w-pack-n .ask { display: block; font: 500 24px/1.2 var(--font-serif); color: var(--blue-deep); }

/* free samples: the first page of a document */
.w-doc {
  display: flex; flex-direction: column; padding: 26px; min-height: 100%; background: var(--surface); border-radius: var(--r-lg); color: var(--ink);
  --sh: 0 3px 0 var(--teal-ink) inset, var(--lift); --sh-hi: 0 3px 0 var(--teal-ink) inset, var(--lift-hi);
}
.w-doc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.w-doc-top .ref, .pol-top .ref { font: 500 12.5px/1.2 var(--font-mono); color: var(--ink-3); background: none; border: 0; padding: 0; }
.w-doc-cat { margin-top: 18px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-ink); }
.w-doc h3 { font: 500 23px/1.22 var(--font-serif); color: var(--ink); margin-top: 6px; text-wrap: balance; }
.w-doc p { font: 15px/1.55 var(--font-sans); color: var(--ink-2); margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.w-doc .w-more { margin-top: auto; padding-top: 16px; }

/* the catalogue: search and categories on the left, policy cards on the right */
.cat-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 40px; align-items: start; }
.cat-side { position: sticky; top: calc(var(--site-head-h, 90px) + 100px); display: grid; gap: 16px; max-height: calc(100vh - var(--site-head-h, 90px) - 120px); overflow-y: auto; padding: 6px; margin: -6px; }
.cat-side .input-icon .input { width: 100%; min-height: 48px; font-size: 16px; box-shadow: var(--lift); border-color: transparent; }
.cat-pick { display: none; }
.cat-nav { display: grid; gap: 4px; }
.cat-btn {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 7px 8px 7px 14px;
  border: 0; border-radius: 999px; background: transparent; text-align: left; cursor: pointer;
  font: 500 15px/1.3 var(--font-sans); color: var(--ink-2); transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.cat-btn:hover { background: var(--surface); color: var(--ink); box-shadow: 0 4px 10px -6px rgba(22, 34, 44, .25); }
.cat-btn .n { flex: none; min-width: 30px; text-align: center; padding: 3px 9px; border-radius: 999px; background: var(--paper-2); font: 600 12.5px/1.3 var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums lining-nums; }
.cat-btn.on, .cat-btn.on:hover { color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy)); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 12px -4px rgba(22, 34, 44, .5); }
.cat-btn.on .n { background: rgba(255, 255, 255, .16); color: #fff; }
.cat-main { min-width: 0; }
.cat-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 12px; font: 600 14.5px/1.3 var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.site .cat-block + .cat-block { margin-top: 44px; }
.site .cat-title { text-transform: none; letter-spacing: -.005em; display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 2px dashed var(--line-2); font: 500 24px/1.2 var(--font-serif); color: var(--ink); }
.site .cat-title span { letter-spacing: 0; font: 600 12.5px/1 var(--font-sans); color: var(--ink-2); font-variant-numeric: tabular-nums; padding: 5px 9px; border-radius: 999px; background: var(--paper-2); }
.pol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pol-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; background: var(--surface); border-radius: var(--r-lg); color: var(--ink); text-decoration: none !important; }
.pol-card.is-sample { --sh: 0 0 0 1.5px var(--teal-line) inset, var(--lift); --sh-hi: 0 0 0 1.5px var(--teal-line) inset, var(--lift-hi); }
.pol-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px; }
.pol-t { font: 500 19px/1.3 var(--font-serif); color: var(--ink); text-wrap: pretty; }
.pol-s { font: 14px/1.5 var(--font-sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pol-f { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 13px/1.35 var(--font-sans); color: var(--ink-3); }
.pol-f .i { width: 16px; height: 16px; color: var(--blue); flex: none; transition: transform .2s ease; }
.pol-card:hover .pol-f .i, .pol-card:focus-visible .pol-f .i { transform: translateX(4px); }
.site mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.site .empty-icon { border-radius: 16px; }

/* ---------------- pricing ---------------- */

.w-bill { margin: -8px 0 32px; }
.site .seg { border-radius: 999px; padding: 4px; gap: 4px; background: var(--paper-2); box-shadow: 0 1px 2px rgba(22, 34, 44, .08) inset; }
.site .seg button { min-height: 40px; padding: 0 18px; border-radius: 999px; font-weight: 600; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.site .seg button.on { color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy)); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 12px -4px rgba(22, 34, 44, .5); }
.w-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 980px; }
.w-price { display: flex; flex-direction: column; padding: 36px 34px; border-radius: 34px; background: var(--surface); }
.w-price .flag { position: absolute; top: -13px; left: 30px; z-index: 2; box-shadow: 0 6px 14px -6px rgba(110, 71, 8, .5); }
.w-price h3 { font: 500 26px/1.2 var(--font-serif); }
.w-price .amt { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; }
.w-price .amt b { font: 500 58px/1 var(--font-serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.w-price .amt span { font: 500 15px var(--font-sans); color: var(--ink-3); }
.w-price .note { font: 600 14px var(--font-sans); color: var(--teal-ink); margin-top: 10px; min-height: 22px; }
.w-price .blurb { font: 15px/1.55 var(--font-sans); color: var(--ink-2); margin: 12px 0 0; }
.w-price .ticks { margin: 20px 0 28px; }
.w-price .btn { margin-top: auto; }
.w-price .amt b.ask { font: 500 34px/1.1 var(--font-serif); letter-spacing: -.01em; color: var(--blue-deep); }
.w-price.featured {
  color: var(--cover-ink);
  background: radial-gradient(120% 80% at 100% 0%, rgba(30, 156, 138, .35), transparent 55%), linear-gradient(170deg, var(--navy-3), var(--navy));
  --sh: 0 0 0 1px rgba(127, 214, 199, .25) inset, 0 40px 70px -30px rgba(22, 34, 44, .75);
  --sh-hi: 0 0 0 1px rgba(127, 214, 199, .35) inset, 0 54px 90px -34px rgba(22, 34, 44, .85);
}
.w-price.featured h3, .w-price.featured .amt b { color: #fff; }
.w-price.featured .amt span { color: var(--cover-ink-2); }
.w-price.featured .amt b.ask { color: var(--cover-cream); }
.w-price.featured .note { color: var(--mint); }
.w-price.featured .blurb, .w-price.featured .ticks li, .w-price.featured .ticks strong { color: var(--cover-ink); }
.w-price.featured .ticks .i { color: var(--mint); background: rgba(127, 214, 199, .18); }
/* a library without prices yet: say so once, with Get started for that state and service */
.w-ask {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; max-width: 980px; margin: 0 0 32px;
  padding: 26px 30px; background: var(--surface); border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--blue-line) inset, var(--lift);
}
.w-ask h3 { font: 500 24px/1.2 var(--font-serif); color: var(--ink); }
.w-ask p { font: 15.5px/1.55 var(--font-sans); color: var(--ink-2); margin: 6px 0 0; max-width: 60ch; }

/* tables sit on a raised plate */
.site .table-wrap:has(> .w-compare, > .w-cov) { border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--lift); }
.w-compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); font-family: var(--font-sans); }
.w-compare th, .w-compare td { padding: 17px 22px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.45; }
.w-compare tbody th { font-weight: 600; color: var(--ink); }
.w-compare thead th { border-top: 0; font: 500 11.5px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); padding-top: 18px; padding-bottom: 16px; }
.w-compare thead th.us { color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy)); }
.w-compare td.us { background: linear-gradient(90deg, var(--teal-soft), rgba(226, 240, 235, .35)); font-weight: 600; color: var(--ink); }
.w-compare td .i { width: 17px; height: 17px; vertical-align: -3px; margin-right: 6px; }
.w-compare td.us .i { color: var(--teal-ink); }
.w-compare td.them { color: var(--ink-2); }
.w-compare td.them .i { color: var(--ink-3); }

/* ---------------- states table ---------------- */

.w-cov { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); font-family: var(--font-sans); }
.w-cov th, .w-cov td { padding: 12px 22px; border-top: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 15px; }
.w-cov thead th { border-top: 0; font: 500 11.5px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); padding-top: 18px; padding-bottom: 14px; }
.w-cov tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.w-cov .code { display: inline-grid; place-items: center; width: 38px; height: 30px; margin-right: 12px; border-radius: 10px; background: var(--surface-3); font: 600 12.5px var(--font-sans); color: var(--ink-2); }
.w-cov tr.active .code { color: #fff; background: linear-gradient(145deg, var(--navy-3), var(--navy)); box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 4px 8px -4px rgba(22, 34, 44, .6); }
.w-cov tr:not(.active) th { color: var(--ink-2); font-weight: 500; }
.w-cov .st.planned { background: transparent; color: var(--ink-3); padding-left: 0; padding-right: 0; font-weight: 500; }
.w-cov-sum { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: -16px 0 22px; font: 500 15px/1.4 var(--font-sans); color: var(--ink-2); }
.w-cov-sum > span { display: inline-flex; align-items: center; gap: 10px; }
.w-cov-sum .st.planned { background: var(--surface-3); color: var(--ink-2); padding: 6px 9px; }

/* ---------------- FAQ: each question a small plate ---------------- */

.faq { max-width: 880px; display: grid; gap: 12px; }
.faq details { background: var(--surface); border-radius: 20px; padding: 0 24px; box-shadow: var(--lift); transition: box-shadow .35s var(--ease-plate); }
.faq details[open], .faq details:hover { box-shadow: var(--lift-hi); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; min-height: 44px; display: flex; justify-content: space-between; gap: 16px; align-items: center; font: 500 19px/1.3 var(--font-serif); color: var(--ink); text-wrap: pretty; border-radius: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue-hover); }
.faq summary .i { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--paper-2); color: var(--ink-2); transition: transform .25s var(--ease), background .2s ease, color .2s ease; flex: none; }
.faq details[open] summary .i { transform: rotate(90deg); background: var(--navy); color: #fff; }
.faq details p { font: 15.5px/1.6 var(--font-sans); color: var(--ink-2); margin: 0 0 22px; max-width: var(--measure); }

/* ---------------- See it in action: the video player ---------------- */

.vp { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.vp-main { background: var(--navy); border-radius: var(--r-xl); overflow: hidden; color: var(--cover-cream); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 40px 70px -30px rgba(22, 34, 44, .75); }
.vp-stage { position: relative; aspect-ratio: 16 / 9; background: #0c141b; }
.vp-stage video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0c141b; }
.vp-still { position: absolute; inset: 0; display: flex; flex-direction: column; }
.vp-still img { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: var(--navy-2); padding: 12px; }
.vp-still-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(12, 20, 27, .92); border-top: 1px solid var(--cover-line); }
.vp-soon { flex: none; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); padding: 6px 10px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(127, 214, 199, .45) inset; }
.vp-still-line { flex: 1; min-width: 0; font: 14px/1.4 var(--font-sans); color: var(--cover-ink); }
.vp-still-bar .btn { flex: none; min-height: 36px; }
.vp-cap { padding: 22px 26px 26px; }
.vp-n { font: 500 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.vp-cap h3 { font: 500 25px/1.2 var(--font-serif); color: #fff; margin-top: 8px; }
.vp-cap p { font: 15.5px/1.55 var(--font-sans); color: var(--cover-ink); margin: 8px 0 0; max-width: 70ch; }
.vp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vp-step { width: 100%; display: flex; gap: 14px; align-items: center; text-align: left; padding: 12px 16px 12px 12px; min-height: 64px; background: var(--surface); border: 0; border-radius: 20px; cursor: pointer; font: inherit; color: var(--ink); }
.vp-step .n { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; font: 500 17px/1 var(--font-serif); color: var(--ink); background: var(--paper-2); box-shadow: 0 1px 0 #fff inset, 0 -2px 0 rgba(0, 0, 0, .06) inset; }
.vp-step .t { display: flex; flex-direction: column; line-height: 1.3; }
.vp-step b { font: 600 15.5px/1.3 var(--font-sans); }
.vp-step small { font-size: 13.5px; color: var(--ink-3); }
.site .vp-step.on {
  color: #fff; background: radial-gradient(120% 80% at 100% 0%, rgba(30, 156, 138, .3), transparent 55%), linear-gradient(170deg, var(--navy-3), var(--navy));
  --sh: 0 0 0 1px rgba(127, 214, 199, .25) inset, 0 18px 34px -16px rgba(22, 34, 44, .7);
  --sh-hi: 0 0 0 1px rgba(127, 214, 199, .35) inset, 0 26px 44px -18px rgba(22, 34, 44, .8);
  --focus: var(--mint);
}
.vp-step.on .n { color: var(--navy); background: linear-gradient(145deg, #fff, var(--mint)); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 -2px 0 rgba(0, 0, 0, .14) inset; }
.vp-step.on small { color: var(--cover-ink-2); }
.vp-auto { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 44px; font: 14px var(--font-sans); color: var(--ink-2); cursor: pointer; }
.vp-auto input { width: 18px; height: 18px; accent-color: var(--blue-deep); }

/* ---------------- inner pages: a policy, get started ---------------- */

.w-summary { font: 400 18px/1.55 var(--font-sans); color: var(--ink-2); margin: 0 0 20px; max-width: var(--measure); }
.w-gap { margin-top: 22px; }
.w-gap-s { margin-top: 16px; }
.w-muted { color: var(--ink-2); }
/* every card inside the website is a raised plate, not a hairline box */
.site .card { border: 0; border-radius: var(--r-lg); box-shadow: var(--lift); background: var(--surface); }
.site .card.lift { box-shadow: var(--sh); }
.site .card-pad { padding: 24px 26px; }
.site .card.w-gap > h3 { font: 500 21px/1.3 var(--font-serif); margin-bottom: 8px; }
.aside .card + .card, .aside .w-aside-cta + .card { margin-top: 18px; }
.w-aside-cta {
  padding: 26px; border-radius: var(--r-lg); color: var(--cover-ink); display: grid; gap: 8px;
  background: radial-gradient(120% 80% at 100% 0%, rgba(30, 156, 138, .35), transparent 55%), linear-gradient(170deg, var(--navy-3), var(--navy));
  --sh: 0 0 0 1px rgba(127, 214, 199, .2) inset, 0 30px 60px -28px rgba(22, 34, 44, .75);
  --sh-hi: 0 0 0 1px rgba(127, 214, 199, .3) inset, 0 44px 80px -32px rgba(22, 34, 44, .85);
}
.aside .w-aside-cta h3 { font: 500 23px/1.2 var(--font-serif); letter-spacing: 0; text-transform: none; color: #fff; border: 0; padding: 0; margin: 0; }
.w-aside-cta p { font: 14.5px/1.5 var(--font-sans); color: var(--cover-ink); margin: 0 0 8px; }
.w-aside-cta .k { font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.w-cta-price { display: flex; align-items: baseline; gap: 8px; padding-top: 12px; border-top: 1px solid var(--cover-line); }
.w-cta-price b { font: 500 42px/1 var(--font-serif); letter-spacing: -.02em; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.w-cta-price span { font: 500 14px var(--font-sans); color: var(--cover-ink-2); }
.w-cta-price.ask { display: block; }
.w-cta-price.ask b { display: block; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.w-cta-price.ask span { display: block; margin-top: 6px; line-height: 1.45; }
.w-cta-sub { font: 14px/1.45 var(--font-sans); color: var(--cover-ink-2); margin-bottom: 8px; }
.w-cta-price + .btn, .w-cta-price + .w-cta-sub + .btn { margin-top: 12px; }
.w-aside-cta .btn + .btn { margin-top: 4px; }
.w-asks h3 { display: flex; align-items: center; gap: 8px; }
.w-asks h3 .i { width: 18px; height: 18px; color: var(--teal-ink); }
.w-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.w-links a { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; min-height: 44px; font: 500 14.5px/1.4 var(--font-sans); color: var(--blue); }
.w-links a .i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.w-links a:hover span { text-decoration: underline; }
.sample-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-md); margin-bottom: 20px; background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue-line) inset; font: 14.5px/1.5 var(--font-sans); color: var(--ink-2); }
.sample-note .i { color: var(--blue); margin-top: 1px; flex: none; width: 18px; height: 18px; }
.sample-note strong, .sample-note .fv { color: var(--ink); }
.site .paper { border-radius: var(--r-md); box-shadow: var(--lift); }
.site .inshort { border-radius: var(--r-md); }
.locked-sections { list-style: none; margin: 0; padding: 0; }
.locked-sections li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font: 600 14.5px/1.4 var(--font-sans); color: var(--ink-2); }
.locked-sections .t { flex: 1; min-width: 0; color: var(--ink); }
.w-pol { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
.locked-sections li:first-child { border-top: 0; }
.locked-sections .i { margin-left: auto; color: var(--ink-3); width: 16px; height: 16px; flex: none; }

.split-form { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
.site #form-card { padding: 36px; border-radius: var(--r-xl); }
.w-fieldset { border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.w-fieldset legend { padding: 0; margin-bottom: 10px; }
.site .pkg-pick { gap: 12px; }
.site .pkg-opt {
  border: 0; border-radius: var(--r-md); background: var(--surface);
  box-shadow: 0 0 0 1px var(--line) inset, 0 4px 10px -6px rgba(22, 34, 44, .22);
  transition: box-shadow .2s ease, background .2s ease, transform .18s ease;
}
.site .pkg-opt:hover { box-shadow: 0 0 0 1px var(--line-2) inset, 0 10px 18px -8px rgba(22, 34, 44, .28); }
.site .pkg-opt:active { transform: translateY(1px) scale(.99); }
.site .pkg-opt.on { background: var(--blue-soft); box-shadow: 0 0 0 2px var(--blue-deep) inset, 0 10px 20px -10px rgba(19, 75, 112, .45); }
.site .pkg-opt:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.site #enq .btn-lg { margin-top: 24px; min-height: 50px; padding: 0 28px; }
.w-next { margin: 0; padding-left: 20px; display: grid; gap: 8px; font: 14.5px/1.5 var(--font-sans); color: var(--ink-2); }
.w-next li::marker { color: var(--teal-ink); font-weight: 600; }
.thanks { text-align: center; padding: 40px 20px; }
.thanks .empty-icon { background: var(--teal-soft); color: var(--teal-ink); width: 56px; height: 56px; margin-bottom: 18px; }
.thanks h2 { font: 500 28px/1.2 var(--font-serif); }
.thanks p { color: var(--ink-2); margin: 8px auto 20px; max-width: 420px; }

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

@media (max-width: 1180px) {
  .site-head .brand-name small { display: none; }
  .site-head .head-bar { gap: 14px; }
  .w-hero-in.has-side { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); column-gap: 40px; padding: 56px 44px; }
  .cat-layout { grid-template-columns: 228px minmax(0, 1fr); gap: 32px; }
  .w-pack { grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); }
  .w-pack-t { padding: 34px; }
  .w-pack-n { padding: 20px 24px; }
  .w-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-steps.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-steps.n4::before { display: none; }
  .split-form { grid-template-columns: 1fr; }
  .vp { grid-template-columns: 1fr; }
  .vp-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vp-step { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
}
@media (max-width: 1040px) {
  .site-nav { display: none; }
  .site-tabs {
    pointer-events: auto; display: flex; gap: 4px; margin-top: 8px; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none;
    background: rgba(237, 232, 221, .9); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 1px 2px rgba(22, 34, 44, .08) inset, 0 10px 24px -14px rgba(22, 34, 44, .3);
  }
  .site-tabs::-webkit-scrollbar { display: none; }
  .site-tabs a { flex: 1 0 auto; min-height: 40px; padding: 0 14px; }
  .t-head, .t-scene { grid-column: 1 / -1; }
  .t-head { grid-row: auto; padding: 44px 36px; }
  .t-scene { grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; padding: 28px 32px 0; }
  .t-scene h2, .t-scene p { grid-column: 1; align-self: start; }
  .t-scene .h-phone { grid-column: 2; grid-row: 1 / span 3; margin: 0 8px -28px; }
  .pick-bar { position: static; }
  .cat-side { top: calc(var(--site-head-h, 120px) + 12px); max-height: calc(100vh - var(--site-head-h, 120px) - 24px); }
}
@media (max-width: 960px) {
  .w-grid.g3, .w-steps.n3 { grid-template-columns: 1fr; }
  .w-steps.n3::before { display: none; }
  .w-grid.w-svc, .w-grid.w-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-svc .w-card:first-child { grid-column: 1 / -1; }
  .w-spot { grid-template-columns: 1fr; gap: 36px; }
  .w-spot.flip > :first-child { order: 0; }
  .w-spot + .w-spot { margin-top: 64px; }
  .pick-state { width: 100%; }
  .pick-state .input { flex: 1; min-width: 0; }
  .pick-svc { width: 100%; }
  .pick-tab { flex: 1 1 auto; justify-content: space-between; }
  .pick { border-radius: 26px; padding: 14px; }
  .w-pack { grid-template-columns: 1fr; }
  .w-pol { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
  .vp-steps { grid-template-columns: 1fr; }
  .vp-step { flex-direction: row; align-items: center; }
}
@media (max-width: 900px) {
  .w-prices { grid-template-columns: 1fr; }
  .w-hero-in.has-side { grid-template-columns: 1fr; row-gap: 32px; }
  .w-hero-side { max-width: 560px; }
  .cat-layout { grid-template-columns: 1fr; gap: 20px; }
  .cat-side { position: static; max-height: none; overflow: visible; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 12px; padding: 0; margin: 0; }
  .cat-nav { display: none; }
  .cat-pick { display: block; }
  .cat-pick .input { width: 100%; min-height: 48px; font-size: 16px; font-weight: 600; border-radius: 999px; box-shadow: var(--lift); border-color: transparent; }
  .w-ask { grid-template-columns: auto minmax(0, 1fr); }
  .w-ask .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 680px) {
  .bento { grid-template-columns: 1fr; gap: 14px; }
  .t-head, .t-scene, .t-path, .t-ben { grid-column: auto; grid-row: auto; }
  .b-tile { padding: 22px; border-radius: 26px; }
  .t-head { padding: 32px 22px; }
  .t-head h1 { font-size: 40px; }
  .t-scene { display: block; padding: 24px 22px 0; }
  .t-scene .h-phone { margin: 18px auto -24px; width: 168px; }
  .t-path b { font-size: 23px; }
  .w-grid.w-svc, .w-grid.w-who { grid-template-columns: 1fr; }
  .w-svc .w-card:first-child { grid-column: auto; }
}
@media (max-width: 640px) {
  .wrap, .site-head .in { padding-left: 16px; padding-right: 16px; }
  .site-head { padding: 10px 0 8px; }
  .site-head .head-bar { padding: 7px 7px 7px 14px; gap: 8px; }
  .site-head .brand { gap: 8px; }
  .site-head .logo-mark { width: 26px; height: 26px; }
  .site-head .brand-name { font-size: 19px; }
  .site-head .actions { gap: 6px; }
  .site-head .actions .btn { min-height: 40px; padding: 0 13px; font-size: 13.5px; }
  .site-head .actions .btn .i { display: none; }
  .site-tabs { margin-top: 6px; }
  .site-tabs a { padding: 0 10px; font-size: 14px; }
  .w-hero-in, .w-hero-in.has-side { padding: 36px 22px 28px; border-radius: 28px; }
  .w-hero h1 { font-size: 34px; max-width: none; }
  .w-lead { font-size: 16.5px; }
  .w-kicker { font-size: 10.5px; letter-spacing: .08em; }
  .w-btns { margin-top: 24px; }
  .w-btns .btn { flex: 1 1 auto; }
  .w-sec { padding: 64px 0; }
  .w-sec-tight { padding: 28px 0 64px; }
  .w-cta-sec { padding-bottom: 64px; }
  .w-alt + .w-cta-sec { padding-top: 64px; }
  .w-head { flex-direction: column; align-items: flex-start; margin-bottom: 28px; gap: 10px; }
  .w-head h2 { font-size: 31px; }
  .w-head p { font-size: 16px; }
  .w-grid { gap: 16px; }
  .w-grid.g4, .w-steps.n4 { grid-template-columns: 1fr; }
  .w-steps { gap: 14px; }
  .w-card { padding: 24px 22px; border-radius: 24px; }
  .w-card h3 { font-size: 24px; }
  .w-card.compact { padding: 20px; display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .w-card.compact h3 { margin-top: 0; font-size: 18.5px; grid-column: 2; }
  .w-card.compact .w-ico { grid-row: 1 / span 2; }
  .w-card.compact p { grid-column: 2; margin-top: 4px; }
  .w-step { padding: 22px; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; border-radius: 24px; }
  .w-step .n { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 16px; font-size: 22px; margin-bottom: 0; }
  .w-step h3 { margin-top: 2px; font-size: 19px; }
  .w-step p { grid-column: 2; }
  .w-spot h2, .w-spot h3, .w-spot.top h2 { font-size: 29px; }
  .w-spot p { font-size: 16px; }
  .w-visual { padding: 20px; }
  .w-visual .phone { width: min(280px, 100%); height: 520px; }
  .w-board { padding: 20px; }
  .big-ring { width: 104px; height: 104px; }
  .big-ring i { width: 80px; height: 80px; font-size: 28px; }
  .w-sub { margin-top: 40px; }
  .w-sub h3 { font-size: 24px; }
  .w-group + .w-group { margin-top: 36px; }
  .w-group-h h3 { font-size: 23px; }
  .w-group-h .w-link { margin-left: 0; }
  .cta-band { padding: 40px 24px; border-radius: 28px; }
  .cta-band h2 { font-size: 29px; }
  .cta-band p { font-size: 15.5px; }
  .cta-band .btns .btn { flex: 1 1 auto; }
  .w-coming { padding: 34px 20px; border-radius: 28px; }
  .w-coming h2 { font-size: 27px; }
  .w-coming p { font-size: 16px; }
  .w-coming .btn-group .btn { width: 100%; }
  .pick { gap: 10px; padding: 12px; }
  .pick-state { flex-wrap: wrap; gap: 8px; }
  .pick-svc { border-radius: 22px; }
  .pick-tab { width: 100%; }
  .w-pack { border-radius: 28px; }
  .w-pack-t { padding: 26px 22px; }
  .w-pack-t h2 { font-size: 28px; }
  .w-pack-x { flex-direction: column; gap: 8px; }
  .w-pack-n { padding: 8px 22px 18px; }
  .w-pack-n dd { font-size: 26px; }
  .w-pack-n .ask { font-size: 21px; }
  .w-pack-b .btn { flex: 1 1 auto; }
  .cat-side { grid-template-columns: 1fr; }
  .pol-grid { grid-template-columns: 1fr; gap: 12px; }
  .pol-card { padding: 18px; }
  .site .cat-title { font-size: 21px; }
  .w-doc { padding: 22px; }
  .site .w-hcard { padding: 20px; border-radius: 22px; }
  .w-hst-b { min-height: 40px; }
  .w-ask { grid-template-columns: 1fr; padding: 22px; }
  .w-ask .w-ico { display: none; }
  .w-ask .btn { width: 100%; }
  .w-ask h3 { font-size: 21px; }
  .w-price { padding: 30px 22px; border-radius: 28px; }
  .w-price .amt b { font-size: 46px; }
  .w-price .amt b.ask { font-size: 28px; }
  .w-cov-sum { flex-direction: column; gap: 8px; margin-top: -8px; }
  .w-compare th, .w-compare td { padding: 12px 10px; font-size: 14px; }
  .w-compare thead th { font-size: 10.5px; letter-spacing: .04em; }
  .w-compare td .i { display: none; }
  .w-cov thead { display: none; }
  .w-cov, .w-cov tbody, .w-cov tr, .w-cov th, .w-cov td { display: block; }
  .w-cov tr { padding: 12px 16px; border-top: 1px solid var(--line); }
  .w-cov tr:first-child { border-top: 0; }
  .w-cov th, .w-cov td { border-top: 0; padding: 4px 0; }
  .w-cov tbody th { padding-bottom: 8px; }
  .w-cov td { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14.5px; }
  .w-cov td::before { content: attr(data-label); color: var(--ink-2); }
  .faq details { padding: 0 18px; border-radius: 18px; }
  .faq summary { font-size: 17px; padding: 16px 0; }
  .vp-cap { padding: 18px; }
  .vp-cap h3 { font-size: 21px; }
  .vp-still-bar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .vp-still-line { order: 3; flex-basis: 100%; font-size: 13px; }
  .vp-still-bar .btn { margin-left: auto; }
  .site-foot { padding: 44px 0 24px; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site-foot .cols > div:first-child { grid-column: 1 / -1; }
  .site-foot .legal { flex-direction: column; gap: 8px; }
  .site #form-card { padding: 22px 18px; border-radius: 24px; }
}
@media (max-width: 380px) {
  .site-head .brand-name { font-size: 17px; }
  .site-head .actions .btn { padding: 0 10px; font-size: 13px; }
  .t-head h1 { font-size: 36px; }
}
@media (pointer: coarse) {
  .site-foot a { min-height: 44px; display: flex; align-items: center; padding: 0; }
  .w-hst-b, .cat-btn { min-height: 44px; }
  .site-tabs a { min-height: 44px; }
}
/* Reduced motion: plates and buttons stay still (the light and the shadow still answer the pointer). */
@media (prefers-reduced-motion: reduce) {
  .site .lift, .site .lift:hover, .site .lift:focus-visible, .site .lift:has(:focus-visible), .site .lift:active { transform: none; transition: box-shadow .2s ease; }
  .site .btn, .site .btn:hover, .site .btn:active:not(:disabled), .pick-tab, .pick-tab:active, .site .pkg-opt:active, .w-hst-b:active, .site .w-coming-live .chip:active { transform: none; transition: none; }
  .site .btn .i, .w-link .i, .w-more .i, .t-path b .i, .pol-f .i, .w-plates > span:not(.w-ico), .faq summary .i { transition: none; transform: none !important; }
  .w-who-card .w-plates > span:not(.w-ico) { transform: skewY(-14deg) rotate(14deg) !important; }
  .site-head .head-bar, .site-nav a, .site-tabs a, .cat-btn, .site .seg button, .faq details { transition: none; }
}
@media print {
  .site-head, .site-foot, .cta-band, .pick-bar, .h-phone, .sample-note { display: none !important; }
  .site { background: #fff; }
  .w-hero-in, .t-head { background: #fff; color: #000; box-shadow: none; }
  .w-hero h1, .w-hero h1 em, .t-head h1, .w-lead, .w-kicker, .w-meta { color: #000; }
  .site .lift, .site .card, .site .table-wrap { box-shadow: none; border: 1px solid #ccc; }
}

/* Who we help: each service has its own stack, in its own colours and shape. */
.w-plates--home-care > span:nth-child(1) { background: #B9D3E6; }
.w-plates--home-care > span:nth-child(2) { background: #5B97C2; }
.w-plates--home-care > span:nth-child(3) { background: linear-gradient(135deg, #2A80B8, var(--blue-deep)); }
.w-plates--home-health > span:not(.w-ico) { width: 104px; }
.w-plates--home-health > span:nth-child(1) { top: 4px; left: 28px; background: #BFE6DE; }
.w-plates--home-health > span:nth-child(2) { top: 22px; left: 14px; background: #5FC1AF; }
.w-plates--home-health > span:nth-child(3) { top: 40px; left: 0; background: linear-gradient(135deg, #2BB39F, var(--teal-ink)); }
.w-plates--hospice > span:not(.w-ico) { width: 96px; height: 38px; border-radius: 19px; }
.w-plates--hospice > span:nth-child(1) { top: 6px; background: var(--mint); }
.w-plates--hospice > span:nth-child(2) { top: 26px; background: #3E5466; }
.w-plates--hospice > span:nth-child(3) { top: 46px; background: linear-gradient(135deg, #34495A, var(--navy)); }
.w-plates--hospice .w-ico { left: 124px; }
.w-plates--home-health .w-ico { left: 150px; }

/* State and service picker as two numbered steps, with a line saying what is showing. */
.pick.pick-steps { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "s1 arrow s2" "now now now"; align-items: center; gap: 12px 18px; }
.pick-steps .pick-step { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pick-steps .pick-step:first-child { grid-area: s1; }
.pick-steps .pick-step-svc { grid-area: s2; }
.pick-arrow { grid-area: arrow; color: var(--ink-3); display: grid; place-items: center; }
.pick-arrow .i { width: 22px; height: 22px; }
.pick-num { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font: 600 15px/1 var(--font-sans); color: #fff; background: linear-gradient(145deg, #2A80B8, var(--blue-deep)); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 6px 12px -6px rgba(19,75,112,.6); }
.pick-step-svc .pick-num { background: linear-gradient(145deg, #2BB39F, var(--teal-ink)); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 6px 12px -6px rgba(11,107,94,.6); }
.pick-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pick-lbl { font: 600 13px/1.2 var(--font-sans); color: var(--ink-2); }
.pick-steps .pick-state, .pick-steps .pick-title { display: none; }
.pick-steps #pk-state { min-width: 220px; min-height: 46px; font-weight: 600; border-radius: 14px; }
.pick-steps .pick-tab .i { width: 16px; height: 16px; flex: none; }
.pick-now { grid-area: now; margin: 2px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 14.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pick-now b { color: var(--ink); font-weight: 600; }
@media (max-width: 960px) {
  .pick.pick-steps { grid-template-columns: minmax(0, 1fr); grid-template-areas: "s1" "arrow" "s2" "now"; gap: 8px; }
  .pick-arrow { justify-self: start; margin-left: 6px; transform: rotate(90deg); }
  .pick-steps .pick-field { flex: 1; }
  .pick-steps #pk-state { min-width: 0; width: 100%; }
  .pick-steps .pick-step { align-items: flex-start; }
  .pick-steps .pick-num { margin-top: 22px; }
}
.pick-steps .pick-tab { justify-content: flex-start; gap: 8px; }

/* ---------------- Get started: four numbered steps and a basket (buy online) ----------------
   The step plates are static raised plates; the option plates, the Policy Pack, the basket and
   the "Talk to us" plate inside them lift (.lift), so lifts never nest. */

.pick-num.teal { background: linear-gradient(145deg, #2BB39F, var(--teal-ink)); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 6px 12px -6px rgba(11,107,94,.6); }
.site [hidden] { display: none !important; }
.co-sec { padding-top: 40px; }
.co { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.co-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; min-width: 0; }
.co-step { background: var(--surface); border-radius: var(--r-xl); padding: 28px 30px 30px; box-shadow: var(--lift); min-width: 0; }
.co-step-h { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
.co-step-h .pick-num { margin-top: 2px; }
.co-step-h h2 { font: 500 26px/1.2 var(--font-serif); letter-spacing: -.01em; color: var(--ink); margin: 0; }
.co-step-h p { font: 15px/1.5 var(--font-sans); color: var(--ink-2); margin: 4px 0 0; }
.co-wait { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line) inset; font: 500 15px/1.4 var(--font-sans); color: var(--ink-3); }
.co-wait .i { width: 16px; height: 16px; flex: none; }

/* option plates */
.co-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.site .co-opt {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 44px 14px 14px; border: 0; border-radius: 20px; cursor: pointer; text-align: left;
  background: var(--surface); color: var(--ink); font: inherit;
  --sh: 0 0 0 1px var(--line) inset, var(--lift);
  --sh-hi: 0 0 0 1px var(--line-2) inset, var(--lift-hi);
}
.site .co-opt.on {
  background: linear-gradient(180deg, #fff, var(--blue-soft));
  --sh: 0 0 0 2px var(--blue-deep) inset, 0 14px 26px -12px rgba(19, 75, 112, .45);
  --sh-hi: 0 0 0 2px var(--blue-deep) inset, 0 26px 40px -14px rgba(19, 75, 112, .5);
}
.site .co-opt.off { background: var(--surface-2); }
.site .co-opt.off .co-opt-t b { color: var(--ink-2); }
.co-opt .w-ico { width: 44px; height: 44px; border-radius: 14px; }
.co-opt .w-ico .i { width: 21px; height: 21px; }
.co-code { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; font: 600 14px/1 var(--font-mono); letter-spacing: .04em; color: #fff; background: linear-gradient(145deg, #2A80B8, var(--blue-deep)); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(0,0,0,.18) inset, 0 8px 14px -6px rgba(19,75,112,.6); }
.co-code.muted { color: var(--ink-2); background: linear-gradient(145deg, #fff, var(--paper-2)); box-shadow: 0 0 0 1px var(--line) inset, 0 -3px 0 rgba(0,0,0,.06) inset, 0 8px 14px -8px rgba(22,34,44,.3); }
.co-code .i { width: 20px; height: 20px; }
.co-opt-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.co-opt-t b { font: 600 16px/1.25 var(--font-sans); color: var(--ink); }
.co-opt-t small { font: 13.5px/1.35 var(--font-sans); color: var(--ink-3); }
.co-opt-p { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.co-opt-p b { font: 500 24px/1 var(--font-serif); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.co-opt-p small { font: 500 12.5px/1.3 var(--font-sans); color: var(--ink-3); margin-top: 3px; }
.co-opt .st { position: absolute; top: -10px; left: 14px; z-index: 2; box-shadow: 0 4px 10px -6px rgba(22,34,44,.4); }
.co-tick { position: absolute; top: 50%; right: 14px; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; display: grid; place-items: center; color: transparent; box-shadow: 0 0 0 1.5px var(--line-2) inset; background: var(--surface); transition: background .2s ease, box-shadow .2s ease; }
.co-tick .i { width: 14px; height: 14px; }
.co-opt.on .co-tick, .co-tick.on { color: #fff; background: linear-gradient(145deg, #2A80B8, var(--blue-deep)); box-shadow: 0 4px 8px -3px rgba(19,75,112,.6); }
.co-opts-prem { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.co-opts-prem .co-opt { flex-wrap: wrap; align-items: flex-start; padding-top: 16px; }
.co-opts-prem .co-opt-t { flex-basis: 100%; }
.co-opts-prem .co-opt-p { align-items: baseline; flex-direction: row; gap: 6px; }
.co-opts-prem .co-tick { top: 26px; }

/* not live: a short note with "Tell us you're interested" */
.co-more { margin-top: 18px; display: grid; gap: 14px; max-width: 520px; }
.co-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue-line) inset; font: 14.5px/1.5 var(--font-sans); color: var(--ink-2); }
.co-more .co-note { margin-top: 0; }
.co-note > .i { width: 18px; height: 18px; flex: none; color: var(--blue); margin-top: 2px; }
.co-note b { color: var(--ink); }
.co-note-a { display: inline; padding: 0; border: 0; background: none; font: 600 14.5px/1.5 var(--font-sans); color: var(--blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 0; }
.co-note-a:hover { color: var(--blue-deep); }

/* step 3: the Policy Pack (required, locked on) and Premium (optional, on top) */
.site .co-pack {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 18px; align-items: start; padding: 22px 56px 22px 22px; border-radius: 22px;
  background: linear-gradient(180deg, #fff, var(--blue-soft));
  --sh: 0 0 0 2px var(--blue-deep) inset, 0 14px 26px -12px rgba(19, 75, 112, .45);
  --sh-hi: 0 0 0 2px var(--blue-deep) inset, 0 26px 40px -14px rgba(19, 75, 112, .5);
}
.co-pack .co-tick { top: 30px; margin-top: 0; right: 18px; }
.co-pack-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.co-pack-top b { font: 500 22px/1.2 var(--font-serif); color: var(--ink); }
.co-req { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font: 600 12px/1 var(--font-sans); letter-spacing: .02em; color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy)); box-shadow: 0 4px 10px -5px rgba(22,34,44,.6); }
.co-req .i { width: 12px; height: 12px; }
.co-req.test { background: linear-gradient(180deg, #B8730F, #7F540C); }
.co-pack-t p { font: 14.5px/1.5 var(--font-sans); color: var(--ink-2); margin: 6px 0 0; }
.co-pack-t .co-free { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--teal-ink); }
.co-free .i { width: 15px; height: 15px; }
.co-pack-p { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.co-pack-p b { font: 500 36px/1 var(--font-serif); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.co-pack-p b.ask { font-size: 24px; color: var(--blue-deep); }
.co-pack-p span { font: 500 13px var(--font-sans); color: var(--ink-3); margin-top: 4px; }
.co-add { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line-2); }
.co-add h3 { font: 500 22px/1.2 var(--font-serif); color: var(--ink); margin: 0; }
.co-add h3 span { font: 500 15px var(--font-sans); color: var(--ink-3); }
.co-add > p { font: 14.5px/1.5 var(--font-sans); color: var(--ink-2); margin: 6px 0 16px; }
.co-when { display: flex; gap: 8px; align-items: flex-start; margin: 16px 0 0; font: 14.5px/1.5 var(--font-sans); color: var(--ink-2); }
.co-when .i { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--teal-ink); }

/* step 4: details */
.co-form .form-grid { gap: 18px 20px; }
.site .co-form .input { min-height: 48px; font-size: 16px; }
.site .co-form .input.bad { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.co-err { display: block; margin-top: 6px; font: 600 13.5px/1.4 var(--font-sans); color: var(--red-deep); }

/* the basket */
.co-side { position: sticky; top: calc(var(--site-head-h, 76px) + 16px); display: grid; gap: 18px; min-width: 0; }
.site .co-basket {
  border-radius: var(--r-xl); padding: 24px; color: var(--cover-ink);
  background: radial-gradient(120% 80% at 100% 0%, rgba(30, 156, 138, .35), transparent 55%), linear-gradient(170deg, var(--navy-3), var(--navy));
  --sh: 0 0 0 1px rgba(127, 214, 199, .22) inset, 0 40px 70px -30px rgba(22, 34, 44, .75);
  --sh-hi: 0 0 0 1px rgba(127, 214, 199, .35) inset, 0 54px 90px -34px rgba(22, 34, 44, .85);
  --focus: var(--mint); color-scheme: dark;
}
.co-basket-h { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--cover-line); }
.co-basket-h h2 { font: 500 24px/1.2 var(--font-serif); color: #fff; margin: 0; }
.co-basket-i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(145deg, #2BB39F, var(--teal-ink)); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -3px 0 rgba(0,0,0,.18) inset, 0 8px 14px -6px rgba(0,0,0,.5); }
.co-basket-i .i { width: 18px; height: 18px; }
.co-lib { display: flex; flex-direction: column; gap: 2px; padding: 14px 0 6px; font: 600 16px/1.3 var(--font-sans); color: #fff; }
.co-lib small { font: 500 13px var(--font-sans); color: var(--cover-ink-2); }
.co-lines { list-style: none; margin: 0; padding: 0; }
.co-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--cover-line); font: 14.5px/1.4 var(--font-sans); color: var(--cover-ink); }
.co-lines li b { font-weight: 600; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-lines li em { font-style: normal; color: var(--mint); }
.co-lines li.free b { color: var(--mint); }
.co-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0 18px; }
.co-total span { font: 600 15px var(--font-sans); color: #fff; }
.co-total b { font: 500 40px/1 var(--font-serif); letter-spacing: -.02em; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.co-empty { margin: 0; padding: 16px 0 20px; font: 14.5px/1.5 var(--font-sans); color: var(--cover-ink-2); }
.site .co-buy { min-height: 56px; font-size: 17px; }
.site .co-buy .i { width: 18px; height: 18px; }
.site .co-buy[aria-disabled="true"] { opacity: .72; }
.co-buy-err { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(214, 69, 69, .16); box-shadow: 0 0 0 1px rgba(255, 140, 140, .45) inset; font: 600 14px/1.45 var(--font-sans); color: #FFD9D6; }
.co-mode { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font: 13.5px/1.45 var(--font-sans); color: var(--cover-ink-2); }
.co-mode .i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--mint); }
.co-mode.test { color: #F3D9A4; }
.co-mode.test .i { color: #F3D9A4; }
.site .co-talk { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--r-lg); background: var(--surface); }
.co-talk .w-ico { width: 40px; height: 40px; border-radius: 13px; }
.co-talk .w-ico .i { width: 19px; height: 19px; }
.co-talk b { display: block; font: 600 15.5px/1.35 var(--font-sans); color: var(--ink); }
.co-talk span:not(.w-ico) { display: block; font: 14px/1.45 var(--font-sans); color: var(--ink-2); margin-top: 2px; }
.co-talk .w-link { padding: 0; border: 0; background: none; cursor: pointer; }
.co-banner { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; padding: 16px 18px; border-radius: var(--r-md); background: var(--amber-soft); box-shadow: 0 0 0 1px var(--amber-line) inset; font: 15px/1.5 var(--font-sans); color: var(--ink-2); }
.co-banner .i { width: 18px; height: 18px; flex: none; color: var(--amber-ink); margin-top: 2px; }
.co-banner b { color: var(--ink); }
.co-talk-sec .w-head { margin-bottom: 28px; }
.site .co-enq { max-width: 860px; padding: 32px; border-radius: var(--r-xl); }
.site .co-enq .btn-lg { margin-top: 24px; }

/* the welcome page */
.wel { display: grid; gap: 24px; max-width: 760px; margin: 0 auto; }
.site .wel-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 40px; border-radius: 34px; background: var(--surface); }
.wel-card .w-ico { width: 56px; height: 56px; border-radius: 18px; }
.wel-card .w-ico .i { width: 26px; height: 26px; }
.wel-card h2 { font: 500 34px/1.15 var(--font-serif); color: var(--ink); margin: 18px 0 8px; text-wrap: balance; }
.wel-card > p { font: 16.5px/1.55 var(--font-sans); color: var(--ink-2); margin: 0 auto 22px; max-width: 52ch; }
.wel-card > p b { color: var(--ink); overflow-wrap: anywhere; }
.wel-card .w-btns { justify-content: center; margin-top: 0; }
.wel-spin { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--blue-soft); border-top-color: var(--blue-deep); animation: wel-spin 1s linear infinite; }
@keyframes wel-spin { to { transform: rotate(360deg); } }
.wel-sum { list-style: none; margin: 26px 0 0; padding: 0; width: 100%; max-width: 480px; text-align: left; }
.wel-sum li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font: 14.5px/1.4 var(--font-sans); color: var(--ink-2); }
.wel-sum b { color: var(--ink); font-weight: 600; text-align: right; }
.wel-card > p.wel-hint { font-size: 14px; color: var(--ink-3); margin: 18px 0 0; }
.site .wel-test { padding: 26px 28px; border-radius: var(--r-xl); background: #FFFBF2; --sh: 0 0 0 1.5px #E8C987 inset, var(--lift); --sh-hi: 0 0 0 1.5px #E8C987 inset, var(--lift-hi); }
.wel-test-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 600 14.5px/1.45 var(--font-sans); color: var(--ink); }
.wel-test dl { margin: 16px 0 0; display: grid; gap: 4px; }
.wel-test dl div { display: flex; gap: 12px; font: 14.5px/1.45 var(--font-sans); }
.wel-test dt { width: 64px; flex: none; color: var(--ink-3); }
.wel-test dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.wel-mail { margin: 14px 0 0; padding: 18px; border-radius: var(--r-md); background: #fff; box-shadow: 0 0 0 1px var(--line) inset; font: 14px/1.6 var(--font-mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 520px; overflow: auto; }

/* Pricing: the two steps of one offer, joined by a plus */
.w-prices.w-offer { position: relative; }
.w-offer-plus { position: absolute; left: 50%; top: 50%; z-index: 3; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #2BB39F, var(--teal-ink)); box-shadow: 0 0 0 5px var(--bg), 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 18px -6px rgba(11,107,94,.6); }
.w-offer-plus .i { width: 22px; height: 22px; }
.w-price .w-step-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 6px 11px; border-radius: 999px; font: 600 12.5px/1 var(--font-sans); color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy)); box-shadow: 0 4px 10px -5px rgba(22,34,44,.6); }
.w-price .w-step-tag .i { width: 12px; height: 12px; }
.w-price.featured .w-step-tag { color: var(--navy); background: var(--mint); }
.w-pack-n dd .req { display: block; margin-top: 6px; font: 500 13.5px/1.4 var(--font-sans); color: var(--ink-2); letter-spacing: 0; }

@media (max-width: 1180px) {
  .co { grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; }
}
@media (max-width: 960px) {
  .co { grid-template-columns: minmax(0, 1fr); }
  .co-side { position: static; }
  .w-offer-plus { position: static; margin: -6px auto; }
}
@media (max-width: 640px) {
  .co-sec { padding-top: 24px; }
  .co-step { padding: 22px 18px 22px; border-radius: 24px; }
  .co-step-h h2 { font-size: 23px; }
  .co-opts, .co-opts-prem { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .site .co-pack { grid-template-columns: auto minmax(0, 1fr); padding: 18px 48px 18px 16px; }
  .co-pack-p { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; justify-content: flex-start; text-align: left; }
  .co-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .site .co-basket { padding: 20px; }
  .site .wel-card { padding: 32px 20px; border-radius: 26px; }
  .wel-card h2 { font-size: 28px; }
  .site .wel-test { padding: 20px 16px; }
  .site .co-enq { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wel-spin { animation-duration: 3s; }
  .co-tick { transition: none; }
}
.w-price .amt .plus { font: 500 34px/1 var(--font-serif); color: var(--mint); margin-right: -4px; }

/* Video steps: every step button fills its row, so all five end at the same height and line up. */
.vp-steps > li { display: flex; min-width: 0; }
.vp-steps .vp-step { height: 100%; justify-content: flex-start; }
@media (max-width: 1180px) and (min-width: 961px) {
  .vp-steps { align-items: stretch; }
  .vp-steps .vp-step { justify-content: flex-start; }
  .vp-step .t { min-height: 0; }
}
@media (max-width: 1040px) and (min-width: 681px) {
  .vp-steps { align-items: stretch; }
}

/* ---------------- October 20, 2026: the 90-day offer, access and your data, Premium up close ----------------
   Gold marks Premium and nothing else. Teal is "yours" (download your data, every package). Blue is the
   agency's own wording. The access notice is calm: no red, no warning icons. */

.eyebrow.gold { color: var(--gold-ink); }
.eyebrow.gold::before { background: linear-gradient(90deg, #D9A441, var(--gold)); }
.w-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Pricing: the Policy Pack's "includes 90 days with Premium" line, Premium's gold step tag */
.site .w-price .ticks li.incl .i { background: var(--gold-soft); color: var(--gold); stroke-width: 2.4; }
.w-price .ticks li.incl strong { color: var(--ink); }
.w-price.featured .w-step-tag { color: var(--navy); background: linear-gradient(180deg, #F6DFAE, #E9C47C); }
.w-hlist-i.gold { background: linear-gradient(145deg, #C98A1E, var(--gold)); }
.w-group-h .badge { white-space: normal; line-height: 1.35; text-align: left; max-width: 100%; }

/* How access works: four plates on a timeline */
.ax { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; position: relative; }
.ax::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 40px; height: 3px; border-radius: 3px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 10px, transparent 10px 18px);
}
.ax-step {
  --tone: var(--blue-deep); --tone-hi: #2A80B8;
  display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border-radius: var(--r-xl); background: var(--surface);
  --sh: 0 3px 0 var(--tone) inset, var(--lift); --sh-hi: 0 3px 0 var(--tone) inset, var(--lift-hi);
}
.ax-step.gold { --tone: var(--gold); --tone-hi: #C98A1E; }
.ax-step.teal { --tone: var(--teal-ink); --tone-hi: #2BB39F; }
.ax-step.navy { --tone: var(--navy); --tone-hi: #34495A; }
.ax-when { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--paper-2); font: 600 13px/1.2 var(--font-sans); color: var(--ink); font-variant-numeric: lining-nums; }
.ax-when i { width: 22px; height: 22px; border-radius: 50%; flex: none; background: linear-gradient(145deg, var(--tone-hi), var(--tone)); box-shadow: 0 0 0 3px #fff, 0 4px 8px -3px rgba(22, 34, 44, .45); }
.ax-step h3 { font: 500 21px/1.22 var(--font-serif); color: var(--ink); margin-top: 16px; text-wrap: balance; }
.ax-step p { font: 14.5px/1.55 var(--font-sans); color: var(--ink-2); margin: 8px 0 0; }

/* the calm notice: please download your data */
.w-calm {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; margin-top: 28px; padding: 26px 28px;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: 0 0 0 1px var(--teal-line) inset, var(--lift);
}
.w-calm-i { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #2BB39F, var(--teal-ink)); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -3px 0 rgba(0, 0, 0, .18) inset, 0 8px 14px -6px rgba(11, 107, 94, .55); }
.w-calm-i .i { width: 22px; height: 22px; }
.w-calm h3 { font: 500 23px/1.25 var(--font-serif); color: var(--ink); text-wrap: balance; }
.w-calm p { font: 15.5px/1.6 var(--font-sans); color: var(--ink-2); margin: 8px 0 0; max-width: 78ch; }
.w-calm p b { color: var(--ink); font-weight: 600; }
.w-calm .w-link { margin-top: 6px; }

/* What's included: access and your data */
.yd { margin-top: 28px; }
.w-card.yd-card h3 { font-size: 23px; }

/* Home: one line under "How it works" */
.w-keep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 28px 0 0; padding: 14px 16px 14px 20px; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--teal-line) inset, var(--lift); font: 15px/1.5 var(--font-sans); color: var(--ink-2); }
.w-keep > .i { width: 20px; height: 20px; color: var(--teal-ink); flex: none; }
.w-keep > span { flex: 1 1 320px; min-width: 0; }
.w-keep b { color: var(--ink); font-weight: 600; }
.w-keep .w-link { margin-left: auto; }

/* footer: the data line */
.site-foot .foot-data { margin-top: 36px; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .04); box-shadow: 0 0 0 1px var(--cover-line) inset; }
.foot-data-i { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--mint); background: rgba(127, 214, 199, .14); }
.foot-data-i .i { width: 18px; height: 18px; }
.site-foot .foot-data p { margin: 0; max-width: 100ch; font: 14px/1.55 var(--font-sans); color: var(--cover-ink-2); }
.site-foot .foot-data b { color: #fff; font-weight: 600; }
.site-foot .foot-data a { display: inline; padding: 0; min-height: 0; color: var(--mint); text-decoration: underline; text-underline-offset: 3px; font: inherit; font-weight: 600; }
.site-foot .foot-data a:hover { color: #fff; }

/* Get started: the basket's data line, the "I understand" box, what comes next */
.co-keep { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 1px var(--cover-line) inset; }
.co-keep-i { flex: none; color: var(--mint); margin-top: 1px; }
.co-keep-i .i { width: 17px; height: 17px; }
.co-keep p { margin: 0; font: 13.5px/1.5 var(--font-sans); color: var(--cover-ink); }
.co-keep b { color: #fff; font-weight: 600; }
.co-keep a { color: var(--mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.co-keep a:hover { color: #fff; }
.co-agree { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; cursor: pointer; background: rgba(127, 214, 199, .08); box-shadow: 0 0 0 1px rgba(127, 214, 199, .35) inset; font: 14px/1.5 var(--font-sans); color: #fff; transition: box-shadow .2s ease, background .2s ease; }
.co-agree:hover { background: rgba(127, 214, 199, .13); }
.co-agree input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--mint); cursor: pointer; }
.co-agree:has(input:checked) { background: rgba(127, 214, 199, .16); box-shadow: 0 0 0 1.5px var(--mint) inset; }
.co-agree.bad { box-shadow: 0 0 0 2px #FFB4AE inset; }
.co-then { margin: -10px 0 16px; font: 600 14px/1.45 var(--font-sans); color: var(--mint); }

/* welcome: what the 90 days mean */
.wel-keep { display: flex; gap: 14px; align-items: flex-start; width: 100%; max-width: 520px; margin-top: 24px; padding: 18px; border-radius: 18px; text-align: left; background: var(--teal-soft); box-shadow: 0 0 0 1px var(--teal-line) inset; }
.wel-keep .w-ico { width: 40px; height: 40px; border-radius: 13px; }
.wel-keep .w-ico .i { width: 19px; height: 19px; }
.wel-keep b { color: var(--ink); font-weight: 600; }
.wel-keep > div > b { display: block; font: 600 15.5px/1.4 var(--font-sans); }
.wel-keep p { margin: 4px 0 2px; font: 14.5px/1.55 var(--font-sans); color: var(--ink-2); }
.wel-keep .w-link { min-height: 40px; }

/* ---------------- Premium, up close: the showcase ---------------- */

.pm-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; }
.pm-tile {
  grid-column: span 3; display: flex; flex-direction: column; min-width: 0; padding: 26px; border-radius: var(--r-xl); background: var(--surface); color: var(--ink);
  --sh: 0 3px 0 var(--gold) inset, var(--lift); --sh-hi: 0 3px 0 var(--gold) inset, var(--lift-hi);
}
.pm-tile.every { --sh: 0 3px 0 var(--teal-ink) inset, var(--lift); --sh-hi: 0 3px 0 var(--teal-ink) inset, var(--lift-hi); }
.pm-tile.pm-wide { grid-column: span 4; }
.pm-tile.pm-tall { grid-column: span 2; }
.pm-tile-h { display: flex; gap: 14px; align-items: center; }
.pm-tile-h h3 { font: 500 23px/1.2 var(--font-serif); color: var(--ink); margin-top: 6px; text-wrap: balance; }
.pm-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font: 600 11.5px/1.2 var(--font-sans); color: var(--gold-ink); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold-line) inset; }
.pm-tag .i { width: 12px; height: 12px; }
.pm-tag.every { color: var(--teal-ink); background: var(--teal-soft); box-shadow: 0 0 0 1px var(--teal-line) inset; }
.pm-tile > p { font: 15px/1.55 var(--font-sans); color: var(--ink-2); margin: 14px 0 18px; }
.pm-stage { flex: 1 1 auto; display: grid; place-items: center; min-height: 230px; padding: 18px; border-radius: 20px; overflow: hidden; background: linear-gradient(170deg, var(--surface-2), var(--paper-2)); box-shadow: 0 1px 3px rgba(22, 34, 44, .08) inset; }
.pm-tall .pm-stage { padding: 22px 12px 0; align-items: end; }
.pm-ask, .pm-edit, .pm-rail, .pm-zip { width: 100%; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--line) inset, 0 18px 32px -20px rgba(22, 34, 44, .45); }

/* Ask me anything */
.pm-ask { padding: 14px; }
.pm-ask-q { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 14px; border-radius: 999px; box-shadow: 0 0 0 2px var(--blue-deep) inset; font: 500 14.5px/1.35 var(--font-sans); color: var(--ink); }
.pm-ask-q > .i { width: 18px; height: 18px; color: var(--blue); flex: none; }
.pm-ask-q span { flex: 1; min-width: 0; }
.pm-ask-q i { flex: none; font: normal 600 13px/1 var(--font-sans); color: #fff; padding: 9px 14px; border-radius: 999px; background: linear-gradient(180deg, #1E6EA2, var(--blue-deep)); box-shadow: 0 2px 0 #0E3A57; }
.pm-ask-r { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.pm-ask-g { padding: 10px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.pm-ask-gh { display: flex; align-items: center; gap: 6px; font: 600 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pm-ask-gh .i { width: 14px; height: 14px; }
.pm-ask-gh span { margin-left: auto; padding: 2px 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); letter-spacing: 0; }
.pm-ask-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line) inset; }
.pm-ask-row b { font: 600 13px/1.3 var(--font-sans); color: var(--ink); }
.pm-ask-row small { font: 12px/1.35 var(--font-sans); color: var(--ink-3); }
.pm-ask-row .i { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 14px; height: 14px; color: var(--blue); }
.pm-ask-row.top { background: var(--blue-soft); box-shadow: 0 0 0 1.5px var(--blue-line) inset; }
.pm-ask-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pm-ask-try span { font: 600 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; }
.pm-ask-try i { font: normal 500 12.5px/1.2 var(--font-sans); color: var(--blue-ink); padding: 7px 11px; border-radius: 999px; background: var(--blue-soft); }
.pm-peek { border-radius: var(--r-xl); padding: 28px; background: linear-gradient(170deg, #fff, var(--gold-soft)); --sh: 0 3px 0 var(--gold) inset, var(--lift); --sh-hi: 0 3px 0 var(--gold) inset, var(--lift-hi); }

/* Easy read on a phone */
.pm-phone { width: 230px; padding: 8px 8px 0; border-radius: 36px 36px 0 0; background: linear-gradient(160deg, #2A3B49, #0F1820); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1) inset, 0 30px 50px -24px rgba(0, 0, 0, .7); }
.pm-phone-scr { border-radius: 29px 29px 0 0; background: #fff; padding: 26px 14px 18px; color: var(--ink); }
.pm-ez-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pm-ez-ref { font: 500 16px/1.2 var(--font-serif); }
.pm-ez-time { display: inline-flex; align-items: center; gap: 4px; flex: none; padding: 4px 8px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-ink); font: 600 11px/1 var(--font-sans); }
.pm-ez-time .i { width: 12px; height: 12px; }
.pm-ez-bar { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 4px; padding: 6px 8px; border-radius: 12px; background: var(--surface-2); }
.pm-ez-tog { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--font-sans); color: var(--ink); }
.pm-ez-tog i { position: relative; width: 28px; height: 16px; border-radius: 999px; background: var(--teal-ink); }
.pm-ez-tog i::after { content: ""; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.pm-ez-size { display: inline-flex; gap: 4px; }
.pm-ez-size b { display: grid; place-items: center; width: 26px; height: 24px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px var(--line) inset; font: 600 11px/1 var(--font-serif); color: var(--ink-2); }
.pm-ez-size b.big { font-size: 16px; color: var(--ink); box-shadow: 0 0 0 1.5px var(--teal-ink) inset; }
.pm-ez-pts { list-style: none; margin: 0; padding: 0; counter-reset: ez; }
.pm-ez-pts li { counter-increment: ez; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--surface-2); font: 600 15px/1.35 var(--font-sans); color: var(--ink); }
.pm-ez-pts li::before { content: counter(ez); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--teal-ink); color: #fff; font: 600 12px/1 var(--font-sans); }
.pm-ez-go { margin-top: 12px; padding: 10px; border-radius: 12px; text-align: center; font: 600 12.5px/1 var(--font-sans); color: var(--blue); box-shadow: 0 0 0 1px var(--blue-line) inset; }

/* Editing in place (blue: the agency's own wording) */
.pm-edit { padding: 14px; }
.pm-edit-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-edit-h b { font: 500 16px/1.25 var(--font-serif); color: var(--ink); }
.pm-edit-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-ink); font: 600 11.5px/1.2 var(--font-sans); }
.pm-edit-tag .i { width: 12px; height: 12px; }
.pm-edit-tools { display: flex; align-items: center; gap: 4px; margin: 10px 0 8px; padding: 5px; border-radius: 11px; background: var(--surface-2); }
.pm-edit-tools i { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line) inset; font: normal 700 13px/1 var(--font-sans); color: var(--ink-2); }
.pm-edit-tools i.it { font: italic 600 14px/1 var(--font-serif); }
.pm-edit-tools i .i { width: 14px; height: 14px; }
.pm-edit-tools .pm-edit-sp { flex: 1; }
.pm-edit-tools i.txt { padding: 0 10px; font: 600 12px/1 var(--font-sans); color: var(--blue); box-shadow: 0 0 0 1px var(--blue-line) inset; }
.pm-edit-tools i.save { padding: 0 12px; font: 600 12px/1 var(--font-sans); color: #fff; background: linear-gradient(180deg, #1E6EA2, var(--blue-deep)); box-shadow: 0 2px 0 #0E3A57; }
.pm-edit-box { padding: 12px 14px; border-radius: 10px; background: rgba(23, 91, 135, .04); box-shadow: 0 0 0 2px var(--blue) inset; font: 14px/1.6 var(--font-sans); color: var(--ink); }
.pm-caret { display: inline-block; width: 2px; height: 16px; margin-left: 2px; vertical-align: -3px; background: var(--blue-deep); animation: pm-blink 1.1s steps(1) infinite; }
@keyframes pm-blink { 50% { opacity: 0; } }
.pm-edit-f { display: flex; align-items: center; gap: 6px; margin-top: 10px; font: 500 12.5px/1.35 var(--font-sans); color: var(--ink-2); }
.pm-edit-f .i { width: 14px; height: 14px; color: var(--teal-ink); flex: none; }

/* contents and search beside a policy */
.pm-rail { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 12px; }
.pm-rail-side { padding-right: 12px; border-right: 1px solid var(--line); min-width: 0; }
.pm-rail-q { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; box-shadow: 0 0 0 1.5px var(--blue) inset; font: 600 13px/1 var(--font-sans); color: var(--ink); }
.pm-rail-q .i { width: 14px; height: 14px; color: var(--blue); }
.pm-rail-n { display: flex; justify-content: space-between; align-items: center; margin: 8px 2px 6px; font: 600 11.5px/1 var(--font-sans); color: var(--ink-3); }
.pm-rail-n span { display: inline-flex; gap: 2px; }
.pm-rail-n .i { width: 14px; height: 14px; }
.pm-rail-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pm-rail-toc li { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; font: 500 12px/1.3 var(--font-sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.pm-rail-toc li.on { color: #fff; background: linear-gradient(180deg, var(--navy-3), var(--navy)); }
.pm-rail-toc li i { font: normal 700 10.5px/1 var(--font-sans); padding: 2px 6px; border-radius: 999px; background: var(--mark); color: var(--ink); }
.pm-rail-doc { min-width: 0; padding: 4px 2px; }
.pm-rail-doc b { font: 500 15px/1.25 var(--font-serif); color: var(--ink); }
.pm-rail-doc p { margin: 8px 0 0; font: 13px/1.55 var(--font-sans); color: var(--ink-2); }
.pm-line { display: block; height: 8px; margin-top: 10px; border-radius: 4px; background: var(--surface-3); }
.pm-line.s { width: 62%; margin-top: 6px; }

/* risk assessment templates */
.pm-risk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.pm-risk-c { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line) inset, 0 12px 24px -18px rgba(22, 34, 44, .45); }
.pm-risk-tag { padding: 3px 8px; border-radius: 999px; font: 600 11px/1.2 var(--font-sans); }
.pm-risk-tag.req { color: #fff; background: linear-gradient(180deg, #1E6EA2, var(--blue-deep)); }
.pm-risk-tag.rec { color: var(--blue-ink); background: var(--blue-soft); }
.pm-risk-c b { font: 600 13.5px/1.3 var(--font-sans); color: var(--ink); margin-top: 4px; }
.pm-risk-c small { font: 11.5px/1.35 var(--font-sans); color: var(--ink-3); }
.pm-risk-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pm-risk-a i { font: normal 600 11.5px/1 var(--font-sans); color: var(--blue); padding: 6px 9px; border-radius: 999px; box-shadow: 0 0 0 1px var(--blue-line) inset; }

/* download your data: one zip and its folders */
.pm-zip { padding: 14px 16px; }
.pm-zip-h { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pm-zip-i { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #2BB39F, var(--teal-ink)); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 12px -6px rgba(11, 107, 94, .55); }
.pm-zip-i .i { width: 20px; height: 20px; }
.pm-zip-h b { display: block; font: 600 14px/1.3 var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.pm-zip-h small { font: 12.5px/1.3 var(--font-sans); color: var(--ink-3); }
.pm-zip ul { list-style: none; margin: 6px 0 0; padding: 0; }
.pm-zip li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 2px; border-bottom: 1px dashed var(--line); }
.pm-zip li:last-child { border-bottom: 0; }
.pm-zip li b { font: 600 13px/1.3 var(--font-sans); color: var(--ink); }
.pm-zip li small { font: 12px/1.3 var(--font-sans); color: var(--ink-3); text-align: right; }
.pm-fold { position: relative; width: 20px; height: 15px; border-radius: 2px 4px 4px 4px; background: linear-gradient(180deg, #8FD3C6, #4FB8A5); }
.pm-fold::before { content: ""; position: absolute; left: 0; top: -3px; width: 9px; height: 4px; border-radius: 2px 2px 0 0; background: #8FD3C6; }
.pm-zip li.sub { padding-left: 24px; grid-template-columns: 18px minmax(0, 1fr) auto; }
.pm-zip li.sub .pm-fold { width: 16px; height: 12px; }
.pm-file { width: 15px; height: 19px; margin-left: 2px; border-radius: 2px 6px 2px 2px; background: #fff; box-shadow: 0 0 0 1.5px var(--line-2) inset; }

/* the video list grows with the clips */
@media (max-width: 1180px) and (min-width: 961px) {
  .vp-steps, .vp-steps.many { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
/* beside the player, a long list sits closer together so it ends near the player's foot */
@media (min-width: 1181px) {
  .vp-steps.many { gap: 7px; }
  .vp-steps.many .vp-step { min-height: 0; padding: 8px 14px 8px 10px; }
  .vp-steps.many .vp-step .n { width: 34px; height: 34px; border-radius: 11px; font-size: 15px; }
  .vp-steps.many .vp-step b { font-size: 15px; }
  .vp-steps.many .vp-step small { font-size: 13px; }
}

@media (max-width: 1180px) {
  .pm-tile.pm-wide { grid-column: span 6; }
  .pm-tile.pm-tall { grid-column: span 3; }
  .pm-tile.pm-tall + .pm-tile { grid-column: span 3; }
}
@media (max-width: 1040px) {
  .ax { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax::before { display: none; }
}
@media (max-width: 960px) {
  .pm-grid { grid-template-columns: minmax(0, 1fr); }
  .pm-tile, .pm-tile.pm-wide, .pm-tile.pm-tall, .pm-tile.pm-tall + .pm-tile { grid-column: auto; }
  .w-grid.g2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ax { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ax-step { padding: 20px; border-radius: 24px; }
  .ax-step h3 { font-size: 19px; margin-top: 12px; }
  .w-calm { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; gap: 12px; border-radius: 24px; }
  .w-calm h3 { font-size: 21px; }
  .w-calm p { font-size: 15px; }
  .w-keep { border-radius: 20px; }
  .w-keep .w-link { margin-left: 0; }
  .site-foot .foot-data { padding: 14px; }
  .pm-tile { padding: 22px 18px; border-radius: 24px; }
  .pm-tile-h h3 { font-size: 21px; }
  .pm-stage { padding: 12px; min-height: 0; border-radius: 16px; }
  .pm-tall .pm-stage { padding: 16px 8px 0; }
  .pm-peek { padding: 16px; }
  .pm-ask { padding: 10px; }
  .pm-ask-q { font-size: 13.5px; padding-left: 10px; }
  .pm-ask-q > .i { display: none; }
  .pm-rail { grid-template-columns: minmax(0, 1fr); }
  .pm-rail-side { border-right: 0; padding-right: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .pm-rail-toc li:nth-child(n+6) { display: none; }
  .pm-risk { grid-template-columns: minmax(0, 1fr); }
  .pm-risk-c:nth-child(n+4) { display: none; }
  .pm-zip li { grid-template-columns: 22px minmax(0, 1fr); }
  .pm-zip li small { display: none; }
  .pm-edit-tools i.txt { display: none; }
  .wel-keep { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-caret { animation: none; }
  .co-agree { transition: none; }
}