@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-normal.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-normal-1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400-normal-2.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-normal.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-normal-1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500-normal-2.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/spectral-300-italic.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/spectral-300-italic-1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:300;font-display:swap;src:url('fonts/spectral-300-italic-2.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/spectral-400-italic.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/spectral-400-italic-1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/spectral-400-italic-2.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/spectral-300-normal.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/spectral-300-normal-1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/spectral-300-normal-2.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spectral-400-normal.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spectral-400-normal-1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spectral-400-normal-2.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/spectral-600-normal.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/spectral-600-normal-1.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/spectral-600-normal-2.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Patterns silo — theme
   Navy and white. This is templates/style.css with the palette swapped and the
   table rules strengthened; NOTHING else differs. Same fonts, same type scale,
   same spacing, same components, same layout as the Sacred Valley retreat pages,
   so the two sets read as one site in two colourways.

   Every colour lives in :root. To retune the palette, change these variables
   only; nothing else in the stylesheet needs to move.

   Contrast (WCAG AA needs 4.5:1 for body text):
     --text on --bg          15.9:1
     --text-muted on --bg     5.7:1
     --text-muted on --bg-card 5.3:1
     --accent on --bg         7.8:1
     --accent-contrast on --accent 7.8:1  */
:root {
  --bg: #f5f0e7;           /* white page */
  --bg-soft: #efe8da;      /* light navy tint: answer box, table headers */
  --bg-card: #faf6ee;      /* card and related-links fill */
  --stripe: #f0eade;       /* zebra rows in tables */
  --text: #221a11;         /* navy-tinted ink */
  --text-muted: #5a4c3c;   /* muted slate */
  --heading: #221a11;      /* deep navy for h1/h2/h3 */
  --accent: #b33a1a;       /* navy — CTAs and links */
  --accent-hover: #8f2e15; /* deeper navy on hover */
  --accent-contrast: #f5f0e7;
  --border: rgba(34,26,17,.14);       /* pale navy border */
  --secondary: #5a4c3c;    /* mid navy — secondary emphasis */
  --emergency: #221a11;    /* deep navy (no urgent/emergency CTA on this site) */
  --radius: 2px;
  --measure: 44rem;
  --serif: "Spectral", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 1.0625rem;
}

h1, h2, h3, .site-name, nav, .btn, .answer-label, .crumbs, .meta,
.cta-band, .call-bar, footer {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

/* Header */
header.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-name {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  color: var(--text);
  text-decoration: none;
}
.site-name span { color: var(--accent); }
nav.main-nav { display: flex; gap: 1.15rem; flex-wrap: wrap; margin-right: auto; }
nav.main-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
}
nav.main-nav a:hover { color: var(--accent); }
.header-call {
  background: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}
.header-call:hover { background: var(--accent-hover); }

/* Layout */
main { max-width: 68rem; margin: 0 auto; padding: 2.25rem 1.25rem 4rem; }
article { max-width: var(--measure); }
.crumbs { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.25rem; }
.crumbs a { color: var(--text-muted); }

h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 1rem; color: var(--heading); }
h2 { font-size: 1.35rem; line-height: 1.3; margin: 2.25rem 0 0.75rem; color: var(--heading); }
h3 { font-size: 1.08rem; margin: 1.5rem 0 0.5rem; color: var(--heading); }
a { color: var(--accent); }
img { max-width: 100%; height: auto; }

/* Keyboard focus. Sizes and layout are untouched; this is a visibility fix. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Answer-first block */
.answer-box {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.75rem;
}
.answer-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.answer-box p { margin: 0; font-size: 1.05rem; }

/* Lists and steps */
article ol > li, article ul > li { margin-bottom: 0.45rem; }

