/* Inner-page redesign 2026-11-11. Loads AFTER /_astro/redesign-20261111.css (which defines the .rd tokens, buttons, hero and .rd-fold).
   New file only: never edit in place once live (HCDN caches CSS a year); ship a new filename instead.
   Every rule is under .rd so nothing else on the site is touched. Components are documented in COMPONENTS.md. */

.rd{--rd-teal:#2dd4bf;--rd-gold:#ffd60a;--rd-pink:#ec4899;--rd-red:#ff5b6a;--rd-band:#100e15}

/* sections */
.rd .rdi-sec{padding:80px 0}
.rd .rdi-sec>.rd-wrap{display:flex;flex-direction:column;gap:32px}
.rd .rdi-band{background:var(--rd-band);border-top:1px solid var(--rd-line2);border-bottom:1px solid var(--rd-line2)}
.rd .rdi-top{border-top:1px solid var(--rd-line2)}
.rd .rdi-head{display:flex;flex-direction:column;gap:10px}
.rd .rdi-head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 16px}
.rd .rdi-h2s{font-size:clamp(26px,3.2vw,36px)}
.rd .rdi-note{font-size:13px;color:var(--rd-muted);margin:0}
.rd .rdi-meta{font-family:var(--rd-mono);font-size:13px;color:var(--rd-muted)}

/* hero visual panel (right side of .rd-hero) */
.rd .rdi-visual{flex:1 1 420px;min-width:0;background:var(--rd-panel);border:1px solid var(--rd-line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px}
.rd .rdi-visual-cap{font-size:12px;color:var(--rd-muted)}
.rd .rdi-hero-solo .rd-hero-copy{flex-basis:100%;max-width:820px}

/* grids: cards wrap by themselves; --n sets the max columns on wide screens */
.rd .rdi-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--min,240px)),1fr))}
.rd .rdi-grid-2{--min:420px}
.rd .rdi-grid-3{--min:300px}
.rd .rdi-grid-4{--min:230px}
.rd .rdi-grid-5{--min:180px}
.rd .rdi-grid-6{--min:150px}

