/* ==========================================================================
   TOKENS — sampled directly from the final cover artwork
   ========================================================================== */
:root{
  --dd-ink:#201E1F;            /* cover background, exact */
  --dd-ink-soft:#3A3536;
  --dd-gold:#E5BC3C;           /* cover accent, exact — 9.15:1 with ink text */
  --dd-gold-deep:#C79E22;      /* hover / pressed only */
  --dd-teal:#239EBB;           /* Screen Guy tie — RULES AND FILLS ONLY */
  --dd-teal-deep:#166578;      /* the only teal allowed on text (6.6:1) */
  --dd-sky:#8ECAE6;
  --dd-pale-blue:#B0E1F3;
  --dd-white:#FFFFFF;
  --dd-off-white:#F7F8F6;
  --dd-muted-text:#53575A;
  --dd-hairline:rgba(32,30,31,.16);
  --dd-hairline-invert:rgba(255,255,255,.22);

  --dd-font-display:"Barlow Condensed","Oswald","Arial Narrow",sans-serif;
  --dd-font-body:"Inter","Helvetica Neue",Arial,sans-serif;

  --dd-fs-hero:clamp(3.6rem,13vw,9.5rem);
  --dd-fs-h2:clamp(2rem,4.6vw,3.6rem);
  --dd-fs-h3:clamp(1.35rem,2.2vw,1.85rem);
  --dd-fs-lead:clamp(1.05rem,1.35vw,1.25rem);
  --dd-fs-body:clamp(1rem,1.05vw,1.0625rem);
  --dd-fs-label:.78rem;

  --dd-cover-ratio:1250/1850;
  --dd-author-focus:center;
  --dd-max:1240px;
  --dd-gutter:clamp(1.25rem,4.5vw,3.5rem);
  --dd-section-y:clamp(4rem,9vw,8rem);
  --dd-anchor-offset:88px;

  --dd-s1:.5rem;  --dd-s2:.875rem; --dd-s3:1.25rem;
  --dd-s4:2rem;   --dd-s5:3rem;    --dd-s6:4.5rem;

  --dd-r-sm:4px;
  --dd-r-md:10px;
  --dd-r-pill:999px;

  --dd-offset:5px 5px 0 var(--dd-ink);
  --dd-offset-lg:10px 10px 0 var(--dd-ink);
  --dd-offset-gold:10px 10px 0 var(--dd-gold);
  --dd-lift:0 18px 40px -18px rgba(32,30,31,.45);

  --dd-dur:.45s;
  --dd-dur-fast:.18s;
  --dd-ease:cubic-bezier(.22,.68,.32,1);
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--dd-white);
  color:var(--dd-ink);
  font-family:var(--dd-font-body);
  font-size:var(--dd-fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--dd-font-display);line-height:.95;letter-spacing:-.01em;text-wrap:balance}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--dd-ink);outline-offset:3px;border-radius:2px}
.dd-on-dark :focus-visible{outline-color:var(--dd-gold)}

.dd-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.dd-skip{
  position:absolute;left:var(--dd-s3);top:-100px;z-index:200;
  background:var(--dd-gold);color:var(--dd-ink);
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-sm);
  padding:.7rem 1.1rem;font-weight:700;text-decoration:none;
  transition:top var(--dd-dur-fast) var(--dd-ease);
}
.dd-skip:focus{top:var(--dd-s3)}

.dd-wrap{width:100%;max-width:var(--dd-max);margin-inline:auto;padding-inline:var(--dd-gutter)}
.dd-section{padding-block:var(--dd-section-y);position:relative}
section[id]{scroll-margin-top:var(--dd-anchor-offset)}

.dd-label{
  font-family:var(--dd-font-body);font-size:var(--dd-fs-label);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dd-muted-text);
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 var(--dd-s3);
}

.dd-lead{font-size:var(--dd-fs-lead);color:var(--dd-muted-text);max-width:60ch}
.dd-on-dark{background:var(--dd-ink);color:var(--dd-white)}
.dd-on-dark .dd-lead{color:rgba(255,255,255,.78)}

/* Gold as a highlight FILL — never as text on white */
.dd-mark{background:linear-gradient(transparent 62%,var(--dd-gold) 62%);padding-inline:.08em}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.dd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.85rem 1.5rem;
  font-family:var(--dd-font-body);font-size:.95rem;font-weight:700;
  letter-spacing:.02em;text-decoration:none;text-align:center;
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-md);cursor:pointer;
  transition:transform var(--dd-dur-fast) var(--dd-ease),
             box-shadow var(--dd-dur-fast) var(--dd-ease),
             background-color var(--dd-dur-fast) var(--dd-ease);
}
.dd-btn--primary{background:var(--dd-gold);color:var(--dd-ink);box-shadow:var(--dd-offset)}
.dd-btn--ghost{background:transparent;color:var(--dd-ink);box-shadow:none}
.dd-btn--light{background:var(--dd-white);color:var(--dd-ink);box-shadow:var(--dd-offset)}
.dd-on-dark .dd-btn--ghost{color:var(--dd-white);border-color:var(--dd-white)}
.dd-on-dark .dd-btn--primary,
.dd-on-dark .dd-btn--light{border-color:var(--dd-white);box-shadow:5px 5px 0 var(--dd-gold)}
.dd-btn:hover{transform:translate(-2px,-2px)}
.dd-btn--primary:hover{background:var(--dd-gold-deep);box-shadow:7px 7px 0 var(--dd-ink)}
.dd-btn--light:hover{box-shadow:7px 7px 0 var(--dd-ink)}
.dd-on-dark .dd-btn--primary:hover,.dd-on-dark .dd-btn--light:hover{box-shadow:7px 7px 0 var(--dd-gold)}
.dd-btn--ghost:hover{background:var(--dd-off-white)}
.dd-on-dark .dd-btn--ghost:hover{background:rgba(255,255,255,.1)}
.dd-btn:active{transform:translate(0,0)}

