/* silo.css: the silo city pages' body (quick 261006-euy), ported from the mockup Omar approved
   on 2026-10-06 (.planning/quick/261006-euy-silo-city-pages-body-in-the-new-look-fro/mockup-ref/silo.css).
   Loaded only by the 330 silo pages and their 8 templates, after /styles-xala.css,
   /assets/home/home.css and /assets/services/services.css (whose .rp report-cover the brief card
   reuses), from ONE place: SILO_HEAD in scripts/silo-body.mjs. Every rule is scoped to body.slx
   and every class this file defines carries the slx- prefix, which no other stylesheet uses.
   Bump the ?v= in SILO_CSS (scripts/silo-body.mjs) whenever this file changes after it ships. */
.slx .slx-hero{align-items:center}
.slx .slx-card-wrap{position:relative;width:100%;max-width:500px;justify-self:end;padding:3% 9% 7% 3%;box-sizing:border-box}
.slx .slx-card-wrap::before{content:"";position:absolute;z-index:0;top:2%;right:2%;width:82%;height:90%;background:#fff;border:1px solid #d9d9d9;border-radius:3px;transform:rotate(3.5deg);box-shadow:0 20px 40px -24px rgba(10,10,10,.3)}
.slx .slx-card{position:relative;z-index:1;transform:rotate(-1.2deg);box-shadow:0 40px 70px -30px rgba(10,10,10,.5)}
.slx .slx-card .rp-title{font-size:max(19px,7.6cqi);line-height:1.08}
.slx .slx-card .rp-meta dd{font-weight:550}
.slx .slx-card .rp-title{margin-bottom:0}
.slx .slx-inside{margin:8cqi 0 7cqi}
.slx .slx-inside-h{font-size:max(10px,3cqi);color:var(--ink-2);margin:0 0 2.4cqi;font-weight:500}
.slx .slx-inside ol{list-style:none;margin:0;padding:0;display:grid;gap:2cqi;counter-reset:slx}
.slx .slx-inside li{counter-increment:slx;display:grid;grid-template-columns:5.2cqi 1fr;font-size:max(10.5px,3.15cqi);font-weight:600;line-height:1.3;letter-spacing:-.01em}
.slx .slx-inside li::before{content:counter(slx);color:var(--ink-2);font-weight:500;font-variant-numeric:tabular-nums}
.slx .slx-say{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:start}
.slx .slx-lead{font-size:clamp(18px,1.35vw,20px);line-height:1.6;letter-spacing:-.006em;font-weight:450;margin:0;color:var(--ink);max-width:40ch}
.slx .slx-body p{font-size:17px;line-height:1.65;color:var(--ink-2);margin:0 0 18px;max-width:62ch}
.slx .slx-body p:last-child{margin-bottom:0}
.slx .slx-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.slx .slx-rows li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,5vw,88px);padding:24px 0;border-bottom:1px solid var(--rule)}
.slx .slx-rows b{font-size:19px;line-height:1.35;font-weight:650;letter-spacing:-.012em}
.slx .slx-rows span{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.slx .slx-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);border-top:1px solid var(--ink);padding-top:28px}
.slx .slx-case h3{font-size:20px;line-height:1.3;margin:0 0 12px;max-width:24ch}
.slx .slx-case p{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:0}
.slx .slx-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(20px,3vw,48px);border-top:1px solid var(--ink)}
.slx .slx-link{display:block;padding:24px 18px 28px 0;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none;transition:background-color .2s var(--ease)}
.slx .slx-link:hover{background:var(--paper-2)}
/* a page with one related card: it takes the whole row, so its rule runs the width of the rule above it */
.slx .slx-link:only-child{grid-column:1/-1}
.slx .slx-tag{display:block;font-size:14px;color:var(--ink-2);margin:0 0 10px}
.slx .slx-link b{display:block;font-size:22px;line-height:1.25;font-weight:650;letter-spacing:-.018em;margin:0 0 8px}
.slx .slx-link .slx-desc{display:block;font-size:16.5px;line-height:1.55;color:var(--ink-2);max-width:48ch}
.slx .slx-close .cta-row{margin-top:26px}
/* the close's email link reads as a link: the house .alink treatment (ink, hairline rule; hover = rule contrast) */
.slx .slx-close p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-strong);padding-bottom:1px;transition:border-color .15s var(--ease)}
.slx .slx-close p a:hover{border-color:var(--ink)}
@media (max-width:980px){
  .slx .slx-card-wrap{justify-self:center;max-width:420px;padding:4% 10% 8% 4%}
  .slx .slx-say,.slx .slx-rows li{grid-template-columns:minmax(0,1fr);gap:10px}
  .slx .slx-cases{grid-template-columns:minmax(0,1fr);gap:28px}
  .slx .slx-links{grid-template-columns:minmax(0,1fr)}
}
/* a page whose own headline is a full sentence: smaller, so it does not stack five lines deep */
.slx .slx-hero h1.slx-long{font-size:clamp(32px,3.3vw,48px);max-width:20ch}
/* a deliverable that is one sentence with no natural split spans the row instead of leaving the right column empty */
.slx .slx-rows li.slx-solo b{grid-column:1/-1;max-width:62ch}
/* a deliverables list made mostly of single sentences reads as a contents list, numbered */
.slx .slx-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--ink);counter-reset:slxn}
/* align-content:start: an item beside a taller neighbour keeps its detail right under its label */
.slx .slx-list li{counter-increment:slxn;display:grid;grid-template-columns:40px minmax(0,1fr);align-content:start;padding:22px 0;border-bottom:1px solid var(--rule)}
.slx .slx-list li::before{content:counter(slxn);font-size:15px;line-height:1.5;color:var(--ink-2);font-variant-numeric:tabular-nums}
.slx .slx-list li b,.slx .slx-list li span{grid-column:2}
.slx .slx-list li b{font-size:18px;line-height:1.45;font-weight:500;letter-spacing:-.008em}
.slx .slx-list li span{font-size:16px;line-height:1.55;color:var(--ink-2);margin-top:4px}
@media (max-width:980px){.slx .slx-list{grid-template-columns:minmax(0,1fr)}}
/* styles-xala.css gives every <main> a 24px phone inset (its 680px block); the hero section
   already carries the gutter, so the silo <main> takes none and the hero lines up with the sections */
.slx #main-content{padding:0}