/* ===========================================================
   DK Education Consulting - 2026 rebuild
   Warm palette. Loaded AFTER style.css so it wins.
   Portal, cart, terms, privacy, onboarding keep the old sheet.
   =========================================================== */
:root{
  --ground:#f8f4ed; --surface:#ffffff; --surface-2:#f2eae0;
  --ink:#2d2d2d; --ink-soft:#67625c;
  --green:#27362b; --green-hi:#3a5040; --clay:#c7b5a1;
  --line:#e2d8c9; --on-green:#f2eae0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.dk{margin:0;background:var(--ground);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.dk .wrap{max-width:1040px;margin:0 auto;padding-inline:20px}

/* ---------- header ---------- */
.dk .dknav{border-bottom:1px solid var(--line);background:var(--ground);
  position:sticky;top:0;z-index:50}
.dk .dknav .row{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-block:16px;flex-wrap:wrap}
.dk .dkbrand{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:19px;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.dk .dklinks{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.dk .dklinks a{color:var(--ink-soft);font:500 14px/1 "IBM Plex Sans",sans-serif;
  padding:9px 11px;border-radius:6px;text-decoration:none}
.dk .dklinks a:hover{color:var(--ink);background:var(--surface-2)}
.dk .dklinks a[aria-current="page"]{color:var(--green);background:var(--surface-2)}
.dk a:focus-visible,.dk button:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* Phones: one scrollable row instead of two stacked rows, so content
   starts near the top of the screen instead of a third of the way down. */
@media (max-width:760px){
  .dk .tag{font-size:11.5px}
  .dk .eyebrow{font-size:11.5px}
  .dk .qcount{font-size:11.5px}
  .dk .payline{font-size:13.5px}
  .dk .dknav .row{padding-block:12px;gap:10px}
  .dk .dkbrand{font-size:17px}
  .dk .dklinks{flex-wrap:nowrap;overflow-x:auto;width:100%;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:-20px;padding-inline:20px;
    -webkit-overflow-scrolling:touch}
  .dk .dklinks::-webkit-scrollbar{display:none}
  .dk .dklinks a{white-space:nowrap;padding:8px 10px;font-size:14.5px}
}

/* ---------- type ---------- */
.dk h1{font-family:Fraunces,Georgia,serif;font-weight:700;
  font-size:clamp(32px,5vw,48px);line-height:1.08;letter-spacing:-.02em;
  margin:0 0 14px;text-wrap:balance;color:var(--ink)}
.dk h2{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(23px,3.2vw,30px);line-height:1.15;letter-spacing:-.015em;
  margin:0 0 10px;text-wrap:balance;color:var(--ink)}
.dk h3{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:19px;
  line-height:1.3;letter-spacing:-.01em;margin:0;color:var(--ink)}
.dk p{margin:0 0 14px;max-width:62ch}
.dk .lede{font-size:18px;color:var(--ink-soft);max-width:54ch}
.dk .eyebrow{font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px}
.dk section{padding-block:clamp(40px,6vw,68px)}
.dk section + section{border-top:1px solid var(--line)}

/* ---------- buttons ---------- */
.dk .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  cursor:pointer;font:600 15px/1 "IBM Plex Sans",sans-serif;padding:13px 22px;
  border-radius:12px;border:1px solid var(--green);background:var(--green);
  color:var(--on-green);text-decoration:none}
.dk .btn:hover{background:var(--green-hi);border-color:var(--green-hi);color:var(--on-green)}
.dk .btn.ghost{background:transparent;color:var(--green)}
.dk .btn.ghost:hover{background:var(--surface-2);color:var(--green)}
.dk .btn.onGreen{background:var(--on-green);color:var(--green);border-color:var(--on-green)}
.dk .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* ---------- quiz ---------- */
.dk .quiz{margin-top:28px}
.dk .qstep{display:flex;flex-direction:column;gap:11px}
.dk .qhead{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:4px}
.dk .qcount{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft)}
.dk .qq{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(21px,3vw,27px);letter-spacing:-.015em;line-height:1.2;
  margin:0;text-wrap:balance}
.dk .opt{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;text-align:left;cursor:pointer;color:inherit;font:inherit;
  background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--clay);border-radius:12px;padding:19px 22px;
  transition:border-left-color .15s,transform .15s}
.dk .opt:hover{border-left-color:var(--green);transform:translateX(3px)}
.dk .opt .t{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:19px;
  letter-spacing:-.01em;line-height:1.3;display:block}
.dk .opt .s{color:var(--ink-soft);font-size:14.5px;display:block;margin-top:2px}
.dk .opt .arw{color:var(--green);font-weight:600}
.dk .qback{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--ink);
  font:600 14px/1 "IBM Plex Sans",sans-serif;padding:11px 16px;border-radius:12px;
  align-self:flex-start;margin-bottom:4px}
