/* ==========================================================================
   Salespuzzle121 - the consultancy layer.

   Six pages share this stylesheet: the landing page at /Salespuzzle121 and
   the five pages under /salespuzzle121/. Every other page on the site keeps
   its CSS inline; this family does not, because six copies of the same
   diagram CSS would drift within a month.

   It is the SAME design system as the rest of the site - identical tokens,
   identical type scale, identical buttons - with one deliberate difference:
   Salespuzzle121 pages open on a dark band. That is the section's signature.
   A visitor should know within one glance that they have left the software
   pages and arrived at the consultancy.

   Load order on a 121 page:  sp121.css, then sp-nav.css, then sp-footer.css.
   The nav and footer stylesheets carry literal fallbacks for every custom
   property, so they do not depend on the :root block below - but they do
   inherit it, which is why the menu looks the same here as everywhere else.
   ========================================================================== */

@font-face{font-family:'Clash Display';src:url(/fonts/clash-display-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url(/fonts/clash-display-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url(/fonts/clash-display-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Albert Sans';src:url(/fonts/albert-sans.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --brand:#3DA435; --brand-d:#2C7D28; --brand-l:#7DBE3C; --brand-ink:#1E5A22;
  --bg:#FDFDFA; --paper:#F4F7F1; --card:#FFFFFF;
  --ink:#1B2A20; --ink-soft:#28382D;
  --muted:#5C6B60; --faint:#8A988D;
  --line:#E4E9E1; --line-soft:#EEF2EA;
  --tint:rgba(61,164,53,.07); --tint-line:rgba(61,164,53,.22);
  --dark:#0E1A12; --dark-2:#122018;
  --crit:#C24E2E;
  --display:'Clash Display','Albert Sans','Segoe UI',sans-serif;
  --sans:'Albert Sans','Segoe UI',system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;
  --wrap:1180px; --r:20px;
  --shadow-s:0 2px 10px -4px rgba(27,42,32,.08);
  --shadow-m:0 18px 40px -22px rgba(27,42,32,.22);
  --shadow-l:0 30px 60px -28px rgba(27,42,32,.28);

  /* One accent per service, drawn from the journey palette already used by
     the menu and the pricing page. Each service page sets --c to its own. */
  --c-engine:#2C7D28;    /* Commercial Engine */
  --c-terr:#3F8FBF;      /* Territory & Sales Organisation */
  --c-perf:#6E7FC4;      /* Sales Performance */
  --c-ai:#0E9488;        /* AI Build for Commercial */
  --c:var(--brand-d);
}

*{box-sizing:border-box}
body{margin:0}
.sp{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.65;overflow-x:clip}
.sp *{box-sizing:border-box}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
h1,h2,h3{margin:0;text-wrap:balance}
h1,h2,.thesis{font-family:var(--display);letter-spacing:-.022em;line-height:1.06}
p{margin:0}
section{padding:clamp(60px,8vw,116px) 0}

.chapter{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-d);font-weight:600;display:inline-flex;align-items:center;gap:10px}
.chapter::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55}
.thesis{font-size:clamp(27px,4.2vw,48px);font-weight:600}
.lead{color:var(--muted);font-size:clamp(16px,1.6vw,19px);line-height:1.7;max-width:62ch}
.lead + .lead{margin-top:16px}
.grn{color:var(--brand-d)}
.sec-head{max-width:70ch}
.sec-head .thesis{margin-top:16px}
.sec-head .lead{margin-top:18px}

/* Buttons - identical to the rest of the site */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:14px 24px;border-radius:13px;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;font-family:var(--sans)}
.btn:focus-visible{outline:3px solid rgba(61,164,53,.45);outline-offset:2px}
.btn-primary{background:linear-gradient(180deg,var(--brand-l),var(--brand));color:#fff;box-shadow:0 10px 24px -8px rgba(44,125,40,.55), inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 16px 34px -10px rgba(44,125,40,.65)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:#C6D0C4;box-shadow:var(--shadow-s)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-2px)}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-line:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(4px)}

/* Reveal on scroll - same behaviour and class name as every other page */
.r.pre{opacity:0;transform:translateY(20px)}
.r.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){.r.pre{opacity:1;transform:none}}

