/* sisatech.ai — "The record". Paper, ink, one green. Plain CSS, no build. */
:root {
  --paper: #F7F7F3; --paper-2: #EFEFE9; --rule: #D9D9D0; --ink: #16191C; --ink-2: #4C5257; --ink-3: #5F666C;
  --green: #0B6B4F; --green-2: #0E8762; --green-soft: #E3F1EA; --red: #B3261E;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif; --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --max: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; color: var(--ink); background: var(--paper); }
img, video { max-width: 100%; display: block; }
a { color: var(--green); }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; color: var(--ink); }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .wrap { padding: 0 18px; } }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: .01em; color: var(--ink-3); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 6px; font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; border: 1px solid var(--ink); cursor: pointer; white-space: nowrap; font-family: var(--sans); }
.btn-ink { background: var(--ink); color: #FFFFFF; }
.btn-ink:hover { background: #000; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--paper-2); }
.btn-green { background: var(--green); color: #fff; border-color: var(--green); }
.btn-green:hover { background: var(--green-2); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* masthead */
.mast { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.mast .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { height: 40px; width: auto; }
.brand span { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--ink); text-decoration: none; font-size: 14.5px; }
.nav a.btn-ink { color: #FFFFFF; }
.nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .btn { padding: 8px 14px; font-size: 14.5px; color: #fff; }
.nav-toggle { display: none; background: none; border: 1px solid var(--ink); color: var(--ink); border-radius: 6px; padding: 6px 10px; font-size: 14.5px; cursor: pointer; }
@media (max-width: 900px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 60px; background: var(--paper); flex-direction: column; align-items: stretch; padding: 12px 18px 18px; gap: 14px; border-bottom: 1px solid var(--ink); }
  .nav.open { display: flex; }
  .nav .btn { justify-content: center; }
  .nav-toggle { display: inline-block; }
}
.notice { background: var(--ink); color: var(--paper); font-size: 13px; text-align: center; padding: 7px 44px 7px 16px; position: relative; }
.notice a { color: #CDEBDD; }
.notice button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--paper); font-size: 17px; cursor: pointer; padding: 4px 8px; }
.notice[hidden] { display: none; }

/* opening */
.open { padding: 24px 0; min-height: calc(100vh - var(--top-h, 97px) - 50px); display: flex; align-items: center; }
.open > .wrap { width: 100%; max-width: 1240px; }
@media (max-width: 900px) { .open { min-height: 0; } }
.open .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 48px; align-items: center; }
.open .kicker { font-family: var(--mono); font-size: 13.5px; color: var(--green); margin-bottom: 26px; }
.open h1 { font-size: clamp(2.73rem, 3.99vw, 3.78rem); font-weight: 400; letter-spacing: -0.025em; margin-bottom: 24px; white-space: nowrap; }
@media (max-width: 900px) { .open h1 { white-space: normal; font-size: clamp(2.1rem, 7.35vw, 3.15rem); } }
.open h1 em { font-style: italic; color: var(--green); }
.open .lead { font-size: clamp(0.9rem, 1.2vw, 1.05rem); line-height: 1.6; color: var(--ink-2); max-width: none; margin-bottom: 34px; text-wrap: balance; }
.open .lead strong { color: var(--ink); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.cta .fine { font-size: 13.5px; color: var(--ink-3); width: 100%; line-height: 1.5; }
.frame { border: 1px solid var(--ink); background: #fff; padding: 10px; box-shadow: 10px 10px 0 var(--paper-2); width: 100%; justify-self: end; margin-right: 12px; }
.cta .btn { padding: 14px 24px; font-size: 17px; }
.frame video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #000; }
.frame .cap { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 900px) { .open .grid { grid-template-columns: 1fr; } .open { padding: 40px 0; } }
.facts { padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: #fff; }
.facts .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

/* the record */
.record { padding: 64px 0; }
.record-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 24px; }
.record-head h2 { font-size: clamp(1.89rem, 3.36vw, 2.625rem); font-weight: 400; }
.record-head p { margin-top: 10px; color: var(--ink-2); max-width: 40rem; }
.record-head .mono { text-align: right; }
@media (max-width: 760px) { .record-head { grid-template-columns: 1fr; } .record-head .mono { text-align: left; } }
.chart { border: 1px solid var(--ink); background: #fff; }
.chart-top { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--ink); }
.chart-top div { padding: 12px 16px; border-right: 1px solid var(--rule); }
.chart-top div:last-child { border-right: 0; }
.chart-top b { display: block; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.chart-top span { font-size: 16px; }
@media (max-width: 760px) { .chart-top { grid-template-columns: 1fr 1fr; } .chart-top div:nth-child(2) { border-right: 0; } }
.row { display: grid; grid-template-columns: 260px 1fr; border-bottom: 1px solid var(--rule); }
.row:last-child { border-bottom: 0; }
.row .label { padding: 22px 20px; border-right: 1px solid var(--rule); background: var(--paper); }
.row .label .n { font-family: var(--mono); font-size: 12.5px; color: var(--green); margin-bottom: 8px; }
.row .label h3 { font-size: 1.365rem; margin-bottom: 8px; }
.row .label p { font-size: 16px; color: var(--ink-2); }
.row .body { padding: 20px 24px; min-width: 0; }
@media (max-width: 760px) { .row { grid-template-columns: 1fr; } .row .label { border-right: 0; border-bottom: 1px solid var(--rule); padding: 18px 16px; } .row .body { padding: 16px; } }

/* row 1: intake */
.pages { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page { width: 108px; height: 136px; background: #FCFBF6; border: 1px solid var(--rule); padding: 9px; font-size: 9px; line-height: 1.35; color: #444; box-shadow: 3px 3px 0 var(--paper-2); }
.page b { display: block; font-family: var(--mono); font-size: 9px; margin-bottom: 4px; color: var(--ink); }
.page i { display: block; height: 3.5px; background: #E2DED1; margin: 3px 0; }
.page i.s { width: 58%; }
.page.more { display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); background: transparent; box-shadow: none; border-style: dashed; }
.extract { display: grid; gap: 6px; font-size: 16px; }
.extract div { display: grid; grid-template-columns: 112px 1fr auto; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px dotted var(--rule); }
.extract div b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.extract div u { text-decoration: none; font-family: var(--mono); font-size: 12px; color: var(--green); white-space: nowrap; }
@media (max-width: 560px) { .extract div { grid-template-columns: 1fr; gap: 2px; } }

/* row 2: timeline */
.tl { display: grid; }
.tl div { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px dotted var(--rule); font-size: 17px; }
.tl div:first-child { border-top: 0; }
.tl i { font-style: normal; font-family: var(--mono); font-size: 13.5px; color: var(--ink); font-weight: 500; }
.tl u { text-decoration: none; font-family: var(--mono); font-size: 12px; color: var(--green); white-space: nowrap; }
.tl .now { background: var(--green-soft); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
@media (max-width: 560px) { .tl div { grid-template-columns: 56px 1fr; } .tl u { display: none; } }

/* row 3: note */
.note { font-size: 17px; line-height: 1.7; max-width: 40rem; }
.note sup { font-family: var(--mono); font-size: 11px; color: var(--green); margin-left: 2px; }
.cites { margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--rule); display: grid; gap: 4px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.cites span b { color: var(--green); font-weight: 500; margin-right: 8px; }
.sign { margin-top: 16px; display: flex; align-items: baseline; gap: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.sign em { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--ink); }

/* row 4: orders */
.orders { display: grid; gap: 0; }
.orders div { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px dotted var(--rule); font-size: 17px; }
.orders div:first-child { border-top: 0; }
.orders i { font-style: normal; color: var(--green); font-weight: 700; }
.orders span { font-family: var(--mono); font-size: 12px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 560px) { .orders div { grid-template-columns: 22px 1fr; } .orders span { display: none; } }
.record-foot { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }

/* sections */
.section { padding: 64px 0; border-top: 1px solid var(--rule); }
.section h2 { font-size: clamp(1.89rem, 3.36vw, 2.625rem); font-weight: 400; margin-bottom: 10px; }
.section .sub { color: var(--ink-2); margin-bottom: 24px; }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); background: #fff; }
.fit > div { padding: 26px; }
.fit > div + div { border-left: 1px solid var(--rule); }
.fit h3 { font-size: 1.365rem; margin-bottom: 8px; }
.fit p { color: var(--ink-2); font-size: 17px; }
.fit p strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } .fit > div + div { border-left: 0; border-top: 1px solid var(--rule); } }

/* fee schedule */
.toggle { display: inline-flex; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; margin-bottom: 20px; }
.toggle button { border: 0; background: #fff; padding: 8px 16px; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--ink); cursor: pointer; }
.toggle button + button { border-left: 1px solid var(--ink); }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.toggle small { margin-left: 6px; color: var(--green); font-weight: 500; }
.toggle button[aria-pressed="true"] small { color: #CDEBDD; }
.fees { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); background: #fff; }
.fee { padding: 26px; display: flex; flex-direction: column; }
.fee + .fee { border-left: 1px solid var(--rule); }
.fee.featured { background: var(--green-soft); }
.fee h3 { font-size: 1.365rem; }
.fee .for { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
.price { margin: 18px 0 2px; font-family: var(--serif); font-size: 2.31rem; font-weight: 400; }
.price small { font-family: var(--sans); font-size: .95rem; color: var(--ink-2); }
.price-note { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); min-height: 18px; }
.fee ul { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 8px; font-size: 16px; }
.fee li { padding-left: 16px; position: relative; }
.fee li::before { content: "·"; position: absolute; left: 2px; color: var(--green); font-weight: 700; }
.fee .btn { margin-top: auto; }
.fees-foot { margin-top: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 900px) { .fees { grid-template-columns: 1fr; } .fee + .fee { border-left: 0; border-top: 1px solid var(--rule); } }

/* safeguards + questions */
.safe { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--ink); background: #fff; }
.safe > div { padding: 24px 26px; border-bottom: 1px solid var(--rule); }
.safe > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.safe > div:nth-last-child(-n+2) { border-bottom: 0; }
.safe h3 { font-size: 1.365rem; margin-bottom: 6px; }
.safe p { font-size: 16px; color: var(--ink-2); }
@media (max-width: 640px) { .safe { grid-template-columns: 1fr; } .safe > div { border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; } .safe > div:last-child { border-bottom: 0 !important; } }
.qa { display: grid; max-width: 46rem; border-top: 1px solid var(--ink); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { cursor: pointer; padding: 16px 0; font-family: var(--serif); font-size: 1.26rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--mono); color: var(--green); }
.qa details[open] summary::after { content: "−"; }
.qa details p { padding: 0 0 16px; color: var(--ink-2); font-size: 17px; max-width: 40rem; }

/* demo */
.demo { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; color: var(--ink-2); font-size: 17px; }
.points li { padding-left: 16px; position: relative; }
.points li::before { content: "·"; position: absolute; left: 2px; color: var(--green); font-weight: 700; }
.form { border: 1px solid var(--ink); background: #fff; padding: 26px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label, .form legend { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.form input, .form select, .form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--rule); border-bottom-color: var(--ink); border-radius: 0; font: inherit; font-size: 17px; color: var(--ink); background: var(--paper); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible, .chips label:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 1px; }
.form .full { grid-column: 1 / -1; }
.form .btn { width: 100%; }
.form-note { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.form-status { margin-top: 10px; font-size: 14.5px; }
.form-status.ok { color: var(--green); } .form-status.err { color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.form .chips label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px; border: 1px solid var(--rule); font-family: var(--sans); font-size: 14.5px; text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; background: #fff; white-space: nowrap; }
.chips input { accent-color: var(--green); width: 16px; height: 16px; min-width: 16px; padding: 0; margin: 0; border: 0; border-radius: 3px; background: transparent; flex: 0 0 auto; }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } }

/* closing + colophon */
.closing { border-top: 1px solid var(--ink); padding: 64px 0; text-align: center; }
.closing h2 { font-size: clamp(1.89rem, 3.36vw, 2.625rem); font-weight: 400; margin-bottom: 12px; }
.closing h2 em { font-style: italic; color: var(--green); }
.closing p { margin: 0 auto 26px; color: var(--ink-2); }
.colophon { border-top: 1px solid var(--ink); padding: 28px 0 36px; font-size: 14px; color: var(--ink-2); }
.colophon .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; }
.colophon h3, .colophon h4 { margin: 0 0 8px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.colophon a { color: var(--ink); text-decoration: none; }
.colophon a:hover { text-decoration: underline; text-underline-offset: 3px; }
.colophon .tail { grid-column: 1 / -1; border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
@media (max-width: 760px) { .colophon .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .colophon .wrap { grid-template-columns: 1fr; } }
/* problem / positioning / where / traction */
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
.split h2 { font-size: clamp(1.89rem, 3.36vw, 2.625rem); line-height: 1.12; }
.big { font-size: 1.26rem; line-height: 1.55; color: var(--ink); }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 20px; } }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule); }
.flow > div { padding: 14px 16px; border-right: 1px solid var(--rule); }
.flow > div:last-child { border-right: 0; }
.flow b { display: block; font-family: var(--serif); font-size: 1.208rem; font-weight: 500; margin-bottom: 4px; }
.flow span { font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 760px) { .flow { grid-template-columns: 1fr 1fr; } .flow > div:nth-child(2) { border-right: 0; } .flow > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }
.four { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--ink); background: #fff; }
.four > div { padding: 26px 22px; border-right: 1px solid var(--rule); }
.four > div:last-child { border-right: 0; }
.four h3 { font-size: 1.365rem; margin-bottom: 8px; }
.four p { font-size: 16px; color: var(--ink-2); }
@media (max-width: 900px) { .four { grid-template-columns: 1fr 1fr; } .four > div:nth-child(2) { border-right: 0; } .four > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }
@media (max-width: 560px) { .four { grid-template-columns: 1fr; } .four > div { border-right: 0 !important; border-bottom: 1px solid var(--rule); } .four > div:last-child { border-bottom: 0; } }
.proof { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.proof .big { margin: 0; }
.marks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.marks li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.marks b { font-weight: 500; color: var(--ink); }
.marks span { color: var(--ink-2); font-family: var(--mono); font-size: 13px; white-space: nowrap; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; gap: 24px; } }
.four.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .four.three { grid-template-columns: 1fr; } .four.three > div { border-right: 0 !important; border-bottom: 1px solid var(--rule); } .four.three > div:last-child { border-bottom: 0; } }

.steps .n { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.split h2.three-lines { white-space: nowrap; }
@media (max-width: 760px) { .split h2.three-lines { white-space: normal; } }
.three-lines small { display: block; font-family: var(--sans); font-size: 16px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-bottom: 14px; }

.screen { min-height: calc(100vh - var(--mast-h, 61px)); display: flex; align-items: center; padding: 56px 0; }
.screen > .wrap { width: 100%; }
.gap { height: 36px; }
.section h2#record { margin-top: 0; }
@media (max-width: 760px) { .screen { min-height: 0; padding: 56px 0; } .gap { height: 40px; } }

p, li, dd { text-wrap: pretty; }
.lead, .big, .four p, .qa p, .safe p { text-wrap: balance; }
@media (max-width: 760px) { br.d { display: none; } }

/* how-it-works figure */
.fig { display: grid; grid-template-columns: 1fr 56px 1.25fr 56px 1.15fr; gap: 0; align-items: stretch; border: 1px solid var(--ink); border-bottom: 0; background: #fff; padding: 18px; }
.fig .col { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; }
.fig .doc { position: relative; border: 1px solid var(--rule); padding: 12px 14px 12px 40px; background: var(--paper); }
.fig .doc i { position: absolute; left: 14px; top: 14px; width: 16px; height: 20px; border: 1px solid var(--ink-3); border-radius: 1px; background: #fff; }
.fig .doc i::after { content: ""; position: absolute; left: 3px; top: 5px; width: 8px; height: 1px; background: var(--ink-3); box-shadow: 0 4px 0 var(--ink-3), 0 8px 0 var(--ink-3); }
.fig .doc b { display: block; font-weight: 500; font-size: 15px; }
.fig .doc span { display: block; font-size: 13px; color: var(--ink-3); line-height: 1.35; }
.fig .link svg { width: 100%; height: 100%; display: block; }
.fig .link path { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.fig .mem { justify-content: center; border: 1px solid var(--ink); background: var(--paper); padding: 18px 20px; }
.fig .mem .n, .fig .out .n { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }
.fig .mem h3 { font-size: 1.45rem; margin: 0 0 8px; }
.fig .mem p { font-size: 14.5px; color: var(--ink-2); margin: 10px 0 0; }
.fig .tl { width: 100%; height: auto; display: block; }
.fig .tl line { stroke: var(--ink); stroke-width: 1.2; }
.fig .tl circle { fill: #fff; stroke: var(--ink); stroke-width: 1.2; }
.fig .tl circle.now { fill: var(--green); stroke: var(--green); }
.fig .tl text { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
.fig .out > div { border: 1px solid var(--rule); padding: 12px 14px; background: var(--paper); }
.fig .out h3 { font-size: 1.15rem; margin: 0 0 2px; }
.fig .out p { font-size: 13.5px; color: var(--ink-2); margin: 0; }
@media (max-width: 900px) {
  .fig { grid-template-columns: 1fr; padding: 16px; }
  .fig .link { height: 36px; } .fig .link svg { display: none; }
  .fig .link::after { content: ""; display: block; width: 1px; height: 100%; margin: 0 auto; background: var(--ink-3); }
  .open .grid { grid-template-columns: minmax(0, 1fr); } .cta { flex-wrap: wrap; }
}

.who p { margin-bottom: 12px; }
.who ul { list-style: none; margin: 0; padding: 0; }
.who li { position: relative; padding-left: 16px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; margin: 7px 0; }
.who li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
@media (max-width: 900px) { .cta .fine { white-space: normal; } }

.ic { width: 30px; height: 30px; display: block; margin-bottom: 12px; fill: none; stroke: var(--green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.safe .ic { margin-bottom: 10px; }
.safe > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; align-items: start; }
.safe > div .ic { grid-row: 1 / span 2; margin: 2px 0 0; }
.safe h3 { margin-bottom: 2px; }
.safe p { margin: 0; }

.statement .wrap { text-align: center; max-width: 54rem; }
.statement h2 { font-size: clamp(2.6rem, 4.2vw, 3.6rem); white-space: nowrap; }
.statement h2 small { font-size: 17px; margin: 0 auto 18px; }
.statement .big { font-size: clamp(1.2rem, 1.6vw, 1.5rem); line-height: 1.5; margin: 22px auto 0; max-width: 46rem; }
@media (max-width: 760px) { .statement h2 { white-space: normal; } }
.fig .doc { padding: 16px 14px 16px 44px; }
.fig .doc b { font-size: 16px; }
.fig .mem p { margin-top: 8px; }
.fig .out > div { padding: 14px 16px; }
.fig .out h3 { margin: 0 0 2px; }

#how .sub { font-size: clamp(1.15rem, 1.5vw, 1.4rem); color: var(--ink-2); margin: 4px 0 26px; }
#how h2 { margin-bottom: 0; }

#record .row { grid-template-columns: 300px 1fr; }
#record .row .label { padding: 18px 20px; }
#record .row .label h3 { margin-bottom: 0; font-size: 1.25rem; }
#record .row .body { padding: 14px 24px; }
#record .tl div { padding: 9px 0; }
#record .note { font-size: 16.5px; line-height: 1.6; max-width: none; }
#record .cites { display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 10px; padding-top: 10px; }
#record .sub { margin-bottom: 18px; }
@media (max-width: 760px) { #record .row { grid-template-columns: 1fr; } }

.also { display: grid; grid-template-columns: 1fr 1.6fr 1.5fr; gap: 16px; border: 1px solid var(--ink); background: var(--paper); padding: 10px 18px; font-size: 14px; color: var(--ink-2); }
.also b { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--green); font-weight: 500; margin-right: 8px; }
@media (max-width: 900px) { .also { grid-template-columns: 1fr; gap: 6px; } }
.colophon .tail a { color: var(--ink); }

section, .closing, #families { scroll-margin-top: var(--mast-h, 61px); }
.vp-open h1 { white-space: normal; font-size: clamp(2.2rem, 3.4vw, 3.1rem); }
.vp-open .frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
/* v155: these two desktop overrides used to apply at every width, defeating the phone rules above (quotes column and the four-step chart were unreadable on phones). */
@media (min-width: 761px) {
  .proof { grid-template-columns: 1.5fr 1fr; }
  #families .row, .vp-open .row, .section.screen .chart .row { grid-template-columns: 300px 1fr; }
}
.marks li { min-width: 0; } .marks span { white-space: normal; text-align: right; }
.marks { max-width: 100%; overflow: hidden; }
@media (max-width: 760px) { .marks li { flex-wrap: wrap; } .marks span { text-align: left; } }
.vp-open .grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.vp-open h1 { font-size: clamp(2.1rem, 2.75vw, 2.85rem); white-space: normal; }
@media (max-width: 900px) { .vp-open .grid { grid-template-columns: minmax(0, 1fr); } .vp-open h1 { white-space: normal; } }
fieldset.full { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.full legend { padding: 0; }
.fig .src { justify-content: center; gap: 14px; }
.fig .doc { padding: 24px 16px 24px 48px; }
.fig .doc i { top: 50%; margin-top: -10px; left: 18px; }
.fig .out { justify-content: center; gap: 14px; }
.fig .src, .fig .out { display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 14px; justify-content: stretch; }
.fig .doc { display: flex; align-items: center; padding: 14px 16px 14px 48px; }
.fig .out > div { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) { .fig .src, .fig .out { grid-template-rows: auto; } }

html { scroll-padding-top: 0; }
#top { scroll-margin-top: 0; }
.colophon .brand img { height: 44px; }
.open .kicker { font-family: var(--sans); font-weight: 500; font-size: clamp(16px, 1.45vw, 20px); letter-spacing: .01em; white-space: nowrap; margin-bottom: 14px; }
@media (max-width: 900px) { .open .kicker { white-space: normal; } }

.quotes { display: grid; gap: 18px; }
.quotes blockquote { margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--green); }
.quotes p { font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.4; margin: 0 0 6px; color: var(--ink); text-wrap: balance; }
.quotes cite { font-style: normal; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
.marks li { gap: 12px; } .marks b { font-weight: 500; }

/* v152: launch tag in the hero */
.tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 12px 6px 6px; border: 1px solid var(--green); border-radius: 999px; font-size: 13.5px; line-height: 1.3; color: var(--ink); text-decoration: none; background: #fff; }
.tag b { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: #fff; background: var(--green); padding: 3px 8px; border-radius: 999px; }
.tag:hover { background: var(--paper-2); }



/* v152: cited evidence line in How it works */
.evidence { margin: -8px 0 22px; padding: 1px 0 1px 16px; border-left: 2px solid var(--green); max-width: 62rem; }
.evidence p { font-family: var(--serif); font-size: clamp(1rem, 1.25vw, 1.17rem); line-height: 1.35; color: var(--ink); margin: 0 0 4px; text-wrap: balance; }
.evidence cite { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.evidence cite a { color: var(--ink-2); }

/* v156: hub homepage doors, two-column pricing, current-page nav */
.section h2 em.green, .section h2 .green { font-style: italic; color: var(--green); }
.doors > .door { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: background .15s; padding: 26px 22px; border-right: 1px solid var(--rule); }
.doors > .door:last-child { border-right: 0; }
@media (max-width: 900px) { .doors > .door { border-right: 0 !important; border-bottom: 1px solid var(--rule); } .doors > .door:last-child { border-bottom: 0; } }
.doors .door:hover, .doors .door:focus-visible { background: var(--paper); outline: none; }
.doors .door:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.doors .door .n { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }
.doors .door h3 { margin-bottom: 10px; }
.doors .door p { font-size: 15.5px; color: var(--ink-2); margin-bottom: 14px; text-wrap: pretty; }
.doors .door .price-line { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-bottom: 18px; }
.doors .door .btn { margin-top: auto; align-self: flex-start; white-space: normal; text-align: left; }
.doors .door:hover .btn-line { background: var(--paper-2); }
.doors .door:hover .btn-green { background: var(--green-2); }
.fees.two { grid-template-columns: repeat(2, 1fr); max-width: 52rem; }
@media (max-width: 900px) { .fees.two { grid-template-columns: 1fr; } }
.who .steps-n { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--green); }
.closing p a { color: var(--green); }

/* v157: buyer-page heroes share the visiting-parents proportions (text 1.3 : video 1); headlines and fine print wrap instead of running under the video. */

/* v158: practices and post-acute heroes: equal columns so the larger headline fits beside a larger video; headline wraps rather than clips. */
.open.wide .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.open.wide h1 { white-space: normal; }
@media (max-width: 900px) { .open.wide .grid { grid-template-columns: minmax(0, 1fr); } }

/* v161: on the practices and post-acute heroes the headline is sized from its column, so the longest line ("Every resident's history,") always fits on one line, even while the fallback serif is showing before Newsreader loads. */
.open.wide .grid > div:first-child { container-type: inline-size; }
.open.wide h1 { font-size: min(3.78rem, 9.6cqw); }
@media (max-width: 900px) { .open.wide .grid > div:first-child { container-type: normal; } .open.wide h1 { font-size: clamp(2.1rem, 7.35vw, 3.15rem); } }

/* v162: footer has five columns now (Programs added); nav lost "Visiting parents". */
.colophon .wrap { grid-template-columns: 1.3fr 1fr .8fr .8fr .9fr; }
@media (max-width: 900px) { .colophon .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .colophon .wrap { grid-template-columns: 1fr; } }

/* v163: Start free is the primary action site-wide. */
.nav a.btn-line { color: var(--ink); }
.nav a.btn-green { color: #fff; }
.nav a.btn:hover { text-decoration: none; }
.cta.center { justify-content: center; }
.cta.center .btn { padding: 12px 20px; font-size: 16px; }
.fee .fee-or { margin-top: auto; padding-top: 14px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.fee .fee-or + .btn { margin-top: 12px; }
.fee-or a { color: var(--green); }
.cta .fine a { color: var(--green); }
@media (max-width: 900px) {
  .cta.center .btn { width: 100%; }
  /* The hero section is also class "open", so its rules (centered items, 40px padding, min-height) leaked onto the opened phone menu. Reassert the menu's own layout. */
  .nav.open { align-items: stretch; padding: 12px 18px 18px; min-height: 0; }
  .nav.open .btn { display: flex; }
}

/* v164: post-acute problem panel (Today / With SIVIA). */
.fit.problem > div { padding: 28px 26px; }
.fit.problem .n { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.fit.problem .with { background: var(--green-soft); }
.fit.problem .with .n { color: var(--green); }
.fit.problem h3 { font-size: 1.365rem; margin-bottom: 10px; }
.fit.problem p { font-size: 16px; color: var(--ink-2); text-wrap: pretty; }
.fit.problem p + p { margin-top: 14px; }
.fit.problem .evidence-line { padding: 12px 0 0 14px; border-left: 2px solid var(--green); font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; color: var(--ink); margin-top: 18px; }
.fit.problem .evidence-line strong { font-weight: 500; color: var(--green); }
.fit.problem .evidence-line cite { display: block; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.fit.problem .evidence-line cite a { color: var(--ink-2); }
.fit.problem ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--ink-2); }
.fit.problem li { padding-left: 16px; position: relative; }
.fit.problem li::before { content: "\00b7"; position: absolute; left: 2px; color: var(--green); font-weight: 700; }
.fit.problem li strong { color: var(--ink); font-weight: 600; }

/* v172: worked chart rows on /practices/ and /post-acute/; the "why" evidence spacing. */
.chart.deep .row .label .n { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.chart.deep .row .body p { font-size: 16.5px; line-height: 1.6; color: var(--ink); max-width: 46rem; }
@media (min-width: 761px) { .chart.deep .row { grid-template-columns: 260px 1fr; } }

/* v194: room between the How-it-works heading, the study and the figure (as in v177), with the section's own padding trimmed so it still fits one screen. */
#how.screen { padding: 44px 0; }
#how h2 { margin-bottom: 20px; }
#how .evidence { margin: 0 0 28px; }

/* v199: hybrid. The v196 identity (type, palette, spacing) with three borrowed pieces of execution: the hero video as a soft block, planes instead of hairlines on the doors and the worked rows, and the clinical-memory card over the home video. */
.frame { border: 0; padding: 0; background: transparent; box-shadow: none; margin-right: 0; position: relative; }
.frame video, .frame img { border-radius: 18px; box-shadow: 0 24px 60px rgba(16,32,27,.16); }
.frame .cap { display: none; }
.open .grid { align-items: center; }
.doors.four { border: 0; background: transparent; gap: 18px; }
.doors > .door { border: 0 !important; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(16,32,27,.06); }
.doors > .door:hover, .doors > .door:focus-visible { background: #fff; box-shadow: 0 20px 44px rgba(16,32,27,.12); }
.doors > .door:first-child { background: var(--green-soft); }
.chart.deep { border: 0; background: transparent; display: grid; gap: 10px; }
.chart.deep .row { border: 0; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(16,32,27,.06); overflow: hidden; }
.chart.deep .row .label { border-right: 0; }
.fit.problem { border: 0; background: transparent; gap: 18px; }
.fit.problem > div { border: 0 !important; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(16,32,27,.06); }
.fit.problem .with { background: var(--green-soft); }

/* v200/v201: video block clips to its rounded corners. */
.frame { overflow: hidden; border-radius: 18px; }


/* v207: buyer-specific hero widgets on /solo/, /practices/ and /post-acute/, in place of the video. Same family as the home widget. */
.frame.hw { background: #fff; border: 1px solid var(--rule); border-radius: 18px; box-shadow: 0 24px 60px rgba(16,32,27,.12); padding: 16px 18px 18px; font-family: var(--sans); color: var(--ink); display: flex; flex-direction: column; gap: 12px; min-height: 380px; }
.hw-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.hw-head .avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #1F6B52, #5FCF9F); flex: none; }
.hw-head .who { font-weight: 600; font-size: 14px; line-height: 1.25; }
.hw-head .who small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11.5px; font-family: var(--mono); }
.hw-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hw-body.cols2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; }
.hw-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hw-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.hw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hw-chips span { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 5px 9px; font-size: 12px; font-weight: 600; }
.hw-chips i, .hw-pages i { width: 9px; height: 12px; border: 1.3px solid var(--ink-3); border-radius: 2px; background: #fff; }
.hw-pages { display: flex; align-items: center; gap: 3px; }
.hw-pages i { width: 14px; height: 18px; margin-left: -4px; }
.hw-pages span { margin-left: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.hw-build { display: grid; gap: 6px; }
.hw-row { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.hw-row i { display: block; height: 6px; border-radius: 3px; background: var(--rule); width: 0; }
.hw.run .hw-row i { animation: hwtype .9s ease forwards; }
.hw.run .st.s4 .hw-row:nth-child(1) i { animation-delay: 1.7s; } .hw.run .st.s4 .hw-row:nth-child(2) i { animation-delay: 2s; } .hw.run .st.s4 .hw-row:nth-child(3) i { animation-delay: 2.3s; }
@keyframes hwtype { to { width: var(--w, 100%); } }
.hw-line { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
.hw-chip { background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; line-height: 1.4; }
.hw-chip b { color: var(--green); font-weight: 600; margin-right: 4px; }
.hw-chip.pop { background: var(--green-soft); border-color: #C9E3D6; }
.hw-acts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; font-size: 12.5px; }
.hw-acts.row { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--rule); }
.hw-acts li { position: relative; padding-left: 22px; }
.hw-acts li::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); }
.hw-acts li::after { content: ""; position: absolute; left: 4px; top: 6px; width: 6px; height: 3px; border-left: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(-45deg); }
.hw-stat { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; align-items: baseline; gap: 4px 10px; padding: 8px 10px; background: var(--paper); border-radius: 10px; }
.hw-stat b { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; }
.hw-stat span { font-size: 12px; color: var(--ink-2); }
.hw-list { display: grid; gap: 6px; }
.hw-pt { display: grid; grid-template-columns: 1fr 1.4fr 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid var(--rule); border-radius: 8px; font-size: 12px; }
.hw-pt .nm { font-weight: 600; } .hw-pt .gp { color: var(--ink-2); } .hw-pt .ow { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.hw-pt .stt { font-family: var(--mono); font-size: 10.5px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--rule); white-space: nowrap; }
.hw-pt .stt.hold { background: var(--paper); } .hw-pt .stt.done { background: var(--green-soft); color: var(--green); border-color: #C9E3D6; }
/* sequence */
.hw .st { opacity: 0; transform: translateY(6px); }
.hw.rest .st { opacity: 1; transform: none; }
.hw.rest .hw-row i { width: var(--w, 100%); }
.hw.run .st { animation: hwin .45s ease forwards; }
.hw.run .s1 { animation-delay: .2s; } .hw.run .s2 { animation-delay: .6s; } .hw.run .s3 { animation-delay: 1s; } .hw.run .s4 { animation-delay: 1.5s; } .hw.run .s5 { animation-delay: 2.8s; }
.hw.run .s6 { animation-delay: 3.6s; } .hw.run .s7 { animation-delay: 4.5s; } .hw.run .s8 { animation-delay: 5.4s; } .hw.run .s9 { animation-delay: 6.1s; } .hw.run .s10 { animation-delay: 6.8s; } .hw.run .s11 { animation-delay: 7.5s; }
@keyframes hwin { to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .hw-body.cols2 { grid-template-columns: 1fr; } .hw-acts.row { grid-template-columns: 1fr; } .hw-stat { grid-template-columns: auto 1fr; } .hw-pt { grid-template-columns: 1fr auto; } .hw-pt .gp, .hw-pt .ow { display: none; } }

/* v210: buyer widgets size to their content. */
.frame.hw { min-height: 0; }

/* v212: the clinical-memory strip under the home video is gone (its CSS and loop script removed); the video stands alone and the How-it-works figure carries the records/timeline story. */