/* DS6: S6 pre-course knowledge base index. On top of tokens/tokens.css and tokens/app.css.
   Raw hex below only where tokens.css has no variable: the section tints and badge colours
   carried by the KB layout (pre-course-siv). Text pairs gated with check-contrast.py:
   #b23b36 on #fdecec 5.15; #2f6b3d on #eaf6ec 5.74 (carried #3a7d49 is 4.49, fails as small text);
   #8a6116 on #fef6e0 5.12 (carried #a07b1e is 3.64, fails); #A0552C on #fbe9e2 4.66;
   white on #2e7d32 5.13. Badge fills (#d9534f 3.96, #4a9d5b 3.35, orange 3.13) are icons, UI 3:1. */
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/onest-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* nav bits the live template carries in markup */
.topnav .sp{flex:1 1 auto}
.has-mn .mn-cb{position:absolute;opacity:0;pointer-events:none}

/* focus: styled, never the browser default */
.ds6 a:focus-visible,.ds6 .btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.45);border-radius:var(--radius-sm)}
.ds6 .lesson-card:focus-visible{border-radius:var(--radius);border-color:var(--color-accent)}

.ds6-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tone variables per section (from the layout's colour and text_color) */
.ds6-t-default{--tint:#fbe9e2;--tone:var(--color-accent-text);--dot:var(--color-accent);--meta:var(--color-accent-text)}
.ds6-t-red{--tint:#fdecec;--tone:#b23b36;--dot:#d9534f;--meta:#b23b36}
.ds6-t-green{--tint:#eaf6ec;--tone:#2f6b3d;--dot:#4a9d5b;--meta:#3a7d49}
.ds6-t-cream{--tint:#fef6e0;--tone:var(--color-warning);--dot:#e0b84a;--meta:#3a7d49}
.ds6-b-red{--badge:#d9534f}
.ds6-b-green{--badge:#4a9d5b}

.ds6.wrap{padding-top:var(--s-6);max-width:none;margin:0}
.ds6 .btn{text-decoration:none}

/* ---------- hero ---------- */
.ds6-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s-6);align-items:start}
.ds6-hero .pckb-intro{max-width:none}
.ds6-hero .pckb-intro h1{font-size:var(--t-3xl);letter-spacing:-.015em;max-width:17ch;margin:var(--s-3) 0 var(--s-4)}
.ds6-hero .eyebrow{display:inline-block}
.ds6-hero .hook{margin:var(--s-5) 0 0;max-width:46ch}
.ds6-side{display:flex;flex-direction:column;gap:var(--s-4)}

.ds6-course{padding:var(--s-5)}
.ds6-course h2{font-size:var(--t-xl);margin:var(--s-2) 0 var(--s-3)}
.ds6-course dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem var(--s-4);font-size:var(--t-sm);margin:0}
.ds6-course dt{color:var(--color-muted);font-weight:600}
.ds6-course dd{color:var(--color-ink);font-weight:600;margin:0}
.ds6-course .ds6-access{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--color-line);font-size:var(--t-xs);color:var(--color-muted);line-height:1.5}

.ds6-progress.progress-card{max-width:none;box-shadow:var(--shadow);padding:var(--s-5);gap:var(--s-3)}
.ds6-progress .pc-count{font-size:var(--t-base)}
.ds6-progress .progress{height:10px}
.ds6-next{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);margin-top:var(--s-1);border-radius:var(--radius-sm);background:var(--color-accent-wash);text-decoration:none;color:var(--color-ink)}
.ds6-next:hover{text-decoration:none;background:#fde6d6}
.ds6-next .k{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-text)}
.ds6-next .t{display:block;font-weight:700;line-height:1.3}
.ds6-next .go{margin-left:auto;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--color-accent);color:var(--color-on-accent);display:grid;place-items:center}
.ds6-next .go svg{width:16px;height:16px}
.ds6-progress.is-done .progress > i{background:var(--color-success)}
.ds6-progress.is-done .pc-count{color:var(--color-success-ink)}
.ds6-done{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3);border-radius:var(--radius-sm);background:var(--color-success-wash);color:var(--color-success-ink);font-size:var(--t-sm);line-height:1.5}
.ds6-done b{display:block;color:var(--color-success-ink);font-size:var(--t-base)}
.ds6-done a{color:var(--color-success-ink);font-weight:700;text-decoration:underline}
.ds6-done .tick{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--color-success);color:#fff;display:grid;place-items:center}
.ds6-done .tick svg{width:16px;height:16px}