/* ==========================================================================
   THE DARK HERO - the section signature
   ========================================================================== */
.s1-hero{
  background:
    radial-gradient(760px 380px at 12% -10%, color-mix(in srgb, var(--c) 42%, transparent), transparent 62%),
    linear-gradient(120deg,var(--dark),var(--dark-2));
  color:#fff;padding:clamp(46px,7vw,86px) 0 clamp(50px,7vw,90px);
}
@supports not (color:color-mix(in srgb, red 40%, transparent)){
  .s1-hero{background:radial-gradient(760px 380px at 12% -10%, rgba(61,164,53,.34), transparent 62%),linear-gradient(120deg,var(--dark),var(--dark-2))}
}
.s1-crumb{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:600}
.s1-crumb a{color:var(--brand-l)}
.s1-crumb a:hover{color:#fff}
.s1-hero h1{font-size:clamp(31px,5vw,58px);font-weight:600;margin-top:20px;color:#fff;max-width:19ch}
.s1-hero .s1-lead{color:#B6C4B9;font-size:clamp(16px,1.7vw,19.5px);line-height:1.68;margin-top:22px;max-width:60ch}
.s1-hero .s1-lead + .s1-lead{margin-top:14px}
.s1-hero .s1-lead b{color:#fff;font-weight:650}
.s1-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.s1-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.s1-chips span{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#CFE0C9;font-weight:600;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 13px}
.s1-mark{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brand-l);font-weight:700}

/* Three-line proposition, used on the landing page and in the hero rail */
.s1-tri{display:grid;gap:6px;margin-top:30px}
.s1-tri span{font-family:var(--display);font-size:clamp(18px,2.2vw,25px);font-weight:600;color:#fff;line-height:1.2}
.s1-tri span:nth-child(1){color:#fff}
.s1-tri span:nth-child(2){color:#D7E5D3}
.s1-tri span:nth-child(3){color:var(--brand-l)}

/* ==========================================================================
   LANDING - the four offerings
   ========================================================================== */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:46px}
@media(max-width:860px){.svc-grid{grid-template-columns:1fr}}
.svc{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-top:4px solid var(--c);border-radius:var(--r);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-m);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.svc:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.svc-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c);font-weight:700}
.svc h3{font-family:var(--display);font-size:clamp(21px,2.6vw,27px);font-weight:600;margin-top:10px;line-height:1.12}
/* Same trap as .jstage span above: the question is a <p> inside .svc, so a
   bare ".svc p" outranks ".svc-q" and repaints it 15px muted grey - identical
   to the paragraph beneath it, and disagreeing with the nav dropdown, which
   shows these same four questions in their service accent. */
.svc-q{font-family:var(--display);font-size:clamp(16px,1.8vw,19px);font-weight:600;color:var(--c);margin-top:10px;line-height:1.3}
.svc p:not(.svc-q){font-size:15px;color:var(--muted);margin-top:14px;line-height:1.62;max-width:52ch}
.svc-l{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.svc-l li{font-size:12.5px;font-weight:600;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line-soft);border-radius:999px;padding:6px 12px}
.svc-go{margin-top:auto;padding-top:22px;font-size:14.5px;font-weight:700;color:var(--c);display:inline-flex;align-items:center;gap:8px}
.svc:hover .svc-go .arw{transform:translateX(4px)}
.svc-go .arw{transition:transform .18s ease}
.svc-eng{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);font-weight:600}

/* ==========================================================================
   FLOW - a horizontal process (Understand -> Diagnose -> ... -> Measure)
   ========================================================================== */
.flow{display:flex;align-items:stretch;gap:8px;margin-top:44px;flex-wrap:wrap}
.flow-n{flex:1 1 140px;min-width:124px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--c);border-radius:14px;padding:15px 16px;box-shadow:var(--shadow-s)}
.flow-n b{display:block;font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.15}
.flow-n span{display:block;font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}
.flow-a{display:flex;align-items:center;color:var(--faint);font-size:17px;font-weight:700}
@media(max-width:820px){.flow{flex-direction:column}.flow-a{transform:rotate(90deg);justify-content:center;width:100%;padding:2px 0}}

/* ==========================================================================
   JOURNEY - Attract -> Engage -> Convert -> Win -> Retain -> Grow
   One connected rail, not six separate boxes: the point of the diagram is
   that they are a single system.
   ========================================================================== */
.jrail{margin-top:44px;position:relative}
.jrail-line{position:absolute;left:0;right:0;top:26px;height:2px;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 25%,#fff));border-radius:2px}
@supports not (background:color-mix(in srgb, red 25%, #fff)){.jrail-line{background:var(--c);opacity:.5}}
.jrail-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;position:relative}
.jstage{text-align:center}
/* display:block is load-bearing: the dot is a <span>, and width/height/margin
   auto do nothing on an inline box. It used to inherit block from the caption
   rule below, which is also what was overriding its margin. */
.jdot{display:block;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--c);margin:20px auto 0;position:relative;z-index:1;box-shadow:0 0 0 5px var(--bg)}
.jstage b{display:block;font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink);margin-top:14px}
/* :not(.jdot) matters. The dot is also a span inside .jstage, so a bare
   ".jstage span" outranks ".jdot" (0,1,1 beats 0,1,0) and replaces the dot's
   20px top margin with the caption's 5px - dropping every dot 15px above the
   rail, which is absolutely positioned and does not move with it. The rail
   then runs BETWEEN the dots and their labels instead of through them, which
   is the opposite of what this diagram exists to say. */
.jstage span:not(.jdot){display:block;font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.45;padding-inline:2px}
@media(max-width:900px){.jrail-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}.jrail-line{display:none}.jdot{margin-top:0}}
@media(max-width:520px){.jrail-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jnote{margin-top:30px;padding:18px 22px;border-radius:16px;background:var(--paper);border:1px solid var(--line-soft);font-size:15px;color:var(--ink-soft);line-height:1.6;max-width:78ch}
.jnote b{color:var(--ink)}

/* ==========================================================================
   AREAS - what an engagement examines
   ========================================================================== */
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}
@media(max-width:860px){.areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.areas{grid-template-columns:1fr}}
.area{background:#fff;border:1px solid var(--line);border-left:3px solid var(--c);border-radius:13px;padding:15px 17px;font-size:14.5px;font-weight:600;color:var(--ink-soft);box-shadow:var(--shadow-s);line-height:1.35}

/* ==========================================================================
   OUTPUT / QUESTION LISTS
   ========================================================================== */
.qlist{display:grid;gap:12px;margin-top:38px;max-width:80ch}
.qlist li{list-style:none;display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:15px;padding:17px 20px;box-shadow:var(--shadow-s)}
.qlist{padding:0;margin-left:0}
.qlist .qn{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--c);letter-spacing:.1em;padding-top:4px;flex:none}
.qlist .qt{font-family:var(--display);font-size:clamp(16px,1.9vw,19px);font-weight:600;color:var(--ink);line-height:1.32}
.qlist .qd{display:block;font-family:var(--sans);font-size:14px;font-weight:400;color:var(--muted);margin-top:6px;line-height:1.55}

/* Plain outcome list with ticks */
.olist{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;max-width:none}
@media(max-width:760px){.olist{grid-template-columns:1fr}}
.olist li{display:flex;gap:12px;font-size:15.5px;color:var(--ink-soft);font-weight:500;line-height:1.5;align-items:flex-start}
.olist li::before{content:"\2713";color:var(--c);font-weight:800;flex:none;line-height:1.4}

/* ==========================================================================
   TERRITORY DNA x SALES DNA - the signature diagram
   ========================================================================== */
.dna{margin-top:46px}
.dna-eq{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch}
@media(max-width:940px){.dna-eq{grid-template-columns:1fr;gap:10px}}
.dna-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow-m);border-top:4px solid var(--dc,var(--c))}
.dna-card .dk{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dc,var(--c));font-weight:700}
.dna-card h3{font-family:var(--display);font-size:clamp(19px,2.2vw,23px);font-weight:600;margin-top:9px;line-height:1.15}
.dna-card .dq{font-size:14px;color:var(--muted);margin-top:11px;line-height:1.55}
.dna-card ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.dna-card li{font-size:13.5px;color:var(--ink-soft);font-weight:500;display:flex;gap:9px;line-height:1.45}
.dna-card li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dc,var(--c));flex:none;margin-top:7px}
.dna-op{display:grid;place-items:center;font-family:var(--display);font-size:34px;font-weight:700;color:var(--faint)}
@media(max-width:940px){.dna-op{padding:2px 0;font-size:26px}}
.dna-fit{--dc:var(--brand-d);background:linear-gradient(150deg,#F7FBF4,#fff)}
.dna-fit .dq{color:var(--ink-soft)}
/* the fit matrix */
.dna-mx{margin-top:26px;display:grid;grid-template-columns:170px repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:820px){.dna-mx{grid-template-columns:1fr;gap:10px}}
.mx-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:8px 4px;align-self:end}
.mx-r{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px;display:flex;align-items:center}
.mx-c{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:13.5px;color:var(--muted);line-height:1.5}
.mx-c b{display:block;color:var(--ink);font-size:14px;font-weight:650;margin-bottom:4px}
@media(max-width:820px){.mx-h{display:none}.mx-c::before{content:attr(data-h);display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:6px}}

/* ==========================================================================
   LEAK - where opportunities are lost (Sales Performance)
   ========================================================================== */
/* The caption sits UNDER the bar, never inside it: a label laid across the
   full track straddles the fill edge, so half of every sentence ends up on
   the coloured bar and half on the empty track. The bar carries the
   narrowing; the caption carries the reason. */
.leak{margin-top:44px;display:grid;gap:10px;max-width:900px}
.leak-row{display:grid;grid-template-columns:150px 1fr;gap:8px 20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:16px 20px;box-shadow:var(--shadow-s)}
@media(max-width:680px){.leak-row{grid-template-columns:1fr;gap:8px}}
.leak-k{font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink)}
.leak-b{position:relative;height:14px;border-radius:7px;background:var(--paper);overflow:hidden}
.leak-f{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff));border-radius:7px}
@supports not (background:color-mix(in srgb, red 55%, #fff)){.leak-f{background:var(--c);opacity:.75}}
.leak-t{display:block;margin-top:10px;font-size:13.5px;color:var(--muted);line-height:1.5}
.leak-note{margin-top:12px;font-size:13.5px;color:var(--faint);max-width:70ch;line-height:1.55}

/* ==========================================================================
   AI - Commercial Problem -> Data/Systems -> AI Capability -> Outcome
   ========================================================================== */
.aiflow{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
@media(max-width:900px){.aiflow{grid-template-columns:1fr}}
/* Flex column so the "for example" footers line up across all four steps -
   the chain reads as one row, and ragged footers make it read as four cards. */
.ai-step{background:#fff;border:1px solid var(--line);padding:22px 22px 24px;position:relative;display:flex;flex-direction:column}
.ai-step:first-child{border-radius:18px 0 0 18px}
.ai-step:last-child{border-radius:0 18px 18px 0}
.ai-step + .ai-step{border-left:0}
@media(max-width:900px){
  .ai-step:first-child{border-radius:18px 18px 0 0}
  .ai-step:last-child{border-radius:0 0 18px 18px}
  .ai-step + .ai-step{border-left:1px solid var(--line);border-top:0}
}
.ai-step .ak{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);font-weight:700}
.ai-step h3{font-family:var(--display);font-size:18px;font-weight:600;margin-top:9px;line-height:1.15}
.ai-step p{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.55}
/* margin-top:auto pushes it to the card floor so the four footers line up;
   the padding keeps a gap in the tallest card, where auto resolves to zero. */
.ai-step .ai-eg{margin-top:auto;padding:16px 0 0;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink-soft);line-height:1.5}
.ai-step .ai-eg i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:5px}
.ai-step-hi{background:linear-gradient(160deg,#F2FBFA,#fff)}
/* the scoring formula */
.score{margin-top:34px;display:flex;flex-wrap:wrap;align-items:stretch;gap:10px}
.score-b{flex:1 1 180px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-s)}
.score-b b{display:block;font-family:var(--display);font-size:16px;font-weight:600;color:var(--ink)}
.score-b span{display:block;font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.45}
.score-x{display:grid;place-items:center;font-family:var(--display);font-size:22px;font-weight:700;color:var(--faint);padding:0 2px}
@media(max-width:760px){.score{flex-direction:column}.score-x{padding:2px 0}}

/* The statement band - "We don't start with AI." */
.stmt{background:var(--dark);color:#fff;border-radius:24px;padding:clamp(34px,5vw,56px);box-shadow:var(--shadow-l);margin-top:20px}
.stmt .sk{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-l);font-weight:700}
.stmt h2{font-size:clamp(26px,4vw,44px);font-weight:600;margin-top:16px;line-height:1.08;max-width:22ch}
.stmt h2 em{font-style:normal;color:var(--brand-l)}
.stmt p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.65;margin-top:20px;max-width:60ch}

/* ==========================================================================
   METHODOLOGY - the IP behind the engagement
   ========================================================================== */
.meth{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:38px}
@media(max-width:900px){.meth{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.meth{grid-template-columns:1fr}}
.meth-c{background:var(--paper);border:1px solid var(--line-soft);border-radius:15px;padding:18px 19px}
.meth-c b{display:block;font-family:var(--display);font-size:16px;font-weight:650;color:var(--ink)}
.meth-c span{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.meth-note{margin-top:20px;font-size:14.5px;color:var(--muted);max-width:74ch;line-height:1.6}
.meth-note a{color:var(--brand-d);font-weight:600}
.meth-note a:hover{text-decoration:underline}

/* ==========================================================================
   INDICATIVE ENGAGEMENT - never a package card
   ========================================================================== */
.eng{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(26px,3.5vw,40px);box-shadow:var(--shadow-m);display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center}
@media(max-width:860px){.eng{grid-template-columns:1fr;gap:24px}}
.eng-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c);font-weight:700}
.eng-band{display:grid;gap:14px;margin-top:16px}
.eng-b .amt{font-family:var(--display);font-size:clamp(28px,3.6vw,40px);font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.eng-b .amt small{font-size:.52em;font-weight:600;color:var(--muted);letter-spacing:0}
.eng-b .lab{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:5px}
.eng p{font-size:14.5px;color:var(--muted);line-height:1.62;margin-top:16px;max-width:52ch}
.eng-side{background:var(--paper);border:1px solid var(--line-soft);border-radius:16px;padding:22px 24px}
.eng-side b{display:block;font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink)}
.eng-side ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.eng-side li{font-size:13.5px;color:var(--ink-soft);display:flex;gap:10px;line-height:1.45;font-weight:500}
.eng-side li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c);flex:none;margin-top:8px}
.eng-side .btn{margin-top:20px;width:100%;justify-content:center}

