/* Offer Summary Builder. Direction C, "Schedule of Values" (Cruz, Oct 31, 2026).
   White sheet, graphite ink, one blue for what you can press, IBM Plex Sans only.
   Sizes follow the 55+ reader numbers: 18px body, nothing under 16px, 56px inputs. */
@font-face{font-family:"Plex";src:url(fonts/plex-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/plex-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url(fonts/plex-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --sheet:#FFFFFF;--ground:#F1F3F5;--ink:#1B1E23;--muted:#454C56;--line:#6B7380;--hair:#D3D8DE;
  --blue:#1B4C8C;--blue-hover:#163F75;--blue-tint:#E8EEF7;--red:#A1241A;--red-tint:#FBECEA;
  --r:4px;--ease:cubic-bezier(.2,.6,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--sheet);color:var(--ink);font:400 18px/1.5 "Plex",system-ui,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3,p,dl,dd,ul{margin:0}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;background:var(--sheet);padding:8px 12px;z-index:9}
.skip:focus{left:16px}
[hidden]{display:none!important}

/* the AccuMRK mark: the real logo file used as a one-colour mask */
.logo{display:inline-block;height:22px;width:72px;background:var(--ink);-webkit-mask:url(logo-mask.png) left center/contain no-repeat;mask:url(logo-mask.png) left center/contain no-repeat;vertical-align:middle}
.logo.sm{height:14px;width:46px}

/* top bar */
.bar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--hair);background:var(--sheet)}
.mark{display:flex;align-items:center;min-height:48px}
.barlinks{display:flex;gap:20px;align-items:center}
.barlinks a{font-size:16px;min-height:48px;display:inline-flex;align-items:center}
.barphone{display:none!important}

.wrap{max-width:640px;margin:0 auto}
main{padding:24px 16px 40px;min-width:0;overflow-wrap:anywhere}
.screen{animation:fade 160ms var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}

h1{font-size:30px;line-height:1.15;font-weight:600;max-width:18ch;letter-spacing:-.005em}
.lede{margin-top:12px}
#intro .hint{margin-top:8px}
.how3{margin:16px 0 0;padding:0;list-style:none;counter-reset:h3;display:grid;gap:8px}
.how3 li{counter-increment:h3;position:relative;padding-left:40px;font-size:17px;line-height:1.4}
.how3 li::before{content:counter(h3);position:absolute;left:0;top:-1px;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600}
.how3 b{font-weight:600}
.hint{font-size:16px;line-height:1.45;color:var(--muted)}
.hint.small{font-size:16px}
.savedpanel{margin-top:16px;border:1px solid var(--line);padding:16px}
.savedpanel p{font-size:16px}

/* sticky totals: both equal, neither leads */
.tothdr{position:sticky;top:0;z-index:5;margin:24px -16px 0;background:var(--ground);border-bottom:1px solid var(--hair);display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:10px 16px 12px}
.tot small{display:block;font-size:16px;font-weight:500;color:var(--muted);line-height:1.2}
.tot b{display:block;font-size:26px;font-weight:600;line-height:1.15;margin-top:2px}
body[data-on=review] .tothdr,body[data-on=done] .tothdr{display:none}

.steplabel{font-size:16px;font-weight:500;color:var(--muted);margin-top:24px}
.steptitle{font-size:26px;line-height:1.2;font-weight:600;margin-top:4px}
#stephint{margin-top:8px}
.group{margin-top:8px}

