/* Keepwell (CASL Approved). Tokens from the CASL design system; Fraunces headings and Atkinson Hyperlegible body,
   as on thecasl.ca. Phone first: top bar and bottom tabs; a sidebar from 1000px. 1rem = 18px. */
:root {
  --casl-cream-50: #FDFBF6; --casl-cream-100: #F7F2EA; --casl-cream-200: #F0E8DA; --casl-cream-300: #E8DCC8; --casl-cream-400: #D9C9AE;
  --casl-ink-900: #2B2620; --casl-ink-800: #3B3529; --casl-ink-700: #574F42; --casl-ink-600: #6E6455; --casl-ink-500: #837A6C; --casl-ink-400: #A69C8C; --casl-ink-300: #C2B9A9; --casl-ink-200: #DDD5C5; --casl-ink-100: #EBE4D6;
  --casl-green-900: #17332B; --casl-green-800: #204239; --casl-green-700: #2F5D50; --casl-green-600: #3B7566; --casl-green-500: #4C8C7B; --casl-green-400: #6FA595; --casl-green-200: #C4DBD2; --casl-green-100: #E3ECE7; --casl-green-50: #F1F6F3;
  --casl-terracotta-800: #8C5335; --casl-terracotta-700: #A9663F; --casl-terracotta-600: #C97A4A; --casl-terracotta-500: #D8925F; --casl-terracotta-300: #EABF9C; --casl-terracotta-100: #F6E5D6; --casl-terracotta-50: #FBF2EA;
  --casl-gold-600: #B4863B; --casl-gold-100: #F3E7CE; --casl-clay-600: #B5533C; --casl-clay-100: #F4DFD8; --casl-slate-600: #3D6E80; --casl-slate-100: #DCE9EC;
  --surface-page: var(--casl-cream-100); --surface-canvas: var(--casl-cream-50); --surface-card: #FFFFFF; --surface-sunken: var(--casl-cream-200); --surface-tint: var(--casl-green-50);
  --border-subtle: var(--casl-ink-100); --border-default: var(--casl-ink-200); --border-strong: var(--casl-ink-400); --border-brand: var(--casl-green-600);
  --text-primary: var(--casl-ink-900); --text-secondary: var(--casl-ink-700); --text-muted: var(--casl-ink-600); --text-link: var(--casl-green-700);
  --success-fg: #365C42; --success-bg: var(--casl-green-100); --warning-fg: #7A5A1E; --warning-bg: var(--casl-gold-100); --danger-fg: #7C3C29; --danger-bg: var(--casl-clay-100); --info-fg: #2C5566; --info-bg: var(--casl-slate-100);
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px;
  --shadow-xs: 0 1px 2px rgba(43, 38, 32, .05); --shadow-sm: 0 2px 6px rgba(43, 38, 32, .06), 0 1px 2px rgba(43, 38, 32, .05);
  --shadow-md: 0 8px 20px rgba(43, 38, 32, .09), 0 2px 6px rgba(43, 38, 32, .06); --shadow-lg: 0 20px 45px rgba(43, 38, 32, .14), 0 6px 16px rgba(43, 38, 32, .08);
  --focus: 0 0 0 3px rgba(216, 146, 95, .55);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --top-h: 60px; --tab-h: 68px; --side-w: 292px;
  color-scheme: light;
}
html.hc { --text-secondary: var(--casl-ink-800); --text-muted: var(--casl-ink-700); --border-default: var(--casl-ink-400); --border-subtle: var(--casl-ink-300); --surface-page: var(--casl-cream-50); }
*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(18px * var(--zoom, 1)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body.noscroll { overflow: hidden; }
a { color: var(--text-link); text-underline-offset: 3px; }
a:hover { color: var(--casl-green-800); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-xs); }
[data-focus-head]:focus, [data-focus-head]:focus-visible { box-shadow: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { flex: none; display: block; }
.mark { width: 36px; height: 36px; flex: none; }
.boot { min-height: 100vh; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--casl-green-700); font-weight: 700; }
.boot .mark { width: 44px; height: 44px; }

