/* Soft Natural visual trial.
   Pure presentation layer: no route, audio, analytics or content changes.
   Keep notes quiet and choices visually substantial. */

:root {
  --brand: #416b5d;
  --brand-dark: #2d5549;
  --ink: #26382f;
  --muted: #5b6e64;
  --line: #dce5dd;
  --wash: #e8f0e9;
  --paper: #fffefa;
  --page: #f8f5ee;
  --soft: #f0f3ec;
  --shadow: 0 9px 28px rgba(43, 68, 53, .085);
  --ci-perspective-bg: #fffefa;
  --ci-perspective-border: #cadccf;
  --ci-perspective-selected: #416b5d;
  --ci-perspective-shadow: 0 7px 22px rgba(43, 68, 53, .085);
  --ci-explanation-bg: #edf2ea;
  --ci-explanation-border: #dbe5dc;
}

html { background: var(--page); }
body {
  background:
    radial-gradient(ellipse 440px 410px at 96% 0%, rgba(221, 231, 216, .60), transparent 82%),
    radial-gradient(ellipse 400px 400px at 0% 70%, rgba(248, 234, 213, .40), transparent 85%),
    var(--page);
  min-height: 100vh;
}
.w { max-width: 680px; }

.appTop {
  border-bottom: 1px solid rgba(89, 119, 101, .16);
  padding-bottom: 16px;
  margin-bottom: 25px;
}
.brandMark { color: var(--brand-dark); letter-spacing: .12em; font-weight: 700; }
.brandLogo { border-radius: 11px; box-shadow: 0 3px 10px rgba(33, 71, 52, .11); }
.phase {
  background: rgba(255, 254, 250, .8);
  border: 1px solid rgba(117, 141, 124, .21);
  color: var(--muted);
  padding: 7px 12px;
}
h1 {
  color: var(--ink);
  font-size: clamp(2.15rem, 7vw, 3.15rem);
  line-height: 1.10;
  letter-spacing: -.031em;
}
h2 { color: var(--ink); line-height: 1.18; letter-spacing: -.022em; }
p { line-height: 1.58; }
.tag { color: var(--brand-dark); letter-spacing: .10em; }

