/* pcdev v3 base. One plain, well-made structure for every site; a product only sets --accent
   (and --accent-ink if white text does not read on it). Spec: DIRECTIONS.md next to this file.
   No gradients anywhere, on purpose. */

@font-face{font-family:"Inter";src:url("/fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bg:#ffffff;
  --surface:#f6f7f9;
  --surface-2:#eceef2;
  --line:#e2e5ea;
  --line-strong:#cfd4dc;
  --ink:#14171c;
  --ink-2:#454b56;
  --ink-3:#6a717d;
  --accent:#14171c;
  --accent-ink:#ffffff;
  --accent-soft:color-mix(in srgb,var(--accent) 9%,var(--bg));
  --radius:.75rem;
  --radius-sm:.5rem;
  --shadow:0 1px 2px rgb(16 24 40 / .05),0 6px 16px -4px rgb(16 24 40 / .08);
  --shadow-lg:0 2px 4px rgb(16 24 40 / .04),0 16px 40px -12px rgb(16 24 40 / .18);
  --gutter:clamp(16px,4vw,2rem);
  --wrap:76rem;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1114;--surface:#16191d;--surface-2:#1d2126;--line:#272b31;--line-strong:#363b43;
    --ink:#eef0f3;--ink-2:#b3b9c2;--ink-3:#8a919c;
    --accent:var(--accent-dark,#eef0f3);--accent-ink:var(--accent-dark-ink,#0f1114);
    --shadow:0 1px 2px rgb(0 0 0 / .3),0 6px 16px -4px rgb(0 0 0 / .4);
    --shadow-lg:0 2px 4px rgb(0 0 0 / .3),0 16px 40px -12px rgb(0 0 0 / .6);
  }
}
:root[data-theme="dark"]{
  --bg:#0f1114;--surface:#16191d;--surface-2:#1d2126;--line:#272b31;--line-strong:#363b43;
  --ink:#eef0f3;--ink-2:#b3b9c2;--ink-3:#8a919c;
  --accent:var(--accent-dark,#eef0f3);--accent-ink:var(--accent-dark-ink,#0f1114);
}

/* Scaling: the root grows with the screen and everything below is in rem, so a 1440p or 4K
   monitor gets the same proportions as a 1080p one instead of a narrow strip in the middle. */
html{font-size:clamp(15px,.4vw + 10.5px,24px);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
h1{font-size:2.15rem}
h2{font-size:1.75rem}
h3{font-size:1.1rem;letter-spacing:-.01em;font-weight:650}
p,li{text-wrap:pretty}
code,kbd{font-family:var(--mono);font-size:.9em;background:var(--surface-2);border-radius:.3rem;padding:.1em .35em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:.25rem}
::selection{background:var(--accent);color:var(--accent-ink)}
@media (min-width:48em){h1{font-size:3rem}h2{font-size:2.1rem}}

.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-3rem;z-index:100;background:var(--ink);color:var(--bg);padding:.5rem .9rem;border-radius:var(--radius-sm);text-decoration:none}
.skip:focus{top:1rem}
.muted{color:var(--ink-2)}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:1.5rem;height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;font-size:1.05rem;white-space:nowrap}
.brand img{width:1.75rem;height:1.75rem;border-radius:.4rem;object-fit:contain}
.nav{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.nav a{text-decoration:none;color:var(--ink-2);font-size:.92rem;font-weight:500;padding:.45rem .7rem;border-radius:var(--radius-sm);transition:color .15s,background-color .15s}
.nav a:hover{color:var(--ink);background:var(--surface)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a.btn-primary,.nav a.btn-primary:hover{color:var(--accent-ink);background:var(--accent)}
.nav a.btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}
.header-cta{margin-left:.5rem}
.menu-btn{display:none;margin-left:auto;width:2.5rem;height:2.5rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.menu-btn svg{width:1.15rem;height:1.15rem}
@media (max-width:52em){
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;top:4rem;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:.5rem var(--gutter) 1rem;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .nav a{padding:.8rem .25rem;border-radius:0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav .btn{margin-top:.9rem;justify-content:center}
  .site-header.open .nav{display:flex}
  .header-cta{margin-left:0}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;min-height:2.75rem;padding:.6rem 1.15rem;border-radius:var(--radius-sm);
  font:600 .95rem/1.2 var(--font);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background-color .15s,border-color .15s,color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}
.btn-secondary{background:var(--bg);color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--surface)}
.btn-sm{min-height:2.25rem;padding:.4rem .85rem;font-size:.88rem}
.btn svg{width:1rem;height:1rem;flex:none}
.link{color:var(--accent);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:.2em}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .link{color:var(--ink)}}

/* Hero: sized by its content, never 100vh, so short laptop screens see the buttons. */
.hero{padding:3.5rem 0 3rem}
.hero .wrap{display:grid;gap:2.5rem;align-items:center}
.hero h1{max-width:18ch}
.hero .lede{font-size:1.15rem;color:var(--ink-2);max-width:34rem;margin:1.1rem 0 1.75rem}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-note{margin-top:1rem;font-size:.88rem;color:var(--ink-3)}
@media (min-width:60em){
  .hero{padding:4.5rem 0 4rem}
  .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3.5rem}
  .hero.center .wrap{grid-template-columns:1fr;text-align:center;justify-items:center}
  .hero.center .lede{margin-inline:auto}
  .hero.center .actions{justify-content:center}
}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:600;color:var(--accent);margin-bottom:1rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .eyebrow{color:var(--ink-2)}}

