/*
Theme Name: Graphicted
Theme URI: https://graphicted.com/
Author: Graphicted
Author URI: https://graphicted.com/
Template: larisdigital-wp
Description: Custom homepage theme for Graphicted — the redesign (buy-once design assets store). Child theme of LarisDigital WP: only the front page uses the redesign; all other pages inherit the parent theme's templates and design unchanged.
Version: 1.0.8
License: Proprietary
License URI: https://graphicted.com/license/
Text Domain: graphicted
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
*/


/* Inter, self-hosted (variable font, latin subset) — no Google Fonts CDN, so the font loads the same on every device. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("assets/fonts/inter-latin.woff2") format("woff2");
}

:root{
  --bg:#FFFFFF;
  --card:#FFFFFF;
  --ink:#111111;
  --body:#1F2937;
  --muted:#6B7280;
  --line:#E5E5E5;
  --line-strong:#E5E5E5;
  --hover:#F5F5F5;
  --red:#C43333;
  --red-dark:#A92B2B;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --hero-font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1240px;
  /* Section rhythm (desktop): ONE gap token for the whole site.
     --sec-gap is the full whitespace between one section's content
     and the next. Stacked homepage sections each carry half of it
     as top/bottom padding, so neighbours sum to exactly the token
     instead of the old 104px + 104px = 208px+ double gaps. The
     license view reaches the same 96px between sections through
     .licp-sec's margin-top (its sections carry no padding), the
     footer takes the same half token on top, and the license view
     closes with the same half token at the bottom. Exceptions:
     the hero (locked, full-viewport, padding 0), the license
     page top (120px clears the fixed nav pill, like the hero's
     own top band), the stats band inside Why (its own margin and
     row padding are untouched), and phones (<=640px keeps its
     existing 72px section override and 72px .licp-sec margin). */
  --sec-gap:96px;
  --shadow:0 1px 2px rgba(17,17,17,.04),0 12px 32px rgba(17,17,17,.05);
  --shadow-sm:0 1px 2px rgba(17,17,17,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
/* Lenis smooth scroll (added only when Lenis actually runs: the init
   script adds the .lenis classes to <html> itself). Without Lenis —
   CDN blocked, reduced motion, or an old browser — these rules never
   apply and scrolling stays native. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--font);font-size:16px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0;padding:0}
input,select{font:inherit;color:inherit}
::selection{background:var(--red);color:var(--bg)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:700;letter-spacing:0;line-height:1.05;color:var(--ink)}
.mono{font-family:var(--mono);font-size:12px;line-height:1.5;font-weight:500;letter-spacing:.01em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px}
.skip{position:fixed;top:8px;left:16px;z-index:200;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:999px;transform:translateY(-200%);text-decoration:none;font-size:14px;font-weight:600}
.skip:focus{transform:translateY(0)}
section{padding:calc(var(--sec-gap)/2) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;box-shadow:var(--shadow-sm)}
.eyebrow i{width:8px;height:8px;border-radius:999px;background:var(--red);display:block;flex:none}
.lede{font-size:18px;line-height:1.6;color:var(--muted);max-width:600px}
.lede strong{color:var(--ink);font-weight:600}
.sec-head{max-width:720px}
.sec-head h2{font-size:clamp(38px,5vw,58px)}
.sec-head .lede{margin-top:16px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}

/* Floating pill navigation — wide and solid white at the top of
   the page; once the page scrolls (past ~10px, toggled by the
   scroll-spy script as .is-scrolled) the pill shrinks smoothly
   to a compact centred pill — narrower, about 15–20% shorter,
   with the logo, wordmark and buttons scaled down and drawn
   inward with its edges — and turns to frosted glass
   (translucent white + backdrop blur) so the dark text stays
   readable over every section, the dark closing CTA and the
   red review cards included. Scrolling back to the top expands
   it to wide and solid white again; it never hides. The shrink
   runs over .5s with an ease-out curve on width, max-width,
   height, padding, gap and the inner sizes. Reduced motion: no
   transition (the explicit rule below, on top of the global
   reduced-motion rule at the end of this sheet). */
.nav-chip{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:70;width:calc(100% - 32px);max-width:var(--wrap);background:var(--card);border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;box-shadow:var(--shadow-sm);transition:width .5s cubic-bezier(.22,1,.36,1),max-width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),padding .5s cubic-bezier(.22,1,.36,1),gap .5s cubic-bezier(.22,1,.36,1),background-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease}
.nav-chip.is-scrolled{width:70%;max-width:820px;padding:4px 4px 4px 12px;gap:6px;background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;transition:gap .5s cubic-bezier(.22,1,.36,1)}
.brand img{height:28px;width:auto;transition:height .5s cubic-bezier(.22,1,.36,1)}
.brand span{font-size:18px;font-weight:700;letter-spacing:0;transition:font-size .5s cubic-bezier(.22,1,.36,1)}
.nav-chip.is-scrolled .brand{gap:8px}
.nav-chip.is-scrolled .brand img{height:24px}
.nav-chip.is-scrolled .brand span{font-size:16px}
.nav-chip .cart-btn{transition:width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .25s ease}
.nav-chip.is-scrolled .cart-btn{width:38px;height:38px}
.nav-chip .menu-btn{transition:width .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .25s ease}
.nav-chip.is-scrolled .menu-btn{width:38px;height:38px}
@media (prefers-reduced-motion:reduce){
  .nav-chip,.nav-chip .brand,.nav-chip .brand img,.nav-chip .brand span,.nav-chip .cart-btn,.nav-chip .menu-btn,.nav-chip .login-link{transition:none}
}
nav.main{display:flex;gap:2px;margin-left:10px;position:relative}
nav.main a{position:relative;z-index:1;text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border:1px solid transparent;border-radius:999px;color:var(--muted);white-space:nowrap}
/* Desktop nav hover — ONE shared frosted-glass pill that GLIDES
   horizontally behind whichever link the pointer (or keyboard
   focus) is on: Shop, License, Reviews, FAQ and the Login link
   in .nav-right — the FAQ hover pill's .38s glide turned
   sideways. The glass is unchanged from the old per-link hover
   (translucent white, backdrop blur, a light border, a soft
   shadow); only the motion changed, from a fade-in on each link
   to a single pill that travels between them. JS positions it
   against the whole chip (see the nav glide script); it sits
   behind the link text (the links carry z-index:1), it never
   seeks out the scroll-spy section on its own, and the
   .current link keeps its own black state and is excluded.
   Not black, no underline. No pill on touch pointers, and
   nothing at all under reduced motion. */
