/*
  destinysync.com Kundali homepage.

  Loaded after css/tokens.css and css/style.css (both copied from
  VoidEngine/web/kundali-landing). Base look from direction 06 Dawn
  (white, DM Sans, one DM Serif Text line); hero centrepiece from
  direction 10 Object (the Kundali as a printed booklet in CSS 3D),
  recoloured into Dawn's palette. The lower half of this file restyles
  the purchase-journey overlay and the form controls js/journey.js and
  js/account.js render, without touching their markup.

  2026-09-23: recoloured to the founder-picked Sage / eucalyptus palette
  (claude-design/palettes/index.html, option 2). The --lavender and --sky
  variable names are kept as-is to avoid touching every call site; their
  values now hold the sage tint (#D7DFD2) and sage mist (#EBEFE8) instead.
  The hero ground alone uses the deeper --sage-ground (#C4D0BE) so the
  cream Kundali PDF pages keep their contrast; other sections alternate
  --lavender (tint) and --sky (mist) via .ds-bg-tint / .ds-bg-mist so the
  page doesn't read as one flat mid-tone. The Kundali paper colour
  (--dw-paper, --paper) is untouched.

  --muted (and tokens.css --ink-muted) is deliberately darker than the
  palette card's own "muted text" swatch (#57624E): that swatch is only
  4.02:1 against --sage-ground, under the 4.5:1 AA floor for the hero
  lede, which sits directly on --sage-ground. #4A5440 clears 4.5:1 on
  every background this file uses it on (4.98:1 on --sage-ground and
  higher everywhere lighter).
*/

:root {
  --sage-ground: #C4D0BE;
  --lavender: #D7DFD2;
  --sky: #EBEFE8;
  --muted: #4A5440;
  --hair: #AFBFA5;
  --hair-2: #C3CFBC;
  --paper: #f2eee6;
  --paper-ink: #23211e;
  --paper-grey: #8a857a;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "DM Serif Text", Georgia, serif;
  --font-deva: "Noto Serif Devanagari", serif;
  --bw: 316px;
  --bh: 447px;
  --bt: 50px;
  color-scheme: light;
}

body {
  /* Layout audit (23 Sep): was #fff, which left white strips down both
     sides of .mk-layout (and, once founder/faq moved out of it, would have
     left them too) on any viewport wider than .mk-layout's 1200px box.
     The sage mist ground is continuous from #solution down through the
     closing strip; .ds-dawn (hero) and .ds-photoband paint over this with
     their own full-bleed backgrounds, so this is only ever visible where
     nothing else is drawn on top of it. */
  background: var(--sky);
  font-size: 17px;
  line-height: 1.6;
}

h1,
h2,
h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  text-wrap: balance;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Reveal the first keyboard stop; .visually-hidden otherwise clips it. */
.visually-hidden[href="#main"]:focus {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 16px;
  width: auto;
  height: auto;
  min-height: 44px;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 10px 16px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--ink);
  color: #fff;
}

.ds-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------------------------------------------------------------------
   Buttons and links
--------------------------------------------------------------------- */

.ds-btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}

.ds-btn:hover,
.btn-primary:hover {
  background: #354A2B;
}

.ds-btn--sm {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
}

.ds-btn--block,
.btn-block {
  width: 100%;
}

.ds-link {
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  color: var(--accent);
  padding: 12px 4px;
}

.ds-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------------------
   Dawn wash
--------------------------------------------------------------------- */

.ds-dawn {
  position: relative;
  background:
    radial-gradient(60% 70% at 10% 8%, #D2DCC9 0%, rgba(196, 208, 190, 0) 75%),
    radial-gradient(55% 75% at 88% 30%, #CCD9C2 0%, rgba(196, 208, 190, 0) 75%),
    linear-gradient(to bottom, var(--sage-ground) 0%, var(--sky) 100%);
}

/* Alternating section grounds: keeps long stretches of sections from
   reading as one flat mid-tone. Odd sections after the hero use the
   lighter sage mist, even ones the deeper sage tint. */
.ds-bg-tint {
  background: var(--lavender);
}

.ds-bg-mist {
  background: var(--sky);
}

/* ---------------------------------------------------------------------
   Header
--------------------------------------------------------------------- */

.ds-head {
  position: relative;
  z-index: 5;
  padding: 20px 0;
}

.ds-head .ds-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1360px;
}

.ds-head .ds-wordmark { order: 1; }
.ds-head .ds-nav { order: 2; }
.ds-head .ds-btn { order: 3; }
.ds-head .ds-lang { order: 4; }
.ds-head .ds-menu { order: 5; }

.ds-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  font-weight: 600;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.ds-nav {
  display: flex;
  gap: 18px;
  margin-left: auto;
}

.ds-nav a {
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 6px 0;
}

.ds-menu summary,
.ds-menu__panel a {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ds-nav a:hover {
  color: var(--ink);
}

.ds-nav a[aria-current] {
  color: var(--ink);
  font-weight: 500;
}

.ds-menu {
  display: none;
  position: relative;
}

.ds-menu summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 15px;
  padding: 0 4px;
}

.ds-menu summary::-webkit-details-marker {
  display: none;
}

.ds-menu[open] .ds-menu__panel {
  display: flex;
}

.ds-menu__panel {
  display: none;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 50px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 220px;
}

.ds-menu__panel a {
  padding: 12px 20px;
  text-decoration: none;
}

.ds-menu__panel a[aria-current] {
  font-weight: 500;
}

/* ---------------------------------------------------------------------
   Hero: Dawn headline, Object centrepiece
--------------------------------------------------------------------- */

.ds-hero {
  padding: 48px 0 40px;
  text-align: center;
}

.ds-hero h1 {
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 13ch;
  margin: 0 auto;
}

.ds-hero__lede {
  font-size: 19px;
  color: var(--ink-muted);
  max-width: 34em;
  margin: 26px auto 0;
}

.ds-hero__act {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 20px;
  margin-top: 34px;
}

.ds-hero__price {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ink-muted);
}

.ds-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  margin-top: clamp(24px, 4vw, 48px);
}

