/* ---------- /customer-stories/ (templates/stories.php, sections/stories-*.php) ---------- */
/* Page block for the "stories" route, to be merged into site.css like the wave-2 blocks (it is not
   loaded on its own). Scoped to body.dgn-page[data-page="stories"]: the live template prints
   data-page="reviews" and has no .dgn-page, so neither the old stories body under the new chrome nor
   /reviews/ is ever restyled. Every class is dgn-cs-* (customer stories); the rest is the kit. */

/* ---- hero: the live H1 is long ("Customer experiences,"), so one notch smaller on desktops keeps it to two balanced lines ---- */
body.dgn-page[data-page="stories"] .dgn-cs-hero .dgn-h1>span{text-wrap:balance}
/* the hero is shorter than the 1150px glow, so fade the glow and grid out before the section edge (as the pricing head) */
body.dgn-page[data-page="stories"] .dgn-cs-hero .dgn-hero__bg{-webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,#000 52%,transparent 100%)}
@media (min-width:1141px){
  body.dgn-page[data-page="stories"] .dgn-cs-hero .dgn-h1{font-size:clamp(40px,4.6vw,66px)}
}
@media (min-width:1600px){
  body.dgn-page[data-page="stories"] .dgn-cs-hero .dgn-h1{font-size:clamp(72px,4.3vw,82px)}
}

/* ---- hero card: "What the labels mean", one row per label with its icon in the label's colour ---- */
body.dgn-page[data-page="stories"] .dgn-cs-key{padding-bottom:20px}
body.dgn-page[data-page="stories"] .dgn-cs-key__h{margin-top:20px;font-family:var(--dgn-fd);font-stretch:86%;font-weight:800;font-size:clamp(26px,2.3vw,34px);line-height:1.05;letter-spacing:-.01em;color:var(--dgn-text)}
body.dgn-page[data-page="stories"] .dgn-cs-key__list{margin-top:14px}
body.dgn-page[data-page="stories"] .dgn-cs-key__row{padding:16px 0 15px;border-bottom:1px solid var(--dgn-line)}
body.dgn-page[data-page="stories"] .dgn-cs-key__row:last-child{border-bottom:0;padding-bottom:4px}
body.dgn-page[data-page="stories"] .dgn-cs-key__row dt{display:flex;align-items:center;gap:14px;font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:12px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--c,var(--dgn-gold))}
body.dgn-page[data-page="stories"] .dgn-cs-key__i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid rgba(var(--c-rgb,251,191,36),.45);background:rgba(var(--c-rgb,251,191,36),.08);color:var(--c,var(--dgn-gold))}
body.dgn-page[data-page="stories"] .dgn-cs-key__i svg{display:block}
body.dgn-page[data-page="stories"] .dgn-cs-key__row dd{margin:2px 0 0;padding-left:50px;font-size:14px;line-height:1.55;color:#cfcfd6;text-wrap:pretty}

/* ---- verified excerpts: three equal columns (the kit's first column is wider for a big quote) ---- */
body.dgn-page[data-page="stories"] .dgn-cs-excerpts .dgn-revs__head .dgn-lead{margin-top:20px}
body.dgn-page[data-page="stories"] .dgn-cs-revs{grid-template-columns:repeat(3,minmax(0,1fr))}
body.dgn-page[data-page="stories"] .dgn-cs-rev{padding-top:24px;padding-bottom:24px}
/* the verified line and the mode tag sit above the kit's quote mark */
body.dgn-page[data-page="stories"] .dgn-cs-rev__top{order:-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-bottom:18px}
body.dgn-page[data-page="stories"] .dgn-cs-rev__v{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--dgn-prop);white-space:nowrap}
body.dgn-page[data-page="stories"] .dgn-cs-rev__v svg{flex:none}
body.dgn-page[data-page="stories"] .dgn-cs-rev q{font-size:16px}
body.dgn-page[data-page="stories"] .dgn-cs-rev__cap{display:block;margin-top:auto;padding-top:20px}
body.dgn-page[data-page="stories"] .dgn-cs-rev .dgn-who{margin-top:0;padding-top:0}
body.dgn-page[data-page="stories"] .dgn-cs-rev__ev{display:block;margin-top:16px;padding-top:12px;border-top:1px solid var(--dgn-line);font-size:12.5px;line-height:1.5;color:var(--dgn-dim)}
body.dgn-page[data-page="stories"] .dgn-cs-rev__evk{font-weight:600;color:#cfcfd6}
body.dgn-page[data-page="stories"] .dgn-cs-excerpts__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 40px;margin-top:10px;padding-top:18px;border-top:1px solid var(--dgn-line)}
/* three columns share their four rows (the verified line, the quote mark, the quote, the author and
   evidence label), so the author rows line up even when one evidence label wraps (audit fix, 24 Sep 2026).
   Without subgrid each column stays the kit's flex column, its caption pinned to the bottom. */