.nav-hover-pill{position:absolute;top:0;left:0;width:0;height:0;background:rgba(255,255,255,.5);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.7);border-radius:999px;box-shadow:0 6px 20px rgba(17,17,17,.08),inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(17,17,17,.04);opacity:0;pointer-events:none;z-index:0;transition:left .38s cubic-bezier(.22,1,.36,1),width .38s cubic-bezier(.22,1,.36,1),top .38s cubic-bezier(.22,1,.36,1),height .38s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.nav-hover-pill.is-visible{opacity:1}
nav.main a:not(.current):hover{color:var(--ink)}
nav.main a.current{background:var(--red);color:var(--bg)}
@media (hover:none){
  .nav-hover-pill{display:none}
}
@media (max-width:1024px){
  .nav-hover-pill{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav-hover-pill{display:none}
}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
/* Login — a quiet text link beside the cart, like the original
   site's header (Login + Cart side by side). It points at the
   WooCommerce My account page, so the label says exactly what it
   does. On desktop it sits in the pill next to the cart; below
   1025px the pill is too crowded for it, so it hides here and
   lives in the hamburger menu instead (see .mobile-menu). It
   shrinks a touch with the pill on scroll, like the cart. */
.login-link{position:relative;z-index:1;display:inline-flex;align-items:center;height:38px;padding:0 12px;border:1px solid transparent;border-radius:999px;text-decoration:none;font-size:14px;font-weight:600;line-height:1;color:var(--muted);white-space:nowrap;transition:font-size .5s cubic-bezier(.22,1,.36,1),height .5s cubic-bezier(.22,1,.36,1),padding .5s cubic-bezier(.22,1,.36,1),transform .18s cubic-bezier(.22,1,.36,1),background-color .3s ease,border-color .3s ease,color .2s ease,box-shadow .3s ease,backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease}
/* The shared gliding glass pill covers Login too; on hover the
   link itself only darkens, like the section links. */
.login-link:hover{color:var(--ink)}
.login-link:active{transform:scale(.95)}
.nav-chip.is-scrolled .login-link{height:36px;padding:0 10px;font-size:13.5px}
.cart-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--red);color:var(--bg);border-radius:999px}
.cart-btn:hover{background:var(--red-dark)}
.cart-btn svg{width:20px;height:20px}
.cart-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;background:var(--bg);color:var(--red);border:1.5px solid var(--red);border-radius:999px;font-size:11px;font-weight:700;line-height:1;box-shadow:var(--shadow-sm)}
.cart-badge[hidden]{display:none}
.menu-btn{display:none;width:40px;height:40px;border:1px solid var(--line);background:var(--card);border-radius:999px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
/* Navbar search (desktop only): a magnifier button in the pill; it
   opens a search panel under the pill. Hidden where the hamburger
   shows (<=1024px) — on mobile the search lives at the top of the
   hamburger menu instead. */
.search-btn{display:grid;place-items:center;width:44px;height:44px;flex:none;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:999px}
.search-btn:hover{border-color:var(--ink)}
.search-btn svg{width:20px;height:20px}
.nav-search-panel{position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:14px 18px;display:none;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
.nav-chip.search-open .nav-search-panel{display:block;opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s}
.nav-search-form{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:999px;padding:5px 5px 5px 20px;background:var(--card)}
.nav-search-form:focus-within{border-color:var(--ink)}
.nav-search-form input{flex:1;border:0;outline:0;background:transparent;padding:11px 0;font-size:15px;min-width:0}
.nav-search-form input::placeholder{color:var(--muted)}
.nav-search-form button{background:var(--ink);color:#fff;border-radius:999px;padding:11px 22px;font-size:14px;font-weight:600;flex:none}
.nav-search-form button:hover{background:var(--red)}
/* Mobile menu search: a pill input at the top of the panel, above
   the section links, joining the same stagger as the links. */
.mm-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:999px;padding:5px 5px 5px 18px;background:var(--card);margin-bottom:8px}
.mm-search:focus-within{border-color:var(--ink)}
.mm-search input{flex:1;border:0;outline:0;background:transparent;padding:11px 0;font-size:15px;min-width:0}
.mm-search input::placeholder{color:var(--muted)}
.mm-search button{display:grid;place-items:center;width:40px;height:40px;flex:none;background:var(--ink);color:#fff;border-radius:999px}
.mm-search button svg{width:18px;height:18px}
.menu-btn span{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
/* Open: the two hamburger bars fold into an X (and unfold on
   close), on the same ease-out the pill itself animates with. */
.nav-chip.menu-open .menu-btn span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-chip.menu-open .menu-btn span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.nav-chip.menu-open{box-shadow:var(--shadow)}
/* Mobile menu — a dropdown panel hung under the pill, not a
   full-screen overlay (Cuberto reference): same width as the
   pill, rounded, light, and the page stays visible below it.
   It lives inside the fixed pill header, so it tracks the
   pill's width in both its wide and shrunk states. Closed it
   is clipped shut at its own top edge; opening unrolls it
   downward over .45s on the pill's ease-out while the rows
   fade up with a light stagger. Closing reverses with no
   stagger. The faint backdrop only catches the tap-outside
   that closes the panel. */
.mobile-menu{position:absolute;top:calc(100% + 8px);left:-1px;right:-1px;background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:14px 18px 18px;display:none;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top center;clip-path:inset(0 0 100% 0 round 24px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1),clip-path .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s}
.nav-chip.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none;clip-path:inset(0 0 0% 0 round 24px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1),clip-path .45s cubic-bezier(.22,1,.36,1),visibility 0s}
.mm-links a{display:block;text-decoration:none;font-size:28px;font-weight:700;letter-spacing:0;color:var(--ink);padding:13px 0;border-bottom:1px solid var(--line)}
.mm-links a:active{color:var(--red)}
/* Login is the account page, not a section, so in the panel it
   is a solid black pill button under the section links rather
   than another text row. */
.mm-login{display:flex;align-items:center;justify-content:center;margin-top:16px;padding:14px 20px;background:var(--ink);color:#fff;border-radius:999px;text-decoration:none;font-size:16px;font-weight:600;line-height:1}
.nav-chip.menu-open .mm-login:active{transform:scale(.97)}
.mm-tag{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--muted)}
/* Stagger: rows start hidden and rise in one by one on open.
   The delay lives only on the open state, so closing starts
   immediately. */
.mm-search,.mm-links a,.mm-login,.mm-tag{opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.nav-chip.menu-open .mm-search,.nav-chip.menu-open .mm-links a,.nav-chip.menu-open .mm-login,.nav-chip.menu-open .mm-tag{opacity:1;transform:none;transition-delay:calc(.1s + var(--i,0)*50ms)}
.mm-backdrop{position:fixed;inset:0;z-index:69;background:rgba(17,17,17,.12);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.mm-backdrop.on{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
@media (max-width:1024px){
  .mobile-menu{display:block}
  .search-btn{display:none}
  .nav-search-panel{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .mobile-menu,.mm-backdrop,.menu-btn span,.mm-links a,.mm-login,.mm-tag{transition:none}
  .nav-chip.menu-open .mm-links a,.nav-chip.menu-open .mm-login,.nav-chip.menu-open .mm-tag{transition-delay:0s}
}

/* Hero — image trail: a tall trail zone holding the centred headline,
   the subcopy, search + Browse, and eight drifting previews. Search +
   Browse sit inside the hero, above the trail layer, so gather/trail
   images can never cover them. */
.hero341{position:relative;overflow:hidden;padding:0;font-family:var(--hero-font);isolation:isolate}
.hero-trail-zone{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:132px 24px 56px;touch-action:pan-y}
.hero341-inner{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;width:min(820px,100%);margin-inline:auto;pointer-events:none}
.hero341-eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:26px}
.hero341-subcopy{font-size:18px;line-height:1.6;color:var(--muted);margin-top:26px;max-width:600px}
.hero341-subcopy strong{color:var(--ink);font-weight:600}
.hero-search-band{position:relative;z-index:4;width:100%;background:transparent;padding:0;pointer-events:none;display:flex;justify-content:center}
.hero341 h1{font-family:var(--hero-font);font-size:clamp(64px,11vw,148px);font-weight:700;letter-spacing:-.04em;line-height:.95}
.hero341 h1 .h-line{display:block}
.hero341 h1 .accent{color:var(--red)}
.hero341-actions{display:flex;flex-direction:row;gap:10px;align-items:stretch;justify-content:center;width:min(640px,100%);margin-top:34px;pointer-events:auto;position:relative;z-index:4}
.hero341-actions .btn-red{padding:14px 24px;font-size:15px;flex:none;white-space:nowrap}
/* Works-with brand section: a white section matching the
   Why section directly above it (#FFFFFF), with the heading centred above one logo
   cloud: exactly eight verified brands in two sets of four, one
   set visible at a time. Logos sit directly on the section
   background, with no card, border or background box behind
   them. No platform count, no integration claim: files, not
   integrations. */
.works-section{background:#FFFFFF}
.works-head{max-width:720px;margin:0 auto;text-align:center}
.works-head h2{font-family:var(--hero-font);font-weight:700;font-size:clamp(38px,4.6vw,56px);line-height:1.08;letter-spacing:0;margin-top:0}
.works-head h2 .accent{color:var(--red)}
.works-head .lede{margin:18px auto 0;max-width:560px}
.works-formats{margin-top:22px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
/* One set at a time: both sets share a single grid cell, so a
   swap never reflows the page — the outgoing set blurs up and
   out while the incoming set blurs in from below, in place. */
.logo-cloud{display:grid;margin:48px auto 0;max-width:960px}
.logo-cloud-set{grid-area:1/1;list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:20px 56px;visibility:hidden}
.logo-cloud-set.is-active{visibility:visible}
.logo-cloud-set.is-exiting,.logo-cloud-set.is-entering{visibility:visible}
.logo-cloud-item{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;flex:0 0 auto}
.logo-cloud-item img{height:30px;width:auto;max-width:40px;object-fit:contain;display:block;flex:none}
.logo-cloud-item span{font-size:16px;font-weight:600;letter-spacing:0;line-height:1.3;white-space:nowrap}
/* Swap: both sets move at the same time and cross over — the
   outgoing set rises and fades out while the incoming set rises
   in from below, with the same duration and the same soft
   ease-in-out on both sides, so there is no empty gap and no
   teleport. The 0.1s stagger between logos keeps the wave.
   Blur stays light (4px) and only while moving. */
@keyframes logo-swap-exit{
  from{opacity:1;transform:translateY(0);filter:blur(0)}
  to{opacity:0;transform:translateY(-24px);filter:blur(4px)}
}
@keyframes logo-swap-enter{
  from{opacity:0;transform:translateY(24px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.logo-cloud-set.is-exiting .logo-cloud-item{animation:logo-swap-exit .7s cubic-bezier(.65,0,.35,1) var(--d,0s) both;will-change:transform,opacity,filter}
.logo-cloud-set.is-entering .logo-cloud-item{animation:logo-swap-enter .7s cubic-bezier(.65,0,.35,1) var(--d,0s) both;will-change:transform,opacity,filter}
@media (prefers-reduced-motion:reduce){
  .logo-cloud-set.is-exiting .logo-cloud-item,
  .logo-cloud-set.is-entering .logo-cloud-item{animation:none}
}
/* Tablet: still one row of four per set (nowrap above), just
   tighter spacing and smaller lockups so the longest set —
   Google Slides / Canva / Affinity Photo / Affinity Designer —
   fits the narrowest tablet width without wrapping to 2 × 2. */
@media (max-width:1024px){
  .logo-cloud-set{gap:20px 28px}
  .logo-cloud-item img{height:27px;max-width:36px}
  .logo-cloud-item span{font-size:14.5px}
}
@media (max-width:760px){
  .logo-cloud-set{gap:20px 24px}
  .logo-cloud-item img{height:25px}
  .logo-cloud-item span{font-size:14px}
}
/* Drifting previews around the headline */
.float-field{position:absolute;inset:0;z-index:1;pointer-events:none}
.float-card{position:absolute;width:var(--w,190px);padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);box-shadow:var(--shadow);pointer-events:auto;touch-action:pan-y;transform:rotate(var(--rot,0deg));animation:float-drift var(--dur,6s) ease-in-out var(--delay,0s) infinite alternate;transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.float-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.float-card:hover{border-color:var(--red)}
/* Rotation crossfade layer: a second image stacked over the card's own
   image; JS swaps its source, fades it in, then hands the source to the
   image underneath. Geometry stays exactly the card's own image box. */
.float-card img.rot-next{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .55s ease;pointer-events:none}
.float-card img.rot-next.on{opacity:1}
/* Scatter ring: cards sit in the margins around the centred headline
   block, never over its text — top pair, upper-side pair, lower-side
   pair, bottom pair. Positions live here (not inline) so the mobile
   ring can be re-laid-out without inline styles winning. */
.float-card.p1{left:5%;top:11%}
.float-card.p2{right:5%;top:11%}
.float-card.p3{left:2%;top:29%}
.float-card.p4{right:2%;top:29%}
.float-card.p5{left:4%;top:64%}
.float-card.p6{right:4%;top:64%}
.float-card.p7{left:13%;bottom:5%}
.float-card.p8{right:13%;bottom:5%}
@keyframes float-drift{from{translate:0 -8px}to{translate:0 8px}}
.hero-trail-zone.hero--trail-on .float-card{animation:none;opacity:0;pointer-events:none;transform:translate(var(--tx,0px),var(--ty,0px)) scale(.32) rotate(var(--rot,0deg))}
.hero-trail-zone.hero--gathering .float-card{animation:none}
.float-card.is-gone{display:none}
/* Cursor trail previews: dropped at the pointer, spring in, fade out */
.trail-field{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.trail-img{position:absolute;width:clamp(170px,18vw,240px);aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow);transform:translate(-50%,-50%) rotate(var(--rot,0deg));transition:opacity .45s ease,transform .45s ease}
.trail-img.is-portrait{width:clamp(126px,13vw,176px);aspect-ratio:3/4}
.trail-img.is-fading{opacity:0;transform:translate(-50%,-62%) rotate(var(--rot,0deg)) scale(.92)}
@media (prefers-reduced-motion:reduce){
  .float-card{animation:none}
  .trail-field{display:none}
}

/* Why Graphicted — light bento section after the hero, on the Nike-style
   bento the reference shows: the collage card bleeds its real
   product previews edge-to-edge like a shelf image well, and the two
   square film cards sit beside it at the films' own 1:1 ratio. On
   desktop the grid follows the Socialscale alternating pattern:
   four cards in two rows — the wide collage top-left with the Pay
   once film small at top-right, then the Download film small at
   bottom-left with the wide stat card (34 products and 6
   categories together) bottom-right, the two films diagonal to
   each other (see the desktop block after the film-card rules).
   White cards on a white section, hairline borders,
   dark text, red only for the headline word, prices and small accents. No
   testimonial card. Hover is a gentle lift and soft shadow only — no
   wash, no glow — and the only other motion
   is the entrance already armed by JS. Without JS the content is
   simply visible, and reduced motion disables hover and entrance. */
.trust-sec{background:#FFFFFF;color:var(--body)}
.why-top{text-align:center;display:flex;flex-direction:column;align-items:center}
.why-headline{font-family:var(--hero-font);font-weight:700;font-size:clamp(38px,5.4vw,62px);line-height:1.12;letter-spacing:-.03em;max-width:860px;margin-top:0;color:var(--ink)}
.why-headline .why-gamble{color:var(--red)}
/* Both rows share one unit (grid-auto-rows:1fr): the tall anchor and
   the two film cards each span both of them, so the bento is one
   band of three cards at a single shared height. Desktop
   (min-width:901px) overrides this geometry further down — see
   the desktop bento block after the film-card rules. */
.why-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:16px;margin-top:48px;align-items:stretch}
.why-bento-card{position:relative;background:#FFFFFF;border:1px solid #E5E5E5;border-radius:24px;padding:32px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-width:0;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
/* Hover is a lift only: a 2px rise and the soft shadow, on hover or
   keyboard focus. There is no wash overlay on these cards in any
   state — an earlier build laid a white radial wash over the card
   on hover, and on touch a tap latched :hover so the wash stuck as
   a white glow across the card. Tapping or hovering now shows
   nothing but the lift. */
.why-bento-card:hover,.why-bento-card:focus-within{transform:translateY(-2px);box-shadow:var(--shadow)}
.trust-sec.trust-in .why-bento-card:hover,.trust-sec.trust-in .why-bento-card:focus-within{transform:translateY(-2px);box-shadow:var(--shadow)}
.why-bento-card h3{font-size:clamp(21px,2vw,24px);font-weight:700;letter-spacing:0;line-height:1.2}
/* Small cards follow the reference's small-card pattern: title and
   short text at the top, then one image filling the rest of the
   card down to its bottom edge — no centred block, no hollow
   middle. The image is the card's own bottom: it bleeds to the
   card's edges (clipped by the card's radius) instead of sitting
   in an inset panel. */
.why-small{justify-content:flex-start;padding:32px 32px 0}
.why-small-img{display:flex;margin:16px -32px 0;flex:1;min-height:160px}
.why-small-img img{flex:1;min-width:0;min-height:0;width:100%;height:100%;object-fit:cover}
/* Pay-once card only: the bento's single red anchor, full red —
   the Pay once motion film fills the card edge-to-edge, so the
   card carries no padding and no text of its own; the square
   video is clipped by the card's 24px radius. Focus stays
   visible: the red outline used elsewhere would vanish on red,
   so focus inside this card is white instead. The card's only
   child is the absolutely-positioned film, which gives it no
   intrinsic height: wherever a grid row sizes it (desktop's
   1fr rows, and tablet's two-column rows, whose height the
   Download card sets) it fills that row — but at <=640px the
   bento stacks to one column, the card sits alone in an
   auto-sized row, and it collapsed to a 2px red line. The
   <=640px rules therefore give it aspect-ratio:1/1 (the film
   and poster are square, 1080x1080): alone in its row, its
   height follows its width and the film fills a true square,
   uncropped. Scoped to <=640px on purpose: on a stretched
   grid item a ratio transfers size between axes, so at wider
   widths it widened this card past its track (overlapping
   its neighbour at tablet widths, fattening its column on
   desktop) — exactly where the row already sizes it anyway. */
.why-pay-once{background:#C43333;border-color:#E5E5E5}
.why-bento-card.why-pay-once{padding:0}
/* Poster as a real <img> under the film, not only the video's
   poster attribute: iOS Safari/WKWebView does not paint the
   poster of a preload-gated video, which left this card a plain
   red square on a real iPhone even though the poster file is
   fine. An ordinary image always paints, so the lockup frame
   shows whether or not the film can start; once the film plays
   its opaque frames cover the image. */
.why-pay-once-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.why-pay-once-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.why-pay-once :focus-visible{outline-color:#FFFFFF}
/* Download instantly card only: the same film-card treatment as
   Pay once — the morph film (the "Download instantly" heading on
   red, the 0-to-100% progress pill with its download icon, the
   check, and the six category chips) fills the card edge-to-edge,
   so the card carries no padding and no text of its own; the
   square film is clipped by the card's 24px radius and focus
   inside is white, for the same reason as the Pay once card.
   Poster and film are the card's only children, absolutely
   positioned, so it has no intrinsic height: the grid rows size
   it on desktop and tablet, and the <=640px rules give it
   aspect-ratio:1/1, exactly like the Pay once card. The poster
   is a real <img> under the film for the same iOS reason given
   above. */
.why-download{background:#C43333;border-color:#E5E5E5}
.why-bento-card.why-download{padding:0}
.why-download-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.why-download-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.why-download :focus-visible{outline-color:#FFFFFF}
/* No card in this bento carries a hover wash (see the lift-only
   hover above), and the two film cards also keep their tap
   highlight off, so tapping a film card shows nothing but the
   film itself. */
.why-pay-once,.why-download{-webkit-tap-highlight-color:transparent}
.why-bento-card p{color:var(--muted);font-size:15.5px;line-height:1.65;margin-top:10px}
.why-bento-card p strong{color:var(--ink);font-weight:600}
.why-tall{grid-row:span 2}
/* The two film cards span both rows too, so the bento is one band
   of three equal-height cards: the anchor on the left, the two
   films beside it. Their square films fit whole inside the tall
   card (object-fit:contain): cover cropped the lockups' outer
   letters off at this height ("Pay once" read as "ay onc"), and
   contain's leftover bands sit on the card's own matching red,
   so the full heading, pill and chips always stay in frame.
   This is the geometry at tablet and phone widths; desktop
   overrides it in the block directly below. */
.why-pay-once,.why-download{grid-row:span 2}
/* Desktop bento geometry (min-width:901px only — the tablet and
   phone layouts further down are deliberately untouched).
   The pattern is the Socialscale alternating bento: exactly
   four cards in two rows on a three-column grid, large and
   small cards alternating diagonally, one consistent 16px gap
   throughout.
     row 1: collage (wide, cols 1-2) + Pay once (square, col 3)
     row 2: Download instantly (square, col 1) + stats (wide, cols 2-3)
   The two films sit DIAGONAL to each other (top-right and
   bottom-left) — never side by side, never stacked. Row 2 is
   locked to one column width (an exact square, the Download
   film's own 720x720 ratio) and its film runs object-fit:cover,
   which for square media in a square cell shows the whole
   frame. Row 1 is sized by the collage instead (see the image
   note in the block below): the Pay once cell stretches to
   that taller row and its film runs object-fit:contain, so
   the full square frame stays visible; the leftover bands sit
   on the card's own #F5F5F5, sampled from the film itself, so
   card and film still read as one surface (the Download
   film's red likewise already is its card's #C43333).
   The collage turns wide: three columns by two rows of large
   tiles, exactly six products — one per category, the same six
   tiles as every other width, sized up to fill the wide card.
   The six extra tiles stay hidden here too, and their products
   stay out of the rotating cells' queues on desktop — see the
   script — so no product ever shows twice in the well at
   once. Inside each tile the meta is compact (flex:none) and
   the image box is exactly 3:2, the products' own ratio, so
   cover has nothing to trim.
   The 34 and 6 stats share ONE wide card again (bottom-right),
   not two split cards: the anchor article becomes
   display:contents, its collage takes the top-left cell and
   its stat body becomes the bottom-right card in its base
   composition — two columns split by a thin vertical hairline:
   the giant 34 with its label beside it on the left, and the 6
   with the category roller beside it on the right.
   The body carries the JS-armed staggered rise (the inline
   --d delay inherits through the contents element, so the
   stats rise on the anchor's beat); the lift-only hover lives
   on the two wide cards themselves. */
@media (min-width:901px){
  /* Row 2 is locked to the film square, exactly like the
     reference: one column wide tall, so the wide stats card
     beside the Download film fills its row edge to edge and
     no void can open under the film. Row 1 is auto: it takes
     the collage's natural height, which is what gives every
     tile an exact 3:2 image box (see the image note below);
     the Pay once cell stretches to match. The first
     declaration computes the column from the viewport (the
     wrap caps at 1240px with 24px padding each side and two
     16px gaps: (min(1240px, 100vw) - 80px) / 3); the second
     refines it with container units — the trust wrap is the
     container — so the row matches the real column even with
     a classic scrollbar. Where container units are unsupported
     the declaration is dropped and the viewport formula
     stands. */
  .trust-sec .wrap{container-type:inline-size}
  .why-bento{grid-template-rows:auto calc((min(1240px,100vw) - 80px)/3);grid-template-rows:auto calc((100cqw - 80px)/3);grid-auto-rows:calc((min(1240px,100vw) - 80px)/3);grid-auto-rows:calc((100cqw - 80px)/3)}
  .why-anchor{display:contents}
  /* Specificity matters here: the base .why-collage rules are
     written AFTER this block in the sheet, so a bare
     .why-collage selector ties with them and loses on order —
     that is what rendered the desktop collage at the base
     geometry instead of the wide 3 by 2 below. Every collage
     rule in this block therefore carries the extra .why-bento
     class (0,2,0 beats the base 0,1,0 regardless of order). */
  .why-bento .why-collage{grid-column:1/3;grid-row:1;border:1px solid #E5E5E5;border-radius:24px;box-shadow:var(--shadow-sm);overflow:hidden;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;grid-auto-rows:auto;min-width:0;min-height:0;height:auto;align-self:start;transition:transform .25s ease,box-shadow .25s ease}
  .why-bento .why-collage figure{min-height:0;height:auto}
  /* The image fills its tile edge to edge AND shows the whole
     product: its box is exactly 3:2, the ratio of every product
     image (all 1200x800), so object-fit:cover scales without
     trimming anything — no crop, and no gap either. Three
     earlier states broke this: flexing the image into the
     film-square row left a ~2:1 strip and cover cut roughly a
     quarter off the top and bottom of each product (the
     Publica wordmark lost its lower half, the Game Asset icons
     their crowns and bases); contain in that strip left the
     image small and floating with white gaps around it; and
     flexing the meta (see below) shrank the strip further.
     The geometry now runs the other way: the image keeps its
     natural 3:2 height, the compact meta sits under it, and
     row 1 of the bento takes the collage's height (auto,
     above) instead of forcing the collage into the film
     square. The swap layer's img is inside .why-collage too,
     so rotating tiles follow. */
  .why-bento .why-collage img{flex:none;width:100%;min-height:0;height:auto;aspect-ratio:3/2;object-fit:cover}
  /* The meta must NOT flex on desktop. The base .why-tile-meta
     carries flex:1, which in this wide card made the meta
     claim half of each tile's height: the title sat at its
     top, the category/price row was pushed to its foot by
     margin-top:auto, and a tall band of empty white opened
     between them — the gap the user circled. Here the meta is
     flex:none (its natural height: the title block plus the
     category/price row, tight together). The title keeps the
     base two-line reserve: rotating names such as "Artificial
     Intelligence Power Point Template" wrap to two lines, and
     a fixed reserve keeps every meta the same height, so the
     two tile rows never change height mid-rotation and the
     price rows line up across a row. Its type steps up a
     notch too, since the tiles are twice as wide here as in
     the tall collage. */
  .why-bento .why-collage .why-tile-meta{flex:none;padding:10px 14px 12px}
  .why-bento .why-collage .why-tile-meta strong{min-height:2.7em}
  .why-bento .why-collage .why-tile-meta strong{font-size:14.5px}
  .why-bento .why-collage .why-tile-meta span{font-size:11.5px}
  .why-bento .why-collage .why-tile-meta b{font-size:16.5px}
  /* Stat card backdrop (desktop only): the user's pink gradient
     artwork, converted to WebP, fills the card edge to edge. A
     soft white scrim sits over it so the black numbers and the
     dimmed grey roller neighbours stay legible where the pink
     runs strongest (bottom-right corner, behind the roller);
     copy, numbers and roller behaviour are unchanged. Mobile
     and tablet get the same artwork from the base
     .why-anchor-body rule, inside the tall anchor card. */
  .why-bento .why-anchor-body{grid-column:2/4;grid-row:2;background-color:#FDF4F5;background-image:linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.34)),url("assets/img/stat-card-bg.webp");background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid #E5E5E5;border-radius:24px;box-shadow:var(--shadow-sm);padding:36px 40px;min-width:0;min-height:0;height:100%;align-self:stretch;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:stretch;transition:transform .25s ease,box-shadow .25s ease}
  .why-anchor-body .why-big-num{font-size:clamp(104px,10vw,132px)}
  .why-anchor-body .why-sub-num{font-size:clamp(54px,5vw,68px)}
  .why-collage:hover,.why-anchor-body:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .why-collage:active,.why-anchor-body:active{transform:translateY(-1px) scale(.99);box-shadow:var(--shadow-sm)}
  .trust-sec.trust-armed .why-collage,.trust-sec.trust-armed .why-anchor-body{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,1,.36,1) var(--d,0s),transform .8s cubic-bezier(.22,1,.36,1) var(--d,0s)}
  .trust-sec.trust-in .why-collage,.trust-sec.trust-in .why-anchor-body{opacity:1;transform:none}
  .trust-sec.trust-in .why-collage:hover,.trust-sec.trust-in .why-anchor-body:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .why-pay-once,.why-download{aspect-ratio:auto;align-self:stretch;height:100%;min-height:0}
  .why-pay-once{grid-column:3;grid-row:1;background:#F5F5F5}
  .why-download{grid-column:1;grid-row:2}
  .why-pay-once-poster,.why-pay-once-video{object-fit:contain}
  .why-download-poster,.why-download-video{object-fit:cover}
  .why-pay-once :focus-visible{outline-color:var(--red)}
  /* Narrow desktop (901-1180px): the columns narrow to roughly
     275-330px, so the stat card steps its numbers down a notch
     and tightens its padding; the films simply follow their
     column and the collage keeps its two equal rows. Above
     1180px the full sizes above apply. */
  @media (max-width:1180px){
    .why-bento .why-anchor-body{padding:28px 32px}
    .why-anchor-body .why-big-num{font-size:88px}
    .why-anchor-body .why-big-label{font-size:19px}
    .why-anchor-body .why-sub-num{font-size:52px}
    .why-stat-row{padding-left:24px;gap:32px}
  }
  @media (prefers-reduced-motion:reduce){
    .trust-sec.trust-armed .why-collage,.trust-sec.trust-armed .why-anchor-body{opacity:1;transform:none;transition:none}
    .why-collage:hover,.why-anchor-body:hover,.why-collage:active,.why-anchor-body:active{transform:none;box-shadow:var(--shadow-sm)}
    .trust-sec.trust-in .why-collage:hover,.trust-sec.trust-in .why-anchor-body:hover{transform:none;box-shadow:var(--shadow-sm)}
  }
}
/* Stats band: the proof stats no longer live in the bento — they
   stand on their own below it, synais-style: one full-width row of
   big numbers split by thin vertical dividers, each with its label
   underneath, kept light (white, the page's own hairlines) rather
   than the reference's dark band. Four real stats, in order:
   335,858 font downloads on dafont (the hero, set largest),
   selling since 2024, 20 fonts on dafont, and 150+ assets sold.
   The downloads and the font count are verified on the client's
   dafont author page (Glyphminds Studios, checked 2026-11-06);
   the start year and the sold count are the client's own numbers.
   No ranking, no rating, nothing invented — and the downloads are
   free font downloads on dafont, so the label says exactly that.
   Every stat counts up once, the same count-up as the anchor
   card's 34/6 above: each stat is observed on its own, so its
   count starts as that number itself comes into view (~1.2s
   cubic ease-out, staggered across the row; see the script
   below) — never while it is still below the fold. The year
   counts too, as a plain number with no thousands separator.
   Final values stay in the markup, so without JS — or under
   prefers-reduced-motion — the band reads as-is. */
.stats-band{margin-top:72px}
.stats-heading{text-align:center;font-family:var(--hero-font);font-weight:700;font-size:clamp(30px,4vw,44px);line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:0 0 36px}
.stats-heading .accent{color:var(--red)}
.stats-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;padding:44px 0}
.stat-item{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;padding:4px 28px;min-width:0}
.stat-item + .stat-item{border-left:1px solid #E5E5E5}
.stat-num{font-size:clamp(30px,3.2vw,42px);font-weight:400;letter-spacing:0;line-height:1;color:#111111;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-num-hero{font-size:clamp(44px,5.2vw,68px);line-height:.95}
.stat-label{font-size:14.5px;font-weight:500;color:var(--muted);margin-top:10px;line-height:1.45}
.stats-source{font-size:12.5px;font-weight:500;color:var(--muted);margin-top:16px;line-height:1.5}
/* Band entrance: the same JS-armed staggered rise as the Why cards
   above it — the hidden state exists only once the script arms it,
   so a no-JS load shows the stats and reduced motion never arms. */
.stats-band.stats-armed .stat-item{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,1,.36,1) var(--d,0s),transform .8s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.stats-band.stats-armed .stat-item.stat-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .stats-band.stats-armed .stat-item{opacity:1;transform:none;transition:none}
}
/* Anchor card: no inset panel, no card padding — the collage bleeds
   to the card's own edges and is the card's top, with the copy below
   carrying the loosened 32px inset, so the well reads as one image
   well, not six pictures squeezed inside a box. */
.why-anchor{padding:0}
/* Stat area backdrop (mobile + tablet): the same pink gradient
   artwork as the desktop stat card fills the 34 / 6 area inside
   the anchor card, so the image shows on phones too. The soft
   white scrim keeps the black numbers and grey roller names
   legible over the stronger pink corners. At 901px and up the
   desktop rule below re-declares the same background on the
   split-out stat card. */
.why-anchor-body{padding:32px 32px 36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);align-items:stretch;flex:1;background-color:#FDF4F5;background-image:linear-gradient(rgba(255,255,255,.34),rgba(255,255,255,.34)),url("assets/img/stat-card-bg.webp");background-size:cover;background-position:center;background-repeat:no-repeat}
/* Anchor stat, nue-style: one giant verified number dominates the
   card — 34 in Inter 700 black at the scale of the reference's 78K —
   with its label set beside it, in the left column. The 6 categories
   stat sits in the right column across a thin vertical divider,
   with the category roller beside it on the same row, so the roller
   reads as part of the 6. No other number is added: only the verified
   34 products, 6 categories and the collage prices. */
.why-anchor-body .why-stat-main{display:flex;align-items:center;gap:16px;margin:0;padding:0;font-size:inherit;line-height:1;align-self:center;min-width:0}
.why-big-num{font-size:clamp(120px,30vw,168px);font-weight:700;letter-spacing:0;line-height:.9;color:#111111;flex:none;font-variant-numeric:tabular-nums}
.why-big-label{font-size:clamp(19px,2vw,22px);font-weight:600;letter-spacing:0;line-height:1.15;color:#111111}
/* Right column of the stat card: the "6 categories" stat on the
   left and the category roller beside it on the right, on one
   horizontal row so the roller sits close to the 6 it belongs
   to, the two vertically centred against each other. A thin
   vertical hairline on the column's left edge separates it from
   the 34 column; the column stretches the full height of the
   card body so the divider runs top to bottom, and its content
   stays vertically centred against the 34. */
.why-stat-row{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:44px;margin-top:0;padding-top:0;padding-left:36px;border-left:1px solid #E5E5E5;min-width:0}
.why-stat-sub{display:flex;align-items:baseline;gap:10px;flex:0 0 auto}
.why-sub-num{font-size:clamp(40px,4vw,54px);font-weight:700;letter-spacing:0;line-height:1;color:#111111;font-variant-numeric:tabular-nums}
.why-sub-label{font-size:16px;font-weight:600;letter-spacing:0;color:#111111}
/* Category word roller (Betr-style vertical roller, inverted for the
   white card): a three-row window directly beside the "6 categories"
   stat in the right column — the active category sits in the middle
   row in bold black, its two neighbours above and below in dimmed
   grey, all left-aligned next to the stat, rolling up one row per
   step. One calm step per collage rotation
   (1.5s), same order as the collage cells, driven by the same
   interval below so the highlighted name always matches the cell
   that just swapped. No blur anywhere. Without JS — or under
   prefers-reduced-motion — the roller never arms and the six
   names simply read as a plain static list. */
.why-cat-roller{flex:1 1 auto;min-width:0;margin-left:0;text-align:left;width:auto}
.why-cat-roller-track{list-style:none;margin:0;padding:0}
.why-cat-roller-track li{font-size:17px;font-weight:600;letter-spacing:0;line-height:1.5;color:#111111;text-align:left}
.why-cat-roller.is-rolling{height:90px;overflow:hidden}
.why-cat-roller.is-rolling .why-cat-roller-track{transition:transform .5s cubic-bezier(.65,0,.35,1);will-change:transform}
.why-cat-roller.is-rolling .why-cat-roller-track.roller-no-anim{transition:none}
.why-cat-roller.is-rolling li{height:30px;line-height:30px;font-weight:500;color:#A3A3A3;transition:color .5s ease;white-space:nowrap}
.why-cat-roller.is-rolling li.is-active{font-weight:700;color:#111111}
@media (prefers-reduced-motion:reduce){
  .why-cat-roller.is-rolling{height:auto;overflow:visible}
  .why-cat-roller.is-rolling .why-cat-roller-track{transform:none!important;transition:none}
  .why-cat-roller.is-rolling li{height:auto;line-height:1.5;font-weight:600;color:#111111}
}
/* The collage is the well: 3 columns × 2 rows of smaller tiles, one
   per category, hairline seams only, no panel, no gaps that inset
   it. Tiles keep their full product names — titles wrap instead of
   truncating, and the price row sits at the foot of each tile so
   prices line up across a row however long a title runs. */
.why-collage{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:0;background:#E5E5E5;border-bottom:1px solid #E5E5E5}
/* Extra collage tiles (a second real product per category)
   never render at any width: the collage shows exactly six
   tiles everywhere. They stay in the markup only so the
   script can keep their products out of the rotating cells'
   queues on desktop, exactly as it always has. The selector
   must be the full compound below: a bare .why-tile-extra
   (0,1,0) loses to .why-collage figure{display:flex} (0,1,1)
   further down, which is exactly what let all twelve tiles
   render, squeezed into four rows of slivers. */
.why-collage figure.why-tile-extra{display:none}
.why-collage figure{margin:0;min-width:0;background:#FFFFFF;display:flex;flex-direction:column}
.why-collage img{width:100%;aspect-ratio:3/2;object-fit:cover}
.why-tile-meta{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1}
.why-tile-meta strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.35;min-height:2.7em}
.why-tile-meta span{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:auto;padding-top:6px;color:var(--muted);font-family:var(--mono);font-size:11px;line-height:1.4}
.why-tile-meta b{color:var(--red);font-weight:600;flex:none;font-size:15px;line-height:1.2}
/* Per-cell swap (see JS) — the same motion language as the Works
   logo cloud (logo-swap-exit/enter), a touch faster: 0.5s, cubic-bezier(.65,0,.35,1),
   ±24px, both layers moving at the same time so the old tile rises
   out while the new one rises in from below, with no empty gap —
   except NO blur anywhere (Works' 4px blur is not used here).
   The swap layer is a full clone of the tile (image + title +
   category + price), so image and text travel as one unit, never
   on separate timings. One guard kept from the previous fix:
   only one title is ever legible — opacity hands off at the
   midpoint (outgoing reaches 0 by 45%, incoming stays 0 until
   45%), so the two titles never sit readable on top of each
   other, while the translate runs the whole 0.5s on both sides
   and the motion never stops. Transforms only, so the swap never
   reflows the tile or moves its neighbours. The title is clamped
   to two lines and reserves two lines, so a longer product name
   can never stretch its row and make the card jump mid-rotation. */
.why-collage figure{position:relative}
@keyframes tile-swap-exit{
  from{opacity:1;transform:translateY(0)}
  45%{opacity:0}
  to{opacity:0;transform:translateY(-24px)}
}
@keyframes tile-swap-enter{
  from{opacity:0;transform:translateY(24px)}
  45%{opacity:0}
  to{opacity:1;transform:translateY(0)}
}
.why-collage figure.is-exiting>img,
.why-collage figure.is-exiting>.why-tile-meta{animation:tile-swap-exit .5s cubic-bezier(.65,0,.35,1) both;will-change:transform,opacity}
.why-tile-swap{position:absolute;inset:0;z-index:1;background:#FFFFFF;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none}
.why-tile-swap.is-entering{visibility:visible;animation:tile-swap-enter .5s cubic-bezier(.65,0,.35,1) both;will-change:transform,opacity}
.why-tile-swap img{flex:none}
.trust-sec.trust-armed .trust-rise{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,1,.36,1) var(--d,0s),transform .8s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.trust-sec.trust-in .trust-rise{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .trust-sec.trust-armed .trust-rise{opacity:1;transform:none;transition:none}
  .why-collage figure.is-exiting>img,
  .why-collage figure.is-exiting>.why-tile-meta,
  .why-tile-swap.is-entering{animation:none}
  .why-bento-card:hover,.why-bento-card:focus-within{transform:none;box-shadow:var(--shadow-sm)}
  .trust-sec.trust-in .why-bento-card:hover,.trust-sec.trust-in .why-bento-card:focus-within{transform:none;box-shadow:var(--shadow-sm)}
}
@media (max-width:900px){
  .why-bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .why-tall{grid-column:1/-1;grid-row:auto}
  /* Stat card separation (this width band only): the collage and the
     34 / 6 stat body stop sharing one tall card. The anchor shell
     goes transparent and borderless, and each half becomes its own
     card — the collage gains a full hairline border, rounded
     corners and its own clipping, the stat body keeps its pink
     artwork inside its own border, radius and soft shadow, and a
     16px gap (the bento's own gap) separates the two, so the stats
     read as a separate card under the product well instead of the
     well's lower half. The shell's hover/focus/active shadow is
     suppressed so a latched touch hover cannot redraw one merged
     outline around both halves; the gentle lift still moves them
     together. Desktop (>=901px) is untouched: there the two halves
     are already separate grid cards. */
  .why-anchor{background:transparent;border-color:transparent;box-shadow:none;overflow:visible}
  .trust-sec .why-bento-card.why-anchor:hover,.trust-sec .why-bento-card.why-anchor:focus-within,.why-bento-card.why-anchor:active{box-shadow:none}
  .why-collage{border:1px solid #E5E5E5;border-radius:24px;overflow:hidden}
  .why-anchor-body{margin-top:16px;border:1px solid #E5E5E5;border-radius:24px;box-shadow:var(--shadow-sm)}
  .why-anchor-body .why-big-num{font-size:clamp(84px,16vw,120px)}
  .why-stat-row{padding-left:28px;gap:28px}
  .why-collage{grid-template-columns:repeat(3,1fr)}
  .why-pay-once,.why-download{grid-row:auto}
  .stats-row{grid-template-columns:1fr 1fr;padding:20px 0}
  .stat-item{padding:18px 24px}
  .stat-item + .stat-item{border-left:none}
  .stat-item:nth-child(even){border-left:1px solid #E5E5E5}
  .stat-item:nth-child(n+3){border-top:1px solid #E5E5E5}
}
@media (max-width:640px){
  .why-headline{font-size:32px}
  .why-bento{grid-template-columns:1fr;margin-top:40px;gap:16px}
  .why-bento-card{padding:24px;border-radius:20px}
  .why-small{padding:24px 24px 0}
  .why-bento-card.why-pay-once{padding:0}
  .why-pay-once{aspect-ratio:1/1}
  .why-bento-card.why-download{padding:0}
  .why-download{aspect-ratio:1/1}
  .why-small-img{margin:16px -24px 0;min-height:190px}
  .why-anchor{padding:0}
  /* The two separated halves take the phone card radius (20px),
     matching the other bento cards at this width. */
  .why-collage{border-radius:20px}
  .why-anchor-body{padding:24px 24px 28px;grid-template-columns:1fr;border-radius:20px}
  .why-anchor-body .why-stat-main{gap:8px}
  .why-anchor-body .why-big-num{font-size:60px}
  .why-anchor-body .why-big-label{font-size:14.5px}
  .why-anchor-body .why-sub-num{font-size:34px}
  .why-anchor-body .why-sub-label{font-size:14.5px}
  .why-stat-row{padding-left:0;padding-top:16px;margin-top:16px;border-left:none;border-top:1px solid #E5E5E5;gap:24px}
  .why-cat-roller-track li{font-size:15px}
  .why-collage{grid-template-columns:1fr 1fr}
  .stats-band{margin-top:48px}
  .stats-row{grid-template-columns:1fr 1fr;padding:20px 0}
  .stat-item{padding:18px 10px}
  .stat-item + .stat-item{border-left:none;border-top:none}
  .stat-item:nth-child(even){border-left:1px solid #E5E5E5}
  .stat-item:nth-child(n+3){border-top:1px solid #E5E5E5}
  .stat-num{font-size:clamp(22px,6vw,28px)}
  .stat-num-hero{font-size:clamp(28px,8.6vw,38px)}
  .stat-label{font-size:13.5px}
}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 22px;text-decoration:none;font-size:15px;font-weight:600;border:1px solid transparent}
.btn-red{background:var(--red);color:var(--bg)}
.btn-red:hover{background:var(--red-dark)}
/* Press feedback — every button and tappable card answers the press
   with a quick, springy settle instead of sitting stiff: controls
   dip to .96, small icon buttons a touch further, and cards press
   in place (a smaller dip than their hover lift, so a press reads
   as contact, not as another hover). Transitions live on the base
   rules so the release eases back out at the same pace. Reduced
   motion keeps the state change but drops the travel. */
.btn,.add-btn,.pill,.cart-btn,.heart,.menu-btn,.drawer-close,.qty button,.search-btn,.nav-search-form button,.mm-search button,nav.main a{transition:transform .18s cubic-bezier(.22,1,.36,1),background-color .3s ease,border-color .3s ease,color .2s ease,box-shadow .3s ease,backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease}
.btn:active,.add-btn:active{transform:scale(.96)}
.pill:active{transform:scale(.95)}
.cart-btn:active{transform:scale(.92)}
.heart:active{transform:scale(.86)}
.menu-btn:active,.drawer-close:active{transform:scale(.92)}
.qty button:active{transform:scale(.88)}
.nav-search-form button:active,.mm-search button:active{transform:scale(.95)}
nav.main a:active{transform:scale(.95)}
.card:active{transform:translateY(-1px) scale(.985);box-shadow:var(--shadow-sm)}
.why-bento-card:active{transform:translateY(-1px) scale(.99);box-shadow:var(--shadow-sm)}
.review-card:active{transform:translateY(-1px) scale(.99);box-shadow:var(--shadow-sm)}
.float-card:active{scale:.94}
@media (prefers-reduced-motion:reduce){
  .btn:active,.add-btn:active,.pill:active,.cart-btn:active,.heart:active,.menu-btn:active,.drawer-close:active,.qty button:active,.search-btn:active,.nav-search-form button:active,.mm-search button:active,nav.main a:active,.login-link:active,.card:active,.why-bento-card:active,.review-card:active{transform:none}
  .float-card:active{scale:1}
}
/* Shelf skeleton — shown while the grid (re)builds: on first load,
   on a category, sort or search change, and appended under the
   shelf while Show more fetches the next page. A skeleton card
   mirrors the real card box for box (same padding, same 3:2 thumb,
   same body rhythm), so the real cards land without any layout
   shift. The shimmer is one light sweep across a flat grey — no
   pulse, no glow. Reduced motion holds the grey still. */
.skel-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:10px 10px 16px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;pointer-events:none}
.skel{background:linear-gradient(100deg,#ECECEC 42%,#F8F8F8 50%,#ECECEC 58%);background-size:220% 100%;animation:skel-shimmer 1.15s linear infinite;border-radius:8px}
@keyframes skel-shimmer{from{background-position:130% 0}to{background-position:-90% 0}}
.skel-thumb{aspect-ratio:3/2;border-radius:18px;flex:none}
.skel-body{padding:14px 6px 0;display:flex;flex-direction:column;flex:1}
.skel-badge{width:38%;height:24px;border-radius:999px}
.skel-meta{width:64%;height:12px;margin-top:12px}
.skel-title{width:88%;height:20px;margin-top:10px}
.skel-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:16px}
.skel-price{width:52px;height:20px}
.skel-btn{width:104px;height:38px;border-radius:999px}
@media (max-width:640px){
  .skel-card{border-radius:24px}
  .skel-btn{flex:1 1 auto;height:36px;margin-left:12px}
}
@media (max-width:400px){
  .skel-card{padding:8px 8px 14px;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  .skel{animation:none}
}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{background:var(--red)}
.btn-line{border-color:var(--line-strong);color:var(--ink);background:var(--card)}
.btn-line:hover{background:var(--hover)}
.textlink{font-size:15px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.textlink:hover{color:var(--red);border-bottom-color:var(--red)}

/* Shop */
#why,#shop,#faq{scroll-margin-top:92px}
.shop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.shop-head h2{font-size:clamp(38px,5vw,58px)}
.count-line{margin-top:10px;text-wrap:pretty}
/* Shelf toolbar: a normal in-flow element above the grid — it scrolls
   away with the page and never sticks under the nav chip, so it can
   never cover cards sliding underneath it. The pills stay on one
   scrollable row instead of wrapping into a second row. */
.controls{display:flex;flex-wrap:nowrap;gap:12px;align-items:center;background:var(--bg);padding:12px 0 14px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.pills{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex:1 1 auto;min-width:0;padding:3px 2px}
.pills::-webkit-scrollbar{display:none}
.pill{border:1px solid var(--line-strong);background:var(--card);border-radius:999px;padding:10px 17px;font-size:14px;font-weight:500;color:var(--muted);flex:none;white-space:nowrap}
.pill:hover{color:var(--ink);border-color:var(--ink)}
.pill.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.controls-right{margin-left:auto;display:flex;gap:8px;flex-wrap:nowrap;flex:none}
.shop-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:var(--card);border-radius:999px;padding:10px 16px;min-width:210px}
.shop-search input{flex:1;border:0;outline:0;background:transparent;font-size:14px;min-width:0}
.shop-search input::placeholder{color:var(--muted)}
.sortsel{border:1px solid var(--line-strong);background:var(--card);border-radius:999px;padding:11px 16px;font-size:14px;font-weight:500;outline:0}
/* Sort — custom dropdown, not the browser's native picker. The
   button keeps the old select's pill look; the option panel
   unrolls below it in the same motion language as the mobile
   menu panel (fade + slight drop + clip unroll, expo-out), with
   the active option in red and a check at its right edge. */
.sortdd{position:relative;flex:none;z-index:40}
.sortbtn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:border-color .2s ease}
.sortbtn:hover{border-color:var(--ink)}
.sortbtn-chev{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.sortdd.open .sortbtn-chev{transform:rotate(180deg)}
.sort-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:224px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;clip-path:inset(0 0 100% 0 round 16px);transition:opacity .25s ease,transform .4s cubic-bezier(.22,1,.36,1),clip-path .4s cubic-bezier(.22,1,.36,1),visibility 0s linear .4s}
.sortdd.open .sort-menu{opacity:1;visibility:visible;transform:none;clip-path:inset(0 0 0% 0 round 16px);transition:opacity .25s ease,transform .4s cubic-bezier(.22,1,.36,1),clip-path .4s cubic-bezier(.22,1,.36,1),visibility 0s}
.sort-opt{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--body);white-space:nowrap}
.sort-opt:hover{background:var(--hover)}
.sort-opt .sort-check{width:16px;height:16px;flex:none;margin-left:auto;fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.sort-opt.on{color:var(--red);font-weight:600}
.sort-opt.on .sort-check{opacity:1}
@media (prefers-reduced-motion:reduce){
  .sort-menu,.sortbtn-chev{transition:none}
}
/* Shop — uniform compact grid. Card follows the reference
   product-card structure: a dominant image well (native 3:2, so no
   specimen letter is ever cropped) with wishlist top-right on the
   image, then a body that opens with the category badge above a
   footer of tag, title, and one price row. The whole card is the
   preview trigger: a click anywhere on it — image or body — opens
   the lightbox; only the wishlist heart and Add to cart act alone. */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:10px 10px 16px;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease,filter .25s ease;display:flex;flex-direction:column;position:relative;width:100%;min-width:0;cursor:pointer}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.load-more-wrap{display:flex;justify-content:center;margin-top:28px}
.load-more-wrap[hidden]{display:none}
.card-thumb{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;aspect-ratio:3/2;background:var(--hover)}
/* No wash over the image well in any state: an earlier build laid a
   white radial wash over the thumb on hover, and on touch a tap
   latched :hover so the wash stuck as a white glow. Hover feedback
   is the card's own lift and soft shadow, plus the image scale
   below — nothing else. */
.thumb-open{display:block;width:100%;padding:0;text-align:left;background:var(--hover)}
.thumb-open img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center;display:block;transition:transform .35s ease}
.card:hover .thumb-open img{transform:scale(1.03)}
.badge{align-self:flex-start;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.01em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:8px}
.heart{position:absolute;top:10px;right:10px;width:38px;height:38px;background:#fff;border:1px solid var(--line);border-radius:999px;display:grid;place-items:center;box-shadow:var(--shadow-sm);z-index:2}
.heart svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.8}
.heart.fav svg{fill:var(--red);stroke:var(--red)}
.card-body{padding:14px 6px 0;display:flex;flex-direction:column;flex:1;min-width:0}
.card-meta{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card h3{font-size:18px;margin-top:6px;line-height:1.25;overflow-wrap:break-word}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--red)}
/* Price row: one line, never wraps — price and button share the row,
   and the row is pinned to the card foot so prices line up across
   cards whose titles wrap to different lengths. */
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:nowrap;margin-top:auto;padding-top:12px}
.price{font-family:var(--mono);font-size:22px;font-weight:600;color:var(--red);white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
.price small{display:inline;font-family:var(--font);font-size:12px;font-weight:400;color:var(--muted);margin-left:6px;white-space:nowrap}
.add-btn{background:var(--ink);color:var(--bg);border-radius:999px;padding:11px 20px;font-size:14px;font-weight:600;flex:none;white-space:nowrap}
.add-btn:hover{background:var(--red)}
.empty{padding:56px 0;text-align:center}
.empty p{color:var(--muted);margin:10px 0 22px}


/* License page — a dedicated view in the same document, swapped
   with the homepage by the router script (#license-page). Pattern:
   Notion-style progressive tier cards (each tier only lists what
   it adds) plus a Fontspring-style "what you can use it for" list
   grouped by use — no comparison matrix anywhere. Same Mobbin
   world as the homepage: all white, Inter, 24px card radius,
   hairline #E5E5E5, red only on interaction and the hero accent.
   Tier limits are the font license terms from
   graphicted.com/license/, verbatim — no prices, no badges. */
#licensePage{padding-top:120px;padding-bottom:calc(var(--sec-gap)/2)}
#licensePage section{padding:0}
.licp-back{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--muted);text-decoration:none}
.licp-back:hover{color:var(--red)}
.licp-hero{max-width:760px;margin-top:28px}
.licp-hero h1{font-size:clamp(40px,6vw,64px);line-height:1.05}
.licp-hero h1 .accent{color:var(--red)}
.licp-hero .lede{margin-top:20px;max-width:640px}
.licp-hero .lede strong{color:var(--ink);font-weight:600}
.licp-tiers{margin-top:56px}
.licp-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.licp-card{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px 20px 24px;display:flex;flex-direction:column;transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .25s ease}
.licp-card:hover{box-shadow:var(--shadow)}
.licp-card:active{transform:scale(.99)}
.licp-card h3{font-size:17px;font-weight:700;letter-spacing:0}
.lic-for{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.licp-plus{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.5;font-weight:600;color:var(--ink)}
.licp-plus span{color:var(--muted);font-weight:500}
.licp-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 10px;margin-top:20px}
.licp-stat{min-width:0}
.licp-num{display:block;font-size:clamp(20px,2vw,27px);font-weight:700;letter-spacing:0;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow-wrap:normal}
.licp-num.small{font-size:clamp(16px,1.6vw,21px);line-height:1.2}
.licp-lab{display:block;font-size:13px;line-height:1.45;color:var(--muted);margin-top:5px}
.licp-feats{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
.licp-feats li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--body);font-variant-numeric:tabular-nums}
.licp-feats svg{width:16px;height:16px;flex:none;margin-top:3px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.licp-band{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px 48px;align-items:start}
.licp-band h3{font-size:17px;font-weight:700;letter-spacing:0}
.licp-band .licp-stats{grid-template-columns:repeat(3,1fr);margin-top:22px}
.licp-band .licp-feats{margin-top:22px}
.licp-band-cta p{font-size:17px;font-weight:600;color:var(--ink);letter-spacing:0;line-height:1.4}
.licp-band-cta .lede{font-size:15.5px;margin-top:10px}
.licp-band-cta .btn{margin-top:20px}
.licp-sec{margin-top:var(--sec-gap)}
.licp-sec-head{max-width:720px}
.licp-sec-head h2{font-size:clamp(32px,4.4vw,46px)}
.licp-sec-head .lede{margin-top:14px}
/* "What you can use it for" — Fontspring-style editorial rows:
   one full-width row per use, hairline-separated, drawn SVG
   illustration on the left and the answer set as type on the
   right. No chips, no cards: the covering tier is named in a
   sentence, with the tier itself in big red type. */
.licp-uses{margin-top:16px;display:flex;flex-direction:column}
.licp-use{display:grid;grid-template-columns:280px minmax(0,1fr);gap:8px 64px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.licp-use:last-child{border-bottom:1px solid var(--line)}
.licp-use-art{display:flex;align-items:center;justify-content:flex-start}
.licp-use-art svg{width:100%;max-width:240px;height:auto;display:block;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.licp-use-art svg .acc{stroke:var(--red)}
.licp-use-art svg .accf{fill:var(--red);stroke:none}
.licp-use-art svg .thin{stroke-width:1.6}
.licp-use-body{min-width:0}
.licp-use h3{font-size:clamp(27px,3.2vw,36px);font-weight:700;letter-spacing:0;line-height:1.12}
.licp-use-desc{color:var(--muted);font-size:16.5px;line-height:1.6;margin-top:12px;max-width:560px}
.licp-use-answer{margin-top:18px;font-size:clamp(19px,2.2vw,23px);line-height:1.35;font-weight:500;color:var(--ink)}
.licp-use-tier{font-size:1.45em;font-weight:700;color:var(--red);letter-spacing:0;white-space:nowrap}
.licp-faq-wrap{max-width:780px;margin:0 auto}
.licp-faq-wrap h2{font-size:clamp(32px,4.4vw,46px);text-align:center}
.licp-faq-wrap .lede{margin:16px auto 40px;text-align:center}
.licp-faq{position:relative}
.licp-faq .faq-a p a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.licp-faq .faq-a p a:hover{color:var(--red);text-decoration-color:var(--red)}
@media (max-width:1020px){
  .licp-cards{grid-template-columns:1fr 1fr}
  .licp-band{grid-template-columns:1fr}
  .licp-band .licp-stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  #licensePage{padding-top:104px}
  .licp-cards{grid-template-columns:1fr}
  .licp-band{padding:24px}
  .licp-band .licp-stats{grid-template-columns:1fr 1fr}
  .licp-use{grid-template-columns:1fr;gap:20px;padding:32px 0}
  .licp-use-art svg{max-width:190px}
  .licp-use-answer{margin-top:14px}
  .licp-sec{margin-top:72px}
  .licp-tiers{margin-top:40px}
}

/* License motion layer + tier finder — Linear-style motion (fast,
   transform/opacity only, staggered entrances, spring hover lift)
   plus a Sentry-style finder above the tier cards: three sliders
   (users, websites, monthly pageviews) whose values map onto the
   real cumulative tier limits from graphicted.com/license/. The
   matching card lights up with a soft red ambient glow while
   every other card stays at full opacity — the ring and glow are
   the only differentiators — a red ring FLIP-slides between cards
   (transform only), and the result limits roll digit by digit.
   Everything is inert under prefers-reduced-motion: no entrance,
   no lift, no ring slide, digits snap. */
.licp-tiers{position:relative}
.licp-ring{position:absolute;top:0;left:0;border:2px solid var(--red);border-radius:26px;pointer-events:none;opacity:0;z-index:3;will-change:transform}
.licp-ring.on{opacity:1}
.licp-card{transition:transform .18s cubic-bezier(.34,1.45,.64,1),box-shadow .25s ease}
.licp-band{transition:transform .18s cubic-bezier(.34,1.45,.64,1),box-shadow .25s ease}
.licp-card.is-active{box-shadow:0 24px 52px -18px rgba(196,51,51,.30),var(--shadow-sm)}
.licp-band.is-active{box-shadow:0 24px 52px -18px rgba(196,51,51,.30),var(--shadow-sm)}
.licp-card.is-active h3,.licp-band.is-active h3{color:var(--red)}
.licp-armed .licp-reveal{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.22,1,.36,1) var(--d,0s),transform .55s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.licp-armed .licp-reveal.in{opacity:1;transform:translateY(0)}
.licp-card.settled{transition:transform .18s cubic-bezier(.34,1.45,.64,1),box-shadow .25s ease}
.licp-card.settled:hover{transform:translateY(-4px)}
.licp-band.settled:hover{transform:translateY(-2px)}
.licp-finder{background:#fff;border:1px solid var(--line);border-radius:24px;padding:28px;margin-bottom:16px;position:relative;z-index:1}
.licp-finder h3{font-size:20px;font-weight:700;letter-spacing:0}
.licp-finder-sub{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:560px}
.licp-sliders{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:26px}
.licp-slider-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.licp-slider-top label{font-size:14px;font-weight:600;color:var(--ink)}
.licp-slider-val{font-size:14px;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.licp-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:999px;background:var(--line);outline-offset:6px;margin-top:14px;cursor:pointer;display:block}
.licp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(17,17,17,.18),0 4px 10px rgba(17,17,17,.10);cursor:grab;transition:transform .15s cubic-bezier(.34,1.45,.64,1)}
.licp-range::-moz-range-thumb{width:22px;height:22px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(17,17,17,.18),0 4px 10px rgba(17,17,17,.10);cursor:grab;transition:transform .15s cubic-bezier(.34,1.45,.64,1)}
.licp-range:active::-webkit-slider-thumb{transform:scale(1.18);cursor:grabbing}
.licp-range:active::-moz-range-thumb{transform:scale(1.18);cursor:grabbing}
.licp-range:focus-visible{outline:2px solid var(--red)}
.licp-result{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.licp-result-line{font-size:15.5px;color:var(--muted)}
.licp-result-line strong{color:var(--red);font-weight:700;font-size:17px}
.licp-odo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 14px;margin-top:18px}
.licp-odo-num{display:block;font-size:26px;font-weight:700;line-height:1.05;color:var(--ink);letter-spacing:0}
.licp-odo-num .odo-word{font-size:21px}
.licp-odo-lab{display:block;font-size:13px;line-height:1.45;color:var(--muted);margin-top:5px}
.odo{display:inline-flex;align-items:flex-start}
.odo-d{display:inline-block;height:1em;overflow:hidden;line-height:1}
.odo-strip{display:flex;flex-direction:column}
.odo-live .odo-strip{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.odo-c{display:block;height:1em;line-height:1}
.odo-t{display:inline-block;line-height:1}
@media (max-width:1020px){
  .licp-sliders{grid-template-columns:1fr;gap:22px}
  .licp-odo-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .licp-finder{padding:24px}
}
@media (prefers-reduced-motion:reduce){
  .licp-armed .licp-reveal{opacity:1;transform:none;transition:none}
  .licp-card,.licp-band,.licp-card.settled{transition:none}
  .licp-card.settled:hover,.licp-band.settled:hover{transform:none}
  .odo-live .odo-strip{transition:none}
  .licp-range::-webkit-slider-thumb,.licp-range::-moz-range-thumb{transition:none}
}

/* License comparison table — the Hairline UI pattern
   (hairlineui.com/ui/comparison-table) as the detailed layer
   below the tier cards: the five tiers side by side in a real
   table (plans are column headers, features are row headers,
   ticks read as Included / Not included), a red column outline
   that glides to the tier under the pointer in 520ms with a
   slight overshoot and settles back on Standart when the pointer
   leaves, feature groups that fold open and shut, plan headers
   that stick under the nav chip, and below 640px a plan switcher
   that shows one tier at a time, its column sliding in from the
   side you went. No prices (the tiers have none) and no featured
   badge — the resting column is Standart, the tier every purchase
   includes. Limits are the font license terms from
   graphicted.com/license/, cumulative exactly as the cards and
   the finder above present them. Reduced motion: the column
   jumps, folds are instant, nothing slides. */
.liccmp-wrap{position:relative;margin-top:40px}
.liccmp-glide{position:absolute;top:0;left:0;border:1.5px solid var(--red);background:rgba(196,51,51,.045);border-radius:16px;pointer-events:none;opacity:0;z-index:1;transition:transform .52s cubic-bezier(.34,1.28,.64,1),width .52s cubic-bezier(.34,1.28,.64,1),height .3s ease,opacity .25s ease;will-change:transform}
.liccmp-glide.on{opacity:1}
.liccmp-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;position:relative;z-index:2}
.liccmp-table th,.liccmp-table td{border-bottom:1px solid var(--line);padding:15px 14px;vertical-align:middle}
.liccmp-table thead th{position:sticky;top:84px;background:#fff;z-index:5;padding:18px 14px 16px;text-align:center;border-bottom:1px solid var(--line)}
.liccmp-table thead th.plabel{text-align:left}
.liccmp-plan{display:block;font-size:15px;font-weight:700;letter-spacing:0;color:var(--ink)}
.liccmp-plan-sub{display:block;font-size:12.5px;line-height:1.4;font-weight:500;color:var(--muted);margin-top:4px}
.liccmp-table tbody th[scope="row"]{text-align:left;font-weight:500;font-size:14.5px;line-height:1.45;color:var(--body)}
.liccmp-table td{text-align:center;font-size:14.5px;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}
.liccmp-no{color:var(--muted)}
.liccmp-check{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
.liccmp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.liccmp-grow th{padding:0;border-bottom:1px solid var(--line)}
.liccmp-gbtn{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:0;padding:22px 14px 13px;font:inherit;font-size:14px;font-weight:700;letter-spacing:0;color:var(--ink);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.liccmp-gbtn svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.22,1,.36,1),stroke .2s ease}
.liccmp-gbtn:hover svg{stroke:var(--red)}
.liccmp-gbtn[aria-expanded="false"] svg{transform:rotate(-90deg)}
.liccmp-gbtn:focus-visible{outline:2px solid var(--red);outline-offset:-2px;border-radius:8px}
.liccmp-cw{overflow:hidden}
.liccmp-hw{display:block}
/* Mobile switch entry: transforms do not render on table cells,
   so the slide runs on the cells' inner wrappers (.liccmp-cw in
   body rows, .liccmp-hw in the plan header). --dx is set inline
   by the switcher, signed by the direction of travel, so the
   incoming column enters from the side you went. */
.liccmp-enter{animation:liccmp-enter .38s cubic-bezier(.22,1,.36,1) both}
@keyframes liccmp-enter{from{opacity:0;transform:translateX(var(--dx,20px))}to{opacity:1;transform:translateX(0)}}
.liccmp-table.liccmp-folding td,.liccmp-table.liccmp-folding th{transition:padding-top .46s cubic-bezier(.22,1,.36,1),padding-bottom .46s cubic-bezier(.22,1,.36,1)}
.liccmp-table.liccmp-folding .liccmp-cw{transition:height .46s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.liccmp-switch{display:none}
@media (max-width:640px){
  .liccmp-glide{display:none}
  .liccmp-switch{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
  .liccmp-sbtn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s cubic-bezier(.34,1.45,.64,1)}
  .liccmp-sbtn:active{transform:scale(.96)}
  .liccmp-sbtn[aria-pressed="true"]{background:rgba(196,51,51,.06);border-color:var(--red);color:var(--red)}
  .liccmp-sbtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
  /* Two explicit shares, carried by the cells themselves: label
     cells take 57% and the one visible tier column 43%, so values
     stop squeezing into three cramped lines. The shares ride on
     the cells, not the colgroup — in a fixed layout Chromium
     leaves a switched-to column's cells at zero width after the
     switcher's display toggle, so fixed layout cannot be used
     here. */
  .liccmp-table{table-layout:auto}
  .liccmp-table thead th.plabel,.liccmp-table tbody th[scope="row"]{width:57%}
  .liccmp-table thead th.pcell,.liccmp-table td.pcell{width:43%}
  .liccmp-table th,.liccmp-table td{padding:13px 12px}
  .liccmp-table td{font-size:14px}
  .liccmp-table tbody th[scope="row"]{font-size:14px}
  .liccmp-table thead th{padding:16px 12px 14px}
  .liccmp-plan{font-size:14px}
  .liccmp-plan-sub{font-size:12px}
  /* The corner cell shows its label on phones instead of sitting
     as a tall blank block beside the tier name. */
  .liccmp-table thead th.plabel .liccmp-sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font-size:12px;font-weight:600;color:var(--muted)}
  /* The sticky header stays opaque on phones: the active tier's
     tint is the solid equivalent of the column tint, so group
     titles scrolling underneath no longer bleed through it. */
  .liccmp-wrap[data-mplan="0"] .liccmp-table thead th.p0,.liccmp-wrap[data-mplan="1"] .liccmp-table thead th.p1,.liccmp-wrap[data-mplan="2"] .liccmp-table thead th.p2,.liccmp-wrap[data-mplan="3"] .liccmp-table thead th.p3,.liccmp-wrap[data-mplan="4"] .liccmp-table thead th.p4{background:#FCF6F6}
  .liccmp-gbtn{padding:20px 12px 12px;justify-content:flex-start;gap:10px}
  .liccmp-wrap[data-mplan="0"] .pcell:not(.p0),.liccmp-wrap[data-mplan="1"] .pcell:not(.p1),.liccmp-wrap[data-mplan="2"] .pcell:not(.p2),.liccmp-wrap[data-mplan="3"] .pcell:not(.p3),.liccmp-wrap[data-mplan="4"] .pcell:not(.p4){display:none}
  .liccmp-wrap[data-mplan="0"] .p0,.liccmp-wrap[data-mplan="1"] .p1,.liccmp-wrap[data-mplan="2"] .p2,.liccmp-wrap[data-mplan="3"] .p3,.liccmp-wrap[data-mplan="4"] .p4{background:rgba(196,51,51,.045)}
}
@media (prefers-reduced-motion:reduce){
  .liccmp-glide{transition:none}
  .liccmp-gbtn svg{transition:none}
  .liccmp-sbtn{transition:none}
  .liccmp-sbtn:active{transform:none}
  .liccmp-enter{animation:none}
}

.review h3{font-size:clamp(34px,4.5vw,50px);text-align:center}
.review > p{color:var(--muted);margin:12px auto 0;max-width:600px;text-align:center}
/* Reviews — a carousel on the live Jokieyss pattern: no
   marquee, no prev/next buttons. The six cards ride one
   horizontal track, 16px apart. On desktop three fit at
   once, so the track scrolls through four positions with
   four dots below. On phones one card shows at a time,
   through six positions with six dots below — never a
   vertical stack. It advances on its own every 5 seconds
   and the reader can also move between cards with a
   horizontal swipe or the dots below. Autoplay pauses while
   the section is hovered, focused, or being dragged, and
   never runs under reduced motion. The finish stays
   Graphicted's own — the studio's dark red chevron artwork
   (assets/img/testimonial-card-bg.webp, brightened from the
   supplied photo so the chevrons read at card size) under
   white text with only a light scrim for contrast, a 20px
   radius, 26px by 30px of padding — while the card structure
   follows Jokieyss: a header row (42px initial avatar, 15px
   semibold name, 13px muted role) with the quote below at
   14px / 1.55. Hover is the gentle lift and soft shadow used
   across the page — no wash, no glow — and a press dips the
   card slightly (the :active rule sits with the other press
   states above). All six reviews are written out in full as
   finished quotes in the cards themselves. Apart from the
   track slide, the only motion
   is the staggered entrance armed by JS below; without JS the
   first position simply sits visible. */
/* Anchor jumps to this section stop clear of the fixed nav chip. */
#reviews{scroll-margin-top:96px}
.review-viewport{overflow:hidden;padding:12px 6px;margin:36px -6px 0}
.review-track{display:flex;gap:16px;transition:transform .55s cubic-bezier(.22,1,.36,1);touch-action:pan-y;will-change:transform}
.review-track.dragging{transition:none}
.review-card{position:relative;background-color:#C43333;background-image:linear-gradient(100deg,rgba(10,2,2,.30) 0%,rgba(10,2,2,.16) 55%,rgba(10,2,2,.20) 100%),url("assets/img/testimonial-card-bg.webp?v=104");background-size:cover;background-position:left center;background-repeat:no-repeat;border-radius:20px;padding:26px 30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-width:0;overflow:hidden;isolation:isolate;flex:0 0 calc((100% - 32px)/3);transition:transform .25s ease,box-shadow .25s ease;-webkit-tap-highlight-color:transparent}
.review-dots{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:20px}
@media (min-width:641px){
  .review-dot:nth-child(n+5){display:none}
}
.review-dot{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:rgba(17,17,17,.18);cursor:pointer;transition:width .3s ease,background-color .3s ease;-webkit-tap-highlight-color:transparent}
.review-dot.is-active{width:24px;background:var(--red)}
.review-dot:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.review-card:hover,.review-card:focus-within{transform:translateY(-2px);box-shadow:var(--shadow)}
.review-head{display:flex;align-items:center;gap:12px;min-width:0}
.review-avatar{width:42px;height:42px;border-radius:999px;background:#FFFFFF;display:grid;place-items:center;font-size:16px;font-weight:600;color:var(--red);flex:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.review-who{min-width:0}
.review-name{display:block;font-size:15px;font-weight:600;color:#FFFFFF;line-height:1.4;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.review-role{display:block;font-size:13px;color:rgba(255,255,255,.88);line-height:1.45;margin-top:2px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.review-quote{font-family:var(--font);font-size:14px;line-height:1.55;color:#FFFFFF;margin:16px 0 0;overflow-wrap:break-word;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.reviews-armed .review-rise{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,1,.36,1) var(--d,0s),transform .8s cubic-bezier(.22,1,.36,1) var(--d,0s)}
.reviews-in .review-rise{opacity:1;transform:none}
.reviews-in .review-card:hover,.reviews-in .review-card:focus-within{transform:translateY(-2px);box-shadow:var(--shadow)}
@media (prefers-reduced-motion:reduce){
  .reviews-armed .review-rise{opacity:1;transform:none;transition:none}
  .review-card:hover,.review-card:focus-within{transform:none;box-shadow:var(--shadow-sm)}
  .reviews-in .review-card:hover,.reviews-in .review-card:focus-within{transform:none;box-shadow:var(--shadow-sm)}
  .review-track{transition:none}
  .review-dot{transition:none}
}

/* FAQ — Mobbin white (#FFFFFF), same palette, Inter, no gradient,
   no eyebrow. Rows stay divider rows; the finish is a hover preview
   pill that glides behind the nearest question (never over its
   text), a measured-height open/close with an exponential ease-out
   and no overshoot, and a chevron that rotates 180deg in step with
   the panel (420ms opening, 340ms closing).
   The answer is never display:none: height + visibility animate,
   driven to a measured pixel target by JS. */
#faq{background:#FFFFFF}
.faq-wrap{max-width:780px;margin:0 auto}
.faq-wrap h2{font-size:clamp(38px,5vw,58px);text-align:center}
.faq-wrap .lede{margin:18px auto 48px;text-align:center}
#faqList{position:relative}
.faq-hover-pill{position:absolute;left:0;right:0;top:0;height:0;background:#F5F5F5;border:1px solid #E5E5E5;border-radius:16px;opacity:0;pointer-events:none;z-index:0;transition:top .38s cubic-bezier(.22,1,.36,1),height .38s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.faq-hover-pill.is-visible{opacity:1}
.faq-item{position:relative;z-index:1;border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-h{margin:0}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;text-align:left;padding:24px 8px;font-size:18px;font-weight:600;letter-spacing:0;line-height:1.45;color:var(--ink);background:transparent;position:relative}
.faq-q-text{flex:1 1 auto;min-width:0}
.faq-q:focus-visible{outline-offset:4px;border-radius:16px}
.faq-icon{position:relative;flex:none;width:36px;height:36px;display:grid;place-items:center;background:transparent;border:0;color:var(--red)}
.faq-icon svg{width:16px;height:16px;display:block;transform-origin:center;transform:rotate(0deg);transition:transform .34s cubic-bezier(.22,1,.36,1)}
.faq-item.open .faq-icon svg{transform:rotate(180deg);transition-duration:.42s}
.faq-a{height:0;overflow:hidden;visibility:hidden;will-change:height}
.faq-a-inner{padding:0 8px 26px}
.faq-a p{color:var(--muted);max-width:640px;font-size:16px;line-height:1.65}
@media (hover:none){
  .faq-hover-pill{display:none}
}
@media (max-width:640px){
  .faq-wrap .lede{margin:18px auto 36px}
  .faq-q{padding:22px 4px;gap:20px;font-size:17px}
  .faq-icon{width:34px;height:34px}
  .faq-a-inner{padding:0 4px 24px}
}
@media (prefers-reduced-motion:reduce){
  .faq-hover-pill,.faq-icon,.faq-icon svg{transition:none}
}

/* Closing CTA — dark, centred, no card: the section runs
   full width over the studio's chevron artwork
   (assets/img/closing-cta-bg.webp, cover, centred) with one light
   dark wash so the white type stays legible while the chevrons
   stay clearly visible. Cuberto pattern: an invitation
   headline, one line of subcopy, and a single white pill
   button. All type in the section is pure white; the button
   is the only action. Section padding stays symmetric top
   and bottom so the button sits centred in the block with
   no leftover void below it. */
.closing-section{background:linear-gradient(rgba(6,6,8,.30),rgba(6,6,8,.30)),url("assets/img/closing-cta-bg.webp") #0A0A0B center/cover no-repeat}
.closing-cta{max-width:720px;margin:0 auto;text-align:center}
.closing-cta h2{font-size:clamp(38px,5vw,58px);line-height:1.08;max-width:640px;margin:0 auto;color:#FFFFFF}
.closing-cta .lede{margin:20px auto 0;max-width:600px;color:#FFFFFF}
.closing-btn{display:inline-block;margin-top:32px;background:#FFFFFF;color:#0A0A0B;font-size:17px;font-weight:600;line-height:1;padding:18px 40px;border-radius:999px;text-decoration:none;transition:transform .18s cubic-bezier(.22,1,.36,1),background .2s ease}
.closing-btn:hover{background:#EDEDEF}
.closing-btn:active{transform:scale(.96)}
.closing-btn:focus-visible{outline:3px solid #FFFFFF;outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  .closing-btn{transition:none}
  .closing-btn:active{transform:none}
}

/* Footer */
footer{border-top:1px solid var(--line);padding:calc(var(--sec-gap)/2) 0 0;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:56px}
.foot-brand img{height:36px;width:auto}
.foot-brand p{color:var(--muted);font-size:14px;max-width:280px;margin-top:12px}
footer h4{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer ul a{text-decoration:none;font-size:14px}
footer ul a:hover{color:var(--red)}
footer ul span{font-size:14px;color:var(--body)}
/* Privacy Policy has no URL from the client yet, so it stays
   plain text, but renders in full color like the other footer
   items until a real URL replaces it. */
.foot-mail{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.foot-mail:hover{color:var(--red)}
.social-row{display:flex;gap:16px;flex-wrap:wrap}
@media (min-width:901px){
  .social-row{flex-direction:column;gap:12px;align-items:flex-start;flex-wrap:nowrap}
}
.social-row a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;font-weight:600}
.social-row img{width:18px;height:18px}
.social-row a:hover{color:var(--red)}
.foot-bottom{border-top:1px solid var(--line);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.watermark{font-size:clamp(64px,13.5vw,182px);font-weight:800;letter-spacing:0;line-height:.78;text-align:center;color:#F5F5F5;white-space:nowrap;user-select:none;margin-top:12px;transform:translateY(.16em)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:110;display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.show{display:flex}
.lightbox-back{position:absolute;inset:0;background:rgba(17,17,17,.62)}
.lightbox-panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;max-width:880px;width:100%;overflow:hidden;box-shadow:0 16px 40px rgba(17,17,17,.18);display:grid;grid-template-columns:1.25fr .75fr}
.lightbox-panel:focus{outline:none}
.lb-media{position:relative;background:var(--hover);min-height:320px}
.lb-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* While a preview image is still loading, the well shimmers with
   the shelf skeleton's sweep instead of showing the previous
   asset's picture under the new name. The class is set by JS on
   every render and cleared on the image's load/error; the step
   buttons keep their z-index above the sweep. */
.lb-media.is-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#ECECEC 42%,#F8F8F8 50%,#ECECEC 58%);background-size:220% 100%;animation:skel-shimmer 1.15s linear infinite;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .lb-media.is-loading::after{animation:none}
}
.lb-body{padding:30px 26px;display:flex;flex-direction:column;gap:10px}
.lb-body h3{font-size:26px;line-height:1.15}
.lb-body .lede{font-size:15px}
.lb-price{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--red)}
.lb-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.lb-count{color:var(--muted);margin-top:auto;padding-top:16px}
.lb-details{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.lb-details:hover{color:var(--red);text-decoration:underline}
.lb-close,.lb-step{position:absolute;z-index:3;display:grid;place-items:center;width:36px;height:36px;padding:0;color:var(--ink);background:rgba(255,255,255,.65);border:1px solid rgba(17,17,17,.08);border-radius:999px;box-shadow:none;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}
.lb-close svg,.lb-step svg{display:block;width:15px;height:15px}
.lb-close{top:14px;right:14px}
.lb-step{top:50%;transform:translateY(-50%)}
.lb-prev{left:14px}
.lb-next{right:14px}
.lb-close:hover,.lb-step:hover{background:rgba(255,255,255,.92);border-color:rgba(17,17,17,.14)}
.lb-close:active{transform:scale(.97)}
.lb-step:active{transform:translateY(-50%) scale(.97)}
.lb-close:focus-visible,.lb-step:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:999px}
@media (max-width:640px){
  .lb-close,.lb-step{width:36px;height:36px}
  .lb-close svg,.lb-step svg{width:15px;height:15px}
}

/* Cart */
.overlay{position:fixed;inset:0;background:rgba(17,17,17,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:80}
.overlay.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(420px,92vw);background:var(--bg);z-index:90;transform:translateX(105%);visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s;display:flex;flex-direction:column;border-left:1px solid var(--line)}
.drawer.show{transform:translateX(0);visibility:visible;transition:transform .3s ease,visibility 0s}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:18px}
.drawer-close{width:38px;height:38px;border:1px solid var(--line-strong);background:var(--card);border-radius:999px;display:grid;place-items:center;font-size:18px;flex:none}
.drawer-body{flex:1;overflow:auto;padding:0 24px;display:flex;flex-direction:column}
/* Cart item row — thumbnail left, then one stacked info column
   that carries everything else, so nothing competes for the
   same narrow line: title, category and the price each get
   their own line (the price never wraps), and the quantity
   stepper and Remove sit on their own controls row below,
   stepper left and Remove right with clear space between
   them. Generous row padding and gaps give the row room to
   breathe in both the mobile panel and the desktop drawer. */
.cart-item{display:flex;gap:16px;padding:24px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.cart-item img{width:80px;height:54px;object-fit:cover;border:1px solid var(--line);border-radius:12px;flex:none}
.cart-info{flex:1;min-width:0;display:flex;flex-direction:column}
.cart-info b{font-size:15.5px;font-weight:600;line-height:1.35;color:var(--ink);display:block}
.cart-cat{font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:3px;display:block}
.cart-price{font-size:15px;font-weight:600;line-height:1.3;color:var(--ink);margin-top:8px;white-space:nowrap;font-variant-numeric:tabular-nums;display:block}
.cart-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px}
.qty{display:flex;align-items:center;gap:10px;flex:none}
.qty button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line-strong);background:var(--card);border-radius:999px;font-size:16px;font-weight:600;line-height:1}
.qty span{min-width:20px;text-align:center;font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cart-rm{flex:none;border:0;background:none;padding:8px 2px;font-size:13px;font-weight:600;color:var(--red);text-decoration:underline;text-underline-offset:3px}
.drawer-foot{border-top:1px solid var(--line);padding:24px}
.drawer-foot[hidden]{display:none}
.drawer-foot .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:18px;font-weight:600;color:var(--ink);margin-bottom:18px}
.drawer-foot .row .mono{white-space:nowrap;font-size:20px;line-height:1.2;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cart-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:36px 16px 32px;color:var(--muted)}
.cart-empty-img{width:228px;max-width:72%;height:auto;display:block;margin:0 auto 22px}
.cart-empty p{margin:0;max-width:300px;line-height:1.55}
.cart-empty p+p{margin-top:8px}
.cart-empty .btn{margin-top:22px}
@media (max-width:640px){.cart-empty-img{width:220px}}
/* Cart on mobile (max-width:1024px) — a compact dropdown panel
   like the mobile menu panel, not the full-height side drawer:
   hung just below the navbar pill at the pill's own width
   (16px page margins, matching the pill's calc(100% - 32px);
   the script refines top/left/width from the pill's live rect
   on open, so the panel still tracks the pill once it has
   shrunk on scroll), rounded 24px, height fitted to its
   content so the empty state ends just below the Browse assets
   chip with the page visible underneath. A tall cart is capped
   by max-height and only the items list (.drawer-body) scrolls
   inside it, so the panel never stretches to the bottom of the
   screen. It opens and closes with the menu panel's unroll:
   clipped shut at its top edge, rolling down over .45s on the
   same ease-out. The backdrop drops below the pill at this
   width (z-index 69, like .mm-backdrop) so the pill stays
   undimmed above the panel; tapping the backdrop still closes.
   Desktop (above 1024px) keeps the right-side drawer above,
   untouched. */
@media (max-width:1024px){
  .overlay{z-index:69}
  .drawer{top:82px;left:16px;right:16px;width:auto;height:auto;max-height:calc(100dvh - 98px);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top center;clip-path:inset(0 0 100% 0 round 24px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1),clip-path .45s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s}
  .drawer.show{opacity:1;transform:none;clip-path:inset(0 0 0% 0 round 24px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1),clip-path .45s cubic-bezier(.22,1,.36,1),visibility 0s}
  .drawer-body{flex:1 1 auto;min-height:0}
  .drawer-foot{flex:none}
  .cart-empty{flex:none;padding:28px 16px 24px}
}
@media (max-width:640px){
  .drawer{top:74px;max-height:calc(100dvh - 90px)}
}
@media (max-width:1024px) and (prefers-reduced-motion:reduce){
  .drawer{transition:none}
}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:999px;font-size:14px;font-weight:600;z-index:120;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s cubic-bezier(.16,1,.3,1);max-width:90vw;display:flex;align-items:center;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.show.is-cart{pointer-events:auto;cursor:pointer}
.toast .toast-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:#2FA84F;color:#fff}
.toast .toast-ic svg{display:block}
.toast #toastMsg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
@media (prefers-reduced-motion:reduce){
  .toast{transition:none}
}
/* Section heading word rise — the Cuberto entrance, applied to
   every section heading on both pages, hero H1 included: each word sits inside an overflow-
   hidden mask and rises from translateY(110%) and opacity 0 into
   place, one word after another at a 60ms stagger on an
   exponential ease-out, the first time the heading scrolls into
   view. The split into word spans is done by JS only when motion
   is allowed, so without JS — or under prefers-reduced-motion —
   no masks exist and every heading simply renders in full. The
   mask's vertical padding keeps descenders (g, y, p) from being
   clipped at rest; the matching negative margin hands that space
   back, so the heading's layout never moves. */
.word-rise .wr-mask{display:inline-block;overflow:hidden;padding:.1em 0;margin:-.1em 0}
.word-rise .wr-word{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .9s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*60ms),opacity .9s cubic-bezier(.16,1,.3,1) calc(var(--i,0)*60ms);will-change:transform,opacity}
.word-rise.wr-in .wr-word{transform:translateY(0);opacity:1}
@media (prefers-reduced-motion:reduce){
  .word-rise .wr-word{transform:none;opacity:1;transition:none}
}
.reveal{opacity:1;transform:none}

@media (max-width:1024px){
  nav.main{display:none}
  .login-link{display:none}
  .menu-btn{display:flex}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .float-card{width:calc(var(--w,190px)*.74)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding-left:20px;padding-right:20px}
  .nav-chip{gap:4px;padding:5px 5px 5px 10px}
  /* Scrolled on phones: same compact pill, 72% wide, a touch
     shorter than the top state — smaller logo, wordmark, cart
     and hamburger so the narrow pill never crowds. */
  .nav-chip.is-scrolled{width:72%;padding:5px 5px 5px 11px}
  .nav-chip.is-scrolled .brand img{height:22px}
  .nav-chip.is-scrolled .brand span{font-size:16px}
  .nav-chip.is-scrolled .cart-btn{width:36px;height:36px}
  .nav-chip.is-scrolled .menu-btn{width:36px;height:36px}
  .brand{flex:1 1 auto;min-width:0}
  .brand img{height:24px}
  .brand span{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-right{gap:6px}
  .cart-btn{width:40px;height:40px}
  section{padding:72px 0}
  .hero341{padding:0}
  /* Mobile hero is content-height, not 100svh: with the content
     top-anchored, a full-viewport zone left a tall white void
     between the search row and the lower cards. The taller top
     padding opens a real band under the fixed nav pill for the
     top card pair, and the bottom padding is the stage the two
     lower card rows are positioned against, so the gaps between
     the search row and each card row stay even. */
  .hero-trail-zone{min-height:0;padding:184px 16px 254px;justify-content:flex-start}
  .hero-search-band{padding:0}
  .hero341 h1{font-size:clamp(52px,14.5vw,64px);line-height:.96}
  .hero341-eyebrow{margin-bottom:20px}
  .hero341-subcopy{margin-top:20px;font-size:16px;line-height:1.55;text-wrap:balance}
  .hero341-actions{width:100%;gap:6px;margin-top:28px}
  .hero341-actions .btn-red{flex:0 0 auto;white-space:nowrap;padding:12px 14px;font-size:13.5px}
  .logo-cloud{margin-top:36px}
  /* One set, two across: top two, bottom two. */
  .logo-cloud-set{flex-wrap:wrap;gap:28px 16px}
  .logo-cloud-item{flex:1 1 calc(50% - 8px);gap:8px}
  .logo-cloud-item img{height:26px;max-width:34px}
  .logo-cloud-item span{font-size:14px}
  .float-card{width:calc(var(--w,190px)*.60);border-radius:14px}
  /* The top pair sits in the band between the nav pill and the
     headline: a fixed 92px top (below the pill's ~66px bottom,
     clear even at the drift's top extreme) and half size, so the
     rotated, drifting cards end above the headline's first line
     instead of covering "Buy once." the way the old 9% top did. */
  .float-card.p1,.float-card.p2{width:calc(var(--w,190px)*.5);top:92px}
  .float-card.p1{left:3%}
  .float-card.p2{right:3%}
  /* The mid-side pair leaves the mobile ring: the hero content is
     top-anchored at this width, so the subcopy band sits at a fixed
     distance from the top while these cards are placed by percentage —
     at 27% they land on the subcopy's first lines and sit behind its
     text. The remaining six cards still frame the headline, the
     search row and the lower hero. Desktop and tablet keep all eight. */
  .float-card.p3,.float-card.p4{display:none}
  .float-card.p5{left:3%;top:69%}
  .float-card.p6{right:3%;top:69%}
  .float-card.p7{left:10%;bottom:4%}
  .float-card.p8{right:10%;bottom:4%}
  .trail-img{width:34vw;min-width:124px;max-width:168px}
  .trail-img.is-portrait{width:26vw;min-width:96px;max-width:128px}
  /* Toolbar is in-flow (not sticky): it stacks — one scrollable pill
     row, then search + sort on the second row — and scrolls away
     with the page. */
  #shop,#why,#faq{scroll-margin-top:84px}
  .controls{padding:10px 0 12px;gap:10px;margin-bottom:20px;flex-direction:column;align-items:stretch}
  .pills{width:100%}
  .controls-right{margin-left:0;width:100%;min-width:0;gap:10px}
  /* The heart stays on the image, top-right — it does not sit over
     the middle of a specimen word. The category badge lives in the
     card body above the tag line, kept short so the longest
     category names fit the narrow two-column cards without
     wrapping or truncating awkwardly. */
  .heart{top:8px;right:8px;width:34px;height:34px}
  .pill{padding:8px 14px;font-size:13.5px}
  .badge{font-size:10px;padding:6px 9px}
  .shop-search{padding:9px 14px;min-width:0;flex:1 1 0}
  .sortsel{padding:10px 13px;width:auto}
  /* The label stays centred in the pill: a phantom chevron-width
     spacer on the left balances the real chevron on the right. */
  .sortbtn::before{content:"";width:16px;flex:none}
  /* Price row stays on one line: the price qualifier hides here,
     and the button flexes to fill what is left after the price. */
  .price{font-size:20px}
  .price small{display:none}
  .card-foot{gap:8px}
  .add-btn{flex:1 1 auto;min-width:0;padding:10px 10px;font-size:13.5px;text-align:center}
  .card h3{font-size:16.5px}
  /* Tag lines wrap in the narrow two-column cards instead of
     truncating mid-phrase ("Display typeface · Glyphminds",
     "Display sans · 6 weights · Glyphminds"). */
  .card-meta{white-space:normal}
  .lightbox-panel{grid-template-columns:1fr;max-height:92dvh;overflow:auto}
  .lb-media{min-height:0;aspect-ratio:3/2}
  .lb-media img{position:relative}
  /* Reviews on phones: one card fills the viewport width, the
     dots appear below the track, and the section keeps the
     tighter 36px top gap (12px of it is the viewport's own
     shadow padding, so the margin drops to 24px). */
  .review-viewport{margin-top:24px}
  .review-card{flex-basis:100%}
  .review-dots{display:flex}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .controls-right{margin-left:0}
  .foot-grid{grid-template-columns:1fr}
  /* Watermark stays on one line at every phone width: never
     break the word (the old break-all split "Graphicted" mid-
     word at <=320px). Keep it nowrap and size it fluidly from
     the viewport so it always fits the padded wrap width. */
  .watermark{white-space:nowrap;word-break:normal;overflow-wrap:normal;font-size:clamp(28px,13.2vw,52px);letter-spacing:-.01em;max-width:100%}
}
/* Narrow phones (max-width:400px): tighten the hero action row a touch
   more so the longest search placeholder still reads in full beside
   Browse, without dropping below a comfortable touch height. */
@media (max-width:400px){
  .hero-trail-zone{padding-left:12px;padding-right:12px}
  .hero341 h1{font-size:clamp(50px,14.5vw,58px)}
  .hero341-actions .btn-red{padding:12px 11px;font-size:13px}
  .logo-cloud-set{gap:24px 8px}
  .logo-cloud-item{gap:6px}
  .logo-cloud-item img{height:22px;max-width:30px}
  .logo-cloud-item span{font-size:13px}
  .grid{gap:12px}
  .card{padding:8px 8px 14px;border-radius:20px}
  .card h3{font-size:16px}
  .price{font-size:19px}
  .add-btn{padding:9px 8px;font-size:13px}
}
/* Desktop navigation only (min-width:1025px): three equal zones so the
   logo, links and cart share one centreline and the chip aligns with
   the page grid. Mobile rules above are untouched. */
@media (min-width:1025px){
  .nav-chip{
    top:16px;
    width:calc(100% - 48px);
    max-width:1192px;
    height:60px;
    padding:0 8px 0 20px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:24px;
  }
  /* Scrolled on desktop: the pill narrows to about two-thirds of
     its wide width (max-width does the animating, so the shrink
     is smooth) and drops from 60px to 54px tall, with the logo,
     wordmark and cart button scaled down to match. */
  .nav-chip.is-scrolled{
    width:calc(100% - 48px);
    max-width:840px;
    height:54px;
    padding:0 6px 0 16px;
    gap:18px;
  }
  .nav-chip.is-scrolled .brand img{height:27px}
  .nav-chip.is-scrolled .brand span{font-size:17px}
  .nav-chip.is-scrolled .cart-btn{width:40px;height:40px}
  .brand{justify-self:start;height:44px}
  .brand img{height:30px}
  .brand span{font-size:18px;line-height:1}
  nav.main{justify-self:center;margin:0;gap:4px;height:44px;align-items:center;flex-wrap:nowrap;min-width:0}
  nav.main a{display:inline-flex;align-items:center;height:38px;padding:0 14px;line-height:1}
  .nav-right{justify-self:end;margin:0;height:44px}
  .cart-btn{width:44px;height:44px;padding:0}
  .menu-btn{display:none}
}
@media (min-width:1025px) and (max-width:1120px){
  .nav-chip{gap:16px;padding-left:18px}
  nav.main a{padding:0 11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .logo-cloud-item{transition:none}
  .reveal{opacity:1;transform:none}
}