/* Ethereal Touch prototype. Tokens from the Jenn DiCerni design system (Parchment theme). */
:root {
  --surface: #efe6d6; --surface-raised: #f6f0e4; --surface-deep: #2e2119; --line: #d9ccb6;
  --ink: #2a2119; --ink-muted: #5e5245; --ink-on-deep: #efe6d6;
  --bark: #5a3e2b; --bark-deep: #43301f; --on-bark: #efe6d6;
  --teal: #1e4a47; --on-teal: #efe6d6; --ochre: #b08a4a; --ochre-deep: #8c6a2f;
  --ember: #a65a32; --ember-text: #8f4a27; --night-teal: #0d3431; --parchment: #efe6d6;
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Mulish", "Segoe UI", system-ui, sans-serif;
  --font-script: "Parisienne", "Brush Script MT", cursive;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 6px; --radius-md: 14px; --radius-pill: 999px; --radius-arch: 400px;
  --shadow-soft: 0 10px 30px rgba(31, 42, 31, 0.10);
  --measure-text: 36rem; --measure-page: 1200px;
}

.pg { background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.7; min-width: 0; }
.pg *, .pg *::before, .pg *::after { box-sizing: border-box; }
.pg p { margin: 0; }
.pg img { max-width: 100%; }

/* Layout */
.wrap { width: 100%; max-width: calc(var(--measure-page) + 128px); margin: 0 auto; padding-inline: var(--space-16); }
.sec { padding-block: var(--space-24); }
.sec--deep { background: var(--surface-deep); color: var(--ink-on-deep); }
.sec--raised { background: var(--surface-raised); border-block: 1px solid var(--line); }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-3); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-16); align-items: center; }
.split--rev { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.sec-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-12); max-width: 44rem; }
.prose { display: flex; flex-direction: column; gap: 1.1em; max-width: var(--measure-text); }

/* Type */
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre-deep); margin: 0; }
.sec--deep .eyebrow { color: var(--ochre); }
.h1 { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.02; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.h2 { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1.08; margin: 0; text-wrap: balance; }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.25; margin: 0; }
.lead { font-size: 19px; line-height: 1.7; color: var(--ink-muted); max-width: var(--measure-text); }
.sec--deep .lead { color: var(--ink-on-deep); opacity: 0.88; }
.script { font-family: var(--font-script); font-size: 40px; line-height: 1.2; color: var(--bark); }
.muted { color: var(--ink-muted); }
.small { font-size: 15px; line-height: 1.55; }

