
:root{--paper:#faf9f6;--surface:#fff;--sunk:#f3f1ec;--ink:#16181d;--muted:#585b63;--faint:#696c73;--line:#e6e3dc;--line-2:#d6d2c8;--field:#918d84;--teal:#9a5a0c;--teal-hover:#e8850e;--teal-soft:#fdf0de;--on-teal:#fff;--orange:#f7941d;--orange-text:#9a5a0c;--warn:#8a5a00;--warn-soft:#fbf4e4;--danger:#b3261e;--serif:"Source Serif 4",Georgia,serif;--sans:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;color-scheme:light}
*{box-sizing:border-box}html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:var(--surface);padding:6px 10px;z-index:9}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1040px;margin:0 auto;padding:16px}
.logo{font:700 22px/1 "Fira Sans",var(--sans);letter-spacing:-.01em;color:var(--ink);text-decoration:none}.logo i{display:inline-block;width:.385em;height:.385em;border-radius:50%;background:var(--orange);margin-left:.02em}
.wrap{max-width:1040px;margin:0 auto;padding:8px 16px 64px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
@media (max-width:860px){.wrap{grid-template-columns:1fr}}
h1{font:600 32px/1.15 var(--serif);margin:0 0 6px}h1::after{content:"";display:inline-block;width:.24em;height:.24em;border-radius:50%;background:var(--orange);margin-left:.08em}
h2{font:600 18px/1.3 var(--sans);margin:0 0 12px;display:flex;align-items:center;gap:8px}h2::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.sub{color:var(--muted);margin:0 0 20px}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px;padding:0;list-style:none;font-size:13.5px}
.steps li{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:var(--surface)}
.steps li b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:500 12px var(--mono);background:var(--sunk);color:var(--muted)}
.steps li.on{border-color:var(--orange);color:var(--ink)}.steps li.on b{background:var(--orange);color:#fff}.steps li.done b{background:var(--teal);color:#fff}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;margin-bottom:16px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.plan{position:relative;display:grid;gap:6px;padding:16px;border:1px solid var(--line-2);border-radius:6px;cursor:pointer;background:var(--surface)}
.plan input{position:absolute;opacity:0}
.plan:has(input:checked){border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.plan:has(input:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.plan .n{font-weight:600}.plan .p{font:600 26px/1.1 var(--serif);color:var(--orange-text)}.plan .p span{font:400 14px var(--sans);color:var(--muted)}
.plan .d{font-size:13.5px;color:var(--muted)}
.plan.soon-plan{cursor:default;background:var(--sunk)}.plan.soon-plan .p{color:var(--muted)}
.nog{justify-self:start;font:600 12.5px/1.3 var(--sans);padding:4px 9px;border-radius:4px;background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;flex:1;min-width:0}
.row input[type=checkbox]{width:18px;height:18px;accent-color:var(--teal);margin-top:2px;flex:none}
.t{font-weight:500}.m{font-size:13px;color:var(--muted)}.off{color:var(--muted)}
.amt{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.soon{font:500 11.5px var(--sans);padding:3px 7px;border-radius:3px;background:var(--warn-soft);color:var(--warn);white-space:nowrap}
.incl{margin-top:16px;border-top:1px solid var(--line)}.incl summary{cursor:pointer;list-style:none;padding:14px 0 4px;font-weight:600;color:var(--teal);display:flex;align-items:center;gap:8px}.incl summary::-webkit-details-marker{display:none}.incl summary::after{content:"+";font:400 20px/1 var(--sans);color:var(--teal)}.incl[open] summary::after{content:"–"}.incl summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:3px}.igroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 24px}.igroups h3{font:600 14.5px/1.3 var(--sans);margin:0 0 6px}.igroups ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:13.5px;color:var(--muted)}.igroups li{padding-left:18px;position:relative}.igroups li::before{content:"✓";position:absolute;left:0;color:var(--orange-text);font-weight:600}.chip{display:inline-block;font:500 11px/1.4 var(--sans);padding:1px 6px;border-radius:3px;vertical-align:1px;white-space:nowrap}.chip.addon{background:var(--teal-soft);color:var(--teal)}.chip.soon{background:var(--warn-soft);color:var(--warn)}
.grp{border-top:1px solid var(--line)}.grp:last-of-type{border-bottom:1px solid var(--line)}
.grp summary{cursor:pointer;list-style:none;padding:14px 32px 14px 0;font-weight:500;position:relative}
.grp summary::-webkit-details-marker{display:none}
/* the +/– glyph is decoration: the empty alt text keeps it out of the summary's accessible name */
.grp summary::after{content:"+" / "";position:absolute;right:4px;top:11px;font-size:22px;color:var(--muted)}
.grp[open] summary::after{content:"–" / ""}
.grp summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.grp .note{margin:0 0 14px}.grp summary .note{margin:0 0 0 6px;font-weight:400}
.grows .row:first-child{border-top:0}
.txt{display:grid;gap:2px;min-width:0}
/* R1 MF-2 (WCAG 1.4.13): the explanation opens BELOW its own row, in the list flow, so it never
   covers another row; it opens from the info button only (hover, keyboard focus, tap), stays while
   the pointer is anywhere on the row (the tip included), and Escape closes it. The info button
   sits on the row's top line, so opening it never moves the button under a finger or pointer. */
.grows .arow{display:block}
.arow .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tip{display:none;margin:8px 0 2px 28px;max-width:60ch;padding:8px 10px;background:var(--sunk);border-radius:6px}
.arow.open .tip,.arow.foc .tip,.arow.hov .tip{display:block}
.cov:empty{display:none}
.row.covered .t{color:var(--muted)}
.info{position:relative;flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--muted);font:600 12px/1 var(--serif);font-style:italic;cursor:pointer;padding:0}
.info::before{content:"";position:absolute;inset:-10px}
.info:hover,.arow.open .info,.arow.foc .info,.arow.hov .info{border-color:var(--orange);color:var(--orange-text)}
.info:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.f{display:grid;gap:5px;font-size:14px;font-weight:500}
.f input,.f select{font:15px var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--field);border-radius:6px;padding:10px 12px;min-height:44px;width:100%}
.f input:focus,.f select:focus{outline:2px solid var(--teal);outline-offset:1px}
.f input[aria-invalid=true]{border-color:var(--danger)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:12px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--field);border-radius:6px;overflow:hidden}
.stepper button{width:40px;height:40px;border:0;background:var(--surface);color:var(--ink);font-size:18px;cursor:pointer}
.stepper output{min-width:44px;text-align:center;font:500 15px var(--mono)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:500 15px var(--sans);cursor:pointer;text-decoration:none}
.btn.primary{background:var(--orange);border-color:var(--orange);color:#161615}.btn.primary:hover{background:var(--teal-hover);border-color:var(--teal-hover)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn:focus-visible,.stepper button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:4px}
.sum{position:sticky;top:16px;display:grid;gap:10px}
.line{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:4px 0}
.line > :last-child{font-family:var(--mono);white-space:nowrap;text-align:right}
.tot{border-top:1px solid var(--ink);padding-top:10px;font-weight:600}.tot span:last-child{font:600 24px var(--serif);color:var(--orange-text)}
.note{font-size:13px;color:var(--faint)}
.notice{background:var(--teal-soft);color:var(--teal);border-radius:6px;padding:10px 12px;font-size:14px;margin:8px 0}
.hpf{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:8px 0}.check input{width:18px;height:18px;accent-color:var(--teal);margin-top:2px;flex:none}
.err,.ferr{color:var(--danger);font-size:13px;margin:2px 0 0}
.stripe{display:grid;gap:10px;padding:18px;border:1px dashed var(--line-2);border-radius:6px;background:var(--sunk)}
.where{border:0;padding:0;margin:0;display:grid;gap:10px}.where legend{font-weight:500;padding:0;margin-bottom:6px}
.radios{display:grid;gap:6px}.radios label{display:flex;gap:6px;align-items:center}
.preview{padding:12px 14px;border-radius:6px;background:var(--sunk);font-size:14px}
[hidden]{display:none!important}
.incl-note{margin:0 0 12px}