/* ---------- help row: Telegram + self-assessment ---------- */
.ds6-help{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin:var(--s-6) 0 0}
.ds6-help .pckb-contact-card{margin:0;max-width:none;align-items:center}
.ds6-help .callout-green{margin:0;max-width:none;display:flex;flex-direction:column;gap:.3rem}
.ds6-help .callout-green strong{color:var(--color-ink)}
.ds6-help .callout-green p{color:var(--color-body);font-size:var(--t-sm);margin:0}
.ds6-help .callout-green .btn{align-self:flex-start;margin-top:var(--s-2);background:var(--color-card)}
.ds6-help p{line-height:1.5}

/* ---------- section index (chips) ---------- */
.ds6-toc{margin:var(--s-7) 0 0}
.ds6-toc h2{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);font-weight:700;margin:0 0 var(--s-3)}
.ds6-toc ol{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0;padding:0}
.ds6-toc a{display:flex;align-items:center;gap:.5rem;padding:.45rem .8rem .45rem .55rem;border:1px solid var(--color-line);border-radius:99px;background:var(--color-card);font-size:var(--t-sm);font-weight:600;color:var(--color-ink);text-decoration:none;white-space:nowrap}
.ds6-toc a:hover{border-color:var(--color-accent);text-decoration:none}
.ds6-toc .n{width:24px;height:24px;border-radius:50%;background:var(--tint);color:var(--tone);display:grid;place-items:center;font-size:var(--t-xs);font-weight:800}
.ds6-toc .c{color:var(--color-muted);font-weight:600;font-size:var(--t-xs)}
.ds6-toc .all .n{background:var(--color-success);color:#fff}

/* ---------- section bands ---------- */
.ds6-sec{scroll-margin-top:var(--s-5)}
.ds6 .sec-head.ds6-head{background:var(--tint);color:var(--tone);margin:var(--s-7) 0 var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--radius-sm);gap:var(--s-3)}
.ds6-head .num{font-size:var(--t-xs);opacity:.85;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.ds6-head .dot{width:10px;height:10px;border-radius:50%;background:var(--dot);flex:0 0 auto}
.ds6-head .lbl{flex:1 1 auto;min-width:0}
.ds6-head .cnt{flex:0 0 auto;font-size:var(--t-xs);letter-spacing:.04em;font-weight:700;text-transform:none;color:var(--color-ink);background:var(--color-card);padding:.15rem .6rem;border-radius:99px}
.ds6 .sec-note{margin:calc(var(--s-2) * -1) 0 var(--s-4);max-width:70ch}

/* ---------- cards ---------- */
.ds6 .grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ds6 .lesson-card{position:relative;color:inherit;box-shadow:0 1px 2px rgba(22,52,80,.04),0 8px 24px rgba(22,52,80,.06)}
.ds6 .lesson-card:hover{transform:translateY(-1px)}
.ds6 .lesson-card .top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.ds6 .lesson-card .ic{background:var(--badge,var(--color-accent));display:grid;place-items:center;flex:0 0 auto}
.ds6 .lesson-card .ic svg{width:20px;height:20px}
.ds6 .lesson-card .ic{font-size:1.05rem;line-height:1}
.ds6 .lesson-card h3{font-size:var(--t-lg);line-height:1.3}
.ds6 .lesson-card .meta{color:var(--meta);display:flex;align-items:center;gap:.35rem}
.ds6 .lesson-card .meta svg{width:13px;height:13px;flex:0 0 auto;transition:transform .12s}
.ds6 .lesson-card:hover .meta svg{transform:translateX(3px)}

/* read mark (Q13 default: a mark on every card) */
.ds6-mark{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-xs);font-weight:700;color:var(--color-muted);white-space:nowrap}
.ds6-mark i{width:22px;height:22px;border-radius:50%;border:2px solid var(--color-line);display:grid;place-items:center;background:var(--color-card)}
.ds6-mark i svg{width:12px;height:12px;opacity:0}
.is-read .ds6-mark{color:var(--color-success-ink)}
.is-read .ds6-mark i{background:var(--color-success);border-color:var(--color-success);color:#fff}
.is-read .ds6-mark i svg{opacity:1}
.ds6 .lesson-card.is-read{background:linear-gradient(180deg,var(--color-card) 0,var(--color-card) 70%,#f7fbf7 100%)}
.ds6 .lesson-card.is-next{border:2px solid var(--color-accent);box-shadow:0 10px 30px rgba(225,115,53,.16)}
.ds6 .lesson-card.is-next .ds6-mark{color:var(--color-accent-text)}
.ds6 .lesson-card.is-next .ds6-mark i{border-color:var(--color-accent)}

/* unpublished card state (live: "Coming soon", half opacity); not used by this KB today */
.ds6 .lesson-card.is-soon{opacity:.5;cursor:default}

/* the single "Preparing for your SIV" card, shown wide */
.ds6 .grid.ds6-one{grid-template-columns:1fr}
.ds6 .lesson-card.ds6-feature{flex-direction:row;align-items:center;gap:var(--s-5);padding:var(--s-5) var(--s-6);background:linear-gradient(110deg,var(--color-card) 55%,var(--color-accent-wash) 100%)}
.ds6-feature .ic{width:56px;height:56px}
.ds6 .lesson-card.ds6-feature .ic svg{width:28px;height:28px}
.ds6-feature .body{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.ds6-feature .side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-3);flex:0 0 auto}
.ds6-feature .meta{padding-top:0;margin-top:0}
.ds6-feature h3{font-size:var(--t-xl)}
.ds6-feature p{font-size:var(--t-base)}

/* ---------- goals ---------- */
.ds6-goals{margin-top:var(--s-7);padding:var(--s-6);display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:center}
.ds6-goals h2{font-size:var(--t-xl);margin:0 0 var(--s-2)}
.ds6-goals p{color:var(--color-body);max-width:58ch;margin:0}
.ds6-goals .goals-btns{margin:0;flex-direction:column}
.ds6-goals .goals-btns .btn{background:var(--color-card);text-align:center}
.ds6-goals .eyebrow{margin-bottom:var(--s-2);display:inline-block}


/* ---------- tablet and phone ---------- */
@media(max-width:900px){
  .ds6-help{grid-template-columns:1fr}
}
@media(max-width:600px){
  .ds6.wrap{padding-top:var(--s-5)}
  .ds6-hero .pckb-intro h1{font-size:var(--t-2xl)}
  .ds6-toc ol{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--s-2);margin-right:calc(var(--s-4) * -1);scrollbar-width:none}
  .ds6-toc ol::-webkit-scrollbar{display:none}
  .ds6 .lesson-card.ds6-feature{flex-direction:column;align-items:stretch;padding:var(--s-5)}
  .ds6-feature .side{flex-direction:row;justify-content:space-between;align-items:center}
  .ds6-feature .ic{width:48px;height:48px}
  .ds6-goals{grid-template-columns:1fr;padding:var(--s-5)}
  .ds6-goals .goals-btns{flex-direction:row}
  .ds6 .sec-head.ds6-head{margin-top:var(--s-6)}
  .ds6-head .cnt{display:none}
  .ds6 .grid{gap:var(--s-3)}
  .ds6 .lesson-card{padding:var(--s-4);gap:var(--s-1)}
  .ds6 .lesson-card .ic{width:34px;height:34px;font-size:.95rem}
  .ds6 .lesson-card .ic svg{width:18px;height:18px}
  .ds6 .lesson-card h3{font-size:var(--t-base);margin-top:var(--s-2)}
  .ds6 .lesson-card.ds6-feature{gap:var(--s-3)}
  .ds6 .lesson-card.ds6-feature h3{font-size:var(--t-lg);margin-top:0}
  .ds6 .lesson-card.ds6-feature .ic{width:44px;height:44px}
}

/* progress widths per state (no inline styles); empty shows a 3 percent stub as live */
.ds6-w-new{width:3%}
.ds6-w-current{width:37.5%}
.ds6-w-done{width:100%}

/* inside the app shell: never let wide children (the section chips) stretch the page */
.ds6{min-width:0;max-width:100%;overflow-x:clip}
.ds6 > *{min-width:0;max-width:100%}
.ds6-hero > *,.ds6-help > *{min-width:0}

/* ================= ROUND 2 (lane WIDE): use the width of a big screen ================= */
/* the pre-course index takes the full content width (page modifier on main, like .is-narrow in shell.css) */
.app-content.ds6-main{max-width:1640px;padding-left:clamp(var(--s-4),3vw,var(--s-7));padding-right:clamp(var(--s-4),3vw,var(--s-7))}

/* hero: intro | Your course | progress, side by side on wide screens */
.ds6-hero{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
.ds6-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-4);align-items:start}
.ds6-side > .card,.ds6-side > .progress-card{margin:0}
.ds6-hero .eyebrow{align-self:flex-start}
.ds6-hero .pckb-intro h1{max-width:20ch}
@media(min-width:1400px){
  .ds6-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr);gap:var(--s-6);align-items:start}
  .ds6-hero .pckb-intro{display:flex;flex-direction:column}
}
@media(max-width:700px){.ds6-side{grid-template-columns:minmax(0,1fr)}}