/* Tables. These pattern pages lean on comparison tables far harder than the
   retreat pages do, so this is the one component deliberately built up rather
   than just recoloured.

   build_patterns_preview.py wraps every <table> in <div class="table-wrap">.
   The wrapper owns the scrolling, so a wide table scrolls inside its own box
   instead of making the whole page scroll sideways on a phone. min-width on the
   table is what forces that scroll rather than letting columns crush together
   into unreadable slivers. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.35rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.table-wrap > table { margin: 0; border: 0; min-width: 34rem; }
article table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  margin: 1rem 0;
}
article th, article td {
  border: 1px solid var(--border);
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
article th {
  background: var(--bg-soft);
  color: var(--heading);
  font-weight: 700;
  border-bottom-width: 2px;
}
article tbody tr:nth-child(even) td { background: var(--stripe); }
/* The wrapper draws the outer edge, so the table drops its own outer borders. */
.table-wrap > table th:first-child,
.table-wrap > table td:first-child { border-left: 0; }
.table-wrap > table th:last-child,
.table-wrap > table td:last-child { border-right: 0; }
.table-wrap > table thead tr:first-child th { border-top: 0; }
.table-wrap > table tbody tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq-section {
  margin-top: 2.5rem;
  border-top: 2px solid var(--border);
  padding-top: 1.5rem;
}
.faq-item { margin-bottom: 1.35rem; }
.faq-item h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.faq-item p { margin: 0; }

/* CTA band */
.cta-band {
  background: var(--accent);
  color: var(--accent-contrast);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem;
  margin: 2.75rem 0 0;
}
.cta-band h2 { margin: 0 0 0.5rem; font-size: 1.25rem; color: var(--accent-contrast); }
.cta-band p { margin: 0 0 1rem; }
.cta-band .btn {
  display: inline-block;
  background: var(--accent-contrast);
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius);
}
.cta-band .btn:hover { opacity: 0.92; }
.cta-band a.plain { color: var(--accent-contrast); }

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 32rem;
  margin: 1.25rem 0 0.5rem;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}
.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.contact-form button {
  align-self: flex-start;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: var(--radius);
  padding: 0.7rem 1.3rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
}
.contact-form button:hover { background: var(--accent-hover); }
.contact-form button:disabled { opacity: 0.6; cursor: default; }
.contact-form__note { font-size: 0.85rem; color: var(--text-muted); margin: 0.2rem 0 0; }
.contact-form__hp { position: absolute; left: -9999px; }
.contact-success {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.25rem 0;
}

/* Related links */
.related {
  margin-top: 2.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.related h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.related ul { margin: 0; padding-left: 1.2rem; }
.related li { margin-bottom: 0.35rem; font-size: 0.95rem; }

/* Card grids (hub + home) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 0.95rem 1.05rem;
}
.card a { font-weight: 600; text-decoration: none; }
.card p { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--text-muted); }

/* Meta line */
.meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; }

/* Patterns index. Reuses .card-grid / .card above; these only add the stat line
   and let the listing use the full column rather than the article measure. */
.index-wide { max-width: none; }
.card-grid.index-cards { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.1rem; }
.card .card-title {
  display: block;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--heading);
  margin-bottom: 0.35rem;
}
.card .card-stats {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Footer */
footer.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  margin-top: 3rem;
}
.footer-inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 5.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
}
.footer-inner h3 { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--text); }
.footer-inner ul { list-style: none; margin: 0; padding: 0; }
.footer-inner li { margin-bottom: 0.3rem; }
.footer-inner a { color: var(--text-muted); }

/* Sticky mobile call bar */
.call-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--emergency);
  text-align: center;
  padding: 0.8rem 1rem;
  z-index: 30;
}
.call-bar a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
}
@media (min-width: 48rem) {
  .call-bar { display: none; }
  .footer-inner { padding-bottom: 2.5rem; }
}

/* Exit-intent lead popup. Default is display:none — it ONLY shows when JS adds
   .is-open on genuine exit intent (after an arming delay). Outside <article> = AEO-safe. */