/* ---------- type ---------- */
.display { font-family: var(--serif); font-weight: 600; font-size: clamp(2rem, 1.3rem + 3vw, 3.1rem); line-height: 1.08; letter-spacing: -.01em; color: var(--casl-green-900); text-wrap: balance; }
.h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.2rem); line-height: 1.12; letter-spacing: -.005em; color: var(--casl-green-900); text-wrap: balance; }
.h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 1.15rem + .8vw, 1.65rem); line-height: 1.2; color: var(--casl-green-900); }
.h3 { font-size: 1.12rem; font-weight: 700; line-height: 1.3; }
.lede { color: var(--text-secondary); font-size: 1.04rem; max-width: 62ch; }
.muted { color: var(--text-secondary); }
.small { font-size: .89rem; }
.fine { font-size: .83rem; color: var(--text-muted); max-width: 72ch; }
.center { text-align: center; margin-inline: auto; }
.strong { font-weight: 700; color: var(--text-primary); }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.eyebrow.accent { color: var(--casl-terracotta-700); }
.eyebrow.on-dark { color: var(--casl-green-200); }
.on-dark { color: var(--casl-cream-50) !important; }
.on-dark-muted { color: var(--casl-green-100); }
.page-head { display: flex; flex-direction: column; gap: 8px; }
.head-actions { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- layout ---------- */
.app { min-height: 100vh; min-height: 100dvh; }
.side { display: none; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 6px; min-height: calc(var(--top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; background: rgba(247, 242, 234, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.top-title { flex: 1; font-weight: 700; font-size: 1.05rem; color: var(--casl-green-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-back, .top-ask, .top-mark { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--casl-green-800); background: none; border: 0; text-decoration: none; }
.top-mark .mark { width: 32px; height: 32px; }
.top-ask { cursor: pointer; }
.top-back:active, .top-ask:active { background: var(--casl-green-100); }
.main { padding: 20px 16px calc(var(--tab-h) + 36px + env(safe-area-inset-bottom)); }
.page { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; animation: fadeUp .22s ease-out; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; min-height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--border-subtle); box-shadow: 0 -4px 16px rgba(43, 38, 32, .05); }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--tab-h); color: var(--text-muted); text-decoration: none; font-size: .78rem; font-weight: 700; position: relative; }
.tab[aria-current] { color: var(--casl-green-700); }
.tab[aria-current]::before { content: ''; position: absolute; top: 0; left: 26%; right: 26%; height: 3px; border-radius: 0 0 3px 3px; background: var(--casl-terracotta-600); }
.fab { display: none; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { align-items: flex-end; }
.grow { flex: 1 1 220px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.grid-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.align-start { align-items: start; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (min-width: 1000px) {
  .app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .app.app-ob, .app.app-print { display: block; }
  .side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 22px 14px 20px; background: var(--surface-canvas); border-right: 1px solid var(--border-subtle); }
  .topbar, .tabs { display: none; }
  .main { padding: 40px clamp(28px, 4vw, 56px) 120px; }
  .fab { display: inline-flex; align-items: center; gap: 10px; position: fixed; right: 24px; bottom: 24px; z-index: 40; padding: 14px 20px; border: 0; border-radius: var(--radius-md); background: var(--casl-green-700); color: var(--casl-cream-50); font-weight: 700; box-shadow: var(--shadow-lg); cursor: pointer; transition: background .16s ease-out; }
  .fab:hover { background: var(--casl-green-800); }
}

/* ---------- sidebar ---------- */
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 8px; text-decoration: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.28rem; color: var(--casl-green-800); line-height: 1.1; }
.brand-sub { font-size: .83rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; flex-direction: column; gap: 14px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); padding: 6px 12px 4px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: .95rem; transition: background .16s ease-out; }
.nav-item:hover { background: var(--casl-green-50); color: var(--casl-green-800); }
.nav-item[aria-current] { background: var(--casl-green-100); color: var(--casl-green-800); }
.nav-item[aria-current] .ic { color: var(--casl-terracotta-600); }
.nav-badge { margin-left: auto; background: var(--casl-terracotta-100); color: var(--casl-terracotta-800); border-radius: 999px; padding: 0 9px; font-size: .78rem; font-weight: 800; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.talk-card { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--casl-terracotta-50); border: 1px solid var(--casl-terracotta-300); border-radius: var(--radius-md); padding: 12px 14px; cursor: pointer; color: var(--casl-terracotta-800); }
.talk-card span { display: flex; flex-direction: column; color: var(--text-primary); font-size: .89rem; }
.talk-card strong { font-size: .95rem; }
.talk-card:hover { background: var(--casl-terracotta-100); }
.side-note { display: flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--text-muted); padding: 0 8px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 20px; border-radius: var(--radius-sm); border: 1.5px solid transparent; font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .16s ease-out, color .16s ease-out, border-color .16s ease-out, transform .1s ease-out; white-space: nowrap; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--casl-green-700); color: var(--casl-cream-50); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--casl-green-800); color: var(--casl-cream-50); }
.btn-accent { background: var(--casl-terracotta-600); color: #fff; box-shadow: var(--shadow-xs); }
.btn-accent:hover { background: var(--casl-terracotta-700); color: #fff; }
.btn-secondary { background: var(--casl-cream-300); color: var(--casl-ink-900); }
.btn-secondary:hover { background: var(--casl-cream-400); color: var(--casl-ink-900); }
.btn-outline { background: #fff; color: var(--casl-green-700); border-color: var(--border-brand); }
.btn-outline:hover { background: var(--casl-green-50); color: var(--casl-green-800); }
.btn-ghost { background: transparent; color: var(--casl-green-700); padding-inline: 12px; }
.btn-ghost:hover { background: var(--casl-green-50); color: var(--casl-green-800); }
.btn-ghost-dark { background: transparent; color: var(--casl-cream-50); }
.btn-ghost-dark:hover { background: rgba(255, 255, 255, .08); }
.btn-danger { background: var(--casl-clay-600); color: #fff; }
.btn-danger:hover { background: #9c4531; }
.btn-lg { min-height: 56px; padding: 14px 26px; font-size: 1.05rem; }
.btn-sm { min-height: 44px; padding: 8px 14px; font-size: .89rem; }
.btn-block { width: 100%; }
.btn .ext { opacity: .7; }
.icon-btn { width: 48px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.icon-btn:hover { background: var(--casl-cream-200); color: var(--text-primary); }
.icon-btn.on-dark { color: var(--casl-cream-50); }
.icon-btn.on-dark:hover { background: rgba(255, 255, 255, .1); }
.push-left { margin-right: auto; }

/* ---------- fields ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-sep { padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle); }
.field-label { font-size: .92rem; font-weight: 600; color: var(--text-secondary); }
.field-label .opt { font-weight: 400; color: var(--text-muted); }
.input { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-default); background: #fff; font-size: 1rem; color: var(--text-primary); transition: border-color .16s ease-out, box-shadow .16s ease-out; -webkit-appearance: none; appearance: none; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: var(--casl-ink-400); }
.input:focus { border-color: var(--border-brand); box-shadow: var(--focus); }
.has-err .input { border-color: var(--casl-clay-600); }
.field-help { font-size: .83rem; color: var(--text-muted); }
.field-err { display: flex; gap: 6px; align-items: center; font-size: .89rem; color: var(--danger-fg); font-weight: 600; }
.select-wrap { position: relative; }
.select { padding-right: 44px; cursor: pointer; }
.select-caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-muted); }
.search { position: relative; }
.search > .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search .input { padding-left: 46px; }
.file-btn { cursor: pointer; }
.file-btn:focus-within { box-shadow: var(--focus); }

/* segmented choices */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-btn { min-height: 48px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-default); background: #fff; font-weight: 600; font-size: .95rem; color: var(--text-primary); cursor: pointer; transition: background .16s ease-out, border-color .16s ease-out, color .16s ease-out; }
.seg-btn:hover { border-color: var(--casl-green-500); }
.seg-btn[aria-checked="true"] { background: var(--casl-green-700); border-color: var(--casl-green-700); color: var(--casl-cream-50); }
.seg-lg .seg-btn { min-height: 56px; padding: 14px 20px; font-size: 1.02rem; }
.seg-pill .seg-btn { border-radius: 999px; }
.seg-dark .seg-btn { background: transparent; border-color: var(--casl-green-500); color: var(--casl-cream-50); }
.seg-dark .seg-btn:hover { border-color: var(--casl-cream-50); }
.seg-dark .seg-btn[aria-checked="true"] { background: var(--casl-cream-50); border-color: var(--casl-cream-50); color: var(--casl-green-900); }
.seg-rate { flex-wrap: nowrap; gap: 5px; }
.seg-rate .seg-btn { flex: 1; min-height: 44px; padding: 6px 0; min-width: 0; font-weight: 700; }
/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--border-default); background: #fff; font-weight: 600; font-size: .92rem; color: var(--text-primary); cursor: pointer; transition: all .16s ease-out; }
.chip:hover { border-color: var(--casl-green-600); background: var(--casl-green-50); }
.chip[aria-pressed="true"] { background: var(--casl-green-100); border-color: var(--casl-green-600); color: var(--casl-green-800); }
/* switch */
.switch { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; background: none; border: 0; cursor: pointer; text-align: left; font-size: 1rem; color: var(--text-primary); }
.switch-track { width: 52px; height: 30px; flex: none; border-radius: 999px; background: var(--casl-ink-300); position: relative; transition: background .16s ease-out; }
.switch-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left .16s ease-out; }
.switch[aria-checked="true"] .switch-track { background: var(--casl-green-700); }
.switch[aria-checked="true"] .switch-thumb { left: 25px; }
/* checkbox rows */
.check { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 48px; padding: 10px 0; background: none; border: 0; cursor: pointer; text-align: left; color: var(--text-primary); font-size: 1rem; }
.check-box { width: 26px; height: 26px; flex: none; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--border-strong); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #fff; transition: all .14s ease-out; }
.check[aria-checked="true"] .check-box { background: var(--casl-green-700); border-color: var(--casl-green-700); }
.check-text { display: flex; flex-direction: column; gap: 2px; }
.check-label { font-weight: 600; }
.check[aria-checked="true"] .check-label { color: var(--text-secondary); }
.check-sub { font-size: .89rem; color: var(--text-muted); }
.check-row { border-bottom: 1px solid var(--border-subtle); padding: 2px 0; }
.check-row:last-child { border-bottom: 0; }

/* ---------- cards & surfaces ---------- */
.card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(18px, 3.5vw, 26px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card > .btn, .card > a.btn { align-self: flex-start; }
.card > .btn-block { align-self: stretch; }
.card-dark { background: var(--casl-green-900); color: var(--casl-cream-50); border-color: var(--casl-green-900); }
.card-canvas { background: var(--surface-canvas); border-color: var(--border-default); box-shadow: none; }
.card-tint { background: var(--casl-green-50); border-color: var(--casl-green-200); box-shadow: none; }
.split-card { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.split-card > div:first-child { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.badge-neutral { background: var(--casl-cream-200); color: var(--casl-ink-700); }
.badge-success { background: var(--success-bg); color: var(--success-fg); }
.badge-warning { background: var(--warning-bg); color: var(--warning-fg); }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-md); font-size: .95rem; }
.note > .ic { margin-top: 2px; }
.note-info { background: var(--info-bg); color: var(--info-fg); }
.note-success { background: var(--success-bg); color: var(--success-fg); }
.note-warning { background: var(--warning-bg); color: var(--warning-fg); }
.callout { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--casl-terracotta-50); border: 1px solid var(--casl-terracotta-300); }
.callout > .ic { color: var(--casl-terracotta-700); }
.callout-quiet { background: var(--surface-canvas); border-color: var(--border-default); }
.callout-quiet > .ic { color: var(--casl-green-700); }
.callout-text { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; }
.callout-text span { color: var(--text-secondary); font-size: .92rem; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 36px 20px; border: 1.5px dashed var(--border-default); border-radius: var(--radius-lg); background: #fff; color: var(--text-secondary); }
.empty > .ic { color: var(--casl-green-500); }
.empty p { max-width: 46ch; }
.empty-line { color: var(--text-muted); font-size: .95rem; }
.sample-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--casl-gold-100); color: var(--warning-fg); font-weight: 600; }
.sample-bar span { flex: 1 1 200px; }

/* ---------- onboarding ---------- */
.app-ob { min-height: 100vh; }
.ob-brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--casl-green-800); }
.ob-brand.small { font-size: 1.05rem; }
.ob-brand.small .mark { width: 30px; height: 30px; }
.ob-steps { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: max(20px, env(safe-area-inset-top)) 14px 40px; }
.ob-card { width: 100%; max-width: 720px; margin-top: clamp(0px, 5vh, 56px); background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: clamp(20px, 5vw, 44px); display: flex; flex-direction: column; gap: 20px; }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ob-count { font-size: .83rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ob-bars { display: flex; gap: 8px; }
.ob-bars span { flex: 1; height: 6px; border-radius: 999px; background: var(--casl-cream-300); transition: background .25s ease-out; }
.ob-bars span.on { background: var(--casl-green-700); }
.ob-body { display: flex; flex-direction: column; gap: 20px; animation: fadeUp .22s ease-out; }
.ob-actions { padding-top: 4px; }
.join-card { background: var(--casl-green-50); border: 1px solid var(--casl-green-200); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.join-title { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--casl-green-900); }

/* ---------- overview ---------- */
.score-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; }
.ring { position: relative; flex: none; }
.ring svg { display: block; }
.ring-bg { fill: none; stroke: var(--casl-green-100); stroke-width: 12; }
.ring-fg { fill: none; stroke: var(--casl-green-700); stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .6s ease-out; }
.ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-score { font-family: var(--serif); font-size: 2.4rem; font-weight: 600; line-height: 1; color: var(--casl-green-900); }
.ring-of { font-size: .83rem; color: var(--text-muted); }
.pillars { flex: 1 1 180px; display: flex; flex-direction: column; gap: 12px; }
.pillar-top { display: flex; justify-content: space-between; font-size: .92rem; font-weight: 600; }
.bar { height: 10px; background: var(--casl-cream-200); border-radius: 999px; overflow: hidden; margin-top: 5px; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--casl-green-700); transition: width .5s ease-out; }
.next-card { gap: 12px; justify-content: center; align-items: flex-start; background-image: radial-gradient(circle at 100% 0%, rgba(201, 122, 74, .22), transparent 55%); }
.next-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.next-why { color: var(--casl-green-100); }
.next-meta { display: flex; align-items: center; gap: 8px; color: var(--casl-green-200); font-size: .92rem; }
.life-item { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 14px 16px; background: var(--surface-tint); border-radius: var(--radius-md); }
.dots { margin: 6px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--text-secondary); }
.dots li::marker { color: var(--casl-terracotta-600); }
.task-card { gap: 6px; }
.tasks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.task { display: flex; gap: 12px; align-items: flex-start; padding: 10px 8px; margin: 0 -8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-primary); font-size: .95rem; font-weight: 600; min-height: 44px; }
.task:hover { background: var(--surface-tint); color: var(--text-primary); }
.task-mark { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; color: #fff; margin-top: 1px; }
.task.done .task-mark { background: var(--casl-green-600); border-color: var(--casl-green-600); }
.task.done .task-title { color: var(--text-muted); font-weight: 500; }
.checkin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; color: var(--text-secondary); font-size: .95rem; }
.checkin > .ic { color: var(--casl-green-700); }

