/* FormatYard site styles. Direction PG (owner Q28/Q29 a, 22 Oct 2026): the tool is the hero in an app window (from
   Gumloop), light large type, mono uppercase labels, a black pill nav and one accent panel (from Pylon). */

@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --ink: #18181B; --ink-2: #3F3F46; --muted: #71717A; --faint: #A1A1AA;
  --line: #E4E4E7; --line-soft: #F0F0EE; --bg: #FBFBFA; --panel: #FFFFFF; --tile: #F4F4F5; --well: #FCFCFB;
  /* the accent (owner 22 Oct 2026: one set of tokens so the whole site can change colour in one place) */
  --acc: #C2410C; --acc-deep: #9A3412; --acc-hi: #D9480F; --acc-bright: #EA580C; --acc-rgb: 194 65 12; --acc-bright-rgb: 234 88 12;
  --acc-tint: #FFF9F5; --acc-tint-2: #FFF3EA; --acc-art: #E3A27E;
  --accent: var(--acc); --ok: #067647; --ok-bg: #DCFAE6; --err: #B42318; --err-bg: #FEF3F2;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --wrap: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); }
a { color: var(--ink); }
a:hover { color: var(--ink-2); }
img, svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* nav (owner Q32 a, 22 Oct 2026): a news strip, then a light bar with a Tools menu that shows every tool with its icon
   and an orange call to action; on phones only the logo and a menu button, which opens a full panel */
