@charset "UTF-8";


[hidden]{display:none !important}
:root{--mk-text:780px;--mk-radius-lg:var(--r-lg);--mk-ease:cubic-bezier(.22,1,.36,1);--mk-ink-deep:#0b1a1c;--mk-scrim:11,26,28}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip} /* clip, not hidden: hidden would make body its own scroller while the menu locks html, and the sticky header (with its menu) would jump back to the top of the page */
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:where(:focus-visible){outline:3px solid color-mix(in srgb,var(--teal) 55%,transparent);outline-offset:3px;border-radius:var(--r-sm)}
/* Page grid (docs/BUILD-NOTES.md, « Directory and marketing layout »): every section, the header and the footer sit in
   .mk-wrap (same as .dr-wrap); a text block inside a section stops at --mk-text, never at a width of its own. */
.mk-wrap{width:min(var(--max),calc(100% - 32px));margin-inline:auto}
.mk-skip{position:absolute;left:16px;top:12px;z-index:100;background:var(--surface);color:var(--teal-ink);
  padding:10px 14px;border-radius:var(--r-btn);font-weight:var(--fw-strong);transform:translateY(-200%);opacity:0;box-shadow:none}
.mk-skip:focus{transform:none;opacity:1;box-shadow:var(--shadow-lg)}
.mk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.mk-h1{font-size:clamp(34px,4.6vw,56px);line-height:1.04;letter-spacing:var(--track-display);font-family:var(--display);font-weight:var(--fw-display);color:var(--text);text-wrap:balance}
.mk-h2{font-size:clamp(28px,3.5vw,42px);line-height:1.1;letter-spacing:var(--track-display);font-family:var(--display);font-weight:var(--fw-display);text-wrap:balance}
.mk-h3{font-size:18px;line-height:1.3;letter-spacing:-.015em;font-weight:var(--fw-title)}
.mk-lead{font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;color:var(--soft);max-width:60ch}
.mk-body{color:var(--muted);font-size:15.5px;line-height:1.65}
.mk-accent{color:var(--teal)}
.mk-eyebrow{display:inline-block;font-size:12.5px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:16px}
.mk-small{font-size:13px;color:var(--muted)}
.mk-link{color:var(--teal-ink);font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--teal) 35%,transparent);
  transition:border-color .2s ease}
.mk-link:hover{border-bottom-color:var(--teal)}

/* Buttons, inputs and pills are components (<x-button>, <x-input>, <x-badge>): resources/css/components.css. */
.mk-ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.mk-header{position:sticky;top:0;z-index:40;background:transparent;border-bottom:1px solid transparent;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
  /* Buttons in the bar (and its phone menu) sit flat: no teal glow under them. */
  --ui-btn-shadow:none}
/* At the very top the bar is part of the hero (no fill, no line); once the page moves it gets its frosted fill and hairline
   (.is-scrolled, set by the header's script). */
.mk-header.is-scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}
@media (prefers-reduced-motion:reduce){.mk-header{transition:none}}
.mk-header-in{display:flex;align-items:center;gap:28px;height:66px}
.mk-brand{display:inline-flex;align-items:center;gap:10px;font-size:23px;color:var(--text);min-height:44px}
.mk-brand img{width:30px;height:30px}
.mk-nav{display:flex;align-items:center;gap:4px;margin-left:8px}
.mk-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:var(--r-btn);
  font-size:14.5px;font-weight:550;color:var(--soft);transition:background .2s ease,color .2s ease}
.mk-nav a:hover{background:var(--surface);color:var(--text)}
.mk-nav a[aria-current]{background:var(--teal-dim);color:var(--teal-ink)}
.mk-header-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.mk-login,.mk-lang{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:14.5px;font-weight:550;color:var(--soft);border-radius:var(--r-btn)}
.mk-login:hover,.mk-lang:hover{color:var(--text)}
.mk-lang{font-size:13px;color:var(--muted)}
.mk-brand-tag{margin-left:2px;padding:3px 10px;border-radius:var(--r-pill);background:var(--teal-dim);color:var(--teal-ink);
  font-family:var(--sans);font-size:12px;font-weight:650;letter-spacing:0;white-space:nowrap}
.mk-region{display:flex;align-items:center}
.mk-mnav-region{padding:4px 6px}
.mk-mnav-region .rs{display:block}
.mk-mnav-region .rs-panel{position:static;width:100%;box-shadow:none;border:1px solid var(--line);margin-top:6px}
@media (max-width:1180px){ .mk-region .rs-summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }
@media (max-width:1060px){ .mk-brand-tag{display:none} }

/* Mobile nav: a native <details>, so it opens without any script.
   js/marketing/mnav.js only adds the exit motion (.is-closing keeps [open] for
   the length of the out animation), focus handling, Escape and scrim taps.
   Motion: the burger's bars fold into an X with a little overshoot, the card
   springs out of the button's corner, its rows follow in a short stagger and
   an aqua rule draws across the top. Transform/opacity only. */
.mk-mnav{display:none;position:relative}
.mk-mnav summary{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-btn);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .18s ease}
.mk-mnav summary::-webkit-details-marker{display:none}
.mk-mnav summary:active{transform:scale(.92)}
.mk-mnav summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.mk-mnav[open]:not(.is-closing) > summary{background:var(--teal-dim);border-color:color-mix(in srgb,var(--teal) 30%,transparent);color:var(--teal-ink)}
.mk-burger{position:relative;display:block;width:18px;height:14px}
.mk-burger i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),opacity .2s ease}
.mk-burger i:nth-child(1){top:0}
.mk-burger i:nth-child(2){top:6px;transition-delay:.04s}
.mk-burger i:nth-child(3){top:12px}
.mk-mnav[open]:not(.is-closing) .mk-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mk-mnav[open]:not(.is-closing) .mk-burger i:nth-child(2){transform:scaleX(0);opacity:0;transition-delay:0s}
.mk-mnav[open]:not(.is-closing) .mk-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* The header's backdrop-filter makes it the containing block, so "fixed" here is
   measured from the header: the scrim starts under the bar and the burger stays clear. */
.mk-mnav-scrim{position:fixed;left:0;right:0;top:66px;height:100dvh;background:rgba(19,34,36,.3);touch-action:none;overscroll-behavior:contain}
.mk-mnav-panel{position:fixed;left:12px;right:12px;top:74px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pop);box-shadow:0 1px 2px rgba(19,34,36,.06),var(--shadow-lg);padding:10px;
  max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain;transform-origin:calc(100% - 22px) -8px}
.mk-mnav-panel::before{content:"";position:absolute;top:0;left:18px;right:18px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--teal),var(--aqua));transform-origin:right center}
.mk-mnav-panel a:not(.ui-btn){display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--r-sm);font-weight:550;color:var(--text);
  transition:background .2s ease,color .2s ease}
.mk-mnav-panel a:not(.ui-btn):hover,.mk-mnav-panel a:not(.ui-btn)[aria-current]{background:var(--teal-dim);color:var(--teal-ink)}
.mk-mnav-panel .mk-mnav-cta{margin-top:8px}
.mk-mnav-sep{height:1px;background:var(--line2);margin:6px 8px}

