/* ============================================================
   MyRemoteDesk — palette: deep ink navy ground, signal amber
   accent, connected green for live state.
   LIGHT palette on bare :root, redefined for the two dark states.
   ============================================================ */
:root{
  --ground:#F6F8FB;
  --surface:#FFFFFF;
  --surface-2:#EFF3F8;
  --ink:#0F2557;
  --ink-soft:#47556E;
  --ink-faint:#76859D;
  --line:#D9E1EE;
  --line-strong:#BEC9DC;
  --accent:#C62233;
  --accent-bright:#E23A48;
  --live:#137A52;
  --panel:#0B1B3D;
  --panel-ink:#E7ECF4;
  --panel-soft:#8D9AB0;
  --panel-line:#1C2F55;
  --shadow:0 1px 2px rgba(15,37,87,.07),0 8px 24px -12px rgba(15,37,87,.20);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#070F1F;
    --surface:#0E1A30;
    --surface-2:#132339;
    --ink:#E7ECF4;
    --ink-soft:#98A5B9;
    --ink-faint:#6C7A90;
    --line:#1B2C48;
    --line-strong:#2A3E60;
    --accent:#FF6B77;
    --accent-bright:#FF8A94;
    --live:#3DDC97;
    --panel:#050C1A;
    --panel-ink:#E7ECF4;
    --panel-soft:#8D9AB0;
    --panel-line:#17284A;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#070F1F;
  --surface:#0E1A30;
  --surface-2:#132339;
  --ink:#E7ECF4;
  --ink-soft:#98A5B9;
  --ink-faint:#6C7A90;
  --line:#1B2C48;
  --line-strong:#2A3E60;
  --accent:#FF6B77;
  --accent-bright:#FF8A94;
  --live:#3DDC97;
  --panel:#050C1A;
  --panel-ink:#E7ECF4;
  --panel-soft:#8D9AB0;
  --panel-line:#17284A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px -14px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.022em;
  text-wrap:balance;
  margin:0;
  line-height:1.12;
}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}

.wrap{width:min(1140px,100% - 3rem);margin-inline:auto}
@media(max-width:640px){.wrap{width:min(1140px,100% - 2rem)}}