.btn {
  border-radius: 17px;
  min-height: 56px;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn:not(.sec):not(.text) {
  color: #fff;
  background: linear-gradient(145deg, #527d6c, var(--brand));
  border: 1px solid rgba(31, 75, 53, .14);
  box-shadow: 0 7px 18px rgba(39, 86, 61, .16);
}
.btn:not(.sec):not(.text):active {
  background: var(--brand-dark);
  box-shadow: 0 2px 7px rgba(39, 86, 61, .12);
  transform: translateY(1px);
}
.btn.sec {
  color: var(--brand-dark);
  background: rgba(235, 242, 234, .88);
  border: 1px solid #cbdad0;
  box-shadow: none;
}
.btn.text { color: var(--brand-dark); box-shadow: none; }

.card, .opt {
  border-color: var(--line);
  border-radius: 19px;
}
.card, .pcard {
  background: var(--paper);
  box-shadow: var(--shadow);
}
.pcard { border-color: #d5e1d8; border-radius: 19px; }
.pcard.selected {
  border-color: var(--brand);
  box-shadow: 0 10px 28px rgba(42, 90, 64, .13);
}
.opt {
  background: var(--paper);
  box-shadow: 0 6px 22px rgba(43, 68, 53, .055);
}
.opt:active { background: var(--wash); border-color: #9bb8a3; }
.ppick { padding: 20px; }
.sent { color: var(--ink); }
.sentenceOptions .opt {
  background: var(--paper);
  border-color: #b5cbbc;
  box-shadow: 0 7px 22px rgba(43, 68, 53, .085);
}
.focusStatement {
  background: var(--paper);
  border-color: #c7d9cb;
  border-radius: 21px;
  box-shadow: var(--shadow);
}

/* Explanations remain visually quieter than selectable cards. */
.subtleNote, .introLearnBody {
  background: rgba(255, 254, 250, .57);
  border: 1px solid rgba(138, 160, 143, .20);
  border-radius: 17px;
  box-shadow: none;
}
.perspectiveGuide, .agencyGuide {
  background: #eaf1e9;
  border-color: #d6e5da;
}
.customInvite {
  background: #f2ece3;
  border-color: #e2d8ca;
}
.customInvite .btn.sec { background: var(--paper); border-color: #dacdbc; }
.status {
  background: rgba(232, 240, 233, .83);
  border: 1px solid rgba(138, 160, 143, .15);
  border-radius: 15px;
}
.context { background: var(--soft); border-left-color: #a3c3aa; }
.memoryPlanField { background: var(--paper); border-color: var(--line); }
.stepNo, .memoryRoadmapItem > span, .memoryPlanNumber { background: var(--wash); }
.shiftResult .arrow { color: var(--brand); }

.frontDoorChoices .specificCategory {
  border-radius: 19px;
  background: var(--paper);
  box-shadow: 0 6px 22px rgba(43, 68, 53, .07);
}
.introCompact h1 { max-width: 11ch; }
.introCompact .frontDoorPrimary { margin-top: 23px; }

/* The spoken step is the focus, not another long information card. */
.pastAudioProgress {
  background: var(--paper);
  border: 1px solid #dbe6dc;
  border-radius: 19px;
  box-shadow: var(--shadow);
  padding: 17px 18px 14px;
  margin: 21px 0 19px;
}
#app .pastAudioProgress input[type="range"]::-webkit-slider-runnable-track {
  background: #dce8df;
}
#app .pastAudioProgress input[type="range"]::-webkit-slider-thumb {
  background: var(--brand);
}
#app .pastAudioTimes { color: var(--muted); }
#app .pastAudioAction { border-radius: 18px; }
#pastAudioRating { padding-top: 16px; border-top: 1px solid var(--line); margin-top: 24px; }

button:focus-visible, summary:focus-visible, input:focus-visible, a:focus-visible {
  outline-color: #82a993;
}

@media (max-width: 480px) {
  .w { padding-left: 19px; padding-right: 19px; }
  .appTop { margin-bottom: 19px; }
  .introCompact h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .ppick { padding: 18px; }
  .pastAudioProgress { padding: 15px 16px 12px; }
}

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


/* Soft Natural welcome — visible design, not just a palette adjustment. */
.w:has(.softWelcomeHero) {
  max-width: 540px;
  padding-top: calc(18px + env(safe-area-inset-top));
}
.w:has(.softWelcomeHero) .appTop { display: none; }

.softWelcomeHero {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(530px, 78dvh, 700px);
  border-radius: 30px;
  border: 1px solid rgba(116, 142, 120, .24);
  padding: clamp(38px, 7vh, 55px) 26px 27px;
  background-color: #f6efe1;
  background-image:
    linear-gradient(180deg,
      rgba(255, 251, 240, .92) 0%,
      rgba(255, 250, 238, .60) 27%,
      rgba(255, 250, 238, .02) 57%,
      rgba(18, 64, 47, .21) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  box-shadow: 0 20px 52px rgba(42, 72, 55, .14);
}
.softWelcomeEmblem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 67px;
  margin-bottom: 7px;
}
.softWelcomeEmblem svg { width: 53px; height: 61px; }
.introCompact .softWelcomeHero h1 {
  max-width: none;
  color: #233d34;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.15rem, 12vw, 4.8rem);
  font-weight: 400;
  line-height: 1.03;
  text-align: center;
  letter-spacing: -.048em;
  margin: 0 0 16px;
  text-wrap: balance;
  text-shadow: 0 1px 13px rgba(255, 251, 239, .24);
}
.introCompact .softWelcomeHero .softWelcomePromise {
  margin: 0;
  text-align: center;
  color: #42574e;
  font-size: 1.02rem;
  line-height: 1.48;
  font-weight: 400;
  letter-spacing: .004em;
}
.softWelcomePromise span { display: block; }

.introCompact .softWelcomeHero .frontDoorPrimary {
  display: block;
  width: 100%;
  max-width: 370px;
  min-height: 59px;
  margin: auto 0 0;
  border: 1px solid rgba(244, 250, 243, .56);
  border-radius: 19px;
  background: rgba(60, 109, 87, .97);
  color: white;
  font-size: 1.02rem;
  font-weight: 650;
  box-shadow: 0 12px 31px rgba(25, 74, 53, .23);
}
.introCompact .softWelcomeHero .frontDoorPrimary:active { background: #2f5a47; }

.introOverview {
  margin: 19px 0 14px;
  padding: 0;
  border: 1px solid #dfe6dc;
  background: rgba(255, 254, 249, .84);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 5px 18px rgba(43, 68, 53, .04);
}
.introOverview summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 19px;
  color: #365b4a;
  cursor: pointer;
  font-weight: 650;
  font-size: .98rem;
}
.introOverview summary::-webkit-details-marker { display: none; }
.introOverview summary::after {
  content: "+";
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 400;
  color: #648373;
}
.introOverview[open] summary::after { content: "−"; }
.introOverviewBody {
  border-top: 1px solid #e0e8e0;
  padding: 16px 19px 7px;
}
.introCompact .introOverviewBody p {
  font-size: .95rem;
  line-height: 1.58;
  margin-bottom: 12px;
}
.introCompact > .introLearn { max-width: 100%; padding: 0 4px; }

/* Echo the welcome illustration on the choice screen without altering choices. */
.frontDoorChoices::before {
  content: "";
  display: block;
  height: clamp(105px, 18vw, 165px);
  margin: 0 0 21px;
  border-radius: 21px;
  background-image:
    linear-gradient(180deg, rgba(250, 246, 235, .05), rgba(34, 79, 56, .19)),
    url("soft-natural-landscape.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 64%;
  box-shadow: 0 8px 26px rgba(41, 81, 58, .08);
}
.w:has(.frontDoorChoices) h2 {
  font-size: clamp(1.95rem, 6.4vw, 2.5rem);
  margin-bottom: 17px;
}
.frontDoorChoices .specificCategory {
  border: 1px solid #d4e1d8;
  box-shadow: 0 6px 23px rgba(40, 78, 56, .085);
}
.frontDoorChoices .specificCategory span { color: #2f4c3c; }
.frontDoorChoices .generalCategory {
  background: #eaf1e9;
  border-color: #bcd4c3;
}

/* Let the spoken step have a stronger, recognisable audio treatment. */
#app:has(.pastAudioProgress) > h2 {
  font-size: clamp(1.9rem, 6vw, 2.4rem);
}
#app .pastAudioProgress {
  padding: 26px 22px 17px;
  border-radius: 24px;
  background: linear-gradient(156deg, #e5eee6 0%, #f9faf3 72%);
  border-color: #bfd2c4;
  box-shadow: 0 12px 30px rgba(43, 75, 52, .12);
}
#app .pastAudioAction {
  min-height: 70px;
  border-radius: 21px;
  font-size: 1.1rem;
}

@media(max-width: 480px) {
  .w:has(.softWelcomeHero) {
    padding: calc(12px + env(safe-area-inset-top)) 12px calc(48px + env(safe-area-inset-bottom));
  }
  .softWelcomeHero {
    min-height: clamp(515px, 79dvh, 660px);
    padding: 39px 22px 21px;
    border-radius: 25px;
  }
  .introCompact .softWelcomeHero h1 { font-size: clamp(3.1rem, 12.6vw, 4rem); }
  .introOverview { margin-left: 5px; margin-right: 5px; }
  .frontDoorChoices::before { height: 117px; }
}

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


/* Shared selectable-versus-explanatory surface tokens.
   All suggested, additional, or alternative perspective cards use the same
   surface and selection treatment across modules. Later JS-injected module
   styles have lower specificity than the deliberately scoped #app rules. */

/* Suggestions and alternative perspectives, including dynamically expanded
   choices in relationship, memory, guilt, anger, and performance routes. */
#app .card.pcard,
#app .sentenceOptions .opt,
#app .variantList .opt,
#app .opt,
#app .performanceStateChoice,
#app .finishFeedbackChoice {
  background: var(--ci-perspective-bg);
  border-color: var(--ci-perspective-border);
  box-shadow: var(--ci-perspective-shadow);
  color: var(--ink);
}
#app .card.pcard,
#app .opt,
#app .finishFeedbackChoice { border-radius: 19px; }
#app .card.pcard,
#app .sentenceOptions .opt { border-width: 1.5px; border-style: solid; }
#app .card.pcard .ppick {
  width: 100%;
  background: transparent;
  color: var(--ink);
}
#app .card.pcard .ppick:active,
#app .opt:active,
#app .finishFeedbackChoice:active {
  background: #f3f7f1;
}
#app .card.pcard.selected,
#app .opt[aria-pressed="true"],
#app .finishFeedbackChoice.selected {
  background: var(--ci-perspective-bg);
  border-color: var(--ci-perspective-selected);
  box-shadow: 0 0 0 1px var(--ci-perspective-selected) inset,
              0 8px 24px rgba(43, 79, 57, .13);
}
#app .pdetails,
#app .choicePanel { border-color: var(--ci-perspective-border); }
#app .choicePanel { background: #f0f5ee; }