/* fields */
.field{margin-top:24px}
.field label{display:block;font-size:18px;font-weight:500;line-height:1.35}
.field .hint{margin-top:2px}
.inrow{display:flex;align-items:center;gap:8px;margin-top:8px}
.pre,.suf{font-size:22px;color:var(--muted);flex:none}
.suf{font-size:18px}
.inrow input,.inrow textarea{flex:1;min-width:0;height:56px;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);padding:0 12px;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.field.text .inrow input{font-size:20px;font-weight:400}
.inrow textarea{height:auto;min-height:120px;padding:12px;font-size:18px;font-weight:400;line-height:1.45;resize:vertical}
.inrow input:hover,.inrow textarea:hover{border-color:var(--ink)}
.inrow input:focus,.inrow textarea:focus{outline:3px solid var(--blue);outline-offset:2px}
.field.narrow .inrow input{flex:0 0 120px}
.rb{font-size:16px;color:var(--muted);margin-top:6px;min-height:0}
.rb:empty{display:none}
.rb.saved{color:var(--ink);font-weight:500;padding-left:26px;position:relative}
.rb.saved::before{content:"";position:absolute;left:4px;top:4px;width:7px;height:12px;border:solid var(--blue);border-width:0 2.5px 2.5px 0;transform:rotate(40deg)}
.addedsum{margin-top:24px;background:var(--ground);border-left:4px solid var(--blue);padding:12px 16px}
.addedhead{font-size:16px;font-weight:600;color:var(--muted)}
.addedsum ul{margin:4px 0 0;padding:0;list-style:none}
.addedsum li{font-size:17px;padding:2px 0}
.addedsum li b{font-weight:600}
.logorow{margin-top:8px}
.logorow input[type=file]{font-size:16px;max-width:100%;min-height:48px}
.logorow input[type=file]::file-selector-button{font:inherit;font-size:17px;font-weight:600;min-height:48px;padding:8px 16px;margin-right:12px;border:0;border-radius:var(--r);background:var(--sheet);color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue);cursor:pointer}
.logoshown{margin-top:8px}
.logobox{display:inline-flex;align-items:center;justify-content:center;width:176px;height:64px;padding:6px;border:1px solid var(--hair);background:repeating-conic-gradient(#fff 0 25%,#F1F3F5 0 50%) 0 0/12px 12px}
.logobox img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.logoshown .hint{margin-top:4px}
.err{color:var(--red);font-size:17px;font-weight:600;line-height:1.4;margin-top:6px}
.field.bad .inrow input{border:2px solid var(--red)}
.sublabel{font-size:18px;font-weight:500;margin-top:24px}
.sublabel.first{margin-top:16px}

/* segmented */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-top:8px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{min-height:48px;border:0;background:var(--sheet);font-size:17px;font-weight:500;cursor:pointer;padding:4px 8px;transition:background 100ms}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{background:var(--ground)}
.seg button[aria-checked=true]{background:var(--blue-tint);color:var(--blue);font-weight:600;box-shadow:inset 0 0 0 2px var(--blue)}

/* radio rows */
.radios{margin-top:8px;display:grid;gap:8px}
.radio{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;font-size:17px;line-height:1.35}
.radio:hover{background:var(--ground)}
.radio input{width:24px;height:24px;flex:none;accent-color:var(--blue);margin:0}
.radio:has(input:checked){border:2px solid var(--blue);padding:7px 11px;font-weight:600}

/* chips */
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chipgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.chip{display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--sheet);font-size:18px;font-weight:500;text-align:left;cursor:pointer;transition:background 100ms,border-color 100ms;line-height:1.2}
.chip:hover{background:var(--ground)}
.chip .glyph{width:16px;height:16px;flex:none;position:relative}
.chip .glyph::before,.chip .glyph::after{content:"";position:absolute;background:currentColor;left:7px;top:1px;width:2px;height:14px}
.chip .glyph::after{transform:rotate(90deg)}
.chip[aria-pressed=true]{background:var(--blue-tint);border:2px solid var(--blue);color:var(--blue);font-weight:600;padding:7px 13px}
.chip[aria-pressed=true] .glyph::before{width:2px;height:12px;left:9px;top:1px;transform:rotate(40deg)}
.chip[aria-pressed=true] .glyph::after{width:2px;height:6px;left:3px;top:7px;transform:rotate(-45deg)}
.chip.wide{width:100%;margin-top:8px}
.acard{margin-top:16px;border:1px solid var(--line);padding:16px;animation:fade 150ms var(--ease)}
.ahead{display:flex;justify-content:space-between;align-items:center}
.ahead h3{font-size:18px;font-weight:600}
.acard>.hint{margin-top:4px}
.acard .field{margin-top:16px}

/* mic */
.mic{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--sheet);color:var(--blue);display:flex;align-items:center;justify-content:center;cursor:pointer}
.mic.live{background:var(--red);border-color:var(--red);color:#fff}
.listening{display:block;color:var(--red);font-size:16px;font-weight:600;margin-top:6px}

/* buttons */
.actions{margin-top:32px}
.actions.sep{padding-top:24px;border-top:1px solid var(--hair)}
.btn{display:flex;width:100%;align-items:center;justify-content:center;min-height:56px;border:0;border-radius:var(--r);background:var(--blue);color:#fff;font-size:18px;font-weight:600;cursor:pointer;padding:8px 16px}
.btn:hover{background:var(--blue-hover)}
.btn.secondary{background:var(--sheet);color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
.btn.secondary:hover{background:var(--blue-tint)}
.btn+.btn{margin-top:12px}
.back{display:inline-flex;align-items:center;gap:6px;min-height:48px;margin-top:12px;padding:0 4px;border:0;background:none;color:var(--blue);font-size:18px;font-weight:500;cursor:pointer}
.back:hover{text-decoration:underline;text-underline-offset:3px}
.link{border:0;background:none;padding:0;min-height:48px;color:var(--blue);font-size:18px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link.danger{color:var(--red)}
.links{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 24px}

/* review */
.review>.rcol>.hint{margin-top:8px}
#cards{margin-top:16px}
.rcard{border:1px solid var(--line);margin-top:12px;padding:4px 16px 12px}
.rhead{display:flex;justify-content:space-between;align-items:center;min-height:56px}
.rhead h3{font-size:20px;font-weight:600}
.rlist>div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--hair);min-width:0}
.rlist dt{font-size:18px;flex:0 1 auto;min-width:0}
.rlist dd{font-size:18px;font-weight:500;text-align:right;min-width:0;max-width:60%;overflow-wrap:anywhere}
.muted{color:var(--muted)}
.rbody{padding-bottom:12px;animation:fade 150ms var(--ease)}
.rtotals{margin-top:24px}
.rt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0}
.rt span{font-size:20px;font-weight:600}
.rt b{font-size:24px;font-weight:600;border-bottom:4px double var(--ink);padding-bottom:2px}
.rt.sub span{font-size:18px;font-weight:400}
.rt.sub b{font-size:18px;font-weight:500;border:0}
.createbar{position:sticky;bottom:0;background:var(--sheet);border-top:1px solid var(--hair);padding:12px 0 calc(12px + env(safe-area-inset-bottom));margin-top:16px;z-index:4}
body.typing .createbar{position:static}
#reviewerr{margin-top:12px}

/* done */
.doccard{margin:20px 0 0}
.docthumb{border:1px solid var(--line);overflow:hidden}
.docmeta{font-size:16px;color:var(--muted);margin-top:8px}

.done .btn{margin-top:16px}
.done>.hint{margin-top:16px}
.firmlink{margin-top:24px;border-top:1px solid var(--hair);padding-top:8px}
#firmlinkpanel p{font-size:16px;margin-top:12px}

.maker{margin-top:40px;padding-top:16px;border-top:1px solid var(--hair);font-size:16px;color:var(--muted)}

/* the sheet preview (desktop workbench, done card): drawn from the PDF model */
.pv{background:#fff;color:var(--ink);font-size:13px;line-height:1.3;padding:28px 30px}
.pv-title{display:flex;justify-content:space-between;align-items:baseline}
.pv-title b{font-size:21px;font-weight:600}
.pv-firm{display:flex;align-items:flex-end;gap:10px;min-width:0}
.pv-logo{max-width:105px;max-height:33px;object-fit:contain;display:block}
.pv-title span{font-size:14px;font-weight:500}
.pv-strip{display:flex;border:1px solid var(--ink);margin-top:8px}
.pv-strip>div{flex:1 1 0;padding:5px 8px;min-width:0}
.pv-strip>div+div{border-left:1px solid var(--ink)}
.pv-strip small{display:block;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.pv-strip span{font-size:13px;font-weight:500;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.pv-purpose{font-size:11.5px;color:var(--muted);margin-top:12px}
.pv-cols{display:grid;grid-template-columns:36px 1fr 1fr 90px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-top:14px;padding-bottom:4px;border-bottom:1px solid var(--ink)}
.pv-cols span:last-child{text-align:right}
.pv-sec{display:grid;grid-template-columns:36px 1fr;font-weight:600;margin-top:14px}
.pv-row{display:grid;grid-template-columns:36px 1fr 1fr 90px;padding:3px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.pv-row .n{font-size:11px;color:var(--muted)}
.pv-row .h{font-size:11px;color:var(--muted)}
.pv-row .f{text-align:right}
.pv-tot{display:grid;grid-template-columns:36px 1fr 100px;margin-top:10px;font-weight:600;align-items:baseline}
.pv-tot .l{grid-column:2;font-size:14px}
.pv-tot .f{text-align:right;font-size:15px;border-top:1px solid var(--ink);border-bottom:4px double var(--ink);padding:3px 0 1px}
.pv-src{padding-left:36px;font-size:11px;color:var(--muted);margin-top:3px}
.pv-band{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pv-sec.band{grid-template-columns:36px 1fr}
.pv-row.band{grid-template-columns:36px 1fr 70px}
.pv-row.band .h{grid-column:2;grid-row:2}
.pv-row.band .h:empty{display:none}
.pv-row.band .f{grid-column:3;grid-row:1}
.pv-note{margin-top:14px;padding-left:36px}
.pv-note p{margin-top:2px;white-space:pre-wrap}
.pv-note.incol{padding-left:36px}
.pv-notes{margin-top:22px;font-size:11px}
.pv-notes small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:500}
.pv-notes p{display:flex;gap:6px;margin-top:2px}
.pv-credit{margin-top:12px;padding-top:8px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.pv-credit .logo,body.desk .pv-credit .logo{height:8px;width:26px}
.pv.thumb{pointer-events:none;padding:22px 24px}
.pcol{display:none}

/* below the tool */
.how{max-width:640px;margin:0 auto;padding:24px 16px 64px;border-top:1px solid var(--hair)}
.how h2{font-size:24px;font-weight:600;margin-top:32px}
.how h2:first-child{margin-top:16px}
.how h3{font-size:19px;font-weight:600;margin-top:20px}
.how p{margin-top:8px}
.method>div{padding:12px 0;border-bottom:1px solid var(--hair)}
.method dt{font-weight:600}
.method dd{margin-top:4px}
.check{padding-left:0;list-style:none}
.check li{position:relative;padding:8px 0 8px 32px;border-bottom:1px solid var(--hair)}
.check li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:16px;border:1.5px solid var(--ink)}
.how .maker{margin-top:40px;display:block}
.how .maker .logo{margin-bottom:8px}

/* tablets: phone flow, centered, desktop type */
@media (min-width:760px){
  body{background:var(--ground)}
  .wrap,.how{background:var(--sheet)}
  .wrap{border:1px solid var(--hair);border-top:0;margin-bottom:24px}
  .how{border:1px solid var(--hair)}
  main{padding:32px 32px 40px}
  .tothdr{margin:24px -32px 0;padding:12px 32px}
  h1{font-size:40px;line-height:1.1}
  .steptitle{font-size:24px}
  .inrow input{height:56px;font-size:20px}
  .btn{min-height:56px}
  .barphone{display:inline-flex!important}
}

/* desktop workbench: the whole form and the live sheet on one screen */
@media (min-width:1100px){
  body.desk .bar{height:64px;padding:0 32px}
  body.desk .logo{height:24px;width:78px}
  body.desk .wrap{max-width:1360px;display:grid;grid-template-columns:560px minmax(560px,1fr);gap:32px;padding:32px;background:none;border:0;align-items:start}
  body.desk main{background:var(--sheet);border:1px solid var(--hair);padding:0 32px 40px}
  body.desk #intro{padding-top:32px}
  body.desk .tothdr{margin:24px -32px 0;padding:12px 32px}
  body.desk .tot b{font-size:28px}
  body.desk .steplabel,body.desk .steptitle,body.desk #stephint,body.desk .actions{display:none}
  body.desk .dgroup{border-top:1px solid var(--hair);margin-top:32px;padding-top:8px}
  body.desk .dhead{font-size:24px;font-weight:600;line-height:1.25;margin-top:16px}
  body.desk .chipgrid{grid-template-columns:1fr 1fr 1fr}
  body.desk .chip{font-size:16px;min-height:52px}
  body.desk[data-on=step] .pcol{display:block;position:sticky;top:24px}
  body.desk .pcol .pv{border:1px solid var(--hair);font-size:14px;padding:36px 40px}
  body.desk .pcta{margin-top:16px}
  body.desk .pcta .btn{min-height:56px}
  body.desk[data-on=done] .wrap,body.desk[data-on=review] .wrap{grid-template-columns:640px;justify-content:center}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.bar,.tothdr,.actions,.how{display:none}}
[tabindex="-1"]:focus{outline:none}