.ds-facts {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.ds-facts--l {
  text-align: right;
}

.ds-facts--r {
  text-align: left;
}

.ds-fact b {
  display: block;
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}

.ds-fact span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-top: 10px;
}

.ds-fact small {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 2px;
  max-width: 24ch;
}

.ds-facts--l small {
  margin-left: auto;
}

/* The booklet */
.ds-object {
  position: relative;
  width: calc(var(--bw) + 140px);
  height: calc(var(--bh) + 80px);
  perspective: 1200px;
  display: grid;
  place-items: center;
}

.ds-floor {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: calc(var(--bw) * 1.25);
  height: 46px;
  transform: translateX(-46%);
  background: radial-gradient(closest-side, rgba(60, 58, 110, 0.24), rgba(60, 58, 110, 0.08) 60%, rgba(60, 58, 110, 0));
  filter: blur(8px);
}

.ds-book {
  position: relative;
  width: var(--bw);
  height: var(--bh);
  transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(-34deg);
}

.ds-face {
  position: absolute;
  backface-visibility: hidden;
}

.ds-face--front {
  inset: 0;
  transform: translateZ(calc(var(--bt) / 2));
  background: var(--paper);
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.06), inset 6px 0 10px -8px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7% 8% 6%;
  color: var(--paper-ink);
  text-align: center;
}

.ds-face--back {
  inset: 0;
  transform: rotateY(180deg) translateZ(calc(var(--bt) / 2));
  background: #e6e1d6;
}

.ds-face--side {
  top: 0;
  height: 100%;
  width: var(--bt);
  left: calc(50% - var(--bt) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--bw) / 2));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.08)),
    repeating-linear-gradient(90deg, #efebe3 0 1.3px, #d2ccbf 1.3px 1.8px);
}

.ds-face--spine {
  top: 0;
  height: 100%;
  width: var(--bt);
  left: calc(50% - var(--bt) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--bw) / 2));
  background: #e9e4da;
}

.ds-face--top {
  left: 0;
  width: 100%;
  height: var(--bt);
  top: calc(50% - var(--bt) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--bh) / 2));
  background: repeating-linear-gradient(0deg, #f7f4ee 0 1.3px, #dcd6ca 1.3px 1.8px);
}

.ds-face--bottom {
  left: 0;
  width: 100%;
  height: var(--bt);
  top: calc(50% - var(--bt) / 2);
  transform: rotateX(-90deg) translateZ(calc(var(--bh) / 2));
  background: #d9d4c9;
}

.ds-cover__brand,
.ds-cover__nak,
.ds-cover__foot {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--paper-grey);
}

.ds-cover__brand {
  font-size: calc(var(--bw) * 0.028);
  letter-spacing: 0.08em;
}

.ds-cover__sigil {
  width: 28%;
  margin-top: 22%;
}

.ds-cover__nak {
  font-size: calc(var(--bw) * 0.026);
  letter-spacing: 0.06em;
  margin-top: 12%;
}

.ds-cover__name {
  font-family: var(--font-display);
  font-size: calc(var(--bw) * 0.1);
  line-height: 1.1;
  margin-top: 5%;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--paper-ink);
}

.ds-cover__date {
  font-family: var(--font-display);
  font-style: italic;
  font-size: calc(var(--bw) * 0.033);
  color: #5a5650;
  line-height: 1.5;
  margin-top: 3%;
}

.ds-cover__foot {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: calc(var(--bw) * 0.022);
  letter-spacing: 0.05em;
}

.ds-deva {
  font-family: var(--font-deva);
  font-weight: 400;
  letter-spacing: 0;
  font-size: calc(var(--bw) * 0.026);
}

/* The prompt pack sheet, tucked behind */
.ds-sheet {
  position: absolute;
  width: calc(var(--bw) * 0.9);
  height: calc(var(--bh) * 0.9);
  background: #fff;
  border: 1px solid var(--hair);
  left: 50%;
  top: 50%;
  transform: translate(-86%, -54%) rotate(-7deg);
  box-shadow: 0 18px 30px -18px rgba(60, 58, 110, 0.3);
  padding: 7% 8%;
  text-align: left;
  border-radius: 3px;
}

.ds-sheet p {
  margin: 0;
  font-size: calc(var(--bw) * 0.034);
  font-weight: 600;
  color: var(--accent);
}

.ds-sheet i {
  display: block;
  height: 1px;
  background: var(--hair-2);
  margin-top: 9%;
}

.ds-sheet i:nth-of-type(odd) {
  width: 78%;
}

/* The one motion moment: the booklet turns from face-on to three-quarter. */
@media (prefers-reduced-motion: no-preference) {
  .ds-book {
    animation: ds-turn 1.8s var(--ease) 0.1s both;
  }
  .ds-floor {
    animation: ds-settle 1.8s var(--ease) 0.1s both;
  }
  @keyframes ds-turn {
    from { transform: rotateX(-2deg) rotateY(-4deg) translateY(12px); }
    to { transform: rotateX(-10deg) rotateY(-34deg); }
  }
  @keyframes ds-settle {
    from { opacity: 0.4; transform: translateX(-50%) scaleX(0.8); }
    to { opacity: 1; transform: translateX(-46%) scaleX(1); }
  }
}

/* ---------------------------------------------------------------------
   Sections
--------------------------------------------------------------------- */

.ds-sec {
  padding: 0 0 128px;
}

.ds-sec__head {
  max-width: 620px;
}

.ds-sec__head h2 {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0;
}

.ds-sec__head p {
  color: var(--ink-muted);
  margin: 16px 0 0;
  font-size: 18px;
}

/* AI assistant */
.ds-assist {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 72px;
  align-items: start;
}

.ds-steps {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
}

.ds-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  padding: 22px 0;
  border-top: 1px solid var(--hair);
}

.ds-steps li:last-child {
  border-bottom: 1px solid var(--hair);
}

.ds-steps__n {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
}

.ds-steps h3 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
}

.ds-steps p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 16px;
}

.ds-assist__note {
  margin: 28px 0 0;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1.6;
}