/* Ordinary selectable category cards share the perspective card surface.
   The highlighted general-calming entry remains a deliberate navigation cue. */
#app .specificCategory:not(.generalCategory) {
  background: var(--ci-perspective-bg);
  border-color: var(--ci-perspective-border);
  box-shadow: var(--ci-perspective-shadow);
  border-radius: 19px;
}
#app .specificCategory.active:not(.generalCategory) {
  border-color: var(--ci-perspective-selected);
}

/* Information is clearly different from an actionable perspective.
   This also corrects routes that assign route-specific green/beige backgrounds
   or render an explanation in a generic .card. */
#app .subtleNote,
#app .introLearnBody,
#app .griefReflection {
  background: var(--ci-explanation-bg);
  border: 1px solid var(--ci-explanation-border);
  box-shadow: none;
  border-radius: 17px;
}
#app .perspectiveGuide,
#app .agencyGuide,
#app .guiltPreamble,
#app .worryPreamble,
#app .confidencePreamble,
#app .performancePreamble,
#app .relationshipPreamble,
#app .pastExplanation,
#app .worryActionInvite,
#app .categoryTemporaryPermission,
#app .griefPermission,
#app .customInvite {
  background: var(--ci-explanation-bg);
  border-color: var(--ci-explanation-border);
  box-shadow: none;
}
#app .customInvite .btn.sec {
  background: var(--wash);
  border-color: #cbdad0;
  color: var(--brand-dark);
}