/* ==========================================================================
   ANNOUNCEMENT BAR
   ========================================================================== */
.dd-announce{
  background:var(--dd-ink);color:var(--dd-white);
  font-size:.8rem;letter-spacing:.05em;padding:.6rem var(--dd-gutter);text-align:center;
}
.dd-announce p{margin:0}
.dd-announce b{color:var(--dd-gold);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.dd-announce .dd-dot{color:var(--dd-sky);padding-inline:.4rem}

/* ==========================================================================
   HEADER — this is now a standalone site, so the page owns its own chrome
   ========================================================================== */
.dd-header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:2px solid var(--dd-ink);
}
.dd-header__inner{display:flex;align-items:center;gap:var(--dd-s4);min-height:72px}
.dd-header__logo{
  display:flex;flex-direction:column;gap:1px;flex:none;
  text-decoration:none;color:var(--dd-ink);line-height:1;
}
.dd-header__logo b{
  font-family:var(--dd-font-display);font-size:1.5rem;font-weight:700;
  letter-spacing:.01em;text-transform:uppercase;
}
.dd-header__logo span{
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dd-muted-text);
}
.dd-nav{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem)}
.dd-nav a{font-size:.9rem;font-weight:600;text-decoration:none;color:var(--dd-ink);padding:.4rem 0;position:relative;white-space:nowrap}
.dd-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;background:var(--dd-gold);
  transition:right var(--dd-dur-fast) var(--dd-ease);
}
.dd-nav a:hover::after{right:0}
.dd-header .dd-btn{min-height:46px;padding:.6rem 1.1rem;font-size:.88rem;flex:none}
@media (max-width:900px){
  .dd-nav{display:none}
  .dd-header__inner{justify-content:space-between;gap:var(--dd-s2)}
  .dd-header .dd-btn{margin-inline-start:auto}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.dd-hero{
  position:relative;overflow:hidden;background:var(--dd-white);
  padding-block:clamp(2.5rem,6vw,5rem) clamp(3rem,7vw,6rem);
  border-bottom:2px solid var(--dd-ink);
}
.dd-hero__current{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.dd-hero__current svg{width:100%;height:100%}
/* Two motions compose into a real wave:
   1. dd-flow drifts each line by exactly one wavelength (350 units) — seamless loop.
   2. An inline SMIL <animate> morphs crest-first <-> trough-first, so the wave
      rises and falls instead of sliding rigidly.
   Durations are mutually non-factoring, so the lines never resynchronize. */
.dd-current-line{
  fill:none;stroke:var(--dd-pale-blue);stroke-width:1.5;stroke-linecap:round;
  animation:dd-flow var(--dd-drift-dur,26s) linear infinite;
}
@keyframes dd-flow{from{transform:translateX(0)}to{transform:translateX(-350px)}}

.dd-hero__grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.dd-hero__eyebrow{
  font-size:var(--dd-fs-label);font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dd-ink);display:inline-block;
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-pill);
  padding:.42rem .95rem;margin-bottom:var(--dd-s3);background:var(--dd-white);
}
.dd-hero__title{
  font-size:var(--dd-fs-hero);font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.82;margin:0 0 var(--dd-s3);
}
.dd-driftword{display:block}
.dd-driftword__row{display:block;white-space:nowrap}
.dd-driftword__row span{
  display:inline-block;
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));
  transition:transform 1.1s var(--dd-ease);
}
.dd-driftword__row--drift span{color:var(--dd-teal-deep)}
.dd-driftword__row--drift span:nth-child(1){--y:0px;--r:0deg}
.dd-driftword__row--drift span:nth-child(2){--y:.045em;--r:.6deg}
.dd-driftword__row--drift span:nth-child(3){--y:.1em;--r:1.3deg}
.dd-driftword__row--drift span:nth-child(4){--y:.17em;--r:2.2deg}
.dd-driftword__row--drift span:nth-child(5){--y:.26em;--r:3.4deg;opacity:.86}
.dd-hero__title:hover .dd-driftword__row--drift span{--y:0px;--r:0deg;opacity:1}

.dd-hero__subtitle{
  font-family:var(--dd-font-display);font-size:clamp(1.1rem,2.1vw,1.6rem);
  font-weight:500;line-height:1.15;letter-spacing:.005em;color:var(--dd-ink);
  max-width:22ch;margin:0 0 var(--dd-s3);padding-bottom:var(--dd-s3);
  border-bottom:2px solid var(--dd-ink);
}
.dd-hero__hook{
  font-family:var(--dd-font-body);font-size:clamp(1.1rem,1.65vw,1.35rem);
  font-weight:600;line-height:1.35;margin:0 0 var(--dd-s3);max-width:26ch;
}
.dd-hero__copy{max-width:52ch;color:var(--dd-muted-text)}
.dd-hero__actions{display:flex;flex-wrap:wrap;gap:var(--dd-s2);margin:var(--dd-s4) 0 var(--dd-s3)}
.dd-hero__meta{
  display:flex;flex-direction:column;gap:.25rem;font-size:.86rem;color:var(--dd-muted-text);
  border-left:3px solid var(--dd-teal);padding-left:var(--dd-s3);margin-top:var(--dd-s3);
}
.dd-hero__meta strong{color:var(--dd-ink);font-weight:600}