.ds-chatfig {
  margin: 0;
}

.ds-chat {
  background: linear-gradient(160deg, var(--lavender), var(--sky));
  border-radius: 26px;
  padding: 28px;
}

.ds-chat__inner {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ds-chat__meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ds-chat__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #93A886;
  color: var(--accent);
  font-weight: 500;
}

.ds-bubble {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
}

.ds-bubble--me {
  align-self: flex-end;
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ds-bubble--ai {
  align-self: flex-start;
  background: #F0F3EC;
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.ds-bubble__src {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}

.ds-bubble--me .ds-bubble__src {
  color: #B9C7AC;
}

.ds-bubble--typing {
  width: 70%;
}

.ds-skel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.ds-skel i {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: #E4E9DF;
}

.ds-skel i:nth-child(2) { width: 92%; }
.ds-skel i:nth-child(3) { width: 64%; }

.ds-chatfig figcaption {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 14px 4px 0;
}

/* Founder */
.ds-founder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.ds-video {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: #F8FAF7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-muted);
  font-size: 14px;
}

.ds-video__play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-founder h2 {
  font-size: clamp(30px, 3vw, 42px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}

.ds-founder p {
  color: var(--ink-muted);
  margin: 16px 0 0;
}

/* ---------------------------------------------------------------------
   Quiet readings line, folded into the FAQ (flow B, 2026-09-23): the old
   "If you would rather have it read for you" section and its readings
   grid were dropped; this is the one line B kept, linking app.html.
--------------------------------------------------------------------- */
.ds-faq__readings {
  margin: 28px 0 0;
  color: var(--ink-muted);
  font-size: 15px;
}

/* ---------------------------------------------------------------------
   Sticky buy panel (#price) and its mobile fallbacks: added 2026-09-23
   for flow B (claude-design/kundali-flows/B-sticky.html). The panel
   keeps the live offer block (js/main.js, #price-block and children)
   unchanged; these rules only give it the compact card chrome. Below
   980px the panel is a normal in-flow section (.mk-bar covers the
   always-visible price + buy affordance instead).
--------------------------------------------------------------------- */

.ds-price__sub {
  color: var(--ink-muted);
  margin: 4px 0 0;
  font-size: 14px;
}

.mk-panel {
  border: 1px solid var(--hair);
  border-radius: var(--radius, 8px);
  background: var(--lavender);
  padding: 24px;
  text-align: left;
  margin: 40px 0;
}

.mk-panel h2 {
  /* Layout audit (23 Sep): was DM Serif Text 22px, the only heading on the
     page not in DM Sans. Drop the font-family override so it inherits the
     global h1/h2/h3 rule (DM Sans, weight 500) like every other heading. */
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 0;
}

.mk-panel .price-block {
  margin: 0;
  margin-top: 20px;
  padding: 0;
  padding-top: 20px;
  background: none;
  border: none;
  border-top: 1px solid var(--hair);
}

.mk-panel .price-block__country {
  margin-bottom: 8px;
}

.mk-panel #price-country-hint {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 18px;
}

.mk-panel .price-state {
  padding: 12px 0;
}

.mk-panel #price-content {
  border-top: 1px solid var(--hair);
  padding-top: 18px;
}

.mk-panel .price-figure {
  gap: 8px;
  margin-bottom: 14px;
}

.mk-panel .price-figure .amount {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 1;
}

.mk-panel .price-figure .currency {
  font-size: 14px;
  color: var(--ink-muted);
}

.mk-panel .price-lines {
  font-size: 14px;
  margin-bottom: 14px;
}

.mk-panel .price-lines div {
  padding: 5px 0;
}

.mk-panel .price-lines div + div {
  border-top: 1px dashed var(--hair-2);
}

.mk-panel .price-notices {
  font-size: 13px;
  line-height: 1.6;
  border-top-color: var(--hair);
}

.mk-panel .cta-row {
  margin-top: 18px;
}

.mk-panel__delivery {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 18px 0 0;
}

/* Two-column desktop layout (>=980px): left column scrolls, #price is a
   sticky right-hand panel. Below 980px this collapses to a single
   column and #price becomes a normal in-flow section (its DOM position,
   right after "How to read it with AI", is what puts it there). */

/* Layout audit (23 Sep): cap body-paragraph measure at ~68ch wherever a
   section's own column can grow wider than that (the grid columns inside
   .mk-layout, and #solution's text column on very wide viewports). */
.mk-layout p,
#solution p {
  max-width: 68ch;
}

.mk-layout {
  /* Layout audit (23 Sep): reuse .ds-wrap's own outer width/padding tokens
     exactly, so every section heading inside .mk-layout lands on the same
     left edge as the hero, #solution and the footer. Was max-width:1180px
     with padding 0 20px, which is why headings here sat ~30px right of
     everywhere else on the page. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  /* The sage mist ground now lives on <body> itself (see body{background}
     above), continuous under #contents/#how-to-use/#price here AND under
     founder/FAQ/the closing strip below, which are no longer nested in this
     element. #solution just above uses the same --sky mist, so the boundary
     between them would be invisible without a hairline; keep one here. */
  border-top: 1px solid var(--hair);
}

/* #contents and #how-to-use wrap their content in .ds-wrap for markup
   consistency with the rest of the page, but .mk-layout's own grid column
   already lines up with .ds-wrap's content edge (both share the same
   max-width/padding tokens above), so the nested .ds-wrap must not add a
   second inset on top of it. Scoped to .mk-layout specifically: founder and
   FAQ carry the same .mk-block class but now live outside .mk-layout as
   full-width sections, and need .ds-wrap's normal inset restored. */
.mk-layout .mk-block > .ds-wrap {
  max-width: none;
  padding: 0;
  margin: 0;
}

.mk-block {
  padding: 112px 0;
  border-top: 1px solid var(--hair);
}

.mk-block:first-child {
  border-top: none;
}

/* The tint/mist backgrounds read as boxed cards once they only span the
   left column next to a full-bleed #solution band above. Keep .mk-layout
   as one flat mist ground and separate sections with the hairline above
   instead. */
