/* The front page, the public sign-in page, and the header, footer and menu
   every public page shares. Loaded after site.css and a page's own styles.
   - The colours are Orzoni's own: the indigo and marigold of the mark and of
     the product itself, so the real screens on the page sit in their own
     ground. One accent, marigold, for the one thing to press. One paper band
     breaks the indigo twice: the shared view, and the close.
   - Type is Geist at 400 and 500, sentence case throughout, with the site's
     own display tracking (-.03em) and nothing set in capitals, nothing spaced
     out, nothing in a second typeface.
   - Corners are the site's: 18 a control, 26 a panel, 34 a surface. Buttons
     are rounded rectangles, never pills. A card rests on a hairline.
   - Motion: the hero rises once as the page opens, and that is all. Nothing
     moves because it was scrolled to; hovers answer the pointer and no more.
     With less motion asked for, everything is simply there.
   Page styles are namespaced (.marketing-home, .marketing-login, .mk-*), so
   the guides and the business pages keep their own. */
:root { --mk-bg: #14163f; --mk-panel: #1b1d5c; --mk-raised: #24277a; --mk-deep: #0e0f2e; --mk-text: #ffffff; --mk-muted: #c9cbe6; --mk-faint: rgba(255, 255, 255, .62); --mk-line: rgba(255, 255, 255, .14); --mk-line-strong: rgba(255, 255, 255, .3); --mk-accent: #ecb22a; --mk-accent-2: #f2bf46; --mk-accent-ink: #2f2200; --mk-paper: #f4f3ef; --mk-paper-2: #e9e8e1; --mk-ink: #16171a; --mk-ink-2: #55575f; }

/* ---------- the header, on every public page ---------- */
.site-head, .site-head[data-scrolled] { --head: 76px; height: 76px; color: var(--mk-text); background: var(--mk-bg); box-shadow: none; border-bottom: 1px solid var(--mk-line); }
.site-head .wrap { max-width: 1320px; padding-inline: 32px; }
.site-head .logo .wordmark, .site-head[data-scrolled] .logo .wordmark { opacity: 0; }
.site-head .logo .wordmark + .wordmark, .site-head[data-scrolled] .logo .wordmark + .wordmark { opacity: 1; }
.site-head .head-item, .site-head .head-link, .site-head .head-menu, .site-head .head-phone { color: var(--mk-text); }
.site-head .head-item:hover, .site-head .head-item[aria-current], .site-head .head-link:hover, .site-head .head-drop[open] > summary { color: var(--mk-accent); }
.site-head .head-go { border-radius: var(--radius-inset); background: var(--mk-accent); color: var(--mk-accent-ink); border: 0; box-shadow: none; min-height: 40px; padding-inline: 18px; }
.site-head .head-go:hover { background: var(--mk-accent-2); }
.site-head .head-nav .glide { display: none; }
.site-head .head-drop-list { border-radius: var(--radius-control); }

/* ---------- the footer ---------- */
.site-foot { background: var(--mk-deep); color: var(--mk-text); margin: 0; border-radius: 0; padding-top: 72px; }
.site-foot .foot-top { gap: 72px; }
.site-foot .foot-brand > p, .site-foot .foot-who, .site-foot .foot-cols a, .site-foot .foot-base, .site-foot .foot-marks { color: var(--mk-muted); }
.site-foot .foot-col summary { color: var(--mk-text); }
.site-foot .foot-mark { display: none; }
.site-foot .foot-cols a:hover { color: var(--mk-accent); }
.site-foot .foot-base { border-color: var(--mk-line); }

/* ---------- the menu on a phone ---------- */
.sheet:has(#menu-sheet) { --ink: var(--mk-text); --text-secondary: var(--mk-muted); --surface: var(--mk-bg); --border: var(--mk-line); --line: var(--mk-line); background: var(--mk-bg); color: var(--mk-text); border-radius: 0; height: 100dvh; max-height: 100dvh; border: 0; }
.sheet:has(#menu-sheet) #menu-sheet { display: flex; flex-direction: column; min-height: 100%; }
.sheet:has(#menu-sheet) .sheet-close { color: var(--mk-text); background: transparent; border-color: var(--mk-line-strong); }
.sheet:has(#menu-sheet) .sheet-close svg { color: var(--mk-text); }
.sheet:has(#menu-sheet) .sheet-head { padding-top: 24px; padding-bottom: 20px; }
.sheet:has(#menu-sheet) .sheet-acts { display: grid; gap: 12px; margin-top: auto; padding-top: 28px; }
.mk-menu-signin { display: flex; align-items: center; justify-content: center; min-height: 50px; border: 1px solid var(--mk-line-strong); border-radius: var(--radius-control); color: var(--mk-text); font-weight: 500; }
.mk-menu-business > summary { display: flex; justify-content: space-between; align-items: center; min-height: 60px; font-size: 18px; font-weight: 500; cursor: pointer; list-style: none; border-bottom: 1px solid var(--mk-line); }
.mk-menu-business > summary::-webkit-details-marker { display: none; }
.sheet:has(#menu-sheet) .mk-menu-business a { font-size: 15px; font-weight: 400; padding-block: 14px; padding-left: 12px; }
.mk-menu-business[open] > summary .ico { transform: rotate(45deg); }
.sheet:has(#menu-sheet) .sheet-nav a { padding-block: 16px; font-size: 18px; }
.sheet:has(#menu-sheet) .sheet-acts .btn { border-radius: var(--radius-control); background: var(--mk-accent); color: var(--mk-accent-ink); }

/* ---------- the pages: ground, measure, type ---------- */
.marketing-home, .marketing-login { --ink: var(--mk-text); --foreground: var(--mk-text); --text: var(--mk-text); --text-secondary: var(--mk-muted); --text-muted: var(--mk-muted); --line: var(--mk-line); --border: var(--mk-line); --surface: var(--mk-panel); --paper: var(--mk-bg); --focus-outline: var(--mk-accent); background: var(--mk-bg); color: var(--mk-text); }
.marketing-home main, .marketing-login main { overflow: clip; }
.mk-wrap { width: min(100%, 1320px); margin-inline: auto; padding-inline: 48px; }
.mk-section { padding-block: 104px; scroll-margin-top: 96px; }
.marketing-home h1, .marketing-home h2, .marketing-home h3, .marketing-login h1 { font-weight: 500; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; margin: 0; }
.marketing-home h1 { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.04; }
.marketing-home h2, .marketing-login h1 { font-size: clamp(34px, 4vw, 52px); }
.marketing-home h3 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.mk-section p, .mk-hero-copy > p { color: var(--mk-muted); font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.mk-section-head { max-width: 760px; margin-bottom: 56px; }
.mk-section-head > p { max-width: 560px; margin: 20px 0 0; }
/* the one quiet word that names a feature: marigold, sentence case, plain */
.mk-label { display: block; color: var(--mk-accent); font-size: 15px; font-weight: 500; line-height: 1.4; margin: 0 0 14px; }
.mk-fine, .mk-section .mk-fine { font-size: 14px; line-height: 1.55; color: var(--mk-muted); }

/* ---------- buttons and links ---------- */
.mk-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid var(--mk-accent); border-radius: var(--radius-control); background: var(--mk-accent); color: var(--mk-accent-ink); font-size: 16px; font-weight: 500; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.mk-button:hover { background: var(--mk-accent-2); border-color: var(--mk-accent-2); }
.mk-button:active { transform: translateY(1px); }
.mk-button-outline { background: transparent; color: var(--mk-text); border-color: var(--mk-line-strong); }
.mk-button-outline:hover { background: rgba(255, 255, 255, .07); border-color: var(--mk-text); color: var(--mk-text); }
.mk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.mk-more, .mk-text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; font-weight: 500; color: inherit; text-decoration: none; }
.mk-more .ico, .mk-text-link .ico { transition: transform var(--duration-fast) var(--ease-standard); }
.mk-more:hover, .mk-text-link:hover { color: var(--mk-accent); }
.mk-more:hover .ico, .mk-text-link:hover .ico { transform: translateX(3px); }
.mk-more { margin-top: 16px; }
.marketing-home a:focus-visible, .marketing-login a:focus-visible, .site-head a:focus-visible, .site-head button:focus-visible, .marketing-home summary:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 4px; }

/* ---------- the hero: the words centred, then the real screens ---------- */
.mk-hero { padding-top: 88px; }
.mk-hero-copy { max-width: 820px; margin-inline: auto; text-align: center; }
.mk-hero-copy h1 { max-width: 15ch; margin-inline: auto; }
.mk-hero-copy > p { max-width: 36em; margin: 24px auto 0; }
.mk-hero-copy .mk-actions { justify-content: center; margin-top: 32px; }
.mk-hero-copy > .mk-fine { margin: 18px 0 0; }
.mk-hero-stage { position: relative; margin-top: 64px; padding: 48px 72px 0; border-radius: var(--radius-panel); background: var(--mk-panel); overflow: hidden; }
.mk-desktop { width: 86%; border: 1px solid var(--mk-line-strong); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--mk-deep); overflow: hidden; }
.mk-desktop img { display: block; width: 100%; height: auto; }
.mk-phone { position: absolute; right: 6%; bottom: -1px; width: 220px; border: 8px solid var(--mk-deep); border-bottom: 0; border-radius: 30px 30px 0 0; background: var(--mk-deep); overflow: hidden; box-shadow: 0 24px 60px rgba(8, 9, 32, .55); }
.mk-phone img { display: block; width: 100%; height: auto; }
.mk-caption { color: var(--mk-faint); font-size: 13px; line-height: 1.5; margin: 16px 0 0; }

/* ---------- what it connects with ---------- */
.mk-connects { border-bottom: 1px solid var(--mk-line); padding-block: 48px; }
.mk-connects .mk-wrap { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.mk-connects p { flex: none; color: var(--mk-muted); font-size: 17px; line-height: 1.5; margin: 0; max-width: 22em; }
/* The strip of what Orzoni connects with (assets/marquee.js). As written it is one centred row that wraps; made
   live, the row runs on without end and its two ends fade into the page. A mark is quiet until the pointer is on it. */
.mk-marquee { --mq-gap: 72px; flex: 1; min-width: 0; }
.mq-row { padding-block: 6px; }
.mq-set { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px var(--mq-gap); margin: 0; padding: 0; list-style: none; }
.mq-item { flex: none; display: grid; gap: 10px; opacity: .72; transition: opacity 260ms cubic-bezier(.22, 1, .36, 1); }
.mq-mark { display: flex; align-items: center; height: 32px; }
.mq-mark img { max-width: 150px; object-fit: contain; object-position: left; pointer-events: none; -webkit-user-drag: none; }
/* Tally's and Shopify's marks are drawn for a light ground: on indigo they are shown in white, as their own guidance allows */
.mq-mark .brand-tally img, .mq-mark .brand-shopify img { filter: brightness(0) invert(1); }
.mq-mark .brand-word { color: var(--mk-text); }
.mq-mark .brand-files { color: var(--mk-text); }
.mq-cap { color: var(--mk-faint); font-size: 14px; white-space: nowrap; }
@media (hover: hover) { .mq-item:hover { opacity: 1; } }
.mk-marquee[data-live] .mq-row { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 min(14%, 96px), #000 calc(100% - min(14%, 96px)), transparent); mask-image: linear-gradient(90deg, transparent, #000 min(14%, 96px), #000 calc(100% - min(14%, 96px)), transparent); }
.mk-marquee[data-live] .mq-row[data-dragging] { cursor: grabbing; }
.mk-marquee[data-live] .mq-track { display: flex; width: max-content; will-change: transform; }
.mk-marquee[data-live] .mq-set { flex: none; flex-wrap: nowrap; justify-content: flex-start; gap: 0; }
/* (each carries its gap on its right, so one set's width is exactly the distance of the wrap) */
.mk-marquee[data-live] .mq-item { margin-inline-end: var(--mq-gap); }

/* ---------- the day's work ---------- */
.mk-features { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 28px; }
.mk-feature-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.6fr 1fr; background: var(--mk-panel); border-radius: var(--radius-panel); overflow: hidden; }
.mk-visual { height: 340px; overflow: hidden; padding: 36px 30px 0; border-radius: var(--radius-panel); background: var(--mk-panel); }
.mk-visual img { display: block; width: 100%; height: auto; border: 1px solid var(--mk-line-strong); border-bottom: 0; border-radius: 10px 10px 0 0; }
.mk-stock { background: #22256e; }
.mk-dues { background: #202360; }
.mk-feature-copy { padding-top: 28px; }
.mk-feature-copy p { margin: 16px 0 0; max-width: 460px; }
.mk-feature-wide .mk-feature-copy { padding: 44px; align-self: center; }
.mk-feature-wide .mk-visual { height: 420px; border-radius: 0; padding: 44px 0 0 36px; background: var(--mk-raised); }
.mk-feature-wide .mk-visual img { width: 120%; max-width: none; }

/* ---------- the shared view: on paper ---------- */
.mk-foundations { background: var(--mk-paper); color: var(--mk-ink); }
.mk-foundations p, .mk-foundations .mk-fine { color: var(--mk-ink-2); }
.mk-foundations .mk-more { color: var(--mk-ink); }
.mk-foundations .mk-more:hover { color: var(--mk-accent-ink); }
.mk-foundations a:focus-visible { outline-color: var(--mk-ink); }
.mk-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center; }
.mk-split > div > p:not(.mk-label) { margin-top: 20px; }
.mk-foundation-visual { padding: 32px 32px 0; background: var(--mk-paper-2); border-radius: var(--radius-panel); overflow: hidden; }
.mk-foundation-visual img { width: 100%; height: auto; display: block; border-radius: 10px 10px 0 0; border: 1px solid rgba(22, 23, 26, .12); border-bottom: 0; }
.mk-foundation-visual p { font-size: 14px; margin: 0; padding: 14px 0 20px; }
.mk-facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.mk-facts li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--mk-ink); }
.mk-facts .ico { color: var(--mk-accent-ink); flex: none; }

/* ---------- the kinds of business ---------- */
/* two kinds, two wide tiles side by side: each a name, a sentence and the way in */
.mk-business-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mk-business { position: relative; display: flex; flex-direction: column; min-height: 248px; padding: 40px; border: 1px solid var(--mk-line); border-radius: var(--radius-panel); background: var(--mk-panel); color: inherit; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.mk-business:hover { border-color: var(--mk-line-strong); background: var(--mk-raised); }
.mk-business h3 { font-size: 30px; }
.mk-business p { font-size: 17px; max-width: 30em; margin: 14px 0 32px; }
.mk-business-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--mk-accent); font-size: 16px; font-weight: 500; }
.mk-business-go .ico { transition: transform var(--duration-fast) var(--ease-standard); }
.mk-business:hover .mk-business-go .ico { transform: translateX(3px); }
.mk-businesses .mk-fine { margin-top: 24px; max-width: 700px; }

/* ---------- the books stay in Tally ---------- */
.mk-trust { border-block: 1px solid var(--mk-line); }
.mk-trust-visual { background: var(--mk-panel); padding: 40px 32px 32px; border-radius: var(--radius-panel); }
.mk-trust-visual img { width: 100%; height: auto; display: block; border-radius: 10px; border: 1px solid var(--mk-line-strong); }
.mk-trust-visual p { font-size: 14px; color: var(--mk-faint); margin: 18px 0 0; }
.mk-trust-list { list-style: none; margin: 28px 0 0; padding: 0; }
.mk-trust-list li { padding-block: 18px; border-top: 1px solid var(--mk-line); }
.mk-trust-list b { display: block; font-weight: 500; font-size: 17px; }
.mk-trust-list span { display: block; color: var(--mk-muted); font-size: 15px; line-height: 1.55; margin-top: 6px; }

/* ---------- three steps ---------- */
.mk-start { background: var(--mk-panel); }
.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; gap: 32px; margin: 0 0 24px; counter-reset: step; }
.mk-steps li { padding: 28px; border-radius: var(--radius-panel); background: var(--mk-bg); border: 1px solid var(--mk-line); }
.mk-steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--mk-accent); color: var(--mk-accent-ink); font-size: 16px; font-weight: 500; margin-bottom: 28px; }
.mk-steps h3 { font-size: 23px; }
.mk-steps p { font-size: 16px; margin: 12px 0 0; }

/* ---------- the plans ---------- */
.mk-pricing-heading { display: flex; justify-content: space-between; align-items: end; gap: 48px; margin-bottom: 48px; }
.mk-pricing-heading > p { font-size: 17px; max-width: 24em; margin: 0; }
.mk-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mk-plan { display: flex; flex-direction: column; padding: 40px; border: 1px solid var(--mk-line); border-radius: var(--radius-panel); }
.mk-plan-primary { background: var(--mk-panel); border-color: var(--mk-line-strong); }
.mk-plan h3 { font-size: 24px; }
.mk-plan .mk-price { font-size: 56px; font-weight: 500; color: var(--mk-text); letter-spacing: -.03em; line-height: 1; margin: 28px 0 20px; }
.mk-price span { font-size: 16px; font-weight: 400; letter-spacing: normal; color: var(--mk-muted); margin-left: 8px; }
.mk-plan > p:not(.mk-price) { font-size: 16px; margin: 0; }
.mk-plan > .mk-fine { margin-top: 10px; }
.mk-plan .mk-button { margin-top: auto; padding-top: 0; }
.mk-plan .mk-fine + .mk-button { margin-top: 28px; }

/* ---------- questions ---------- */
.mk-faq { padding-top: 24px; }
.mk-faq-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; }
.mk-faq .faq { border-color: var(--mk-line); }
.mk-faq .faq details { border-color: var(--mk-line); }
.mk-faq .faq summary { padding: 22px 0; }
.mk-faq .faq h3 { font-size: 20px; letter-spacing: -.015em; }
.mk-faq .faq-a p { font-size: 16px; }

/* ---------- more to read, and a person ---------- */
.mk-resources { padding: 0 0 104px; }
.mk-resources .mk-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mk-resources a { display: flex; flex-direction: column; align-items: start; padding: 28px; border: 1px solid var(--mk-line); border-radius: var(--radius-panel); color: inherit; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
.mk-resources a:hover { border-color: var(--mk-line-strong); background: var(--mk-panel); }
.mk-resources small { display: block; font-size: 14px; color: var(--mk-faint); margin-bottom: 14px; }
.mk-resources h3 { font-size: 23px; margin-bottom: 20px; }
.mk-resources .ico { margin-top: auto; }
.mk-resources .mk-fine { margin: -8px 0 20px; overflow-wrap: anywhere; }

/* ---------- the close: on paper ---------- */
.mk-final { background: var(--mk-paper); color: var(--mk-ink); padding-block: 104px; text-align: center; }
.mk-final h2 { max-width: 18ch; margin-inline: auto; }
.mk-final > .mk-wrap > p { color: var(--mk-ink-2); max-width: 34em; margin: 20px auto 0; }
.mk-final .mk-actions { justify-content: center; margin-top: 36px; }
.mk-final .mk-text-link { color: var(--mk-ink); }
.mk-final .mk-text-link:hover { color: var(--mk-accent-ink); }
.mk-final .mk-fine { margin-top: 20px; color: var(--mk-ink-2); }
.mk-final a:focus-visible { outline-color: var(--mk-ink); }

/* ---------- the public sign-in page ---------- */
.mk-login { padding-block: 96px; min-height: 72vh; }
.mk-login .mk-split { grid-template-columns: 1fr 1fr; }
.mk-login p { color: var(--mk-muted); line-height: 1.6; margin-top: 20px; max-width: 480px; }
.mk-login .mk-actions { margin-top: 32px; }
.mk-login .mk-fine { font-size: 15px; }
.mk-login .mk-fine .mk-text-link { font-size: inherit; min-height: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--mk-line-strong); }
.mk-login-image { padding: 32px 32px 24px; background: var(--mk-panel); border-radius: var(--radius-panel); }
.mk-login-image img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--mk-line-strong); }
.mk-login-image .mk-fine { margin: 14px 0 0; color: var(--mk-faint); }

/* ---------- every other public page: the same ground, through the site's own tokens ----------
   How it works, Pricing, the connector, the guides, the blog, the policies, About, Contact, the
   walk-through, the pages for each kind of business. Their layouts are their own (pages.css,
   blog.css); the colours come from the tokens site.css set, redefined here for indigo. Indigo itself,
   used for marks and chosen states on paper, becomes marigold on indigo. */
html:has(body.mk-dark) { background: var(--mk-bg); }
.mk-dark {
  --background: var(--mk-bg); --paper: var(--mk-bg); --paper-2: var(--mk-panel);
  --surface: var(--mk-panel); --surface-raised: var(--mk-raised); --surface-muted: #1a1c55;
  --foreground: var(--mk-text); --ink: var(--mk-text); --text: var(--mk-text); --text-secondary: var(--mk-muted); --text-muted: var(--mk-faint);
  --line: var(--mk-line); --border: var(--mk-line); --border-subtle: rgba(255, 255, 255, .08); --border-strong: var(--mk-line-strong);
  --field-line: rgba(255, 255, 255, .5); --wash: rgba(255, 255, 255, .06); --bezel: var(--mk-deep);
  --indigo: var(--mk-accent); --indigo-2: var(--mk-accent-2); --indigo-3: #8f94ff;
  --accent-soft: rgba(236, 178, 42, .18); --tally: var(--tally-on-dark);
  --ok: #5ad48f; --ok-soft: rgba(90, 212, 143, .16); --wait: #f2bf46; --bad: #ff8d7e; --bad-soft: rgba(255, 141, 126, .16);
  --focus-outline: var(--mk-accent);
  --shadow-raised: 0 6px 18px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .2); --shadow-floating: 0 20px 48px rgba(0, 0, 0, .45);
  background: var(--mk-bg); color: var(--mk-text);
}
.mk-dark .pill.accent { background: var(--accent-soft); color: var(--mk-accent); }
.mk-dark .btn.dark { background: var(--mk-accent); color: var(--mk-accent-ink); }
.mk-dark .btn.dark:hover { background: var(--mk-accent-2); }
.mk-dark .btn:not(.accent, .dark) { background: transparent; color: var(--mk-text); border-color: var(--mk-line-strong); }
.mk-dark .btn:not(.accent, .dark):hover { background: rgba(255, 255, 255, .07); border-color: var(--mk-text); }
.mk-dark .btn.accent, .mk-dark .btn.dark { border-radius: var(--radius-control); }
/* a dark band on a dark page is a paper band, as the front page's close is */
.mk-dark .band-dark:not(.site-foot) { --background: var(--mk-paper); --surface: #ffffff; --surface-raised: #ffffff; --surface-muted: #ebeae3; --foreground: var(--mk-ink); --ink: var(--mk-ink); --text: var(--mk-ink); --text-secondary: var(--mk-ink-2); --text-muted: #666870; --line: rgba(22, 23, 26, .10); --border: rgba(22, 23, 26, .10); --border-subtle: rgba(22, 23, 26, .06); --border-strong: rgba(22, 23, 26, .18); --wash: rgba(22, 23, 26, .05); --field-line: rgba(22, 23, 26, .46); --indigo: #1b1d5c; --indigo-2: #262977; --tally: #0b7a7f; --ok: #1c8a55; --focus-outline: rgba(27, 29, 92, .72); background: var(--mk-paper); color: var(--mk-ink); }
.mk-dark .band-dark .btn:not(.accent, .light, .on-light *) { border-color: rgba(22, 23, 26, .18); background: #ffffff; color: var(--mk-ink); }
.mk-dark .band-dark .btn:not(.accent):hover { background: #f4f3ef; border-color: rgba(22, 23, 26, .4); }
.mk-dark .band-dark .btn.dark { background: #1b1d5c; color: #ffffff; }
.mk-dark .band-tint { background: var(--mk-panel); }
.mk-dark .on-light { --indigo: #1b1d5c; --indigo-2: #262977; --ok: #1c8a55; }
/* marks drawn as indigo squares on paper take the deep indigo here, so they still read as a mark */
.mk-dark .pg-prompt-box, .mk-dark .hub-orzoni { background: var(--mk-deep); }
.mk-dark .pg-get-mark { background: var(--mk-accent); color: var(--mk-accent-ink); }
.mk-dark .story-n, .mk-dark .pg-row h3::before, .mk-dark .pg-chain > li::before { color: var(--mk-accent-ink); }
.mk-dark .pg-chips a.is-here { color: var(--mk-accent-ink); }
.mk-dark .field:focus, .mk-dark .pg-search input:focus, .mk-dark .ask-shell:focus-within { box-shadow: 0 0 0 3px rgba(236, 178, 42, .25); }
.mk-dark .pg-plan:has(input:checked) { background: var(--mk-raised); }
.mk-dark .pg-compare { --band: rgba(255, 255, 255, .05); }
.mk-dark .laptop, .mk-dark .phone { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.mk-dark .headline { font-weight: 500; letter-spacing: -.03em; }
.mk-dark .pg-blank, .mk-dark .blank, .mk-dark .ask-line mark { color: var(--mk-accent); }
.mk-dark .pg-first a::before { background: var(--mk-accent); color: var(--mk-accent-ink); }
.mk-dark .brand-tally img { filter: brightness(0) invert(1); }
.mk-dark .on-light .brand-tally img, .mk-dark .band-dark .brand-tally img { filter: none; }

/* ---------- motion ---------- */
/* the hero rises once as the page opens; nothing waits for a script */
@keyframes mk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mk-hero-copy, .mk-hero-stage, .mk-hero .mk-caption { animation: mk-rise 700ms var(--ease-enter) both; }
.mk-hero-stage { animation-delay: 120ms; }
.mk-hero .mk-caption { animation-delay: 200ms; }

/* ---------- narrower windows ---------- */
@media (max-width: 1100px) { .mk-wrap { padding-inline: 32px; } .mk-split { gap: 40px; } .mk-hero-stage { padding: 36px 36px 0; } .mk-phone { width: 180px; } .mk-feature-wide .mk-feature-copy { padding: 28px; } .mk-business { padding: 30px; } .mk-steps { gap: 16px; } .mk-steps li { padding: 22px; } }
@media (max-width: 767px) {
  .site-head, .site-head[data-scrolled] { --head: 68px; height: 68px; }
  .site-head .wrap { padding-inline: 20px; } .site-head .head-go { min-height: 38px; padding-inline: 16px; }
  .mk-wrap { padding-inline: 20px; } .mk-section { padding-block: 72px; }
  .marketing-home h1 { font-size: clamp(38px, 10.5vw, 56px); line-height: 1.06; }
  .marketing-home h2, .marketing-login h1 { font-size: clamp(30px, 8vw, 40px); line-height: 1.1; }
  .marketing-home h3 { font-size: 22px; }
  .mk-hero { padding-top: 52px; }
  .mk-hero-copy > p, .mk-section p { font-size: 16px; } .mk-hero-copy > p { margin-top: 18px; }
  .mk-hero-copy .mk-actions { margin-top: 24px; gap: 10px 18px; }
  .mk-button { min-height: 50px; padding-inline: 20px; font-size: 15px; } .mk-text-link, .mk-more { font-size: 15px; }
  .mk-hero-stage { margin-top: 40px; padding: 20px 18px 0; border-radius: 18px; }
  .mk-desktop { width: 100%; border-radius: 10px 10px 0 0; }
  .mk-phone { right: 14px; width: 104px; border-width: 4px; border-radius: 16px 16px 0 0; }
  .mk-caption { font-size: 12px; }
  .mk-connects { padding-block: 36px; } .mk-connects .mk-wrap { display: block; }
  .mk-connects p { font-size: 15px; margin-bottom: 22px; }
  .mk-marquee { --mq-gap: 44px; } .mq-mark { height: 26px; } .mq-mark img { max-width: 96px; max-height: 25px; } .mq-cap { font-size: 12px; } .mq-mark .brand-word { font-size: 16px; } .mq-mark .brand { gap: 6px; }
  .mk-section-head { margin-bottom: 32px; } .mk-section-head > p { margin-top: 14px; }
  .mk-features { display: block; } .mk-feature + .mk-feature { margin-top: 40px; }
  .mk-feature-wide { display: block; background: transparent; border-radius: 0; }
  .mk-feature-wide .mk-visual, .mk-visual { height: 240px; padding: 22px 18px 0; border-radius: 18px; }
  .mk-feature-wide .mk-visual img { width: 130%; } .mk-visual img { width: 120%; max-width: none; }
  .mk-feature-copy, .mk-feature-wide .mk-feature-copy { padding: 20px 0 0; }
  .mk-feature-copy p { margin-top: 12px; } .mk-more { margin-top: 12px; }
  .mk-split, .mk-login .mk-split { grid-template-columns: 1fr; gap: 32px; }
  .mk-foundation-visual { padding: 20px 20px 0; } .mk-foundation-visual p { font-size: 13px; }
  .mk-facts li { font-size: 15px; }
  .mk-business-grid { grid-template-columns: 1fr; gap: 12px; }
  .mk-business { min-height: 0; padding: 24px; border-radius: 18px; }
  .mk-business h3 { font-size: 24px; } .mk-business p { font-size: 15px; line-height: 1.5; margin: 10px 0 20px; }
  .mk-business-go { font-size: 15px; }
  .mk-trust .mk-split > div:first-child { order: 2; } .mk-trust-visual { padding: 24px 18px 20px; }
  .mk-trust-list b { font-size: 16px; } .mk-trust-list span { font-size: 14px; }
  .mk-steps { grid-template-columns: 1fr; gap: 12px; } .mk-steps li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; padding: 20px; }
  .mk-steps li::before { grid-row: 1 / 3; margin-bottom: 0; } .mk-steps h3 { font-size: 20px; } .mk-steps p { font-size: 15px; margin-top: 8px; }
  .mk-pricing-heading { display: block; margin-bottom: 28px; } .mk-pricing-heading > p { margin-top: 16px; }
  .mk-plans { grid-template-columns: 1fr; gap: 14px; } .mk-plan { padding: 26px; } .mk-plan .mk-price { font-size: 46px; }
  .mk-faq { padding-top: 0; } .mk-faq-layout { grid-template-columns: 1fr; gap: 20px; }
  .mk-faq .faq h3 { font-size: 17px; } .mk-faq .faq summary { padding-block: 18px; }
  .mk-final { padding-block: 72px; } .mk-final .mk-actions { margin-top: 28px; }
  .site-foot { padding-top: 48px; } .site-foot .foot-top { gap: 36px; } .site-foot .foot-brand > p { font-size: 14px; }
  .mk-login { padding-block: 56px; } .mk-login-image { padding: 18px 18px 16px; }
  .mk-resources { padding-bottom: 72px; } .mk-resources .mk-wrap { grid-template-columns: 1fr; gap: 12px; } .mk-resources a { padding: 22px; } .mk-resources h3 { font-size: 21px; }
}
@media (max-width: 359px) { .mk-phone { width: 92px; } }
@media (prefers-reduced-motion: reduce) {
  .mk-hero-copy, .mk-hero-stage, .mk-hero .mk-caption { animation: none; }
  .marketing-home *, .marketing-login *, .site-head, .site-foot { scroll-behavior: auto; animation: none; transition: none; }
}