/* NextRev mock flow, one shared stylesheet.
Every value comes from SITE-STYLE-LOCK.md, which comes from BRAND-TOKENS.json.
Phone first: the base rules are the 390 column. Wider screens are additive. */
/* ---- fonts, self hosted, zero external requests ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
src:url(fonts/inter-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
src:url(fonts/poppins-600-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
src:url(fonts/poppins-700-latin.woff2) format('woff2');
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
/* ---- tokens ---- */
:root{
--brand:#2F9E44; --brand-deep:#1A7D36; --brand-darkest:#0F3D1A; --brand-hover:#14662B;
--accent-light:#7FD197; --green-100:#DDF0E3; --green-50:#ECF7EF;
--bg:#FFFFFF; --bg-soft:#F6FAF7; --ink:#16231B; --text:#4F5F56; --muted:#5F6C64;
--line:#E8EDEA; --on-dark-text:#D7DEDA; --on-dark-text-2:#E4EAE6; --btn-light-hover:#EEF5F0;
--t-h1:28px; --t-h2:22px; --t-h3:19px; --t-body:18px; --t-lede:19px; --t-fine:15px; --t-eyebrow:13px;
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
--gutter:20px; --measure:34rem; --measure-wide:72rem;
--r-card:16px; --r-btn:12px; --r-pill:999px; --r-input:10px;
--sh-card:0 1px 2px rgba(16,40,24,.04),0 10px 30px rgba(16,40,24,.06);
--sh-btn:0 6px 16px rgba(26,125,54,.28);
--sh-btn-light:0 6px 18px rgba(0,0,0,.18);
--focus:3px;
--topbar-h:58px;
}
@media (min-width:768px){
:root{ --t-h1:40px; --t-h2:28px; --t-h3:21px; --t-lede:20px; --gutter:32px; }
}
/* ---- reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
font-size:var(--t-body);line-height:1.6;overflow-x:hidden}
img,svg,canvas{max-width:100%;height:auto;display:block}
table{max-width:100%}
td,th{overflow-wrap:anywhere}
pre,code{overflow-wrap:anywhere;white-space:pre-wrap}
i,em{font-style:normal;font-weight:700} /* italics are banned by the lock */
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif;line-height:1.25;color:var(--ink);
margin:0 0 var(--s4);letter-spacing:-.01em;overflow-wrap:break-word}
h1{font-size:var(--t-h1);font-weight:700}
h2{font-size:var(--t-h2);font-weight:700}
h3{font-size:var(--t-h3);font-weight:600}
p{margin:0 0 var(--s4);color:var(--text);max-width:var(--measure);overflow-wrap:break-word}
p.lede{font-size:var(--t-lede);color:var(--ink)}
a{color:var(--brand-deep);text-underline-offset:3px}
a:hover{color:var(--brand-hover)}
ul,ol{margin:0 0 var(--s4);padding-left:var(--s5);color:var(--text);max-width:var(--measure)}
li{margin-bottom:var(--s2)}
strong,b{font-weight:700;color:var(--ink)}
:focus-visible{outline:var(--focus) solid var(--brand-deep);outline-offset:2px;border-radius:4px}
.sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
a.sronly:focus,a.sronly:focus-visible{position:fixed;top:10px;left:10px;z-index:100;
width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;
min-height:48px;display:flex;align-items:center;padding:0 var(--s4);
background:var(--brand-deep);color:#fff;border-radius:var(--r-btn);font-weight:600;
box-shadow:var(--sh-btn);text-decoration:none}
/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line);
min-height:var(--topbar-h)}
.topbar .inner{max-width:var(--measure-wide);margin:0 auto;padding:var(--s2) var(--gutter);
display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:0 0 auto;
min-height:44px}
.brand img{height:32px;width:auto}
.brand span{font-family:'Poppins',sans-serif;font-weight:700;font-size:23px;
letter-spacing:-.01em;color:var(--ink)}
.mockpill{background:var(--green-100);color:var(--brand-darkest);border-radius:var(--r-pill);
padding:5px 12px;font-size:13.5px;font-weight:600;white-space:nowrap}
.topbar .maplink{margin-left:auto;font-size:var(--t-fine);font-weight:600;
color:var(--brand-deep);text-decoration:none;min-height:44px;display:flex;align-items:center;padding:0 var(--s2)}
.topbar .maplink:hover{text-decoration:underline}
/* ---- progress rail (screens 02 to 05) ---- */
.rail{max-width:var(--measure-wide);margin:0 auto;padding:var(--s3) var(--gutter) 0;
display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.rail .step{flex:1 1 0;min-width:52px;display:flex;flex-direction:column;gap:6px}
.rail .bar{height:6px;border-radius:var(--r-pill);background:var(--line)}
.rail .step.on .bar,.rail .step.done .bar{background:var(--brand-deep)}
.rail .step .nm{font-size:13.5px;color:var(--muted);font-weight:600}
.rail .step.on .nm{color:var(--brand-deep)}
/* ---- layout ---- */
.wrap{max-width:var(--measure);margin:0 auto;padding:var(--s7) var(--gutter)}
.wide{max-width:var(--measure-wide);margin:0 auto;padding:var(--s7) var(--gutter)}
.band{width:100%}
.band.soft{background:var(--bg-soft)}
.band.tint{background:var(--green-50)}
.band.dark{background:var(--brand-darkest);color:var(--on-dark-text)}
.band.dark h1,.band.dark h2,.band.dark h3{color:var(--on-dark-text-2)}
.band.dark p,.band.dark li{color:var(--on-dark-text)}
.band.dark a{color:var(--accent-light)}
@media (min-width:768px){ .wrap,.wide{padding:var(--s9) var(--gutter)} }
.eyebrow{font-family:'Poppins',sans-serif;font-weight:600;font-size:var(--t-eyebrow);
letter-spacing:.16em;text-transform:uppercase;color:var(--brand-deep);
display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3)}
.eyebrow::before{content:"";width:22px;height:2px;flex:0 0 22px;
background:linear-gradient(90deg,#7FD197,#2F9E44)}
.band.dark .eyebrow{color:var(--accent-light)}
/* ---- cards ---- */
.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);
box-shadow:var(--sh-card);padding:var(--s5);margin:0 0 var(--s4)}
.card.tint{background:var(--green-50)}
.card > :last-child{margin-bottom:0}
@media (min-width:768px){ .card{padding:var(--s6)} }
.cards{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:768px){ .cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)} }
/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
min-height:48px;padding:var(--s3) var(--s5);border-radius:var(--r-btn);border:0;
background:var(--brand-deep);color:#fff;font-family:'Inter',sans-serif;
font-size:17px;font-weight:600;text-decoration:none;cursor:pointer;
box-shadow:var(--sh-btn);transition:background .15s,transform .15s;text-align:center}
.btn:hover{background:var(--brand-hover);transform:translateY(-1px);color:#fff}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--line);color:var(--muted);
box-shadow:none;cursor:not-allowed;transform:none}
.btn.light{background:#fff;color:var(--brand-deep);box-shadow:var(--sh-btn-light);
border:1px solid var(--line)}
.btn.light:hover{background:var(--btn-light-hover);color:var(--brand-deep)}
.btn.wide{width:100%}
.ghost{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s2);
background:none;border:0;color:var(--brand-deep);font-size:17px;font-weight:600;
cursor:pointer;text-decoration:none;font-family:'Inter',sans-serif}
.ghost:hover{text-decoration:underline}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-top:var(--s4)}
/* ---- sticky phone bar ---- */
.stickybar{position:sticky;bottom:0;z-index:30;background:rgba(255,255,255,.97);
border-top:1px solid var(--line);padding:var(--s3) var(--gutter);
padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px))}
.stickybar .btn{width:100%}
@media (min-width:768px){ .stickybar{display:none} }
/* ---- next bar ---- */
.nextbar{border-top:1px solid var(--line);background:var(--bg-soft)}
.nextbar .inner{max-width:var(--measure-wide);margin:0 auto;padding:var(--s6) var(--gutter);
display:flex;flex-direction:column;gap:var(--s3)}
.nextbar .nm{font-size:var(--t-fine);color:var(--muted);font-weight:600}
@media (min-width:768px){ .nextbar .inner{flex-direction:row;align-items:center;
justify-content:space-between} }
/* ---- drop-downs ---- */
.drop{border:1px solid var(--line);border-radius:var(--r-btn);background:var(--bg);
margin:0 0 var(--s3);overflow:hidden}
.drop > summary{cursor:pointer;list-style:none;padding:var(--s3) var(--s4);
min-height:48px;display:flex;align-items:center;gap:var(--s2);
font-weight:600;color:var(--brand-deep);font-size:16px}
.drop > summary::-webkit-details-marker{display:none}
.drop > summary::after{content:"+";margin-left:auto;font-size:20px;font-weight:700;
color:var(--brand-deep);line-height:1}
.drop[open] > summary::after{content:"\2212"}
.drop > summary:hover{background:var(--btn-light-hover)}
.drop .dropbody{padding:0 var(--s4) var(--s4);border-top:1px solid var(--line);
padding-top:var(--s4)}
.drop .dropbody > :last-child{margin-bottom:0}
.drop .dropbody p,.drop .dropbody li{font-size:16px}
/* ---- fine print, tags, labels ---- */
.fine{font-size:var(--t-fine);color:var(--muted);line-height:1.55;display:block;
max-width:var(--measure)}
.tag{display:inline-block;border-radius:var(--r-pill);padding:4px 11px;font-size:13.5px;
font-weight:600;background:var(--green-100);color:var(--brand-darkest);
vertical-align:middle;white-space:nowrap}
.tag.coming{background:var(--line);color:var(--muted)}
.label{display:inline-block;border:1px solid var(--line);border-radius:4px;
padding:2px 7px;font-size:13px;font-weight:600;letter-spacing:.05em;
color:var(--muted);background:var(--bg-soft);vertical-align:middle;white-space:nowrap}
/* ---- steps strip ---- */
.steps{list-style:none;margin:0 0 var(--s4);padding:0;counter-reset:st;max-width:var(--measure)}
.steps > li{counter-increment:st;position:relative;padding:0 0 var(--s5) var(--s7);margin:0}
.steps > li::before{content:counter(st);position:absolute;left:0;top:0;width:34px;height:34px;
border-radius:var(--r-pill);background:var(--green-100);color:var(--brand-darkest);
font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;
display:flex;align-items:center;justify-content:center}
.steps > li::after{content:"";position:absolute;left:17px;top:38px;bottom:8px;width:2px;
background:var(--line)}
.steps > li:last-child{padding-bottom:0}
.steps > li:last-child::after{display:none}
.steps h3{margin-bottom:var(--s2)}
.steps p{margin-bottom:0}
/* ---- split view ---- */
.split{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media (min-width:768px){ .split{grid-template-columns:1fr 1fr;gap:var(--s5)} }
/* ---- key/value table ---- */
.kv{width:100%;max-width:100%;border-collapse:collapse;margin:0 0 var(--s4);font-size:16px;
table-layout:fixed}
.kv td,.kv th{padding:var(--s3) 0;border-bottom:1px solid var(--line);
text-align:left;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}
.kv td:first-child,.kv th:first-child{color:var(--muted);padding-right:var(--s4);width:44%}
.kv td:last-child{color:var(--ink);font-weight:600}
.kv tr:last-child td{border-bottom:0}
/* ---- forms ---- */
label{display:block;font-weight:600;color:var(--ink);margin:0 0 var(--s2);font-size:16px}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
width:100%;min-height:48px;padding:var(--s3) var(--s4);font-size:17px;
font-family:'Inter',sans-serif;color:var(--ink);background:var(--bg);
border:1px solid var(--line);border-radius:var(--r-input)}
input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:var(--focus) solid var(--brand-deep);outline-offset:1px;border-color:var(--brand-deep)}
.field{margin:0 0 var(--s5)}
.field .fine{margin-top:var(--s2)}
.cbx{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) 0;
min-height:44px;font-weight:400;color:var(--text);cursor:pointer}
.cbx input[type=checkbox]{flex:0 0 24px;width:24px;height:24px;margin:2px 0 0;
accent-color:var(--brand-deep);cursor:pointer}
.cbx > span{display:block}
.cbx b{display:block;color:var(--ink);margin-bottom:var(--s1)}
.choices{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media (min-width:480px){ .choices{grid-template-columns:1fr 1fr} }
.choice{display:flex;align-items:center;gap:var(--s3);min-height:56px;width:100%;
padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-btn);
background:var(--bg);color:var(--ink);font-size:17px;font-weight:600;cursor:pointer;
text-align:left;font-family:'Inter',sans-serif}
.choice:hover{background:var(--btn-light-hover);border-color:var(--brand-deep)}
.choice[aria-pressed="true"],.choice.on{background:var(--green-50);
border-color:var(--brand-deep);box-shadow:inset 0 0 0 1px var(--brand-deep)}
/* ---- signature pad ---- */
.sigwrap{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4);
background:var(--bg-soft);margin:0 0 var(--s4)}
.sigtop{font-weight:700;color:var(--ink);margin-bottom:var(--s3);font-size:16px}
.sigtop .sigtip{display:block;font-weight:400;color:var(--muted);font-size:var(--t-fine);
margin-top:var(--s1)}
.signer{margin-bottom:var(--s3)}
.signer .signernote{font-size:var(--t-fine);color:var(--muted);display:block;margin-top:var(--s1)}
.sigwrap canvas{width:100%;height:150px;background:#fff;border:1px dashed var(--line);
border-radius:var(--r-input);touch-action:none;cursor:crosshair}
.sigline{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t-fine);
color:var(--muted);margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.sigbar{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap}
.sigbar .clear{min-height:44px;padding:0 var(--s4);border:1px solid var(--line);
border-radius:var(--r-btn);background:#fff;color:var(--brand-deep);font-weight:600;
cursor:pointer;font-size:16px;font-family:'Inter',sans-serif}
.sigbar .clear:hover{background:var(--btn-light-hover)}
.sighint{font-size:var(--t-fine);color:var(--muted)}
.sighint.done{color:var(--brand-deep);font-weight:600}
/* ---- state, ticks, notes ---- */
.done-tick{display:inline-flex;align-items:center;gap:var(--s2);color:var(--brand-deep);
font-weight:600;font-size:16px}
.done-tick::before{content:"";width:22px;height:22px;border-radius:var(--r-pill);
background:var(--brand-deep);
-webkit-mask:url("data:image/svg+xml;utf8,") center/16px no-repeat,
linear-gradient(#000,#000);-webkit-mask-composite:destination-out;
mask:url("data:image/svg+xml;utf8,") center/16px no-repeat;
flex:0 0 22px}
.note{font-size:var(--t-fine);color:var(--muted);background:var(--bg-soft);
border-left:3px solid var(--brand);border-radius:0 var(--r-input) var(--r-input) 0;
padding:var(--s3) var(--s4);margin:0 0 var(--s4);max-width:var(--measure)}
.state{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600;font-size:15px;
border-radius:var(--r-pill);padding:4px 12px;background:var(--green-100);
color:var(--brand-darkest)}
.state.wait{background:var(--line);color:var(--muted)}
.state.warn{background:#FDF0D5;color:#6B4A00}
.state.stop{background:#FBE3E3;color:#7A1B1B}
.state .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 8px}
/* ---- help line ---- */
.helpline{border-top:1px solid var(--line);background:var(--bg)}
.helpline .inner{max-width:var(--measure-wide);margin:0 auto;padding:var(--s5) var(--gutter);
font-size:var(--t-fine);color:var(--muted)}
.helpline a{font-weight:600}
/* ---- footer ---- */
.foot{background:var(--brand-darkest);color:var(--on-dark-text)}
.foot .inner{max-width:var(--measure-wide);margin:0 auto;padding:var(--s7) var(--gutter)}
.foot a{color:var(--accent-light)}
.foot .fine{color:var(--on-dark-text)}
.foot .brand span{color:var(--on-dark-text-2)}
/* ---- spinner (screen 04) ---- */
.spin{width:40px;height:40px;border-radius:50%;border:4px solid var(--line);
border-top-color:var(--brand-deep);animation:sp 1s linear infinite;margin:0 0 var(--s4)}
@keyframes sp{to{transform:rotate(360deg)}}
.hidden{display:none !important}
/* ---- print, because a practice manager prints the papers ---- */
@media print{
.topbar,.stickybar,.nextbar,.helpline,.rail,.actions,.btn,.ghost,
.sigbar,.sighint,.choice,.mockpill{display:none !important}
.sigwrap canvas{border:0;border-bottom:1px solid #000;height:90px}
body{font-size:12pt;color:#000;background:#fff}
.card{box-shadow:none;border:1px solid #999;break-inside:avoid}
.drop{border:0} .drop > summary{display:none} .drop .dropbody{border-top:0;padding:0}
.drop:not([open]) .dropbody{display:block !important}
a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}
/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* ==== merged screen fragments, appended by the overseer ==== */
/* --- from _add-01.css --- */
/* _add-01.css, from the screen 01 build. THIS IS A FRAGMENT FOR MERGE, NOT A STYLESHEET.
No page links it, and no page may: SITE-STYLE-LOCK.md section 1 allows exactly one
stylesheet, `assets/styles.css`. The overseer merges the block below into the end of
styles.css after the round, which is the only way a screen agent can add a rule without
two agents writing the same file in the same round.
Why it exists. Screen 01 carries the transitional call to action "See how it works",
which anchors to #how, and the stakes block links back to #offer. The top bar is
position:sticky at var(--topbar-h), which is 58px, so a browser that scrolls an
anchored section to y=0 parks the first line of that section underneath the bar. The
section's own top padding (var(--s7), 48px on a phone) hides most of the damage, which
is why screen 01 still reads without this rule, but the eyebrow lands under the bar.
It is written against `section[id]` rather than `#how` because every screen that grows an
in-page anchor needs the same correction, and a per-id rule would have to be added again
for each one. `:target` was the other candidate and was not used: it only matches after
the jump, so it depends on the browser applying scroll-margin to an element it is
matching in the same frame.
*/
section[id]{scroll-margin-top:calc(var(--topbar-h) + var(--s4))}
/* --- from _add-04.css --- */
/* ============================================================================
Screens 04 (approved) and 05 (install and tutorial): the only CSS those two
screens add. Written as a separate file because four agents build in parallel
this round and a shared stylesheet cannot take four writers; the overseer
merges this block into assets/styles.css after the round.
Rules this block obeys, from SITE-STYLE-LOCK.md:
- Every colour, space, radius, shadow and type size is an existing token. No
new custom property is introduced by this file, so section 9 of the lock
does not grow. The class names are new and are listed in proof/ledger-04.md.
- No new sibling for a component that already exists. The receipt ticks reuse
.done-tick rather than inventing a second tick.
- The few raw pixel values below are component internals of the same kind the
shared stylesheet already carries (.rail .bar is 6px, .sigwrap canvas is
150px, .done-tick is 22px). They are geometry, never a design value.
- Nothing here is smaller than 15px, and nothing here has a fixed width in px,
so there is no element that can out-grow a 320 wide viewport.
============================================================================ */
/* ---- 04: the wait state, a spinner and one line ---------------------------
Left aligned like every other block on the site: the lock bans centred
paragraphs, and a centred spinner over a left aligned line looks like two
different pages. The spinner's own margin is dropped because the column
supplies the gap. */
.waitbox{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.waitbox .spin{margin:0}
.waitbox p{margin-bottom:0}
/* ---- 04: where the merchant account sits, drawn as a two level path -------
A path, not a sentence, because Joe reads hierarchies at a glance and a phone
has no room for a horizontal breadcrumb. The elbow is two borders, so it needs
no image and no font character. The second line carries a plain words note, so
the shape is never the only carrier of the meaning (lock section 7). */
.hpath{display:block}
.hnode{display:block;color:var(--ink);font-weight:600}
.hnode.leaf{position:relative;margin-top:var(--s2);padding-left:var(--s5)}
.hnode.leaf::before{content:"";position:absolute;left:var(--s2);top:0;bottom:50%;
width:var(--s3);border-left:2px solid var(--line);border-bottom:2px solid var(--line);
border-bottom-left-radius:4px}
.hnode .who{display:block;font-weight:400;font-size:var(--t-fine);color:var(--muted)}
/* ---- 05: the tutorial illustrations ---------------------------------------
HTML and CSS only. No stock photo, no external image, no icon font, nothing
that leaves the page: the whole mock makes zero external requests and a
picture is the easiest way to break that. Each box is scenery and is marked
aria-hidden in the HTML, which is why none of them carries any text: a screen
reader must lose nothing by skipping them, so nothing that matters is in here.
The vocabulary is small on purpose: a window with three dots, a rule standing
in for a line of text, a field, a button, a table row, a receipt line. */
.ill{margin:var(--s3) 0 0;padding:var(--s3);background:var(--bg-soft);
border:1px solid var(--line);border-radius:var(--r-card);max-width:100%}
/* window chrome */
.ill-win{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-input);
overflow:hidden}
.ill-bar{display:flex;align-items:center;gap:var(--s1);padding:var(--s2) var(--s3);
background:var(--green-50);border-bottom:1px solid var(--line)}
.ill-dot{width:var(--s2);height:var(--s2);border-radius:var(--r-pill);
background:var(--line);flex:0 0 var(--s2)}
.ill-dot.on{background:var(--brand)}
.ill-body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3);
min-height:var(--s8)}
/* a rule stands in for a line of text. Three lengths, so the boxes read as
different screens rather than the same screen five times. */
.ill-rule{display:block;width:100%;height:var(--s2);border-radius:var(--r-pill);
background:var(--line)}
.ill-rule.l{width:85%}
.ill-rule.m{width:60%}
.ill-rule.s{width:35%}
.ill-rule.lead{width:40%;background:var(--brand)}
/* a field and a button, for the sign in box */
.ill-field{display:block;width:100%;height:var(--s5);background:var(--bg-soft);
border:1px solid var(--line);border-radius:var(--r-input)}
.ill-btn{display:block;width:38%;height:var(--s5);background:var(--brand-deep);
border-radius:var(--r-btn)}
.ill-foot{display:flex;justify-content:flex-end;margin-top:var(--s1)}
/* the install progress bar */
.ill-prog{display:block;width:100%;height:var(--s2);background:var(--line);
border-radius:var(--r-pill);overflow:hidden}
.ill-fill{display:block;width:62%;height:100%;background:var(--brand-deep)}
/* a fake Ortho2 row. The selected row is tinted AND outlined, because colour is
never the only carrier of a state, and in a picture with no words the outline
is the only other carrier available. */
.ill-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);
background:var(--bg);border:1px solid var(--line);border-radius:var(--r-input)}
.ill-row + .ill-row{margin-top:var(--s2)}
.ill-row.on{background:var(--green-50);border-color:var(--brand-deep);
box-shadow:inset 0 0 0 1px var(--brand-deep)}
.ill-cell{flex:1 1 auto;min-width:0}
.ill-cell.amt{flex:0 0 28%}
/* a fake receipt. Two ticked lines and a total, which is the shape of the real
thing: the practice's instalment on one line, the technology fee on the other.
The tick is the site's own .done-tick with no label, not a second tick. */
.ill-receipt{background:var(--bg);border:1px solid var(--line);
border-radius:var(--r-input);padding:var(--s3)}
.ill-line{display:flex;align-items:center;gap:var(--s3)}
.ill-line + .ill-line{margin-top:var(--s2)}
.ill-line .done-tick{flex:0 0 22px}
.ill-line .ill-rule{flex:0 1 auto}
.ill-total{display:flex;justify-content:space-between;gap:var(--s3);
margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
/* The illustrations are scenery, so they are the first thing to drop when a
practice manager prints the page. */
@media print{
.ill{display:none !important}
}
/* --- from _add-06.css --- */
/* NextRev mock flow, the additions screens 06 (the desk) and 07 (the family's phone) need.
Written 2026-09-18 by the 06/07 agent.
WHY THIS IS A SECOND FILE, AND WHY IT IS TEMPORARY.
SITE-STYLE-LOCK.md section 1 says one stylesheet, and it is right. Three other screens were
being built in the same round, and two agents writing one styles.css is how a shared file
loses a block: the last writer wins and nobody sees the loss until a screen renders bare.
So these rules live here, scoped to the two screens that link them, and are written to be
pasted into styles.css as ONE commented block at merge time. Nothing below invents a colour,
a size or a shadow: every value is a token already declared on :root in styles.css, and every
rule either extends a class the lock already names or adds a MODIFIER to one. No new sibling
component. If a rule here needs a value that is not a token, it is a bug, not a decision.
Read with SITE-STYLE-LOCK.md section 6 open. The classes extended here are:
.choices .choice .kv .cbx .card, plus two small blocks the lock has no name for and that are
described in place. */
/* ── .choices.one ────────────────────────────────────────────────────────────────────────────
A MODIFIER, not a sibling. .choices is a two-column grid from 480px up, which is right for
two or three big picks and wrong for a result list: a list of people reads down, not across,
and a name that wraps mid-surname is a name a coordinator misreads. One column at every
width. */
.choices.one{grid-template-columns:1fr}
@media (min-width:480px){ .choices.one{grid-template-columns:1fr} }
/* The two halves of a result row. The date of birth is the load-bearing half: it is how you tell
two people with one surname apart, which is the entire reason the mock list holds two
Alvarez children. It is pushed to the end of the row and never allowed to wrap, so the name
gives way first. */
.choice .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.choice .dob{margin-left:auto;flex:0 0 auto;white-space:nowrap;font-weight:400;
font-size:var(--t-fine);color:var(--muted);font-variant-numeric:tabular-nums}
/* ── .kv, two small extensions ───────────────────────────────────────────────────────────────
The label column is a
on both screens, because a label/value table read by a
screen reader with no row headers is a list of orphan values. A browser bolds a th by default
and the lock wants the label quieter than the value, so the weight is put back. */
.kv th{font-weight:400}
/* .kv.money: a MODIFIER for the tables whose right column is an amount. Money is compared down
a column, so it is aligned on its last digit and set in tabular figures. */
.kv.money td:last-child{text-align:right;font-variant-numeric:tabular-nums}
/* A link-shaped string in a value cell. Only .brk gets to break inside a word: doing it to every
cell would hyphenate names. */
.kv .brk{word-break:break-all}
/* ── .cbx.box ────────────────────────────────────────────────────────────────────────────────
A MODIFIER that gives a consent row the bordered card shape the blessed payer page used, so a
consent looks like a thing you are agreeing to rather than a line of body text. The tick is
still the carrier of the state: the colour change is an extra, never the only signal, which is
the lock's section 7 rule. Browsers without :has() lose the tint and lose nothing else. */
.cbx.box{border:1px solid var(--line);border-radius:var(--r-input);background:var(--bg);
padding:var(--s3) var(--s4);margin:0 0 var(--s3)}
.cbx.box:has(input:checked){border-color:var(--brand-deep);background:var(--green-50)}
.cbx.box .fine{margin-top:var(--s1)}
/* ── .hostbox ────────────────────────────────────────────────────────────────────────────────
The card surface on screen 06. It is a BOX, not a form: there is no card field anywhere on
that page and this block exists to make the boundary visible, because the whole PCI argument
is about which origin the card is typed into. Same border, radius and line token as .card; it
is not a second card style, it is a card with a labelled header strip. */
.hostbox{border:1px solid var(--line);border-radius:var(--r-card);background:var(--bg);
overflow:hidden;margin:0 0 var(--s4)}
.hostbox .hosth{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
padding:var(--s3) var(--s4);background:var(--green-50);border-bottom:1px solid var(--line);
font-size:var(--t-fine);font-weight:600;color:var(--brand-darkest)}
.hostbox .hostb{padding:var(--s5) var(--s4)}
@media (min-width:768px){ .hostbox .hostb{padding:var(--s5) var(--s5)} }
.hostbox .ph{border:1px dashed var(--line);border-radius:var(--r-input);background:var(--bg-soft);
padding:var(--s5) var(--s4);margin:0 0 var(--s4)}
.hostbox .ph > :last-child{margin-bottom:0}
.hostbox .hostb > :last-child{margin-bottom:0}
/* ── .smsg ───────────────────────────────────────────────────────────────────────────────────
The text message shown exactly as the family would read it. white-space:pre-wrap so the copy
on screen is the copy that would be sent, break-word so a long link cannot push the card
wider than a 320px viewport. */
.smsg{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-input);
padding:var(--s3) var(--s4);margin:0 0 var(--s2);font-size:16px;line-height:1.55;
color:var(--ink);white-space:pre-wrap;overflow-wrap:break-word}
/* ── .stmt ───────────────────────────────────────────────────────────────────────────────────
The two statement lines on screen 07, and they are two on purpose: there are two merchants,
the practice and NextRev, so the family sees two lines on the statement. They are never
merged, never totalled into one figure, and this block is shaped to make merging them look
wrong. The amount is pushed to the end of the row; the explanation takes a full line under
it so nothing is squeezed at 320px. */
.stmt{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);
border:1px solid var(--line);border-radius:var(--r-input);background:var(--bg-soft);
padding:var(--s3) var(--s4);margin:0 0 var(--s3)}
.stmt .who{font-weight:700;color:var(--ink);min-width:0}
.stmt .amt{margin-left:auto;flex:0 0 auto;font-weight:700;color:var(--ink);
font-variant-numeric:tabular-nums}
.stmt .what{flex:1 1 100%;font-size:var(--t-fine);color:var(--muted);line-height:1.55}
/* ── print ───────────────────────────────────────────────────────────────────────────────────
styles.css already hides the bars and opens the drop-downs. These two keep a receipt line and
a consent row from being split across a page break, which is how a printed authorisation ends
up with an amount on one sheet and the merchant it belongs to on the next. */
@media print{
.stmt,.cbx.box,.hostbox{break-inside:avoid}
.stmt{background:#fff}
}