:root{
  --bg:#FFFFFF; --bg2:#E0EAFD; --ink:#131C45; --soft:#4A5580; --card:#FFFFFF; --line:#C8D6FB;
  --blue:#4260D4; --blue-deep:#2F49B5; --peri:#9EB8F9; --lime:#E0F264; --navy:#131C45; --err:#B3261E;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#0D1433; --bg2:#141D47; --ink:#EEF2FF; --soft:#AEB9E6; --card:#1A2557; --line:#2E3C7E; --err:#FF8A80}
}
:root[data-theme="dark"]{--bg:#0D1433; --bg2:#141D47; --ink:#EEF2FF; --soft:#AEB9E6; --card:#1A2557; --line:#2E3C7E; --err:#FF8A80}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(1rem + env(safe-area-inset-top,0px))}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Red Hat Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:1.0625rem; line-height:1.55}
h1,h2,h3{font-family:"Red Hat Display","Red Hat Text",system-ui,sans-serif; margin:0; letter-spacing:-0.02em}
h1{font-size:clamp(2.3rem,4.6vw,3.6rem); font-weight:800; line-height:1.06}
h2{font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:800; line-height:1.1}
h3{font-size:1.2rem; font-weight:700; line-height:1.25}
p{margin:0} a{color:inherit}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px}
.wrap{max-width:74rem; margin:0 auto; padding:0 1.25rem}
.soft{color:var(--soft)}
.btn{display:inline-flex; align-items:center; justify-content:center; font:inherit; font-weight:600; cursor:pointer; text-decoration:none;
  background:var(--blue); color:#fff; border:2px solid var(--blue); padding:.8rem 1.5rem; border-radius:.8rem}
.btn:hover{background:var(--blue-deep); border-color:var(--blue-deep)}
.btn.ghost{background:transparent; color:var(--blue)}
:root[data-theme="dark"] .btn.ghost{color:var(--peri)}
.btn.lime{background:var(--lime); border-color:var(--lime); color:var(--navy)}

.nav{display:flex; align-items:center; justify-content:space-between; padding-block:1.1rem}
.brand{display:flex; align-items:center; gap:.6rem; font-family:"Red Hat Display",sans-serif; font-weight:800; font-size:1.25rem; text-decoration:none}
.brand svg{width:2.3rem; height:2.3rem}
.nav ul{display:flex; gap:2rem; list-style:none; margin:0; padding:0; font-weight:500}
.nav ul a{text-decoration:none}
.nav ul a:hover{color:var(--blue)}
.nav .btn{padding:.55rem 1.1rem; white-space:nowrap}

.hero{display:grid; grid-template-columns:5fr 7fr; gap:2rem; align-items:center; padding-block:1.5rem 4rem}
.hero .lede{font-size:1.2rem; color:var(--soft); margin-top:1.3rem; max-width:30rem}
.hero .actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; align-items:center}
.hint{display:flex; align-items:center; gap:.5rem; margin-top:1.4rem; font-size:.95rem; color:var(--soft)}
.hint i{width:.7rem; height:.7rem; border-radius:50%; background:var(--lime); border:2px solid var(--blue); flex:none}

/* The tech map: the one loud element. Lines fan out from the restaurant to every system it might run. */
.map{position:relative; aspect-ratio:1/1; max-width:40rem; width:100%; margin-left:auto}
.rays{position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform-origin:50% 50%; animation:grow 1s cubic-bezier(.2,.7,.2,1) both}
.rays line{stroke:var(--peri); stroke-width:1.5; vector-effect:non-scaling-stroke; transition:stroke .2s,stroke-width .2s}
.rays line.faint{stroke-width:1; opacity:.45}
.rays line.on{stroke:var(--blue); stroke-width:3.5}
.whisper{position:absolute; transform:translate(-50%,-50%); font-size:.78rem; color:var(--soft); white-space:nowrap; background:var(--bg); padding:0 .35rem; animation:fade .6s .9s both}
.hub{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:7.2rem; height:7.2rem; border-radius:2rem; background:var(--lime); color:var(--navy);
  display:grid; place-items:center; align-content:center; gap:.1rem; text-align:center; font-size:.72rem; font-weight:600; line-height:1.1; box-shadow:0 14px 30px -12px rgba(47,73,181,.55)}
