/* Companion marketing site — self-contained styles.
   Tokens + .mk*/.v1-* classes copied (not imported) from the app's
   frontend/src/app/globals.css so this site stays standalone. See
   marketing/README.md and TASKMASTER "Marketing isolation" M2. */

/* ── Self-hosted fonts (no Google Fonts / CDN — CSP-clean, offline-capable) ──
   DM Sans (body) + DM Mono (the numeric price/mockup figures via .v1-mono), both
   self-hosted as woff2 subsets under /static/fonts/. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/dmsans-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/fonts/dmsans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/dmmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/dmmono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/dmmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/dmmono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --v1-ink:#0B1F3A; --v1-teal:#00C2A8; --v1-teal-deep:#0A7A6B; --v1-teal-tint:#E6FFFA;
  --v1-blue:#1B4F9C; --v1-blue-tint:#EEF2FB;
  --v1-amber-t:#C8851A; --v1-amber-bg:#FBF1DF; --v1-amber-acc:#F0B43E;
  --v1-green-t:#1F8F5F; --v1-green-bg:#E3F6E9;
  --v1-red:#A32D2D; --v1-red-tint:#FDE9E6; --v1-indigo:#5856D6;
  --v1-t2:#5B6675; --v1-muted:#9AA1AC; --v1-hair:#F0F0EC; --v1-hair2:#ECECE6;
  --v1-soft:#FAFAF8; --v1-canvas:#F5F6F7;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

/* In-page nav: smooth scroll, and offset anchored sections so their headings
   clear the sticky header instead of hiding under it. */
html{scroll-behavior:smooth;scroll-padding-top:84px;}

/* Sticky header behaviour (classes toggled by app.js):
   - .mkHeaderScrolled — once the page has moved, add an elevation shadow so the
     translucent-white bar reads clearly over the white sections below the hero.
   - .mkHeaderHidden — slide the bar out of view when scrolling DOWN; app.js
     brings it back on scroll-up or when the cursor reaches the top edge. */
.mkHeader{transition:transform .28s ease,box-shadow .2s ease,background-color .2s ease;will-change:transform;}
.mkHeader.mkHeaderScrolled{background:rgba(255,255,255,.96)!important;box-shadow:0 6px 22px -14px rgba(11,31,58,.28);}
.mkHeader.mkHeaderHidden{transform:translateY(-100%);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .mkHeader{transition:none;}
  .mkHeader.mkHeaderHidden{transform:none;}   /* never auto-hide under reduced-motion */
}
body{font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--v1-ink);background:#fff;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
img{max-width:100%;}

.v1-eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--v1-muted);}
.v1-mono{font-family:"DM Mono",ui-monospace,Menlo,monospace;}

/* Link-based locale switcher (nav). Current locale bold; app.js writes the
   rsge_lang cookie on click so the app opens in the same language. */
.mkLangSwitch{display:flex;align-items:center;gap:2px;}
.mkLangSwitch a{font-size:12.5px;font-weight:600;color:var(--v1-muted);text-decoration:none;padding:4px 6px;border-radius:8px;line-height:1;}
.mkLangSwitch a:hover{color:var(--v1-ink);background:#F1F3F6;}
.mkLangSwitch a.on{color:var(--v1-ink);font-weight:800;}

/* Pricing monthly↔yearly toggle (was React state in page.tsx; now vanilla). */
.mkToggle button{border:0;font-family:inherit;font-size:13.5px;font-weight:700;padding:9px 20px;border-radius:100px;cursor:pointer;background:transparent;color:var(--v1-t2);}
.mkToggle button.on{background:#fff;color:var(--v1-ink);}
[data-period][hidden]{display:none;}

/* Responsive — copied verbatim from globals.css marketing breakpoints. */
@media (max-width:860px){
  .mkGrid3{grid-template-columns:1fr 1fr !important;}
  .mkHero{grid-template-columns:1fr !important;}
}
@media (max-width:720px){
  .mkGrid3{grid-template-columns:1fr !important;}
  .mkPrice{grid-template-columns:1fr !important;}
  .mkNavLinks{display:none !important;}
}