@font-face { font-family: Onest; src: url('/assets/Onest.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: Bricolage; src: url('/assets/BricolageGrotesque.ttf') format('truetype'); font-display: swap; }

:root {
  --night: #030a07;
  --forest: #07130f;
  --canopy: #0b2017;
  --leaf: #123322;
  --line: #204235;
  --paper: #f4f8f4;
  --mist: #a3b9ae;
  --muted: #718b7f;
  --life: #62f47a;
  --life-soft: #b9ffc1;
  --force: #c8ff3d;
  --ink-on-life: #031006;
  --content: 1320px;
  --gutter: clamp(20px, 4vw, 58px);
  --display: Bricolage, Onest, system-ui, sans-serif;
  --body: Onest, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; min-width: 320px; overflow-x: hidden; color: var(--paper); background: var(--night); font-family: var(--body); -webkit-font-smoothing: antialiased; }
body::selection { color: var(--ink-on-life); background: var(--life); }
img, svg { display: block; max-width: 100%; }
a, button { color: inherit; font: inherit; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--life); outline-offset: 4px; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; color: var(--ink-on-life); background: var(--life); border-radius: 8px; font-weight: 800; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header, main > section, footer { width: min(var(--content), calc(100% - (2 * var(--gutter)))); margin-inline: auto; }
main,
.site-header > *,
.hero > *,
.section-heading > *,
.vision-ledger > *,
.product-row > *,
.local-first > *,
.documentation > *,
.faq > *,
footer > * { min-width: 0; }
.site-header { position: relative; z-index: 20; min-height: 86px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 8px; width: max-content; text-decoration: none; }
.wordmark span { font-family: var(--display); font-size: 1.33rem; font-weight: 650; letter-spacing: -.035em; }
.wordmark i { position: relative; width: 20px; height: 29px; border: 4px solid var(--life); border-left-color: transparent; border-radius: 50%; transform: rotate(-18deg); }
.wordmark i::after { content: ''; position: absolute; width: 10px; height: 2px; right: 8px; top: 11px; background: var(--life); transform: rotate(18deg); }
.site-header nav { display: flex; gap: 25px; }
.site-header nav a { color: var(--mist); font-size: .84rem; font-weight: 650; text-decoration: none; transition: color 160ms ease-out; }
.site-header nav a:hover { color: var(--paper); }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.language { min-width: 40px; min-height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--mist); font-size: .78rem; font-weight: 800; text-decoration: none; }
.language:hover { border-color: var(--life); color: var(--paper); }
.coming-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; color: var(--life-soft); background: var(--leaf); border-radius: 10px; font-size: .76rem; font-weight: 750; }

h1, h2, h3 { margin: 0; overflow-wrap: break-word; font-family: var(--display); letter-spacing: -.035em; text-wrap: balance; }
h1 { max-width: 760px; font-size: clamp(4rem, 7vw, 6rem); line-height: .9; }
h1 em { color: var(--life); font-style: normal; }
h2 { max-width: 950px; font-size: clamp(2.8rem, 5vw, 5rem); line-height: .95; }
h3 { font-size: clamp(1.55rem, 2.4vw, 2.5rem); line-height: 1; }
.section-mark, .section-heading > p { margin: 0 0 20px; color: var(--life); font-size: .78rem; font-weight: 780; }