.mk-block.ds-bg-tint,
.mk-block.ds-bg-mist {
  background: none;
}

.mk-block .ds-assist {
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (max-width: 640px) {
  .mk-block {
    padding: 72px 0;
  }
}

@media (min-width: 980px) {
  .mk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    /* Layout audit (23 Sep): a shorthand `gap: 48px` sets row-gap AND
       column-gap. #contents and #how-to-use stack in the same column-1
       track, so the row-gap inserted an extra 48px between them on top of
       .mk-block's own 112px bottom padding -- a ~160px dead gap after the
       "All 17 parts" disclosure, measured live at 1625px width. Only the
       column gap (between the content column and the sticky panel) is
       wanted; the vertical rhythm between stacked sections already comes
       from .mk-block's padding + hairline. */
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }
  .mk-block {
    grid-column: 1;
  }
  .mk-panel {
    /* Founder and FAQ moved out of .mk-layout (23 Sep): this grid now only
       contains #contents and #how-to-use in column 1, so the sticky panel
       spans just those two rows instead of running the full ~5000px down
       past founder and the FAQ. */
    grid-column: 2;
    grid-row: 1 / -1;
    position: sticky;
    top: 24px;
    margin: 0;
  }
}

/* Published-canvas buy bar: hidden throughout the hero, then fixed to the
   top of the viewport. Deep indigo is reserved for this purchase affordance. */
.mk-bar {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: #272451;
  color: #fff;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.mk-bar.mk-bar--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mk-bar__inner {
  width: 100%;
  max-width: 1360px;
  min-height: 60px;
  margin: 0 auto;
  padding: 8px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.mk-bar__offer {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  margin: 0;
  color: #fff;
}

.mk-bar__price {
  font: 600 16px/1.2 var(--font-sans);
  color: #fff;
  white-space: nowrap;
}

.mk-bar__terms {
  font: 400 13px/1.3 var(--font-sans);
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
}

.mk-bar .ds-btn {
  flex-shrink: 0;
  min-height: 42px;
  background: #fff;
  border-color: #fff;
  color: #272451;
}

.mk-bar .ds-btn:hover {
  background: #F2F0FA;
}

/* Keep in-page destinations readable when the bar appears after an anchor
   jump from the hero. */
#contents,
#how-to-use,
#price,
#founder-video,
#founder,
#faq,
#close {
  scroll-margin-top: 72px;
}

@media (max-width: 640px) {
  .mk-bar__inner {
    min-height: 58px;
    padding: 8px 16px;
    gap: 12px;
  }
  .mk-bar__terms {
    display: none;
  }
  .mk-bar__price {
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mk-bar .ds-btn {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-bar {
    transition: none;
  }
}

.ds-legal p {
  max-width: 34em;
  margin: 22px auto 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------
   FAQ
--------------------------------------------------------------------- */

.ds-faq__list {
  margin: 44px 0 0;
  max-width: 44em;
}

html[lang="en"] .ds-faq__list {
  display: grid;
  gap: 0 32px;
  max-width: none;
}

.ds-faq__item {
  border-top: 1px solid var(--hair);
  padding: 20px 0;
}

@media (min-width: 900px) {
  html[lang="en"] .ds-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[lang="en"] .ds-faq__item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--hair); }
}

.ds-faq__item:last-child {
  border-bottom: 1px solid var(--hair);
}

.ds-faq__item summary {
  /* Layout audit (23 Sep): was relying on the browser's default disclosure
     triangle. Same treatment as .ds-allparts summary: hide the native
     marker, draw a chevron on the right that rotates open, 44px min
     target, visible focus ring. */
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.4;
  padding: 2px 0;
  border-radius: 4px;
}
.ds-faq__item summary::-webkit-details-marker {
  display: none;
}
.ds-faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s var(--ease);
}
.ds-faq__item[open] summary::after {
  transform: rotate(-135deg);
}

.ds-faq__item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.ds-faq__item p {
  margin: 14px 0 0;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */

.ds-foot {
  border-top: 1px solid var(--hair);
  padding: 36px 0 52px;
}

.ds-foot .ds-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 36px;
}

.ds-foot__credits {
  flex: 1 0 100%;
  margin: 0;
  max-width: 62em;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}

.ds-foot__evidence {
  flex: 1 0 100%;
  max-width: 62em;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.ds-foot__evidence summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 13px;
  gap: 12px;
  justify-content: space-between;
  list-style: none;
  min-height: 44px;
}
.ds-foot__evidence summary::-webkit-details-marker { display: none; }
.ds-foot__evidence summary::after {
  border-bottom: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  content: "";
  flex: 0 0 auto;
  height: 7px;
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
  width: 7px;
}
.ds-foot__evidence[open] summary::after { transform: rotate(-135deg); }
.ds-foot__evidence summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ds-foot__evidence .ds-foot__credits { margin: 0 0 14px; }

.ds-foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.ds-foot nav a {
  text-decoration: none;
  font-size: 14px;
  color: var(--ink-muted);
  padding: 6px 0;
}

.ds-foot nav a:hover {
  color: var(--ink);
}

@media (max-width: 980px) {
  .ds-foot nav { gap: 4px 24px; }
  .ds-foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 480px) {
  .ds-head .ds-wrap { flex-wrap: wrap; }
  .ds-head .ds-wordmark { order: 1; }
  .ds-head .ds-lang { order: 2; margin-left: auto; }
  .ds-head .ds-menu { order: 3; }
  .ds-head .ds-btn {
    order: 4;
    flex: 0 0 100%;
    margin-left: 0;
  }
}