@media (min-width:1141px){
  @supports (grid-template-rows:subgrid){
    body.dgn-page[data-page="stories"] .dgn-cs-rev{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
    body.dgn-page[data-page="stories"] .dgn-cs-rev__cap{margin-top:0;align-self:start}
  }
}

/* ---- "Every account is public on MyFXBook →": one line and one link to /results/ (proof trim, 25 Sep 2026; it
   replaced the shared proof rows and their gold band). The hairline row of the utility pages' one line (signals.css
   .dgn-sig-pub__in), here holding the link alone ---- */
body.dgn-page[data-page="stories"] .dgn-cs-pub__in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;padding:30px 0;border-top:1px solid var(--dgn-line);border-bottom:1px solid var(--dgn-line)}

/* ---- full customer journeys: the approved story cards (the section is not printed without one) ---- */
body.dgn-page[data-page="stories"] .dgn-cs-stories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
body.dgn-page[data-page="stories"] .dgn-cs-story .dgn-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px 22px 22px}
body.dgn-page[data-page="stories"] .dgn-cs-story__sum{font-size:15px;line-height:1.65;color:var(--dgn-muted)}
body.dgn-page[data-page="stories"] .dgn-cs-story__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;width:100%;border-top:1px solid var(--dgn-line);border-bottom:1px solid var(--dgn-line)}
body.dgn-page[data-page="stories"] .dgn-cs-story__facts>div{padding:10px 12px 10px 0;min-width:0}
body.dgn-page[data-page="stories"] .dgn-cs-story__facts dt{font-family:var(--dgn-fd);font-stretch:112%;font-weight:700;font-size:10.5px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--dgn-dim)}
body.dgn-page[data-page="stories"] .dgn-cs-story__facts dd{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--dgn-text)}
body.dgn-page[data-page="stories"] .dgn-cs-story .dgn-cs-rev__ev{margin-top:0;width:100%}