@media (prefers-reduced-motion:no-preference){
  .mk-mnav[open] > .mk-mnav-scrim{animation:mk-mnav-fade .28s ease both}
  .mk-mnav[open] > .mk-mnav-panel{animation:mk-mnav-in .46s cubic-bezier(.34,1.4,.64,1) both}
  .mk-mnav[open] > .mk-mnav-panel::before{animation:mk-mnav-rule .5s cubic-bezier(.2,.8,.3,1) .12s both}
  .mk-mnav[open] > .mk-mnav-panel > *{animation:mk-mnav-item .4s cubic-bezier(.2,.8,.3,1) both;
    animation-delay:calc(70ms + var(--i,9) * 32ms)}
  .mk-mnav-panel > :nth-child(1){--i:0} .mk-mnav-panel > :nth-child(2){--i:1} .mk-mnav-panel > :nth-child(3){--i:2}
  .mk-mnav-panel > :nth-child(4){--i:3} .mk-mnav-panel > :nth-child(5){--i:4} .mk-mnav-panel > :nth-child(6){--i:5}
  .mk-mnav-panel > :nth-child(7){--i:6} .mk-mnav-panel > :nth-child(8){--i:7} .mk-mnav-panel > :nth-child(9){--i:8}
  .mk-mnav.is-closing > .mk-mnav-scrim{animation:mk-mnav-fade-out .22s ease forwards}
  .mk-mnav.is-closing > .mk-mnav-panel{animation:mk-mnav-out .22s cubic-bezier(.4,0,1,1) forwards}
}
@keyframes mk-mnav-fade{from{opacity:0}}
@keyframes mk-mnav-fade-out{to{opacity:0}}
@keyframes mk-mnav-in{from{opacity:0;transform:translateY(-12px) scale(.9)}}
@keyframes mk-mnav-out{to{opacity:0;transform:translateY(-8px) scale(.95)}}
@keyframes mk-mnav-rule{from{transform:scaleX(0)}}
@keyframes mk-mnav-item{from{opacity:0;transform:translateX(14px)}}
@media (prefers-reduced-motion:reduce){
  .mk-burger i,.mk-mnav summary{transition:none}
}

@media (max-width:920px){
  .mk-nav,.mk-login,.mk-login-btn,.mk-header-right .mk-lang,.mk-header-right > .mk-region{display:none}
  .mk-mnav{display:block}
  /* No scroll lock on the page (it hid the scrollbar and moved the page on close): the card scrolls itself
     (overscroll-behavior:contain) and the scrim takes no touch scrolling. */
}
@media (max-width:420px){
  .mk-header-right .mk-header-cta{display:none}
}

/* ---------- sections ---------- */
.mk-section{padding-block:clamp(72px,9vw,120px)}
.mk-section-tight{padding-block:clamp(56px,7vw,88px)}
.mk-pt0{padding-top:0}
/* Two plain sections in a row share one gap instead of stacking two paddings. */
:is(.mk-section,.mk-section-tight):not(.mk-band) + :is(.mk-section,.mk-section-tight):not(.mk-band){padding-top:0}
.mk-band{background:var(--surface);border-block:1px solid var(--line)}
.mk-stack > * + *{margin-top:18px}

/* ---------- hero ---------- */
.mk-hero{position:relative;isolation:isolate;overflow-x:clip}
.mk-hero::before{content:"";position:absolute;z-index:-1;top:-120px;right:-180px;width:860px;height:760px;
  background:url('/img/marketing/bloom.svg') no-repeat center/contain;pointer-events:none;opacity:.9}
.mk-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,5vw,72px);
  align-items:center;padding-block:clamp(48px,6vw,88px) clamp(48px,5vw,64px)}
.mk-hero-in.mk-flat{padding-block:0}
.mk-hero .mk-h1{font-size:clamp(34px,4.1vw,54px)}
.mk-hero .mk-lead{margin-top:22px;max-width:46ch}
.mk-hero .mk-ctas{margin-top:32px}
.mk-hero-note{margin-top:18px}
@media (max-width:880px){
  .mk-hero-in{grid-template-columns:1fr;padding-top:40px}
  .mk-hero::before{right:-420px;top:-200px}
}

/* ---------- the SMS moment ---------- */
.mk-sms{position:relative;justify-self:center;width:min(100%,400px)} /* width-ok: the SMS mock */
.mk-sms-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-lg);
  padding:18px 18px 22px}
.mk-sms-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line2)}
.mk-sms-avatar{width:38px;height:38px;border-radius:50%;background:var(--teal-dim);color:var(--teal-ink);display:grid;place-items:center;
  font-weight:600;font-size:14px;flex:none}
.mk-sms-who b{display:block;font-size:14.5px;font-weight:650;line-height:1.25}
.mk-sms-who span{font-size:12.5px;color:var(--muted)}
.mk-sms-time{text-align:center;font-size:12px;color:var(--muted);margin-bottom:10px}
.mk-bubble{max-width:86%;padding:11px 15px;border-radius:var(--r-card);font-size:15px;line-height:1.5}
.mk-bubble + .mk-bubble{margin-top:10px}
.mk-bubble-in{background:var(--raised);color:var(--text);border-bottom-left-radius:var(--r-sm)}
.mk-bubble-out{margin-left:auto;background:var(--teal);color:#fff;border-bottom-right-radius:var(--r-sm);width:max-content}
.mk-bubble strong{font-weight:600;color:var(--teal-ink)}
.mk-signoff{display:block;margin-top:4px;color:var(--muted);overflow-wrap:anywhere}
.mk-sms-status{position:absolute;right:-26px;bottom:-22px;display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:12px 16px}
.mk-sms-status b{display:block;font-size:13.5px;font-weight:650;line-height:1.3}
.mk-sms-status span{font-size:12.5px;color:var(--muted)}

/* ---------- real product screens (x-product-shot, public/img/product) ----------
   A browser window or a phone drawn in CSS around a screenshot of the demo business. */
.mk-shot{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:0 2px 6px rgba(10,50,52,.06),0 30px 60px -24px rgba(10,50,52,.32)}
.mk-shot img{display:block;width:100%;height:auto}
.mk-shot-bar{display:flex;align-items:center;gap:6px;height:28px;padding-inline:14px;background:var(--bg);border-bottom:1px solid var(--line2)}
.mk-shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.mk-shot-phone{padding:7px;border:0;border-radius:34px;background:var(--mk-ink-deep)}
.mk-shot-phone img{border-radius:27px}
.mk-shots-hero{margin-top:clamp(32px,4vw,48px)}
.mk-shots-pair{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);margin-top:clamp(48px,6vw,80px);align-items:start}
.mk-shots-side{display:grid;gap:20px;align-content:start}
.mk-shots-copy{max-width:var(--mk-text)}
.mk-shots-copy .mk-eyebrow{margin-bottom:8px}
.mk-shots-copy p{margin-top:6px;color:var(--soft);line-height:1.55}
.mk-shots-phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,20px)}
.mk-shots-note{margin-top:16px}
@media (max-width:860px){ .mk-shots-pair{grid-template-columns:1fr} }
.mk-more{margin-top:24px}
.mk-block{display:block;margin-top:6px}
.mk-price-spaced{margin-top:28px}
.mk-sms figcaption{margin-top:24px;text-align:center;max-width:36ch;margin-inline:auto}
.mk-sms-card{position:relative;padding-bottom:84px}
@media (max-width:560px){ .mk-sms-status{right:10px} }
@media (prefers-reduced-motion:no-preference){
  @keyframes mk-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .mk-sms .mk-bubble,.mk-sms-status{animation:mk-in .55s cubic-bezier(.2,.8,.2,1) both}
  .mk-sms .mk-b1{animation-delay:.25s}
  .mk-sms .mk-b2{animation-delay:1.05s}
  .mk-sms .mk-b3{animation-delay:1.6s}
  .mk-sms-status{animation-delay:2.1s}
}