/* section jump bar: under the hero, sticky on desktop */
.ds6-toc{margin:var(--s-6) 0 0;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);background:color-mix(in srgb,var(--color-bg,#faf7f2) 92%,transparent);border:1px solid var(--color-line);border-radius:99px;box-shadow:0 6px 20px rgba(22,52,80,.06)}
.ds6-toc-k{flex:0 0 auto;font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);padding-left:var(--s-2)}
.ds6-toc ol{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:var(--s-2)}
.ds6-toc ol::-webkit-scrollbar{display:none}
.ds6-toc a.ds6-chip{padding:.35rem .75rem .35rem .4rem;transition:border-color .12s,background .12s}
.ds6-toc a.ds6-chip:hover{background:var(--tint);border-color:var(--dot)}
.ds6-toc .c{font-variant-numeric:tabular-nums}
@media(min-width:1024px){
  .ds6-toc{position:sticky;top:var(--s-3);z-index:20;backdrop-filter:blur(6px)}
  .ds6-sec{scroll-margin-top:calc(var(--s-3) + 72px)}
}
@media(min-width:1500px){.ds6-toc ol{flex-wrap:wrap;overflow:visible}}
@media(max-width:600px){
  .ds6-toc{border-radius:var(--radius);padding:var(--s-2);margin-right:0}
  .ds6-toc-k{display:none}
  .ds6-toc ol{margin-right:0}
}

/* help row stays two up, full width */
.ds6-help{margin-top:var(--s-5)}

/* section bands: full width; cards 4 / 3 / 2 / 1 per row */
.ds6 .sec-head.ds6-head{padding:var(--s-3) var(--s-5)}
.ds6 .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1400px){.ds6 .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1023.98px){.ds6 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.ds6 .grid{grid-template-columns:minmax(0,1fr)}}
.ds6 .grid.ds6-one{grid-template-columns:minmax(0,1fr)}

