/* Luca marketing site — stylesheet.
   Base ported verbatim from the Claude Design export ("Luca Marketing Site.dc.html",
   2026-08-01). The page's component styling stays in inline style attributes,
   exactly as designed. Satoshi is the only face and is self-hosted, so the site
   loads no third-party origin. */

@font-face { font-family: "Satoshi"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/Satoshi-Regular.woff2") format("woff2"), url("assets/fonts/Satoshi-Regular.woff") format("woff"); }
@font-face { font-family: "Satoshi"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/Satoshi-Medium.woff2") format("woff2"), url("assets/fonts/Satoshi-Medium.woff") format("woff"); }
@font-face { font-family: "Satoshi"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/Satoshi-Bold.woff2") format("woff2"), url("assets/fonts/Satoshi-Bold.woff") format("woff"); }
@font-face { font-family: "Satoshi"; font-weight: 900; font-style: normal; font-display: swap; src: url("assets/fonts/Satoshi-Black.woff2") format("woff2"), url("assets/fonts/Satoshi-Black.woff") format("woff"); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #F7F4EE; color: #1B2A3A; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
a { color: #8A551F; text-decoration: none; }
a:hover { color: #B87333; }
img { display: block; max-width: 100%; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* The header is sticky, so a bare #anchor lands with the section title tucked
   underneath it. Clear the bar's height on every jump target. */
section[id] { scroll-margin-top: 84px; }
@media (max-width: 768px) { section[id] { scroll-margin-top: 76px; } }

/* ── Mobile navigation (index.html) ────────────────────────────────────────
   The header keeps its desktop styling in inline style attributes, exactly as
   the design exported it — these rules add nothing above 768px. Below it the
   six nav links used to wrap into three stacked rows next to the logo; they
   now collapse into a hamburger panel while the bar keeps the trial CTA.
   The !important flags exist only to beat the nav's inline `display: flex`
   and font sizes, and live entirely inside the media query. */

.navtoggle,
.navcta-m     { display: none; }

@media (max-width: 768px) {
  .sitehdr-in { padding: 12px 20px !important; gap: 12px !important; }

  .sitenav    { display: none !important; position: absolute; top: 100%; left: 0; right: 0;
                flex-direction: column; align-items: stretch !important; gap: 0 !important;
                padding: 4px 20px 14px; background: #F7F4EE;
                border-bottom: 1px solid #E8EBF0; box-shadow: 0 14px 26px rgba(15,29,45,.10); }
  .sitehdr[data-open="true"] .sitenav { display: flex !important; }
  .sitenav a  { padding: 15px 0; font-size: 17px !important; border-bottom: 1px solid #EDEAE2; }
  .sitenav a:last-child { border-bottom: none; }
  .sitenav a.navcta     { display: none !important; }   /* the bar carries it instead */

  .navcta-m   { display: inline-block; margin-left: auto; flex: none; font-size: 15px;
                font-weight: 700; color: #F7F4EE; background: #0F1D2D; padding: 9px 15px;
                border-radius: 13px; box-shadow: 0 1px 2px rgba(15,29,45,.08); }
  .navcta-m:hover { color: #F7F4EE; }

  .navtoggle  { display: inline-flex; align-items: center; justify-content: center; flex: none;
                width: 40px; height: 40px; padding: 0; background: transparent;
                border: 1px solid #E1DED6; border-radius: 12px; color: #0F1D2D; cursor: pointer; }
  .navtoggle svg { display: block; }
  .navtoggle .i-close,
  .sitehdr[data-open="true"] .navtoggle .i-open { display: none; }
  .sitehdr[data-open="true"] .navtoggle .i-close { display: block; }
}

@media (max-width: 360px) {
  .navcta-m   { padding: 9px 12px; font-size: 14px; }
}

/* ── Legal pages (legal.html) ──────────────────────────────────────────────
   index.html styles its components inline, as designed. legal.html renders
   Markdown at runtime, so its content can't carry inline styles — these
   classes are its stylesheet. Tokens match the design export exactly. */

.lwrap        { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

.snav         { position: sticky; top: 0; z-index: 50; background: rgba(247,244,238,.88);
                backdrop-filter: blur(12px); border-bottom: 1px solid #E8EBF0; }
.snav .in     { max-width: 1240px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 28px; }
.brand        { display: flex; align-items: center; gap: 10px; color: #0F1D2D; }
.brand .mark  { width: 32px; height: 32px; border-radius: 9px; background: #0F1D2D;
                display: flex; align-items: center; justify-content: center; }
.brand .mark img { width: 19px; height: 19px; }
.brand .word  { font-size: 19px; font-weight: 900; letter-spacing: -.03em; color: #0F1D2D; }
.snav nav     { margin-left: auto; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.snav nav a.back { font-size: 15px; font-weight: 700; color: #0F1D2D; }
.btn-ink      { font-size: 15px; font-weight: 700; color: #F7F4EE; background: #0F1D2D;
                padding: 10px 18px; border-radius: 14px; box-shadow: 0 1px 2px rgba(15,29,45,.08); }
.btn-ink:hover{ color: #F7F4EE; }

.lhead        { max-width: 1240px; margin: 0 auto; padding: 64px 28px 0; }
.eyebrow      { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #586070; }
.lhead h1     { font-size: clamp(32px, 4.4vw, 46px); font-weight: 900; letter-spacing: -.03em;
                color: #0F1D2D; line-height: 1.1; margin-top: 12px; }
.ltabs        { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 32px; border-bottom: 1px solid #E8EBF0; }
.ltab         { font-size: 15px; font-weight: 500; color: #586070; padding: 0 0 14px;
                border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ltab:hover   { color: #0F1D2D; }
.ltab.on      { color: #0F1D2D; font-weight: 700; border-bottom-color: #B87333; }

.lpage        { max-width: 1240px; margin: 0 auto; padding: 0 28px 96px; }
.doc          { max-width: 74ch; padding-top: 40px; }
.doc h1       { display: none; }        /* the document's own H1 duplicates the page title */
.doc h2       { font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: #0F1D2D;
                line-height: 1.25; margin: 44px 0 14px; }
.doc h3       { font-size: 19px; font-weight: 700; color: #0F1D2D; margin: 30px 0 10px; }
.doc p        { margin: 0 0 16px; }
.doc ul       { margin: 0 0 18px 1.1rem; }
.doc li       { margin: 0 0 8px; }
.doc strong   { font-weight: 700; color: #0F1D2D; }
.doc hr       { border: 0; border-top: 1px solid #E8EBF0; margin: 40px 0; }
.doc .updated { margin: 0 0 8px; font-size: 14px; color: #586070; }
.tblwrap      { overflow-x: auto; margin: 0 0 22px; }
.doc table    { border-collapse: collapse; width: 100%; font-size: 15px; }
.doc th,
.doc td       { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid #E8EBF0; }
.doc th       { font-weight: 700; color: #0F1D2D; font-size: 13px; letter-spacing: .02em;
                text-transform: uppercase; background: rgba(15,29,45,.025); }
.lstate       { padding: 48px 0; color: #586070; }
.lstate .t    { font-weight: 700; color: #0F1D2D; margin-bottom: 6px; }

.snav .back .sm { display: none; }

@media (max-width: 768px) {
  /* Same wrap as the home page: brand + two links no longer fit one row, so the
     header grew to two ragged rows. Tighten the spacing and shorten the back
     link, which is enough here — two items don't warrant a hamburger. */
  .snav .in       { padding: 12px 20px; gap: 12px; }
  .snav nav       { gap: 14px; }
  .snav .back .lg { display: none; }
  .snav .back .sm { display: inline; }
  .snav .btn-ink  { padding: 9px 15px; }
}

@media (max-width: 640px) {
  .lhead { padding-top: 44px; }
  .doc   { padding-top: 28px; }
}