/* --- 3D book --- */
.dd-book-stage{position:relative;display:flex;justify-content:center;align-items:center;perspective:1600px}
.dd-book-stage__glyph{
  position:absolute;z-index:0;width:min(115%,560px);color:var(--dd-pale-blue);
  opacity:.55;pointer-events:none;
}
.dd-book{
  position:relative;z-index:1;width:min(340px,78%);
  transform-style:preserve-3d;transform:rotateY(-19deg) rotateX(4deg);
  transition:transform 1s var(--dd-ease);
  animation:dd-book-in 1.1s var(--dd-ease) both;
}
.dd-book:hover{transform:rotateY(-11deg) rotateX(2deg) translateY(-6px)}
@keyframes dd-book-in{
  from{opacity:0;transform:rotateY(-30deg) rotateX(6deg) translateY(26px)}
  to{opacity:1;transform:rotateY(-19deg) rotateX(4deg) translateY(0)}
}
.dd-book__cover{
  position:relative;aspect-ratio:var(--dd-cover-ratio);
  border-radius:2px 6px 6px 2px;box-shadow:var(--dd-lift);overflow:hidden;
}
/* background matches the cover's own black, so any ratio mismatch is invisible */
.dd-book__cover img{width:100%;height:100%;object-fit:contain;background:var(--dd-ink)}
/* Spine now reads as the black cover wrapping, not the old teal edge */
.dd-book::before{
  content:"";position:absolute;top:1.6%;bottom:1.6%;left:-15px;width:15px;
  background:linear-gradient(90deg,#000 0%,#2E2B2C 100%);
  transform:rotateY(-72deg);transform-origin:right center;border-radius:2px 0 0 2px;
}
.dd-book::after{
  content:"";position:absolute;top:1.2%;bottom:2.4%;right:-11px;width:11px;
  background:repeating-linear-gradient(90deg,#fff 0 1px,#dcdcd8 1px 2px);
  transform:rotateY(74deg);transform-origin:left center;border-radius:0 3px 3px 0;
}
.dd-book__sheen{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.30) 0 12%,rgba(255,255,255,0) 42%);
}
.dd-badge{
  position:absolute;z-index:3;top:-14px;right:-6px;
  background:var(--dd-gold);color:var(--dd-ink);
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-pill);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.45rem .9rem;box-shadow:3px 3px 0 var(--dd-ink);transform:rotate(3deg);
}
@media (max-width:900px){
  .dd-hero__grid{grid-template-columns:1fr;gap:var(--dd-s5)}
  .dd-book-stage{order:2}
  .dd-hero__text{order:1}
  .dd-book{width:min(260px,62%)}
  .dd-hero__subtitle{max-width:30ch}
}

/* ==========================================================================
   RETAILERS
   ========================================================================== */
/* ==========================================================================
   PROMO VIDEO
   White band between the hero and the retailer block. The frame uses the same
   ink border and offset shadow as the retailer cards so it reads as part of
   the set. 16:9 via aspect-ratio; the iframe fills it.
   ========================================================================== */
.dd-video{background:var(--dd-white);border-bottom:2px solid var(--dd-ink)}
.dd-video__head{text-align:center;margin-bottom:var(--dd-s4)}
.dd-video__head .dd-label{justify-content:center}
.dd-video__frame{
  max-width:960px;margin-inline:auto;aspect-ratio:16/9;
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-md);
  box-shadow:var(--dd-offset);overflow:hidden;background:var(--dd-ink);
}
.dd-video__frame iframe{display:block;width:100%;height:100%;border:0}

.dd-retailers{background:var(--dd-off-white);border-bottom:2px solid var(--dd-ink)}
.dd-retailers__head{
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:var(--dd-s3);margin-bottom:var(--dd-s4);
}
.dd-retailers__head h2{font-size:var(--dd-fs-h2);text-transform:uppercase}
.dd-retailers__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dd-s3)}
.dd-retailer{
  display:flex;flex-direction:column;gap:var(--dd-s2);background:var(--dd-white);
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-md);padding:var(--dd-s3);
  text-decoration:none;color:var(--dd-ink);box-shadow:var(--dd-offset);
  transition:transform var(--dd-dur-fast) var(--dd-ease),box-shadow var(--dd-dur-fast) var(--dd-ease);
}
.dd-retailer:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--dd-gold)}
/* Retailer logos. The three marks have wildly different aspect ratios
   (Amazon 2.98:1, Simon & Schuster 6.97:1, Barnes & Noble 11.82:1), so a
   single shared height would make B&N enormous and Amazon tiny. Each gets a
   hand-tuned height instead, chosen so the rendered WIDTHS land close
   together and the three read as equal weight on the row. */
.dd-retailer__logo{
  display:flex;align-items:center;
  min-height:54px;flex:none;
}
.dd-retailer__logo img{display:block;width:auto;max-width:100%}
.dd-retailer__logo--amazon img{height:36px}   /* ~107px wide */
.dd-retailer__logo--bn     img{height:14px}   /* ~167px wide */
.dd-retailer__logo--bs     img{height:22px}   /* ~145px wide */   /* ~146px wide */
.dd-retailer__action{
  display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;
  margin-top:auto;padding-top:var(--dd-s2);border-top:2px solid var(--dd-hairline);
}
.dd-retailer__action svg{width:15px;height:15px;flex:none}
.dd-retailer__note{font-size:.8rem;color:var(--dd-muted-text)}
/* "Available wherever books are sold." — reassurance under the retailer set,
   so the three buttons don't read as the only ways to buy. */