.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;gap:2rem;height:78px}
.brand{display:flex;align-items:center;gap:.85rem;font-family:Archivo;font-weight:800;letter-spacing:-.03em;font-size:1.95rem;text-decoration:none}
.brand-mark{
  width:42px;height:42px;border-radius:10px;flex:none;
  background:var(--ink);position:relative;
}
.brand-mark::after{
  content:"";position:absolute;inset:9px 9px auto auto;
  width:15px;height:15px;border-radius:4px;background:var(--accent-bright);
}
.nav{display:flex;gap:1.6rem;margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;color:var(--ink-soft);font-size:.9rem;font-weight:500;
  padding:.25rem 0;border-bottom:1.5px solid transparent;transition:color .16s,border-color .16s;
}
.nav a:hover,.nav a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}
@media(max-width:860px){.nav{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-family:"IBM Plex Sans";font-size:.92rem;font-weight:600;
  padding:.62rem 1.15rem;border-radius:7px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:transform .12s,background .16s,border-color .16s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .btn-primary:hover,
:root:not([data-theme="light"]) .btn-primary:hover{color:#070F1F}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:4px}

/* ---------- hero ---------- */
.hero{padding:5.2rem 0 4.4rem}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:3rem}.hero{padding:3.4rem 0 3rem}}
.hero h1{font-size:clamp(2.5rem,5.4vw,4rem);font-weight:800;letter-spacing:-.035em}
.hero h1 em{font-style:normal;color:var(--accent);}
.hero-sub{margin-top:1.35rem;font-size:1.1rem;color:var(--ink-soft);max-width:34ch}
.hero-cta{display:flex;gap:.75rem;margin-top:2rem;flex-wrap:wrap}
.hero-note{
  margin-top:1.4rem;font-family:"IBM Plex Mono",monospace;font-size:.78rem;
  color:var(--ink-faint);letter-spacing:.01em;
}

/* connection panel — the hero object */
.panel{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;gap:.55rem;padding:.7rem .95rem;
  border-bottom:1px solid var(--panel-line);
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--panel-line);flex:none}
.panel-title{
  margin-left:.35rem;font-family:"IBM Plex Mono",monospace;font-size:.73rem;
  color:var(--panel-soft);letter-spacing:.06em;
}
.lamp{
  margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--panel-soft);
  letter-spacing:.08em;text-transform:uppercase;
}
.lamp i{width:7px;height:7px;border-radius:50%;background:var(--panel-line);display:block;transition:background .4s}
.lamp.on i{background:var(--live);box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 70%,transparent);animation:pulse 2.4s ease-out infinite}
.lamp.on{color:var(--live)}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 55%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.panel-body{padding:1.5rem 1.4rem 1.6rem}
.id-label{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--panel-soft);
}
.id-value{
  font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:clamp(1.7rem,4.4vw,2.3rem);color:var(--panel-ink);
  letter-spacing:.06em;margin-top:.35rem;font-variant-numeric:tabular-nums;
}
.log{
  margin-top:1.35rem;border-top:1px solid var(--panel-line);padding-top:1rem;
  font-family:"IBM Plex Mono",monospace;font-size:.78rem;line-height:1.9;
  min-height:8.2rem;
}
.log div{color:var(--panel-soft);opacity:0;transform:translateY(3px);transition:opacity .35s,transform .35s}
.log div.show{opacity:1;transform:none}
.log div.ok{color:var(--live)}
.log span.k{color:var(--accent-bright)}
@media(prefers-reduced-motion:reduce){
  .log div{opacity:1;transform:none;transition:none}
  .lamp.on i{animation:none}
}

/* ---------- platform strip ---------- */
.strip{border-block:1px solid var(--line);background:var(--surface)}
.strip-in{
  display:flex;flex-wrap:wrap;gap:.55rem 2.1rem;align-items:center;
  padding:1.15rem 0;font-family:"IBM Plex Mono",monospace;font-size:.79rem;color:var(--ink-faint);
}
.strip-in b{
  font-family:"IBM Plex Sans";font-weight:600;font-size:.79rem;color:var(--ink);
  letter-spacing:.02em;margin-right:.3rem;
}

/* ---------- generic section ---------- */
section{padding:4.6rem 0}
@media(max-width:640px){section{padding:3.2rem 0}}
.sec-head{max-width:56ch;margin-bottom:2.6rem}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.4rem);margin-top:.7rem}
.sec-head p{margin-top:.95rem;color:var(--ink-soft);font-size:1.03rem}

/* ---------- steps (a genuine sequence, so numbered) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:1.9rem 1.7rem;border-right:1px solid var(--line)}
.step:last-child{border-right:0}
@media(max-width:820px){.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}}
.step-n{
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:600;
  color:var(--accent);letter-spacing:.1em;
}
.step h3{font-size:1.12rem;margin-top:.75rem}
.step p{margin-top:.6rem;color:var(--ink-soft);font-size:.95rem}

/* ---------- feature spec list ---------- */
.specs{border-top:1px solid var(--line)}
.spec{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:1.4rem;padding:1.35rem 0;border-bottom:1px solid var(--line);align-items:baseline;
}
@media(max-width:760px){.spec{grid-template-columns:1fr;gap:.4rem}}
.spec h3{font-size:1.02rem;font-weight:600;font-family:"IBM Plex Sans";letter-spacing:0}
.spec p{color:var(--ink-soft);font-size:.96rem}
.spec code{
  font-family:"IBM Plex Mono",monospace;font-size:.85em;
  background:var(--surface-2);padding:.1em .4em;border-radius:4px;color:var(--ink);
}