/* ---------- my plan ---------- */
.plan-group { display: flex; flex-direction: column; gap: 10px; }
.plan-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.plan-item { display: flex; align-items: center; gap: 14px; padding: 16px; background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text-primary); transition: transform .18s ease-out, box-shadow .18s ease-out; min-height: 76px; }
.plan-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text-primary); }
.plan-ic { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--casl-green-50); color: var(--casl-green-700); display: inline-flex; align-items: center; justify-content: center; }
.plan-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.plan-name { font-weight: 700; font-size: 1.02rem; }
.plan-status { display: flex; align-items: center; gap: 4px; font-size: .89rem; color: var(--text-muted); }
.plan-status.ok { color: var(--success-fg); font-weight: 600; }
.plan-go { color: var(--casl-ink-400); }

/* ---------- plan sections ---------- */
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.role-card { gap: 12px; }
.prep-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.prep-row .field { flex: 1 1 200px; }
.prep-row .field.w-share { flex: 0 1 130px; }
.prep-row .icon-btn { margin-bottom: 2px; }
.total { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; padding: 6px 12px; border-radius: 999px; }
.total.ok { background: var(--success-bg); color: var(--success-fg); }
.total.warn { background: var(--warning-bg); color: var(--warning-fg); }
.choose { gap: 16px; }
.cand { background: #fff; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s ease-out; }
.cand.best { border-color: var(--casl-green-600); box-shadow: 0 0 0 3px var(--casl-green-100); }
.q { display: flex; flex-direction: column; gap: 6px; }
.q-text { font-size: .89rem; color: var(--text-secondary); line-height: 1.35; }
.cand-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.cand-total strong { font-family: var(--serif); font-size: 1.5rem; color: var(--casl-green-700); }
.best-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; background: #fff; border-radius: var(--radius-md); padding: 14px 18px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.stat { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 18px; }
.stat-label { font-size: .89rem; color: var(--text-muted); font-weight: 600; }
.stat-value { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.2; color: var(--casl-green-900); }
.stat-sub { font-size: .83rem; color: var(--text-muted); }
.list-group { display: flex; flex-direction: column; gap: 8px; }
.list, .list-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.list-card { padding: 4px 18px; gap: 0; }
.list-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 18px; border: 0; border-bottom: 1px solid var(--border-subtle); background: #fff; text-align: left; cursor: pointer; text-decoration: none; color: var(--text-primary); }
.list-card .list-row { padding-inline: 0; }
.list-row:last-child { border-bottom: 0; }
.list-row:hover { background: var(--surface-tint); color: var(--text-primary); }
.list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-title { font-weight: 700; }
.list-sub { font-size: .89rem; color: var(--text-muted); }
.list-value { font-weight: 700; white-space: nowrap; }
.list-go { color: var(--casl-ink-400); }
.path { gap: 8px; }
.path-total { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; color: var(--casl-green-700); }
.path-item { border-top: 1px solid var(--border-subtle); padding-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.path-row { display: flex; justify-content: space-between; gap: 8px; }
.mini-warn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: var(--warning-bg); color: var(--warning-fg); border-radius: 8px; padding: 4px 10px; font-size: .83rem; font-weight: 700; }
.rcp { display: grid; grid-template-columns: minmax(90px, 180px) 1fr auto; gap: 12px; align-items: center; padding: 6px 0; }
.rcp .bar { margin: 0; }
.rcp-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcp-val { font-weight: 700; }
.est { margin: 0; }
.est-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.est-row dt { display: flex; flex-direction: column; }
.est-row dt small { color: var(--text-muted); font-size: .83rem; }
.est-row dd { margin: 0; font-weight: 600; white-space: nowrap; }
.est-row.total { border-bottom: 0; }
.est-row.total dt span, .est-row.total dd { font-weight: 800; font-size: 1.1rem; }
.liq-row { display: flex; justify-content: space-between; gap: 8px; }
.verdict { border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; }
.verdict-success { background: var(--success-bg); color: var(--success-fg); }
.verdict-warning { background: var(--warning-bg); color: var(--warning-fg); }
.verdict-neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border-radius: var(--radius-md); border: 1.5px solid var(--border-subtle); background: #fff; cursor: pointer; color: var(--text-primary); transition: border-color .16s ease-out, background .16s ease-out; min-height: 88px; }
.tile:hover { border-color: var(--casl-green-500); }
.tile.on { border-color: var(--casl-green-600); background: var(--casl-green-50); }
.tile-top { display: flex; justify-content: space-between; gap: 8px; width: 100%; }
.tile-name { font-weight: 700; }
.tile-count { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.tile-desc { font-size: .83rem; color: var(--text-secondary); line-height: 1.4; }
.vlist { display: flex; flex-direction: column; }
.vitem { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.vitem-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.file-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 12px; border-radius: 999px; border: 0; background: var(--casl-green-50); color: var(--casl-green-800); font-weight: 600; font-size: .85rem; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip.static { cursor: default; margin-top: 0; }
.add-box { background: var(--surface-canvas); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.file-preview { width: 100%; max-height: 60vh; object-fit: contain; border-radius: var(--radius-md); background: var(--casl-cream-200); }

/* hero art on section pages */
.hero-art { display: grid; grid-template-columns: 1fr; border-radius: var(--radius-xl); overflow: hidden; background: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.hero-art .art { display: block; aspect-ratio: 16 / 8; overflow: hidden; }
.hero-art .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-copy { padding: clamp(18px, 3.5vw, 30px); display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 1100px) { .hero-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hero-art .art { aspect-ratio: auto; min-height: 280px; } .hero-copy { justify-content: center; } }

/* your people */
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.step3 { background: var(--surface-tint); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.step-n { width: 34px; height: 34px; border-radius: 50%; background: var(--casl-green-700); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 4px; }
.person-head { display: flex; gap: 12px; align-items: center; }
.avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--casl-terracotta-100); color: var(--casl-terracotta-800); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; }
.packet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; border-top: 1px solid var(--border-subtle); }
.packet-row > span { flex-basis: 100%; }
.preview { gap: 16px; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.pv-cell { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-md); padding: 12px 14px; background: rgba(255, 255, 255, .07); color: var(--casl-green-200); }
.pv-cell div { display: flex; flex-direction: column; font-size: .89rem; }
.pv-cell strong { font-size: .95rem; }
.pv-cell.on { background: var(--casl-cream-50); color: var(--casl-green-900); }
.roadmap { background: #fff; color: var(--text-primary); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 14px; }

/* learn & talk */
.script { gap: 16px; }
.script-text { width: 100%; min-height: 220px; border-radius: var(--radius-md); border: 0; background: var(--casl-cream-50); color: var(--text-primary); padding: 18px 20px; font-size: 1.05rem; line-height: 1.65; resize: vertical; }
.script-text:focus { box-shadow: var(--focus); }
.acc { background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.acc-head { width: 100%; display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 60px; padding: 14px 18px; border: 0; background: #fff; text-align: left; cursor: pointer; color: var(--text-primary); }
.acc-head > span { display: flex; flex-direction: column; }
.acc-title { font-weight: 700; }
.acc-meta { font-size: .83rem; color: var(--text-muted); }
.acc-ic { color: var(--casl-green-700); }
.acc-body { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 10px; color: var(--text-secondary); animation: fadeUp .18s ease-out; }
.exec { gap: 16px; }
.exec-phase { display: flex; flex-direction: column; gap: 10px; }
.exec-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.exec-steps li { padding-left: 4px; }
.exec-steps li::marker { color: var(--casl-terracotta-700); font-weight: 800; }
.exec-steps strong { display: block; }
.exec-steps span { color: var(--text-secondary); font-size: .92rem; }

/* help */
.flag { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.flag-main { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.flag-pro { display: flex; align-items: center; gap: 6px; color: var(--casl-terracotta-800); font-weight: 600; font-size: .92rem; }
.flag-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.req-done { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ask-casl { gap: 16px; }
.needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 8px; }
.need { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 12px 16px; border-radius: var(--radius-md); border: 1.5px solid var(--border-default); background: #fff; font-weight: 600; text-align: left; cursor: pointer; color: var(--text-primary); transition: border-color .16s ease-out, background .16s ease-out; }
.need:hover { border-color: var(--casl-green-600); background: var(--casl-green-50); }
.need .ic { color: var(--casl-ink-400); }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px 22px; margin: 0; }
.summary div { border-top: 1px solid var(--border-subtle); padding-top: 8px; }
.summary dt { font-size: .83rem; color: var(--text-muted); }
.summary dd { margin: 0; font-weight: 600; }
.topic { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--casl-terracotta-50); color: var(--casl-terracotta-800); font-weight: 700; }
.ref-card { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.danger-zone { border-color: var(--casl-clay-100); }

/* ---------- dialog, questions panel, toast ---------- */
.layer { position: relative; z-index: 100; }
.scrim { position: fixed; inset: 0; background: rgba(43, 38, 32, .45); z-index: 100; animation: fade .2s ease-out; }
.scrim-light { background: rgba(43, 38, 32, .25); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.dialog { position: fixed; z-index: 101; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); padding: 0 0 env(safe-area-inset-bottom); animation: sheetUp .25s ease-out; }
.dialog-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 10px 22px; background: #fff; border-bottom: 1px solid var(--border-subtle); }
.dialog-body { padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 6px; }
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 700px) {
  .dialog { left: 50%; top: 50%; right: auto; bottom: auto; width: min(560px, calc(100vw - 48px)); max-height: 88vh; transform: translate(-50%, -50%); border-radius: var(--radius-xl); animation: pop .22s ease-out; }
  @keyframes pop { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
}
.ask { position: fixed; z-index: 101; left: 0; right: 0; bottom: 0; top: 10vh; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); overflow: hidden; animation: sheetUp .25s ease-out; }
@media (min-width: 1000px) { .ask { left: auto; top: auto; right: 24px; bottom: 24px; width: 420px; height: min(640px, calc(100vh - 48px)); border-radius: var(--radius-xl); } }
.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 12px 16px 20px; background: var(--casl-green-900); color: var(--casl-cream-50); }
.ask-head span { font-size: .85rem; color: var(--casl-green-200); }
.ask-search { position: relative; padding: 14px 16px 6px; }
.ask-search > .ic { position: absolute; left: 30px; top: calc(50% + 4px); transform: translateY(-50%); color: var(--text-muted); }
.ask-search .input { padding-left: 46px; }
.ask-body { flex: 1; overflow-y: auto; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.ask-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-canvas); }
.ask-item.open { background: #fff; border-color: var(--casl-green-200); }
.ask-q { width: 100%; text-align: left; border: 0; background: none; padding: 12px 14px; font-weight: 700; cursor: pointer; color: var(--text-primary); min-height: 48px; }
.ask-a { padding: 0 14px 14px; color: var(--text-secondary); }
.ask-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); }
.toast { position: fixed; z-index: 120; left: 50%; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--casl-green-900); color: #fff; box-shadow: var(--shadow-lg); font-weight: 600; animation: toastIn .22s ease-out; }
.toast-info { background: var(--casl-ink-900); }
.toast-danger { background: var(--casl-clay-600); }
.toast-act { margin-left: 6px; border: 0; background: var(--casl-cream-50); color: var(--casl-green-900); font-weight: 800; border-radius: 8px; padding: 8px 12px; cursor: pointer; min-height: 40px; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (min-width: 1000px) { .toast { bottom: 28px; } }
.app-ob ~ .layer .toast, .app-print ~ .layer .toast { bottom: 24px; }
body.noscroll .toast { bottom: auto; top: calc(14px + env(safe-area-inset-top)); animation: none; }

/* ---------- CASL Approved seal ---------- */
.approved { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 5px; border-radius: 999px; background: #fff; border: 1.5px solid var(--casl-green-200); color: var(--casl-green-800); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.approved .mark { width: 24px; height: 24px; }
.approved.lg { font-size: .83rem; padding: 6px 16px 6px 7px; gap: 9px; }
.approved.lg .mark { width: 32px; height: 32px; }
.side-approved { align-self: flex-start; margin: 0 8px; }
.about-approved { background: var(--surface-canvas); box-shadow: none; }

/* ---------- plans on this device ---------- */
.plan-rows { display: flex; flex-direction: column; gap: 8px; }
.plan-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: #fff; }
.plan-row.on { border-color: var(--casl-green-400); background: var(--casl-green-50); }
.plan-row .plan-ic { width: 42px; height: 42px; border-radius: 12px; }
.plan-row.on .plan-ic { background: #fff; }
.plan-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--border-default); background: #fff; color: var(--text-primary); font-weight: 600; font-size: .89rem; cursor: pointer; }
.plan-pill .ic { color: var(--casl-green-700); }
.plan-pill-sw { color: var(--text-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.plan-pill:hover { border-color: var(--casl-green-500); }
.side-switch { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: -8px 8px 0; min-height: 36px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border-default); background: #fff; font-size: .83rem; font-weight: 700; color: var(--casl-green-700); cursor: pointer; }
.side-switch:hover { border-color: var(--casl-green-500); background: var(--casl-green-50); }

/* ---------- letters and dates ---------- */
.letter { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.letter-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.letter-head .field-label { font-size: 1rem; }
.letter textarea.input { min-height: 180px; font-size: 1.04rem; line-height: 1.7; }
.letter-new { padding-top: 6px; }
.date-when { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--casl-green-800); }
.date-when .ic { color: var(--casl-terracotta-600); }
.date-cal { align-self: flex-start; margin: 4px 0 0 -12px; }
input[type="date"].input { min-height: 52px; }

/* ---------- landing page ---------- */
.app-lp { background: var(--surface-canvas); }
.lp { overflow-x: clip; }
.lp-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .lp-wrap { padding: 0 32px; } }
.lp-nav { position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top); background: rgba(253, 251, 246, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-subtle); }
.lp-nav-in { display: flex; align-items: center; gap: 12px; min-height: 66px; }
.lp-logo { display: inline-flex; align-items: center; gap: 10px; padding: 4px; margin-left: -4px; border: 0; background: none; font-family: var(--serif); font-weight: 600; font-size: 1.32rem; color: var(--casl-green-800); cursor: pointer; }
.lp-logo .mark { width: 36px; height: 36px; }
.lp-links { display: none; gap: 2px; margin-left: 16px; }
.lp-links button { min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; font-weight: 600; font-size: .92rem; color: var(--text-secondary); cursor: pointer; }
.lp-links button:hover { background: var(--casl-green-50); color: var(--casl-green-800); }
.lp-nav-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 960px) { .lp-links { display: flex; } }
@media (max-width: 520px) { .lp-hide-sm { display: none; } }

.lp-hero { padding: 32px 0 64px; background: radial-gradient(1100px 560px at 88% -12%, var(--casl-green-100), transparent 62%), radial-gradient(900px 520px at -12% 112%, var(--casl-terracotta-50), transparent 60%), var(--surface-canvas); scroll-margin-top: 80px; }
.lp-hero-in { display: grid; gap: 36px; align-items: center; }
.lp-hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--casl-terracotta-700); }
.lp-eyebrow span { width: 28px; height: 2px; border-radius: 2px; background: var(--casl-terracotta-600); }
.lp-h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 1.3rem + 4.2vw, 4.1rem); line-height: 1.03; letter-spacing: -.02em; color: var(--casl-green-900); text-wrap: balance; }
.lp-h1 em, .lp-h2 em { font-style: italic; font-weight: 500; color: var(--casl-terracotta-700); }
.lp-lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.6; color: var(--text-secondary); max-width: 36em; }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.lp-ctas.center { justify-content: center; }
.lp-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: .92rem; font-weight: 600; color: var(--text-secondary); }
.lp-trust li { display: inline-flex; align-items: center; gap: 8px; }
.lp-trust .ic { color: var(--casl-green-700); }
.lp-fine { font-size: .89rem; color: var(--text-muted); }
.lp-linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--text-link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 560px) { .lp-ctas .btn { flex: 1 1 100%; } }