/* Buttons and links */
.jd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; }
.jd-btn:focus-visible, .jd-link:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }
.jd-btn--primary { background: var(--bark); color: var(--on-bark); }
.jd-btn--primary:hover { background: var(--bark-deep); color: var(--on-bark); }
.hero .jd-btn--primary, .sec--deep .jd-btn--primary { background: var(--ochre); color: var(--surface-deep); }
.hero .jd-btn--primary:hover, .sec--deep .jd-btn--primary:hover { background: var(--parchment); color: var(--surface-deep); }
.jd-btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.jd-btn--secondary:hover { background: var(--ink); color: var(--surface); }
.jd-btn--on-deep { background: transparent; color: var(--ink-on-deep); border-color: var(--ochre); }
.jd-btn--on-deep:hover { background: var(--ochre); color: var(--surface-deep); }
.jd-btn--block { width: 100%; }
.jd-link { color: var(--ember-text); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.sec--deep .jd-link { color: var(--ochre); }

/* Header */
.jd-header { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.jd-header__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-4); }
.jd-header__name { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--ink); text-decoration: none; line-height: 1; }
.jd-header__name small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-top: 6px; }
.jd-header__nav { display: flex; align-items: center; gap: var(--space-6); }
.jd-header__nav a:not(.jd-btn) { color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.jd-header__nav a:not(.jd-btn):hover { color: var(--ember-text); }
.jd-header__nav a.is-current { text-decoration: underline; text-decoration-color: var(--ochre-deep); text-underline-offset: 8px; text-decoration-thickness: 2px; }
.jd-header__menu { display: none; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font: 700 15px var(--font-body); cursor: pointer; }
.jd-menu { border-top: 1px solid var(--line); background: var(--surface); padding-block: var(--space-6) var(--space-8); display: none; }
.jd-menu a:not(.jd-btn) { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 500; color: var(--ink); text-decoration: none; padding-block: var(--space-2); border-bottom: 1px solid var(--line); }
.jd-menu .jd-btn { margin-top: var(--space-6); }

/* Hero */
.hero { background: var(--surface-deep); color: var(--ink-on-deep); padding-block: var(--space-16) var(--space-24); position: relative; overflow: hidden; }
.hero__waves { position: absolute; right: -40px; top: 40px; width: 520px; height: 200px; stroke: var(--ochre); fill: none; stroke-width: 1.5; opacity: 0.35; }
.hero .split { position: relative; }

/* Stone frame: an organic river-stone shape with an offset ochre ripple line */
.jd-stone { position: relative; aspect-ratio: 4 / 5; width: calc(100% - 28px); max-width: 420px; justify-self: center; margin: 14px; }
.jd-stone::before { content: ""; position: absolute; inset: -14px -10px -12px -16px; border: 1.5px solid var(--ochre-deep); border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%; transform: rotate(-5deg); pointer-events: none; }
.sec--deep .jd-stone::before, .hero .jd-stone::before { border-color: var(--ochre); }
.jd-stone__inner { position: relative; width: 100%; height: 100%; border-radius: 58% 42% 47% 53% / 44% 50% 50% 56%; overflow: hidden; background: var(--teal); display: flex; align-items: center; justify-content: center; }
.jd-stone__inner--bark { background: var(--bark); }
.jd-stone__ph { color: var(--parchment); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; padding: var(--space-12); max-width: 260px; }
.jd-stone--wide { aspect-ratio: 5 / 4; max-width: 540px; }
.jd-stone--wide .jd-stone__inner { border-radius: 52% 48% 56% 44% / 58% 46% 54% 42%; }

/* Cards */
.card { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.card__icon { width: 40px; height: 40px; stroke: var(--ochre-deep); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jd-service { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.jd-service:hover { box-shadow: var(--shadow-soft); }
.jd-service__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.jd-service__name { font-family: var(--font-display); font-size: 26px; line-height: 1.2; font-weight: 600; margin: 0; }
.jd-service__price { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--bark); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; text-align: right; line-height: 1; }
.jd-service__price small { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); display: block; margin-bottom: 4px; }
.jd-service__meta { font-size: 15px; color: var(--ink-muted); }
.jd-service__foot { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--line); }

/* Quotes */
.jd-quote { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.jd-quote__mark { width: 28px; height: 28px; color: var(--ochre-deep); }
.jd-quote blockquote { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.3; font-weight: 500; font-style: italic; text-wrap: pretty; }
.jd-quote figcaption { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.jd-quote--full blockquote { font-family: var(--font-body); font-size: 17px; line-height: 1.75; font-style: normal; display: flex; flex-direction: column; gap: 1em; }
.jd-quote--full blockquote p:first-child { font-family: var(--font-display); font-size: 26px; line-height: 1.3; font-style: italic; }
.sec--deep .jd-quote { background: transparent; border-color: rgba(176, 138, 74, 0.45); }
.sec--deep .jd-quote figcaption, .sec--deep .jd-quote__mark { color: var(--ochre); }

/* Steps */
.jd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.jd-step { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-6); border-top: 1px solid rgba(176, 138, 74, 0.45); }
.jd-step svg { width: 44px; height: 44px; stroke: var(--ochre); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--space-2); }
.jd-step__el { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre); }
.jd-step__title { font-family: var(--font-display); font-size: 30px; font-weight: 500; margin: 0; line-height: 1.15; }
.jd-step__text { font-size: 16px; line-height: 1.65; opacity: 0.88; }

