/* Orion — system spec pages.
   Screen and print are equally the deliverable here: the printed version is
   what gets attached to an email, so the @media print block at the bottom is
   not an afterthought. */

.sp{font-family:var(--font-body);color:var(--text)}
.sp-wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.sp-measure{max-width:64ch}

/* ── header image ─────────────────────────────────────────────────────── */
.sp-hero{position:relative;min-height:56vh;display:flex;align-items:flex-end;
  padding:calc(var(--sp-9) + var(--sp-7)) 0 var(--sp-8);overflow:hidden}
.sp-hero-img{position:absolute;inset:0;z-index:0}
.sp-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
/* The scrim is what makes the type on the photograph readable, so it is set
   by measurement and not by eye. The header links, the eyebrow, the summary
   and the outline buttons are small type in gold or muted cream, and that
   needs the brightest thing behind it to be about #383838 or darker to reach
   4.5:1. Three layers, top one first:
   - a band across the top, for the header;
   - a wash from the left that holds full strength to the end of the text
     column and then clears, so the photograph still shows to the right;
   - the fade into the page at the foot.
   At 900px and below the text runs the full width, so the wash does too.
   These strengths leave the lowest reading on any of the five pages, at any
   width from 320 to 1920, at about 5.8:1. Lighten them only with
   tests/browser/spec-hero.js to hand. */
.sp-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  --sp-text-x:max(48px, calc(50vw - 572px));      /* where the text column starts */
  background:
    linear-gradient(to bottom,
      rgba(5,5,8,.76) 0,
      rgba(5,5,8,.73) 84px,
      rgba(5,5,8,0) 200px),
    linear-gradient(to right,
      rgba(5,5,8,.72) 0,
      rgba(5,5,8,.72) calc(var(--sp-text-x) + 600px),
      rgba(5,5,8,0) calc(var(--sp-text-x) + 940px)),
    linear-gradient(to top,
      var(--ink) 0%,
      rgba(5,5,8,.86) 26%,
      rgba(5,5,8,.52) 54%,
      rgba(5,5,8,.28) 78%,
      rgba(5,5,8,.42) 100%)}
@media(max-width:900px){
  .sp-hero-scrim{background:linear-gradient(to top,
    var(--ink) 0%,
    rgba(5,5,8,.76) 30%,
    rgba(5,5,8,.72) 100%)}
}
.sp-hero .sp-wrap{position:relative;z-index:2;width:100%}
.sp-eyebrow{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold);margin:0 0 var(--sp-4)}
.sp-title{font-family:var(--font-display);font-size:var(--fs-8);font-weight:var(--fw-semi);
  line-height:var(--lh-tight);letter-spacing:var(--ls-tight);color:var(--cream);margin:0}
.sp-sum{margin:var(--sp-4) 0 0;font-family:var(--font-display);font-style:italic;
  font-size:var(--fs-5);color:var(--gold);max-width:36ch}
.sp-hero-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}

/* ── sections ─────────────────────────────────────────────────────────── */
.sp-section{padding:var(--sp-8) 0;border-top:var(--line)}
.sp-section:first-of-type{border-top:0}
.sp-h{font-family:var(--font-body);font-size:var(--fs-1);font-weight:var(--fw-semi);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--gold);
  margin:0 0 var(--sp-5)}
.sp-lead{font-size:var(--fs-4);line-height:var(--lh-body);color:var(--text);margin:0}
.sp-body{font-size:var(--fs-3);line-height:var(--lh-body);color:var(--text-2);margin:0}
.sp-body + .sp-body{margin-top:var(--sp-4)}

/* numbered steps */
.sp-steps{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:var(--sp-5)}
.sp-steps li{counter-increment:st;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-4);align-items:baseline}
.sp-steps li::before{content:counter(st,decimal-leading-zero);
  font-family:var(--font-display);font-size:var(--fs-5);color:var(--gold);line-height:1}
.sp-steps strong{display:block;color:var(--cream);font-weight:var(--fw-semi);
  font-size:var(--fs-4);margin-bottom:var(--sp-1);font-family:var(--font-display)}