.lp-hero-art { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 580px; margin: 0 auto; }
.lp-hero-img { display: block; width: 100%; aspect-ratio: 5 / 4; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--casl-cream-200); }
.lp-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; display: block; }
.lp-phone { position: relative; margin-top: -120px; width: 236px; flex: none; border-radius: 36px; padding: 9px; background: #1D2824; box-shadow: 0 30px 60px rgba(23, 51, 43, .3), 0 8px 20px rgba(23, 51, 43, .2); animation: fadeUp .5s ease-out both .1s; }
@media (min-width: 1000px) {
  .lp-hero { padding: 72px 0 104px; }
  .lp-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; }
  .lp-hero-art { display: block; margin: 0 0 0 auto; }
  .lp-phone { position: absolute; left: -64px; bottom: -56px; margin: 0; }
}
.lp-screen { display: flex; flex-direction: column; gap: 9px; padding: 0 12px 14px; border-radius: 28px; overflow: hidden; background: var(--casl-cream-100); font-size: 11px; line-height: 1.35; color: var(--casl-ink-900); }
.lp-ph-bar { display: flex; align-items: center; justify-content: space-between; padding: 9px 8px 2px; font-size: 10px; font-weight: 800; }
.lp-ph-island { width: 58px; height: 17px; border-radius: 999px; background: #1D2824; }
.lp-ph-batt { width: 20px; height: 9px; border-radius: 3px; border: 1.5px solid var(--casl-ink-800); position: relative; }
.lp-ph-batt::after { content: ''; position: absolute; inset: 1px 4px 1px 1px; border-radius: 1px; background: var(--casl-ink-800); }
.lp-ph-top { display: flex; align-items: center; gap: 6px; font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--casl-green-800); }
.lp-ph-top .mark { width: 22px; height: 22px; }
.lp-ph-hi { font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.15; color: var(--casl-green-900); }
.lp-ph-card { background: #fff; border: 1px solid var(--casl-ink-100); border-radius: 14px; padding: 10px; box-shadow: 0 1px 2px rgba(43, 38, 32, .05); }
.lp-ph-score { display: flex; align-items: center; gap: 10px; }
.lp-ph-ring { position: relative; width: 70px; height: 70px; flex: none; }
.lp-ph-ring svg { display: block; width: 70px; height: 70px; }
.lp-ph-ring circle { fill: none; stroke-width: 12; }
.lp-ph-ring .ring-bg { stroke: var(--casl-green-100); }
.lp-ph-ring .ring-fg { stroke: var(--casl-green-700); stroke-linecap: round; }
.lp-ph-ring span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lp-ph-ring b { font-family: var(--serif); font-weight: 600; font-size: 21px; line-height: 1; color: var(--casl-green-900); }
.lp-ph-ring i { font-style: normal; font-size: 8px; color: var(--casl-ink-600); }
.lp-ph-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 9.5px; font-weight: 700; color: var(--casl-ink-700); }
.lp-ph-bar2 { height: 5px; margin-top: 2px; border-radius: 999px; overflow: hidden; background: var(--casl-cream-200); }
.lp-ph-bar2 i { display: block; height: 100%; border-radius: 999px; }
.lp-ph-next { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px; border-radius: 14px; color: var(--casl-cream-50); background: var(--casl-green-900) radial-gradient(circle at 100% 0%, rgba(201, 122, 74, .32), transparent 60%); }
.lp-ph-next small { font-size: 7.5px; font-weight: 800; letter-spacing: .14em; color: var(--casl-green-200); }
.lp-ph-next strong { font-family: var(--serif); font-weight: 600; font-size: 14px; line-height: 1.2; }
.lp-ph-next span { display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: var(--casl-green-200); }
.lp-ph-tasks { display: flex; flex-direction: column; gap: 8px; font-size: 10.5px; font-weight: 700; }
.lp-ph-tasks div { display: flex; align-items: center; gap: 7px; }
.lp-ph-tasks i { width: 15px; height: 15px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--casl-ink-400); color: #fff; }
.lp-ph-tasks .dn { color: var(--casl-ink-500); font-weight: 500; }
.lp-ph-tasks .dn i { background: var(--casl-green-600); border-color: var(--casl-green-600); }

