/* home.css: the landing page (repo-root index.html) and /pricing/, owner-approved design "D2" (10-24).
 *
 * Source of truth for the look: docs/handoff/landing-2026-10/d2-editor.html. This is that page's
 * stylesheet, moved out so both pages share it, plus the parts the prototype did not need: the
 * Sign in link and account chip in the bar, a footer that still reaches every route on the site,
 * and the pricing page's table and questions.
 *
 * Inter 400 + 600 only (the editor's own UI face). One accent, Sun amber, and only on buttons.
 * On the light page the button carries a 1 px darker amber edge (--accent-edge, owner 10-24);
 * on the dark page the edge is transparent. Every grey is at least 4.5:1 on what it sits on.
 * Spacing on an 8 px scale.
 *
 * This page does NOT load /brand.css. The bar is <header class="bar">, not class="top", so
 * attr.js does not inject its brand.css burger sheet and scripts/sweep-nav.mjs does not swap
 * the shared site bar in. attr.js still fills the account chip by id.
 *
 * DARK BY DEFAULT (round 2, owner 10-25), whatever the OS says. :root carries the dark tokens and
 * [data-theme="light"] the light ones; nothing here reads prefers-color-scheme any more. The first
 * script in each page's <head> sets data-theme before anything paints (dark unless the visitor
 * chose light with the sun/moon button, kept in localStorage by /landing/home.js), so there is no
 * flash either way. */
:root{
  --bg:#141310; --bg2:#191814; --card:#1F1D18; --ink:#ECE8DF; --ink2:#B8B3A8; --ink3:#9A958A;
  --line:#2A2821; --line2:#3A372E; --accent:#F2A33A; --accent2:#F6B252; --accent-ink:#1F1A12; --accent-edge:transparent;
  --seg:#ECE8DF; --seg-ink:#141310; --paper:#F4F2EC;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 44px rgba(0,0,0,.45);
  --font:"Inter","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:144px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#FBFAF7; --bg2:#F4F2EC; --card:#FFFFFF; --ink:#24211C; --ink2:#57534A; --ink3:#6E6A61;
  --line:#E8E4DA; --line2:#D6D1C4; --accent:#F2A33A; --accent2:#E89428; --accent-ink:#1F1A12; --accent-edge:#B9761C;
  --seg:#24211C; --seg-ink:#FBFAF7; --paper:#F4F2EC;
  --shadow:0 1px 2px rgba(26,24,19,.05),0 16px 44px rgba(26,24,19,.10);
  color-scheme:light}
/* a screenshot in both themes: build-landing writes the pair, one is shown (and, lazy, fetched) */
.th-l{display:none}
:root[data-theme="light"] .th-l{display:block}
:root[data-theme="light"] .th-d{display:none}
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;display:block}
picture{display:block}
a{color:inherit}
h1,h2,h3{font-weight:600;margin:0;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:88px}
.skip{position:absolute;left:-9999px;top:8px;z-index:30;padding:8px 14px;border-radius:8px;background:var(--card);color:var(--ink);border:1px solid var(--line2)}
.skip:focus{left:16px}

.btn{display:inline-flex;align-items:center;font-weight:600;font-size:16px;text-decoration:none;line-height:1;
  padding:14px 22px;border-radius:10px;background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-edge);transition:background .15s}
.btn:hover{background:var(--accent2)}
/* the quiet button: same shape, no accent, for the second choice on a card */
.btn.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.quiet:hover{background:var(--bg2)}
.lnk{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px}
.lnk:hover{color:var(--ink);text-decoration-color:currentColor}