.exit-popup {
  display: none;
  position: fixed; inset: 0; z-index: 60;
  align-items: center; justify-content: center;
  padding: 1.25rem;
}
.exit-popup.is-open { display: flex; }
.exit-popup__overlay {
  position: absolute; inset: 0;
  background: rgba(15, 25, 32, 0.6);
  animation: mmFade .2s ease;
}
.exit-popup__card {
  position: relative; z-index: 1;
  background: var(--bg);
  border-radius: 10px;
  border-top: 5px solid var(--accent);
  max-width: 30rem; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  animation: mmPop .22s ease;
}
.exit-popup__body { padding: 1.9rem 1.8rem 1.7rem; }
.exit-popup__close {
  position: absolute; top: .4rem; right: .6rem;
  background: none; border: none;
  font-size: 1.7rem; line-height: 1; color: var(--text-muted);
  cursor: pointer; padding: .2rem .45rem;
}
.exit-popup__close:hover { color: var(--text); }
.exit-popup__eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; font-weight: 700; color: var(--accent);
  margin: 0 0 .5rem;
}
.exit-popup__card h2 { font-size: 1.35rem; line-height: 1.25; margin: 0 0 .6rem; }
.exit-popup__lead { font-size: .98rem; color: var(--text); margin: 0 0 1.1rem; }
.exit-popup__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.exit-popup__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.exit-popup__row input[type=email] {
  flex: 1 1 12rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: 1rem;
}
.exit-popup__row input[type=email]:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.exit-popup__submit {
  flex: 0 0 auto;
  background: var(--accent); color: var(--accent-contrast);
  border: none; border-radius: var(--radius);
  padding: .7rem 1.1rem; font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .95rem; cursor: pointer;
}
.exit-popup__submit:hover { background: var(--accent-hover); }
.exit-popup__submit:disabled { opacity: .6; cursor: default; }
.exit-popup__fine { font-size: .8rem; color: var(--text-muted); margin: .8rem 0 0; }
.exit-popup__fine a { font-weight: 600; }
.exit-popup__hp { position: absolute; left: -9999px; }
.exit-popup__success h2 { margin-top: 0; }
@keyframes mmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 30rem) {
  .exit-popup__body { padding: 1.5rem 1.2rem; }
  .exit-popup__submit { flex: 1 1 100%; }
}

/* Identify-box (spec amendment 2026-08-20.1): above-the-fold recognition block.
   Sits directly under the answer-box on every patterns page: a short lead-in,
   3-5 verbatim first-person thought patterns, one topical seminar link.
   Quieter chrome than the answer-box (border, no fill) so the quotes carry the
   weight; the final link renders as a compact button so the fold has a visible
   action. NEVER reuse the answer-box class here: the DTR fallback in
   patterns-base.html targets ".answer-box p" and must not catch this block.
   The /seminar/ href is a placeholder until Florian shares the final link. */
.identify-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.3rem;
  margin: 0 0 1.75rem;
}
.identify-box ul { margin: 0.35rem 0 0.9rem; padding-left: 1.15rem; }
.identify-box li { margin-bottom: 0.4rem; font-style: italic; }

/* Disclaimer block (2026-09-01). Sits immediately after the label section on
   behavior pages that name a term. Deliberately quieter than the identify-box:
   it must be unmissable when looked for and must not compete with the
   recognition writing around it. Wording comes from Florian's own site ("I am
   not a guru and I am not a therapist"), not legal boilerplate. */
.disclaimer-box {
  border-left: 3px solid var(--accent);
  background: rgba(179, 58, 26, 0.04);
  padding: 0.9rem 1.2rem;
  margin: 0 0 1.75rem;
  font-size: 0.94em;
  line-height: 1.62;
}
.disclaimer-box p { margin: 0; }
.disclaimer-box strong { letter-spacing: 0.01em; }
.identify-box p { margin: 0 0 0.5rem; }
.identify-box p:last-child { margin: 0; }
.identify-box p:last-child a {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
  padding: 0.55rem 1.05rem;
  border-radius: var(--radius);
  margin-top: 0.2rem;
}
.identify-box p:last-child a:hover { opacity: 0.92; }