/* card */
.rd .rdi-card{text-align:left;min-width:0;background:var(--rd-panel);border:1px solid var(--rd-line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;color:var(--rd-text);text-decoration:none}
.rd a.rdi-card:hover{border-color:var(--rd-accent);color:var(--rd-text)}
.rd .rdi-card-lg{border-radius:20px;padding:28px;gap:16px}
.rd .rdi-card h3,.rd .rdi-card .rdi-t{font-size:18px;line-height:1.25;font-weight:700;margin:0;color:var(--rd-text);letter-spacing:-.01em}
.rd .rdi-card-lg h3,.rd .rdi-card-lg .rdi-t{font-size:clamp(22px,2.4vw,28px);letter-spacing:-.02em}
.rd .rdi-card p,.rd .rdi-card .rdi-d{font-size:14px;color:var(--rd-muted);margin:0}
.rd .rdi-n{font-family:var(--rd-mono);font-size:13px;color:var(--rd-accent)}
.rd .rdi-n-big{font-family:var(--rd-mono);font-size:28px;font-weight:700;line-height:1;color:var(--rd-accent)}
.rd .rdi-tag{font-family:var(--rd-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rd-accent)}
.rd .rdi-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rd .rdi-go{font-size:14px;font-weight:600;color:var(--rd-accent);margin-top:auto}
.rd .rdi-hl{border-color:var(--rd-accent)}
.rd .rdi-good{background:#12211d;border-color:#1f3b33}
.rd .rdi-good .rdi-n,.rd .rdi-good .rdi-tag{color:var(--rd-green)}
.rd .rdi-dash{background:transparent;border-style:dashed;border-color:#4B3B5C}
.rd .rdi-ico{flex:0 0 auto;display:block}
.rd .rdi-row{display:flex;gap:14px;align-items:center}

/* service-line accents: add to a card or tag */
.rd .rdi-c-teal{--rdi-c:var(--rd-teal)}.rd .rdi-c-gold{--rdi-c:var(--rd-gold)}.rd .rdi-c-pink{--rdi-c:var(--rd-pink)}.rd .rdi-c-purple{--rdi-c:var(--rd-accent)}
.rd [class*="rdi-c-"] .rdi-tag{color:var(--rdi-c)}
.rd .rdi-dot{width:10px;height:10px;border-radius:50%;background:var(--rdi-c,var(--rd-accent));flex:0 0 auto}

/* chips */
.rd .rdi-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rd .rdi-chip{font-size:13px;color:var(--rd-soft);background:var(--rd-panel2);border:1px solid var(--rd-line);border-radius:999px;padding:7px 12px;line-height:1.2}
.rd a.rdi-chip{text-decoration:none;padding:12px 18px;font-size:14px}
.rd a.rdi-chip:hover{border-color:var(--rd-accent);color:var(--rd-text)}
.rd .rdi-chip-good{border-color:var(--rd-green);color:var(--rd-green)}
.rd .rdi-arrow{color:var(--rd-muted);font-size:12px}

/* result line + stats */
.rd .rdi-result{display:flex;align-items:center;gap:10px;color:var(--rd-green);font-weight:600;font-size:15px}
.rd .rdi-result b{font-family:var(--rd-mono);font-size:22px}
.rd .rdi-big{font-family:var(--rd-mono);font-size:clamp(40px,5vw,56px);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--rd-green)}
.rd .rdi-huge{font-family:var(--rd-mono);font-size:clamp(56px,8vw,88px);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--rd-green)}
.rd .rdi-stat{min-width:0;background:var(--rd-panel);border:1px solid var(--rd-line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px}
.rd .rdi-stat-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;color:var(--rd-muted)}
.rd .rdi-stat-top b{font-family:var(--rd-mono);color:var(--rd-green)}
.rd .rdi-stat-v{font-family:var(--rd-mono);font-size:clamp(22px,2.4vw,26px);font-weight:700}
/* before/after tracks: set --w on the before track (after is always full) */
.rd .rdi-track{height:8px;border-radius:4px;background:var(--rd-line2);overflow:hidden}
.rd .rdi-track i{display:block;height:100%;width:var(--w,100%);background:var(--rd-chip);border-radius:4px}
.rd .rdi-track.after i{background:var(--rd-accent)}
/* vertical before/after bars reuse .rd-bars from the homepage (set height inline on <i>) */

/* mock browser / SERP pieces for hero visuals */
.rd .rdi-browser{padding:0;overflow:hidden}
.rd .rdi-browser-bar{display:flex;gap:6px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--rd-line)}
.rd .rdi-browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--rd-chip)}
.rd .rdi-browser-bar span{margin-left:10px;font-family:var(--rd-mono);font-size:12px;color:var(--rd-muted)}
.rd .rdi-browser-body{padding:22px;display:flex;flex-direction:column;gap:11px}
.rd .rdi-line{display:block;height:9px;border-radius:3px;background:var(--rd-line2)}
.rd .rdi-line-h{height:20px;background:var(--rd-chip);border-radius:4px}
.rd .rdi-line-btn{height:28px;width:120px;background:var(--rd-accent);border-radius:999px}
.rd .rdi-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rd-line);border-top:1px solid var(--rd-line)}
.rd .rdi-metrics>div{background:var(--rd-panel);padding:16px;display:flex;flex-direction:column;gap:4px;min-width:0}
.rd .rdi-metrics span{font-family:var(--rd-mono);font-size:11px;color:var(--rd-muted)}
.rd .rdi-metrics b{font-family:var(--rd-mono);font-size:clamp(16px,2vw,22px);color:var(--rd-green)}
/* small bar chart: <div class="rdi-spark"><span style="height:40%"></span>...</div> */
.rd .rdi-spark{display:flex;align-items:flex-end;gap:6px;height:140px}
.rd .rdi-spark span{flex:1;min-width:0;background:var(--rd-line);border-radius:3px 3px 0 0}
.rd .rdi-spark span.on{background:var(--rd-accent)}
.rd .rdi-spark span.hot{background:var(--rd-gold)}
.rd .rdi-incoming{display:flex;align-items:center;gap:10px;background:#12211d;border:1px solid #1f3b33;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;color:var(--rd-green)}

/* proportional phase bar: <div class="rdi-phases" style="--cols:1fr 1fr 4fr"> */
.rd .rdi-phases{display:grid;grid-template-columns:var(--cols);gap:6px}
.rd .rdi-phases>div{display:flex;flex-direction:column;gap:8px;min-width:0}
.rd .rdi-phases i{display:block;height:44px;border-radius:10px;background:var(--rd-chip)}
.rd .rdi-phases span{font-family:var(--rd-mono);font-size:12px;color:var(--rd-muted);overflow-wrap:anywhere}
.rd .rdi-phases b{display:block;color:var(--rd-text);font-family:InterVariable,Inter,system-ui,sans-serif;font-size:13px}
@media (max-width:640px){.rd .rdi-phases{grid-template-columns:1fr}.rd .rdi-phases>div{flex-direction:row;align-items:center}.rd .rdi-phases i{width:44px;height:28px;flex:0 0 44px}}

/* horizontal timeline: <ol class="rdi-timeline"><li><span class="rdi-when">..</span><b>..</b></li></ol> */
.rd .rdi-timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:20px 16px;position:relative}
.rd .rdi-timeline li{position:relative;display:flex;flex-direction:column;gap:8px;padding-top:28px;min-width:0}
.rd .rdi-timeline li::before{content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;background:var(--rdi-c,var(--rd-accent));border:3px solid var(--rd-bg);box-shadow:0 0 0 1px var(--rd-line)}
.rd .rdi-timeline li::after{content:"";position:absolute;top:7px;left:22px;right:-10px;height:2px;background:var(--rd-line)}
.rd .rdi-timeline li:last-child::after{display:none}
.rd .rdi-when{font-family:var(--rd-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--rd-muted)}
.rd .rdi-timeline b{font-size:16px;line-height:1.3}