/* the bar */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:10}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:var(--s4);height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:18px;letter-spacing:-.01em}
.logo svg{width:22px;height:22px;flex:none}
.nav{display:flex;gap:var(--s3);font-size:15px;color:var(--ink2)}
.nav a{text-decoration:none}.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.acts{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.signin{font-size:15px;color:var(--ink2);text-decoration:none;white-space:nowrap}
.signin:hover{color:var(--ink)}
.rz-in #signinBtn{display:none}
.bar .btn{padding:10px 16px;font-size:14px;border-radius:9px;white-space:nowrap}

/* the account chip: attr.js fills it from /api/me and unhides it */
.acct{position:relative}
.acct>button{all:unset;cursor:pointer;display:block;border-radius:50%}
.acct>button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.acct-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:var(--bg2);border:1px solid var(--line2);font-weight:600;font-size:14px;line-height:1;text-transform:uppercase}
.acct-av img{width:100%;height:100%;object-fit:cover;display:block}
.acct-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:232px;max-width:calc(100vw - 32px);display:grid;padding:6px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:20}
.acct-who{display:grid;gap:2px;padding:8px 10px 10px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:14px}
.acct-who span{font-size:13px;color:var(--ink3);overflow-wrap:anywhere}
.acct-menu a,.acct-menu button{all:unset;cursor:pointer;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink2)}
.acct-menu a:hover,.acct-menu button:hover{background:var(--bg2);color:var(--ink)}
.acct-menu a:focus-visible,.acct-menu button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* round 2 (owner 10-25): the theme button, the language menu and, on a phone, the menu that holds
   the links, Sign in, the theme and the languages. The menus are <details>, so they open without
   script; home.js closes them on Escape or a click outside, and one at a time. */
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;min-width:36px;padding:0 8px;border-radius:9px;color:var(--ink2);font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.ico-btn:hover{color:var(--ink);background:var(--bg2)}
.ico-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
.theme-btn .i-moon,:root[data-theme="light"] .theme-btn .i-sun,.m-theme .i-moon,:root[data-theme="light"] .m-theme .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-moon,:root[data-theme="light"] .m-theme .i-moon{display:block}
html:not(.js) [data-theme-btn],html:not(.js) .m-row{display:none}
.lang{position:relative}
.lang[open]>summary,.mnav[open]>summary{color:var(--ink);background:var(--bg2)}
.pop{position:absolute;right:0;top:calc(100% + 10px);min-width:180px;display:grid;padding:6px;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:20}
.pop a,.m-langs a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px;border-radius:8px;font-size:14px;color:var(--ink2);text-decoration:none}
.pop a:hover,.m-langs a:hover{background:var(--bg2);color:var(--ink)}
.pop a[aria-current],.m-langs a[aria-current]{color:var(--ink);font-weight:600}
.pop a[aria-current]::after,.m-langs a[aria-current]::after{content:"";width:9px;height:5px;margin-right:2px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.pop a:focus-visible,.m-langs a:focus-visible,.m-links a:focus-visible,.m-signin:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.mnav{display:none}
.mnav .i-shut,.mnav[open] .i-open{display:none}
.mnav[open] .i-shut{display:block}
.m-menu{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--s2) max(20px,env(safe-area-inset-right,0px)) var(--s3) max(20px,env(safe-area-inset-left,0px));
  background:var(--bg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:grid;gap:4px}
.m-links{display:grid}
.m-links a,.m-signin{display:block;padding:12px 4px;font-size:17px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.m-signin{display:none}
.m-row{display:flex;align-items:center;justify-content:space-between;padding:8px 4px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink2)}
.m-h{display:flex;align-items:center;gap:8px;margin-top:var(--s2);padding:0 4px;font-size:13px;font-weight:600;color:var(--ink3)}
.m-langs{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;margin-top:4px}
.rz-in .m-signin{display:none !important}

/* the auto-detect bar: once, at the foot of the screen, in the language it offers; fixed, so it
   moves nothing on the page */
.lang-hint{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:25;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 12px;width:max-content;max-width:calc(100vw - 32px);
  padding:12px 12px 12px 18px;background:var(--card);color:var(--ink);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);font-size:15px}
.lang-hint p{margin-right:4px}
.lang-hint .acts-hint{display:flex;gap:8px}
.lang-hint .btn{padding:9px 16px;font-size:14px;border-radius:9px}

/* hero: short words, then the screen */
.hero{padding-top:var(--s7);text-align:center}
.hero h1{font-size:clamp(30px,3vw,40px);line-height:1.15;letter-spacing:-.022em}
.hero .sub{text-wrap:balance;font-size:18px;color:var(--ink2);margin:var(--s2) auto 0;max-width:60ch}
.hero .btn{margin-top:var(--s4)}
.stage{margin-top:var(--s6)}
.seg{display:inline-flex;padding:4px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.seg button{all:unset;cursor:pointer;padding:8px 18px;border-radius:9px;font-weight:600;font-size:14px;color:var(--ink2)}
.seg button[aria-selected="true"]{background:var(--seg);color:var(--seg-ink)}
.seg button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cap{font-size:14px;color:var(--ink3);margin-top:var(--s2);min-height:1.6em}
.win{margin-top:var(--s3);border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);text-align:left}
.win img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* sections */
.sec{padding-top:var(--s8)}
.head{text-align:center;max-width:60ch;margin:0 auto}
h2{font-size:clamp(24px,2.2vw,30px);line-height:1.25}
.head p,.copy p{color:var(--ink2);margin-top:var(--s1)}