/* Site-wide scope and medical disclaimer (added 2026-08-26).
   Sits below .footer-inner inside footer.site-footer. Muted and small so it
   reads as a standing notice rather than a warning banner, but with a top
   rule so it is visibly separate from the footer's navigation columns.
   .footer-inner already carries 5.5rem of bottom padding for the sticky
   element, so this block resets to a normal rhythm and re-applies it. */
.site-disclaimer {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 5.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.site-disclaimer p { margin: 0 0 0.6rem; }
.site-disclaimer p:last-child { margin-bottom: 0; }
.site-disclaimer strong { color: var(--text); font-weight: 600; }
@media (max-width: 40rem) {
  .site-disclaimer { font-size: 0.78rem; padding-top: 1rem; }
}
/* The 5.5rem bottom padding on .footer-inner existed to clear the sticky
   element at the foot of the page. The disclaimer now sits below it and carries
   that clearance itself, so leaving it on .footer-inner would open a dead gap
   between the footer columns and the notice. Collapse it back to normal rhythm
   whenever a disclaimer follows. Declared after the base rule so it wins. */
.footer-inner { padding-bottom: 1.5rem; }

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23g)' opacity='.055'/></svg>");
}


/* ==========================================================================
   PAPER THEME OVERRIDES
   Everything above is patterns-style.css with the :root palette swapped to the
   SoulSearching paper tokens. Below are the things a token cannot express.
   Ported from soulsearching-site/index.html (audited 2026-08-26).
   ========================================================================== */

/* Type. Spectral carries body AND headings on the landing page; that single
   serif voice is most of why it reads warm instead of clinical. IBM Plex Mono
   is reserved for labels only, always uppercase with wide tracking. */
body { font-family: var(--serif); font-weight: 300; }
h1, h2, h3 { font-family: var(--serif); }
h1 { font-weight: 400; letter-spacing: -.02em; }
h2 { font-weight: 400; letter-spacing: -.01em; }
h3 { font-weight: 600; }

.answer-label,
.crumbs,
.meta,
.card .card-stats,
.exit-popup__eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .7rem;
}

/* Buttons: ink block that flips to terracotta, mono uppercase label. */
.cta-band .btn,
.contact-form button,
.exit-popup__submit {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  border-radius: 2px;
  transition: background .18s ease, transform .18s ease;
}
.cta-band .btn:hover,
.contact-form button:hover,
.exit-popup__submit:hover { transform: translateY(-1px); }

/* The four signature blocks, each on a different paper tone so the page has
   rhythm instead of one flat white field. This is the "alternating beige
   sections" effect translated from a landing page to a single article. */
.answer-box {
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}
.identify-box {
  background: var(--bg-card);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
}
.faq-section { background: var(--bg-soft); border-radius: 2px; }
.faq-item { border-bottom: 1px solid var(--border); }
.related { background: var(--bg-card); border-radius: 2px; }

/* The one deliberate interruption: the CTA band inverts to ink, exactly as
   .band does on the landing page. */
