/* Home page only (loaded after site.css). One memorable element, the live document check on a phone, built in HTML + CSS so it is
   crisp at any size; everything else is quiet. Motion: the hero load sequence, the check loop, and the storyboard switcher.
   No inline styles: state comes from classes site.js toggles; without JS every state is visible and static. */

/* ---- hero ---- */
.hero { padding-block: clamp(24px, 3vw, 36px) clamp(32px, 5vw, 56px); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 70% at 78% 40%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); }
.hero > .wrap { position: relative; z-index: 1; }
.hero-grid.hero-demo { align-items: center; }
.hero h1 { max-width: 12ch; margin-bottom: .4em; }
@media (min-width: 1100px) { .hero h1 { max-width: 20ch; font-size: clamp(2.3rem, 1.4rem + 3.1vw, 3.4rem); } }   /* two lines above 1100 px: the buttons stay in the first fold */
.hero .lead { max-width: 58ch; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.32rem); margin-bottom: 1.2em; }
.hero .cta-row { margin-bottom: 20px; }
.hero-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--ink-2); font-size: .95rem; font-weight: 500; }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--ok); flex: none; }
@media (min-width: 900px) { .hero-grid.hero-demo { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; } .hero-in { padding-top: clamp(16px, 4vw, 48px); } }

/* the stage: the phone, the document-type strip under it, and the firm-side card that answers the verdict */
.hero-stage { position: relative; margin: 0; display: grid; justify-items: center; gap: 16px; }
.hero-stage figcaption { margin: 0; text-align: center; color: var(--ink-2); font-size: .92rem; max-width: 34ch; }
.cd-panel { display: contents; }
.cd-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.cd-types [role=tab] { min-height: 36px; font-size: .84rem; font-weight: 500; color: var(--ink-2); padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
                       transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.cd-types [role=tab]:hover { color: var(--ink); border-color: var(--ink-2); }
.cd-types [role=tab][aria-selected=true] { color: var(--accent-ink); background: var(--ink); border-color: var(--ink); }
@media (max-width: 1024px) { .cd-types [role=tab] { min-height: var(--tap); } }
.cd-firm { position: relative; width: min(300px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.cd-firm-h { margin: 0 0 8px; font-size: .78rem; font-weight: 600; color: var(--ink-2); }
.cd-firm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-size: .92rem; font-weight: 600; }
.cd-firm-row .ph-tag { flex: none; }
@media (min-width: 900px) {
  .hero-stage { align-content: center; padding-block: 12px; }
  .cd-firm { position: absolute; left: 0; bottom: 150px; z-index: 2; width: 250px; }
}
@media (min-width: 1200px) { .cd-firm { left: -24px; } }

/* ---- phone mock (CSS only) ---- */
.ph { width: min(290px, 70vw); aspect-ratio: 9 / 15; background: #0b1220; border-radius: 40px; padding: 10px; box-shadow: 0 30px 60px -20px rgba(11, 23, 48, .45), 0 0 0 1px rgba(255, 255, 255, .16);
      position: relative; margin: 0; color: #0f1b2d; }
.ph::before { content: ""; position: absolute; top: 18px; left: 50%; width: 84px; height: 22px; margin-left: -42px; background: #0b1220; border-radius: 12px; z-index: 3; }
.ph-screen { height: 100%; border-radius: 31px; background: #f4f6f9; overflow: hidden; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35; }
.ph-top { padding: 48px 16px 12px; background: #fff; border-bottom: 1px solid #e3e8ee; }
.ph-firm { display: block; font-weight: 700; font-size: 11px; color: #4b5768; }
.ph-req { display: block; font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: #0f1b2d; }
.ph-body { padding: 12px; display: grid; gap: 8px; align-content: start; }
.ph-item { background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; padding: 12px; display: grid; gap: 8px; transition: opacity .25s ease; }
.ph-item-name { margin: 0; font-weight: 700; font-size: 13.5px; color: #0f1b2d; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.ph-item-ask { margin: 0; color: #4b5768; font-size: 11.5px; }
.ph-tag { display: inline-block; font-size: 10px; font-weight: 700; line-height: 1; padding: 4px 7px; border-radius: 6px; background: #e9edf2; color: #4b5768; white-space: nowrap; }
.ph-tag.is-bad { background: #fbe6e3; color: #a12c1f; }
.ph-tag.is-ok { background: #e1f3e8; color: #135f3a; }
.ph-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed #c6cfda; border-radius: 9px; background: #f8fafc; font-weight: 600; font-size: 11.5px; color: #0f1b2d; min-width: 0; }
.ph-file > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-file-icon { flex: none; width: 16px; height: 20px; border-radius: 3px; background: #1e4db7; position: relative; }
.ph-file-icon::after { content: ""; position: absolute; top: 0; right: 0; width: 6px; height: 6px; background: #f8fafc; border-bottom-left-radius: 3px; }
.ph-file-size { margin-left: auto; color: #4b5768; font-weight: 500; flex: none; }
.ph-progress { height: 4px; border-radius: 999px; background: #e3e8ee; overflow: hidden; }
.ph-progress i { display: block; height: 100%; width: 100%; background: #1e4db7; border-radius: inherit; transform-origin: left; }
.ph-checking { margin: -4px 0 0; font-size: 11px; color: #4b5768; }
.ph-verdict { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-radius: 9px; font-weight: 600; font-size: 12px; line-height: 1.3; min-height: 50px; }   /* room for a two-line verdict, so the rows below never jump between states */
.ph-verdict::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 999px; margin-top: 1px; background: currentColor;
  -webkit-mask: var(--vmask) center / 14px no-repeat; mask: var(--vmask) center / 14px no-repeat; }
.ph-verdict.is-bad { background: #fbe6e3; color: #a12c1f; --vmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E"); }
.ph-verdict.is-ok { background: #e1f3e8; color: #135f3a; --vmask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.6 14.2-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E"); }
.ph-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; background: #fff; border: 1px solid #e3e8ee; border-radius: 12px; font-weight: 600; font-size: 12.5px; color: #0f1b2d; }
.ph-row .ph-tag { flex: none; }
.ph-sm { width: min(250px, 100%); border-radius: 34px; }
.ph-sm .ph-screen { border-radius: 26px; }
.ph-sm .ph-top { padding-top: 42px; }
.ph-sm .ph-file-size { display: none; }

/* check-demo phases (site.js sets cd-p0 / cd-p1 / cd-p2 and cd-out on the [data-check-demo] element) */
.js .cd .ph-file { opacity: 0; transform: translateX(-10px); }
.js .cd .ph-progress i { transform: scaleX(0); }
.js .cd .ph-checking, .js .cd .ph-verdict { opacity: 0; }
.js .cd.cd-p0 .ph-file, .js .cd.cd-p1 .ph-file, .js .cd.cd-p2 .ph-file { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.js .cd.cd-p1 .ph-checking { opacity: 1; transition: opacity .2s ease; }
.js .cd.cd-p1 .ph-progress i { transform: scaleX(1); transition: transform 1s cubic-bezier(.4, 0, .2, 1); }
.js .cd.cd-p2 .ph-progress i { transform: scaleX(1); }
.js .cd.cd-p2 .ph-verdict { opacity: 1; animation: verdict-pop .4s cubic-bezier(.2, .9, .3, 1.3) both; }
.js .cd.cd-out .ph-item { opacity: 0; }
.js .cd .cd-firm-row .ph-tag { transition: opacity .3s ease; }
.js .cd:not(.cd-p2) .cd-firm-row .ph-tag { opacity: 0; }
@keyframes verdict-pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* hero load sequence: copy rises in, then the stage (only with JS, only when motion is welcome) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-in > * { opacity: 0; animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards; }
  .js .hero-in > :nth-child(2) { animation-delay: .08s; }
  .js .hero-in > :nth-child(3) { animation-delay: .16s; }
  .js .hero-in > :nth-child(4) { animation-delay: .24s; }
  .js .hero-stage { opacity: 0; animation: rise .8s cubic-bezier(.2, .7, .2, 1) .25s forwards; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- storyboard (dark band): the same mock, three steps, switched by the document-type tabs ---- */
.sb-band .section-head { margin-bottom: 20px; }
.sb-band .section-head h2 { max-width: none; }
.sb-tabs { margin-bottom: 24px; scroll-padding-inline: clamp(16px, 4vw, 24px); }
.sb-band [role=tab] { background: transparent; color: rgba(232, 235, 240, .78); border-color: rgba(255, 255, 255, .18); }
.sb-band [role=tab]:hover { border-color: rgba(255, 255, 255, .5); color: #fff; }
.sb-band [role=tab][aria-selected=true] { background: #fff; color: var(--surface-dark); border-color: #fff; }
.sb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; counter-reset: sb; }
.sb-step { position: relative; background: rgba(255, 255, 255, .06); border: 1px solid transparent; border-radius: 16px; padding: clamp(16px, 2vw, 22px); display: grid; grid-template-rows: auto 1fr; gap: 14px;
           transition: border-color .3s ease, background-color .3s ease; }
.sb-step h3 { margin: 0; font-size: 1.05rem; color: #fff; display: flex; align-items: center; gap: 10px; }
.sb-step h3::before { counter-increment: sb; content: counter(sb); flex: none; width: 26px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff;
                      font-size: .85rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: background-color .3s ease, color .3s ease; }
.sb-step.is-on { background: rgba(255, 255, 255, .09); }
.sb-step.is-on h3::before { background: #fff; color: var(--surface-dark); }
.sb-step > div > p { margin: 0; color: rgba(232, 235, 240, .78); font-size: .95rem; }
.sb-visual { display: grid; justify-items: center; align-content: start; }
/* step 2: the check itself, three rules ticking against the request */
.sb-rules { list-style: none; padding: 0; margin: 0; width: 100%; display: grid; gap: 8px; }
.sb-rules li { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; background: #fff; color: #0f1b2d; font-size: .9rem; font-weight: 600; }
.sb-rules li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 999px; border: 2px solid #c6cfda; background: #fff; }
.sb-rules li.is-pass::before { border-color: #157a4a; background: #157a4a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sb-rules li.is-fail { background: #fbe6e3; color: #a12c1f; }
.sb-rules li.is-fail::before { border-color: #c0392b; background: #c0392b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 11px no-repeat; }
.sb-rules li span:last-child { margin-left: auto; font-weight: 500; color: #4b5768; font-size: .82rem; }
.sb-rules li.is-fail span:last-child { color: inherit; }
.sb-request { width: 100%; margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font-size: .9rem; }
.sb-request strong { display: block; font-size: .78rem; font-weight: 600; color: rgba(232, 235, 240, .7); margin-bottom: 2px; }
/* step 3: verdict on the phone, and the same row on the firm's list */
.sb-firm { width: 100%; margin: 12px 0 0; background: #fff; color: #0f1b2d; border-radius: 10px; padding: 10px 12px; }
.sb-firm .cd-firm-h { margin-bottom: 4px; }
/* sequencing (JS adds sb-run, then the steps light in turn via is-on; without JS everything is on and static) */
.js .sb-run .sb-step { opacity: .55; }
.js .sb-run .sb-step.is-on { opacity: 1; }
.js .sb-run .sb-step { transition: opacity .35s ease, border-color .3s ease, background-color .3s ease; }
.js .sb-run .sb-rules li::before { transition: background-color .25s ease, border-color .25s ease; }
.js .sb-run .sb-rules li:not(.is-pass):not(.is-fail) { color: #8a94a3; }
.js .sb-run .sb-step .ph-verdict, .js .sb-run .sb-firm .ph-tag { opacity: 0; transition: opacity .3s ease; }
.js .sb-run .sb-step.is-on .ph-verdict { opacity: 1; animation: verdict-pop .4s cubic-bezier(.2, .9, .3, 1.3) both; }
.js .sb-run .sb-step.is-on .sb-firm .ph-tag { opacity: 1; }
.js .sb-run .sb-step .ph-file { opacity: 0; transform: translateX(-10px); }
.js .sb-run .sb-step.is-on .ph-file { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.sb-note { margin: 18px 0 0; color: rgba(232, 235, 240, .7); font-size: .92rem; }
.sb .ph { width: min(230px, 100%); border-radius: 30px; aspect-ratio: auto; }
.sb .ph-screen { height: auto; padding-bottom: 12px; }
.sb .ph-row, .sb-step:nth-child(1) .ph-progress, .sb-step:nth-child(1) .ph-checking, .sb-step:nth-child(1) .ph-verdict,
.sb-step:nth-child(3) .ph-progress, .sb-step:nth-child(3) .ph-checking { display: none; }
.sb .ph::before { top: 14px; width: 64px; height: 18px; margin-left: -32px; }
.sb .ph-screen { border-radius: 22px; }
.sb .ph-top { padding-top: 36px; }
@media (min-width: 760px) { .sb { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

/* ---- the three benefits: three columns divided by hairlines, no boxes ---- */
.benefits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.benefits li { padding: 24px 0; border-top: 1px solid var(--line); }
.benefits h3 { margin: 0 0 .4em; font-size: 1.3rem; }
.benefits p { margin: 0; color: var(--ink-2); max-width: 40ch; }
.benefits svg { width: 28px; height: 28px; color: var(--accent); margin-bottom: 14px; display: block; }
@media (min-width: 900px) {
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .benefits li { padding: 8px 32px 8px 0; border-top: 0; border-left: 1px solid var(--line); padding-left: 24px; }
  .benefits li:first-child { border-left: 0; padding-left: 0; }
}

/* ---- the one page split: every two-column row below the hero (pain, turn, catches, works alongside, security, faq) shares
   these tracks, so every right-hand column starts on the same vertical line at any width. Before this each row had its own
   ratio and gap and the right columns started at three different x positions, which read as text hanging off to the right. */
.split-row { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .split-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 48px; } }

/* ---- the pain: title and lead stacked on the left edge, the month-end inbox (the one bold device), the blocker + three one-line
   pains beside it, the cost for a 50-client firm in three figures, then the turn beside the comparison rows ---- */
.pain { padding-block: clamp(36px, 4vw, 44px); }
.pain-head { margin-bottom: clamp(20px, 2.5vw, 28px); }
.pain-head h2 { max-width: 20ch; text-wrap: balance; margin: 0 0 .35em; }
.pain-head .lead { max-width: 52ch; margin: 0; }
.pain-grid { row-gap: 24px; align-items: center; }
/* the inbox: a request list at day 9, every row still chasing */
.inbox { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px 0 4px; box-shadow: 0 24px 50px -30px rgba(15, 27, 45, .35); font-size: .95rem; }
.inbox-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 10px; font-weight: 600; border-bottom: 1px solid var(--line); }
.inbox-day { font-variant-numeric: tabular-nums; color: var(--bad); font-weight: 700; }
.inbox-rows { list-style: none; margin: 0; padding: 0; }
.inbox-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); font-weight: 500; }
.inbox-row:last-child { border-bottom: 0; }
.inbox-row svg { width: 22px; height: 22px; color: var(--ink-2); }
.inbox-row .ph-tag { font-size: .72rem; }
.js .inbox:not(.is-in) .inbox-row { opacity: 0; transform: translateY(-8px); }
.js .inbox.is-in .inbox-row { animation: inbox-drop .4s cubic-bezier(.2, .7, .2, 1) both; }
.js .inbox.is-in .inbox-row:nth-child(2) { animation-delay: .12s; }
.js .inbox.is-in .inbox-row:nth-child(3) { animation-delay: .24s; }
.js .inbox.is-in .inbox-row:nth-child(4) { animation-delay: .36s; }
@keyframes inbox-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.pain-side { display: grid; gap: 18px; }
.pain-blocker { margin: 0; font-size: clamp(1.05rem, 1rem + .3vw, 1.15rem); font-weight: 600; color: var(--ink); padding-left: 14px; border-left: 3px solid var(--ink); line-height: 1.4; max-width: 46ch; }
.pain-tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.pain-tiles li { padding: 10px 0; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.pain-tiles h3 { margin: 0; font-size: 1.02rem; }
.pain-tiles p { margin: 0; color: var(--ink-2); font-size: .95rem; }
/* the cost in three figures, with the assumption stated above them; from 900 px the formula sits in the left track and the
   result + the price share the right track, so the row lines up with the split above and below it */
.cost-basis { margin: clamp(24px, 3vw, 32px) 0 8px; color: var(--ink-2); font-size: .95rem; font-weight: 600; }
.cost { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 32px; }
.cost > div { border-top: 2px solid var(--line); padding-top: 10px; }
.cost dt { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cost dd { margin: 4px 0 0; color: var(--ink-2); font-size: .92rem; }
.cost .cost-us { border-top-color: var(--ink); }
.cost .cost-us dt { color: var(--accent); }
@media (min-width: 700px) { .cost { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cost { grid-template-columns: calc((100% - 48px) / 2.15) minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; } }
.turn { margin: 0; max-width: 34ch; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.7rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--ink); }
.benefits-4 h3 { font-size: 1.15rem; }
@media (min-width: 700px) {
  .benefits-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
  .benefits-4 li { padding: 18px 0; border-top: 1px solid var(--line); border-left: 0; padding-left: 0; }
  .benefits-4 li p { max-width: 46ch; }
}

/* every content block below the hero rises in as it scrolls into view (site.js adds .is-in once); hidden only with JS + motion */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-in), .js [data-reveal-group] > .rv:not(.is-in) { opacity: 0; transform: translateY(14px); }
  .js [data-reveal], .js [data-reveal-group] > .rv { transition: opacity .4s ease-out, transform .4s ease-out; transition-delay: var(--rv-d, 0ms); }
  .js [data-reveal].is-in, .js [data-reveal-group] > .rv.is-in { opacity: 1; transform: none; }
}

/* ---- proof line (hero + close), the cost line, the comparison rows, the bridges that lead into the next section ---- */
.proof { margin: 18px 0 0; max-width: 46ch; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }
.cta-band .proof { margin: 0 auto 1em; max-width: 52ch; font-size: 1.05rem; }
.cmp { margin: 0; display: grid; gap: 0; align-self: center; font-size: .92rem; }
.pain-turn { row-gap: 20px; margin-top: clamp(24px, 3vw, 32px); align-items: center; }
.cmp > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; padding: 9px 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.cmp > div:last-child { border-bottom: 1px solid var(--line); }
.cmp dt { font-weight: 600; margin: 0; }
.cmp dd { margin: 0; }
.cmp .cmp-us { color: var(--ink); }
.cmp .cmp-us dt { font-weight: 700; }
.cmp .cmp-us dd { font-weight: 500; }
@media (min-width: 700px) { .cmp > div { grid-template-columns: 175px minmax(0, 1fr); } }
.bridge { margin: clamp(20px, 3vw, 32px) 0 0; color: var(--ink-2); font-size: .98rem; font-weight: 500; font-style: italic; }
.band-dark .bridge { color: rgba(232, 235, 240, .72); }
.works-grid .bridge, .pricing-grid .bridge { margin-top: 16px; }

/* ---- the follow-up as a device: sent, two reminders that tick on their own, received, reminders stop ---- */
.followup { margin: clamp(28px, 4vw, 40px) 0 0; display: grid; gap: 14px; }
.followup figcaption { font-size: .95rem; color: var(--ink-2); max-width: 70ch; }
.followup figcaption strong { color: var(--ink); margin-right: 6px; }
.tl { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 760px; position: relative; }
.tl::before { content: ""; position: absolute; left: 12px; right: 12px; top: 11px; height: 2px; background: var(--line); }
.tl li { position: relative; padding-top: 32px; font-size: .9rem; min-width: 0; }
.tl li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 999px; background: var(--surface); border: 2px solid var(--line); box-sizing: border-box; }
.tl li.is-on::before { background: var(--ink); border-color: var(--ink); }
.tl li.tl-recv.is-on::before { background: var(--ok); border-color: var(--ok); }
.tl li.tl-rem.is-on::before { background: var(--accent); border-color: var(--accent); }
.tl-day { display: block; font-size: .8rem; color: var(--ink-2); }
.tl-what { display: block; font-weight: 600; color: var(--ink); }
.tl li:not(.is-on) .tl-what { color: var(--ink-2); font-weight: 500; }
.tl-stop { display: inline-block; margin-top: 6px; font-size: .74rem; }
.js .tl .tl-stop { opacity: 0; transition: opacity .3s ease; }
.js .tl li.is-on .tl-stop { opacity: 1; }
.js .tl li::before, .js .tl .tl-what { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
@media (max-width: 480px) { .tl { gap: 4px; } .tl li { font-size: .82rem; } .tl-stop { display: none; } }
@media (prefers-reduced-motion: reduce) { .js .tl .tl-stop { opacity: 1; } }

/* ---- how it works: the four steps on a rail (they are a sequence), then the real product: your screen and the client's phone ----
   When the rail scrolls into view the line draws from 1 to 4 and each node lights as the line reaches it (site.js adds .is-drawn
   once). Without JS or with reduced motion the rail is simply complete. */
.rail { list-style: none; padding: 0; margin: 0 0 clamp(24px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; counter-reset: rail; }
.rail li { position: relative; padding-left: 52px; }
.rail li::before { counter-increment: rail; content: counter(rail); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 999px; background: var(--ink); color: var(--bg);
                   font-weight: 700; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.rail li::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: -22px; width: 2px; background: var(--ink); transform-origin: top; }
.rail li:last-child::after { display: none; }
.rail h3 { margin: 6px 0 .3em; font-size: 1.15rem; }
.rail p { margin: 0; color: var(--ink-2); font-size: .98rem; }
@media (min-width: 900px) {
  .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .rail li { padding-left: 0; padding-top: 52px; }
  .rail li::after { left: 44px; right: -24px; top: 17px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
}
.js .rail:not(.is-drawn) li::before { background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 2px var(--line) inset; }
.js .rail:not(.is-drawn) li::after { transform: scale(0); }
.js .rail.is-drawn li::after { animation: rail-draw .35s cubic-bezier(.4, 0, .2, 1) both; }
.js .rail.is-drawn li::before { animation: rail-node .3s cubic-bezier(.2, .9, .3, 1.3) both; }
.js .rail.is-drawn li:nth-child(1)::before { animation-delay: 0s; }
.js .rail.is-drawn li:nth-child(1)::after { animation-delay: .2s; }
.js .rail.is-drawn li:nth-child(2)::before { animation-delay: .5s; }
.js .rail.is-drawn li:nth-child(2)::after { animation-delay: .6s; }
.js .rail.is-drawn li:nth-child(3)::before { animation-delay: .9s; }
.js .rail.is-drawn li:nth-child(3)::after { animation-delay: 1s; }
.js .rail.is-drawn li:nth-child(4)::before { animation-delay: 1.3s; }
@keyframes rail-draw { from { transform: scaleY(0); } to { transform: none; } }
@media (min-width: 900px) { @keyframes rail-draw { from { transform: scaleX(0); } to { transform: none; } } }
@keyframes rail-node { from { background: var(--surface); color: var(--ink-2); box-shadow: 0 0 0 2px var(--line) inset; transform: scale(.85); }
                       to { background: var(--ink); color: var(--bg); box-shadow: none; transform: none; } }
.how-real { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; max-width: 980px; margin-inline: auto; }
.how-real > * { min-width: 0; }
.how-shot { margin: 0; }
.how-shot img { aspect-ratio: 16 / 9; }
.how-phone { margin: 0; display: grid; gap: 10px; justify-items: center; align-content: center; padding: 20px 16px; }
.how-phone figcaption { font-size: .9rem; color: var(--ink-2); text-align: center; max-width: 30ch; }
.phone-frame { width: min(210px, 70vw); margin: 0; padding: 8px; border-radius: 30px; background: #0b1220; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(11, 23, 48, .5); }
.phone-video { display: block; width: 100%; height: auto; aspect-ratio: 600 / 1054; border-radius: 22px; background: var(--surface-2); }
@media (min-width: 900px) { .how-real { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); } }
@media (max-width: 699px) {
  /* a 1280 px screenshot is unreadable at 358 px: show its top-left part at 1.5x instead */
  .how-shot a[data-zoom] { aspect-ratio: 4 / 3; overflow: hidden; }
  .how-shot img { width: 150%; max-width: none; aspect-ratio: auto; object-fit: fill; }
}

/* ---- why it is different: one big line, then the same failures as the month-end inbox, now caught on arrival (rows are links) ---- */
.why-line { max-width: 22ch; }
.caught { list-style: none; padding: 6px 0 4px; margin: 0 0 12px; max-width: 760px; }
.caught .inbox-day-ok { color: var(--ok); }
.caught li a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink); text-decoration: none; transition: background-color .15s ease; }
.caught li:last-child a { border-bottom: 0; }
.caught li a:hover, .caught li a:focus-visible { background: var(--surface-2); }
.caught li a:hover > span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
.caught svg { width: 22px; height: 22px; color: var(--ink-2); }
.caught .catch-verdict { font-size: .72rem; }
/* the verdict sits under the document line at every width: the lines name a document and a failure, too long to share a row */
.caught li a svg { grid-row: span 2; align-self: start; margin-top: 1px; }
.caught .catch-verdict { grid-column: 2; justify-self: start; }
.why-grid { row-gap: 28px; align-items: center; margin-bottom: 4px; }
@media (min-width: 900px) { .caught { margin: 0; } }
.control-more { margin: 10px 0 0; font-size: .95rem; }
.control-card { max-width: 760px; padding: 4px 0 0 22px; border-left: 4px solid var(--ok); margin: 0; }
.control-card h3 { margin-bottom: .4em; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); max-width: 22ch; }
.control-card p { color: var(--ink); font-size: 1rem; max-width: 60ch; margin-bottom: .8em; }
.control-card .control-second { color: var(--ink-2); font-size: .95rem; margin: 0; }

/* ---- works alongside + security: heading left, list right ---- */
.works-grid { row-gap: 20px; align-items: start; }
.works-grid > * { min-width: 0; }
.works-grid h2 { max-width: 18ch; }
.works-grid .lead { margin-bottom: 0; }
.works-names { margin: 0 0 4px; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 0; }
.works-names span:not(:last-child)::after { content: ","; margin-right: .5ch; font-weight: 400; color: var(--ink-2); }
.sec-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.sec-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 500; }
.sec-list li:last-child { border-bottom: 1px solid var(--line); }
.sec-list li::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 999px; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ---- pricing: the three plans (things you act on, so they are cards), then the note and the buttons on one row ---- */
.pricing-grid { display: grid; gap: 22px; }
.pricing-grid > * { min-width: 0; }
.pricing-grid > div:first-child { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.pricing-grid > div:first-child > p { margin: 0; }
.pricing-grid > div:first-child > .bridge { flex-basis: 100%; margin-top: 10px; }
.pricing-grid .plans { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.pricing-grid .plan { margin-bottom: 0; }
.plan h3 { margin-bottom: 4px; }
.plan-price { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.plan-price .small { font-weight: 500; letter-spacing: 0; }
.plan-metric { margin-bottom: 6px; }
.plan-featured { border: 2px solid var(--ink); }
.plan-go { margin-top: 12px; }
.plan.card-link { display: flex; flex-direction: column; }
.plan.card-link .plan-go { margin-top: auto; align-self: flex-start; }
.plan.card-link > p.small { margin-bottom: 14px; }

/* ---- faq: heading column left, questions right ---- */
.faq-grid { row-gap: 20px; align-items: start; }
.faq-grid > * { min-width: 0; }
.faq-grid .section-head { margin-bottom: 0; }
.faq-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.faq-links a { display: inline-flex; align-items: center; min-height: var(--tap); }
.faq details { border-radius: 12px; padding: 0 18px; margin-bottom: 10px; transition: border-color .15s ease; }
.faq details[open] { border-color: var(--ink-2); }
.faq summary { font-size: 1.05rem; padding-block: 12px; gap: 12px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 999px; border: 1px solid var(--line);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5768' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 14px; color: var(--ink-2); }
@media (min-width: 900px) { .faq-grid .section-head { position: sticky; top: 88px; } }

/* ---- final call to action ---- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 80% at 50% 100%, rgba(143, 176, 255, .18), transparent 70%); }
.cta-band > .wrap { position: relative; }
.cta-band .hero-facts { justify-content: center; color: rgba(232, 235, 240, .78); }

/* ---- the 60 s product demo (templates/_demo_video.html), right after the hero ---- */
.demo-video { padding-top: 0; }
.demo-video-head { text-align: center; margin-inline: auto; }
.demo-video-head h2 { max-width: none; }
.demo-video-head .lead { margin-inline: auto; }
.demo-video-frame { margin: 0 auto; max-width: 960px; }
.demo-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--surface-dark); border-radius: var(--radius);
                          box-shadow: 0 1px 2px rgba(15, 27, 45, .08), 0 24px 48px -20px rgba(11, 23, 48, .45); outline-offset: 4px; }
.demo-video-frame video:focus-visible { outline: 3px solid var(--focus); }
.demo-video-frame figcaption { margin-top: 12px; text-align: center; }
.demo-video-frame video::cue { font-family: var(--font); font-size: 1rem; background: rgba(11, 23, 48, .8); color: #fff; }

/* reduced motion: the demo shows one static state, the storyboard shows every step at once, nothing rises in */
@media (prefers-reduced-motion: reduce) {
  .js .cd .ph-file, .js .cd .ph-checking, .js .cd .ph-verdict, .js .cd .cd-firm-row .ph-tag { opacity: 1 !important; transform: none !important; }
  .js .cd .ph-progress i { transform: none !important; }
  .js .inbox .inbox-row { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .rail li::before, .js .rail li::after { animation: none !important; transform: none !important; background: var(--ink) !important; color: var(--bg) !important; box-shadow: none !important; }
  .js .sb-run .sb-step, .js .sb-run .sb-step .ph-verdict, .js .sb-run .sb-firm .ph-tag, .js .sb-run .sb-step .ph-file { opacity: 1 !important; transform: none !important; }
}

/* ---- proof (after the check, before works-alongside and pricing): the heading, the tablet strip, then one lead quote large
   beside two quieter ones in rows (the page's row device), and the rest under "read more" ---- */
.reviews-h { max-width: 22ch; margin-bottom: .55em; }
.rv-grid { row-gap: 8px; align-items: start; }
.rv-lead { padding-top: 4px; }
.rv-lead .rv-q { margin-bottom: 20px; }
.rv-lead .rv-q p { font-size: clamp(1.25rem, 1.02rem + .9vw, 1.6rem); line-height: 1.38; font-weight: 500; letter-spacing: -.012em; text-indent: -.42em; }
.rv-lead .rv-q p::before { color: var(--accent); }
.rv-lead .rv-av { width: 46px; height: 46px; background: var(--accent-soft); color: var(--accent-deep); }
.rv-side .rv, .rv-rest .rv { padding: 18px 0; border-top: 1px solid var(--line); }
.rv-side .rv:last-child { border-bottom: 1px solid var(--line); }
@media (max-width: 899px) { .rv-side { margin-top: 20px; } }
.rv-more { margin-top: 16px; }
.rv-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); cursor: pointer; list-style: none; font-weight: 600; color: var(--accent); }
.rv-more summary::-webkit-details-marker { display: none; }
.rv-more summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.rv-more[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.rv-more summary:hover { color: var(--accent-deep); }
.rv-more[open] .rv-more-open, .rv-more:not([open]) .rv-more-close { display: none; }
.rv-rest { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; margin-top: 8px; }
@media (min-width: 760px) { .rv-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* SITE STYLE (18 Oct 2026, G56): the chosen document tab is tinted, not a second filled button; rows keep 16 px inside. */
.cd-types [role=tab][aria-selected=true] { color: var(--accent-deep); background: var(--accent-soft); border-color: var(--accent); }
.inbox-row { padding-block: 12px; }
li.rv { border-top-color: transparent; }
/* Resumed pass, 18 Oct 2026 (site style, G56): the document-type tabs are 44 px targets at every width; the demo checklist rows and the
   inbox head keep 16 px inside; the reviews list is grouped by space (no rule left to measure from). */
.cd-types [role=tab] { min-height: var(--tap); }
.sb-rules li { padding: 16px; }
.inbox-head { padding: 8px 16px 16px; }
li.rv { border-top-width: 0; }