.film .win{max-width:1040px;margin:var(--s5) auto 0}
.film video{width:100%;height:auto;aspect-ratio:16/9;background:#000}

/* one feature = a title, one sentence, one real screen */
.feat{display:grid;grid-template-columns:4fr 8fr;gap:var(--s6);align-items:center}
.feat.flip{grid-template-columns:8fr 4fr}
.feat.flip .copy{order:2}
.copy p{max-width:34ch}
.copy .lnk{display:inline-block;margin-top:var(--s2);font-size:15px}
.shot{border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.shot img{width:100%;height:auto}
.shot.narrow{width:100%;max-width:520px;justify-self:center}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.chip{margin:0;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.chip img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.chip figcaption{padding:10px 14px;font-size:14px;color:var(--ink2);border-top:1px solid var(--line)}

/* ── FEATURES (round 3, owner 10-25; draft docs/handoff/landing-r3-1025/features-draft.html) ──
   The hero's mode tab again, then per mode a row of big standout cards and a card per tool group.
   A card's picture sits on the white artboard in both themes, as the editor's does. */
.fx-tabs{display:flex;justify-content:center;margin-top:var(--s4)}
.fx-note{text-align:center;font-size:14px;color:var(--ink3);margin-top:var(--s2)}
.fx-k{font-size:13px;font-weight:600;color:var(--ink3);letter-spacing:.02em;margin:var(--s5) 0 var(--s2)}
.hl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
.hl-c{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s,transform .2s}
.hl-c:hover{border-color:var(--line2);transform:translateY(-2px)}
.hl-v{position:relative;aspect-ratio:16/10;background:#fff;overflow:hidden}
.hl-v video,.hl-v>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hl-v>svg{position:absolute;inset:0;width:100%;height:100%}
.hl-v>.tag-pro{position:absolute;top:10px;left:10px;z-index:2}
.has-clip .hl-v{cursor:pointer}
.hl-t{padding:14px 16px 16px}
.hl-t h3{font-size:15px;line-height:1.4;letter-spacing:-.01em}
.hl-t p{color:var(--ink2);font-size:13.5px;line-height:1.55;margin-top:4px}
.gr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.g h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:15px;line-height:1.4;letter-spacing:-.01em}
.g h3 .tag-pro{font-size:11px;padding:0 7px}
.g h3 small{margin-left:auto;color:var(--ink3);font-weight:400;font-size:12px;font-variant-numeric:tabular-nums}
.gi{width:20px;height:20px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.g ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.g li{font-size:12.5px;line-height:1.5;padding:3px 9px;border-radius:7px;border:1px solid var(--line2);color:var(--ink2)}
/* the Design cards draw with real items */
.fx-stack,.fx-one,.fx-mock,.fx-mosaic{position:absolute;inset:0;display:block}
.fx-stack img{position:absolute;top:12%;height:76%;width:auto;aspect-ratio:1;object-fit:cover;border-radius:6px;box-shadow:0 6px 18px rgba(26,24,19,.18)}
.fx-stack .d0{left:8%;transform:rotate(-6deg)}
.fx-stack .d1{left:50%;transform:translateX(-50%);z-index:1}
.fx-stack .d2{right:8%;transform:rotate(6deg)}
.fx-one img{position:absolute;left:50%;top:10%;height:80%;width:auto;aspect-ratio:1;transform:translateX(-50%);object-fit:cover;border-radius:6px;box-shadow:0 6px 18px rgba(26,24,19,.18)}
.fx-mock{background:#ECE8DF}
.fx-mock .mk-wrap{position:absolute;left:50%;top:50%;width:224px;height:168px;transform:translate(-50%,-50%) scale(var(--mk-k,1))}
.fx-mock .mk-wrap+.mk-wrap{opacity:0}
.fx-mock .mk{transform:none}
.fx-mosaic{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:6px;padding:8px;background:#ECE8DF}
.fx-mosaic img{width:100%;height:100%;object-fit:cover;border-radius:6px;background:#fff}
/* motion: light, and none at all for anyone who asked for less */
@keyframes fx-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(-18px)}}
@keyframes fx-pulse{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes fx-draw{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@keyframes fx-shadow{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,8px)}}
@keyframes fx-hue{0%,100%{filter:none}50%{filter:hue-rotate(120deg)}}
@keyframes fx-face{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
@keyframes fx-ants{to{stroke-dashoffset:-22}}
@keyframes fx-wipe{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.35)}}
@keyframes fx-split{0%,100%{transform:scaleX(1)}50%{transform:scaleX(1.85)}}
@keyframes fx-bar{0%,100%{transform:translateX(0)}50%{transform:translateX(59px)}}
@keyframes fx-deal{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
@keyframes fx-xfade{0%,30%{opacity:1}36%,94%{opacity:0}100%{opacity:1}}
.a-slide{animation:fx-slide 3.2s ease-in-out infinite}
.a-pulse{animation:fx-pulse 3.2s ease-in-out infinite}
.a-draw{stroke-dasharray:260;animation:fx-draw 2.6s ease-in-out infinite alternate}
.a-shadow{animation:fx-shadow 3s ease-in-out infinite}
.a-hue,.a-hueimg{animation:fx-hue 4s ease-in-out infinite}
.a-hue.d1{animation-delay:-1.3s}.a-hue.d2{animation-delay:-2.6s}
.a-face1{animation:fx-face 3s ease-in-out infinite}.a-face2{animation:fx-face 3s ease-in-out -1s infinite}.a-face3{animation:fx-face 3s ease-in-out -2s infinite}
.a-fade{animation:fx-pulse 2.8s ease-in-out infinite}
.a-ring{animation:fx-ants 1.2s linear infinite}
.a-ants{animation:fx-ants 1s linear infinite}
.a-wipe{transform-origin:30px 0;animation:fx-wipe 3.6s ease-in-out infinite}
.a-split{transform-origin:30px 0;animation:fx-split 3.6s ease-in-out infinite}
.a-bar{animation:fx-bar 3.6s ease-in-out infinite}
.fx-stack .d1{animation:fx-deal 3s ease-in-out infinite}
.fx-mock .a-xfade{animation:fx-xfade 9s linear infinite}
.fx-mock .a-xfade.d1{animation-delay:-6s}.fx-mock .a-xfade.d2{animation-delay:-3s}
@media (prefers-reduced-motion:reduce){
  .hl-v *,.fx-stack .d1{animation:none !important}
  .fx-mock .mk-wrap+.mk-wrap{opacity:0}
  .hl-c,.hl-c:hover{transform:none}
}

/* ── the floating mode rail (round 3): the page's one mode switch once both tabs have scrolled
   away. home.js toggles .on; hidden it is inert (no focus, no clicks) and invisible. A vertical bar
   at the left edge where the gutter is wide enough (1360 px and up, the 1200 px column plus a 80 px
   rail each side), a small pill at the foot elsewhere. */
.mrail{position:fixed;z-index:20;display:flex;gap:4px;padding:5px;border-radius:14px;background:var(--card);border:1px solid var(--line2);box-shadow:var(--shadow);
  left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));flex-direction:row;opacity:0;visibility:hidden;transform:translate(-50%,12px);
  transition:opacity .22s,transform .22s,visibility 0s linear .22s}
.mrail.on{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .22s,transform .22s,visibility 0s}
.mrail button{all:unset;box-sizing:border-box;cursor:pointer;padding:8px 14px;border-radius:9px;font-weight:600;font-size:13px;line-height:1.2;color:var(--ink2);text-align:center}
.mrail button:hover{color:var(--ink)}
.mrail button[aria-pressed="true"]{background:var(--seg);color:var(--seg-ink)}
.mrail button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
body:has(.lang-hint) .mrail{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 76px)}
@media (min-width:1360px){
  .mrail{left:16px;top:50%;bottom:auto;flex-direction:column;transform:translate(-12px,-50%)}
  .mrail.on{transform:translate(0,-50%)}
  body:has(.lang-hint) .mrail{bottom:auto}
}
@media (prefers-reduced-motion:reduce){ .mrail,.mrail.on{transition:none} }

/* ── the story rows (round 3): the same alternating picture and words, each one benefit ── */
.story .copy h2 .tag-pro{margin-left:8px;vertical-align:.2em}

/* ── THE LIBRARY (round 3, owner 10-25): tabs over two rows of real items ──────────────────────
   Two levels of tabs: the three groups (the hero's segmented control) and then their kinds, each
   with its count and its Free / Free + Pro mark. A kind's panel is two rows of cards that run edge
   to edge. With no script, or with motion reduced, a row is a plain row you swipe; home.js copies
   a row's cards until it is wider than the screen twice over and sets it drifting (.run), the
   second row the other way, paused while the pointer is over it, while the section is off screen
   and while the tab is not the one shown. A card is one height in a kind (168 px, 126 on a phone),
   its width from --r, so the copies line up exactly. */
.lib2{margin-top:var(--s4)}
.lib-groups{display:flex;justify-content:center}
.lk-bar{margin-top:var(--s3)}
/* kind tabs: words only, the open one underlined in amber (owner 10-26: no counts, no Free marks, no pill) */
.lk-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px}
.lk-tabs button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;padding:8px 2px 10px;font-size:15px;line-height:1.3;color:var(--ink3);white-space:nowrap;transition:color .15s}
.lk-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .2s}
.lk-tabs button:hover{color:var(--ink)}
.lk-tabs button[aria-selected="true"]{color:var(--ink);font-weight:600}
.lk-tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.lk-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.lk-tabs button,.lk-tabs button::after{transition:none}}
.lk-tabs .tag-pro,.lk-tabs .tag-free,.lk-sum .tag-pro,.lk-sum .tag-free{font-size:11px;padding:0 7px}
.lk-p{margin-top:var(--s4)}
.mq2{--h:240px;--mk-k:1.4286;max-width:3840px;margin:0 auto;padding:6px 0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.mq2::-webkit-scrollbar{display:none}
.mq2+.mq2{margin-top:10px}
.mq2-t{display:flex;width:max-content;padding:0 24px}
.mq2.run{overflow:hidden;scroll-snap-type:none}
.mq2.run .mq2-t{padding:0;animation:mq2 var(--mq-d,60s) linear infinite;will-change:transform}
.mq2.run[data-dir="r"] .mq2-t{animation-direction:reverse}
@keyframes mq2{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--mq-w,0px)),0,0)}}
@media (any-hover:hover){ .mq2.run:hover .mq2-t{animation-play-state:paused} }
.lib2.off .mq2-t,.lk-p[hidden] .mq2-t{animation-play-state:paused}
.lt{position:relative;flex:none;display:block;height:var(--h);width:calc(var(--h) * var(--r,1.3333));margin-right:12px;border-radius:12px;overflow:hidden;background:#F4F2EC;scroll-snap-align:start;
  box-shadow:inset 0 0 0 1px rgba(36,33,28,.08);transition:transform .18s;text-decoration:none}