/* Framed product image */
.shot{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-lg)}
.shot img{width:100%}
.shot-bar{display:flex;align-items:center;gap:.4rem;height:2rem;padding:0 .8rem;border-bottom:1px solid var(--line);background:var(--surface)}
.shot-bar i{width:.6rem;height:.6rem;border-radius:50%;background:var(--line-strong)}
.shot-bar span{margin-left:.6rem;font-size:.75rem;color:var(--ink-3)}
figure{margin:0}
figcaption{font-size:.85rem;color:var(--ink-3);margin-top:.75rem}

/* Sections */
.section{padding:4rem 0}
.section.alt{background:var(--surface);border-block:1px solid var(--line)}
.section-head{max-width:40rem;margin-bottom:2.5rem}
.section-head p{color:var(--ink-2);font-size:1.05rem;margin-top:.75rem}
.section-head.center{text-align:center;margin-inline:auto}
@media (min-width:60em){.section{padding:5.5rem 0}}

.grid{display:grid;gap:1.25rem}
@media (min-width:40em){.grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;transition:border-color .15s,box-shadow .15s}
.section.alt .card{background:var(--bg)}
.card h3{margin-bottom:.45rem}
.card p{color:var(--ink-2);font-size:.95rem;margin:0}
a.card{display:block;text-decoration:none}
a.card:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.icon{width:2.5rem;height:2.5rem;border-radius:.6rem;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:1rem}
.icon svg{width:1.25rem;height:1.25rem}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .icon{background:var(--surface-2);color:var(--ink)}}