.nav-shell { position: sticky; top: 0; z-index: 20; background: rgba(251,251,250,0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; }
.nav-shell.scrolled { border-bottom-color: var(--line); }
.strip { margin: 0; background: var(--ink); color: #E4E4E7; font-size: 13px; text-align: center; padding: 8px 16px; }
.strip a { color: #fff; text-underline-offset: 3px; }
.strip .pill { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; background: var(--acc); color: #fff; border-radius: 4px; padding: 2px 6px; margin-right: 8px; }
.nav { max-width: var(--wrap); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.brand:hover { color: var(--ink); }
/* logo (owner Q40 a, Q41, 22 Oct 2026): the folded F page; the name in lowercase with "yard" in grey */
.brand-y { color: var(--muted); }
.nav-links { display: flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 500; }
.nav-links > a, .dd-btn { color: var(--ink-2); text-decoration: none; padding: 0 12px; height: 40px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; font: inherit; background: none; border: 0; cursor: pointer; }
.nav-links > a:hover, .dd-btn:hover, .dd-btn[aria-expanded="true"] { color: var(--ink); background: var(--tile); }
.dd-btn svg { transition: transform .15s; }
.dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd { position: relative; }
.mega { position: absolute; left: 0; top: calc(100% + 8px); width: 580px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -20px rgba(24,24,27,0.35); padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mega[hidden] { display: none; }
.mega a, .m-tools a { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.mega a:hover, .m-tools a:hover { background: var(--tile); color: var(--ink); }
.mega b, .m-tools b { display: block; font-size: 14px; font-weight: 500; }
.mega em, .m-tools em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-left: 6px; }
.mega a > span > span, .m-tools a > span > span { font-size: 12.5px; color: var(--muted); }
.mega a[aria-disabled="true"] .fs, .m-tools a[aria-disabled="true"] .fs { opacity: 0.55; }
.btn-go { background: var(--acc); color: #fff; }
.btn-go:hover { background: var(--acc-deep); color: #fff; }
.nav-go { margin-left: auto; min-height: 40px; }
/* phone menu button (owner Q42 b5, 22 Oct 2026): three bare lines of three lengths in a 44 px tap area, no box;
   open, the outer two cross and the middle one fades */
.burger { display: none; margin-left: auto; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border-radius: 10px; border: 0; background: none; color: var(--ink); cursor: pointer; transition: background .2s, transform .15s; }
.burger:hover { background: var(--tile); }
.burger:active { transform: scale(0.94); }
.bi { position: relative; width: 18px; height: 14px; }
.bi i { position: absolute; right: 0; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .25s cubic-bezier(.2,.8,.2,1), top .25s, width .25s, opacity .2s; }
.bi i:nth-child(1) { top: 1px; width: 11px; }
.bi i:nth-child(2) { top: 6px; width: 18px; }
.bi i:nth-child(3) { top: 11px; width: 13px; }
.burger[aria-expanded="true"] .bi i { top: 6px; width: 18px; }
.burger[aria-expanded="true"] .bi i:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] .bi i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .bi i:nth-child(3) { transform: rotate(-45deg); }
.m-menu { display: none; }
.strip .short { display: none; }

.btn { min-height: 38px; padding: 0 14px; border-radius: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; min-height: 44px; padding: 0 16px; border-radius: 9px; font: 500 14px/1 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #27272A; color: #fff; }
.btn-light { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-light:hover { background: var(--tile); color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }

/* page head */
.head { padding: 64px 0 36px; display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; justify-content: space-between; }
.head h1 { margin: 10px 0 0; font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 1.03; letter-spacing: -0.04em; }
.head p { margin: 0; max-width: 440px; font-weight: 300; font-size: 18px; line-height: 1.55; color: #27272A; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

/* the upload stage, as on gumloop.com (owner, 22 Oct 2026): a soft grey frame holding the app window */
.stage { padding: 0 20px; }
.panel { max-width: var(--wrap); margin: 0 auto; border-radius: 18px; background: rgba(240,240,238,0.94); border: 1px solid var(--line); padding: 28px; display: flex; justify-content: center; }
.app { flex: 1 1 auto; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 40px -16px rgba(24,24,27,0.18); overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.app-bar b { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.app-bar span { margin-left: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.app-body { display: flex; min-height: 440px; }
.side { flex: 0 0 210px; border-right: 1px solid var(--line-soft); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.side .mono { font-size: 11px; color: var(--faint); margin: 6px 8px 8px; }
.side .mono + .mono, .side a + .mono { margin-top: 14px; }
.side a { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; min-height: 40px; }
.side a:hover { background: var(--tile); color: var(--ink); }
.side a[aria-current="page"] { background: var(--tile); color: var(--ink); font-weight: 500; }
.side a .soon { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--faint); }
.main { flex: 999 1 400px; min-width: 0; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.main h2 { margin: 0; font-weight: 400; font-size: 24px; letter-spacing: -0.03em; }
.main .sub { margin: 2px 0 0; font-weight: 300; font-size: 14px; color: #52525B; }
.aside { flex: 1 1 240px; min-width: 0; border-left: 1px solid var(--line-soft); padding: 22px 18px; background: var(--well); display: flex; flex-direction: column; gap: 14px; }
.aside ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--ink-2); }
.aside li { display: flex; gap: 10px; align-items: flex-start; }
.aside li svg { flex: none; margin-top: 3px; }

/* each state fills the rest of the window, so the drop zone reaches the bottom (owner, 22 Oct 2026) */
.main > [data-state] { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.main > [data-state][hidden] { display: none; }
.main > [data-state="empty"] .drop { min-height: 340px; }

/* tool icons: one family (assets/icons/tools.svg), each tool its own job symbol and colour */
.ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--c, var(--ink-2)); background: color-mix(in srgb, var(--c, #71717A) 13%, #fff); }
.ico svg { width: 16px; height: 16px; }
.ico.lg { width: 40px; height: 40px; border-radius: 11px; }
.ico.lg svg { width: 20px; height: 20px; }
.ico.sm { width: 26px; height: 26px; border-radius: 7px; background: var(--tile); color: var(--ink); }
.ico.sm svg { width: 14px; height: 14px; }
.t-pdf { --c: var(--acc); } .t-view { --c: #0F766E; } .t-old { --c: #4B3BFF; } .t-dxf { --c: #A16207; }
.t-dxfv { --c: #0E7490; } .t-dxfp { --c: #BE185D; } .t-pdfd { --c: #475569; }
.side a .ico { width: 24px; height: 24px; border-radius: 7px; }
.side a .ico svg { width: 14px; height: 14px; }
.side a[aria-disabled="true"] { color: var(--muted); }
.side a { text-transform: uppercase; font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em; }
.title-row { display: flex; align-items: center; gap: 12px; }

/* tool icons in use: F3, a solid colour file page with a white symbol and the format name (owner Q31, 22 Oct 2026) */
.fs { flex: none; display: block; filter: drop-shadow(0 2px 3px rgba(24,24,27,0.12)); }

/* the output panel on the right: one picture, three short lines, one privacy line (owner: less crowded) */
.aside { gap: 20px; padding: 22px 20px; }
.aside > .mono { margin: 0; font-size: 11px; color: var(--faint); }
.deck { display: flex; justify-content: center; align-items: flex-end; padding: 22px 12px 18px; background: var(--tile); border-radius: 12px; }
.deck .sheet { position: relative; width: 74px; aspect-ratio: 1 / 1.414; background: #fff; border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 8px 16px -10px rgba(24,24,27,0.35); margin-left: -18px; background-image: linear-gradient(var(--line-soft), var(--line-soft)), linear-gradient(var(--line-soft), var(--line-soft)); background-size: 58% 1px, 40% 1px; background-position: 9px 14px, 9px 22px; background-repeat: no-repeat; }
.deck .sheet:first-child { margin-left: 0; transform: rotate(-6deg) translateY(4px); }
.deck .sheet:nth-child(2) { z-index: 1; }
.deck .sheet:last-child { width: 58px; z-index: 2; transform: rotate(6deg) translateY(4px); }
.deck .sheet span { position: absolute; left: 7px; bottom: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted); }
.gets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.gets li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink); }
.private { margin: auto 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding-top: 14px; border-top: 1px solid var(--line-soft); }
.private svg { color: var(--ink-2); }
.out-m { display: none; }
.tile { align-items: center; justify-content: flex-start; }
.tile > span:last-child { margin-left: auto; }

/* drop zone (owner 22 Oct 2026: modern, with a premium hover): a quiet white field on a fine CAD sheet grid (Q37 a) and a dashed
   edge; on hover the edge turns orange and starts to move, a warm light follows the pointer and lights the grid under it,
   and the two files spread apart; while a file is dragged over it the edge goes solid and the files close up */
.drop { --mx: 50%; --my: 45%; position: relative; isolation: isolate; overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: 16px; padding: 44px 20px; cursor: pointer; text-align: center; background: linear-gradient(#fff, #FCFBFA); box-shadow: 0 1px 2px rgba(24,24,27,0.04); transition: box-shadow .3s, background .3s, transform .3s cubic-bezier(.2,.8,.2,1); }
.drop::before, .drop::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.drop::before { background: linear-gradient(#ECECE9 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, #ECECE9 1px, transparent 1px) 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(75% 85% at 50% 50%, #000 20%, transparent 100%); mask-image: radial-gradient(75% 85% at 50% 50%, #000 20%, transparent 100%); }
.drop::after { background: radial-gradient(300px circle at var(--mx) var(--my), rgb(var(--acc-bright-rgb) / 0.10), transparent 70%), linear-gradient(rgb(var(--acc-bright-rgb) / 0.35) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgb(var(--acc-bright-rgb) / 0.35) 1px, transparent 1px) 0 0 / 24px 24px; -webkit-mask-image: radial-gradient(240px circle at var(--mx) var(--my), #000, transparent 75%); mask-image: radial-gradient(240px circle at var(--mx) var(--my), #000, transparent 75%); opacity: 0; transition: opacity .3s; }
.drop-edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.drop-edge rect { x: 0.75px; y: 0.75px; width: calc(100% - 1.5px); height: calc(100% - 1.5px); rx: 16px; fill: none; stroke: #D4D4D8; stroke-width: 1.5; stroke-dasharray: 7 6; transition: stroke .25s, stroke-width .25s; }
.drop:hover, body.dragging .drop { box-shadow: 0 1px 2px rgba(24,24,27,0.04), 0 22px 44px -22px rgb(var(--acc-rgb) / 0.35); }
.drop:hover::after, body.dragging .drop::after { opacity: 1; }
.drop:hover .drop-edge rect, body.dragging .drop-edge rect { stroke: var(--acc-bright); animation: fy-march 0.9s linear infinite; }
.drop:focus-within .drop-edge rect { stroke: var(--acc); }
.drop:focus-within { box-shadow: 0 0 0 3px rgb(var(--acc-bright-rgb) / 0.22); }
.drop.over { background: linear-gradient(var(--acc-tint), var(--acc-tint-2)); box-shadow: 0 0 0 6px rgb(var(--acc-bright-rgb) / 0.12), 0 26px 52px -22px rgb(var(--acc-rgb) / 0.45); transform: scale(1.01); }
.drop.over .drop-edge rect { stroke: var(--acc); stroke-width: 2; stroke-dasharray: none; animation: none; }
@keyframes fy-march { to { stroke-dashoffset: -13; } }
.drop-art { display: flex; align-items: center; gap: 10px; color: var(--acc-art); margin-bottom: 4px; }
.drop-art .df { display: block; filter: drop-shadow(0 10px 14px rgba(24,24,27,0.18)); transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s; }
.drop-art .df.a { transform: rotate(-6deg); animation: fy-float 4s ease-in-out infinite; }
.drop-art .df.b svg path:first-child { fill: var(--acc); }
.drop-art .df.b { transform: rotate(5deg); animation: fy-float 4s ease-in-out infinite 0.6s; }
.drop:hover .df.a { transform: translate(-8px, -3px) rotate(-11deg); }
.drop:hover .df.b { transform: translate(8px, -3px) rotate(10deg); filter: drop-shadow(0 16px 20px rgb(var(--acc-rgb) / 0.35)); }
.drop-art .arrow path:first-child { transition: color .25s; }
.drop:hover .arrow, body.dragging .arrow { color: var(--acc-bright); }
.drop:hover .arrow path:first-child, body.dragging .arrow path:first-child { animation: fy-dash 0.6s linear infinite; }
@keyframes fy-dash { to { stroke-dashoffset: -7; } }
.drop.over .df.a { transform: translate(14px, 0) rotate(-2deg) scale(0.92); }
.drop.over .df.b { transform: rotate(0) scale(1.1); }
@keyframes fy-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.drop-title { font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.drop-btn { position: relative; overflow: hidden; min-height: 48px; padding: 0 22px; font-size: 15px; border-radius: 10px; background: linear-gradient(var(--acc-hi), var(--acc)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 16px -8px rgb(var(--acc-rgb) / 0.7); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.drop-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s; }
.drop:hover .drop-btn { background: linear-gradient(var(--acc), var(--acc-deep)); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 12px 24px -10px rgb(var(--acc-rgb) / 0.75); }
.drop:hover .drop-btn::after { transform: translateX(120%); }
.drop-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 460px; }
.drop-meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); background: rgba(255,255,255,0.85); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.drop-meta svg { width: 13px; height: 13px; }
.file { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; display: flex; gap: 12px; align-items: flex-start; }
.file.error { border-color: #FDA29B; background: var(--err-bg); }
.tag { flex: none; font-family: var(--mono); font-size: 11px; background: var(--ink); color: #fff; border-radius: 6px; padding: 6px 7px; }
.file .name { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.file .meta { display: block; font-size: 13px; color: var(--muted); }
.file.error .meta { color: var(--err); }
.bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 999px; transition: width .25s; }
.done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 8px 4px; }
.done .ok { width: 44px; height: 44px; border-radius: 50%; background: var(--ok-bg); display: grid; place-items: center; }
.done h3 { margin: 6px 0 0; font-weight: 400; font-size: 21px; letter-spacing: -0.02em; }
.done p { margin: 0; font-size: 13px; color: var(--muted); }
.pages { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 8px; text-align: left; }
.pages div { border: 1px solid var(--line); border-radius: 10px; padding: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: #52525B; }
.pages div::before { content: ""; display: block; aspect-ratio: 1.414; border-radius: 6px; background: #F8F8F7; border: 1px solid var(--line-soft); margin-bottom: 8px; }
.link-btn { font: inherit; font-size: 13px; color: #52525B; background: none; border: 0; padding: 12px; cursor: pointer; }
.link-btn:hover { color: var(--ink); }
.skipped { font-size: 13px; color: var(--muted); max-width: 520px; }

/* sections */
.section { padding-top: 104px; }
/* the first heading under the tool sits closer to it (owner 22 Oct 2026) */
.hero + .wrap > .section:first-child { padding-top: 64px; }
.section h2 { margin: 0 0 28px; font-weight: 400; font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -0.035em; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.step { border-top: 2px solid var(--line); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.step:first-child { border-top-color: var(--ink); }
.step p { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.step h3 { margin: 0; font-size: 18px; font-weight: 500; }
.rows { border-top: 1px solid var(--line); }
.rows > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
/* FAQ (owner: a better design): a label column and a stack of soft cards with a plus that turns into a minus */
.faq { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.faq-side { position: sticky; top: 120px; }
.faq-side h2 { margin: 10px 0 12px; }
.faq-side p { margin: 0; font-weight: 300; color: var(--ink-2); }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-list details { background: var(--tile); border-radius: 14px; padding: 0 22px; transition: background-color .2s, box-shadow .2s; }
.faq-list details[open] { background: #fff; box-shadow: 0 1px 0 var(--line), 0 12px 28px -18px rgba(24,24,27,0.3); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; font-size: 17px; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list .pm { flex: none; position: relative; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--line); }
.faq-list details[open] .pm { background: var(--ink); border-color: var(--ink); }
.faq-list .pm::before, .faq-list .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -0.8px 0 0 -5px; background: var(--ink); border-radius: 2px; transition: transform .2s; }
.faq-list .pm::after { transform: rotate(90deg); }
.faq-list details[open] .pm::before, .faq-list details[open] .pm::after { background: #fff; }
.faq-list details[open] .pm::after { transform: rotate(0); }
.faq-list details p { margin: 0; padding: 0 44px 22px 0; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq-side { position: static; } }

/* the top of the page sits on a drawing sheet lit from the top centre (owner Q33 a + Q35 a, 22 Oct 2026): a faint sheet grid
   with small CAD marks shows only in the lit middle and fades out to the sides and down to the middle of the upload box
   (--bg-h is measured in tool.js); a warm glow sits behind the title and an orange halo round the tool; from the steps
   down the page is plain */
.hero { position: relative; isolation: isolate; padding-bottom: 8px; }
.hero::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: var(--bg-h, 75%); background: url(/assets/img/sheet.svg) center top / 576px 576px repeat; -webkit-mask-image: radial-gradient(50% 75% at 50% 0%, #000 35%, transparent 100%); mask-image: radial-gradient(50% 75% at 50% 0%, #000 35%, transparent 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; left: 50%; top: -120px; width: 1100px; max-width: 100%; height: 620px; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(var(--acc-bright-rgb) / 0.20), rgb(var(--acc-bright-rgb) / 0.07) 55%, transparent); pointer-events: none; }
/* the frame round the tool is glass (owner Q36 b): see-through, so the glow shows behind it (no fixed children inside, so the blur traps nothing) */
.hero .panel { background: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.9); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(var(--acc-rgb) / 0.10), 0 30px 80px -30px rgb(var(--acc-rgb) / 0.35); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.tile { background: var(--tile); border-radius: var(--r-lg); padding: 18px 20px; text-decoration: none; color: var(--ink); display: flex; justify-content: space-between; gap: 12px; }
.tile:hover { background: #ECECEE; color: var(--ink); }
.tile strong { display: block; font-size: 16px; font-weight: 500; }
.tile span span { display: block; margin-top: 3px; font-weight: 300; font-size: 14px; color: var(--ink-2); }

.foot { border-top: 1px solid var(--line); margin-top: 112px; padding: 28px 0; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; font-size: 13px; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot a { color: var(--muted); }

@media (max-width: 760px) { .panel { padding: 12px; border-radius: 14px; } }
@media (max-width: 760px) {
  .app-body { flex-direction: column; min-height: 0; }
  .side { flex: none; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 10px; gap: 6px; }
  .side .mono { display: none; }
  .side a { flex: none; white-space: nowrap; }
  .aside { border-left: 0; border-top: 1px solid var(--line-soft); }
  .drop-meta span { font-size: 12px; }
  .head { padding: 40px 0 24px; }
  .strip { font-size: 12px; padding: 7px 12px; }
  .strip .long { display: none; }
  .strip .short { display: inline; }
  .nav-links, .nav-go { display: none; }
  .burger { display: inline-flex; }
  .m-menu:not([hidden]) { display: flex; flex-direction: column; gap: 14px; position: fixed; z-index: 19; left: 0; right: 0; bottom: 0; top: var(--m-top, 100px); overflow-y: auto; background: var(--bg); padding: 12px 20px 28px; border-top: 1px solid var(--line); }
  .m-menu .mono { margin: 6px 0 0; font-size: 11px; color: var(--faint); }
  .m-tools { display: grid; grid-template-columns: 1fr; gap: 2px; }
  .m-tools a { padding: 10px 6px; min-height: 56px; }
  .m-links { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
  .m-links a { padding: 15px 4px; font-size: 17px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); }
  .m-go { min-height: 52px; font-size: 16px; }
  /* phones (owner 22 Oct 2026): the upload button sits in the first screen, no scrolling. On a tool page the news strip
     goes, the title is one line with a one-sentence lead, the frame and the window bar drop away, the tool title is left
     to the h1, and the tool list and the output panel move below the upload box */
  .is-tool .strip { display: none; }
  .nav { padding: 6px 16px; }
  .is-tool .head { padding: 14px 0 16px; gap: 6px; }
  .is-tool .crumbs { display: none; }
  .is-tool .head h1 { margin: 0; font-size: 31px; letter-spacing: -0.035em; }
  .is-tool .head p { font-size: 15px; line-height: 1.5; }
  .is-tool .lead-more { display: none; }
  .stage { padding: 0; }
  .hero .panel { padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .app { border-radius: 0; border-left: 0; border-right: 0; box-shadow: 0 -1px 0 var(--line), 0 16px 32px -20px rgb(24 24 27 / 0.25); }
  .app-bar, .title-row { display: none; }
  .main { order: 1; flex: none; padding: 12px; }
  .side { order: 2; border-bottom: 0; border-top: 1px solid var(--line-soft); }
  /* output on phones (owner, 22 Oct 2026, O6 in place of Q45 a): one line that says what the PDF will be; the desktop
     stack, list and lock line are hidden */
  .aside { order: 3; flex: none; display: block; padding: 14px 16px; }
  .section { padding-top: 64px; }
  .section h2 { margin-bottom: 20px; }
  .hero + .wrap > .section:first-child { padding-top: 36px; }
  .aside > :not(.out-m) { display: none; }
  .out-m { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
  .out-m b { font-weight: 600; color: var(--ink); }
  .side { scrollbar-width: none; }
  .side::-webkit-scrollbar { display: none; }
  .main > [data-state], .drop { flex: none; }
  .main > [data-state="empty"] .drop { min-height: 0; }
  .drop { padding: 24px 14px 20px; gap: 12px; }
  .drop-art .df svg { width: 44px; height: 53px; }
  .drop-title { font-size: 18px; }
}
/* on a touch screen there is nothing to drag: the button is the action, so the "drop here" line and chip go */
@media (hover: none) and (pointer: coarse) { .drop-title, .drop-meta .drag-only { display: none; } }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* version picker (DWG version converter, DWG to DXF; 22 Oct 2026): a segmented control above the drop zone, with one
   honest line under it that says which AutoCAD opens the chosen version */
.ver { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.ver-k { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ver-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 11px; background: var(--tile); border: 1px solid var(--line-soft); }
.ver-seg button { font: 500 13px/1 var(--sans); color: var(--ink-2); background: none; border: 0; border-radius: 8px; padding: 9px 12px; min-height: 36px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.ver-seg button:hover { color: var(--ink); }
.ver-seg button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(24 24 27 / 0.08), 0 0 0 1px var(--line); }
.ver-hint { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--muted); }
/* what the converter changed or left out, listed under the download */
.changes { list-style: none; margin: 6px 0 0; padding: 12px 14px; width: 100%; max-width: 520px; text-align: left; background: var(--well); border: 1px solid var(--line-soft); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-2); }
.changes li { display: flex; gap: 8px; }
.changes li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--acc); }
.changes li.good::before { background: var(--ok); }
/* the output panel: a ladder of AutoCAD versions with the chosen one lit, and a peek at DXF text */
.ladder { list-style: none; margin: 0; padding: 14px; background: var(--tile); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.ladder li { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line-soft); }
.ladder li.on { color: #fff; background: #4B3BFF; border-color: #4B3BFF; box-shadow: 0 8px 18px -10px rgb(75 59 255 / 0.7); }
.dxf-peek { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; padding: 14px 16px; background: var(--ink); color: #A1A1AA; border-radius: 12px; font-family: var(--mono); font-size: 12px; line-height: 1.5; }
.dxf-peek span:nth-child(even) { color: #F4F4F5; }
.dxf-peek span:nth-child(12) { color: #FBBF77; }

/* home (owner 22 Oct 2026: a free-tools site, not only CAD): a big promise with a tool finder, the tool families as
   tabs, a card grid, the most used tool in a spotlight, then how it works, formats and the FAQ */
.hero-home { padding-bottom: 0; }
.hh { max-width: 820px; margin: 0 auto; padding: 72px 0 56px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.hh-k { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.8); border: 1px solid var(--line); font-size: 11px; color: var(--ink-2); }
.hh-k i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgb(6 118 71 / 0.12); }
.hh h1 { margin: 0; font-weight: 400; font-size: clamp(42px, 7vw, 76px); line-height: 1.02; letter-spacing: -0.045em; }
.hh > p { margin: 0; max-width: 560px; font-weight: 300; font-size: 19px; line-height: 1.55; color: #27272A; }
.find { position: relative; width: 100%; max-width: 560px; display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 0 14px 0 18px; height: 58px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 44px -24px rgb(var(--acc-rgb) / 0.45), 0 1px 2px rgb(24 24 27 / 0.05); color: var(--muted); cursor: text; transition: box-shadow .2s, border-color .2s; }
.find:focus-within { border-color: var(--acc); box-shadow: 0 0 0 4px rgb(var(--acc-bright-rgb) / 0.16), 0 20px 44px -24px rgb(var(--acc-rgb) / 0.45); }
.find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 400 17px/1 var(--sans); color: var(--ink); }
.find input::placeholder { color: var(--faint); }
.find kbd { font-family: var(--mono); font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 2px 7px; background: var(--well); }
.hh-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: 13.5px; color: var(--ink-2); }
.hh-proof span { display: inline-flex; align-items: center; gap: 7px; }
.hh-proof svg { width: 15px; height: 15px; color: var(--acc); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sec-head h2 { margin: 6px 0 0; }
.cats { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--tile); }
.cats button { font: 500 14px/1 var(--sans); padding: 10px 14px; border-radius: 9px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.cats button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(24 24 27 / 0.08); }
.cats button span { font-family: var(--mono); font-size: 11px; margin-left: 4px; color: var(--acc); }
.cats button:disabled { cursor: default; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.tcard { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 18px 18px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; }
a.tcard:hover { transform: translateY(-2px); border-color: rgb(var(--acc-rgb) / 0.35); box-shadow: 0 22px 40px -26px rgb(var(--acc-rgb) / 0.55); color: var(--ink); }
.tcard .fs { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
a.tcard:hover .fs { transform: rotate(-4deg) scale(1.05); }
.tc-b b { display: block; font-size: 16px; font-weight: 500; }
.tc-b > span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); }
.tc-b em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-left: 6px; }
.tc-go { margin-left: auto; width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--tile); color: var(--ink-2); transition: background .2s, color .2s; }
a.tcard:hover .tc-go { background: var(--acc); color: #fff; }
.tcard.soon { background: var(--well); border-style: dashed; }
.tcard.soon .fs { opacity: 0.5; }
.none { margin: 18px 0 0; color: var(--muted); }
.spot { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; margin-top: 64px; padding: 40px; border-radius: 24px; background: var(--ink); color: #E4E4E7; background-image: radial-gradient(60% 90% at 100% 0%, rgb(var(--acc-bright-rgb) / 0.35), transparent 70%); }
.spot .mono { color: #A1A1AA; }
.spot h2 { color: #fff; margin: 8px 0 12px; }
.spot p { margin: 0 0 22px; font-weight: 300; color: #D4D4D8; max-width: 480px; }
.spot-art { display: flex; align-items: center; justify-content: center; gap: 18px; }
.sp-file { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: #A1A1AA; }
.sp-arrow { width: 60px; height: 2px; background: repeating-linear-gradient(90deg, var(--acc-bright) 0 6px, transparent 6px 11px); position: relative; }
.sp-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--acc-bright); }
.spot .deck { background: rgb(255 255 255 / 0.06); }
.fmt { border-top: 1px solid var(--line); font-size: 15px; }
.fmt-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.fmt-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fmt a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }
#how > .mono, #formats > .mono { display: block; margin-bottom: 6px; }
@media (max-width: 760px) {
  .hh { padding: 36px 0 28px; gap: 14px; }
  .hh-k { font-size: 10px; letter-spacing: 0.08em; padding: 6px 10px; }
  .hk-l, .br-d { display: none; }
  .hh h1 { font-size: 40px; }
  .hh > p { font-size: 16px; }
  .find { height: 52px; }
  .find kbd { display: none; }
  .hh-proof { font-size: 12.5px; gap: 6px 14px; }
  .spot { grid-template-columns: minmax(0, 1fr); padding: 26px 20px; margin-top: 40px; }
  .spot-art { order: -1; }
  .fmt-row { grid-template-columns: 1fr; gap: 4px; }
  .fmt-h { display: none; }
  .ver-seg { width: 100%; }
  .ver-seg button { flex: 1 1 auto; padding: 9px 8px; }
}
/* the sample drawing link under the upload box */
.sample { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.sample .link-btn { padding: 4px 2px; font-size: 13px; color: var(--acc); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.sample a { color: var(--ink-2); text-underline-offset: 3px; }

/* privacy, terms, licences, about: one reading column */
.doc { max-width: 760px; margin: 0 auto; padding: 48px 0 24px; }
.doc h1 { margin: 10px 0 12px; font-weight: 400; font-size: clamp(38px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.04em; }
.doc-lead { margin: 0 0 6px; font-weight: 300; font-size: 19px; line-height: 1.55; color: #27272A; }
.doc-date { margin: 0 0 28px; font-size: 11px; color: var(--faint); }
.doc h2 { margin: 36px 0 10px; font-weight: 500; font-size: 21px; letter-spacing: -0.02em; }
.doc p { margin: 0 0 14px; line-height: 1.65; color: var(--ink-2); }
.doc a { color: var(--ink); text-underline-offset: 3px; }
.lic { border-top: 1px solid var(--line); margin-top: 8px; font-size: 14.5px; }
.lic-row { display: grid; grid-template-columns: 1.3fr 1.5fr 1fr; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.lic-row b { font-weight: 500; }
.lic-h { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 760px) {
  .doc { padding: 28px 0 8px; }
  .doc-lead { font-size: 17px; }
  .lic-row { grid-template-columns: 1fr; gap: 3px; }
  .lic-h { display: none; }
}

/* guides (owner Q57, 22 Oct 2026): the answer card with measured figures (mock G3) and a contents rail on the left
   (mock G2, now the shared .toc rail), as clean as possible; the rail is hidden on narrow screens */
.gd { max-width: 1040px; margin: 0 auto; padding: 48px 0 32px; display: grid; grid-template-columns: 200px minmax(0, 700px); gap: 64px; justify-content: center; }
.gd > .toc { margin-top: 6px; }
.gd-body h1 { margin: 10px 0 14px; font-weight: 400; font-size: clamp(38px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.04em; }
.gd-body h2 { margin: 44px 0 10px; font-weight: 500; font-size: 22px; letter-spacing: -0.02em; scroll-margin-top: 90px; }
.gd-body h3 { margin: 22px 0 6px; font-weight: 500; font-size: 16.5px; }
.gd-body p, .gd-body li { line-height: 1.7; color: var(--ink-2); }
.gd-body p { margin: 0 0 14px; }
.gd-body a { color: var(--ink); text-underline-offset: 3px; }
.gd-body .gd-lead { font-weight: 300; font-size: 19px; line-height: 1.55; color: #27272A; margin: 0 0 8px; }
.gd-body .gd-date { margin: 0 0 28px; font-size: 11px; color: var(--faint); }
.gd-card { margin: 0 0 12px; padding: 22px 22px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.gd-card > p { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.gd-figs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-soft); }
.gd-figs div { padding: 14px 12px 2px 0; }
.gd-figs div + div { padding-left: 14px; border-left: 1px solid var(--line-soft); }
.gd-figs b { display: block; font-weight: 400; font-size: 28px; letter-spacing: -0.03em; color: var(--ink); }
.gd-figs span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.gd-body .gd-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 28px; padding: 16px 20px; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink); }
.gd-body .gd-cta:hover { border-color: rgb(var(--acc-rgb) / 0.45); }
.gd-cta b { display: block; font-weight: 500; }
.gd-cta span span { display: block; font-size: 14px; color: var(--muted); }
.gd-arrow { font-size: 22px; color: var(--acc); }
.gd-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.gd-table th, .gd-table td { text-align: left; vertical-align: top; padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line); }
.gd-table thead th { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gd-table tbody th { width: 26%; font-weight: 500; color: var(--ink); }
.gd-table td { color: var(--ink-2); }
.gd-list { margin: 0 0 14px; padding-left: 18px; }
.gd-list li { margin: 0 0 8px; }
.gd-list b { font-weight: 500; color: var(--ink); }
.gd-src { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.gd-body .gd-src p { margin: 0 0 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.gd-src ul { margin: 0; padding-left: 18px; }
.gd-src li { font-size: 13px; line-height: 1.6; color: var(--muted); }
.gd-src a { color: var(--muted); }
@media (max-width: 960px) {
  .gd { display: block; max-width: 720px; }
  .gd > .toc { display: none; }
}
@media (max-width: 720px) {
  .gd { padding: 28px 0 16px; }
  .gd-body .gd-lead { font-size: 17px; }
  .gd-card { padding: 18px 16px 14px; }
  .gd-figs div + div { padding-left: 10px; }
  .gd-figs b { font-size: 22px; }
  .gd-figs span { font-size: 11.5px; }
  .gd-table { font-size: 13.5px; }
  .gd-table tbody th { width: 30%; }
}

/* ---- DWG viewer (site/assets/js/viewer.js): takes the place of the drop area inside the app frame (owner Q70 a) */
.app-body[hidden], .vx[hidden], .vx-layers[hidden], .vx-l[hidden] { display: none; }
.vx { display: flex; flex-direction: column; background: var(--panel); height: min(78vh, 760px); min-height: 420px; }
.vx-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.vx-file { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; white-space: nowrap; min-width: 0; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.vx-tabs { display: flex; gap: 2px; background: var(--tile); border-radius: 8px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.vx-tabs button { border: 0; background: none; font: inherit; font-size: 13px; padding: 5px 10px; border-radius: 6px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.vx-tabs button[aria-selected="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.vx-sp { flex: 1; }
.vx-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vx-tools button { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.vx-tools button:hover { border-color: var(--faint); color: var(--ink); }
.vx-tools button:disabled { opacity: 0.4; cursor: default; }
.vx-tools button.on { background: var(--acc-tint-2); border-color: var(--acc-art); color: var(--acc-deep); }
.vx-zoom { font-size: 12px; min-width: 48px; text-align: center; color: var(--muted); }
.vx-body { display: flex; flex: 1; min-height: 0; position: relative; }
.vx-canvas { flex: 1; min-width: 0; position: relative; overflow: hidden; cursor: grab; touch-action: none; }
.vx-canvas.drag { cursor: grabbing; }
.vx-canvas canvas { position: absolute; inset: 0; display: block; }
/* Measure (owner Q25 a): the overlay, the hint along the top and the result card */
.vx-canvas canvas.vx-ov { pointer-events: none; }
.vx-canvas.measuring, .vx-canvas.measuring.drag { cursor: crosshair; }
.vx-mhint { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); padding: 7px 12px; border-radius: 999px; background: #18181B; color: #fff; font-size: 13px; pointer-events: none; }
.vx-mcard { position: absolute; left: 12px; bottom: 12px; width: 300px; max-width: calc(100% - 24px); padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); font-size: 13px; color: var(--ink-2); }
.vx-mcard small { color: var(--muted); }
.vx-mbig { display: block; font-size: 22px; font-weight: 600; color: var(--ink); margin: 2px 0 6px; }
.vx-mrow { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.vx-mact { display: flex; gap: 8px; margin-top: 10px; }
.vx-mact button { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.vx-mact button:hover { border-color: var(--faint); color: var(--ink); }
@media (max-width: 760px) { .vx-mhint { font-size: 12px; padding: 5px 10px; border-radius: 12px; } .vx-mcard { padding: 10px 12px; } .vx-mbig { font-size: 18px; } }
.vx-layers { flex: 0 0 230px; border-left: 1px solid var(--line-soft); background: var(--well); padding: 12px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; overflow: auto; }
.vx-layers .mono { font-size: 11px; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.06em; }
.vx-layers input[type="search"] { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; }
.vx-lall { display: flex; gap: 12px; margin: 6px 0; font-size: 12px; }
.vx-llist { display: flex; flex-direction: column; gap: 1px; }
.vx-l { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 6px; cursor: pointer; }
.vx-l:hover { background: var(--tile); }
.vx-l i { width: 10px; height: 10px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.vx-l input { accent-color: var(--acc); margin: 0; }
.vx-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-hint { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--muted); }
.vx-status { display: flex; gap: 18px; padding: 6px 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); flex-wrap: wrap; min-height: 16px; }
.vx-status span:empty { display: none; }
.vx-skip { color: var(--acc-deep); }
.vx-priv { margin-left: auto; }
.vx-status { row-gap: 4px; }
.vx-keep { width: 100%; text-align: right; }
.vx-keep .link-btn { padding: 0; font: inherit; text-transform: inherit; letter-spacing: inherit; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.vx-keep .link-btn:hover { color: var(--err); }
.vx:fullscreen { height: 100%; }
.vx-full { position: fixed; inset: 0; z-index: 100; height: auto; }
@media (max-width: 760px) {
  .vx { height: 72vh; }
  .vx-sp, .vx-file { display: none; }
  .vx-tools span { display: none; }
  .vx-layers { position: absolute; right: 0; top: 0; bottom: 0; width: min(260px, 80%); box-shadow: -8px 0 24px rgb(24 24 27 / 0.15); z-index: 2; }
  .vx-priv { margin-left: 0; }
}

/* the before / after view of one picture (image.js; owner 24 Oct 2026, gap C6): two layers with the same stage, the
   right one cut at the line; the stage is sized and moved by image.js for Fit, 100%, 200% and panning */
.ix-cmp { width: min(1100px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border: 0; border-radius: var(--r-lg); padding: 14px; box-shadow: 0 20px 60px rgb(0 0 0 / 0.25); }
.ix-cmp::backdrop { background: rgb(24 24 27 / 0.55); }
.ix-cmp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ix-cmp-top b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-cmp-top .link-btn { padding: 6px 2px; }
.ix-cmp-zoom { display: flex; gap: 4px; }
.ix-cmp-zoom button { border: 1px solid var(--line); background: #fff; border-radius: 8px; font: 500 12px var(--mono); padding: 4px 8px; cursor: pointer; color: var(--ink-2); }
.ix-cmp-zoom button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ix-cmp-box { position: relative; height: min(66dvh, 680px); border-radius: 10px; overflow: hidden; touch-action: none; cursor: ew-resize; user-select: none; outline-offset: 2px;
  background: repeating-conic-gradient(#EDEDED 0 25%, #FFFFFF 0 50%) 0 0 / 18px 18px; }
.ix-cmp-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ix-cmp-right { clip-path: inset(0 0 0 var(--x, 50%)); }
/* Resize image: the crop window on the whole original, tapped to move */
.ix-cmp-frame { position: absolute; border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .4), 0 0 0 9999px rgb(0 0 0 / .45); pointer-events: none; }
.ix-cmp-frame[hidden], .is-pick .ix-cmp-right, .is-pick .ix-cmp-line, .is-pick .ix-cmp-lab, .is-pick .ix-cmp-x { display: none; }
.is-pick .ix-cmp-box { cursor: crosshair; }
.ix-cmp-stage { position: absolute; left: 0; top: 0; }
.ix-cmp-stage img, .ix-cmp-diff { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ix-cmp-diff[hidden] { display: none; }
.ix-cmp-line { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.25); pointer-events: none; }
.ix-cmp-line i { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 0.3); }
.ix-cmp-line i::before, .ix-cmp-line i::after { content: ""; position: absolute; top: 12px; border: 5px solid transparent; }
.ix-cmp-line i::before { left: 4px; border-right: 6px solid var(--ink); }
.ix-cmp-line i::after { right: 4px; border-left: 6px solid var(--ink); }
.ix-cmp-lab { position: absolute; top: 10px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11.5px var(--mono); background: rgb(24 24 27 / 0.75); color: #fff; border-radius: 999px; padding: 3px 9px; pointer-events: none; }
.ix-cmp-lab.l { left: 10px; }
.ix-cmp-lab.r { right: 10px; }
.ix-cmp-wait { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 6px 12px; border-radius: 999px; background: rgb(255 255 255 / 0.92); font-size: 13px; color: var(--ink-2); white-space: nowrap; pointer-events: none; }
.ix-cmp-wait[hidden] { display: none; }
.ix-cmp input[type="range"] { accent-color: var(--acc); }
.ix-cmp-x { width: 100%; margin: 10px 0 0; }
.ix-cmp-q { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.ix-cmp-q[hidden] { display: none; }
.ix-cmp-q input { flex: 1; min-width: 0; }
.ix-cmp-q output { font: 500 12px var(--mono); min-width: 24px; text-align: right; }
.ix-cmp-acts { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.ix-cmp-acts:empty, .ix-cmp-chg[hidden], .ix-cmp-use[hidden], .ix-cmp-use [hidden] { display: none; }
.ix-cmp-chg { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.ix-cmp-use { display: inline-flex; gap: 6px; margin-left: auto; }
.ix-cmp-use .btn { height: 34px; padding: 0 12px; font-size: 13px; }
/* the Compare button on each file (owner: the slider was only found by clicking the picture) */
.ftile-cmp { position: absolute; top: 44px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .94); display: grid; place-items: center; box-shadow: 0 2px 6px rgb(0 0 0 / .15); color: var(--ink-2); cursor: pointer; }
.ftile-cmp:hover, .frow-cmp:hover { color: var(--acc); }
.frow-cmp { width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--ink-2); cursor: pointer; }
.ftile-cmp[hidden], .frow-cmp[hidden] { display: none; }
/* Resize image: turn and flip one picture, beside Download and Compare (the saving badge sits top-left) */
.ftile-tf { position: absolute; top: 8px; right: 44px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .94); display: grid; place-items: center; box-shadow: 0 2px 6px rgb(0 0 0 / .15); color: var(--ink-2); cursor: pointer; }
.ftile-tf.f { top: 44px; }
.ftile-tf:hover { color: var(--acc); }
.frow-tf { display: flex; gap: 6px; margin-top: 6px; }
@media (max-width: 760px) {
  /* phones: no room for a button in the row, so the picture carries a small compare mark and opens it when tapped */
  .frow-cmp { display: none; }
  .frow-pic { position: relative; }
  .frow-pic:not(:disabled)::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 1px 4px rgb(0 0 0 / .25);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327272A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v18'/%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3C/svg%3E") center / 12px no-repeat; }
  .ix-cmp { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 10px; }
  .ix-cmp-box { height: calc(100dvh - 190px); }
  .ix-cmp-zoom button:nth-child(3) { display: none; }
}

/* moving between our pages (owner Q9 a): the old page fades into the new one while the menu and the tool's family bar
   stay where they are, instead of a white flash; off for people who ask for less motion */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav-shell { view-transition-name: fy-nav; }
  .fam { view-transition-name: fy-fam; }
  .fam-chips { view-transition-name: fy-chips; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
}

/* ---- Tool page, second design (owner Q83-Q100, Q1 a, 23 Oct 2026; mocks in site/_preview/tool-page-final.html). One set
   of components for every tool page: a slim page head, the family bar of sibling tools with an "All tools" panel (chips
   on phones), two columns inside the app window (settings left, files right), the version line under the window, and
   the content sections under it with an "On this page" rail. Image tools first, the CAD tools move onto it next. */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 18px 0 16px; }
.page-head h1 { margin: 6px 0 0; font: 600 30px/1.1 var(--sans); letter-spacing: -0.02em; }
.page-head p { margin: 0; max-width: 420px; font-size: 14px; line-height: 1.5; color: var(--muted); text-align: right; }
.page-head .crumbs { gap: 6px; }
.hero .stage.v2 { padding-top: 0; }
.v2 .app-bar { display: none; }
.v2 .app-body { position: relative; min-height: 0; }

/* the family bar: the tools of this family in a capsule that scrolls sideways (owner Q97 b), then "All tools" */
.fam { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.fam-cap { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--tile); border: 1px solid var(--line-soft); min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; }
.fam-cap::-webkit-scrollbar { display: none; }
.fam-cap.more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.fam-cap a { flex: 0 0 auto; white-space: nowrap; display: flex; align-items: center; gap: 8px; font: 500 13.5px var(--sans); color: var(--muted); text-decoration: none; padding: 7px 14px; border-radius: 9px; }
.fam-cap a:hover { color: var(--ink); }
.fam-cap a svg { width: 15px; height: 18px; opacity: .55; filter: grayscale(1); }
.fam-cap a[aria-current] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(24 24 27 / .08), 0 0 0 1px var(--line); }
.fam-cap a[aria-current] svg { opacity: 1; filter: none; }
.fam-sp { flex: 1 1 12px; }
.fam-all { position: relative; flex: 0 0 auto; }
.fam-all > summary { list-style: none; display: flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 13.5px var(--sans); color: var(--ink-2); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.fam-all > summary::-webkit-details-marker { display: none; }
.fam-all > summary:hover, .fam-all[open] > summary { color: var(--ink); border-color: #D4D4D8; }
.fam-all > summary svg { width: 15px; height: 15px; }
.fam-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 7; width: min(640px, calc(100vw - 48px)); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px -20px rgb(24 24 27 / .35), 0 2px 6px rgb(24 24 27 / .05); padding: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fam-panel h4 { margin: 0 0 8px; font: 600 11px var(--mono); letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.fam-panel a { display: flex; gap: 11px; align-items: flex-start; padding: 8px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.fam-panel a:hover { background: var(--tile); color: var(--ink); }
.fam-panel a[aria-disabled] { color: var(--muted); }
.fam-panel a svg { flex: none; margin-top: 1px; }
.fam-panel b { display: block; font: 500 14px var(--sans); }
.fam-panel small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.fam-panel em { font: normal 10px var(--mono); letter-spacing: .06em; color: var(--faint); margin-left: 6px; text-transform: uppercase; }
.fam-panel .fam-foot { grid-column: 1 / -1; border-top: 1px solid var(--line-soft); padding-top: 12px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.fam-panel .fam-foot a { display: inline; padding: 0; color: var(--acc); font-weight: 500; }
.fam-chips { display: none; gap: 8px; overflow-x: auto; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.fam-chips::-webkit-scrollbar { display: none; }
.fam-chips a { flex: 0 0 auto; font: 500 13px var(--sans); color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; text-decoration: none; white-space: nowrap; }
.fam-chips a[aria-current] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* two columns: settings on the left in their own scroll with a fade (owner Q90, Q95), the files on the right */
.tool2 { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 520px; }
.t-set { position: relative; border-right: 1px solid var(--line-soft); background: var(--well); }
.t-set-in { position: absolute; inset: 0; overflow-y: auto; padding: 20px 22px 28px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; }
.fade { -webkit-mask-image: linear-gradient(#000 calc(100% - 72px), rgb(0 0 0 / .08) calc(100% - 10px), transparent); mask-image: linear-gradient(#000 calc(100% - 72px), rgb(0 0 0 / .08) calc(100% - 10px), transparent); }
.fade.fade-end { -webkit-mask-image: none; mask-image: none; }
.t-files { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.t-set [hidden], .t-files [hidden] { display: none !important; }

/* the files column header: the two formats, the tool's name, and the privacy badge (owner Q91: our strongest point) */
.t-title { display: flex; align-items: center; gap: 14px; width: 100%; }
.t-pair { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(24 24 27 / .05); flex: none; }
.t-pair .fi { display: grid; place-items: center; width: 30px; height: 36px; border-radius: 6px; font: 700 9.5px var(--mono); color: #fff; letter-spacing: .02em; }
.t-pair .fi.wide { font-size: 8px; }
.t-pair i { font-style: normal; color: var(--faint); font-size: 14px; }
.t-title h2 { margin: 0; font: 600 19px/1.2 var(--sans); letter-spacing: -0.01em; }
.t-title p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.t-title .t-sp { flex: 1; }
.safe { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border-radius: 12px; background: linear-gradient(#F3FBF6, #EAF7EF); border: 1px solid #CDEBD9; box-shadow: inset 0 1px 0 #fff; flex: none; }
.safe-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--ok); box-shadow: 0 1px 2px rgb(6 118 71 / .18), 0 0 0 1px #CDEBD9; }
.safe-tx { line-height: 1.2; }
.safe-tx b { display: block; font: 600 13px var(--sans); color: #065F3B; }
.safe-tx small { font-size: 11.5px; color: #3E7A5C; }

/* settings: a label, the format list (radio rows on computers, one picker on phones: owner Q92 b/d), the quality slider */
.opt-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.opt-h b { font: 600 13px var(--sans); color: var(--ink); }
.opt-h span { font-size: 12px; color: var(--faint); }
.fic { display: grid; place-items: center; width: 26px; height: 32px; border-radius: 5px; font: 700 8.5px var(--mono); color: #fff; flex: none; position: relative; }
.fic::after { content: ""; position: absolute; right: 0; top: 0; width: 8px; height: 8px; background: rgb(255 255 255 / .35); border-bottom-left-radius: 3px; }
.fmt-list { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.fmt-list button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-top: 1px solid var(--line-soft); background: none; cursor: pointer; font: inherit; color: inherit; }
.fmt-list button:first-child { border-top: 0; }
.fmt-list button:hover { background: var(--well); }
.fmt-list button[aria-checked="true"] { background: var(--acc-tint); }
.fmt-list b { display: block; font: 600 13.5px var(--sans); color: var(--ink); }
.fmt-list small { display: block; font-size: 12px; color: var(--muted); }
.fmt-rd { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; margin-left: auto; transition: border .15s; }
.fmt-list button[aria-checked="true"] .fmt-rd { border: 5px solid var(--acc); }
.fmt-pick { display: none; position: relative; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.fmt-pick b { display: block; font: 600 14px var(--sans); }
.fmt-pick small { display: block; font-size: 12px; color: var(--muted); }
.fmt-pick > svg { margin-left: auto; color: var(--faint); }
.fmt-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.qual { display: flex; align-items: center; gap: 14px; min-height: 36px; }
.qual input { flex: 1; min-width: 0; accent-color: var(--acc); margin: 0; }
.qual output { font: 600 15px var(--mono); min-width: 30px; text-align: right; color: var(--ink); }

/* extra settings (owner: variation A): one row per setting with an icon, a name, and a pill on the right */
.opt-box { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.opt-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 11px 12px; border-top: 1px solid var(--line-soft); min-height: 52px; }
.opt-row:first-child { border-top: 0; }
.opt-row[hidden] { display: none; }
/* DWG/DXF to PDF: the drawing's pages, ticked; untick one and the PDF is made again without it */
.pg-pick { display: grid; gap: 6px; }
.pg-h { margin: 0 0 2px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pg-h span { text-transform: none; letter-spacing: 0; font-family: var(--sans); }
.pg-pick label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 14px; cursor: pointer; }
.pg-pick label small { margin-left: auto; color: var(--muted); font: 12px var(--mono); }
.pg-pick input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.pg-pick label:has(input:not(:checked)) { opacity: .55; }
[data-cad-dl][aria-disabled="true"] { opacity: .45; pointer-events: none; }
.opt-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--tile); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.opt-tx { flex: 1; min-width: 0; line-height: 1.25; }
.opt-tx b { display: block; font: 500 13.5px var(--sans); color: var(--ink); }
.opt-tx small { font-size: 12px; color: var(--muted); }
.opt-pill, .opt-sw { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; border-radius: 999px; border: 1px solid var(--line); font: 500 13px var(--sans); color: var(--ink); cursor: pointer; flex: none; }
.opt-pill { padding: 0 10px 0 12px; background: var(--well); }
.opt-pill:hover, .opt-sw:hover { border-color: #D4D4D8; }
.opt-pill:focus-within, .opt-sw:focus-within { box-shadow: 0 0 0 3px rgb(var(--acc-bright-rgb) / .2); border-color: var(--acc); }
.opt-pill svg, .opt-sw svg { color: var(--muted); }
.opt-pill.none { color: var(--muted); }
.opt-lock { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--line-soft); color: var(--ink-2); flex: none; }
.opt-tx small a { color: inherit; text-decoration: underline; }
.opt-lock.ok { background: #DCFCE7; color: #166534; }
/* a long choice (Resize image's sizes) shrinks with an ellipsis, so its row's name keeps room on a phone */
.opt-pill { max-width: 62%; }
.opt-pill [data-pill-v] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.opt-num input[type="color"] { width: 40px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.opt-pill select, .opt-sw input, .opt-sw select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; padding: 0; }
.opt-sw { padding: 0 10px 0 5px; background: #fff; gap: 8px; }
.opt-sw i { width: 22px; height: 22px; border-radius: 50%; background: var(--bgc, #fff); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.opt-num { display: flex; align-items: center; gap: 8px; flex-basis: 100%; margin-left: 40px; }
.opt-num input { width: 110px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; font: 14px var(--sans); color: var(--ink); background: #fff; }
.opt-num span { font-size: 12.5px; color: var(--muted); }
.opt-num.opt-wide input { width: 170px; }
.opt-sub { flex-basis: 100%; }
.opt-sub[hidden] { display: none; }
.opt-num input[type=number] + span + input { margin-left: 0; }
.opt-num select { height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; font: 14px var(--sans); color: var(--ink); background: #fff; }
.opt-warn { flex-basis: 100%; margin: 6px 0 0 40px; font-size: 12.5px; line-height: 1.45; color: #9A3412; }
.opt-warn[hidden] { display: none; }
/* Images to PDF: turn a picture in the page list, the sort menu and the page preview */
.frow-turn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.frow-turn:hover { border-color: var(--ink); }
.frow-turn[hidden] { display: none; }
@media (max-width: 760px) {
  .frow-turn { width: 28px; height: 28px; }
  .frow-turn + .frow-turn { margin-left: -4px; }
  .is-pdf .frow .frow-pg { display: none; }
}
.frow-pic { transition: transform .2s; }
.pdf-sort { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pdf-sort select { height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; font: 13px var(--sans); color: var(--ink); background: #fff; }
.pdf-prev { border-top: 1px solid var(--line-soft); padding: 14px 16px 16px; }
.pdf-prev[hidden] { display: none; }
.pdf-prev-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.pdf-prev-h span { font-size: 12.5px; color: var(--muted); }
.pdf-pages { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; background: #F4F4F5; border-radius: 12px; padding: 16px; }
.pdf-pg { text-align: center; font-size: 11px; color: var(--muted); }
.pdf-pg > div { position: relative; overflow: hidden; background: #fff; box-shadow: 0 2px 8px -2px rgb(0 0 0 / .25); margin-bottom: 4px; }
.pdf-pg i { position: absolute; display: block; overflow: hidden; }
.pdf-pg i b { position: absolute; left: 50%; top: 50%; background-size: 100% 100%; }
.pdf-pg u { position: absolute; left: 0; right: 0; text-decoration: none; font-size: 7px; color: #52525B; }
.pdf-more { align-self: center; font-size: 12.5px; color: var(--muted); }
.pdf-prev-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.opt-row.off .opt-tx, .opt-row.off .opt-pill { opacity: .5; }
.opt-row.off .opt-pill { pointer-events: none; }
.opt-row[hidden] { display: none !important; }
/* the converter (owner Q40 a): "More formats" as the last row of Save as, Edit and Print folding away, icon sizes, crop inputs */
.fmt-more { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.fmt-more:hover { background: var(--well); }
.fmt-more[aria-checked="true"] { background: var(--acc-tint); }
.fmt-more b { display: block; font: 600 13.5px var(--sans); color: var(--ink); }
.fmt-more small { display: block; font-size: 12px; color: var(--muted); }
.fmt-more > svg { margin-left: auto; color: var(--faint); flex: none; }
.fmt-more select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.opt-fold > summary { display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px; cursor: pointer; list-style: none; font: 600 13px var(--sans); color: var(--ink); }
.opt-fold > summary::-webkit-details-marker { display: none; }
.opt-fold > summary svg { color: var(--muted); transition: transform .15s; }
.opt-fold:not([open]) > summary svg { transform: rotate(-90deg); }
.opt-chips { flex-wrap: wrap; gap: 6px; }
.opt-chips label { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 13px var(--mono); cursor: pointer; }
.opt-chips label:has(input:checked) { border-color: var(--acc); background: var(--acc-tint); }
.opt-num .opt-chips input, .opt-chips input { width: 15px; height: 15px; padding: 0; margin: 0; accent-color: var(--acc); }
.opt-crop { flex-wrap: wrap; }
.opt-crop input, .opt-num input.sm { width: 64px; }
.opt-num .opt-pill { flex: none; }
.ix-link { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ix-link svg { color: var(--muted); flex: none; }
.ix-link input { flex: 1; min-width: 0; height: 36px; border: 0; outline: 0; font: 14px var(--sans); color: var(--ink); background: none; }
.ix-link .btn { height: 36px; padding: 0 16px; }
.ix-link-msg { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: #FFF7ED; border: 1px solid #FED7AA; font-size: 13px; line-height: 1.5; color: #7C2D12; }
.ix-link-msg kbd { font: 12px var(--mono); border: 1px solid #FDBA74; border-radius: 4px; padding: 0 4px; background: #fff; }
/* PDF to JPG: a locked PDF's row asks for its password */
.pp-lock { display: flex; gap: 6px; margin: 6px 0 0; }
.pp-lock input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: 14px var(--sans); color: var(--ink); background: #fff; }
.pp-lock .btn { height: 32px; padding: 0 12px; font-size: 13px; }
.switch { position: relative; width: 36px; height: 22px; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line); transition: background .2s; pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .2s; }
.switch input:checked + span { background: var(--acc); }
.switch input:checked + span::after { transform: translateX(14px); }
.switch input:focus-visible + span { box-shadow: 0 0 0 3px rgb(var(--acc-bright-rgb) / .25); }
.opt-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* the upload box while files are added and converted (owner: style 2, a glowing frame that runs round the box, the
   percentage and a thin bar; "Adding" and "Converting", never "Uploading") */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.v2 .drop { min-height: 190px; padding: 26px 20px; }
.v2 .drop.has-files { min-height: 0; padding: 20px; gap: 12px; }
.v2 .drop.has-files .drop-art, .v2 .drop.has-files .drop-meta { display: none; }
.drop-glow { position: absolute; inset: 0; border-radius: 16px; padding: 2px; pointer-events: none; opacity: 0; transition: opacity .3s; background: conic-gradient(from var(--spin), transparent 0 60%, #F59E0B 75%, var(--acc) 85%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: fy-spin 1.6s linear infinite; }
@keyframes fy-spin { to { --spin: 360deg; } }
.drop-prog { display: none; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.drop-prog .pct { font: 600 34px/1 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.drop-prog .pct small { font-size: 18px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.drop-prog b { margin-top: 8px; font: 600 15px var(--sans); color: var(--ink); }
.drop-prog .ps { font-size: 12.5px; color: var(--muted); }
.drop-prog .mini { width: 240px; max-width: 70%; height: 6px; border-radius: 999px; background: var(--line-soft); margin: 12px auto 0; overflow: hidden; }
.drop-prog .mini i { display: block; height: 100%; width: 0; background: var(--ink); border-radius: 999px; }
.drop.is-work .drop-glow { opacity: 1; }
.drop.is-work .drop-edge rect { stroke: transparent; animation: none; }
.drop.is-work .drop-prog { display: flex; }
.drop.is-work .drop-title, .drop.is-work .drop-btn, .drop.is-work .drop-art, .drop.is-work .drop-meta { display: none; }

/* the file card: a ring with the count, the sizes, Download all; picture tiles on computers, rows on phones (owner Q93) */
.fcard { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgb(24 24 27 / .04); }
.fcard-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line-soft); }
.ring { --p: 0%; width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--acc) var(--p), var(--line-soft) 0); transition: --p .5s cubic-bezier(.2,.8,.2,1); }
.ring span { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 600 10px var(--mono); color: var(--ink); }
.ring.full { background: var(--ok); }
.ring.full span { color: var(--ok); }
.fcard-tt { flex: 1; min-width: 0; line-height: 1.3; }
.fcard-tt b { font: 600 14px var(--sans); color: var(--ink); }
.fcard-tt small { display: block; font-size: 12.5px; color: var(--muted); }
.fcard-head .btn { min-height: 38px; height: 38px; padding: 0 14px; border-radius: 10px; font-size: 13.5px; }
.fcard-scroll { max-height: 262px; overflow-y: auto; scrollbar-width: thin; }
.ftiles { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.ftile { border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; background: #fff; position: relative; }
.ftile-pic { display: block; width: 100%; height: 96px; padding: 0; border: 0; background: var(--tile) center / cover no-repeat; cursor: zoom-in; }
.ftile-pic:disabled { cursor: default; }
.ftile-cap { padding: 8px 34px 8px 10px; }
.ftile-cap b { display: block; font: 500 13px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftile-cap small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftile-dl { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / .94); display: grid; place-items: center; box-shadow: 0 2px 6px rgb(0 0 0 / .15); color: var(--ink); }
.ftile-dl:hover { color: var(--acc); }
.ftile-save { position: absolute; top: 8px; left: 8px; font: 600 11px var(--sans); color: #fff; background: rgb(6 118 71 / .9); padding: 3px 7px; border-radius: 999px; pointer-events: none; }
.ftile-save.up { background: rgb(63 63 70 / .82); }
.ftile-rm { position: absolute; right: 6px; bottom: 8px; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; }
.ftile-rm:hover { color: var(--err); background: var(--err-bg); }
.ftile .spin { position: absolute; top: 34px; left: 50%; margin-left: -14px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .8); border-top-color: var(--acc); animation: fy-turn .8s linear infinite; }
@keyframes fy-turn { to { transform: rotate(360deg); } }
.ftile.is-busy .ftile-pic { filter: saturate(.3) opacity(.6); }
.ftile.is-err { border-color: #FDA29B; background: var(--err-bg); }
.ftile.is-err .ftile-cap small { color: var(--err); white-space: normal; }
.frows { list-style: none; margin: 0; padding: 0; display: none; }
.frow { display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--line-soft); }
.frow:first-child { border-top: 0; }
.frow-pic { width: 44px; height: 44px; border-radius: 10px; flex: none; padding: 0; border: 0; background: var(--tile) center / cover no-repeat; }
.frow-nm { flex: 1; min-width: 0; }
.frow-nm b { display: block; font: 500 14px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frow-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.frow-save { font: 600 11.5px var(--sans); color: var(--ok); background: var(--ok-bg); padding: 2px 7px; border-radius: 999px; }
.frow-save.up { color: var(--ink-2); background: var(--tile); }
.frow-dl { display: inline-flex; gap: 6px; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; font: 600 13px var(--sans); color: var(--acc-deep); background: var(--acc-tint); border: 1px solid #F3CBB0; text-decoration: none; white-space: nowrap; }
.frow-dl:hover { color: var(--acc-deep); background: var(--acc-tint-2); }
.frow-rm { width: 28px; height: 28px; flex: none; border: 0; border-radius: 6px; background: none; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; }
.frow-rm:hover { color: var(--err); background: var(--err-bg); }
.frow-wk { color: var(--acc-deep); }
.frow-bar { display: block; height: 3px; border-radius: 2px; background: var(--line-soft); width: 110px; overflow: hidden; margin-top: 5px; }
.frow-bar i, .ftile-bar i { display: block; height: 100%; width: 0; background: var(--acc); border-radius: 2px; }
.ftile-bar { position: absolute; left: 12px; right: 12px; top: 78px; height: 4px; border-radius: 2px; background: rgb(255 255 255 / .7); overflow: hidden; }
.frow.is-err { background: var(--err-bg); }
.frow.is-err .frow-meta { color: var(--err); }
/* the PDF page list: rows at every width, with a grip to drag and the page number */
.is-pdf .ftiles { display: none; }
.is-pdf .frows { display: block; }
.frow-grip { display: none; }
.is-pdf .frow-grip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 40px; margin: 0 -4px; border: 0; border-radius: 6px; background: none; color: var(--faint); cursor: grab; touch-action: none; font-size: 14px; letter-spacing: -2px; }
.is-pdf .frow-grip:hover, .is-pdf .frow-grip:focus-visible { color: var(--ink); background: var(--tile); }
.frow-pg { display: none; }
.is-pdf .frow-pg { display: block; font: 12px var(--mono); color: var(--muted); width: 50px; flex: none; }
.frow.is-drag { background: var(--acc-tint); box-shadow: 0 6px 16px -8px rgb(24 24 27 / .3); position: relative; z-index: 1; }
/* a DWG tool: one drawing, shown as a row at every width, with what the converter kept or changed under it (owner Q8 a) */
.is-cad .frows { display: block; }
.is-cad .frow { padding: 14px; }
.cx-more { padding: 0 14px 14px; }
.cx-more .changes { max-width: none; margin: 0; }
.cx-more .pages { margin-top: 0; }
.cx-more .skipped { margin: 10px 0 0; max-width: none; font-size: 12.5px; }
.cx-hint { margin-top: 8px; }
.fcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--line-soft); }
.fcard-foot .opt-note { flex: 1; }
.fcard-foot .link-btn { padding: 6px 2px; font-size: 12.5px; }
.fcard-foot { flex-wrap: wrap; row-gap: 2px; }
.fcard-foot .opt-note:empty, .fcard-foot .opt-note[hidden] { display: none; }
/* files kept across a reload (owner Q13 a): one line under the list, with Clear all */
.keep-line { flex-basis: 100%; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0 4px; margin: 0; font-size: 12px; color: var(--muted); text-align: right; }
.keep-line .link-btn { color: var(--ink-2); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.keep-line .link-btn:hover { color: var(--err); }
/* the dialog when a closed tab left files on this page (owner Q12) */
.keep-dlg { width: min(400px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px -16px rgb(24 24 27 / .35); text-align: center; }
.keep-dlg::backdrop { background: rgb(24 24 27 / .4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.keep-ic { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 14px; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.keep-dlg h2 { margin: 0 0 6px; font: 600 18px/1.3 var(--sans); letter-spacing: -0.01em; }
.keep-dlg p { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.keep-btns { display: flex; gap: 10px; }
.keep-btns .btn { flex: 1; }
/* phones: one clear Download bar that stays at the bottom while the list is on screen (owner Q96 a) */
.dl-bar { display: none; }

/* the version line under the tool (owner Q100 a) */
.ver-line { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.ver-b { font: 600 11.5px var(--mono); color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.ver-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.ver-line a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .page-head { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 0 14px; }
  .page-head p { text-align: left; }
  .page-head h1 { font-size: 26px; }
  .fam { display: none; }
  .fam-chips { display: flex; }
  .tool2 { display: flex; flex-direction: column; min-height: 0; }
  .t-files { order: -1; padding: 16px; }
  .t-set { border-right: 0; border-top: 1px solid var(--line-soft); }
  .t-set-in { position: static; padding: 16px; -webkit-mask-image: none !important; mask-image: none !important; }
  .t-title { flex-wrap: wrap; }
  .t-title .t-sp { display: none; }
  .t-title .safe { order: 3; }
  .fmt-list { display: none; }
  .fmt-pick { display: flex; }
  .ftiles { display: none; }
  .frows { display: block; }
  .fcard-scroll { max-height: none; }
  .fcard-head .btn:not([data-img-share]):not([data-cad-dl]) { display: none; }
  .dl-bar { display: flex; position: fixed; z-index: 18; left: 12px; right: 12px; bottom: 12px; padding: 10px; gap: 10px; align-items: center; border-radius: 16px; background: rgb(24 24 27 / .94); color: #fff; box-shadow: 0 16px 36px -12px rgb(0 0 0 / .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .dl-bar[hidden] { display: none; }
  .dl-bar span { flex: 1; min-width: 0; font-size: 13px; color: #D4D4D8; padding-left: 4px; }
  .dl-bar .btn { min-height: 44px; background: linear-gradient(var(--acc-hi), var(--acc)); color: #fff; border: 0; }
  .ver-line { flex-wrap: wrap; padding: 0 16px; }
}

/* ---- Content under a tool or in a guide: an "On this page" rail beside the content (owner, 23 Oct 2026: style A), the
   lead line, step pictures, two-column cards, a split block, a tick list, a comparison table, a measured box, notes */
.with-toc { display: grid; grid-template-columns: 212px minmax(0, 1fr); column-gap: 64px; align-items: start; }
.with-toc > * { grid-column: 2; min-width: 0; }
.with-toc > .toc { grid-column: 1; grid-row: 1 / span 30; }
.toc { position: sticky; top: 96px; margin-top: 64px; padding-left: 16px; border-left: 1px solid var(--line); }
.toc .mono { display: block; margin: 0 0 14px; font-size: 11px; color: var(--faint); }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc a { position: relative; display: flex; gap: 10px; align-items: baseline; padding: 7px 10px 7px 0; font-size: 14px; line-height: 1.35; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.toc a::before { content: ""; position: absolute; left: -17px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: transparent; transition: background .2s; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--ink); font-weight: 500; }
.toc a.on::before { background: var(--acc); }
.toc b { font-weight: 500; }
.toc i { font: normal 500 11px var(--mono); color: var(--faint); }
.toc a.on i { color: var(--acc); }
.section { scroll-margin-top: 88px; }
.hero + .with-toc > .toc + .section { padding-top: 64px; }
/* the changelog */
.log { border-top: 1px solid var(--line); margin-top: 8px; }
.log-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.log-row .ver-b { justify-self: start; }
.log-row .mono { margin: 0 0 4px; font-size: 11px; color: var(--faint); }
.doc .log-row p:last-child { margin: 0; }
.lead { margin: -8px 0 32px; max-width: 760px; font-weight: 300; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.6fr 1.6fr; gap: 24px; }
.shots li { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--line); padding-top: 18px; }
.shots li:first-child { border-top-color: var(--ink); }
.shots figure { margin: 0 0 10px; height: 220px; border-radius: 14px; background: var(--tile); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; padding: 14px; }
.shots img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 10px 24px -14px rgb(24 24 27 / .35); }
.shots h3, .card h3, .note h3, .prose h3 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.shots p, .note p, .prose p, .hint { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.card ol, .prose ol { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 8px; }
.card ol li, .prose ol li { counter-increment: s; display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.card ol li::before, .prose ol li::before { content: counter(s); flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--tile); font: 500 11.5px/22px var(--mono); text-align: center; color: var(--ink-2); }
.hint { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13.5px; color: var(--muted); }
.hint a, .prose a, .faq-list a, .note a { color: var(--ink); text-underline-offset: 3px; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; }
.split .lead { margin: 0; }
.prose { display: flex; flex-direction: column; gap: 14px; }
.prose.tint { background: var(--tile); border-radius: 16px; padding: 22px 24px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ticks li { position: relative; padding-left: 30px; font-weight: 300; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.ticks li b { font-weight: 500; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok-bg); }
.ticks li::after { content: ""; position: absolute; left: 6px; top: 7px; width: 5px; height: 8px; border: solid var(--ok); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }
.cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.cmp th, .cmp td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp thead th { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--well); }
.cmp tbody th { font-weight: 500; width: 28%; }
.cmp td { font-weight: 300; color: var(--ink-2); }
.cmp td.yes { color: var(--ok); font-weight: 500; }
.measure { position: relative; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; }
.measure dl { margin: 12px 0 0; display: flex; flex-direction: column; }
.measure dl div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.measure dl div:last-child { border-bottom: 0; }
.measure dt { color: var(--ink-2); font-weight: 300; }
.measure dd { margin: 0; font: 500 14px var(--mono); }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.note { background: var(--tile); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1100px) {
  .with-toc { display: block; }
  .toc { position: static; margin: 48px 0 0; padding: 0; border: 0; }
  .toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
  .toc a::before { display: none; }
}
@media (max-width: 900px) {
  .shots { grid-template-columns: 1fr; }
  .shots figure { height: auto; max-height: 260px; }
  .cards, .split, .notes { grid-template-columns: 1fr; }
  .split { gap: 24px; }
  .notes { gap: 12px; }
}
@media (max-width: 600px) {
  .toc ol { grid-template-columns: 1fr; }
  .card, .prose.tint, .measure { padding: 18px; }
}

/* ---- Home (owner 25 Oct 2026, Q63 a, Q67, Q69 b): a Quick convert card in the hero and the tools as a bento of tiles,
   each with its name, what it is for, the format change in mono and the logo's file shape in the tool's colour, on the
   CAD grid. Every class here is hm-: the other pages keep their own design until they move to this one. */
.hm-k { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.hm-hero { padding: 40px 0 64px; --bg-h: 100%; }
.hm-marq { overflow: hidden; white-space: nowrap; padding: 14px 0; border-block: 1px solid var(--line); background: #fff; }
.hm-marq div { display: inline-block; animation: hm-marq 50s linear infinite; }
.hm-marq span { margin: 0 22px; font: 500 13px var(--mono); letter-spacing: 0.08em; color: var(--faint); }
@keyframes hm-marq { to { transform: translateX(-50%); } }
/* sections */
.hm-sec { padding-top: 96px; }
.hm-sec h2, .hm-card h2 { margin: 8px 0 0; font-weight: 500; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.04em; }
.hm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 24px; }
.hm-head p:not(.hm-k) { margin: 8px 0 0; max-width: 460px; color: var(--muted); }
/* the finder and the family tabs: a pill that slides to the chosen tab */
.hm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hm-find { display: flex; align-items: center; gap: 8px; min-width: 230px; height: 46px; padding: 0 12px 0 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.hm-find:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgb(24 24 27 / 0.06); }
.hm-find svg { flex: none; color: var(--muted); }
.hm-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 14.5px var(--sans); color: var(--ink); }
.hm-find kbd { font: 500 11px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; }
.hm-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line); }
.hm-seg-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--ink); box-shadow: 0 6px 14px -6px rgb(24 24 27 / 0.6); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), width .45s cubic-bezier(.3, 1.3, .5, 1); }
.hm-seg.is-ready .hm-seg-pill { opacity: 1; }
.hm-seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font: 500 14px var(--sans); color: var(--ink-2); cursor: pointer; transition: color .3s; }
.hm-seg button em { font: 500 11px var(--mono); font-style: normal; padding: 2px 6px; border-radius: 999px; background: var(--tile); color: var(--muted); transition: background-color .3s, color .3s; }
.hm-seg button[aria-selected="true"] { background: var(--ink); color: #fff; }
.hm-seg.is-ready button[aria-selected="true"] { background: none; }
.hm-seg button[aria-selected="true"] em { background: rgb(255 255 255 / 0.16); color: #fff; }
.hm-hits { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 16px; }
.hm-hits[hidden] { display: none; }
.hm-hits a { font: 500 13.5px var(--mono); padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; }
.hm-hits a:hover { background: var(--acc); }
.hm-none { padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 20px; }
/* the bento */
.hm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; }
.hm-tile { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 210px; padding: 20px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .3s, transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.hm-tile[hidden] { display: none; }
.hm-tile.w2 { grid-column: span 2; }
.hm-tile.h2 { grid-row: span 2; }
.hm-tile::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%); }
.hm-tile::after { content: ""; position: absolute; inset: 10px; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s; background: linear-gradient(var(--c), var(--c)) 0 0 / 8px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 8px, linear-gradient(var(--c), var(--c)) 100% 0 / 8px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 8px, linear-gradient(var(--c), var(--c)) 0 100% / 8px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 8px, linear-gradient(var(--c), var(--c)) 100% 100% / 8px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 8px; background-repeat: no-repeat; }
a.hm-tile:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); transform: translateY(-3px); box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--c) 70%, transparent); }
a.hm-tile:hover::after { opacity: 1; }
.hm-mark { position: absolute; right: 16px; top: 14px; width: 40px; height: 48px; overflow: visible; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.hm-mark path { fill: #fff; stroke: var(--c); stroke-width: 1.1; transition: fill .35s; }
.hm-mark .f { fill: var(--c); stroke: none; opacity: 0.25; transition: opacity .35s; }
.hm-mark text { font: 500 7px var(--mono); fill: var(--c); transition: fill .35s; }
a.hm-tile:hover .hm-mark { transform: translateY(-2px) rotate(-6deg); }
a.hm-tile:hover .hm-mark path { fill: var(--c); }
a.hm-tile:hover .hm-mark .f { fill: #fff; opacity: 0.4; }
a.hm-tile:hover .hm-mark text { fill: #fff; }
.hm-tile .hm-k { display: flex; align-items: center; gap: 8px; padding-right: 52px; }
.hm-new { margin-left: auto; font: 600 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 999px; padding: 2px 7px; }
.hm-t { display: block; margin-top: 18px; padding-right: 52px; font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; }
.hm-d { display: block; margin-top: 8px; max-width: 440px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.hm-g { margin-top: auto; padding: 18px 48px 0 0; font: 500 13px/1.5 var(--mono); letter-spacing: 0.02em; color: var(--muted); }
.hm-g i { display: inline-block; transition: transform .35s; }
a.hm-tile:hover .hm-g i { transform: translateX(3px); }
.hm-go { position: absolute; right: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: #fff; font-size: 14px; transition: background-color .3s, border-color .3s, color .3s; }
a.hm-tile:hover .hm-go { background: var(--c); border-color: var(--c); color: #fff; }
.hm-tile.lead { background: #141414; border-color: #141414; color: #fff; }
.hm-tile.lead::before { background-image: linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: none; mask-image: none; }
.hm-tile.lead .hm-t { margin-top: auto; font-size: clamp(40px, 4.6vw, 60px); letter-spacing: -0.045em; }
.hm-tile.lead .hm-d { font-size: 17px; color: #D4D4D8; max-width: 420px; }
.hm-tile.lead .hm-g { margin-top: 22px; flex: 0; color: #A1A1AA; font-size: 14px; }
.hm-tile.lead .hm-k { color: #A1A1AA; }
.hm-tile.lead .hm-go { background: #fff; color: #141414; border-color: #fff; }
.hm-tile.lead .hm-mark { width: 64px; height: 77px; right: 22px; top: 20px; }
.hm-tile.lead .hm-mark path { fill: #141414; stroke: var(--acc-bright); }
.hm-tile.lead .hm-mark .f { fill: var(--acc-bright); opacity: 0.5; }
.hm-tile.lead .hm-mark text { fill: var(--acc-bright); }
a.hm-tile.lead:hover .hm-mark path { fill: var(--acc-bright); }
.hm-tile.sm { min-height: 170px; padding: 16px; }
.hm-tile.sm .hm-t { margin-top: 14px; font-size: 17px; }
.hm-tile.sm .hm-d { font-size: 13.5px; }
.hm-tile.sm .hm-g { font-size: 12px; }
.hm-tile.sm .hm-mark { width: 32px; height: 38px; right: 12px; top: 12px; }
.hm-tile.sm .hm-go { width: 30px; height: 30px; right: 12px; bottom: 12px; }
.hm-tile.sm .hm-k { padding-right: 40px; }
.hm-pairs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; }
.hm-pairs a { font: 500 13px var(--mono); color: var(--ink-2); text-decoration: none; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; transition: border-color .2s, color .2s; }
.hm-pairs a:hover { border-color: var(--ink); color: var(--ink); }
.hm-tile.priv { background: var(--bg); }
.hm-stats { display: flex; gap: 30px; margin-top: auto; padding-top: 16px; font: 12px var(--mono); color: var(--muted); }
.hm-stats b { display: block; margin-bottom: 6px; font: 500 34px/1 var(--mono); letter-spacing: -0.04em; color: var(--ink); }
.hm-stats span:first-child b { color: var(--acc); }
/* how it works, what's new, guides, formats */
.hm-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.hm-how > div > p:not(.hm-k) { margin: 14px 0 0; max-width: 440px; color: var(--ink-2); }
.hm-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px !important; font: 12px var(--mono); color: var(--muted); }
.hm-flow span { padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--ink); }
.hm-flow i { font-style: normal; color: var(--acc); }
.hm-flow s { color: var(--faint); }
.hm-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hm-steps li { display: grid; gap: 4px; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.hm-steps b { font-weight: 600; font-size: 18px; letter-spacing: -0.015em; }
.hm-steps li > span:last-child { font-size: 14.5px; color: var(--muted); }
.hm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.is-home #formats .hm-two { margin-top: 24px; }
.hm-card { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.hm-card h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 14px; }
.hm-card h3 { margin: 6px 0 8px; font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.hm-card > p:not(.hm-k) { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.hm-news { margin: 0; padding: 0; list-style: none; }
.hm-news li { display: grid; gap: 3px; padding: 12px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; color: var(--ink-2); }
.hm-more { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--ink); }
.hm-guide { display: grid; gap: 4px; padding: 16px; border-radius: 14px; background: var(--tile); color: var(--ink); text-decoration: none; }
.hm-guide b { font-weight: 600; font-size: 17px; }
.hm-guide > span:last-child { font-size: 14px; color: var(--muted); }
.hm-guide:hover { background: var(--line-soft); }
.hm-table { margin-top: 12px; border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 0 22px; }
.hm-table summary { cursor: pointer; padding: 18px 0; font-weight: 500; }
.hm-table .fmt { margin-bottom: 8px; font-size: 14px; }
.is-home #faq.faq { padding-top: 96px; }
.hm-cta { margin-top: 96px; padding: 56px 24px; border-radius: 24px; text-align: center; background: #141414; color: #fff; background-image: linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px); background-size: 32px 32px; }
.hm-cta h2 { margin: 0 0 10px; font-weight: 500; font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.04em; color: #fff; }
.hm-cta p { margin: 0 0 24px; color: #A1A1AA; }
.hm-cta .btn { background: #fff; color: #141414; min-height: 50px; padding: 0 22px; border-radius: 14px; font-size: 15px; }
.hm-cta .btn:hover { background: var(--acc); color: #fff; }
.is-home #faq .faq-side p:not(.hm-k) { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .hm-marq div { animation: none; }
  .hm-tile, .hm-tile *, .hm-seg-pill { transition: none !important; }
}
@media (max-width: 1000px) {
  .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-tile.h2 { grid-row: span 1; }
}
@media (max-width: 640px) {
  .hm-hero { padding: 24px 0 40px; }
  .hm-sec, .is-home #faq.faq { padding-top: 72px; }
  .hm-bar, .hm-find, .hm-seg { width: 100%; }
  .hm-seg button { flex: 1; gap: 5px; padding: 0 6px; font-size: 13.5px; }
  .hm-seg button svg { width: 14px; height: 14px; }
  .hm-seg button em { padding: 1px 5px; font-size: 10px; }
  .hm-grid { gap: 10px; }
  .hm-tile { min-height: 0; padding: 14px; border-radius: 16px; }
  .hm-tile .hm-k { font-size: 10px; padding-right: 34px; }
  .hm-mark, .hm-tile.sm .hm-mark { width: 28px; height: 34px; right: 10px; top: 10px; }
  .hm-tile.lead .hm-mark { width: 44px; height: 53px; }
  .hm-t, .hm-tile.sm .hm-t { margin-top: 12px; padding-right: 0; font-size: 16px; }
  .hm-d, .hm-tile.sm .hm-d { margin-top: 5px; font-size: 13px; }
  .hm-tile.lead .hm-t { margin-top: 40px; font-size: 34px; }
  .hm-tile.lead .hm-d { font-size: 14.5px; }
  .hm-g, .hm-tile.sm .hm-g { padding: 12px 32px 0 0; font-size: 11px; }
  .hm-go, .hm-tile.sm .hm-go { width: 28px; height: 28px; right: 10px; bottom: 10px; }
  .hm-pairs a { font-size: 12px; padding: 4px 8px; }
  .hm-stats { gap: 20px; }
  .hm-stats b { font-size: 26px; }
  .hm-two { grid-template-columns: minmax(0, 1fr); }
  .hm-card { padding: 18px; }
  .hm-table { padding: 0 14px; }
  .hm-table .fmt-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hm-cta { padding: 40px 18px; }
}

/* ---- Home hero (owner Q73-Q77, 25 Oct 2026; mock site/_preview/home-hero5-mock.html): two questions with big buttons,
   a sentence that shows the answers so far, then only the chosen tool and what happens next. */
.hm-z { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hm-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--ink-2); }
.hm-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgb(6 118 71 / 0.14); }
.hm-say { min-height: 2.65em; margin: 22px auto 34px; max-width: 1000px; font-weight: 500; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.25; letter-spacing: -0.04em; color: var(--ink); }
/* a blank: the span shows the text (typed, or an example while empty), the input on top takes the typing with its own
   text see-through, so the blank is always as wide as what it says */
.hm-slot { position: relative; display: inline-block; margin: 0 0.04em; padding: 0 0.18em; border-bottom: 0.07em dashed var(--faint); border-radius: 0.14em 0.14em 0 0; color: var(--faint); vertical-align: baseline; transition: background-color .2s, color .3s, border-color .3s; }
.hm-slot input { position: absolute; inset: 0; width: 100%; padding: 0 0.18em; border: 0; border-radius: inherit; background: none; font: inherit; letter-spacing: inherit; color: transparent; caret-color: var(--acc); outline: 0; cursor: text; }
.hm-slot input::selection { background: rgb(var(--acc-rgb) / 0.2); }
.hm-ghost { white-space: pre; }
.hm-slot.now { border-color: var(--ink-2); color: var(--faint); }
.hm-slot.now.typed { color: var(--ink); }
.hm-slot.on { color: var(--acc); border-bottom-style: solid; border-color: var(--acc); }
.hm-slot:hover, .hm-slot:focus-within { background: rgb(var(--acc-rgb) / 0.07); }
.hm-slot:focus-within { border-bottom-style: solid; border-color: var(--acc); }
.hm-slot.now:not(.typed):not(:focus-within) { animation: hm-blink 1.4s ease-in-out infinite; }
.hm-slot.typing { animation: none !important; }
.hm-slot.typing .hm-ghost::after { content: ""; display: inline-block; width: 0.06em; height: 0.9em; margin-left: 0.04em; vertical-align: -0.08em; background: var(--acc); animation: hm-caret 1s steps(1) infinite; }
@keyframes hm-caret { 50% { opacity: 0; } }
.hm-file[hidden], .hm-job[hidden] { display: none; }
@keyframes hm-blink { 50% { border-color: transparent; } }
@keyframes hm-swap { from { opacity: 0; transform: translateY(0.35em); filter: blur(4px); } }
@keyframes hm-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes hm-pop { from { opacity: 0; transform: translateY(8px); } }
.hm-step { width: min(1000px, 100%); animation: hm-in .45s cubic-bezier(.2, .8, .2, 1); }
.hm-step[hidden] { display: none; }
.hm-step > h2 { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 18px; font-weight: 600; font-size: 22px; letter-spacing: -0.02em; outline: 0; }
.hm-step > h2 i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: #fff; font: 600 14px var(--mono); font-style: normal; }
.hm-files { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* a kind of file: its mark and its name in one short row; the extension shows on hover (title) */
.hm-file { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 16px 8px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .25s, background-color .2s; }
.hm-file .hm-mark, .hm-job .hm-mark, .hm-rf .hm-mark { position: static; }
.hm-file .hm-mark { flex: none; width: 24px; height: 29px; transition: transform .3s; }
.hm-file b { min-width: 0; font-weight: 600; font-size: 14px; line-height: 1.2; white-space: nowrap; }
.hm-file:hover, .hm-file:focus-visible { transform: translateY(-2px); border-color: var(--c); background: color-mix(in srgb, var(--c) 5%, #fff); box-shadow: 0 14px 26px -20px var(--c); outline: 0; }
.hm-file:hover .hm-mark { transform: rotate(-8deg); }
.hm-file:hover .hm-mark path, .hm-file:focus-visible .hm-mark path { fill: var(--c); }
.hm-file:hover .hm-mark text, .hm-file:focus-visible .hm-mark text { fill: #fff; }
/* the drop box: a clear place to start, with its own button */
.hm-drop { position: relative; display: flex; align-items: center; gap: 18px; margin-top: 14px; padding: 18px 18px 18px 20px; border-radius: 20px; border: 1.5px dashed #D4D4D8; background: rgb(255 255 255 / 0.75); text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .3s; }
.hm-drop-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: rgb(var(--acc-rgb) / 0.1); color: var(--acc); transition: background-color .2s, color .2s, transform .3s; }
.hm-drop-ic svg { width: 22px; height: 22px; }
.hm-drop-tx { display: grid; gap: 2px; flex: 1; min-width: 0; }
.hm-drop-tx b { font-weight: 600; font-size: 16px; color: var(--ink); }
.hm-drop-tx span { font-size: 13.5px; color: var(--muted); }
.hm-drop-btn { flex: none; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 12px; background: var(--ink); color: #fff; font: 500 14.5px var(--sans); transition: background-color .2s; }
.hm-drop:hover { border-color: var(--acc); background: #fff; box-shadow: 0 18px 36px -28px rgb(var(--acc-rgb) / 0.8); }
.hm-drop:hover .hm-drop-btn { background: var(--acc); }
.hm-drop:focus-within { outline: 3px solid rgb(var(--acc-rgb) / 0.25); outline-offset: 3px; }
.hm-drop.on { border-style: solid; border-color: var(--acc); background: #FFF7ED; }
.hm-drop.on .hm-drop-ic { background: var(--acc); color: #fff; transform: translateY(-3px); }
.hm-msg { margin: 12px 0 0; font-size: 14px; color: var(--err); }
.hm-msg[hidden] { display: none; }
.hm-jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }
.hm-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); font: inherit; color: var(--ink); text-align: left; cursor: pointer; animation: hm-pop .35s cubic-bezier(.2, .8, .2, 1) backwards; transition: transform .3s, border-color .2s, box-shadow .3s; }
.hm-job .hm-mark { width: 34px; height: 41px; }
.hm-job b { display: block; font-weight: 600; font-size: 17px; }
.hm-job small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.hm-job em { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); font-style: normal; transition: background-color .25s, border-color .25s, color .25s; }
.hm-job:hover, .hm-job:focus-visible { transform: translateY(-2px); border-color: var(--c); box-shadow: 0 18px 34px -24px var(--c); outline: 0; }
.hm-job:hover em, .hm-job:focus-visible em { background: var(--c); border-color: var(--c); color: #fff; }
.hm-back { margin-top: 16px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 500 14px var(--sans); color: var(--ink-2); cursor: pointer; }
.hm-back:hover { border-color: var(--ink); color: var(--ink); }
.hm-res { width: min(920px, 100%); }
.hm-res-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.hm-res-top .hm-back { margin: 0; }
.hm-rcard { --c: var(--acc); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: 28px; background: #fff; border: 1.5px solid var(--c); overflow: hidden; text-align: left; box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--c) 70%, transparent); }
.hm-rpic { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 40px 24px; background: color-mix(in srgb, var(--c) 7%, #fff); }
.hm-rpic::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(color-mix(in srgb, var(--c) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.hm-rf { animation: hm-land .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.hm-rf.to { animation-delay: .35s; }
.hm-rf .hm-mark { width: 84px; height: 101px; filter: drop-shadow(0 16px 20px rgb(24 24 27 / 0.14)); }
.hm-rf.to .hm-mark { width: 104px; height: 125px; }
.hm-rf.to .hm-mark path { fill: var(--c); }
.hm-rf.to .hm-mark text { fill: #fff; }
.hm-rf.to .hm-mark .f { fill: #fff; opacity: 0.4; }
@keyframes hm-land { from { opacity: 0; transform: translateY(16px) rotate(-8deg); } }
.hm-rdots { display: flex; gap: 6px; }
.hm-rdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); opacity: 0.25; animation: hm-dots 1.2s ease-in-out infinite; }
.hm-rdots i:nth-child(2) { animation-delay: .15s; }
.hm-rdots i:nth-child(3) { animation-delay: .3s; }
@keyframes hm-dots { 40% { opacity: 1; transform: translateX(3px); } }
.hm-rtx { padding: 34px 34px 30px; }
.hm-rbadge { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 6px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); font: 600 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.hm-rbadge span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; }
.hm-rname { margin: 14px 0 8px; font-weight: 600; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.04em; color: var(--ink); outline: 0; }
.hm-rfor { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.hm-rgo { display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; margin-top: 22px; border-radius: 16px; background: var(--c); color: #fff; font: 500 17px var(--sans); text-decoration: none; box-shadow: 0 18px 36px -18px var(--c); transition: filter .2s, transform .3s; }
.hm-rgo:hover { color: #fff; filter: brightness(.92); transform: translateY(-2px); }
.hm-rgo:focus-visible { outline: 3px solid color-mix(in srgb, var(--c) 35%, transparent); outline-offset: 3px; }
.hm-rgo b { transition: transform .3s; }
.hm-rgo:hover b { transform: translateX(4px); }
.hm-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.hm-next li { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; background: var(--tile); font-size: 13px; line-height: 1.3; color: var(--ink-2); min-width: 0; }
.hm-next li span { overflow-wrap: anywhere; }
.hm-next i { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--c); font: 600 11px var(--mono); font-style: normal; }
.hm-rfree { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.hm-rfree svg { color: var(--ok); }
.hm-ralt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.hm-ralt button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 500 13.5px var(--sans); color: var(--ink); cursor: pointer; }
.hm-ralt button:hover { border-color: var(--ink); }
.hm-ralt i { width: 8px; height: 8px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .hm-step, .hm-job, .hm-rf { animation: none; }
  .hm-slot.now { animation: none; }
  .hm-slot.typing .hm-ghost::after { animation: none; }
  .hm-rdots i { animation: none; opacity: 0.6; }
}
@media (max-width: 760px) {
  .hm-rcard { grid-template-columns: minmax(0, 1fr); }
  .hm-rpic { padding: 26px 16px; }
  .hm-rf .hm-mark { width: 60px; height: 72px; }
  .hm-rf.to .hm-mark { width: 74px; height: 89px; }
  .hm-rtx { padding: 22px 18px 18px; }
  .hm-rfor { font-size: 15px; }
  .hm-next, .hm-jobs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hm-eyebrow { font-size: 10.5px; padding: 6px 10px; text-align: left; }
  .hm-say { min-height: 4.2em; margin: 18px 0 22px; font-size: 27px; line-height: 1.4; }
  .hm-step > h2 { font-size: 18px; }
  .hm-file { padding: 7px 14px 7px 9px; }
  .hm-file b { font-size: 13.5px; }
  .hm-drop { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .hm-drop-ic { width: 40px; height: 40px; }
  .hm-drop-tx { flex: 1 1 calc(100% - 60px); }
  .hm-drop-btn { flex: 1 1 100%; justify-content: center; }
}
/* the three ways to start, each with its number (owner Q80 a): type it, tap your file type, drop it */
.hm-way { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 26px 0 0; font-size: 15px; color: var(--muted); }
.hm-way i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--acc); color: #fff; font: 600 13px var(--mono); font-style: normal; }
.hm-way b { font-weight: 600; color: var(--ink); }
.hm-step > h2.hm-way { margin: 0 0 16px; font-size: 15px; letter-spacing: 0; }
.hm-step > h2.hm-way b { font-size: 18px; letter-spacing: -0.015em; }
.hm-step > h2.hm-way i { width: 26px; height: 26px; font-size: 13px; }
.hm-z[data-at="2"] [data-way1], .hm-z[data-at="3"] [data-way1] { display: none; }
.hm-say { margin-top: 10px; }
.hm-or { display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 18px auto; font: 500 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.hm-or::before, .hm-or::after { content: ""; flex: 1; height: 1px; background: #D4D4D8; }
.hm-step > .hm-or:first-child { margin-top: 0; }
.hm-drop { margin-top: 0; }
.hm-drop-ic { position: relative; }
.hm-drop-ic i { position: absolute; top: -7px; left: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: #fff; font: 600 11px var(--mono); font-style: normal; box-shadow: 0 0 0 3px #fff; }
@media (max-width: 640px) {
  .hm-way { margin-top: 18px; font-size: 13.5px; }
  .hm-way span { flex-basis: 100%; text-align: center; }
  .hm-step > h2.hm-way b { font-size: 16px; }
  .hm-or { margin: 14px auto; }
}
/* the top line: a dark "No uploads" badge and the count, in one pill (owner 25 Oct) */
.hm-eyebrow { gap: 0; padding: 4px 14px 4px 4px; font: 500 14px/1.3 var(--sans); letter-spacing: 0; color: var(--ink-2); box-shadow: 0 6px 18px -12px rgb(24 24 27 / 0.35); }
.hm-eb-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-right: 12px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12.5px var(--sans); }
.hm-eb-badge svg { color: #4ADE80; }
.hm-eb-tx { min-width: 0; }
/* the numbers: a mono tag like "01 · Pick" in How it works */
.hm-way i { width: auto; height: auto; padding: 3px 8px; border-radius: 7px; background: rgb(var(--acc-rgb) / 0.1); color: var(--acc); font: 600 12px var(--mono); letter-spacing: 0.06em; }
.hm-step > h2.hm-way i { width: auto; height: auto; padding: 3px 8px; border-radius: 7px; background: rgb(var(--acc-rgb) / 0.1); color: var(--acc); font: 600 12px var(--mono); letter-spacing: 0.06em; }
.hm-way-in { display: inline-flex; margin: 0 8px 0 0; vertical-align: 2px; }
.hm-drop-tx > b { display: inline; }
.hm-drop-tx { display: block; }
.hm-drop-tx > span:last-child { display: block; margin-top: 3px; }
/* "or": a small pill on a line that fades at both ends, so it reads as a break between the ways */
.hm-or { max-width: none; width: 100%; margin: 22px 0; gap: 0; color: var(--muted); }
.hm-or::before, .hm-or::after { height: 1px; background: linear-gradient(90deg, transparent, #D4D4D8 40%, #D4D4D8); }
.hm-or::after { background: linear-gradient(90deg, #D4D4D8, #D4D4D8 60%, transparent); }
.hm-or span { padding: 5px 14px; border-radius: 999px; background: #fff; border: 1px solid #D4D4D8; font: 600 11px var(--mono); letter-spacing: 0.16em; box-shadow: 0 4px 10px -8px rgb(24 24 27 / 0.4); }
@media (max-width: 640px) {
  .hm-eyebrow { padding: 4px 12px 4px 4px; font-size: 12.5px; text-align: left; }
  .hm-eb-badge { margin-right: 8px; font-size: 11.5px; }
  .hm-or { margin: 16px 0; }
}
/* each way to start has the same header, larger (owner 25 Oct): the tag, the name, a short line, centred */
.hm-way, .hm-step > h2.hm-way { justify-content: center; gap: 6px 12px; margin-top: 30px; margin-bottom: 14px; font-size: 16px; }
.hm-way i, .hm-step > h2.hm-way i { padding: 5px 11px; border-radius: 9px; font-size: 15px; }
.hm-way b, .hm-step > h2.hm-way b { font-size: 22px; letter-spacing: -0.02em; }
.hm-z .hm-say { margin-top: 0; }
.hm-step > .hm-or + .hm-way { margin-top: 0; }
.hm-eyebrow { align-self: center; }
@media (max-width: 640px) {
  .hm-way, .hm-step > h2.hm-way { margin-top: 20px; margin-bottom: 10px; font-size: 14px; }
  .hm-way span { flex-basis: 100%; text-align: center; }
  .hm-way b, .hm-step > h2.hm-way b { font-size: 18px; }
  .hm-way i, .hm-step > h2.hm-way i { font-size: 13px; padding: 4px 9px; }
  /* the privacy line: the badge on top, the count under it */
  .hm-eyebrow { flex-direction: column; gap: 6px; padding: 6px 14px 8px; border-radius: 18px; text-align: center; }
  .hm-eb-badge { margin: 0; }
}
/* option 2 as one row that keeps moving (owner 25 Oct); it stops while the pointer or the focus is on it, and while
   something is typed it stands still and shows only what matches */
.hm-files { display: block; width: min(1100px, 100%); margin: 0 auto; padding: 8px 0 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.35) 5%, #000 14%, #000 86%, rgb(0 0 0 / 0.35) 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.35) 5%, #000 14%, #000 86%, rgb(0 0 0 / 0.35) 95%, transparent); }
.hm-track { display: flex; width: max-content; animation: hm-slide 48s linear infinite; }
.hm-track .hm-file { flex: none; margin-right: 8px; }
.hm-files:hover .hm-track, .hm-files:focus-within .hm-track, .hm-files.is-held .hm-track { animation-play-state: paused; }
@keyframes hm-slide { to { transform: translateX(-50%); } }
.hm-files.is-narrow { -webkit-mask-image: none; mask-image: none; overflow: visible; }
.hm-files.is-narrow .hm-track { width: auto; flex-wrap: wrap; justify-content: center; gap: 8px; animation: none; }
.hm-files.is-narrow .hm-file { margin: 0; }
.hm-files.is-narrow .dup { display: none; }
@media (max-width: 640px) { .hm-track { animation-duration: 36s; } }
/* with reduced motion the row stands still: one row all the same, swiped or scrolled sideways, the copy hidden */
@media (prefers-reduced-motion: reduce) {
  .hm-files { overflow-x: auto; scrollbar-width: none; }
  .hm-files::-webkit-scrollbar { display: none; }
  .hm-track { padding: 0 6%; }
  .hm-track .dup { display: none; }
}
/* arrows for the row of kinds, only when it stands still (reduced motion): a mouse can page through it */
.hm-files-wrap { position: relative; width: min(1100px, 100%); margin: 0 auto; }
.hm-files-nav { display: none; position: absolute; z-index: 2; top: 50%; width: 36px; height: 36px; margin-top: -20px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font: 500 20px/1 var(--sans); color: var(--ink); cursor: pointer; box-shadow: 0 6px 16px -10px rgb(24 24 27 / 0.4); }
.hm-files-nav:hover { border-color: var(--ink); }
.hm-files-nav.prev { left: 0; }
.hm-files-nav.next { right: 0; }
@media (prefers-reduced-motion: reduce) { .hm-files-nav { display: grid; place-items: center; } .hm-files { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) and (pointer: coarse) { .hm-files-nav { display: none; } }
/* the sentence sits in the middle of its two-line space: one line in the centre, two lines fill it (owner 25 Oct) */
.hm-say { display: flex; flex-direction: column; justify-content: center; }
.hm-say-in { display: block; }

/* our strengths (owner Q81 a): five promises under the hero, then "Why FormatYard" after the tools */
.hm-promise { border-top: 1px solid var(--line); background: #fff; }
.hm-promise .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; padding: 16px 20px; }
.hm-promise span { display: inline-flex; align-items: center; gap: 8px; font: 500 14.5px var(--sans); color: var(--ink-2); }
.hm-promise svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #DCFCE7; color: var(--ok); }
.hm-why-head { max-width: 640px; }
.hm-why-head h2 { margin: 8px 0 12px; }
.hm-why-head p:not(.hm-k) { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.hm-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.hm-why-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: border-color .3s, transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; }
.hm-why-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%); }
.hm-why-card:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); transform: translateY(-3px); box-shadow: 0 20px 40px -28px color-mix(in srgb, var(--c) 70%, transparent); }
.hm-why-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: 14px; background: color-mix(in srgb, var(--c) 10%, #fff); color: var(--c); }
.hm-why-card .hm-k { color: var(--c); }
.hm-why-card b { font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.hm-why-card p { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
/* the footer (owner Q74 F2): one statement, one row of links */
.hm-wf { margin-top: 96px; padding: 80px 0 28px; border-top: 1px solid var(--line); }
.hm-wf > .wrap > .brand { color: var(--ink); }
.hm-wf-say { margin: 22px 0 0; font-weight: 500; font-size: clamp(36px, 6vw, 76px); line-height: 1; letter-spacing: -0.05em; color: var(--ink); }
.hm-wf a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.hm-wf a:hover { color: var(--acc); }
.hm-wf-tools { display: grid; gap: 0; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.hm-wf-grp { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; gap: 10px 20px; padding: 18px 0; }
.hm-wf-grp + .hm-wf-grp { border-top: 1px dashed var(--line); }
.hm-wf-grp:first-child { padding-top: 0; }
.hm-wf-grp .hm-k { padding-top: 2px; }
.hm-wf-grp > div { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.hm-wf-tools a { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.hm-wf-tools .fs { flex: none; transition: transform .25s; }
.hm-wf-tools a:hover .fs { transform: translateY(-2px) rotate(-6deg); }
.hm-wf-bot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--faint); }
.hm-wf-bot nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hm-wf-bot a { font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) { .hm-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hm-promise .wrap { justify-content: flex-start; gap: 8px 18px; padding: 14px 16px; }
  .hm-promise span { font-size: 13.5px; }
  /* phones: the six strengths as short cards, two to a line, the name only */
  .hm-why-grid { gap: 8px; }
  .hm-why-card { padding: 14px; gap: 4px; border-radius: 16px; }
  .hm-why-ic { width: 36px; height: 36px; margin-bottom: 6px; border-radius: 11px; }
  .hm-why-card b { font-size: 15px; line-height: 1.25; }
  .hm-why-card p, .hm-why-card .hm-k { display: none; }
  .hm-wf { padding-top: 56px; }
  .hm-wf-tools { margin-top: 36px; }
  .hm-wf-grp { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hm-wf-grp > div { gap: 10px 18px; }
  .hm-wf-bot { justify-content: flex-start; }
}


/* ---- Tool pages in the home page's design (owner Q70 stage 1, Q83 a, 25 Oct 2026): only the page around the tool */
.is-tool .section h2 { font-weight: 500; letter-spacing: -0.04em; }
.sec-no { display: inline-block; margin: 0 0 10px; padding: 3px 9px; border-radius: 7px; background: rgb(var(--acc-rgb) / 0.1); color: var(--acc); font: 600 12px var(--mono); letter-spacing: 0.06em; }
.is-tool .card, .is-tool .note { position: relative; isolation: isolate; border-radius: 20px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.is-tool .card::before, .is-tool .note::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%); }
.more-rows { display: grid; border-top: 1px solid var(--line); }
.more-grp { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: baseline; gap: 10px 20px; padding: 18px 0; }
.more-grp + .more-grp { border-top: 1px dashed var(--line); }
.more-grp > p { margin: 0; font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.more-grp > div { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.more-grp a { display: inline-flex; align-items: center; gap: 7px; font: 500 14.5px var(--sans); color: var(--ink); text-decoration: none; }
.more-grp a:hover { color: var(--acc); }
.more-grp .fs { flex: none; }
@media (max-width: 640px) { .more-grp { grid-template-columns: minmax(0, 1fr); } .more-grp > div { gap: 10px 18px; } }

/* Q70 stage 2 (owner Q86 a): guides and doc pages in the home page's design, as on the tool pages: numbered 500-weight
   headings, white cards with the CAD grid in the corner, a dark call to action in guides */
.is-doc .doc h1, .is-doc .gd-body h1 { font-weight: 500; letter-spacing: -0.045em; }
.is-doc .doc h2, .is-doc .gd-body h2 { margin-top: 6px; font-weight: 500; font-size: 26px; letter-spacing: -0.035em; scroll-margin-top: 130px; }
.is-doc .sec-no { display: block; width: max-content; margin: 40px 0 0; }
.is-doc .sec-no + h2 { margin-top: 10px; }
.is-doc .gd-card, .is-doc .gd-cta, .is-doc .lic, .is-doc .log { position: relative; isolation: isolate; border-radius: 20px; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.is-doc .gd-card::before, .is-doc .gd-cta::before, .is-doc .lic::before, .is-doc .log::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%); }
.is-doc .gd-card { padding: 24px 24px 18px; }
.is-doc .gd-body .gd-cta { padding: 18px 22px; background: var(--ink); border-color: var(--ink); color: #fff; }
.is-doc .gd-body .gd-cta::before { opacity: 0.12; }
.is-doc .gd-cta span span { color: #A1A1AA; }
.is-doc .gd-arrow { color: #fff; }
.is-doc .gd-body .gd-cta:hover { border-color: var(--ink); box-shadow: 0 18px 36px -24px rgb(24 24 27 / 0.7); }
.is-doc .gd-table { border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.is-doc .gd-table th, .is-doc .gd-table td { padding: 12px 14px; }
.is-doc .gd-table tr:last-child > * { border-bottom: 0; }
.is-doc .gd-table thead th { background: var(--tile); }
.is-doc .lic { padding: 4px 18px; }
.is-doc .log { margin-top: 14px; padding: 0 18px; }
.is-doc .log-row:last-child, .is-doc .lic-row:last-child { border-bottom: 0; }
.is-doc .doc p, .is-doc .gd-body p { overflow-wrap: break-word; }
@media (max-width: 640px) {
  .is-doc .doc h2, .is-doc .gd-body h2 { font-size: 22px; }
  .is-doc .gd-card { padding: 18px 16px 14px; }
  .is-doc .gd-table th, .is-doc .gd-table td { padding: 10px 8px; }
  .is-doc .log, .is-doc .lic { padding: 0 12px; }
}

/* the cookie notice (owner Q91 a, Q94 a, Q97 a; assets/js/consent.js): bottom left until the visitor answers */
.ck { position: fixed; left: 20px; bottom: 20px; z-index: 60; width: min(400px, calc(100vw - 32px)); padding: 20px 20px 18px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgb(24 24 27 / 0.35); isolation: isolate; overflow: hidden; }
.ck::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(90% 80% at 100% 0%, #000, transparent 70%); }
.ck > b { display: block; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.ck p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ck p a { color: var(--ink); text-underline-offset: 3px; }
.ck-safe { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px !important; padding: 10px 12px; border-radius: 12px; background: #F0FDF4; color: #166534 !important; font-size: 13px !important; line-height: 1.45 !important; }
.ck-safe svg { flex: none; margin-top: 1px; }
.ck-opt { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.ck-opt input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.ck-opt b { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.ck-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ck-row button { height: 42px; border-radius: 12px; font: 600 14px var(--sans); cursor: pointer; border: 1px solid var(--ink); }
.ck-yes { background: var(--ink); color: #fff; }
.ck-no { background: #fff; color: var(--ink); }
/* phones: a compact card, about half the height (owner, 27 Oct 2026) */
@media (max-width: 640px) {
  .ck { left: 10px; right: 10px; bottom: 10px; width: auto; padding: 12px 14px 12px; border-radius: 16px; }
  .ck > b { font-size: 14.5px; }
  .ck p { margin-top: 3px; font-size: 12.5px; line-height: 1.45; }
  .ck-safe { margin-top: 6px !important; padding: 0; background: none; font-size: 12px !important; }
  .ck-safe svg { width: 13px; height: 13px; }
  .ck-opt { margin-top: 8px; padding: 8px 10px; font-size: 12px; }
  .ck-opt b { font-size: 13px; }
  .ck-row { margin-top: 10px; gap: 6px; }
  .ck-row button { height: 36px; border-radius: 10px; font-size: 13.5px; }
}
.hm-wf-bot button { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
.hm-wf-bot a:hover, .hm-wf-bot button:hover { color: var(--acc); }

/* phones: the row's buttons (Save to Photos, which only iPhones show, and Download) on a line of their own, so the file
   name keeps the full width (owner's iPhone, 27 Oct 2026: "3." and "M" was all that was left of it) */
@media (max-width: 640px) {
  .is-img:not(.is-pdf) .frow { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  .is-img:not(.is-pdf) .frow-pic { order: 0; }
  .is-img:not(.is-pdf) .frow-nm { order: 1; flex: 1 1 calc(100% - 92px); }
  .is-img:not(.is-pdf) .frow-rm { order: 2; }
  .is-img:not(.is-pdf) .frow > :not(.frow-pic):not(.frow-nm):not(.frow-rm):not(.frow-grip):not(.frow-pg) { order: 3; }
}

/* phones (owner Q102 a): one finger scrolls the page past the viewer, two move the drawing; the hint after a one-finger drag */
.vx-coop .vx-canvas { touch-action: pan-y; }
.vx-hint { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 20px; background: rgb(24 24 27 / 0.55); color: #fff; font: 600 15px/1.4 var(--sans); text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
.vx-hint.on { opacity: 1; }

/* the blog's list of articles (owner Q104 a) */
.bl-list { display: grid; gap: 10px; margin-top: 8px; }
.is-doc .doc a.bl-post { position: relative; isolation: isolate; display: grid; gap: 4px; padding: 20px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: border-color .2s, transform .3s; }
.bl-post:hover { border-color: rgb(var(--acc-rgb) / 0.45); transform: translateY(-2px); }
.bl-post .mono { font-size: 11px; color: var(--faint); }
.bl-post b { font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.bl-post > span:last-child { font-size: 15px; color: var(--muted); }