/* ---------- business types ---------- */
.mk-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.mk-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-pill);background:var(--surface);
  border:1px solid var(--line);font-size:14.5px;font-weight:550;color:var(--soft)}
.mk-chip-muted{background:transparent;border-style:dashed;color:var(--muted)}
.mk-packs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:48px}
.mk-pack{grid-column:span 6;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:26px}
.mk-pack:nth-child(1){grid-column:span 7}
.mk-pack:nth-child(2){grid-column:span 5;background:var(--teal-dim);border-color:color-mix(in srgb,var(--teal) 18%,var(--line))}
.mk-pack:nth-child(3){grid-column:span 5;background:linear-gradient(160deg,var(--surface),var(--raised))}
.mk-pack:nth-child(4){grid-column:span 7}
.mk-pack-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px}
.mk-pack dl{display:grid;grid-template-columns:max-content 1fr;gap:9px 18px;font-size:14.5px}
.mk-pack dt{color:var(--muted)}
.mk-pack dd{color:var(--text);font-weight:550}
.mk-pack-mod{margin-top:18px}
@media (max-width:860px){ .mk-packs{grid-template-columns:1fr} .mk-pack,.mk-pack:nth-child(n){grid-column:auto} }
@media (max-width:420px){ .mk-pack dl{grid-template-columns:1fr;gap:2px} .mk-pack dd{margin-bottom:8px} }

/* ---------- feature groups (sticky heading + grouped list) ---------- */
.mk-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,96px);align-items:start}
.mk-split-head{position:sticky;top:110px}
.mk-split-head .mk-lead{margin-top:18px}
.mk-groups > * + *{margin-top:44px}
.mk-group h3{font-size:13px;font-weight:650;color:var(--muted);letter-spacing:.02em;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.mk-feat{display:grid;grid-template-columns:36px 1fr;gap:4px 16px;padding:18px 0}
.mk-feat-ic{width:36px;height:36px;border-radius:var(--r-sm);background:var(--teal-dim);color:var(--teal-ink);display:grid;place-items:center}
.mk-feat-ic svg{width:18px;height:18px}
.mk-feat-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-weight:650;font-size:16.5px;letter-spacing:-.01em}
.mk-feat p{grid-column:2;color:var(--muted);font-size:15px;line-height:1.6}
@media (max-width:860px){ .mk-split{grid-template-columns:1fr} .mk-split-head{position:static} }

/* ---------- compare: who the price is for, with photos ---------- */
.mk-promise-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);
  padding:clamp(24px,4vw,48px);margin-top:clamp(8px,2vw,24px)}
.mk-promise{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.mk-promise-text .mk-lead{margin-top:14px}
.mk-promise-text p + p{margin-top:12px;color:var(--soft)}
.mk-promise-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mk-promise-photos img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card);box-shadow:var(--shadow, 0 1px 2px rgba(19,34,36,.06),0 8px 24px rgba(19,34,36,.08))}
.mk-promise-photos img:nth-child(2){transform:translateY(18px)}
@media (max-width:860px){ .mk-promise{grid-template-columns:1fr} .mk-promise-photos img:nth-child(2){transform:none} }

/* ---------- switching (migration) ---------- */
.mk-switch{background:var(--text);color:#e9f4f3;border-radius:var(--r-lg);padding:clamp(32px,5vw,64px);
  position:relative;overflow:hidden;isolation:isolate}
