:root {
  --ink:#192620; --forest:#203b32; --moss:#5e846b; --cream:#f5f0e6;
  --paper:#fffdf8; --sun:#d9934f; --line:#d6d9ca; --radius:1.1rem;
  --desktop-pastel-ink:#382b30; --desktop-pastel-muted:#705d64;
  --desktop-pastel-border:#fff8f6ba;
  --desktop-pastel-surface:radial-gradient(circle at 20% 15%,rgba(255,255,255,.34),transparent 34%),repeating-linear-gradient(118deg,rgba(126,68,84,.025) 0 1px,transparent 1px 5px),linear-gradient(135deg,rgba(250,229,232,.9),rgba(237,204,211,.84));
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#18283d; font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:-.005em; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; line-height:1.04; text-wrap:balance; }
h1 { font-size:clamp(2.85rem,6vw,5.7rem); letter-spacing:-.045em; }
h2 { font-size:clamp(2rem,3.5vw,3.45rem); letter-spacing:-.03em; }
h3 { font-size:1.15rem; line-height:1.25; letter-spacing:-.01em; }
a { color:inherit; }
img { display:block; width:100%; height:auto; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:5; background:#fff; padding:.75rem; }
.skip-link:focus { top:1rem; }
:focus-visible { outline:3px solid #f1b06e; outline-offset:3px; }

.site-header { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem clamp(1.25rem,4vw,4.5rem); background:color-mix(in srgb,var(--paper) 94%,transparent); border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); backdrop-filter:blur(10px); }
.brand { text-decoration:none; font:700 1.15rem/1 Georgia,serif; white-space:nowrap; }
.brand span { margin-left:.22em; color:var(--moss); }
nav { display:flex; gap:1.2rem; }
nav a { font-size:.9rem; text-decoration:none; }
nav a:hover,.text-link:hover { color:var(--moss); text-decoration:underline; text-underline-offset:.22em; }

.section { width:min(1180px,calc(100% - 2.5rem)); margin:0 auto; padding:clamp(4.5rem,10vw,8rem) 0; scroll-margin-top:6.5rem; }
.page-background { position:fixed; inset:var(--site-header-height,4.35rem) 0 0; z-index:0; margin:0; overflow:hidden; pointer-events:none; background:#18283d; }
.page-background-scroll,.page-background-static { position:absolute; inset:0; }
.page-background-scroll { display:none; }
.is-scroll-enhanced .page-background-scroll { display:block; }
.is-scroll-enhanced .page-background-static { display:none; }
.hero-journey { position:relative; min-height:calc(100svh - var(--site-header-height,4.35rem)); background:transparent; }
.hero-shell { position:relative; display:flex; align-items:center; width:100%; max-width:none; min-height:calc(100svh - var(--site-header-height,4.35rem)); padding:clamp(1.5rem,4vw,4rem) 0; isolation:isolate; background:transparent; }
.hero-shell::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,#10231eed 0%,#10231ec9 26%,#10231e5e 53%,transparent 76%),linear-gradient(0deg,#10231e99 0%,transparent 42%); }
.hero-copy { position:relative; z-index:3; width:min(39rem,47vw); margin-left:max(1.25rem,calc((100% - 1180px)/2)); color:#fffdf8; text-shadow:0 2px 18px #08141080; }
.hero-copy h1 { max-width:11ch; margin-bottom:1.15rem; font-size:clamp(3.15rem,5vw,5.45rem); }
.eyebrow { color:var(--moss); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero-copy .eyebrow { color:#d4e7b3; }
.lede { max-width:38rem; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.55; }
.hero-frame { position:absolute; inset:0; overflow:hidden; background:#18283d; isolation:isolate; }
.hero-frame::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 0 1px #ffffff1f; }
.hero-state { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%; opacity:0; will-change:opacity; }
.hero-state.is-loaded { opacity:var(--state-opacity,0); }
.hero-state[data-state="day"].is-loaded { --state-opacity:1; }
.hero-state-readout { position:absolute; z-index:3; right:max(1.25rem,calc((100% - 1180px)/2)); top:1.5rem; display:grid; justify-items:end; padding:.55rem .75rem; border:1px solid #ffffff42; border-radius:.8rem; color:white; background:#14231f99; backdrop-filter:blur(8px); text-shadow:0 1px 4px #000; }
.hero-state-readout span { font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.hero-state-readout strong { font:700 1.05rem/1.2 Georgia,serif; }
.hero-timeline { position:absolute; z-index:3; left:max(1.25rem,calc((100% - 1180px)/2)); right:max(1.25rem,calc((100% - 1180px)/2)); bottom:1.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; color:#ffffffa8; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-shadow:0 1px 5px #000; text-transform:uppercase; }
.hero-timeline::before { content:""; position:absolute; top:-.45rem; left:0; width:100%; height:2px; background:#d6d9ca; }
.hero-timeline::after { content:""; position:absolute; top:-.45rem; left:0; width:calc(var(--hero-progress,0) * 100%); height:2px; background:var(--sun); }
.hero-timeline span { transition:color .18s ease; }
.hero-timeline span:nth-child(n+3) { text-align:right; }
.hero-timeline span.is-active { color:#fff; }
.page-background-static { display:block; }
.page-background-static > img,.page-background-static noscript,.page-background-static noscript img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%; background:#18283d; }
.page-background figcaption { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
figcaption { padding-top:.6rem; color:#536158; font-size:.8rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin:1.65rem 0; }
.button { display:inline-block; border:1px solid var(--forest); border-radius:999px; padding:.72rem 1.1rem; background:var(--forest); color:white; font-weight:700; text-decoration:none; }
.button:hover,.button:focus { background:#10261e; }
.button-quiet { background:transparent; color:var(--forest); }
.hero-copy .button { border-color:#f6f0e5; background:#f6f0e5; color:#173129; text-shadow:none; }
.hero-copy .button:hover,.hero-copy .button:focus { background:#fff; }
.hero-copy .button-quiet { border-color:#ffffff8c; background:#10231e80; color:#fff; }
.button-small { padding:.55rem .85rem; font-size:.85rem; }
.fact-strip { display:flex; flex-wrap:wrap; gap:.5rem 1rem; padding:0; color:#45564b; font-size:.85rem; list-style:none; }
.hero-copy .fact-strip { color:#f4f4e5d9; }
.fact-strip li::before { content:"•"; color:var(--sun); margin-right:.35rem; }

main,.site-footer { position:relative; z-index:1; }
main > .section { margin-block:clamp(.75rem,2vw,1.5rem); padding-inline:clamp(1.25rem,3vw,2.5rem); color:#f5f8f6; background:transparent; border:0; box-shadow:none; backdrop-filter:none; text-shadow:0 2px 12px #07120fe6,0 1px 2px #07120f; }
main > .section .eyebrow { color:#c8dda9; }
main > .section h2 { max-width:18ch; }

.value-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:3rem; border-top:1px solid var(--line); }
.cards { display:grid; gap:1rem; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.cards.two { grid-template-columns:repeat(2,1fr); }
.cards article,.doc-card { border:1px solid #ffffff2e; border-radius:var(--radius); padding:clamp(1.2rem,2.2vw,1.55rem); color:#f5f8f6; background:#142923; box-shadow:0 8px 20px #07120f38; backdrop-filter:none; text-shadow:none; }
.cards article p,.doc-card p { line-height:1.58; }
.media-split,.asset-library { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.media-split figure,.asset-library figure { margin:0; }
.media-split img,.asset-library img { border:1px solid #ffffff2b; border-radius:var(--radius); box-shadow:0 12px 32px #07120f4a; }
.included-media { display:grid; gap:.8rem; }
.included-media figure { position:relative; overflow:hidden; border-radius:var(--radius); }
.included-media img { display:block; width:100%; }
.included-media-primary img { aspect-ratio:5/3; object-fit:cover; }
.included-media-supporting { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.included-media-supporting img { aspect-ratio:5/3; object-fit:cover; }
.detail-systems-pair { display:grid; grid-template-columns:1fr 1fr; min-height:100%; }
.detail-systems-pair img { height:100%; border-radius:0; box-shadow:none; }
.included-technical-proof { grid-column:1/-1; }
.included-technical-proof img { aspect-ratio:5/3; object-position:center; }
.included-media figcaption { position:absolute; inset:auto .55rem .55rem; padding:.45rem .6rem; color:#fff; background:#0b1714d9; border:1px solid #ffffff38; border-radius:.55rem; font-size:.76rem; font-weight:750; line-height:1.25; text-shadow:none; }
.check-list { padding-left:1.2rem; }
.check-list li { margin:.45rem 0; }
.check-list li::marker { color:var(--moss); }
.text-link { display:inline-block; margin-top:1rem; color:var(--forest); font-weight:800; }
main > .plain-ready { background:transparent; }
.section-heading { max-width:50rem; margin-bottom:2rem; }
.section-heading > p:last-child { max-width:44rem; }
.comparison { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.comparison article { position:relative; overflow:hidden; color:#f5f8f6; background:#142923; border:1px solid #ffffff2e; border-radius:var(--radius); padding-bottom:1.2rem; box-shadow:0 10px 24px #07120f38; backdrop-filter:none; text-shadow:none; }
.comparison img { width:100%; aspect-ratio:5/6; object-fit:cover; }
.comparison h3,.comparison p { margin:.9rem 1.2rem 0; }
.comparison-label { position:absolute; z-index:1; top:1rem; left:1rem; padding:.35rem .65rem; background:var(--paper); border-radius:999px; font-weight:800; }
.comparison-label.accent { background:var(--sun); color:#251509; }
.callout { max-width:62rem; margin:1.5rem 0 0; padding:1rem 1.15rem; border-left:4px solid var(--sun); color:#f5f8f6; background:#142923; backdrop-filter:none; text-shadow:none; }
main > .asset-library { background:transparent; color:#f8f5ed; }
.asset-library .eyebrow { color:#bdcf9c; }
.asset-library { grid-template-columns:.8fr 1.2fr; }
.asset-browser-screenshot img { display:block; width:100%; aspect-ratio:1440/537; object-fit:cover; object-position:top; }
.product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; }
.proof-card { overflow:hidden; margin:0; color:#f5f8f6; background:#142923; border:1px solid #ffffff2e; border-radius:var(--radius); box-shadow:0 10px 24px #07120f38; text-shadow:none; }
.proof-card img { width:100%; aspect-ratio:5/3; object-fit:cover; background:#101c20; }
.proof-card.proof-contain img { object-fit:contain; }
.proof-card figcaption { display:grid; gap:.35rem; padding:1rem 1.2rem 1.2rem; }
.proof-card figcaption strong { font-size:1.1rem; }
.proof-card figcaption span { color:#d5dfda; line-height:1.5; }
main > .limits { background:transparent; }
.included-card { border-top:5px solid var(--moss)!important; }
.not-included-card { border-top:5px solid var(--sun)!important; }
.not-included-card ul { padding-left:1.2rem; }
.doc-card { display:block; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.doc-card:hover { transform:translateY(-3px); box-shadow:0 9px 20px #203b3218; }
.marketplaces { text-align:center; }
.marketplaces .section-heading { margin-inline:auto; }
.marketplace-choice { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:850px; margin:auto; }
.marketplace-choice a { display:block; padding:1.1rem; color:#f5f8f6; background:#142923; border:1px solid #ffffff2e; border-radius:var(--radius); box-shadow:0 8px 20px #07120f38; backdrop-filter:none; font:800 1.05rem/1.2 inherit; text-decoration:none; text-shadow:none; cursor:pointer; }
.marketplace-choice a:hover,.marketplace-choice a:focus-visible { outline:3px solid #c7dd91; border-color:var(--moss); }
.marketplace-choice span { display:block; margin-top:.45rem; color:#cbd8d1; font-size:.8rem; font-weight:500; }
.route-status { width:fit-content; max-width:44rem; min-height:1.5em; margin:1.2rem auto 0; padding:.55rem .8rem; border-radius:.75rem; color:#e6eee9; background:#142923; backdrop-filter:none; font-size:.9rem; font-weight:600; text-shadow:none; }
.site-footer { display:flex; justify-content:space-between; gap:1rem; padding:2rem max(1.25rem,calc((100% - 1180px)/2)); background:#192a22; color:#e7eee6; font-size:.85rem; }
.site-footer a { white-space:nowrap; }
.content-page { color:var(--ink); background:var(--cream); }
.content-page .site-header { position:relative; }
.content-page main { min-height:calc(100svh - 6rem); }
.guide-page,.utility-page { max-width:820px; }
.guide-page h1,.utility-page h1 { max-width:13ch; font-size:clamp(3rem,8vw,5.5rem); }
.guide-page h2 { margin-top:2.75rem; font-size:clamp(1.7rem,4vw,2.5rem); }
.guide-page p,.guide-page li { max-width:70ch; }
.guide-page .cards { margin:2.5rem 0; }
.guide-page .doc-card { color:var(--ink); background:var(--paper); border-color:var(--line); box-shadow:0 10px 28px #203b3214; }
.content-page .text-link { color:var(--forest); }

@media (min-width:821px) {
  .cards article,.doc-card,.comparison article,.proof-card,.marketplace-choice a,.callout,.route-status { color:var(--desktop-pastel-ink); background:var(--desktop-pastel-surface); border-color:var(--desktop-pastel-border); box-shadow:0 9px 24px #2d18203d,inset 0 1px #ffffff80; backdrop-filter:blur(7px) saturate(.86); }
  .comparison article { box-shadow:0 10px 26px #2d182042,inset 0 1px #ffffff80; }
  .comparison-label { color:var(--desktop-pastel-ink); background:#fae7e9ed; border:1px solid #fff8f6b8; }
  .callout { border-left-color:#c98291; }
  .doc-card:hover { box-shadow:0 12px 28px #2d182052,inset 0 1px #ffffff80; }
  .marketplace-choice span { color:var(--desktop-pastel-muted); }
  .proof-card figcaption span { color:var(--desktop-pastel-muted); }
  .route-status { border:1px solid var(--desktop-pastel-border); }
  .text-link { color:#fae5e8; }
  .text-link:hover,.text-link:focus-visible { color:#fff5f6; }
}

@media (min-width:821px) and (max-width:1100px) {
  .value-grid { grid-template-columns:1fr; gap:1.5rem; }
  .hero-copy { width:min(36rem,58vw); }
  .hero-copy h1 { font-size:clamp(3.1rem,5.6vw,4.7rem); }
}

@media (max-width:820px) {
  .site-header { flex-wrap:wrap; }
  nav { order:3; width:100%; justify-content:space-between; gap:.5rem; overflow:auto; }
  nav a { white-space:nowrap; }
  .site-header .button-small { margin-left:auto; }
  .hero-shell { align-items:flex-end; min-height:calc(100svh - var(--site-header-height,9.15rem)); }
  .hero-shell::after { background:linear-gradient(0deg,#0d201ec4 0%,#0d201e8f 39%,#0d201e24 68%,transparent 100%); }
  .hero-state,.page-background-static > img,.page-background-static noscript img { object-position:50% 72%; }
  .hero-copy { width:auto; margin:0 1.15rem 2.65rem; }
  .hero-copy h1 { max-width:11ch; margin-bottom:.7rem; font-size:clamp(2.5rem,11vw,3.35rem); }
  .hero-copy .eyebrow { margin-bottom:.55rem; font-size:.65rem; }
  .hero-copy .lede { max-width:31rem; margin-bottom:.8rem; font-size:.94rem; line-height:1.42; }
  .hero-copy .hero-actions { gap:.5rem; margin:.9rem 0; }
  .hero-copy .button { padding:.64rem .85rem; font-size:.82rem; }
  .hero-copy .fact-strip { gap:.2rem .75rem; margin-bottom:0; font-size:.69rem; }
  .hero-state-readout,.hero-timeline { display:none; }
  main > .section { width:calc(100% - 1.25rem); margin-block:.7rem; padding:clamp(3.6rem,14vw,5.2rem) 1rem; color:#f5f8f6; background:transparent; border:0; box-shadow:none; backdrop-filter:none; text-shadow:0 2px 12px #050b09,0 1px 3px #050b09; }
  main > .plain-ready,main > .limits,main > .asset-library { background:transparent; }
  main > .section .eyebrow { color:#c4dcae; }
  .cards article,.doc-card,.comparison article,.proof-card,.marketplace-choice a { color:#f5f8f6; background:transparent; border-color:#ffffff52; box-shadow:none; backdrop-filter:none; text-shadow:0 2px 10px #050b09,0 1px 2px #050b09; }
  .marketplace-choice a { color:#f5f8f6; }
  .marketplace-choice span,.route-status { color:#d9e3de; }
  .comparison-label { color:#173129; background:#dfe7e3; }
  .comparison-label.accent { color:#251509; background:var(--sun); }
  .callout,.route-status { color:#f5f8f6; background:transparent; border-color:#ffffff52; box-shadow:none; backdrop-filter:none; text-shadow:0 2px 10px #050b09,0 1px 2px #050b09; }
  .text-link { color:#e7f1ec; }
  .value-grid,.media-split,.asset-library { grid-template-columns:1fr; }
  .cards.three,.cards.two,.comparison,.product-grid,.marketplace-choice { grid-template-columns:1fr; }
  .site-footer { display:block; }
  .site-footer p { margin-bottom:1rem; }
  .content-page .site-header { flex-wrap:nowrap; }
  .content-page .guide-page,.content-page .utility-page { width:calc(100% - 2rem); padding:4rem 0; }
  .content-page .cards article,.content-page .doc-card { color:var(--ink); background:var(--paper); border-color:var(--line); text-shadow:none; }
}

@media (max-width:430px) {
  .included-media-supporting { grid-template-columns:1fr; }
  .included-technical-proof { grid-column:auto; }
  .site-header { gap:.65rem; padding:.8rem 1rem; }
  nav { gap:.8rem; }
  nav a { font-size:.8rem; }
  .site-header .button-small { padding:.52rem .72rem; font-size:.78rem; }
  .hero-copy { margin-inline:1rem; }
  .hero-copy h1 { font-size:clamp(2.35rem,10.6vw,3rem); }
}

@media (max-width:820px) and (max-height:640px) {
  .site-header nav,.site-header .button-small { display:none; }
  .hero-copy { margin-bottom:2.25rem; }
  .hero-copy h1 { max-width:12ch; margin-bottom:.45rem; font-size:clamp(2rem,10vw,2.45rem); line-height:.98; }
  .hero-copy .eyebrow { margin-bottom:.35rem; font-size:.58rem; }
  .hero-copy .lede { margin-bottom:.45rem; font-size:.78rem; line-height:1.35; }
  .hero-copy .hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:.35rem; margin:.55rem 0 0; }
  .hero-copy .button { padding:.55rem .3rem; font-size:.68rem; text-align:center; white-space:nowrap; }
  .hero-copy .fact-strip { display:none; }
  .hero-timeline { font-size:.48rem; white-space:nowrap; }
}

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