a.lt:hover{transform:translateY(-2px)}
a.lt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lt img{width:100%;height:100%;display:block;object-fit:cover}
.lt-contain img{object-fit:contain;padding:var(--pad,10%)}
.lt-contain.lt img{background:#F4F2EC}
.lt>.tag-pro{position:absolute;top:6px;left:6px;font-size:11px;padding:0 7px}
.lt-spec{display:grid;place-items:center;height:72%;font-size:calc(var(--h) * .36);line-height:1;color:#24211C}
.lt-fname{display:block;padding:0 10px;font-size:13px;line-height:1.3;color:#57534A;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-mock{background:#ECE8DF}
/* a photo mockup: the photo, and a template warped onto its surface by a matrix3d build-landing
   computed for a 224 x 168 stage; the stage is scaled to the card */
.mk{position:absolute;left:0;top:0;width:224px;height:168px;transform-origin:0 0;transform:scale(var(--mk-k,1));overflow:hidden}
.mk img{position:absolute;max-width:none;object-fit:fill;padding:0}
.mk-d{position:absolute;left:0;top:0;transform-origin:0 0;background-size:cover;background-position:center}
.mk-c{position:absolute}
.lk-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 20px;margin-top:var(--s3);font-size:15px}
.lk-sum{display:inline-flex;align-items:center;gap:8px;color:var(--ink2);font-variant-numeric:tabular-nums}
.lib-note{text-align:center;max-width:70ch;margin:var(--s5) auto 0;font-size:14px;color:var(--ink3);text-wrap:balance}
@media (prefers-reduced-motion:reduce){ .lt,a.lt:hover{transition:none;transform:none} }

/* price: two cards (owner 10-25), Free and Pro, Pro raised on an amber edge */
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);max-width:840px;margin:var(--s5) auto 0;align-items:stretch}
.plan{border-radius:16px;padding:var(--s4);background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.plan.pro{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow);transform:translateY(-8px)}
.plan .btn{margin-top:var(--s4);align-self:flex-start}
.plan .acts-end{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.card-note{margin-top:var(--s4);font-size:13px;color:var(--ink3)}
/* Buy now (owner 10-26): a quiet text link on its own line under the trial button, not a second button */
.plan .buy-now{flex-basis:100%;font-size:14px;margin-top:2px}
.price-alt{font-size:14px;color:var(--ink3);margin-top:2px}
button.btn{border:0;font-family:inherit;cursor:pointer}
.hero-note,.close-note{font-size:14px;color:var(--ink3);margin-top:var(--s2)}
/* the Pro tag: Agent Connect's heading and the library tiles with premium items */
.tag-pro,.tag-free{display:inline-block;vertical-align:middle;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.6;letter-spacing:.01em;white-space:nowrap}
.tag-pro{color:var(--accent-ink);background:var(--accent)}
.tag-free{color:#3B372F;background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(36,33,28,.14)}
h3 .tag-pro{margin-left:8px;transform:translateY(-1px)}
.plan h2,.plan h3{font-size:16px;line-height:1.6;letter-spacing:-.015em}
.p-hero .plans{text-align:left}
.plan .for{font-size:14px;color:var(--ink3);margin-top:2px}
.price{font-size:36px;font-weight:600;letter-spacing:-.02em;margin-top:var(--s1);line-height:1.2}
.price small{font-size:14px;font-weight:400;color:var(--ink3);letter-spacing:0;margin-left:6px}
.plan ul{list-style:none;padding:0;margin:var(--s3) 0 0;display:grid;gap:10px;font-size:15px;color:var(--ink2)}
.plan li{padding-left:22px;position:relative}
.plan li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:5px;border-left:1.5px solid var(--ink3);border-bottom:1.5px solid var(--ink3);transform:rotate(-45deg)}
.plans-more{text-align:center;margin-top:var(--s3);font-size:15px}

/* Agent Connect: small, for developers */
.agent{max-width:840px;margin:var(--s6) auto 0;border-radius:16px;border:1px solid var(--line);padding:var(--s4);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center}
.agent h3{font-size:18px}
.agent p{color:var(--ink2);font-size:15px;margin-top:var(--s1)}
.agent .lnk{display:inline-block;margin-top:var(--s2);font-size:15px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2);counter-reset:s;font-size:15px;color:var(--ink2)}
.steps li{counter-increment:s;display:flex;gap:var(--s2);align-items:baseline}
.steps li::before{content:counter(s);color:var(--ink3);font-variant-numeric:tabular-nums;min-width:1ch}