.mk-switch::after{content:"";position:absolute;z-index:-1;right:-140px;top:-160px;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--aqua) 30%,transparent),transparent 68%)}
.mk-switch .mk-h2{color:#fff}
.mk-switch .mk-lead{color:#c4d6d7;margin-top:16px}
.mk-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:44px;counter-reset:step}
.mk-step{position:relative;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.mk-step::before{counter-increment:step;content:counter(step);position:absolute;top:-15px;left:0;width:30px;height:30px;border-radius:50%;
  background:var(--text);border:1px solid rgba(255,255,255,.28);color:var(--mint);font-size:13px;font-weight:600;display:grid;place-items:center}
.mk-step b{display:block;color:#fff;font-weight:650;font-size:16.5px;margin-bottom:6px}
.mk-step p{color:#b5c8c9;font-size:15px;line-height:1.6}
.mk-switch-foot{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.mk-switch .mk-link{color:var(--mint);border-bottom-color:rgba(167,243,232,.4)}
@media (max-width:760px){ .mk-steps{grid-template-columns:1fr;gap:36px} }
/* Light variant: the dark band is used once per page (home); other pages use this. */
.mk-switch-light{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow)}
.mk-switch-light::after{background:radial-gradient(circle,color-mix(in srgb,var(--aqua) 16%,transparent),transparent 68%)}
.mk-switch-light .mk-h2{color:var(--text)}
.mk-switch-light .mk-lead{color:var(--muted)}
.mk-switch-light .mk-step{border-top-color:var(--line)}
.mk-switch-light .mk-step::before{background:var(--surface);border-color:var(--line-strong);color:var(--teal-ink)}
.mk-switch-light .mk-step b{color:var(--text)}
.mk-switch-light .mk-step p{color:var(--muted)}
.mk-switch-light .mk-link{color:var(--teal-ink);border-bottom-color:color-mix(in srgb,var(--teal) 35%,transparent)}

/* ---------- pricing teaser ---------- */
.mk-price-teaser{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}
.mk-price-big{display:flex;align-items:flex-start;gap:6px;font-family:var(--display);font-weight:var(--fw-display-sub);letter-spacing:var(--track-display-sub);line-height:.9;color:var(--text)}
.mk-price-big .mk-amt{font-size:clamp(84px,12vw,148px)}
.mk-price-big .mk-cur{font-size:clamp(28px,3.4vw,40px);margin-top:.35em}
.mk-price-unit{font-size:16px;color:var(--muted);margin-top:14px}
.mk-checks{display:grid;gap:12px;margin-top:22px}
.mk-checks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;color:var(--soft);font-size:15.5px}
.mk-checks svg{width:20px;height:20px;color:var(--teal);margin-top:2px}
.mk-example{margin-top:26px;padding:16px 18px;border-radius:var(--r-field);background:var(--surface);border:1px solid var(--line);font-size:15px;color:var(--soft)}
.mk-example b{color:var(--text)}
@media (max-width:820px){ .mk-price-teaser{grid-template-columns:1fr} }

/* ---------- final CTA ---------- */

/* ---------- page heads (inner pages) ---------- */
.mk-page-head{position:relative;isolation:isolate;overflow-x:clip;padding-block:clamp(48px,7vw,96px) clamp(32px,4vw,56px)}
.mk-page-head::before{content:"";position:absolute;z-index:-1;top:-200px;right:-260px;width:760px;height:640px;
  background:url('/img/marketing/bloom.svg') no-repeat center/contain;pointer-events:none;opacity:.75}
.mk-page-head .mk-lead{margin-top:20px}
.mk-page-head .mk-h1{max-width:20ch}

/* ---------- features page (mk-f-*) ---------- */
/* Hero: reuses .mk-photo-hero; no aside, so the photo shows on the right. */
.mk-f-hero .mk-photo-hero-media img{object-position:62% 40%}
.mk-f-eyebrow-dark{color:var(--mint)}
.mk-f-hero-note{margin-top:22px;max-width:52ch;font-size:13.5px;color:#c7d8d8}
/* Price-comparison hero: what Tantôt is above the price headline, and where the competitor's figure comes from. */
.mk-home-hero-kicker{margin:0 0 14px;font-size:14.5px;font-weight:var(--fw-strong);letter-spacing:.01em;color:var(--mint)}
.mk-home-hero-src{margin-top:10px;max-width:60ch;font-size:12.5px;color:#c7d8d8}
/* The subline under the price headline: its own line, smaller, at every width (the phone rule below matches it). */
.mk-photo-hero .mk-display .mk-home-hero-sub{display:block;margin-top:16px;font-size:.46em;line-height:1.25;letter-spacing:-.02em;font-weight:var(--fw-strong)}

/* Business types as photo tiles. */
.mk-f-types{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,40px) clamp(14px,1.6vw,22px);margin-top:clamp(36px,4vw,56px)}
.mk-f-type-photo{aspect-ratio:4/5}
.mk-f-type-name{margin-top:14px;font-size:17px;font-weight:650;letter-spacing:-.015em;line-height:1.3}
.mk-f-type-what{margin-top:4px;color:var(--muted);font-size:14.5px;line-height:1.5}
@media (max-width:1000px){ .mk-f-types{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){
  .mk-f-types{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .mk-f-type-photo{aspect-ratio:1}
  .mk-f-type-name{margin-top:10px;font-size:15.5px}
  .mk-f-type-what{font-size:13px}
}

/* The essentials: alternating rows, a photo with a product preview laid over it. */
.mk-f-rows{display:grid;gap:clamp(72px,9vw,128px);margin-top:clamp(48px,6vw,80px)}
.mk-f-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center}
.mk-f-row-flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.mk-f-row-flip .mk-f-stage{order:2}
.mk-f-stage{position:relative;padding-bottom:48px}
.mk-f-stage-photo{width:80%;aspect-ratio:4/3}
.mk-f-row-flip .mk-f-stage-photo{margin-left:auto}
.mk-f-stage > .mk-f-mock{position:absolute;right:0;bottom:0;width:min(340px,60%)} /* width-ok: a product mock over the photo */
.mk-f-row-flip .mk-f-stage > .mk-f-mock{right:auto;left:0}
.mk-f-stage > .mk-f-phone{position:absolute;right:0;bottom:0;width:32%}
.mk-f-row-flip .mk-f-stage > .mk-f-phone{right:auto;left:0}
.mk-f-row-flip .mk-f-stage .mk-shots-note{text-align:right}
/* The demo caption stays under the photo, clear of the phone that hangs over its corner. */
.mk-f-stage:has(> .mk-f-phone) > .mk-shots-note{max-width:64%}
.mk-f-row-flip .mk-f-stage:has(> .mk-f-phone) > .mk-shots-note{margin-left:auto}
.mk-f-stage-screen{padding-bottom:0}
.mk-f-num{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--teal-ink);margin-bottom:14px}
.mk-f-row-title{font-size:clamp(26px,2.8vw,36px);line-height:1.1;letter-spacing:var(--track-display-sub);font-family:var(--display);font-weight:var(--fw-display-sub);text-wrap:balance}
.mk-f-row-body{margin-top:16px;color:var(--soft);font-size:clamp(16px,1.3vw,17.5px);line-height:1.6;max-width:46ch}
@media (max-width:900px){
  .mk-f-row,.mk-f-row-flip{grid-template-columns:1fr;gap:28px}
  .mk-f-row-flip .mk-f-stage{order:0}
  .mk-f-stage{padding-bottom:0}
  .mk-f-stage-photo{width:100%}
  .mk-f-stage > .mk-f-phone,.mk-f-row-flip .mk-f-stage > .mk-f-phone{position:relative;inset:auto;width:56%;margin:-96px auto 0}
  .mk-f-row-flip .mk-f-stage .mk-shots-note{text-align:left}
  .mk-f-stage:has(> .mk-f-phone) > .mk-shots-note,.mk-f-row-flip .mk-f-stage:has(> .mk-f-phone) > .mk-shots-note{max-width:none;margin-left:0}
  .mk-f-stage > .mk-f-mock,.mk-f-row-flip .mk-f-stage > .mk-f-mock{position:relative;inset:auto;width:min(400px,calc(100% - 24px));margin:-64px auto 0} /* width-ok: the product mocks under the photo */
}

/* Product previews (HTML, fictional data). */
.mk-f-mock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;color:var(--text);font-size:13px;line-height:1.35;
  box-shadow:0 2px 6px rgba(10,50,52,.06),0 30px 60px -24px rgba(10,50,52,.38)}
.mk-f-mock-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line2)}
.mk-f-mock-top .ui-badge{margin-left:auto;flex:none}
.mk-f-av{width:34px;height:34px;border-radius:50%;background:var(--teal-dim);color:var(--teal-ink);display:grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.mk-f-av-lg{width:40px;height:40px;font-size:16px}
.mk-f-who{min-width:0}
.mk-f-who b{display:block;font-size:14px;font-weight:650}
.mk-f-who span{display:block;font-size:12px;color:var(--muted)}



.mk-f-rec-fields div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line2)}
.mk-f-rec-fields dt{color:var(--muted)}
.mk-f-rec-fields dd{font-weight:600;text-align:right}
.mk-f-rec-note{margin-top:12px;padding:10px 12px;border-radius:var(--r-field);background:var(--bg);border-left:3px solid var(--teal);font-size:12.5px;color:var(--soft)}
.mk-f-rec-due{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--muted)}


