/* Friendly Coach — the approved October look. Loaded last on every page so it
   restyles the older layers without rewriting them: warm off-white, one green,
   sunny help bubbles, pastel goal tiles, big friendly numbers and no map lines. */

/* Tiles: each goal and category gets one pastel surface and an accent. */
.tile-mint{--tile:var(--tile-mint);--tile-ink:var(--line-ns)}
.tile-butter{--tile:var(--tile-butter);--tile-ink:var(--line-ew)}
.tile-sky{--tile:var(--tile-sky);--tile-ink:var(--line-ne)}
.tile-peach{--tile:var(--tile-peach);--tile-ink:var(--line-cc)}
.tile-lilac{--tile:var(--tile-lilac);--tile-ink:var(--line-dt)}
.tile-aqua{--tile:var(--tile-aqua);--tile-ink:var(--line-te)}
.tile-rose{--tile:var(--tile-rose);--tile-ink:var(--line-jr)}
.tile-orchid{--tile:var(--tile-orchid);--tile-ink:var(--line-cr)}
body{--tile:var(--tile-mint);--tile-ink:var(--brand)}
body[data-page=cpf],[data-category=cpf]{--tile:var(--tile-ns);--tile-ink:var(--line-ns)}
body[data-page=money],[data-category=money]{--tile:var(--tile-ew);--tile-ink:var(--line-ew)}
body[data-page=property],[data-category=property]{--tile:var(--tile-ne);--tile-ink:var(--line-ne)}
body[data-page=tax],[data-category=tax]{--tile:var(--tile-cc);--tile-ink:var(--line-cc)}
body[data-page=life],[data-category=life]{--tile:var(--tile-dt);--tile-ink:var(--line-dt)}
body[data-page=invest],[data-category=invest]{--tile:var(--tile-te);--tile-ink:var(--line-te)}
body[data-page=protect],[data-category=protect]{--tile:var(--tile-jr);--tile-ink:var(--line-jr)}

/* Base type */
body{background:var(--paper);color:var(--ink);font-family:'Figtree',system-ui,sans-serif;font-size:1rem;line-height:1.6;letter-spacing:0}
h1,h2,h3,.logo,.headline-value,.val{font-family:'Bricolage Grotesque','Figtree',sans-serif;letter-spacing:-.02em}
h1{font-weight:800;font-size:clamp(2rem,5vw,2.9rem);line-height:1.08;letter-spacing:-.03em}
h2{font-weight:700;line-height:1.15}
h3{font-weight:700;line-height:1.2}
.eyebrow,.mono{font-family:'Figtree',sans-serif}
.eyebrow{font-size:.875rem;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--muted)}
a{text-underline-offset:3px}
.text-link{color:var(--brand);font-weight:700}
.coach-icon,.nav-goal>a>svg,.path-strip-icon,.goal-group-icon,.goal-chip-icon,.tab-icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

/* No transit-map motifs: dots, route markers, map lines and category bars are retired. */
.dot,.route,.line-map,.category-nav,.nav-line-title::before,.nav-panel li[class]>a::before,.nav-mega li::before{display:none!important}
.nav-mega ul{border-left:0!important;margin-left:0!important;padding-left:0!important}

/* Buttons */
.btn{border-radius:var(--radius-btn);font-weight:700;font-size:.9375rem;padding:12px 20px;border:1px solid var(--hair);box-shadow:none}
.btn.primary,.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-text)}
.btn.primary:hover,.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn.secondary,.secondary{background:var(--card);color:var(--ink);border-color:var(--field-border)}
.btn.secondary:hover{border-color:var(--brand);color:var(--brand)}
input[type=number],input[type=text],input[type=email],input[type=search],select{border-radius:12px;background:var(--card);font-family:'Figtree',sans-serif}
input[type=number]{font-family:'Figtree',sans-serif;font-variant-numeric:tabular-nums;font-weight:600}

/* Help bubbles: the "?" next to a term. Wave-one tooltips can reuse .help-bubble. */
.help-bubble,.tooltip-trigger,.term-help{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;min-width:22px;border-radius:50%;border:0;background:var(--sun);color:var(--sun-ink);font:800 .875rem/1 'Figtree',sans-serif;vertical-align:middle;cursor:help}
button.help-bubble,button.tooltip-trigger,button.term-help{position:relative}
button.help-bubble::after,button.tooltip-trigger::after,button.term-help::after{content:"";position:absolute;inset:-11px}

/* Header */
/* Solid in both themes so page text never shows through the sticky header (review 7 Oct 2026). */
.site-header{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--hair)}
.header-inner{min-height:72px}
.logo{display:inline-flex;align-items:center;gap:0;font-weight:800;font-size:1.375rem;letter-spacing:-.03em;color:var(--ink)}
.logo span:not(.logo-mark){color:var(--brand)}
.logo small{font-family:'Figtree',sans-serif;font-weight:600;font-size:.875rem;color:var(--muted);letter-spacing:0;margin-left:1px}
svg.logo-mark{width:34px;height:34px;margin-right:5px;flex:none;vertical-align:middle;overflow:visible}
span.logo-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-right:9px;border-radius:11px;background:var(--sun);color:var(--sun-ink)!important;font:800 19px/1 'Bricolage Grotesque',sans-serif;letter-spacing:0}
.site-header .main-nav .nav-top{font-weight:700;font-size:1rem;color:var(--ink);padding:9px 10px;border-radius:10px}
.site-header .main-nav .nav-top:hover,.nav-item.is-open>.nav-top{color:var(--brand);background:var(--soft)}
.site-header .main-nav .nav-top[aria-current=page]{color:var(--brand);background:var(--soft)}
/* Small laptops (961-1199px): six top items, Join Free and Sign In stay on one row. */
@media(min-width:961px) and (max-width:1199px){.site-header .header-inner{gap:12px}.site-header .nav-list{column-gap:4px}.site-header .main-nav .nav-top{padding:9px 7px}.site-header .nav-toggle{width:22px}}
@media(min-width:961px) and (max-width:1060px){.site-header .main-nav .nav-top{padding:9px 5px;font-size:.9375rem}.site-header .logo{font-size:1.25rem}.site-header svg.logo-mark{width:30px;height:30px}}
.member-nav-link{display:inline-flex!important;align-items:center;min-height:44px;padding:9px 16px!important;border-radius:var(--radius-btn)!important;background:var(--brand);color:var(--brand-text)!important;font-weight:700!important}
.member-nav-link:hover{background:var(--brand-hover)}
.member-login-link{border-radius:var(--radius-btn);font-size:.875rem;padding:8px 12px;font-weight:700}
.nav-panel{border:0;border-radius:var(--radius);box-shadow:var(--shadow-md)}
.site-header .main-nav .nav-panel a{font-weight:500}
.nav-group-title,.nav-guides p{font:700 .875rem/1.4 'Figtree',sans-serif;letter-spacing:.04em}
/* Tools menu: one column per life goal with question names. */
.nav-item-tools .nav-panel{padding:22px!important}
.nav-goals-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nav-goal{padding:12px 12px 10px;border-radius:16px;background:var(--tile)}
.site-header .main-nav .nav-panel .nav-goal>a{align-items:center;gap:10px;font:700 1.0625rem/1.2 'Bricolage Grotesque',sans-serif;color:var(--ink);padding:4px 6px 8px}
.nav-goal>a>svg{width:26px;height:26px;padding:4px;border-radius:9px;background:var(--card);color:var(--tile-ink)}
.nav-goal ol{list-style:none;margin:0;padding:0;counter-reset:step}
.nav-goal ol li{counter-increment:step}
.site-header .main-nav .nav-goal ol a::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;height:20px;margin-top:1px;border-radius:50%;background:var(--card);color:var(--ink);font:700 .8125rem/1 'Figtree',sans-serif}
.site-header .main-nav .nav-goal a{min-height:34px;padding:5px 6px;font-size:.875rem}
.site-header .main-nav .nav-goal a:hover{background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--ink)}
.nav-goal>ul{margin:4px 0 0!important;padding:6px 0 0!important;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);list-style:none}
.site-header .main-nav .nav-goal>ul a{font-size:.875rem;color:var(--muted)}
.nav-goal>p{margin:8px 0 0;padding:8px 8px 0;border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent);font:700 .8125rem/1.3 'Figtree',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.nav-goal>p+ul{margin-top:0!important;padding-top:0!important;border-top:0}
/* Laptop Tools menu taller than the window: it scrolls inside, and the quiz and All Tools links stay in view. */
.nav-item-tools .nav-panel{overscroll-behavior:contain}
/* Tools menu on desktop (owner request, 4 Oct 2026): tiles size to their content (no stretched colour
   blocks) and the six goals fit a 3×2 grid at 1280×800 without scrolling. */
.nav-item-tools .nav-goals-grid{align-items:start}
.site-header .main-nav .nav-panel .nav-goal>.nav-all{margin:2px 0 0;padding:5px 6px;min-height:0;font:600 .875rem/1.3 'Figtree',sans-serif;color:var(--brand)}
@media(min-width:961px){
  .nav-item-tools .nav-panel{max-height:calc(100vh - 80px);padding:16px 18px!important}
  .nav-item-tools .nav-goals-grid{gap:10px}
  .nav-item-tools .nav-goal{padding:8px 8px 4px}
  .site-header .main-nav .nav-item-tools .nav-panel .nav-goal>a:first-child{padding:2px 6px 4px;font-size:1rem}
  .site-header .main-nav .nav-item-tools .nav-goal li a{gap:8px;min-height:0;padding:3px 6px;line-height:1.3}
  .nav-item-tools .nav-goal>p{margin-top:3px;padding:5px 6px 1px;font-size:.75rem}
}
@media(min-width:961px){.nav-item-tools .nav-browse{position:sticky;bottom:-16px;z-index:1;margin:10px -18px -16px!important;padding:8px 18px;background:var(--card);border-top:1px solid var(--hair);box-shadow:0 -8px 16px -12px rgba(0,0,0,.25)}}
.nav-browse{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.site-header .main-nav .nav-panel .nav-quiz{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--sun);color:var(--sun-ink);font-weight:700}
.site-header .main-nav .nav-panel .nav-quiz:hover{background:var(--sun);color:var(--sun-ink);filter:brightness(.97)}
.nav-guides{grid-template-columns:1fr 1.4fr}

/* Bottom tab bar on phones */
.tab-bar{display:none}
@media(max-width:767px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--hair);box-shadow:0 -4px 18px rgba(23,51,44,.08)}
  .tab-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:12px;color:var(--muted);font:700 .875rem/1.1 'Figtree',sans-serif;text-decoration:none}
  .tab-bar a[aria-current=page]{color:var(--brand);background:var(--soft)}
  .tab-icon{width:24px;height:24px}
  .mobile-action{bottom:calc(64px + env(safe-area-inset-bottom))!important}
  .shortlist-tray{bottom:calc(76px + env(safe-area-inset-bottom))!important}
  .session-expiry-banner{bottom:calc(80px + env(safe-area-inset-bottom))!important}
  .footer{padding-bottom:24px}
}
@media print{.tab-bar{display:none!important}}