/* Small choice widgets must remain clear but need not become heavy cards. */
#app .roundLengthChoice,
#app .finishReuseChoices .finishFeedbackChoice {
  background: var(--ci-perspective-bg);
  border-color: var(--ci-perspective-border);
}


/* Unified front-door category cards.
   The General, Grief, Relationships, Past and other category buttons may be
   wired by different modules; their home-screen styling is intentionally one
   component. The screens they lead to keep their current individual designs. */
#app .frontDoorChoices .specificCategory,
#app .frontDoorChoices .specificCategory.active,
#app .frontDoorChoices .specificCategory.generalCategory,
#app .frontDoorChoices .specificCategory.active:not(.generalCategory) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 86px;
  padding: 17px 18px;
  text-align: left;
  background: var(--ci-perspective-bg);
  border: 1.5px solid var(--ci-perspective-border);
  border-radius: 19px;
  color: var(--ink);
  box-shadow: var(--ci-perspective-shadow);
  opacity: 1;
}
#app .frontDoorChoices .specificCategory span {
  display: block;
  width: 100%;
  font-size: 1.03rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
}
#app .frontDoorChoices .specificCategory small,
#app .frontDoorChoices .specificCategory.active small,
#app .frontDoorChoices .specificCategory.generalCategory small {
  display: block;
  font-size: .85rem;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  color: var(--muted);
  overflow-wrap: break-word;
}
#app .frontDoorChoices .specificCategory:active {
  background: #f3f7f1;
  border-color: var(--brand);
}
/* Keep the underlying intro words on their own familiar screen. */
.introCompact > .frontDoorPrimary { margin-top: 22px; }
.introCompact .softWelcomeBack {
  margin-top: 20px;
  color: var(--brand-dark);
}


/* Centred intro title: same Georgia family as scenic welcome,
   with a smaller scale for the explanatory screen. Body text stays left aligned. */
#app .introCompact > h1 {
  max-width: 16ch;
  margin: 4px auto 23px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 7.8vw, 3.05rem);
  letter-spacing: -.035em;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}
@media (max-width: 480px) {
  #app .introCompact > h1 {
    font-size: clamp(2.1rem, 8.4vw, 2.7rem);
    margin-bottom: 19px;
  }
}


/* Photographic welcome image. Do not layer the old SVG landscape beneath it:
   the SVG can display momentarily before the photograph finishes loading. */
.w:has(.softWelcomeHero) {
  width: 100%;
  max-width: 540px;
  padding: 0 0 calc(26px + env(safe-area-inset-bottom));
}
#app .softWelcomeHero {
  box-sizing: border-box;
  min-height: 100svh;
  padding: calc(68px + env(safe-area-inset-top)) 25px calc(33px + env(safe-area-inset-bottom));
  border: none;
  border-radius: 0 0 28px 28px;
  background-color: #f8e9d4;
  background-image:
    /* Light, localised tint over the bright sun and its glare in the photograph. */
    radial-gradient(ellipse 59% 28% at 14% 57%, rgba(57,69,57,.56) 0%, rgba(80,81,67,.28) 48%, rgba(85,82,67,.09) 75%, transparent 100%),
    linear-gradient(180deg, rgba(255,252,243,.14) 0%, rgba(255,249,235,.02) 53%, rgba(26,57,40,.06) 75%, rgba(7,30,22,.45) 100%),
    url("soft-natural-hero.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 15px 42px rgba(36,61,47,.16);
}
.softWelcomeEmblem {
  width: 65px;
  height: 66px;
  margin-bottom: 10px;
}
.softWelcomeEmblem svg { width: 54px; height: 62px; }
#app .introCompact .softWelcomeHero h1 {
  max-width: none;
  color: #102f28;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.1rem, 11vw, 4.35rem);
  letter-spacing: -.045em;
  line-height: 1.03;
  font-weight: 400;
  margin: 0 0 22px;
  text-align: center;
}
#app .introCompact .softWelcomeHero .softWelcomePromise {
  max-width: 390px;
  color: #263e36;
  font-size: clamp(.98rem, 3.9vw, 1.12rem);
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 11px rgba(255,244,222,.45);
}
#app .introCompact .softWelcomeHero .frontDoorPrimary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  max-width: 390px;
  min-height: 67px;
  margin: auto 0 0;
  padding: 16px 62px;
  border-radius: 999px;
  background: rgba(88,132,109,.96);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 11px 27px rgba(20,58,42,.27);
  font-size: 1.17rem;
  font-weight: 550;
  letter-spacing: .005em;
}
.softStartArrow {
  position: absolute;
  right: 29px;
  top: 50%;
  transform: translateY(-52%);
  font-family: system-ui, sans-serif;
  font-size: 1.85rem;
  font-weight: 300;
  line-height: 1;
}
/* The landscape should feel special on the welcome screen, not repeat as a
   second banner above the category choices. */
