/* Layout concept: the front desk of a pet hotel. Paper sections carry the story; navy "app bar" bands
   carry the product, the same navy bar the real Petwyse dashboard uses. Orange is reserved for actions. */
:root{
  --paper:#f8f8f5; --card:#ffffff; --sunk:#efefea; --line:#dfe0e3;
  --ink:#1b2444; --muted:#58617e;
  --navy:#2e3d6c; --band:#2b3a68; --band-2:#34457a; --on-band:#ffffff; --on-band-muted:#c3cbe6;
  --orange:#ee6534; --orange-ink:#ffffff; --orange-soft:#fde6dc;
  --paid:#23875d; --paid-soft:#dcf1e7; --due:#b7790b; --due-soft:#fbefd2; --alert:#c0392b;
  --shadow:0 1px 2px rgb(27 36 68 / .06), 0 8px 24px rgb(27 36 68 / .08);
  --f-display:"Unbounded", "Arial Black", system-ui, sans-serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-data:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:10px; --wrap:1920px; --gutter:clamp(20px,5vw,112px); --plate:transparent; --plate-pad:0;
}
:root{color-scheme:light}   /* light only, by request: no dark theme */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{margin:0; background:var(--paper); color:var(--ink); font:400 1.0625rem/1.6 var(--f-body); -webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); font-weight:700; line-height:1.12; letter-spacing:-.01em; text-wrap:balance; margin:0}
h1{font-size:clamp(2rem,4.6vw,3.35rem)}
h2{font-size:clamp(1.55rem,3vw,2.3rem)}
h3{font-size:1.05rem; font-weight:500; letter-spacing:0}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter)}
.eyebrow{font:600 .78rem/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--orange)}
.lede{font-size:1.15rem; color:var(--muted); max-width:58ch}
.mono{font-family:var(--f-data); font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--orange); outline-offset:2px; border-radius:4px}

.btn{display:inline-flex; align-items:center; gap:.5em; padding:.8em 1.25em; border-radius:999px; border:1.5px solid transparent;
  font:600 1rem/1 var(--f-body); text-decoration:none; cursor:pointer; transition:transform .15s, background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-go{background:var(--orange); color:var(--orange-ink)}
.btn-ghost{border-color:currentColor; background:transparent; color:inherit}
.btn-sm{padding:.45em .8em; font-size:.82rem}


/* brand mark */
.brand{display:flex; align-items:center; gap:.6em; text-decoration:none; color:var(--navy)}
.logo-plate{display:inline-flex; background:var(--plate); border-radius:8px; padding:var(--plate-pad)}
.logo{display:block; height:52px; width:auto}
footer .logo{height:40px}
@media (max-width:440px){ .logo{height:34px} }
.brand-word{display:flex; flex-direction:column; line-height:1}
.brand-word b{font:700 1.15rem/1 var(--f-display); letter-spacing:.2em}
.brand-word small{font:500 .52rem/1 var(--f-display); letter-spacing:.32em; margin-top:.35em; color:var(--muted)}

/* nav */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:1.5rem; padding-block:.8rem}

/* hero */
.hero{padding-block:clamp(2.5rem,6vw,4.5rem) 2rem}
.hero-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media (max-width:980px){ .hero-grid{grid-template-columns:minmax(0,1fr)} }
.hero-copy{display:flex; flex-direction:column; gap:1.25rem}
.hero h1 em{font-style:normal; color:var(--orange)}
.cta-row{display:flex; flex-wrap:wrap; gap:.75rem; align-items:center}
.fine{font-size:.88rem; color:var(--muted)}
.proof{display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; font-size:.9rem; color:var(--muted); padding-top:.5rem; border-top:1px solid var(--line)}
.proof b{color:var(--ink); font-family:var(--f-data); font-weight:600}