/* the whole card is the link: clear hover, the "Open lesson" line reads as the action */
.ds6 .lesson-card{cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s}
.ds6 .lesson-card:hover{transform:translateY(-3px);border-color:var(--dot,var(--color-accent));box-shadow:0 2px 4px rgba(22,52,80,.05),0 16px 36px rgba(22,52,80,.12);text-decoration:none}
.ds6 .lesson-card .meta{margin-top:auto;font-weight:700}
.ds6 .lesson-card:hover .meta{text-decoration:underline;text-underline-offset:3px}
.ds6 .lesson-card h3{color:var(--color-ink)}

/* ================= ROUND 3 (lane OVERVIEW): calm overview + one page per section ================= */
/* the overview: one narrow column, welcome, one next step, one progress line, a plain list of sections */
.ds6-ov{max-width:880px;margin:0 auto;padding-top:var(--s-6)}
.ds6-ov.ds6-sp{max-width:1180px}
.ds6-intro h1{font-size:var(--t-3xl);letter-spacing:-.015em;margin:0 0 var(--s-3);max-width:26ch}
.ds6-intro .nb{white-space:nowrap}
.ds6-intro .lead{font-size:var(--t-base);color:var(--color-body);max-width:62ch;margin:0;line-height:1.65}
.ds6-go{display:flex;align-items:center;gap:var(--s-5);margin:var(--s-5) 0 0;padding:var(--s-5);background:var(--color-accent-wash);border-radius:var(--radius)}
.ds6-go .go-txt{flex:1 1 auto;min-width:0}
.ds6-go .k{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-text);margin-bottom:var(--s-1)}
.ds6-go h2{font-size:var(--t-xl);line-height:1.25;margin:0 0 var(--s-1)}
.ds6-go p{margin:0;color:var(--color-body);font-size:var(--t-sm)}
.ds6-go .btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem}
.ds6-go .btn svg{width:15px;height:15px}
.ds6-go.is-done{background:var(--color-success-wash)}
.ds6-go.is-done .k{color:var(--color-success-ink)}
.ds6-prog{display:flex;align-items:center;gap:var(--s-4);margin:var(--s-4) 0 0}
.ds6-prog .pt{flex:0 0 auto;font-weight:700;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.ds6-prog .progress{flex:1 1 auto}
.ds6-secs{margin-top:var(--s-6)}
.ds6-k{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);font-weight:700;margin:0 0 var(--s-2)}
.ds6-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-line)}
.ds6-list li{border-bottom:1px solid var(--color-line)}
.ds6-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-2);color:inherit;text-decoration:none;border-radius:var(--radius-sm)}
.ds6-row:hover{background:var(--tint);text-decoration:none}
.ds6-row:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(225,115,53,.45)}
.ds6-row .dot{width:10px;height:10px;border-radius:50%;background:var(--dot);flex:0 0 auto}
.ds6-row .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.ds6-row .nm{font-weight:700;font-size:var(--t-base);line-height:1.3}
.ds6-row .ds{color:var(--color-muted);font-size:var(--t-sm);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds6-row .ct{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;font-size:var(--t-xs);font-weight:700;color:var(--color-muted);font-variant-numeric:tabular-nums}
.ds6-row.is-all .ct{color:var(--color-success-ink)}
.ds6-row .ck{width:18px;height:18px;border-radius:50%;background:var(--color-success);color:#fff;display:grid;place-items:center}
.ds6-row .ck svg{width:10px;height:10px}
.ds6-row > svg{width:14px;height:14px;flex:0 0 auto;color:var(--color-muted);transition:transform .12s}
.ds6-row:hover > svg{transform:translateX(3px)}
.ds6-more{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:var(--s-6) 0 0;font-size:var(--t-sm)}
.ds6-more a{color:var(--color-accent-text);font-weight:600}
/* section page */
.ds6-crumb{margin:0 0 var(--s-4);font-size:var(--t-sm)}
.ds6-crumb a{display:inline-flex;align-items:center;gap:.4rem;color:var(--color-accent-text);font-weight:600}
.ds6-crumb svg{width:14px;height:14px}
.ds6-sh{display:flex;align-items:center;gap:var(--s-3);font-size:var(--t-2xl);margin:0 0 var(--s-2)}
.ds6-sh .dot{width:14px;height:14px;border-radius:50%;background:var(--dot);flex:0 0 auto}
.ds6-sc{margin:0 0 var(--s-5);color:var(--color-muted);font-size:var(--t-sm)}
.ds6-sp .grid{margin-top:0}
.ds6-nsec{display:flex;align-items:center;gap:var(--s-3);justify-content:space-between;margin-top:var(--s-6);padding:var(--s-4) var(--s-5);border:1px solid var(--color-line);border-radius:var(--radius);color:inherit;text-decoration:none;background:var(--color-card)}
.ds6-nsec:hover{border-color:var(--color-accent);text-decoration:none}
.ds6-nsec .k{display:block;font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
.ds6-nsec .t{display:block;font-weight:700;font-size:var(--t-lg)}
.ds6-nsec svg{width:16px;height:16px;color:var(--color-accent-text);flex:0 0 auto}
@media(max-width:600px){
  .ds6-ov{padding-top:var(--s-5)}
  .ds6-intro h1{font-size:var(--t-2xl)}
  .ds6-go{flex-direction:column;align-items:stretch;gap:var(--s-4);padding:var(--s-4)}
  .ds6-go .btn{justify-content:center}
  .ds6-row .ds{display:none}
  .ds6-row{padding:var(--s-3) var(--s-1)}
  .ds6-sh{font-size:var(--t-xl)}
}
/* short laptop screens: keep the next step above the fold */
@media(max-height:800px) and (min-width:700px){
  .ds6-ov{padding-top:var(--s-5)}
  .ds6-intro h1{font-size:var(--t-2xl)}
}