/* Safety */
.jd-safety { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.jd-safety svg { width: 30px; height: 30px; stroke: var(--ochre-deep); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jd-safety h3 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.jd-safety p, .jd-safety li { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.jd-safety ul { padding-left: 1.1em; margin: var(--space-2) 0 var(--space-3); }

/* Lists */
.ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); }
.ticks svg { width: 20px; height: 20px; margin-top: 5px; stroke: var(--teal); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* FAQ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-6) 0; background: none; border: 0; color: var(--ink); font-family: var(--font-display); font-size: 26px; font-weight: 500; text-align: left; cursor: pointer; line-height: 1.25; }
.faq__q:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.faq__sign { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ochre-deep); color: var(--ochre-deep); display: inline-flex; align-items: center; justify-content: center; font: 400 22px/1 var(--font-body); }
.faq__a { padding: 0 0 var(--space-6); max-width: 44rem; color: var(--ink-muted); display: flex; flex-direction: column; gap: 0.8em; }
.faq__cat { margin: var(--space-12) 0 var(--space-4); }

/* Form */
.form { display: flex; flex-direction: column; gap: var(--space-6); }
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.jd-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.jd-field label, .jd-legend { font-size: 15px; font-weight: 700; color: var(--ink); }
.jd-opt { font-weight: 400; color: var(--ink-muted); }
.jd-input, .jd-select, .jd-textarea { width: 100%; min-height: 50px; padding: var(--space-3) var(--space-4); font: 400 17px/1.4 var(--font-body); color: var(--ink); background: var(--surface-raised); border: 1.5px solid var(--line); border-radius: var(--radius-sm); }
.jd-textarea { min-height: 130px; resize: vertical; }
.jd-input:focus, .jd-select:focus, .jd-textarea:focus { outline: 3px solid var(--ember); outline-offset: 1px; border-color: var(--bark); }
.jd-field__help { font-size: 14px; color: var(--ink-muted); }
.jd-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: 15px; line-height: 1.55; }
.jd-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--bark); }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pill { min-height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: var(--surface-raised); color: var(--ink); font: 600 15px var(--font-body); cursor: pointer; }
.pill.is-on { background: var(--bark); border-color: var(--bark); color: var(--on-bark); }
.group-box { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-6); border: 1px dashed var(--ochre-deep); border-radius: var(--radius-md); }
.panel { padding: var(--space-12); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.sent { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }

/* Breathwork check */
.check { max-width: 760px; margin: 0 auto; }
.check__bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin: var(--space-4) 0 var(--space-8); }
.check__bar span { display: block; height: 100%; background: var(--bark); border-radius: 999px; }
.opts { display: flex; flex-direction: column; gap: var(--space-3); }
.opt { width: 100%; text-align: left; min-height: 60px; padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); border: 1.5px solid var(--line); background: var(--surface-raised); color: var(--ink); font: 600 17px/1.4 var(--font-body); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.opt:hover { border-color: var(--bark); }
.opt:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
.opt.is-on { border-color: var(--bark); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--bark); }
.opt__arrow { color: var(--ochre-deep); font-size: 20px; flex: none; }
.check__help { padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px dashed var(--ochre-deep); font-size: 15px; color: var(--ink-muted); margin-bottom: var(--space-6); }
.result { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-12); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.result--care { border: 1.5px solid var(--ochre-deep); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: 700 15px var(--font-body); color: var(--ember-text); text-decoration: underline; text-underline-offset: 4px; }

/* Lead magnet band */
.magnet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-12); border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); }
.magnet__form { display: flex; flex-direction: column; gap: var(--space-4); }
.magnet__sheet { aspect-ratio: 8.5 / 11; max-width: 260px; width: 100%; justify-self: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transform: rotate(-2deg); }
.magnet__sheet b { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.1; }
.magnet__sheet i { display: block; height: 54px; border-radius: 40% 60% 50% 50% / 55% 45% 55% 45%; background: var(--teal); opacity: 0.8; }
.magnet__sheet i:nth-of-type(2) { background: var(--bark); }
.magnet__sheet i:nth-of-type(3) { background: var(--ochre); }
@media (max-width: 760px) { .magnet { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); } .result { padding: var(--space-6); } }

/* CTA band and footer */
.cta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.cta .lead { margin: 0 auto; }
.jd-footer { background: var(--surface-deep); color: var(--ink-on-deep); padding-block: var(--space-16) var(--space-8); }
.jd-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid rgba(176, 138, 74, 0.35); }
.jd-footer h2 { font-family: var(--font-display); font-size: 30px; font-weight: 600; margin: 0 0 var(--space-3); }
.jd-footer h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre); margin: 0 0 var(--space-4); }
.jd-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.jd-footer a { color: var(--ink-on-deep); text-decoration: none; font-size: 15px; }
.jd-footer a:hover { color: var(--ochre); text-decoration: underline; }
.jd-footer__fine { padding-top: var(--space-6); font-size: 13px; line-height: 1.6; opacity: 0.8; display: flex; flex-direction: column; gap: var(--space-2); max-width: 60rem; }