.dk .qback:hover{background:var(--surface-2);border-color:var(--clay)}
.dk .qbackrow{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.dk .result{background:var(--surface);border:1px solid var(--line);
  border-top:4px solid var(--green);border-radius:12px;padding:clamp(24px,4vw,34px)}
.dk .result h2{margin-bottom:12px}

/* ---------- cards ---------- */
.dk .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:14px;margin-top:22px}
.dk .card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:24px;display:flex;flex-direction:column;gap:13px}
.dk .card.pick{border-color:var(--green);border-width:2px;padding:23px}
.dk .card.flat{background:var(--surface-2)}
.dk .tag{font:500 11px/1.3 "IBM Plex Mono",monospace;letter-spacing:.11em;
  text-transform:uppercase;color:var(--green);margin:0}
.dk .amount{font-family:Fraunces,Georgia,serif;font-size:36px;font-weight:600;
  letter-spacing:-.025em;line-height:1;color:var(--ink)}
.dk .whatis{font:600 13.5px/1.35 "IBM Plex Sans",sans-serif;color:var(--green);
  margin:-4px 0 0!important;letter-spacing:.01em}
.dk .excl{font-size:13px;color:var(--ink-soft);opacity:.85;margin:0;
  padding-top:10px;border-top:1px solid var(--line)}
.dk .card .only{color:var(--green);font-weight:600}
.dk .card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;
  gap:7px;font-size:15px;color:var(--ink-soft)}
.dk .card li{padding-left:20px;position:relative}
.dk .card li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;
  background:var(--clay)}
.dk .card .btn{margin-top:auto}
.dk .card p{margin:0}
.dk .payline{font-size:13px;color:var(--ink-soft);margin-top:-6px!important}

/* ---------- proof ---------- */
.dk .quote{background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--clay);border-radius:12px;padding:24px 26px}
.dk .quote p{font-family:Fraunces,Georgia,serif;font-size:18px;line-height:1.45;
  letter-spacing:-.01em;margin:0 0 14px;max-width:none}
.dk .quote .who{font:500 13px/1.4 "IBM Plex Sans",sans-serif;color:var(--ink-soft);margin:0}
.dk .quote .who b{display:block;color:var(--ink);font-weight:600;font-size:14px}
.dk .proofgrid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:22px}
@media (min-width:760px){.dk .proofgrid{grid-template-columns:1fr 1fr}}
.dk .proofgrid .quote{display:flex;flex-direction:column;justify-content:center}
.dk .vid{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;padding:14px 14px 0}
.dk .vidframe{aspect-ratio:9/16;max-width:300px;width:100%;margin:0 auto;
  background:var(--green);position:relative;border-radius:12px;overflow:hidden}
.dk .vidframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dk .vid .meta{padding:14px 4px 2px;text-align:center}
.dk .vid .meta p{margin:0;font-size:14.5px;color:var(--ink-soft)}
.dk .vid .meta b{display:block;color:var(--ink);font-size:15px;font-weight:600;
  font-family:Fraunces,Georgia,serif}

/* ---------- portrait split ---------- */
.dk .split{display:grid;grid-template-columns:1fr;gap:clamp(22px,4vw,44px);align-items:start}
@media (min-width:820px){.dk .split{grid-template-columns:minmax(0,1fr) 340px}}
.dk .portrait{border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:var(--surface-2);line-height:0}
.dk .portrait img{width:100%;height:auto;display:block}
.dk .portrait figcaption{line-height:1.5;padding:14px 16px;font-size:13.5px;
  color:var(--ink-soft);background:var(--surface)}
.dk .portrait figcaption b{display:block;color:var(--ink);font-weight:600;
  font-family:Fraunces,Georgia,serif;font-size:15px}

/* ---------- long form testimonials ---------- */
.dk .story{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:clamp(24px,3.5vw,32px);margin-bottom:14px}
.dk .story .who{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.dk .story .who b{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;
  letter-spacing:-.01em;display:inline}
.dk .story .who span{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
.dk .story p{font-size:16.5px;line-height:1.62}
.dk .story p:last-child{margin-bottom:0}

/* ---------- callout ---------- */
.dk .notsure{background:var(--green);color:var(--on-green);border-radius:12px;
  padding:24px 26px;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-top:24px}
.dk .notsure p{margin:0;color:var(--on-green);opacity:.88;max-width:48ch}
.dk .notsure strong{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;
  display:block;opacity:1;margin-bottom:3px}

/* ---------- footer ---------- */
.dk .dkfoot{border-top:1px solid var(--line);padding-block:28px;
  color:var(--ink-soft);font-size:14px;background:var(--ground)}
.dk .dkfoot a{color:var(--ink-soft);text-decoration:none}
.dk .dkfoot a:hover{color:var(--ink);text-decoration:underline}

@media (prefers-reduced-motion:reduce){.dk *{transition:none!important}}

/* ===========================================================
   Checkout popups. main.js styles these inline against
   variables from the old stylesheet, which these pages do not
   load, so everything here is an override.
   =========================================================== */
.dk #precheckout-overlay,.dk #upsell-overlay{
  background:rgba(39,54,43,0.55)!important;
  align-items:center!important;padding:20px!important}
.dk #precheckout-sheet,.dk #upsell-sheet,
.dk #upsell-overlay > div{
  background:var(--surface)!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  color:var(--ink)!important;
  box-shadow:0 18px 50px rgba(39,54,43,.18)!important}
