:root {
  --paper: #f4efdf;
  --paper-deep: #ebe3cc;
  --ink: #142c36;
  --ink-soft: #52646a;
  --moss: #3f7658;
  --moss-deep: #28513c;
  --sky: #9ed4de;
  --sun: #f4ca52;
  --coral: #e66f52;
  --line: rgba(20, 44, 54, .17);
  --white: #fffdf6;
  --shadow: 0 26px 70px rgba(31, 54, 49, .13);
  --radius-sm: .65rem;
  --radius-md: 1.15rem;
  --radius-lg: 2rem;
  --display: Georgia, 'Times New Roman', serif;
  --ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; min-width: 0; background: var(--paper); color: var(--ink); font-family: var(--ui); font-size: 1rem; line-height: 1.55; text-rendering: optimizeLegibility; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22; background-image: radial-gradient(rgba(20,44,54,.16) .65px, transparent .7px); background-size: 5px 5px; mix-blend-mode: multiply; }
a { color: inherit; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.035em; line-height: .98; }
h1 { font-size: clamp(2.8rem, 7vw, 6.7rem); }
h2 { font-size: clamp(2.15rem, 4.5vw, 4.5rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.08; }
em { color: var(--moss); font-weight: 400; }
.wrap { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; min-width: 0; }
.narrow { max-width: 820px; }
.skip-link { position: fixed; z-index: 999; left: 1rem; top: -5rem; padding: .75rem 1rem; background: var(--ink); color: white; border-radius: .4rem; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.eyebrow { margin: 0 0 1rem; display: flex; align-items: center; gap: .55rem; color: var(--moss-deep); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.waypoint { width: .68rem; height: .68rem; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(230,111,82,.15); }

.site-header { position: relative; z-index: 30; padding-top: env(safe-area-inset-top); border-bottom: 1px solid var(--line); background: rgba(244, 239, 223, .9); backdrop-filter: blur(14px); }
.site-header__inner { min-height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; }
.brand { display: inline-flex; width: max-content; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark { width: 2.9rem; height: 2.9rem; flex: 0 0 auto; object-fit: contain; }
.brand > span:last-child { display: grid; line-height: 1; }
.brand b { letter-spacing: .13em; font-size: .88rem; }
.brand small { margin-top: .34rem; color: var(--ink-soft); font-size: .64rem; letter-spacing: .05em; }
.site-header nav { display: flex; gap: 2rem; font-size: .85rem; font-weight: 700; }
.site-header nav a { position: relative; text-decoration: none; }
.site-header nav a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -.35rem; height: 2px; background: var(--coral); transition: right .2s ease; }
.site-header nav a:hover::after, .site-header nav a:focus-visible::after { right: 0; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: .9rem; }
.header-actions form { margin: 0; }
.header-actions form button, .header-login { appearance: none; border: 0; background: none; padding: .6rem 0; font-size: .82rem; font-weight: 750; text-decoration: none; }
.header-plan { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; padding: .6rem .8rem .6rem 1rem; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; font-weight: 800; font-size: .82rem; }
.header-plan span { width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); transition: transform .2s ease; }
.header-plan:hover span { transform: translateX(2px); }

.button { min-height: 50px; display: inline-flex; justify-content: center; align-items: center; gap: .75rem; padding: .78rem 1.25rem; border: 1px solid transparent; border-radius: .75rem; font-weight: 850; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--coral); color: #fffdf8; box-shadow: 0 11px 26px rgba(164,70,48,.19); }
.button--primary:hover { box-shadow: 0 14px 34px rgba(164,70,48,.28); }
.button--secondary { border-color: var(--ink); background: transparent; }
.button--dark { background: var(--ink); color: var(--paper); }
.button--light { border-color: var(--ink); background: transparent; color: var(--ink); }
.button--light:hover { background: rgba(20,44,54,.06); }
.button--wide { width: 100%; justify-content: space-between; padding-inline: 1.25rem; }
.button--wide b { width: 2rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); }
.text-link { display: inline-flex; gap: .45rem; align-items: center; font-weight: 800; text-decoration-thickness: 1px; }
.text-link span { color: var(--coral); }

.paper-field { position: relative; isolation: isolate; }
.hero { min-height: 620px; display: grid; align-items: center; overflow: clip; border-bottom: 1px solid var(--line); }
.hero__contours { position: absolute; z-index: -1; width: min(680px, 60vw); aspect-ratio: 1; right: -8%; top: -15%; opacity: .22; border-radius: 44% 56% 48% 52%; border: 1px solid var(--moss); box-shadow: 0 0 0 28px transparent, 0 0 0 29px var(--moss), 0 0 0 65px transparent, 0 0 0 66px var(--moss), 0 0 0 104px transparent, 0 0 0 105px var(--moss), 0 0 0 150px transparent, 0 0 0 151px var(--moss); transform: rotate(-18deg); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; padding-block: clamp(4rem, 8vw, 7rem); }
.hero__copy { min-width: 0; }
.hero h1 { max-width: 820px; }
.hero__lead { max-width: 580px; margin: 1.75rem 0 2rem; font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--ink-soft); }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; }
.hero__guest-note { margin: .8rem 0 0; color: var(--ink-soft); font-size: .72rem; }
.trust-row { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 2rem; color: var(--ink-soft); font-size: .75rem; font-weight: 750; }
.trust-row span::before { content: '✓'; margin-right: .35rem; color: var(--moss); font-weight: 900; }