.checks{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.55rem}
.checks li{position:relative;padding-left:1.6rem;color:var(--ink-2);font-size:.95rem}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:1rem;height:1rem;border-radius:50%;background:var(--accent-soft)}
.checks li::after{content:"";position:absolute;left:.33rem;top:.62em;width:.35rem;height:.2rem;border:solid var(--accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}

/* Feature row: text beside a product image, alternating sides */
.feature{display:grid;gap:2rem;align-items:center}
.feature + .feature{margin-top:4.5rem}
.feature h3,.feature h2{font-size:1.5rem;margin-bottom:.75rem;letter-spacing:-.02em}
.feature h2{font-size:1.75rem}
.feature p{color:var(--ink-2)}
@media (min-width:60em){.feature{grid-template-columns:1fr 1.2fr;gap:4rem}.feature.flip > :first-child{order:2}}

/* Product tiles (studio home) */
.product{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .15s,border-color .15s}
.product:hover{box-shadow:var(--shadow);border-color:var(--line-strong)}
.product-head{display:grid;place-items:center;height:8.5rem;background:var(--tile,#16191d);border-bottom:1px solid var(--line)}
.product-head img{width:4rem;height:4rem;object-fit:contain;border-radius:.9rem}
.product-custom{background:var(--surface);border-style:dashed;border-color:var(--line-strong);text-decoration:none}
.product-custom .product-body{justify-content:center}
.product-body{padding:1.4rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.product-body .kind{font-size:.82rem;font-weight:600;color:var(--ink-3)}
.product-body h3{font-size:1.25rem}
.product-body p{color:var(--ink-2);font-size:.95rem;margin:0}
.product-body .actions{margin-top:auto;padding-top:1rem}

/* Steps */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:1.25rem;counter-reset:s}
@media (min-width:48em){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{counter-increment:s;padding:1.5rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:700;font-size:.9rem;margin-bottom:1rem}
.steps h3{margin-bottom:.4rem}
.steps p{color:var(--ink-2);font-size:.95rem;margin:0}

/* Stat line: one row, used at most once per page */
.stats{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;padding:1.5rem 0;border-block:1px solid var(--line)}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.stats span{font-size:.88rem;color:var(--ink-3)}

/* Pricing */
.price{max-width:30rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);padding:2rem;box-shadow:var(--shadow)}
.price .amount{margin-bottom:0;font-size:2.6rem;font-weight:750;letter-spacing:-.03em;line-height:1}
.price .amount small{font-size:1rem;font-weight:500;color:var(--ink-3);letter-spacing:0}

/* FAQ */
.faq{max-width:48rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:1.3rem;line-height:1;color:var(--ink-3);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-2);margin:0 0 1.2rem;max-width:42rem}

/* Closing call to action */
.cta{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:2.5rem;display:grid;gap:1.5rem;align-items:center}
.cta h2{font-size:1.6rem}
.cta p{color:var(--ink-2);margin:.5rem 0 0}
@media (min-width:52em){.cta{grid-template-columns:1fr auto;padding:3rem}}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:3.5rem 0 2rem;font-size:.92rem}
.footer-grid{display:grid;gap:2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:52em){.footer-grid{grid-template-columns:1.6fr repeat(3,1fr)}}
.footer-grid .about{grid-column:1/-1;color:var(--ink-2);max-width:22rem}
@media (min-width:52em){.footer-grid .about{grid-column:auto}}
.footer-grid h4{font-size:.85rem;font-weight:600;margin-bottom:.8rem}
.footer-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.footer-grid a{color:var(--ink-2);text-decoration:none}
.footer-grid a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--ink-3);font-size:.85rem}
.footer-base a{color:inherit}

