/* Hallmark · shape: Register (Watcher standard section order) · genre: modern-minimal · theme: Blueprint (deal 2/3, seed dripwatcher-competitive-intelligence-interior-69a1·849d6131·2026-11-04·r0) · job: try · draw: 861653 swapped for the Watcher home structure
 * hero: Poster (core standard) · nav: core standard · footer: core standard · imagery: photographs · signature: the sample market ranking on the hero · blueprint: custom cream sheet with charcoal line, by request; photographs in true colour
 * axes: mid/geometric-sans/neutral · posture: drenched · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H3 E4 S4 R4 V4 · weakest: H, the ranking card sits on the photo; raised so the paint bucket and roller stay in view */
@import url("./tokens.css");
@import url("./base.css");

:root { --header-h: 74px; --container: 1240px; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-gap-s); }
.band { background: var(--color-paper-2); }
h1, h2 { text-transform: uppercase; line-height: 1.02; }
em { font-style: normal; }
table { width: 100%; border-collapse: collapse; }
.m { font-family: var(--font-outlier); font-weight: 500; font-variant-numeric: tabular-nums; }
.r { text-align: right; }
.cite { margin-left: var(--space-3xs); font-size: var(--text-xs); vertical-align: super; line-height: 0; }
.skip-link { position: absolute; left: var(--space-md); top: -80px; z-index: var(--z-modal); padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-accent-ink); }
.skip-link:focus-visible { top: var(--space-sm); }
.lede { font-size: var(--text-lead); line-height: 1.45; max-width: 46ch; color: var(--color-ink-2); }
.eyebrow { display: none; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-accent-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--ghost { background: transparent; color: var(--color-ink); }
.btn--ghost:hover { background: var(--color-paper-3); }
.btn--block { display: flex; width: 100%; }
.arr { display: none; }
.demo-trust { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-md); font-size: var(--text-sm); }

/* header */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule-2); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; }
.brand__word { display: block; font: 600 var(--text-lg)/1.1 var(--font-display); }
.brand__word i { font-style: normal; color: var(--color-ink-2); }
.brand__by { display: block; font-size: var(--text-xs); color: var(--color-muted); }
.nav__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); font-weight: 500; }
.nav__links a, .nav__login { text-decoration: none; }
.nav__links a:hover, .nav__login:hover { text-decoration: underline; }
.nav__cta { display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-sm); font-weight: 500; }
.nav__cta .btn { min-height: 44px; font-size: var(--text-sm); padding: 0 var(--space-md); }
.menu-btn { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-rule); background: transparent; color: var(--color-ink); cursor: pointer; }
.menu-btn span { display: block; width: 20px; height: 1px; margin: var(--space-2xs) auto; background: currentColor; }
.mobile-nav { display: none; }
.mobile-nav.is-open { display: grid; gap: var(--space-md); position: sticky; top: var(--header-h); z-index: var(--z-sticky); padding: var(--space-lg) var(--gutter); background: var(--color-paper-3); border-bottom: 1px solid var(--color-rule); }
.mobile-nav ol { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.mobile-nav ol a { display: block; padding-block: var(--space-sm); text-decoration: none; font-weight: 500; }

/* hero card */
.core-hero__aside { align-self: start; }
.rank { margin: 0; padding: var(--space-md); border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); }
.rank figcaption { margin-bottom: var(--space-sm); color: var(--color-ink-2); }
.rank th { padding-bottom: var(--space-xs); text-align: left; font-weight: 500; color: var(--color-muted); border-bottom: 2px solid var(--color-rule); }
.rank th.r { text-align: right; }
.rank td { padding: var(--space-xs) var(--space-xs) var(--space-xs) 0; border-bottom: 1px solid var(--color-rule-2); }
.rank td.r { padding-right: var(--space-xs); }
.rank .you td { background: var(--color-ink); color: var(--color-accent-ink); font-weight: 500; }
.rank .you td:first-child { padding-left: var(--space-xs); }

