@font-face {
  font-family: Instrument;
  src: url('/fonts/instrument-sans-latin-wght.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: Bricolage;
  src: url('/fonts/bricolage-grotesque-latin-opsz-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --paper: #f5f4ed;
  --ink: #223b2d;
  --muted: #64715f;
  --green: #193f30;
  --deep: #142d24;
  --lime: #d7eaa3;
  --line: #d7ddcf;
  --display: Bricolage, Arial, sans-serif;
  --text: Instrument, Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(24px, 4.5vw, 72px);
  --section-space: clamp(76px, 8.4vw, 128px);
}
* { box-sizing: border-box; }
/* Keep scrolling native. Reserve its gutter so dialogs do not shift the page. */
html { overflow-y: auto; scrollbar-gutter: stable; scrollbar-color: #7d8e73 #eee7d5; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height, 88px) + 16px); -webkit-text-size-adjust: 100%; }
html:has(body.menu-open), html:has(body.realm-view-open), html:has(dialog[open]) { overflow-y: hidden; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
::selection { background: var(--lime); color: var(--deep); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; border: 0; }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid #72964c; outline-offset: 5px; }
img, svg { display: block; }
img { max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; }
h2 { font-size: clamp(38px, 4.2vw, 64px); letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
h2 > span { color: #788e60; font-weight: 350; }
h3 { letter-spacing: -.03em; }
section { scroll-margin-top: 0; }
.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-space); }
.eyebrow, .micro { font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .1em; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: #7fa350; border-radius: 50%; flex-shrink: 0; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 16px 23px; border-radius: 8px; font-size: 14px; font-weight: 550; line-height: 1.4; transition: translate .25s var(--ease), background .25s, box-shadow .25s; }
.button > span { font-size: 22px; line-height: 1; }
.button-dark { background: var(--green); color: #f2f6e7; }
.button-lime { background: var(--lime); color: var(--deep); }
.button-secondary { background: transparent; border: 1px solid #b6c6a5; color: var(--green); }
.button:active { translate: 0 0; }
.link-arrow { min-height: 44px; display: inline-flex; align-items: center; gap: 21px; font-size: 14px; font-weight: 500; }
.link-arrow > span { font-size: 22px; transition: translate .25s; }
.skip { position: fixed; left: 16px; top: -120px; z-index: 100; background: var(--green); color: white; padding: 12px 22px; border-radius: 5px; }
.skip:focus { top: 12px; }
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: #86a85e; transform: scaleX(0); transform-origin: left; }
/* Navigation */
.header { position: sticky; top: 0; z-index: 20; background: #f5f4edf2; backdrop-filter: blur(20px); border-bottom: 1px solid #d7ddcf80; }
.nav { height: 88px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 29px; font-weight: 650; letter-spacing: -.055em; white-space: nowrap; }
.brand-light { font-weight: 400; }
.brand-period { color: #7c9562; }
.nav-links { display: flex; align-items: center; gap: 27px; margin-left: auto; font-size: 13px; }
.nav-links a { position: relative; padding-block: 13px; white-space: nowrap; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav-links a.active::after, .nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { min-height: 46px; padding: 11px 17px; border: 1px solid #b9c8aa; border-radius: 7px; display: flex; align-items: center; gap: 25px; font-size: 13px; font-weight: 500; transition: background .2s; white-space: nowrap; }
.nav-cta span { font-size: 21px; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 12px; background: transparent; }
.menu-toggle span { display: block; height: 1.5px; background: var(--green); margin: 6px 0; transition: transform .25s; }
.mobile-menu[hidden] { display: none; }
/* The castle is the scene. The copy stays clear of its orbit. */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; width: calc(100% - 48px); max-width: 1392px; min-height: 710px; margin-top: 22px; padding: 64px clamp(32px, 4vw, 60px) 22px; overflow: hidden; border: 1px solid #30503b; border-radius: 22px; color: #f5f5e8; background: radial-gradient(ellipse at 75% 56%, #36544240, transparent 65%), var(--deep); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(#d7eaa310 .7px, transparent .7px); background-size: 7px 7px; opacity: .25; pointer-events: none; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg,#142d24 0%,#142d24ef 29%,#142d24a0 44%,transparent 64%); }
.hero-copy { position: relative; align-self: start; z-index: 3; padding-top: 12px; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.hero-copy .eyebrow { font-size: 11px; letter-spacing: .09em; color: #bdcea7; margin-bottom: 32px; }
.hero-copy .status-dot { width: 5px; height: 5px; background: var(--lime); }
h1 { position: relative; font-size: clamp(62px, 6.45vw, 94px); line-height: .99; font-weight: 450; letter-spacing: -.055em; white-space: nowrap; }
h1 > span { font-family: Georgia, serif; font-style: italic; font-weight: 400; color: var(--lime); line-height: 1.15; letter-spacing: -.06em; }
.title-spark { display: inline-block; width: 42px; height: 42px; margin-left: 22px; stroke: #c5de90; stroke-width: 1; vertical-align: middle; transform: rotate(13deg); }
.hero-lead { font-size: 16px; line-height: 1.75; color: #c3cfb6; margin-top: 29px; max-width: 440px; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 29px; }
.hero-actions .button { font-size: 14px; }
.hero-actions .link-arrow { color: #d5dfc5; font-size: 13px; gap: 14px; }
.hero-meta { display: flex; align-items: center; gap: 13px; margin-top: 27px; font-size: 11px; color: #b1c19e; }
.hero-meta > span { display: flex; align-items: center; gap: 7px; }
.hero-meta svg { width: 12px; height: 12px; fill: #c0d2a5; }
.meta-divider { height: 12px; width: 1px; background: #aec39550; }
.hero-visual { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; isolation: isolate; --scene-x: 0px; --scene-y: 0px; }
.castle-image { position: absolute; width: 138%; max-width: none; height: 89%; left: -21%; top: 2%; object-fit: contain; mix-blend-mode: lighten; mask-image: radial-gradient(ellipse at center, #000 43%, #000c 59%, transparent 75%); transform: translate3d(var(--scene-x), var(--scene-y), 0); transition: transform .8s var(--ease); }
.scene-rings { position: absolute; inset: 12% -10% 9% 3%; z-index: -1; opacity: .22; transform: rotate(-17deg); pointer-events: none; }
.scene-rings span { position: absolute; inset: 12%; border: 1px solid #c6dba166; border-radius: 50%; }
.scene-rings span:nth-child(2) { inset: 2%; border-style: dashed; }
.scene-rings span:nth-child(3) { inset: 27%; }
.visual-top { position: absolute; top: 31px; left: 29%; right: 28px; display: flex; justify-content: flex-end; z-index: 2; color: #b0c19d; }
.visual-top .micro { font-size: 10px; letter-spacing: .12em; }
.visual-status { display: none; }
.visual-annotation { position: absolute; top: 26%; right: 5%; display: flex; align-items: center; gap: 12px; color: #c2d2ad; font-size: 11px; line-height: 1.7; }
.annotation-line { width: 32px; height: 1px; background: #c1d49f80; }
.floating-session { position: absolute; bottom: 101px; right: 8%; width: min(365px, 78%); display: flex; align-items: center; gap: 15px; padding: 18px; background: #eef2e5ed; backdrop-filter: blur(18px); border: 1px solid #f8fbeb99; border-radius: 12px; color: #29412d; box-shadow: 0 20px 60px #071d1a50; transform: translate3d(calc(var(--scene-x) * -.35), calc(var(--scene-y) * -.35), 0); transition: transform .8s var(--ease); }
.session-symbol { padding: 11px; border-radius: 9px; background: #dce7c9; border: 1px solid #c4d6ac; }
.session-symbol svg { width: 27px; height: 27px; fill: none; stroke: #607f46; stroke-width: 1.25; }
.floating-session .micro { font-size: 9px; color: #657c52; letter-spacing: .07em; }
.floating-session strong { display: block; font-size: 14px; font-weight: 550; margin-top: 4px; }
.floating-sub { display: block; font-size: 11px; color: #667d53; margin-top: 3px; }
.floating-plus { font-size: 22px; color: #7c965f; margin-left: auto; }
.visual-bottom { display: none; }
.hero-bottom { position: relative; align-self: end; grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #c7dab12b; padding-top: 17px; margin-top: 35px; color: #b5c6a0; font-size: 10px; letter-spacing: .09em; z-index: 3; }
.hero-bottom a { display: flex; align-items: center; gap: 11px; min-height: 36px; }
.hero-bottom a > span { font-size: 20px; }
.spec-strip { margin-top: 25px; border-bottom: 1px solid var(--line); }
.spec-inner { display: grid; grid-template-columns: repeat(4,1fr); padding-block: 28px; }
.spec-inner > div { display: flex; align-items: center; justify-content: center; gap: 18px; padding-inline: 16px; border-right: 1px solid var(--line); font-size: 12px; color: #697c58; }
.spec-inner > div:first-child { justify-content: flex-start; padding-left: 0; }
.spec-inner > div:last-child { border: 0; justify-content: flex-end; padding-right: 0; }
.spec-inner b { font-family: var(--display); font-size: 38px; font-weight: 350; letter-spacing: -.06em; color: #758f54; line-height: 1; }
.spec-inner b > span { font-size: 25px; }
.spec-inner svg { width: 30px; height: 30px; fill: none; stroke: #789454; stroke-width: 1.25; flex-shrink: 0; }
/* Editorial chapters */
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 50px; }
.section-heading .eyebrow { margin-bottom: 23px; color: #697e57; }
.section-heading p { font-size: 16px; color: var(--muted); line-height: 1.75; max-width: 350px; text-wrap: pretty; }
.activity-stage { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(34px,5vw,80px); }
.activity-menu { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.activity-menu button { display: flex; align-items: center; gap: 21px; min-height: 108px; padding: 25px 5px; text-align: left; border-top: 1px solid var(--line); background: transparent; transition: padding .3s var(--ease), background .3s; }
.activity-menu button:last-child { border-bottom: 1px solid var(--line); }
.activity-number { font-size: 12px; color: #6d825b; align-self: flex-start; padding-top: 10px; font-variant-numeric: tabular-nums; }
.activity-menu b { font: 450 30px/1.2 var(--display); letter-spacing: -.04em; }
.activity-menu small { display: block; font-size: 13px; color: #687b59; margin-top: 8px; }
.activity-arrow { display: grid; place-items: center; margin-left: auto; height: 42px; width: 42px; border: 1px solid transparent; border-radius: 50%; font-size: 24px; color: #7b955b; flex-shrink: 0; transition: transform .3s, background .3s, color .3s; }
.activity-menu [aria-selected=true] { padding-inline: 19px; background: #e9eedd; border-color: #cbd7bb; }
.activity-menu [aria-selected=true] .activity-arrow { background: var(--green); color: #e3edcd; }
.activity-panel { position: relative; isolation: isolate; min-height: 590px; padding: 29px; overflow: hidden; border: 1px solid #d4dfc6; border-radius: 16px; background: radial-gradient(ellipse at 73% 27%,#f7f9ef,#e4ebd7 68%); }
.activity-panel::before { content: ''; position: absolute; width: 380px; height: 380px; right: -90px; top: -70px; background: #f7faef60; border-radius: 50%; z-index: -1; }
.activity-panel-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #60764f; }
.activity-panel .micro { font-size: 10px; }
.outline-pill { display: inline-block; border: 1px solid #afc294; border-radius: 5px; padding: 5px 8px; font-size: 10px; font-weight: 500; letter-spacing: .05em; line-height: 1.4; }
.activity-art { position: relative; margin: 6px 0 0 auto; width: 290px; height: 230px; }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid #adc493; border-radius: 50%; transform: translate(-50%,-50%) rotate(-25deg); }
.orbit-one { width: 275px; height: 135px; }
.orbit-two { width: 200px; height: 225px; border-style: dashed; opacity: .6; transform: translate(-50%,-50%) rotate(40deg); }
.arena-symbol { position: absolute; left: 90px; top: 42px; width: 127px; height: 142px; display: grid; place-items: center; border-radius: 27px; background: linear-gradient(130deg,#fffef2,#c7d9a7); border: 1px solid #dae6c6; box-shadow: 14px 21px 33px #718e4930, inset 2px 2px 4px #fff; transform: rotate(-11deg); transition: transform .6s var(--ease), border-radius .5s, background .5s; }
.arena-symbol svg { width: 91px; height: 91px; stroke: #6a8747; stroke-width: 1.6; fill: none; }
.orbit-node { position: absolute; width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid #bfcea9; background: #f7faee; border-radius: 8px; color: #677f50; font-size: 10px; }
.node-one { top: 29px; left: 34px; }
.node-two { bottom: 21px; left: 52px; }
.node-three { top: 122px; right: 0; }
[data-scene=dungeons] .arena-symbol { border-radius: 62px 62px 16px 16px; background: linear-gradient(130deg,#f6f1e6,#d3c9a1); transform: rotate(8deg); }
[data-scene=invasions] .arena-symbol { background: linear-gradient(130deg,#fcf2e5,#dbc09b); transform: rotate(-8deg); }
[data-scene=castle] .arena-symbol { border-radius: 50%; background: linear-gradient(130deg,#f9faee,#b9d3a3); transform: rotate(0); }
.activity-route { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #60764e; margin-block: 1px 26px; }
.activity-route i { flex: 1; min-width: 12px; height: 1px; background: #b7c99f; }
.activity-description h3 { font-size: 34px; line-height: 1.08; font-weight: 450; }
.activity-description p { font-size: 14px; line-height: 1.8; color: #617750; margin-top: 18px; }
.activity-detail { display: block; border-top: 1px solid #c6d5b3; margin-top: 22px; padding-top: 17px; font-size: 12px; color: #516a40; }
.panel-footnote { display: block; margin-top: 18px; font-size: 11px; color: #667d53; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.steps article { border-top: 1px solid #b5c8a0; padding-top: 24px; }
.step-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.step-top > span { font-size: 12px; letter-spacing: .06em; color: #687f55; }
.step-top svg { width: 38px; height: 38px; stroke: #72944f; stroke-width: 1.3; fill: none; }
.steps h3 { font-size: 26px; line-height: 1.12; margin-bottom: 18px; }
.steps p { font-size: 15px; line-height: 1.8; color: var(--muted); max-width: 340px; }
/* Functional product demonstration */
.workspace-section { border-block: 1px solid #d8e1ca; background: #e8eddf; padding-block: var(--section-space) 62px; }
.demo-notice { display: inline-flex; align-items: center; gap: 8px; color: #5c7646; font-size: 12px; margin-top: 19px; }
.dashboard-shell { border: 1px solid #c0d0ad; border-radius: 14px; overflow: hidden; background: #fbfcf7; box-shadow: 0 28px 65px #4f653b12; }
.window-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #f0f4e8; border-bottom: 1px solid #dce5ce; padding: 13px 20px; color: #6b8058; font-size: 11px; }
.window-dots { display: flex; align-items: center; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border: 1px solid #b1c599; border-radius: 50%; }
.window-label { font-size: 9px; letter-spacing: .08em; }
.dashboard { display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 650px; }
.dashboard-sidebar { display: flex; flex-direction: column; background: #f0f4e8; border-right: 1px solid #dce5ce; padding: 25px 14px 20px; }
.dash-brand { display: flex; align-items: center; gap: 8px; font: 600 20px var(--display); letter-spacing: -.05em; padding-inline: 8px; }
.dash-brand > span { color: #789253; margin-left: -7px; }
.sidebar-label { display: block; font-size: 10px; letter-spacing: .08em; color: #6d8259; margin: 37px 12px 15px; }
.dashboard-tabs { display: flex; flex-direction: column; gap: 6px; }
.dashboard-tabs button { min-height: 46px; display: flex; align-items: center; gap: 11px; background: transparent; border-radius: 7px; padding: 11px; text-align: left; font-size: 13px; color: #667e52; transition: background .2s; }
.dashboard-tabs button > span { font-size: 21px; line-height: 1; }
.dashboard-tabs [aria-selected=true] { color: #2f5028; background: #dce8cb; font-weight: 600; }
.sidebar-bottom { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 20px; border-top: 1px solid #d6e2c6; }
.sidebar-avatar { display: grid; place-items: center; border: 1px solid #c0d2a9; border-radius: 50%; width: 32px; height: 32px; font-size: 11px; flex-shrink: 0; color: #617d47; }
.sidebar-bottom b { display: block; font-size: 12px; font-weight: 550; }
.sidebar-bottom div > span { display: block; font-size: 10px; color: #72895c; margin-top: 3px; }
.sidebar-bottom > span:last-child { display: none; }
.dashboard-main { display: flex; flex-direction: column; min-width: 0; padding-inline: 28px; }
.dash-topline { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 61px; border-bottom: 1px solid #e0e7d7; font-size: 12px; color: #687e56; }
.demo-badge { font-size: 10px; letter-spacing: .05em; background: #eef4e2; color: #617e48; padding: 5px 8px; border-radius: 4px; border: 1px solid #d9e5c9; white-space: nowrap; }
#dashboard-content { flex: 1; padding-block: 27px; min-width: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 25px; }
.panel-heading h3 { font-size: 27px; line-height: 1.15; font-weight: 500; }
.panel-heading p { font-size: 12px; color: #687e55; line-height: 1.6; margin-top: 8px; max-width: 420px; }
.panel-action { min-height: 42px; background: #eff4e5; border: 1px solid #cbdcbc; border-radius: 6px; font-size: 12px; padding: 9px 12px; color: #4e6e37; white-space: nowrap; }
.session-overview { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
.progress-summary { display: flex; align-items: center; gap: 18px; border: 1px solid #d9e4cc; border-radius: 10px; padding: 17px; background: #f4f7ec; }
.progress-ring { width: 105px; height: 105px; position: relative; flex-shrink: 0; }
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring circle { fill: none; stroke-width: 4; }
.ring-track { stroke: #e0e9d3; }
.ring-value { stroke: #77994e; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); }
.progress-ring > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.progress-ring b { font: 450 37px/1 var(--display); letter-spacing: -.04em; }
.progress-ring small { font-size: 10px; color: #5e7b45; margin-top: 5px; }
.stat-label { font-size: 11px; color: #617a4e; }
.progress-summary h4 { font-size: 18px; line-height: 1.25; letter-spacing: -.03em; margin-top: 7px; }
.pill { display: inline-block; border: 1px solid #bfcea9; border-radius: 4px; padding: 3px 6px; color: #4f6f38; font-size: 9px; letter-spacing: .03em; white-space: nowrap; }
.progress-summary .pill { margin-top: 11px; }
.session-metrics { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #e0e8d7; border-radius: 10px; background: #fffefa; }
.session-metrics > div { padding: 20px 14px; display: flex; flex-direction: column; justify-content: center; }
.session-metrics > div + div { border-left: 1px solid #e0e8d7; }
.session-metrics b { font: 450 23px/1.2 var(--display); letter-spacing: -.03em; margin-top: 10px; }
.session-metrics small { font-size: 10px; line-height: 1.5; margin-top: 7px; color: #617b4b; }
.session-activity { display: flex; align-items: center; gap: 12px; padding: 17px 0; }
.session-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid #d5e1c6; border-radius: 9px; font-size: 26px; color: #688c45; background: #f0f5e7; }
.session-activity b { display: block; font-size: 12px; font-weight: 550; }
.session-activity p { font-size: 11px; line-height: 1.6; color: #688153; margin-top: 4px; }
.session-log { border: 1px solid #e0e8d7; border-radius: 8px; overflow: hidden; }
.log-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e0e8d7; background: #f5f8ef; font-size: 10px; letter-spacing: .04em; color: #607c48; }
.log-demo { font-size: 9px; color: #687e56; }
#session-log { list-style: none; padding: 0; margin: 0; min-height: 80px; }
#session-log li { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid #e7edde; }
#session-log li:last-child { border: 0; }
#session-log li > span:first-child { font-size: 10px; color: #68834e; }
#session-log b { display: block; font-size: 12px; font-weight: 500; }
#session-log small { display: block; font-size: 10px; line-height: 1.6; color: #698153; margin-top: 3px; }
.log-check { color: #779b4e; margin-left: auto; font-size: 13px; flex-shrink: 0; }
.log-current { background: #f3f7eb; }
.demo-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 21px; }
.demo-toolbar .button { min-height: 44px; font-size: 12px; padding: 12px 16px; gap: 16px; }
.demo-toolbar .button > span { font-size: 16px; }
.dash-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 12px; border-top: 1px solid #e0e8d7; color: #607a4c; font-size: 10px; }
.dash-bottom > span:first-child { display: flex; align-items: center; gap: 6px; }
.dash-bottom > span:last-child { font-size: 8px; letter-spacing: .03em; }
.preview-caption { text-align: center; font-size: 12px; line-height: 1.8; color: #607b49; margin: 22px auto 0; max-width: 750px; }
.table-scroll { overflow-x: auto; max-width: 100%; border: 1px solid #dce6ce; border-radius: 8px; }
.arena-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 13px; }
.arena-table caption { font-size: 12px; color: #577442; text-align: left; padding: 12px; background: #f3f7eb; }
.arena-table th { text-align: left; font-size: 10px; font-weight: 500; color: #60784e; letter-spacing: .03em; padding: 13px 12px; border-block: 1px solid #dfe8d4; }
.arena-table td { padding: 18px 12px; border-bottom: 1px solid #e4ebdb; }
.arena-table tbody tr:last-child td { border: 0; }
.arena-table td:last-child { font-size: 11px; color: #537139; }
.arena-table .recommended { background: #edf4e1; }
.form-note, .demo-fallback { color: #60784d; font-size: 12px; line-height: 1.8; margin-top: 18px; }
.session-form { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.session-form label, .access-form > label { display: flex; flex-direction: column; gap: 9px; font-size: 12px; color: #536e3f; }
.session-form label:last-child { grid-column: 1/-1; }
.session-form input, .session-form select, .access-form select, .access-form input[inputmode] { width: 100%; min-width: 0; border: 1px solid #c2d2ad; border-radius: 6px; background: #fffefa; color: #2e4e29; padding: 12px; font-size: 14px; min-height: 46px; }
.activity-checks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 17px; }
.activity-checks label { min-height: 38px; display: flex; align-items: center; gap: 7px; font-size: 13px; color: #55753d; }
.activity-checks input { width: 16px; height: 16px; accent-color: var(--green); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.form-actions .button { font-size: 13px; min-height: 46px; padding: 12px 18px; gap: 16px; }
.settings-state { font-size: 11px; color: #55763c; margin-top: 17px; display: flex; align-items: center; gap: 6px; }
.settings-state::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #7d9c50; }
.settings-state.unsaved { color: #866825; }
.settings-state.unsaved::before { background: #af8843; }
/* The companion view is a real control surface for the same demonstration. */
.remote { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 85px; overflow: hidden; }
.remote-copy > p { max-width: 430px; margin-top: 27px; font-size: 16px; line-height: 1.8; color: var(--muted); }
.check-list { padding: 0; margin: 28px 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: 11px; padding-block: 9px; font-size: 14px; color: #567042; line-height: 1.6; }
.check-list li::before { content: '✓'; display: grid; place-items: center; width: 19px; height: 19px; flex-shrink: 0; border: 1px solid #a9bf90; border-radius: 50%; font-size: 11px; color: #628742; }
.remote-copy .remote-note { font-size: 12px; max-width: 380px; margin-top: 24px; }
.remote-copy .link-arrow { margin-top: 25px; font-size: 13px; }
.phone-scene { position: relative; min-height: 730px; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 55%,#e0e8ce 0,transparent 65%); }
.phone-orbit { position: absolute; width: 470px; height: 470px; border: 1px solid #d3dfc3; border-radius: 50%; transform: rotate(-24deg) scaleY(.7); }
.phone-orbit::after { content: ''; position: absolute; inset: -55px; border: 1px dashed #d5e0c680; border-radius: 50%; }
.phone-label { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; color: #6f865b; }
.phone { position: relative; width: 298px; padding: 8px; border: 2px solid #819274; border-radius: 43px; background: #293d2d; box-shadow: 18px 30px 45px #3f562d24,inset 0 0 0 1px #dae3c8; transform: rotate(5deg); }
.phone-hardware { height: 38px; position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; border-radius: 32px 32px 0 0; background: #f8faf1; font-size: 10px; font-weight: 600; }
.phone-island { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); width: 78px; height: 19px; border-radius: 12px; background: #293d2d; }
.phone-nav { min-height: 57px; display: flex; align-items: center; gap: 7px; padding: 0 18px; background: #f8faf1; border-bottom: 1px solid #dfe8d3; }
.phone-nav b { font: 550 17px var(--display); letter-spacing: -.04em; }
.phone-avatar { width: 27px; height: 27px; border: 1px solid #c7d8b3; color: #5d7e41; border-radius: 50%; display: grid; place-items: center; font-size: 9px; margin-left: auto; }
.phone-content { padding: 24px 18px 20px; background: #f8faf1; }
.phone-content > .eyebrow { font-size: 9px; letter-spacing: .06em; color: #627d4d; margin-bottom: 13px; }
.phone-content h3 { font-size: 28px; line-height: 1.08; letter-spacing: -.045em; }
.phone-state { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #55793a; margin-block: 18px; }
.phone-state .status-dot { width: 4px; height: 4px; }
.phone-session { border: 1px solid #d2e0c0; border-radius: 9px; padding: 15px; background: #eef4e3; }
.phone-session > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; color: #607f46; letter-spacing: .04em; }
.phone-session > strong { font: 400 40px/1.2 var(--display); letter-spacing: -.04em; display: block; margin-top: 15px; }
.phone-session > span { display: block; margin-top: 4px; font-size: 10px; color: #5c7a44; }
.phone-progress { margin-block: 17px; height: 4px; border-radius: 5px; background: #d5e4bf; }
.phone-progress > span { display: block; height: 100%; width: 0; background: #72984a; border-radius: 5px; transition: width .6s var(--ease); }
.phone-activity { display: flex; align-items: center; gap: 9px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #d7e4c6; }
.phone-activity-icon { color: #6a8b4b; font-size: 23px; flex-shrink: 0; }
.phone-activity b { display: block; font-size: 11px; font-weight: 500; }
.phone-activity div > span { display: block; font-size: 9px; color: #607e47; margin-top: 4px; }
.phone-check { color: #7c9c54; font-size: 12px; margin-left: auto; }
.phone-demo { width: 100%; min-height: 46px; padding: 12px 14px; font-size: 12px; gap: 10px; margin-top: 20px; }
.phone-demo > span { font-size: 14px; }
.phone-demo-label { display: block; text-align: center; font-size: 9px; color: #5e7c46; margin-top: 12px; line-height: 1.6; }
.phone-bottom { height: 47px; display: flex; align-items: center; justify-content: space-around; border-radius: 0 0 32px 32px; border-top: 1px solid #dfe7d2; background: #f8faf1; color: #91a77b; font-size: 21px; }
.phone-bottom span:first-child { color: #4f7633; }
.phone-callout { position: absolute; right: -8px; bottom: 125px; display: flex; align-items: center; gap: 12px; padding: 17px 22px; border: 1px solid #c7d8b0; border-radius: 9px; background: #fbfcf4; box-shadow: 0 15px 35px #344c2120; transform: rotate(-4deg); }
.phone-callout b { display: block; font-size: 13px; font-weight: 500; }
.phone-callout div > span { display: block; font-size: 11px; color: #68844d; margin-top: 5px; }
/* Limits are shown through product fragments, rather than abstract promises. */
.control-section { background: #eff2e8; border-block: 1px solid #dce4d1; }
.control-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.control-card { display: flex; flex-direction: column; padding: 28px 23px 22px; border: 1px solid #d2dec4; border-radius: 13px; background: #fafbf3; }
.control-index { font-size: 11px; letter-spacing: .08em; color: #69844e; }
.control-card h3 { font-size: 28px; font-weight: 450; line-height: 1.12; margin-top: 25px; }
.control-card > p { font-size: 14px; line-height: 1.8; color: #627851; margin-block: 18px 28px; }
.control-preview { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 214px; margin-top: auto; padding: 21px 18px; border: 1px solid #d7e3c9; border-radius: 10px; background: #eef4e3; overflow: hidden; }
.duration-preview > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: #5f7b46; }
.duration-preview b { color: #385c2a; font-size: 13px; font-weight: 500; }
.duration-scale { display: flex; gap: 5px; margin-block: 19px 8px; }
.duration-scale i { height: 26px; flex: 1; background: #dbe6cc; border-radius: 3px; transition: background .25s; }
.duration-scale i.filled { background: #91af68; }
.duration-labels { display: flex; justify-content: space-between; font-size: 10px; color: #5f7c46; }
.preview-footer { display: flex; align-items: center; gap: 6px; margin-top: 22px; color: #5f7b48; font-size: 10px; line-height: 1.5; }
.preview-footer .status-dot { width: 4px; height: 4px; }
.premium-preview { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 13px; }
.premium-icon { display: grid; place-items: center; height: 58px; width: 58px; flex-shrink: 0; border: 1px solid #c7d7b2; border-radius: 13px; background: linear-gradient(130deg,#fdfaec,#e0e5be); transform: rotate(-8deg); }
.premium-icon svg { width: 38px; height: 38px; fill: none; stroke: #819646; stroke-width: 1.4; }
.premium-preview b { font-size: 11px; font-weight: 550; }
.premium-preview div > span { display: block; font-size: 10px; line-height: 1.8; color: #627c4b; margin-top: 7px; }
.premium-preview .preview-footer { width: 100%; margin-top: 0; }
.connection-state { display: flex; align-items: center; gap: 10px; }
.connection-state b { font-size: 12px; font-weight: 550; display: block; }
.connection-state div > span { display: block; font-size: 10px; color: #5b7a43; line-height: 1.6; margin-top: 5px; }
.connection-state > .status-dot { margin-left: auto; width: 5px; height: 5px; }
.connection-icon { width: 31px; height: 31px; padding: 4px; color: #74984d; flex-shrink: 0; }
.connection-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; }
.connection-button { display: flex; align-items: center; justify-content: space-between; gap: 13px; min-height: 44px; margin-top: 20px; padding: 10px 12px; border: 1px solid #b9cda3; border-radius: 6px; background: #f8fbf0; color: #496f31; text-align: left; font-size: 11px; }
.connection-button > span { font-size: 17px; }
.connection-preview .preview-footer { margin-top: 15px; }
.connection-preview.is-offline { background: #f3eee0; border-color: #e0d5b8; }
.is-offline .connection-state > .status-dot { background: #b6954d; }
.is-offline .connection-icon { color: #9e8244; }
.is-offline .connection-button { background: #faf6eb; border-color: #d5c598; color: #81652e; }
/* The commercial offer stays honest about the beta. */
.plan-section { background: #e7edda; padding-block: var(--section-space); border-bottom: 1px solid #d6e1c5; }
.plan-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px,10vw,145px); align-items: center; }
.plan-copy .eyebrow { color: #607c48; }
.plan-copy h2 { font-size: clamp(45px,5vw,70px); }
.plan-copy > p { font-size: 16px; line-height: 1.85; color: #61784e; margin-top: 30px; }
.plan-availability { display: flex; align-items: flex-start; gap: 11px; margin-top: 36px; }
.plan-availability > .status-dot { margin-top: 7px; }
.plan-availability b { display: block; font-size: 13px; font-weight: 550; color: #476734; }
.plan-availability div > span { display: block; font-size: 12px; color: #607c48; line-height: 1.8; margin-top: 8px; }
.price-card { position: relative; border: 1px solid #30573b; border-radius: 16px; padding: 37px; background: var(--green); color: #eff3df; box-shadow: 0 25px 55px #28431f14; }
.price-card::before { content: ''; position: absolute; inset: 7px; pointer-events: none; border: 1px solid #d8e9ba17; border-radius: 10px; }
.price-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 17px; }
.plan-tag { font-size: 13px; font-weight: 500; letter-spacing: .08em; line-height: 1.5; }
.plan-tag small { display: block; margin-top: 8px; font-size: 12px; color: #bdd0a5; letter-spacing: 0; font-weight: 400; }
.price-top .outline-pill { font-size: 9px; color: #c7dbb0; border-color: #70944f; }
.price { font: 400 clamp(68px,6.5vw,91px)/1.2 var(--display); letter-spacing: -.07em; color: #e9f1d2; margin-top: 37px; }
.price > span { display: inline-block; font: 14px var(--text); letter-spacing: 0; color: #c0d4a7; margin-left: 12px; }
.price-sub { font-size: 12px; color: #bdd0a7; margin-top: 10px; }
.price-rule { height: 1px; background: #d9eabc2b; margin-top: 27px; }
.price-card .check-list { margin-block: 22px 29px; }
.price-card .check-list li { font-size: 14px; color: #e0eaca; padding-block: 8px; }
.price-card .check-list li::before { color: #c1da99; border-color: #82a660; }
.price-card .button { position: relative; width: 100%; min-height: 53px; font-size: 14px; }
.price-card > small { display: block; text-align: center; font-size: 11px; line-height: 1.7; color: #bfd0a8; margin-top: 16px; }
.faq-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 75px; }
.faq-intro h2 { font-size: clamp(38px,3.7vw,54px); }
.faq-intro > p { color: var(--muted); font-size: 15px; line-height: 1.8; margin-top: 27px; }
.faq-asterisk { display: block; font-size: 88px; color: #b2c692; line-height: 1; transform: rotate(13deg); transform-origin: 40px 40px; margin-top: 44px; }
.faq-list { border-top: 1px solid #c2d0b1; }
.faq-list details { border-bottom: 1px solid #d1ddc4; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; list-style: none; cursor: pointer; padding-block: 25px; font-size: 15px; font-weight: 500; line-height: 1.6; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { color: #7c9b58; font-size: 26px; font-weight: 350; line-height: 1; transition: transform .25s; flex-shrink: 0; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-list details p { color: #5e754c; font-size: 14px; line-height: 1.9; padding: 0 26px 25px 0; }
.closing { position: relative; isolation: isolate; overflow: hidden; background: #e6ecda; border-block: 1px solid #d2dfc1; padding-block: 72px; }
.closing-art { position: absolute; inset: 0 0 0 52%; z-index: -1; opacity: .07; background: url('/assets/grobim-hero.png') center/contain no-repeat; mix-blend-mode: multiply; transform: scale(1.6); mask-image: linear-gradient(90deg,transparent,#000); }
.closing .eyebrow { color: #607c48; font-size: 11px; }
.closing h2 { font-size: clamp(49px,7vw,100px); line-height: 1.02; letter-spacing: -.055em; max-width: 1100px; position: relative; }
.closing h2 > span:first-child { font-weight: 400; color: #819e60; }
.closing-star { position: absolute; right: 0; top: 12px; font-size: 106px; color: #8baa66; line-height: 1; transform: rotate(12deg); }
.closing-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 40px; }
.closing-bottom p { color: #5d7847; font-size: 15px; line-height: 1.8; }
.footer-main { position: relative; display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 50px; padding-block: 60px 45px; }
.footer-identity .brand { font-size: 29px; }
.footer-identity > p { color: #60784e; font-size: 15px; line-height: 1.6; margin-top: 23px; }
.footer-beta { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #607a4a; margin-top: 23px; }
.footer-beta .status-dot { width: 5px; height: 5px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding-top: 8px; }
.footer-column > span { display: block; font-size: 11px; color: #6b8157; letter-spacing: .07em; margin-bottom: 12px; }
.footer-column a, .footer-column button { display: inline-flex; align-items: center; min-height: 35px; font-size: 13px; color: #506d39; background: transparent; text-align: left; padding: 3px 0; }
.back-top { position: absolute; right: var(--gutter); top: 56px; display: grid; place-items: center; height: 39px; width: 39px; border: 1px solid #bed0a7; border-radius: 50%; font-size: 22px; color: #658947; }
.footer-word { overflow: hidden; font: 450 clamp(83px,15vw,205px)/.91 var(--display); letter-spacing: -.075em; color: #dce3d1; user-select: none; padding-top: 5px; padding-bottom: 21px; }
.footer-word > span { color: #b2c796; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding-block: 24px; color: #61794e; font-size: 11px; line-height: 1.7; }
.footer-bottom > span:last-child { font-size: 9px; letter-spacing: .06em; }
/* Dialogs and feedback */
dialog { width: min(590px,calc(100% - 32px)); max-height: min(86dvh,850px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid #c1d2ab; border-radius: 16px; background: var(--paper); color: var(--ink); padding: 30px; box-shadow: 0 25px 100px #142d2455; }
dialog::backdrop { background: #142d2480; backdrop-filter: blur(7px); }
.modal-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.modal-top .micro { font-size: 10px; letter-spacing: .05em; color: #627d4d; }
.close-button { width: 40px; height: 40px; border: 1px solid #c0d1ab; border-radius: 50%; background: transparent; color: #628547; font-size: 26px; line-height: 1; flex-shrink: 0; }
.modal-title { font-size: 39px; line-height: 1.08; letter-spacing: -.045em; font-weight: 450; margin: 28px 0 21px; }
.modal-copy { font-size: 14px; line-height: 1.85; color: #5e7749; }
.modal-copy p + p { margin-top: 18px; }
.modal-action { width: 100%; margin-top: 24px; font-size: 14px; }
.modal-list { list-style: none; margin: 25px 0; padding: 0; }
.modal-list li { border-bottom: 1px solid #d5e1c9; padding-block: 15px; font-size: 13px; color: #5e7949; line-height: 1.8; }
.modal-list b { display: block; font-size: 14px; color: #375b2c; font-weight: 550; margin-bottom: 4px; }
.access-form { margin-top: 25px; }
.access-form > label { margin-top: 18px; font-size: 13px; }
.access-form select, .access-form input[inputmode] { font-size: 15px; padding: 13px; }
.access-form .check-field { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.8; color: #587440; }
.check-field input { width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--green); margin: 6px 0 0; }
.access-summary { border: 1px solid #c5d8b0; border-radius: 9px; padding: 20px; margin-top: 23px; background: #eaf1dd; }
.access-summary b { font-size: 17px; font-weight: 500; }
.access-summary p { font-size: 14px; line-height: 1.9; color: #55743c; margin-top: 13px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; max-width: calc(100% - 32px); width: max-content; padding: 15px 22px; border: 1px solid #72964e; border-radius: 8px; box-shadow: 0 15px 40px #142d2422; background: var(--green); color: #eff5df; font-size: 13px; line-height: 1.7; opacity: 0; transform: translate(-50%,18px); pointer-events: none; transition: opacity .25s,transform .25s; }
.toast.visible { opacity: 1; transform: translate(-50%,0); }
@media(hover:hover) {
  .button:hover:not(:disabled) { translate: 0 -3px; box-shadow: 0 10px 22px #142d241a; }
  .button-dark:hover { background: #27543c; }
  .button-lime:hover { background: #e5f3bc; }
  .link-arrow:hover > span { translate: 3px -3px; }
  .nav-cta:hover, .panel-action:hover:not(:disabled) { background: #e3ecd4; }
  .activity-menu button:hover:not([aria-selected=true]) .activity-arrow { border-color: #b5c99d; transform: translate(2px,-2px); }
  .activity-panel:hover .arena-symbol { transform: rotate(0) translateY(-5px); }
  .dashboard-tabs button:hover { background: #e4edd8; }
  .footer-column a:hover, .footer-column button:hover { text-decoration: underline; text-underline-offset: 4px; }
  .connection-button:hover { background: #e0eccf; }
}
@media(prefers-reduced-motion:no-preference) {
  .hero-copy { animation: arrive .9s var(--ease) both; }
  .castle-image { animation: castle-arrive 1.25s .1s var(--ease) both; }
  .floating-session { animation: arrive 1.1s .35s var(--ease) both; }
  .motion-enabled [data-reveal].revealed { animation: arrive .8s var(--ease) both; }
  .control-grid > :nth-child(2).revealed { animation-delay: .08s; }
  .control-grid > :nth-child(3).revealed { animation-delay: .16s; }
  @keyframes arrive { from { opacity: .2; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  @keyframes castle-arrive { from { opacity: .1; scale: 1.06; } to { opacity: 1; scale: 1; } }
}
/* Composition adapts before controls need to shrink. */
@media(min-width:1500px) {
  .hero { min-height: 760px; padding-top: 78px; }
  .hero-copy { padding-top: 20px; }
  .hero-lead { margin-top: 35px; font-size: 17px; }
  .hero-actions { margin-top: 35px; }
  .floating-session { bottom: 112px; }
}
@media(max-width:1150px) {
  .nav { gap: 22px; }
  .brand { font-size: 26px; }
  .nav-links { gap: 19px; font-size: 12px; }
  .nav-cta { font-size: 12px; gap: 17px; padding-inline: 13px; }
  .hero { min-height: 670px; padding-inline: 38px; padding-top: 49px; }
  h1 { font-size: clamp(61px,6.65vw,80px); }
  .hero-copy .eyebrow { font-size: 10px; }
  .hero-lead { font-size: 15px; }
  .hero-actions { flex-wrap: wrap; gap: 10px 22px; }
  .hero-actions .button { font-size: 13px; padding-inline: 18px; gap: 17px; }
  .hero-actions .link-arrow { font-size: 12px; }
  .hero-meta { font-size: 10px; }
  .visual-annotation { display: none; }
  .floating-session { right: 7%; width: 310px; padding: 15px; gap: 11px; }
  .floating-session strong { font-size: 12px; }
  .floating-sub { font-size: 10px; }
  .floating-session .micro { font-size: 8px; }
  .session-symbol { padding: 9px; }
  .visual-top .micro { font-size: 9px; }
  .spec-inner > div { gap: 12px; font-size: 11px; }
  .spec-inner b { font-size: 34px; }
  .section-heading { gap: 35px; }
  .section-heading p { font-size: 15px; max-width: 310px; }
  .activity-stage { gap: 36px; }
  .activity-menu b { font-size: 28px; }
  .activity-menu small { font-size: 12px; }
  .activity-panel { padding: 26px; }
  .activity-description h3 { font-size: 32px; }
  .dashboard { grid-template-columns: 185px minmax(0,1fr); }
  .dashboard-sidebar { padding-inline: 10px; }
  .dash-brand { font-size: 18px; gap: 6px; }
  .dashboard-tabs button { font-size: 12px; gap: 8px; }
  .dashboard-main { padding-inline: 24px; }
  .session-overview { grid-template-columns: 1fr; }
  .session-metrics { grid-template-columns: 1fr 1fr; }
  .session-metrics > div { padding: 16px 19px; }
  .session-metrics small { font-size: 11px; }
  .session-metrics b { font-size: 25px; }
  .panel-heading h3 { font-size: 25px; }
  .panel-heading { flex-wrap: wrap; gap: 12px; }
  .panel-heading .panel-action { min-height: 36px; font-size: 11px; }
  .remote { gap: 45px; }
  .remote-copy > p { font-size: 15px; }
  .phone { width: 280px; }
  .phone-callout { padding: 15px 18px; }
  .control-grid { gap: 17px; }
  .control-card { padding: 25px 19px 19px; }
  .control-card h3 { font-size: 26px; }
  .control-card > p { font-size: 13px; }
  .control-preview { padding: 19px 13px; }
  .premium-preview { gap: 10px; }
  .premium-icon { width: 45px; height: 45px; border-radius: 10px; }
  .premium-icon svg { width: 32px; height: 32px; }
  .premium-preview b { font-size: 10px; }
  .connection-state { gap: 6px; }
  .connection-icon { width: 25px; height: 25px; }
  .connection-state b { font-size: 11px; }
  .connection-button { font-size: 10px; padding-inline: 9px; }
  .plan-layout { gap: 65px; }
  .price-card { padding: 32px; }
  .price-top { flex-wrap: wrap; gap: 14px; }
  .faq-section { gap: 55px; }
  .footer-main { gap: 35px; }
  .footer-bottom { font-size: 10px; }
  .footer-bottom > span:last-child { font-size: 8px; }
}
@media(max-width:900px) {
  :root { --gutter: 30px; }
  .nav { height: 78px; gap: 22px; }
  .nav-links { display: none; }
  .nav-cta { margin-left: auto; min-height: 44px; }
  .menu-toggle { display: block; margin-right: -10px; margin-left: -10px; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .mobile-menu { position: absolute; top: 78px; left: 0; right: 0; padding: 22px 30px 30px; max-height: calc(100dvh - 78px); overflow-y: auto; overscroll-behavior: contain; color: #eef4dd; background: var(--green); border-bottom: 1px solid #6b8d4e; box-shadow: 0 25px 50px #142d2433; }
  .mobile-menu a { display: flex; align-items: center; min-height: 60px; border-bottom: 1px solid #bdd5a330; font: 400 25px var(--display); letter-spacing: -.035em; }
  .hero { width: calc(100% - 32px); min-height: 640px; margin-top: 16px; padding: 36px 28px 19px; border-radius: 17px; }
  .hero-copy { padding-top: 17px; }
  .hero-copy .eyebrow { font-size: 9px; letter-spacing: .05em; margin-bottom: 25px; }
  h1 { font-size: 7.6vw; }
  .title-spark { height: 30px; width: 30px; margin-left: 16px; }
  .hero-lead { font-size: 13px; max-width: 350px; margin-top: 24px; }
  .hero-actions { margin-top: 22px; }
  .hero-actions .button { min-height: 49px; font-size: 12px; padding-inline: 15px; }
  .hero-actions .link-arrow { font-size: 11px; gap: 12px; }
  .hero-meta { font-size: 9px; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
  .hero-visual { width: 61%; }
  .castle-image { height: 80%; top: 9%; width: 148%; left: -23%; }
  .floating-session { width: 268px; padding: 12px; gap: 10px; bottom: 90px; }
  .floating-session strong { font-size: 11px; }
  .floating-session .micro { font-size: 7px; }
  .floating-sub { font-size: 9px; }
  .session-symbol { padding: 7px; }
  .session-symbol svg { width: 23px; height: 23px; }
  .floating-plus { font-size: 20px; }
  .visual-top { right: 22px; top: 25px; }
  .visual-top .micro { font-size: 8px; }
  .hero-bottom { font-size: 8px; margin-top: 25px; }
  .spec-inner { padding-block: 25px; }
  .spec-inner > div { font-size: 10px; gap: 10px; padding-inline: 10px; }
  .spec-inner b { font-size: 30px; }
  .spec-inner svg { width: 25px; }
  h2 { font-size: 43px; }
  .section-heading p { font-size: 14px; max-width: 280px; }
  .section-heading .eyebrow { font-size: 11px; }
  .activity-stage { gap: 26px; grid-template-columns: .9fr 1.1fr; }
  .activity-menu button { gap: 13px; min-height: 115px; }
  .activity-menu b { font-size: 25px; }
  .activity-menu small { font-size: 11px; }
  .activity-number { font-size: 10px; padding-top: 8px; }
  .activity-menu [aria-selected=true] { padding-inline: 11px; }
  .activity-arrow { width: 34px; height: 34px; font-size: 21px; }
  .activity-panel { padding: 23px; }
  .activity-panel .micro { font-size: 9px; }
  .activity-panel-top { gap: 12px; }
  .activity-panel .outline-pill { font-size: 8px; }
  .activity-art { width: 260px; height: 220px; transform: scale(.92); transform-origin: right; margin-left: auto; }
  .activity-description h3 { font-size: 29px; }
  .activity-description p { font-size: 13px; }
  .activity-detail { font-size: 11px; }
  .panel-footnote { font-size: 10px; }
  .steps { gap: 25px; }
  .steps h3 { font-size: 23px; }
  .steps p { font-size: 14px; }
  .step-top > span { font-size: 10px; }
  .step-top svg { width: 32px; height: 32px; }
  .dashboard { grid-template-columns: minmax(0,1fr); }
  .dashboard-sidebar { flex-direction: row; align-items: center; gap: 30px; padding: 15px 20px; border-right: 0; border-bottom: 1px solid #d5e2c5; }
  .sidebar-label, .sidebar-bottom { display: none; }
  .dash-brand { padding: 0; font-size: 18px; }
  .dashboard-tabs { flex: 1; flex-direction: row; gap: 5px; justify-content: flex-end; }
  .dashboard-tabs button { padding-inline: 12px; min-height: 44px; font-size: 12px; }
  .dashboard-main { padding-inline: 25px; }
  .session-overview { grid-template-columns: 1.15fr 1fr; }
  .session-metrics b { font-size: 21px; }
  .session-metrics > div { padding: 16px 12px; }
  .panel-heading { flex-wrap: nowrap; }
  .dash-bottom > span:last-child { font-size: 9px; }
  .remote { gap: 30px; }
  .remote h2 { font-size: 40px; }
  .remote-copy > p { font-size: 14px; }
  .remote .check-list li { font-size: 13px; }
  .phone { width: 270px; }
  .phone-scene { min-height: 705px; }
  .phone-orbit { height: 330px; width: 330px; }
  .phone-label { font-size: 9px; }
  .phone-content { padding-inline: 16px; }
  .phone-content h3 { font-size: 26px; }
  .phone-session { padding-inline: 13px; }
  .phone-session > strong { font-size: 36px; }
  .phone-callout { bottom: 106px; right: -12px; padding: 13px 17px; }
  .control-grid { grid-template-columns: 1fr; gap: 20px; }
  .control-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; padding: 27px; }
  .control-card h3 { margin-top: 21px; font-size: 29px; }
  .control-card > p { font-size: 14px; margin-bottom: 0; }
  .control-preview { grid-column: 2; grid-row: 1/4; margin: 0; min-height: 230px; padding: 23px; }
  .premium-icon { width: 57px; height: 57px; }
  .premium-preview b { font-size: 12px; }
  .premium-preview div > span { font-size: 11px; }
  .connection-state b { font-size: 12px; }
  .connection-state div > span { font-size: 11px; }
  .connection-button { font-size: 12px; }
  .plan-layout { gap: 45px; }
  .plan-copy h2 { font-size: 50px; }
  .plan-copy > p { font-size: 14px; }
  .plan-copy .eyebrow { font-size: 11px; }
  .price-card { padding: 29px; }
  .price { font-size: 65px; }
  .price > span { font-size: 12px; margin-left: 9px; }
  .price-card .check-list li { font-size: 13px; }
  .price-sub { font-size: 11px; }
  .price-card .button { font-size: 12px; gap: 15px; }
  .price-card > small { font-size: 10px; }
  .faq-section { gap: 45px; }
  .faq-intro h2 { font-size: 39px; }
  .faq-list summary { font-size: 14px; }
  .faq-list details p { font-size: 13px; }
  .closing h2 { font-size: 7.8vw; }
  .closing-star { font-size: 79px; }
  .footer-main { gap: 28px; }
  .footer-identity .brand { font-size: 25px; }
  .footer-column a, .footer-column button { font-size: 12px; }
  .footer-column > span { font-size: 10px; }
  .footer-bottom { flex-wrap: wrap; }
}
@media(max-width:700px) {
  :root { --gutter: 24px; --section-space: 72px; }
  .nav { height: 74px; gap: 17px; }
  .brand { font-size: 25px; gap: 7px; }
  .brand img { width: 29px; height: 29px; }
  .nav-cta { font-size: 11px; padding-inline: 11px; gap: 13px; }
  .nav-cta > span { font-size: 19px; }
  .menu-toggle { margin-left: -11px; margin-right: -12px; }
  .mobile-menu { top: 74px; padding-inline: 24px; max-height: calc(100dvh - 74px); }
  .hero { display: block; width: calc(100% - 24px); min-height: 0; margin-top: 12px; padding: 30px 24px 15px; border-radius: 15px; }
  .hero::after { display: none; }
  .hero-copy { padding-top: 0; }
  .hero-copy .eyebrow { font-size: 10px; letter-spacing: .055em; margin-bottom: 24px; gap: 8px; }
  h1 { font-size: clamp(43px,14vw,78px); letter-spacing: -.055em; }
  h1 > span { letter-spacing: -.06em; }
  .title-spark { width: 33px; height: 33px; margin-left: 20px; }
  .hero-lead { font-size: 15px; max-width: 430px; line-height: 1.75; margin-top: 24px; }
  .wide-only { display: none; }
  .hero-actions { flex-wrap: wrap; margin-top: 26px; gap: 10px 24px; }
  .hero-actions .button { min-height: 52px; padding-inline: 18px; font-size: 13px; gap: 20px; }
  .hero-actions .link-arrow { font-size: 12px; min-height: 44px; }
  .hero-meta { margin-top: 22px; font-size: 10px; gap: 11px; }
  .hero-meta svg { height: 11px; width: 11px; }
  .hero-visual { position: relative; width: calc(100% + 48px); margin-inline: -24px; height: clamp(350px,91vw,490px); top: auto; bottom: auto; right: auto; margin-top: 3px; }
  .castle-image { top: 0; left: -8%; width: 116%; height: 100%; mask-image: radial-gradient(ellipse at center,#000 42%,#000d 61%,transparent 77%); }
  .scene-rings { inset: 0 -10% 1%; opacity: .17; }
  .visual-top { top: 22px; left: auto; right: 24px; }
  .visual-top .micro { font-size: 8px; }
  .floating-session { width: calc(100% - 48px); max-width: 390px; right: 24px; bottom: 15px; padding: 15px; gap: 12px; border-radius: 10px; }
  .floating-session strong { font-size: 13px; }
  .floating-session .micro { font-size: 8px; }
  .floating-sub { font-size: 10px; }
  .floating-plus { font-size: 22px; }
  .session-symbol { padding: 9px; }
  .session-symbol svg { width: 24px; height: 24px; }
  .hero-bottom { margin-top: 9px; padding-top: 12px; gap: 15px; font-size: 8px; letter-spacing: .04em; }
  .hero-bottom > span { max-width: 180px; line-height: 1.8; }
  .hero-bottom a { font-size: 8px; gap: 8px; white-space: nowrap; }
  .spec-strip { margin-top: 14px; }
  .spec-inner { grid-template-columns: 1fr 1fr; gap: 21px 17px; padding-block: 25px; }
  .spec-inner > div, .spec-inner > div:first-child, .spec-inner > div:last-child { justify-content: flex-start; gap: 13px; border: 0; padding: 0; font-size: 11px; line-height: 1.6; }
  .spec-inner > div:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 12px; }
  .spec-inner b { width: 36px; flex-shrink: 0; font-size: 33px; }
  .spec-inner b > span { font-size: 23px; }
  .spec-inner svg { width: 28px; height: 28px; margin: 0 7px 0 2px; }
  h2 { font-size: 43px; letter-spacing: -.045em; }
  .section-heading { display: block; margin-bottom: 34px; }
  .section-heading .eyebrow { font-size: 11px; margin-bottom: 20px; }
  .section-heading p { margin-top: 23px; max-width: 440px; font-size: 15px; line-height: 1.8; }
  .activity-stage { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .activity-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 0 17px; }
  .activity-menu button { min-height: 101px; padding: 18px 0; gap: 10px; }
  .activity-menu b { font-size: 22px; }
  .activity-menu small { font-size: 11px; margin-top: 6px; line-height: 1.6; max-width: 130px; }
  .activity-number { display: none; }
  .activity-arrow { width: 29px; height: 29px; font-size: 19px; }
  .activity-menu [aria-selected=true] { padding-inline: 9px; }
  .activity-menu button:nth-child(3) { border-bottom: 1px solid var(--line); }
  .activity-panel { padding: 25px; min-height: 590px; border-radius: 13px; }
  .activity-panel .micro { font-size: 9px; }
  .activity-panel .outline-pill { font-size: 9px; }
  .activity-art { margin-top: 7px; width: 285px; height: 230px; transform: scale(1); }
  .activity-route { font-size: 11px; margin-block: 0 25px; }
  .activity-description h3 { font-size: 32px; }
  .activity-description p { font-size: 14px; margin-top: 18px; }
  .activity-detail { font-size: 12px; padding-top: 18px; margin-top: 22px; line-height: 1.8; }
  .panel-footnote { font-size: 10px; }
  .steps { grid-template-columns: minmax(0,1fr); gap: 34px; }
  .steps article { padding-top: 20px; }
  .step-top { margin-bottom: 22px; }
  .step-top > span { font-size: 11px; }
  .step-top svg { height: 33px; width: 33px; }
  .steps h3 { font-size: 27px; margin-bottom: 15px; }
  .steps p { max-width: 460px; font-size: 15px; line-height: 1.8; }
  .workspace-section { padding-bottom: 42px; }
  .demo-notice { font-size: 11px; margin-top: 18px; }
  .dashboard-shell { border-radius: 11px; }
  .window-bar { padding: 13px 14px; gap: 12px; font-size: 10px; }
  .window-dots { gap: 4px; }
  .window-dots i { height: 5px; width: 5px; }
  .window-label { display: none; }
  .dashboard { min-height: 0; }
  .dashboard-sidebar { padding: 10px; gap: 0; }
  .dash-brand { display: none; }
  .dashboard-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; flex: 1; }
  .dashboard-tabs button { min-height: 44px; padding: 10px 6px; font-size: 12px; justify-content: center; text-align: center; white-space: nowrap; }
  .dashboard-tabs button > span { display: none; }
  .dashboard-main { padding-inline: 17px; }
  .dash-topline { min-height: 56px; font-size: 10px; gap: 9px; }
  .demo-badge { padding: 4px 5px; font-size: 8px; letter-spacing: .02em; }
  #dashboard-content { padding-block: 23px; }
  .panel-heading { flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
  .panel-heading h3 { font-size: 25px; line-height: 1.12; }
  .panel-heading p { font-size: 12px; line-height: 1.7; margin-top: 9px; }
  .panel-heading .panel-action { font-size: 12px; min-height: 42px; }
  .session-overview { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .progress-summary { padding: 15px; gap: 19px; }
  .progress-ring { height: 100px; width: 100px; }
  .progress-summary h4 { font-size: 19px; }
  .stat-label { font-size: 11px; }
  .session-metrics { grid-template-columns: 1fr 1fr; }
  .session-metrics > div { padding: 17px; }
  .session-metrics b { font-size: 24px; }
  .session-metrics small { font-size: 10px; }
  .session-activity { align-items: flex-start; padding-block: 21px; }
  .session-icon { margin-top: 3px; }
  .session-activity b { font-size: 12px; line-height: 1.7; }
  .session-activity p { font-size: 11px; line-height: 1.8; margin-top: 7px; }
  .log-heading { font-size: 9px; padding: 12px; }
  .log-demo { font-size: 8px; }
  #session-log li { padding: 13px 12px; gap: 10px; }
  #session-log b { font-size: 12px; }
  #session-log small { font-size: 10px; line-height: 1.7; }
  .demo-toolbar { gap: 9px; margin-top: 23px; }
  .demo-toolbar .button { width: 100%; min-height: 48px; font-size: 13px; padding: 13px 16px; }
  .demo-toolbar .panel-action { flex: 1; min-height: 44px; font-size: 11px; padding-inline: 9px; }
  .dash-bottom { flex-wrap: wrap; gap: 7px; padding-block: 14px; font-size: 10px; }
  .dash-bottom > span:last-child { font-size: 8px; }
  .preview-caption { font-size: 11px; line-height: 1.9; padding-inline: 3px; margin-top: 20px; }
  .table-scroll { margin-inline: -1px; }
  .arena-table { font-size: 12px; min-width: 510px; }
  .form-note { font-size: 12px; line-height: 1.8; }
  .session-form { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .session-form label { font-size: 12px; }
  .session-form label:last-child { grid-column: auto; }
  .session-form input, .session-form select, .access-form select, .access-form input[inputmode] { font-size: 16px; min-height: 49px; }
  .activity-checks { gap: 4px 18px; margin-top: 19px; }
  .activity-checks label { font-size: 12px; min-height: 42px; }
  .form-actions { flex-direction: column; }
  .form-actions .button { min-height: 49px; font-size: 13px; }
  .settings-state { font-size: 11px; line-height: 1.8; }
  .remote { grid-template-columns: minmax(0,1fr); gap: 43px; }
  .remote h2 { font-size: 43px; }
  .remote-copy > p { font-size: 15px; max-width: 450px; }
  .remote .check-list li { font-size: 14px; }
  .remote-copy .remote-note { font-size: 12px; max-width: 400px; }
  .remote-copy .link-arrow { font-size: 13px; }
  .phone-scene { min-height: 730px; max-width: 490px; width: 100%; margin-inline: auto; }
  .phone { width: 287px; transform: rotate(4deg); }
  .phone-content h3 { font-size: 28px; }
  .phone-content { padding-inline: 18px; }
  .phone-session { padding-inline: 15px; }
  .phone-label { font-size: 9px; }
  .phone-orbit { width: 340px; height: 340px; }
  .phone-callout { right: 0; bottom: 117px; padding: 15px 19px; }
  .control-section .section-heading { margin-bottom: 32px; }
  .control-card { display: flex; padding: 27px; gap: 0; }
  .control-index { font-size: 11px; }
  .control-card h3 { font-size: 31px; margin-top: 25px; }
  .control-card > p { font-size: 14px; margin-block: 19px 27px; }
  .control-preview { min-height: 205px; padding: 25px; }
  .duration-preview > div:first-child { font-size: 12px; }
  .duration-preview b { font-size: 14px; }
  .duration-labels { font-size: 11px; }
  .preview-footer { font-size: 11px; }
  .premium-preview { gap: 16px; }
  .premium-preview b { font-size: 12px; }
  .premium-preview div > span { font-size: 11px; }
  .connection-state { gap: 10px; }
  .connection-state b { font-size: 13px; }
  .connection-state div > span { font-size: 11px; }
  .connection-icon { width: 29px; height: 29px; }
  .connection-button { font-size: 12px; min-height: 47px; }
  .plan-layout { grid-template-columns: minmax(0,1fr); gap: 37px; }
  .plan-copy h2 { font-size: 49px; }
  .plan-copy h2 br:last-child { display: none; }
  .plan-copy > p { font-size: 15px; margin-top: 26px; }
  .plan-availability { margin-top: 29px; }
  .plan-availability b { font-size: 13px; }
  .plan-availability div > span { font-size: 12px; }
  .price-card { max-width: 540px; width: 100%; padding: 30px; }
  .price-top { flex-wrap: nowrap; gap: 13px; }
  .plan-tag { font-size: 13px; }
  .plan-tag small { font-size: 11px; }
  .price-top .outline-pill { max-width: 100px; font-size: 8px; text-align: center; padding: 6px; }
  .price { font-size: 78px; margin-top: 33px; }
  .price > span { font-size: 13px; }
  .price-sub { font-size: 11px; }
  .price-card .check-list li { font-size: 13px; padding-block: 9px; }
  .price-card .button { min-height: 52px; font-size: 13px; }
  .price-card > small { font-size: 11px; }
  .faq-section { grid-template-columns: minmax(0,1fr); gap: 34px; }
  .faq-intro h2 { font-size: 42px; }
  .faq-intro > p { font-size: 15px; margin-top: 23px; }
  .faq-asterisk { display: none; }
  .faq-list summary { font-size: 14px; padding-block: 24px; gap: 20px; }
  .faq-list details p { font-size: 14px; line-height: 1.85; padding-right: 5px; }
  .closing { padding-block: 57px; }
  .closing .eyebrow { font-size: 10px; }
  .closing h2 { font-size: 9.8vw; letter-spacing: -.05em; }
  .closing-star { font-size: 44px; top: -7px; }
  .closing-bottom { flex-direction: column; align-items: flex-start; gap: 27px; margin-top: 29px; }
  .closing-bottom p { font-size: 14px; }
  .closing-bottom .button { font-size: 13px; }
  .closing-art { inset-inline-start: 35%; transform: scale(1.6); }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 33px 22px; padding-block: 43px 35px; }
  .footer-identity { grid-column: 1/-1; }
  .footer-identity .brand { font-size: 28px; }
  .footer-identity > p { font-size: 14px; margin-top: 17px; }
  .footer-beta { font-size: 11px; margin-top: 17px; }
  .footer-column { gap: 4px; }
  .footer-column > span { font-size: 10px; margin-bottom: 9px; }
  .footer-column a, .footer-column button { font-size: 12px; min-height: 42px; line-height: 1.7; }
  .back-top { top: 43px; width: 38px; height: 38px; }
  .footer-word { font-size: 15vw; padding-bottom: 20px; }
  .footer-bottom { align-items: flex-start; gap: 12px; padding-block: 22px; font-size: 11px; }
  .footer-bottom > span { width: 100%; }
  .footer-bottom > span:last-child { font-size: 9px; }
  dialog { padding: 24px; border-radius: 12px; width: calc(100% - 24px); max-height: 88dvh; }
  .modal-top { gap: 14px; }
  .modal-top .micro { font-size: 9px; }
  .close-button { height: 40px; width: 40px; }
  .modal-title { font-size: 35px; }
  .modal-copy { font-size: 14px; }
  .modal-action { font-size: 13px; }
  .toast { font-size: 12px; padding: 13px 17px; text-align: center; }
}
@media(max-width:370px) {
  :root { --gutter: 20px; }
  .nav { gap: 10px; }
  .brand { font-size: 23px; }
  .brand img { width: 27px; height: 27px; }
  .nav-cta { font-size: 10px; gap: 8px; padding-inline: 9px; }
  .menu-toggle { margin-inline: -9px -12px; }
  .hero { padding-inline: 20px; }
  .hero-copy .eyebrow { font-size: 9px; }
  .hero-lead { font-size: 14px; }
  .hero-visual { width: calc(100% + 40px); margin-inline: -20px; }
  .hero-meta { gap: 9px; font-size: 9px; }
  .hero-actions { gap: 8px 18px; }
  .hero-actions .button { font-size: 12px; padding-inline: 15px; }
  .hero-bottom { font-size: 7px; }
  .hero-bottom > span { max-width: 150px; }
  .floating-session { width: calc(100% - 36px); right: 18px; padding: 13px; gap: 10px; }
  .floating-session strong { font-size: 11px; }
  .floating-sub { font-size: 9px; }
  .floating-session .micro { font-size: 7px; }
  .spec-inner > div { font-size: 10px; gap: 9px; }
  .spec-inner b { width: 31px; font-size: 29px; }
  .spec-inner svg { width: 26px; margin-right: 3px; }
  h2 { font-size: 38px; }
  .activity-menu { gap: 0 12px; }
  .activity-menu b { font-size: 20px; }
  .activity-menu small { font-size: 10px; }
  .activity-arrow { width: 25px; height: 25px; font-size: 17px; }
  .activity-panel { padding: 22px; }
  .activity-art { transform: scale(.9); transform-origin: right; margin-left: -20px; }
  .activity-description h3 { font-size: 29px; }
  .activity-panel-top .micro { font-size: 8px; }
  .dashboard-main { padding-inline: 13px; }
  .dashboard-tabs button { font-size: 11px; }
  .panel-heading h3 { font-size: 23px; }
  .progress-summary { gap: 13px; padding: 12px; }
  .progress-ring { width: 90px; height: 90px; }
  .progress-summary h4 { font-size: 17px; }
  .session-metrics > div { padding: 14px 12px; }
  .session-metrics b { font-size: 22px; }
  .log-demo { display: none; }
  .phone { width: 265px; }
  .phone-content h3 { font-size: 26px; }
  .phone-content { padding-inline: 15px; }
  .phone-callout { right: -6px; padding: 12px 15px; }
  .control-card { padding: 24px; }
  .control-preview { padding: 20px; }
  .premium-preview b { font-size: 11px; }
  .price-card { padding: 25px; }
  .price { font-size: 70px; }
  .price-sub { font-size: 10px; }
  .closing-star { font-size: 36px; }
  .footer-column > span { font-size: 9px; }
  .footer-column a, .footer-column button { font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .castle-image, .floating-session { transform: none; }
}

/* One stroke language across the product surfaces. */
.icon-defs { position: absolute; overflow: hidden; pointer-events: none; }
.ui-icon { display: block; width: 22px; height: 22px; flex-shrink: 0; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.dashboard-tabs .ui-icon { width: 20px; height: 20px; }
.session-icon .ui-icon { width: 25px; height: 25px; }
.phone-bottom .ui-icon { width: 21px; height: 21px; }
.phone-bottom .ui-icon:first-child { color: #4f7633; }
.phone-activity-icon .ui-icon { width: 23px; height: 23px; }
@media(max-width:700px) { .dashboard-tabs .ui-icon { display: none; } }

/* Website purchases (billing.js) */
.offer-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 28px; padding: 5px; border: 1px solid #70944f; border-radius: 10px; }
.offer-switch[hidden] { display: none; }
.offer-switch button { min-height: 40px; border: 0; border-radius: 7px; background: transparent; color: #c7dbb0; font-size: 13px; font-weight: 550; }
.offer-switch button[aria-checked="true"] { background: var(--lime); color: var(--deep); }
.offer-switch button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.offer-switch + .price { margin-top: 22px; }
.form-error { margin-top: 18px; padding: 12px 14px; border-radius: 8px; background: #fbe7dc; color: #8a2f12; font-size: 13px; line-height: 1.7; }
.form-error[hidden] { display: none; }
.check-field a, .modal-copy a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.modal-action:disabled { opacity: .6; cursor: progress; }