.lp-sec { padding: 60px 0; scroll-margin-top: 66px; }
@media (min-width: 1000px) { .lp-sec { padding: 96px 0; } }
.lp-tip, .lp-feat, .lp-price { background: #fff; }
.lp-tip { border-block: 1px solid var(--border-subtle); }
.lp-how, .lp-casl { background: var(--surface-page); }
.lp-parent { background: var(--casl-green-50); }
.lp-privacy { background: var(--casl-green-900) radial-gradient(900px 420px at 10% 0%, rgba(111, 165, 149, .22), transparent 60%); }
.lp-head { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 760px; margin: 0 auto 40px; text-align: center; }
.lp-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--casl-terracotta-700); }
.lp-kicker.on-dark { color: var(--casl-terracotta-300) !important; }
.lp-h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.7rem); line-height: 1.1; letter-spacing: -.01em; color: var(--casl-green-900); text-wrap: balance; }
.lp-sub { font-size: 1.05rem; color: var(--text-secondary); max-width: 40em; }
.lp-sub.on-dark-muted { color: var(--casl-green-100); }
.lp-split { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .lp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }
.lp-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.lp-copy > p { font-size: 1.04rem; color: var(--text-secondary); max-width: 38em; }
.lp-art-card { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle); background: var(--surface-canvas); box-shadow: var(--shadow-md); }
.lp-art-card.photo .art { display: block; aspect-ratio: 4 / 3; }
.lp-art-card.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-art-card.berg { max-width: 520px; width: 100%; margin: 0 auto; }
.lp-berg { display: block; width: 100%; height: auto; }
.lp-berg .sky { fill: var(--casl-cream-50); }
.lp-berg .sea { fill: var(--casl-green-100); }
.lp-berg .wave { fill: none; stroke: var(--casl-green-400); stroke-width: 2; }
.lp-berg .tip { fill: #fff; stroke: var(--casl-green-600); stroke-width: 2; stroke-linejoin: round; }
.lp-berg .body { fill: #fff; fill-opacity: .72; stroke: var(--casl-green-500); stroke-width: 2; stroke-linejoin: round; }
.lp-berg text { font-family: var(--sans); }
.lp-berg .t-top { font-size: 18px; font-weight: 800; fill: var(--casl-green-900); }
.lp-berg .t-low { font-size: 16px; font-weight: 700; fill: var(--casl-green-800); }
.lp-berg .t-note { font-size: 10px; font-weight: 800; letter-spacing: .12em; fill: var(--casl-terracotta-700); }
.lp-paths { display: grid; gap: 12px; width: 100%; }
@media (min-width: 560px) { .lp-paths { grid-template-columns: 1fr 1fr; } }
.lp-paths div { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--surface-canvas); border: 1px solid var(--border-subtle); }
.lp-paths strong { color: var(--casl-green-900); }
.lp-paths span { font-size: .92rem; color: var(--text-secondary); }

.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.lp-steps li { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.lp-step-n { width: 46px; height: 46px; margin-bottom: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--casl-terracotta-100); color: var(--casl-terracotta-800); font-family: var(--serif); font-weight: 600; font-size: 1.3rem; }
.lp-steps strong { font-size: 1.1rem; color: var(--casl-green-900); }
.lp-steps li > span:last-child { font-size: .95rem; color: var(--text-secondary); }
.lp-center { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 36px; text-align: center; }
@media (max-width: 699px) {
  .lp-steps { gap: 10px; }
  .lp-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; }
  .lp-step-n { grid-row: span 2; width: 40px; height: 40px; margin: 0; font-size: 1.15rem; }
}

