/* ============================================================
   SERAPHIN — imported page content
   Ported from the v5 static build and remapped from the original
   light editorial palette onto the carbon/red design system.
   Everything is scoped under .page-body so imported markup can
   never restyle the theme's own header, footer or components.
   ============================================================ */

.page-body{padding-block:var(--gap-xl)}
.page-body .sec{padding:var(--gap-xl) 0}
.page-body .sec:first-child{padding-top:0}
.page-body .wrap{padding-inline:0}
.page-body .head{max-width:52ch;margin-bottom:clamp(3rem,6vw,5rem)}
.page-body h1{font-size:clamp(2.2rem,5vw,4.2rem);line-height:.98;letter-spacing:-.03em;margin-bottom:1.5rem}
.page-body h2{font-size:var(--s-h2);margin-bottom:1.4rem}
.page-body h3{font-size:var(--s-h3);margin-bottom:.8rem}
.page-body p{margin-bottom:1.15rem;color:var(--muted)}
.page-body p:last-child{margin-bottom:0}
.page-body strong{color:var(--ink);font-weight:600}
.page-body a{color:var(--ink);border-bottom:1px solid var(--red);padding-bottom:1px}
.page-body a:hover{color:var(--red)}
.page-body .btn{border-bottom:0;padding-bottom:0}
.page-body table{width:100%;border-collapse:collapse;font-size:var(--s-small)}
.page-body th,.page-body td{text-align:left;padding:1.15rem 1.15rem 1.15rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.page-body th{font-weight:500;width:38%;color:var(--muted)}
.page-body td{font-family:var(--display);font-weight:700;font-style:italic;font-size:1.1rem;letter-spacing:-.02em;color:var(--ink)}
.page-body td small{font-family:var(--body);font-style:normal;font-weight:400;font-size:.84rem;color:var(--muted);display:block;margin-top:.4rem;line-height:1.55}
.page-body caption{text-align:left;font-size:var(--s-small);color:var(--muted);padding-bottom:1.15rem}

/* image wells carry the weave */
.page-body .shot,.page-body .thumb,.page-body .step-img,.page-body .chair-img{
  background-color:var(--surface-2);
  background-image:var(--twill);
  background-size:var(--twill-size) var(--twill-size);
}

/* ---- ported rules ---- */
.page-body *{box-sizing:border-box}
.page-body .narrow{max-width:68ch}
@media(min-width:980px){}
.page-body .crumb{padding:1.5rem 0;font-size:var(--s-small);color:var(--muted)}
.page-body .crumb a{text-decoration:none}
.page-body .crumb a:hover{text-decoration:underline}
.page-body .lede{padding-bottom:clamp(2.5rem,6vw,4rem)}
.page-body .kick{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem}
.page-body .lede h1{font-size:var(--s-h1);max-width:17ch;margin-bottom:1.75rem}
.page-body .lede p{font-size:var(--s-h3);color:var(--muted);line-height:1.4;max-width:50ch}
.page-body .sec{padding:clamp(3rem,7vw,5rem) 0;border-top:1px solid var(--line)}
.page-body .sec h2{font-size:var(--s-h2);margin-bottom:1.25rem}
.page-body .sec h3{font-size:var(--s-h3);margin:2.5rem 0 .75rem}
.page-body .sec .intro{color:var(--muted);margin-bottom:2.5rem;max-width:60ch}
.page-body .narrow p{margin-bottom:1rem}
.page-body .acl{background:var(--surface);color:var(--bg);padding:clamp(2rem,4vw,3rem)}
.page-body .acl h2{font-size:var(--s-h2);margin-bottom:1.25rem}
.page-body .acl p{opacity:.88;max-width:62ch}
.page-body .acl p + p{margin-top:1rem}
.page-body .acl .em{font-family:var(--display);font-size:var(--s-h3);opacity:1;line-height:1.4;border-left:2px solid var(--red);padding-left:1.25rem;margin:2rem 0}
.page-body table{width:100%;border-collapse:collapse;font-size:var(--s-small);margin:2rem 0}
.page-body caption{text-align:left;font-size:var(--s-small);color:var(--muted);padding-bottom:1rem}
.page-body thead th{text-align:left;padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--ink);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.page-body tbody th{text-align:left;padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--line);font-weight:500;width:32%;vertical-align:top}
.page-body td{padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.page-body td small{display:block;color:var(--muted);font-size:.85rem;margin-top:.25rem;line-height:1.5}
.page-body .steps{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.5rem;counter-reset:s}
.page-body .steps li{counter-increment:s;padding-left:3rem;position:relative;border-bottom:1px solid var(--line);padding-bottom:1.5rem}
.page-body .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--display);font-size:1.4rem;color:var(--red)}
.page-body .steps strong{display:block;margin-bottom:.35rem;font-weight:500}
.page-body .steps span{font-size:var(--s-small);color:var(--muted)}
.page-body .tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
@media(min-width:760px){}
.page-body .tier{background:var(--surface);padding:1.75rem}
.page-body .tier .n{font-family:var(--display);font-size:1.5rem;color:var(--red);display:block;margin-bottom:.6rem}
.page-body .tier h3{font-size:var(--s-h3);margin:0 0 .6rem}
.page-body .tier p{font-size:var(--s-small);color:var(--muted)}
.page-body .plainlist{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.25rem;max-width:62ch}
.page-body .plainlist li{border-bottom:1px solid var(--line);padding-bottom:1.25rem;font-size:var(--s-small);color:var(--muted)}
.page-body .plainlist strong{color:var(--ink);display:block;margin-bottom:.3rem;font-weight:500;font-size:var(--s-body)}
.page-body .split2{display:grid;gap:clamp(2rem,5vw,3.5rem);margin-top:2.5rem}
@media(min-width:860px){}
.page-body .col h3{font-size:var(--s-h3);margin:0 0 1rem}
.page-body .col ul{list-style:none;padding:0;margin:0;display:grid;gap:.85rem;font-size:var(--s-small);color:var(--muted)}
.page-body .col li{padding-left:1.4rem;position:relative}
.page-body .col.yes li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:1px;background:var(--red)}
.page-body .col.no li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:1px;background:var(--muted);opacity:.4}
.page-body .callout{background:var(--surface);color:var(--bg);padding:clamp(2rem,4vw,3rem);margin-top:3rem}
.page-body .callout h3{margin:0 0 1rem;font-size:var(--s-h3)}
.page-body .callout p{opacity:.85;max-width:56ch;font-size:var(--s-small)}
.page-body .callout p + p{margin-top:1rem}
.page-body .callout .btn{margin-top:1.75rem;border-color:var(--bg);color:var(--bg)}
.page-body .callout .btn:hover{background:var(--bg);color:var(--ink)}
.page-body .cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
@media(min-width:700px){}
.page-body .card{background:var(--surface);padding:1.75rem;text-decoration:none;display:block;transition:background .2s}
.page-body .card:hover{background:var(--surface-2)}
.page-body .card h3{font-size:var(--s-h3);margin:0 0 .5rem}
.page-body .card p{font-size:var(--s-small);color:var(--muted)}
.page-body .field{margin-bottom:1.75rem}
.page-body label{display:block;font-size:var(--s-small);font-weight:500;margin-bottom:.5rem}
.page-body .hint{font-size:.85rem;color:var(--muted);margin-bottom:.6rem;font-weight:400}
.page-body input,.page-body select,.page-body textarea{width:100%;font-family:var(--body);font-size:var(--s-body);padding:.85rem 1rem;border:1px solid var(--line);background:var(--bg);color:var(--ink);min-height:52px;border-radius:0}
.page-body textarea{min-height:120px;resize:vertical}
.page-body input:focus,.page-body select:focus,.page-body textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--ink)}
.page-body .formwrap{background:var(--surface);border:1px solid var(--line);padding:clamp(1.75rem,4vw,3rem);margin-top:2rem;max-width:46rem}
.page-body .grid2{display:grid;gap:1.75rem}
@media(min-width:640px){}
.page-body .disclaimer{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1.5rem;margin-top:3rem;max-width:66ch}
@media(min-width:800px){}
@media(min-width:980px){}
@media(max-width:479px){}
.page-body .lede h1{font-size:var(--s-h1);max-width:16ch;margin-bottom:1.75rem}
.page-body .lede p{font-size:var(--s-h3);color:var(--muted);line-height:1.4;max-width:48ch}
.page-body .acl{background:var(--surface);color:var(--bg);padding:clamp(2rem,4vw,3rem)}
.page-body .timeline{margin-top:2.5rem;border-top:1px solid var(--line)}
.page-body .yr{display:grid;gap:.5rem;padding:1.5rem 0;border-bottom:1px solid var(--line)}
@media(min-width:700px){}
.page-body .yr .n{font-family:var(--display);font-size:1.5rem}
.page-body .yr .std{font-size:var(--s-small);color:var(--muted)}
.page-body .yr .plus{font-size:var(--s-small)}
.page-body .yr.on{background:linear-gradient(90deg,rgba(180,89,60,.05),transparent)}
.page-body .yr .tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:.3rem}
.page-body .tiers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
@media(min-width:640px){}
@media(min-width:1080px){}
.page-body .tier{background:var(--surface);padding:1.75rem;display:flex;flex-direction:column}
.page-body .tier h3{font-size:var(--s-h3);margin-bottom:.4rem}
.page-body .tier .band{font-size:.8rem;color:var(--muted);margin-bottom:1.25rem}
.page-body .tier .p{font-family:var(--display);font-size:2.2rem;line-height:1;margin-bottom:1.5rem}
.page-body .tier ul{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.7rem;font-size:var(--s-small);color:var(--muted)}
.page-body .tier li{padding-left:1.1rem;position:relative}
.page-body .tier li::before{content:"";position:absolute;left:0;top:.65em;width:.45rem;height:1px;background:var(--red)}
.page-body .tier .for{margin-top:auto;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:1rem}
.page-body .col h3{font-size:var(--s-h3);margin-bottom:1rem}
.page-body .lede h1{font-size:var(--s-h1);max-width:18ch;margin-bottom:1.75rem}
.page-body .lede p{font-size:var(--s-h3);color:var(--muted);line-height:1.4;max-width:46ch}
.page-body .sec p + p{margin-top:1rem}
.page-body .sec .narrow p{margin-bottom:1rem}
.page-body .numbers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:2.5rem 0}
@media(min-width:700px){}
.page-body .num{background:var(--surface);padding:2rem 1.5rem}
.page-body .num .v{font-family:var(--display);font-size:clamp(2.2rem,4vw,3rem);line-height:1;display:block;margin-bottom:.75rem}
.page-body .num .v small{font-family:var(--body);font-size:1rem;color:var(--muted);margin-left:.2rem}
.page-body .num p{font-size:var(--s-small);color:var(--muted)}
.page-body th,.page-body td{text-align:left;padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.page-body thead th{font-weight:500;color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.page-body tbody th{font-weight:500;width:26%}
.page-body .callout{background:var(--surface);color:var(--bg);padding:clamp(2rem,4vw,3rem);margin:3rem 0}
.page-body .callout h3{margin-top:0;margin-bottom:1rem}
.page-body .artgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){}
.page-body .art{background:var(--surface);padding:1.75rem;text-decoration:none;display:block;transition:background .2s}
.page-body .art:hover{background:var(--surface-2)}
.page-body .art h3{font-size:var(--s-h3);margin:0 0 .5rem}
.page-body .art p{font-size:var(--s-small);color:var(--muted)}
.page-body .hero{padding:clamp(3rem,8vw,6.5rem) 0 clamp(2.5rem,5vw,4rem)}
.page-body .kicker{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:2rem}
.page-body .hero h1{font-size:var(--s-h1);max-width:16ch}
.page-body .hero h1 em{font-style:italic}
.page-body .hero-sub{margin-top:2rem;max-width:44ch;color:var(--muted);font-size:var(--s-h3);line-height:1.4}
.page-body .actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.5rem}
.page-body .strip{border-block:1px solid var(--line);margin-top:clamp(3rem,6vw,4.5rem)}
.page-body .strip-grid{display:grid;grid-template-columns:repeat(2,1fr)}
@media(min-width:880px){}
.page-body .spec{padding:2rem 1.5rem 2rem 0;border-right:1px solid var(--line)}
.page-body .spec:last-child{border-right:0}
@media(max-width:879px){.page-body .spec:nth-child(2n){border-right:0}}
.page-body .spec .fig{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;display:block}
.page-body .spec .unit{font-family:var(--body);font-size:1rem;letter-spacing:.02em;color:var(--muted);margin-left:.2rem}
.page-body .spec .lbl{display:block;margin-top:.75rem;font-size:var(--s-small);color:var(--muted);max-width:24ch}
.page-body .pending{color:var(--red);font-family:var(--body);font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.page-body .sec{padding:clamp(3.5rem,8vw,6rem) 0}
.page-body .sec-line{border-top:1px solid var(--line)}
.page-body .head{max-width:50ch;margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.page-body .head h2{font-size:var(--s-h2);margin-bottom:1rem}
.page-body .head p{color:var(--muted)}
.page-body .promises{display:grid;gap:2.5rem}
@media(min-width:820px){}
.page-body .promise{border-top:2px solid var(--ink);padding-top:1.5rem}
.page-body .promise h3{font-size:var(--s-h3);margin-bottom:.85rem}
.page-body .promise p{color:var(--muted);font-size:var(--s-small)}
.page-body .promise .fine{margin-top:1rem;font-size:.85rem;color:var(--muted);opacity:.8}
.page-body .range{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){}
@media(min-width:1100px){}
.page-body .chair{background:var(--surface);padding:1.75rem;text-decoration:none;display:flex;flex-direction:column;transition:background .2s}
.page-body .chair:hover{background:var(--surface-2)}
.page-body .chair-img{aspect-ratio:5/4;background:var(--surface-2);display:grid;place-items:center;margin-bottom:1.5rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.page-body .role{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.6rem}
.page-body .chair h3{font-size:var(--s-h3);margin-bottom:.5rem}
.page-body .chair .line{font-size:var(--s-small);color:var(--muted);margin-bottom:1.25rem}
.page-body .chair dl{display:flex;gap:1.5rem;margin:0 0 1.25rem;font-size:.85rem}
.page-body .chair dt{color:var(--muted);margin:0 0 .2rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.page-body .chair dd{margin:0;font-family:var(--display);font-size:1.35rem}
.page-body .chair .from{margin-top:auto;font-size:var(--s-small);font-weight:500}
.page-body .flying{background:var(--surface);color:var(--bg)}
.page-body .flying .head h2,.page-body .flying .head p{color:var(--bg)}
.page-body .flying .head p{opacity:.8}
.page-body .docs{display:grid;gap:1.5rem;margin-top:1rem}
@media(min-width:820px){}
.page-body .doc{border-top:1px solid rgba(20,22,26,.22);padding-top:1.25rem}
.page-body .doc h3{font-size:var(--s-h3);margin-bottom:.6rem}
.page-body .doc p{font-size:var(--s-small);opacity:.8}
.page-body .two{display:grid;gap:clamp(2rem,5vw,4rem)}
@media(min-width:880px){}
.page-body .plainlist{list-style:none;padding:0;margin:0;display:grid;gap:1.25rem}
.page-body .split{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
@media(min-width:820px){}
.page-body .who{background:var(--surface);padding:2rem 1.75rem}
.page-body .who.no{background:var(--surface-2)}
.page-body .who .status{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem;display:block}
.page-body .who.yes .status{color:var(--red)}
.page-body .who.no .status{color:var(--muted)}
.page-body .who h3{font-size:var(--s-h3);margin:0 0 .75rem}
.page-body .who p{font-size:var(--s-small);color:var(--muted)}
.page-body .formwrap{background:var(--surface);border:1px solid var(--line);padding:clamp(1.75rem,4vw,3rem);margin-top:2.5rem}
.page-body fieldset{border:0;padding:0;margin:0 0 1.75rem}
.page-body legend{font-size:var(--s-small);font-weight:500;margin-bottom:.5rem;padding:0}
.page-body .radio{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
.page-body .radio input{width:auto;min-height:auto;margin-top:.35rem;accent-color:var(--red)}
.page-body .radio label{margin:0;font-weight:400}
.page-body .radio label small{display:block;color:var(--muted);font-size:.85rem;margin-top:.15rem}
.page-body .callout h3{margin:0 0 1rem}
.page-body .plainlist{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.25rem;max-width:60ch}
.page-body .phero{display:grid;gap:clamp(2rem,5vw,4rem);padding-bottom:clamp(3rem,6vw,5rem)}
@media(min-width:940px){}
.page-body .gallery{display:grid;gap:1rem}
.page-body .shot{aspect-ratio:4/3;background:var(--surface-2);display:grid;place-items:center;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.page-body .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.page-body .thumb{aspect-ratio:1;background:var(--surface-2);display:grid;place-items:center;font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.page-body .role{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:1rem}
.page-body .phero h1{font-size:var(--s-h1);margin-bottom:1.25rem}
.page-body .tagline{font-size:var(--s-h3);color:var(--muted);line-height:1.35;margin-bottom:2rem;max-width:30ch}
.page-body .price{font-family:var(--display);font-size:2.4rem;line-height:1;margin-bottom:.4rem}
.page-body .price-note{font-size:var(--s-small);color:var(--muted);margin-bottom:2rem}
.page-body .buy{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}
@media(min-width:520px){}
.page-body .buy .btn{flex:1}
.page-body .reassure{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;font-size:var(--s-small);color:var(--muted)}
.page-body .reassure li{padding-left:1.4rem;position:relative}
.page-body .reassure li::before{content:"";position:absolute;left:0;top:.65em;width:.5rem;height:1px;background:var(--muted)}
.page-body .sec{padding:clamp(3rem,7vw,5rem) 0;border-top:1px solid var(--line)}
.page-body .head{max-width:52ch;margin-bottom:clamp(2rem,4vw,3rem)}
.page-body table{width:100%;border-collapse:collapse;font-size:var(--s-small)}
.page-body th{font-weight:500;width:38%;color:var(--muted)}
.page-body td{font-family:var(--display);font-size:1.15rem}
.page-body td small{font-family:var(--body);font-size:.85rem;color:var(--muted);display:block;margin-top:.25rem;line-height:1.5}
.page-body .fold{display:grid;gap:1.5rem}
@media(min-width:760px){}
.page-body .step{}
.page-body .step-img{aspect-ratio:1;background:var(--surface-2);display:grid;place-items:center;margin-bottom:1rem;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.page-body .step-n{font-family:var(--display);font-size:1.6rem;color:var(--red);display:block;margin-bottom:.4rem}
.page-body .step h3{font-size:var(--s-h3);margin-bottom:.5rem}
.page-body .step p{font-size:var(--s-small);color:var(--muted)}
.page-body .flying{background:var(--surface);color:var(--bg);padding:clamp(3rem,7vw,5rem) 0}
.page-body .flying h2{font-size:var(--s-h2);margin-bottom:1rem}
.page-body .flying .lead{opacity:.85;max-width:52ch;margin-bottom:2.5rem}
.page-body .dgrid{display:grid;gap:1.5rem}
@media(min-width:760px){}
.page-body .d{border-top:1px solid rgba(20,22,26,.22);padding-top:1.25rem}
.page-body .d h3{font-size:var(--s-h3);margin-bottom:.5rem}
.page-body .d p{font-size:var(--s-small);opacity:.8}
.page-body .fine{margin-top:2rem;font-size:.85rem;opacity:.7;max-width:60ch}
.page-body .two{display:grid;gap:clamp(2rem,5vw,4rem)}
.page-body .addons{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
@media(min-width:760px){}
.page-body .addon{background:var(--surface);padding:1.75rem;display:flex;flex-direction:column}
.page-body .addon .tag{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:.6rem}
.page-body .addon h3{font-size:var(--s-h3);margin:0 0 .5rem}
.page-body .addon p{font-size:var(--s-small);color:var(--muted);margin-bottom:1.25rem}
.page-body .addon .ap{font-family:var(--display);font-size:1.6rem;margin-top:auto;margin-bottom:1rem}
.page-body .addon .ap small{font-family:var(--body);font-size:.8rem;color:var(--muted);margin-left:.4rem}
.page-body .addon .btn{align-self:flex-start}
.page-body .router{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
@media(min-width:700px){}
@media(min-width:1100px){}
.page-body .q{background:var(--surface);padding:1.75rem;text-decoration:none;display:block;transition:background .2s}
.page-body .q:hover{background:var(--surface-2)}
.page-body .q .ask{font-size:var(--s-body);margin-bottom:1rem;display:block;font-weight:500}
.page-body .q .ans{font-family:var(--display);font-size:var(--s-h3);color:var(--red);display:block;margin-bottom:.5rem}
.page-body .q .why{font-size:var(--s-small);color:var(--muted)}
.page-body .tablewrap{overflow-x:auto;margin-top:2rem;-webkit-overflow-scrolling:touch}
.page-body table{width:100%;border-collapse:collapse;font-size:var(--s-small);min-width:920px}
.page-body thead th{text-align:left;padding:1rem .9rem 1rem 0;border-bottom:1px solid var(--ink);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);vertical-align:bottom;white-space:nowrap}
.page-body tbody th{text-align:left;padding:1.15rem .9rem 1.15rem 0;border-bottom:1px solid var(--line);font-weight:400;vertical-align:top}
.page-body tbody th a{text-decoration:none;font-family:var(--display);font-size:1.2rem;display:block;margin-bottom:.2rem}
.page-body tbody th a:hover{color:var(--red)}
.page-body tbody th small{color:var(--muted);font-size:.78rem}
.page-body td{padding:1.15rem .9rem 1.15rem 0;border-bottom:1px solid var(--line);vertical-align:top;font-family:var(--display);font-size:1.1rem;white-space:nowrap}
.page-body td.note{font-family:var(--body);font-size:.85rem;color:var(--muted);white-space:normal;min-width:200px}
.page-body .best{color:var(--red)}
.page-body .scrollhint{font-size:.82rem;color:var(--muted);margin-top:.75rem}
@media(min-width:1100px){}

/* ============================================================
   PORT REPAIR
   The first port of the v5 stylesheet lost the contents of every
   @media block (so no grid ever went multi-column) and remapped the
   three dark panels onto a light surface with light text, which made
   their copy invisible. Everything below restores that, in the
   Seraphin Carbon palette. Later rules win, so this section is the
   authority for anything it touches.
   ============================================================ */

/* Content brings its own .wrap containers, so keep the system measure
   rather than flattening it. */
.page-body .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--bleed)}

/* ---------- buttons used by the imported markup ---------- */
.page-body .btn-fill{background:var(--red);color:#fff;border-color:var(--red)}
.page-body .btn-fill:hover{background:var(--red-hi);border-color:var(--red-hi)}
.page-body .btn-out{background:transparent;color:var(--ink);border-color:var(--line)}
.page-body .btn-out:hover{border-color:var(--ink);background:transparent;color:var(--ink)}

/* ---------- link underlines: text links only ----------
   The blanket rule underlines block-level card links too, which draws a
   red rule under a whole card. Exempt the block links. */
.page-body .btn,
.page-body .card,
.page-body .art,
.page-body .q,
.page-body .chair,
.page-body .crumb a,
.page-body .thumbs a,
.page-body tbody th a{border-bottom:0;padding-bottom:0}
.page-body .crumb a:hover{color:var(--red-ink)}

/* ---------- the three dark panels ----------
   Originally #22262B with light type. --ink is the equivalent here. */
.page-body .acl,
.page-body .callout,
.page-body .flying{background:var(--ink);color:var(--bg)}
.page-body .acl h2,.page-body .acl h3,
.page-body .callout h2,.page-body .callout h3,
.page-body .flying h2,.page-body .flying h3{color:var(--bg)}
.page-body .acl p,
.page-body .callout p,
.page-body .flying p,
.page-body .flying .lead,
.page-body .flying .head p{color:var(--bg);opacity:.82}
.page-body .acl strong,
.page-body .callout strong,
.page-body .flying strong{color:var(--bg)}
.page-body .acl a,
.page-body .callout a,
.page-body .flying a{color:var(--bg)}
.page-body .acl .em{border-left-color:var(--red);color:var(--bg);opacity:1}
.page-body .flying .d,
.page-body .flying .doc{border-top:1px solid rgba(242,239,233,.28)}
.page-body .flying .d p,
.page-body .flying .doc p,
.page-body .flying .fine{color:var(--bg);opacity:.75}
.page-body .callout .btn{border-color:var(--bg);color:var(--bg);background:transparent}
.page-body .callout .btn:hover{background:var(--bg);color:var(--ink)}
.page-body .flying .btn-out{border-color:rgba(242,239,233,.5);color:var(--bg)}
.page-body .flying .btn-out:hover{border-color:var(--bg);background:var(--bg);color:var(--ink)}

/* ---------- tables ----------
   The 920px min-width belongs to the comparison table only; applied to
   every table it forced spec sheets to scroll on desktop. */
.page-body table{min-width:0}
.page-body .tablewrap table{min-width:920px}

/* ---------- timeline highlight (was a terracotta tint) ---------- */
.page-body .yr.on{background:linear-gradient(90deg,rgba(237,28,36,.06),transparent)}

/* ---------- image wells ---------- */
.page-body .shot img,
.page-body .thumb img,
.page-body .chair-img img,
.page-body .step-img img{width:100%;height:100%;object-fit:cover;display:block}
.page-body .shot:has(img),
.page-body .thumb:has(img),
.page-body .chair-img:has(img){background-image:none}

/* ============================================================
   RESPONSIVE — recovered from the v5 source
   ============================================================ */
@media(max-width:879px){
  .page-body .spec:nth-child(2n){border-right:0}
  .page-body .spec:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(min-width:520px){
  .page-body .buy{flex-direction:row}
}
@media(min-width:640px){
  .page-body .grid2{grid-template-columns:1fr 1fr}
  .page-body .tiers{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:700px){
  .page-body .router{grid-template-columns:repeat(2,1fr)}
  .page-body .numbers{grid-template-columns:repeat(3,1fr)}
  .page-body .artgrid{grid-template-columns:repeat(2,1fr)}
  .page-body .cards{grid-template-columns:repeat(2,1fr)}
  .page-body .yr{grid-template-columns:8rem 1fr 1fr;gap:2rem;align-items:baseline}
}
@media(min-width:760px){
  .page-body .range{grid-template-columns:repeat(2,1fr)}
  .page-body .fold{grid-template-columns:repeat(3,1fr)}
  .page-body .dgrid{grid-template-columns:repeat(3,1fr)}
  .page-body .addons{grid-template-columns:repeat(2,1fr)}
  .page-body .tiers{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:820px){
  .page-body .promises{grid-template-columns:1fr 1fr}
  .page-body .docs{grid-template-columns:repeat(3,1fr)}
  .page-body .split{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:860px){
  .page-body .split2{grid-template-columns:1fr 1fr}
}
@media(min-width:880px){
  .page-body .strip-grid{grid-template-columns:repeat(4,1fr)}
  .page-body .two{grid-template-columns:1fr 1fr}
}
@media(min-width:940px){
  .page-body .phero{grid-template-columns:1.1fr .9fr;align-items:start}
}
@media(min-width:1080px){
  .page-body .tiers{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1100px){
  .page-body .range{grid-template-columns:repeat(3,1fr)}
  .page-body .router{grid-template-columns:repeat(3,1fr)}
  .page-body .scrollhint{display:none}
}
/* form success banner */
.seraphin-sent{margin-top:var(--gap-md);border-left:2px solid var(--red);background:var(--surface);padding:1.15rem 1.35rem;color:var(--ink);font-weight:500}