#app .frontDoorChoices::before { display: none; }
.w:has(.softWelcomeHero) .supportFooter { display: none; }

@media (max-width: 480px) {
  .w:has(.softWelcomeHero) {
    width: 100%;
    padding: 0 0 calc(16px + env(safe-area-inset-bottom));
  }
  #app .softWelcomeHero {
    min-height: 100svh;
    border-radius: 0 0 22px 22px;
    padding: calc(63px + env(safe-area-inset-top)) 22px calc(27px + env(safe-area-inset-bottom));
  }
  #app .introCompact .softWelcomeHero h1 {
    font-size: clamp(3rem, 11.4vw, 3.9rem);
  }
}
@media (max-height: 700px) {
  #app .softWelcomeHero {
    padding-top: calc(29px + env(safe-area-inset-top));
    padding-bottom: calc(19px + env(safe-area-inset-bottom));
  }
  #app .introCompact .softWelcomeHero h1 {
    font-size: clamp(2.65rem, 10vw, 3.3rem);
    margin-bottom: 11px;
  }
  #app .softWelcomeEmblem { height: 55px; }
  #app .softWelcomeEmblem svg { height: 54px; }
  #app .introCompact .softWelcomeHero .frontDoorPrimary { min-height: 57px; }
}


/* Faithful three-screen front door (PR #19): scoped to welcome, explanation,
   and category choice. Therapeutic routes and other screens retain their
   existing Soft Natural presentation. */
.w:has(.softWelcomeHero),
.w:has(.softHow),
.w:has(.softChooserPage) {
  max-width: 540px;
}
.w:has(.softHow),
.w:has(.softChooserPage) {
  padding: calc(18px + env(safe-area-inset-top)) 22px
    calc(28px + env(safe-area-inset-bottom));
}
.w:has(.softWelcomeHero) .appTop,
.w:has(.softHow) .appTop,
.w:has(.softChooserPage) .appTop {
  display: none;
}

/* The welcome is the only photographic page; real HTML stays above the image. */
#app .softWelcomeHero {
  padding-top: clamp(80px, 12svh, 128px);
  background-position: center 54%;
}
#app .introCompact .softWelcomeHero h1 {
  font-size: clamp(2.8rem, 10.35vw, 4.25rem);
  line-height: 1.02;
  margin-bottom: 20px;
  letter-spacing: -.047em;
}
#app .introCompact .softWelcomeHero .softWelcomePromise {
  font-size: clamp(1.02rem, 4.1vw, 1.18rem);
  line-height: 1.44;
  max-width: 380px;
}
#app .introCompact .softWelcomeHero .frontDoorPrimary {
  min-height: 66px;
  background: rgba(74, 121, 100, .97);
}

/* Welcome's second screen: calm cream background, centred leaf + heading,
   original four paragraphs, and a prominent rounded bottom action. */