.cta-band {
  background: var(--text);
  color: #f2ece1;
  border-radius: 2px;
}
.cta-band h2 { color: #faf6ee; font-family: var(--serif); font-weight: 400; }
.cta-band p { color: rgba(242,236,225,.82); }
.cta-band .btn { background: #f2ece1; color: var(--text); }
.cta-band .btn:hover { background: #e8a48c; color: var(--text); }
.cta-band a.plain { color: #e8a48c; }

/* The wordmark, set the way the landing page sets it: Spectral 300, the middle
   word italic in the accent. On ink it uses the lighter coral counterpart. */
.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0 0 .6rem;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}
.wordmark em { font-style: italic; color: var(--accent); }
.cta-band .wordmark { color: #faf6ee; }
.cta-band .wordmark em { color: #e8a48c; }

/* Mountain engravings. Frozen inline SVG, no JS. aspect-ratio holds the box so
   nothing reflows while they paint. preserveAspectRatio="xMidYMax slice" in the
   markup crops into the centre on phones rather than shrinking to mush. */
.ridge-engraved { margin: clamp(2.6rem,7vw,4.5rem) 0 0; aspect-ratio: 1440/360; }
.ridge-engraved svg { display: block; width: 100%; height: 100%; }
.foot-art { margin-top: clamp(1.6rem,4vw,2.4rem); aspect-ratio: 1440/267; }
.foot-art svg { display: block; width: 100%; height: 100%; }
@media (max-width: 700px) { .ridge-engraved { aspect-ratio: 1440/560; } }

/* Header and footer inherit the ink treatment so the page is bookended. */
header.site-header { background: var(--bg); border-bottom: 1px solid var(--border); }
.site-name { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
nav.main-nav a { font-family: var(--mono); text-transform: uppercase;
                 letter-spacing: .1em; font-size: .68rem; }
footer.site-footer { background: var(--text); color: #f2ece1; border-top: 0; }
.footer-inner { color: rgba(242,236,225,.78); }
.footer-inner h3 { color: #faf6ee; font-family: var(--serif); font-weight: 400; }
.footer-inner a { color: rgba(242,236,225,.78); }
.footer-inner a:hover { color: #e8a48c; }
.site-disclaimer { color: rgba(242,236,225,.6); border-top-color: rgba(242,236,225,.16); }
.site-disclaimer strong { color: #faf6ee; }

/* Photographs and tables get the warm print treatment rather than hard edges. */
img { border-radius: 2px; filter: saturate(.92) contrast(1.02); }
.table-wrap > table { border-radius: 2px; }


/* ==========================================================================
   ALTERNATING SCROLL SECTIONS + MOUNTAIN PLACEMENT
   The template rules from Florian's 2026-08-27 dial-in. Placement logic lives
   in paper_sections.split_into_sections(); this is its styling half.
   ========================================================================== */
/* main/article run full width; each band's inner wrapper re-establishes the
   reading measure. Line length is unchanged; only backgrounds bleed. */
main { max-width: none; margin: 0; padding: 0; }
article { max-width: none; }

.psec {
  position: relative;
  padding: clamp(2.2rem, 5vw, 3.6rem) 1.25rem;
  border-top: 1px solid var(--border);
}
.psec:first-child, .psec-fold { border-top: 0; }
.psec-inner { max-width: var(--measure); margin: 0 auto; }
.psec-fold { padding-top: 1.5rem; }

/* FLUSH: a section whose closing graphic must touch the boundary line.
   padding-bottom goes to zero so the artwork's bottom edge IS the edge the
   next section's border-top draws along. (Rules 2 and 4.) */
.psec-flush { padding-bottom: 0; }

/* Four tones. t2 (#fbf8f2) is the palest and always hosts the hills. */
.psec-t1 { background: #f5f0e7; }
.psec-t2 { background: #fbf8f2; }
.psec-t3 { background: #ece3d2; }
.psec-t4 { background: #e2d6c0; }

/* the single dark interruption */
.psec-band { background: var(--text); color: #f2ece1; overflow: hidden; }
.psec-band h2, .psec-band h3 { color: #faf6ee; }
.psec-band p, .psec-band li { color: rgba(242,236,225,.84); }
.psec-band strong { color: #faf6ee; }
.psec-band a { color: #e8a48c; }
.psec-band .table-wrap > table { background: rgba(242,236,225,.04); }
.psec-band th { background: rgba(242,236,225,.10); color: #faf6ee;
                border-color: rgba(242,236,225,.18); }
.psec-band td { border-color: rgba(242,236,225,.14); }
.psec-band tbody tr:nth-child(even) td { background: rgba(242,236,225,.05); }

/* the fold keeps its blocks on plain paper so the identify-box lands first */
.psec-fold .answer-box { background: var(--bg-soft); }
.psec-fold .identify-box { background: var(--bg-card); }

/* Article-specific editorial plates. The generated art already carries the
   paper palette, so the frame stays quiet and the caption does the accessible
   explanatory work without competing with the image text. */
.article-infographic {
  margin: clamp(2rem,5vw,3.5rem) 0;
}
.article-infographic img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(138,122,103,.24);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255,255,255,.5),
              0 18px 44px -30px rgba(34,26,17,.48);
}
.article-infographic figcaption {
  max-width: 46rem;
  margin: .75rem auto 0;
  color: #6f5f4c;
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.55;
  letter-spacing: .055em;
  text-align: center;
}
.psec-band .article-infographic figcaption {
  color: rgba(242,236,225,.72);
}

/* FAQ, CTA and related arrive after the banded body and keep the measure.
   The engraved plate is deliberately NOT in this list (rule 5). */
.faq-section, .cta-band, .related {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   MOUNTAIN PAINT, copied verbatim from soulsearching-site/index.html.
   The paths carry class names and no fill attribute; without these rules
   every plane renders default BLACK - which is exactly what happened once.
   -------------------------------------------------------------------------- */
.aqua-p1 { fill:#a3bab0; fill-opacity:.4 }
.aqua-p2 { fill:#8ca89b; fill-opacity:.42 }
.aqua-p3 { fill:#6b9285; fill-opacity:.5 }
.aqua-p4 { fill:url(#aq-gmerge); fill-opacity:.5 }
.aqua-p5 { fill:#8a7a67; fill-opacity:.45 }
.aqua-p6 { fill:#9c8467; fill-opacity:.42 }
.aqua-c1 { fill:none; stroke:#7fa093; stroke-width:2; stroke-opacity:.3;
           stroke-linecap:round; stroke-linejoin:round }
.aqua-c3 { fill:none; stroke:#4e7a6e; stroke-width:2.5; stroke-opacity:.35;
           stroke-linecap:round; stroke-linejoin:round }
.aqua-c5 { fill:none; stroke:#6f5f4c; stroke-width:2.2; stroke-opacity:.28;
           stroke-linecap:round; stroke-linejoin:round }
.aqua-veil { fill:url(#aq-gveil); opacity:.13 }
.aqua-grain { opacity:.07 }

/* --------------------------------------------------------------------------
   THE PLACED DEVICES
   Every closing graphic uses negative horizontal margins to counter the
   section's 1.25rem side padding, so it runs edge to edge.
   -------------------------------------------------------------------------- */

/* Rule 2: hero watercolour closes the fold, flush with the boundary line. */
.aqua-divider { margin: clamp(1.2rem,3vw,2rem) -1.25rem 0; line-height: 0; }
.aqua-divider svg { display: block; width: 100%;
                    height: clamp(150px, 26vw, 320px); }

/* Rules 1+4: pale rolling hills at the BOTTOM of the palest sections, flush.
   The next (darker) section's background starts exactly at the hills' foot,
   which is what produces the contrast Florian pointed at. */
.ridge-hills { margin: clamp(1.5rem,3vw,2.4rem) -1.25rem 0; line-height: 0; }
.ridge-hills svg { display: block; width: 100%;
                   height: clamp(80px, 12vw, 150px); }
.ridge-hills path { fill: var(--text); }

/* Rule 3: small ridgeline echoes alternate corners; the left one is mirrored
   (spiegeln) so the slope leans into the page from either side. */
.psec.has-echo { overflow: hidden; }
.aqua-echo { position: absolute; bottom: 0; width: min(38%, 420px);
             opacity: .5; pointer-events: none; z-index: 0; }
.aqua-echo-right { right: 0; }
.aqua-echo-left  { left: 0; transform: scaleX(-1); }
.aqua-echo > svg { display: block; width: 100%; height: auto; }
.psec.has-echo .psec-inner { position: relative; z-index: 1; }
@media (max-width: 999px) { .aqua-echo { display: none; } }

/* The wordmark unit's facts rows: seminar row ABOVE the writing, article row
   BELOW it, both at reading measure, both INSIDE the wordmark's own section so
   the whole unit shares one background. dl.facts is the landing page's device
   VERBATIM (grid, terracotta left rule, mono uppercase label, serif value). */
.facts-strip { max-width: var(--measure); margin: clamp(2rem,5vw,3rem) auto 0; }
.sect-word + .facts-strip { margin-top: clamp(1.4rem,3.5vw,2.2rem); }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
         gap:1.6rem 1.25rem; margin: 0; }
.facts div { border-left:2px solid var(--accent); padding-left:.9rem; }
.facts dt { font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
            text-transform:uppercase; color:#8a7a67; margin-bottom:.3rem; }
.facts dd { margin:0; font-size:1.22rem; line-height:1.3; color: var(--text); }

/* The dedicated seminar-invite section after each wordmark unit: cropped
   banner + contextual CTA, on its OWN shade - a light terracotta wash over
   paper, distinct from every tone in the rotation but built from the accent,
   so it reads as "this block is the invitation" without leaving the palette. */
.psec-invite {
  background: linear-gradient(rgba(179,58,26,.055), rgba(179,58,26,.055)), #f5f0e7;
  text-align: center;
}
.invite-banner-link { display: block; max-width: 52rem; margin: 0 auto; }
.invite-banner {
  display: block; width: 100%; height: auto; border-radius: 2px;
  filter: saturate(.92) contrast(1.02);
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 18px 44px -28px rgba(34,26,17,.5);
}
.invite-copy {
  max-width: 34rem; margin: 1.5rem auto .4rem;
  font-size: 1.08rem; line-height: 1.6; color: var(--text);
}
.invite-action { margin: 1.1rem 0 0; }
.invite-btn {
  display: inline-block; padding: .95rem 2.1rem;
  background: var(--text); color: #f5f0e7; text-decoration: none;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; border-radius: 2px;
  transition: background .18s ease, transform .18s ease;
}
.invite-btn:hover { background: var(--accent); transform: translateY(-1px); }

/* Rule 6: the standalone paper wordmark closes its section, letters cropped
   by the section edge exactly as on the landing page (baseline = viewBox
   bottom, preserveAspectRatio slice). */
.sect-word { margin: clamp(2.2rem,5.5vw,4rem) -1.25rem 0;
             aspect-ratio: 1440/65; line-height: 0; }
.sect-word svg { display: block; width: 100%; height: 100%; }

/* Dark band: engraved range + wordmark flush at the band's foot. */
.band-art { margin: clamp(2rem,5vw,3rem) -1.25rem 0;
            aspect-ratio: 1440/267; line-height: 0; }
.band-art svg { display: block; width: 100%; height: 100%; }

/* Rule 5: the colour engraved plate runs ACROSS THE WHOLE PAGE. */
.ridge-engraved { max-width: none; width: 100%;
                  margin: clamp(2.6rem,7vw,4.5rem) 0 0;
                  aspect-ratio: 1440/360; line-height: 0; }
.ridge-engraved svg { display: block; width: 100%; height: 100%; }
@media (max-width: 700px) {
  .psec { padding-left: 1rem; padding-right: 1rem; }
  .aqua-divider, .ridge-hills, .sect-word, .band-art {
    margin-left: -1rem; margin-right: -1rem;
  }
  .ridge-engraved { aspect-ratio: 1440/560; }
}

/* Exit pop-up: three-step lead form (2026-10-05) */
.exit-popup__step-label { display: block; font-weight: 600; font-size: .95rem; margin: 0 0 .45rem; }
.exit-popup__row input[type=text],
.exit-popup__row input[type=tel] {
  flex: 1 1 12rem;
  padding: .7rem .8rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: 1rem;
}
.exit-popup__row input[type=text]:focus,
.exit-popup__row input[type=tel]:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.exit-popup__skip {
  background: none; border: none; padding: .55rem 0 0; cursor: pointer;
  font-family: inherit; font-size: .85rem; color: var(--text-muted); text-decoration: underline;
}
.exit-popup__error { color: #b42318; font-size: .85rem; margin: .6rem 0 0; }
.exit-popup__success p a { font-weight: 600; }