.dd-everywhere{
  margin-top:var(--dd-s4);
  text-align:center;
  font-family:var(--dd-font-display);
  font-size:clamp(1.05rem,1.9vw,1.4rem);
  font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--dd-ink);
}
.dd-everywhere--dark{color:var(--dd-white);opacity:.82;text-align:left;margin-top:var(--dd-s3)}

/* ---- Media inquiries ----
   No button here on purpose: a second high-contrast CTA would compete with
   the purchase buttons. The email address IS the call to action, set large
   enough to read as an invitation and quiet enough to stay secondary. */
.dd-media{
  padding-block:clamp(3rem,6vw,5rem);
  border-top:2px solid var(--dd-ink);
  border-bottom:2px solid var(--dd-ink);
  background:var(--dd-off-white);
  text-align:center;
}
.dd-media .dd-label{justify-content:center}
.dd-media h2{
  font-size:clamp(1.5rem,3vw,2.2rem);text-transform:uppercase;
  margin-bottom:var(--dd-s2);
}
.dd-media__note{
  font-size:.95rem;color:var(--dd-muted-text);
  max-width:52ch;margin-inline:auto;margin-bottom:var(--dd-s4);
}
/* Trigger for the media form. Styled as display type with a gold rule so it
   stays typographic and does not compete with the purchase CTAs. Works as
   either an <a> (hosted Brevo form / mailto) or a <button> (JS-opened popup),
   so swapping the element later needs no CSS change. */
/* Collapsed form. <summary> is the trigger — styled as display type with a
   gold rule so it matches the section and does not read as a second CTA. */
.dd-media__disclosure{margin-top:var(--dd-s4)}
.dd-media__trigger{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--dd-font-display);
  font-size:clamp(1.35rem,4.2vw,2.2rem);
  font-weight:600;letter-spacing:.005em;line-height:1.1;
  text-transform:uppercase;color:var(--dd-ink);
  border-bottom:4px solid var(--dd-gold);
  padding:0 0 .14em;cursor:pointer;list-style:none;
  transition:border-bottom-color var(--dd-dur-fast) var(--dd-ease),
             transform var(--dd-dur-fast) var(--dd-ease);
}
/* Remove the default disclosure triangle in every engine */
.dd-media__trigger::-webkit-details-marker{display:none}
.dd-media__trigger::marker{content:""}
.dd-media__trigger:hover{border-bottom-color:var(--dd-ink);transform:translateY(-2px)}
.dd-media__trigger:focus-visible{outline:3px solid var(--dd-ink);outline-offset:4px}
.dd-media__chev{
  width:.62em;height:.62em;flex:none;
  transition:transform var(--dd-dur) var(--dd-ease);
}
.dd-media__disclosure[open] .dd-media__trigger{border-bottom-color:var(--dd-ink)}
.dd-media__disclosure[open] .dd-media__chev{transform:rotate(180deg)}
.dd-media__reveal{animation:dd-reveal-in .4s var(--dd-ease) both}
@keyframes dd-reveal-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

/* Julie's cell number is a PNG, not text, so it cannot be harvested from the
   markup. It appears in one place only — the confirmation panel — because she
   does not want it visible to casual visitors. The <img> ships at 720x140 and
   is scaled down here, which keeps it sharp on 2x/3x screens. JS wraps it in a
   tel: link at runtime — see the "Tap-to-call" block in the script; with JS
   off the number is still legible, it just is not tappable. The alt text
   spells the digits as words so screen readers can read it out while regex
   harvesters still find no number. */
.dd-phone{margin:var(--dd-s2) 0 0}
.dd-phone img{display:block;width:min(186px,56vw);height:auto;margin-inline:auto}
.dd-phone a{
  display:inline-block;line-height:0;padding-bottom:3px;
  border-bottom:3px solid var(--dd-gold);
  transition:border-bottom-color var(--dd-dur-fast) var(--dd-ease);
}
.dd-phone a:hover{border-bottom-color:var(--dd-ink)}
.dd-phone a:focus-visible{outline:3px solid var(--dd-ink);outline-offset:4px}

/* ==========================================================================
   ON-SITE MEDIA FORM
   Our own markup posting to Brevo's endpoint, so the design is ours and the
   visitor never leaves the site. Progressive enhancement: the <form> works
   as a plain POST with JS disabled (Brevo shows its own thank-you page);
   with JS it submits in the background and swaps in an inline success state.
   ========================================================================== */
.dd-form{
  max-width:760px;margin:var(--dd-s4) auto 0;text-align:left;
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-md);
  background:var(--dd-white);padding:clamp(1.4rem,3.5vw,2.4rem);
  box-shadow:var(--dd-offset);
}
.dd-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dd-s3)}
.dd-form__row--full{grid-column:1 / -1}
@media (max-width:620px){.dd-form__grid{grid-template-columns:1fr}}

