/* Space Grotesk, self-hosted (same subsets and ranges as Google Fonts) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin-ext.1efa877634.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:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin.cbee7234c1.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}
/* ============================================================
CREATIIV.AI — landing page · design system v1
White background, black type, Space Grotesk only.
Gray (#F0F0F0) only marks something selected; colour only as
small signals (status dots, links). Lime is the logo mark only.
============================================================ */
:root{
--surface:#FFFFFF; --on-dark:#FFFFFF; --on-dark-2:#D9D9D9; --on-green:#FFFFFF; --dark-hover:#000000; --edge:#D4D4D4;
--bg:#FFFFFF;
--selected:#F0F0F0;
--hover:#F6F6F6;
--line:#E4E4E4;
--ink:#1A1A1A; /* 17.4:1 */
--text-2:#5C5C5C; /* 6.7:1 */
--text-3:#6D6D6D; /* 5.2:1, 4.5+ on hover and selected */
--dark:#262626;
--green:#257C52;
--amber:#8A5A12;
--red:#B3261E;
--lime:#C8F531; /* logo mark only */
--on-lime:#14150F;
--f:'Space Grotesk',system-ui,-apple-system,sans-serif;
--wrap:min(1064px,92vw);
--sh-sm:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
--sh-md:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
[id]{scroll-margin-top:80px}
body{background:var(--bg);color:var(--ink);font-family:var(--f);
font-size:15px;line-height:1.5;letter-spacing:-.128px;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
::selection{background:var(--ink);color:var(--bg)}
/* type scale */
h1{font-size:clamp(40px,5.7vw,60px);line-height:1;font-weight:510;letter-spacing:-.04em}
h2{font-size:clamp(32px,4.2vw,44px);line-height:1;font-weight:510;letter-spacing:-.04em}
h3{font-size:28px;line-height:1.06;font-weight:510;letter-spacing:-.784px}
p{color:var(--text-2)}
.lede{font-size:20px;line-height:28px;letter-spacing:-.28px;max-width:54ch}
.eyebrow{font-size:13.5px;line-height:20.25px;font-weight:500;color:var(--text-2);margin-bottom:16px}
.wrap{width:var(--wrap);margin:0 auto}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
height:40px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:500;
letter-spacing:-.128px;border:0;cursor:pointer;white-space:nowrap;
transition:background .2s ease,box-shadow .2s ease}
.btn.p{background:var(--dark);color:var(--on-dark)}
.btn.p:hover{background:var(--dark-hover)}
.btn.s{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.s:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.sm{height:32px;padding:0 14px;font-size:13px}
/* nav */
.nav{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid transparent;
transition:border-color .25s ease}
.nav.stuck{border-bottom-color:var(--line)}
.nrow{display:flex;align-items:center;gap:26px;height:57px;width:var(--wrap);margin:0 auto}
.logo{display:inline-flex;align-items:center;gap:9px;min-height:44px;
font-size:15px;font-weight:600;letter-spacing:-.45px}
.logo i{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;
background:var(--lime);color:var(--on-lime);font-style:normal;font-size:12px}
.nlinks{display:flex;gap:22px;font-size:15px;font-weight:500;color:var(--text-2)}
.nlinks a{display:inline-flex;align-items:center;min-height:44px}
.nlinks a:hover{color:var(--ink)}
.nright{display:flex;align-items:center;gap:8px;margin-left:auto}
.nright .li{display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:8px;
font-size:15px;font-weight:500;color:var(--text-2)}
.nright .li:hover{color:var(--ink);background:var(--hover)}
.burger{display:none;width:40px;height:40px;border:0;border-radius:8px;
box-shadow:inset 0 0 0 1px var(--line);background:var(--bg)}
/* hero */
.hero{padding:clamp(56px,9vh,104px) 0 0}
.hero h1{max-width:15ch}
.hero .lede{margin-top:20px}
.hcta{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.hnote{margin-top:14px;font-size:13.5px;color:var(--text-3)}
/* the product panel */
.hpanel{margin-top:clamp(40px,5.4vw,68px)}
.panel{background:var(--bg);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),var(--sh-md);overflow:hidden}
.pbar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--line);
font-size:12.5px;color:var(--text-3);font-weight:500}
.pbar i{width:9px;height:9px;border-radius:50%;background:var(--line);font-style:normal}
.pbar b{margin-left:6px;font-weight:500}
.pbody-grid{display:grid;grid-template-columns:190px 1fr}
.side{border-right:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.side .who{display:flex;align-items:center;gap:9px;padding:6px 8px 12px}
.side .who em{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;
background:var(--selected);color:var(--ink);font-style:normal;font-size:10.5px;font-weight:600}
.side .who span{font-size:14px;font-weight:600;letter-spacing:-.14px}
.side s{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
font-size:13.5px;line-height:20.25px;color:var(--text-2);text-decoration:none}
.side s.on{background:var(--selected);color:var(--ink);font-weight:600}
.side s em{font-style:normal;font-size:12px;opacity:.6}
.pbody{padding:16px 18px}
.q{font-size:15px;font-weight:600;letter-spacing:-.3px;margin-bottom:2px}
.qs{font-size:12.5px;color:var(--text-3);margin-bottom:10px}
.arow{display:grid;grid-template-columns:118px 1fr auto;gap:14px;align-items:center;
padding:12px 0;border-top:1px solid var(--line)}
.asrc{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500}
.asrc em{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;
background:var(--selected);font-style:normal;font-size:9.5px;color:var(--text-2);font-weight:700}
.arow p{font-size:13.5px;line-height:20.25px}
.arow p b{color:var(--ink);font-weight:500}
/* status: a dot on a white chip, never a coloured fill */
.tag{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:8px;
box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.tag.mid::before{background:var(--amber)}
.tag.no::before{background:var(--red)}
/* sections */
.sec{padding:clamp(64px,10vh,120px) 0 0}
.head{max-width:60ch;margin-bottom:clamp(20px,3vw,36px)}
.head h2{margin-bottom:16px}
/* alternating feature blocks */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
padding:clamp(32px,5vh,64px) 0}
.feat:nth-of-type(even) .ftext{order:2}
.flabel{font-size:15px;font-weight:500;color:var(--text-2);margin-bottom:10px}
.ftext h3{margin-bottom:14px;max-width:18ch}
.ftext p{font-size:17px;line-height:27.6px}
.mini{background:var(--bg);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),var(--sh-sm);overflow:hidden}
.mhead{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);
font-size:13.5px;font-weight:600;color:var(--ink)}
.mhead .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.mbody{padding:6px 16px 10px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
border-top:1px solid var(--line);font-size:13.5px;align-items:center}
.kv:first-child{border-top:0}
.kv span{color:var(--text-2)}
.kv b{font-weight:500;color:var(--ink)}
.ok{color:var(--green)!important} .bad{color:var(--red)!important} .warn{color:var(--amber)!important}
.chat{display:flex;flex-direction:column;gap:10px;padding:16px}
.bub{max-width:88%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:20.25px}
.bub.me{align-self:flex-end;background:var(--dark);color:var(--on-dark);border-bottom-right-radius:4px}
.bub.ai{align-self:flex-start;background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);
border-bottom-left-radius:4px}
.bub.ai b{font-weight:600}
.cnote{font-size:12.5px;color:var(--text-3);padding:0 16px 14px}
/* see it in action */
.vidframe{display:grid;place-items:center;align-content:center;gap:14px;aspect-ratio:16/8;border-radius:16px;
background:var(--bg);box-shadow:inset 0 0 0 1px var(--line),var(--sh-sm);transition:box-shadow .25s ease}
.vidframe:hover{box-shadow:inset 0 0 0 1px var(--ink),var(--sh-md)}
.vplay{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
background:var(--dark);color:var(--on-dark);font-size:18px;padding-left:3px}
.vlabel{font-size:15px;color:var(--text-2)}
/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{background:var(--bg);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);
padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:12px}
.plan.hi{box-shadow:inset 0 0 0 1px var(--ink),var(--sh-md)}
.ribbon{align-self:flex-start;background:var(--dark);color:var(--on-dark);font-size:12px;font-weight:500;
height:24px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px}
.plan h3{font-size:21px;line-height:31.5px;font-weight:600;letter-spacing:-.42px}
.plan .who{font-size:15px;color:var(--text-2);margin-top:-8px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;padding-top:12px;border-top:1px solid var(--line)}
.plan li,.everyplan li{position:relative;padding-left:20px;font-size:15px;line-height:22.5px;color:var(--text-2)}
.plan li::before,.everyplan li::before{content:"\2013";position:absolute;left:0;top:0;color:var(--ink);font-weight:500}
.plan .btn{margin-top:auto;width:100%}
.quoted{margin-top:16px;padding:18px 20px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);
display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;font-size:15px;color:var(--text-2)}
.quoted b{color:var(--ink);font-weight:600}
.everyplan{margin-top:16px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:clamp(20px,2.4vw,28px)}
.everyplan h3{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.32px;margin-bottom:14px}
.everyplan ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 28px}
.everyplan code{font-family:var(--f);font-size:14px;font-weight:500;color:var(--ink)}
.rows{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.rows div span{display:block;font-size:13.5px;color:var(--text-2);margin-bottom:3px}
.rows div b{font-size:15px;font-weight:600;letter-spacing:-.3px}
.addons{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.addons span{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;
box-shadow:inset 0 0 0 1px var(--line);font-size:13.5px;color:var(--text-2)}
.addons .lbl{box-shadow:none;background:none;padding:0 6px 0 0;color:var(--text-2);font-weight:500}
/* close */
.end{text-align:center;padding-bottom:clamp(64px,10vh,120px)}
.end h2{max-width:18ch;margin:0 auto}
.end .lede{margin:18px auto 0}
.end .hcta{justify-content:center}
/* footer */
footer{border-top:1px solid var(--line);padding:36px 0 40px}
.frow{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.fcol{min-width:150px}
.fcol h4{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.fcol a{display:flex;align-items:center;min-height:36px;font-size:15px;color:var(--text-2)}
.fcol a:hover{color:var(--ink)}
.fbot{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:28px;padding-top:20px;
border-top:1px solid var(--line);font-size:13.5px;color:var(--text-3)}
.fbot nav{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.fbot nav a{display:inline-flex;align-items:center;min-height:36px}
.fbot nav a:hover{color:var(--ink)}
/* reveals (added by JS only, so no-JS shows everything) */
.rv{opacity:0;transform:translateY(14px)}
.rv.on{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
@media (max-width:940px){
.nlinks,.nright .li{display:none}
.burger{display:block}
.plans{grid-template-columns:1fr}
.everyplan ul,.rows{grid-template-columns:1fr 1fr}
.pbody-grid{grid-template-columns:1fr}
.side{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;padding:10px;gap:4px}
.side .who{padding:4px 8px;flex:0 0 auto}
.side s{flex:0 0 auto;white-space:nowrap}
.feat{grid-template-columns:1fr;gap:24px}
.feat:nth-of-type(even) .ftext{order:0}
h3{font-size:24px}
}
@media (max-width:560px){
.hcta .btn{width:100%}
.arow{grid-template-columns:1fr;gap:6px}
.arow .tag{justify-self:start}
.everyplan ul,.rows{grid-template-columns:1fr}
.lede{font-size:18px;line-height:26px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
.rv{opacity:1;transform:none}
}
/* ============================================================
DARK MODE — matched to heymark.ai's own dark theme (measured
23 Sep 2026). Near-black page, cards lifted one step, white-at-
10% lines, a light-gray main button, gray only for the selected
item. Every text colour is 4.5:1 or better on page, card, hover
and selected.
============================================================ */
html[data-theme="dark"]{
color-scheme:dark;
--bg:#070506; --surface:#110F0F; --hover:#1A1818; --selected:#262626; --muted-cell:#0C0A0A;
--line:rgba(255,255,255,.1); --edge:rgba(255,255,255,.2);
--ink:#F8F8F8; --text-2:#9E9E9E; --text-3:#8F8F8F;
--dark:#E4E4E4; --on-dark:#0D0D0D; --on-dark-2:#4A4A4A; --dark-hover:#FFFFFF;
--green:#53BE70; --on-green:#0D0D0D; --amber:#EDB345; --red:#F2766B;
--sh-sm:0 0 #0000; --sh-md:0 0 #0000; /* not "none": none inside a comma list voids the whole shadow, rings included */
}
html[data-theme="dark"] .btn.s{box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}
html[data-theme="dark"] .btn.s:hover{box-shadow:inset 0 0 0 1px var(--ink)}
/* theme toggle */
.tglr{display:inline-grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;
background:transparent;color:var(--text-2);cursor:pointer;transition:background .2s ease,color .2s ease}
.tglr:hover{background:var(--hover);color:var(--ink)}
.tglr:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tglr svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tglr .moon{display:none}
html[data-theme="dark"] .tglr .sun{display:none}
html[data-theme="dark"] .tglr .moon{display:block}
.tglr.float{position:fixed;top:14px;right:14px;z-index:90;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
/* cards and panels sit one step above the page in dark */
.panel,.mini,.plan,.quoted,.everyplan,.vidframe{background:var(--surface)}
/* ===== new structure: features menu, mobile menu, feature pages (2026-09-23) ===== */
/* logo mark: inline SVG bolt (LOGO_MARK), dark on the lime tile in both themes (2026-10-19) */
.logo i svg{display:block;width:14px;height:14px}
/* four plan cards (Car Dealership Studio is the 4th plan, 2026-09-26): 4 across, 2x2, then 1 */
.plans.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.plans.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plans.four{grid-template-columns:1fr}}
/* footer column titles are h2 for a clean outline (2026-09-24 audit), styled as the old h4 */
.fcol h2.fh{font-size:13.5px;line-height:inherit;font-weight:600;letter-spacing:inherit;color:var(--ink);margin-bottom:6px}
.ddw{position:relative;display:flex}
.ddb{font:inherit;font-weight:500;color:var(--text-2);background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0}
.ddb svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s ease}
.ddb:hover,.ddb[aria-expanded="true"]{color:var(--ink)}
.ddb[aria-expanded="true"] svg{transform:rotate(180deg)}
.ddb:focus-visible,.burger:focus-visible,.more:focus-visible,.qa summary:focus-visible,.fidx:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.ddp{position:absolute;top:calc(100% + 6px);left:-14px;width:600px;background:var(--surface);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line),var(--sh-md);padding:6px;z-index:70}
.nlinks .ddp a{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;min-height:0;padding:10px 12px;border-radius:9px}
.nlinks .ddp a:hover,.nlinks .ddp a[aria-current="page"]{background:var(--hover)}
.ddp b{font-size:14.5px;font-weight:600;color:var(--ink)}
.ddp span{font-size:13.5px;font-weight:400;color:var(--text-2)}
.ddp em{font-style:normal;font-size:12px;font-weight:600;color:var(--text-2);height:22px;padding:0 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);display:inline-flex;align-items:center;white-space:nowrap}
.ddf{display:flex;justify-content:space-between;gap:12px;padding:10px 12px 6px;margin-top:4px;border-top:1px solid var(--line)}
.nlinks .ddf a{display:inline;min-height:0;padding:0;font-size:13.5px;color:var(--ink)}
.mmenu{border-top:1px solid var(--line);background:var(--bg);padding:4px var(--gutter,16px) 16px;max-height:calc(100vh - 57px);overflow:auto}
.mmenu .mh{font-size:12.5px;font-weight:600;color:var(--text-3);padding:14px 0 4px}
.mmenu a{display:flex;align-items:center;min-height:44px;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line)}
@media (min-width:941px){.mmenu{display:none!important}}
.ptag{display:inline-flex;align-items:center;height:22px;padding:0 9px;margin-left:10px;border-radius:999px;background:var(--selected);font-size:12px;font-weight:600;color:var(--ink);vertical-align:1px}
.more{display:inline-flex;margin-top:16px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1.5px;text-underline-offset:4px}
.more:hover{text-decoration-color:var(--ink)}
.optlink{margin-top:12px;font-size:15px!important;color:var(--text-2)}
.optlink a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.nlinks .ddp a.sub{margin-left:18px;grid-template-columns:132px 1fr auto}
.fhero{padding-top:clamp(40px,7vh,72px)}
.fhero h1{max-width:16ch}
.fhero .lede{margin-top:18px}
.crumbs{font-size:13.5px;color:var(--text-2);margin-bottom:28px}
.crumbs a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--ink)}
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fcards:has(> :nth-child(4)):not(.four){grid-template-columns:repeat(2,1fr)}
@media (max-width:940px){.fcards:has(> :nth-child(4)):not(.four){grid-template-columns:1fr}}
.fcard{padding:22px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.fcard b{display:block;font-size:17px;font-weight:600;letter-spacing:-.34px;margin-bottom:6px}
.fcard p{font-size:15px;line-height:22.5px}
.byplan{border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.byplan table{width:100%;border-collapse:collapse;font-size:17px;line-height:27.6px}
.byplan th,.byplan td{padding:16px 22px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.byplan tr:first-child>*{border-top:0}
.byplan th{width:22%;font-size:15px;font-weight:600;letter-spacing:.2px;color:var(--ink)}
.byplan td{color:var(--text-2)}
.plink{margin-top:4px}
.faq{border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.qa{border-top:1px solid var(--line)}
.qa:first-child{border-top:0}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-size:17px;font-weight:500;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:20px;font-weight:400;color:var(--text-2);transition:transform .2s ease}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 22px 20px;font-size:17px;line-height:27.6px;max-width:70ch}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fidx{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s ease}
.fidx:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.fidx .fl{font-size:15px;font-weight:500;color:var(--text-2)}
.fidx b{font-size:21px;line-height:27px;font-weight:600;letter-spacing:-.42px}
.fidx .fs{font-size:15px;color:var(--text-2)}
@media (max-width:940px){.fcards,.fgrid{grid-template-columns:1fr}}
@media (max-width:560px){.byplan th,.byplan td{display:block;width:auto;padding:12px 18px}.byplan td{border-top:0;padding-top:0}.ptag{margin-left:8px}}
.pl-cards{margin-top:36px}
/* Car Dealership Studio's three plans (2026-10-19): same cards, a "From" on the homepage card, and the terms under them */
.plan .price .from{font-size:15px;font-weight:500;color:var(--text-2);margin-right:6px}
@media (min-width:941px){.dplans .plan .one{min-height:50px}}
.dnote{margin-top:20px;max-width:760px;font-size:15px;line-height:22.5px;color:var(--text-2)}
.plan .one{font-size:17px;font-weight:500;letter-spacing:-.34px;color:var(--ink);margin-top:2px}
.plan .term{font-size:13.5px;color:var(--text-2);margin-top:8px}
.plan .price{margin-top:14px;display:flex;align-items:baseline;gap:2px}
.plan .price b{font-size:28px;line-height:29.7px;font-weight:510;letter-spacing:-.784px;color:var(--ink)}
.plan .price span{font-size:15px;font-weight:500;color:var(--text-2)}
.plan .fee{font-size:13.5px;line-height:20.25px;color:var(--text-2);margin-top:2px}
.option{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;padding:18px 22px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s ease}
.option:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.option:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.option .ot{display:flex;flex-direction:column;gap:2px}
.option b{font-size:17px;font-weight:600;letter-spacing:-.34px}
.option .ot span{font-size:15px;color:var(--text-2)}
.option .oa{flex:none;font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.cmpw{border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);padding:1px}
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;line-height:22.5px}
.cmp th,.cmp td{padding:13px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{position:sticky;top:57px;z-index:2;background:var(--surface);font-weight:600;border-bottom:1px solid var(--ink)}
.cmp thead th:first-child{border-top-left-radius:15px}.cmp thead th:last-child{border-top-right-radius:15px}
.cmp tbody th{font-weight:400;color:var(--ink);width:31%}
.cmp td{width:23%;color:var(--text-2)}
.cmp tr.grp th{padding-top:24px;padding-bottom:8px;font-size:13.5px;font-weight:600;color:var(--ink)}
.cmp tbody tr:last-child>*{border-bottom:0}
.ck{display:flex;align-items:center;height:22.5px}
.ck svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nx{color:var(--text-3)}
/* phones: no sideways scroll. Each row = its label on one line, the three plans side by side below;
the plan header stays pinned while scrolling (2026-09-25 audit) */
@media (max-width:760px){.cmpw{overflow:visible}
.cmp,.cmp thead,.cmp tbody{display:block}
.cmp tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cmp thead{position:sticky;top:57px;z-index:2;background:var(--surface);border-radius:15px 15px 0 0}
.cmp thead th{position:static;padding:12px 12px}.cmp thead th:first-child{display:none}
.cmp thead th:nth-child(2){border-top-left-radius:15px}
.cmp tbody th{grid-column:1/-1;width:auto;padding:14px 12px 2px;border-bottom:0;font-weight:500}
.cmp td{width:auto;padding:4px 12px 14px;font-size:13.5px;line-height:20.25px;overflow-wrap:anywhere}
.cmp tr.grp th{padding:24px 12px 8px;border-bottom:1px solid var(--line)}.option{flex-direction:column;align-items:flex-start}}
.pm{margin-top:clamp(40px,6vh,64px);overflow:hidden}
.pm-body{display:grid;grid-template-columns:190px 1fr 240px;min-height:360px}
.pm-side{border-right:1px solid var(--line);padding:12px 10px}
.pm-side .who{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;padding:4px 6px 12px}
.pm-side .who em{font-style:normal;width:24px;height:24px;border-radius:7px;background:var(--selected);display:inline-grid;place-items:center;font-size:10.5px}
.pm-side ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.pm-side li{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 9px;border-radius:8px;font-size:13px;color:var(--text-2)}
.pm-side li.sel{background:var(--selected);color:var(--ink);font-weight:600}
.pm-side li em{font-style:normal;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--dark);color:var(--on-dark);font-size:11px;font-weight:600;display:inline-grid;place-items:center}
.pm-main{padding:14px 16px;min-width:0;display:flex;flex-direction:column;gap:10px}
.pm-banner{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;line-height:19px}
.pm-banner .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--green)}
.pm-h{display:flex;justify-content:space-between;align-items:baseline}
.pm-h b{font-size:17px;font-weight:600}
.pm-h span{font-size:12.5px;color:var(--text-2)}
.pm-side .who .blogo{flex:none;width:28px;height:28px;display:inline-flex}.pm-side .who .blogo svg{width:100%;height:100%}
/* window mock-ups: traffic-light dots (Felipe 2026-09-26: a little more colour on small things) */
.pbar i:nth-child(1){background:#FF5F57}.pbar i:nth-child(2){background:#FEBC2E}.pbar i:nth-child(3){background:#28C840}
.pm-seb{border-left:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:10px}
.pm-st{font-size:13.5px;font-weight:600;color:var(--ink)}
.pm-bub{background:var(--selected);border-radius:12px;padding:9px 11px;font-size:12.5px;line-height:18.5px;color:var(--ink)}
.pm-ask{margin-top:auto;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);padding:10px;font-size:12.5px;color:var(--text-3)}
.stn{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:10px;border-radius:7px;background:var(--selected);font-size:12px;font-weight:600;color:var(--ink);vertical-align:1px}
.covers{margin-top:clamp(40px,6vh,64px)}
.covers h3{font-size:21px;line-height:31.5px;font-weight:600;letter-spacing:-.42px}
.fstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.fchip{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s ease}
.fchip:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.fchip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.fchip b{font-size:15px;font-weight:600}
.fchip span{font-size:12.5px;color:var(--text-2)}
.hplans .plan .who{min-height:48px}
@media (max-width:1000px){.pm-body{grid-template-columns:1fr}.pm-side,.pm-seb{display:none}.fstrip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.fstrip{grid-template-columns:1fr}}
.chk-hero h1{max-width:14ch}
.card-s{border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.chk{margin-top:32px;max-width:560px;padding:24px}
.chk form{display:flex;flex-direction:column;gap:14px}
.fg{display:flex;flex-direction:column;gap:6px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg label{font-size:13.5px;font-weight:600;color:var(--ink)}
.fg input{font:inherit;font-size:16px;height:44px;padding:0 14px;border:0;border-radius:10px;background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge,#D4D4D4)}
.fg input::placeholder{color:var(--text-3)}
.fg input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.ferr{min-height:0;font-size:14px;color:var(--red)}
.ferr:empty{display:none}
.chk .btn{align-self:flex-start}
.fnote{font-size:13px;line-height:19.5px;color:var(--text-2)}
.fnote a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.scan-t{font-size:17px;color:var(--ink)}
.pbarx{margin-top:14px;height:6px;border-radius:999px;background:var(--selected);overflow:hidden}
.pbarx i{display:block;height:100%;width:0;background:var(--ink);border-radius:999px;transition:width .2s linear}
.scan-steps{margin-top:16px;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text-2)}
.scan-steps li::before{content:"3";margin-right:8px;color:var(--ink)}
#chk-result{padding-top:clamp(40px,6vh,64px)}
.sample{display:inline-flex;margin-bottom:16px;padding:6px 12px;border-radius:999px;background:var(--selected);font-size:13.5px;font-weight:500;color:var(--ink)}
.linkbtn{font:inherit;font-size:15px;font-weight:500;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.linkbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:600px){.fg2{grid-template-columns:1fr}}
/* legal + error pages */
.legal{max-width:720px;padding-top:clamp(48px,8vh,88px)}
.legal .upd{margin-top:16px;font-size:13.5px;line-height:20.25px;color:var(--text-3)}
.legal .intro{margin-top:28px;font-size:20px;line-height:28px;letter-spacing:-.28px;color:var(--ink)}
.legal h2{margin-top:44px;font-size:21px;line-height:31.5px;font-weight:600;letter-spacing:-.3px}
.legal p,.legal li{font-size:17px;line-height:27.6px;color:var(--text-2)}
.legal p+p{margin-top:12px}
.legal h2+p,.legal h2+ul{margin-top:8px}
.legal ul{margin:12px 0 0;padding-left:20px}
.legal li+li{margin-top:6px}
.legal li b{color:var(--ink);font-weight:600}
.legal ul+p{margin-top:12px}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.err{padding:clamp(72px,14vh,160px) 0 clamp(24px,6vh,64px)}
.err .code{font-size:13.5px;line-height:20.25px;font-weight:500;color:var(--text-3);margin-bottom:16px}
.err .lede{margin-top:20px}
.err .hcta{margin-top:32px}
/* 2026-11-02 accessibility: no sideways scroll at 320px (400% zoom); the menu still has Book a free call */
@media(max-width:360px){.nright .btn.sm{display:none}}
/* ===== Version 3 (2026-10-21) — product images as the real app UI, shown quietly (heymark.ai as style reference) =====
Flat white panels, 1px line, 12px radius, no shadow. Type 11.5–13px inside the mocks, grey secondary.
Colour only in the network marks, the status dots, two tag tints and one green chart line. */
:root{--g-t:#E5F1EA;--g-i:#17603D;--a-t:#F6EDDD;--a-i:#76500F;--b-t:#E7F0FD;--b-i:#1B4F9C;--n-t:#F0F0F0}
html[data-theme="dark"]{--g-t:#132A1C;--g-i:#5FCB7C;--a-t:#2B2213;--a-i:#EDB345;--b-t:#11213A;--b-i:#8DB6F2;--n-t:#262626}
.ic{width:16px;height:16px;flex:none;display:block}.ic.sm{width:14px;height:14px}.ic.xs{width:12px;height:12px}
.nl{display:inline-flex;flex:none;color:var(--ink)}.nl svg{width:100%;height:100%;display:block}
.sd{flex:none;width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--ink)}
.sd.p{background:var(--green)}.sd.w{background:var(--amber)}.sd.r{background:var(--red)}.sd.s{background:var(--ink)}
.av3,.seb3{flex:none;width:22px;height:22px;border-radius:6px;display:inline-grid;place-items:center;font-size:9.5px;font-weight:600;letter-spacing:.2px}
.av3{background:var(--selected);color:var(--text-2);box-shadow:inset 0 0 0 1px var(--line)}
.seb3{border-radius:50%;background:var(--dark);color:var(--on-dark);font-size:10.5px}
/* panels */
.p3{background:var(--surface);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;font-variant-numeric:tabular-nums;color:var(--ink);font-size:13px;line-height:18px;min-width:0}
.ph3{display:flex;flex-direction:column;gap:2px;padding:18px 18px 14px}
.ph3 b{font-size:16px;line-height:22px;font-weight:600;letter-spacing:-.2px}
.ph3 small{font-size:12px;color:var(--text-2)}.ph3 small strong{color:var(--ink);font-weight:600}
.ph3.row{flex-direction:row;align-items:center;justify-content:space-between}
.in3{margin:0 18px 14px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);padding:14px 16px}
.in3.list{padding:0}
.ih{display:flex;flex-direction:column;gap:1px;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.ih b{font-size:13.5px;font-weight:600}.ih small{font-size:12px;color:var(--text-2)}
.lh{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.lh.pad{padding:0 18px;margin-bottom:10px;font-weight:500;color:var(--text-2)}
.seg3{display:inline-flex;padding:2px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;font-weight:500;color:var(--text-2)}
.seg3 span{padding:3px 10px;border-radius:6px}.seg3 .on{background:var(--selected);color:var(--ink)}
.tg3{flex:none;width:30px;height:18px;border-radius:999px;background:var(--line);position:relative;display:inline-block}
.tg3 i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tg3.on{background:var(--green)}.tg3.on i{left:14px}
html[data-theme="dark"] .tg3:not(.on){background:#3A3838}
.tg4{font-style:normal;display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:11.5px;font-weight:600}
.tg4.a{background:var(--a-t);color:var(--a-i)}.tg4.b{background:var(--b-t);color:var(--b-i)}.tg4.n{background:var(--n-t);color:var(--text-2);font-weight:500}
.ap3{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:7px;background:var(--dark);color:var(--on-dark);font-size:12.5px;font-weight:600}
/* network mark tile */
.nm{position:relative;display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;background:var(--hover);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.nm>.nl{position:absolute;inset:27%}
.nm>.ic{width:18px;height:18px}
/* ---------------- hero: the app window ---------------- */
.hx3{position:relative;left:50%;transform:translateX(-50%);width:min(1216px,calc(100vw - 32px));margin-top:clamp(40px,6vh,64px)}
.app{display:grid;grid-template-columns:250px minmax(0,1fr);font-size:13px}
.side3{border-right:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:12px}
.acct{display:flex;align-items:center;gap:8px;padding:4px 4px 6px}
.acct b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.acct .ic{color:var(--text-2)}.acct .bell{margin-left:auto}
.side3 ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.side3 li{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px;color:var(--text-2);font-size:13px;white-space:nowrap}
.side3 li.sel{background:var(--selected);color:var(--ink);font-weight:600}
.side3 li em{margin-left:auto;font-style:normal;min-width:20px;height:18px;padding:0 6px;border-radius:6px;background:var(--dark);color:var(--on-dark);font-size:11px;font-weight:600;display:inline-grid;place-items:center}
.conn{margin-top:auto;display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:12.5px;color:var(--text-2)}
.main{position:relative;padding:18px 20px 20px;min-width:0}
.mt{display:flex;align-items:center;margin-bottom:14px}
.mt b{font-size:19px;line-height:26px;font-weight:600;letter-spacing:-.3px}
.tools{margin-left:auto;display:flex;gap:6px}
.tools span{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line);color:var(--text-2)}
.tools span.on{background:var(--selected);color:var(--ink)}
.calp{border-radius:12px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.calh{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.calh b{font-size:14.5px;font-weight:600}.calh small{font-size:12px;color:var(--text-2)}
.calh .seg3{margin-left:auto}
.btn3{height:28px;padding:0 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;font-weight:500;display:inline-flex;align-items:center}
.nav3{display:flex;gap:4px}.nav3 span{width:26px;height:26px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;color:var(--text-2)}
.wd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--line)}
.wd span{padding:7px 10px;font-size:11px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.3px}
.cg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cd{min-height:104px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cd:nth-child(7n){border-right:0}.cd:nth-last-child(-n+7){border-bottom:0}
.cn{align-self:flex-end;font-size:12px;line-height:20px;min-width:20px;height:20px;padding:0 3px;text-align:center;border-radius:999px;color:var(--ink)}
.cd.out .cn{color:var(--text-3)}
.cd.today .cn{background:var(--dark);color:var(--on-dark);font-weight:600}
.cp{display:flex;align-items:center;gap:6px;height:24px;padding:0 7px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);min-width:0}
.cp .nl{width:12px;height:12px}
.ct{flex:1;min-width:0;font-size:11.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp.w{box-shadow:inset 0 0 0 1px var(--amber)}
.more3{font-size:11px;color:var(--text-2);padding-left:4px}
.fab{position:absolute;right:20px;bottom:-1px;display:none}
/* ---------------- rows: text and one mock, alternating ---------------- */
.rows3{display:flex;flex-direction:column;gap:clamp(64px,10vw,120px)}
.r3{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,6vw,72px);align-items:center}
.r3.l{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.r3.l .ftext{order:2}.r3 .ftext{order:0}
.r3 .ftext h3{max-width:17ch}
.sec .r3+.r3{margin-top:0}
/* step 1 */
.sc{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.sc b{font-size:30px;line-height:34px;font-weight:510;letter-spacing:-.8px}.sc span{font-size:13px;color:var(--text-2)}
.sc small{flex-basis:100%;font-size:12px;color:var(--text-2)}
.br{display:grid;grid-template-columns:118px minmax(0,1fr) 62px;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.br>span{color:var(--text-2)}
.br i{height:4px;border-radius:999px;background:var(--selected);overflow:hidden;display:block}
.br s{display:block;height:100%;border-radius:999px;background:var(--ink);text-decoration:none}
.br b{text-align:right;font-weight:600}.br b small{font-weight:500;color:var(--text-2)}
.fx3{display:grid;grid-template-columns:7px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 0;font-size:12.5px}
.fx3 small{font-size:11.5px;color:var(--text-2)}
/* step 2 */
.ar{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line)}
.ih+.ar{border-top:0}
.an{display:flex;align-items:baseline;gap:8px;min-width:0;flex-wrap:wrap}
.an b{font-size:13px;font-weight:600}.an small{font-size:12px;color:var(--text-2)}
.ok3{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--g-i);white-space:nowrap}
.ck3{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 0;font-size:12.5px}
.ck3 small{font-size:11.5px;color:var(--text-2)}
.cb3{width:18px;height:18px;border-radius:5px;background:var(--dark);color:var(--on-dark);display:grid;place-items:center}.cb3 .ic{width:12px;height:12px;stroke-width:2.4}
.dn3{margin-left:auto;font-weight:500;color:var(--text-2);font-size:12px}
.auto3{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600}
/* step 3: post detail */
.tb3{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
.ti{width:26px;height:26px;display:grid;place-items:center;color:var(--text-2)}
.saved{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--text-2);padding-right:4px}
.bt3{height:26px;padding:0 10px;border-radius:7px;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bt3.d{background:var(--dark);color:var(--on-dark);box-shadow:none;padding-right:6px}.bt3.d i{display:flex;padding-left:6px;border-left:1px solid rgba(255,255,255,.25)}
html[data-theme="dark"] .bt3.d i{border-left-color:rgba(0,0,0,.25)}
.pd{padding:16px 18px 18px}
.pd .pt3{font-size:17px;line-height:24px;font-weight:600;letter-spacing:-.2px;margin-bottom:12px}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.meta span{display:flex;flex-direction:column;gap:4px;min-width:0}
.meta small{font-size:11.5px;color:var(--text-2)}
.meta b{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;font-weight:600}
.meta .seb3{width:18px;height:18px;font-size:9px}
.tgl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:14px}
.tgl span{display:flex;flex-direction:column}.tgl b{font-size:12.5px;font-weight:500}.tgl small{font-size:11.5px;color:var(--text-2)}.tgl>.ic{color:var(--text-2)}
.act{font-size:13px;font-weight:600;padding-top:12px;border-top:1px solid var(--line);margin-bottom:10px}
.sys{font-size:12px;color:var(--text-2);padding:4px 0 4px 32px;display:flex;align-items:center;gap:6px}
.sys.ev{color:var(--g-i)}
.cm{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:8px 0;font-size:12.5px;line-height:18px}
.cm b{font-weight:600}.cm small{font-size:11.5px;color:var(--text-2);margin-left:6px}
.ver{display:flex;align-items:center;gap:10px;padding:6px 0 10px 32px;font-size:12px;color:var(--text-2)}
.ver b{color:var(--ink);font-weight:600}.dl3{margin-left:6px}
.vth{width:44px;height:33px;border-radius:5px;flex:none}
.ad{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:center;margin-top:4px}
.inp{height:32px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);padding:0 12px;display:flex;align-items:center;font-size:12px;color:var(--text-2)}
/* step 4: analytics */
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 18px 10px}
.nums .in3{margin:0}
.n{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.n b{font-size:22px;line-height:26px;font-weight:600;letter-spacing:-.4px}.n small{flex-basis:100%;font-size:12px;color:var(--text-2)}
.up{font-style:normal;font-size:11.5px;font-weight:600;color:var(--g-i)}
.chart{padding-bottom:12px}
.lc{display:block;width:100%;height:120px;overflow:visible}
.lc line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.lc polyline{fill:none;stroke:var(--green);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.lc .g0{stop-color:var(--green);stop-opacity:.16}.lc .g1{stop-color:var(--green);stop-opacity:0}
.ax3{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--text-2)}
/* why: chat + switches */
.stack3{display:flex;flex-direction:column;gap:16px}
.chh{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px}
.chh b{font-weight:600}.chh .r{margin-left:auto;color:var(--text-2)}
.chb{padding:16px 18px 14px;display:flex;flex-direction:column;gap:10px}
.ub{align-self:flex-end;max-width:80%;background:var(--dark);color:var(--on-dark);border-radius:12px;padding:9px 12px;font-size:12.5px}
.sb{display:flex;align-items:center;gap:8px}
.bb{background:var(--selected);border-radius:12px;padding:8px 12px;font-size:12.5px}
.prop{margin-left:30px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);padding:12px 14px}
.pp{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-bottom:8px}
.k{font-size:10.5px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-2);margin-top:6px}
.v{font-size:12.5px;line-height:18px;margin-top:2px}.v b{font-weight:600}
.pf{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.evl{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--g-i)}
.foot{margin-left:30px;font-size:11.5px;color:var(--text-2)}
.swr3{display:grid;grid-template-columns:74px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--line)}
.swr3:first-child{border-top:0}
.swn3{display:flex}.swn3 .nl{width:15px;height:15px;margin-right:2px}
.swl3{font-size:12.5px}
.swv3{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--g-i);white-space:nowrap}.swv3.ask{color:var(--a-i)}
/* covers */
.cov3{margin-top:clamp(64px,10vw,120px)}
.cvl3{display:grid;grid-template-columns:1fr 1fr}
.cvr{display:grid;grid-template-columns:34px minmax(0,1fr) auto 14px;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);color:var(--ink);transition:background .15s ease}
.cvr:nth-child(-n+2){border-top:0}
.cvr:nth-child(odd){border-right:1px solid var(--line)}
.cvr:hover{background:var(--hover)}
.cvr:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cvr>.ic{color:var(--text-2)}
/* check */
.frm{display:flex;gap:8px;margin:0 18px 14px}
.url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px}
.url .ic{color:var(--text-2)}
.frm .ap3{height:34px}
.covers{display:none}
@media (max-width:1000px){
.app{grid-template-columns:1fr}.side3{display:none}
}
@media (max-width:860px){
.r3,.r3.l{grid-template-columns:1fr;gap:24px}
.r3.l .ftext,.r3 .ftext{order:0}
}
@media (max-width:640px){
.hx3{margin-top:36px}
.main{padding:14px 12px 12px}
.mt b{font-size:17px}
.tools span{width:28px;height:28px}
.calh{flex-wrap:wrap;padding:10px 12px;gap:6px}
.calh .seg3{margin-left:0}
.wd span{padding:6px 0;text-align:center;font-size:10px;letter-spacing:0}
.cd{min-height:58px;padding:4px 2px;gap:3px;align-items:center}
.cn{align-self:center;font-size:11.5px;height:20px;line-height:20px}
.cp{height:auto;padding:0;box-shadow:none;background:none;gap:3px;justify-content:center}
.cp .ct{display:none}
.cp .nl{width:13px;height:13px}
.cp .sd{width:6px;height:6px}
.cp.w{box-shadow:none}
.more3{font-size:10px;padding:0}
.ph3{padding:16px 14px 12px}
.in3{margin:0 14px 12px;padding:12px}
.in3.list{padding:0}
.br{grid-template-columns:92px minmax(0,1fr) 54px;gap:8px}
.fx3 small{display:none}
.ar{padding:10px 12px;gap:10px}
.an small{flex-basis:100%}
.meta{grid-template-columns:1fr 1fr}
.pd{padding:14px}
.tb3 .ti:nth-child(n+2){display:none}
.nums{grid-template-columns:1fr 1fr;margin:0 14px 10px}
.nums .in3:first-child{grid-column:1/-1}
.chb{padding:14px}
.prop,.foot{margin-left:0}
.swr3{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px}.swn3{display:none}
.cvl3{grid-template-columns:1fr}
.cvr:nth-child(2){border-top:1px solid var(--line)}.cvr:nth-child(odd){border-right:0}
.cvr{padding:11px 12px}
.frm{margin:0 14px 12px}
}
.tg4::before,.tg4::after{content:none!important;display:none!important}
/* feature-page hero panel (qlist) */
.ql3{max-width:520px;width:100%}
.qr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-top:1px solid var(--line);font-size:13px}
.qr:first-child{border-top:0}
.qr>span{color:var(--text-2)}
.qr b{display:inline-flex;align-items:center;gap:7px;font-weight:600;text-align:right}
.qr b.ok{color:var(--g-i)}.qr b.warn{color:var(--a-i)}.qr b.bad{color:#9C211A}
html[data-theme="dark"] .qr b.bad{color:#F2837A}
/* ===== visuals for the text-only sections (audit 2026-10-21): vignettes on top of the text cards ===== */
.fcard.vzc{padding:0;overflow:hidden;display:flex;flex-direction:column}
.fcard.vzc>b{margin:18px 22px 6px}.fcard.vzc>p{margin:0 22px 22px}
.vz{position:relative;display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:168px;padding:18px 20px;border-bottom:1px solid var(--line);font-size:12.5px;line-height:17px;color:var(--ink);font-variant-numeric:tabular-nums;overflow:hidden}
.vz .nl{width:14px;height:14px}
.vz .ic.xs{width:12px;height:12px}
.vz-r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line)}
.vz-r span{color:var(--text-2);min-width:0}
.vz-r b{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap}
.vz-r b.p{color:var(--g-i)}.vz-r b.w{color:var(--a-i)}.vz-r b.r{color:#9C211A}
html[data-theme="dark"] .vz-r b.r{color:#F2837A}
.vz-sm{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-2)}.vz-sm b{color:var(--ink)}
.vz-sm .seb3{width:18px;height:18px;font-size:9px}
.vz-k{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-2)}
.vz-k .nm{width:26px;height:26px;border-radius:7px}.vz-k .nm .ic{width:14px;height:14px}
.vz-row{display:flex;align-items:baseline;gap:10px}
.vz-big{font-size:30px;line-height:32px;font-weight:600;letter-spacing:-.8px}
.vz-big em{font-style:normal;font-size:12px;font-weight:600;color:var(--g-i);margin-left:6px;letter-spacing:0}
.vz-big small{font-size:13px;font-weight:500;color:var(--text-2);letter-spacing:0}
.vz-spark{width:100%;height:40px;display:block;overflow:visible}
.vz-spark polyline{fill:none;stroke:var(--green);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vz-av{display:flex;gap:8px}
.vz-av span{display:flex;flex-direction:column;align-items:center;gap:3px}
.vz-av b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--selected);color:var(--text-2)}
.vz-av span:nth-child(2) b{background:var(--dark);color:var(--on-dark);font-size:10px}
.vz-av i{font-style:normal;font-size:11px;color:var(--text-2)}
.vz-cap{padding:9px 11px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line);font-size:12.5px;line-height:18px}
.vz-ph{display:block;background-color:var(--selected);background-position:center;background-size:cover;border-radius:8px;flex:none}
.vz-post{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.vz-ph.sq{width:72px;height:72px}
.vz-post span{display:flex;flex-direction:column;gap:3px;min-width:0}
.vz-post b{display:flex;align-items:center;gap:6px;font-weight:600}
.vz-post small{font-size:11.5px;color:var(--text-2)}
.vz-post em{font-style:normal;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600}
.vz-rev{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.vz-st{display:inline-flex;gap:1px}.vz-st svg{width:11px;height:11px;fill:#8A5A12}
html[data-theme="dark"] .vz-st svg{fill:#EDB345}
.vz-b{align-self:flex-start;max-width:88%;background:var(--selected);border-radius:12px 12px 12px 4px;padding:8px 11px;font-size:12.5px;line-height:17px}
.vz-b.me{align-self:flex-end;background:var(--dark);color:var(--on-dark);border-radius:12px 12px 4px 12px}
.vz-ok{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--g-i)}
.vz-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line);font-weight:500}
.vz-chip .seb3{width:20px;height:20px}
.vz-chip em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;background:var(--b-t);color:var(--b-i);white-space:nowrap}
.vz-chip em.g{background:var(--g-t);color:var(--g-i)}.vz-chip em.a{background:var(--a-t);color:var(--a-i)}
.vz-steps{display:flex;gap:6px}
.vz-steps span{flex:1;display:flex;align-items:center;gap:6px;justify-content:center;padding:7px 4px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);font-size:11.5px;font-weight:600;white-space:nowrap}
.vz-brw{border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.vz-bar{display:flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-bottom:1px solid var(--line);font-size:10.5px;color:var(--text-2)}
.vz-bar i{width:6px;height:6px;border-radius:50%;background:var(--line)}.vz-bar b{font-weight:500;margin-left:6px}
.vz-ph.shot{height:78px;border-radius:0}
.vz-nav{display:flex;flex-direction:column;padding:7px 10px}.vz-nav b{font-size:12px}.vz-nav small{font-size:11px;color:var(--text-2)}
.vz-gbp{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}
.vz-gbp .nl{width:20px;height:20px;margin-top:2px}
.vz-gbp span{display:flex;flex-direction:column}.vz-gbp b{font-size:13px}.vz-gbp small{font-size:11.5px;color:var(--text-2)}
.vz-btns{display:flex;gap:6px}.vz-btns span{flex:1;text-align:center;padding:5px 0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:11.5px;font-weight:600;color:var(--b-i)}
.vz-ad,.vz-mail{border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.vz-adh{display:flex;align-items:center;gap:8px;padding:8px 10px}.vz-adh .nl{width:20px;height:20px}
.vz-adh span{display:flex;flex-direction:column}.vz-adh b{font-size:12px}.vz-adh small{font-size:11px;color:var(--text-2)}
.vz-ad .vz-cap{box-shadow:none;padding:0 10px 8px}
.vz-ph.wide{height:84px;border-radius:0}
.vz-cta{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:11px;color:var(--text-2)}
.vz-cta b{padding:4px 10px;border-radius:6px;background:var(--selected);color:var(--ink);font-size:11.5px}
.vz-mi{display:flex;align-items:center;gap:10px;padding:6px 10px;border-top:1px solid var(--line)}
.vz-mi .vz-ph{width:44px;height:30px;border-radius:5px}
.vz-clips{display:flex;align-items:center;gap:6px}
.vz-clips .vz-ph{width:54px;height:74px}
.vz-arrow{color:var(--text-2)}
.vz-reel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:62px;height:86px;border-radius:9px;background:var(--dark);color:var(--on-dark);font-size:11.5px}
.vz-reel .ic{width:20px;height:20px}
.vz-ba{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vz-ba figure{margin:0;display:flex;flex-direction:column;gap:5px}
.vz-ba .vz-ph{height:88px}
.vz-ph.raw{filter:saturate(.55) brightness(.82) contrast(.9)}
.vz-ph.done{filter:saturate(1.1) contrast(1.06)}
.vz-ba figcaption{font-size:11px;color:var(--text-2)}
.vz-meter{height:6px;border-radius:999px;background:var(--selected);overflow:hidden}
.vz-meter s{display:block;height:100%;background:var(--green);border-radius:999px;text-decoration:none}
.vz-vin{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:5px 10px;border-radius:999px;background:var(--dark);color:var(--on-dark);font-size:11.5px;font-weight:600}
.vz-f{display:flex;align-items:center;gap:8px;font-size:12px}
/* features index: a small app strip at the top of each card */
.fidx .vz-idx{min-height:0;margin:-22px -22px 8px;padding:16px 18px}
/* "On each plan" table: plan tile + one checked line per sentence */
.vz-pt{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;border-radius:7px;background:var(--dark);color:var(--on-dark);font-size:11.5px;font-weight:600;vertical-align:1px}
.vz-ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.vz-ul li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;align-items:start}
.vz-ul .ic{width:15px;height:15px;margin-top:6px;color:var(--g-i);stroke-width:2.2}
/* plan cards and the "in every plan" list: a check instead of a dash (same words) */
.plan li::before,.everyplan li::before{content:"";top:5px;width:13px;height:13px;border-radius:50%;background:var(--g-t);
-webkit-mask:none;box-shadow:inset 0 0 0 1px transparent}
.plan li::after,.everyplan li::after{content:"";position:absolute;left:3.5px;top:8.5px;width:6px;height:3.5px;border-left:1.6px solid var(--g-i);border-bottom:1.6px solid var(--g-i);transform:rotate(-45deg)}
/* compare table: included = green check in a tint, not included = a quiet dash */
.cmp .ck{justify-content:flex-start}
.cmp .ck svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--g-t);stroke:var(--g-i);stroke-width:2.4}
@media (max-width:640px){
.vz{min-height:0;padding:16px}
.fcard.vzc>b{margin:16px 18px 6px}.fcard.vzc>p{margin:0 18px 18px}
.vz-ph.shot{height:96px}
.vz-ba .vz-ph{height:110px}
}
/* the card's own b/p styles must not reach inside the vignette */
.fcard .vz p,.fidx .vz p{font-size:inherit;line-height:inherit;color:inherit;margin:0}
.fcard .vz b,.fidx .vz b{display:inline-flex;font-size:inherit;letter-spacing:0;margin:0;line-height:inherit}
.fcard .vz .vz-r b,.fidx .vz .vz-r b{font-weight:600}
.fcard .vz .vz-sm,.fidx .vz .vz-sm{font-size:11.5px;color:var(--text-2)}
.fcard .vz .vz-k,.fidx .vz .vz-k{font-size:11px;color:var(--text-2)}
.fcard .vz .vz-b{font-size:12.5px;line-height:17px}
.fcard .vz .vz-b.me{color:var(--on-dark)}
.fcard .vz .vz-ok{color:var(--g-i);font-size:11.5px}
.fcard .vz .vz-cap{font-size:12.5px;line-height:18px}
.fcard .vz .vz-big{font-size:30px;line-height:32px;font-weight:600}
.fcard .vz .vz-vin{font-size:11.5px;color:var(--on-dark)}
.vz-ph.shot{background-position:center 72%}
.vz-no{display:block;width:10px;height:1.6px;margin:11px 3px 0;background:var(--text-3)}
/* ===== fixes 2026-10-21 (errors audit) ===== */
/* F-07: photos are real ![]()
s now */
img.vth{object-fit:cover;background:var(--selected)}
/* content audit 2026-10-21: the browser-frame photo was class "hero", which site.css also uses for the page hero
(.hero has padding-top clamp(56px,9vh,104px)). On a box-sizing:border-box ![]()
that padding ate the whole 78-96px
height, so only the grey background showed. Renamed to "shot", and no photo may ever take padding again. */
img.vz-ph,img.vth{padding:0!important}
img.vz-ph{object-fit:cover;width:100%;height:auto}
img.vz-ph.sq{width:72px;height:72px}
img.vz-ph.shot{height:78px;object-position:center 72%}
img.vz-ph.wide{height:84px}
.vz-mi img.vz-ph{width:44px;height:30px}
.vz-clips img.vz-ph{width:54px;height:74px}
.vz-ba img.vz-ph{height:88px}
/* F-18: sample label */
.smp{font-style:normal;display:inline-flex;align-items:center;height:18px;padding:0 6px;margin-left:8px;border-radius:5px;background:var(--selected);color:var(--text-2);font-size:10.5px;font-weight:600;letter-spacing:.2px;vertical-align:2px;white-space:nowrap}
.tb3 .smp{margin-left:auto}.tb3 .smp+.saved{margin-left:8px}
.calh .smp{margin-left:4px}
.vz::before{content:"Sample";position:absolute;top:8px;right:10px;font-size:10px;font-weight:600;color:var(--text-2);letter-spacing:.2px}
.vz-idx::before{top:10px}
/* F-19: skip link */
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--dark);color:var(--on-dark);font-weight:600;font-size:15px}
.skip:focus{top:12px}
/* F-15: dealer path under the hero buttons */
.hdeal{margin-top:10px;font-size:15px;color:var(--text-2)}
.hdeal a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1.5px;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:44px}
.hdeal a:hover{text-decoration-color:var(--ink)}
/* F-16: the price line reads in ink */
.hero .hnote{color:var(--ink)}
/* F-20: tap targets >= 44px, same look */
.tglr{width:44px;height:44px}
.burger{width:44px;height:44px}
.btn{position:relative}
.btn::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;min-height:100%;transform:translateY(-50%)}
.more,.plink a,.linkbtn{min-height:44px;align-items:center}
@media (max-width:760px){.fcol a{min-height:44px}}
/* F-22: feature index cards: the title is a heading */
.fidx h2{font-size:21px;line-height:27px;font-weight:600;letter-spacing:-.42px}
/* motion typing row: its ".mo-typing>span" bubble rule must not repaint the Sebastian avatar */
.mo-typing>span.seb3{background:var(--dark);padding:0;height:22px;border-radius:50%}
.vz{padding-top:28px}.vz::before{top:9px} /* the Sample tag never sits on a framed mock (2026-10-21) */
@media (max-width:640px){.vz{padding-top:28px}}
/* ===== Inbox language (2026-10-22, Felipe picked option 2): rows that show the actual work, totals in one quiet
footer line. Built by inbox.py; motion in motion/motion.css. Colour only as signals: tag tints, status, logos. ===== */
:root{--r-t:#FBE9E7;--r-i:#9C211A}
html[data-theme="dark"]{--r-t:#2E1513;--r-i:#F2837A}
.tg4.g{background:var(--g-t);color:var(--g-i)}.tg4.r{background:var(--r-t);color:var(--r-i)}
.ibx{--rh:60px;--aw:34px;position:relative;font-variant-numeric:tabular-nums}
.ibx-tabs{display:flex;gap:4px;padding:0 18px 10px;font-size:12px;line-height:16px;font-weight:500;color:var(--text-2)}
.ibx-tabs span{display:inline-flex;align-items:center;padding:4px 10px;border-radius:7px;white-space:nowrap}
.ibx-tabs .on{background:var(--selected);color:var(--ink)}
.ibx-tabs em{font-style:normal;display:inline-grid;place-items:center;min-width:16px;height:16px;margin-left:5px;padding:0 4px;border-radius:5px;background:var(--a-t);color:var(--a-i);font-size:10.5px;font-weight:600}
.ibx-url{display:flex;align-items:center;gap:8px;height:32px;margin:0 18px 12px;padding:0 6px 0 10px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);font-size:12px;color:var(--text-2)}
.ibx-url b{font-weight:500;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibx-url .tg4{margin-left:auto}
.ibx-dots{display:flex;gap:4px;margin-right:4px}.ibx-dots i{width:7px;height:7px;border-radius:50%;background:var(--selected)}
.ibx-l{position:relative;border-top:1px solid var(--line)}
.ibx-r{display:grid;grid-template-columns:var(--aw) minmax(0,1fr) auto;align-items:center;gap:12px;height:var(--rh);padding:0 18px;border-bottom:1px solid var(--line);background:var(--surface)}
.ibx-av{position:relative;display:grid;place-items:center;justify-self:center;flex:none;width:32px;height:32px;color:var(--ink)}
.ibx-av.ini{border-radius:50%;background:var(--selected);color:var(--text-2);font-size:11px;font-weight:600;letter-spacing:.2px}
.ibx-nb{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1.5px var(--surface);color:var(--ink)}
.ibx-nb .nl{width:13px;height:13px}.ibx-nb .ic{width:11px;height:11px}
.ibx-av.tile{border-radius:9px;background:var(--hover);box-shadow:inset 0 0 0 1px var(--line)}
.ibx-av.tile .nl{width:16px;height:16px}.ibx-av .ic.sm{width:16px;height:16px}
.ibx-av.two{gap:0;grid-auto-flow:column}.ibx-av.two .nl{width:13px;height:13px}.ibx-av.two .nl+.nl{margin-left:-3px}
.ibx-av.none{background:transparent;box-shadow:none;border:1.5px dashed var(--edge);color:var(--text-2)}
.ibx-av.ph{width:44px;height:32px}
.ibx-av.ph img{display:block;width:100%;height:100%;padding:0;border-radius:6px;object-fit:cover;background:var(--selected)}
.ibx-av.reel{width:26px;height:38px}
.ibx-pm{position:absolute;inset:auto 0 3px;display:grid;place-items:center;color:#FFFFFF}
.ibx-pm .ic{width:12px;height:12px;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.ibx-av.stack{width:40px;height:30px;margin:2px 0 0 -2px}
.ibx-st{position:absolute;inset:0;z-index:-1;border-radius:6px;background:var(--selected);box-shadow:inset 0 0 0 1px var(--line);transform:translate(4px,-4px)}
.ibx-av.stack img{position:relative}
.ibx-t{display:flex;flex-direction:column;min-width:0}
.ibx-t b{display:flex;align-items:center;gap:6px;min-width:0;font-size:13px;line-height:18px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibx-ai{font-style:normal;flex:none;font-size:10px;line-height:14px;font-weight:600;color:var(--text-2);padding:0 4px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line)}
.ibx-t small{font-size:12px;line-height:17px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibx-m{display:flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:0}
.ibx-m .tg4{white-space:nowrap}
.ibx-m small{display:inline-flex;align-items:center;gap:4px;font-size:11px;line-height:14px;color:var(--text-2);white-space:nowrap}
.ibx-m small .ic{width:12px;height:12px}
.ibx-nets{gap:3px!important}.ibx-nets .nl{width:13px;height:13px}
.ibx-f{padding:12px 18px 14px;font-size:11.5px;line-height:18px;color:var(--text-2)}
.ibx-f b{color:var(--ink);font-weight:600}
.ibx-f span:not(:last-child)::after{content:"\00B7";margin:0 2px 0 6px;color:var(--text-2)}
/* pages whose avatars are photos get a wider first column */
.ibx-studio,.ibx-car-dealership-studio{--aw:44px}
/* phones: each hero shows its four newest rows (the rest stay in the markup) */
@media (max-width:640px){
.ibx{--rh:58px}
.ibx-h .ibx-x{display:none}
.ibx-tabs,.ibx-url{margin-left:14px;margin-right:14px}.ibx-tabs{padding:0 14px 10px;margin:0}
.ibx-r{gap:10px;padding:0 14px}
.ibx-f{padding:12px 14px 14px}
}
/* compact: inside the "What it does" cards, the features index and the checker's cards */
.ibx-c{--rh:46px;--aw:28px}
.ibx-c .ibx-l{border-top:0}
.ibx-c .ibx-r{padding:0;gap:10px;background:transparent}
.ibx-c .ibx-r:last-child{border-bottom:0}
.ibx-c .ibx-av{width:28px;height:28px}.ibx-c .ibx-av.tile{border-radius:8px}
.ibx-c .ibx-av .ic.sm{width:14px;height:14px}.ibx-c .ibx-av.tile .nl{width:14px;height:14px}
.ibx-c .ibx-av.ph{width:28px;height:28px}.ibx-c .ibx-av.reel{width:22px;height:32px}
.ibx-c .ibx-av.stack{width:26px;height:22px}
.ibx-c .ibx-nb{width:13px;height:13px}.ibx-c .ibx-nb .nl{width:11px;height:11px}
.ibx-c .ibx-t b{font-size:12.5px;line-height:17px}
.ibx-c .ibx-t small{font-size:11.5px;line-height:15px}
.ibx-c .ibx-f{padding:10px 0 0;border-top:1px solid var(--line);font-size:11px;line-height:16px}
.vz .ibx-c{margin:-4px 0}
.fcard .vz .ibx-t b,.fidx .vz .ibx-t b{display:flex;font-size:12.5px;line-height:17px;letter-spacing:0;margin:0;font-weight:600}
.fcard .vz .ibx-f,.fidx .vz .ibx-f{font-size:11px;line-height:16px;color:var(--text-2)}
.fcard .vz .ibx-f b,.fidx .vz .ibx-f b{display:inline;font-size:inherit;font-weight:600;color:var(--ink)}
.fidx .vz .tg4{font-size:11px}
.fidx .vz-idx .ibx-c{margin:4px 0 0}
.fcard .vz .vz-k{margin-bottom:2px}
/* plans: the four facts, two columns, no footer (facts, not events) */
.everyplan .ibx-facts{margin-top:20px;padding-top:6px;border-top:1px solid var(--line)}
.ibx-facts .ibx-l{display:grid;grid-template-columns:1fr 1fr;column-gap:32px;border-top:0}
.ibx-facts .ibx-r{height:auto;min-height:62px;padding:12px 0;align-items:center;background:transparent}
.ibx-facts .ibx-r:nth-last-child(-n+2){border-bottom:0}
.ibx-facts .ibx-lb{font-size:12.5px;line-height:18px;color:var(--text-2)}
.ibx-facts .ibx-t b{display:block;white-space:normal;font-size:15px;line-height:21px;letter-spacing:-.2px}
@media (max-width:760px){.ibx-facts .ibx-l{grid-template-columns:1fr}.ibx-facts .ibx-r:nth-last-child(2){border-bottom:1px solid var(--line)}}
/* fixes after the first look (2026-10-22) */
.ibx-f span{white-space:nowrap}
.ibx-av.stack{isolation:isolate}
.ibx-i .ibx-m small{display:none}
.ibx-c .ibx-t b,.fcard .vz .ibx-t b,.fidx .vz .ibx-t b{display:block}
.ibx-c .ibx-ai{display:inline-block;margin-left:6px;vertical-align:1px}
/* ===== free AEO check, result panel: Option 4 "score and priorities" (Felipe, 2026-10-22) =====
The score sits on the 0-100 scale beside the "most sites" band; three numbered fixes lead to the offer;
the four areas are a compact strip, each opening to every finding. Class prefix a4-. Motion is opt-in
(.a4-mo, added by the page script only without reduced motion); without it every element is final. */
.a4{--a4-empty:#E4E4E4}
html[data-theme="dark"] .a4,html[data-theme="dark"] .a4w{--a4-empty:#2A2727}
.a4w{--a4-empty:#E4E4E4}
.a4 [hidden]{display:none!important}
.a4-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.a4-top .sample,.a4-top .eyebrow{margin:0}
.a4-hl{margin-top:24px;max-width:24ch}
.a4-t2{color:var(--text-2)}
.a4-scale{position:relative;margin-top:44px;padding-top:132px}
.a4-run{position:absolute;left:0;top:0;height:132px;width:0;transform:translateX(var(--x,0))}
.a4-pin{position:absolute;bottom:22px;left:0;transform:translateX(var(--a,-50%));display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.a4-pin b{font-size:128px;line-height:.82;font-weight:510;letter-spacing:-6px;font-variant-numeric:tabular-nums;color:var(--ink)}
.a4-pin span{font-size:15px;color:var(--text-2)}
.a4-stem{position:absolute;left:-1px;bottom:-14px;width:2px;height:28px;background:var(--ink);border-radius:2px}
.a4-tr{position:relative;height:14px;border-radius:999px;background:var(--a4-empty);overflow:hidden}
.a4-f{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--s,0))}
.a4-ax{position:relative;height:44px;margin-top:8px;font-size:13.5px;line-height:20px;color:var(--text-2)}
.a4-ax:before{content:"";position:absolute;left:45%;width:25%;top:0;height:8px;border:1.5px solid var(--text-3);border-top:0}
.a4-ax span{position:absolute;top:10px}
.a4-ax .a4-0{left:0}.a4-ax .a4-100{right:0}
.a4-ax .a4-45{left:45%;transform:translateX(-50%)}.a4-ax .a4-70{left:70%;transform:translateX(-50%)}
.a4-ax .a4-bl{left:57.5%;transform:translateX(-50%);color:var(--ink);font-weight:500;white-space:nowrap}
.a4-ctx{margin-top:8px;font-size:15px;line-height:22.5px}
.a4-ctx strong{color:var(--ink);font-weight:600}
.a4-ph{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-top:72px;padding-top:32px;border-top:1px solid var(--line)}
.a4-ph p{color:var(--ink);font-size:17px;line-height:25px;max-width:46ch}
.a4-prio{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;padding:0}
.a4-pc{border-radius:16px;padding:28px 28px 24px;display:flex;flex-direction:column;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--sh-sm)}
.a4-pch{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.a4-pn{font-size:60px;line-height:.85;font-weight:510;letter-spacing:-2.4px;color:var(--ink)}
.a4-pa{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:20px;color:var(--text-2);padding-top:4px}
.a4-pa svg{width:16px;height:16px}
.a4-tag{margin-top:28px;font-size:12.5px;line-height:18px;font-weight:600}
.a4-tag.good,.a4-mk.good{color:var(--green)}.a4-tag.warn,.a4-mk.warn{color:var(--amber)}.a4-tag.bad,.a4-mk.bad{color:var(--red)}
.a4-pt{font-size:21px;line-height:28px;font-weight:600;letter-spacing:-.3px;color:var(--ink);margin-top:4px}
.a4-pd{font-size:15px;line-height:22.5px;margin-top:6px}
.a4-po{margin-top:auto;padding-top:28px}
.a4-po p{font-size:13.5px;line-height:20px;margin-bottom:8px}
.a4-po p b{color:var(--ink);font-weight:600}
/* one tick per point; filled ticks are an overlay so they can fade in */
.a4-tk{display:flex;gap:2px;width:100%}
.a4-tk i{flex:1;height:6px;border-radius:1.5px;background:var(--a4-empty);position:relative}
.a4-tk i.on:after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ink)}
.a4-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.a4-sa{padding:22px 24px 20px}
.a4-sa+.a4-sa{border-left:1px solid var(--line)}
.a4-sa:first-child{padding-left:0}.a4-sa:last-child{padding-right:0}
.a4-sah{display:flex;justify-content:space-between;align-items:center;gap:8px}
.a4-sah b{font-size:15px;font-weight:600;color:var(--ink)}
.a4-st{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;line-height:20px;font-weight:500;white-space:nowrap}
.a4-st:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.a4-st.g{color:var(--green)}.a4-st.a{color:var(--amber)}.a4-st.r{color:var(--red)}.a4-st.n{color:var(--text-3)}
.a4-sas{display:flex;align-items:baseline;gap:4px;margin:10px 0 12px}
.a4-sas b{font-size:28px;line-height:30px;font-weight:510;letter-spacing:-.8px;color:var(--ink);font-variant-numeric:tabular-nums}
.a4-sas small{font-size:13.5px;color:var(--text-3)}
.a4-more{margin-top:12px}
.a4-more summary{cursor:pointer;font-size:13.5px;color:var(--text-2);min-height:44px;display:flex;align-items:center;gap:6px;list-style:none}
.a4-more summary::-webkit-details-marker{display:none}
.a4-more summary:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.a4-more[open] summary:after{transform:rotate(-135deg)}
.a4-more summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
.a4-more ul{list-style:none;padding:0}
.a4-more li{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:8px 0;font-size:13.5px;line-height:20px;border-top:1px solid var(--line)}
.a4-more li b{display:block;color:var(--ink);font-weight:600}
.a4-more li span{color:var(--text-2)}
.a4-mk{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--edge,#D4D4D4)}
.a4-mk svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.a4-cta{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:40px;padding:32px 36px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--edge,#D4D4D4)}
.a4-cta p{margin-top:6px;font-size:15px;line-height:22.5px}
.a4-cta .hcta{margin:0;flex:none}
.a4-again{margin-top:16px}
/* motion (opt-in) */
.a4-mo .a4-pin{opacity:0;translate:0 14px}
.a4-mo .a4-stem{opacity:0}
.a4-mo .a4-f{transform:scaleX(0)}
.a4-mo .a4-ax{opacity:0}
.a4-mo.a4-play .a4-pin{opacity:1;translate:0 0;transition:opacity .5s ease .15s,translate .7s cubic-bezier(.2,.7,.2,1) .15s}
.a4-mo.a4-play .a4-stem{opacity:1;transition:opacity .3s ease 1.2s}
.a4-mo.a4-play .a4-f{transform:scaleX(var(--s));transition:transform 1.4s cubic-bezier(.2,.7,.2,1) .1s}
.a4-mo.a4-play .a4-ax{opacity:1;transition:opacity .6s ease 1.1s}
.a4-mo [data-a4]{opacity:0;transform:translateY(14px)}
.a4-mo [data-a4].in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.a4-mo .a4-tk i.on:after{opacity:0}
.a4-mo .in .a4-tk i.on:after{opacity:1;transition:opacity .25s linear;transition-delay:calc(var(--i) * 28ms + 200ms)}
/* What we check: 100 = 25 + 25 + 25 + 25 */
.a4w-eq{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:24px}
.a4w-h{font-size:96px;line-height:.9;font-weight:510;letter-spacing:-4.5px;color:var(--ink)}
.a4w-s{font-size:44px;color:var(--text-3)}
.a4w-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.a4w-seg{height:84px;border-radius:12px;box-shadow:inset 0 0 0 1.5px var(--ink);display:flex;justify-content:space-between;align-items:flex-end;padding:14px 16px;position:relative;color:var(--ink)}
.a4w-seg b{font-size:15px;font-weight:600;align-self:flex-start}
.a4w-seg i{font-style:normal;font-size:28px;line-height:28px;font-weight:510;letter-spacing:-.8px}
.a4w-seg+.a4w-seg:before{content:"+";position:absolute;left:-24px;top:50%;width:24px;text-align:center;transform:translateY(-50%);font-size:21px;color:var(--text-3)}
.a4w-g{grid-column:3;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:4px}
.a4w-c{padding:0 4px}
.a4w-c .a4w-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--edge,#D4D4D4);color:var(--ink)}
.a4w-c .a4w-ic svg{width:16px;height:16px}
.a4w-c h3{font-size:17px;line-height:25px;font-weight:500;letter-spacing:-.2px;margin:16px 0 10px}
.a4w-c ul{list-style:none;padding:0}
.a4w-c li{font-size:15px;line-height:22.5px;color:var(--text-2);padding:4px 0;border-top:1px solid var(--line)}
@media (max-width:1000px){
.a4-strip{grid-template-columns:1fr 1fr}
.a4-sa{padding:18px 16px 16px}
.a4-sa:nth-child(3){border-left:0;padding-left:0}
.a4-sa:nth-child(2){padding-right:0}
.a4-sa:nth-child(n+3){border-top:1px solid var(--line)}
.a4-sah{flex-direction:column;align-items:flex-start;gap:2px}
.a4w-eq{grid-template-columns:auto 1fr;gap:12px 16px}
.a4w-s{justify-self:start}
.a4w-bar{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:12px 24px}
.a4w-seg:nth-child(3):before{display:none}
.a4w-g{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:28px 24px;margin-top:16px}
.a4w-c{padding:0}
}
@media (max-width:760px){
.a4w-g{grid-template-columns:1fr}
.a4-hl{font-size:32px;line-height:34px}
.a4-scale{margin-top:32px;padding-top:100px}
.a4-run{height:100px}
.a4-pin b{font-size:88px;letter-spacing:-4px}
.a4-ax .a4-45,.a4-ax .a4-70{display:none}
.a4-ax .a4-bl{font-size:12.5px}
.a4-ph{grid-template-columns:1fr;gap:8px;margin-top:48px}
.a4-prio{grid-template-columns:1fr}
.a4-pc{padding:22px 20px}
.a4-pn{font-size:44px}
.a4-cta{flex-direction:column;align-items:stretch;padding:24px 20px}
.a4-cta .hcta{display:flex;flex-direction:column;gap:8px}
.a4w-h{font-size:64px;letter-spacing:-2.8px}
.a4w-s{font-size:32px}
.a4w-seg{height:72px;flex-direction:column;align-items:stretch;justify-content:space-between;padding:12px 14px}
.a4w-seg i{align-self:flex-end;font-size:24px;line-height:24px}
}
/* ===== end new structure ===== */
/* ===== CREATIIV motion layer (2026-10-21) =====
Animates the v3 product mock-ups (home_v3.py class names) without touching their markup.
Contract:
- No JS, or reduced motion: nothing in this file hides anything. Every from-state is scoped to
.mo-arm (added by motion.js only to scenes that are still below the fold) or to :root[data-theme]
(set by the head theme script before first paint, so the hero plays from the very first frame and
never flashes). Every animation ends on the markup's own final state (fill-mode both).
- transform and opacity only, except one clip-path wipe on the 300x100 analytics line.
- Nothing here changes layout, so CLS is unaffected. */
:root{--mo-out:cubic-bezier(.16,1,.3,1);--mo-io:cubic-bezier(.65,0,.35,1);--mo-spring:cubic-bezier(.34,1.56,.64,1);--mo-off:#E4E4E4}
html[data-theme="dark"]{--mo-off:#3A3838}
@keyframes mo-up{from{opacity:0;transform:translateY(8px)}}
@keyframes mo-up12{from{opacity:0;transform:translateY(12px)}}
@keyframes mo-chip{from{opacity:0;transform:translateY(5px) scale(.96)}}
@keyframes mo-left{from{opacity:0;transform:translateX(-6px)}}
@keyframes mo-bub{from{opacity:0;transform:translateY(8px) scale(.94)}}
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-gone{from{opacity:1}to{opacity:0}}
@keyframes mo-pop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:none}}
@keyframes mo-bar{from{transform:scaleX(0)}}
@keyframes mo-knob{from{transform:translateX(-12px)}}
@keyframes mo-press{0%{transform:none}35%{transform:scale(.93)}to{transform:none}}
@keyframes mo-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mo-ring{0%{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(1.14,1.6)}}
@keyframes mo-land{0%{opacity:0;transform:scale(1.7)}to{opacity:1;transform:none}}
@keyframes mo-typing{0%{opacity:0;transform:translateY(4px)}12%{opacity:1;transform:none}82%{opacity:1}to{opacity:0}}
@keyframes mo-dot{0%,60%,to{transform:none;opacity:.45}30%{transform:translateY(-3px);opacity:1}}
@media (prefers-reduced-motion:no-preference){
/* ---------- HERO calendar (homepage): runs once from first paint, CSS only ----------
Chips arrive day by day, Oct 10/12/13 flip from scheduled to posted, today's circle lands,
the "needs your OK" chips ring once. ~3.2 s in all. The h1/lede are never animated (LCP). */
:root[data-theme] .hx3 .cg>.cd .cp,
:root[data-theme] .hx3 .cg>.cd .more3{animation:mo-chip .45s var(--mo-out) both;animation-delay:calc(var(--mo-i,0) * 26ms + 260ms)}
:root[data-theme] .hx3 .cg>.cd .cp+.cp,
:root[data-theme] .hx3 .cg>.cd .more3{animation-delay:calc(var(--mo-i,0) * 26ms + 330ms)}
.hx3 .cg>:nth-child(1){--mo-i:1}.hx3 .cg>:nth-child(2){--mo-i:2}.hx3 .cg>:nth-child(3){--mo-i:3}.hx3 .cg>:nth-child(4){--mo-i:4}
.hx3 .cg>:nth-child(5){--mo-i:5}.hx3 .cg>:nth-child(6){--mo-i:6}.hx3 .cg>:nth-child(7){--mo-i:7}.hx3 .cg>:nth-child(8){--mo-i:8}
.hx3 .cg>:nth-child(9){--mo-i:9}.hx3 .cg>:nth-child(10){--mo-i:10}.hx3 .cg>:nth-child(11){--mo-i:11}.hx3 .cg>:nth-child(12){--mo-i:12}
.hx3 .cg>:nth-child(13){--mo-i:13}.hx3 .cg>:nth-child(14){--mo-i:14}.hx3 .cg>:nth-child(15){--mo-i:15}.hx3 .cg>:nth-child(16){--mo-i:16}
.hx3 .cg>:nth-child(17){--mo-i:17}.hx3 .cg>:nth-child(18){--mo-i:18}.hx3 .cg>:nth-child(19){--mo-i:19}.hx3 .cg>:nth-child(20){--mo-i:20}
.hx3 .cg>:nth-child(21){--mo-i:21}.hx3 .cg>:nth-child(22){--mo-i:22}.hx3 .cg>:nth-child(23){--mo-i:23}.hx3 .cg>:nth-child(24){--mo-i:24}
.hx3 .cg>:nth-child(25){--mo-i:25}.hx3 .cg>:nth-child(26){--mo-i:26}.hx3 .cg>:nth-child(27){--mo-i:27}.hx3 .cg>:nth-child(28){--mo-i:28}
.hx3 .cg>:nth-child(29){--mo-i:29}.hx3 .cg>:nth-child(30){--mo-i:30}.hx3 .cg>:nth-child(31){--mo-i:31}.hx3 .cg>:nth-child(32){--mo-i:32}
.hx3 .cg>:nth-child(33){--mo-i:33}.hx3 .cg>:nth-child(34){--mo-i:34}.hx3 .cg>:nth-child(35){--mo-i:35}
/* scheduled -> posted: an ink cap over the green dot fades away (cells 12, 14, 15 = Oct 10, 12, 13) */
:root[data-theme] .hx3 .cd.past .sd.p{position:relative}
:root[data-theme] .hx3 .cg>:is(:nth-child(12),:nth-child(14),:nth-child(15)) .sd.p::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ink);animation:mo-gone .3s ease both}
:root[data-theme] .hx3 .cg>:nth-child(12) .sd.p::after{animation-delay:1.75s}
:root[data-theme] .hx3 .cg>:nth-child(14) .sd.p::after{animation-delay:1.95s}
:root[data-theme] .hx3 .cg>:nth-child(15) .sd.p::after{animation-delay:2.15s}
/* today */
:root[data-theme] .hx3 .cd.today .cn{animation:mo-land .55s var(--mo-out) 1.9s both}
/* needs your OK: one ring */
:root[data-theme] .hx3 .cp.w{position:relative}
:root[data-theme] .hx3 .cp.w::after{content:"";position:absolute;inset:-1px;border-radius:8px;box-shadow:0 0 0 1.5px var(--amber);pointer-events:none;animation:mo-ring 1.1s var(--mo-out) 2.45s both}
@media (max-width:640px){:root[data-theme] .hx3 .cp.w::after{border-radius:50%;inset:-3px}}
/* ---------- Feature-page hero panel (.ql3): rows settle in, dots pop ---------- */
:root[data-theme] .ql3 .qr{animation:mo-up .5s var(--mo-out) both;animation-delay:calc(var(--mo-q,0) * 60ms + 200ms)}
:root[data-theme] .ql3 .qr .sd{animation:mo-pop .4s var(--mo-out) both;animation-delay:calc(var(--mo-q,0) * 60ms + 520ms)}
.ql3 .qr:nth-child(2){--mo-q:1}.ql3 .qr:nth-child(3){--mo-q:2}.ql3 .qr:nth-child(4){--mo-q:3}.ql3 .qr:nth-child(5){--mo-q:4}.ql3 .qr:nth-child(6){--mo-q:5}
/* ---------- Scroll scenes: armed by motion.js only when below the fold ----------
.mo-arm = holding the from-state; .mo-play = playing. Delays come from --md (set per element by JS). */
.mo-arm:not(.mo-play) .mo-t{opacity:0}
.mo-play .mo-t{animation:mo-up .5s var(--mo-out) var(--md,0ms) both}
.mo-play .mo-t.mo-l{animation-name:mo-left}
.mo-play .mo-t.mo-b{animation-name:mo-bub;animation-duration:.42s}
.mo-play .mo-t.mo-u{animation-name:mo-up12;animation-duration:.6s}
.mo-play .mo-t.mo-p{animation-name:mo-pop;animation-duration:.42s}
.mo-play .mo-t.mo-f{animation-name:mo-fade;animation-duration:.4s}
.mo-play .ub.mo-t{transform-origin:100% 100%}
.mo-play .sb .bb.mo-t{transform-origin:0 50%}
/* score bars fill from the left */
.mo-arm .br s{transform-origin:0 50%}
.mo-arm:not(.mo-play) .br s{opacity:1;transform:scaleX(0)}
.mo-play .br s{animation:mo-bar .8s var(--mo-out) var(--md,0ms) both}
.mo-arm .vz-meter s{transform-origin:0 50%}
.mo-arm:not(.mo-play) .vz-meter s{transform:scaleX(0)}
.mo-play .vz-meter s{animation:mo-bar .9s var(--mo-out) var(--md,0ms) both}
/* switches turn on: knob slides, an off-track cap fades */
.mo-arm .tg3.on.mo-k::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mo-off)}
.mo-arm:not(.mo-play) .tg3.on.mo-k i{transform:translateX(-12px)}
.mo-play .tg3.on.mo-k::before{animation:mo-gone .28s ease var(--md,0ms) both}
.mo-play .tg3.on.mo-k i{animation:mo-knob .34s var(--mo-io) var(--md,0ms) both}
/* checklist boxes tick: an empty-box cap fades, the check pops */
.mo-arm .cb3.mo-k{position:relative}
.mo-arm .cb3.mo-k::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line)}
.mo-arm .cb3.mo-k .ic{position:relative;z-index:1}
.mo-arm:not(.mo-play) .cb3.mo-k .ic{opacity:0}
.mo-play .cb3.mo-k::before{animation:mo-gone .2s ease var(--md,0ms) both}
.mo-play .cb3.mo-k .ic{animation:mo-pop .38s var(--mo-out) var(--md,0ms) both}
/* the analytics line draws in (area and line only; gridlines stay) */
.mo-arm:not(.mo-play) .lc :is(path,polyline),.mo-arm:not(.mo-play) .vz-spark polyline{clip-path:inset(0 100% 0 0)}
.mo-play .lc :is(path,polyline),.mo-play .vz-spark polyline{animation:mo-wipe 1.2s var(--mo-io) var(--md,0ms) both}
/* "Run the check" gets pressed */
.mo-play .ap3.mo-x{animation:mo-press .32s ease var(--md,0ms) both}
/* Sebastian typing: injected, absolutely positioned (no layout), gone after it plays */
.mo-arm .chb{position:relative}
.mo-typing{position:absolute;left:18px;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none}
.mo-typing>span{display:inline-flex;gap:3px;align-items:center;height:30px;padding:0 12px;border-radius:12px;background:var(--selected)}
.mo-typing>span i{width:5px;height:5px;border-radius:50%;background:var(--text-2);animation:mo-dot .9s ease-in-out infinite}
.mo-typing>span i:nth-child(2){animation-delay:.15s}.mo-typing>span i:nth-child(3){animation-delay:.3s}
.mo-play .mo-typing{animation:mo-typing 1.15s ease var(--md,0ms) both}
@media (max-width:640px){.mo-typing{left:14px}}
/* ---------- Inbox panels (2026-10-22, inbox.py): the newest row lands at the top and pushes the others down,
its tag pops, the footer fades in last. Row j (0 = newest, at the top) waits invisibly in slot 0, arrives when
its turn comes, then moves down one slot (var(--rh)) each time a newer row lands. Each row's keyframes depend
only on j; the panel's row count (--n inline, --nm on phones) sets the delays. transform/opacity only; the rows
keep their place in the layout the whole time, so CLS stays 0. No JS or reduced motion: nothing below applies.
The feature-page hero (.ibx-p) runs from first paint like the homepage calendar; everywhere else the panel is a
scroll scene (motion.js adds .mo-arm / .mo-play), and the checker result plays when it is rendered. ---------- */
@keyframes mo-ib0{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes mo-ib1{0%{opacity:0;transform:translateY(calc(var(--rh) * -1 - 8px))}40.5%{opacity:1;transform:translateY(calc(var(--rh) * -1))}56.8%{transform:translateY(calc(var(--rh) * -1))}to{opacity:1;transform:none}}
@keyframes mo-ib2{0%{opacity:0;transform:translateY(calc(var(--rh) * -2 - 8px))}25.9%{opacity:1;transform:translateY(calc(var(--rh) * -2))}36.2%{transform:translateY(calc(var(--rh) * -2))}63.8%{transform:translateY(calc(var(--rh) * -1))}72.4%{transform:translateY(calc(var(--rh) * -1))}to{opacity:1;transform:none}}
@keyframes mo-ib3{0%{opacity:0;transform:translateY(calc(var(--rh) * -3 - 8px))}19%{opacity:1;transform:translateY(calc(var(--rh) * -3))}26.6%{transform:translateY(calc(var(--rh) * -3))}46.8%{transform:translateY(calc(var(--rh) * -2))}53.2%{transform:translateY(calc(var(--rh) * -2))}73.4%{transform:translateY(calc(var(--rh) * -1))}79.7%{transform:translateY(calc(var(--rh) * -1))}to{opacity:1;transform:none}}
@keyframes mo-ib4{0%{opacity:0;transform:translateY(calc(var(--rh) * -4 - 8px))}15%{opacity:1;transform:translateY(calc(var(--rh) * -4))}21%{transform:translateY(calc(var(--rh) * -4))}37%{transform:translateY(calc(var(--rh) * -3))}42%{transform:translateY(calc(var(--rh) * -3))}58%{transform:translateY(calc(var(--rh) * -2))}63%{transform:translateY(calc(var(--rh) * -2))}79%{transform:translateY(calc(var(--rh) * -1))}84%{transform:translateY(calc(var(--rh) * -1))}to{opacity:1;transform:none}}
@keyframes mo-ib5{0%{opacity:0;transform:translateY(calc(var(--rh) * -5 - 8px))}12.4%{opacity:1;transform:translateY(calc(var(--rh) * -5))}17.4%{transform:translateY(calc(var(--rh) * -5))}30.6%{transform:translateY(calc(var(--rh) * -4))}34.7%{transform:translateY(calc(var(--rh) * -4))}47.9%{transform:translateY(calc(var(--rh) * -3))}52.1%{transform:translateY(calc(var(--rh) * -3))}65.3%{transform:translateY(calc(var(--rh) * -2))}69.4%{transform:translateY(calc(var(--rh) * -2))}82.6%{transform:translateY(calc(var(--rh) * -1))}86.8%{transform:translateY(calc(var(--rh) * -1))}to{opacity:1;transform:none}}
@keyframes mo-ib6{0%{opacity:0;transform:translateY(calc(var(--rh) * -6 - 8px))}10.6%{opacity:1;transform:translateY(calc(var(--rh) * -6))}14.8%{transform:translateY(calc(var(--rh) * -6))}26.1%{transform:translateY(calc(var(--rh) * -5))}29.6%{transform:translateY(calc(var(--rh) * -5))}40.8%{transform:translateY(calc(var(--rh) * -4))}44.4%{transform:translateY(calc(var(--rh) * -4))}55.6%{transform:translateY(calc(var(--rh) * -3))}59.2%{transform:translateY(calc(var(--rh) * -3))}70.4%{transform:translateY(calc(var(--rh) * -2))}73.9%{transform:translateY(calc(var(--rh) * -2))}85.2%{transform:translateY(calc(var(--rh) * -1))}88.7%{transform:translateY(calc(var(--rh) * -1))}to{opacity:1;transform:none}}
:is(.ibx-l>.ibx-r):nth-child(1){--j:0;--an:mo-ib0;--ad:0.30s}
:is(.ibx-l>.ibx-r):nth-child(2){--j:1;--an:mo-ib1;--ad:0.74s}
:is(.ibx-l>.ibx-r):nth-child(3){--j:2;--an:mo-ib2;--ad:1.16s}
:is(.ibx-l>.ibx-r):nth-child(4){--j:3;--an:mo-ib3;--ad:1.58s}
:is(.ibx-l>.ibx-r):nth-child(5){--j:4;--an:mo-ib4;--ad:2.00s}
:is(.ibx-l>.ibx-r):nth-child(6){--j:5;--an:mo-ib5;--ad:2.42s}
:is(.ibx-l>.ibx-r):nth-child(7){--j:6;--an:mo-ib6;--ad:2.84s}
.ibx{--k:var(--n);--t0:.25s}
@media (max-width:640px){.ibx-h{--k:var(--nm)}}
@media (prefers-reduced-motion:no-preference){
:root[data-theme] .ibx-p .ibx-l>.ibx-r,.mo-play .ibx:not(.ibx-facts) .ibx-l>.ibx-r{
position:relative;z-index:calc(10 - var(--j));animation-name:var(--an);animation-duration:var(--ad);
animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both;
animation-delay:calc(var(--t0) + (var(--k) - 1 - var(--j)) * .42s)}
:root[data-theme] .ibx-p .ibx-r .tg4,.mo-play .ibx:not(.ibx-facts) .ibx-r .tg4{
animation:mo-pop .4s var(--mo-out) both;animation-delay:calc(var(--t0) + (var(--k) - 1 - var(--j)) * .42s + .24s)}
:root[data-theme] .ibx-p .ibx-f,.mo-play .ibx .ibx-f{
animation:mo-fade .5s ease both;animation-delay:calc(var(--t0) + var(--k) * .42s + .1s)}
.mo-arm:not(.mo-play) .ibx-r,.mo-arm:not(.mo-play) .ibx-f{opacity:0}
/* plans facts: two columns of facts, not a stream, so they settle in place and the tags pop */
.mo-play .ibx-facts .ibx-r{animation:mo-up .5s var(--mo-out) both;animation-delay:calc(var(--j) * 90ms + 120ms)}
.mo-play .ibx-facts .ibx-r .tg4{animation:mo-pop .4s var(--mo-out) both;animation-delay:calc(var(--j) * 90ms + 420ms)}
}
/* ---------- Micro-interactions: hover / press / focus as one set ----------
Hover is never load-bearing (touch has none). Press is felt in <100 ms. Focus rings are site.css's. */
.btn{transition:background .2s ease,box-shadow .2s ease,transform .12s var(--mo-out)}
.btn:active{transform:scale(.97);transition-duration:.06s}
.plan,.fidx,.fchip,.option{transition:box-shadow .2s ease,transform .3s var(--mo-out)}
.plan:hover,.fidx:hover,.fchip:hover,.option:hover{transform:translateY(-2px)}
.cvr>.ic{transition:transform .2s cubic-bezier(.2,0,.2,1)}
.cvr:hover>.ic,.cvr:focus-visible>.ic{transform:translateX(3px)}
.cvr .nm{transition:transform .2s cubic-bezier(.2,0,.2,1)}
.cvr:hover .nm{transform:scale(1.06)}
.tglr svg{transition:transform .4s var(--mo-out)}
.tglr:active svg{transform:rotate(-30deg) scale(.9)}
}
/* ---------- rendered loops (Blender): the poster is the background, the video fades over it once playing ----------
Media lives in /media/ next to site.css; url() here resolves against the stylesheet. */
.mo-vid{position:relative;margin:0;background:center/cover no-repeat}
.mo-vid video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
.mo-vid.mo-on video{opacity:1}
.mo-car{aspect-ratio:1280/540;width:100%;max-width:1064px;margin:clamp(24px,5vw,56px) auto 0;background-image:url(media/car-light-1280.webp)}
:root[data-theme="dark"] .mo-car{background-image:url(media/car-dark-1280.webp)}
.mo-mark{width:120px;aspect-ratio:1;margin:0 auto 28px;background-image:url(media/mark-light-480.webp)}
:root[data-theme="dark"] .mo-mark{background-image:url(media/mark-dark-480.webp)}
@media (max-width:760px){
.mo-car{background-image:url(media/car-light-720.webp)}:root[data-theme="dark"] .mo-car{background-image:url(media/car-dark-720.webp)}
.mo-mark{width:96px;background-image:url(media/mark-light-240.webp)}:root[data-theme="dark"] .mo-mark{background-image:url(media/mark-dark-240.webp)}
}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .mo-car{background-image:url(media/car-dark-1280.webp)}:root:not([data-theme]) .mo-mark{background-image:url(media/mark-dark-480.webp)}}
@media print{.mo-arm *{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}.mo-typing{display:none}}
/* ===== end motion layer ===== */