/* The rest of the essentials, as tiles. */
.mk-f-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(72px,9vw,120px)}
.mk-f-more-tile{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:26px}
.mk-f-more-tile:first-child{background:var(--teal-dim);border-color:color-mix(in srgb,var(--teal) 16%,var(--line))}
.mk-f-more-tile:first-child .mk-feat-ic{background:var(--surface)}
.mk-f-more-tile .mk-feat-ic{margin-bottom:18px}
.mk-f-more-tile h3{margin-bottom:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mk-f-more-tile p{color:var(--muted);font-size:15px}
@media (max-width:860px){ .mk-f-more{grid-template-columns:1fr} }

/* The reminder over a photo of the person reading it. */
.mk-f-sms-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.mk-f-sms-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.mk-f-sms-photo{grid-column:1 / span 10;grid-row:1;aspect-ratio:4/5;margin-bottom:220px}
.mk-f-sms-photo img{object-position:50% 25%}
.mk-f-sms .mk-sms figcaption{margin-top:48px}
.mk-f-sms-stage .mk-sms{grid-column:6 / span 7;grid-row:1;align-self:end;justify-self:end;width:min(100%,360px)} /* width-ok: the SMS mock beside the photo */
@media (max-width:900px){
  .mk-f-sms-in{grid-template-columns:1fr}
  .mk-f-sms-in > :last-child{order:-1}
  .mk-f-sms-stage{grid-template-columns:1fr}
  .mk-f-sms-photo{grid-column:1;aspect-ratio:4/3;margin-bottom:0}
  .mk-f-sms-photo img{object-position:50% 30%}
  .mk-f-sms-stage .mk-sms{grid-column:1;grid-row:2;justify-self:center;width:min(400px,calc(100% - 24px));margin-top:-72px} /* width-ok: the SMS mock under the photo */
}
/* The shared SMS card fades its bubbles in on a timer, from opacity 0. Here it sits
   below the fold, so the timer ran out before anyone scrolled to it and early
   captures showed an empty card. On this page the bubbles are always visible and
   only move as they scroll into view. */
.mk-f-sms .mk-sms .mk-bubble,.mk-f-sms .mk-sms .mk-sms-status{animation:none}

/* How it adapts: three levels on the photo band. */
.mk-f-adapt .mk-photo-band-media img{object-position:62% 30%}
.mk-f-adapt-title{font-size:clamp(36px,5.4vw,72px);line-height:1;letter-spacing:var(--track-display);font-family:var(--display);font-weight:var(--fw-display);color:#fff;max-width:16ch;text-wrap:balance}
.mk-f-adapt .mk-lead{margin-top:20px;max-width:52ch}
.mk-f-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px)}
.mk-f-level{background:rgba(var(--mk-scrim),.78);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card);padding:24px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mk-f-level-who{font-size:13px;font-weight:650;color:var(--mint);margin-bottom:10px}
.mk-f-level h3{color:#fff;margin-bottom:8px}
.mk-f-level p{color:#d3e3e3;font-size:15px}
.mk-f-level .mk-f-level-who{color:var(--mint);font-size:13px}
.mk-f-level .mk-f-level-ex{margin-top:16px;font-size:14px;color:#fff;background:rgba(255,255,255,.1);border-radius:var(--r-field);padding:10px 12px}
@media (max-width:860px){ .mk-f-levels{grid-template-columns:1fr} }

@media (prefers-reduced-motion:no-preference){
  .mk-f-type img{transition:transform .9s var(--mk-ease)}
  .mk-f-type:hover img{transform:scale(1.04)}
  @supports (animation-timeline: view()){
    @keyframes mk-f-rise{from{transform:translateY(24px)}to{transform:none}}
    .mk-f-type,.mk-f-mock,.mk-f-sms .mk-sms .mk-bubble,.mk-f-sms .mk-sms .mk-sms-status{animation:mk-f-rise linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  }
}

.mk-modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.mk-modcol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:8px 24px}
.mk-modcol-soon{background:transparent;border-style:dashed;border-color:var(--line-strong)}
.mk-modcol h3{padding:18px 0 12px;display:flex;align-items:center;gap:10px}
.mk-mod{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line2)}
.mk-mod b{font-weight:600;font-size:15px}
.mk-mod span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
@media (max-width:820px){ .mk-modules{grid-template-columns:1fr} }

/* ---------- pricing page ---------- */
.mk-plan-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:stretch}
.mk-plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-lg);padding:clamp(26px,4vw,40px);position:relative;overflow:hidden}
.mk-plan::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--teal),var(--aqua))}
.mk-plan-name{display:flex;align-items:center;gap:10px;font-size:21px}
.mk-plan .mk-price-big{margin-top:22px}
.mk-plan .mk-price-big .mk-amt{font-size:clamp(72px,9vw,104px)}
.mk-plan-extra{margin-top:10px;font-size:15.5px;color:var(--soft)}
.mk-plan .mk-plan-cta{margin-top:26px}
.mk-plan-terms{margin-top:14px;text-align:center}
.mk-included{background:transparent;padding:clamp(8px,2vw,16px) 0}
.mk-included .mk-checks{margin-top:18px}
@media (max-width:860px){ .mk-plan-wrap{grid-template-columns:1fr} }

.mk-calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:clamp(22px,4vw,36px);margin-top:40px}
.mk-calc-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end}
.mk-input-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mk-number{width:104px;flex:none;font-weight:650} /* width-ok: a number field */
.mk-range{flex:1;min-width:160px;accent-color:var(--teal);height:44px}
.mk-calc-ai{margin-top:10px}
.mk-calc-table{width:100%;border-collapse:collapse;margin-top:26px;font-size:15px}
.mk-calc-table th,.mk-calc-table td{text-align:left;padding:14px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
.mk-calc-table thead th{font-size:13px;color:var(--muted);font-weight:600}
.mk-calc-table td.mk-num,.mk-calc-table th.mk-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-calc-table tbody tr:first-child th,.mk-calc-table tbody tr:first-child td{color:var(--teal-ink);font-weight:600}
.mk-calc-table tbody tr:first-child{background:var(--teal-dim)}
.mk-calc-table tbody th{font-weight:600}
.mk-calc-table tbody th span{display:block;font-size:13px;font-weight:450;color:var(--muted)}
.mk-savings{margin-top:22px;font-size:17px;color:var(--text);font-weight:600}
.mk-savings output{color:var(--teal-ink)}
.mk-calc-note{margin-top:10px}
@media (max-width:560px){
  .mk-calc-top{grid-template-columns:1fr}
  .mk-calc-table{font-size:14px}
  .mk-calc-table th,.mk-calc-table td{padding:12px 6px}
}

/* Pricing page: the plan card sits in the photo hero, centred against the promise. */
.mk-price-hero .mk-photo-hero-in{align-items:center;min-height:min(80dvh,760px)}
.mk-price-hero .mk-photo-hero-media img{object-position:70% 45%}
.mk-price-hero .mk-photo-hero-aside{align-self:center;justify-self:end;width:100%;max-width:420px} /* width-ok: the plan card beside the hero copy */
.mk-price-hero .mk-plan{box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.mk-plan-calc{display:block;margin-top:16px;text-align:center;font-size:14.5px;font-weight:550;color:var(--teal-ink);text-decoration:none}
.mk-plan-calc:hover{text-decoration:underline}
@media (max-width:980px){ .mk-price-hero .mk-photo-hero-aside{justify-self:stretch} }
/* What's included: a two-column list of hairline rows. */
.mk-incl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);margin-top:clamp(28px,4vw,44px)}
.mk-incl-grid li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:16px 0;border-top:1px solid var(--line);color:var(--soft);font-size:15.5px;line-height:1.5}
.mk-incl-grid svg{width:20px;height:20px;color:var(--teal);margin-top:2px}
@media (max-width:760px){ .mk-incl-grid{grid-template-columns:1fr} }
/* Savings: the number people came for, set large on the tinted band. */
.mk-calc .mk-savings{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-top:22px;padding:18px 22px;border-radius:var(--r-field);
  background:var(--teal-dim);font-size:16px;font-weight:550}
