/* Section system, layered on top of design2.css.
 *
 * design2 gave us tokens and atoms (.wrap, .btn-p, .card, .kicker). What it never gave us was a
 * SECTION pattern -- so every band on the homepage hand-rolled its own padding, heading size and
 * grid via inline styles. That is where the clutter came from: 251 inline style attributes and
 * 13,351 characters of CSS smeared through the markup, no two sections quite agreeing on
 * spacing. This file defines the pattern once.
 *
 * Additive only. design2.css is untouched, so the live pages keep rendering exactly as they do.
 */

/* ---- vertical rhythm -----------------------------------------------------------------------
   One spacing scale, not seven. Sections used padding-top values of 72/40/20px picked by eye;
   here every band is the same height and the eye can settle. */
.d2 .sec{padding:96px 0}
.d2 .sec.tight{padding:64px 0}
.d2 .sec.first{padding-top:56px}
.d2 .sec + .sec{border-top:1px solid var(--line2)}
@media(max-width:700px){.d2 .sec{padding:64px 0}.d2 .sec.tight{padding:48px 0}}

/* ---- section header ------------------------------------------------------------------------
   kicker / heading / lede, always in that order, always the same sizes. */
.d2 .sec-h{font-size:34px;font-weight:600;color:var(--txt2);letter-spacing:-.02em;
  line-height:1.15;max-width:18ch}
.d2 .sec-h.wide{max-width:24ch}
.d2 .sec-lede{font-size:16.5px;line-height:1.6;color:var(--dim);margin-top:16px;max-width:62ch}
.d2 .sec-head{margin-bottom:36px}
@media(max-width:700px){.d2 .sec-h{font-size:27px;max-width:none}.d2 .sec-lede{font-size:15.5px}}

/* ---- card grids ----------------------------------------------------------------------------
   The old markup repeated a 12-line inline grid definition per section, each with a slightly
   different gap. The hairline-gap look (1px gaps over a border-coloured background) is kept
   because it reads as one considered object rather than three floating boxes. */
.d2 .grid{display:grid;gap:1px;background:var(--line2);border:1px solid var(--line2);
  border-radius:12px;overflow:hidden}
.d2 .grid-2{grid-template-columns:repeat(2,1fr)}
.d2 .grid-3{grid-template-columns:repeat(3,1fr)}
.d2 .grid-4{grid-template-columns:repeat(4,1fr)}
.d2 .grid > .cell{background:var(--panel);padding:30px 26px}
.d2 .cell-n{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--accent);
  margin-bottom:12px;letter-spacing:.06em}
.d2 .cell-h{font-size:17px;font-weight:600;color:var(--txt);margin-bottom:8px}
.d2 .cell-p{font-size:14px;color:var(--dim2);line-height:1.6}
@media(max-width:900px){.d2 .grid-3,.d2 .grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.d2 .grid-2,.d2 .grid-3,.d2 .grid-4{grid-template-columns:1fr}}