.ds-foot__motto {
  margin-left: auto;
  font-size: 14px;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------
   Form controls (journey, price block, account page)
--------------------------------------------------------------------- */

.field label {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}

.field .hint,
.field .error {
  font-size: 13px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
select {
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.4s var(--ease);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
select:hover {
  border-color: var(--border-strong);
}

input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

input::placeholder {
  color: var(--muted);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555A70' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  flex: none;
}

.btn-primary {
  background: var(--ink);
  color: #fff;
}

.btn-primary:disabled,
.ds-btn:disabled,
.ds-btn.disabled,
.ds-btn.is-disabled,
.ds-btn[aria-disabled="true"] {
  background: var(--hair-2, var(--border));
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
}

/* Open-journey links gated by js/main.js while checkout is closed. */
.is-disabled,
a[aria-disabled="true"] {
  color: var(--muted, #4A5440);
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: none;
}

.btn-secondary {
  background: #fff;
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  background: var(--lavender);
}

.btn-text {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  padding: 10px 6px;
}

.btn-text:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.radio-card {
  border-color: var(--border);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.radio-card:hover {
  border-color: var(--border-strong);
}

.radio-card:has(input:checked) {
  border-color: var(--accent);
  background: var(--lavender);
}

.radio-card .radio-card__title {
  display: block;
  font-weight: 500;
}

.radio-card .radio-card__note {
  display: block;
  line-height: 1.5;
}

.checkbox-row {
  font-size: 15px;
  line-height: 1.5;
  cursor: pointer;
}

.checkbox-row input {
  margin-top: 2px;
}

.notice-banner {
  border: 1px solid var(--hair);
  background: var(--sky);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.55;
}

.notice-banner--danger {
  border-color: #ecd3cf;
  background: var(--danger-ink);
  color: #7e2a24;
}

.review-list {
  border-color: var(--hair);
  border-radius: 12px;
  background: #fff;
}

.review-list li {
  border-bottom-color: var(--hair);
  padding: 14px 16px;
  font-size: 15px;
}

.review-list dt {
  color: var(--ink-muted);
}

.review-list dd {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.candidate-list button {
  border-color: #C9D4C0;
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  min-height: 48px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.candidate-list button:hover {
  background: var(--lavender);
  border-color: #93A886;
}

input.code-input {
  font-size: 24px;
  letter-spacing: 0.4em;
  font-variant-numeric: tabular-nums;
}

.price-state {
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------
   Journey overlay
--------------------------------------------------------------------- */

/* Purchase flow reserves one color, the same deep indigo as the sticky buy
   bar (#272451), for itself: the plain white background here (matching the
   approved mockup) is what lets that color read as distinct, so the tint
   this overlay used to inherit from the rest of the site is removed here,
   not changed at the token level -- every other page keeps its green. */
.journey-overlay {
  background: var(--bg);
}

.journey-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  min-height: 68px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair);
}

.journey-topbar::before {
  content: "destinysync";
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
  justify-self: start;
}

.journey-topbar__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
}

.journey-topbar .btn-text {
  justify-self: end;
}

.journey-progress {
  position: sticky;
  top: 68px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 32px 12px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.journey-progress span {
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}

.journey-progress span.is-current,
.journey-progress span.is-complete {
  background: #272451;
}

.journey-body {
  max-width: 560px;
  margin: 48px auto 72px;
  padding: 40px 40px 36px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 24px;
}

/* The purchase flow's own primary button, scoped to this overlay only --
   every btn-primary elsewhere on the site keeps var(--ink). */
.journey-body .btn-primary,
.journey-actions .btn-primary {
  background: #272451;
}

.journey-body .btn-primary:hover,
.journey-actions .btn-primary:hover {
  background: #1c1a3d;
}

.journey-body--enter {
  animation: journey-enter 220ms var(--ease) both;
}

@keyframes journey-enter {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.journey-place-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.journey-place-selection {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-ink);
  color: var(--ink);
  font-size: 14px;
}

.journey-time-fieldset {
  margin: 28px 0 0;
  padding: 0;
  border: 0;
}

.journey-time-fieldset legend {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.journey-time-fieldset > .hint {
  margin: 0 0 14px;
}

.journey-time-fieldset > .error {
  display: none;
}

.journey-time-fieldset.has-error > .error {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .journey-body--enter { animation: none; }
}

.journey-body h2 {
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}

.journey-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 28px;
}

.journey-body .field {
  margin-bottom: 20px;
}

.journey-body .notice-banner {
  margin-bottom: 20px;
}

.journey-actions {
  margin-top: 28px;
  gap: 8px;
}

.journey-actions:empty {
  display: none;
}

.state-panel {
  padding: 8px 0 16px;
}

.state-panel__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--lavender);
  border: 1px solid #93A886;
  color: var(--accent);
  font-size: 24px;
  line-height: 1;
}

.state-panel .journey-lede {
  margin-bottom: 12px;
}

#j-paypal-button:empty {
  display: none;
}

/* ---------------------------------------------------------------------
   Account page
--------------------------------------------------------------------- */

.ds-account {
  max-width: 560px;
  margin: 24px auto 96px;
  padding: 40px 40px 36px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 24px;
}

.ds-account h1 {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.ds-account a {
  color: var(--accent);
  text-decoration: none;
}

.ds-account a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ds-account .btn-block + .btn-text,
.ds-account form + .btn-text {
  display: block;
  margin: 8px auto 0;
}

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */

@media (max-width: 1040px) {
  :root {
    --bw: 270px;
    --bh: 382px;
    --bt: 42px;
  }
}

/* Keep the complete desktop menu visible through standard laptop widths.
   The compact menu is reserved for viewports where the seven labels no
   longer fit without crowding the call to action and language switcher. */
@media (max-width: 1100px) {
  .ds-nav {
    display: none;
  }
  .ds-menu {
    display: block;
  }
  .ds-head .ds-btn {
    margin-left: auto;
  }
}

@media (max-width: 980px) {
  .ds-nav {
    display: none;
  }
  .ds-menu {
    display: block;
  }
  .ds-head .ds-btn {
    margin-left: auto;
  }
  .ds-assist,
  .ds-founder {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .ds-flow {
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
  }
  .ds-flow::before {
    display: none;
  }
  .ds-readings__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .ds-stage {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 36px 24px;
  }
  .ds-object {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 auto;
  }
  .ds-facts {
    gap: 32px;
  }
  .ds-facts--l,
  .ds-facts--r {
    text-align: left;
  }
  .ds-facts--l small {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  :root {
    --bw: 208px;
    --bh: 294px;
    --bt: 28px;
  }
  body {
    font-size: 16px;
  }
  .ds-wrap {
    /* Layout audit (23 Sep): consistent 16px side gutter on mobile. Was 20px. */
    padding: 0 16px;
  }
  .mk-layout {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ds-head {
    padding: 14px 0;
  }
  .ds-head .ds-wrap {
    gap: 12px;
  }
  .ds-head .ds-btn {
    padding: 0 14px;
    font-size: 13px;
    min-height: 44px;
  }
  .ds-wordmark {
    font-size: 20px;
  }
  .ds-hero {
    padding: 28px 0 24px;
  }
  .ds-hero__lede {
    font-size: 17px;
  }
  .ds-object {
    width: calc(var(--bw) + 100px);
    height: calc(var(--bh) + 70px);
  }
  .ds-sheet {
    transform: translate(-78%, -54%) rotate(-7deg);
  }
  .ds-fact b {
    font-size: 32px;
  }
  .ds-consult {
    padding: 40px 0 88px;
  }
  .ds-consult__body p {
    font-size: 16px;
  }
  .ds-consult__facts {
    gap: 10px 20px;
  }
  .ds-sec {
    padding-bottom: 96px;
  }
  .ds-chat {
    padding: 14px;
    border-radius: 20px;
  }
  .ds-chat__inner {
    padding: 16px;
  }
  .ds-flow {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ds-readings__grid {
    grid-template-columns: 1fr;
  }
  .ds-price__lines {
    flex-direction: column;
    gap: 4px;
  }
  .ds-price {
    padding: 80px 0 72px;
  }
  .ds-price .price-block {
    padding: 22px 20px 24px;
  }
  .ds-price .price-block__country {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .ds-price .price-block__country select {
    width: 100%;
    flex: none;
  }
  .ds-foot__motto {
    margin-left: 0;
    width: 100%;
  }
  .journey-topbar {
    grid-template-columns: 1fr auto;
    padding: 10px 16px;
    min-height: 60px;
  }
  .journey-topbar::before {
    display: none;
  }
  .journey-topbar__title {
    text-align: left;
  }
  .journey-progress {
    top: 60px;
    padding: 0 16px 10px;
  }
  .journey-body {
    margin: 0 auto;
    padding: 28px 20px 56px;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .journey-place-search {
    grid-template-columns: 1fr;
  }
  .ds-account {
    margin: 8px auto 64px;
    padding: 28px 20px;
  }
}

.ds-nowrap {
  white-space: nowrap;
}

/* Journey spacing fixes for markup js/journey.js renders */
.journey-body > .btn-secondary + div > :first-child {
  margin-top: 16px;
}

.journey-body > .btn-secondary + div > .price-state {
  text-align: center;
}

.journey-body form + .journey-actions,
.journey-body .journey-actions + .journey-actions {
  margin-top: 8px;
}

.journey-body .radio-card-group + div > :first-child {
  margin-top: 20px;
}

#j-payment-status:not(:empty) {
  margin-bottom: 12px;
}

#j-payment-status > .notice-banner {
  margin-bottom: 12px;
}

/* Author display rules (.btn etc.) must never defeat the hidden attribute js/ toggles. */
[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Hero, founder's pick (23 Sep): Dawn's split hero with the floating
   PDF cover and the D1 chart page fanned behind it. Replaces the
   booklet centrepiece; the .ds-object rules above are now unused.
--------------------------------------------------------------------- */

.ds-hero--split {
  padding: 56px 0 48px;
  text-align: left;
  --dw-paper: #F2EEE6;
  --dw-paper-ink: #23211E;
  --dw-paper-grey: #8A857A;
  --dw-paper-rule: #E1DCD0;
  --dw-serif: "DM Serif Text", Georgia, serif;
  --dw-deva: "Noto Serif Devanagari", serif;
  --dw-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-hero--split .ds-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.ds-hero--split h1 { margin: 0; max-width: none; font-size: clamp(44px, 5.6vw, 80px); }
.ds-hero--split .ds-hero__lede { margin: 26px 0 0; max-width: 30em; }
.ds-hero--split .ds-hero__act { justify-content: flex-start; }

.dw-stage { position: relative; aspect-ratio: 1 / 1.08; width: 100%; max-width: 620px; justify-self: end; }
.dw-doc { position: absolute; aspect-ratio: 827 / 1169; background: var(--dw-paper); border-radius: 26px; overflow: hidden; container-type: inline-size; }
.dw-doc.dw-back { width: 62%; right: 0; top: 4%; transform: rotate(5deg); box-shadow: 0 30px 60px -30px rgba(60, 58, 100, .22); }
.dw-doc.dw-front { width: 68%; left: 2%; top: 7%; box-shadow: 0 50px 90px -30px rgba(60, 58, 110, .30), 0 18px 36px -18px rgba(60, 58, 110, .18); }
@media (prefers-reduced-motion: no-preference) {
  .dw-doc.dw-front { animation: dw-rise 1.4s var(--dw-ease) .1s both; }
  .dw-doc.dw-back { animation: dw-fan 1.6s var(--dw-ease) .25s both; }
  @keyframes dw-rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes dw-fan { from { transform: rotate(0) translateX(-30px); opacity: 0; } to { transform: rotate(5deg); opacity: 1; } }
}
.dw-doc picture { position: absolute; inset: 0; display: block; }
.dw-doc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dw-doc.dw-back img { object-fit: contain; box-sizing: border-box; padding: 10%; background: var(--dw-paper); }

@media (max-width: 980px) {
  .ds-hero--split .ds-wrap { grid-template-columns: 1fr; gap: 40px; }
  .dw-stage { justify-self: center; }
}
@media (max-width: 640px) {
  .ds-hero--split { padding: 32px 0 32px; }
  .dw-stage { aspect-ratio: 1 / 1.12; }
  .dw-doc { border-radius: 18px; }
}

/* ---------------------------------------------------------------------
   Problem hero photo (23 Sep, problem -> solution rebuild): the chart
   projection photo replaces the floating PDF-cover stack (.dw-stage) in
   the hero, since the hero now states the problem rather than showing
   the product. The PDF-cover stack moved to #solution as .dw-stage--sm.
--------------------------------------------------------------------- */

.ds-hero__photo {
  margin: 0;
  justify-self: end;
  width: 100%;
  max-width: 560px;
}
.ds-hero__photo picture,
.ds-hero__photo img {
  display: block;
  width: 100%;
  height: clamp(520px, 45vw, 600px);
  object-fit: cover;
  border-radius: 16px;
}
@media (max-width: 980px) {
  .ds-hero__photo {
    order: -1;
    justify-self: center;
    max-width: none;
  }
  .ds-hero__photo picture,
  .ds-hero__photo img {
    /* iPhone 17 Pro Safari review (23 Sep): 70vh pushed the headline below
       the fold. Capped so the start of the headline shows on the first
       screen of a 402x874 phone; object-fit: cover (set above) still fills
       this shorter box and keeps the face on frame via object-position. */
    height: 52vh;
    max-height: 52vh;
    aspect-ratio: auto;
    object-position: 50% 35%;
  }
}

/* ---------------------------------------------------------------------
   #solution (23 Sep, problem -> solution rebuild): the product answer to
   the hero's problem statement, full width, directly above the flow-B
   .mk-layout grid. Text left, the Mary Winters cover stack (reused from
   the old hero, at .dw-stage--sm) right on desktop; stack moves below
   the text on mobile.
--------------------------------------------------------------------- */

.ds-solution__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 56px;
  align-items: center;
}

.ds-solution__text p {
  color: var(--ink-muted);
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.55;
}
.ds-solution__text .ds-sec__head { margin: 0 0 24px; }
.ds-solution__text p:last-of-type { margin-bottom: 0; }

.dw-stage--sm { max-width: 380px; }

.ds-solution__facts {
  list-style: none;
  margin: 32px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.ds-solution__facts li {
  padding: 0 16px;
  border-left: 1px solid var(--hair);
}
.ds-solution__facts li:first-child {
  padding-left: 0;
  border-left: none;
}

@media (max-width: 980px) {
  .ds-solution__wrap { grid-template-columns: 1fr; gap: 40px; }
  /* iPhone 17 Pro Safari review (23 Sep): the cover stack was still full
     size on mobile. .dw-doc's width/offsets are all percentages of
     .dw-stage, so capping the stage's own max-width shrinks the two
     documents and their offsets proportionally with it; nothing overflows. */
  .dw-stage--sm { justify-self: center; order: -1; max-width: 280px; }
}
@media (max-width: 640px) {
  .ds-solution__facts {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
  }
  .ds-solution__facts li:nth-child(3) {
    padding-left: 0;
    border-left: none;
  }
}

/* ---------------------------------------------------------------------
   What's inside: a typographic, hairline-separated list of the twelve
   parts. Two columns on desktop, one on phone. No cards, no numbered
   circles, no icons.
--------------------------------------------------------------------- */

.ds-inside {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(9, auto);
  grid-auto-flow: column;
  column-gap: 64px;
}
.ds-inside li {
  padding: 20px 0;
  border-top: 1px solid var(--hair);
}
.ds-inside li:nth-child(1),
.ds-inside li:nth-child(10) {
  border-top: none;
  padding-top: 0;
}
.ds-inside__t {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.ds-inside__g {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.ds-book-map {
  margin: 48px 0 0;
}

.ds-book-map > h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.15;
}

.ds-inside--books {
  margin-top: 28px;
  grid-template-rows: repeat(2, auto);
}

.ds-inside--books li:nth-child(3) {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 640px) {
  .ds-inside {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
  .ds-inside li:nth-child(10) {
    border-top: 1px solid var(--hair);
    padding-top: 20px;
  }
  .ds-inside--books li:nth-child(3) {
    border-top: 1px solid var(--hair);
    padding-top: 20px;
  }
}

/* ---------------------------------------------------------------------
   What's inside: four numbered reading-stage rows, replacing the single
   three-figure row + 17-item list (2026-09-23 founder feedback: the old
   layout read as one block of text and nothing else looked like
   anything). Each row is a real page image beside its group's name,
   one-line summary and the part names it covers, alternating image side
   on desktop. Hairlines separate the rows; the full 17-part list moves
   into the <details> below.
--------------------------------------------------------------------- */

.ds-stages {
  margin: 56px 0 0;
}

.ds-stage {
  /* Layout audit (23 Sep): the alternating zig-zag used order:-1 on the
     .ds-stage--rev rows to visually swap text/image sides. In a CSS grid
     with auto-placed items, 'order' also changes which TRACK an item is
     placed in, not just its visual position -- so on .ds-stage--rev rows
     the image landed in the narrow 1fr text track (~300px) and the text
     landed in the wide fixed track, squeezing page images to ~270px and,
     combined with the fig--lg override below, the D1 chart to ~90px.
     Fix: drop the alternation. Every row is text (~40%) then image (~60%),
     same column order, no 'order' property anywhere in this block. */
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 48px;
  align-items: center;
  padding: 64px 0;
  border-top: 1px solid var(--hair);
}
.ds-stage:first-child {
  padding-top: 0;
  border-top: none;
}

.ds-stage__n {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

.ds-stage__t {
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.ds-stage__g {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0 0 16px;
}

.ds-stage__parts {
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-grey);
  margin: 0;
}

.ds-stage__fig {
  margin: 0;
  padding: 0;
}
.ds-stage__fig picture,
.ds-stage__fig img {
  display: block;
  width: 100%;
  height: auto;
}
.ds-stage__fig img {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 3px;
}
.ds-stage__fig figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Row 2 (the D1 chart) is the widest image in the section: fill its
   image column up to a 520px cap rather than the plain photos' natural
   size, right-aligned within the (now always right-hand) image track. */
.ds-stage__fig--lg {
  max-width: 520px;
  margin-left: auto;
}

@media (max-width: 780px) {
  .ds-stage {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px 0;
  }
  .ds-stage__fig--lg {
    max-width: none;
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------
   All 17 parts, described: the original hairline-separated list, now
   tucked behind a disclosure so the four stage rows above carry the
   section on their own. Chevron drawn in CSS, no emoji/icon font.
--------------------------------------------------------------------- */

.ds-allparts {
  margin: 56px 0 0;
  border-top: 1px solid var(--hair);
  padding-top: 24px;
}

.ds-allparts summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 4px 4px 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--accent);
  cursor: pointer;
  border-radius: 4px;
}
.ds-allparts summary::-webkit-details-marker {
  display: none;
}
.ds-allparts summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s var(--ease);
}
.ds-allparts[open] summary::after {
  transform: rotate(-135deg);
}
.ds-allparts summary:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.ds-allparts summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------
   Calibration, revisit, founder video and founder: single-column prose
   sections added in the 2026-09-23 copy pour. Reuse .ds-sec__head's
   heading and paragraph rules (same type scale as every other section
   intro) rather than introducing a second heading style.
--------------------------------------------------------------------- */

.ds-sec__head--wide {
  max-width: 640px;
}

/* Founder pull quote: DM Serif Text, with a 2px accent rule reading as a
   quote mark rather than a plain paragraph. Was a plain 18px DM Sans line
   before the 2026-09-23 rebuild added a portrait beside the copy. */
.ds-founder-close {
  margin: 24px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.3;
}

.ds-video-solo {
  max-width: 720px;
  margin: 0 auto;
}

.ds-video-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
}

.ds-video__caption {
  margin: 12px 4px 0;
  color: var(--ink-muted);
  font-size: 14px;
  text-align: center;
}

/* ---------------------------------------------------------------------
   Made by a practitioner: portrait beside copy, added 2026-09-23 so the
   section shows who made the product instead of reading as anonymous
   prose. Portrait left on desktop, text right; portrait first and full
   width on mobile. No drop shadow, hairline hidden inside the radius.
--------------------------------------------------------------------- */

.ds-founder__wrap {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.ds-founder__photo {
  margin: 0;
}
.ds-founder__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 16px;
  border: 1px solid var(--hair);
}

.ds-founder__text {
  max-width: 620px;
}

.ds-founder__name {
  margin: 20px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 28px;
  color: var(--ink);
}

.ds-founder__role {
  margin: 4px 0 20px;
  font-size: 16px;
  color: var(--ink-muted);
}

.ds-founder__more {
  margin: 28px 0 0;
}

@media (max-width: 780px) {
  .ds-founder__wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ds-founder__photo img {
    max-height: 60vh;
  }
  .ds-founder-close {
    font-size: 24px;
  }
}

/* FAQ two-column layout (23 Sep desktop polish): heading sticks in a left
   rail beside the questions instead of sitting above them, matching the
   founder section's column treatment. Below 980px this stays the current
   stacked single column. */
@media (min-width: 980px) {
  #faq .ds-wrap {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  #faq .ds-sec__head {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}

/* ---------------------------------------------------------------------
   Section rhythm (founder, 23 Sep): the sections were spaced only at the
   bottom, which worked on one continuous background. With alternating
   sage tints each colour change is a visible edge, so every coloured
   section gets equal space above and below its content.

   Layout audit (23 Sep): sections inside .mk-layout no longer carry their
   own tint background (they read as boxed cards against #solution's
   full-bleed band), so their vertical rhythm now comes from .mk-block's
   own padding above, separated by a hairline. This rule now only covers
   #solution, the one full-width tinted band left on the page.
--------------------------------------------------------------------- */
section.ds-bg-tint,
section.ds-bg-mist {
  padding-top: 112px;
  padding-bottom: 112px;
}
@media (max-width: 640px) {
  section.ds-bg-tint,
  section.ds-bg-mist {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

/* ---------------------------------------------------------------------
   Founder-approved photos (23 Sep): chart projection next to the
   "What's inside" heading, laptop/coffee above the AI-assistant steps,
   Ganga ghats as a full-bleed band. Images from claude-design/photo-sources/,
   processed into assets/images/photos/.
--------------------------------------------------------------------- */

/* "What's inside" heading + chart-projection photo, two columns on desktop */
.ds-sec__head--photo {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 40px;
  align-items: center;
}

.ds-contents__photo {
  margin: 0;
}

.ds-contents__photo picture,
.ds-contents__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

@media (max-width: 699px) {
  .ds-sec__head--photo {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ds-contents__photo {
    order: -1;
  }
  .ds-contents__photo picture,
  .ds-contents__photo img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 22%;
  }
}

/* Laptop + coffee photo, above the AI-assistant steps */
.ds-assist__photo {
  margin: 32px 0 0;
}

.ds-assist__photo picture,
.ds-assist__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 699px) {
  .ds-assist__photo picture,
  .ds-assist__photo img {
    aspect-ratio: 4 / 3;
  }
}

/* Ganga ghats, full-bleed band between the .mk-layout content and the
   footer. Breaks out of every container's max-width via the viewport-width
   trick rather than negative margins, since its parent (<main>) carries no
   fixed width of its own to measure against. */
.ds-photoband {
  margin: 0;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.ds-photoband picture,
.ds-photoband img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
}

@media (max-width: 699px) {
  .ds-photoband picture,
  .ds-photoband img {
    height: 240px;
  }
}

/* ---------------------------------------------------------------------
   Closing buy strip (23 Sep): full-width tint band after the FAQ and
   before the ghats photo band, giving the page a close instead of ending
   on a question. Reuses the hero's own price line verbatim (no new
   marketing copy) and the shared .ds-btn / [data-open-journey] pattern,
   which js/main.js gates automatically -- no id added here.
--------------------------------------------------------------------- */

.mk-close {
  background: var(--lavender);
  border-top: 1px solid var(--hair);
  padding: 96px 0;
  text-align: center;
}

.mk-close__inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mk-close__price {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.mk-close__delivery {
  margin: 12px 0 32px;
  font-size: 15px;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .mk-close {
    padding: 64px 0;
  }
}