/* Cards and surfaces */
.input-panel,.result-panel,.tool-link,.journey-card,.goal-card,.related,.newsletter,.webinar-band,.start-panel,.directory-controls,.empty,.notice{border-radius:var(--radius)}
.input-panel,.result-panel,.tool-link,.journey-card,.related,.directory-controls{border:1px solid var(--hair);background:var(--card);box-shadow:var(--shadow-sm)}
.tool-link:hover,.journey-card:hover{border-color:var(--brand);box-shadow:var(--shadow-md)}
.tool-link .go{color:var(--brand)}
.tool-link-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:14px;border-radius:14px;background:var(--tile);color:var(--tile-ink)}
.tool-link-icon svg{width:26px;height:26px}
.discovery-official,.tool-official-name{margin:-6px 0 10px;font-size:.875rem;font-weight:600;color:var(--muted)}
.notice{border-left:0;background:var(--tile-butter)}
.breadcrumb{color:var(--muted)}
.intro p{color:var(--muted)}
.updated{font-size:.875rem}

/* Homepage */
.coach-hero{padding:40px 0 8px;text-align:center}
.coach-hero h1{font-size:clamp(2.2rem,6vw,3.6rem);margin:6px auto 12px;max-width:16ch}
.coach-hero .hero-description{max-width:34rem;margin:0 auto 28px;font-size:1.125rem;color:var(--muted)}
/* Review 13 Oct (home-nav top 3): one trust line under the hero, where a visitor lands. */
.coach-hero .hero-description:has(+.hero-trust){margin-bottom:10px}
.coach-hero .hero-trust{max-width:34rem;margin:0 auto 24px;color:var(--ink);font-size:.9375rem;font-weight:600;line-height:1.5}
.coach-hero .goal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:16px;text-align:left}
.goal-card{position:relative;display:flex;align-items:center;gap:16px;min-height:112px;padding:20px;border:0;border-radius:var(--radius);background:var(--tile);color:var(--ink);text-decoration:none;box-shadow:none;transition:transform .15s ease,box-shadow .15s ease}
.goal-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border:0}
.goal-card h3{margin:0 0 4px;font-size:1.3125rem}
.goal-card p{margin:0;font-size:.875rem;line-height:1.4;color:var(--muted)}
.goal-card.home-solo{margin:14px 0 0;min-height:0}

.goal-card-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 56px;height:56px;border-radius:16px;background:var(--card);color:var(--tile-ink)}
.goal-card-icon svg{width:30px;height:30px}
.goal-card-arrow{margin-left:auto;font-size:1.375rem;font-weight:700;color:var(--ink)}
.coach-hero-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;margin:26px 0 0}
.coach-hero-links .btn.secondary{border-color:transparent;background:var(--sun);color:var(--sun-ink)}
.coach-quiz{max-width:760px;margin-inline:auto!important;padding:28px;border-radius:24px;background:var(--card);box-shadow:var(--shadow-sm);scroll-margin-top:96px}
.coach-quiz-intro{text-align:center;margin-bottom:12px}
.coach-quiz-intro h2{font-size:1.875rem;margin:10px 0 6px}
.coach-quiz-intro p{color:var(--muted);margin:0}
.coach-quiz-intro .help-bubble{width:44px;height:44px;font-size:1.5rem}
.goal-quiz fieldset{margin:0 0 18px;padding:0;border:0}
.goal-quiz legend{margin-bottom:10px;font:700 1.1875rem/1.3 'Bricolage Grotesque',sans-serif}
.quiz-num{display:inline-block;margin-right:6px;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--muted);font:700 .875rem/1.6 'Figtree',sans-serif;vertical-align:2px}
.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quiz-options label{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px;border:1.5px solid var(--hair);border-radius:14px;background:var(--paper);font-size:.9375rem;font-weight:600;cursor:pointer}
.quiz-options label:has(input:checked){border-color:var(--brand);background:var(--soft)}
.quiz-options input{width:20px;height:20px;margin:0;accent-color:var(--brand);flex:0 0 auto}
.goal-quiz>.btn{width:100%;min-height:52px;font-size:1.0625rem}
/* Next looks inactive until the question has an answer (it still explains itself if pressed). */
.goal-quiz button[type=submit].is-waiting{opacity:.55}
.goal-quiz .quiz-back{display:block;margin:12px auto 0;padding:8px 12px;border:0;background:none;color:var(--muted);font-weight:600;min-height:44px}
.quiz-result:not(:empty){margin-top:16px}
.quiz-pick{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:var(--radius);background:var(--tile)}
.quiz-pick h3{font-size:1.625rem;margin:0 0 6px}
.quiz-pick p{margin:0 0 10px}
.quiz-pick-label{font-weight:700;color:var(--muted)}
.popular-tool-list{border:0!important;display:grid;gap:10px}
.popular-tool-list a{grid-template-columns:40px minmax(0,1fr) 28px!important;border:1px solid var(--hair)!important;border-radius:16px;background:var(--card);padding:14px 16px!important;box-shadow:var(--shadow-sm)}
.popular-tool-list span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--sun);color:var(--sun-ink)!important;font:800 .9375rem/1 'Figtree',sans-serif!important}
.popular-tool-list strong{font:700 1.1875rem/1.25 'Bricolage Grotesque',sans-serif!important;min-width:0;overflow-wrap:break-word}
.popular-tool-list small{grid-column:2/3;margin-top:-6px;color:var(--muted)}
.compare-start{background:var(--tile-sky)!important;color:var(--ink)!important;border-radius:24px}
.compare-start h2{font-size:2.125rem}
.compare-start>div>p{color:var(--muted)!important}
.compare-start .start-panel{box-shadow:var(--shadow-sm)}
.segmented button{border-radius:999px;font-weight:700}
.segmented button[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:var(--brand-text)}
.trust-band{border:0!important;padding:0!important;grid-template-columns:.8fr 1.2fr!important;gap:32px!important}
.trust-band h2{font-size:2rem!important}
.trust-points{grid-template-columns:repeat(3,minmax(0,1fr))}
.trust-points>div{padding:18px;border-radius:16px;background:var(--card);box-shadow:var(--shadow-sm)}
.trust-points h3{font-size:1.125rem!important}
.trust-points p{font-size:.875rem}
.learning-strip{background:var(--tile-lilac)!important;border-radius:var(--radius)}
/* Guide cover thumbnails keep the whole stat and title: a 2:1 crop of the 3:2 cover trims only the margins; phones stack the cover above the text (review 6 Oct 2026). */
.journey-card>img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:center}
@media(max-width:700px){.journey-card{display:block}.journey-card>img{min-height:0;height:auto}}
.journey-card h3{font-size:1.25rem!important}
.membership-cta{border-radius:24px!important}

/* /tools/ directory: goal groups first, then search */
.goal-directory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:8px 0 40px}
.goal-group{padding:18px;border-radius:var(--radius);background:var(--tile)}
.goal-group-title{display:flex;align-items:center;gap:10px;margin-bottom:8px;font:700 1.25rem/1.2 'Bricolage Grotesque',sans-serif;color:var(--ink);text-decoration:none}
.goal-group-icon{width:34px;height:34px;padding:6px;border-radius:11px;background:var(--card);color:var(--tile-ink)}
.goal-group ol{margin:0;padding-left:1.4em}
.goal-group li{margin:2px 0}
.goal-group li a{display:inline;padding:2px 0;line-height:1.9;font-weight:600;color:var(--ink)}
.goal-group-also{margin:8px 0 0;font-size:.875rem;color:var(--muted)}
.goal-group-also a{color:var(--ink)}
.directory-search-title{font-size:1.625rem;margin:0 0 14px}
.directory-shortcuts{border:0!important;padding:16px 0!important}

/* Goal pages */
.goal-hero{display:flex;gap:22px;align-items:flex-start;padding:28px;border-radius:24px;background:var(--tile);margin-bottom:24px}
.goal-tip{max-width:760px;margin:-8px 0 24px}.goal-tip p{margin:0}.goal-tip a{font-weight:700;color:var(--brand)}
.goal-hero h1{margin:4px 0 8px}
.goal-hero p{color:var(--ink);max-width:36rem}
.goal-hero .eyebrow{color:var(--muted)}
.goal-hero-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 72px;height:72px;border-radius:20px;background:var(--card);color:var(--tile-ink)}
.goal-hero-icon svg{width:40px;height:40px}
.goal-hero-choice{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.goal-hero-choice .btn{flex:1 1 14rem;text-align:center;justify-content:center}
.goal-steps{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px;max-width:760px}
.goal-step{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--card);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm)}
.goal-step:hover{border-color:var(--brand)}
.goal-step-num{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;height:40px;border-radius:50%;background:var(--sun);color:var(--sun-ink);font:800 1.125rem/1 'Bricolage Grotesque',sans-serif}
.goal-step-text{display:grid;gap:2px;min-width:0}
.goal-step-text strong{font:700 19px/1.25 'Bricolage Grotesque',sans-serif}
.goal-step-text small{font-size:14px;color:var(--muted)}
.is-done>.goal-step .goal-step-num{background:var(--brand);color:var(--brand-text)}
.goal-step-done{justify-self:start;padding:2px 10px;border-radius:999px;background:var(--brand);color:var(--brand-text);font-size:.8125rem;font-weight:800}
.goal-step-arrow{margin-left:auto;font-size:1.375rem;font-weight:700;color:var(--brand)}
.goal-also h2,.goal-others h2{font-size:1.375rem}
.goal-also ul{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.goal-also a{display:grid;gap:2px;height:100%;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--hair);text-decoration:none;color:var(--ink)}
.goal-also small{color:var(--muted)}
.goal-guide{margin:0 0 16px}
.goal-guide a{font-weight:700;color:var(--brand)}
.goal-learn{display:flex;align-items:center;gap:16px;max-width:760px;margin:-12px 0 28px;padding:16px 18px;border-radius:var(--radius);background:var(--tile);color:var(--ink);text-decoration:none}
.goal-learn strong{display:block;font:700 1.1875rem/1.25 'Bricolage Grotesque',sans-serif}
.goal-learn small{display:block;margin-top:4px;font-size:.875rem;color:var(--ink)}
.goal-learn:hover strong{text-decoration:underline}
.goal-learn .course-label,.next-card .course-label{display:block;margin:2px 0 0}.goal-learn .next-card-kicker{display:block;margin-bottom:2px}.goal-course small{font-weight:700}.next-card--course{margin-bottom:10px}
.goal-chips{display:flex;flex-wrap:wrap;gap:10px}
.goal-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;background:var(--tile,var(--card));border:1px solid var(--hair);color:var(--ink);font-weight:700;text-decoration:none}
.goal-chip-icon{width:20px;height:20px;color:var(--tile-ink)}
.goal-others{margin:28px 0}