.sp-steps span{font-size:var(--fs-3);line-height:var(--lh-body);color:var(--text-2)}

/* plain lists */
.sp-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.sp-list li{position:relative;padding-left:var(--sp-5);font-size:var(--fs-3);
  line-height:var(--lh-body);color:var(--text-2)}
.sp-list li::before{content:'';position:absolute;left:0;top:.68em;width:7px;height:1px;
  background:var(--gold)}
.sp-list strong{color:var(--cream);font-weight:var(--fw-semi)}

.sp-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-7)}

/* timeline */
.sp-time{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);
  counter-reset:none}
.sp-time div{padding-top:var(--sp-4);border-top:var(--line-strong)}
.sp-time dt{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp-2)}
.sp-time dd{margin:0;font-size:var(--fs-2);line-height:var(--lh-body);color:var(--text-2)}

/* integrations */
.sp-integrations{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:0;padding:0}
.sp-integrations li{list-style:none;padding:var(--sp-2) var(--sp-4);border:var(--line);
  border-radius:var(--r-pill);font-size:var(--fs-2);color:var(--text-2)}

/* price */
.sp-price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5);
  max-width:34rem}
.sp-price div{padding:var(--sp-5);border:var(--line);border-radius:var(--r-md);
  background:rgba(255,255,255,.015)}
.sp-price dt{font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-2)}
.sp-price dd{margin:0;font-family:var(--font-display);font-size:var(--fs-7);
  font-weight:var(--fw-semi);color:var(--cream);line-height:1;font-variant-numeric:tabular-nums}
.sp-price dd small{font-family:var(--font-body);font-size:var(--fs-2);font-weight:var(--fw-regular);
  color:var(--text-3);display:block;margin-top:var(--sp-2);letter-spacing:0}
.sp-bundle{margin:var(--sp-5) 0 0;padding:var(--sp-4) var(--sp-5);border-left:2px solid var(--gold);
  background:rgba(201,168,76,.05);font-size:var(--fs-3);line-height:var(--lh-body);
  color:var(--text);max-width:56ch}
.sp-guarantee{margin:var(--sp-5) 0 0;font-size:var(--fs-4);color:var(--cream);
  font-family:var(--font-display)}

/* pairs */
.sp-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);
  max-width:46rem}
.sp-pair{display:block;padding:var(--sp-5);border:var(--line);border-radius:var(--r-md);
  text-decoration:none;transition:border-color var(--dur-2) var(--ease),
  background var(--dur-2) var(--ease)}
.sp-pair:hover{border-color:var(--line-strong-colour);background:rgba(255,255,255,.02)}
.sp-pair b{display:block;font-family:var(--font-display);font-size:var(--fs-5);
  font-weight:var(--fw-semi);color:var(--cream)}
.sp-pair span{display:block;margin-top:var(--sp-2);font-size:var(--fs-2);color:var(--text-3)}

/* download */
.sp-dl{background:none;border:var(--line-strong);color:var(--gold);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-1);font-weight:var(--fw-semi);
  letter-spacing:var(--ls-caps);text-transform:uppercase}
.sp-dl:hover{border-color:var(--gold);color:var(--gold-bright)}

/* letterhead is print-only on screen */
.sp-letterhead,.sp-foot{display:none}