.dk #precheckout-sheet *,.dk #upsell-sheet *,.dk #upsell-overlay > div *{
  color:var(--ink)!important}
.dk #precheckout-sheet h2,.dk #upsell-overlay h3{
  font-family:Fraunces,Georgia,serif!important;font-weight:600!important;
  letter-spacing:-.015em!important}
/* the small uppercase kicker */
.dk #precheckout-sheet > p:first-of-type,.dk #upsell-overlay p:first-of-type{
  color:var(--ink-soft)!important}
/* info panel */
.dk #precheckout-sheet > div:nth-of-type(1){
  background:var(--surface-2)!important;border:1px solid var(--line)!important}
/* the no-refund panel stays a warning, just readable */
.dk #precheckout-sheet > div:nth-of-type(2){
  background:#fbf0ec!important;border:1px solid #e6c4b8!important}
.dk #precheckout-sheet > div:nth-of-type(2) strong{color:#9c3b2c!important}
/* agreement toggle */
.dk #policy-toggle{background:var(--surface-2)!important;color:var(--ink)!important}
.dk #policy-full{background:var(--surface)!important}
/* acknowledgement row */
.dk #precheckout-sheet label{
  background:var(--surface-2)!important;border:1.5px solid var(--line)!important}
.dk #ack-agree{accent-color:var(--green)!important}

/* THE FIX: the primary button must read as the primary button */
.dk #ack-proceed-btn{
  background:var(--surface-2)!important;color:var(--ink-soft)!important;
  border:1px solid var(--line)!important}
.dk #ack-proceed-btn:not([disabled]){
  background:var(--green)!important;color:var(--on-green)!important;
  border-color:var(--green)!important;cursor:pointer!important}
.dk #ack-proceed-btn:not([disabled]):hover{background:var(--green-hi)!important}

/* upsell yes / no thanks */
.dk #upsell-overlay button[onclick*="showPreCheckout"]:first-of-type,
.dk #upsell-overlay button[onclick*="Upgrade"]{
  background:var(--green)!important;color:var(--on-green)!important;
  border:1px solid var(--green)!important}
.dk #upsell-overlay button[onclick*="showPreCheckout"]{
  border-radius:12px!important}
.dk #upsell-sheet a[href*="buy.stripe.com"]{
  background:var(--green)!important;color:var(--on-green)!important;
  border-radius:12px!important}

/* PayPal keeps its own brand colours, but sits as the alternative */
.dk #precheckout-sheet a[href*="paypal"],
.dk #upsell-sheet a[href*="paypal"]{
  background:#FFC439!important;border-radius:12px!important}
.dk #precheckout-sheet a[href*="paypal"] *,
.dk #upsell-sheet a[href*="paypal"] *,
.dk #precheckout-sheet a[href*="paypal"],
.dk #upsell-sheet a[href*="paypal"]{color:#003087!important}
.dk .mclose,.dk #precheckout-sheet button[onclick*="close"],
.dk #upsell-overlay button[onclick*="close"]{color:var(--ink-soft)!important}

/* ---------- about: story path ---------- */
.dk .path{list-style:none;margin:24px 0 0;padding:0;position:relative}
.dk .path::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;
  width:1px;background:var(--line)}
.dk .path li{position:relative;padding:0 0 26px 34px}
.dk .path li:last-child{padding-bottom:0}
.dk .path li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;
  border-radius:50%;background:var(--ground);border:2px solid var(--clay)}
.dk .path .yr{display:block;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.dk .path p{margin:0 0 10px}
.dk .path p:last-child{margin-bottom:0}

/* ---------- about: warm closing block ---------- */
.dk .heart{background:var(--surface-2);border:1px solid var(--line);
  border-left:4px solid var(--clay);border-radius:12px;
  padding:clamp(24px,3.5vw,30px)}
.dk .heart h2{margin-bottom:12px}
.dk .heart p{font-size:17px;line-height:1.62}
.dk .heart p:last-child{margin-bottom:0}