.hero { min-height: calc(100svh - 86px); display: grid; grid-template-columns: minmax(380px, .82fr) minmax(550px, 1.18fr); align-items: center; gap: clamp(40px, 6vw, 92px); padding-block: clamp(70px, 9vw, 130px); }
.availability { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; color: var(--mist); font-size: .8rem; font-weight: 680; }
.availability span { width: 9px; height: 9px; background: var(--life); border-radius: 50%; box-shadow: 0 0 0 5px rgba(98, 244, 122, .1); }
.hero-lead { max-width: 62ch; margin: 28px 0 0; color: var(--mist); font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.66; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.primary-action { min-height: 58px; display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 0 17px 0 20px; color: #131900; background: var(--force); border-radius: 12px; box-shadow: 0 18px 46px rgba(0, 0, 0, .35); font-weight: 830; text-decoration: none; transition: transform 160ms ease-out, background-color 160ms ease-out; }
.primary-action:hover { background: #d7ff6e; transform: translateY(-2px); }
.text-action { color: var(--paper); font-size: .88rem; font-weight: 680; text-underline-offset: 6px; text-decoration-color: var(--line); }
.text-action:hover { text-decoration-color: var(--life); }
.honesty-note { max-width: 62ch; margin: 36px 0 0; padding-top: 18px; color: var(--muted); border-top: 1px solid var(--line); font-size: .78rem; line-height: 1.5; }
.honesty-note strong { color: var(--mist); }

.calendar-evidence { position: relative; min-height: 590px; padding: 16px; overflow: hidden; background: var(--forest); border-radius: 16px; box-shadow: 32px 42px 90px rgba(0, 0, 0, .48); }
.calendar-evidence::before { content: ''; position: absolute; inset: auto -12% -46% 10%; height: 520px; background: url('/assets/lifeos-canopy.webp') center/cover no-repeat; opacity: .3; pointer-events: none; }
.evidence-topline { position: relative; z-index: 2; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 5px; color: var(--muted); font-size: .7rem; }
.evidence-topline strong { color: var(--mist); font-weight: 650; }
.calendar-mock { position: relative; z-index: 2; height: 302px; display: grid; grid-template-columns: 118px 1fr; overflow: hidden; background: #06130e; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(244,248,244,.08); }
.mock-sidebar { display: flex; flex-direction: column; gap: 7px; padding: 17px 10px; color: var(--muted); background: #07110d; border-right: 1px solid #173528; font-size: .55rem; }
.mock-sidebar b { margin-bottom: 18px; color: var(--paper); font-family: var(--display); font-size: .78rem; }
.mock-sidebar span { padding: 8px; border-radius: 5px; }
.mock-sidebar .selected { color: var(--paper); background: #133023; }
.mock-week { min-width: 0; padding: 14px 0 0; }
.mock-week header { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 12px; }
.mock-week header strong { font-family: var(--display); font-size: .85rem; }
.mock-week header span { padding: 5px 8px; color: var(--ink-on-life); background: var(--life); border-radius: 5px; font-size: .5rem; font-weight: 800; }
.mock-days { display: grid; grid-template-columns: repeat(5,1fr); min-height: 32px; border-block: 1px solid #173528; }
.mock-days b { display: grid; place-items: center; color: var(--muted); border-left: 1px solid #173528; font-size: .46rem; }
.mock-grid { position: relative; height: 230px; background: linear-gradient(#173528 1px, transparent 1px) 0 0/100% 32px; }
.mock-grid::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg,#173528 1px,transparent 1px) 0 0/20% 100%; pointer-events:none; }
.mock-grid .block { position:absolute; z-index:1; display:flex; align-items:center; padding:0 7px; border-radius:4px; font-size:.48rem; font-style:normal; font-weight:700; }
.mock-grid .work { left:2%; top:34px; width:18%; height:54px; color:#c9d5ff; background:#28305a; }
.mock-grid .training { left:42%; top:98px; width:18%; height:60px; color:#c7ffd0; background:#15522b; }
.mock-grid .note { left:81%; top:162px; width:17%; height:43px; color:#dff8ff; background:#164755; }
.time-marker { position: relative; z-index: 3; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; margin: 25px 5px 0; color: var(--life); font-size: .68rem; font-weight: 740; }
.time-marker i { height: 1px; background: var(--life); }
.evidence-caption { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: end; margin: 32px 5px 4px; }
.evidence-caption strong { max-width: 12ch; font-family: var(--display); font-size: clamp(1.5rem, 2.5vw, 2.3rem); line-height: .98; }
.evidence-caption span { color: var(--mist); font-size: .8rem; line-height: 1.5; }
.page-ready .calendar-evidence { animation: calendar-settle 780ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes calendar-settle { from { filter: blur(5px); transform: translate(32px, 24px) rotate(1.3deg); } to { filter: blur(0); transform: translate(0) rotate(0); } }

.ecosystem-strip { width: 100%; max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2)); background: var(--life); color: var(--ink-on-life); }
.ecosystem-strip p { margin: 0; padding: 22px clamp(14px, 2vw, 34px); }
.ecosystem-strip p:first-child { padding-left: 0; }
.ecosystem-strip p + p { border-left: 1px solid rgba(3, 16, 6, .22); }
.ecosystem-strip strong, .ecosystem-strip span { display: block; }
.ecosystem-strip strong { font-family: var(--display); font-size: 1.18rem; }
.ecosystem-strip span { margin-top: 3px; font-size: .75rem; opacity: .72; }

.vision, .products, .local-first, .roadmap, .documentation, .faq { padding-block: clamp(100px, 12vw, 170px); }
.section-heading { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; margin-bottom: clamp(55px, 7vw, 92px); }
.section-heading > p { grid-column: 1 / -1; }
.vision-ledger { margin-left: min(17vw, 220px); }
.vision-ledger article { display: grid; grid-template-columns: 160px minmax(260px, .7fr) minmax(300px, 1fr); gap: clamp(20px, 4vw, 70px); align-items: start; padding: 34px 0; border-top: 1px solid var(--line); }
.vision-ledger article:last-child { border-bottom: 1px solid var(--line); }
.vision-ledger article > span { color: var(--life); font-size: .75rem; font-weight: 760; }
.vision-ledger p { max-width: 58ch; margin: 0; color: var(--mist); line-height: 1.65; }

.products { width: 100%; max-width: none; display: grid; grid-template-columns: minmax(320px, .75fr) minmax(600px, 1.25fr); gap: clamp(50px, 8vw, 120px); padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2)); background: var(--forest); }
.products-copy { align-self: start; }
.products-copy h2 { font-size: clamp(2.8rem, 4.8vw, 4.7rem); }
.products-copy > p:last-child { max-width: 56ch; margin: 26px 0 0; color: var(--mist); line-height: 1.65; }
.product-ledger { border-top: 1px solid var(--line); }
.product-row { display: grid; grid-template-columns: 190px 1fr 210px; gap: 28px; align-items: center; min-height: 196px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.product-identity { display: flex; align-items: center; gap: 14px; }
.product-identity img, .lifeos-glyph { width: 50px; height: 50px; flex: 0 0 auto; border-radius: 13px; }
.lifeos-glyph { position: relative; display: block; background: var(--leaf); }
.lifeos-glyph::before { content: ''; position: absolute; inset: 12px; border: 3px solid var(--life); border-left-color: transparent; border-radius: 50%; transform: rotate(-18deg); }
.product-identity strong, .product-identity span { display: block; }
.product-identity strong { font-family: var(--display); font-size: 1.2rem; }
.product-identity span { margin-top: 3px; color: var(--muted); font-size: .72rem; }
.product-row > p { margin: 0; color: var(--mist); font-size: .9rem; line-height: 1.58; }
.product-state { display: flex; align-items: flex-end; flex-direction: column; gap: 13px; text-align: right; }
.status { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 8px; font-size: .7rem; font-weight: 780; }
.status.available { color: #151b00; background: var(--force); }
.status.soon { color: var(--life-soft); background: var(--leaf); }
.product-state a { font-size: .82rem; font-weight: 740; text-underline-offset: 5px; text-decoration-color: var(--line); }
.product-state a:hover { text-decoration-color: var(--force); }
.no-action { color: var(--muted); font-size: .72rem; }

.local-first { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(52px, 9vw, 130px); align-items: center; }
.local-scene { position: relative; min-height: 610px; overflow: hidden; background: var(--forest); border-radius: 16px; }
.local-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; filter: saturate(.8) contrast(1.1); }
.local-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 10, 7, .1), rgba(3, 10, 7, .78)); }
.local-orbit { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; }
.local-orbit span, .local-orbit strong { min-width: 150px; padding: 14px 18px; text-align: center; background: rgba(3, 10, 7, .82); border-radius: 10px; backdrop-filter: blur(8px); }
.local-orbit strong { color: var(--ink-on-life); background: var(--life); font-family: var(--display); font-size: 1.35rem; }
.local-orbit i { width: 1px; height: 46px; background: var(--life); }
.local-copy > p:not(.section-mark) { max-width: 60ch; margin: 27px 0 0; color: var(--mist); line-height: 1.68; }
.local-copy dl { margin: 36px 0 0; }
.local-copy dl div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); }
.local-copy dl div:last-child { border-bottom: 1px solid var(--line); }
.local-copy dt { color: var(--muted); font-size: .75rem; }
.local-copy dd { margin: 0; font-size: .84rem; font-weight: 690; text-align: right; }

.roadmap { width: 100%; max-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2)); background: var(--paper); color: #0b160f; }
.section-heading.compact { display: block; }
.roadmap .section-heading > p { color: #1a6b30; }
.roadmap ol { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid #b8c9bd; }
.roadmap li { position: relative; min-height: 260px; padding: 28px 25px 28px 0; }
.roadmap li + li { padding-left: 25px; border-left: 1px solid #b8c9bd; }
.roadmap li > span { color: #627367; font-size: .7rem; font-weight: 760; }
.roadmap li.done > span { color: #4d6200; }
.roadmap li.active > span { color: #167d32; }
.roadmap li strong { display: block; max-width: 14ch; margin-top: 35px; font-family: var(--display); font-size: 1.5rem; line-height: 1; }
.roadmap li p { max-width: 32ch; margin: 14px 0 0; color: #536157; font-size: .82rem; line-height: 1.55; }
.roadmap li::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 9px; height: 9px; background: #92a397; border-radius: 50%; }
.roadmap li.done::after { background: var(--force); box-shadow: 0 0 0 5px rgba(200,255,61,.23); }
.roadmap li.active::after { background: #22a846; box-shadow: 0 0 0 5px rgba(34,168,70,.14); }

.documentation { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(540px, 1.2fr); gap: clamp(50px, 9vw, 130px); }
.documentation h2 { font-size: clamp(2.7rem, 4.4vw, 4.3rem); }
.doc-links { border-top: 1px solid var(--line); }
.doc-links a { display: grid; grid-template-columns: 210px 1fr; gap: 28px; padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.doc-links a strong { font-family: var(--display); font-size: 1.12rem; }
.doc-links a span { color: var(--mist); font-size: .82rem; line-height: 1.5; }
.doc-links a:hover strong { color: var(--life); }

.faq { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(560px, 1.28fr); gap: clamp(50px, 9vw, 130px); border-top: 1px solid var(--line); }
.faq h2 { font-size: clamp(2.7rem, 4.3vw, 4.2rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 25px 44px 25px 0; cursor: pointer; font-family: var(--display); font-size: 1.06rem; font-weight: 680; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 22px; color: var(--life); font-size: 1.4rem; font-weight: 400; }
.faq details[open] summary::after { content: '−'; }
.faq details p { max-width: 68ch; margin: -5px 0 25px; color: var(--mist); line-height: 1.65; }

footer { min-height: 160px; display: grid; grid-template-columns: auto 1fr auto; gap: 40px; align-items: center; border-top: 1px solid var(--line); }
.footer-mark { opacity: .8; }
footer > p { margin: 0; color: var(--muted); font-size: .78rem; }
footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
footer nav a { color: var(--mist); font-size: .75rem; text-underline-offset: 4px; text-decoration-color: transparent; }
footer nav a:hover { color: var(--paper); text-decoration-color: var(--life); }

@media (max-width: 1050px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .calendar-evidence { min-height: 560px; }
  .products { grid-template-columns: 1fr; }
  .product-row { grid-template-columns: 180px 1fr 190px; }
  .vision-ledger { margin-left: 0; }
}

@media (max-width: 760px) {
  :root { --gutter: 18px; }
  .site-header { min-height: 74px; }
  .coming-pill { display: none; }
  h1 { font-size: clamp(3rem, 13.4vw, 4.15rem); }
  h2 { font-size: clamp(2.65rem, 12vw, 4rem); }
  .hero { min-height: auto; padding-block: 52px 74px; }
  .hero-copy { min-width: 0; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .primary-action { width: 100%; }
  .text-action { text-align: center; }
  .calendar-evidence { min-height: 480px; padding: 10px; }
  .calendar-mock { height: 230px; grid-template-columns: 84px 1fr; }
  .mock-sidebar { padding-inline: 7px; }
  .evidence-topline strong { display: none; }
  .evidence-caption { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .evidence-caption strong { max-width: none; }
  .ecosystem-strip { grid-template-columns: 1fr; padding-inline: var(--gutter); }
  .ecosystem-strip p { padding: 15px 0; }
  .ecosystem-strip p + p { border-top: 1px solid rgba(3,16,6,.22); border-left: 0; }
  .vision, .products, .local-first, .roadmap, .documentation, .faq { padding-block: 88px; }
  .section-heading { display: block; }
  .vision-ledger article { grid-template-columns: 1fr; gap: 12px; padding: 27px 0; }
  .product-row { grid-template-columns: 1fr; gap: 18px; min-height: auto; }
  .product-state { align-items: flex-start; text-align: left; }
  .local-first { grid-template-columns: 1fr; }
  .local-scene { min-height: 470px; }
  .roadmap ol { grid-template-columns: 1fr; }
  .roadmap li, .roadmap li + li { min-height: auto; padding: 25px 0; border-left: 0; border-bottom: 1px solid #b8c9bd; }
  .roadmap li strong { max-width: none; margin-top: 18px; }
  .roadmap li::after { display: none; }
  .documentation, .faq { grid-template-columns: 1fr; }
  .doc-links a { grid-template-columns: 1fr; gap: 7px; }
  footer { grid-template-columns: 1fr; align-content: center; gap: 14px; padding-block: 34px; }
  footer nav { justify-content: flex-start; }
}

@media (max-width: 560px) {
  :root { --gutter: 16px; }
  h1 { font-size: clamp(2.55rem, 12.8vw, 3.35rem); text-wrap: pretty; }
  h2 { font-size: clamp(2.2rem, 11vw, 3rem); text-wrap: pretty; }
  h3 { font-size: clamp(1.55rem, 8vw, 2.1rem); text-wrap: pretty; }
  .availability { align-items: flex-start; flex-wrap: wrap; line-height: 1.45; }
  .evidence-topline { line-height: 1.4; }
  .calendar-evidence { min-height: 452px; }
  .calendar-mock { grid-template-columns: 72px minmax(0, 1fr); }
  .mock-sidebar { font-size: .5rem; }
  .mock-week header { padding-inline: 10px; }
  .ecosystem-strip p { overflow-wrap: anywhere; }
  .local-scene { min-height: 420px; }
  .local-copy dl div { grid-template-columns: 1fr; gap: 5px; }
  .local-copy dd { text-align: left; }
  .product-state, .product-row > p, .doc-links span, .faq details p { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}