/* ============================================================================
   SUITE — SECTION SYSTEM  (Phase B)
   The composition layer of the approved visual direction, promoted out of the
   /products/_legal-cases-preview prototype into reusable classes.

   Colour, type and gradients come from suite-tokens.css and are traceable to
   the official SUITE Brand & Media Kit. THIS FILE ADDS LAYOUT ONLY — it
   introduces no colour, no font and no weight of its own.

   Patterns: hero · alternating grounds · editorial scale · numbered rail ·
   chronology spine · framed product UI · stat strip · callout · CTA band.
   ============================================================================ */

.s-wrap{max-width:var(--suite-maxw);margin:0 auto;padding-inline:clamp(20px,5vw,40px);}
.s-sec{padding-block:clamp(56px,8vw,104px);}
.s-sec--tight{padding-block:clamp(40px,5vw,68px);}

/* --- grounds -------------------------------------------------------------- */
.s-grad {background:var(--suite-gradient-surface);color:var(--suite-cloud);}
.s-infra{background:var(--suite-infra);color:var(--suite-cloud);}
.s-navy {background:var(--suite-navy);color:var(--suite-cloud);}
.s-cloud{background:var(--suite-cloud);color:var(--suite-navy);}
.s-white{background:var(--suite-white);color:var(--suite-navy);}
.s-grad .s-eyebrow,.s-infra .s-eyebrow,.s-navy .s-eyebrow{color:var(--suite-blue);}
.s-cloud .s-eyebrow,.s-white .s-eyebrow{color:var(--suite-steel);}
.s-grad .s-lead,.s-infra .s-lead,.s-navy .s-lead,
.s-grad .s-body,.s-infra .s-body,.s-navy .s-body{color:var(--suite-on-dark-muted);}
.s-cloud .s-lead,.s-white .s-lead,
.s-cloud .s-body,.s-white .s-body{color:var(--suite-on-light-muted);}

/* --- editorial type ------------------------------------------------------- */
.s-eyebrow{font-weight:var(--suite-w-ui);font-size:.75rem;
  letter-spacing:var(--suite-track-eyebrow);text-transform:uppercase;
  line-height:var(--suite-lh-ui);margin:0 0 20px;}
.s-display{font-weight:var(--suite-w-display);font-size:clamp(2.4rem,5.2vw,3.9rem);
  line-height:1.05;letter-spacing:var(--suite-track-heading);margin:0;text-wrap:balance;}
.s-h2{font-weight:var(--suite-w-display);font-size:clamp(1.8rem,3.4vw,2.7rem);
  line-height:1.12;letter-spacing:var(--suite-track-heading);margin:0;text-wrap:balance;}
.s-h3{font-weight:var(--suite-w-heading);font-size:1.22rem;line-height:1.32;
  letter-spacing:var(--suite-track-heading);margin:0;}
.s-lead{font-size:1.0625rem;line-height:var(--suite-lh-body);max-width:52ch;margin:20px 0 0;}
.s-body{font-size:1rem;line-height:var(--suite-lh-body);max-width:62ch;margin:0;}
.s-accent{color:var(--suite-blue);display:block;}
/* colour-only accent, for use inside a line rather than as its own line */
.s-accent-in{color:var(--suite-blue);}
/* The homepage headline rotates an industry phrase. Reserving the line means a
   long phrase and a short one occupy identical space, so the hero geometry is
   fixed no matter which word is showing. */
.s-rotate{display:block;min-height:1.05em;}
.s-hero-tail{display:block;}
.s-nowrap{white-space:nowrap;}

/* --- hero ----------------------------------------------------------------- */
.s-hero{display:grid;gap:clamp(36px,5vw,64px);grid-template-columns:1fr;align-items:center;
  padding-block:clamp(60px,9vw,116px);}
.s-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.s-band{text-align:center;}
.s-band .s-cta{justify-content:center;}
.s-band .s-lead{margin-inline:auto;}

/* --- numbered rail (a real sequence, never decoration) -------------------- */
.s-railwrap{margin-top:38px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;}
.s-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);
  position:relative;min-width:760px;}