.dd-field{display:flex;flex-direction:column;gap:.35rem}
.dd-field label,.dd-fieldset legend{
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dd-ink);
}
.dd-field .dd-opt{color:var(--dd-muted-text);font-weight:600;letter-spacing:.06em}
.dd-field input,.dd-field select,.dd-field textarea{
  font-family:var(--dd-font-body);font-size:1rem;color:var(--dd-ink);
  background:var(--dd-white);
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-sm);
  padding:.7rem .8rem;min-height:48px;width:100%;
  transition:border-color var(--dd-dur-fast) var(--dd-ease),
             box-shadow var(--dd-dur-fast) var(--dd-ease);
}
.dd-field textarea{min-height:130px;resize:vertical;line-height:1.55}
.dd-field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--dd-ink) 50%),
                   linear-gradient(135deg,var(--dd-ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem;
}
.dd-field input:focus,.dd-field select:focus,.dd-field textarea:focus{
  outline:none;border-color:var(--dd-ink);box-shadow:0 0 0 4px var(--dd-gold);
}
.dd-field input[aria-invalid="true"],
.dd-field textarea[aria-invalid="true"],
.dd-field select[aria-invalid="true"]{border-color:#B3261E}
.dd-field__error{
  font-size:.82rem;font-weight:600;color:#B3261E;min-height:0;
}
.dd-field__error:empty{display:none}

/* Honeypot: hidden from people, visible to bots that fill every field. */
.dd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Cloudflare Turnstile widget, rendered by js/site.js when the form opens.
   min-height reserves its space so the button doesn't jump when it loads. */
.dd-turnstile{margin:var(--dd-s3) 0 0;min-height:65px}

.dd-form__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--dd-s3);
  margin-top:var(--dd-s4);
}
.dd-form__foot .dd-btn{flex:none}
.dd-form__fine{font-size:.8rem;color:var(--dd-muted-text);margin:0;max-width:44ch}
.dd-form__fine a{color:var(--dd-ink);border-bottom:1px solid var(--dd-hairline);text-decoration:none}

.dd-form[data-state="sending"]{opacity:.6;pointer-events:none}
.dd-form__status{margin-top:var(--dd-s3);font-size:.95rem;font-weight:600}
.dd-form__status--error{color:#B3261E}
.dd-form__status:empty{display:none}

/* Success replaces the form entirely — no ambiguity about whether it sent. */
.dd-form__done{
  max-width:760px;margin:var(--dd-s4) auto 0;text-align:center;
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-md);
  background:var(--dd-white);padding:clamp(1.8rem,4vw,3rem);
  box-shadow:var(--dd-offset-gold);
}
.dd-form__done h3{
  font-size:clamp(1.5rem,3vw,2.2rem);text-transform:uppercase;margin-bottom:var(--dd-s2);
}
.dd-form__done p{color:var(--dd-muted-text);max-width:48ch;margin-inline:auto}
.dd-form__done-note{
  margin-top:var(--dd-s3) !important;padding-top:var(--dd-s3);
  border-top:2px solid var(--dd-hairline);
  font-size:.85rem;
}
.dd-form__done svg{width:44px;height:44px;color:var(--dd-ink);margin:0 auto var(--dd-s3)}
.dd-disclosure{
  margin-top:var(--dd-s4);font-size:.78rem;color:var(--dd-muted-text);max-width:70ch;
  border-left:3px solid var(--dd-hairline);padding-left:var(--dd-s3);
}
@media (max-width:820px){
  .dd-retailers__grid{grid-template-columns:1fr}
  .dd-retailer{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--dd-s3)}
  .dd-retailer__logo{min-height:44px}
  .dd-retailer__action{margin-inline-start:auto;border-top:0;padding-top:0;width:auto}
  .dd-retailer__note{flex-basis:100%}
}

/* ==========================================================================
   THE DRIFT
   ========================================================================== */
.dd-drift{position:relative;overflow:hidden}
.dd-drift__intro{max-width:66ch;margin-bottom:var(--dd-s6)}
.dd-drift__intro h2{font-size:var(--dd-fs-h2);margin-bottom:var(--dd-s3);text-transform:uppercase}
.dd-stages{position:relative}
.dd-stages__line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.dd-stages__line path{
  fill:none;stroke:var(--dd-teal);stroke-width:2.5;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 2.2s var(--dd-ease);
}
.dd-stages.dd-in .dd-stages__line path{stroke-dashoffset:0}
.dd-stages__grid{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,3vw,2.5rem);align-items:start;
}
.dd-stage:nth-child(1){margin-top:0}
.dd-stage:nth-child(2){margin-top:clamp(2rem,5vw,4.5rem)}
.dd-stage:nth-child(3){margin-top:clamp(4rem,10vw,9rem)}
.dd-stage__num{
  display:inline-block;font-family:var(--dd-font-display);font-size:.9rem;font-weight:700;
  letter-spacing:.18em;color:var(--dd-muted-text);margin-bottom:var(--dd-s2);
}
.dd-stage h3{
  font-size:clamp(2rem,4vw,3.1rem);text-transform:uppercase;font-weight:700;
  margin-bottom:var(--dd-s2);
}
.dd-stage:nth-child(2) h3{color:var(--dd-teal-deep)}
.dd-stage p{color:var(--dd-muted-text);max-width:34ch}
.dd-stage__rule{width:100%;height:3px;background:var(--dd-ink);margin-bottom:var(--dd-s3)}
.dd-stage:nth-child(2) .dd-stage__rule{background:var(--dd-teal)}
.dd-stage:nth-child(3) .dd-stage__rule{background:var(--dd-gold)}
@media (max-width:820px){
  .dd-stages__grid{grid-template-columns:1fr;gap:var(--dd-s5)}
  .dd-stage:nth-child(2),.dd-stage:nth-child(3){margin-top:0}
  .dd-stage:nth-child(2){padding-left:clamp(1rem,6vw,2.5rem)}
  .dd-stage:nth-child(3){padding-left:clamp(2rem,12vw,5rem)}
  .dd-stages__line{display:none}
}

/* ==========================================================================
   PROBLEM -> POSSIBILITY
   ========================================================================== */