/* ---- feature band: text one side, visual the other ----------------------------------------- */
.d2 .band{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.d2 .band.flip > :first-child{order:2}
@media(max-width:900px){.d2 .band{grid-template-columns:1fr;gap:32px}
  .d2 .band.flip > :first-child{order:0}}

/* ---- checklists ---------------------------------------------------------------------------- */
.d2 .ticks{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.d2 .ticks li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:#cdd9e4;
  list-style:none;line-height:1.55}
.d2 .ticks li::before{content:'✓';color:var(--accent);flex-shrink:0}
.d2 .ticks b{color:var(--txt);font-weight:600}

/* ---- panels and quiet notes ---------------------------------------------------------------- */
.d2 .panel{border:1px solid var(--line);border-radius:14px;background:var(--panel2);padding:28px}
.d2 .panel.sunk{background:linear-gradient(180deg,#0b1219,#090e14)}
.d2 .note{font-size:13px;color:var(--dim3);margin-top:14px;line-height:1.6}

/* ---- one CTA pattern, used sparingly -------------------------------------------------------
   The old page had ten CTA buttons, four of them the identical "Download the app". Repeating a
   call to action does not increase conversion once it is visible; it just makes the page feel
   like it is nagging. Three: hero, mid-page, close. */
.d2 .cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.d2 .cta-row.centre{justify-content:center}

/* ---- PRO tag ------------------------------------------------------------------------------- */
.d2 .tag-pro{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  color:var(--accent-dark);background:var(--accent);padding:3px 9px;border-radius:5px;
  letter-spacing:.08em;vertical-align:middle}
.d2 .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.d2 .eyebrow span:last-child{font-size:13px;color:var(--dim3);letter-spacing:.14em;
  text-transform:uppercase}

/* ---- stat strip ---------------------------------------------------------------------------- */
/* Row gap deliberately much tighter than the column gap: in the two-column hero the four
   stats wrap to 2x2, and an equal 44px gap made the two rows read as two unrelated groups. */
.d2 .stats{display:flex;gap:20px 44px;flex-wrap:wrap}
.d2 .stat-n{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:600;color:var(--txt2)}
.d2 .stat-l{font-size:12.5px;color:var(--dim3);margin-top:2px}

/* ---- timeframe evidence bar ---------------------------------------------------------------- */
.d2 .tfbar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;text-align:center;
  font-family:'IBM Plex Mono',monospace;font-size:12px}
.d2 .tf{border-radius:7px;padding:12px 4px;background:#0d1219;border:1px solid #172230}
.d2 .tf.good{background:#0d1a12;border-color:#143323}
.d2 .tf.bad{background:#1a0f10;border-color:#2a1a1c}
.d2 .tf-k{color:var(--dim4);font-size:10px}
.d2 .tf-v{color:#8fa3b5;font-size:14px;margin-top:2px}
.d2 .tf.good .tf-v{color:var(--accent)}
.d2 .tf.bad .tf-v{color:var(--neg)}
@media(max-width:620px){.d2 .tfbar{grid-template-columns:repeat(4,1fr)}}

/* Hero: text left, terminal right. Slightly wider left column than a plain 1fr 1fr so the
   headline keeps its short, punchy line breaks instead of stretching to fill. */
.d2 .band.hero-band{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.d2 .band.hero-band .sec-h{max-width:none}
@media(max-width:900px){.d2 .band.hero-band{grid-template-columns:1fr}}

/* Hero backdrop. (.jpg not .webp: the admin asset endpoint allowlist has no webp, and a
   53KB JPEG shows no banding on this image even under a hard brightness lift -- checked.)
   A generated data-visualisation still sits behind the hero, masked so it only appears on the
   right half. The left is where the headline and lede live, and text over texture is the fastest
   way to make a page look amateur -- so the mask keeps that side completely clean and lets the
   traces read behind the terminal card instead. Deliberately low opacity: this is depth, not
   decoration, and it must never compete with the product screenshot. */
.d2 .sec.hero-sec{position:relative;overflow:hidden}
.d2 .sec.hero-sec::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(hero-bg.jpg) right center / cover no-repeat;
  opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 18%,#000 52%);
          mask-image:linear-gradient(90deg,transparent 0%,transparent 24%,#000 62%);
}
.d2 .sec.hero-sec > *{position:relative;z-index:1}
/* On phones the layout is single-column and the artwork would sit directly under the headline. */
@media(max-width:900px){.d2 .sec.hero-sec::before{display:none}}

/* ---- video embeds ------------------------------------------------------------------------- */
.d2 .vid{width:100%;border-radius:12px;border:1px solid var(--line);background:#000;display:block;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9)}
.d2 .vid-cap{font-size:13.5px;color:var(--dim3);margin-top:12px;text-align:center}
/* One video on its own has no second column to balance against, so cap the width rather
   than let a 16:9 clip run edge to edge and read as a banner. */
.d2 .vid-solo{max-width:760px;margin:0 auto}
.d2 .note a{color:var(--accent);font-weight:600}