.s-rail::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;
  background:var(--suite-accent-rule);}
.s-step{position:relative;text-align:center;}
.s-step__n{position:relative;z-index:1;width:40px;height:40px;margin:0 auto;border-radius:50%;
  display:grid;place-items:center;background:var(--suite-white);
  border:2px solid var(--suite-rule-light);font-weight:var(--suite-w-heading);
  font-size:.8rem;color:var(--suite-navy);font-variant-numeric:tabular-nums;}
.s-navy .s-step__n,.s-infra .s-step__n,.s-grad .s-step__n{
  background:var(--suite-navy);border-color:var(--suite-steel);color:var(--suite-cloud);}
.s-step__t{margin-top:12px;font-weight:var(--suite-w-ui);font-size:.85rem;
  line-height:var(--suite-lh-ui);padding-inline:4px;}

/* --- chronology spine (asymmetric, sticky caption) ------------------------ */
.s-spine{display:grid;gap:clamp(32px,5vw,60px);grid-template-columns:1fr;}
.s-spine__list{border-left:1px solid var(--suite-rule-light);
  padding-left:clamp(22px,3vw,38px);display:flex;flex-direction:column;
  gap:clamp(28px,4vw,42px);}
.s-navy .s-spine__list,.s-infra .s-spine__list,.s-grad .s-spine__list{border-left-color:var(--suite-rule-dark);}
.s-item{position:relative;}
.s-item::before{content:"";position:absolute;left:calc(-1 * clamp(22px,3vw,38px) - 5px);top:10px;
  width:9px;height:9px;border-radius:50%;background:var(--suite-blue);}
.s-item__n{font-weight:var(--suite-w-ui);font-size:.7rem;
  letter-spacing:var(--suite-track-eyebrow);color:var(--suite-steel);
  font-variant-numeric:tabular-nums;}
.s-item .s-h3{margin:8px 0 10px;}
.s-navy .s-item .s-h3,.s-infra .s-item .s-h3,.s-grad .s-item .s-h3{color:var(--suite-cloud);}

/* --- framed product UI ---------------------------------------------------- */
.s-shot{display:grid;gap:clamp(26px,4vw,48px);grid-template-columns:1fr;align-items:center;}
.s-shot--rev .s-frame{order:2;}
.s-frame{border-radius:var(--suite-radius-lg);overflow:hidden;background:var(--suite-white);
  border:1px solid var(--suite-rule-light);box-shadow:var(--suite-shadow);}
.s-navy .s-frame,.s-infra .s-frame,.s-grad .s-frame{border-color:var(--suite-rule-dark);}
.s-frame__bar{display:flex;align-items:center;gap:9px;padding:11px 15px;
  background:var(--suite-cloud);border-bottom:1px solid var(--suite-rule-light);}
.s-frame__dot{width:9px;height:9px;border-radius:50%;background:var(--suite-rule-light);}
.s-frame__tab{margin-left:8px;font-size:.74rem;color:var(--suite-on-light-muted);
  background:var(--suite-white);border:1px solid var(--suite-rule-light);
  border-radius:var(--suite-radius-sm);padding:4px 11px;font-weight:var(--suite-w-ui);}
.s-frame img{display:block;width:100%;height:auto;}
.s-note{font-size:.82rem;margin-top:12px;}
.s-cloud .s-note,.s-white .s-note{color:var(--suite-on-light-muted);}
.s-navy .s-note,.s-infra .s-note,.s-grad .s-note{color:var(--suite-on-dark-muted);}

/* --- callout -------------------------------------------------------------- */
.s-callout{border-left:2px solid var(--suite-blue);padding-left:20px;}
.s-callout--steel{border-left-color:var(--suite-steel);}

/* --- stat strip (hairlines, never cards) ---------------------------------- */
.s-stats{display:grid;grid-template-columns:1fr;border-top:1px solid var(--suite-rule-light);}
.s-navy .s-stats,.s-infra .s-stats,.s-grad .s-stats{border-top-color:var(--suite-rule-dark);}
.s-stat{padding:28px 0;border-bottom:1px solid var(--suite-rule-light);}
.s-navy .s-stat,.s-infra .s-stat,.s-grad .s-stat{border-bottom-color:var(--suite-rule-dark);}
.s-stat__f{font-weight:var(--suite-w-display);font-size:2.6rem;line-height:1;
  color:var(--suite-blue);font-variant-numeric:tabular-nums;}