.dd-turn{background:var(--dd-ink);color:var(--dd-white);overflow:hidden}
.dd-turn h2{font-size:var(--dd-fs-h2);text-transform:uppercase;max-width:20ch;margin-bottom:var(--dd-s5)}
.dd-turn__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);align-items:start}
.dd-turn__panel{border:2px solid var(--dd-hairline-invert);border-radius:var(--dd-r-md);padding:clamp(1.4rem,3vw,2.4rem)}
.dd-turn__panel h3{font-size:var(--dd-fs-h3);text-transform:uppercase;margin-bottom:var(--dd-s3)}
.dd-turn__panel p{color:rgba(255,255,255,.76)}
.dd-turn__panel--drift{transform:rotate(-.7deg)}
.dd-turn__panel--drift h3{color:var(--dd-sky)}
.dd-turn__panel--drift li{
  padding:.7rem 0;border-bottom:1px solid var(--dd-hairline-invert);
  color:rgba(255,255,255,.76);font-size:.98rem;
}
.dd-turn__panel--drift li:nth-child(2){transform:translateX(6px)}
.dd-turn__panel--drift li:nth-child(3){transform:translateX(14px)}
.dd-turn__panel--drift li:nth-child(4){transform:translateX(24px)}
.dd-turn__panel--drift li:last-child{border-bottom:0}
.dd-turn__panel--anchor{
  background:var(--dd-white);color:var(--dd-ink);border-color:var(--dd-white);
  box-shadow:var(--dd-offset-gold);
}
.dd-turn__panel--anchor h3{color:var(--dd-ink)}
.dd-turn__panel--anchor p{color:var(--dd-muted-text)}
.dd-turn__panel--anchor li{
  display:flex;gap:.75rem;padding:.7rem 0;border-bottom:1px solid var(--dd-hairline);font-size:.98rem;
}
.dd-turn__panel--anchor li:last-child{border-bottom:0}
.dd-turn__panel--anchor li svg{width:18px;height:18px;flex:none;margin-top:.28rem;color:var(--dd-teal-deep)}
.dd-quote{margin:var(--dd-s6) 0 0;border-top:3px solid var(--dd-gold);padding-top:var(--dd-s4)}
.dd-quote blockquote{
  margin:0;font-family:var(--dd-font-display);font-weight:600;
  font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.02;text-transform:uppercase;max-width:20ch;
}
.dd-quote blockquote span{color:var(--dd-gold)}
.dd-quote cite{
  display:block;margin-top:var(--dd-s3);font-style:normal;font-size:.82rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dd-sky);
}
@media (max-width:820px){
  .dd-turn__cols{grid-template-columns:1fr}
  .dd-turn__panel--drift{transform:none}
}

/* ==========================================================================
   INSIDE THE BOOK
   ========================================================================== */
.dd-learn h2{font-size:var(--dd-fs-h2);text-transform:uppercase;max-width:18ch;margin-bottom:var(--dd-s5)}
.dd-learn__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.dd-benefit{border-top:3px solid var(--dd-ink);padding-top:var(--dd-s3);display:flex;gap:var(--dd-s3);align-items:flex-start}
.dd-benefit:nth-child(2),.dd-benefit:nth-child(4){border-top-color:var(--dd-teal)}
.dd-benefit__icon{
  width:56px;height:56px;flex:none;border:2px solid var(--dd-ink);border-radius:var(--dd-r-md);
  display:grid;place-items:center;background:var(--dd-off-white);box-shadow:3px 3px 0 var(--dd-ink);
}
.dd-benefit__icon svg{width:28px;height:28px}
.dd-benefit h3{font-size:1.35rem;text-transform:uppercase;letter-spacing:.01em;margin-bottom:.5rem}
.dd-benefit p{color:var(--dd-muted-text);font-size:.98rem;margin:0}
@media (max-width:820px){.dd-learn__grid{grid-template-columns:1fr}}

/* ==========================================================================
   WHO IT'S FOR
   ========================================================================== */
.dd-audience{background:var(--dd-off-white)}
.dd-audience h2{
  font-size:clamp(1.75rem,3.4vw,2.9rem);text-transform:none;font-weight:600;
  max-width:24ch;margin-bottom:var(--dd-s5);line-height:1.06;
}
.dd-audience__list{border-top:2px solid var(--dd-ink)}
.dd-audience__list li{
  display:grid;grid-template-columns:auto 1fr;gap:var(--dd-s3);align-items:baseline;
  padding:clamp(1rem,2.2vw,1.6rem) 0;border-bottom:2px solid var(--dd-hairline);
  font-size:clamp(1.05rem,1.7vw,1.3rem);
}
.dd-audience__list li:last-child{border-bottom:2px solid var(--dd-ink)}
.dd-audience__key{
  font-family:var(--dd-font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.1rem,2vw,1.5rem);color:var(--dd-teal-deep);
  min-width:clamp(7rem,14vw,12rem);
}

/* ==========================================================================
   AUTHOR
   ========================================================================== */