/* why */
.why__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-2xl); border-top: 2px solid var(--color-rule); }
.why__item { padding: var(--space-lg) var(--gap-columns) 0 0; }
.why__item + .why__item { padding-left: var(--gap-columns); border-left: 1px solid var(--color-rule); }
.big { font: 600 clamp(3.5rem, 7vw, 6.5rem)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.why__item h3 { margin-top: var(--space-lg); }
.why__item p:last-child { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 45ch; }

/* registers */
.register { border: 1px solid var(--color-rule); }
.register caption { padding-bottom: var(--space-sm); text-align: left; font-weight: 500; }
.register thead th { padding: var(--space-sm) var(--space-md); text-align: left; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); border-bottom: 2px solid var(--color-rule); }
.register thead th.r { text-align: right; }
.register td, .register tbody th { padding: var(--space-md); border-bottom: 1px solid var(--color-rule-2); text-align: left; vertical-align: baseline; }
.register tbody tr:last-child > * { border-bottom: 0; }
.register tbody th { font-weight: 500; }
.register td.r { text-align: right; white-space: nowrap; }
.signals .register tbody th { font: 600 var(--text-title)/1.2 var(--font-display); }
.signals .register td:nth-child(3) { color: var(--color-ink-2); }

/* solutions */
.elev { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-2xl); border: 1px solid var(--color-rule); }
.elev article { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); }
.elev article + article { border-left: 1px solid var(--color-rule); }
.elev .see { margin-top: auto; padding-top: var(--space-md); border-top: 1px solid var(--color-rule-2); font-weight: 500; }

/* pricing, core markup */
.core-pricing { padding-block: var(--section-gap-s); }
.core-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.core-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-rule); }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); }
.plan + .plan { border-left: 1px solid var(--color-rule); }
.plan--feature { background: var(--color-paper-3); }
.plan__label, .plan__badge { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.plan__badge { position: absolute; top: var(--space-lg); right: var(--space-lg); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-xs); }
.plan__price strong { font: 600 var(--text-3xl)/1 var(--font-display); }
.plan__price span { font-size: var(--text-sm); color: var(--color-ink-2); }
.plan ul { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0 var(--space-lg); padding: 0; list-style: none; flex: 1; align-content: start; }
.plan li { padding-top: var(--space-xs); border-top: 1px solid var(--color-rule-2); font-size: var(--text-sm); }
.plan li.inherit { font-weight: 500; border-top: 0; padding-top: 0; }
.plan__fine, .core-note { font-size: var(--text-sm); color: var(--color-ink-2); }
.core-note { margin-top: var(--space-md); }

/* faq */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.faq__list { border-top: 2px solid var(--color-rule); }
.faq details { border-bottom: 1px solid var(--color-rule-2); }
.faq summary { min-height: 56px; padding-block: var(--space-md); font-weight: 500; cursor: pointer; }
.faq summary:hover { text-decoration: underline; }
.faq details p { padding-bottom: var(--space-md); color: var(--color-ink-2); }

/* report */
.speed { margin: 0 0 var(--space-2xl); padding: var(--space-lg) var(--space-lg) var(--space-xl); border: 1px solid var(--color-rule); background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: 24px 24px; }
.speed figcaption { font-weight: 500; }
.speed__line { position: relative; height: 1px; margin-block: var(--space-3xl, 96px) var(--space-2xl); background: var(--color-rule); }
.stop { position: absolute; top: 0; left: calc(var(--at) * 100%); width: max-content; }
.stop::before { content: ""; position: absolute; left: 0; top: calc(var(--tick) / -2); width: 1px; height: var(--tick); background: var(--color-rule); transform: rotate(45deg); }
.stop__v { position: absolute; bottom: var(--space-md); left: 0; white-space: nowrap; font: 600 clamp(1.5rem, 3.2vw, 2.75rem)/1 var(--font-display); }
.stop__t { position: absolute; top: var(--space-md); left: 0; white-space: nowrap; font: 500 var(--text-sm)/1 var(--font-outlier); }
.stop--end .stop__v, .stop--end .stop__t { left: auto; right: 0; }
.report__tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.sources { margin-top: var(--space-xl); font-size: var(--text-sm); }
.sources summary { min-height: 44px; font-weight: 500; cursor: pointer; }
.sources ol { margin: var(--space-sm) 0; padding-left: var(--space-lg); display: grid; gap: var(--space-2xs); }