.route-board { position: relative; min-width: 0; min-height: 525px; padding: 1.2rem; background: var(--sky); border: 1px solid var(--ink); border-radius: 2.5rem 1rem 2rem 1rem; box-shadow: var(--shadow); transform: rotate(1.2deg); }
.route-board::after { content: ''; position: absolute; inset: 8px; border: 1px dashed rgba(20,44,54,.25); border-radius: 2rem .8rem 1.6rem .8rem; pointer-events: none; }
.route-board__weather { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; padding: .75rem 1rem; background: var(--white); border: 1px solid var(--ink); border-radius: 1rem .5rem 1rem .5rem; transform: rotate(-2deg) translate(-1.6rem, -.9rem); }
.route-board__weather strong { font-family: var(--display); font-size: 2.4rem; line-height: 1; }
.route-board__weather span { font-size: .72rem; line-height: 1.25; }
.route-board__weather small { color: var(--ink-soft); font-size: .6rem; }
.route-board__map { position: relative; height: 210px; margin: .7rem; overflow: hidden; background-color: rgba(255,255,255,.27); background-image: linear-gradient(38deg, transparent 47%, rgba(20,44,54,.1) 48%, rgba(20,44,54,.1) 50%, transparent 51%), linear-gradient(-28deg, transparent 47%, rgba(20,44,54,.08) 48%, rgba(20,44,54,.08) 50%, transparent 51%); background-size: 70px 70px, 100px 100px; border-radius: 1.1rem; }
.route-line { position: absolute; display: block; height: 4px; background: var(--coral); transform-origin: left center; border-radius: 4px; }
.route-line--a { width: 45%; left: 18%; top: 64%; transform: rotate(-32deg); }
.route-line--b { width: 34%; left: 51%; top: 39%; transform: rotate(20deg); }
.map-dot { position: absolute; z-index: 2; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; border: 2px solid var(--white); border-radius: 50% 50% 50% 15%; background: var(--ink); color: var(--white); font-size: .65rem; box-shadow: 0 5px 15px rgba(20,44,54,.22); }
.map-dot--start { left: 10%; bottom: 11%; transform: rotate(-45deg); }
.map-dot--start::first-letter, .map-dot--end::first-letter { transform: rotate(45deg); }
.map-dot--end { right: 8%; top: 18%; background: var(--coral); transform: rotate(-45deg); }
.route-ticket { position: relative; z-index: 2; margin-top: -.4rem; padding: 1.55rem; background: var(--white); border: 1px solid var(--ink); border-radius: .75rem 1.8rem .85rem 1.4rem; transform: rotate(-1.1deg); }
.route-ticket__label { display: inline-block; margin-bottom: .8rem; padding: .28rem .6rem; background: var(--sun); border: 1px solid var(--ink); border-radius: .25rem; font-size: .66rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.route-ticket h2 { font-size: 2rem; line-height: 1.03; }
.route-ticket dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1rem 0; }
.route-ticket dl div { display: grid; padding-top: .55rem; border-top: 1px solid var(--line); }
.route-ticket dt { color: var(--ink-soft); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.route-ticket dd { margin: 0; font-weight: 850; font-size: .88rem; }
.route-ticket p { margin: 0; color: var(--ink-soft); font-size: .8rem; }

.signal-strip { border-bottom: 1px solid var(--line); background: var(--ink); color: var(--paper); }
.signal-strip .wrap { min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.signal-strip b { margin-right: .35rem; color: var(--sun); font-family: var(--display); font-size: 1.4rem; }

.home-steps, .live-examples { padding-block: clamp(4.5rem,9vw,7.5rem); }
.home-steps ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.home-steps li { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: .9rem; padding: 1.25rem; border-top: 1px solid var(--ink); }
.home-steps li > b { color: var(--coral); font-family: var(--display); font-size: 2.2rem; line-height: 1; }
.home-steps li span { display: grid; gap: .25rem; color: var(--ink-soft); font-size: .82rem; }
.home-steps li strong { color: var(--ink); font-family: var(--display); font-size: 1.35rem; }
.home-install { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: clamp(1.25rem,4vw,3.5rem); align-items: center; margin-block: 1rem clamp(4.5rem,9vw,7.5rem); padding: clamp(1.3rem,4vw,2.7rem); border: 1px solid var(--ink); border-radius: .8rem 2.2rem .8rem 1.5rem; background: var(--sky); box-shadow: 9px 10px 0 var(--ink); }
.home-install__mark { width: clamp(5rem,9vw,7.4rem); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 1.6rem .55rem 1.25rem .55rem; background: var(--white); transform: rotate(-3deg); }
.home-install__mark img { width: 72%; height: 72%; object-fit: contain; }
.home-install h2 { font-size: clamp(2rem,4vw,3.8rem); }
.home-install p:not(.eyebrow) { max-width: 670px; margin-bottom: 0; color: var(--ink-soft); }
.home-install__actions { min-width: 220px; display: grid; gap: .75rem; justify-items: stretch; }
.home-install__actions .text-link { justify-content: center; font-size: .72rem; }
.install-status { color: var(--ink-soft); font-size: .72rem; font-weight: 750; }
.account-benefits__actions { display: grid; gap: .75rem; min-width: 220px; text-align: center; }
.account-benefits__actions > a:last-child { color: var(--white); font-size: .76rem; font-weight: 800; }

.install-hero { min-height: 620px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: clamp(2rem,7vw,7rem); align-items: center; padding-block: clamp(4rem,9vw,8rem); }
.install-hero > div:first-child > p:not(.eyebrow) { max-width: 690px; color: var(--ink-soft); font-size: 1.08rem; }
.install-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }
.install-preview { min-width: 0; display: grid; place-items: center; padding: 3.2rem 1.5rem; border: 1px solid var(--ink); border-radius: 3rem 1rem 2.2rem 1rem; background: var(--sky); box-shadow: 13px 15px 0 var(--ink); text-align: center; transform: rotate(2deg); }
.install-preview img { width: min(10rem,55%); aspect-ratio: 1; object-fit: contain; margin-bottom: 1.2rem; border-radius: 2rem; }
.install-preview b { font-family: var(--display); font-size: clamp(2rem,4vw,3.5rem); letter-spacing: .08em; }
.install-preview span { color: var(--ink-soft); font-size: .75rem; font-weight: 800; }
.install-guide { padding-block: clamp(4.5rem,9vw,8rem); border-top: 1px solid var(--line); }
.install-guide__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 2rem; }
.install-guide article { min-width: 0; min-height: 230px; display: flex; flex-direction: column; padding: 1.4rem; border: 1px solid var(--ink); background: var(--white); }
.install-guide article:nth-child(2) { border-radius: 1.8rem .6rem 1.3rem .6rem; background: var(--sun); }
.install-guide article:nth-child(3) { border-radius: .6rem 1.8rem .6rem 1.3rem; background: var(--sky); }
.install-guide article > span { color: var(--coral); font-family: var(--display); font-size: 2rem; }
.install-guide article h3 { margin-top: auto; }
.install-guide article p { margin-bottom: 0; color: var(--ink-soft); font-size: .82rem; }
.install-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.install-notes p { margin: 0; padding: 1rem; border-left: 3px solid var(--moss); background: var(--paper-deep); color: var(--ink-soft); font-size: .78rem; }
[data-install-app]:disabled { cursor: default; opacity: .72; transform: none; box-shadow: none; }
.live-examples { border-top: 1px solid var(--line); }
.live-examples__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.live-examples article { min-width: 0; min-height: 230px; display: flex; flex-direction: column; padding: 1.35rem; border: 1px solid var(--ink); border-radius: .65rem 1.8rem .65rem 1.2rem; background: var(--white); }
.live-examples article:nth-child(2) { background: var(--sky); border-radius: 1.8rem .65rem 1.2rem .65rem; }
.live-examples article:nth-child(3) { background: var(--sun); }
.live-examples article > span { font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.live-examples article h3 { margin-top: auto; }
.live-examples article p { margin-bottom: .35rem; color: var(--ink-soft); font-size: .78rem; }
.live-examples article small { color: var(--ink-soft); font-size: .65rem; }
.account-benefits { padding-block: clamp(4.5rem,9vw,7.5rem); background: var(--moss); color: var(--white); }
.account-benefits .wrap { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: clamp(2rem,5vw,5rem); align-items: center; }
.account-benefits .eyebrow { color: var(--sun); }
.account-benefits h2 { font-size: clamp(2.3rem,4.5vw,4.4rem); }
.account-benefits ul { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; color: rgba(255,255,255,.82); }
.account-benefits li::before { content: '✓'; margin-right: .55rem; color: var(--sun); font-weight: 900; }
.account-benefits .button { border-color: var(--white); }

.product-moment { padding-block: clamp(5rem, 10vw, 9rem); }
.section-intro { max-width: 650px; margin-bottom: 3.5rem; }
.section-intro p:last-child { max-width: 560px; color: var(--ink-soft); font-size: 1.08rem; }
.three-plans { display: grid; grid-template-columns: 1.15fr .92fr .92fr; gap: 1.2rem; align-items: stretch; }
.plan-teaser { min-height: 290px; display: flex; flex-direction: column; padding: 1.6rem; border: 1px solid var(--ink); }
.plan-teaser > span { font-size: .66rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.plan-teaser h3 { margin-top: auto; max-width: 280px; }
.plan-teaser p { color: var(--ink-soft); font-size: .88rem; }
.plan-teaser b { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.plan-teaser--safe { min-height: 350px; background: var(--moss); color: var(--white); border-radius: .65rem 2.8rem .65rem 1.4rem; transform: rotate(-.6deg); }
.plan-teaser--safe p { color: rgba(255,255,255,.75); }
.plan-teaser--fresh { background: var(--sun); border-radius: 2.2rem .6rem 1.4rem .6rem; transform: translateY(2rem) rotate(.7deg); }
.plan-teaser--fresh p { color: rgba(20,44,54,.75); }
.plan-teaser--wild { background: var(--sky); border-radius: .65rem 1.4rem 2.8rem .65rem; transform: translateY(-1.2rem) rotate(-.6deg); }

.method-section { padding-block: 7rem; background: var(--paper-deep); border-block: 1px solid var(--line); }
.method-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 9vw, 8rem); }
.method-grid ol { list-style: none; margin: 0; padding: 0; }
.method-grid li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.method-grid li:last-child { border-bottom: 1px solid var(--line); }
.method-grid li > b { color: var(--coral); font-family: var(--display); font-size: 1.8rem; }
.method-grid li span { display: grid; color: var(--ink-soft); }
.method-grid li strong { color: var(--ink); font-family: var(--display); font-size: 1.45rem; }

.source-window { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 9vw, 8rem); padding-block: 8rem; align-items: center; }
.source-window__text p:not(.eyebrow) { max-width: 560px; color: var(--ink-soft); }
.source-ledger { padding: .8rem 1.6rem; background: var(--white); border: 1px solid var(--ink); border-radius: 2rem .5rem 2rem .5rem; box-shadow: 14px 16px 0 var(--sky); }
.source-ledger p { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; margin: 0; padding: 1.05rem 0; border-bottom: 1px dashed var(--line); }
.source-ledger p:last-child { border-bottom: 0; }
.source-ledger span { color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.source-ledger b { font-size: .88rem; }

.final-cta { overflow: hidden; padding-block: 6.5rem; background: var(--coral); color: var(--white); }
.final-cta .wrap { display: flex; justify-content: center; align-items: center; gap: clamp(3rem, 10vw, 9rem); }
.sun-stamp { width: 10rem; aspect-ratio: 1; display: grid; place-items: center; padding: 2.4rem; border: 2px solid currentColor; border-radius: 50%; font-weight: 950; line-height: .9; letter-spacing: .13em; text-align: center; transform: rotate(-10deg); box-shadow: 0 0 0 12px transparent, 0 0 0 13px currentColor; }
.final-cta .eyebrow { color: var(--white); }
.final-cta h2 { margin-bottom: 1.6rem; }

.planner-shell { padding-bottom: 7rem; }
.planner-top { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding-block: 3.4rem 2rem; }
.planner-top h1 { font-size: clamp(2.6rem, 5.6vw, 5.6rem); }
.planner-top > div:first-child > p:last-child { max-width: 620px; margin-bottom: 0; color: var(--ink-soft); }
.weather-pill { flex: 0 0 auto; display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); box-shadow: 5px 6px 0 var(--sky); }
.weather-pill__temp { font-family: var(--display); font-size: 2rem; line-height: 1; }
.weather-pill > span:last-child { display: grid; }
.weather-pill b { font-size: .74rem; }
.weather-pill small { color: var(--ink-soft); font-size: .65rem; }
.planner-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr); gap: 1.4rem; align-items: start; }
.planner-form { min-width: 0; padding: clamp(1.2rem, 3vw, 2.2rem); background: var(--white); border: 1px solid var(--ink); border-radius: .8rem 2.4rem .8rem 1.8rem; box-shadow: 8px 9px 0 var(--sun); }
.guest-mode { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .8rem; align-items: center; margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid rgba(63,118,88,.35); border-radius: .7rem; background: rgba(207,228,223,.52); }
.guest-mode > span { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--moss); color: var(--white); font-weight: 900; }
.guest-mode p { margin: .15rem 0 0; color: var(--ink-soft); font-size: .7rem; }
.guest-mode a { font-size: .7rem; font-weight: 850; white-space: nowrap; }
.planner-progress, .planner-step-status, [data-step-next], [data-step-back] { display: none; }
.js .planner-progress { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .25rem; margin: 0 0 1.35rem; padding: 0; list-style: none; }
.planner-progress button { width: 100%; min-width: 0; min-height: 48px; display: grid; justify-items: center; gap: .15rem; padding: .35rem .2rem; border: 0; border-bottom: 2px solid var(--line); background: transparent; color: var(--ink-soft); font-size: .61rem; font-weight: 850; }
.planner-progress button span { width: 1.45rem; height: 1.45rem; display: grid; place-items: center; border-radius: 50%; background: var(--paper-deep); }
.planner-progress button[aria-current="step"] { border-color: var(--coral); color: var(--ink); }
.planner-progress button[aria-current="step"] span { background: var(--coral); color: var(--white); }
.planner-progress button:disabled { cursor: default; opacity: .48; }
.js .planner-step-status { display: block; margin: -1rem 0 1rem; color: var(--ink-soft); font-size: .65rem; text-align: center; }
.planner-step { min-width: 0; padding-block: .4rem; }
.planner-step[hidden] { display: none !important; }
.planner-step__heading { margin-bottom: 1.35rem; }
.planner-step__heading h2 { font-size: clamp(2rem,4vw,3rem); }
.planner-step__heading > p:last-child { max-width: 590px; margin-bottom: 0; color: var(--ink-soft); font-size: .78rem; }
.planner-step .field-group { grid-template-columns: 1fr; padding-top: 0; }
.planner-step__actions { display: flex; justify-content: space-between; gap: .7rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.js .planner-step__actions [data-step-next], .js .planner-step__actions [data-step-back] { display: inline-flex; }
.planner-step__actions .button { min-width: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; margin-bottom: 1.2rem; }
.choice-grid label { min-width: 0; display: grid; gap: .35rem; color: var(--ink-soft); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.choice-grid select { width: 100%; min-width: 0; min-height: 48px; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: .55rem; background: #faf7ee; text-transform: none; }
.choice-grid select:focus { border-color: var(--moss); outline: 3px solid rgba(63,118,88,.13); }
.planner-review { margin: 0; border-block: 1px solid var(--ink); }
.planner-review > div { display: grid; grid-template-columns: 6rem minmax(0,1fr) auto; gap: .65rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.planner-review > div:last-child { border-bottom: 0; }
.planner-review dt { color: var(--ink-soft); font-size: .65rem; font-weight: 850; text-transform: uppercase; }
.planner-review dd { min-width: 0; margin: 0; font-size: .76rem; font-weight: 750; overflow-wrap: anywhere; }
.planner-review button { min-height: 44px; padding: .35rem .55rem; border: 0; background: transparent; color: var(--moss-deep); font-size: .65rem; font-weight: 850; text-decoration: underline; }
.planner-impact { padding: .75rem; border-left: 4px solid var(--moss); background: rgba(207,228,223,.42); color: var(--moss-deep); font-size: .72rem; font-weight: 750; }
.planner-memory { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .4rem; padding: .65rem .75rem; border: 1px solid rgba(63,118,88,.35); border-radius: .6rem; background: rgba(207,228,223,.48); color: var(--moss-deep); font-size: .7rem; font-weight: 750; }
.planner-memory[hidden] { display: none; }
.planner-memory button { flex: 0 0 auto; min-height: 44px; padding-inline: .65rem; border: 1px solid currentColor; border-radius: .45rem; background: transparent; color: inherit; font: inherit; }
.intent-planner { display: grid; gap: .8rem; margin-bottom: 1.35rem; padding: 1rem; border: 1px solid var(--ink); border-radius: .65rem 1.4rem .65rem 1rem; background: rgba(244,202,82,.2); }
.intent-planner h2 { margin-top: .1rem; font-size: clamp(1.35rem,3vw,1.9rem); }
.intent-planner p { margin: .2rem 0 0; color: var(--ink-soft); font-size: .72rem; }
.intent-planner__input { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .55rem; align-items: stretch; }
.intent-planner textarea { width: 100%; min-width: 0; min-height: 82px; resize: vertical; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .55rem; background: var(--white); color: var(--ink); font: inherit; font-size: .8rem; line-height: 1.45; }
.intent-planner__input button { min-height: 48px; padding: .65rem .8rem; border: 1px solid var(--ink); border-radius: .55rem; background: var(--ink); color: var(--white); font-weight: 850; }
.intent-presets { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.intent-presets::-webkit-scrollbar { display: none; }
.intent-presets button { flex: 0 0 auto; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: .65rem; font-weight: 800; scroll-snap-align: start; }
.intent-planner .intent-planner__status { min-height: 1.2em; color: var(--moss-deep); font-size: .64rem; font-weight: 750; }
.field-group { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: .9rem; padding: 1.3rem 0; border-bottom: 1px dashed var(--line); }
.field-number { padding-top: .25rem; color: var(--coral); font-family: var(--display); font-size: 1.1rem; font-weight: 700; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend, .field-group label[for] { display: block; margin-bottom: .8rem; font-family: var(--display); font-size: 1.35rem; font-weight: 700; }
.origin-picker { position: relative; min-width: 0; }
.origin-row { display: grid; grid-template-columns: minmax(0,1fr) auto; min-width: 0; gap: .5rem; }
.origin-row input, .fine-tune select, .auth-card input { width: 100%; min-width: 0; min-height: 48px; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: .55rem; background: #faf7ee; outline: none; }
.origin-row input:focus, .fine-tune select:focus, .auth-card input:focus { border-color: var(--moss); box-shadow: 0 0 0 3px rgba(63,118,88,.13); }
.origin-row input[aria-expanded="true"] { border-color: var(--moss); }
.location-suggestions { position: absolute; z-index: 55; top: calc(100% + .4rem); left: 0; right: 0; display: grid; gap: .2rem; max-height: min(19rem, 55dvh); padding: .4rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(28,54,39,.22); border-radius: .75rem; background: rgba(255,253,247,.99); box-shadow: 0 18px 42px rgba(25,46,34,.18); }
.location-suggestions[hidden] { display: none; }
.location-suggestions button { position: relative; display: grid; grid-template-columns: 1.8rem minmax(0,1fr); align-items: center; gap: .55rem; width: 100%; min-width: 0; min-height: 50px; padding: .65rem .75rem; border: 0; border-radius: .55rem; background: transparent; color: var(--ink); text-align: left; font: inherit; font-weight: 760; cursor: pointer; }
.location-suggestions button::before { content: "⌖"; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 50%; background: rgba(63,118,88,.1); color: var(--moss-deep); font-size: .85rem; }
.location-suggestions button:hover, .location-suggestions button:focus-visible, .location-suggestions button[aria-selected="true"] { outline: none; background: rgba(63,118,88,.1); }
.location-suggestions button:focus-visible { box-shadow: inset 0 0 0 2px var(--moss); }
.location-suggestions button span { min-width: 0; overflow-wrap: anywhere; }
.time-planning { min-width: 0; }
.date-time-row { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr); gap: .55rem; margin-bottom: .7rem; }
.date-time-row label { min-width: 0; display: grid; gap: .25rem; color: var(--ink-soft); font-size: .67rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.date-time-row input { width: 100%; min-width: 0; min-height: 46px; padding: .65rem .7rem; border: 1px solid var(--line); border-radius: .5rem; background: #faf7ee; }
.date-time-row input:focus { border-color: var(--moss); outline: 3px solid rgba(63,118,88,.13); }
.location-button { min-width: 0; max-width: min(15rem, 42vw); min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .65rem .8rem; border: 1px solid var(--ink); border-radius: .55rem; background: var(--sky); color: var(--ink); font: inherit; font-size: .72rem; font-weight: 900; white-space: nowrap; cursor: pointer; }
.location-button:hover { background: #cfe7ee; }
.location-button:focus-visible { outline: 3px solid rgba(63,118,88,.25); outline-offset: 2px; }
.location-button:disabled { opacity: .72; cursor: wait; }
.location-button [data-geolocate-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.location-button.is-resolved { border-color: var(--moss-deep); background: #e4f1e5; color: var(--moss-deep); }
.location-button__mark { font-size: 1.15rem; line-height: 1; }
.location-button.is-loading .location-button__mark { width: 1rem; height: 1rem; border: 2px solid rgba(20,44,54,.25); border-top-color: var(--ink); border-radius: 50%; font-size: 0; animation: spin .75s linear infinite; }
.field-hint { min-height: 1.25rem; margin: .5rem 0 0; color: var(--ink-soft); font-size: .7rem; }
.field-hint[data-tone="pending"] { color: #725f14; }
.field-hint[data-tone="success"] { color: var(--moss-deep); font-weight: 750; }
.field-hint[data-tone="warning"] { padding-left: .55rem; border-left: 3px solid #c69119; color: #725f14; }
.field-hint[data-tone="error"] { padding-left: .55rem; border-left: 3px solid #b13d2c; color: #8e3024; }
.segmented { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .4rem; }
.segmented label, .icon-options label, .chip-cloud label { min-width: 0; }
.segmented input, .icon-options input, .chip-cloud input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: grid; place-items: center; min-height: 44px; padding: .5rem; border: 1px solid var(--line); border-radius: .45rem; font-size: .76rem; font-weight: 800; }
.segmented input:checked + span { border-color: var(--ink); background: var(--sun); box-shadow: inset 0 0 0 1px var(--ink); }
.segmented input:focus-visible + span, .icon-options input:focus-visible + span, .chip-cloud input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.icon-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .5rem; }
.icon-options span { min-height: 74px; display: grid; place-items: center; align-content: center; gap: .3rem; border: 1px solid var(--line); border-radius: .7rem; font-size: .72rem; font-weight: 800; }
.icon-options i { font-style: normal; font-size: 1.35rem; }
.icon-options input:checked + span { border-color: var(--ink); background: var(--sky); box-shadow: inset 0 0 0 1px var(--ink); }
.chip-cloud { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip-cloud span { display: block; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; font-weight: 800; }
.chip-cloud input:checked + span { border-color: var(--ink); background: var(--moss); color: var(--white); }
.fine-tune { margin: 1.25rem 0; }
.fine-tune summary { cursor: pointer; font-weight: 800; font-size: .8rem; }
.fine-tune__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1rem; }
.fine-tune label { display: grid; gap: .35rem; color: var(--ink-soft); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.planner-note { margin: .65rem 0 0; color: var(--ink-soft); font-size: .64rem; text-align: center; }
.planner-map-panel { position: sticky; top: 1rem; min-width: 0; overflow: hidden; border: 1px solid var(--ink); border-radius: 2rem .8rem 2rem .8rem; background: var(--sky); box-shadow: var(--shadow); }
.planner-map { height: min(660px, 70vh); min-height: 500px; }
.map-fallback { position: relative; height: 100%; overflow: hidden; display: grid; place-items: center; background-color: #cfe4df; background-image: linear-gradient(24deg,transparent 49%,rgba(20,44,54,.1) 50%,transparent 51%),linear-gradient(-35deg,transparent 49%,rgba(20,44,54,.08) 50%,transparent 51%); background-size: 90px 90px,130px 130px; }
.map-fallback__river { position: absolute; width: 120%; height: 18%; left: -10%; top: 48%; background: var(--sky); transform: rotate(-12deg); border-block: 1px solid rgba(20,44,54,.12); }
.map-fallback b { z-index: 1; padding: .4rem .7rem; background: var(--white); border: 1px solid var(--ink); transform: rotate(-3deg); }
.map-fallback small { position: absolute; bottom: 1.5rem; z-index: 1; padding: .45rem .7rem; border-radius: 999px; background: rgba(255,253,246,.85); }
.map-fallback__pin { position: absolute; z-index: 1; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border: 2px solid white; border-radius: 50% 50% 50% 10%; background: var(--coral); color: white; font-style: normal; font-weight: 900; transform: rotate(-45deg); }
.map-fallback__pin:nth-of-type(1) { left: 22%; top: 25%; }
.map-fallback__pin:nth-of-type(2) { right: 20%; top: 36%; background: var(--moss); }
.map-fallback__pin:nth-of-type(3) { left: 47%; bottom: 19%; background: var(--ink); }
.map-caption { min-height: 48px; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--white); font-size: .68rem; }
.status-dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .35rem; border-radius: 50%; background: #55a76e; box-shadow: 0 0 0 4px rgba(85,167,110,.15); }
.results-section { padding-top: 4rem; }
.results-empty { max-width: 560px; margin: 2rem auto; text-align: center; color: var(--ink-soft); }
.route-mark { display: block; color: var(--coral); font-size: 3rem; }
.results-empty h2 { color: var(--ink); font-size: 2.5rem; }
.results-loading { min-height: 280px; display: grid; place-items: center; text-align: center; }
.results-loading i { width: 4rem; height: 4rem; border: 3px solid var(--line); border-top-color: var(--coral); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.results-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.results-heading h2 { font-size: 3rem; }
.results-heading p { max-width: 480px; color: var(--ink-soft); font-size: .82rem; }
.selection-mode { display: block; max-width: 560px; margin-top: .35rem; color: var(--moss-deep); font-size: .68rem; font-weight: 750; }
.result-availability { display: grid; gap: .25rem; margin: 0 0 1.25rem; padding: .9rem 1rem; border: 1px solid var(--ink); border-left: .45rem solid var(--sun); border-radius: .7rem; background: var(--white); box-shadow: 3px 3px 0 var(--sun); }
.result-availability strong { font-size: .78rem; }
.result-availability p { margin: 0; color: var(--ink-soft); font-size: .72rem; }
.result-filter-summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: -1rem 0 1.4rem; padding: .75rem; border: 1px solid var(--line); border-radius: .65rem; background: rgba(255,255,255,.6); }
.result-filter-summary > div { min-width: 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.result-filter-summary span { margin-right: .2rem; color: var(--ink-soft); font-size: .65rem; font-weight: 800; }
.result-filter-summary b { padding: .28rem .45rem; border-radius: 999px; background: var(--paper-deep); font-size: .62rem; }
.result-filter-summary button { flex: none; min-height: 44px; padding: .45rem .65rem; border: 1px solid var(--ink); border-radius: .5rem; background: var(--white); font-size: .66rem; font-weight: 850; }
.result-carousel-toolbar { display: none; }
.result-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.result-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--ink); background: var(--white); box-shadow: 5px 6px 0 var(--paper-deep); }
.result-card:focus-visible { outline: 3px solid var(--sky); outline-offset: 4px; }
.result-card.is-dismissed .result-card__visual,
.result-card.is-dismissed .result-card__body > :not(.result-card__actions) { filter: saturate(.35); }
.result-card:nth-child(1) { border-radius: .7rem 2.2rem .7rem 1.4rem; }
.result-card:nth-child(2) { border-radius: 2rem .7rem 1.4rem .7rem; transform: translateY(1.5rem); }
.result-card:nth-child(3) { border-radius: .7rem 1.4rem 2.2rem .7rem; }
.result-card__visual { position: relative; min-height: 9rem; overflow: hidden; display: flex; justify-content: space-between; align-items: end; padding: 1rem; background: linear-gradient(145deg,var(--moss),var(--moss-deep)); color: var(--white); }
.result-card__visual::before, .result-card__visual::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
.result-card__visual::before { width: 12rem; height: 12rem; right: -5rem; top: -7rem; box-shadow: 0 0 0 2rem transparent,0 0 0 calc(2rem + 1px) rgba(255,255,255,.18); }
.result-card__visual::after { width: 5rem; height: 5rem; left: 35%; bottom: -3.5rem; box-shadow: 0 0 0 1rem transparent,0 0 0 calc(1rem + 1px) rgba(255,255,255,.16); }
.result-card__visual span, .result-card__visual b { position: relative; z-index: 1; }
.result-card__visual span { font-size: .67rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.result-card__visual b { font-family: var(--display); font-size: 3.2rem; font-weight: 500; line-height: .8; }
.result-card--museum .result-card__visual, .result-card--culture .result-card__visual, .result-card--cinema .result-card__visual, .result-card--library .result-card__visual { background: linear-gradient(145deg,#263849,#5e7086); }
.result-card--water .result-card__visual { background: linear-gradient(145deg,#367788,#9ed4de); }
.result-card--attraction .result-card__visual, .result-card--zoo .result-card__visual, .result-card--playground .result-card__visual { background: linear-gradient(145deg,#9f573e,var(--coral)); }
.result-card--viewpoint .result-card__visual { background: linear-gradient(145deg,#576d63,#d4a94a); }
.result-card:nth-child(2) .result-card__visual { background-image: linear-gradient(145deg,#367788,var(--sky)); color: var(--ink); }
.result-card:nth-child(3) .result-card__visual { background-image: linear-gradient(145deg,#d6a82e,var(--sun)); color: var(--ink); }
.result-card__body { display: flex; flex-direction: column; height: 100%; padding: 1.25rem; }
.result-card__label { display: flex; justify-content: space-between; gap: .8rem; color: var(--ink-soft); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.score-badge { color: var(--moss-deep); }
.result-card h3 { margin: .9rem 0 .7rem; }
.result-card__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.result-card__meta span { padding: .3rem .5rem; background: var(--paper); border-radius: .35rem; font-size: .64rem; font-weight: 750; }
.fact-ribbon { display: grid; gap: .4rem; margin-bottom: 1rem; }
.fact-ribbon > span { min-width: 0; display: grid; padding: .6rem .65rem; border: 1px solid var(--line); border-radius: .55rem; background: #faf7ee; }
.fact-ribbon b { font-size: .69rem; line-height: 1.3; }
.fact-ribbon small { margin-top: .1rem; color: var(--ink-soft); font-size: .61rem; }
.fact-ribbon__opening--open { border-left: 4px solid var(--moss) !important; }
.fact-ribbon__opening--closed { border-left: 4px solid var(--coral) !important; }
.fact-ribbon__opening--unknown { border-left: 4px solid var(--sun) !important; }
.result-card__reason { color: var(--ink-soft); font-size: .82rem; }
.result-card details { margin-top: .8rem; font-size: .74rem; }
.result-card summary { cursor: pointer; font-weight: 800; }
.result-card__details { margin-top: .8rem !important; border-top: 1px dashed var(--line); }
.result-card__details > summary { min-height: 44px; display: flex; align-items: center; color: var(--moss-deep); }
.result-card__details-body { padding-bottom: .25rem; }
.result-card__caveat { padding: .7rem; background: #f7ede5; border-left: 3px solid var(--coral); font-size: .68rem; }
.mission-ticket { margin-top: auto; padding: .8rem; border: 1px dashed var(--ink); background: var(--sun); transform: rotate(-.5deg); font-size: .72rem; }
.mission-ticket b { display: block; font-size: .61rem; text-transform: uppercase; letter-spacing: .1em; }
.experience-card { margin-top: auto; padding: .9rem; border: 1px solid var(--ink); border-radius: .7rem; background: rgba(244,202,82,.42); }
.experience-card > div > span { color: var(--moss-deep); font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.experience-card h4 { margin: .25rem 0; font-family: var(--display); font-size: 1.18rem; line-height: 1.05; }
.experience-card p { margin: 0; color: var(--ink-soft); font-size: .69rem; }
.experience-card ol { display: grid; gap: .4rem; margin: .8rem 0; padding: 0; list-style: none; }
.experience-card li { display: grid; grid-template-columns: 1.35rem minmax(0,1fr); gap: .4rem; align-items: start; }
.experience-card li span { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--white); font-size: .58rem; font-weight: 900; }
.experience-card li p { margin: 0; color: var(--ink); }
.experience-card dl { margin: .7rem 0 0; border-top: 1px dashed var(--line); }
.experience-card dl div { display: grid; grid-template-columns: 4.8rem minmax(0,1fr); gap: .4rem; padding-top: .45rem; font-size: .62rem; }
.experience-card dt { color: var(--ink-soft); font-weight: 800; }
.experience-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.source-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .75rem; }
.source-chips small { width: 100%; color: var(--ink-soft); font-size: .58rem; }
.source-chips span, .source-chips a { padding: .25rem .4rem; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .58rem; font-weight: 800; text-decoration: none; }
.official-check { margin-top: .65rem; padding: .65rem; border: 1px dashed var(--line); border-radius: .55rem; background: rgba(158,212,222,.18); }
.official-check > button { width: 100%; min-height: 42px; padding: .45rem .6rem; border: 1px solid var(--ink); border-radius: .45rem; background: var(--white); font-size: .64rem; font-weight: 850; }
.official-check [data-official-status] p { margin: .55rem 0 .35rem; color: var(--ink-soft); font-size: .65rem; }
.official-check dl { margin: .35rem 0; }
.official-check dl div { display: grid; grid-template-columns: 5.8rem minmax(0,1fr); gap: .4rem; padding: .3rem 0; border-top: 1px solid var(--line); font-size: .61rem; }
.official-check dt { color: var(--ink-soft); }
.official-check dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.official-check small { color: var(--ink-soft); font-size: .57rem; }
.result-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .8rem; }
.result-card__actions a, .result-card__actions button { min-width: 0; min-height: 44px; display: grid; place-items: center; padding: .5rem; border: 1px solid var(--ink); border-radius: .45rem; background: transparent; text-decoration: none; font-size: .66rem; font-weight: 800; text-align: center; }
.result-card__actions button[aria-pressed="true"] { border-color: var(--moss-deep); background: rgba(207,228,223,.58); color: var(--moss-deep); }
.result-card__actions button:disabled { cursor: default; opacity: .68; }
.result-card__actions a { grid-column: 1 / -1; background: var(--ink); color: var(--white); }
.auth-handoff { grid-column: 1 / -1; padding: .8rem; border: 1px solid var(--moss); border-radius: .6rem; background: rgba(207,228,223,.55); }
.auth-handoff > b { display: block; font-size: .75rem; }
.auth-handoff p { margin: .25rem 0 .65rem; color: var(--ink-soft); font-size: .65rem; }
.auth-handoff > div { display: grid; grid-template-columns: 1fr 1fr auto; gap: .35rem; }
.auth-handoff a, .auth-handoff button { min-height: 44px !important; border-color: var(--ink) !important; background: var(--ink) !important; color: var(--white) !important; }
.result-card__actions .auth-handoff > div > a { grid-column: auto; }
.auth-handoff button { background: transparent !important; color: var(--ink) !important; }
.feedback-panel { margin-top: .7rem !important; padding-top: .65rem; border-top: 1px dashed var(--line); }
.feedback-panel > div { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.feedback-panel button { min-height: 40px; padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: .61rem; font-weight: 750; }
.feedback-panel button[aria-pressed="true"] { border-color: var(--moss); color: var(--moss-deep); }

/* Public, signed activity pages */
.shared-activity-page .mobile-nav { display: none !important; }
.shared-activity { min-width: 0; overflow: clip; }
.shared-activity__hero { position: relative; isolation: isolate; padding-block: clamp(3rem, 7vw, 6.5rem); overflow: clip; background: var(--moss); color: var(--white); }
.shared-activity__hero::before { content: ''; position: absolute; z-index: -1; width: min(50rem,75vw); aspect-ratio: 1; right: -16rem; top: -22rem; border: 1px solid rgba(255,255,255,.2); border-radius: 44% 56% 48% 52%; box-shadow: 0 0 0 3rem transparent,0 0 0 calc(3rem + 1px) rgba(255,255,255,.15),0 0 0 7rem transparent,0 0 0 calc(7rem + 1px) rgba(255,255,255,.1); transform: rotate(-16deg); }
.shared-activity__hero .eyebrow { color: var(--sun); }
.shared-activity__hero-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); gap: clamp(2rem,7vw,7rem); align-items: center; }
.shared-activity__intro { min-width: 0; }
.shared-activity__status { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.shared-activity__status span { padding: .36rem .58rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; color: rgba(255,255,255,.86); font-size: .65rem; font-weight: 800; letter-spacing: .03em; }
.shared-activity__intro h1 { max-width: 850px; font-size: clamp(3.1rem,8vw,7.2rem); }
.shared-activity__place { margin: 1rem 0 0; color: var(--sun); font-size: .77rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.shared-activity__lead { max-width: 720px; margin: 1.35rem 0 0; color: rgba(255,255,255,.78); font-size: clamp(1rem,1.5vw,1.18rem); }
.shared-activity__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.shared-activity .button--light { border-color: rgba(255,255,255,.72); background: transparent; color: var(--white); }
.shared-activity .button--light:hover { background: rgba(255,255,255,.1); }
.shared-route-card { min-width: 0; padding: clamp(1.1rem,3vw,1.7rem); border: 1px solid rgba(255,255,255,.55); border-radius: 2.2rem .7rem 1.5rem .7rem; background: var(--paper); color: var(--ink); box-shadow: 12px 14px 0 rgba(20,44,54,.25); transform: rotate(.6deg); }
.shared-route-card__weather { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; }
.shared-route-card__weather strong { font-family: var(--display); font-size: 3.2rem; font-weight: 500; line-height: 1; }
.shared-route-card__weather span { display: grid; }
.shared-route-card__weather small { color: var(--ink-soft); }
.shared-route-card__line { position: relative; display: flex; justify-content: space-between; align-items: center; min-height: 8.5rem; margin: 1rem 0; }
.shared-route-card__line::before { content: ''; position: absolute; left: 2.2rem; right: 2.2rem; top: 50%; border-top: 2px dashed var(--moss); }
.shared-route-card__line i { position: absolute; left: 48%; top: calc(50% - .65rem); width: 1.3rem; height: 1.3rem; border: 2px solid var(--paper); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 1px var(--ink); }
.shared-route-card__line span, .shared-route-card__line b { position: relative; z-index: 1; padding: .45rem .65rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--paper); font-size: .68rem; }
.shared-route-card dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; margin: 0; }
.shared-route-card dl div { min-width: 0; padding: .7rem .45rem; border-top: 1px solid var(--line); }
.shared-route-card dt { color: var(--ink-soft); font-size: .62rem; text-transform: uppercase; }
.shared-route-card dd { margin: .1rem 0 0; font-family: var(--display); font-size: 1.3rem; }
.shared-route-card > p { margin: .8rem 0 0; color: var(--ink-soft); font-size: .7rem; font-weight: 750; }

.shared-activity__body { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(310px,.75fr); gap: clamp(2rem,6vw,5rem); padding-block: clamp(4rem,8vw,8rem); }
.shared-activity__main, .shared-practical { min-width: 0; }
.shared-section-heading { max-width: 680px; }
.shared-section-heading h2 { font-size: clamp(2.5rem,5vw,4.7rem); }
.activity-timeline { margin: 2.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.activity-timeline li { display: grid; grid-template-columns: 3rem minmax(0,1fr); gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.activity-timeline li > span { color: var(--coral); font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.activity-timeline b { display: block; font-family: var(--display); font-size: 1.45rem; font-weight: 600; }
.activity-timeline p { margin: .35rem 0 0; color: var(--ink-soft); }
.shared-mission { position: relative; margin-top: 2rem; padding: clamp(1.4rem,4vw,2.2rem); overflow: hidden; border: 1px dashed var(--ink); border-radius: .7rem 2.4rem .7rem 1.5rem; background: var(--sun); box-shadow: 7px 8px 0 var(--paper-deep); }
.shared-mission::after { content: '↝'; position: absolute; right: 1.3rem; top: .4rem; color: rgba(20,44,54,.15); font-family: var(--display); font-size: 6rem; }
.shared-mission > span { font-size: .67rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.shared-mission h2 { max-width: 660px; margin-top: 1.6rem; font-size: clamp(2rem,4vw,3.7rem); }
.shared-mission p { position: relative; max-width: 700px; margin-bottom: 0; }
.shared-experience-steps { position: relative; display: grid; gap: .55rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.shared-experience-steps li { display: grid; grid-template-columns: 1.7rem minmax(0,1fr); gap: .55rem; align-items: start; }
.shared-experience-steps li span { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--white); font-size: .65rem; font-weight: 900; }
.shared-experience-steps li p { margin: 0; font-size: .82rem; }
.shared-experience-meta { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px dashed rgba(20,44,54,.35); }
.shared-experience-meta div { min-width: 0; }
.shared-experience-meta dt { color: var(--ink-soft); font-size: .62rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.shared-experience-meta dd { margin: .18rem 0 0; font-size: .72rem; overflow-wrap: anywhere; }
.shared-score { margin-top: 2rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.shared-score summary { min-height: 50px; display: flex; align-items: center; cursor: pointer; font-weight: 850; }
.shared-score ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.shared-score li { display: flex; justify-content: space-between; gap: .5rem; padding: .55rem .65rem; background: var(--white); font-size: .68rem; }
.shared-score li span { color: var(--ink-soft); }

.shared-practical { position: sticky; top: 1rem; align-self: start; padding: clamp(1.3rem,3vw,2rem); border: 1px solid var(--ink); border-radius: 2rem .7rem 1.5rem .7rem; background: var(--white); box-shadow: 8px 9px 0 var(--sky); }
.shared-practical h2 { font-size: 2.6rem; }
.shared-practical dl { margin: 1.5rem 0 0; border-top: 1px solid var(--ink); }
.shared-practical dl > div { display: grid; grid-template-columns: 6.2rem minmax(0,1fr); gap: .8rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.shared-practical dt { color: var(--ink-soft); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.shared-practical dd { min-width: 0; margin: 0; font-size: .78rem; font-weight: 750; }
.shared-flags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.shared-flags span { padding: .33rem .5rem; border-radius: 999px; background: var(--paper); font-size: .64rem; font-weight: 750; }
.shared-caveat { margin: 1rem 0 0; padding: .75rem; border-left: 3px solid var(--coral); background: #f7ede5; color: var(--ink-soft); font-size: .68rem; }
.shared-practical__actions { display: grid; gap: .55rem; margin-top: 1rem; }

.shared-sources { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,6vw,5rem); padding-block: clamp(3.5rem,7vw,6rem); border-top: 1px solid var(--ink); }
.shared-sources > div > p:last-child { max-width: 640px; color: var(--ink-soft); }
.shared-sources > ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.shared-sources > ul li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .72rem; }
.shared-sources > ul li span { color: var(--ink-soft); text-align: right; }
.shared-sources > dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; margin: 0; }
.shared-sources > dl div { padding: .9rem; background: var(--paper-deep); }
.shared-sources dt { color: var(--ink-soft); font-size: .64rem; text-transform: uppercase; }
.shared-sources dd { margin: .25rem 0 0; font-size: .75rem; font-weight: 800; }
.shared-next { padding-block: clamp(3rem,7vw,6rem); background: var(--sky); }
.shared-next .wrap { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.shared-next h2 { max-width: 780px; font-size: clamp(2.4rem,5vw,4.6rem); }

.app-toast { position: fixed; z-index: 120; left: 50%; bottom: max(1.2rem,env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 2rem); padding: .75rem 1rem; border: 1px solid var(--ink); border-left: 5px solid var(--moss); border-radius: .65rem; background: var(--white); box-shadow: var(--shadow); color: var(--ink); font-size: .76rem; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%,1rem); transition: opacity .18s ease,transform .18s ease; }
.app-toast.is-visible { opacity: 1; transform: translate(-50%,0); }
.app-toast--error { border-left-color: var(--coral); }
.footer-install { width: fit-content; padding: 0; border: 0; background: transparent; color: rgba(244,239,223,.75); font: inherit; font-size: .78rem; text-align: left; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.footer-install:hover { color: var(--white); }
.pwa-update { position: fixed; z-index: 110; right: max(1rem,env(safe-area-inset-right)); bottom: max(1rem,env(safe-area-inset-bottom)); width: min(28rem,calc(100% - 2rem)); display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .65rem; align-items: center; padding: .85rem; border: 1px solid var(--ink); border-radius: .8rem; background: var(--white); box-shadow: var(--shadow); }
.pwa-update div { min-width: 0; }
.pwa-update b, .pwa-update span { display: block; }
.pwa-update b { font-size: .78rem; }
.pwa-update span { margin-top: .18rem; color: var(--ink-soft); font-size: .65rem; }
.pwa-update button { min-height: 44px; padding: .55rem .75rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--white); font: inherit; font-size: .67rem; font-weight: 850; cursor: pointer; }
.pwa-update [data-pwa-later] { background: transparent; color: var(--ink); }

.auth-layout .site-header, .auth-layout .site-footer, .auth-layout .mobile-nav { display: none; }
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-page__visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2rem,5vw,5rem); background: var(--moss); color: var(--white); }
.auth-page__visual::before { content: ''; position: absolute; width: 35rem; aspect-ratio: 1; right: -13rem; top: -10rem; border: 1px solid rgba(255,255,255,.25); border-radius: 44%; box-shadow: 0 0 0 40px transparent,0 0 0 41px rgba(255,255,255,.22),0 0 0 90px transparent,0 0 0 91px rgba(255,255,255,.18); }
.auth-page__visual blockquote { position: relative; max-width: 550px; margin: auto 0; font-family: var(--display); font-size: clamp(2rem,4vw,4.6rem); line-height: 1; }
.auth-route { position: relative; display: flex; justify-content: space-between; }
.auth-route i { position: absolute; left: 3rem; right: 3rem; top: 50%; height: 2px; border-top: 2px dashed rgba(255,255,255,.5); }
.auth-route b { position: relative; z-index: 1; padding: .45rem .7rem; border: 1px solid white; border-radius: 999px; background: var(--moss); font-size: .7rem; }
.auth-card { width: min(490px, calc(100% - 2rem)); margin: auto; padding-block: 3rem; }
.auth-back { display: inline-block; margin-bottom: 3rem; font-size: .78rem; font-weight: 800; }
.auth-card h1 { font-size: clamp(2.7rem,5vw,4.9rem); }
.auth-lead { color: var(--ink-soft); }
.auth-trust { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 1.4rem; }
.auth-trust span { padding: .35rem .55rem; border-radius: 999px; background: var(--paper-deep); color: var(--ink-soft); font-size: .61rem; font-weight: 800; }
.auth-field { display: grid; gap: .35rem; margin-bottom: .85rem; }
.auth-field > label { font-size: .72rem; font-weight: 800; }
.password-field { position: relative; min-width: 0; }
.password-field input { padding-right: 5.6rem; }
.password-field button { position: absolute; right: .35rem; top: 50%; min-height: 38px; transform: translateY(-50%); padding: .4rem .58rem; border: 0; border-radius: .4rem; background: var(--paper-deep); color: var(--ink); font: inherit; font-size: .64rem; font-weight: 850; cursor: pointer; }
.password-field button:focus-visible { outline: 3px solid var(--sky); }
.caps-lock-hint { margin: 0; color: #8e3024; font-size: .66rem; font-weight: 800; }
.auth-password-rules { display: flex; flex-wrap: wrap; gap: .35rem .65rem; margin: .25rem 0 .2rem; padding: 0; list-style: none; }
.auth-password-rules li { color: var(--ink-soft); font-size: .62rem; }
.auth-password-rules li::before { content: '○'; margin-right: .25rem; }
.auth-password-rules li.is-met { color: var(--moss-deep); font-weight: 800; }
.auth-password-rules li.is-met::before { content: '✓'; }
.auth-card form[aria-busy="true"] { opacity: .78; }
.auth-card form button[type="submit"]:disabled { cursor: wait; }
.google-button { min-height: 50px; display: flex; justify-content: center; align-items: center; gap: .7rem; margin: 1.6rem 0 .5rem; border: 1px solid var(--ink); border-radius: .7rem; background: var(--white); text-decoration: none; font-weight: 800; }
.google-button span { color: #4285f4; font-size: 1.2rem; }
.or { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: var(--ink-soft); font-size: .68rem; text-transform: uppercase; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-below { color: var(--ink-soft); font-size: .75rem; text-align: center; }

.app-page, .prose-page { padding-block: clamp(3rem,7vw,7rem); }
.app-page h1, .prose-page h1 { max-width: 900px; font-size: clamp(2.8rem,6vw,6rem); }
.page-lead { max-width: 650px; color: var(--ink-soft); font-size: 1.1rem; }
.account-nav { display: flex; flex-wrap: wrap; gap: .45rem; width: fit-content; max-width: 100%; margin-bottom: clamp(2.5rem,6vw,5rem); padding: .4rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); }
.account-nav a { min-height: 42px; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; border-radius: 999px; color: var(--ink-soft); font-size: .72rem; font-weight: 850; text-decoration: none; }
.account-nav a:hover { background: var(--paper-deep); color: var(--ink); }
.account-nav a[aria-current="page"] { background: var(--ink); color: var(--white); }
.account-nav small { min-width: 1.35rem; min-height: 1.35rem; display: inline-grid; place-items: center; padding-inline: .25rem; border-radius: 999px; background: var(--paper-deep); color: var(--ink); font-size: .62rem; }
.account-nav a[aria-current="page"] small { background: var(--sun); }
.app-greeting, .library-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3rem; }
.library-heading > div { min-width: 0; }
.library-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin-bottom: clamp(3rem,6vw,5rem); }
.library-summary a { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: baseline; gap: .15rem .8rem; padding: clamp(1rem,3vw,1.45rem); border: 1px solid var(--ink); border-radius: .55rem 1.8rem .55rem 1.2rem; background: var(--white); color: var(--ink); text-decoration: none; transition: transform .18s ease,box-shadow .18s ease; }
.library-summary a:nth-child(2) { background: var(--sky); border-radius: 1.8rem .55rem 1.2rem .55rem; }
.library-summary a:nth-child(3) { background: var(--sun); }
.library-summary a:hover { transform: translateY(-3px); box-shadow: 5px 6px 0 var(--paper-deep); }
.library-summary strong { grid-row: 1 / 3; align-self: center; font-family: var(--display); font-size: clamp(2.2rem,5vw,4rem); line-height: .8; }
.library-summary span { min-width: 0; font-size: .78rem; font-weight: 900; }
.library-summary small { color: var(--ink-soft); font-size: .64rem; }
.app-split { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(260px,.55fr); gap: 2rem; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--ink); }
.section-head .eyebrow { margin: 0 0 .3rem; }
.section-head h2 { margin: 0; font-size: 2rem; }
.section-head > a { flex: none; font-size: .72rem; font-weight: 850; }
.profile-note { align-self: start; padding: 1.5rem; border: 1px solid var(--ink); border-radius: 2rem .6rem 1.5rem .6rem; background: var(--sky); }
.profile-note > span { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.profile-note h3 { margin: 1.6rem 0 1rem; }
.profile-note dl { margin: 0; border-top: 1px solid rgba(20,44,54,.25); }
.profile-note dl div { display: grid; grid-template-columns: 5.1rem minmax(0,1fr); gap: .6rem; padding: .6rem 0; border-bottom: 1px solid rgba(20,44,54,.2); }
.profile-note dt { font-size: .68rem; font-weight: 900; }
.profile-note dd { margin: 0; color: var(--ink-soft); font-size: .68rem; }
.profile-note p { color: var(--ink-soft); font-size: .76rem; }
.saved-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; margin-top: 2rem; }
.saved-item { min-width: 0; min-height: 255px; display: flex; flex-direction: column; padding: 1.2rem; border: 1px solid var(--line); background: var(--white); transition: opacity .18s ease,transform .18s ease; }
.saved-item:nth-child(3n+1) { border-radius: .5rem 1.6rem .5rem 1rem; }
.saved-item.is-removing { opacity: 0; transform: scale(.97); pointer-events: none; }
.library-card__top { display: flex; justify-content: space-between; align-items: start; gap: .8rem; }
.library-card__top span { min-width: 0; color: var(--ink-soft); font-size: .63rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; overflow-wrap: anywhere; }
.library-card__top time { flex: none; color: var(--ink-soft); font-size: .6rem; }
.saved-item h3 { margin: .65rem 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.library-card__facts { display: flex; flex-wrap: wrap; gap: .45rem; margin: .1rem 0 .7rem; }
.library-card__facts b, .library-card__facts span { padding: .28rem .45rem; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .62rem; font-weight: 850; }
.library-card__description { display: -webkit-box; margin: 0 0 1rem; overflow: hidden; color: var(--ink-soft); font-size: .72rem; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.library-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--line); }
.library-card__actions a, .library-card__actions button { min-height: 44px; display: inline-flex; align-items: center; padding: .42rem .65rem; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: .66rem; font-weight: 850; line-height: 1.1; text-decoration: none; cursor: pointer; }
.library-card__actions a:hover, .library-card__actions button:hover { background: var(--ink); color: var(--white); }
.library-card__actions button:disabled { opacity: .55; cursor: wait; }
.library-card__actions .library-card__remove { margin-left: auto; border-color: transparent; color: #943827; text-decoration: underline; }
.library-card__actions .library-card__remove:hover { background: #943827; color: var(--white); text-decoration: none; }
.library-status { width: 1px; height: 1px; position: absolute; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.empty-list { margin: 3rem 0; padding: clamp(2rem,6vw,4rem); border: 1px dashed var(--ink); text-align: center; }
.empty-list > span { color: var(--coral); font-size: 3rem; }
.empty-list p { max-width: 520px; margin-inline: auto; color: var(--ink-soft); }
.profile-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.profile-heading > div { min-width: 0; }
.account-security-status { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; border: 1px solid var(--moss); border-radius: .65rem 1.8rem .65rem 1.2rem; background: #edf5ea; }
.account-security-status > span { flex: 0 0 2.2rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--moss); color: var(--white); font-weight: 900; }
.account-security-status strong, .account-security-status p { display: block; margin: 0; }
.account-security-status p { margin-top: .15rem; color: var(--ink-soft); font-size: .68rem; }
.settings-block { margin-top: 2rem; padding: 1.5rem; background: var(--white); border: 1px solid var(--line); }
.settings-block h2 { font-size: 2rem; }
.settings-block__heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.settings-block__heading .eyebrow { margin: 0 0 .35rem; }
.settings-block__heading h2 { margin: 0; }
.security-badge { flex: none; padding: .35rem .55rem; border-radius: 999px; background: #dfeeda; color: var(--moss-deep); font-size: .61rem; font-weight: 900; }
.settings-block dl div { display: grid; grid-template-columns: 10rem 1fr; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.settings-block dt { color: var(--ink-soft); }
.settings-block dd { margin: 0; font-weight: 800; }
.settings-explainer { color: var(--ink-soft); font-size: .72rem; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.profile-actions form { margin: 0; }
.preference-form { margin-top: 2rem; padding: clamp(1.1rem,3vw,1.8rem); border: 1px solid var(--ink); border-radius: .7rem 2rem .7rem 1.4rem; background: var(--white); box-shadow: 7px 8px 0 var(--sun); }
.preference-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; margin-bottom: 1rem; }
.preference-grid label { min-width: 0; display: grid; gap: .35rem; color: var(--ink-soft); font-size: .68rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.preference-grid select { width: 100%; min-width: 0; min-height: 48px; padding: .68rem .75rem; border: 1px solid var(--line); border-radius: .55rem; background: #faf7ee; text-transform: none; }
.preference-grid select:focus { border-color: var(--moss); outline: 3px solid rgba(63,118,88,.13); }
.preference-form > p, .preference-privacy { color: var(--ink-soft); font-size: .72rem; }
.preference-privacy { margin-top: 1.2rem; padding-left: .8rem; border-left: 3px solid var(--moss); }
.danger-zone { border-color: rgba(177,61,44,.45); }
.danger-zone > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone > summary > span { display: grid; gap: .2rem; }
.danger-zone > summary strong { font-family: var(--display); font-size: 1.6rem; }
.danger-zone > summary small { color: var(--ink-soft); font-size: .66rem; }
.danger-zone > summary::after { content: '+'; flex: none; color: #a43e2d; font-size: 1.5rem; }
.danger-zone[open] > summary::after { content: '−'; }
.danger-zone__content { padding-top: 1.2rem; }
.danger-zone__content > p { color: var(--ink-soft); font-size: .76rem; }
.danger-zone form { display: grid; gap: .7rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(177,61,44,.25); }
.danger-zone form label { display: grid; gap: .4rem; color: var(--ink-soft); font-size: .7rem; }
.danger-zone form input { width: 100%; min-height: 46px; padding: .65rem .75rem; border: 1px solid rgba(177,61,44,.55); border-radius: .5rem; background: #fffaf8; }
.danger-button { width: fit-content; min-height: 44px; padding: .55rem .75rem; border: 1px solid #a43e2d; border-radius: .5rem; background: transparent; color: #a43e2d; font: inherit; font-size: .7rem; font-weight: 850; cursor: pointer; }
.danger-button:disabled { opacity: .4; cursor: not-allowed; }
.danger-button:not(:disabled):hover { background: #a43e2d; color: var(--white); }

.prose-page { max-width: 960px; }
.prose-body { max-width: 760px; margin-top: 3rem; font-size: 1.03rem; }
.prose-body h2 { margin-top: 2.4rem; font-size: 2rem; }
.prose-body p, .prose-body li { color: var(--ink-soft); }
.prose-body a { color: var(--moss-deep); }
.status-ledger { margin-top: 3rem; border-top: 1px solid var(--ink); }
.status-ledger div { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.status-ledger dd { margin: 0; font-weight: 800; }
.flash { position: fixed; z-index: 90; top: 94px; left: 50%; transform: translateX(-50%); width: min(560px,calc(100% - 2rem)); padding: .85rem 1rem; border: 1px solid var(--ink); border-radius: .65rem; background: var(--white); box-shadow: var(--shadow); font-weight: 750; font-size: .82rem; }
.flash--success { border-left: 5px solid var(--moss); }
.flash--error { border-left: 5px solid var(--coral); }

.site-footer { padding-top: 5rem; background: var(--ink); color: var(--paper); }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3,1fr); gap: 2rem; padding-bottom: 4rem; }
.brand--footer .brand-mark { width: 3.2rem; height: 3.2rem; }
.footer-grid > div { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.footer-grid > div:first-child p { max-width: 330px; color: rgba(244,239,223,.6); font-size: .8rem; }
.footer-grid > div > b { margin-bottom: .5rem; color: var(--sun); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.footer-grid a { width: fit-content; color: rgba(244,239,223,.75); font-size: .78rem; text-decoration: none; }
.footer-grid a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; gap: 2rem; padding-block: 1rem; border-top: 1px solid rgba(244,239,223,.15); color: rgba(244,239,223,.5); font-size: .65rem; }
.mobile-nav { display: none; }

@media (max-width: 980px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { max-width: 760px; }
  .route-board { width: min(620px,100%); margin-inline: auto; }
  .home-steps ol, .live-examples__grid { grid-template-columns: 1fr; }
  .home-install { grid-template-columns: auto minmax(0,1fr); }
  .home-install__actions { grid-column: 1 / -1; min-width: 0; grid-template-columns: auto 1fr; align-items: center; }
  .install-hero { grid-template-columns: 1fr; }
  .install-preview { width: min(560px,100%); margin-inline: auto; }
  .live-examples article { min-height: 190px; }
  .account-benefits .wrap { grid-template-columns: 1fr 1fr; }
  .account-benefits .button { grid-column: 1 / -1; width: fit-content; }
  .three-plans { grid-template-columns: 1fr 1fr; }
  .plan-teaser--wild { grid-column: 1 / -1; min-height: 240px; }
  .method-grid, .source-window { grid-template-columns: 1fr; }
  .planner-grid { grid-template-columns: 1fr; }
  .planner-map-panel { position: relative; top: 0; order: 0; }
  .planner-map { height: 420px; min-height: 360px; }
  .result-grid { grid-template-columns: 1fr 1fr; }
  .result-card:nth-child(2) { transform: none; }
  .result-card:nth-child(3) { grid-column: 1 / -1; }
  .app-split { grid-template-columns: 1fr; }
  .auth-page { grid-template-columns: .8fr 1.2fr; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2; }
}

@media (max-width: 720px) {
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .wrap { width: min(100% - 1.2rem,1180px); }
  .intent-planner__input { grid-template-columns: 1fr; }
  .intent-planner__input button { width: 100%; }
  .site-header__inner { min-height: 68px; }
  .brand-mark { width: 2.45rem; height: 2.45rem; }
  .brand small { display: none; }
  .header-login, .header-actions form { display: none; }
  .header-plan { min-height: 44px; }
  .hero { min-height: 0; }
  .hero__grid { padding-block: 3rem 4rem; gap: 3rem; }
  .hero h1 { font-size: clamp(3rem,14vw,4.6rem); }
  .hero__lead { font-size: 1rem; }
  .hero__actions { align-items: stretch; flex-direction: column; }
  .hero__actions .button, .hero__actions .text-link { width: 100%; justify-content: center; }
  .trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .route-board { min-height: 420px; padding: .75rem; border-radius: 1.8rem .7rem 1.5rem .7rem; transform: none; }
  .route-board__weather { transform: rotate(-1deg) translate(-.4rem,-.5rem); }
  .route-board__weather small { display: none; }
  .route-board__map { height: 165px; margin: .3rem; }
  .route-ticket { padding: 1.1rem; }
  .route-ticket h2 { font-size: 1.65rem; }
  .signal-strip .wrap { min-height: 92px; display: grid; grid-template-columns: 1fr 1fr; justify-items: start; gap: .4rem; padding-block: .7rem; }
  .signal-strip span:last-child { grid-column: 1 / -1; }
  .home-steps, .live-examples { padding-block: 4rem; }
  .home-steps li { padding-inline: .35rem; }
  .home-install { grid-template-columns: 1fr; margin-inline: .6rem; box-shadow: 5px 6px 0 var(--ink); }
  .home-install__mark { width: 5rem; }
  .home-install__actions { grid-column: auto; grid-template-columns: 1fr; }
  .install-hero { min-height: 0; padding-block: 3rem 4rem; }
  .install-hero__actions { align-items: stretch; flex-direction: column; }
  .install-hero__actions .button { width: 100%; }
  .install-preview { padding-block: 2.3rem; transform: none; box-shadow: 6px 7px 0 var(--ink); }
  .install-guide__grid, .install-notes { grid-template-columns: 1fr; }
  .install-guide article { min-height: 190px; }
  .account-benefits .wrap { grid-template-columns: 1fr; }
  .account-benefits .button { grid-column: auto; width: 100%; }
  .product-moment { padding-block: 5rem; }
  .three-plans { grid-template-columns: 1fr; }
  .plan-teaser, .plan-teaser--safe, .plan-teaser--fresh, .plan-teaser--wild { grid-column: auto; min-height: 250px; transform: none; }
  .method-section, .source-window { padding-block: 5rem; }
  .source-ledger { box-shadow: 7px 8px 0 var(--sky); }
  .source-ledger p { grid-template-columns: 1fr; gap: .25rem; }
  .final-cta .wrap { flex-direction: column; align-items: start; }
  .sun-stamp { width: 7rem; padding: 1.5rem; }
  .planner-top { align-items: start; flex-direction: column; padding-top: 1.7rem; }
  .weather-pill { align-self: stretch; border-radius: .8rem; }
  .planner-grid { gap: .8rem; }
  .planner-form { box-shadow: 4px 5px 0 var(--sun); }
  .guest-mode { grid-template-columns: auto minmax(0,1fr); }
  .guest-mode > a { grid-column: 2; white-space: normal; }
  .planner-progress button { font-size: .55rem; }
  .planner-step__actions { align-items: stretch; flex-direction: column-reverse; }
  .planner-step__actions > span { display: none; }
  .planner-step__actions .button { width: 100%; }
  .origin-row { grid-template-columns: 1fr; }
  .location-button { width: 100%; max-width: none; }
  .choice-grid { grid-template-columns: 1fr; }
  .planner-review > div { grid-template-columns: 4.5rem minmax(0,1fr) auto; }
  .field-group { grid-template-columns: 1.7rem minmax(0,1fr); }
  .segmented { grid-template-columns: 1fr 1fr; }
  .icon-options { grid-template-columns: 1fr 1fr; }
  .fine-tune__grid { grid-template-columns: 1fr; }
  .planner-map { height: 245px; min-height: 230px; }
  .results-heading { align-items: start; flex-direction: column; }
  .result-filter-summary { align-items: stretch; flex-direction: column; }
  .result-filter-summary button { width: 100%; }
  .result-carousel-toolbar { display: flex; justify-content: center; align-items: center; gap: .7rem; margin: -1rem 0 .9rem; }
  .result-carousel-toolbar button { width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 1.15rem; font-weight: 900; }
  .result-carousel-toolbar button:disabled { opacity: .35; }
  .result-carousel-toolbar output { min-width: 4.6rem; color: var(--ink-soft); font-size: .72rem; font-weight: 800; text-align: center; }
  .result-grid { display: flex; gap: .75rem; width: 100%; overflow-x: auto; padding: .25rem .35rem .9rem; scroll-padding-inline: .35rem; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; touch-action: pan-x pan-y; }
  .result-grid::-webkit-scrollbar { display: none; }
  .result-card { flex: 0 0 calc(100% - .7rem); scroll-snap-align: center; scroll-snap-stop: always; }
  .result-card:nth-child(2) { transform: none; }
  .result-card:nth-child(3) { grid-column: auto; }
  .shared-activity__hero-grid, .shared-activity__body, .shared-sources { grid-template-columns: 1fr; }
  .shared-route-card { width: min(620px,100%); transform: none; }
  .shared-practical { position: relative; top: 0; }
  .shared-sources > dl { grid-template-columns: 1fr; }
  .shared-experience-meta { grid-template-columns: 1fr; }
  .shared-next .wrap { align-items: stretch; flex-direction: column; }
  .app-toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .shared-activity-page .app-toast { bottom: max(1.2rem,env(safe-area-inset-bottom)); }
  .auth-page { grid-template-columns: 1fr; }
  .auth-page__visual { display: none; }
  .auth-card { padding: 2rem 0 5rem; }
  .account-nav { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-radius: 1.2rem; }
  .account-nav a { justify-content: center; }
  .app-greeting, .library-heading { align-items: stretch; flex-direction: column; }
  .profile-heading { align-items: stretch; flex-direction: column; }
  .profile-heading .button { width: 100%; }
  .library-summary { grid-template-columns: 1fr; }
  .library-summary a { min-height: 92px; }
  .saved-grid { grid-template-columns: 1fr; }
  .saved-item { min-height: 0; }
  .settings-block dl div { grid-template-columns: 1fr; gap: .2rem; }
  .settings-block__heading { align-items: stretch; flex-direction: column; }
  .security-badge { width: fit-content; }
  .preference-grid { grid-template-columns: 1fr; }
  .profile-actions, .profile-actions form, .profile-actions .button, .profile-actions button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; gap: .3rem; }
  .mobile-nav { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; min-height: 66px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; padding: .45rem max(.8rem,env(safe-area-inset-right)) max(.45rem,env(safe-area-inset-bottom)) max(.8rem,env(safe-area-inset-left)); border-top: 1px solid var(--ink); background: var(--white); }
  .mobile-nav--account { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .mobile-nav a { display: grid; place-items: center; min-height: 44px; text-decoration: none; font-size: .66rem; font-weight: 800; }
  .mobile-nav__plan { margin-inline: .5rem; border-radius: 999px; background: var(--coral); color: white; }
  .pwa-update { left: 1rem; right: 1rem; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; grid-template-columns: 1fr 1fr; }
  .pwa-update div { grid-column: 1 / -1; }
  .pwa-update [data-pwa-later] { grid-column: auto; }
}

@media (max-width: 360px) {
  .wrap { width: min(100% - .8rem,1180px); }
  .header-plan { padding-left: .7rem; }
  .header-plan span { width: 1.45rem; height: 1.45rem; }
  .hero h1 { font-size: 2.85rem; }
  .route-board__weather { grid-template-columns: auto 1fr; }
  .route-ticket dl { gap: .3rem; }
  .planner-progress button { font-size: 0; }
  .planner-progress button span { font-size: .65rem; }
  .planner-review > div { grid-template-columns: 1fr auto; }
  .planner-review dt { grid-column: 1 / -1; }
  .field-group { grid-template-columns: 1fr; }
  .field-number { padding: 0; }
  .result-card__actions { grid-template-columns: 1fr; }
  .result-card__actions a { grid-column: auto; }
  .shared-activity__actions { align-items: stretch; flex-direction: column; }
  .shared-activity__actions .button { width: 100%; }
  .shared-route-card dl { grid-template-columns: 1fr; }
  .shared-route-card dl div { display: flex; justify-content: space-between; gap: 1rem; }
  .shared-score ul { grid-template-columns: 1fr 1fr; }
  .shared-practical dl > div { grid-template-columns: 1fr; gap: .2rem; }
  .shared-sources > ul li { align-items: start; flex-direction: column; gap: .2rem; }
  .shared-sources > ul li span { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}