.s-cloud .s-stat__f,.s-white .s-stat__f{color:var(--suite-navy);}
.s-stat__l{margin-top:11px;font-size:.95rem;line-height:var(--suite-lh-body);max-width:34ch;}

/* --- checklist ------------------------------------------------------------ */
.s-checks{display:grid;gap:14px;margin-top:26px;grid-template-columns:1fr;}
.s-check{display:flex;gap:11px;font-size:1rem;line-height:1.6;}
.s-check::before{content:"\2713";font-weight:var(--suite-w-heading);flex-shrink:0;
  color:var(--suite-navy);}
.s-navy .s-check::before,.s-infra .s-check::before,.s-grad .s-check::before{color:var(--suite-green);}

/* --- two-column prose / FAQ ----------------------------------------------- */
.s-two{display:grid;grid-template-columns:1fr;gap:clamp(26px,3.4vw,44px);margin-top:32px;}
.s-q{border-top:1px solid var(--suite-rule-light);padding-top:20px;}
.s-navy .s-q,.s-infra .s-q{border-top-color:var(--suite-rule-dark);}
.s-q .s-body{margin-top:10px;max-width:54ch;}

/* --- related pills -------------------------------------------------------- */
.s-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.s-pills a,.s-pills span{font-weight:var(--suite-w-ui);font-size:.875rem;text-decoration:none;
  color:var(--suite-navy);border:1px solid var(--suite-rule-light);
  background:var(--suite-white);border-radius:var(--suite-radius-pill);padding:10px 18px;
  transition:color .18s,border-color .18s;}
.s-pills a:hover{color:var(--suite-orange);border-color:var(--suite-orange);}
.s-grad .s-pills a,.s-grad .s-pills span,
.s-navy .s-pills a,.s-navy .s-pills span,
.s-infra .s-pills a,.s-infra .s-pills span{color:var(--suite-on-dark);
  background:transparent;border-color:var(--suite-rule-dark);}
.s-grad .s-pills a:hover,.s-navy .s-pills a:hover,.s-infra .s-pills a:hover{
  color:var(--suite-blue);border-color:var(--suite-blue);}

/* --- document motif (illustrative — never a fake UI screenshot) ----------- */
.s-doc{background:var(--suite-navy);border:1px solid var(--suite-rule-dark);
  border-radius:var(--suite-radius-lg);overflow:hidden;}
.s-doc__top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--suite-rule-dark);}
.s-doc__t{font-weight:var(--suite-w-heading);font-size:.9rem;color:var(--suite-cloud);}
.s-doc__tag{font-weight:var(--suite-w-ui);font-size:.66rem;
  letter-spacing:var(--suite-track-eyebrow);text-transform:uppercase;
  color:var(--suite-green);border:1px solid var(--suite-green);
  border-radius:var(--suite-radius-sm);padding:5px 9px;}
.s-doc__rows{padding:6px 20px 4px;}
.s-doc__row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px solid var(--suite-rule-dark);font-size:.9rem;}
.s-doc__row:last-child{border-bottom:0;}
.s-doc__k{color:var(--suite-on-dark-muted);}
.s-doc__v{color:var(--suite-cloud);font-weight:var(--suite-w-ui);text-align:right;
  font-variant-numeric:tabular-nums;}
.s-doc__foot{padding:18px 20px 20px;border-top:1px solid var(--suite-rule-dark);}
.s-doc__fl{font-weight:var(--suite-w-ui);font-size:.66rem;
  letter-spacing:var(--suite-track-eyebrow);text-transform:uppercase;
  color:var(--suite-on-dark-muted);}
.s-doc__fig{font-weight:var(--suite-w-display);font-size:2rem;color:var(--suite-cloud);
  margin-top:6px;line-height:1.1;font-variant-numeric:tabular-nums;}