/* ---- publication standard: numbered hairline rows with the kit's outlined step figures ---- */
body.dgn-page[data-page="stories"] .dgn-cs-std{list-style:none;border-top:1px solid var(--dgn-line2)}
body.dgn-page[data-page="stories"] .dgn-cs-std li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:18px;align-items:start;padding:20px 0;border-bottom:1px solid var(--dgn-line)}
body.dgn-page[data-page="stories"] .dgn-cs-std b{font-family:var(--dgn-fd);font-stretch:72%;font-weight:850;font-size:36px;line-height:.9;color:var(--dgn-gold);font-variant-numeric:tabular-nums}
@supports (-webkit-text-stroke:1px #000){body.dgn-page[data-page="stories"] .dgn-cs-std b{color:transparent;-webkit-text-stroke:1px var(--dgn-gold)}}
body.dgn-page[data-page="stories"] .dgn-cs-std h3{font-family:var(--dgn-fd);font-weight:800;font-size:19px;line-height:1.3;color:var(--dgn-text)}
body.dgn-page[data-page="stories"] .dgn-cs-std p{margin-top:5px;font-size:14.5px;line-height:1.65;color:var(--dgn-muted);text-wrap:pretty}

/* ---- share your experience: one bordered card, text and buttons left, the four promises right ---- */
body.dgn-page[data-page="stories"] .dgn-cs-share__card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:40px 64px;padding:44px 48px;border:1px solid rgba(251,191,36,.2);border-radius:22px;background:radial-gradient(90% 80% at 100% 0%,rgba(251,191,36,.07),transparent 60%),var(--dgn-panel);box-shadow:0 40px 100px -60px rgba(251,191,36,.22),inset 0 1px 0 rgba(255,255,255,.05)}
body.dgn-page[data-page="stories"] .dgn-cs-share__card .dgn-lead{margin-top:20px}
body.dgn-page[data-page="stories"] .dgn-cs-share__card .dgn-cta-row{margin-top:28px;gap:14px 28px}
body.dgn-page[data-page="stories"] .dgn-cs-share__list{list-style:none;display:grid;gap:16px;padding-left:40px;border-left:1px solid var(--dgn-line)}
body.dgn-page[data-page="stories"] .dgn-cs-share__list li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;font-size:14.5px;line-height:1.6;color:#d9d9df}
body.dgn-page[data-page="stories"] .dgn-cs-share__list svg{margin-top:4px;color:var(--dgn-prop)}

/* ---- wide ---- */
@media (min-width:1600px){
  body.dgn-page[data-page="stories"] .dgn-cs-share__card{padding:52px 60px;column-gap:88px}
}

/* ---- tablet and narrower (the kit stacks the hero, the splits and the reviews at <=1140) ---- */
@media (max-width:1140px){
  body.dgn-page[data-page="stories"] .dgn-cs-revs{grid-template-columns:minmax(0,1fr)}
  body.dgn-page[data-page="stories"] .dgn-cs-rev{padding:24px 0}
  /* one column on tablets: keep the quote to a readable measure */
  body.dgn-page[data-page="stories"] .dgn-cs-rev q{max-width:46em}
  body.dgn-page[data-page="stories"] .dgn-cs-share__card{grid-template-columns:minmax(0,1fr)}
  body.dgn-page[data-page="stories"] .dgn-cs-share__list{padding:26px 0 0;border-left:0;border-top:1px solid var(--dgn-line)}
}
@media (max-width:900px){
  body.dgn-page[data-page="stories"] .dgn-cs-stories{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  body.dgn-page[data-page="stories"] .dgn-cs-key__h{font-size:26px;margin-top:16px}
  body.dgn-page[data-page="stories"] .dgn-cs-key__row dd{padding-left:0;margin-top:8px}
  body.dgn-page[data-page="stories"] .dgn-cs-excerpts__foot{flex-direction:column;align-items:flex-start}
  body.dgn-page[data-page="stories"] .dgn-cs-story__facts{grid-template-columns:minmax(0,1fr)}
  body.dgn-page[data-page="stories"] .dgn-cs-std li{grid-template-columns:46px minmax(0,1fr);gap:14px;padding:18px 0}
  body.dgn-page[data-page="stories"] .dgn-cs-std b{font-size:30px}
  body.dgn-page[data-page="stories"] .dgn-cs-share__card{padding:26px 18px 24px;border-radius:18px}
  body.dgn-page[data-page="stories"] .dgn-cs-share__card .dgn-cta-row{flex-direction:column;align-items:stretch}
  body.dgn-page[data-page="stories"] .dgn-cs-share__card .dgn-cta-row .dgn-btn{flex:0 0 auto;width:100%}
  body.dgn-page[data-page="stories"] .dgn-cs-share__card .dgn-cta-row .dgn-link{align-self:center}
}

/* phones: a button never shrinks below its label; when two do not fit side by side, each takes the full row
   (the kit gives them flex:1 1 220px, which clipped the longer labels at 500px; integration, 24 Sep 2026) */
@media (max-width:720px){
  body.dgn-page[data-page="stories"] .dgn-cta-row .dgn-btn{min-width:-webkit-max-content;min-width:max-content}
}