/* closing */
.close{margin-top:var(--s8);padding:var(--s7) 0;background:var(--bg2);border-top:1px solid var(--line);text-align:center}
.close .btn{margin-top:var(--s3)}

/* footer: the prototype's one quiet line, with the site's links above it so every route stays reachable */
.foot{padding:0 0 var(--s5);font-size:14px;color:var(--ink3);background:var(--bg2)}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}
.foot-cols{display:grid;grid-template-columns:1fr 2fr 1fr 1fr;gap:var(--s4);padding:var(--s5) 0 var(--s4);border-top:1px solid var(--line)}
.foot-cols>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.foot-cols .fh{color:var(--ink);font-weight:600;margin-bottom:4px}
/* fourteen libraries in two short columns rather than one long one */
.foot-cols>.foot-lib{display:block;columns:2;column-gap:var(--s3)}
.foot-lib .fh{column-span:all;margin-bottom:12px}
.foot-lib a{display:table;margin-bottom:8px;break-inside:avoid}
.foot-base{display:flex;gap:var(--s2) var(--s3);flex-wrap:wrap;justify-content:space-between;padding-top:var(--s3);border-top:1px solid var(--line)}
/* Explore (landing i18n 10-25): the template categories, SEO pages and guides the old homepage
   menus linked. Text links in the footer's own size and grey, flowing in rows, so they add three
   short blocks to the footer and nothing to the page above it. */
.explore{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);padding:var(--s5) 0 var(--s4);border-top:1px solid var(--line)}
.explore .fh{color:var(--ink);font-weight:600;margin-bottom:12px}
.explore ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
/* the seven languages, in the line under the columns */
.langs{display:flex;flex-wrap:wrap;gap:4px 14px}
.langs a[aria-current]{color:var(--ink)}

/* Other scripts (landing i18n 10-25). Inter has no Thai, CJK or Hangul, so each locale page loads
   its Noto face (400 and 600, as the handoff chose for Thai) and the stack names it straight after
   Inter: Latin words and digits stay in the editor's face, the rest falls through to Noto. */