/* Discord message, drawn in Discord's own colours so bot output reads as the real thing */
.discord{background:#313338;color:#dbdee1;border-radius:var(--radius);padding:1.1rem 1.1rem 1.25rem;font:400 .92rem/1.4 "gg sans","Noto Sans",var(--font);box-shadow:var(--shadow-lg);border:1px solid #1e1f22}
.dmsg{display:grid;grid-template-columns:2.5rem 1fr;gap:.85rem}
.dmsg + .dmsg{margin-top:1.1rem}
.dmsg > img{width:2.5rem;height:2.5rem;border-radius:50%;background:#1e1f22}
.dname{display:flex;align-items:center;gap:.35rem;font-weight:600;color:#f2f3f5}
.dname .tag{background:#5865f2;color:#fff;font-size:.62rem;font-weight:600;padding:.08rem .3rem;border-radius:.2rem;line-height:1.3}
.dname time{font-weight:400;font-size:.72rem;color:#949ba4;margin-left:.2rem}
.dcmd{font-size:.82rem;color:#949ba4;margin-bottom:.2rem}
.dcmd b{color:#c9cdfb;font-weight:500}
.embed{margin-top:.35rem;background:#2b2d31;border-left:4px solid var(--embed,#5865f2);border-radius:.25rem;padding:.7rem .9rem .8rem;max-width:30rem}
.embed .et{font-weight:600;color:#f2f3f5;margin-bottom:.3rem}
.embed .ed{color:#dbdee1;font-size:.88rem}
.embed .ef{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:.55rem .9rem;margin-top:.55rem}
.embed .ef div{font-size:.85rem}
.embed .ef b{display:block;color:#f2f3f5;font-weight:600;font-size:.8rem}
.embed .foot{margin-top:.55rem;font-size:.72rem;color:#949ba4}
.dbtns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem}
.dbtns span{background:#4e5058;color:#fff;font-size:.82rem;font-weight:500;padding:.35rem .9rem;border-radius:.2rem}
.dbtns span.p{background:#248046}
.dbtns span.d{background:#da373c}
.dbtns span.b{background:#5865f2}

/* Entrance: a short fade the first time a block comes into view. Without JS nothing is hidden. */
.js .fade{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js .fade.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .fade{opacity:1;transform:none;transition:none}
  *{transition-duration:.01ms!important}
}

/* Forms */
.field{display:grid;gap:.4rem;margin-bottom:1rem}
.field label,label.field-label{font-size:.9rem;font-weight:600}
input[type=text],input[type=email],input[type=search],input[type=password],input:not([type]),textarea,select{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);background:var(--bg);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);padding:.65rem .8rem;transition:border-color .15s,box-shadow .15s}
textarea{min-height:7rem;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#c4372f}
.field-msg{margin:.1rem 0 0;font-size:.85rem;color:#c4372f}
.order-status:not(:empty){margin-top:1rem;font-size:.92rem;color:var(--ink-2);padding:.75rem .9rem;border-radius:var(--radius-sm);background:var(--surface)}
.btn-disabled,.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn-block{width:100%}
.fineprint{font-size:.88rem;color:var(--ink-3)}
.fineprint a{color:var(--ink-2)}
.pricing-grid{display:grid;gap:1.25rem;align-items:start}
.pricing-grid .price{max-width:none}
@media (min-width:56em){.pricing-grid{grid-template-columns:1fr 1.2fr}}
.pay-alt{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.pay-alt .btn{flex:1}

/* Long-form documents (terms, privacy, guides) */
.doc-head{padding:3.5rem 0 2rem;border-bottom:1px solid var(--line)}
.doc-head .updated{font-size:.9rem;color:var(--ink-3);margin:.75rem 0 0}
.doc-head .lede{font-size:1.1rem;color:var(--ink-2);max-width:42rem;margin:1rem 0 0}
.doc{display:grid;gap:2.5rem;padding:2.5rem 0 4rem}
@media (min-width:60em){.doc{grid-template-columns:14rem minmax(0,1fr);gap:4rem}}
.toc{display:none}
@media (min-width:60em){
  .toc{display:flex;flex-direction:column;gap:.15rem;position:sticky;top:5.5rem;align-self:start;font-size:.9rem;border-left:1px solid var(--line)}
  .toc h4{font-size:.8rem;font-weight:600;color:var(--ink-3);padding:0 0 .5rem 1rem}
  .toc a{color:var(--ink-2);text-decoration:none;padding:.3rem 0 .3rem 1rem;margin-left:-1px;border-left:1px solid transparent}
  .toc a:hover{color:var(--ink);border-left-color:var(--ink)}
}
.prose{max-width:44rem}
.prose h2{font-size:1.3rem;margin:2.5rem 0 .75rem;scroll-margin-top:5.5rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.75rem 0 .5rem}
.prose p,.prose li{color:var(--ink-2)}
.prose ul,.prose ol{padding-left:1.25rem;margin:0 0 1em}
.prose li{margin:.35rem 0}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-underline-offset:.2em}
.pay-cards{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:1rem}
.pay-cards img{width:2.2rem;height:auto}
.table-wrap{overflow-x:auto;margin:0 0 1.25rem;border:1px solid var(--line);border-radius:var(--radius-sm)}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem}
.prose th,.prose td{text-align:left;padding:.65rem .85rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.prose th{background:var(--surface);color:var(--ink);font-weight:600}
.prose tr:last-child td{border-bottom:0}
.dl-mark-tile{display:grid;place-items:center;aspect-ratio:16/10;border-radius:var(--radius);background:#16191d;border:1px solid var(--line)}
.dl-mark-tile img{width:30%;height:auto}
.dl-rows{display:grid;gap:1rem}
.dl-row{display:grid;gap:1rem;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem}
.dl-row h3{margin-bottom:.35rem}
.dl-row p{margin:0;color:var(--ink-2);font-size:.95rem}
.dl-btns{display:flex;flex-wrap:wrap;gap:.6rem}
@media (min-width:52em){.dl-row{grid-template-columns:1fr auto;gap:2.5rem}}
.prose strong,.card strong{color:var(--ink)}

/* Command lists on feature cards */
.card .cmds{list-style:none;padding:0;margin:1.1rem 0 0;display:grid;gap:.45rem;border-top:1px solid var(--line);padding-top:1rem}
.card .cmds li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;font-size:.9rem;color:var(--ink-3)}
.card .cmds code{color:var(--ink);font-size:.85rem}
@media (min-width:64em){.steps.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps code{font-size:.82em}
.setting-list{margin:0}
.setting-list div{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.25rem;border-top:1px solid var(--line);font-size:.92rem}
.setting-list div:first-child{border-top:0}
.setting-list dt{color:var(--ink-2)}
.setting-list dd{margin:0;font-weight:600}
.discord .mention{background:rgb(88 101 242 / .3);color:#c9cdfb;border-radius:.2rem;padding:0 .15rem;font-weight:500}
.discord + figcaption,.shot + figcaption{text-align:center}
/* Astro's mark is a white star; it sits on its own blue tile wherever it's shown. */
.astro-logo{display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:.45rem;background:#3d55d1}
.astro-logo img{width:62%;height:auto}
.dmsg > .av{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;background:#3d55d1}
.dmsg > .av img{width:55%;height:auto;border-radius:0;background:none}
.embed .ef .wide{grid-column:1/-1}
.embed .muted{color:#949ba4}
.log-lines{display:grid;gap:.5rem}
.setup-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;counter-reset:s}
.setup-list li{counter-increment:s;display:grid;grid-template-columns:1.6rem 1fr;gap:.15rem .75rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem 1rem}
.setup-list li::before{content:counter(s);grid-row:span 2;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--surface-2);font-size:.8rem;font-weight:700}
.setup-list code{justify-self:start;font-size:.85rem}
.setup-list span{font-size:.9rem;color:var(--ink-2)}
.cmd-cloud{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem!important}
.cmd-cloud code{font-size:.82rem}

/* Layout: the centred product landing (Notion / 1Password / Raycast). See DIRECTIONS.md
   "Page layout". Opt-in classes, so docs and other pages keep the plain .hero. */
.hero.hero-c{padding:4.5rem 0 0;text-align:center}
.hero.hero-c .wrap{display:block}
.hero-c h1{max-width:18ch;margin-inline:auto}
.hero-c .lede{margin:1.1rem auto 1.75rem;max-width:38rem}
.hero-c .actions{justify-content:center}
.hero-c .hero-media{margin:3.25rem auto 0;max-width:62rem;text-align:left}
.hero-c .hero-media.narrow{max-width:40rem}
.hero-c .hero-media figcaption{text-align:center}
.hero-c + .section{border-top:1px solid var(--line);margin-top:4rem}
@media (min-width:48em){.hero-c h1{font-size:3.6rem}}
@media (max-width:40em){.hero-c .actions{flex-direction:column}.hero-c .actions .btn{width:100%}}

.section-head.center .eyebrow{justify-content:center}

/* Closing call to action: a centred band, not a boxed card. */
.cta-band{padding:5rem 0;text-align:center;background:var(--surface);border-top:1px solid var(--line)}
.cta-band h2{max-width:22ch;margin-inline:auto}
.cta-band p{color:var(--ink-2);margin:.85rem auto 1.75rem;max-width:34rem}
.cta-band .actions{justify-content:center}
@media (max-width:40em){.cta-band .actions{flex-direction:column}.cta-band .actions .btn{width:100%}}

/* Homepage product grid (borrowed from JetBrains): a 3px rule in each product's own accent. */
.product{border-top:3px solid var(--card-accent,var(--line))}

/* Footer: brand column + four groups (Products, Resources, Company, Legal) on every site. */
@media (min-width:52em){.footer-grid.four{grid-template-columns:1.5fr repeat(4,1fr)}}