/* Tool pages: one column of three steps */
body[data-tool] main{max-width:800px}
body[data-tool] .intro{margin-bottom:18px}
body[data-tool] .intro h1{margin:14px 0 4px}
body[data-tool] .intro>p:not(.tool-official-name):not(.tool-guide-top):not(.path-strip){font-size:1.0625rem;color:var(--ink);max-width:40rem}
.tool-official-name{margin:0 0 12px;font-size:.9375rem}
.tool-guide-top{margin:-6px 0 10px}
.tool-guide-top a{font-weight:700;color:var(--brand)}
.path-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;padding:8px 14px;border-radius:14px;background:var(--tile);font-size:.875rem;color:var(--ink)}
.path-strip a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink)}
.path-strip-icon{width:20px;height:20px;color:var(--tile-ink)}
.path-strip-step{padding:1px 9px;border-radius:999px;background:var(--card);font-weight:700}
.path-strip-next{color:var(--ink)}
.path-strip-next a{font-weight:600}
.path-route{display:inline-flex;gap:2px;padding:2px;border-radius:999px;background:var(--card)}
.path-strip .path-route a{padding:2px 10px;border-radius:999px;font-weight:700;text-decoration:none;color:var(--ink)}
.path-strip .path-route a[aria-current="true"]{background:var(--brand);color:var(--brand-text)}
.route-choice{margin:0 0 20px;max-width:760px}
.route-choice h2{margin:0 0 10px}
.route-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.route-option{display:grid;gap:4px;padding:16px 18px;border:2px solid var(--hair);border-radius:var(--radius);background:var(--card);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm)}
.route-option strong{font:700 19px/1.25 'Bricolage Grotesque',sans-serif}
.route-option small{font-size:14px;color:var(--muted)}
.route-option:hover,.route-option[aria-current="true"]{border-color:var(--brand)}
.route-option[aria-current="true"] strong::before{content:'✓ ';color:var(--brand)}
.goal-route{max-width:760px}
.goal-route h2{margin:8px 0 12px}
@media(max-width:520px){.route-options{grid-template-columns:minmax(0,1fr)}}
body[data-tool] .tool-workspace{display:block}
body[data-tool] .input-panel{margin-bottom:18px}
body[data-tool] .result-column>*+*{margin-top:18px}
.tool-step{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:700 .9375rem/1.3 'Figtree',sans-serif;letter-spacing:0;color:var(--ink);text-transform:none}
h2.tool-step{font-size:1.0625rem}
.tool-step-number{display:inline-flex;align-items:center;justify-content:center;min-width:1.9em;padding:4px 9px;border-radius:999px;background:var(--sun);color:var(--sun-ink);font:800 .875rem/1.2 'Figtree',sans-serif}
body[data-tool] .input-panel h2{font-size:1.375rem}
body[data-tool] .input-panel h2.tool-step{font-size:1.0625rem}
body[data-tool] .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.result-panel{border-top:1px solid var(--hair)}
.headline{padding:22px;border-radius:16px;background:var(--tile-mint);margin-bottom:6px}
.headline .headline-lead{margin:0 0 4px;font:600 1.125rem/1.35 'Figtree',sans-serif;letter-spacing:0;text-transform:none;color:var(--ink)}
.headline-value,.result-panel .headline-value{margin:2px 0 8px;font:800 clamp(2.6rem,9vw,3.6rem)/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;color:var(--brand);text-transform:none}
.headline #headline-context{margin:0;font-size:.9375rem;color:var(--ink)}
.coach-meter{margin:10px 0 12px}
.coach-meter-track{height:14px;border-radius:999px;background:var(--card);overflow:hidden;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 25%,transparent)}
.coach-meter-fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--brand);transition:width .4s ease}
.coach-meter.is-complete .coach-meter-fill{background:linear-gradient(90deg,var(--brand),var(--brand) 85%,var(--sun))}
.coach-meter-label{margin:6px 0 0;font-size:.875rem;font-weight:700;color:var(--ink)}
.stat{background:var(--paper);border:1px solid var(--hair);border-radius:14px}
.lbl{font-size:.875rem;line-height:1.35;color:var(--muted)}
.val{font-weight:700}
.tool-next{margin:22px 0 8px;padding:22px;border-radius:var(--radius);background:var(--card);border:1px solid var(--hair);box-shadow:var(--shadow-sm)}
.next-card{display:grid;gap:4px;padding:18px 20px;border-radius:16px;background:var(--tile);color:var(--ink);text-decoration:none}
.next-card+.next-card{margin-top:12px}
.next-card:hover{box-shadow:var(--shadow-md)}
.next-card-kicker{font-size:.875rem;font-weight:700;color:var(--muted)}
.next-card strong{font:700 1.3125rem/1.25 'Bricolage Grotesque',sans-serif}
.next-card-name{font-weight:700;color:var(--ink)}
.next-guide{display:grid;gap:2px;margin-top:12px;padding:14px 4px 4px;color:var(--ink);font-weight:600;text-decoration:none;border-top:1px solid var(--hair)}
.next-guide span{font-size:.875rem;font-weight:700;color:var(--brand)}
body[data-tool] .result-column>.related[aria-label="Calculator guide"]{display:none}
.related{background:var(--card)}
.faq{max-width:none}
.faq h2{font-size:1.375rem}
.faq details{padding:0;margin:0 0 10px;border:1px solid var(--hair);border-radius:14px;background:var(--card)}
.faq summary{display:flex;align-items:center;gap:10px;padding:12px 16px;font-weight:700}
.faq summary::before{content:"?";display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;height:22px;border-radius:50%;background:var(--sun);color:var(--sun-ink);font:800 .875rem/1 'Figtree',sans-serif}
.faq details p{margin:0;padding:0 16px 14px 48px}
.assumptions{border-top:1px solid var(--hair)}
.note{font-size:.875rem;color:var(--muted)}
.result-panel.is-stale{border:2px dashed var(--brand)}
.result-panel.is-stale::before{background:var(--sun);color:var(--sun-ink)}

/* Compare, guides and hubs */
.compare-intro .eyebrow{display:none}
.compare-intro h1 span{color:var(--brand)}
.journey-intro{background:var(--tile)!important;border-radius:var(--radius)!important}
.journey-steps a{border-radius:16px;box-shadow:var(--shadow-sm)}
.journey-steps .eyebrow{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--sun);color:var(--sun-ink)}
/* Hub "Follow A Full Path" chips (review 13 Oct, home-nav-04): the ordered steps live on the goal pages. */
.journey-paths{margin:16px 0 0}.journey-paths p{margin:0 0 8px;font-weight:700}
.journey-paths ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}.journey-paths li{min-width:0}
.journey-paths a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;background:var(--tile);color:var(--ink);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.journey-paths a:hover{text-decoration:underline}

/* Footer */
.footer{background:var(--card);border-top:1px solid var(--hair)}
.footer .logo{display:inline-flex}
/* Site footer (October 2026): brand block, four link columns, then a hairline bottom bar.
   Scoped to .footer-coach so the frozen legal footer (.footer-grid) keeps its approved look. */
.footer-coach{padding-top:8px}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:28px 48px}
.footer-coach .logo{margin-bottom:10px}
.footer-tagline{margin:0;color:var(--ink);font-weight:600}
.footer-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.footer-heading{margin:0 0 6px;font:700 1rem/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em;color:var(--ink)}
.footer-coach .footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0}
.footer-coach .footer-links a{min-height:36px;padding:4px 0;line-height:1.35}
.footer-coach .footer-links a:not([aria-current=page]){color:var(--muted);text-decoration:none}
.footer-coach .footer-links a:not([aria-current=page]):hover,.footer-coach .footer-links a:not([aria-current=page]):focus-visible{color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:5px}
.footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"settings copy" "disclaimer disclaimer";align-items:center;gap:6px 24px;margin-top:28px;padding-top:14px;border-top:1px solid var(--hair)}
.footer-settings{grid-area:settings;display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px}
.footer-coach .text-size-control{margin:0;gap:6px}
.footer-coach .text-size-control button{min-width:44px}
.footer-disclaimer{grid-area:disclaimer;margin:0;color:var(--muted)}
.footer-copy{grid-area:copy;margin:0;color:var(--muted)}
@media(max-width:720px){
  /* Phones: 36px link rows clear WCAG 2.5.8 target size (24px minimum) and keep the footer compact. */
  .footer-coach{padding-top:0}
  .footer-coach .logo{margin-bottom:4px}
  .footer-top{grid-template-columns:minmax(0,1fr);gap:12px}
  /* Two balanced columns: Tools then Company on the left, Explore then Help on the right. */
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;gap:10px 16px}
  .footer-col:nth-child(1){grid-area:1/1/3/2}.footer-col:nth-child(2){grid-area:1/2/2/3}
  .footer-col:nth-child(3){grid-area:3/1/4/2}.footer-col:nth-child(4){grid-area:2/2/4/3}
  .footer-heading{margin-bottom:0}
  .footer-coach .footer-links a{min-height:36px;padding:0}
  .footer-bottom{grid-template-columns:minmax(0,1fr);grid-template-areas:"settings" "disclaimer" "copy";gap:8px;margin-top:12px;padding-top:12px}
}

/* Phones */
@media(max-width:1000px){.nav-goals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.goal-directory{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px){
  .nav-goals-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .site-header .main-nav .nav-goal a{font-size:.9375rem;min-height:44px}
  .site-header .main-nav .nav-panel .nav-goal>a{font-size:1.125rem}
}
@media(max-width:767px){
  .coach-hero{padding-top:20px;text-align:left}
  .coach-hero h1{margin-left:0;font-size:2.3rem}
  .coach-hero .hero-description{margin-left:0;font-size:1.0625rem;margin-bottom:20px}
  .coach-hero .hero-trust{margin-left:0;margin-bottom:18px}
  .coach-hero .goal-grid,.goal-directory,.goal-also ul,.trust-points{grid-template-columns:minmax(0,1fr)}
  .coach-hero .goal-grid{gap:10px}
  .goal-card{min-height:0;padding:14px 16px;gap:14px}
  .goal-card-icon{flex-basis:48px;height:48px;border-radius:14px}
  .goal-card h3{font-size:1.1875rem}
  .coach-hero-links{justify-content:flex-start}
  .coach-quiz{padding:20px 16px;border-radius:20px}
  .quiz-options{grid-template-columns:minmax(0,1fr)}
  .trust-band{grid-template-columns:minmax(0,1fr)!important}
  .goal-hero{flex-direction:column;padding:20px;gap:12px}
  .goal-hero-icon{flex-basis:56px;width:56px;height:56px}
  .goal-step{padding:14px;gap:12px}
  .goal-step-num{flex-basis:34px;height:34px;font-size:1rem}
  .goal-step-text strong{font-size:17px}
  .headline{padding:18px}
  .headline-value,.result-panel .headline-value{font-size:2.7rem}
  .tool-next{padding:18px}
  .next-card strong{font-size:1.1875rem}
  .faq details p{padding-left:16px}
}
@media(max-width:560px){
  body[data-tool] .grid{grid-template-columns:minmax(0,1fr)}
  .logo{font-size:1.1875rem}
  .logo-mark{width:30px;height:30px;margin-right:7px;font-size:17px;border-radius:10px}
  svg.logo-mark{width:32px;height:32px;margin-right:4px}
  .logo small{display:none}
}

/* One green: category accents only colour tiles and icons, never buttons, borders or numbers. */
body,body[style]{--line:var(--brand)!important;--line-ink:var(--brand)!important;--line-text:var(--brand-text)!important}
.popular-tool-list span{grid-row:1/3}.popular-tool-list b{grid-row:1/3;grid-column:3}
/* 375px header: logo, Sign In and Menu stay on one row. */
@media(max-width:430px){
  .site-header .header-inner{column-gap:6px}
  .logo{font-size:1.125rem}
  .logo-mark{width:28px;height:28px;margin-right:6px;font-size:16px}
  svg.logo-mark{width:30px;height:30px;margin-right:3px}
  .member-login-link{padding:7px 9px;font-size:.875rem;gap:4px}
  .nav-menu-toggle{padding:8px!important}
}
@media(max-width:350px){.member-login-link>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

/* Wave-one "?" toggle-tips (tool-glossary.js) in the Friendly Coach style. */
.info-tip-button{border:0!important;background:var(--sun)!important;color:var(--sun-ink)!important;font-style:normal!important;font-weight:800!important}
.info-tip-button:hover,.info-tip-button[aria-expanded=true]{background:var(--sun)!important;color:var(--sun-ink)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--sun) 40%,transparent)}
.info-tip-bubble{border:0!important;border-radius:14px!important;font-family:'Figtree',sans-serif!important}
.info-tip-bubble{background:var(--tile-butter)!important;color:var(--ink)!important}