html:lang(th){--font:"Inter","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif}
html:lang(ja){--font:"Inter","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,system-ui,sans-serif}
html:lang(ko){--font:"Inter","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
html:lang(zh){--font:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif}
/* Negative tracking is tuned for Latin capitals: it pushes Thai vowels and tone marks into their
   neighbours and squeezes CJK, whose glyphs are already set on a full square. */
html:is(:lang(th),:lang(ja),:lang(ko),:lang(zh)) :is(h1,h2,h3,.price){letter-spacing:0}
/* Thai stacks up to two marks above the base letter and one below, so the Latin leading on the
   headings (1.15 and 1.25) clips them. */
html:lang(th) body{line-height:1.75}
html:lang(th) :is(.hero,.p-hero) h1{line-height:1.45}
html:lang(th) h2{line-height:1.5}
/* a Thai display line breaks at its spaces, between phrases, never inside one (build-landing wraps
   each phrase of a heading or a short line in .nw) */
.nw{white-space:nowrap}
html:is(:lang(ja),:lang(ko),:lang(zh)) :is(.hero,.p-hero) h1{line-height:1.35}
html:is(:lang(ja),:lang(ko),:lang(zh)) h2{line-height:1.4}
/* Korean breaks between words, never inside one; Japanese headings break at phrase boundaries
   where the browser knows how (Chromium 119+), and fall back to the default elsewhere. */
html:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
html:lang(ja) :is(h1,h2,h3,.sub,.cap){word-break:auto-phrase}

/* pricing page */
.p-hero{padding-top:var(--s7);text-align:center}
.p-hero h1{font-size:clamp(30px,3vw,40px);line-height:1.15;letter-spacing:-.022em}
.p-hero .sub{text-wrap:balance;font-size:18px;color:var(--ink2);margin:var(--s2) auto 0;max-width:60ch}
.p-note{text-align:center;font-size:14px;color:var(--ink3);margin-top:var(--s3)}
/* Monthly / Yearly (round 2): the hero's segmented control, as a radio group; hidden until home.js
   can drive it, so a page without script shows the monthly price and its "or a year" line */
.period{margin-top:var(--s4)}
.period button[aria-checked="true"]{background:var(--seg);color:var(--seg-ink)}
.period .save{margin-left:8px;padding:1px 7px;border-radius:999px;font-size:12px;color:var(--accent-ink);background:var(--accent)}
.p-hero .plans{margin-top:var(--s5)}
/* the comparison: five groups, each a <details> with its own table; one table on a wide screen,
   folding groups on a phone */
.cmp{max-width:1040px;margin:var(--s5) auto 0;border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.cmp-cols{display:grid;grid-template-columns:minmax(0,1fr) 168px 168px;padding:16px 0 16px 20px;font-weight:600;font-size:15px;border-bottom:1px solid var(--line)}
.cmp-t col.v{width:168px}
.cmp-cols span:not(:first-child){text-align:center}
.cmp-g>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;background:var(--bg2);border-bottom:1px solid var(--line)}
.cmp-g>summary h3{font-size:14px;letter-spacing:.02em;color:var(--ink2)}
.cmp-g .chev{display:none;transition:transform .15s}
.cmp-g[open] .chev{transform:rotate(180deg)}
.cmp-g:last-child .cmp-t tr:last-child>*{border-bottom:0}
.cmp-t{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px}
.cmp-t th,.cmp-t td{padding:13px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp-t tbody th{font-weight:400;color:var(--ink)}
.cmp-t td{text-align:center;color:var(--ink2);font-variant-numeric:tabular-nums}
.cmp-sub{display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--ink3)}
.cmp-t td.yes::before{content:"";display:inline-block;width:12px;height:6px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(-45deg)}
.cmp-t td.no::before{content:"";display:inline-block;width:12px;height:2px;border-radius:1px;background:var(--line2);transform:translateY(-4px)}
/* how the trial works: three steps */
.trial{list-style:none;padding:0;max-width:1040px;margin:var(--s5) auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.trial li{border-radius:16px;padding:var(--s4);background:var(--card);border:1px solid var(--line)}
.t-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--bg2);color:var(--ink);margin-bottom:var(--s2)}
.t-ic .ico{width:22px;height:22px}
.trial h3{font-size:17px}
.trial p{color:var(--ink2);margin-top:var(--s1);font-size:15px}
.faq{max-width:1040px;margin:var(--s5) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s6)}
.faq h3{font-size:17px}
.faq p{color:var(--ink2);margin-top:var(--s1);font-size:15px}

/* a group of the comparison only folds on a phone; on a wide screen its summary is a header row */
@media (min-width:701px){ .cmp-g>summary{pointer-events:none} }

/* the bar: below this width the links, the theme and the languages move into the menu (the widest
   bar, Spanish, needs about 1,045 px; measured 10-25, 89 px to spare at 1,100) */
@media (max-width:1099px){
  .nav,.bar .theme-btn,.bar .lang{display:none}
  .mnav{display:block}
}

/* phone */
@media (max-width:900px){
  .wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .nav{display:none}
  .acts{gap:12px}
  .bar .btn{padding:9px 14px}
  .hero,.p-hero{padding-top:var(--s6)}
  .hero h1,.p-hero h1{font-size:28px}
  .hero .sub,.p-hero .sub{font-size:16px}
  .stage{margin-top:var(--s5)}
  .seg{display:flex}
  .seg button{flex:1 1 auto;text-align:center;padding:8px 6px;white-space:nowrap}
  .win,.shot,.chip{border-radius:10px}
  .sec{padding-top:var(--s7)}
  .film .win{margin-top:var(--s4)}
  .feat,.feat.flip{grid-template-columns:1fr;gap:var(--s3)}
  .feat.flip .copy{order:0}
  .chips{gap:12px}
  .chip figcaption{padding:8px 10px;font-size:13px}
  .plans{grid-template-columns:1fr;margin-top:var(--s4)}
  .plan{padding:var(--s3)}
  .plan.pro{transform:none}
  .trial{grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s4)}
  .trial li{padding:var(--s3)}
  .agent{grid-template-columns:1fr;gap:var(--s3);padding:var(--s3);margin-top:var(--s5)}
  .close{margin-top:var(--s7);padding:var(--s6) 0}
  .foot-cols{grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3);padding-top:var(--s5)}
  .foot-cols>.foot-lib{grid-column:1/-1;order:-1}
  .explore{grid-template-columns:1fr;gap:var(--s3);padding-top:var(--s5)}
  .explore ul{gap:6px 16px}
  .cmp,.faq{margin-top:var(--s4)}
  .faq{grid-template-columns:1fr;gap:var(--s3)}
  .hl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-k{margin-top:var(--s4)}
}
/* a phone: the standout cards become a row you swipe, the groups one column, the library's kind
   tabs one line you swipe, and its cards a size smaller */