/* checklist + x-list tiles */
.rd .rdi-check{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.rd .rdi-check svg{flex:0 0 auto;margin-top:1px}

/* option table (platform chooser etc.) */
.rd .rdi-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1px;background:var(--rd-line);border:1px solid var(--rd-line);border-radius:16px;overflow:hidden}
.rd .rdi-table>div{background:var(--rd-panel);padding:20px;display:flex;flex-direction:column;gap:4px;min-width:0}
.rd .rdi-table b{font-size:16px}
.rd .rdi-table span{font-size:14px;color:var(--rd-muted)}

/* price pair */
.rd .rdi-price{font-family:var(--rd-mono);font-size:clamp(36px,4.5vw,48px);font-weight:700;line-height:1;color:var(--rd-text)}
.rd .rdi-price small{font-size:15px;font-weight:500;color:var(--rd-muted)}

/* pull quote */
.rd .rdi-pull{margin:0;padding-top:32px;border-top:1px solid var(--rd-line2)}
.rd .rdi-pull blockquote{margin:0;font-family:Georgia,serif;font-size:clamp(22px,2.6vw,28px);line-height:1.3;max-width:820px;color:var(--rd-text)}
.rd .rdi-pull figcaption{margin-top:14px;font-size:14px;color:var(--rd-muted)}

/* split: heading column + content column */
.rd .rdi-split{display:flex;flex-wrap:wrap;gap:32px 48px}
.rd .rdi-split>:first-child{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:14px}
.rd .rdi-split>:last-child{flex:2 1 520px;min-width:0}