.s-doc__sub{margin-top:6px;font-size:.82rem;color:var(--suite-green);}

/* --- responsive ----------------------------------------------------------- */
@media (min-width:820px){
  .s-checks{grid-template-columns:1fr 1fr;}
  .s-stats{grid-template-columns:repeat(3,1fr);gap:clamp(22px,4vw,54px);}
  .s-stat{border-bottom:0;}
  .s-two{grid-template-columns:1fr 1fr;}
}
@media (min-width:980px){
  .s-hero{grid-template-columns:1.12fr .88fr;}
  .s-spine{grid-template-columns:.82fr 1.18fr;}
  .s-spine__aside{position:sticky;top:96px;align-self:start;}
  .s-shot{grid-template-columns:1.3fr .7fr;}
  .s-shot--rev{grid-template-columns:.7fr 1.3fr;}
  .s-shot--rev .s-frame{order:0;}
}
@media (min-width:1120px){ .s-rail{min-width:0;grid-auto-columns:minmax(0,1fr);} }

/* --- linked feature cards (homepage product grid) ------------------------- */
.s-cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:32px;}
.s-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;
  border:1px solid var(--suite-rule-light);border-radius:var(--suite-radius-lg);
  padding:clamp(20px,2.4vw,28px);background:var(--suite-white);
  transition:border-color .18s,transform .18s;}
.s-card:hover{border-color:var(--suite-orange);transform:translateY(-2px);}
.s-card .s-h3,.s-card .s-body{margin:0;}
.s-card__go{font-weight:var(--suite-w-ui);font-size:.875rem;color:var(--suite-orange);margin-top:auto;}
.s-cloud .s-card{background:var(--suite-white);}
.s-navy .s-card,.s-infra .s-card,.s-grad .s-card{background:transparent;
  border-color:var(--suite-rule-dark);}
.s-navy .s-card:hover,.s-infra .s-card:hover,.s-grad .s-card:hover{border-color:var(--suite-blue);}

/* a differentiator check may also be a link to its spotlight section */
a.s-check{text-decoration:none;color:inherit;transition:color .18s;}
a.s-check:hover{color:var(--suite-orange);}
.s-navy a.s-check:hover,.s-infra a.s-check:hover,.s-grad a.s-check:hover{color:var(--suite-blue);}

@media (min-width:760px){.s-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1080px){.s-cards{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* --- hero variants -------------------------------------------------------- */
/* A hero with no second column was rendering its text in the left 40% of a
   full-width band, leaving a large empty half. With nothing truthful to put in
   that half, the band is centred instead -- the sanctioned answer when there is
   not enough content to justify two columns. */
.s-hero--solo{grid-template-columns:1fr;justify-items:center;text-align:center;}
.s-hero--solo > div{max-width:min(100%,860px);}
.s-hero--solo .s-display{max-width:20ch;margin-inline:auto;}
.s-hero--solo .s-lead{margin-inline:auto;}
.s-hero--solo .s-cta{justify-content:center;}
.s-hero--solo .s-pills{justify-content:center;}
/* an illustrative card carried over verbatim from the page being replaced */
.s-aside > div{max-width:520px;}
@media (min-width:1024px){.s-aside{justify-self:end;}}
/* region-priced figure carried over verbatim (site.js rewrites it per region) */
.s-price{margin:18px 0 6px;}
.s-price > *{font-size:clamp(2.2rem,4.4vw,3rem);font-weight:var(--suite-w-display);
  line-height:1.05;color:inherit;}

/* --- document pages (legal, security, contact) ---------------------------- */
/* Reference documents keep their own prose; they take the system's grounds
   and typography, not its marketing section rhythm. */
.s-doc-hero .page,.s-doc-hero header.page{margin:0;padding:0;border:0;}
.s-doc-hero h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:var(--suite-w-display);
  letter-spacing:var(--suite-track-display);line-height:1.06;margin:0;color:var(--suite-cloud);}
.s-doc-hero .updated{margin-top:14px;font-size:.9rem;color:var(--suite-on-dark-muted);}
.s-doc-body{padding-block:clamp(40px,5vw,68px);}
.s-doc-body .wrap{max-width:var(--suite-measure);margin:0;padding:0;}
.s-doc-body h2{font-size:clamp(1.15rem,2.1vw,1.4rem);font-weight:var(--suite-w-heading);
  color:var(--suite-navy);margin:34px 0 10px;letter-spacing:var(--suite-track-heading);}
.s-doc-body h3{font-size:1.02rem;font-weight:var(--suite-w-heading);color:var(--suite-navy);margin:22px 0 8px;}
.s-doc-body p,.s-doc-body li{color:var(--suite-on-light);line-height:var(--suite-lh-body);}
.s-doc-body a{color:var(--suite-navy);}
.s-doc-body a:hover{color:var(--suite-orange);}
/* a wide reference table scrolls inside its own box; the page never does */
.s-doc-body table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;}
.s-doc-body table th,.s-doc-body table td{white-space:nowrap;}