.mk-calc .mk-savings output{font-size:clamp(28px,3vw,36px);font-family:var(--display);font-weight:var(--fw-display-sub);letter-spacing:var(--track-display-sub);font-variant-numeric:tabular-nums}
/* FAQ: heading on the left, answers on the right. */
.mk-faq-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.mk-faq-split .mk-faq{max-width:none}
@media (max-width:860px){ .mk-faq-split{grid-template-columns:1fr} }
.mk-faq{max-width:var(--mk-text)}
.mk-faq details{border-top:1px solid var(--line)}
.mk-faq details:last-child{border-bottom:1px solid var(--line)}
.mk-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;
  cursor:pointer;font-weight:600;font-size:16.5px}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--teal);flex:none;transition:rotate .2s ease}
.mk-faq details[open] summary::after{rotate:45deg}
.mk-faq details p{padding:0 0 20px;color:var(--muted);max-width:65ch}

/* ---------- comparison page ---------- */
.mk-table-wrap{overflow-x:auto;margin-top:32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow)}
.mk-table{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}
.mk-table th,.mk-table td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line2);vertical-align:top}
.mk-table tr:last-child th,.mk-table tr:last-child td{border-bottom:0}
.mk-table thead th{font-size:13px;color:var(--muted);font-weight:600;background:var(--bg)}
.mk-table thead th.mk-us{color:var(--teal-ink)}
.mk-table td.mk-us{background:color-mix(in srgb,var(--teal-dim) 55%,transparent)}
.mk-table tbody th{font-weight:600;color:var(--text)}
.mk-table:not(.mk-table-stack) tbody th{white-space:nowrap}
.mk-table .mk-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-table td.mk-us.mk-num{font-weight:600;color:var(--teal-ink)}
/* The example row reads as one band: Tantôt's tinted cells included. */
.mk-table .mk-table-hl td,.mk-table .mk-table-hl th{background:var(--teal-dim)}
.mk-table-hl th{box-shadow:inset 3px 0 0 var(--teal)}
.mk-swipe{display:none;margin:10px 0 0;font-size:13px;color:var(--muted)}
@media (max-width:640px){
  .mk-swipe{display:block}
  .mk-table-wrap{background:linear-gradient(to left,color-mix(in srgb,var(--text) 6%,transparent),transparent 28px) right/28px 100% no-repeat,var(--surface)}
  /* Stacked feature table: one card per row, column names from data-label. */
  .mk-table-stack{min-width:0}
  .mk-table-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .mk-table-stack tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line2)}
  .mk-table-stack tr:last-child{border-bottom:0}
  .mk-table-stack th,.mk-table-stack td{display:block;padding:4px 0;border:0}
  .mk-table-stack td.mk-us{background:none}
  .mk-table-stack td[data-label]::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:2px}
}
.mk-source{margin-top:14px;max-width:80ch}
/* Hero: the example team's monthly cost, drawn to scale. Sits on the photo like the home's reminder card. */
.mk-cmp-hero .mk-photo-hero-media img{object-position:58% 35%}
.mk-cmp-hero .mk-f-hero-note.mk-note{color:#c7d8d8}
.mk-cmp-hero .mk-note svg{color:var(--mint)}
.mk-glance{justify-self:end;width:min(100%,380px);margin:0;padding:26px 26px 24px;background:var(--surface);color:var(--text); /* width-ok: the comparison card beside the hero copy */
  border-radius:var(--r-card);box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.mk-glance-label{font-size:13px;font-weight:650;color:var(--muted)}
.mk-glance-rows{margin:18px 0 0;display:grid;gap:16px}
.mk-glance-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px}
.mk-glance-row dt{font-size:14.5px;font-weight:600}
.mk-glance-row dd{margin:0;font-size:22px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.mk-glance-row::after{content:"";grid-column:1 / -1;height:10px;width:var(--w);border-radius:var(--r-pill);background:#c9d6d7}
.mk-glance-us dd{color:var(--teal-ink)}
.mk-glance-us::after{background:var(--teal)}
.mk-glance-per{margin-top:12px;font-size:12.5px;color:var(--muted)}
.mk-glance-saved{margin-top:18px;padding-top:16px;border-top:1px solid var(--line2);font-size:14.5px;color:var(--soft)}
.mk-glance-saved b{display:block;font-size:clamp(30px,3vw,38px);line-height:1.05;letter-spacing:var(--track-display-sub);font-family:var(--display);font-weight:var(--fw-display-sub);color:var(--teal-ink)}
@media (max-width:980px){ .mk-glance{justify-self:stretch;width:auto} }
@media (prefers-reduced-motion:no-preference){
  @keyframes mk-glance-grow{from{width:0}}
  .mk-glance-row::after{animation:mk-glance-grow .9s cubic-bezier(.2,.8,.2,1) .3s both}
}
.mk-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}
.mk-fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.mk-fact h3{margin-bottom:12px}
.mk-fact li{color:var(--soft);font-size:15px;padding:7px 0;border-top:1px solid var(--line2)}
.mk-fact li:first-child{border-top:0}
.mk-why{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mk-why-item{display:flex;gap:14px;align-items:flex-start;padding:22px;background:#fff;border-radius:var(--r-card);box-shadow:0 1px 2px rgba(19,34,36,.06),0 8px 24px rgba(19,34,36,.06)}
.mk-why-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--teal-dim);color:var(--teal-ink)}
.mk-why-mark svg{width:18px;height:18px}
.mk-why-item>div{min-width:0}
.mk-why-item .mk-h3{margin:0 0 6px}
.mk-why-item p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
@media (max-width:820px){ .mk-facts,.mk-why{grid-template-columns:1fr} }

/* ---------- legal documents ---------- */
.mk-doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:56px;align-items:start;padding-bottom:110px} /* width-ok: the legal page's table of contents */
.mk-doc{max-width:var(--mk-text);min-width:0}
.mk-doc h2{font-size:22px;line-height:1.3;letter-spacing:-.02em;margin:48px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
.mk-doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.mk-doc p,.mk-doc li{color:var(--soft);font-size:15px;line-height:1.75}
.mk-doc p{margin:0 0 14px}
.mk-doc ul{margin:0 0 14px;padding-left:20px;list-style:disc}
.mk-doc li{margin:6px 0}
.mk-doc li::marker{color:var(--teal)}
.mk-todo{display:inline;background:var(--wait-soft);color:var(--wait-ink);font-weight:600;padding:1px 6px;border-radius:var(--r-sm);font-size:.92em}
.mk-doc-note{border:1px solid var(--line);border-left:3px solid var(--wait);border-radius:0 var(--r-field) var(--r-field) 0;background:var(--surface);padding:16px 18px;margin:0 0 32px}
.mk-doc-note p:last-child{margin:0}
.mk-toc{position:sticky;top:100px;font-size:13.5px;border-left:1px solid var(--line);padding-left:16px}
.mk-toc b{display:block;color:var(--muted);margin-bottom:8px;font-size:12px;font-weight:650}
.mk-toc a{display:block;padding:5px 0;color:var(--muted);line-height:1.4}
.mk-toc a:hover{color:var(--teal-ink)}
.mk-meta{margin-top:18px}
.mk-doc-operator{margin-top:16px;max-width:70ch}
.mk-doc-contact a{color:var(--teal-ink);font-weight:600}
@media (max-width:900px){ .mk-doc-layout{grid-template-columns:1fr} .mk-toc{display:none} }

/* ---------- footer ---------- */
.mk-footer{background:var(--surface);border-top:1px solid var(--line);padding:64px 0 28px;margin-top:0}
.mk-footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:32px}
.mk-footer-brand p{margin-top:14px;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:34ch}
/* Tantôt's own social accounts (config tantot.social): 44px targets, the icon in muted, teal on hover. */
.mk-footer-social{display:flex;gap:4px;margin:10px 0 0 -12px;padding:0;list-style:none}
.mk-footer-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-btn);color:var(--muted);transition:color .15s,background-color .15s}
.mk-footer-social a:hover{color:var(--teal-ink);background:var(--teal-dim)}
.mk-footer-app{display:inline-block;margin-top:16px;line-height:0} /* Apple's badge: unmodified, clear space around it */
.mk-footer-app img{display:block;height:auto}
/* Three text styles only: column heading (15.5px bold ink, larger than what sits under it), item (14.5px muted: links, the cookie button,
   the "soon" line, contact addresses) and small label (13px muted: contact labels, bottom line).
   One rhythm: every item in a column is 12px from the next, a contact (label + address) counts as one item. */
