/* launch — the rust-cms product marketing theme. Dogfood: this site IS a rust-cms instance, so
   every page proves the product (SSR speed, themes, SEO, media, forms). Warm "rust" amber over
   slate; theme-aware (light/dark). */
:root{
  /* §29 stage B: runtime DESIGN TOKENS — each core knob opts into its `--site-*` twin
     (set via the site's design_tokens setting) and keeps the theme's own value as the
     fallback. Light mode only for now; dark keeps its tuned palette. */
  --lp-accent:var(--site-accent,#e0873a); --lp-accent-2:var(--site-accent-2,#d9772e);
  /* Derived from the accent so ONE token restyles every accent shade (overridable). */
  --lp-accent-deep:var(--site-accent-deep,color-mix(in srgb,var(--lp-accent) 72%,#000));
  --lp-ink:var(--site-ink,#161d27); --lp-ink-2:#33404f; --lp-muted:var(--site-muted,#5f6b78); --lp-line:var(--site-line,#ece6dd);
  --lp-paper:var(--site-bg,#fbf9f5); --lp-surface:var(--site-surface,#ffffff); --lp-band:var(--site-band,#f6f1e9); --lp-band-2:#171f2b;
  --lp-shadow:0 1px 2px rgba(20,26,36,.05),0 10px 34px rgba(20,26,36,.07);
  --lp-sans:var(--site-font,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  --lp-radius:var(--site-radius,16px); --lp-max:var(--site-max-width,70rem);
}
/* §25.2-F: the shell body is a named query container, so chrome and sections adapt to the
   width of the container they LIVE IN (@container cell), not the viewport — the same rule
   layout cells already follow. On layout pages the nearest cell is the layout's own. */
body.theme-launch{container-type:inline-size;container-name:cell}
@media (prefers-color-scheme:dark){:root{
  --lp-ink:#eaf0f7; --lp-ink-2:#c2ccd8; --lp-muted:#8b97a5; --lp-line:#26313f;
  --lp-paper:var(--site-bg-dark,#0b1119); --lp-surface:var(--site-surface-dark,#121a26); --lp-band:var(--site-band-dark,#0f1620); --lp-band-2:var(--site-band-2-dark,#0d141d);
  --lp-accent:var(--site-accent-dark,var(--site-accent,#f0a05a)); --lp-accent-2:var(--site-accent-2-dark,var(--site-accent-2,#e88f45)); --lp-shadow:0 1px 2px rgba(0,0,0,.4),0 14px 40px rgba(0,0,0,.4);
}}
*{box-sizing:border-box}
body{margin:0;font-family:var(--lp-sans);color:var(--lp-ink);background:var(--lp-paper);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.lp-wrap{max-width:var(--lp-max);margin:0 auto;padding:0 1.25rem}

/* Header */
.lp-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--lp-paper) 85%,transparent);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--lp-line)}
.lp-header__inner{display:flex;align-items:center;gap:1rem;padding:.7rem 1.25rem;max-width:var(--lp-max);margin:0 auto}
.lp-brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--lp-ink);font-weight:800;letter-spacing:-.02em;font-size:1.12rem}
.lp-brand svg{display:block}
.lp-nav{margin-left:auto;display:flex;align-items:center;gap:.3rem}
.lp-nav a{padding:.4rem .75rem;border-radius:9px;text-decoration:none;color:var(--lp-muted);font-weight:500;font-size:.92rem}
.lp-nav a:hover{color:var(--lp-ink);background:var(--lp-band)}
/* The nav is a bound MENU tree (ul/li markup): flatten it into the flex bar, and style the
   last link as the CTA button (the menu's final item is the call to action by convention). */
.lp-nav ul{display:contents;margin:0;padding:0;list-style:none}
.lp-nav li{display:contents}
.lp-nav li:last-child>a{background:linear-gradient(135deg,var(--lp-accent),var(--lp-accent-2));color:#2a1a09;font-weight:650}
.lp-nav li:last-child>a:hover{filter:brightness(1.05);color:#2a1a09}
.lp-btn{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.94rem;padding:.62rem 1.15rem;border-radius:11px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.lp-btn--primary{background:linear-gradient(180deg,var(--lp-accent),var(--lp-accent-2));color:#2a1a09;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,var(--lp-shadow)}
.lp-btn--primary:hover{transform:translateY(-1px)}
.lp-btn--ghost{border-color:var(--lp-line);color:var(--lp-ink);background:var(--lp-surface)}
.lp-btn--ghost:hover{border-color:var(--lp-accent)}

/* Hero */
.lp-hero{padding:4.5rem 0 3rem}
.lp-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.lp-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lp-accent-deep);background:var(--lp-band);border:1px solid var(--lp-line);padding:.3rem .7rem;border-radius:999px}
@media (prefers-color-scheme:dark){.lp-eyebrow{color:var(--lp-accent)}}
.lp-hero h1{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.06;letter-spacing:-.03em;margin:1.1rem 0 0;font-weight:850}
.lp-hero h1 em{font-style:normal;color:var(--lp-accent-deep);background:linear-gradient(180deg,transparent 62%,color-mix(in srgb,var(--lp-accent) 35%,transparent) 0);padding:0 .1em}
@media (prefers-color-scheme:dark){.lp-hero h1 em{color:var(--lp-accent)}}
.lp-hero__sub{font-size:1.15rem;color:var(--lp-ink-2);margin:1.15rem 0 1.75rem;max-width:34rem}
.lp-hero__cta{display:flex;flex-wrap:wrap;gap:.7rem}
.lp-hero__fine{margin:1.1rem 0 0;font-size:.82rem;color:var(--lp-muted)}
.lp-hero__art{width:100%;height:auto;filter:drop-shadow(0 20px 40px rgba(20,26,36,.12))}

/* Proof band */
.lp-proof{background:var(--site-band-2,var(--lp-band-2));color:#eaf0f7}
.lp-proof__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;padding:2.2rem 1.25rem;max-width:var(--lp-max);margin:0 auto}
.lp-stat__n{font-size:1.9rem;font-weight:820;letter-spacing:-.02em;color:#fff}
.lp-stat__n b{color:var(--lp-accent)}
.lp-stat__l{font-size:.86rem;color:#9fb0c2;margin-top:.15rem}

/* Sections */
.lp-section{padding:4rem 0}
.lp-section--band{background:var(--lp-band)}
.lp-h2{font-size:clamp(1.6rem,3vw,2.15rem);letter-spacing:-.02em;font-weight:800;margin:0 0 .5rem;text-align:center}
.lp-lead{text-align:center;color:var(--lp-muted);max-width:40rem;margin:0 auto 2.5rem;font-size:1.05rem}

/* Feature cards */
.lp-features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.lp-card{background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:1.5rem;box-shadow:var(--lp-shadow)}
.lp-card__ic{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--lp-band);color:var(--lp-accent-deep);margin-bottom:.9rem}
@media (prefers-color-scheme:dark){.lp-card__ic{color:var(--lp-accent);background:#1b2634}}
.lp-card h3{font-size:1.12rem;margin:0 0 .4rem;letter-spacing:-.01em}
.lp-card p{margin:0;color:var(--lp-muted);font-size:.95rem}

/* Steps */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;counter-reset:step}
.lp-step{position:relative;padding-left:3.2rem}
.lp-step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:-.1rem;width:2.3rem;height:2.3rem;display:grid;place-items:center;border-radius:50%;background:linear-gradient(180deg,var(--lp-accent),var(--lp-accent-2));color:#2a1a09;font-weight:800}
.lp-step h3{margin:.1rem 0 .35rem;font-size:1.1rem}
.lp-step p{margin:0;color:var(--lp-muted);font-size:.95rem}

/* Pricing */
.lp-price{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;align-items:stretch}
.lp-tier{background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:1.6rem;display:flex;flex-direction:column;box-shadow:var(--lp-shadow)}
.lp-tier--feature{border-color:var(--lp-accent);box-shadow:0 0 0 1px var(--lp-accent),var(--lp-shadow)}
.lp-tier__name{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lp-accent-deep)}
@media (prefers-color-scheme:dark){.lp-tier__name{color:var(--lp-accent)}}
.lp-tier__price{font-size:2rem;font-weight:820;letter-spacing:-.02em;margin:.35rem 0 .1rem}
.lp-tier__price span{font-size:.95rem;font-weight:500;color:var(--lp-muted)}
.lp-tier ul{list-style:none;margin:1rem 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.5rem}
.lp-tier li{display:flex;gap:.5rem;align-items:flex-start;font-size:.94rem;color:var(--lp-ink-2)}
.lp-tier li::before{content:"";flex:0 0 auto;width:1.05rem;height:1.05rem;margin-top:.15rem;border-radius:50%;background:var(--lp-band);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2 2 4.5-4.8' fill='none' stroke='%23c96a1f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:.75rem;background-repeat:no-repeat;background-position:center}
.lp-tier .lp-btn{margin-top:auto;justify-content:center}

/* Contact */
.lp-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
.lp-contact__lead p{color:var(--lp-muted);font-size:1.05rem}
.lp-form{background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:var(--lp-radius);padding:1.6rem;box-shadow:var(--lp-shadow);display:flex;flex-direction:column;gap:.85rem}
.lp-form label{font-size:.82rem;font-weight:600;color:var(--lp-ink-2);display:block;margin-bottom:.3rem}
.lp-form input,.lp-form textarea{width:100%;padding:.65rem .8rem;border:1px solid var(--lp-line);border-radius:10px;background:var(--lp-paper);color:var(--lp-ink);font:inherit;font-size:.95rem}
.lp-form input:focus,.lp-form textarea:focus{outline:2px solid color-mix(in srgb,var(--lp-accent) 55%,transparent);outline-offset:1px;border-color:var(--lp-accent)}
.lp-form textarea{min-height:7rem;resize:vertical}
.lp-note{font-size:.8rem;color:var(--lp-muted)}
.lp-thanks{background:var(--lp-surface);border:1px solid var(--lp-accent);border-radius:var(--lp-radius);padding:2rem;box-shadow:var(--lp-shadow);text-align:center}
.lp-thanks h2{margin:.5rem 0 .3rem}
.lp-thanks p{color:var(--lp-muted);margin:0}

/* Footer */
.lp-footer{border-top:1px solid var(--lp-line);background:var(--lp-band);margin-top:1rem}
.lp-footer__inner{max-width:var(--lp-max);margin:0 auto;padding:2rem 1.25rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;font-size:.88rem;color:var(--lp-muted)}
.lp-dogfood{display:inline-flex;align-items:center;gap:.45rem;background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:999px;padding:.35rem .8rem;font-size:.8rem;color:var(--lp-ink-2)}
.lp-dogfood b{color:var(--lp-accent-deep)}
@media (prefers-color-scheme:dark){.lp-dogfood b{color:var(--lp-accent)}}
.lp-dot{width:.5rem;height:.5rem;border-radius:50%;background:#3ecf8e;box-shadow:0 0 0 3px color-mix(in srgb,#3ecf8e 22%,transparent)}

/* The header block renders inside exact-height wrappers (its layout cell / its block
   section), which leaves `position:sticky` on .lp-header no room to move. Hoist the
   stickiness to whichever wrapper directly carries the header — the layout cell on the
   composed front, the block section on shell-rendered pages — each of whose parent is the
   tall scrolling column. */
.theme-launch div:has(> .block > .block__content > .lp-header),
.theme-launch body > .block:has(> .block__content > .lp-header){position:sticky;top:0;z-index:40}

/* Small screens: the flat bar hides; the SAME bound menu shows as a CSS-only disclosure. */
.lp-nav-m{display:none;margin-left:auto;position:relative}
.lp-nav-m>summary{list-style:none;cursor:pointer;padding:.45rem .6rem;border-radius:9px;display:flex;flex-direction:column;gap:4px}
.lp-nav-m>summary::-webkit-details-marker{display:none}
.lp-nav-m>summary span{display:block;width:1.15rem;height:2px;border-radius:2px;background:var(--lp-ink)}
.lp-nav-m>summary:hover{background:var(--lp-band)}
.lp-nav-m[open]>nav{position:absolute;right:0;top:100%;margin-top:.4rem;min-width:14rem;display:flex;flex-direction:column;gap:.15rem;padding:.5rem;background:var(--lp-paper);border:1px solid var(--lp-line);border-radius:12px;box-shadow:0 10px 30px rgba(20,26,36,.18);z-index:60}
.lp-nav-m ul{display:contents;margin:0;padding:0;list-style:none}
.lp-nav-m li{display:contents}
.lp-nav-m a{padding:.5rem .75rem;border-radius:8px;text-decoration:none;color:var(--lp-ink);font-weight:500}
.lp-nav-m a:hover{background:var(--lp-band)}

/* §29 stage B: responsive chrome/sections are CONTAINER queries (the platform's §25.2-F
   mechanism), so a section placed in a narrow cell stacks even on a wide screen. */
@container cell (max-width:860px){
  .lp-hero__grid,.lp-contact{grid-template-columns:1fr}
  .lp-hero__art{max-width:26rem;margin:0 auto}
  .lp-features,.lp-steps,.lp-price{grid-template-columns:1fr}
  .lp-proof__grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}
  .lp-nav{display:none}
  .lp-nav-m{display:block}
}

/* Composed landing (§25.5): blocks carry the lp-* sections; the wrapper stays invisible so
   sections sit flush, exactly as the retired front.jinja laid them out. */
.theme-launch .block{margin:0}
.theme-launch .block__title{display:none}