/* 1099 calculator: the slider row and its number box do not fit side by side
   on a phone, so the box wraps under the slider instead of pushing the page. */
@media (max-width:560px){
  .calc-slider-row{flex-wrap:wrap;}
  .calc-slider-row input[type="range"]{flex:1 1 100%;}
  .calc-slider-row .calc-numwrap{min-width:0;width:100%;flex-shrink:1;}
  .calc-slider-row .calc-numwrap input{width:100%;min-width:0;}
}

/* --- CTA legibility is decided by the GROUND, not by the class -------------
   A --ghost button carries Cloud text, which is correct on a dark ground and
   invisible on a light one. Rather than trust every call site to pick the right
   class, the section ground overrides it. A secondary button also needs an edge
   you can actually see, so its border is a stronger Steel on light grounds. */
.s-cloud .suite-btn--ghost,.s-white .suite-btn--ghost,.s-doc-body .suite-btn--ghost,
.s-cloud .suite-btn--reversed,.s-white .suite-btn--reversed{
  color:var(--suite-navy);border-color:var(--suite-steel);}
.s-cloud .suite-btn--reversed,.s-white .suite-btn--reversed{
  background:var(--suite-gradient);color:var(--suite-cloud);
  border-color:rgba(95,171,214,.55);}
.s-cloud .suite-btn--ghost:hover,.s-white .suite-btn--ghost:hover,
.s-doc-body .suite-btn--ghost:hover{color:var(--suite-orange);border-color:var(--suite-orange);}
/* on dark and gradient grounds the reversed treatment stays the primary */
.s-grad .suite-btn--reversed,.s-navy .suite-btn--reversed,.s-infra .suite-btn--reversed{
  background:var(--suite-cloud);color:var(--suite-navy);border-color:var(--suite-cloud);}
/* a numbered rail with no heading to anchor a left column runs as one narrow
   centred column rather than leaving half the section blank */
.s-spine--solo{grid-template-columns:1fr;justify-items:center;}
/* the aside is not hidden -- an eyebrow labelling the rail still belongs here,
   it just sits above the rail rather than alone in a 426px column */
.s-spine--solo .s-spine__aside{text-align:center;margin-bottom:8px;}
.s-spine--solo .s-spine__aside:empty{display:none;}
.s-spine--solo .s-spine__list{max-width:var(--suite-measure);width:100%;}
/* a secondary button on a dark ground needs an edge that reads against it */
.s-grad .suite-btn--ghost,.s-navy .suite-btn--ghost,.s-infra .suite-btn--ghost{
  border-color:var(--suite-blue);}
.s-grad .suite-btn--ghost:hover,.s-navy .suite-btn--ghost:hover,
.s-infra .suite-btn--ghost:hover{border-color:var(--suite-orange);color:var(--suite-orange);}
/* the signup form's OAuth buttons and the 1099 tool's outline button are real
   CTAs sitting on a pale card; a hairline at .28 measured 1.41 against it, which
   is a suggestion of a box rather than a box */
.oauth-btn,.btn-outline{border-color:var(--suite-steel) !important;}