/* ---------- privacy / self-host feature block ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:2.2rem}}
.ports{
  background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;
  padding:1.5rem 1.4rem;font-family:"IBM Plex Mono",monospace;font-size:.82rem;
  color:var(--panel-soft);line-height:2;box-shadow:var(--shadow);overflow-x:auto;
}
.ports .c{color:var(--panel-ink)}
.ports .a{color:var(--accent-bright)}
.ports .g{color:var(--live)}

/* ---------- comparison ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{text-align:left;padding:.92rem 1.15rem;border-bottom:1px solid var(--line);font-size:.94rem}
thead th{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;background:var(--surface-2);
}
tbody tr:last-child td{border-bottom:0}
td:first-child{color:var(--ink-soft)}
th:first-child{width:34%}
.mine{color:var(--ink);font-weight:600}
.mine-col{background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:880px){.tiers{grid-template-columns:1fr}}
.tier{
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:1.7rem 1.5rem;display:flex;flex-direction:column;
}
.tier.feature{border-color:var(--accent);box-shadow:var(--shadow)}
.tier-name{font-family:Archivo;font-weight:700;font-size:1.05rem}
.tier-price{font-family:Archivo;font-weight:800;font-size:2.1rem;margin-top:.7rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tier-price small{font-family:"IBM Plex Sans";font-size:.82rem;font-weight:500;color:var(--ink-faint);letter-spacing:0}
.tier ul{list-style:none;padding:0;margin:1.2rem 0 1.6rem;display:flex;flex-direction:column;gap:.55rem;font-size:.93rem;color:var(--ink-soft)}
.tier li{display:flex;gap:.6rem;align-items:flex-start}
.tier li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);flex:none;margin-top:.52rem}
.tier .btn{margin-top:auto}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line);padding:1.05rem 0}
summary{
  cursor:pointer;font-weight:600;font-size:1rem;list-style:none;
  display:flex;align-items:center;gap:.9rem;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"+";margin-left:auto;font-family:"IBM Plex Mono",monospace;
  color:var(--accent);font-size:1.15rem;line-height:1;flex:none;
}
details[open] summary::after{content:"–"}
details p{margin-top:.8rem;color:var(--ink-soft);font-size:.96rem;max-width:70ch}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:3rem 0 3.4rem;background:var(--surface)}
.foot-grid{display:flex;gap:2.5rem;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.legal{
  margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace;font-size:.76rem;color:var(--ink-faint);
  line-height:1.85;max-width:78ch;
}
.legal a{color:var(--accent)}
.foot-links{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.foot-links a{color:var(--ink-soft);text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-h{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.9rem}

.placeholder-flag{
  background:color-mix(in srgb,var(--accent) 12%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:9px;padding:.9rem 1.1rem;font-size:.87rem;color:var(--ink);
  display:flex;gap:.7rem;align-items:flex-start;margin-bottom:2.5rem;
}
.placeholder-flag b{font-weight:600}

/* ---------- single price ---------- */
.onep{
  display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:1.1rem;align-items:stretch;
}
@media(max-width:820px){.onep{grid-template-columns:1fr}}
.onep-figure{
  border:1px solid var(--accent);border-radius:12px;background:var(--surface);
  padding:2.2rem 1.9rem;box-shadow:var(--shadow);display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;
}
.onep-price{
  font-family:Archivo;font-weight:800;font-size:4rem;line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.onep-unit{font-family:Archivo;font-weight:700;font-size:1.05rem;margin-top:.5rem}
.onep-sub{color:var(--ink-soft);font-size:.92rem;margin-top:.7rem;max-width:26ch}
.onep-list{
  border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:1.9rem 1.8rem;
}
.onep-h{font-family:Archivo;font-weight:700;font-size:1.02rem;margin-bottom:1rem}
.onep-list ul{
  list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;
  gap:.6rem 1.4rem;font-size:.95rem;color:var(--ink-soft);
}
@media(max-width:620px){.onep-list ul{grid-template-columns:1fr}}
.onep-list li{display:flex;gap:.6rem;align-items:flex-start}
.onep-list li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--accent);flex:none;margin-top:.55rem}
.onep-note{
  margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-faint);
}
.onep-note a{color:var(--accent)}