.mk-footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.mk-footer-col b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--text);margin-bottom:4px}
.mk-footer-col a,.mk-footer-col .cc-link{display:block;min-height:0;color:var(--muted);
  font-family:var(--sans);font-size:14.5px;font-weight:400;line-height:1.45;text-decoration:none;overflow-wrap:anywhere}
.mk-footer-col a:hover,.mk-footer-col .cc-link:hover{color:var(--teal-ink)}
.mk-footer-col small{display:block;font-size:13px;line-height:1.4;color:var(--muted)}
.mk-footer-col .mk-footer-soon{font-size:14.5px;line-height:1.5}
.mk-footer-contact{display:flex;flex-direction:column;gap:1px}
/* Fingers need 44px targets: on touch screens the links get their height back and the gap goes. */
@media (pointer:coarse){
  .mk-footer-col{gap:0}
  .mk-footer-col a,.mk-footer-col .cc-link{display:flex;align-items:center;min-height:44px}
  .mk-footer-contact{padding-top:6px}
}
.mk-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line2);
  font-size:13px;color:var(--muted)}
@media (max-width:1020px){ .mk-footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .mk-footer-brand{grid-column:1/-1} }
@media (max-width:620px){ .mk-footer-grid{grid-template-columns:1fr 1fr} }

/* ---------- scroll motion: position only, never hides content ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    @keyframes mk-rise{from{transform:translateY(24px)}to{transform:none}}
    .mk-rise{animation:mk-rise linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }
}

/* =====================================================================
   Bold layer: photography, display type, full-bleed bands.
   ===================================================================== */
.mk-display{font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:var(--track-display);font-family:var(--display);font-weight:var(--fw-display);text-wrap:balance}
.mk-h2-xl{font-size:clamp(32px,4.4vw,58px);line-height:1.04;letter-spacing:var(--track-display)}
.mk-head{max-width:var(--mk-text)}
.mk-head .mk-lead{margin-top:18px}
.mk-head .mk-eyebrow + .mk-h2{margin-top:0}
.mk-provisional{color:var(--wait-ink)}
.mk-note{display:flex;gap:8px;align-items:flex-start;margin-top:18px;max-width:70ch}
/* Under the trial buttons: the free data transfer (partials/marketing/transfer-note). */
.mk-transfer{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;max-width:60ch;font-size:14px;line-height:1.5;color:var(--soft);text-align:left}
.mk-transfer svg{flex:none;margin-top:3px;color:var(--teal-ink)}
.mk-transfer.is-center{margin-left:auto;margin-right:auto}
.mk-note svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--teal)}

/* Photo frames: --r-lg radius, image covers, never stretches. */
.mk-frame{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--raised);
  box-shadow:0 1px 2px rgba(10,50,52,.06),0 18px 40px -18px rgba(10,50,52,.28)}
.mk-frame img{width:100%;height:100%;object-fit:cover}
.mk-photo-img{width:100%;height:auto}

/* ---------- hero: full-bleed photo with a scrim on the reading side ---------- */
.mk-photo-hero{position:relative;isolation:isolate;color:#fff;background:var(--mk-ink-deep);overflow:clip}
.mk-photo-hero-media{position:absolute;inset:0;z-index:-2}
.mk-photo-hero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.mk-photo-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--mk-scrim),.92) 0%,rgba(var(--mk-scrim),.74) 38%,rgba(var(--mk-scrim),.18) 72%,rgba(var(--mk-scrim),.05) 100%),
             linear-gradient(0deg,rgba(var(--mk-scrim),.55) 0%,transparent 40%)}
.mk-photo-hero-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,5vw,72px);align-items:end;
  min-height:min(86dvh,820px);padding-block:clamp(56px,8vw,96px) clamp(48px,6vw,80px)}