.lp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 960px) { .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-grid4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
@media (min-width: 960px) { .lp-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-f { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--radius-lg); background: var(--surface-canvas); border: 1px solid var(--border-subtle); }
.lp-f strong { font-size: 1.04rem; color: var(--casl-green-900); }
.lp-f > span:last-child { font-size: .92rem; line-height: 1.5; color: var(--text-secondary); }
.lp-f-ic { width: 48px; height: 48px; margin-bottom: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--casl-green-100); color: var(--casl-green-700); }
.lp-f.dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .13); }
.lp-f.dark strong { color: var(--casl-cream-50); }
.lp-f.dark > span:last-child { color: var(--casl-green-100); }
.lp-f.dark .lp-f-ic { background: rgba(255, 255, 255, .1); color: var(--casl-terracotta-300); }
@media (max-width: 699px) {
  .lp-f { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; padding: 16px; }
  .lp-f-ic { grid-row: span 2; margin: 0; }
}

.lp-phases { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.lp-phases div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface-canvas); border: 1px solid var(--border-subtle); border-left: 4px solid var(--casl-terracotta-600); }
.lp-phases b { color: var(--casl-green-900); }
.lp-phases span { font-size: .95rem; color: var(--text-secondary); }
@media (max-width: 559px) { .lp-phases div { grid-template-columns: 1fr; gap: 2px; } }
.lp-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp-ticks li { display: flex; align-items: flex-start; gap: 12px; font-size: 1.04rem; }
.lp-ticks .ic { width: 26px; height: 26px; flex: none; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--casl-green-600); color: #fff; }