.hub svg{width:3.4rem; height:3.4rem}
.pill{position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:.45rem; white-space:nowrap; cursor:pointer;
  font:inherit; font-weight:600; font-size:.95rem; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:999px; padding:.3rem .95rem .3rem .35rem;
  animation:pop .45s both; animation-delay:var(--d,0s); transition:background .15s,border-color .15s}
.pill svg{width:2rem; height:2rem; flex:none}
.pill:hover{border-color:var(--blue)}
.pill[aria-pressed="true"]{background:var(--lime); border-color:var(--navy); color:var(--navy)}
@keyframes grow{from{transform:scale(0)}}
@keyframes pop{from{opacity:0; transform:translate(-50%,-50%) scale(.7)}}
@keyframes fade{from{opacity:0}}

.band{display:block; width:100%; height:clamp(90px,14vw,200px)}
.tint{background:var(--bg2)}
section{padding:4.5rem 0}
.tint.first{padding-top:0}
.tint.first .wrap{padding-top:3rem}
.intro{max-width:38rem; margin-top:1rem; color:var(--soft)}

.cards{display:grid; gap:1.2rem; margin-top:2.5rem}
.cards.three{grid-template-columns:repeat(3,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cardx{background:var(--card); border-radius:1.4rem; padding:1.6rem 1.5rem 1.7rem}
.cardx svg{width:4.6rem; height:4.6rem; display:block; margin-bottom:1rem}
.cardx p{margin-top:.4rem; color:var(--soft); font-size:1rem}
.on-white .cardx{background:var(--bg2)}

.match{display:grid; grid-template-columns:5fr 6fr; gap:3.5rem; align-items:start}
.steps{list-style:none; counter-reset:s; padding:0; margin:2.2rem 0 0; display:grid; gap:1.6rem}
.steps li{counter-increment:s; display:grid; grid-template-columns:2.6rem 1fr; gap:1rem}
.steps li::before{content:counter(s); width:2.6rem; height:2.6rem; border-radius:.8rem; background:var(--lime); color:var(--navy); display:grid; place-items:center; font-family:"Red Hat Display",sans-serif; font-weight:800; font-size:1.15rem}
.steps p{color:var(--soft); margin-top:.2rem}
form{background:var(--card); border:2px solid var(--line); border-radius:1.6rem; padding:1.8rem}
fieldset{border:0; padding:0; margin:0 0 1.4rem}
legend{font-weight:600; padding:0; margin-bottom:.7rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{position:relative}
.chip input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.chip span{display:block; border:2px solid var(--line); border-radius:999px; padding:.35rem .9rem; font-weight:500; font-size:.95rem}
.chip input:checked + span{background:var(--lime); border-color:var(--navy); color:var(--navy)}
.chip input:focus-visible + span{outline:3px solid var(--blue); outline-offset:2px}
.field{display:block; margin-bottom:1rem}
.field > span{display:block; font-size:.9rem; font-weight:600; margin-bottom:.3rem}
.field input,.field select,.field textarea{width:100%; font:inherit; color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:.8rem; padding:.65rem .8rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue); outline:none}
.field textarea{resize:vertical; min-height:4.2rem}
.two{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem}
.hp{position:absolute; left:-9999px}
form .btn{width:100%}
.fine{font-size:.82rem; margin-top:.9rem; color:var(--soft)}
.status{margin-top:.9rem; font-weight:600}
.status:empty{display:none}
.status.err{color:var(--err)}

.money{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start}
.money .plain{background:var(--card); border-radius:1.4rem; padding:1.8rem}
.money .plain p + p{margin-top:1rem}
.faq{max-width:46rem; margin-top:2rem}
.faq details{border-bottom:2px solid var(--line); padding:1.1rem 0}
.faq summary{cursor:pointer; font-weight:600; font-size:1.1rem}
.faq details p{margin-top:.6rem; color:var(--soft)}

.closer{background:var(--navy); color:#fff; padding:0 0 5rem}
.closer .wrap{padding-top:1rem}
.closer h2{max-width:34rem}
.closer .btn{margin-top:1.8rem}
footer{background:var(--navy); color:#C5CEF2; padding:2rem 0 3rem; font-size:.92rem; border-top:1px solid #2A356B}
footer details{margin-top:1rem; max-width:46rem}
footer summary{cursor:pointer; color:#fff; font-weight:500}
footer details p{margin-top:.6rem}

@media (max-width:920px){
  .hero,.match,.money{grid-template-columns:1fr}
  .hero{gap:2.5rem; padding-block-end:3rem}
  .map{margin:0 auto}
  .cards.three{grid-template-columns:1fr}
  .cards.four{grid-template-columns:1fr 1fr}
  .nav ul{display:none}
}
@media (max-width:600px){
  .brand{font-size:1.05rem; gap:.45rem} .brand svg{width:1.9rem; height:1.9rem} .nav .btn{padding:.45rem .8rem; font-size:.9rem}
  .map{aspect-ratio:4/5}
  .pill{font-size:.8rem; padding:.4rem .7rem}
  .pill svg,.whisper,.rays line.faint{display:none}
  .hub{width:5.6rem; height:5.6rem; border-radius:1.5rem; font-size:.62rem}
  .hub svg{width:2.6rem; height:2.6rem}
  .two{grid-template-columns:1fr}
  .cardx{padding:1.2rem}
  .cardx svg{width:3.6rem; height:3.6rem}
  form{padding:1.3rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} .rays,.pill,.whisper{animation:none}}

/* ---------- multi-page additions ---------- */
.nav{position:relative}
.nav ul a[aria-current="page"]{color:var(--blue); text-decoration:underline; text-underline-offset:.4em; text-decoration-thickness:2px}
.nav-right{display:flex; align-items:center; gap:.6rem}
.menu-btn{display:none; width:2.6rem; height:2.6rem; border-radius:.8rem; border:2px solid var(--line); background:var(--card); cursor:pointer; padding:0; place-items:center; align-content:center; gap:4px}
.menu-btn span{display:block; width:1.1rem; height:2px; background:var(--ink); border-radius:2px}
a.cardx{text-decoration:none; display:block; border:2px solid transparent; transition:border-color .15s}
a.cardx:hover{border-color:var(--blue)}
.pagehead{padding-block:3rem 3.5rem}
.pagehead h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.pagehead .lede,.posthead .lede{font-size:1.2rem; color:var(--soft); margin-top:1rem; max-width:40rem}
.rowhead{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap}
.rowhead a{font-weight:600; color:var(--blue)}
:root[data-theme="dark"] .rowhead a{color:var(--peri)}

.value{display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:start}
.gets{list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:1.4rem}
.gets li{display:grid; grid-template-columns:3.4rem 1fr; gap:1rem; align-items:start}
.gets svg{width:3.4rem; height:3.4rem}
.gets p{color:var(--soft); margin-top:.15rem}
.emailmock{background:var(--card); border-radius:1.4rem; overflow:hidden; box-shadow:0 24px 50px -28px rgba(47,73,181,.55); font-size:.95rem}
.em-head{background:var(--navy); color:#fff; padding:1rem 1.4rem; display:grid; gap:.2rem}
.em-head b{display:inline-block; width:4.2rem; font-weight:500; color:var(--peri)}
.em-body{padding:1.3rem 1.4rem; display:grid; gap:1rem}
.opt{display:grid; grid-template-columns:2rem 1fr; gap:.8rem}
.opt .n{width:2rem; height:2rem; border-radius:.6rem; background:var(--lime); color:var(--navy); display:grid; place-items:center; font-weight:800; font-family:"Red Hat Display",sans-serif}
.opt h3{font-size:1.02rem}
.opt h3 em{font-style:normal; font-weight:600; font-size:.78rem; background:var(--bg2); color:var(--ink); border-radius:999px; padding:.15rem .6rem; margin-left:.35rem; white-space:nowrap}
.opt p{color:var(--soft)}
.opt .watch{color:var(--ink); font-weight:500}
.em-note{font-size:.8rem; color:var(--soft); padding:.8rem 1.4rem; border-top:2px solid var(--line)}

.compare{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:2.5rem}
.way{border-radius:1.4rem; padding:1.8rem}
.way ul{list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.8rem}
.way li{padding-left:2rem; position:relative}
.way li::before{position:absolute; left:0; top:.1rem; width:1.35rem; height:1.35rem; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:800}
.way.alone{background:var(--bg2); color:var(--soft)}
.way.alone h3{color:var(--ink)}
.way.alone li::before{content:"\00d7"; background:var(--line); color:var(--ink)}
.way.with{background:var(--navy); color:#fff}
.way.with li::before{content:"\2713"; background:var(--lime); color:var(--navy)}

.postgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem}
.postgrid.two{grid-template-columns:repeat(2,1fr)}
.post-card{display:flex; flex-direction:column; background:var(--card); border-radius:1.4rem; overflow:hidden; text-decoration:none; border:2px solid transparent; transition:border-color .15s}
.post-card:hover{border-color:var(--blue)}
.post-card[hidden]{display:none}
.cover{aspect-ratio:16/8; display:grid; place-items:center}
.cover svg{width:6rem; height:6rem}
.cover.blue{background:#4260D4} .cover.lime{background:#E0F264} .cover.peri{background:#9EB8F9} .cover.navy{background:#131C45}
.pc-body{padding:1.3rem 1.4rem 1.5rem; display:grid; gap:.5rem; align-content:start}
.pc-body p{color:var(--soft); font-size:.98rem}
.tag{justify-self:start; font-size:.78rem; font-weight:600; background:var(--bg2); border-radius:999px; padding:.15rem .7rem}
.tint .tag{background:var(--bg2)}
.meta{font-size:.85rem; color:var(--soft)}
.post-card.big{grid-column:1/-1; flex-direction:row}
.post-card.big .cover{flex:0 0 42%; aspect-ratio:auto; min-height:16rem}
.post-card.big .cover svg{width:9rem; height:9rem}
.post-card.big .pc-body{padding:2rem; align-content:center}
.post-card.big h3{font-size:1.7rem; line-height:1.15}
.filters{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem}
.filter{font:inherit; font-weight:600; font-size:.95rem; cursor:pointer; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:999px; padding:.35rem 1rem}
.filter[aria-pressed="true"]{background:var(--lime); border-color:var(--navy); color:var(--navy)}
.empty{margin-top:2rem; color:var(--soft)}

.posthead{padding-block:2.5rem 1.5rem; max-width:50rem}
.posthead h1{font-size:clamp(2rem,4vw,3rem)}
.posthead .meta{margin-top:1rem}
.crumbs{font-size:.9rem; color:var(--soft); margin-bottom:1rem}
.postbody{max-width:50rem; padding-bottom:4rem}
.prose{max-width:44rem}
.prose h2{font-size:1.5rem; margin-top:2.2rem}
.prose > h2:first-child{margin-top:0}
.prose p,.prose ul{margin-top:1rem}
.prose ul{padding-left:1.3rem; display:grid; gap:.5rem}
.prose a{color:var(--blue); font-weight:500}
.takeaways{background:var(--bg2); border-radius:1.2rem; padding:1.4rem 1.6rem; margin-bottom:2rem}
.takeaways h2{font-size:1.1rem; margin:0}
.ctabox{display:grid; grid-template-columns:5rem 1fr; gap:1.4rem; align-items:center; background:var(--navy); color:#fff; border-radius:1.4rem; padding:1.8rem; margin-top:3rem}
.ctabox svg{width:5rem; height:5rem}
.ctabox h2{margin:0; font-size:1.4rem}
.ctabox p{margin-top:.4rem; color:#C5CEF2}
.ctabox .btn{margin-top:1rem; background:var(--lime); border-color:var(--lime); color:var(--navy)}

.sysrows{display:grid; gap:1.2rem}
.sysrow{display:grid; grid-template-columns:6rem 1fr; gap:1.8rem; background:var(--card); border-radius:1.4rem; padding:2rem; scroll-margin-top:1.5rem}
.sysrow > svg{width:6rem; height:6rem}
.sysrow h2{font-size:1.6rem}
.sysrow p{color:var(--soft); margin-top:.5rem; max-width:40rem}
.sysrow h3{font-size:1rem; margin-top:1.2rem}
.sysrow ul{margin:.5rem 0 1.3rem; padding-left:1.2rem; color:var(--soft); display:grid; gap:.25rem}
.sysrow .btn{padding:.55rem 1.1rem}

footer{padding:3.5rem 0 2rem}
.foot{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:2.5rem}
.foot .brand{color:#fff; margin-bottom:.8rem}
.foot h3{color:#fff; font-size:1rem; margin-bottom:.7rem}
.foot a:not(.brand){display:block; text-decoration:none; padding:.2rem 0; color:#C5CEF2}
.foot a:not(.brand):hover{color:var(--lime)}
.foot p{max-width:22rem; margin-top:.4rem}
.legal{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid #2A356B; font-size:.85rem}
.view[hidden]{display:none}

@media (max-width:920px){
  .menu-btn{display:grid}
  .nav ul{display:none; position:absolute; top:100%; left:1.25rem; right:1.25rem; z-index:20; flex-direction:column; gap:0; background:var(--card); border:2px solid var(--line); border-radius:1rem; padding:.5rem; box-shadow:0 20px 40px -20px rgba(19,28,69,.5)}
  .nav ul.open{display:flex}
  .nav ul a{display:block; padding:.8rem 1rem; border-radius:.6rem}
  .value,.compare,.postgrid,.postgrid.two{grid-template-columns:1fr}
  .post-card.big{flex-direction:column}
  .post-card.big .cover{flex:none; min-height:0; aspect-ratio:16/8}
  .post-card.big h3{font-size:1.35rem}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .sysrow{grid-template-columns:1fr; gap:1rem; padding:1.4rem}
  .sysrow > svg{width:4.5rem; height:4.5rem}
  .ctabox{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .nav-right .btn{padding:.45rem .8rem; font-size:.9rem}
}

/* ---------- stack check ---------- */
.cards.nine{grid-template-columns:repeat(3,1fr)}
.promo{padding:0 0 4.5rem}
.ctabox.wide{margin-top:0; grid-template-columns:7rem 1fr; padding:2.2rem 2.4rem}
.ctabox.wide svg{width:7rem; height:7rem}
.ctabox.wide h2{font-size:1.7rem}
form.stack-form{background:none; border:0; padding:0; border-radius:0}
.stack-layout{display:grid; grid-template-columns:1fr 21rem; gap:1.5rem; align-items:start}
.sgroups{display:grid; gap:1rem}
.sgroup{background:var(--card); border-radius:1.4rem; padding:1.4rem 1.5rem; display:grid; grid-template-columns:3.4rem 1fr; gap:1rem; margin:0; min-width:0}
.sgroup > svg{width:3.4rem; height:3.4rem}
.sgroup legend{float:left; width:100%; margin:0}
.sgroup h2,.fcard h2{font-size:1.3rem}
.sgroup .soft{clear:both; font-size:.95rem}
.sgroup .chips,.fcard .chips{margin-top:.9rem}
.chip.none span,.chip.other span{border-style:dashed}
.other-input{display:none; margin-top:.8rem; width:100%; max-width:22rem; font:inherit; color:var(--ink); background:var(--bg); border:2px solid var(--line); border-radius:.8rem; padding:.55rem .8rem}
.sgroup.has-other .other-input{display:block}
.fcard{background:var(--card); border-radius:1.4rem; padding:1.6rem 1.5rem}
.fcard .field:first-of-type{margin-top:1.2rem}
.fcard .btn{width:100%}
.empty-note{font-size:.95rem}
.summary{position:sticky; top:1rem; background:var(--navy); color:#fff; border-radius:1.4rem; padding:1.5rem}
.summary h2{font-size:1.3rem}
.summary .count{color:#C5CEF2; margin-top:.2rem}
.summary .count b{color:var(--lime); font-size:1.3rem}
.summary ol{list-style:none; padding:0; margin:1rem 0 1.2rem; display:grid; gap:.35rem}
.layer{border-radius:.7rem; padding:.45rem .75rem; font-size:.88rem; background:#1E2A61; color:#AEB9E6; line-height:1.3}
.layer small{display:block; font-size:.78rem; opacity:.85}
.layer.on{background:var(--lime); color:var(--navy); font-weight:600}
.layer.on small{font-weight:500; opacity:1}
.layer.gap{background:transparent; outline:2px dashed #5264B8; outline-offset:-2px; color:#fff}
.summary .btn{width:100%}
.summary .note{font-size:.75rem; color:#AEB9E6; margin-top:1rem}
@media (max-width:920px){
  .cards.nine{grid-template-columns:1fr 1fr}
  .stack-layout{grid-template-columns:1fr}
  .summary{position:static; order:2}
  .ctabox.wide{grid-template-columns:1fr; padding:1.6rem}
  .ctabox.wide svg{width:5rem; height:5rem}
}
@media (max-width:600px){
  .sgroup{grid-template-columns:1fr; gap:.5rem; padding:1.2rem}
  .sgroup > svg{width:2.8rem; height:2.8rem}
}

/* ---------- situations selector ---------- */
.situ{display:grid; grid-template-columns:21rem 1fr; gap:1.2rem; align-items:start}
.situ-tabs{display:grid; gap:.5rem}
.situ-tab{display:grid; grid-template-columns:2.4rem 1fr; gap:.8rem; align-items:center; text-align:left; font:inherit; font-weight:600; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:1rem; padding:.55rem .9rem .55rem .6rem; cursor:pointer}
.situ-tab svg{width:2.4rem; height:2.4rem}
.situ-tab:hover{border-color:var(--blue)}
.situ-tab[aria-selected="true"]{background:var(--lime); border-color:var(--navy); color:var(--navy)}
.situ-panel{background:var(--card); border:2px solid var(--line); border-radius:1.4rem; padding:2rem}
.tint .situ-panel{border-color:transparent}
.situ-panel h3{font-size:1.6rem; line-height:1.15}
.situ-panel .summ{color:var(--soft); margin-top:.6rem; max-width:40rem}
.situ-cols{display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1.6rem}
.situ-panel h4{font-family:"Red Hat Display",sans-serif; font-size:1rem; margin:0 0 .7rem}
.situ-panel ul{list-style:none; padding:0; margin:0; display:grid; gap:.6rem}
.situ-panel li{padding-left:1.7rem; position:relative; font-size:1rem}
.situ-panel li::before{position:absolute; left:0; top:.15rem; width:1.15rem; height:1.15rem; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:800}
.situ-panel .hard li{color:var(--soft)}
.situ-panel .hard li::before{content:"!"; background:var(--bg2); color:var(--ink)}
.situ-panel .help li::before{content:"\2713"; background:var(--lime); color:var(--navy)}
.startrow{margin-top:1.6rem; padding-top:1.4rem; border-top:2px solid var(--line)}
.startrow > div{display:flex; flex-wrap:wrap; gap:.5rem}
.startchip{display:inline-flex; align-items:center; gap:.4rem; background:var(--bg2); border-radius:999px; padding:.25rem .9rem .25rem .3rem; font-weight:600; font-size:.92rem}
.startchip svg{width:1.9rem; height:1.9rem}
.situ-panel .btn{margin-top:1.6rem}
/* ---------- thank-you pop-up ---------- */
dialog.thanks{border:0; border-radius:1.6rem; padding:2.2rem; width:min(28rem,calc(100vw - 2rem)); background:var(--card); color:var(--ink); text-align:center; box-shadow:0 30px 80px -20px rgba(19,28,69,.6)}
dialog.thanks::backdrop{background:rgba(19,28,69,.62)}
dialog.thanks svg{width:5.5rem; height:5.5rem; margin:0 auto .6rem; display:block}
dialog.thanks h2{font-size:1.8rem}
dialog.thanks p{color:var(--soft); margin-top:.7rem}
.dlg-actions{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.6rem}
@media (max-width:920px){
  .situ{grid-template-columns:1fr}
  .situ-tabs{grid-template-columns:1fr 1fr}
  .situ-cols{grid-template-columns:1fr; gap:1.4rem}
  .situ-panel{padding:1.4rem}
}
@media (max-width:600px){ .situ-tabs{grid-template-columns:1fr} .situ-tab{padding:.4rem .8rem .4rem .5rem} }