@media (max-width:600px){
  .hl{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(-1 * max(20px,env(safe-area-inset-left,0px)));padding:0 max(20px,env(safe-area-inset-left,0px)) 4px;scroll-padding:0 20px}
  .hl::-webkit-scrollbar{display:none}
  .hl-c{scroll-snap-align:start}
  .gr{grid-template-columns:minmax(0,1fr)}
  .lk-tabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:2px 20px 4px}
  .lk-tabs::-webkit-scrollbar{display:none}
  .mq2{--h:150px;--mk-k:.893}
  .mq2-t{padding:0 20px}
  .lt{margin-right:10px;border-radius:10px}
  .lk-p{margin-top:var(--s3)}
}
/* the comparison on a phone: narrower value columns, and every group folds */
@media (max-width:700px){
  .cmp-cols{grid-template-columns:minmax(0,1fr) 88px 88px;padding-left:16px;font-size:14px}
  .cmp-t col.v{width:88px}
  .cmp-t th,.cmp-t td{padding:12px 8px 12px 16px;font-size:14px}
  .cmp-t td{padding:12px 8px}
  .cmp-g>summary{cursor:pointer;padding:14px 16px}
  .cmp-g .chev{display:block;color:var(--ink3)}
}
/* a small phone: Sign in moves into the menu, so the logo, the button and the menu fit */
@media (max-width:440px){
  .bar .signin{display:none}
  .m-signin{display:block}
  .lang-hint{left:16px;right:16px;transform:none;width:auto;justify-content:space-between}
}
/* the narrowest phones: the bar keeps the logo mark, the button and the menu on one line */
@media (max-width:359px){
  .logo span{display:none}
  .bar .wrap{gap:var(--s2)}
  .acts{gap:8px}
  .bar .btn{padding:9px 12px}
  .seg button{padding:8px 3px;font-size:12.5px}
}

/* scroll reveal (owner 10-26), driven by home.js section 9; nothing is hidden without html.rv */
html.rv [data-rv]{opacity:0;transform:translate3d(var(--rx,0),var(--ry,28px),0);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s);will-change:opacity,transform}
html.rv [data-rv].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.rv [data-rv]{opacity:1;transform:none;transition:none}}

/* features grids: two rows, the second half faded into the page, Show more / Show less (owner 10-26) */
.clamp{position:relative;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1)}
.clamp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(to bottom,transparent,var(--bg) 92%);pointer-events:none;transition:height .3s}
.clamp.shut::after{height:55%}
.clamp-btn{all:unset;box-sizing:border-box;cursor:pointer;display:block;position:relative;z-index:1;margin:-20px auto 0;padding:10px 22px;border-radius:999px;background:var(--card);border:1px solid var(--line2);color:var(--ink);font-weight:600;font-size:14px;transition:border-color .15s,background .15s}
.clamp-btn:hover{border-color:var(--ink3)}
.clamp-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.clamp-btn[aria-expanded="true"]{margin-top:var(--s2)}
.clamp + .clamp-btn + *{margin-top:var(--s4)}
@media (prefers-reduced-motion:reduce){.clamp,.clamp::after{transition:none}}

/* story rows, owner 10-26: the pro kit as tool tiles, the three modes taking turns, real templates,
   and the row links quieter in their own colour */