#app .softHow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-height: calc(100svh - 46px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 49px 3px 0;
}
.softPageBack {
  appearance: none;
  background: transparent;
  border: none;
  color: #193b31;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.softPageBack svg {
  display: block;
  width: 26px;
  height: 26px;
}
#app .softHow > .softPageBack {
  position: absolute;
  top: 1px;
  left: -4px;
}
#app .softHowLeaf {
  display: flex;
  justify-content: center;
  margin: 0 0 10px;
}
#app .softHowLeaf .softWelcomeEmblem {
  width: 63px;
  height: 67px;
  margin: 0;
}
#app .softHowLeaf .softWelcomeEmblem svg {
  width: 48px;
  height: 60px;
}
#app .introCompact.softHow > h1 {
  max-width: none;
  margin: 0 0 29px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 8.2vw, 3rem);
  line-height: 1.1;
  text-align: center;
  letter-spacing: -.035em;
  color: #102f28;
}
#app .softHowCopy {
  margin: 0;
  color: #273c34;
}
#app .softHowCopy p {
  font-size: clamp(.99rem, 3.7vw, 1.09rem);
  line-height: 1.5;
  margin: 0 0 20px;
}
#app .softHow > .frontDoorPrimary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto 0 0;
  padding: 16px 42px 16px 18px;
  min-height: 67px;
  width: 100%;
  max-width: none;
  border-radius: 999px;
  font-size: clamp(1.08rem, 4.6vw, 1.2rem);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -.006em;
  background: #4d826e;
  color: #fff;
  box-shadow: 0 10px 25px rgba(33,79,53,.14);
}
#app .softHow > .frontDoorPrimary .softStartArrow {
  right: 16px;
  font-size: 1.6rem;
}
#app .softHow > .introLearn {
  margin-top: 18px;
  padding: 0 3px;
}
#app .softHow > .introLearn summary {
  font-size: .87rem;
  color: #507162;
}

/* Category menu: same elegant header treatment, then ten matching icon cards.
   Icons, help lines, and chevrons are visual additions. The original buttons,
   label spans, data-* attributes, and module click handlers are unchanged. */
#app .softChooserPage {
  width: 100%;
}
#app .softChooserTop {
  position: relative;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app .softChooserTop .softPageBack {
  position: absolute;
  left: -4px;
  top: 3px;
}
#app .softChooserLeaf {
  display: flex;
  align-items: center;
  justify-content: center;
}
#app .softChooserLeaf .softWelcomeEmblem {
  width: 44px;
  height: 56px;
  margin: 0;
}
#app .softChooserLeaf svg {
  width: 39px;
  height: 49px;
}
#app .softChooserPage > h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.0rem, 7.3vw, 2.55rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.035em;
  color: #102f28;
  text-align: center;
  margin: 5px 0 22px;
}
#app .softChooserPage .frontDoorChoices {
  display: grid;
  gap: 8px;
  margin: 0;
}
#app .softChooserPage .frontDoorChoices .specificCategoryList {
  margin: 0;
  display: grid;
  gap: 8px;
}
#app .softChooserPage .frontDoorChoices .specificCategory,
#app .softChooserPage .frontDoorChoices .specificCategory.active,
#app .softChooserPage .frontDoorChoices .specificCategory.generalCategory,
#app .softChooserPage .frontDoorChoices .specificCategory.active:not(.generalCategory) {
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr) 19px;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 3px;
  align-content: center;
  align-items: center;
  width: 100%;
  min-height: 79px;
  padding: 12px 13px;
  margin: 0;
  text-align: left;
  border-radius: 16px;
  border: 1px solid #d9e1d8;
  background: rgba(255,254,250,.94);
  box-shadow: 0 3px 12px rgba(42, 74, 53, .065);
}
#app .softChooserPage .frontDoorChoices .specificCategory > span {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: clamp(1.02rem, 4.25vw, 1.15rem);
  font-weight: 650;
  line-height: 1.28;
  color: #1d3029;
}
#app .softChooserPage .frontDoorChoices .specificCategory > small,
#app .softChooserPage .frontDoorChoices .specificCategory.active > small {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: clamp(.86rem, 3.65vw, 1rem);
  font-weight: 400;
  line-height: 1.34;
  color: #586960;
  white-space: normal;
}
#app .softChooserPage .softCategoryBadge {
  display: flex;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: #e7eee6;
  border-radius: 50%;
  color: #3f7460;
  font-style: normal;
}
#app .softChooserPage .softCategoryBadge svg {
  width: 23px;
  height: 23px;
  display: block;
}
#app .softChooserPage .softCategoryChevron {
  display: flex;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
  color: #39705a;
  font-style: normal;
}
#app .softChooserPage .softCategoryChevron svg {
  width: 19px;
  height: 19px;
  display: block;
}
#app .softChooserPage .frontDoorChoices .specificCategory:active {
  background: #f3f7f1;
  border-color: #9db9a5;
}
@media (max-width: 390px) {
  .w:has(.softHow), .w:has(.softChooserPage) {
    padding-left: 16px;
    padding-right: 16px;
  }
  #app .softChooserPage .frontDoorChoices .specificCategory,
  #app .softChooserPage .frontDoorChoices .specificCategory.active {
    grid-template-columns: 41px minmax(0, 1fr) 17px;
    column-gap: 9px;
    padding: 10px 11px;
  }
  #app .softChooserPage .softCategoryBadge {
    width: 41px;
    height: 41px;
  }
  #app .softHowCopy p {
    margin-bottom: 16px;
  }
}
@media (max-height: 760px) {
  #app .softWelcomeHero {
    padding-top: clamp(32px, 7svh, 58px);
  }
  #app .softHow {
    padding-top: 36px;
  }
  #app .introCompact.softHow > h1 {
    margin-bottom: 20px;
  }
  #app .softHowCopy p {
    margin-bottom: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #app .softPageBack, #app .softCategoryBadge { transition: none; }
}