/* First-visit prompts: homepage tour, tool hint and the save sheet. */
.tour-layer{position:fixed;inset:0;z-index:90}
.tour-spot{position:fixed;border-radius:20px;box-shadow:0 0 0 4px var(--sun),0 0 0 200vmax rgba(8,22,17,.6);pointer-events:none;transition:all .25s ease}
.tour-bubble{position:fixed;left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 32px));padding:18px 18px 14px;border-radius:18px;background:var(--card);color:var(--ink);box-shadow:0 12px 32px rgba(0,0,0,.28);transition:top .25s ease}
.tour-count{margin:0 0 2px;font-size:.875rem;font-weight:700;color:var(--muted)}
.tour-title{margin:0 0 6px;font-size:1.375rem}
.tour-title:focus{outline:none}
.tour-text{margin:0 0 14px;font-size:16px;color:var(--ink)}
.tour-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tour-dots{display:flex;gap:6px}
.tour-dots i{width:8px;height:8px;border-radius:50%;background:var(--hair)}
.tour-dots i.on{background:var(--brand)}
.tour-actions{display:flex;align-items:center;gap:6px}
.tour-skip{min-height:44px;padding:8px 12px;border:0;background:none;color:var(--muted);font-weight:700;font-size:.9375rem}
.tour-next{min-height:44px}
.tour-glow>.goal-card{box-shadow:0 0 0 3px var(--sun),var(--shadow-md)}
@media(prefers-reduced-motion:reduce){.tour-spot,.tour-bubble{transition:none}}
.coach-hint{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:10px 12px;border-radius:14px;background:var(--tile-butter);color:var(--ink)}
.coach-hint p{margin:0;flex:1;font-weight:600;font-size:.9375rem;line-height:1.45}
.coach-hint .help-bubble{margin-top:1px}
.coach-hint-close{flex:0 0 44px;height:44px;margin:-10px -8px -10px 0;border:0;background:none;color:var(--ink);font-size:1.125rem;font-weight:800}
.save-sheet{position:fixed;left:50%;bottom:0;z-index:60;transform:translateX(-50%);width:min(520px,100vw);padding:20px 20px calc(20px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:var(--card);color:var(--ink);box-shadow:0 -10px 30px rgba(0,0,0,.18);display:grid;gap:10px}
.save-sheet h2{margin:0;font-size:1.375rem}
.save-sheet-ticks{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:4px}
.save-sheet-ticks li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:var(--tile-mint);color:var(--brand);font-weight:800}
.save-sheet .btn{width:100%;min-height:50px;font-size:1rem}
.save-sheet-later{min-height:44px;border:0;background:none;color:var(--muted);font-weight:700;font-size:.9375rem}
@media(max-width:767px){.save-sheet{bottom:calc(64px + env(safe-area-inset-bottom));border-radius:22px;width:calc(100vw - 16px);padding-bottom:18px}}

/* Phone header: signed-out visitors get a green Join Free button; members see "Hi, <name>".
   Review 13 Oct (home-nav-03): phones find Sign In as the Menu's first row, and tablets (768–960) show Join Free beside Sign In. */
.member-join-link,.nav-item-signin{display:none}
@media(max-width:960px){
  .site-header:not(.is-signed-in) .member-join-link{order:2;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-radius:var(--radius-btn);background:var(--brand);color:var(--brand-text);font-weight:700;font-size:.875rem;text-decoration:none;white-space:nowrap}
  .site-header:not(.is-signed-in) .nav-item-join{display:none}
}
@media(max-width:767px){
  .site-header:not(.is-signed-in) .header-inner>.member-login-link{display:none}
  .site-header:not(.is-signed-in) .nav-item-signin{display:block;border-bottom:1px solid var(--hair)}
  .site-header .main-nav .nav-item-signin a{display:flex;align-items:center;justify-content:flex-start!important;text-align:left;width:100%;gap:8px;min-height:52px;padding:0 4px;color:var(--ink);font:600 1.125rem/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;text-decoration:none}
  .site-header .nav-item-join{display:none}
}
/* /members/: a clear sign-in card for signed-out visitors arriving from the Me tab. */
/* Signed in on phones: show "Hi, <name>" rather than a bare icon. */
/* Phone: six life goals as a 2×3 grid so all fit above the fold; blurbs hide, titles stay 16px.
   Narrower viewports (large text / zoom) keep one column of stacked cards with the blurb. */
@media(max-width:767px){
  .goal-card{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .goal-card-icon{flex-basis:auto;width:44px;height:44px}
  .goal-card-icon svg{width:26px;height:26px}
  .goal-card h3{overflow-wrap:break-word}
  .goal-card-arrow{display:none}
}
@media(min-width:340px) and (max-width:767px){
  .coach-hero .goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .goal-card h3{font-size:1rem;line-height:1.25}
  .goal-card-blurb{display:none}
}
@media(min-width:360px) and (max-width:767px){
  .site-header .member-login-link.is-signed-in>span{position:static;width:auto;height:auto;margin:0;clip:auto;display:inline-block;max-width:8.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
  .site-header .member-login-link.is-signed-in .member-login-icon{display:none!important}
}
.member-join-link[aria-current=page]{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}

/* Phones with large browser text plus the site's A+ (review r12, Mr Lim): a 375px phone at 200% text and A+ is as tight as
   a 163px screen at normal text, but the max-width:22.5em rules below never match. Grid columns and form fields may
   shrink below their longest word or option so nothing pushes the page sideways. */
@media(max-width:767px){
  .comparison-workspace{grid-template-columns:minmax(0,1fr)!important}
  .comparison-workspace>*,.popular-tool-list small{min-width:0}
  input,select,textarea{max-width:100%}
  .compare-start{grid-template-columns:minmax(0,1fr)}
  .compare-start>*,.footer-brand{min-width:0}
  .footer .logo{flex-wrap:wrap;max-width:100%}
  .resource-share-actions{flex-wrap:wrap}
  .resource-share-actions a,.resource-share-actions button{flex:1 0 36px;max-width:44px}
  .deal-top{flex-wrap:wrap}
  .deal-ends{white-space:normal;max-width:100%}
  .deal-parts{grid-template-columns:repeat(auto-fit,minmax(min(100%,5em),1fr))}
  .deal-parts button,.business-tile>*{min-width:0;overflow-wrap:break-word}
  .business-tile-grid{grid-template-columns:minmax(0,1fr)}
  .deal-part-head{flex-wrap:wrap}
  .deal-part h2{min-width:0;overflow-wrap:break-word}
}
/* Large text and very narrow screens (e.g. a 375px phone at 200% zoom is ~188 CSS px wide).
   Nothing may be wider than the screen, words never split mid-word, boxes stack one per row. */
@media(max-width:22.5em){
  .container,main{padding-left:10px;padding-right:10px}
  h1,h2,h3,.goal-card h3,.tour-title{overflow-wrap:break-word;hyphens:manual}
  h1,.coach-hero h1,.goal-hero h1,.tool-question{font-size:clamp(1.55rem,12vw,2.1rem);max-width:none}
  .stat-row,.scenario-pair,.quiz-options{grid-template-columns:minmax(0,1fr)!important}
  .result-panel,.input-panel,.coach-quiz,.goal-hero,.tool-next{padding-left:10px;padding-right:10px}
  .headline{padding-left:8px;padding-right:8px}
  .goal-card{flex-wrap:wrap;gap:10px;padding:12px}
  .goal-card>div{flex:1 1 7rem;min-width:0}
  .goal-card-icon{flex-basis:40px;height:40px}
  .goal-card-arrow{margin-left:0}
  .goal-step{flex-wrap:wrap}
  .quiz-pick{flex-wrap:wrap;padding:12px;gap:10px}
  .quiz-pick>div{flex:1 1 8rem;min-width:0}
  .quiz-pick h3{font-size:1.35rem}
  .goal-step>*{min-width:0}
  .coach-hint-close{margin-right:0}
  footer .theme-control{flex-wrap:wrap}
  footer .theme-control select{max-width:100%}
  input,select,textarea{max-width:100%}
  .tour-bubble{width:calc(100vw - 16px);padding:14px 12px 10px}
  .tour-row{flex-wrap:wrap}
  .tour-actions{flex-wrap:wrap;margin-left:auto}
  .btn{white-space:normal;overflow-wrap:normal;word-break:normal;max-width:100%}
  .popular-tool-list a{grid-template-columns:34px minmax(0,1fr) 18px!important;gap:8px;padding:12px 10px!important}
  .popular-tool-list strong{font-size:1.0625rem!important;overflow-wrap:break-word;min-width:0}
  .tool-step-number{white-space:nowrap}
  .card-list{width:100%}
  .card-list>*{min-width:0}
  .card-row{gap:8px;padding:8px}
  .card-row-flag{white-space:normal;margin-left:0}
  .comparison-workspace{grid-template-columns:minmax(0,1fr)!important}
  .comparison-workspace>*{min-width:0}
  .guide-filters input,.guide-filters select{min-width:0;flex:1 1 100%}
  .tab-bar{padding:4px 2px calc(4px + env(safe-area-inset-bottom))}
  .tab-bar a{min-width:0;min-height:44px;font-size:.875rem;padding:0 1px}
  .tab-bar .tab-icon{width:20px;height:20px}
}

/* Wider screens: keep a focused field off the bottom edge too (review 6 Oct 2026). */
@media(min-width:768px){html{scroll-padding-bottom:48px}}
/* Keep keyboard focus and scrolled-to errors above the fixed tab bar and sticky button (WCAG 2.4.11). */
@media(max-width:767px){html{scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom))}}
/* Short screens, e.g. a phone at 200% text: the sticky button would cover a third of the screen,
   so the form's own button is used instead, and the tab bar is compact. */
