/* =====================================================================================================
Zyro marketing stylesheet (overhaul W14, "one marketing stylesheet", docs/overhaul/09-design-scorecard.md
section 5 item 4). One file for every public landing page: Default (signed out), Pricing, FAQ, About,
shopify and products/*. Before this, each page carried its own copy of the `.zl` tokens and components.
Use: ...
. Page style blocks keep only what is unique to
that page (its own illustrations and layouts); everything listed here is shared.
Rules (same as Content/zyro-app.css): one blue #2563EB for actions (#1D4ED8 on hover); green only for money;
red only for errors; Inter for text; Poppins only for display headings (h1, h2, the final call to action);
text greys #475569 / #5B6678 (AA on the canvas); 44px primary buttons and a 24px minimum tap target;
the hero clears the fixed 64px header on every screen size.
Sections: 1 tokens (values copied from zyro-app.css sections 1-2; keep them in sync), 2 marketing aliases,
3 base, 4 type and buttons, 5 hero, 6 stages and screenshots, 7 cards and grids, 8 questions, 9 dark bands
and the final call to action, 10 site chrome on marketing pages, 11 small screens.
===================================================================================================== */
/* ===== 1. TOKENS (same values as Content/zyro-app.css) ===== */
:root{
--z-gray-0:#FFFFFF; --z-gray-25:#FAFBFC; --z-gray-50:#F5F7FA; --z-gray-100:#EEF1F5;
--z-gray-200:#E3E8EF; --z-gray-300:#CBD3DE; --z-gray-400:#7C8798; --z-gray-500:#5B6678;
--z-gray-600:#475569; --z-gray-700:#334155; --z-gray-800:#1E293B; --z-gray-900:#0F172A;
--z-blue-50:#EFF6FF; --z-blue-100:#DBEAFE; --z-blue-200:#BFDBFE; --z-blue-300:#93C5FD;
--z-blue-400:#60A5FA; --z-blue-500:#3B82F6; --z-blue-600:#2563EB; --z-blue-700:#1D4ED8;
--z-blue-800:#1E40AF; --z-blue-900:#1E3A8A;
--z-money-50:#EAF6F0; --z-money-100:#CDEBDD; --z-money-500:#13996F; --z-money-700:#0E7A5F; --z-money-800:#0B6149;
--z-amber-50:#FFF7E6; --z-amber-200:#F4D9A6; --z-amber-700:#B45309; --z-amber-800:#92400E;
--z-red-50:#FEF2F2; --z-red-200:#FBCFCB; --z-red-600:#DC2626; --z-red-700:#B42318;
--z-navy-900:#0B1B3B;
--z-bg-canvas:var(--z-gray-50); --z-bg-surface:var(--z-gray-0); --z-bg-subtle:var(--z-gray-25);
--z-text-1:var(--z-gray-900); --z-text-2:var(--z-gray-600); --z-text-3:var(--z-gray-500);
--z-text-link:var(--z-blue-700);
--z-line-1:var(--z-gray-200); --z-line-2:var(--z-gray-300); --z-line-input:var(--z-gray-400);
--z-action:var(--z-blue-600); --z-action-hover:var(--z-blue-700); --z-action-press:var(--z-blue-800);
--z-focus:var(--z-blue-600); --z-focus-on-dark:var(--z-blue-300);
--z-money:var(--z-money-700);
--z-font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
--z-font-display:"Poppins","Inter",system-ui,sans-serif;
--z-dur-1:120ms; --z-dur-2:180ms; --z-dur-3:240ms; --z-ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion:reduce){ :root{ --z-dur-1:0ms; --z-dur-2:0ms; --z-dur-3:0ms; } }
/* ===== 2. MARKETING ALIASES (the short names the page illustrations already use) ===== */
.zl, .zl-mcta{
--g:var(--z-action); --deep:var(--z-action-hover); --soft:var(--z-blue-50); --softline:var(--z-blue-200);
--ink:var(--z-text-1); --ink2:var(--z-navy-900); --sub:var(--z-text-2); --sub2:var(--z-text-3);
--canvas:var(--z-bg-canvas); --paper:var(--z-bg-surface); --border:var(--z-line-1);
--win:var(--z-money); --money:var(--z-money); --wait:var(--z-amber-700); --warm:var(--z-amber-700); --bad:var(--z-red-600);
--f:var(--z-font-ui); --fd:var(--z-font-display);
--r:18px; --r-lg:26px; --pill:100px;
--shadow:0 24px 60px rgba(15,23,42,.16), 0 4px 14px rgba(15,23,42,.05);
--shadow-soft:0 14px 36px rgba(15,23,42,.10);
--card-shadow:0 10px 22px rgba(15,23,42,.04);
--grad-a:radial-gradient(ellipse 120% 90% at 15% -5%, rgba(255,255,255,.28), transparent 52%), linear-gradient(135deg, #1E40AF 0%, #2563EB 48%, #60A5FA 100%);
--grad-b:radial-gradient(ellipse 110% 90% at 82% -5%, rgba(255,255,255,.18), transparent 55%), linear-gradient(135deg, #0B1B3B 0%, #1E3A8A 50%, #2563EB 100%);
--grad-dark:linear-gradient(165deg, #0F172A 0%, #0B1B3B 100%);
--nav-clear:var(--nav-h, 64px);
--hero-top:calc(var(--nav-clear) + 40px);
}
/* ===== 3. BASE ===== */
.zl, .zl *{ box-sizing:border-box; margin:0; padding:0; }
.zl{ font-family:var(--f); color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; overflow-x:clip; line-height:1.5; }
.zl img{ max-width:100%; height:auto; }
.zl p a{ overflow-wrap:anywhere; }
.zl :focus-visible{ outline:2px solid var(--z-focus); outline-offset:2px; }
.zl .vh{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.zl .wrap{ max-width:1140px; margin:0 auto; padding:0 28px; }
.zl .sect{ padding:88px 0; }
.zl .sect.paper{ background:var(--paper); }
.zl .center{ text-align:center; }
/* scroll reveal (the master reveals everything after load and without JavaScript, W5.17) */
.zr{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.zr.in{ opacity:1; transform:none; }
.zd1{ transition-delay:.07s; } .zd2{ transition-delay:.14s; } .zd3{ transition-delay:.21s; } .zd4{ transition-delay:.28s; }
@keyframes zpulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.8); } }
@keyframes zfade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
.zr{ transition:none; opacity:1; transform:none; }
.zl *, .zl *::before, .zl *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}
/* ===== 4. TYPE AND BUTTONS ===== */
.zl h1, .zl h2, .zl .h2, .zl .fc-h{ font-family:var(--fd); }
.zl h3, .zl h4{ font-family:var(--f); }
.zl .eyebrow{ display:inline-flex; align-items:center; gap:11px; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--g); margin-bottom:16px; }
.zl .eyebrow::before, .zl .eyebrow::after{ content:''; width:24px; height:1px; background:currentColor; opacity:.45; }
.zl .h2{ font-weight:800; font-size:clamp(28px, 4vw, 46px); letter-spacing:-1.2px; line-height:1.1; color:var(--ink); margin:0 auto 16px; max-width:820px; overflow-wrap:break-word; }
.zl .h2 em, .zl h1.hh1 em{ font-style:italic; color:var(--g); }
.zl .lede{ font-size:17px; font-weight:400; line-height:1.65; color:var(--sub); max-width:680px; margin:0 auto 36px; }
.zl .lede strong, .zl .lede b{ color:var(--ink); font-weight:600; }
.zl .lede a, .zl .more a{ color:var(--z-text-link); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.zl .btn-go, .zl-mcta .btn-go{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; font-family:var(--f); font-size:16px; font-weight:700; line-height:1.2; letter-spacing:0; text-decoration:none; text-align:center; padding:14px 28px; border:0; border-radius:var(--pill); background:var(--g); color:#fff; cursor:pointer; box-shadow:0 14px 30px -12px rgba(37,99,235,.55); filter:none; transition:background var(--z-dur-2), transform var(--z-dur-1), box-shadow var(--z-dur-2); }
.zl .btn-go:hover, .zl-mcta .btn-go:hover{ background:var(--deep); color:#fff; text-decoration:none; transform:translateY(-1px); filter:none; box-shadow:0 18px 36px -12px rgba(37,99,235,.6); }
.zl .btn-go:focus-visible, .zl-mcta .btn-go:focus-visible{ outline:2px solid var(--z-focus); outline-offset:3px; }
.zl .btn-quiet{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; font-family:var(--f); font-size:15px; font-weight:600; line-height:1.2; text-decoration:none; text-align:center; padding:13px 24px; border:1px solid var(--border); border-radius:var(--pill); color:var(--ink); background:var(--paper); box-shadow:var(--shadow-soft); cursor:pointer; transition:color var(--z-dur-1), border-color var(--z-dur-1), transform var(--z-dur-1); }
.zl .btn-quiet:hover{ color:var(--g); border-color:var(--softline); text-decoration:none; transform:translateY(-1px); }
.zl .risk{ font-size:13px; font-weight:500; line-height:1.7; letter-spacing:.01em; color:var(--sub); }
.zl .risk b{ color:var(--ink); font-weight:600; }
.zl .risk a{ color:var(--z-text-link); font-weight:600; text-decoration:none; }
.zl .risk a:hover{ text-decoration:underline; }
.zl .more{ margin-top:28px; font-size:14px; color:var(--sub); text-align:center; line-height:2; }
/* small text links still get a 24px+ tap target */
.zl .more a, .zl .risk a, .zl .links a, .zl .fc-in a:not(.btn-go):not(.btn-quiet){ display:inline-block; padding:4px 0; }
.zl .tool-link, .zl .tlink, .zl .rlink, .zl .rel-card a, .zl .feature-card-v2 a, .zl .fcard a, .zl .tool-card a, .zl .rel-grid a, .zl .tcard a, .zl a.link{ display:inline-flex; align-items:center; gap:6px; min-height:28px; }
/* Official Shopify App Store badge: unaltered, at least 30px tall, clear space half its height
(shopify.dev brand assets). If the file is missing, the onerror swap shows a text button instead. */
.zl .sbadge{ display:inline-flex; align-items:center; min-height:48px; margin:12px; text-decoration:none; }
.zl .sbadge img{ height:52px; width:auto; display:block; }
.zl .sbadge .sbt{ display:none; }
.zl .sbadge.nobadge{ margin:0; }
.zl .sbadge.nobadge img{ display:none; }
.zl .sbadge.nobadge .sbt{ display:inline-flex; }
/* ===== 5. HERO ===== */
.zl .hero{ position:relative; padding:var(--hero-top) 0 0; background:
radial-gradient(ellipse 60% 50% at 16% 6%, rgba(37,99,235,.12) 0%, transparent 55%),
radial-gradient(ellipse 50% 45% at 88% 20%, rgba(37,99,235,.06) 0%, transparent 55%),
linear-gradient(180deg, var(--canvas) 0%, var(--canvas) 70%, var(--paper) 100%); }
.zl .hero.slim{ padding-bottom:44px; }
.zl .hero-inner{ position:relative; z-index:1; text-align:center; max-width:900px; margin:0 auto; padding:0 28px; }
.zl .hero-tag{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--deep); margin-bottom:22px; padding:7px 16px; background:var(--soft); border-radius:var(--pill); }
.zl .hero-tag i{ width:6px; height:6px; border-radius:50%; background:var(--g); animation:none; }
.zl h1.hh1{ font-weight:800; font-size:clamp(36px, 5.4vw, 64px); letter-spacing:-2px; line-height:1.05; color:var(--ink); max-width:none; overflow-wrap:break-word; }
.zl .hero.slim h1.hh1{ font-size:clamp(32px, 4.4vw, 52px); letter-spacing:-1.6px; max-width:820px; margin:0 auto; }
.zl .hsub{ font-size:18px; line-height:1.6; color:var(--sub); margin:22px auto 28px; max-width:660px; }
.zl .hsub strong, .zl .hsub b{ color:var(--ink); font-weight:600; }
.zl .hcta{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.zl .hero-stagewrap{ max-width:1020px; margin:52px auto 0; padding:0 28px; position:relative; z-index:1; }
.zl .hero-shot{ max-width:1060px; margin:48px auto 0; padding:0 28px; position:relative; z-index:1; }
/* ===== 6. STAGES, MOCK PANELS AND SCREENSHOTS ===== */
.zl .stage{ position:relative; border-radius:var(--r-lg); padding:48px 44px; overflow:hidden; background:var(--grad-a); }
.zl .stage.c1, .zl .stage.c3, .zl .stage.c5{ background:var(--grad-a); }
.zl .stage.c2, .zl .stage.c4, .zl .stage.c6{ background:var(--grad-b); }
.zl .hero-shot .stage{ padding:40px 40px 30px; }
.zl .panel{ background:var(--paper); border-radius:16px; box-shadow:var(--shadow); }
.zl .pp{ padding:22px 24px; }
.zl .glass{ background:rgba(255,255,255,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:14px; box-shadow:0 16px 40px rgba(11,27,59,.18); }
.zl .glasschip{ display:inline-flex; align-items:center; gap:9px; padding:12px 18px; font-size:13px; font-weight:600; line-height:1.4; color:var(--ink); }
.zl .glasschip .dot{ width:8px; height:8px; border-radius:50%; background:var(--g); flex-shrink:0; animation:none; }
.zl .glasschip .dot.w{ background:var(--wait); }
.zl .ghost{ position:absolute; width:130px; border-radius:16px; background:rgba(255,255,255,.2); pointer-events:none; }
.zl .klabel{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sub2); margin-bottom:10px; }
.zl .klabel.live{ display:flex; align-items:center; gap:8px; color:var(--g); }
.zl .klabel.live::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--g); animation:none; }
.zl .chipbtn{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#fff; background:var(--g); border-radius:9px; padding:9px 16px; }
.zl .verdict-sentence{ font-size:16px; font-weight:500; line-height:1.55; color:var(--ink); }
.zl .verdict-sentence b{ font-weight:700; }
.zl .verdict-sentence em{ font-style:italic; font-weight:600; color:var(--g); }
.zl .stagecap, .zl .cap{ display:table; margin:18px auto 0; padding:7px 16px; border-radius:var(--pill); background:rgba(11,27,59,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; font-size:13px; font-weight:500; line-height:1.5; letter-spacing:0; text-align:center; }
.zl .stagecap b, .zl .cap b{ font-weight:700; }
/* real product screens; on a phone they show a readable top-left slice instead of the whole shrunken screen */
.zl .shot{ display:block; width:100%; height:auto; border-radius:14px; box-shadow:var(--shadow); background:#F1F1F1; }
.zl .shot-crop{ border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:#F1F1F1; }
.zl .shot-crop .shot{ border-radius:0; box-shadow:none; }
/* ===== 7. CARDS, GRIDS, TABS AND STEPS ===== */
.zl .grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; text-align:left; }
/* two or four cards sit two by two instead of leaving an orphan row (:where keeps the specificity of .zl .grid) */
.zl .grid:where(:has(> :last-child:nth-child(2)), :has(> :last-child:nth-child(4))){ grid-template-columns:repeat(2, 1fr); }
.zl .feat-grid, .zl .fgrid, .zl .rel-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; text-align:left; }
.zl .box, .zl .feature-card-v2, .zl .fcard, .zl .rel-card, .zl .tool-card{ background:var(--paper); border:1px solid var(--border); border-radius:16px; padding:26px; text-align:left; box-shadow:var(--card-shadow); transition:none; }
.zl .sect.paper .box{ background:var(--canvas); }
.zl .feature-card-v2:hover, .zl .fcard:hover, .zl .rel-card:hover, .zl .tool-card:hover{ transform:none; box-shadow:var(--card-shadow); }
.zl .box h3, .zl .feature-card-v2 h3, .zl .fcard h3, .zl .rel-card h3{ font-size:18px; font-weight:700; line-height:1.35; color:var(--ink); margin-bottom:8px; }
.zl .box p, .zl .feature-card-v2 p, .zl .fcard p, .zl .rel-card p{ font-size:15px; line-height:1.6; color:var(--sub); }
.zl .box p a{ color:var(--z-text-link); font-weight:600; text-decoration:none; }
.zl .feature-card-v2 .fic, .zl .rel-card .fic{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; color:var(--g); background:var(--soft); margin-bottom:16px; }
.zl .rel-link{ display:inline-flex; align-items:center; gap:6px; min-height:24px; font-size:14px; font-weight:700; color:var(--z-text-link); text-decoration:none; }
.zl .rel-link:hover{ color:var(--deep); text-decoration:underline; }
.zl .tab-btn{ min-height:44px; padding:11px 22px; font-family:var(--f); font-size:14.5px; font-weight:700; letter-spacing:0; color:var(--sub); background:var(--paper); border:1px solid var(--border); border-radius:var(--pill); cursor:pointer; transition:color var(--z-dur-1), background var(--z-dur-1), border-color var(--z-dur-1); }
.zl .tab-btn:hover{ color:var(--g); border-color:var(--softline); }
.zl .tab-btn.active{ color:#fff; background:var(--g); border-color:var(--g); }
.zl .tab-content{ display:none; animation:zfade .3s ease; }
.zl .tab-content.active{ display:block; }
.zl .steps-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.zl .step-item h3{ font-size:18px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.zl .step-item p{ font-size:15px; color:var(--sub); line-height:1.6; }
.zl .chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.zl .chip{ display:inline-flex; align-items:center; min-height:44px; padding:10px 20px; border-radius:var(--pill); background:var(--paper); border:1px solid var(--border); font-size:15px; font-weight:600; color:var(--ink); }
/* ===== 8. QUESTIONS ===== */
.zl .faq{ max-width:760px; margin:0 auto; padding:0; text-align:left; background:none; border:0; border-top:1px solid var(--border); border-radius:0; box-shadow:none; }
.zl .faq details{ border-bottom:1px solid var(--border); }
.zl .faq-list{ text-align:left; }
.zl .faq-list details{ border-top:1px solid var(--border); }
.zl .faq-list details:last-of-type{ border-bottom:1px solid var(--border); }
.zl .faq summary, .zl .faq-list summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:20px 4px; font-size:17px; font-weight:700; line-height:1.4; letter-spacing:0; color:var(--ink); cursor:pointer; list-style:none; transition:color var(--z-dur-1); }
.zl .faq summary:hover, .zl .faq-list summary:hover{ color:var(--g); }
.zl .faq summary::-webkit-details-marker, .zl .faq-list summary::-webkit-details-marker{ display:none; }
.zl .faq summary::after, .zl .faq-list summary::after{ content:'+'; font-size:22px; font-weight:400; line-height:1; color:var(--g); flex-shrink:0; transition:transform var(--z-dur-2); }
.zl .faq details[open] summary::after, .zl .faq-list details[open] summary::after{ content:'+'; transform:rotate(45deg); }
.zl .faq-icon{ display:none; }
.zl .faq p, .zl .faq-list details p{ font-size:16px; line-height:1.7; color:var(--sub); margin:0; padding:0 4px 22px; max-width:680px; }
.zl .faq p b, .zl .faq-list details p b{ color:var(--ink); font-weight:600; }
.zl .faq p a, .zl .faq-list details p a{ color:var(--z-text-link); font-weight:600; }
/* ===== 9. DARK BANDS AND THE FINAL CALL TO ACTION ===== */
.zl .dark{ position:relative; overflow:hidden; text-align:center; border-radius:var(--r-lg); padding:60px 44px; background:var(--grad-dark); }
.zl .dark::before{ content:''; position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:800px; max-width:140%; height:420px; background:radial-gradient(ellipse, rgba(37,99,235,.32) 0%, transparent 65%); pointer-events:none; }
.zl .dark > *{ position:relative; z-index:1; }
.zl .dark .eyebrow{ color:var(--z-blue-300); }
.zl .dark .h2{ color:#fff; }
.zl .dark .h2 em{ color:var(--z-blue-400); }
.zl .dark .lede{ color:rgba(255,255,255,.85); margin-bottom:22px; }
.zl .dark .btn-quiet, .zl .fc .btn-quiet{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); box-shadow:none; }
.zl .dark .btn-quiet:hover, .zl .fc .btn-quiet:hover{ color:#fff; border-color:rgba(255,255,255,.7); }
.zl .dark .risk{ color:rgba(255,255,255,.82); }
.zl .dark .risk b{ color:#fff; }
.zl .dark .risk a{ color:var(--z-blue-300); }
.zl .fc{ position:relative; overflow:hidden; text-align:center; padding:96px 0; background:var(--grad-dark); }
.zl .fc::before{ content:''; position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); width:1000px; max-width:160%; height:560px; background:radial-gradient(ellipse, rgba(37,99,235,.30) 0%, transparent 65%); pointer-events:none; }
.zl .fc-in{ position:relative; z-index:1; max-width:720px; margin:0 auto; padding:0 28px; }
.zl .fc-h{ font-weight:800; font-size:clamp(32px, 4.8vw, 56px); letter-spacing:-1.8px; line-height:1.06; color:#fff; margin-bottom:18px; }
.zl .fc-h em{ font-style:italic; color:var(--z-blue-400); }
.zl .fc-sub{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.85); margin:0 auto 30px; max-width:560px; }
.zl .fc-sub strong, .zl .fc-sub b{ color:#fff; font-weight:600; }
.zl .fc-note{ display:flex; justify-content:center; gap:10px 24px; flex-wrap:wrap; margin-top:24px; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.78); }
/* sticky mobile call to action (homepage) */
.zl-mcta{ position:fixed; left:0; right:0; bottom:0; z-index:600; display:none; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(245,247,250,.96); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid var(--z-line-1); transform:translateY(110%); transition:transform .25s ease-out; }
.zl-mcta.on{ transform:none; }
.zl-mcta .btn-go{ width:100%; }
/* ===== 10. SITE CHROME ON MARKETING PAGES (Site.Master header and footer) ===== */
.site-header .btn-cta-nav, .site-header .btn-shopify-nav, .site-header .nav-btn-primary{ min-height:44px; }
.site-header .btn-cta-nav, .site-header .nav-btn-primary{ box-shadow:0 8px 18px -8px rgba(37,99,235,.55); }
.footer-socials{ gap:12px; }
.footer-socials a{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:32px; }
.footer-main .trustpilot-widget a{ display:inline-block; min-height:24px; padding:3px 0; }
/* ===== 11. SMALL SCREENS ===== */
@media (max-width:1024px){ .zl-mcta{ display:block; } }
@media (max-width:920px){
.zl .grid, .zl .grid:where(:has(> :last-child:nth-child(2)), :has(> :last-child:nth-child(4))){ grid-template-columns:1fr 1fr; }
.zl .feat-grid, .zl .fgrid, .zl .rel-grid, .zl .steps-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
.zl{ --hero-top:calc(var(--nav-clear) + 28px); }
.zl .sect{ padding:60px 0; }
.zl .wrap, .zl .hero-inner, .zl .hero-shot, .zl .hero-stagewrap{ padding:0 16px; }
.zl .hero.slim{ padding-bottom:28px; }
.zl h1.hh1{ font-size:34px; letter-spacing:-1.2px; line-height:1.08; }
.zl .hero.slim h1.hh1{ font-size:32px; letter-spacing:-1px; }
.zl .hsub{ font-size:16px; margin:18px auto 22px; }
.zl .h2{ font-size:27px; letter-spacing:-.8px; }
.zl .lede{ font-size:16px; margin-bottom:28px; }
.zl .hcta{ flex-direction:column; align-items:stretch; }
.zl .hcta .btn-go, .zl .hcta .btn-quiet, .zl .hcta .sbadge{ justify-content:center; }
.zl .hero-stagewrap{ margin-top:36px; }
.zl .hero-shot{ margin-top:36px; }
.zl .stage{ padding:28px 16px 32px; border-radius:20px; }
.zl .hero-shot .stage{ padding:14px 12px 14px; border-radius:18px; }
.zl .grid, .zl .grid:where(:has(> :last-child:nth-child(2)), :has(> :last-child:nth-child(4))){ grid-template-columns:1fr; }
.zl .box, .zl .feature-card-v2, .zl .fcard, .zl .rel-card{ padding:22px 18px; }
.zl .dark{ padding:40px 20px; }
.zl .fc{ padding:64px 0; }
.zl .fc-in{ padding:0 16px; }
.zl .fc-h{ font-size:34px; letter-spacing:-1.1px; }
.zl .faq summary, .zl .faq-list summary{ font-size:16px; padding:18px 2px; }
.zl .stagecap, .zl .cap{ font-size:12.5px; }
}
@media (max-width:600px){
/* a readable top-left slice of the 1600px product screens (the key card sits there), not the whole screen at 20% */
.zl .shot-crop{ aspect-ratio:4 / 3; }
.zl .shot-crop .shot{ width:250%; max-width:none; margin-left:-8%; }
/* tall email previews: the top of the email, larger */
.zl .shot-crop.tall{ aspect-ratio:3 / 4; }
.zl .shot-crop.tall .shot{ width:150%; margin-left:-4%; }
}