/* Public page only. The remote client's surfaces keep their own tokens. */
.landing-shell {
  --landing-paper: #f8f7f2;
  --landing-ink: #202925;
  --landing-muted: #56615b;
  --landing-line: #d8ddd6;
  --landing-blue: #1267bd;
  --landing-band: min(1120px, calc(100% - 96px));
  color: var(--landing-ink);
  background: var(--landing-paper);
  overflow: clip;
  font-family: "Inter Variable", Inter, system-ui, sans-serif;
}
.landing-shell *, .landing-shell *::before, .landing-shell *::after { box-sizing: border-box; }
.landing-shell a { color: inherit; text-underline-offset: 5px; }
.landing-shell a:focus-visible, .landing-shell button:focus-visible, .landing-shell summary:focus-visible, .landing-shell [tabindex="0"]:focus-visible { outline: 3px solid var(--landing-blue); outline-offset: 5px; }
.landing-shell figure, .landing-shell blockquote { margin: 0; }
.landing-shell img { display: block; max-width: 100%; height: auto; }
.landing-shell h1, .landing-shell h2, .landing-shell h3, .landing-shell p { margin: 0; }
.landing-shell h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.7vw, 50px); line-height: 1.15; letter-spacing: -.045em; }
.landing-top { width: var(--landing-band); margin: auto; height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 13px; }
.landing-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 550; }
.landing-top nav, .landing-colophon nav { display: flex; align-items: center; gap: 30px; }
.landing-top nav a { text-decoration: none; padding-block: 12px; }
.landing-top nav a:hover { color: var(--landing-blue); }
.landing-skip { position: absolute; top: -100px; left: 20px; z-index: 3; padding: 12px 20px; background: var(--landing-paper); }
.landing-skip:focus { top: 10px; }
.landing-hero { width: 100%; text-align: center; background: var(--landing-paper); }
.landing-hero-copy { padding: 6px 24px 24px; }
.landing-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(76px, 10.5vw, 128px); line-height: 1.12; letter-spacing: -.075em; margin-left: -.055em; }
.landing-promise { font-size: clamp(21px, 2.15vw, 30px); line-height: 1.3; letter-spacing: -.035em; margin-top: 8px !important; }
.landing-intro { color: var(--landing-muted); font-size: 15px; line-height: 1.6; margin-top: 12px !important; }
.landing-download-row { margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 18px; }
.landing-download-row > span { font-size: 12px; color: var(--landing-muted); }
.landing-shell .landing-download { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 46px; padding: 12px 20px; background: var(--landing-blue); color: white; border-radius: 5px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background 160ms, transform 160ms; }
.landing-download:hover { background: #084f99; transform: translateY(-2px); }
.landing-download span { transition: transform 160ms; }
.landing-download:hover span { transform: translateY(3px); }
.landing-hero-shot { padding: 26px 24px 18px; background: #dce7e8; }
.landing-hero-shot a { display: block; width: fit-content; margin: auto; border-radius: 8px; }
.landing-hero-shot img { width: auto; max-height: 40svh; border-radius: 8px; box-shadow: 0 12px 36px #1e382324; }
.landing-hero-shot figcaption { margin-top: 14px; font-size: 12px; color: #465950; }
.landing-section { width: var(--landing-band); margin: auto; padding-block: 112px; scroll-margin-top: 30px; }
.landing-kicker { color: var(--landing-muted); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px !important; line-height: 1.6; }
.landing-steps { list-style: none; margin: 52px 0 56px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.landing-steps li { border-top: 1px solid var(--landing-line); padding-top: 16px; }
.landing-steps li > span { color: var(--landing-blue); font-size: 12px; }
.landing-steps h3 { font-size: 18px; font-weight: 550; margin-block: 24px 12px; }
.landing-steps p { color: var(--landing-muted); font-size: 15px; line-height: 1.65; max-width: 290px; }
.landing-example { background: #e9ede5; padding: 32px 40px 40px; }
.landing-example-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid #ccd5c7; padding-bottom: 22px; }
.landing-example-top .landing-kicker { margin: 0 !important; }
.landing-example-tabs { display: flex; gap: 20px; }
.landing-example-tabs button { font: inherit; font-size: 13px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--landing-muted); padding: 10px 0; border-radius: 0; cursor: pointer; }
.landing-example-tabs button[aria-selected="true"] { color: var(--landing-ink); border-color: var(--landing-blue); }
.landing-example-panel { padding-top: 26px; }
.landing-example-panel[hidden] { display: none; }
.landing-folder { font-size: 12px; color: var(--landing-muted); }
.landing-folder span { margin-left: 10px; opacity: .5; }
.landing-example-panel blockquote { max-width: 800px; font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -.025em; line-height: 1.4; margin-block: 20px 24px; }
.landing-example-result { color: var(--landing-muted); font-size: 15px; max-width: 620px; line-height: 1.6; }
.landing-fold-band { background: #e8ede6; }
.landing-fold { display: grid; grid-template-columns: 1fr 400px; align-items: center; gap: 100px; }
.landing-body { color: var(--landing-muted); font-size: 17px; line-height: 1.7; margin-top: 24px !important; max-width: 510px; }
.landing-prompt { font-size: 21px; line-height: 1.5; border-left: 2px solid var(--landing-blue); padding-left: 22px; margin-top: 34px !important; max-width: 410px; }
.landing-fold-shot img { width: 340px; margin: auto; border-radius: 16px; box-shadow: 0 16px 50px #22352820; }
.landing-grow { display: grid; grid-template-columns: 1fr 1.15fr; gap: 100px; }
.landing-capabilities { border-top: 1px solid var(--landing-line); }
.landing-capabilities details { border-bottom: 1px solid var(--landing-line); padding: 24px 0; }
.landing-capabilities summary { font-size: 18px; font-weight: 500; cursor: pointer; position: relative; list-style: none; padding-right: 28px; line-height: 1.45; }
.landing-capabilities summary::-webkit-details-marker { display: none; }
.landing-capabilities summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--landing-blue); }
.landing-capabilities details[open] summary::after { content: "−"; }
.landing-capabilities summary span { display: block; color: var(--landing-muted); font-size: 12px; font-weight: 400; margin-top: 7px; }
.landing-capabilities details p { font-size: 15px; line-height: 1.7; color: var(--landing-muted); margin-top: 18px; padding-right: 16px; }
.landing-web-band { background: #dce7e8; }
.landing-web { display: grid; grid-template-columns: 340px 1fr; gap: 130px; align-items: center; padding-block: 76px; }
.landing-phone-shot img { width: 228px; margin: auto; border-radius: 16px; box-shadow: 0 16px 50px #22352820; }
.landing-start { display: grid; grid-template-columns: 1fr 1.15fr; gap: 100px; }
.landing-facts { margin: 0; }
.landing-facts > div { padding-block: 22px; border-top: 1px solid var(--landing-line); }
.landing-facts dt { font-size: 16px; font-weight: 550; }
.landing-facts dd { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--landing-muted); }
.landing-footer { background: #202f2a; color: #f8f7f2; }
.landing-footer .landing-kicker { color: #b8c8bd; }
.landing-footer-inner { width: var(--landing-band); margin: auto; padding-block: 84px; display: grid; grid-template-columns: 1fr 340px; align-items: center; gap: 100px; }
.landing-footer h2 { margin-bottom: 30px; }
.landing-contribute h3 { font-weight: 500; font-size: 22px; }
.landing-contribute p { color: #c3cec7; font-size: 15px; line-height: 1.7; margin-block: 16px 24px; }
.landing-contribute > a { display: inline-block; font-size: 14px; padding-block: 10px; }
.landing-colophon { width: var(--landing-band); margin: auto; padding-block: 24px; border-top: 1px solid #45554b; display: flex; justify-content: space-between; gap: 30px; font-size: 12px; color: #c3cec7; }
.landing-colophon a { display: inline-block; padding-block: 8px; text-decoration: none; }
.landing-colophon a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  .landing-shell { --landing-paper: #17211c; --landing-ink: #f2f3eb; --landing-muted: #b3c0b7; --landing-line: #3b4b40; --landing-blue: #1b6dc2; }
  .landing-hero-shot, .landing-web-band { background: #233c3b; }
  .landing-hero-shot figcaption { color: #b3c0b7; }
  .landing-example, .landing-fold-band { background: #25322a; }
  .landing-example-top { border-color: #46574a; }
  .landing-footer { background: #101a15; }
}
@media (max-width: 900px) {
  .landing-shell { --landing-band: calc(100% - 56px); }
  .landing-fold { grid-template-columns: 1fr 290px; gap: 40px; }
  .landing-grow, .landing-start { gap: 40px; }
  .landing-web { grid-template-columns: 230px 1fr; gap: 50px; }
  .landing-footer-inner { gap: 50px; grid-template-columns: 1fr 280px; }
  .landing-example-top { align-items: start; flex-direction: column; gap: 10px; }
}
@media (max-width: 600px) {
  .landing-shell { --landing-band: calc(100% - 40px); }
  .landing-top { height: 64px; font-size: 12px; }
  .landing-brand span { display: none; }
  .landing-top nav { gap: 22px; }
  .landing-hero-copy { padding: 12px 20px 24px; }
  .landing-hero h1 { font-size: clamp(62px, 17vw, 100px); }
  .landing-promise { font-size: 23px; max-width: 310px; margin-inline: auto !important; margin-top: 16px !important; }
  .landing-intro { font-size: 14px; max-width: 320px; margin-inline: auto !important; }
  .landing-wide-break { display: none; }
  .landing-download-row { flex-direction: column; gap: 12px; margin-top: 20px; }
  .landing-download-row > span { font-size: 11px; }
  .landing-hero-shot { padding: 20px 12px 16px; }
  .landing-hero-shot img { max-height: none; width: 100%; }
  .landing-hero-shot figcaption { font-size: 11px; }
  .landing-section { padding-block: 68px; }
  .landing-steps { grid-template-columns: 1fr; gap: 26px; margin-block: 32px; }
  .landing-steps h3 { margin-top: 10px; }
  .landing-steps p { max-width: none; }
  .landing-example { padding: 24px 20px 28px; }
  .landing-example-tabs { gap: 16px; width: 100%; justify-content: space-between; }
  .landing-example-tabs button { font-size: 11px; min-height: 44px; }
  .landing-example-panel blockquote { font-size: 24px; }
  .landing-fold, .landing-grow, .landing-web, .landing-start, .landing-footer-inner { grid-template-columns: 1fr; gap: 36px; }
  .landing-fold-shot img { width: min(300px, 90%); }
  .landing-body { font-size: 16px; margin-top: 20px !important; }
  .landing-web > div { grid-row: 1; }
  .landing-phone-shot img { width: 210px; }
  .landing-footer-inner { padding-block: 64px; gap: 54px; }
  .landing-colophon { flex-direction: column; gap: 12px; padding-block: 22px; }
  .landing-colophon nav { gap: 26px; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: no-preference) {
  .landing-hero-copy { animation: landing-enter 600ms both; }
  .landing-hero-shot a { animation: landing-enter 700ms 120ms both; }
  .motion-ready [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 550ms, transform 550ms; }
  .motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
  .landing-example-panel:not([hidden]) { animation: landing-enter 220ms both; }
  @keyframes landing-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .landing-shell *, .landing-shell *::before, .landing-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Keep the download and product preview together on short phone screens. */
@media (max-width: 600px) and (max-height: 700px) {
  .landing-top { height: 52px; }
  .landing-hero-copy { padding-block: 8px 20px; }
  .landing-hero h1 { font-size: 58px; }
  .landing-promise { font-size: 21px; margin-top: 12px !important; }
  .landing-intro { display: none; }
  .landing-hero-shot { padding-block: 14px 10px; }
  .landing-hero-shot img { width: auto; max-height: calc(100svh - 355px); }
}