.lp-cmp { max-width: 920px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.lp-cmp-row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: stretch; border-top: 1px solid var(--border-subtle); }
.lp-cmp-row:first-child { border-top: 0; }
.lp-cmp-row > span { display: flex; align-items: center; justify-content: center; padding: 14px 10px; text-align: center; font-size: .92rem; }
.lp-cmp-row > span:first-child { justify-content: flex-start; padding-left: 20px; text-align: left; font-weight: 600; }
.lp-cmp-row > .kw { background: var(--casl-green-50); }
.lp-cmp-h > span { gap: 6px; font-size: .85rem; font-weight: 700; color: var(--text-secondary); }
.lp-cmp-h > .kw { font-family: var(--serif); font-size: 1.05rem; color: var(--casl-green-800); }
.lp-cmp-h .mark { width: 24px; height: 24px; }
.cmp-yes .ic { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--casl-green-600); color: #fff; }
.cmp-no { color: var(--casl-ink-300); }
.cmp-part { padding: 4px 10px; border-radius: 999px; background: var(--casl-gold-100); color: var(--warning-fg); font-size: .8rem; font-weight: 700; line-height: 1.25; }
@media (max-width: 599px) {
  .lp-cmp-row { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, .85fr)); }
  .lp-cmp-row > span { padding: 12px 5px; font-size: .8rem; }
  .lp-cmp-row > span:first-child { padding-left: 12px; }
  .lp-cmp-h > .kw { flex-direction: column; font-size: .88rem; }
  .cmp-part { padding: 3px 6px; font-size: .72rem; }
}