/* Two-pathway entry preview: reuse existing Soft Natural tones and card hierarchy. */
#app .journeyPickPage {
  min-height: min(100svh, 760px);
}
#app .journeyPickPage > h1 {
  margin-bottom: 27px;
  font-size: clamp(2.05rem, 7.4vw, 2.8rem);
}
#app .journeyChoices {
  display: grid;
  width: 100%;
  gap: 13px;
  margin: 4px 0 18px;
}
#app .journeyCard {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 21px 48px 22px 22px;
  border-radius: 21px;
  border: 1px solid var(--ci-perspective-border, #cadccf);
  background: var(--ci-perspective-bg, #fffefa);
  box-shadow: var(--ci-perspective-shadow, 0 7px 22px rgba(43,68,53,.085));
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}
#app .journeyCard:hover { border-color: #8dad9a; background: #fff; }
#app .journeyCard:focus-visible, #app .softPageBack:focus-visible {
  outline: 3px solid #4e826c;
  outline-offset: 3px;
}
#app .journeyTitle {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.42rem, 5.2vw, 1.75rem);
  line-height: 1.17;
  color: #1d4032;
  margin-bottom: 8px;
}
#app .journeyDescription {
  display: block;
  max-width: 380px;
  color: #50665a;
  font-size: clamp(1rem, 3.8vw, 1.08rem);
  line-height: 1.45;
}
#app .journeyArrow {
  position: absolute;
  right: 17px;
  top: calc(50% - 15px);
  color: #4a7f68;
  font-size: 1.6rem;
}
#app .journeyBadge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 4px 9px;
  font: 600 .7rem/1.15 system-ui, sans-serif;
  color: #285643;
  background: #e7f1e8;
  border-radius: 99px;
}
#app .journeyReassure {
  font-size: .93rem;
  line-height: 1.5;
  color: #63796c;
  text-align: center;
  margin: 0 4px 14px;
}
#app .journeyLearn {
  width: 100%;
  color: #4e6758;
  font-size: .94rem;
  margin: 0 0 16px;
}
#app .journeyLearn summary {
  color: #416b5d;
  cursor: pointer;
  text-align: center;
  padding: 11px 4px;
}
#app .journeyLearn p {
  margin: 8px 0 0;
  line-height: 1.57;
  background: var(--ci-explanation-bg, #edf2ea);
  border-radius: 15px;
  padding: 16px 17px;
}
#app .journeyPickPage .softPageBack,
#app .journeySubPage .softPageBack {
  font-size: 29px;
  line-height: 1;
}
#app .journeySubPage > h2 { margin-bottom: 12px; }
#app .journeyLead {
  color: #536b5e;
  text-align: center;
  line-height: 1.48;
  font-size: 1.04rem;
  margin: 0 0 24px;
}
#app .journeyPreviewNotice {
  margin: 23px 0 8px;
  line-height: 1.5;
  font-size: .94rem;
}
@media (max-width: 480px) {
  #app .journeyPickPage { min-height: 100svh; }
  #app .journeyCard { padding: 20px 43px 20px 19px; }
  #app .journeyPickPage > h1 { margin-bottom: 22px; }
}

/* Deeper route return guidance is an explanation, not a selectable action. */
#app .journeyLead + .journeyReturnNote {
  margin: -8px 0 23px;
  padding: 15px 18px;
  background: var(--ci-explanation-bg, #edf2ea);
  border: 0;
  box-shadow: none;
  color: #496052;
}
#app .journeyReturnNote p {
  font-size: .99rem;
  line-height: 1.5;
  margin: 0;
}
/* The bottom Back action stays in place; the matching top control is a shortcut. */
#app button.navBackTop {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 9px 7px 3px;
  margin: -7px 0 12px;
  color: #345f4d;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
#app button.navBackTop:focus-visible {
  outline: 3px solid #4e826c;
  outline-offset: 3px;
  border-radius: 6px;
}
@media (min-width: 680px) {
  #app button.navBackTop {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
}

/* Navigation on longer choice screens: a clean top arrow and a clear but quiet
   lower Back action. The lower button duplicates the top arrow's exact route. */