/* ---------- live demo app ---------- */
.app{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; font-size:.82rem; position:relative}
.app-bar{background:var(--band); color:var(--on-band); display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem; flex-wrap:wrap}
.app-bar .dots{display:flex; gap:5px} .app-bar .dots i{width:9px; height:9px; border-radius:50%; background:var(--on-band-muted); opacity:.5}
.app-bar strong{font:500 .9rem/1 var(--f-display)}
.app-bar .date{margin-left:auto; font-family:var(--f-data); font-size:.75rem; color:var(--on-band-muted)}
.app-tabs{display:flex; gap:.15rem; background:var(--band-2); padding:0 .6rem; overflow-x:auto}
.app-tabs span{color:var(--on-band-muted); padding:.45rem .55rem; font-size:.74rem; white-space:nowrap}
.app-tabs span.on{color:var(--on-band); box-shadow:inset 0 -2px 0 var(--orange)}
.tiles{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.5rem; padding:.75rem; background:var(--sunk)}
.tile{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.45rem .5rem; text-align:center; transition:box-shadow .3s}
.tile small{display:block; color:var(--muted); font-size:.68rem; line-height:1.2}
.tile b{font:600 1.35rem/1.3 var(--f-data); font-variant-numeric:tabular-nums}
.tile.flash{box-shadow:0 0 0 2px var(--orange)}
@media (max-width:560px){ .tiles{grid-template-columns:repeat(3,minmax(0,1fr))} .tile:nth-child(n+4){display:none} }
.panels{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; padding:0 .75rem .75rem; background:var(--sunk)}
@media (max-width:760px){ .panels{grid-template-columns:minmax(0,1fr)} }
.panel{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.6rem; min-width:0; min-height:13.5rem; transition:box-shadow .3s}
.panel.spot{box-shadow:0 0 0 2px var(--orange)}
#listPend,#listIn,#listMail{max-height:15.5rem; overflow:auto; padding-right:2px}
.panel h4{margin:0 0 .45rem; font:600 .86rem/1.2 var(--f-body); display:flex; align-items:center; gap:.4rem; border-bottom:1px solid var(--line); padding-bottom:.4rem}
.panel h4 .count{font-family:var(--f-data); color:var(--muted); font-weight:400}
.ptabs{display:flex; gap:.3rem; margin-left:auto}
.ptabs button{font:600 .68rem/1 var(--f-body); border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:99px; padding:.3em .6em; cursor:pointer}
.ptabs button[aria-selected="true"]{background:var(--orange); border-color:var(--orange); color:var(--orange-ink)}
.bk{border:1px solid var(--line); border-radius:7px; padding:.45rem .5rem; margin-bottom:.4rem; display:grid; gap:.15rem; animation:pop .35s ease}
@keyframes pop{from{transform:scale(.97); opacity:.4}}
.bk .who{display:flex; justify-content:space-between; gap:.4rem; font-weight:600}
.bk .who .mono{color:var(--muted); font-weight:400; font-size:.72rem}
.bk .meta{color:var(--muted); font-size:.74rem}
.bk .acts{display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; margin-top:.2rem}
.bk.done{opacity:.55}
.pill{display:inline-block; font:600 .66rem/1 var(--f-body); padding:.3em .6em; border-radius:99px; white-space:nowrap}
.pill.due{background:var(--due-soft); color:var(--due)} .pill.paid{background:var(--paid-soft); color:var(--paid)}
.pill.pend{background:var(--orange-soft); color:var(--orange)} .pill.in{background:var(--sunk); color:var(--navy)}
.mini{font:600 .7rem/1 var(--f-body); border-radius:99px; padding:.38em .7em; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.mini.go{background:var(--orange); border-color:var(--orange); color:var(--orange-ink)}
.mini:disabled{opacity:.5; cursor:default}
.log{list-style:none; margin:0; padding:0; display:grid; gap:.35rem; max-height:11.5rem; overflow:auto}
.log li{display:grid; grid-template-columns:auto 1fr; gap:.5rem; font-size:.74rem; animation:pop .35s ease}
.log time{font-family:var(--f-data); color:var(--muted)}
.empty{color:var(--muted); font-size:.76rem; padding:.6rem 0}
.mail{border-left:3px solid var(--navy); padding:.35rem .5rem; margin-bottom:.4rem; background:var(--sunk); border-radius:0 6px 6px 0}
.mail b{display:block; font-size:.74rem} .mail span{font-size:.72rem; color:var(--muted)}
.toast{position:absolute; left:50%; bottom:.8rem; transform:translate(-50%,140%); background:var(--ink); color:var(--paper); padding:.55rem .9rem; border-radius:8px; font-size:.8rem; max-width:90%; box-shadow:var(--shadow); transition:transform .3s; pointer-events:none}
.toast.show{transform:translate(-50%,0)}

/* day player */
.day{margin-top:1rem; display:grid; gap:.6rem}
.day-head{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.day-head p{font-size:.92rem; color:var(--muted)}
.day-steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.4rem; list-style:none; margin:0; padding:0}
.day-steps button{width:100%; text-align:left; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:8px; padding:.5rem .55rem; cursor:pointer; font:inherit; font-size:.78rem; line-height:1.25; display:grid; gap:.15rem}
.day-steps button time{font:600 .8rem/1 var(--f-data); color:var(--orange)}
.day-steps button[aria-current="step"]{border-color:var(--orange); box-shadow:0 0 0 1px var(--orange)}
@media (max-width:620px){ .day-steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
.caption{min-height:3em; font-size:.92rem; background:var(--card); border:1px dashed var(--line); border-radius:8px; padding:.6rem .8rem}
.caption b{color:var(--orange)}

/* sections */
section{padding-block:clamp(3.5rem,8vw,6rem)}
.sec-head{display:grid; gap:.8rem; margin-bottom:2.25rem; max-width:760px}
.band{background:var(--band); color:var(--on-band)}
.band .lede{color:var(--on-band-muted)}
.band .eyebrow{color:#ffb08f}

/* pains */
.pains{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media (max-width:860px){ .pains{grid-template-columns:minmax(0,1fr)} }
.pain{background:var(--card); padding:1.4rem; display:grid; gap:.5rem; align-content:start}
.pain .before{font-size:.9rem; color:var(--muted); text-decoration:line-through; text-decoration-color:var(--orange)}
.pain h3{font-size:1rem}
.pain p{font-size:.95rem; color:var(--muted)}

/* feature explorer */
.fx{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:1.5rem; align-items:start}
@media (max-width:860px){ .fx{grid-template-columns:minmax(0,1fr)} }
.fx-list{display:grid; gap:.3rem}
@media (max-width:860px){ .fx-list{display:flex; overflow-x:auto; padding-bottom:.3rem} }
.fx-list button{all:unset; box-sizing:border-box; cursor:pointer; padding:.75rem .9rem; border-radius:8px; color:var(--on-band-muted); display:grid; gap:.15rem; white-space:nowrap}
.fx-list button b{font-weight:600; color:var(--on-band)}
.fx-list button small{font-size:.8rem; white-space:normal}
@media (max-width:860px){ .fx-list button small{display:none} }
.fx-list button[aria-selected="true"]{background:var(--band-2); box-shadow:inset 3px 0 0 var(--orange)}
.fx-list button:focus-visible{outline:3px solid var(--orange)}
.fx-stage{background:var(--card); color:var(--ink); border-radius:12px; padding:1.1rem; min-height:24rem; min-width:0; box-shadow:var(--shadow)}
.fx-stage h3{margin-bottom:.25rem} .fx-stage > div > p.sub{color:var(--muted); font-size:.92rem; margin-bottom:1rem; max-width:62ch}
.tbl-wrap{overflow-x:auto}
table.t{border-collapse:collapse; width:100%; font-size:.85rem; min-width:560px}
table.t th{text-align:left; font-weight:600; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--line); padding:.45rem .4rem}
table.t td{border-bottom:1px dashed var(--line); padding:.5rem .4rem; vertical-align:top}
table.t td.mono{font-size:.8rem}
.switch{display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; cursor:pointer; margin-bottom:.8rem}
.switch input{appearance:none; width:2.4rem; height:1.3rem; border-radius:99px; background:var(--line); position:relative; cursor:pointer; transition:background .2s; margin:0}
.switch input::after{content:""; position:absolute; top:2px; left:2px; width:calc(1.3rem - 4px); height:calc(1.3rem - 4px); border-radius:50%; background:var(--card); transition:left .2s}
.switch input:checked{background:var(--orange)} .switch input:checked::after{left:calc(100% - 1.3rem + 2px)}
.mailx{display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:1rem}
@media (max-width:640px){ .mailx{grid-template-columns:minmax(0,1fr)} }
.tpl{display:grid; gap:.2rem; font-size:.85rem}
.tpl button{all:unset; cursor:pointer; padding:.4rem .5rem; border-radius:6px; border-bottom:1px dashed var(--line)}
.tpl button[aria-pressed="true"]{background:var(--orange-soft); color:var(--ink); font-weight:600}
.tpl .grp{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-top:.3rem}
.letter{border:1px solid var(--line); border-radius:8px; padding:1rem; font-size:.9rem; display:grid; gap:.7rem; background:var(--paper)}
.letter .subj{font-weight:600; border-bottom:1px solid var(--line); padding-bottom:.5rem}
.tag{font-family:var(--f-data); font-size:.8em; background:var(--due-soft); color:var(--due); padding:.05em .3em; border-radius:4px}
.fill{background:var(--paid-soft); color:var(--paid); padding:.05em .3em; border-radius:4px; font-weight:600}
.portal{display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.5rem; align-items:center}
@media (max-width:640px){ .portal{grid-template-columns:minmax(0,1fr)} .phone{margin:0 auto} }
.phone{width:min(250px,100%); border:8px solid var(--ink); border-radius:30px; padding:1rem .8rem; background:var(--paper); min-height:420px; display:flex; flex-direction:column; gap:.7rem; font-size:.82rem}
.phone .ph-top{font:600 .8rem/1.2 var(--f-body); color:var(--navy); display:flex; align-items:center; gap:.4rem}
.phone .steps{display:flex; gap:.3rem} .phone .steps i{flex:1; height:4px; border-radius:2px; background:var(--line)} .phone .steps i.on{background:var(--orange)}
.phone label{display:grid; gap:.2rem; font-size:.75rem; color:var(--muted)}
.phone input,.phone select{font:inherit; font-size:.85rem; padding:.45rem .5rem; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--ink)}
.drop{border:1.5px dashed var(--line); border-radius:8px; padding:1rem .6rem; text-align:center; color:var(--muted)}
.bar{height:6px; background:var(--line); border-radius:3px; overflow:hidden} .bar i{display:block; height:100%; background:var(--paid); width:0; transition:width 1s}
.portal ul{margin:0; padding-left:1.1rem; display:grid; gap:.45rem; color:var(--muted); font-size:.95rem}
.portal ul b{color:var(--ink)}
.roster{display:grid; grid-template-columns:minmax(6.5rem,auto) repeat(7,minmax(2.4rem,1fr)); gap:3px; font-size:.8rem; min-width:480px}
.roster .h{font-weight:600; color:var(--muted); text-align:center; font-size:.72rem; padding:.2rem}
.roster .n{padding:.4rem .3rem; font-weight:500}
.roster button{border:1px solid var(--line); background:var(--sunk); border-radius:5px; cursor:pointer; min-height:2rem; color:transparent; font:inherit}
.roster button[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:var(--paper)}
.wages{display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1rem; font-size:.9rem; color:var(--muted)}
.wages b{display:block; font:600 1.3rem/1.2 var(--f-data); color:var(--ink)}
.stock{display:grid; gap:.65rem}
.stock .row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto; gap:.8rem; align-items:center; font-size:.88rem}
@media (max-width:520px){ .stock .row{grid-template-columns:minmax(0,1fr) auto} .stock .row .lvl{grid-column:1/-1; order:3} }
.lvl{height:10px; border-radius:5px; background:var(--sunk); overflow:hidden} .lvl i{display:block; height:100%; background:var(--paid)}
.lvl.low i{background:var(--alert)}
.occ{display:grid; grid-template-columns:2.2rem minmax(0,1fr); gap:.4rem}
.occ-axis{display:flex; flex-direction:column; justify-content:space-between; font:400 .7rem/1 var(--f-data); color:var(--muted); text-align:right; height:200px}
.occ-bars{display:flex; align-items:flex-end; gap:4px; height:200px; border-left:1px solid var(--line); border-bottom:1px solid var(--line); padding-left:4px; position:relative;
  background:repeating-linear-gradient(to top, transparent 0 49px, var(--line) 49px 50px)}
.occ-bars div{flex:1; background:var(--navy); border-radius:3px 3px 0 0; position:relative; min-width:0; cursor:default}
.occ-bars div.wk{background:var(--orange)}
.occ-bars div:hover::after{content:attr(data-tip); position:absolute; bottom:100%; left:50%; transform:translate(-50%,-6px); background:var(--ink); color:var(--paper); font:500 .7rem/1.2 var(--f-data); padding:.3rem .4rem; border-radius:4px; white-space:nowrap; z-index:2}
.occ-x{display:flex; gap:4px; padding-left:calc(2.2rem + .4rem + 5px); font:400 .66rem/1 var(--f-data); color:var(--muted); margin-top:.3rem}
.occ-x span{flex:1; text-align:center; min-width:0}
.legend{display:flex; gap:1rem; font-size:.8rem; color:var(--muted); margin-top:.8rem; flex-wrap:wrap}
.legend i{display:inline-block; width:.8em; height:.8em; border-radius:2px; margin-right:.35em; vertical-align:-.05em}

/* modules */
.mods{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:2.5rem}
@media (max-width:860px){ .mods{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:440px){ .mods{grid-template-columns:minmax(0,1fr)} }
.mod{border-top:2px solid var(--on-band-muted); padding-top:.8rem; display:grid; gap:.3rem}
.mod b{font:500 1rem/1.2 var(--f-display)} .mod p{font-size:.9rem; color:var(--on-band-muted)}

/* compare */
.compare{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.compare table{border-collapse:collapse; width:100%; min-width:560px; font-size:.95rem}
.compare th,.compare td{padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line)}
.compare tr:last-child td{border-bottom:0}
.compare thead th{font:500 .9rem/1.2 var(--f-display)}
.compare thead th:nth-child(2){color:var(--orange)}
.compare td:nth-child(2){font-weight:600}
.compare td:nth-child(3){color:var(--muted)}
.yes{color:var(--paid); font-weight:700} .no{color:var(--muted)}

/* calculator + pricing */
.calc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.5rem; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:clamp(1.1rem,3vw,2rem); margin-bottom:2.5rem}
@media (max-width:860px){ .calc{grid-template-columns:minmax(0,1fr)} }
.field{display:grid; gap:.35rem; margin-bottom:1.1rem}
.field label{display:flex; justify-content:space-between; gap:1rem; font-weight:600; font-size:.95rem}
.field output{font-family:var(--f-data); color:var(--orange)}
input[type=range]{width:100%; accent-color:var(--orange)}
.field small{color:var(--muted); font-size:.8rem}
.result{background:var(--band); color:var(--on-band); border-radius:12px; padding:1.4rem; display:grid; gap:1rem; align-content:start}
.result .big{font:700 clamp(2rem,5vw,3rem)/1 var(--f-display)}
.result .big small{font:500 1rem/1 var(--f-body); color:var(--on-band-muted)}
.result .row2{display:grid; grid-template-columns:1fr 1fr; gap:1rem; border-top:1px solid rgb(255 255 255 / .15); padding-top:1rem}
.result .row2 b{display:block; font:600 1.35rem/1.2 var(--f-data)}
.result .row2 span{font-size:.82rem; color:var(--on-band-muted)}
.result p.fine{color:var(--on-band-muted)}

.price-ctl{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-bottom:1.25rem}
.seg{display:inline-flex; background:var(--sunk); border-radius:99px; padding:4px}
.seg button{border:0; background:transparent; color:var(--muted); font:600 .9rem/1 var(--f-body); padding:.6em 1em; border-radius:99px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}
.seg .save{color:var(--paid); font-size:.75rem; margin-left:.3em}
select.cur{font:600 .9rem/1 var(--f-body); padding:.6em .8em; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; align-items:stretch}
@media (max-width:900px){ .plans{grid-template-columns:minmax(0,1fr)} }
.plan{background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; position:relative; transition:border-color .2s, transform .2s}
.plan.rec{border-color:var(--orange); transform:translateY(-4px)}
.plan .badge{position:absolute; top:-.75rem; left:1.5rem; background:var(--orange); color:var(--orange-ink); font:600 .72rem/1 var(--f-body); padding:.4em .8em; border-radius:99px; letter-spacing:.06em; text-transform:uppercase}
.plan .badge[hidden]{display:none}
.plan h3{font-size:1.25rem; font-weight:700}
.plan .alias{font-size:.85rem; color:var(--muted)}
.plan .amt{font:700 2.4rem/1 var(--f-display); font-variant-numeric:tabular-nums}
.plan .amt small{font:500 .95rem/1 var(--f-body); color:var(--muted)}
.plan .billed{font-size:.82rem; color:var(--muted); min-height:1.2em}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.93rem; flex:1; align-content:start}
.plan li{display:grid; grid-template-columns:1.1rem 1fr; gap:.5rem}
.plan li::before{content:"✓"; color:var(--paid); font-weight:700}
.plan .units{font-family:var(--f-data); font-size:.85rem; background:var(--sunk); border-radius:6px; padding:.45rem .6rem}
.all-plans{margin-top:1.25rem; font-size:.92rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:.4rem 1.5rem}
.all-plans span::before{content:"✓ "; color:var(--paid); font-weight:700}