@media(max-width:767px) and (max-height:28em){
  .mobile-action{display:none!important}
  html{scroll-padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .tab-bar{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom))}
  .tab-bar a{min-height:44px;gap:0;font-size:.875rem}
  .tab-bar .tab-icon{width:18px;height:18px}
}
/* Stand-alone small links get at least a 24px-tall target (WCAG 2.5.8) for low vision and shaky fingers. */
.member-signin-prompt a,.footer-contact a,#member-return,.member-preview-link{display:inline-flex;align-items:center;min-height:32px}
@media(min-width:561px){.breadcrumb a{display:inline-flex;align-items:center;min-height:32px}}

/* Slim save bar (D24): one row that appears only after the headline has scrolled away. */
.save-sheet--slim{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px 12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0}
/* The slim save bar leaves room so the footer can still scroll clear of it (review 6 Oct 2026). */
body.has-save-sheet{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
@media(max-width:767px){body.has-save-sheet{padding-bottom:calc(64px + 104px + env(safe-area-inset-bottom))}}
.save-sheet--slim h2{font-size:1.0625rem;line-height:1.25}
.save-sheet--slim p{margin:2px 0 0;font-size:.875rem;color:var(--muted)}
.save-sheet--slim .btn{width:auto;min-height:44px;font-size:.9375rem;padding:10px 16px}
.save-sheet--slim .save-sheet-later{padding:0 6px}
@media(max-width:767px){.save-sheet--slim{padding:10px 12px;border-radius:16px;grid-template-columns:minmax(0,1fr) auto}.save-sheet--slim .save-sheet-text{grid-column:1/-1}.save-sheet--slim p{display:none}.save-sheet--slim .btn{width:100%}}
/* Weekly Money Puzzle on the homepage (D30). */
.home-puzzle{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;background:var(--tile-butter);border-radius:var(--radius)}
.home-puzzle h2{margin:.2rem 0 .4rem}
.home-puzzle p{margin:0;max-width:40rem}
.home-puzzle .btn{width:auto;flex-shrink:0}
@media(max-width:700px){.home-puzzle{display:block;padding:20px}.home-puzzle .btn{width:100%;margin-top:16px}}
/* Cookie preferences (D31): a site card with two equal-weight choices, never a nudge towards Accept. */
.cookie-notice{max-width:720px;margin:24px auto;padding:20px;display:flex;flex-wrap:wrap;gap:10px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--card);color:var(--ink);box-shadow:var(--shadow-md);font-size:.9375rem}
.cookie-notice p{flex:1 1 100%;margin:0 0 4px;line-height:1.5}
.cookie-notice button{flex:1 1 200px;margin:0;min-height:48px;padding:10px 16px;border:2px solid var(--brand);border-radius:var(--radius-btn);background:var(--card);color:var(--brand);font-weight:700}
.cookie-notice button:hover{background:var(--soft)}
.cookie-notice button[aria-pressed=true]{background:var(--brand);color:var(--brand-text)}
.cookie-settings{display:block;margin:20px auto;min-height:44px;padding:8px 16px;border:1px solid var(--hair);border-radius:999px;background:var(--card);color:var(--muted);font-weight:600;font-size:.875rem}
.cookie-settings:hover{color:var(--brand);border-color:var(--brand)}
@media(max-width:767px){.cookie-notice{margin:20px 16px;padding:16px}.cookie-notice button{flex-basis:100%}}
/* Menu at phone widths and large text (D27): one tap target per section, and the Tools list opens
   on the goal names only. Each goal name opens that goal's page with its steps. */
.nav-toggle-label{display:none}
@media(max-width:960px){
  .main-nav .nav-item.has-toggle>.nav-top{display:none}
  .site-header .main-nav .nav-item.has-toggle>.nav-toggle{flex:1 1 auto;width:auto;justify-content:space-between;gap:12px;min-height:52px;padding:0 14px 0 4px;border-left:0;color:var(--ink);font:600 1.125rem/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;text-align:left}
  .main-nav .nav-item.has-toggle>.nav-toggle::before{order:2}
  .main-nav .nav-item.has-toggle .nav-toggle-label{display:inline}
  .main-nav .nav-item.has-toggle>.nav-toggle:hover,.main-nav .nav-item.has-toggle>.nav-toggle[aria-expanded=true]{background:none;color:var(--brand)}
  .nav-item-tools .nav-goal ol,.nav-item-tools .nav-goal>p,.nav-item-tools .nav-goal>ul,.site-header .main-nav .nav-item-tools .nav-goal>.nav-all{display:none}
  .nav-item-tools .nav-goal{padding:4px 8px}
  .site-header .main-nav .nav-item-tools .nav-panel .nav-goal>a{min-height:48px;padding:6px 4px;align-items:center}
}
/* Text size A− / A+ (D32): per device; enlarges page content and the footer, not the header or bottom bars. */
.text-size-control{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0;font-size:.875rem;color:var(--muted)}
.text-size-control[hidden]{display:none}
.text-size-control button{min-width:48px;min-height:44px;padding:0 10px;border:1px solid var(--field-border);border-radius:var(--radius-btn);background:var(--card);color:var(--ink);font:700 1rem/1 'Figtree',sans-serif}
.text-size-control button:hover{border-color:var(--brand);color:var(--brand)}
.text-size-control button[aria-disabled=true]{opacity:.45;cursor:default}
.text-size-value{min-width:3.2em;text-align:center;color:var(--ink);font-weight:600}
html[data-text-size="1"] main,html[data-text-size="1"] footer.footer>.container{zoom:1.15}
html[data-text-size="2"] main,html[data-text-size="2"] footer.footer>.container{zoom:1.3}
/* Browser zoom already at 200% (a phone about 188px wide): the page is at its largest, so A+ adds nothing that would push it sideways. */
@media(max-width:240px){html[data-text-size] main,html[data-text-size] footer.footer>.container{zoom:1}}
/* Largest size: the sticky Calculate bar would cover too much, so the form's own button is used instead. */
html[data-text-size="2"] .mobile-action{display:none!important}
/* The same control in the phone Menu, so it is one tap away on every page (1 Oct design review). */
.site-header .main-nav .nav-text-size{display:none}
@media(max-width:960px){.site-header .main-nav .nav-text-size{display:block;border-bottom:1px solid var(--hair)}.nav-text-size .text-size-control{flex-wrap:wrap;margin:8px 4px;color:var(--ink);font:600 1rem/1.2 'Figtree',sans-serif}.nav-text-size #text-size-label-menu{margin-right:auto}}
@media(max-width:260px){.text-size-control>span:first-child{flex-basis:100%}}
/* 200% text on a phone (about 188px wide): long words wrap instead of pushing the page sideways (1 Oct design review). */
.goal-group-title>span,.academy-lessons strong,.lc-item,.method-card p{min-width:0;overflow-wrap:anywhere}
/* The tool-page hint never splits a word (release 8, as release 7 did for titles): it wraps between words and
   breaks a word only if it is wider than the whole line. At 200% text on a phone the "?" and close button share the top row,
   so the sentence gets the box's full width. */
.coach-hint p{min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:manual}
@media(max-width:22.5em){.coach-hint{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.coach-hint p{grid-column:1/-1;grid-row:2}.coach-hint-close{grid-column:3;margin:-6px -6px -2px 0}}
.lc-steps>*,.academy-lessons>*,.academy-question,.goal-hero>div{min-width:0}
.goal-hero>div{max-width:100%}.goal-hero h1{overflow-wrap:break-word}
.academy-question legend,.academy-question label{overflow-wrap:anywhere}
.card-row-text{flex:1 1 auto}.card-row-flag{max-width:100%;overflow-wrap:anywhere}
@media(max-width:260px){.card-row{flex-wrap:wrap}.card-row-text{flex-basis:100%}.card-row-name,.card-row-sub{overflow-wrap:anywhere}}
@media(max-width:700px){.academy-lessons{grid-template-columns:minmax(0,1fr)}}
/* Goal-path number carrying (D18). */
.path-carry{margin:0 0 16px;padding:16px;border:2px solid var(--brand);border-radius:var(--radius);background:var(--soft);display:grid;gap:8px}
.path-carry h2{margin:0;font-size:1.1875rem;line-height:1.25}
.path-carry-list{margin:0;padding-left:1.1em}
.path-carry-list li{font-weight:600}
.path-carry .btn{min-height:48px}
.path-carry-no{min-height:44px;border:0;background:none;color:var(--muted);font-weight:700;font-size:.9375rem;justify-self:start;padding:0 4px}
.path-carry-note{margin:0;font-size:.875rem;color:var(--muted)}
.input-memory{margin:0 0 14px;padding:10px 14px;border-radius:12px;background:var(--soft);font-size:.9375rem;line-height:1.4}
.input-memory-reset{display:inline;min-height:44px;padding:0 2px;border:0;background:none;color:var(--brand);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
/* Signed-in homepage welcome (D25). */
.home-welcome{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;margin:16px 0 0;padding:18px 20px;border-radius:var(--radius);background:var(--tile,var(--tile-mint));color:var(--ink)}
.coach-hero .home-welcome{margin:0 0 28px;text-align:left}
.home-welcome h2{margin:.15rem 0 .25rem;font-size:1.375rem;line-height:1.2}
.home-welcome p{margin:0}
.home-welcome-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;flex-shrink:0}
.home-welcome-actions .btn{width:auto}
@media(max-width:700px){.home-welcome{display:block;padding:16px}.home-welcome-actions{margin-top:12px}.home-welcome-actions .btn{width:100%}}
/* How Many Months Could You Last? — the four-level ladder. Met/not met is in the text, not colour alone. */
.mcl-ladder-title{margin:18px 0 8px;font-size:18px}
.mcl-ladder{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.mcl-ladder li{padding:10px 12px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--card)}
.mcl-ladder li.is-met{border-color:var(--brand);background:var(--tile-mint)}
.mcl-ladder .mcl-status{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;font-size:.875rem;font-weight:700;border:1px solid currentColor}
.mcl-ladder li.is-met .mcl-status{color:var(--brand)}
.mcl-ladder li.is-not-met .mcl-status{color:var(--muted)}
.mcl-ladder .mcl-condition{display:block;margin-top:2px;color:var(--muted);font-size:.9375rem}
.home-game-card{display:flex;align-items:center;gap:16px;max-width:760px;padding:16px 18px;border-radius:var(--radius);background:var(--tile);color:var(--ink);text-decoration:none}
.home-game-card strong{display:block;font:700 1.1875rem/1.25 'Bricolage Grotesque',sans-serif}
.home-game-card small{display:block;margin-top:4px;font-size:.875rem;color:var(--ink)}
.home-game-card:hover strong{text-decoration:underline}
.home-game-card>span:last-child{margin-left:auto;font-size:1.375rem}
.home-play .section-heading p{margin:.3rem 0 0;color:var(--muted)}
.home-play-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.home-play-grid .home-game-card{height:100%;max-width:none}
.home-play-grid .home-game-card strong{font-size:1.0625rem}
@media(max-width:700px){.home-play-grid{grid-template-columns:minmax(0,1fr);gap:8px}.home-play-grid .home-game-card{padding:12px 14px}}
/* BTO Payment Timeline: optional wedding/reno fields, the "by month" part of the headline and the month-by-month list. */
.bto-extras{margin:0 0 18px;border-top:1px solid var(--hair);padding-top:6px}.bto-extras summary{font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center}
.headline-value .headline-by{display:block;font-size:.42em;letter-spacing:0;color:var(--ink)}
.bto-lines{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}.bto-lines li{display:grid;gap:4px;padding:12px 14px;background:var(--soft);border-radius:8px}.bto-lines li.is-past{background:transparent;border:1px dashed var(--hair)}
.bto-when{font-size:.9375rem;color:var(--muted)}.bto-what{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 12px}.bto-amount{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}.bto-split{font-size:.9375rem;color:var(--muted)}

/* Result tiles (1 Oct design review): labels at 15px in body ink, a small quiet "?" kept on the
   label's last line (tool-glossary.js), and "See The Breakdown" for the non-key tiles (tool-page.js). */
.result-panel .lbl{font-size:.9375rem;line-height:1.4;color:var(--ink)}
.info-tip-keep{white-space:nowrap}
.result-panel .info-tip{vertical-align:baseline}
.result-panel .info-tip-button{width:22px;height:22px;min-width:22px;border:1.5px solid var(--muted)!important;background:transparent!important;color:var(--muted)!important;font:700 13px/1 'Figtree',sans-serif!important;vertical-align:-4px}
.result-panel .info-tip-button::before{inset:-11px}
.result-panel .info-tip-button:hover,.result-panel .info-tip-button[aria-expanded=true]{border-color:var(--brand)!important;background:var(--soft)!important;color:var(--brand)!important;box-shadow:none}
.result-panel .info-tip-bubble{white-space:normal;font-size:.9375rem}
@media(max-width:767px){.result-panel .info-tip-bubble{font-size:1rem}}
.results.is-collapsed .stat.is-extra{display:none}
.results.is-collapsed .stat-row:not(:has(.stat:not(.is-extra):not([hidden]))){display:none}
.result-breakdown-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;margin:-8px 0 18px;padding:10px 16px;border:1.5px solid var(--field-border);border-radius:14px;background:var(--card);color:var(--ink);font:700 .9375rem/1.3 'Figtree',sans-serif;text-align:left;cursor:pointer}
.result-breakdown-toggle::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:4px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.result-breakdown-toggle[aria-expanded=true]::after{transform:translateY(2px) rotate(-135deg)}
@media(hover:hover){.result-breakdown-toggle:hover{border-color:var(--brand);background:var(--soft)}}
.headline .headline-split{margin:-2px 0 8px;font:700 1.1875rem/1.35 'Figtree',sans-serif;color:var(--ink)}
/* Homepage (1 Oct design review): phones show a short tagline under each goal title (tiles stay
   equal height), and the quiz answers are tappable cards like the after-sign-up setup. */
.goal-card-tagline{display:none}
@media(min-width:340px) and (max-width:767px){
  .goal-card-steps{display:none}
  .goal-card-tagline{display:block;margin-top:2px;font-size:.875rem;line-height:1.35;color:var(--muted)}
}
.quiz-options label{min-height:60px;padding:12px 16px;border:2px solid var(--hair);border-radius:var(--radius-btn);background:var(--card);box-shadow:var(--shadow-sm);font-size:1rem;line-height:1.35}
.quiz-options label:has(input:checked){border-color:var(--brand);background:var(--soft);box-shadow:none}
/* Review 10 (Adeline): focus is a dark ring outside the card, so it never looks like the green "selected" border. */
.quiz-options label:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.quiz-options input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(hover:hover){.quiz-options label:hover{border-color:var(--brand)}}
.quiz-options input{width:22px;height:22px}
/* Just-in-time feature hints (assets/hints-ui.js): one small, non-modal card at a time. Phones: a bottom
   slide-in kept above the tab bar and the sticky Calculate bar (the script sets its exact bottom). */
.discovery-hint{position:fixed;z-index:58;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 32px));padding:14px 16px;border:1px solid var(--hair);border-radius:16px;background:var(--card);color:var(--ink);box-shadow:var(--shadow-md);display:grid;gap:6px}
.discovery-hint-title{margin:0;font:800 1.0625rem/1.25 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere}
.discovery-hint-text{margin:0;font-size:15px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.discovery-hint-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.discovery-hint-action{min-height:44px;padding:10px 16px;font-size:.9375rem;font-weight:700}
.discovery-hint-later{min-height:44px;padding:10px 16px;font-size:.9375rem;font-weight:700}
/* Review 11 (Mr Lim): at very large text the card sits at the end of the page instead of floating over it. */
.discovery-hint.discovery-hint--inline{position:static;width:auto;margin:24px 0;box-shadow:none;zoom:1}
.discovery-hint--exit{top:16px;bottom:auto!important;right:24px}
@media(max-width:767px){.discovery-hint{left:8px;right:8px;width:auto;bottom:calc(72px + env(safe-area-inset-bottom));border-radius:16px}.discovery-hint-action{flex:1 1 auto}}
@media(prefers-reduced-motion:no-preference){.discovery-hint{transition:opacity .2s ease,transform .2s ease}.discovery-hint.is-entering{opacity:0;transform:translateY(12px)}.discovery-hint--exit.is-entering{transform:translateY(-12px)}}
html[data-text-size="1"] .discovery-hint{zoom:1.15}
html[data-text-size="2"] .discovery-hint{zoom:1.3}
@media print{.discovery-hint{display:none!important}}
/* Centred hero and quiz copy keeps its reading measure centred too. */
.coach-hero p,.coach-quiz-intro p{margin-inline:auto}
/* Selects (3 Oct 2026): one custom chevron everywhere, about 15px from the right edge, drawn in the
   theme's muted token so it follows light and dark; text never runs under it. Focus rings are unchanged. */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;text-overflow:ellipsis}