.story .copy .lnk{color:var(--ink3);text-decoration-color:var(--line2);font-size:15px}
.story .copy .lnk:hover{color:var(--accent)}
.kit{list-style:none;margin:0;padding:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border-radius:14px;background:#24221E;border:1px solid var(--line);box-shadow:var(--shadow)}
.kt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;background:#2E2B26;color:#ECE8DF;font-size:13px;line-height:1.25;min-width:0}
.kt svg{flex:none;width:24px;height:24px;color:#ECE8DF}
.kt svg .f{fill:currentColor}
.kt svg .s{fill:none;stroke:currentColor}
.kt span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.kt.star{background:rgba(242,169,59,.12);box-shadow:inset 0 0 0 1px rgba(242,169,59,.35)}
.kt.star svg{color:var(--accent)}
.modes3{position:relative;aspect-ratio:16/11.5}
.m3{position:absolute;margin:0;width:82%;left:0;top:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--card);cursor:pointer;
  --o:0;transform:translate(calc(var(--o) * 9%),calc(var(--o) * 9%)) scale(calc(1 - var(--o) * .05));z-index:calc(3 - var(--o));opacity:calc(1 - var(--o) * .28);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
.m3 img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.tplwall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tw{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;background:var(--paper);box-shadow:var(--shadow);animation:twf 6s ease-in-out infinite}
.tw.d1,.tw.d4{animation-delay:-2s;transform:translateY(16px)}
.tw.d2,.tw.d5{animation-delay:-4s}
@keyframes twf{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:700px){.kit{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px}}
.tw{transition:opacity .45s ease}
.tw.out{opacity:0}
/* the files row: the File menu zoomed in with Open picked, the file types under it */
.fmock{display:grid;gap:18px;justify-items:center}
.fm-zoom{position:relative;width:min(100%,460px);border-radius:14px;background:#24221E;border:1px solid var(--line);box-shadow:var(--shadow);padding-bottom:18px;overflow:hidden}
.fm-bar{display:flex;gap:4px;padding:8px 10px;background:#1C1A17;border-bottom:1px solid rgba(255,255,255,.06);font-size:15px;color:#A9A397;white-space:nowrap;overflow:hidden}
.fm-bar>*{padding:5px 11px;border-radius:7px}
.fm-bar b{background:#3A362F;color:#fff;font-weight:600}
.fm-menu{list-style:none;margin:6px 0 0 10px;padding:6px;width:72%;border-radius:10px;background:#2E2B26;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.fm-menu li{display:flex;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:7px;font-size:17px;color:#ECE8DF}
.fm-menu kbd{font:inherit;font-size:13px;color:#8E887C}
.fm-menu li.hot{background:var(--accent);color:var(--accent-ink);font-weight:600}
.fm-menu li.hot kbd{color:var(--accent-ink);opacity:.75}
.fm-menu li.sep{padding:0;height:1px;margin:5px 4px;background:rgba(255,255,255,.08)}
.fm-cur{position:absolute;left:38%;top:134px;width:26px;height:26px;fill:#fff;stroke:#111;stroke-width:1.3;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.fm-types{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ft{position:relative;width:54px;height:66px;border-radius:6px 16px 6px 6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#141310;background:#ECE8DF}
.ft::before{content:"";position:absolute;right:0;top:0;width:16px;height:16px;border-radius:0 0 0 5px;background:rgba(0,0,0,.18)}
.ft.vec{background:#F2A93B}.ft.doc{background:#E86A5A;color:#fff}.ft.img{background:#7FB8E8}.ft.own{background:#B99CF0}
/* the browser row: a browser title bar over the shot */
.bw-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#1C1A17;border-bottom:1px solid rgba(255,255,255,.06)}
.bw-bar i{width:11px;height:11px;border-radius:50%;background:#4A463F}
.bw-bar i:nth-child(1){background:#E86A5A}.bw-bar i:nth-child(2){background:#F2B84B}.bw-bar i:nth-child(3){background:#6BC07A}
.bw-tab{margin-left:10px;padding:4px 14px;border-radius:7px 7px 0 0;background:#2E2B26;color:#ECE8DF;font-size:12px}
.bw-url{flex:1;max-width:340px;margin-left:8px;padding:4px 12px;border-radius:999px;background:#2E2B26;color:#A9A397;font-size:12px}
@media (prefers-reduced-motion:reduce){.m3{transition:none}.tw{animation:none}}
/* owner 10-26: the standout cards and the tool groups are two blocks, spaced like the story rows */
.fx-sec .clamp + .clamp-btn + .fx-k{margin-top:var(--s8)}
@media (max-width:700px){.fx-sec .clamp + .clamp-btn + .fx-k{margin-top:var(--s7)}}
/* library cards with no card behind the art (owner 10-26): graphics and frames float on the page; the
   black line icons are inverted so they read on the dark page */
.lt.lt-bare,.lt-contain.lt.lt-bare img{background:transparent;box-shadow:none}
.lt-bare img{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
:root:not([data-theme="light"]) .lt-inv img{filter:invert(1)}
/* the three-modes row: a switch above the shots whose pill slides along as they take turns (owner 10-26) */
.modes3-box{display:grid;gap:18px;justify-items:start}
.modes3-box .modes3{width:100%}
.m3-seg{position:relative;display:inline-flex;padding:4px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.m3-seg button{all:unset;position:relative;z-index:1;cursor:pointer;padding:8px 18px;border-radius:9px;font-weight:600;font-size:14px;color:var(--ink2);transition:color .35s}
.m3-seg button.on{color:var(--seg-ink)}
.m3-thumb{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:9px;background:var(--seg);transition:transform .55s cubic-bezier(.2,.7,.2,1),width .55s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.m3-thumb,.m3-seg button{transition:none}}