.dd-author__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.dd-author__figure{position:relative;margin:0;max-width:420px}
.dd-author__frame{
  position:relative;aspect-ratio:1/1;border:3px solid var(--dd-ink);border-radius:50%;
  overflow:hidden;background:var(--dd-pale-blue);box-shadow:var(--dd-offset-gold);
}
.dd-author__frame img{
  width:100%;height:100%;object-fit:cover;object-position:var(--dd-author-focus);border-radius:50%;
}
.dd-author__tag{
  position:absolute;left:50%;bottom:-16px;z-index:2;transform:translateX(-50%);white-space:nowrap;
  background:var(--dd-white);border:2px solid var(--dd-ink);border-radius:var(--dd-r-pill);
  padding:.45rem 1rem;font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;box-shadow:3px 3px 0 var(--dd-ink);
}
.dd-author h2{font-size:var(--dd-fs-h2);text-transform:uppercase;margin-bottom:var(--dd-s3)}
.dd-author__bio{max-width:58ch}
.dd-author__bio p{color:var(--dd-muted-text)}
.dd-author__link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--dd-s3);
  font-size:.9rem;font-weight:600;color:var(--dd-ink);text-decoration:none;
  border-bottom:2px solid var(--dd-teal);padding-bottom:2px;
}
.dd-author__link:hover{border-bottom-color:var(--dd-gold)}
.dd-author__link svg{width:14px;height:14px}
@media (max-width:820px){
  .dd-author__grid{grid-template-columns:1fr}
  .dd-author__figure{max-width:320px;margin-inline:auto}
}

/* ==========================================================================
   FOREWORD — real, printed on the cover
   ========================================================================== */
.dd-foreword{background:var(--dd-ink);color:var(--dd-white)}
.dd-foreword__inner{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--dd-s4);
  justify-content:space-between;
}
.dd-foreword__mark{
  font-family:var(--dd-font-display);font-size:clamp(2rem,4.4vw,3.2rem);
  font-weight:700;text-transform:uppercase;line-height:1;max-width:16ch;
}
.dd-foreword__mark em{font-style:normal;color:var(--dd-gold)}
.dd-foreword__who{max-width:44ch;font-size:.95rem;color:rgba(255,255,255,.78)}
.dd-foreword__who strong{color:var(--dd-white);font-weight:600}

/* ==========================================================================
   FAQ
   ========================================================================== */
.dd-faq{background:var(--dd-off-white)}
.dd-faq__grid{
  display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.dd-faq h2{font-size:var(--dd-fs-h2);text-transform:uppercase}
.dd-faq__list{border-top:2px solid var(--dd-ink)}
.dd-faq__item{border-bottom:2px solid var(--dd-ink)}
.dd-faq__trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--dd-s3);
  min-height:64px;padding:1.15rem 0;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--dd-font-body);font-size:clamp(1rem,1.5vw,1.15rem);
  font-weight:600;color:var(--dd-ink);line-height:1.4;
  transition:color var(--dd-dur-fast) var(--dd-ease);
}
.dd-faq__trigger:hover{color:var(--dd-teal-deep)}
.dd-faq__sign{
  position:relative;width:26px;height:26px;flex:none;
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-sm);background:var(--dd-white);
}
.dd-faq__sign::before,.dd-faq__sign::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--dd-ink);transform:translate(-50%,-50%);
}
.dd-faq__sign::before{width:11px;height:2.5px}
.dd-faq__sign::after{width:2.5px;height:11px;transition:transform var(--dd-dur-fast) var(--dd-ease)}
.dd-faq__trigger[aria-expanded="true"] .dd-faq__sign{background:var(--dd-gold)}
.dd-faq__trigger[aria-expanded="true"] .dd-faq__sign::after{transform:translate(-50%,-50%) scaleY(0)}
.dd-faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dd-dur) var(--dd-ease)}
.dd-faq__panel[data-open="true"]{grid-template-rows:1fr}
.dd-faq__panel > div{overflow:hidden}
.dd-faq__panel p{padding:0 0 1.4rem;margin:0;max-width:62ch;color:var(--dd-muted-text)}
@media (max-width:820px){.dd-faq__grid{grid-template-columns:1fr}}

/* ==========================================================================
   FINAL CTA — the current resolves
   ========================================================================== */
.dd-final{
  background:var(--dd-ink);color:var(--dd-white);position:relative;overflow:hidden;
  border-top:6px solid var(--dd-gold);
}
.dd-final__dots{position:absolute;inset:0;z-index:0;opacity:.32;pointer-events:none}
.dd-final__grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.dd-final__book{width:min(230px,70%);margin-inline:auto;position:relative}
.dd-final__book img{
  width:100%;border-radius:2px 5px 5px 2px;
  box-shadow:0 20px 44px -16px rgba(0,0,0,.8);
  border:1px solid rgba(255,255,255,.14);
}
.dd-final h2{font-size:clamp(2.6rem,7vw,5.6rem);text-transform:uppercase;margin-bottom:var(--dd-s3)}
.dd-final h2 em{font-style:normal;color:var(--dd-gold)}
.dd-final__cta-head{
  font-family:var(--dd-font-display);font-size:1.3rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  margin:var(--dd-s5) 0 var(--dd-s3);padding-top:var(--dd-s3);
  border-top:2px solid var(--dd-hairline-invert);
}
.dd-final__buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dd-s2)}
.dd-final__buttons .dd-btn{width:100%}
@media (max-width:900px){
  .dd-final__grid{grid-template-columns:1fr}
  .dd-final__book{order:2;width:min(180px,50%)}
  .dd-final__text{order:1}
  .dd-final__buttons{grid-template-columns:1fr}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.dd-footer{background:var(--dd-white);border-top:2px solid var(--dd-ink);padding-block:var(--dd-s6) var(--dd-s4)}
.dd-footer__top{
  display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));
  gap:var(--dd-s5);align-items:start;
}
.dd-footer__logo{display:inline-flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--dd-ink);margin-bottom:var(--dd-s3);line-height:1}
.dd-footer__logo b{font-family:var(--dd-font-display);font-size:1.7rem;font-weight:700;text-transform:uppercase}
.dd-footer__logo span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dd-muted-text)}
.dd-footer__contact{font-size:.95rem;color:var(--dd-muted-text)}
.dd-footer__contact a{color:var(--dd-ink);text-decoration:none;border-bottom:1px solid var(--dd-hairline)}
.dd-footer__contact a:hover{border-bottom-color:var(--dd-teal-deep)}
.dd-footer h3{
  font-family:var(--dd-font-body);font-size:var(--dd-fs-label);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dd-muted-text);margin-bottom:var(--dd-s2);
}
.dd-footer__nav li{margin-bottom:.55rem}
.dd-footer__nav a{font-size:.95rem;text-decoration:none;color:var(--dd-ink)}
.dd-footer__nav a:hover{color:var(--dd-teal-deep)}
.dd-social{display:flex;gap:var(--dd-s2);margin-top:var(--dd-s3)}
.dd-social a{
  width:42px;height:42px;display:grid;place-items:center;
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-sm);color:var(--dd-ink);
  transition:background-color var(--dd-dur-fast) var(--dd-ease);
}
.dd-social a:hover{background:var(--dd-gold)}
.dd-social svg{width:19px;height:19px}
.dd-footer__bottom{
  margin-top:var(--dd-s5);padding-top:var(--dd-s3);border-top:2px solid var(--dd-hairline);
  display:flex;flex-wrap:wrap;gap:var(--dd-s3);justify-content:space-between;
  font-size:.82rem;color:var(--dd-muted-text);
}
.dd-footer__bottom a{color:var(--dd-muted-text)}
.dd-footer__bottom nav{display:flex;flex-wrap:wrap;gap:var(--dd-s3)}
.dd-footer__legal{margin-top:var(--dd-s3);font-size:.78rem;color:var(--dd-muted-text);max-width:80ch}
@media (max-width:820px){.dd-footer__top{grid-template-columns:1fr}}