/* the folded original detail below the design */
.rd-detail{padding:56px 0 24px}
.rd-detail-head{max-width:820px;margin:0 auto 20px;padding:0 24px;display:flex;flex-direction:column;gap:6px}
.rd-detail-head .rd-eyebrow{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.14em;color:#B89FD0;text-transform:uppercase}
.rd-detail-head p{margin:0;color:#a097b0;font-size:15px}
.rd-detail>.container{max-width:820px}
.rd-detail .rd-fold-body>section,.rd-detail .rd-fold-body .section{padding:0;margin:0;background:none;border:0}
.rd-detail .rd-fold-body .container{max-width:none;padding:0;margin:0}

@media (max-width:640px){
  .rd .rdi-sec{padding:56px 0}
  .rd .rdi-card-lg{padding:22px}
  .rd .rdi-visual{padding:18px}
  .rd .rdi-spark{height:110px}
}

/* case studies use the light article layout (body.article-body): keep the folded detail on paper, readable */
.article-body .rd-detail .rd-fold{background:#fff;border:1px solid #e8e4ed}
.article-body .rd-detail .rd-fold>summary{color:#1c1822}
.article-body .rd-detail .rd-fold>summary::after{color:#7A618F}
.article-body .rd-detail .rd-fold[open]{border-color:#B89FD0}
.article-body .rd-detail-head p{color:#5a5266}
.article-body .rd-detail-head .rd-eyebrow{color:#7A618F}
.article-body .rd-divider{border-top-color:#e8e4ed}

/* author byline sits between the hero and the first section: align it to the page column, not edge to edge */
main>aside.author-byline{box-sizing:border-box;width:calc(100% - 48px);max-width:1112px;margin:0 auto 40px!important}

/* open detail (no folds): original sections read as one long, calm column under the design */
.rd-detail.rd-open{padding:72px 0 32px}
.rd-detail.rd-open>.container{max-width:820px;margin:0 auto;padding:0 24px}
.rd-detail.rd-open>.container>section,.rd-detail.rd-open>.container>aside,.rd-detail.rd-open>.container>figure,.rd-detail.rd-open .rd-intro>*{background:none!important;border:0!important;margin:0!important;padding:0 0 48px!important;min-height:0!important}
.rd-detail.rd-open>.container>section+section{border-top:1px solid #221d2b!important;padding-top:48px!important}
.rd-detail.rd-open .container .container{max-width:none!important;padding:0!important;margin:0!important;width:auto!important}
.rd-detail.rd-open h2{font-size:clamp(26px,3vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:800;margin:0 0 16px}
.rd-detail.rd-open h3{font-size:19px;line-height:1.3;margin:24px 0 8px}
.rd-detail.rd-open p,.rd-detail.rd-open li,.rd-detail.rd-open dd{font-size:16px;line-height:1.65}
.rd-detail.rd-open figure img{max-width:100%;height:auto;border-radius:16px}
.rd-detail.rd-open .rd-intro p{font-size:19px;line-height:1.55}
.article-body .rd-detail.rd-open>.container>section+section{border-top-color:#e8e4ed!important}
.rd-detail.rd-open table{display:block;max-width:100%;overflow-x:auto}

/* ===== styled long-form (v4): the original copy, laid out, never reworded ===== */
.rd-detail.rd-open{--o-panel:#14111b;--o-panel2:#1b1724;--o-line:#2a2435;--o-text:#f6f4fa;--o-soft:#d9d2e4;--o-muted:#a097b0;--o-acc:#B89FD0;--o-good:#8fd2b5;--o-goodbg:#12211d}
.article-body .rd-detail.rd-open{--o-panel:#ffffff;--o-panel2:#f4eef9;--o-line:#e8e4ed;--o-text:#1c1822;--o-soft:#3a3344;--o-muted:#5a5266;--o-acc:#7A618F;--o-good:#1f7a5a;--o-goodbg:#e9f9f4}
.rd-detail.rd-open>.container{max-width:1160px}
.rd-detail.rd-open p,.rd-detail.rd-open li,.rd-detail.rd-open dd{color:var(--o-soft)}
.rd-detail.rd-open h2,.rd-detail.rd-open h3,.rd-detail.rd-open dt,.rd-detail.rd-open strong{color:var(--o-text)}
.rd-detail.rd-open a{color:var(--o-acc)}

/* section = heading column + content column */
.rd-detail.rd-open .rd-split{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:56px;row-gap:18px;align-items:start;padding:56px 0;border-top:1px solid var(--o-line)}
.rd-detail.rd-open .rd-split>h2{grid-column:1;grid-row:1/span 60;position:sticky;top:96px;margin:0!important;font-size:clamp(24px,2.6vw,32px)}
.rd-detail.rd-open .rd-split>:not(h2){grid-column:2;margin:0;min-width:0}
.rd-detail.rd-open .rd-split>p:first-of-type{font-size:18px;color:var(--o-text)}
@media (max-width:860px){.rd-detail.rd-open .rd-split{grid-template-columns:minmax(0,1fr);padding:44px 0}.rd-detail.rd-open .rd-split>h2,.rd-detail.rd-open .rd-split>:not(h2){grid-column:1;grid-row:auto;position:static}}
.rd-detail.rd-open>.container>section+section{border-top:0!important;padding-top:0!important}
.rd-detail.rd-open>.container>section{padding-bottom:0!important}

/* numbered sub-parts (h3 runs) become cards */
.rd-detail.rd-open .rd-block{background:var(--o-panel);border:1px solid var(--o-line);border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:12px}
.rd-detail.rd-open .rd-block>h3{margin:0;font-size:20px;letter-spacing:-.01em}
.rd-detail.rd-open .rd-block>p{margin:0;font-size:16px}

/* lists: checklist tiles, label in bold */
.rd-detail.rd-open ul:not([class]){list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px}
.rd-detail.rd-open ul:not([class])>li{position:relative;background:var(--o-panel2);border:1px solid var(--o-line);border-radius:12px;padding:12px 14px 12px 40px;font-size:15px;line-height:1.5;margin:0}
.rd-detail.rd-open ul:not([class])>li::before{content:"";position:absolute;left:14px;top:16px;width:14px;height:14px;border-radius:50%;background:var(--o-acc);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat}
.rd-detail.rd-open .rd-lbl{display:block;font-weight:700;margin-bottom:2px}
.rd-detail.rd-open li.rd-deliv{grid-column:1/-1;background:var(--o-goodbg);border-color:var(--o-good)}
.rd-detail.rd-open li.rd-deliv::before{background:var(--o-good)}
.rd-detail.rd-open li.rd-deliv .rd-lbl{color:var(--o-good)}
/* lists that already have their own design keep it */
.rd-detail.rd-open nav ul,.rd-detail.rd-open .card ul,.rd-detail.rd-open [class*="grid"]>ul{display:revert;grid-template-columns:none}

/* ordered lists: numbered cards */
.rd-detail.rd-open ol:not([class]){list-style:none;padding:0;margin:0;counter-reset:rdo;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.rd-detail.rd-open ol:not([class])>li{counter-increment:rdo;background:var(--o-panel);border:1px solid var(--o-line);border-radius:14px;padding:18px 18px 18px 60px;position:relative;font-size:15px;line-height:1.5;margin:0}
.rd-detail.rd-open ol:not([class])>li::before{content:counter(rdo,decimal-leading-zero);position:absolute;left:18px;top:16px;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:700;font-size:18px;color:var(--o-acc)}

/* FAQ pairs: question cards */
.rd-detail.rd-open dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:10px;margin:0}
.rd-detail.rd-open .rd-qa{background:var(--o-panel);border:1px solid var(--o-line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.rd-detail.rd-open .rd-qa dt{font-weight:700;font-size:16px;margin:0}
.rd-detail.rd-open .rd-qa dd{margin:0;font-size:15px;line-height:1.55}

/* plain paragraphs that carry a price or a callout stay readable width */
.rd-detail.rd-open .rd-split>p{max-width:68ch}
.rd-detail.rd-open .rd-intro{padding:0 0 8px}
.rd-detail.rd-open .rd-intro p{color:var(--o-text)}
/* no implicit-row gaps: spacing comes from the children, so a short section has no blank tail */
.rd-detail.rd-open .rd-split{row-gap:0}
.rd-detail.rd-open .rd-split>:not(h2){margin:0 0 18px!important}
.rd-detail.rd-open .rd-split>:not(h2):last-child{margin-bottom:0!important}
.rd-detail.rd-open .container.rd-split,.rd-detail.rd-open div.rd-split{padding:56px 0!important;border-top:1px solid var(--o-line)!important}
@media (max-width:860px){.rd-detail.rd-open .container.rd-split,.rd-detail.rd-open div.rd-split{padding:40px 0!important}}
.rd-detail.rd-open .ed-article>*,.rd-detail.rd-open .rd-split>*,.rd-detail.rd-open .rd-block>*{min-width:0;max-width:100%}
.rd-detail.rd-open [class*="grid"]>*{min-width:0}

/* QA 2026-11-11: text links meet the 44px touch target */
.rd a.rdi-go{display:inline-flex;align-items:center;min-height:44px}
/* QA 2026-11-11: sections with their own designed layout keep their spacing (process page photo quote) */
.rd-detail.rd-open>.container>section.ed-pull-section{padding:96px 40px!important;margin:24px 0 56px!important;border-radius:20px;overflow:hidden}
@media (max-width:640px){.rd-detail.rd-open>.container>section.ed-pull-section{padding:64px 24px!important}}