#app .softBottomBack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  margin: 23px 0 8px;
  padding: 10px 17px;
  border: 1px solid rgba(97,137,115,.36);
  border-radius: 13px;
  background: rgba(255,253,248,.85);
  color: #345f4d;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}
#app .softBottomBack:focus-visible {
  outline: 3px solid #4e826c;
  outline-offset: 3px;
}
#app .softBottomBack:active {background: rgba(226,235,224,.92);}
#app button.navBackTop {font-size: 1.85rem;line-height: 1;min-width: 44px;justify-content: flex-start;}


/* Expandable newcomer guide on the existing pathway-choice screen. */
#app .journeyLearnBody {
  margin-top: 11px;
  padding: 17px 17px 19px;
  border-radius: 17px;
  background: var(--ci-explanation-bg, #edf2ea);
  color: #314d40;
}
#app .journeyLearnBody > h2 {
  margin: 0 0 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 5vw, 1.6rem);
  line-height: 1.22;
  color: #1d4032;
}
#app .journeyLearnBody p {
  background: transparent;
  border-radius: 0;
  margin: 12px 0;
  padding: 0;
  line-height: 1.57;
  font-size: .98rem;
  text-align: left;
}
#app .journeyLearnSection {
  margin: 15px 0;
  border: 1px solid rgba(97,137,115,.33);
  border-radius: 13px;
  background: rgba(255,253,248,.85);
  overflow: hidden;
}
#app .journeyLearnSection > summary {
  padding: 15px 16px;
  color: #275b46;
  font-size: 1.05rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
#app .journeyLearnSection > summary:focus-visible {
  outline: 3px solid #4e826c;
  outline-offset: -3px;
}
#app .journeyLearnSection[open] > summary {
  border-bottom: 1px solid rgba(97,137,115,.25);
}
#app .journeyLearnSectionBody {
  padding: 1px 16px 15px;
}
#app .journeyLearnSectionBody h3 {
  margin: 18px 0 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: normal;
  color: #1d4032;
}
#app .journeyLearnBody .journeyLearnClosing {
  margin: 17px 1px 0;
  color: #285643;
}

/* Make the optional newcomer guide easier to notice without competing with the main route cards. */
#app .journeyPickPage .journeyLearn > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  list-style: none;
  min-height: 54px;
  padding: 13px 17px;
  font-size: 1.07rem;
  font-weight: 600;
  color: #285b48;
  background: rgba(231,241,232,.82);
  border: 1px solid rgba(97,137,115,.33);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(43,68,53,.05);
}
#app .journeyPickPage .journeyLearn > summary::-webkit-details-marker {
  display: none;
}
#app .journeyPickPage .journeyLearn > summary::after {
  content: '＋';
  font-size: 1.14rem;
  font-weight: 400;
  color: #4a7f68;
}
#app .journeyPickPage .journeyLearn[open] > summary::after {
  content: '−';
}
#app .journeyPickPage .journeyLearn > summary:focus-visible {
  outline: 3px solid #4e826c;
  outline-offset: 3px;
}

/* Compact help for the three main approaches. Explanations remain optional. */
#app .journeyStartHelp {
  margin: 0 0 10px;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
#app .journeyStartHelp > summary {
  cursor: pointer;
  padding: 13px 16px;
  font-weight: 600;
  color: #285b48;
}
#app .journeyStartHelp > summary:focus-visible,
#app .analyticsInlineDetails > summary:focus-visible {
  outline: 3px solid #4e826c;
  outline-offset: -3px;
}
#app .journeyStartHelpBody {
  padding: 0 16px 13px;
  font-size: .96rem;
  line-height: 1.52;
}
#app .journeyStartHelpBody p { margin: 11px 0; }

/* Consent is an ordinary preparatory page, not a load-time modal. */
#app .analyticsInlineInvite {
  margin: 18px 0 18px;
  padding: 20px;
  border-radius: 17px;
}
#app .analyticsInlineInvite h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 5vw, 1.8rem);
  line-height: 1.23;
  color: #234c3b;
  margin: 0 0 14px;
}
#app .analyticsInlineInvite p { margin: 12px 0; line-height: 1.55; }
#app .analyticsInlineDetails {
  margin: 18px 0;
  border-top: 1px solid #cedfd1;
  border-bottom: 1px solid #cedfd1;
  padding: 2px 0;
}
#app .analyticsInlineDetails > summary {
  color: #285b48;
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
}
#app .analyticsInlineDetails p { font-size: .94rem; }
#app .analyticsInlineActions {
  display: grid;
  gap: 9px;
  margin: 18px 0 11px;
}
#app .analyticsInlineActions .btn {
  width: 100%;
  margin: 0;
}