@media(max-width:900px){
  .sp-two,.sp-pairs,.sp-price{grid-template-columns:1fr}
  .sp-time{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .sp-wrap{padding:0 var(--sp-5)}
  .sp-time{grid-template-columns:1fr}
  .sp-hero{min-height:48vh}
}

/* ═══ PRINT — a clean A4 spec sheet ══════════════════════════════════════
   This is the version that gets emailed, so it is typeset for paper: ink on
   white, the photograph dropped, the navigation and calls to action dropped,
   and page breaks placed so a section never splits across a sheet. */
@media print{
  :root{
    --ink:#fff; --surface:#fff;
    --cream:#111; --text:#1c1c1c; --text-2:#2e2e2e; --text-3:#555;
    --gold:#6B5310; --gold-bright:#6B5310;
    --line:1px solid #d9d9d9; --line-colour:#d9d9d9;
    --line-strong:1px solid #b9a25f; --line-strong-colour:#b9a25f;
  }
  @page{size:A4;margin:16mm 15mm}
  html,body{background:#fff!important;color:#1c1c1c}
  nav,footer,.skip-link,.sp-hero-img,.sp-hero-scrim,.sp-hero-actions,.sp-suite-line,
  .sp-dl,.sp-next,.sp-pairs-section{display:none!important}

  .sp-wrap{max-width:none;padding:0}
  .sp-hero{min-height:0;padding:0;display:block;overflow:visible}

  /* letterhead on the first sheet */
  .sp-letterhead{display:block;border-bottom:2px solid #111;padding-bottom:7px;
    margin-bottom:16px}
  .sp-letterhead .lh-mark{font-family:'Cinzel',serif;font-size:13pt;letter-spacing:.3em;
    color:#111}
  .sp-letterhead .lh-sub{font-size:8.5pt;color:#555;margin-top:2px;
    display:flex;justify-content:space-between;gap:12px}

  .sp-title{font-size:23pt;color:#111;letter-spacing:0}
  .sp-sum{font-size:12pt;color:#6B5310;margin-top:4px;max-width:none}
  .sp-eyebrow{font-size:8pt;color:#6B5310;margin-bottom:6px}

  .sp-section{padding:4pt 0;border-top:1px solid #ddd;break-inside:avoid}
  .sp-h{font-size:8pt;color:#6B5310;margin-bottom:4pt}
  .sp-lead{font-size:10.5pt;color:#1c1c1c;line-height:1.45}
  .sp-body{font-size:9.5pt;color:#2e2e2e;line-height:1.45}
  .sp-list li,.sp-steps span{font-size:9.5pt;color:#2e2e2e;line-height:1.45}
  .sp-list{gap:2.5pt}
  .sp-steps{gap:5pt}
  .sp-steps li::before{font-size:12pt;color:#6B5310}
  .sp-steps strong{font-size:10pt;color:#111}
  .sp-list li::before{background:#6B5310}

  .sp-two{gap:14pt}
  .sp-time{grid-template-columns:repeat(4,1fr);gap:9pt}
  .sp-time div{border-top:1px solid #b9a25f;padding-top:4pt}
  .sp-time dt{font-size:7.5pt;color:#6B5310;margin-bottom:2pt}
  .sp-time dd{font-size:9pt;color:#2e2e2e;line-height:1.45}

  .sp-integrations li{border:1px solid #d9d9d9;font-size:9pt;color:#2e2e2e;
    padding:1.5pt 7pt}

  .sp-price{grid-template-columns:repeat(2,1fr);gap:9pt;max-width:none}
  .sp-price div{border:1px solid #d9d9d9;padding:5pt 7pt;background:none}
  .sp-price dt{font-size:7.5pt;color:#555}
  .sp-price dd{font-size:13pt;color:#111}
  .sp-price dd small{font-size:8.5pt;color:#555}
  .sp-bundle{border-left:2px solid #b9a25f;background:#faf7ef;font-size:9.5pt;
    padding:4pt 8pt;color:#1c1c1c;margin-top:6pt}
  .sp-guarantee{font-size:11pt;color:#111;margin-top:6pt}

  /* Sheet one is what the system is and does; sheet two is what it needs,
     how long it takes and what it costs. Forcing the break here rather than
     letting content height decide keeps all five specs identical. Sheet two
     runs to roughly 1010 of 1002px of A4 content box, which is why the
     spacing above is as tight as it is — loosen it and Price falls to a
     third, near-empty sheet. */
  .sp-break{break-before:page;page-break-before:always}

  .sp-foot{display:block;margin-top:8pt;padding-top:5pt;border-top:1px solid #ccc;
    font-size:8pt;color:#555;line-height:1.45}
  a{color:#111;text-decoration:none}
}