/* get started, core markup */
.core-start { padding-block: var(--section-gap-s); background: var(--color-paper-3); }
.core-start__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; }
.core-start .lede { margin-top: var(--space-md); }
.core-start__list { display: grid; gap: var(--space-xs); margin: var(--space-lg) 0 0; padding-left: var(--space-lg); }
.core-start__card { border: 1px solid var(--color-rule); padding: var(--space-lg); }
.core-form { display: grid; gap: var(--space-md); }
.core-form label { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 500; }
.core-form input:not([type="radio"]) { width: 100%; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: 0; background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-md); }
.core-form input::placeholder { color: var(--color-muted); }
.core-form input[aria-invalid="true"] { outline: 2px solid var(--color-ink); outline-offset: 1px; }
.core-form__sub, .core-form__legal, .core-form__opt { font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); }
.core-form__choice { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: 0; padding: 0; border: 0; }
.core-form__choice legend { padding: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 500; }
.core-form__choice label { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; font-weight: 400; }
.core-form__choice input { accent-color: var(--color-ink); width: 18px; height: 18px; }
.core-form__hp { position: absolute; left: -9999px; }
.core-form__status { min-height: 1.5em; font-size: var(--text-sm); }
.core-form__done { display: grid; gap: var(--space-sm); }

/* footer, core markup */
.site-footer { padding-block: var(--section-gap-s) var(--space-lg); background: var(--color-paper-3); border-top: 2px solid var(--color-rule); }
.footer__top { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); }
.footer__blurb { margin-top: var(--space-md); max-width: 34ch; color: var(--color-ink-2); }
.footer__col h2 { font: 500 var(--text-sm)/1.3 var(--font-body); text-transform: none; color: var(--color-muted); letter-spacing: 0; }
.footer__col ul { display: grid; gap: var(--space-2xs); margin: var(--space-sm) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.footer__col a { display: inline-block; padding-block: var(--space-2xs); text-decoration: none; }
.footer__col a:hover { text-decoration: underline; }
.footer__word { margin-block: var(--space-2xl) var(--space-lg); font: 600 clamp(3rem, 13vw, 11rem)/0.9 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: break-word; }
.footer__word i { font-style: normal; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-ink-2); }
.footer__bottom nav { display: flex; gap: var(--space-md); }

/* inner pages */
.page { min-height: 60svh; }
.page h1 { font-size: var(--text-display-s); }
.page .lede { margin-top: var(--space-md); }
.page__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.contact { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; }
.core-form textarea { width: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: 0; background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-md); }
.legal .wrap { max-width: 56rem; }
.legal h2 { margin-block: var(--space-xl) var(--space-sm); font-size: var(--text-title); }
.legal p + p { margin-top: var(--space-sm); }
.legal__note { margin-block: var(--space-sm) var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.register caption .cite { font-weight: 400; }

@media (max-width: 75rem) {
  .nav__links, .nav__login { display: none; }
  .menu-btn { display: block; }
  .elev { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elev article:nth-child(3) { border-left: 0; }
  .elev article:nth-child(n+3) { border-top: 1px solid var(--color-rule); }
}
@media (max-width: 60rem) {
  .head, .faq__grid, .core-start__grid, .report__tables, .contact { grid-template-columns: minmax(0, 1fr); }
  .why__grid, .core-plans { grid-template-columns: minmax(0, 1fr); }
  .why__item { padding: var(--space-lg) 0; }
  .why__item + .why__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-rule); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--color-rule); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .nav__cta .btn { display: none; }
  .elev { grid-template-columns: minmax(0, 1fr); }
  .elev article + article { border-left: 0; border-top: 1px solid var(--color-rule); }
  .signals .register thead { display: none; }
  .signals .register tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); padding: var(--space-md); border-bottom: 1px solid var(--color-rule-2); }
  .signals .register tr > * { padding: 0; border: 0; }
  .signals .register td:nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
  .speed { padding-bottom: var(--space-lg); }
  .speed__line { display: grid; gap: var(--space-md); height: auto; margin-block: var(--space-lg) 0; background: none; }
  .stop { position: static; width: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
  .stop::before { display: none; }
  .stop__v, .stop__t { position: static; display: block; }
  .stop__t { margin-top: var(--space-xs); }
}