/* Keymews marketing site.
   Tokens come from landlord-app/brand/brand-guidelines.html (the app is the
   source of truth): Harbour Navy, Wisteria, slate; Bricolage Grotesque
   for titles, Figtree for everything else; 8 px controls, 12 px cards. */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url(/assets/fonts/bricolage-600.woff?v=433f0ef2f0) format("woff"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url(/assets/fonts/bricolage-700.woff?v=88a7d7ad59) format("woff"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url(/assets/fonts/figtree-400.woff?v=17af097106) format("woff"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url(/assets/fonts/figtree-500.woff?v=bfe90d367e) format("woff"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url(/assets/fonts/figtree-600.woff?v=100a2320de) format("woff"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url(/assets/fonts/figtree-700.woff?v=b33aeb9bd3) format("woff"); }

:root {
  /* Harbour Navy */
  --navy-50: #F1F4F9; --navy-100: #E2E8F2; --navy-200: #C4D0E3; --navy-300: #96A9C9; --navy-500: #3F5F90;
  --navy-600: #2C4A78; --navy-700: #213C66; --navy-800: #1A3159; --navy-900: #142A4D; --navy-950: #0E2240;
  /* Wisteria */
  --promo-50: #FFFBEB; --promo-300: #FCD34D; --promo-400: #FBBF24;
  --wisteria-50: #F6F4FD; --wisteria-100: #E7E1FA; --wisteria-400: #B9A7F4; --wisteria-600: #7558D0; --wisteria-700: #6A4DBA; --wisteria-800: #553C98;
  /* Slate */
  --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8;
  --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-900: #0F172A;
  /* Status: background 50, text 800, dot 500 */
  --ok-bg: #ECFDF5; --ok-fg: #065F46; --ok-dot: #10B981;
  --warn-bg: #FFFBEB; --warn-fg: #92400E; --warn-dot: #F59E0B;
  --bad-bg: #FEF2F2; --bad-fg: #991B1B; --bad-dot: #EF4444;
  --info-bg: #F0F9FF; --info-fg: #075985; --info-dot: #0EA5E9;

  /* Engine roles */
  --sc-canvas: var(--slate-50);
  --sc-surface: #FFFFFF;
  --sc-ink: var(--slate-900);
  --sc-ink-soft: var(--slate-600);
  --sc-accent: var(--wisteria-700);
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --sc-font-text: "Figtree", system-ui, sans-serif;
  --sc-r-sm: 8px; --sc-r-md: 12px; --sc-r-lg: 12px;
  --sc-shadow-color: 217 60% 15%;

  --line: var(--slate-200);
  --line-strong: var(--slate-300);
  --gutter: clamp(1rem, 4.5vw, 3.5rem);
  --maxw: 76rem;
  --section: clamp(4rem, 9vw, 8.5rem);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --card-shadow: 0 1px 2px hsl(217 60% 15% / 0.06), 0 4px 14px hsl(217 60% 15% / 0.06), 0 0 0 1px hsl(217 40% 30% / 0.06);
  --float-shadow: 0 2px 6px hsl(217 60% 15% / 0.08), 0 18px 48px hsl(217 60% 15% / 0.16), 0 0 0 1px hsl(217 40% 30% / 0.08);
  --header-h: 72px;
}

html { scroll-padding-top: 1rem; }
body { background: var(--slate-50); color: var(--slate-900); font-family: var(--sc-font-text); font-size: 1.0625rem; line-height: 1.6; overflow-x: clip; }
::selection { background: var(--wisteria-100); color: var(--slate-900); }
:focus-visible { outline: 2px solid var(--wisteria-600); outline-offset: 3px; border-radius: 4px; }
a { color: var(--wisteria-700); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--wisteria-800); }
h1, h2, h3, h4 { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; color: var(--navy-950); text-wrap: balance; margin: 0; }
p { margin: 0; text-wrap: pretty; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1; transform: none; }
main:focus { outline: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--white { background: #FFFFFF; border-block: 1px solid var(--line); }
.section--navy { background: var(--navy-950); color: #FFFFFF; --sc-ink: #FFFFFF; }
.section--navy :is(h1, h2, h3) { color: #FFFFFF; }
.section--navy a:not(.btn) { color: var(--wisteria-400); }

.display { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.25rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.h2 { font-size: clamp(1.9rem, 1.35rem + 2vw, 3rem); letter-spacing: -0.03em; }
.h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.lede { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); color: var(--slate-600); max-width: 58ch; }
.muted { color: var(--slate-600); }
.small { font-size: 0.9rem; }
.measure { max-width: 64ch; }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head > * + * { margin-top: 1rem; }

/* ------------------------------------------------------------- buttons */
.btn {
  --b-bg: var(--navy-950); --b-fg: #FFFFFF; --b-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.35rem; border-radius: 8px; border: 1px solid var(--b-border);
  background: var(--b-bg); color: var(--b-fg); font: 600 1rem/1.2 var(--sc-font-text); text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px hsl(217 60% 15% / 0.12);
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease), box-shadow 150ms var(--ease);
  cursor: pointer;
}
.btn:hover { --b-bg: var(--navy-800); color: var(--b-fg); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { --b-bg: var(--navy-950); }
.btn--secondary { --b-bg: #FFFFFF; --b-fg: var(--navy-950); --b-border: var(--slate-300); }
.btn--secondary:hover { --b-bg: var(--navy-50); --b-border: var(--navy-300); }
.btn--light { --b-bg: #FFFFFF; --b-fg: var(--navy-950); }
.btn--light:hover { --b-bg: var(--navy-50); }
.btn--ghost-light { --b-bg: transparent; --b-fg: #FFFFFF; --b-border: hsl(0 0% 100% / 0.4); box-shadow: none; }
.btn--ghost-light:hover { --b-bg: hsl(0 0% 100% / 0.08); --b-border: #FFFFFF; }
.btn--sm { min-height: 40px; padding: 0.5rem 1rem; font-size: 0.95rem; }
.btn.is-loading { position: relative; color: transparent; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid hsl(0 0% 100% / 0.4); border-top-color: #FFFFFF; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; gap: 0.35rem; align-items: center; }
.link-arrow::after { content: "→"; transition: transform 150ms var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }
.link-quiet { color: var(--navy-950); font-weight: 600; text-decoration: none; }
.link-quiet:hover { color: var(--wisteria-700); text-decoration: underline; }

/* ------------------------------------------------------------- header */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--navy-950); color: #FFFFFF; padding: 0.6rem 1rem; border-radius: 8px; }
.skip:focus { top: 1rem; color: #FFFFFF; }
.site-header { position: sticky; top: 0; z-index: 30; background: #FFFFFF; border-bottom: 1px solid var(--line); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
/* Hides while scrolling down, comes back on the way up (site.js). */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-floating { box-shadow: 0 6px 20px hsl(217 40% 20% / 0.08); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
.site-header__inner { width: min(100% - 2 * var(--gutter), 84rem); margin-inline: auto; min-height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; }
.brand { display: inline-flex; flex: none; }
.brand img { height: 32px; width: auto; }
.site-nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-nav__links { display: flex; gap: 0.25rem; margin-left: 1rem; }
.site-nav__links a { display: block; padding: 0.5rem 0.75rem; border-radius: 8px; color: var(--slate-700); font-weight: 500; text-decoration: none; }
.site-nav__links a:hover { color: var(--navy-950); background: var(--slate-100); }
.site-nav__links a[aria-current="page"] { color: var(--navy-950); font-weight: 600; box-shadow: inset 0 -2px 0 var(--wisteria-400); border-radius: 0; }
.site-nav__actions { display: flex; align-items: center; gap: 0.75rem; }
.menu-toggle { display: none; margin-left: auto; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--slate-300); border-radius: 8px; background: #FFFFFF; color: var(--navy-950); font-weight: 600; cursor: pointer; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 180ms var(--ease), opacity 120ms; }
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1100px) {
  .site-header__inner { display: grid; grid-template-columns: auto 1fr; grid-template-rows: var(--header-h); align-items: center; gap: 0 1rem; }
  .menu-toggle { grid-column: 2; justify-self: end; }
  .site-nav { grid-column: 1 / -1; }
  .js .menu-toggle { display: inline-flex; }
  .site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 1rem; padding: 0.5rem 0 1.25rem; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; }
  .site-nav__links { flex-direction: column; margin: 0; }
  .site-nav__links a { padding: 0.8rem 0.25rem; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.05rem; }
  .site-nav__links a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--wisteria-400); padding-left: 0.75rem; }
  .site-nav__actions { flex-wrap: wrap; }
  .site-nav__actions .btn { flex: 1 1 10rem; min-height: 48px; }
  .site-nav__actions .link-quiet { flex-basis: 100%; padding: 0.5rem 0.25rem; }
}


/* ------------------------------------------------------------- footer */
.site-footer { background: var(--navy-950); color: var(--navy-200); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.site-footer__inner { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; display: grid; grid-template-columns: minmax(14rem, 0.9fr) 2.6fr; gap: 3rem; }
.site-footer__brand img { height: 32px; width: auto; }
.site-footer__brand p { margin-top: 1rem; max-width: 30ch; }
.site-footer__nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; }
.site-footer h2 { font: 600 0.8rem/1.3 var(--sc-font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-300); margin-bottom: 1rem; }
.site-footer ul li + li { margin-top: 0.4rem; }
.site-footer a { color: #FFFFFF; text-decoration: none; display: inline-block; padding: 0.15rem 0; }
.site-footer a:hover { color: var(--wisteria-400); text-decoration: underline; }
.site-footer .details { margin-top: 1.25rem; }
.site-footer__legal { width: min(100% - 2 * var(--gutter), var(--maxw)); margin: 3rem auto 0; padding: 1.5rem 0 2rem; border-top: 1px solid var(--navy-800); font-size: 0.875rem; color: var(--navy-300); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
@media (max-width: 760px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------- media frames */
.screen { display: block; border-radius: 12px; background: #FFFFFF; box-shadow: var(--float-shadow); overflow: hidden; }
.screen img { display: block; width: 100%; height: auto; }
.phone { display: block; border-radius: 25px; background: var(--navy-950); padding: 3.5px; box-shadow: var(--float-shadow); }
.phone img { display: block; width: 100%; height: auto; border-radius: 21.5px; }
.phone video, .screen video { display: block; width: 100%; height: auto; }
.phone video { border-radius: 21.5px; background: #F8FAFC; }
/* Pause/play for screen recordings, at the start of the figure's caption. */
.loop__toggle { display: inline-grid; place-items: center; vertical-align: middle; width: 1.75rem; height: 1.75rem; margin: -0.2rem 0.45rem 0 0; border: 1px solid var(--line-strong); border-radius: 50%; background: #FFFFFF; color: var(--navy-950); cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease); }
.loop__toggle:hover { background: var(--navy-950); color: #FFFFFF; }
.loop__toggle:focus-visible { outline: 2px solid var(--wisteria-600); outline-offset: 2px; }
.loop__toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.loop__toggle .loop__play { display: none; fill: currentColor; stroke: none; }
.loop__toggle.is-paused .loop__play { display: block; }
.loop__toggle.is-paused .loop__pause { display: none; }
figcaption, .caption { font-size: 0.875rem; color: var(--slate-500); margin-top: 0.75rem; }
.demo-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--slate-600); background: #FFFFFF; border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.6rem; }

/* ------------------------------------------------------------- status pills (app vocabulary) */
.pill { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 999px; padding: 0.15rem 0.65rem; font-size: 0.8rem; font-weight: 600; background: var(--slate-100); color: var(--slate-700); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--slate-400); }
.pill--info { background: var(--info-bg); color: var(--info-fg); } .pill--info::before { background: var(--info-dot); }

/* =============================================================== HOME */
/* The filing line: one vertical divider shared by hero, peak and close. */
.col-label { display: inline-flex; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 999px; background: #FFFFFF; border: 1px solid var(--line); color: var(--slate-600); }
/* The answer side: solid navy with a live wisteria dot, so it reads first. */
.col-label--keymews { align-items: center; gap: 0.55rem; color: #FFFFFF; background: var(--navy-950); border-color: var(--navy-950); font-size: 0.88rem; letter-spacing: 0.06em; padding: 0.5rem 1.05rem 0.5rem 0.85rem; box-shadow: 0 8px 20px hsl(217 60% 15% / 0.2); }
.col-label--keymews::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--wisteria-400); box-shadow: 0 0 0 4px hsl(255 80% 80% / 0.25); }
.hero__now .col-label { align-self: flex-start; margin-bottom: 1.25rem; }

.hero { position: relative; padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 6vw, 5rem); overflow: clip; }
.hero__grid { width: min(100% - 2 * var(--gutter), 84rem); margin-inline: auto; display: grid; grid-template-columns: 0.8fr 1px 1.4fr; gap: 0 clamp(1.25rem, 3vw, 3rem); }
/* "How it's kept now" on the left and Keymews on the right, with the divider
   in the same place as the filing section's line below (same columns and gap).
   The page source keeps the headline first. */
.hero__now { grid-column: 1; grid-row: 1; }
.hero__line { grid-column: 2; grid-row: 1; }
.hero__keymews { grid-column: 3; grid-row: 1; }
.hero__line { background: linear-gradient(var(--line-strong), var(--line-strong)) center / 1px 100% no-repeat; }
.hero__now { display: flex; flex-direction: column; }
.hero__now-title { font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2rem); font-weight: 600; color: var(--slate-600); letter-spacing: -0.025em; line-height: 1.15; max-width: 20ch; }
.hero__keymews > * + * { margin-top: 1.25rem; }
.hero__keymews .lede { max-width: 44ch; }
.hero__title span { display: block; }
.hero__keymews .btn-row { margin-top: 1.75rem; }

/* The pile: loose admin as real markup, at different depths. Illustration, not product. */
.pile { position: relative; flex: 1; min-height: 25rem; margin-top: 1.5rem; }
.item { position: absolute; width: min(17.5rem, 82%); font-size: 0.92rem; line-height: 1.4; color: var(--slate-900); box-shadow: 0 1px 2px hsl(217 40% 20% / 0.1), 0 10px 24px hsl(217 40% 20% / 0.12); transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0deg)) scale(var(--s, 1)); will-change: transform; }
.item--text { background: #FFFFFF; border-radius: 16px 16px 16px 4px; padding: 0.75rem 0.95rem; border: 1px solid var(--line); }
.item--text .item__from { display: block; font-size: 0.72rem; font-weight: 600; color: var(--slate-500); margin-bottom: 0.2rem; }
.item--sticky { background: #FEF3C7; padding: 0.9rem 1rem 1.1rem; width: min(13rem, 70%); font-weight: 600; border-radius: 2px; }
.item--sheet { background: #FFFFFF; border: 1px solid var(--slate-300); border-radius: 4px; padding: 0; overflow: hidden; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.item--sheet table { border-collapse: collapse; width: 100%; }
.item--sheet td, .item--sheet th { border: 1px solid var(--slate-200); padding: 0.3rem 0.45rem; text-align: left; font-weight: 400; }
.item--sheet th { background: var(--slate-100); font-weight: 600; color: var(--slate-600); }
.item--sheet .q { background: #FEF9C3; font-weight: 600; }
.item--cert { background: #FFFDF7; border: 1px solid #E7DFC9; border-radius: 3px; padding: 0.9rem 1rem; font-family: Georgia, "Times New Roman", serif; }
.item--cert strong { display: block; font-size: 0.95rem; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 0.35rem; }
.item--email { background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.9rem; }
.item--email .item__from { display: block; font-size: 0.72rem; color: var(--slate-500); }
.item--email b { display: block; font-weight: 600; margin: 0.15rem 0; }
.item--diary { background: #FFFFFF; border-radius: 4px; padding: 0.8rem 1rem 0.9rem 1.6rem; border: 1px solid var(--line); background-image: linear-gradient(90deg, transparent 1rem, #FCA5A5 1rem, #FCA5A5 calc(1rem + 1px), transparent calc(1rem + 1px)); font-style: italic; }
.item--diary .item__from { display: block; font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--slate-500); margin-bottom: 0.15rem; }

/* Hero depth: far pile items are smaller and softer; screens overlap. */
.hero .item { --s: var(--depth-s, 1); filter: blur(var(--blur, 0)); }
.hero .item[data-depth="far"] { --depth-s: 0.88; --blur: 0.6px; opacity: 0.8; }
.hero .item[data-depth="near"] { --depth-s: 1.04; z-index: 3; }
.hero__screens { position: relative; margin-top: 2.5rem; padding-bottom: 2.5rem; }
.hero__screens .screen { width: 100%; transform: translate3d(0, var(--py, 0), 0); }
.hero__screens .phone { position: absolute; width: 27%; right: -2%; bottom: -4%; transform: translate3d(var(--px2, 0), var(--py2, 0), 0); }
.hero__screens .demo-tag { position: absolute; left: 1rem; bottom: 0.75rem; z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .hero [data-depth] { transition: none; }
}

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__now, .hero__line, .hero__keymews { grid-column: auto; grid-row: auto; }
  .hero__keymews { order: 1; }
  .hero__line { order: 2; height: 1px; margin: 2.75rem 0 1.75rem; background-size: 100% 1px; }
  .hero__now { order: 3; }
  .pile { min-height: 23rem; }
  .hero__screens .phone { width: 34%; right: -1%; }
}

/* ---- The filing (peak). Pinned by the engine; page JS writes --f per item. */
.filing { background: var(--slate-50); }
.filing__stage { display: grid; grid-template-rows: auto 1fr auto; padding-block: clamp(1rem, 3vh, 2rem); }
.filing__head { width: min(100% - 2 * var(--gutter), 84rem); margin-inline: auto; display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.filing__head h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); max-width: 26ch; }
.filing__tally { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy-950); white-space: nowrap; font-size: 0.95rem; }
.filing__tally b { font-family: var(--sc-font-display); font-size: 1.6rem; }
.filing__grid { position: relative; width: min(100% - 2 * var(--gutter), 84rem); margin-inline: auto; display: grid; grid-template-columns: 0.8fr 1px 1.4fr; gap: 0 clamp(1.25rem, 3vw, 3rem); align-items: center; min-height: 0; }
.filing__line { align-self: stretch; background: var(--line-strong); position: relative; }
.filing__line::after { content: ""; position: absolute; left: 50%; top: var(--line-at, 50%); width: 11px; height: 11px; border-radius: 50%; background: var(--wisteria-400); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px var(--slate-50); }
.filing__pile { position: relative; height: min(56vh, 30rem); }
.filing__pile .item { left: 50%; top: 50%; translate: -50% -50%; width: min(21rem, 92%); font-size: 1.02rem; }
.filing__pile .item--sticky { width: min(15rem, 76%); font-size: 1.15rem; padding: 1.2rem 1.25rem 1.5rem; }
.filing__screens { position: relative; aspect-ratio: 1140 / 713; }
.filing__shot { position: absolute; inset: 0; margin: 0; opacity: var(--o, 0); transition: opacity 260ms var(--ease); }
.filing__shot .screen { height: 100%; }
.filing__shot .screen img { height: 100%; object-fit: cover; object-position: top left; }
.filing__mark { position: absolute; border: 2px solid var(--wisteria-600); border-radius: 8px; box-shadow: 0 0 0 4px hsl(255 45% 52% / 0.18); opacity: var(--m, 0); transform: scale(calc(1.06 - var(--m, 0) * 0.06)); pointer-events: none; }
.filing__caption { position: absolute; left: 0; right: 0; top: calc(100% + 0.9rem); display: flex; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.filing__caption b { font-family: var(--sc-font-display); font-weight: 600; color: var(--navy-950); font-size: 1.1rem; }
.filing__caption span { color: var(--slate-600); font-size: 0.95rem; }
.filing__foot { width: min(100% - 2 * var(--gutter), 84rem); margin-inline: auto; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8rem; color: var(--slate-500); }
.filing__side[data-narrow] { display: none; }
@media (max-width: 960px) {
  .filing__grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 1px auto; gap: 1rem 0; align-items: center; }
  .filing__pile { height: 100%; min-height: 12rem; }
  .filing__line { height: 1px; }
  .filing__line::after { top: 50%; left: var(--line-at, 50%); }
  /* The captions hang below the screens; reserve their height so the foot never sits on them. */
  .filing__screens { width: 100%; align-self: start; margin-bottom: 6.75rem; }
  .filing__caption { position: static; margin-top: 0.75rem; }
  /* Room under the heading so the stacked cards never ride up into it. */
  .filing__head { margin-bottom: 2rem; }
  .filing__head h2 { font-size: 1.25rem; }
  /* The stack fans upwards, so centre it below the middle of its space. */
  .filing__pile .item { top: 60%; width: min(16rem, 78%); font-size: 0.85rem; }
  .filing__foot { flex-direction: column; gap: 0.25rem; }
  .filing__side[data-wide] { display: none; }
  .filing__side[data-narrow] { display: inline; }
}
@media (max-width: 960px) and (max-height: 760px) {
  .filing__head { margin-bottom: 2.5rem; }
  .filing__pile .item { width: min(14rem, 70%); font-size: 0.78rem; }
}
/* Reduced motion (and no JS): the six pairs as a still list, no pinning. */
.filing.is-static .filing__stage { display: block; }
.filing.is-static .filing__grid, .no-js .filing .filing__grid { display: none; }
.filing__static { display: none; }
.filing.is-static .filing__static, .no-js .filing .filing__static { display: grid; }
.filing__static { width: min(100% - 2 * var(--gutter), 84rem); margin: 2rem auto 0; gap: 2.5rem; padding-bottom: 3rem; }
.filing__pair { display: grid; grid-template-columns: 0.8fr 1px 1.4fr; gap: 0 2rem; align-items: center; }
.filing__pair::before { content: ""; grid-column: 2; grid-row: 1; align-self: stretch; background: var(--line-strong); }
.filing__pair > :first-child { grid-column: 1; grid-row: 1; }
.filing__pair > :last-child { grid-column: 3; grid-row: 1; }
.filing__pair .item { position: static; transform: none; width: auto; max-width: 18rem; }
@media (max-width: 960px) {
  .filing__pair { grid-template-columns: 1fr; gap: 1rem; }
  .filing__pair::before { display: none; }
  .filing__pair > :first-child, .filing__pair > :last-child { grid-column: 1; grid-row: auto; }
}
.no-js .filing { height: auto !important; }
.no-js .filing__stage { position: static; height: auto; }

/* ---- What Keymews does: four jobs, each linking to its group and features. */
.jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.job { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: #FFFFFF; }
.job__icon { width: 2.5rem; height: 2.5rem; border-radius: 8px; background: var(--navy-950); color: var(--wisteria-400); display: grid; place-items: center; }
.job__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.job h3 { font-size: 1.2rem; margin-top: 0.4rem; }
.job h3 a { color: var(--navy-950); text-decoration: none; }
.job h3 a:hover { color: var(--wisteria-700); text-decoration: underline; }
.job p { color: var(--slate-600); }
.job__parts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.6rem; }
.job__parts a { padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--slate-100); color: var(--slate-700); font-size: 0.85rem; font-weight: 500; text-decoration: none; }
.job__parts a:hover { background: var(--navy-50); color: var(--navy-950); }
.jobs__more { margin-top: 2rem; }
@media (max-width: 1080px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .jobs { grid-template-columns: 1fr; } }
/* Home "I'm a…" picker: CSS only, like the pricing audience toggle. */
.audience-toggle.who-toggle { margin: 0 0 1.75rem; }
.who-panel { display: none; animation: who-in 280ms var(--ease); }
.audience-shell:has(#who-landlord:checked) [data-who="landlord"],
.audience-shell:has(#who-tenant:checked) [data-who="tenant"],
.audience-shell:has(#who-contractor:checked) [data-who="contractor"],
.audience-shell:has(#who-accountant:checked) [data-who="accountant"] { display: block; }
.jobs--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 58rem; }
.who-panel__cta { margin-top: 2rem; }
@keyframes who-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 600px) { .jobs--two { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .who-panel { animation: none; } }

/* ---- Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
/* Outranks the ol[role="list"] reset, which otherwise zeroes the gap under the heading. */
.steps[role="list"] { margin-top: clamp(2.5rem, 5vw, 4rem); }
.steps li { counter-increment: step; position: relative; padding-top: 3.25rem; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--navy-950); color: #FFFFFF; font: 700 1rem/2.25rem var(--sc-font-display); text-align: center; }
.steps li::after { content: ""; position: absolute; top: 1.125rem; left: 2.85rem; right: -0.6rem; height: 1px; background: var(--line-strong); }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.1rem; }
.steps p { margin-top: 0.4rem; color: var(--slate-600); font-size: 0.97rem; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps li { padding: 0 0 1.75rem 3.5rem; }
  .steps li::after { top: 2.5rem; bottom: 0.25rem; left: 1.1rem; right: auto; width: 1px; height: auto; }
}

/* ---- Trust: two real planes, facts beside them */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.trust__visual { position: relative; padding: 0 12% 14% 0; }
.trust__visual .phone { position: absolute; right: 0; bottom: 0; width: 34%; }
.trust__facts li { padding: 1rem 0; border-top: 1px solid var(--navy-800); }
.trust__facts b { display: block; color: #FFFFFF; font-weight: 600; }
.trust__facts span { color: var(--navy-200); }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } }

/* ---- Plans */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.plan__amount--label { font-size: 1.6rem; }
@media (max-width: 1180px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: var(--card-shadow); }
.plan--highlight { border-color: var(--navy-950); box-shadow: 0 0 0 1px var(--navy-950), var(--card-shadow); }
.plan__name { font-size: 1.4rem; }
.plan__price { font-family: var(--sc-font-display); font-size: 1.6rem; font-weight: 700; color: var(--navy-950); }
.plan__price--tbc { font-family: var(--sc-font-text); font-size: 1rem; font-weight: 600; color: var(--slate-600); padding: 0.35rem 0.7rem; background: var(--slate-100); border-radius: 999px; align-self: flex-start; }
.plan__interval { font-family: var(--sc-font-text); font-size: 0.95rem; font-weight: 500; color: var(--slate-600); }
.plan__summary { color: var(--slate-600); }
.plan__annual { font-size: 0.92rem; color: var(--slate-700); margin-top: -0.4rem; }
.plan__annual span { color: var(--wisteria-700, #6A4DBA); font-weight: 600; }
.plan__founding { display: grid; gap: 0.3rem; font-size: 0.88rem; color: var(--navy-950); background: var(--promo-50); border: 1px solid var(--promo-300); border-radius: 10px; padding: 0.55rem 0.7rem 0.6rem; }
.plan__founding-tag { justify-self: start; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--navy-950); background: var(--promo-400); border-radius: 999px; padding: 0.1rem 0.55rem; }
.plan__founding s { color: var(--slate-500); text-decoration-thickness: 1.5px; }
.plan__founding b { font-size: 1.05rem; }
/* The founding offer is the one promotion on the site: warm amber on the brand's navy and wisteria. */
.offer { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); background: linear-gradient(115deg, var(--navy-950) 0%, #2A2560 55%, var(--wisteria-700) 100%); color: #FFFFFF; border-radius: 16px; padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.1rem, 3vw, 2rem); margin-bottom: 1.25rem; box-shadow: 0 12px 32px hsl(217 60% 15% / 0.22); position: relative; overflow: hidden; }
.offer::after { content: ""; position: absolute; right: -4rem; top: -4rem; width: 14rem; height: 14rem; border-radius: 50%; background: radial-gradient(circle, hsl(43 96% 56% / 0.28), transparent 70%); pointer-events: none; }
.offer__badge { flex: none; display: grid; place-items: center; align-content: center; width: 6.25rem; height: 6.25rem; border-radius: 50%; background: var(--promo-400); color: var(--navy-950); line-height: 1; transform: rotate(-8deg); box-shadow: 0 0 0 6px hsl(43 96% 56% / 0.25); }
.offer__badge b { font-family: var(--sc-font-display); font-size: 2rem; letter-spacing: -0.02em; }
.offer__badge span { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.15rem; }
.offer__body { position: relative; z-index: 1; }
.offer__tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--promo-300); border: 1px solid hsl(43 96% 56% / 0.5); border-radius: 999px; padding: 0.15rem 0.6rem; margin-bottom: 0.5rem; }
.offer__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.2; margin-bottom: 0.35rem; }
.offer__text { color: hsl(210 40% 90%); }
@media (max-width: 600px) {
  .offer { flex-direction: column; align-items: flex-start; }
  .offer__badge { width: 4.75rem; height: 4.75rem; }
  .offer__badge b { font-size: 1.5rem; }
}
.plan__fact { font-size: 0.92rem; color: var(--slate-700); padding-top: 0.75rem; border-top: 1px solid var(--line); }
.plan__cta { margin-top: auto; }
/* Pricing chooser: Monthly/Annual toggle (CSS only) and the tenancies slider. */
.chooser { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2.5rem; margin: 0.5rem 0 1.5rem; }
.billing-toggle { display: inline-flex; padding: 4px; margin: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: #FFFFFF; }
.billing-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.billing-toggle label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 1.15rem; border-radius: 999px; font-weight: 600; color: var(--slate-700); cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease); }
.billing-toggle label span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-950); background: var(--promo-400); border-radius: 999px; padding: 0.1rem 0.5rem; }
.billing-toggle input:checked + label { background: var(--navy-950); color: #FFFFFF; }
.billing-toggle input:focus-visible + label { outline: 2px solid var(--wisteria-600); outline-offset: 2px; }
.audience-shell [data-billing="year"] { display: none; }
.audience-shell:has(#billing-year:checked) [data-billing="year"] { display: block; }
.audience-shell:has(#billing-year:checked) a[data-billing="year"] { display: inline-flex; }
.audience-shell:has(#billing-year:checked) [data-billing="month"] { display: none; }
.plan__billing { display: grid; gap: 0.6rem; }
.plan__billing .plan__annual { margin-top: -0.3rem; }
.fit { flex: 1 1 22rem; max-width: 30rem; }
.fit__label { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; color: var(--navy-950); }
.fit__label output { font-family: var(--sc-font-display); font-size: 1.15rem; color: var(--wisteria-700); }
.fit__range { width: 100%; margin: 0.6rem 0 0.35rem; accent-color: var(--wisteria-700); height: 28px; cursor: pointer; }
.fit__hint { font-size: 0.85rem; color: var(--slate-500); }
.needs { flex: 1 1 100%; margin: 0; padding: 0; border: 0; }
.needs__legend { float: left; font-weight: 600; color: var(--navy-950); margin: 0 0 0.6rem; width: 100%; }
.needs__options { display: flex; flex-wrap: wrap; gap: 0.5rem; clear: both; }
.needs input { position: absolute; opacity: 0; pointer-events: none; }
.needs label { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 0.95rem; border: 1px solid var(--line-strong); border-radius: 999px; background: #FFFFFF; font-size: 0.92rem; font-weight: 500; color: var(--slate-700); cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.needs label::before { content: "+"; font-weight: 700; color: var(--wisteria-700); }
.needs input:checked + label { background: var(--navy-950); border-color: var(--navy-950); color: #FFFFFF; }
.needs input:checked + label::before { content: "✓"; color: var(--wisteria-400); }
.needs input:focus-visible + label { outline: 2px solid var(--wisteria-600); outline-offset: 2px; }
.fit__result { flex: 1 1 100%; font-weight: 600; color: var(--wisteria-700); }
@media (prefers-reduced-motion: reduce) { .needs label { transition: none; } }
.plan { position: relative; transition: box-shadow 200ms var(--ease), border-color 200ms var(--ease); }
.plan__match { position: absolute; top: -0.8rem; left: 1.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; background: var(--wisteria-700); border-radius: 999px; padding: 0.2rem 0.7rem; }
.plan--match { border-color: var(--wisteria-700); box-shadow: 0 0 0 2px var(--wisteria-700), 0 14px 32px hsl(255 42% 46% / 0.18); }
@media (prefers-reduced-motion: reduce) { .plan, .billing-toggle label { transition: none; } }
/* Pricing audience filter (CSS only; pricing.js preselects from ?for=). Without :has(), every audience shows, one after another. */
.pricing-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin: 0 0 2rem; }
.audience-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0; padding: 0; border: 0; }
.audience-toggle__legend { float: left; font-weight: 600; color: var(--navy-950); margin-right: 0.25rem; }
.audience-toggle__options { display: inline-flex; flex-wrap: wrap; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; background: #FFFFFF; }
.audience-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.audience-toggle label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem; border-radius: 999px; font-weight: 600; color: var(--slate-700); cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease); }
.audience-toggle input:checked + label { background: var(--navy-950); color: #FFFFFF; }
.audience-toggle input:focus-visible + label { outline: 2px solid var(--wisteria-600); outline-offset: 2px; }
.price-panel + .price-panel { margin-top: clamp(3rem, 6vw, 4.5rem); }
.audience-shell:has(#for-landlords:checked) .price-panel:not([data-audience="landlords"]),
.audience-shell:has(#for-contractors:checked) .price-panel:not([data-audience="contractors"]),
.audience-shell:has(#for-accountants:checked) .price-panel:not([data-audience="accountants"]) { display: none; }
.audience-shell:has(.audience-toggle input:checked) .price-panel + .price-panel { margin-top: 0; }
.plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; }
@media (max-width: 480px) {
  .audience-toggle__options { flex-wrap: nowrap; }
  .audience-toggle label { padding: 0 0.7rem; font-size: 0.92rem; }
}
.plans--three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 72rem; }
@media (max-width: 900px) { .plans--three { grid-template-columns: 1fr; max-width: 34rem; } }
@media (max-width: 680px) { .plans--two { grid-template-columns: 1fr; } }
.plan__features { display: grid; gap: 0.5rem; margin: 0.25rem 0 0.5rem; padding: 0.75rem 0 0; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--slate-700); }
.plan__lead { font-size: 0.85rem; font-weight: 600; color: var(--navy-950); padding-top: 0.75rem; border-top: 1px solid var(--line); }
.plan__lead + .plan__features { border-top: 0; padding-top: 0; margin-top: -0.25rem; }
.plan__features a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.plans--detailed .plan__features { font-size: 0.9rem; }
.plans--detailed .plan__summary { font-weight: 500; color: var(--slate-700); }
.every-plan { margin-top: clamp(2rem, 4vw, 3rem); background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--card-shadow); padding: clamp(1.5rem, 3vw, 2.25rem); }
.every-plan__sub { font-size: 1rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.every-plan__notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 0.6rem 2rem; margin-top: 0.75rem; font-size: 0.88rem; color: var(--slate-600); }
.every-plan__notes b { color: var(--slate-800, #1E293B); font-weight: 600; }
.every-plan__note { margin-top: 1.25rem; font-size: 0.92rem; }
.plan__features li { display: flex; gap: 0.5rem; align-items: flex-start; }
.plan__features svg { flex: none; width: 18px; height: 18px; margin-top: 0.15rem; fill: none; stroke: var(--wisteria-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plans__note { margin-top: 1rem; max-width: 52rem; }
.section-head--tight { margin-bottom: 1.5rem; }
.plans--compact .plan { padding: 1.4rem; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.notice { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--info-bg); color: var(--info-fg); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.75rem; font-weight: 500; }
.notice svg { flex: none; width: 20px; height: 20px; margin-top: 0.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---- FAQ */
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.15rem 0; cursor: pointer; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font: 600 1.08rem/1.35 var(--sc-font-text); color: var(--navy-950); letter-spacing: 0; }
.faq__icon { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--slate-500); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms var(--ease); }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__item summary:hover .faq__q { color: var(--wisteria-700); }
.faq__a { padding: 0 2.5rem 1.4rem 0; color: var(--slate-700); max-width: 70ch; }
.faq__a p + p { margin-top: 0.75rem; }
.faq__group + .faq__group { margin-top: 3rem; }
.faq__heading { font-size: 1.35rem; margin-bottom: 0.5rem; }
.faq-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 2.5rem; }
.faq-tools .field { flex: 1 1 18rem; margin: 0; }
.faq-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faq-cats a { padding: 0.45rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; color: var(--navy-950); font-weight: 500; font-size: 0.92rem; background: #FFFFFF; }
.faq-cats a:hover { border-color: var(--navy-950); }
.faq-empty { padding: 2rem 0; color: var(--slate-600); }

/* ---- Close: the line moves to the edge */
.close { background: var(--slate-50); }
.close__stage { display: grid; place-items: center; overflow: hidden; }
.close__grid { position: relative; width: min(100% - 2 * var(--gutter), 84rem); height: min(82vh, 44rem); display: grid; grid-template-columns: calc(var(--left, 0.42) * 100%) 1px 1fr; }
.close__now { overflow: hidden; display: flex; align-items: center; justify-content: center; opacity: calc(1 - var(--c, 0) * 1.4); }
.close__now p { color: var(--slate-500); font-size: 1.1rem; text-align: center; max-width: 18ch; }
.close__line { background: var(--line-strong); }
.close__keymews { background: var(--navy-950); color: #FFFFFF; border-radius: 0 16px 16px 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 5rem); position: relative; overflow: hidden; }
.close__keymews h2 { color: #FFFFFF; font-size: clamp(2.1rem, 1.4rem + 3vw, 4rem); font-weight: 700; letter-spacing: -0.035em; max-width: 14ch; }
.close__keymews p { margin-top: 1.25rem; color: var(--navy-200); max-width: 46ch; font-size: 1.1rem; }
.close__keymews .btn-row { margin-top: 2rem; }
.close__mark { position: absolute; right: -4%; bottom: -10%; width: min(46%, 26rem); opacity: 0.07; pointer-events: none; }
.close.is-static .close__grid, .no-js .close .close__grid { grid-template-columns: 0 0 1fr; height: auto; min-height: 28rem; }
.close.is-static .close__now, .no-js .close .close__now { display: none; }
.close.is-static .close__keymews, .no-js .close .close__keymews { border-radius: 16px; }
.close.is-static { padding-block: var(--section); }
@media (max-width: 760px) {
  .close__grid { grid-template-columns: 1fr; grid-template-rows: calc(var(--left, 0.3) * 100%) 1px 1fr; height: min(86vh, 46rem); }
  .close__keymews { border-radius: 0 0 16px 16px; padding: 2rem 1.5rem; }
}

/* =============================================================== INNER PAGES */
.page-head { padding: 0.5rem 0 clamp(2rem, 4vw, 3rem); }
.page-head > .wrap > * + * { margin-top: 1.25rem; }
.page-head .btn-row { margin-top: 2rem; }
.crumb { font-size: 0.9rem; color: var(--slate-500); }
.crumb a { color: var(--slate-600); }
/* A portal's own logo (keymews:home, keymews:work) on its audience page. */
.page-head__brand { display: block; height: 36px; width: auto; }

/* Feature detail sections */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3.5rem, 7vw, 6rem); border-bottom: 1px solid var(--line); scroll-margin-top: 4rem; }
.feature dl { margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.feature dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-500); }
.feature dd { margin: 0.2rem 0 0; color: var(--slate-800, #1E293B); }
.feature ul.ticks { margin-top: 1.25rem; display: grid; gap: 0.5rem; }
.ticks li { position: relative; padding-left: 1.85rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.3rem; width: 1rem; height: 1rem; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.5 14 15 6.5' fill='none' stroke='%236A4DBA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.feature__visual { position: relative; }
.feature__visual--pair { position: relative; padding: 0 10% 12% 0; } /* the phone sits on the pair, not on the figure and its caption */
.feature__visual--pair .phone { position: absolute; right: 0; bottom: 0; width: 30%; }
/* Features: the same screen in light and dark, split by a slider (50/50 without JavaScript) */
.theme-compare__frame { position: relative; touch-action: pan-y; }
.theme-compare__frame img { display: block; width: 100%; height: auto; }
.theme-compare__dark { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split, 50%)); }
.theme-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; margin-left: -1px; background: #FFFFFF; box-shadow: 0 0 0 1px rgb(14 34 64 / 0.3); pointer-events: none; }
.theme-compare__handle::after { content: "\2039\2002\203A"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin: -1.25rem 0 0 -1.25rem; border-radius: 50%; background: #FFFFFF; color: var(--navy-950); font-weight: 700; line-height: 1; box-shadow: var(--float-shadow); }
.theme-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.theme-compare__frame:has(.theme-compare__range:focus-visible) { outline: 2px solid var(--wisteria-600); outline-offset: 3px; }
.theme-compare__labels { display: flex; justify-content: space-between; margin-top: 0.75rem; font-size: 0.85rem; color: var(--slate-600); }
.not-yet { background: #FFFFFF; border: 1px dashed var(--line-strong); border-radius: 12px; padding: 1.5rem; }
.not-yet h3 { font-size: 1.15rem; }
.not-yet ul { margin-top: 0.75rem; display: grid; gap: 0.4rem; color: var(--slate-700); }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
}

/* Features, at a glance: a card per job, its name in a light header that
   links to the job's page, then how it's done today and in Keymews. */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.versus__row { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.versus__row:hover { border-color: var(--wisteria-400); box-shadow: 0 6px 20px rgb(15 23 42 / 0.08); }
.versus__topic { display: block; padding: 1rem 1.25rem; background: var(--navy-50); border-bottom: 1px solid var(--line); color: var(--navy-950); text-decoration: none; }
.versus__topic b { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.2rem; }
.versus__topic b::after { content: " →"; color: var(--wisteria-700); }
.versus__topic .pill { margin-left: 0.4rem; vertical-align: 0.1em; }
.versus__parts { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--slate-600); }
.versus__topic:hover b, .versus__topic:focus-visible b { color: var(--wisteria-700); text-decoration: underline; }
.versus__topic:focus-visible { outline: 2px solid var(--wisteria-600); outline-offset: -2px; }
.versus__before, .versus__after { padding: 0 1.25rem; }
.versus__before { margin-top: 1rem; color: var(--slate-600); }
.versus__after { margin: 0.85rem 0 1.25rem; color: var(--navy-950); font-weight: 500; }
.versus__label { display: block; margin-bottom: 0.15rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-500); }
.versus__after .versus__label { color: var(--wisteria-700); }
.versus__also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line-strong); color: var(--slate-700); }
.versus__also b { color: var(--navy-950); }
@media (max-width: 760px) {
  .versus { grid-template-columns: 1fr; }
  .versus__also { grid-template-columns: 1fr; }
}

/* Features: four groups, each an explorer of tabs over one panel at a time.
   Without JavaScript the tabs are plain links and every panel shows, stacked. */
.page-head--group .crumb + .fgroup__num { margin-top: 1.75rem; }
.page-head--group .fgroup__num + .display { margin-top: 0.5rem; }
.page-head--group { padding-bottom: 1rem; }
.page-head--group .display + .lede { margin-top: 0.75rem; }
.fgroup__num { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wisteria-700); }
.explorer { scroll-margin-top: 5rem; }
.group-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.group-next__main { display: flex; flex-direction: column; text-decoration: none; color: var(--navy-950); }
.group-next__main span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wisteria-700); }
.group-next__main b { font-family: var(--sc-font-display); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); font-weight: 600; }
.group-next__main b::after { content: " →"; color: var(--wisteria-700); }
.group-next__main:hover b { text-decoration: underline; }
.display .pill { font-family: var(--sc-font-text); font-size: 0.85rem; letter-spacing: 0; vertical-align: middle; margin-left: 0.5rem; white-space: nowrap; }
.group-cta { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section); }
.group-next ul { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.group-next ul a { display: block; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--slate-100); color: var(--slate-700); font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.group-next ul a:hover { background: var(--navy-50); color: var(--navy-950); }
.explorer__tabs { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.explorer__tabs a { display: block; white-space: nowrap; padding: 0.7rem 1rem; margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none; color: var(--slate-600); font-weight: 500; }
.explorer__tabs a:hover { color: var(--navy-950); }
.explorer__tabs a[aria-selected="true"] { color: var(--navy-950); border-bottom-color: var(--wisteria-600); font-weight: 600; }
.explorer__tabs a:focus-visible { outline: 2px solid var(--wisteria-600); outline-offset: -2px; border-radius: 6px; }
.fpanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-top: clamp(1.5rem, 3vw, 2rem); scroll-margin-top: 8rem; }
.fpanel + .fpanel { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.js .explorer.is-ready .fpanel + .fpanel { margin-top: 0; border-top: 0; }
.fpanel[hidden] { display: none; }
.fpanel__text > * + * { margin-top: 1rem; }
.fpanel__title { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); }
.fpanel__title .pill { vertical-align: middle; margin-left: 0.25rem; }
.fpanel__promise { font-size: clamp(1.1rem, 1rem + 0.3vw, 1.25rem); color: var(--slate-700); }
.fpanel__visual { margin: 0; position: relative; }
/* Top-aligned, so opening the full list only grows the text column; the picture stays in view beside it. */
@media (min-width: 901px) { .fpanel__visual { position: sticky; top: 5.5rem; } }
.proof { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.proof li { display: flex; gap: 0.75rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--navy-50); color: var(--navy-950); font-weight: 600; }
.proof li::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.5 14 15 6.5' fill='none' stroke='%236A4DBA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.more { margin-top: 1.25rem; }
.more summary { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; color: var(--wisteria-700); font-weight: 600; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms var(--ease); }
.more[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.more summary:hover { text-decoration: underline; }
.more summary:focus-visible { outline: 2px solid var(--wisteria-600); outline-offset: 3px; border-radius: 4px; }
.more .ticks { margin-top: 1rem; display: grid; gap: 0.5rem; font-size: 0.95rem; color: var(--slate-700); }
.more > p { margin-top: 0.85rem; }
@media (max-width: 900px) {
  .fpanel { grid-template-columns: 1fr; }
  .fpanel__visual { order: -1; }
}
.appearance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-block: clamp(3rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); scroll-margin-top: 4rem; }
.appearance .muted { margin-top: 0.6rem; max-width: 40ch; }
@media (max-width: 900px) { .appearance { grid-template-columns: 1fr; } }
.audiences-wrap + .wrap > .appearance { padding-top: 0; border-bottom: 0; }
.limits--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 5vw, 4rem); }
.limits--split h2, .limits--split h3 { font-size: 1.3rem; }
@media (max-width: 760px) { .limits--split { grid-template-columns: 1fr; } }

.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(2rem, 5vw, 5rem); }
.reasons article > * + * { margin-top: 0.6rem; }
.reasons h3 { font-size: 1.3rem; }
.reasons p { color: var(--slate-600); }
@media (max-width: 760px) { .reasons { grid-template-columns: 1fr; gap: 2rem; } }
.limits { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.limits h2 { font-size: 1.5rem; }
.limits > h2 + p { margin-top: 0.85rem; }
.limits > p + p { margin-top: 1rem; }
.limits ul { margin-top: 1rem; display: grid; gap: 0.6rem; color: var(--slate-700); }

/* About: chaptered prose */
.story { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1rem clamp(2rem, 5vw, 5rem); padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
.story h2 { font-size: 1.15rem; color: var(--wisteria-700); font-family: var(--sc-font-text); font-weight: 600; letter-spacing: 0.02em; }
.story__body > * + * { margin-top: 1rem; }
.story__body p { font-size: 1.12rem; color: var(--slate-700); max-width: 62ch; }
.story__body .pull { font-family: var(--sc-font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); color: var(--navy-950); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; max-width: 26ch; }
.principles { display: grid; gap: 1.25rem; margin-top: 0.5rem; }
.principles li b { display: block; color: var(--navy-950); }
.principles li span { color: var(--slate-600); }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- forms */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.form-layout__aside > * + * { margin-top: 1.25rem; }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } }
.form-card { background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.5rem, 3.5vw, 2.5rem); box-shadow: var(--card-shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
.form-grid .span-2 { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label, .field legend { font-weight: 600; font-size: 0.95rem; color: var(--slate-900); }
.field .opt { font-weight: 400; color: var(--slate-500); }
.field .hint { font-size: 0.875rem; color: var(--slate-600); margin-top: -0.15rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.85rem; border: 1px solid var(--slate-300); border-radius: 8px; background: #FFFFFF;
  font: 400 1rem/1.4 var(--sc-font-text); color: var(--slate-900); transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 18px; padding-right: 2.5rem; }
.field :is(input, select, textarea):hover { border-color: var(--slate-400); }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--wisteria-600); box-shadow: 0 0 0 3px hsl(255 44% 51% / 0.2); }
.field.has-error :is(input, select, textarea) { border-color: #DC2626; }
.field .error { display: none; font-size: 0.9rem; color: var(--bad-fg); font-weight: 500; }
.field.has-error .error { display: flex; gap: 0.35rem; }
.field .count { font-size: 0.8rem; color: var(--slate-500); align-self: flex-end; font-variant-numeric: tabular-nums; }
.check { display: flex; gap: 0.6rem; align-items: center; }
.check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--navy-950); }
.check label { margin: 0; font-weight: 400; font-size: 0.95rem; line-height: 1.4; color: var(--slate-700); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.form-status { margin-top: 1.25rem; border-radius: 12px; padding: 1rem 1.25rem; display: none; }
.form-status.is-error { display: block; background: var(--bad-bg); color: var(--bad-fg); }
.form-status.is-info { display: block; background: var(--info-bg); color: var(--info-fg); }
.form-status ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.form-status a { color: inherit; }
.form-done { display: none; }
.form-done > * + * { margin-top: 1rem; }
.form-done .ref { font-family: var(--sc-font-display); font-size: 1.5rem; color: var(--navy-950); letter-spacing: 0.04em; }
.is-done .form-done { display: block; }
.is-done form { display: none; }
.done-mark { width: 48px; height: 48px; border-radius: 50%; background: var(--ok-bg); display: grid; place-items: center; }
.done-mark svg { width: 26px; height: 26px; fill: none; stroke: var(--ok-dot); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.privacy-box { font-size: 0.92rem; color: var(--slate-600); background: var(--slate-100); border-radius: 12px; padding: 1rem 1.25rem; }
.privacy-box > * + * { margin-top: 0.5rem; }
.details { display: grid; gap: 0.75rem; margin: 0; }
.details dt { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: inherit; opacity: 0.8; }
.details dd { margin: 0.1rem 0 0; }
.expect { display: grid; gap: 1rem; }
.expect li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; }
.expect li::before { content: counter(list-item); width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy-50); color: var(--navy-950); font: 700 0.95rem/2rem var(--sc-font-display); text-align: center; }
.expect { counter-reset: list-item; }
.expect b { display: block; color: var(--navy-950); }
.expect span { color: var(--slate-600); }

/* Prose pages */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.prose ul { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.4rem; }

/* 404 */
.lost { text-align: left; padding-block: clamp(4rem, 12vw, 9rem); }
.lost img { width: 64px; height: 64px; margin-bottom: 1.5rem; }

/* ------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .btn, .faq__icon, .link-arrow::after, .filing__shot { transition: none; }
  .hero .item { filter: none; }
}


/* Blog ------------------------------------------------------------------ */
.wrap--narrow { width: min(100% - 2 * var(--gutter), 46rem); }
.posts { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .posts { grid-template-columns: 1fr; } }
/* The whole card is clickable through the title link. */
.post-card { position: relative; background: #FFFFFF; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--card-shadow); display: flex; flex-direction: column; transition: box-shadow 160ms ease, transform 160ms ease; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px hsl(217 40% 20% / 0.08), 0 14px 32px hsl(217 40% 20% / 0.14); }
.post-card__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--line); background: var(--slate-100); }
.post-card__body { padding: 1.25rem 1.35rem 1.5rem; }
.post-card__body > * + * { margin-top: 0.5rem; }
.post-card h2 { font-size: 1.15rem; line-height: 1.3; }
.post-card h2 a { color: var(--navy-950); text-decoration: none; }
.post-card h2 a::after { content: ""; position: absolute; inset: 0; }
.post-card:focus-within { outline: 2px solid var(--wisteria-600); outline-offset: 2px; }
.post-card p:last-child { color: var(--slate-700); font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .post-card, .post-card:hover { transition: none; transform: none; } }
.post__meta { font-size: 0.9rem; color: var(--slate-600); margin-top: 0.75rem; }
.post__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.post__hero { margin: 0 0 2rem; }
.post__hero img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.post__contents { background: var(--slate-50, #F8FAFC); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 2rem; }
.post__contents p { font-weight: 600; color: var(--navy-950); margin-bottom: 0.35rem; }
.post__contents ol { padding-left: 1.25rem; }
.post__contents li + li { margin-top: 0.25rem; }
.post .prose { max-width: none; font-size: 1.05rem; line-height: 1.7; color: var(--slate-800, #1E293B); }
.prose h3 { font-size: 1.2rem; margin-top: 1.75rem; }
.prose ol { padding-left: 1.4rem; }
.prose a { color: var(--wisteria-700, #6A4DBA); text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote { border-left: 3px solid var(--wisteria-100); padding: 0.25rem 0 0.25rem 1rem; color: var(--slate-700); }
.prose code { font-size: 0.92em; background: var(--slate-100); border-radius: 4px; padding: 0.05rem 0.3rem; }
.prose figure { margin: 2rem 0; }
.prose figure img, .prose img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--card-shadow); }
.prose figcaption { font-size: 0.88rem; color: var(--slate-600); margin-top: 0.4rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.post__cta { margin-top: 3rem; background: var(--wisteria-50); border: 1px solid var(--wisteria-100); border-radius: 12px; padding: 1.5rem; }
.post__cta > * + * { margin-top: 0.6rem; }
.post__cta .btn-row { margin-top: 1rem; }
.post__back { margin: 2rem 0 4rem; }

/* Prices inside the comparison table: smaller than on the plan cards. */
.cmp .plan__price { font-size: 1.15rem; white-space: nowrap; }
.cmp .plan__interval { font-size: 0.85rem; }
.cmp .plan__amount--label { font-size: 1.05rem; white-space: normal; }

.draft-banner { background: #FEF3C7; color: #78350F; border-bottom: 1px solid #FCD34D; padding: 0.75rem var(--gutter); text-align: center; font-size: 0.95rem; }

/* Who it's for (features page) */
.audiences-wrap { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section, 4rem); }
.audiences-wrap .lede { max-width: 46rem; margin-top: 0.75rem; }
.audiences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.audience { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.25rem 1.25rem 1.1rem; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), transform 160ms var(--ease); }
.audience:hover, .audience:focus-visible { border-color: var(--wisteria-400); box-shadow: 0 6px 20px rgb(15 23 42 / 0.08); transform: translateY(-2px); }
.audience__q { font-weight: 700; font-size: 1.1rem; color: var(--slate-900); }
.audience__a { color: var(--slate-600); flex: 1; }
@media (max-width: 860px) { .audiences { grid-template-columns: 1fr; } }
/* Features: who's it for. Landlords first, in navy. */
.audiences-wrap.audiences-wrap--choose { padding-top: 0; }
.audiences.audiences--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.audience--lead { background: var(--navy-950); border-color: var(--navy-950); }
.audience--lead .audience__q { color: #FFFFFF; }
.audience--lead .audience__a { color: var(--navy-200); }
.audience--lead .link-arrow { color: var(--wisteria-400); }
@media (max-width: 640px) { .audiences.audiences--four { grid-template-columns: 1fr; } }
.phone--solo { display: inline-block; width: min(260px, 70vw); }

/* Help centre */
.help-search { margin-top: 1.5rem; max-width: 34rem; }
.help-search input { width: 100%; font: inherit; padding: 0.8rem 1rem; border: 1px solid var(--line-strong); border-radius: 12px; background: #FFFFFF; }
.help-search input:focus-visible { outline: 3px solid var(--wisteria-400); outline-offset: 1px; }
.help-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2.5rem; align-items: start; }
.help-group ul { margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.help-group a { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 0.85rem; margin-inline: -0.85rem; border-radius: 10px; color: inherit; text-decoration: none; }
.help-group a:hover, .help-group a:focus-visible { background: #FFFFFF; box-shadow: 0 0 0 1px var(--line); }
.help-link__title { font-weight: 600; color: var(--slate-900); }
.help-link__desc { color: var(--slate-600); font-size: 0.95rem; }
.help-related { margin-top: 3rem; padding: 1.25rem 1.5rem; background: #FFFFFF; border: 1px solid var(--line); border-radius: 14px; }
.help-related ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
@media (max-width: 1040px) { .help-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .help-groups { grid-template-columns: 1fr; } }

/* ---- Calls to action: the free-trial band, the note under hero buttons, and the phone bar */
.hero__note { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 1rem; font-size: 0.92rem; font-weight: 600; color: var(--slate-700); }
.hero__note span { display: inline-flex; align-items: center; gap: 0.4rem; }
.hero__note span::before { content: ""; width: 16px; height: 16px; flex: none; background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236A4DBA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5 8.5 14 15 6.5'/%3E%3C/svg%3E"); }
.cta-band { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 3rem; max-width: var(--maxw, 83rem); margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 3.5vw, 2.75rem); border-radius: 18px; color: #FFFFFF; background: linear-gradient(115deg, var(--navy-950) 0%, #2A2560 60%, var(--wisteria-700) 100%); box-shadow: 0 14px 36px hsl(217 60% 15% / 0.2); }
.cta-band::after { content: ""; position: absolute; right: -5rem; top: -5rem; width: 16rem; height: 16rem; border-radius: 50%; background: radial-gradient(circle, hsl(255 80% 80% / 0.22), transparent 70%); pointer-events: none; }
.cta-band__text { position: relative; z-index: 1; max-width: 44rem; }
.cta-band__tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy-950); background: var(--promo-400); border-radius: 999px; padding: 0.15rem 0.65rem; margin-bottom: 0.75rem; }
.cta-band__title { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.15; letter-spacing: -0.01em; color: #FFFFFF; margin-bottom: 0.5rem; }
.cta-band p { color: hsl(210 40% 90%); }
.cta-band__facts { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-top: 1rem; font-size: 0.92rem; font-weight: 600; color: #FFFFFF; }
.cta-band__facts li { display: inline-flex; align-items: center; gap: 0.4rem; }
.cta-band__facts li::before { content: ""; width: 16px; height: 16px; flex: none; background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23C9BCF6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5 8.5 14 15 6.5'/%3E%3C/svg%3E"); }
.cta-band__actions { position: relative; z-index: 1; justify-content: flex-end; }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } .cta-band__actions { justify-content: flex-start; } }
.mobile-cta { display: none; }
@media (max-width: 720px) {
  .mobile-cta { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem var(--gutter, 16px) calc(0.65rem + env(safe-area-inset-bottom)); background: hsl(0 0% 100% / 0.96); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px hsl(217 40% 20% / 0.08); backdrop-filter: blur(8px); }
  .mobile-cta__note { font-size: 0.8rem; font-weight: 600; color: var(--slate-700); line-height: 1.3; }
  .mobile-cta .btn { flex: none; }
  body.has-mobile-cta { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}
@media print { .mobile-cta { display: none; } }
.audiences-wrap .audiences { margin-top: 2rem; }
.cta-band .cta-band__facts { margin-top: 1.1rem; }
.every-plan .every-plan__notes { margin-top: 1rem; }
/* Two phones in one feature: the screen you start from, and where it leads. */
.phone-duo { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; max-width: 34rem; margin-inline: auto !important; }
.phone-duo .phone { grid-row: 1; }
.phone-duo__back { grid-column: 1 / span 7; transform: rotate(-3deg); opacity: 0.92; }
.phone-duo__front { grid-column: 6 / span 7; margin-top: 3.5rem; position: relative; z-index: 1; }
.phone-duo figcaption { grid-column: 1 / -1; text-align: center; margin-top: 1rem; }
@media (prefers-reduced-motion: no-preference) { .phone-duo__back { transition: transform 300ms var(--ease); } .phone-duo:hover .phone-duo__back { transform: rotate(-5deg) translateX(-4px); } }
/* Keymews AI's mark beside its name. */
.ai-mark { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.35em; vertical-align: -0.16em; }

/* Pricing: compare every landlord plan (rows become cards on phones) */
.cmp { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 1.25rem; }
.cmp thead th { position: sticky; top: 0; z-index: 1; background: #FFFFFF; font-size: 0.95rem; font-weight: 600; color: var(--navy-950); padding: 0.6rem 0.5rem 0.75rem; border-bottom: 2px solid var(--line); text-align: center; }
.cmp thead .cmp__hl { color: var(--wisteria-700); }
.cmp th[scope="row"] { text-align: left; font-weight: 400; color: var(--slate-700); padding: 0.6rem 1rem 0.6rem 0; width: 44%; }
.cmp td { text-align: center; padding: 0.6rem 0.5rem; color: var(--slate-700); width: 14%; }
.cmp td[data-hl], .cmp thead .cmp__hl { background: var(--wisteria-50); }
.cmp tbody tr + tr { border-top: 1px solid var(--line); }
.cmp__group th { text-align: left; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate-500); padding: 1.5rem 0 0.5rem; }
.cmp__yes svg { display: inline-block; width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--wisteria-600); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.cmp__no { color: var(--slate-400); }
@media (max-width: 760px) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr:not(.cmp__group) { padding: 0.75rem 0; }
  .cmp th[scope="row"] { padding: 0 0 0.4rem; width: auto; font-weight: 500; color: var(--navy-950); }
  .cmp td { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0.5rem; text-align: right; }
  .cmp td::before { content: attr(data-plan); color: var(--slate-600); text-align: left; }
  .cmp__group th { padding-top: 1.25rem; }
  .cmp__same td + td { display: none; }
  .cmp__same td { background: none; }
  .cmp__same td::before { content: 'Every plan'; }
}

/* Screenshot markers: numbered dots on a panel's screenshot, matching its numbered key points */
.fpanel__visual .screen:has(.spot) { position: relative; }
.spot { position: absolute; z-index: 1; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; margin: -0.675rem 0 0 -0.675rem; border-radius: 50%; background: var(--wisteria-600); color: #FFFFFF; font-size: 0.72rem; font-weight: 700; box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9), 0 4px 12px rgb(14 34 64 / 0.3); transition: transform 180ms var(--ease), background 180ms var(--ease); pointer-events: none; }
.spot.is-on { transform: scale(1.3); background: var(--navy-950); }
.spot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--wisteria-400); opacity: 0; }
.spot.is-on::after { animation: spot-ping 1.2s var(--ease) infinite; }
@keyframes spot-ping { from { opacity: 0.9; transform: scale(0.8); } to { opacity: 0; transform: scale(1.6); } }
.proof li[data-spot] { cursor: default; transition: background 180ms var(--ease); }
.proof li[data-spot]::before { content: attr(data-spot); display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--wisteria-600); color: #FFFFFF; font-size: 0.75rem; font-weight: 700; }
.proof li[data-spot].is-on { background: var(--wisteria-50); }
@media (max-width: 640px) { .spot { width: 1.05rem; height: 1.05rem; margin: -0.525rem 0 0 -0.525rem; font-size: 0.6rem; box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9), 0 2px 6px rgb(14 34 64 / 0.3); } }
@media (prefers-reduced-motion: reduce) { .spot, .proof li[data-spot] { transition: none; } .spot.is-on::after { animation: none; } }
.phone--solo:has(.spot) { position: relative; }

/* Page changes: a short cross-fade between pages, the header held still. Browsers without support just navigate. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out 160ms var(--ease) both; }
::view-transition-new(root) { animation: vt-in 240ms var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* On a screen recording a marker shows only while its key point holds the video on the first frame. */
:is(.phone, .screen):has(video.loop) .spot:not(.is-on) { opacity: 0; }