/* website bundle */
.bundle{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
@media (max-width:860px){ .bundle{grid-template-columns:minmax(0,1fr)} }
.browser{border-radius:12px; overflow:hidden; border:1px solid rgb(255 255 255 / .18); background:#fbf8f3; color:#2b2420; box-shadow:0 20px 50px rgb(0 0 0 / .3)}
.browser .bar2{background:#e9e4dc; display:flex; gap:.4rem; align-items:center; padding:.5rem .7rem; font:400 .72rem/1 var(--f-data); color:#6b625a}
.browser .bar2 i{width:9px; height:9px; border-radius:50%; background:#c9c1b6}
.browser .bar2 span{margin-left:.5rem; background:#fff; padding:.3rem .6rem; border-radius:99px; flex:1}
.browser .site{padding:1.4rem; display:grid; gap:.7rem}
.browser .site small{font:600 .68rem/1 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:#a0522d}
.browser .site b{font:700 1.25rem/1.2 Georgia, serif}
.browser .site .rooms{display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem}
.browser .site .rooms div{background:#efe8dd; border-radius:6px; padding:.5rem; font-size:.7rem; line-height:1.3}
.browser .site .bookbtn{justify-self:start; background:#a0522d; color:#fff; font:600 .75rem/1 var(--f-body); padding:.55rem .9rem; border-radius:99px}
.browser .site .flow{display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:#6b625a; border-top:1px dashed #d8cfc2; padding-top:.6rem; flex-wrap:wrap}
.browser .site .flow em{font-style:normal; background:#2b3a68; color:#fff; padding:.2rem .45rem; border-radius:4px}
.checks{list-style:none; margin:1.2rem 0 1.5rem; padding:0; display:grid; gap:.6rem}
.checks li{display:grid; grid-template-columns:1.4rem 1fr; gap:.5rem; color:var(--on-band-muted)}
.checks li::before{content:"✓"; color:#ffb08f; font-weight:700}
.checks b{color:var(--on-band)}

/* website only */
.webonly{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:center}
@media (max-width:860px){ .webonly{grid-template-columns:minmax(0,1fr)} }
.webonly-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media (max-width:520px){ .webonly-list{grid-template-columns:minmax(0,1fr)} }
.webonly-list li{background:var(--card); padding:1.2rem; display:grid; gap:.35rem; align-content:start}
.webonly-list b{font:500 1rem/1.2 var(--f-display)} .webonly-list span{font-size:.93rem; color:var(--muted)}

/* story */
.story{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:clamp(1.5rem,4vw,4rem)}
@media (max-width:860px){ .story{grid-template-columns:minmax(0,1fr)} }
.story-intro{display:grid; gap:1rem; align-content:start}
.story blockquote{margin:0; font:500 1.2rem/1.45 var(--f-body); border-left:3px solid var(--orange); padding-left:1rem}
.tl{list-style:none; margin:0; padding:0; position:relative; display:grid; gap:1.6rem}
.tl::before{content:""; position:absolute; left:.45rem; top:.5rem; bottom:.5rem; width:2px; background:var(--line)}
.tl li{display:grid; grid-template-columns:1rem minmax(0,1fr); gap:1rem}
.tl li::before{content:""; width:.95rem; height:.95rem; border-radius:50%; background:var(--paper); border:3px solid var(--navy); margin-top:.3rem; position:relative}
.tl li:last-child::before{border-color:var(--orange); background:var(--orange)}
.tl time{font:600 .85rem/1 var(--f-data); color:var(--orange)}
.tl h3{margin:.3rem 0 .35rem}
.tl p{color:var(--muted); font-size:.97rem}
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:.5rem}
.stats div{border-top:1px solid var(--line); padding-top:.6rem}
.stats b{display:block; font:700 1.5rem/1.1 var(--f-display); color:var(--navy)}
.stats span{font-size:.82rem; color:var(--muted)}

/* setup */
.setup{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; counter-reset:s}
@media (max-width:860px){ .setup{grid-template-columns:minmax(0,1fr)} }
.setup li{list-style:none; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.2rem; display:grid; gap:.4rem; align-content:start; counter-increment:s}
.setup li::before{content:"Step " counter(s); font:600 .75rem/1 var(--f-data); color:var(--orange); letter-spacing:.06em}
.setup ol{margin:0; padding:0; display:contents}
.setup p{font-size:.93rem; color:var(--muted)}
.whiteglove{margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; background:var(--orange-soft); border-radius:var(--r); padding:1rem 1.25rem}
.whiteglove p{max-width:70ch}

/* faq */
.faq{display:grid; gap:.6rem; max-width:860px}
.faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:0 1.2rem}
.faq summary{cursor:pointer; padding:1rem 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:500 1.3rem/1 var(--f-data); color:var(--orange); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1rem; color:var(--muted); max-width:70ch}

/* final cta + footer */
.final{text-align:left}
.final .wrap{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:2rem; align-items:center}
@media (max-width:860px){ .final .wrap{grid-template-columns:minmax(0,1fr)} }
.final .btn-ghost{color:var(--on-band)}
footer{padding-block:3rem 2rem; font-size:.9rem; color:var(--muted)}
.foot{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:2rem}
@media (max-width:760px){ .foot{grid-template-columns:repeat(2,minmax(0,1fr))} .foot > div:first-child{grid-column:1/-1} }
.foot h4{font:600 .78rem/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin:0 0 .8rem}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.foot a{text-decoration:none} .foot a:hover{color:var(--ink)}
.copy-btn{font:600 .75rem/1 var(--f-body); border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:99px; padding:.3em .6em; cursor:pointer; margin-left:.3rem}
.legal{border-top:1px solid var(--line); margin-top:0; padding-top:1.25rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.82rem}

/* ===================== multi-page additions ===================== */
/* nav: dropdown + mobile panel */
.nav-links{display:flex; align-items:center; gap:1.3rem; list-style:none; margin:0 0 0 auto; padding:0; font-weight:500; font-size:.95rem}
.nav-links a{text-decoration:none; color:var(--muted)} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--orange)}
.dd{position:relative}
.dd summary{list-style:none; cursor:pointer; color:var(--muted); display:flex; align-items:center; gap:.3rem}
.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:""; width:.45em; height:.45em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px)}
.dd[open] summary{color:var(--ink)}
.dd-menu{position:absolute; top:calc(100% + .8rem); left:-1rem; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:.5rem; display:grid; min-width:17rem; z-index:30}
.dd-menu a{padding:.6rem .75rem; border-radius:8px; display:grid; gap:.1rem; color:var(--ink)!important}
.dd-menu a small{color:var(--muted); font-weight:400; font-size:.8rem}
.dd-menu a:hover{background:var(--sunk)}
.menu-btn{display:none; margin-left:auto; background:transparent; border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:.45rem .6rem; cursor:pointer; font:600 .9rem/1 var(--f-body)}
.nav-cta{display:flex; align-items:center; gap:1.1rem}
@media (max-width:1060px){
  .menu-btn{display:inline-flex}
  .nav{flex-wrap:wrap}
  .nav-links,.nav-cta{display:none; width:100%}
  .nav.open .nav-links{display:grid; gap:.2rem; margin:0; padding:.5rem 0}
  .nav.open .nav-cta{display:flex; padding-bottom:.8rem}
  .nav-links a,.dd summary{padding:.6rem 0; font-size:1.05rem}
  .dd-menu{position:static; box-shadow:none; border:0; padding:0 0 0 .8rem; min-width:0; background:transparent}
}
.nav .login{font-weight:600; text-decoration:none; font-size:.95rem}

/* page hero for inner pages */
.page-hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,2.5rem)}
.page-hero .wrap{display:grid; gap:1.1rem}
.page-hero h1{max-width:20ch}
.page-hero .lede{max-width:62ch}
.crumbs{font-size:.85rem; color:var(--muted); display:flex; gap:.4rem; flex-wrap:wrap}
.crumbs a{text-decoration:none} .crumbs a:hover{color:var(--ink)}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:center}
@media (max-width:900px){ .split{grid-template-columns:minmax(0,1fr)} }

/* feature category grid */
.fgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
@media (max-width:1000px){ .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .fgrid{grid-template-columns:minmax(0,1fr)} }
.fcard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.4rem; display:grid; gap:.7rem; align-content:start}
.fcard h3{font-size:1.05rem}
.fcard > p{color:var(--muted); font-size:.95rem}
.fcard ul{margin:0; padding:0; list-style:none; display:grid; gap:.45rem; font-size:.93rem}
.fcard li{display:grid; grid-template-columns:1rem 1fr; gap:.5rem}
.fcard li::before{content:"✓"; color:var(--paid); font-weight:700}
.tag-line{font:600 .72rem/1 var(--f-data); color:var(--orange); letter-spacing:.06em; text-transform:uppercase}

/* audience cards */
.aud{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
@media (max-width:1000px){ .aud{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .aud{grid-template-columns:minmax(0,1fr)} }
.aud a{display:grid; gap:.5rem; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.3rem; transition:border-color .2s, transform .2s}
.aud a:hover{border-color:var(--orange); transform:translateY(-2px)}
.aud b{font:500 1.05rem/1.2 var(--f-display)} .aud span{color:var(--muted); font-size:.92rem} .aud em{font-style:normal; color:var(--orange); font-weight:600; font-size:.9rem}
.band .aud a{background:var(--band-2); border-color:transparent; color:var(--on-band)} .band .aud span{color:var(--on-band-muted)}

/* included table */
.inc{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--card)}
.inc table{border-collapse:collapse; width:100%; min-width:620px; font-size:.95rem}
.inc th,.inc td{padding:.75rem 1rem; border-bottom:1px solid var(--line); text-align:left}
.inc thead th{font:500 .95rem/1.2 var(--f-display)}
.inc td:not(:first-child),.inc th:not(:first-child){text-align:center}
.inc tr.grp td{background:var(--sunk); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.inc .y{color:var(--paid); font-weight:700}

/* steps row (real sequence) */
.flow4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; counter-reset:f; list-style:none; margin:0; padding:0}
@media (max-width:900px){ .flow4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .flow4{grid-template-columns:minmax(0,1fr)} }
.flow4 li{counter-increment:f; border-top:2px solid var(--orange); padding-top:.9rem; display:grid; gap:.35rem}
.flow4 li::before{content:counter(f, decimal-leading-zero); font:600 .8rem/1 var(--f-data); color:var(--orange)}
.flow4 p{color:var(--muted); font-size:.93rem}
.band .flow4 p{color:var(--on-band-muted)}

/* values */
.values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem}
@media (max-width:860px){ .values{grid-template-columns:minmax(0,1fr)} }
.values div{display:grid; gap:.4rem} .values p{color:var(--muted)}
.band .values p{color:var(--on-band-muted)}

/* faq groups */
.faq-groups{display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:2rem; align-items:start}
@media (max-width:860px){ .faq-groups{grid-template-columns:minmax(0,1fr)} .faq-toc{display:none} }
.faq-toc{position:sticky; top:calc(env(safe-area-inset-top,0px) + 6rem); display:grid; gap:.4rem; font-size:.95rem}
.faq-toc a{text-decoration:none; color:var(--muted)} .faq-toc a:hover{color:var(--ink)}
.faq-group{display:grid; gap:.8rem; margin-bottom:2.5rem; scroll-margin-top:6rem}
.faq-group h2{font-size:1.3rem}

/* contact */
.contact{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:start}
@media (max-width:900px){ .contact{grid-template-columns:minmax(0,1fr)} }
.form{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:clamp(1.1rem,3vw,2rem); display:grid; gap:1rem}
.form .row2f{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media (max-width:520px){ .form .row2f{grid-template-columns:minmax(0,1fr)} }
.form label{display:grid; gap:.35rem; font-weight:600; font-size:.92rem}
.form input,.form select,.form textarea{font:inherit; font-weight:400; padding:.7rem .8rem; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); width:100%}
.form textarea{min-height:8rem; resize:vertical}
.form .hint{font-size:.85rem; color:var(--muted)}
.form .ok{background:var(--paid-soft); color:var(--paid); border-radius:8px; padding:.8rem 1rem; font-weight:600}
.cinfo{display:grid; gap:1.25rem}
.cinfo div{border-top:1px solid var(--line); padding-top:1rem; display:grid; gap:.3rem}
.cinfo b{font:500 1rem/1.2 var(--f-display)} .cinfo p{color:var(--muted)}

/* prose (legal) */
.prose{max-width:72ch; display:grid; gap:1rem}
.prose h2{font-size:1.2rem; margin-top:1rem}
.prose p{color:var(--ink)}
.note{font-size:.9rem; color:var(--muted); border-left:3px solid var(--orange); padding-left:1rem}

/* 404 */
.nf{padding-block:clamp(4rem,12vw,8rem); text-align:left}
.nf .code{font:700 clamp(4rem,14vw,9rem)/1 var(--f-display); color:var(--orange)}
.demo-note{font-size:.8rem; color:var(--muted)}
.skip{position:absolute; left:-999px; top:0; background:var(--orange); color:var(--orange-ink); padding:.6rem 1rem; z-index:50; border-radius:0 0 8px 0}
.skip:focus{left:0}

.band .fcard{color:var(--ink)}

/* region switch in the footer */
.region{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;padding:1rem 0;border-top:1px solid var(--line);font-size:.85rem}
.region span{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.region a{color:inherit;text-decoration:none;padding:.25rem .7rem;border-radius:999px;border:1px solid var(--line)}
.region a[aria-current]{border-color:var(--orange);color:var(--orange);font-weight:600}
.region a:hover{border-color:currentColor}