@media(forced-colors:active){select:not([multiple]):not([size]){-webkit-appearance:auto;appearance:auto;background-image:none;padding-right:12px}}
/* Large text (review 3 Oct 2026, 200% root text at 375px): wrap long words, let flex text
   columns shrink, and drop two-column grids to one column once the text no longer fits. */
.goal-card>*,.quiz-pick>*,.journey-card>*,.stat,.stat-row>*{min-width:0}
.goal-card h3,.goal-card-tagline,.quiz-pick h3,.quiz-pick a,.journey-card h3,.journey-card .text-link,.headline-value,.val{overflow-wrap:anywhere}
.theme-control{flex-wrap:wrap;max-width:100%}.theme-control select{max-width:100%;min-width:0}
.stat-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr))}
.sr-only{clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
@media(min-width:340px) and (max-width:767px){
  .coach-hero .goal-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr))}
}
/* Help "?" beside a field label (owner request, 3 Oct 2026): centred on the label's text line, 6px after
   the text, never taller than the line (so the row never grows) and never over the field below.
   The 44px tap target comes from ::before and does not affect layout. */
.label-row{align-items:center;gap:6px}
.label-row>.info-tip{align-items:center;height:auto}
.label-row>.info-tip>.info-tip-button,.label-row .info-tip-button{width:22px;height:22px;min-width:22px;margin:0;align-self:center;vertical-align:middle;font-size:.75rem}
.label-row .info-tip-button::before{inset:-11px}
@media(max-width:767px){.label-row>.info-tip>.info-tip-button{align-self:center;margin-block:0}}
.label-row+input,.label-row+select{margin-top:6px}
/* Guides, Compare and Play menus (owner request, 3 Oct 2026): the Tools menu's pastel tiles and icons. */
.nav-sprite{position:absolute;width:0;height:0;overflow:hidden}
.nav-tiles{align-items:start}.nav-tiles .nav-goal{padding:10px 10px 8px}
.site-header .main-nav .nav-tiles .nav-goal>a{font-size:1rem}
.nav-tiles .nav-goal>ul{list-style:none}
.site-header .main-nav .nav-panel .nav-play-tiles .nav-goal>a{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.nav-play-tiles .nav-goal>a>svg{grid-row:span 2}
.nav-play-tiles .nav-goal>a small{grid-column:2;display:block;font:500 .8125rem/1.35 'Figtree',sans-serif;color:var(--muted)}
@media(min-width:961px){
  .nav-item-compare{position:static}.nav-item-compare .nav-panel{top:100%;left:var(--nav-gutter);right:var(--nav-gutter);width:auto}
  .nav-item-guides .nav-panel,.nav-item-compare .nav-panel{padding:22px!important}
  .nav-item-play .nav-panel{width:34rem;left:auto;right:-10px;padding:18px!important}
  .nav-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nav-play-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Investor tools (October 2026): result tables and rebalancing rows. Tokens only. */
.inv-table{margin:8px 0 12px}
.inv-table caption{text-align:left;padding-bottom:6px}
.inv-table th,.inv-table td{padding:8px 6px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.inv-table thead th{color:var(--muted);font-weight:700}
.inv-table tbody tr:last-child th,.inv-table tbody tr:last-child td{border-bottom:0}
.inv-table td:not(:first-child){font-variant-numeric:tabular-nums}
#tool-form .rb-row{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr);gap:10px;margin:0;padding:10px 12px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--card)}
#tool-form .rb-row legend{padding:0 4px;font-weight:700;font-size:.9375rem}
#tool-form .rb-row label{display:block;font-size:.875rem}
#tool-form .rb-row input{width:100%}
@media (max-width:480px){#tool-form .rb-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}#tool-form .rb-row>div:first-of-type{grid-column:1/-1}}
/* Result figures and titles (review 5 Oct 2026, 375px and 200% root text). A figure such as "S$2,560/mth"
   never splits inside the number or its unit: words wrap only at spaces, common.js joins the unit to the
   number and shrinks the font until the figure fits; only below a readable minimum may it break (.fit-break).
   Titles wrap between words; a word too long for its line hyphenates instead of splitting anywhere. */
.headline-value,.val,.scenario-pair strong{overflow-wrap:normal;word-break:normal}
.headline-value.fit-break,.val.fit-break,.scenario-pair strong.fit-break{overflow-wrap:anywhere}
h1,h2,h3,.goal-card h3,.quiz-pick h3,.journey-card h3,.tool-question,.tour-title{overflow-wrap:break-word;word-break:normal;hyphens:manual}
@media(max-width:767px){
  h1{font-size:min(clamp(2rem,5vw,2.9rem),max(10.5vw,24px))}
  .coach-hero h1{font-size:min(2.3rem,max(10.5vw,24px))}
  h2{font-size:min(1.75rem,max(8vw,20px))}
  .headline-value,.result-panel .headline-value{font-size:min(2.7rem,12vw)}
}
/* WebKit counts a select's longest option as overflow even when the box is narrower; clip it so 200% text never scrolls sideways. */
select{overflow:hidden}
/* An invalid input (for example an age the tool does not cover) hides the last result instead of only
   dimming it, so an old figure never sits beside a rejected value (review 5 Oct 2026). Share-image, save and
   scenario controls for that old figure go too (review 10 Oct 2026, Rosalind). */
.result-panel.has-error .headline-value,.result-panel.has-error #headline-context,.result-panel.has-error #result-card-options,.result-panel.has-error #card-preview,.result-panel.has-error #public-save-invitation,.result-panel.has-error .scenario-compare,.result-panel.has-error .headline-split,.result-panel.has-error .results,.result-panel.has-error .result-breakdown-toggle,.result-panel.has-error .share-actions{display:none!important}
#tool-form{scroll-margin-top:5rem}
/* "See The Breakdown (N More)": the extra tiles open together after the key tiles, so all N new rows
   appear below rather than between rows already on screen (review 5 Oct 2026). */
.results .stat-row>.stat.is-extra{order:1}
/* Example result shown before the visitor calculates (review 5 Oct 2026). */
.example-badge{display:table;margin:0 0 12px;padding:4px 12px;border-radius:999px;background:var(--sun);color:var(--sun-ink);font:600 .875rem/1.4 'Figtree',sans-serif}
.result-panel.is-stale .example-badge{display:none}
/* What To Do Next after a big gap (Emergency Fund, Coverage Gap). */
.gap-next{margin:18px 0 0;padding:16px 18px;border-radius:16px;background:var(--soft)}.gap-next h3{margin:0 0 8px;font-size:1.0625rem}.gap-next ol{margin:0;padding-left:1.25rem}.gap-next li{margin:6px 0}
/* Release 8: Make My Retirement Money Last (already retired). Plain-words line under the path strip on its
   tools, the same line under each step on the goal page, and the "Need A Hand?" help card. */
body[data-tool] .intro>p.path-intro,.path-intro{margin:8px 0 0;padding:10px 14px;border-radius:14px;background:var(--tile);color:var(--ink);font-size:1rem;line-height:1.45;max-width:40rem}
.goal-step-text .goal-step-intro{display:block;margin-top:4px;font-size:.9375rem;line-height:1.45;color:var(--ink)}
.help-card{margin:28px 0;padding:20px;border-radius:var(--radius);background:var(--tile-butter);color:var(--ink)}
.help-card h2{margin:0 0 6px;font-size:1.375rem}
.help-card p{margin:0 0 12px;max-width:40rem}
.help-card .action-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0}
.help-card .help-card-note{margin:10px 0 0;font-size:.875rem;color:var(--muted)}
.goal-tip a{overflow-wrap:break-word}
/* Eight life goals (release 8): the homepage tiles form a balanced 4×2 grid on desktop and two columns on
   tablets and phones (one below 340px), so no last tile hangs alone. With four across, each tile stacks its
   icon above the title. /tools/ goal groups: an odd last group still fills its row. */
.goal-directory>.goal-group:last-child:nth-child(odd){grid-column:1/-1}
@media(min-width:768px){.coach-hero .goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){
  .coach-hero .goal-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .coach-hero .goal-card{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 18px 20px}
  .coach-hero .goal-card-arrow{position:absolute;top:18px;right:18px}
  .coach-hero .goal-card-icon{flex:0 0 auto;width:52px;height:52px}
}
/* Tools menu (release 8): two panes, so eight goals fit 1280×800 without scrolling inside the menu. Left, one
   row per goal (icon chip, name, step count on the same line); right, the selected goal's steps on its own pastel tile. */
.nav-goal-list{margin:0;padding:0;list-style:none}
.site-header .main-nav .nav-panel .nav-goal-list a{display:grid;grid-template-columns:32px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:46px;padding:6px 10px;border-radius:14px;font:700 1rem/1.2 'Bricolage Grotesque',sans-serif;color:var(--ink)}
.nav-goal-list svg{box-sizing:border-box;width:32px;height:32px;padding:5px;border-radius:10px;background:var(--tile);color:var(--tile-ink);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.site-header .main-nav .nav-panel .nav-goal-list small{margin:0;white-space:nowrap;font:500 .8125rem/1.25 'Figtree',sans-serif;color:var(--muted)}
.site-header .main-nav .nav-panel .nav-goal-list a:hover,.site-header .main-nav .nav-panel .nav-goal-list .is-active>a{background:var(--tile);color:var(--ink)}
.nav-goal-list .is-active svg,.nav-goal-list a:hover svg{background:var(--card)}
.nav-pane{display:none}
.nav-pane ol,.nav-pane ul{margin:0;padding:0;list-style:none}
.nav-pane ol{counter-reset:step}.nav-pane ol li{counter-increment:step}
.site-header .main-nav .nav-panel .nav-pane a{min-height:38px;padding:7px 8px;border-radius:10px;font-size:.9375rem;color:var(--ink)}
.site-header .main-nav .nav-panel .nav-pane a:hover{background:color-mix(in srgb,var(--card) 70%,transparent);color:var(--ink)}
.site-header .main-nav .nav-pane ol a::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;height:22px;border-radius:50%;background:var(--card);color:var(--ink);font:700 .8125rem/1 'Figtree',sans-serif}
.nav-pane>div>p{margin:0;padding:8px 8px 4px;font:700 .75rem/1.3 'Figtree',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
/* Buy A Home: the pane lists the BTO steps; resale buyers get a quiet link to their route on the goal page. */
.site-header .main-nav .nav-panel .nav-pane .nav-route{margin:6px 0 0 30px;padding:6px 8px;min-height:0;font:600 .875rem/1.3 'Figtree',sans-serif;color:var(--tile-ink);text-decoration:underline;text-underline-offset:3px}
.site-header .main-nav .nav-panel .nav-pane .nav-all{margin-top:6px;font:700 .9375rem/1.3 'Figtree',sans-serif;color:var(--tile-ink)}
@media(min-width:961px){
  .nav-item-tools .nav-panel:has(.nav-tools){right:auto;width:min(64rem,calc(100% - 2 * var(--nav-gutter)));max-height:none;overflow:visible;padding:20px 22px 0!important}
  .nav-tools{display:grid;grid-template-columns:minmax(17rem,22rem) minmax(0,1fr);gap:20px;align-items:stretch}
  .nav-goal-list{display:grid;gap:3px;align-content:start}
  .nav-pane.is-active{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:4px 24px;align-content:start;padding:18px 20px;border-radius:18px;background:var(--tile)}
  .nav-item-tools .nav-panel:has(.nav-tools) .nav-browse{position:static;margin:18px -22px 0!important;padding:12px 22px;border-radius:0 0 var(--radius) var(--radius);box-shadow:none}
}
/* Phones and large text: the goal rows only, each opening its goal page (no panes). */
@media(max-width:960px){
  .nav-pane{display:none!important}
  .nav-goal-list{display:grid;gap:2px}
  .site-header .main-nav .nav-panel .nav-goal-list a{min-height:52px;padding:6px 4px;font-size:1.0625rem}
  .site-header .main-nav .nav-panel .nav-goal-list .is-active>a{background:none}
  .nav-goal-list .is-active svg{background:var(--tile)}
}
@media(min-width:561px) and (max-width:960px){.nav-goal-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}}
/* Large text: an FAQ question with a long word (e.g. "Automatically" at 200% text) wraps inside its card. */
.faq-cards>*,.faq-card summary>*{min-width:0}
@media(max-width:22.5em){.faq-card summary{padding:12px 10px;gap:8px}.guide-try-result{padding:.75rem 10px}.guide-article .guide-try-value{font-size:1.5rem;overflow-wrap:break-word}}
/* Email code boxes (assets/otp-field.js): the one real input sits under an aria-hidden row of boxes that mirrors its value. */
.otp-cells,input.otp-input{--otp-n:6;--otp-gap:.5rem;--otp-w:calc(var(--otp-n)*3.25rem + (var(--otp-n) - 1)*var(--otp-gap))}
.otp-cells[data-otp-n="8"],input.otp-input[data-otp-n="8"]{--otp-n:8;--otp-gap:.375rem}
.otp-cells{position:relative;z-index:1;display:flex;gap:var(--otp-gap);width:100%;max-width:var(--otp-w);height:3.5rem;margin:.375rem 0 0;pointer-events:none}
.otp-cell{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;border:2px solid var(--field-border);border-radius:12px;background:var(--card);color:var(--ink);font:700 1.5rem/1 'Figtree',sans-serif;font-variant-numeric:tabular-nums}
.otp-cells[data-otp-n="8"] .otp-cell{border-radius:10px;font-size:1.375rem}
.otp-cell.is-filled{border-color:var(--muted)}
.otp-cells.is-focused .otp-cell.is-active{border-color:var(--brand);outline:3px solid var(--brand);outline-offset:2px}
.otp-cells.is-focused .otp-cell.is-active:not(.is-filled)::after{content:'';width:2px;height:1.5rem;background:var(--brand)}
@media(prefers-reduced-motion:no-preference){.otp-cells.is-focused .otp-cell.is-active:not(.is-filled)::after{animation:otp-caret 1.1s steps(1) infinite}}
@keyframes otp-caret{50%{opacity:0}}
.otp-cells:has(+ .otp-input[aria-invalid=true]) .otp-cell{border-color:var(--danger)}
.otp-cells:has(+ .otp-input:disabled){opacity:.6}
/* !important: member-account.css styles these fields through #account-code-form, which would otherwise pull the input out from under its boxes. */
input.otp-input[type=text]{display:block!important;position:relative;box-sizing:border-box!important;width:100%!important;max-width:var(--otp-w)!important;height:3.5rem!important;min-height:0!important;margin:-3.5rem 0 .75rem!important;padding:0 .5rem!important;border:0!important;border-radius:12px;background:transparent!important;box-shadow:none!important;color:transparent!important;caret-color:transparent;font-size:16px!important;letter-spacing:0}
input.otp-input::placeholder{color:transparent}
input.otp-input::selection{background:transparent;color:transparent}
input.otp-input:focus,input.otp-input:focus-visible{outline:none}
input.otp-input:-webkit-autofill{-webkit-text-fill-color:transparent;transition:background-color 86400s}
@media(max-width:22.5em){.otp-cells,input.otp-input{--otp-gap:.375rem}.otp-cells[data-otp-n="8"],input.otp-input[data-otp-n="8"]{--otp-gap:.25rem}}
/* Tax Estimator work-pass residency fields (release 9): a full-width group that keeps the form grid. Tokens only. */
body[data-tool] .tx-part-fields{grid-column:1/-1;display:grid;grid-template-columns:inherit;gap:inherit;padding:14px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--soft)}
body[data-tool] .tx-part-fields>*{min-width:0}
body[data-tool] .tx-part-fields>p{grid-column:1/-1;margin:0}
.tx-nr-compare{margin:8px 0 18px}
.tx-nr-compare #tx-nr-gap{color:var(--line);font-family:'Bricolage Grotesque',sans-serif;font-size:1.5rem;font-variant-numeric:tabular-nums}
/* Tax Estimator: the Citizen/PR or work-pass question comes first, full width (review 7 Oct 2026). */
.tx-who{grid-column:1/-1}.tx-who label{font-weight:600;color:var(--ink)}
/* Quiz result at large text (review 7 Oct 2026, 200% on a phone split "Retirem/ent"): the text block takes
   its own row under the icon when space is short, and the title wraps by whole words only. */
.quiz-pick>div{flex:1 1 12rem;min-width:0}
.quiz-pick h3{overflow-wrap:normal;word-break:normal;hyphens:manual}
@media(max-width:767px){.quiz-pick h3{font-size:min(1.625rem,10vw)}}
@media(max-width:22.5em){.quiz-pick h3{font-size:min(1.35rem,10vw)}}
/* Large text (review 7 Oct 2026): the logo may wrap rather than push the page sideways; at normal size it fits on one line. */
@media(max-width:560px){.site-header .logo{white-space:normal;overflow-wrap:anywhere;min-width:0}}
/* Release 10 (review 6 Oct, Kelvin): plain-words ward classes on the Shield comparison. */
.compare-explainer{margin:4px 0 18px;padding:14px 16px;border-radius:14px;background:var(--soft)}.compare-explainer h3{margin:0 0 6px;font-size:1rem}.compare-explainer ul{margin:0 0 8px;padding-left:1.15rem}.compare-explainer li{margin:4px 0}.compare-explainer p{margin:6px 0 0}
/* Release 10 (reviews 6-7 Oct): My Focus on the members Overview, and the focus checklists in My Downloads. */
.member-overview-focus{margin:0 0 16px;padding:18px 20px;border-radius:16px;background:var(--soft)}.member-overview-focus h3{margin:2px 0 4px;font-size:1.25rem}.member-overview-focus p{margin:4px 0}.member-overview-next{font-weight:600}.member-overview-downloads{margin:10px 0;padding-left:1.15rem}.member-overview-downloads li{margin:6px 0}
.member-download-focus{padding:14px 16px;border-radius:16px;background:var(--soft)}
#member-focus-status:empty{display:none}
.family-total{margin-top:12px;padding-top:10px;border-top:1px solid var(--hair)}.family-total label{display:block;margin:8px 0 4px;font-weight:600}.family-total input{width:100%}.family-total-result:empty{display:none}.family-total-result{margin-top:8px;font-weight:600}
/* Review 10 Oct 2026 (Mr Lim, phone at 200% text): when the header or tab bar is narrower than 16em of its own text,
   the text is very large for the screen. Keep Join Free beside the logo with a small two-line site name next
   to the sprout mark, and drop the tab bar icons so the bar keeps one short row.
   A+ (up to 130%) on a 375px phone never reaches this. */
.site-header .header-inner,.tab-bar{container-type:inline-size}
@container (max-width:16em){
  /* Review 11 (Mr Lim): the site name stays visible, small and on two short lines beside the mark. */
  .site-header .logo{display:grid;grid-template-columns:auto auto;column-gap:4px;align-items:center;font-size:.5rem;line-height:1.1;flex:0 1 auto;min-width:0;white-space:nowrap}
  .site-header .logo span:not(.logo-mark){display:block;font-size:inherit}
  .site-header .logo small{display:none}
  .site-header svg.logo-mark{grid-row:1/3;width:28px;height:28px;margin-right:0}
  .site-header:not(.is-signed-in) .member-join-link{margin-left:auto;padding:6px 12px}
  .tab-bar a{min-height:44px;gap:0;padding:0}
  .tab-bar .tab-icon{display:none}
}
/* "What To Do Next": one action line under each result's big number (review 11, Vanessa, 10 Oct 2026). */
.result-todo{margin:12px 0 0;padding:10px 14px;border-left:4px solid var(--sun);border-radius:12px;background:var(--tile-butter);color:var(--ink);font-size:.9375rem;line-height:1.5}
.result-todo[hidden]{display:none}
.result-todo-label{font-family:'Bricolage Grotesque','Figtree',sans-serif;font-weight:800}
.result-todo a{font-weight:700}
.result-panel.has-error .result-todo,.result-panel.is-stale .result-todo{display:none}
/* Retirement Number: retirees are sent to their own path before they fill in the form (review 11, Rosalind). */
.retiree-callout{margin:12px 0 16px;padding:12px 14px;border-left:4px solid var(--brand);border-radius:12px;background:var(--soft);color:var(--ink);font-size:.9375rem;line-height:1.5}
.retiree-callout a{font-weight:700}
/* Guides: an optional plain-words starter box above the quick answer (review 11, Sofia). */
.guide-plain{margin:0 0 20px;padding:16px 18px;border-left:4px solid var(--sun);border-radius:16px;background:var(--tile-butter);color:var(--ink)}
.guide-plain h2{margin:0 0 8px;font-size:1.125rem}
.guide-plain ol{margin:0;padding-left:1.25rem}.guide-plain li{margin:6px 0;line-height:1.5}
/* Comparisons: what changed after a new choice, next to the choices (review 11, Arjun). */
.compare-update{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:var(--soft);color:var(--ink);font-size:.9375rem;line-height:1.5}
.compare-update[hidden]{display:none}.compare-update a{font-weight:700}
.compare-scope{margin:12px 0 0}
.work-pass-filter{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-weight:600}
.work-pass-filter input{width:22px;height:22px;flex:none}
/* Review r12 (Adeline): focus moved to the result heading shows a ring for keyboard users, in both themes. UI/UX
   review 13 Oct (property-06, invest-16): after a tap or mouse click it does not, so the ring never sits in screenshots. */
#tool-result-title:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.tool-step[tabindex="-1"]:focus:not(:focus-visible){outline:none}
/* UI/UX review 13 Oct 2026 (a11y-04, property-14, a11y-12): 44px tap targets for the "?" bubbles (hit area only,
   the yellow dot stays 22px), the path Step links, the BTO/Resale switch, "Read The Short Guide First" and the footer. */
.info-tip-button{position:relative}
.info-tip-button::before,.result-panel .info-tip-button::before,.label-row .info-tip-button::before{content:"";position:absolute;inset:-11px}
.path-strip a,.path-strip-next a,.tool-guide-top a{display:inline-flex;align-items:center;min-height:44px}
.path-route{align-items:center}
.path-strip .path-route a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
.footer-coach .footer-links a,.footer-coach .footer-links a:not([aria-current=page]){display:inline-flex;align-items:center;min-height:44px}
@media(max-width:720px){.footer-coach .footer-links a{min-height:44px}}
/* UI/UX review 13 Oct 2026 (a11y-06, home-nav-06, compare-05): nothing scrolls sideways at 320px, or at 200% text
   with A+. Grids use shrinkable tracks, flex rows wrap, and full-bleed strips bleed only as far as the gutter. */
.about-topics,.about-hero,.collection,.ad-formats{grid-template-columns:minmax(0,1fr)}
.games{grid-template-columns:repeat(2,minmax(0,1fr))}
.badges{grid-template-columns:repeat(3,minmax(0,1fr))}
.about-topic,.about-topic-head,.about-hero>*,.collection>li,.pcard,.games>li,.game,.ad-format,.winner-stat,.winner-stat>*{min-width:0}
.game strong,.game small,.pcard strong,.pcard small,.ad-format,.about-topic,.about-kicker,.winner-stat-value{overflow-wrap:break-word}
.streak{flex-wrap:wrap}.streak-weeks{flex-wrap:wrap}
@media(min-width:700px){.about-hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}.about-topics{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:760px){.games{grid-template-columns:repeat(4,minmax(0,1fr))}.badges{grid-template-columns:repeat(6,minmax(0,1fr))}.collection{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:960px){.ad-formats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.about-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.about-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.about-try li,.about-try li a,.about-try li a>*,.about-stats li,.about-topic li,.about-topic li a,.journey-intro>*,.journey-steps>*,.journey-steps a,.answers>*,.answer{min-width:0}
.about-steps>*,.about-founders>*,.about-grid>*,.about-topic-head>*,.membership-cta>*,.compare-intro>*,.about-card>*,.about-tile>*,.about-strip>*,.about-strip li>*,.winner-who>*{min-width:0}
.about-card{grid-template-columns:96px minmax(0,1fr)}
.popular-tool-list li,.popular-tool-list a>*{min-width:0}
@media(max-width:22.5em){.about-card{grid-template-columns:64px minmax(0,1fr)}.about-card img{width:64px;height:64px}.winner-who .coach-badge{width:36px;height:36px}.winner-who span{overflow-wrap:anywhere}.about-try{padding-left:.7rem;padding-right:.7rem}.about-try li a{padding-left:.6rem;padding-right:.6rem;gap:.5rem}}
.about,.journey-intro,.journey-steps,.answer,.compare-intro h1,.membership-cta{overflow-wrap:break-word}
@media(max-width:22.5em){
  .winner-stat-value{white-space:normal;font-size:min(1.75rem,10vw)}
  .compare-intro h1{font-size:min(clamp(1.55rem,12vw,2.1rem),10vw)}
  body[data-compare] .compare-nav{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
  .deal-chips{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px;scroll-padding:10px}
}
/* About founders at very large text: the photo sits above the name once the card is narrower than 20rem (root-relative,
   so this only happens with enlarged text), so the role pill never runs off the screen. */
.about-founders{container-type:inline-size}
@container (max-width:20rem){.about-card{grid-template-columns:minmax(0,1fr)}.about-card img{grid-row:auto}.about-card h3{align-self:start}}
.about-try{container-type:inline-size}
@container (max-width:20rem){.about-try li a{overflow-wrap:anywhere;padding-left:.5rem;padding-right:.5rem;gap:.4rem}}
/* Comparison headline numbers and titles at very large text (container narrower than 16rem only happens with
   enlarged text): the number scales to the card, so S$ figures never push the page sideways. */
body[data-compare] .comparison-headline,body[data-compare] .compare-intro{container-type:inline-size}
@container (max-width:16rem){
  .headline-value,.headline-value .stat-nowrap,.winner-stat-value{font-size:min(2rem,12cqi)!important;white-space:normal!important;overflow-wrap:anywhere}
  .compare-intro h1{font-size:min(2.1rem,10cqi)!important}
  .winner-who .coach-badge{width:36px;height:36px}
  .winner-who span{overflow-wrap:anywhere}
}