/* Responsive */
@media (max-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .jd-header__nav { display: none; }
  .jd-header__menu { display: inline-flex; }
  .jd-menu { display: block; }
  .split, .split--rev { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .split--rev > :first-child { order: 2; }
  .jd-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 20px; }
  .sec { padding-block: 56px; }
  .hero { padding-block: var(--space-8) 56px; }
  .hero__waves { width: 320px; top: auto; bottom: 20px; }
  .h1 { font-size: 44px; line-height: 1.05; }
  .h2 { font-size: 34px; }
  .lead { font-size: 18px; }
  .grid-2, .grid-3, .form-2, .jd-steps { grid-template-columns: minmax(0, 1fr); }
  .sec-head { margin-bottom: var(--space-8); }
  .card, .jd-service, .jd-quote, .jd-safety { padding: var(--space-6); }
  .jd-safety { grid-template-columns: minmax(0, 1fr); }
  .jd-quote blockquote { font-size: 23px; }
  .faq__q { font-size: 22px; }
  .panel { padding: var(--space-6); }
  .jd-stone { max-width: 300px; }
  .row .jd-btn { flex: 1 1 100%; }
}
/* Teal as the strong secondary colour */
.pg { --gold-light: #d9b48a; --ochre-bright: #c9a462; }
.hero .eyebrow { color: var(--ochre); }
.sec--teal { background: var(--teal); color: var(--ink-on-deep); }
.sec--teal .eyebrow, .sec--teal .jd-step__el, .sec--teal .jd-link { color: var(--gold-light); }
.sec--teal .jd-step svg { stroke: var(--gold-light); }
.sec--teal .jd-step { border-top-color: rgba(217, 180, 138, 0.45); }
.sec--teal .jd-btn--primary { background: var(--ochre-bright); color: var(--night-teal); }
.sec--teal .jd-btn--primary:hover { background: var(--parchment); color: var(--night-teal); }
.sec--teal .jd-btn--on-deep { border-color: var(--gold-light); color: var(--ink-on-deep); }
.sec--teal .jd-btn--on-deep:hover { background: var(--gold-light); color: var(--night-teal); }
.sec--teal .jd-stone::before { border-color: var(--gold-light); }
.sec:not(.sec--deep) .eyebrow, .faq__cat { color: var(--teal); }
.card__icon, .jd-safety svg { stroke: var(--teal); }
.jd-quote__mark, .opt__arrow { color: var(--teal); }
.jd-btn--secondary { color: var(--teal); border-color: var(--teal); }
.jd-btn--secondary:hover { background: var(--teal); color: var(--on-teal); }
.jd-header__nav a.is-current { text-decoration-color: var(--teal); }
.sec:not(.sec--deep) .jd-stone::before { border-color: var(--teal); }
.faq__sign { border-color: var(--teal); color: var(--teal); }
.check__bar span { background: var(--teal); }
.check__help, .group-box { border-color: var(--teal); }
.result--care { border-color: var(--teal); }
.jd-service__foot { border-top-color: rgba(30, 74, 71, 0.25); }
.sec--raised { background: #e6e7dc; }

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

/* Static site additions */
.skip { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--bark); color: var(--on-bark); padding: 10px 16px; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
.jd-menu[hidden], [hidden] { display: none !important; }
summary.faq__q { list-style: none; }
summary.faq__q::-webkit-details-marker { display: none; }
.faq__sign::before { content: "+"; }
details[open] > summary .faq__sign::before { content: "\2212"; }
#q-title:focus, #r-box:focus { outline: none; }
.prose strong { color: var(--ink); }
html, body { margin: 0; padding: 0; }
.split--faq { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); }
.split--book { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.faq-side { position: sticky; top: 120px; margin-top: 48px; }
@media (max-width: 860px) { .split--faq, .split--book { grid-template-columns: minmax(0, 1fr); } .faq-side { position: static; margin-top: 0; } }