/* ---------- contact form ---------- */
.cform{position:relative;max-width:46rem}
.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.1rem}
@media(max-width:640px){.cform-grid{grid-template-columns:1fr}}
.cfield{display:flex;flex-direction:column;gap:.35rem;margin-top:.9rem;font-size:.9rem}
.cfield span{font-weight:600}
.cfield em{color:var(--accent);font-style:normal}
.cfield input,.cfield textarea{
  font:inherit;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong,var(--line));border-radius:8px;padding:.65rem .8rem;
}
.cfield input:focus,.cfield textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.cform-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem}
.cform-msg{margin-top:1rem;font-size:.95rem;font-weight:600}
.cform-msg.ok{color:var(--live,#137a52)}
.cform-msg.bad{color:#b3261e}

/* ---------- buy box ---------- */
.buyform{margin-top:1.4rem;width:100%}
.buyform .cfield{margin-top:.7rem}
.buyform .btn{margin-top:1rem;width:100%;text-align:center}
.buy-note{font-size:.8rem;color:var(--ink-faint);margin-top:.7rem;line-height:1.5}

/* ---------- done-for-you setup ---------- */
.doneforyou{
  margin-top:2.6rem;padding:1.5rem 1.5rem 1.6rem;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
}
.dfy-head{font-family:Archivo;font-weight:700;font-size:1.05rem}
.dfy-lede{margin-top:.6rem;color:var(--ink-soft);font-size:.95rem}
.dfy-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.4rem}
@media(max-width:900px){.dfy-opts{grid-template-columns:1fr}}
.dfy-opt{
  border:1px solid var(--line);border-radius:10px;padding:1.3rem 1.4rem 1.4rem;
  background:var(--ground);display:flex;flex-direction:column;
}
.dfy-opt-feature{border-color:var(--accent);background:var(--surface)}
.dfy-opt-name{font-weight:600;font-size:.92rem;margin-bottom:.6rem}
.dfy-opt-note{margin-top:.8rem;font-size:.87rem;color:var(--ink-faint);line-height:1.65}
.dfy-opt .dfy-opt-note{flex:1}
.dfy-pay{margin-top:1.1rem;width:100%;padding-top:.65rem;padding-bottom:.65rem}
.dfy-prices{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap;margin-top:1.2rem}
.dfy-fig{font-family:Archivo;font-weight:800;font-size:2.1rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dfy-unit{font-size:.85rem;color:var(--ink-soft);margin-top:.15rem}
.dfy-plus{font-family:Archivo;font-weight:700;font-size:1.3rem;color:var(--ink-faint)}
.dfy-note{margin-top:1rem;font-size:.85rem;color:var(--ink-faint);line-height:1.6}

/* ---------- downloads ---------- */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media(max-width:1000px){.dl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.dl-grid{grid-template-columns:1fr}}
.dl{
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:1.7rem 1.5rem;display:flex;flex-direction:column;
}
.dl-os{font-family:Archivo;font-weight:700;font-size:1.05rem}
.dl-lede{margin-top:.55rem;color:var(--ink-soft);font-size:.95rem;flex:none}
.dl .btn{margin-top:1.2rem;align-self:flex-start}
.dl-alt{
  list-style:none;padding:0;margin:1.3rem 0 0;display:flex;flex-direction:column;gap:.6rem;
  font-size:.88rem;color:var(--ink-faint);border-top:1px solid var(--line);padding-top:1.1rem;
}
.dl-alt a{color:var(--ink-soft)}
.dl-alt a:hover{color:var(--accent)}
.dl-alt code{font-family:"IBM Plex Mono",monospace;font-size:.9em;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:.05rem .3rem}
.dl-meta{
  margin-top:1.8rem;font-family:"IBM Plex Mono",monospace;font-size:.78rem;
  color:var(--ink-faint);line-height:2;
}
.dl-meta a{color:var(--accent)}

/* ============================================================
   Sub-pages (comparison / self-hosting / MSP pages).
   Everything above is shared with the home page.
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumbs{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.74rem;
  letter-spacing:.06em;color:var(--ink-faint);padding:1.4rem 0 0;
}
.crumbs a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.crumbs span{margin:0 .5rem;opacity:.55}

/* ---------- sub-page hero ---------- */
.phero{padding:2.6rem 0 3.4rem;border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(2rem,4.6vw,3.15rem);margin-top:1rem;max-width:19ch}
.phero-sub{
  margin-top:1.3rem;max-width:60ch;font-size:1.1rem;color:var(--ink-soft);line-height:1.62;
}
.phero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
@media(max-width:640px){.phero{padding:1.8rem 0 2.6rem}.phero h1{max-width:none}}

/* ---------- long-form prose ---------- */
.prose{max-width:68ch}
.prose p{margin-top:1.05rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.68}
.prose p:first-child{margin-top:0}
.prose h3{
  font-size:1.22rem;margin-top:2.3rem;font-family:Archivo;font-weight:700;letter-spacing:-.018em;
}
.prose ul,.prose ol{margin:1.05rem 0 0;padding-left:1.25rem;color:var(--ink-soft);font-size:1.02rem;line-height:1.62}
.prose li{margin-top:.5rem}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--ink);font-weight:600}
.prose code{
  font-family:"IBM Plex Mono",monospace;font-size:.86em;
  background:var(--surface-2);padding:.12em .42em;border-radius:4px;color:var(--ink);
}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.prose a:hover{border-bottom-color:var(--accent)}

/* ---------- callout ---------- */
.callout{
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;
  background:var(--surface);padding:1.3rem 1.5rem;margin-top:1.8rem;max-width:68ch;
  box-shadow:var(--shadow);
}
.callout .callout-h{
  font-family:Archivo;font-weight:700;font-size:1rem;letter-spacing:-.015em;margin-bottom:.5rem;
}
.callout p{color:var(--ink-soft);font-size:.97rem;line-height:1.62;margin:0}
.callout p + p{margin-top:.75rem}

/* ---------- generic card grid ---------- */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.cardgrid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:880px){.cardgrid,.cardgrid.two{grid-template-columns:1fr}}
.card{
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:1.6rem 1.5rem;
}
.card h3{font-size:1.05rem;font-family:Archivo;font-weight:700;letter-spacing:-.015em}
.card p{margin-top:.65rem;color:var(--ink-soft);font-size:.95rem;line-height:1.6}