.lp-price-card { position: relative; overflow: hidden; max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: clamp(28px, 5vw, 52px); border-radius: var(--radius-xl); background: var(--surface-canvas); border: 1px solid var(--border-default); box-shadow: var(--shadow-md); text-align: center; }
.lp-price-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--casl-green-700), var(--casl-terracotta-600)); }
.lp-price-big { font-family: var(--serif); font-weight: 600; font-size: clamp(3.2rem, 2rem + 4vw, 4.6rem); line-height: 1; color: var(--casl-green-900); }
.lp-price-sub { font-size: 1.05rem; color: var(--text-secondary); }
.lp-price-card .lp-ticks { margin: 10px 0 12px; text-align: left; }
.lp-faq { background: var(--surface-canvas); }
.lp-narrow { max-width: 860px; }
.lp-final { padding: 76px 0; background: var(--casl-green-900) radial-gradient(800px 400px at 90% 0%, rgba(201, 122, 74, .3), transparent 60%); }
.lp-final .lp-center { margin-top: 0; }
.lp-final .lp-h2 { max-width: 17em; }
.lp-foot { padding: 30px 0 calc(30px + env(safe-area-inset-bottom)); background: var(--casl-green-900); border-top: 1px solid rgba(255, 255, 255, .1); color: var(--casl-green-100); font-size: .89rem; }
.lp-foot-in { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.lp-foot a, .lp-foot .lp-linkbtn { color: var(--casl-cream-50); font-weight: 600; }
.lp-logo.small { font-size: 1.12rem; color: var(--casl-cream-50); cursor: default; }
.lp-logo.small .mark { width: 34px; height: 34px; padding: 3px; border-radius: 10px; background: var(--casl-cream-50); }

/* the films */
.lp-watch { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 6px 4px 4px; border: 0; background: none; font-weight: 700; font-size: 1rem; color: var(--casl-green-800); cursor: pointer; }
.lp-watch-ic { width: 44px; height: 44px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--casl-terracotta-600); box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle); }
.lp-watch-ic .ic { fill: currentColor; margin-left: 2px; }
.lp-watch:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.lp-films { background: var(--surface-canvas); }
.lp-player { max-width: 1000px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--radius-xl); overflow: hidden; background: #0d1512; box-shadow: var(--shadow-lg); }
.lp-player video { display: block; width: 100%; height: 100%; background: #0d1512; }
.lp-vid-desc { max-width: 1000px; margin: 16px auto 0; text-align: center; font-size: 1rem; color: var(--text-secondary); }
.lp-vids { max-width: 1000px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 899px) { .lp-vids { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lp-vids .lp-vid:first-child { grid-column: span 2; } }
.lp-vid { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 12px; border-radius: var(--radius-md); border: 2px solid var(--border-subtle); background: #fff; text-align: left; color: var(--text-primary); cursor: pointer; transition: border-color .16s ease-out, box-shadow .16s ease-out; }
.lp-vid:hover { border-color: var(--casl-green-400); }
.lp-vid.on { border-color: var(--casl-green-600); box-shadow: 0 0 0 3px var(--casl-green-100); }
.lp-vid-img { position: relative; display: block; border-radius: 10px; overflow: hidden; }
.lp-vid-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.lp-vid-play { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .94); color: var(--casl-terracotta-600); }
.lp-vid-play .ic { fill: currentColor; margin-left: 2px; }
.lp-vid-t { display: flex; flex-direction: column; padding: 0 4px; }
.lp-vid-t b { font-size: .92rem; line-height: 1.25; }
.lp-vid-t i { font-style: normal; font-size: .8rem; color: var(--text-muted); }

/* ---------- print views ---------- */
.app-print { background: var(--casl-cream-200); min-height: 100vh; padding: 0 0 40px; }
.print-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: rgba(247, 242, 234, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
.print-bar .muted { flex: 1 1 200px; }
.doc { max-width: 820px; margin: 24px auto; background: #fff; padding: clamp(22px, 5vw, 56px); border-radius: 8px; box-shadow: var(--shadow-md); font-size: 15px; line-height: 1.5; color: #2B2620; }
.phead { border-bottom: 3px solid var(--casl-green-700); padding-bottom: 14px; margin-bottom: 8px; }
.pbrand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-weight: 600; color: var(--casl-green-800); }
.pbrand .mark { width: 28px; height: 28px; }
.phead h1 { font-family: var(--serif); font-weight: 600; font-size: 28px; color: var(--casl-green-900); margin: 10px 0 2px; }
.pmeta { color: #6E6455; font-size: 13px; }
.plead { font-size: 15px; color: #574F42; margin: 12px 0; }
.psec { margin-top: 20px; break-inside: avoid; }
.psec h2 { font-size: 16px; color: var(--casl-green-800); border-bottom: 1.5px solid #E3ECE7; padding-bottom: 4px; margin: 0 0 8px; }
.psec h3 { font-size: 14px; margin: 10px 0 4px; color: #574F42; }
.pt { width: 100%; border-collapse: collapse; }
.pt th { text-align: left; vertical-align: top; width: 36%; padding: 5px 16px 5px 0; font-weight: 700; }
.pt td { vertical-align: top; padding: 5px 0; }
.pt tr + tr th, .pt tr + tr td { border-top: 1px solid #F0E8DA; }
.pt-empty, .pnote { color: #837A6C; font-size: 13px; margin: 4px 0; }
.pol { margin: 4px 0; padding-left: 20px; }
.pol li { margin: 4px 0; }
.pseal { margin-left: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid #C4DBD2; font-family: var(--sans); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #2F5D50; }
.pletter p { margin: 0 0 12px; font-family: var(--serif); font-size: 16px; line-height: 1.7; color: #2B2620; }
.psign { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 16px; }
.pletter-sec { break-before: page; }
.pletter-to { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--casl-green-900); margin: 22px 0 14px; }
.pletter-page + .pletter-page { break-before: page; margin-top: 36px; padding-top: 24px; border-top: 1px solid #EBE4D6; }
.pfoot { margin-top: 28px; padding-top: 10px; border-top: 1px solid #EBE4D6; color: #837A6C; font-size: 12px; }
.wallet { display: flex; flex-wrap: wrap; gap: 0; margin-top: 18px; }
.wcard { width: 3.375in; height: 2.125in; border: 1.5px dashed #A69C8C; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.wtitle { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--casl-green-800); font-size: 13px; }
.wtitle .mark { width: 20px; height: 20px; }
.wline { display: flex; flex-direction: column; border-bottom: 1px solid #EBE4D6; padding-bottom: 3px; }
.wline span { color: #837A6C; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.wline strong { font-size: 12px; min-height: 14px; }
@media print {
  @page { margin: 16mm 14mm; }
  body { background: #fff; }
  .print-bar, .layer, .side, .topbar, .tabs, .fab { display: none !important; }
  .app-print { background: #fff; padding: 0; }
  .doc { box-shadow: none; margin: 0; padding: 0; max-width: none; border-radius: 0; }
  .pletter-page + .pletter-page { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ---------- motion & contrast preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) { :root { --text-secondary: var(--casl-ink-800); --text-muted: var(--casl-ink-700); --border-default: var(--casl-ink-400); } }

/* ---------- "Learn more" explainers (24 Sept 2026) ---------- */
.more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 5px; border-radius: 999px; border: 1.5px solid var(--casl-terracotta-300); background: var(--casl-terracotta-50); color: var(--casl-terracotta-800); font: inherit; font-size: .88rem; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background .16s ease-out, border-color .16s ease-out; text-align: left; }
.more:hover { background: var(--casl-terracotta-100); border-color: var(--casl-terracotta-500); }
.more:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.more-ic { flex: none; width: 30px; height: 30px; transition: transform .2s ease-out; }
.more:hover .more-ic { transform: rotate(-10deg) scale(1.08); }
.mi-bg { fill: var(--casl-terracotta-600); }
.mi-fg { fill: #fff; }
.mi-smile { fill: none; stroke: var(--casl-terracotta-600); stroke-width: .95; stroke-linecap: round; }
.mi-ray { fill: none; stroke: #fff; stroke-width: 1.1; stroke-linecap: round; opacity: .85; }
.more-dark { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: var(--casl-cream-50); }
.more-dark:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
.head-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.pillars .more, .callout-text .more { margin-top: 6px; }
.dialog-xp .dialog-head h2 { display: flex; align-items: center; gap: 10px; }
.dialog-xp .dialog-head .more-ic { width: 34px; height: 34px; }
.xp-sec { display: flex; flex-direction: column; gap: 4px; }
.xp-sec p { margin: 0; }
.xp-h { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--casl-terracotta-700); font-family: var(--sans); }
.xp-steps { margin: 2px 0 0; padding: 0; list-style: none; counter-reset: xp; display: flex; flex-direction: column; gap: 8px; }
.xp-steps li { counter-increment: xp; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.xp-steps li::before { content: counter(xp); width: 28px; height: 28px; border-radius: 50%; background: var(--casl-green-50); border: 1.5px solid var(--casl-green-200); color: var(--casl-green-800); font-weight: 800; font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; }
.xp-tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); background: var(--casl-gold-100); color: var(--casl-ink-800); }
.xp-tip p { margin: 0; }
.xp-tip .ic { flex: none; margin-top: 2px; color: var(--casl-gold-600); }

/* ---------- members only, log out, the tour offer ---------- */
.side-logout { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-secondary); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.side-logout:hover { background: var(--casl-green-50); color: var(--casl-green-800); }
.callout-tour { background: var(--casl-green-50); border-color: var(--casl-green-200); }
.callout-tour > .ic { color: var(--casl-green-700); }
.member-row { display: flex; gap: 14px; align-items: center; }
.member-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--casl-green-50); border: 1.5px solid var(--casl-green-200); color: var(--casl-green-700); display: inline-flex; align-items: center; justify-content: center; }
.member-text { display: flex; flex-direction: column; gap: 2px; }
.member-text span { color: var(--text-secondary); font-size: .92rem; }
.gate-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--casl-terracotta-50); border: 1px solid var(--casl-terracotta-300); color: var(--casl-terracotta-800); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gate .join-card p { margin: 0; }
.lp-members { display: flex; gap: 10px; align-items: flex-start; max-width: 560px; margin: 0; padding: 12px 16px; border-radius: var(--radius-md); background: #fff; border: 1.5px solid var(--casl-terracotta-300); color: var(--text-secondary); font-size: .95rem; }
.lp-members .ic { flex: none; margin-top: 3px; color: var(--casl-terracotta-700); }
.lp-members strong { color: var(--text-primary); }
.lp-members a { color: var(--text-link); font-weight: 700; }
.lp-members.on { border-color: var(--casl-green-200); }
.lp-members.on .ic { color: var(--casl-green-700); }

/* ---------- the app tour ---------- */
.tour { position: fixed; inset: 0; z-index: 300; }
.tour-shield { position: absolute; inset: 0; }
.tour-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 4px var(--casl-terracotta-500), 0 0 0 200vmax rgba(24, 38, 34, .62); transition: top .3s ease, left .3s ease, width .3s ease, height .3s ease, opacity .2s ease; pointer-events: none; }
.tour-card { position: fixed; z-index: 1; width: min(380px, calc(100vw - 24px)); background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 16px 18px 16px 20px; display: flex; flex-direction: column; gap: 10px; animation: tourIn .25s ease-out; }
.tour-card.tour-center { top: 50%; left: 50%; transform: translate(-50%, -50%); animation: none; }
.tour-card.tour-dock-bottom { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
.tour-card.tour-dock-top { left: 12px; right: 12px; top: calc(12px + env(safe-area-inset-top)); width: auto; }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-count { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--casl-terracotta-700); }
.tour-close { width: 40px; height: 40px; margin: -6px -8px -6px 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: none; color: var(--text-muted); cursor: pointer; }
.tour-close:hover { background: var(--casl-cream-200); color: var(--text-primary); }
.tour-t { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--casl-green-900); outline: none; }
.tour-d { margin: 0; color: var(--text-secondary); }
.tour-dots { display: flex; gap: 6px; }
.tour-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--casl-cream-300); transition: width .2s ease, background .2s ease; }
.tour-dots i.done { background: var(--casl-green-400); }
.tour-dots i.on { width: 22px; background: var(--casl-terracotta-600); }
.tour-acts { display: flex; justify-content: space-between; gap: 10px; margin-top: 2px; }
@keyframes tourIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none; } .tour-card { animation: none; } }
@media print { .tour { display: none !important; } }

/* the plain version of the landing page, for search engines and AI assistants that don't run scripts;
   the app replaces it the moment it starts */
.js .kw-static { display: none; }
html:not(.js) .boot { display: none; }
.kw-static { max-width: 760px; margin: 0 auto; padding: 32px 20px 56px; }
.kw-static h1 { font-family: var(--serif); color: var(--casl-green-900); font-size: 2rem; line-height: 1.15; margin: 8px 0 12px; }
.kw-static h2 { font-family: var(--serif); color: var(--casl-green-900); font-size: 1.35rem; margin: 28px 0 8px; }
.kw-static h3 { font-size: 1.02rem; margin: 16px 0 4px; }
.kw-static li { margin: 6px 0; }
.kw-kicker { font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--casl-terracotta-700); }
.mi-cheek { fill: #F2B39A; }
body.touring .toast { display: none; }