/* ==========================================================================
   STICKY MOBILE CTA
   ========================================================================== */
.dd-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  padding:.7rem var(--dd-gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:var(--dd-white);border-top:2px solid var(--dd-ink);
  transform:translateY(110%);transition:transform var(--dd-dur) var(--dd-ease);
}
.dd-sticky.dd-sticky--on{transform:translateY(0)}
.dd-sticky .dd-btn{width:100%;box-shadow:3px 3px 0 var(--dd-ink)}
@media (max-width:900px){.dd-sticky{display:block}}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.dd-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--dd-ease),transform .7s var(--dd-ease)}
.dd-reveal.dd-in{opacity:1;transform:none}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .dd-reveal{opacity:1;transform:none}
  .dd-stages__line path{stroke-dashoffset:0}
  .dd-driftword__row--drift span{--y:0;--r:0deg;opacity:1}
  .dd-media__reveal{animation:none}
  .dd-sticky{transform:translateY(0)}
}

/* ==========================================================================
   LEGAL PAGES (/privacy/)
   ========================================================================== */
.dd-legal{max-width:76ch;margin-inline:auto}
.dd-legal h1{font-size:clamp(2.2rem,5vw,3.6rem);text-transform:uppercase;margin-bottom:var(--dd-s3)}
.dd-legal h2{
  font-size:clamp(1.15rem,2.1vw,1.5rem);text-transform:uppercase;
  margin:var(--dd-s5) 0 var(--dd-s2);padding-top:var(--dd-s3);
  border-top:2px solid var(--dd-hairline);scroll-margin-top:100px;
}
.dd-legal h3{font-size:1.02rem;font-family:var(--dd-font-body);font-weight:700;margin:var(--dd-s3) 0 .4rem}
.dd-legal p,.dd-legal li{color:var(--dd-muted-text)}
.dd-legal ul{margin:0 0 1.05em;padding-left:1.15rem;list-style:disc}
.dd-legal li{margin-bottom:.45rem}
.dd-legal a{color:var(--dd-ink);border-bottom:2px solid var(--dd-teal);text-decoration:none}
.dd-legal a:hover{border-bottom-color:var(--dd-gold)}
.dd-legal__updated{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dd-ink);
  border:2px solid var(--dd-ink);border-radius:var(--dd-r-pill);
  padding:.4rem .9rem;margin-bottom:var(--dd-s4);background:var(--dd-white);
}
.dd-legal__intro{font-size:var(--dd-fs-lead)}
.dd-toc{
  background:var(--dd-off-white);border:2px solid var(--dd-ink);
  border-radius:var(--dd-r-md);padding:var(--dd-s3) var(--dd-s4);
  margin:var(--dd-s4) 0 var(--dd-s5);box-shadow:var(--dd-offset);
}
.dd-toc h2{
  border-top:0;padding-top:0;margin:0 0 var(--dd-s2);
  font-size:var(--dd-fs-label);font-family:var(--dd-font-body);
  letter-spacing:.2em;color:var(--dd-muted-text);
}
.dd-toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:var(--dd-s4)}
.dd-toc li{margin-bottom:.35rem;font-size:.92rem;break-inside:avoid}
@media (max-width:620px){.dd-toc ol{columns:1}}
.dd-legal table{
  width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.9rem;
}
.dd-legal th,.dd-legal td{
  text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--dd-hairline);
  vertical-align:top;color:var(--dd-muted-text);
}
.dd-legal th{
  color:var(--dd-ink);font-weight:700;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;border-bottom:2px solid var(--dd-ink);
}
.dd-legal__box{
  border-left:4px solid var(--dd-gold);background:var(--dd-off-white);
  padding:var(--dd-s3);margin:var(--dd-s3) 0;
}
.dd-legal__box p{margin:0}