/* ---------- closing call to action ---------- */
.cta{
  background:var(--panel);border-radius:14px;padding:3rem 2.6rem;
  box-shadow:var(--shadow);text-align:center;
}
.cta h2{color:var(--panel-ink);font-size:clamp(1.6rem,3.2vw,2.2rem);max-width:22ch;margin-inline:auto}
.cta p{color:var(--panel-soft);margin-top:1rem;max-width:54ch;margin-inline:auto;font-size:1rem;line-height:1.6}
.cta .phero-cta{justify-content:center;margin-top:1.9rem}
.cta .btn-ghost{color:var(--panel-ink);border-color:var(--panel-line)}
.cta .btn-ghost:hover{border-color:var(--panel-soft)}
@media(max-width:640px){.cta{padding:2.2rem 1.4rem}}

/* ---------- related pages ---------- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.8rem}
@media(max-width:880px){.related{grid-template-columns:1fr}}
.related a{
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  padding:1.3rem 1.4rem;text-decoration:none;display:block;transition:border-color .16s;
}
.related a:hover{border-color:var(--line-strong)}
.related .r-k{
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
.related .r-t{font-family:Archivo;font-weight:700;font-size:1rem;margin-top:.5rem;letter-spacing:-.015em}
.related .r-d{color:var(--ink-soft);font-size:.9rem;margin-top:.4rem;line-height:1.55}