/* ==========================================================================
   USE CASES
   ========================================================================== */
.uc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px}
@media(max-width:860px){.uc-grid{grid-template-columns:1fr}}
.uc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:var(--r);padding:clamp(22px,2.8vw,30px);box-shadow:var(--shadow-m);transition:transform .2s ease,box-shadow .2s ease}
.uc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.uc-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);font-weight:700}
.uc-card h3{font-family:var(--display);font-size:clamp(19px,2.3vw,24px);font-weight:600;margin-top:11px;line-height:1.18}
.uc-card p{font-size:14.5px;color:var(--muted);margin-top:12px;line-height:1.6}
.uc-card .uc-go{margin-top:auto;padding-top:20px;font-size:14px;font-weight:700;color:var(--c);display:inline-flex;gap:8px;align-items:center}
.uc-card:hover .uc-go .arw{transform:translateX(4px)}
.uc-card .arw{transition:transform .18s ease}

/* Representative-example disclaimer - must never read as a named customer */
.uc-disc{margin-top:26px;padding:16px 20px;border-radius:14px;background:var(--paper);border:1px solid var(--line-soft);font-size:13.5px;color:var(--muted);line-height:1.6;max-width:78ch}
.uc-disc b{color:var(--ink-soft)}

/* The full story: problem -> analysis -> intervention -> outcome */
.story{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1000px){.story{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.story{grid-template-columns:1fr}}
.story-c{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px;box-shadow:var(--shadow-s);display:flex;flex-direction:column}
.story-c .sk{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);font-weight:700}
.story-c h3{font-family:var(--display);font-size:17.5px;font-weight:600;margin-top:9px;line-height:1.2}
.story-c p{font-size:13.5px;color:var(--muted);margin-top:10px;line-height:1.58}
.story-c ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.story-c li{font-size:13px;color:var(--ink-soft);display:flex;gap:9px;line-height:1.45;font-weight:500}
.story-c li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c);flex:none;margin-top:7px}
.story-c.out{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 8%,#fff),#fff);border-color:color-mix(in srgb,var(--c) 26%,#fff)}
@supports not (background:color-mix(in srgb, red 8%, #fff)){.story-c.out{background:var(--paper)}}

/* A pulled-out sentence inside a story */
.pull{margin-top:34px;padding:24px 28px;border-left:4px solid var(--c);background:var(--paper);border-radius:0 16px 16px 0;font-family:var(--display);font-size:clamp(18px,2.4vw,25px);font-weight:600;color:var(--ink);line-height:1.28;max-width:60ch}
.pull span{color:var(--c)}

/* ==========================================================================
   CROSS-LINKS and CTA
   ========================================================================== */
.next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
@media(max-width:860px){.next{grid-template-columns:1fr}}
.next a{background:#fff;border:1px solid var(--line);border-top:3px solid var(--nc,var(--brand));border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-s);transition:transform .18s ease,box-shadow .18s ease}
.next a:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.next a i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--nc,var(--brand-d));font-weight:700}
.next a b{display:block;font-family:var(--display);font-size:17.5px;font-weight:600;color:var(--ink);margin-top:8px;line-height:1.2}
.next a span{display:block;font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.5}

.band{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:clamp(26px,3.6vw,40px);display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:20px}
.band h3{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);font-weight:600;color:var(--ink)}
.band p{font-size:15px;color:var(--muted);margin-top:10px;max-width:58ch;line-height:1.6}
.band-cta{display:flex;gap:12px;flex-wrap:wrap}

.talk{background:var(--dark);color:#fff;border-radius:24px;padding:clamp(34px,5vw,58px);text-align:center;box-shadow:var(--shadow-l)}
.talk .sk{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-l);font-weight:700}
.talk h2{font-size:clamp(26px,3.8vw,42px);font-weight:600;margin:16px auto 0;max-width:20ch;line-height:1.08}
/* :not(.talk-note) for the third time - see .jstage span and .svc p. Without
   it the fine print renders at 16px/.7 white, the same as the paragraph above
   it, and stops reading as fine print. */
.talk p:not(.talk-note){color:rgba(255,255,255,.7);font-size:16px;line-height:1.65;margin:18px auto 0;max-width:58ch}
.talk-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.talk-note{margin-top:20px;font-size:13px;color:rgba(255,255,255,.5)}