.mk-photo-hero-copy{align-self:center;max-width:var(--mk-text)}
.mk-photo-hero .mk-display{color:#fff;font-size:clamp(40px,4.3vw,64px)} /* 3-4 lines at desktop in FR */
.mk-accent-on-dark{color:var(--mint)}
.mk-lead-on-dark{color:#d3e3e3}
.mk-photo-hero .mk-lead{margin-top:24px;max-width:44ch;font-size:clamp(17px,1.5vw,20px)}
.mk-photo-hero .mk-ctas{margin-top:36px}
.mk-photo-hero-aside{align-self:end;color:var(--text)}
.mk-photo-hero-aside .mk-sms figcaption{color:#c7d8d8}
.mk-photo-hero-aside .mk-sms-card{box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
@media (max-width:980px){
  .mk-photo-hero-in{grid-template-columns:1fr;min-height:0;padding-top:72px}
  .mk-photo-hero::before{background:linear-gradient(0deg,rgba(var(--mk-scrim),.94) 0%,rgba(var(--mk-scrim),.78) 55%,rgba(var(--mk-scrim),.45) 100%)}
  .mk-photo-hero-aside{justify-self:stretch;max-width:420px;margin-top:8px} /* width-ok: the hero's card (SMS, plan) under the copy */
}
@media (max-width:560px){ .mk-photo-hero-aside .mk-sms-status{right:10px} }
/* Tablets (iPad portrait): keep the copy and its card side by side over the photo, with bigger type, instead of a
   stacked phone layout that leaves half the hero empty. */
@media (min-width:761px) and (max-width:980px){
  .mk-photo-hero-in{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:28px;align-items:center;min-height:min(80dvh,880px);padding-top:clamp(56px,8vw,80px)}
  .mk-photo-hero::before{background:linear-gradient(90deg,rgba(var(--mk-scrim),.92) 0%,rgba(var(--mk-scrim),.8) 50%,rgba(var(--mk-scrim),.35) 100%),
             linear-gradient(0deg,rgba(var(--mk-scrim),.6) 0%,transparent 45%)}
  .mk-photo-hero .mk-display{font-size:clamp(44px,5.9vw,56px)}
  .mk-photo-hero .mk-lead{font-size:18px}
  .mk-photo-hero-aside{align-self:center;max-width:none;margin-top:0}
  .mk-price-hero .mk-photo-hero-aside{justify-self:end}
}
/* Home hero on phones: shorter type and one full-width button (pricing becomes a link by the trial line). On phones
   and tablets the price line sits under the headline, smaller. */
.mk-home-hero-link{display:none}
@media (max-width:980px){
  .mk-home-hero .mk-display .mk-accent-on-dark{display:block;margin-top:12px;font-size:.62em;line-height:1.2;letter-spacing:-.02em}
}
@media (max-width:620px){
  .mk-home-hero .mk-photo-hero-in{padding-top:40px;gap:28px}
  .mk-home-hero .mk-display{font-size:clamp(34px,10vw,40px);line-height:1.06}
  .mk-home-hero .mk-lead{margin-top:16px;font-size:16.5px}
  .mk-home-hero .mk-ctas{margin-top:24px}
  .mk-home-hero .mk-ctas > *{flex:1 1 100%;justify-content:center}
  .mk-home-hero .mk-home-hero-pricing{display:none}
  .mk-home-hero .mk-f-hero-note{margin-top:14px}
  .mk-home-hero-link{display:inline;margin-left:4px;color:#fff;font-weight:550;text-decoration:underline;text-underline-offset:3px}
}

/* ---------- gallery rail: people at work, scroll-snap ---------- */
.mk-gallery .mk-head{margin-bottom:clamp(32px,4vw,48px)}
.mk-rail{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-inline:max(16px,calc((100% - var(--max)) / 2));scroll-padding-inline:max(16px,calc((100% - var(--max)) / 2))}
.mk-rail::-webkit-scrollbar{display:none}
.mk-rail:focus-visible{outline-offset:-3px}
.mk-rail-track{display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;padding-bottom:8px}
.mk-rail-item{flex:none;width:clamp(220px,24vw,300px);scroll-snap-align:start} /* width-ok: a carousel card */
.mk-rail-item .mk-frame{aspect-ratio:3/4}
.mk-rail-item-low{padding-top:clamp(0px,4vw,48px)}
.mk-rail-item figcaption{margin-top:14px;font-weight:650;font-size:16.5px;letter-spacing:-.015em;color:var(--text)}
@media (max-width:640px){ .mk-rail-item{width:72vw} .mk-rail-item-low{padding-top:0} }
@media (prefers-reduced-motion:no-preference){
  .mk-rail-item img{transition:transform .9s var(--mk-ease)}
  .mk-rail-item:hover img{transform:scale(1.04)}
}

/* ---------- business examples with photos (asymmetric 7/5) ---------- */
.mk-pack{padding:0;overflow:hidden;display:flex;flex-direction:column}
.mk-pack-photo{aspect-ratio:16/9;overflow:hidden;background:var(--raised)}
.mk-pack-photo img{width:100%;height:100%;object-fit:cover}
/* Two cards per row with different spans: one photo height per row so titles and specs line up. */
@media (min-width:861px){.mk-pack-photo{aspect-ratio:auto;height:clamp(200px,20vw,300px)}}
.mk-pack:nth-child(2) .mk-pack-photo,.mk-pack:nth-child(3) .mk-pack-photo{aspect-ratio:4/3}
.mk-pack-body{padding:24px 26px 26px}
.mk-pack-body .mk-h3{margin-bottom:16px}

/* ---------- full-bleed photo band (the directory) ---------- */
.mk-photo-band{position:relative;isolation:isolate;color:#fff;background:var(--mk-ink-deep);overflow:clip}
.mk-photo-band-media{position:absolute;inset:0;z-index:-2}
.mk-photo-band-media img{width:100%;height:100%;object-fit:cover;object-position:70% 35%}
.mk-photo-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(var(--mk-scrim),.93) 0%,rgba(var(--mk-scrim),.8) 45%,rgba(var(--mk-scrim),.3) 100%)}
.mk-photo-band-in{padding-block:clamp(88px,11vw,152px)}
.mk-dir-title{font-size:clamp(52px,9vw,120px);line-height:.95;letter-spacing:var(--track-display);font-family:var(--display);font-weight:var(--fw-display);color:#fff}
.mk-photo-band .mk-lead{margin-top:24px;max-width:50ch}
.mk-searches{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px;max-width:var(--mk-text)}
.mk-search{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px 0 14px;border-radius:var(--r-field);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);font-size:15px;color:#fff;
  backdrop-filter:none}
.mk-search svg{width:16px;height:16px;color:var(--mint)}
.mk-search span{color:#c4d6d7}
.mk-dir-biz{margin-top:32px;max-width:62ch;color:#d3e3e3;font-size:15.5px}
.mk-dir-soon{color:#fff;font-weight:600}
.mk-link-on-dark{color:var(--mint);border-bottom-color:rgba(167,243,232,.45);margin-left:6px;white-space:nowrap}
.mk-link-on-dark:hover{border-bottom-color:var(--mint)}

/* ---------- final call to action with a photo ---------- */
.mk-final-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.mk-final-split .mk-lead{margin-top:20px}
.mk-final-split .mk-ctas{margin-top:32px}
.mk-frame-tall{aspect-ratio:4/5;max-height:620px}
.mk-frame-tall img{object-position:50% 30%}
@media (max-width:860px){ .mk-final-split{grid-template-columns:1fr} .mk-frame-tall{aspect-ratio:4/3} }

/* ---------- inner page heads with photos ---------- */
.mk-page-head-photo::before{display:none}
.mk-page-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.mk-page-split .mk-h1{max-width:16ch}
.mk-duo{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
.mk-duo-a{grid-column:1 / span 9;grid-row:1;aspect-ratio:4/5}
.mk-duo-b{grid-column:7 / span 6;grid-row:1;aspect-ratio:3/4;margin-top:42%;border:6px solid var(--bg)}
@media (max-width:900px){
  .mk-page-split{grid-template-columns:1fr}
  .mk-duo-a{aspect-ratio:4/3;grid-column:1 / span 12}
  .mk-duo-b{display:none}
}
.mk-banner{margin-top:clamp(32px,4vw,48px)}
.mk-frame-banner{aspect-ratio:21/8}
.mk-frame-banner img{object-position:50% 45%}
@media (max-width:640px){ .mk-frame-banner{aspect-ratio:4/3} }

/* Entry motion for photos: a gentle rise, position only. */
@media (prefers-reduced-motion:no-preference){
  @keyframes mk-up{from{transform:translateY(18px)}to{transform:none}}
  .mk-photo-hero-copy > *{animation:mk-up .9s var(--mk-ease) both}
  .mk-photo-hero-copy > :nth-child(2){animation-delay:.08s}
  .mk-photo-hero-copy > :nth-child(3){animation-delay:.16s}
  @supports (animation-timeline: view()){
    .mk-rail-item,.mk-frame-tall,.mk-duo-b{animation:mk-rise linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
  }
}