/* Home page (landing/new_ui/index.html). Tokens from desk.css; shared parts from site-pages.css and public.css. */
/* One 1180px column for every section, as the design has it. Only the hero backdrop breaks out,
   so the grid and the lit blobs reach the window edges while the words stay in the column. */
.page-wrap.home { max-width: 1180px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* public.css gives every .section 34px of top padding and 6px of bottom, which reads as no rhythm
   at all down a long page. The home page uses the design's own measure instead. */
.home .section { padding-block: clamp(44px, 6.5vw, 70px); }
.home .section--cta { padding-block: 0 clamp(44px, 6.5vw, 86px); }
.home .section-title { margin-bottom: 22px; align-items: flex-end; }
.home .section-title h2 { font-size: clamp(24px, 3.1vw, 36px); font-weight: var(--fw-bold); letter-spacing: -.03em; }
.home .section-title a { font-size: var(--fs-body-lg); }

/* The clip has to sit on the body, not on the column: on the column it would cut the hero backdrop
   and the marketplace rail back to the column width, which is the one thing they must escape. An
   overflow value on body propagates to the viewport, so this stops a 100vw child from making a
   sideways scrollbar without turning anything into a scroll container. home.css is only loaded by
   the home page, so no other page is affected. */
body { overflow-x: hidden; }
.hh { position: relative; }
/* The backdrop is lifted to the top of the document (--hh-bg-rise, set by home-sections.js from
   the hero's own offset; 62px, the header height, is the no-JS fallback) so the grid runs up behind
   the header instead of stopping under it. The lit blobs add the same rise back, which keeps them
   sitting where they were against the words. */
.hh__bg { position: absolute; top: calc(-1 * var(--hh-bg-rise, 62px)); left: calc(-50vw + 50%); width: 100vw; height: calc(720px + var(--hh-bg-rise, 62px)); z-index: -1; pointer-events: none; overflow: hidden; }
.hh__bg::after { content: ""; position: absolute; inset: 0 0 auto; height: calc(600px + var(--hh-bg-rise, 62px)); background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 54px 54px; opacity: .4; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%); }
.hh__bg i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); }
.hh__bg i:nth-child(1) { width: 520px; height: 520px; left: 2%; top: calc(-140px + var(--hh-bg-rise, 62px)); background: radial-gradient(circle, rgba(3,61,99,.26), transparent 68%); animation: hh-drift 28s ease-in-out infinite; }
.hh__bg i:nth-child(2) { width: 430px; height: 430px; right: 6%; top: calc(20px + var(--hh-bg-rise, 62px)); background: radial-gradient(circle, rgba(17,154,212,.24), transparent 68%); animation: hh-drift 34s ease-in-out infinite reverse; }
.hh__bg i:nth-child(3) { width: 360px; height: 360px; right: 30%; top: calc(330px + var(--hh-bg-rise, 62px)); background: radial-gradient(circle, rgba(230,148,76,.26), transparent 68%); animation: hh-drift 40s ease-in-out infinite; }
@keyframes hh-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(38px, -28px, 0) scale(1.12); } }

/* Header over the hero. At the top of the page it carries no band of its own, so the grid and the
   blobs show through it; home-sections.js adds .is-stuck as soon as the page moves and the white
   blur of site-chrome.css comes back. Only the home page loads this file, so the header on every
   other page is unchanged.
   base.html loads this file before site-chrome.css, so both rules are scoped to the page to outweigh
   the plain .sc-header there rather than depend on the order. */
body[data-page="index"] .sc-header { background: transparent; backdrop-filter: none; border-bottom-color: transparent; transition: background .22s ease, border-color .22s ease, box-shadow .22s ease; }
body[data-page="index"] .sc-header.is-stuck { background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom-color: var(--border); box-shadow: 0 10px 26px -22px rgba(10,29,41,.6); }
@media (prefers-reduced-motion: reduce) { body[data-page="index"] .sc-header { transition: none; } }
.hh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(26px, 4vw, 52px); align-items: center; padding-block: clamp(26px, 4vw, 52px) clamp(30px, 4vw, 56px); }
.home .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--primary-text); background: var(--primary-soft); border: 1px solid var(--primary-soft-border); border-radius: 999px; padding: 5px 13px 5px 10px; }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: hd-ping 2.4s ease-out infinite; }
@keyframes hd-ping { 0% { box-shadow: 0 0 0 0 rgba(44,150,100,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(44,150,100,0); } }
@media (prefers-reduced-motion: reduce) {
  .eyebrow__dot, .hd, .hh h1 .ln > span, .hh__bg i { animation: none; }
}
.hh h1 { font-size: clamp(30px, 3.5vw, 42px); font-weight: var(--fw-bold); letter-spacing: -.035em; line-height: 1.08; margin: 14px 0 12px; text-wrap: balance; }
.hh h1 .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hh h1 .ln > span { display: block; animation: hh-rise .75s cubic-bezier(.2,.85,.25,1) backwards; }
.hh h1 .ln:nth-child(2) > span { animation-delay: .1s; }
@keyframes hh-rise { from { transform: translateY(105%); opacity: 0; } }
/* The tool name at the end of the headline rolls (home-sections.js). Every word is stacked in one
   column inside a box one word tall, and the column slides up a word at a time - so the word leaving
   and the word arriving are both on screen, moving together, instead of one fading out before the
   other fades in.

   The box is 1.25em so a descender (Split PDF, Merge PDF) has room inside its own slot; since
   overflow: hidden puts an inline-block's baseline at its bottom margin edge, the negative margin
   pulls that room back below the line and keeps the word sitting on the same baseline as "online".
   The box's width follows whichever word is on screen: home-sections.js measures each one and the
   box animates between them, so the line stays snug instead of holding the longest word's width
   for all of them. Nothing follows the word on its line, so only the right edge moves. */
/* overflow + isolation + clip-path, all three: gradient text (background-clip: text) can escape an
   overflow clip in Chromium while the column is mid-roll, and clip-path is the one the compositor
   always honours. */
.hh h1 em.rot { display: inline-block; overflow: hidden; isolation: isolate; clip-path: inset(0); height: 1.25em; margin-bottom: -.26em; font-style: normal; transition: width .38s cubic-bezier(.33, .9, .3, 1); }
.hh h1 em.rot.is-snapping { transition: none; }
.hh h1 .rot__list { display: block; transition: transform .38s cubic-bezier(.33, .9, .3, 1); }
.hh h1 .rot__list.is-snapping { transition: none; }
.hh h1 .rot__list > span { display: block; width: max-content; height: 1.25em; line-height: 1.25; white-space: nowrap; color: var(--primary-text); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hh h1 .rot__list > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
@media (prefers-reduced-motion: reduce) { .hh h1 .rot__list, .hh h1 em.rot { transition: none; } }
/* Two ways in, then the plain facts: what runs where, and what comes out of the printer. */
.hh__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hh__cta .btn--go { background: linear-gradient(180deg, #f5bb45, #e59a2a); border: none; color: var(--badge-text); font-weight: var(--fw-semibold); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -14px rgba(201,113,31,.9); }
.hh__cta .btn--go:hover { background: linear-gradient(180deg, #f8c75f, #d98f20); border-color: #b4701a; color: var(--badge-text); }
.spec { display: grid; gap: 9px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; font-size: var(--fs-label); }
.spec > div { display: flex; gap: 12px; align-items: baseline; }
.spec dt { min-width: 84px; font-weight: var(--fw-semibold); color: var(--text); }
.spec dd { margin: 0; color: var(--text-muted); }

/* The rail sits under both columns of the hero */
.hh__rail { grid-column: 1 / -1; min-width: 0; width: 100vw; margin-inline: calc(50% - 50vw); margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.hh .lead { color: var(--text-muted); font-size: 17px; line-height: 1.55; max-width: 540px; }

/* ── Hero crop demo (landing/js/new-ui/home-crop-demo.js) ──────────────────────────────────────────
   The panel sheet in landing/includes/panel_sheets.html is a depicted sheet of paper, so its ink and
   paper tokens stay the same in both themes; everything around it is the usual theme tokens. */
:root { --hd-paper: #ffffff; --hd-ink: #101a22; --hd-paper-line: #dee5ea; --hd-paper-head: #b9c6d1; --hd-paper-faint: #94a1ac; }

.hd { position: relative; border-radius: 28px; border: 1px solid var(--border); background: var(--surface); box-shadow: 0 40px 84px -44px rgba(3,61,99,.5), 0 6px 16px -10px rgba(10,29,41,.2); overflow: hidden; animation: hd-rise .8s .05s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes hd-rise { from { opacity: 0; transform: translateY(18px); } }
.hd__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-alt); }
.hd__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.hd__url { display: flex; align-items: center; gap: 6px; margin-left: 8px; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.hd__url svg { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: var(--success); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hd__bar .pill { margin-left: auto; }

.hd__body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; padding: 14px; }
.hd__stage { position: relative; border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--border); padding: 16px; display: grid; place-items: center; min-width: 0; }
.hd__sheet { position: relative; width: min(224px, 100%); border-radius: 3px; overflow: hidden; background: var(--hd-paper); box-shadow: 0 20px 42px -22px rgba(3,61,99,.55); }
.hd__sheet svg text { font-family: var(--font); }
.hd__note { position: absolute; left: 10px; bottom: 9px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; box-shadow: 0 1px 2px rgba(10,29,41,.06); }

.hd__crop { position: absolute; border: 1.5px solid var(--accent); cursor: grab; touch-action: none; box-shadow: 0 0 0 9999px rgba(10,29,41,.4); }
.hd__crop:active { cursor: grabbing; }
.hd__crop::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.45) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.45) 1px, transparent 1px); background-size: 100% 33.33%, 33.33% 100%; background-position: 0 -1px, -1px 0; }
.hd__h { position: absolute; width: 14px; height: 14px; border: 3px solid var(--accent); touch-action: none; }
.hd__h--nw { left: -1.5px; top: -1.5px; border-right: 0; border-bottom: 0; cursor: nwse-resize; }
.hd__h--ne { right: -1.5px; top: -1.5px; border-left: 0; border-bottom: 0; cursor: nesw-resize; }
.hd__h--sw { left: -1.5px; bottom: -1.5px; border-right: 0; border-top: 0; cursor: nesw-resize; }
.hd__h--se { right: -1.5px; bottom: -1.5px; border-left: 0; border-top: 0; cursor: nwse-resize; }
.hd__size { position: absolute; left: 50%; top: 100%; margin-top: 7px; transform: translateX(-50%); height: 22px; padding: 0 9px; border-radius: 999px; background: var(--accent); color: var(--badge-text); font-size: var(--fs-small); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; pointer-events: none; }
.hd__crop.is-low .hd__size { top: auto; bottom: 7px; margin-top: 0; }

.hd__side { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.hd__label { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.hd__out { position: relative; width: 100%; max-width: 190px; height: 122px; overflow: hidden; border-radius: 5px; background: var(--surface-alt); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(10,29,41,.05), 0 8px 22px -18px rgba(3,61,99,.3); }
.hd__out-in { position: absolute; top: 0; left: 0; }
.hd__out-in svg { display: block; }
.hd__out-in svg text { font-family: var(--font); }
.hd__meta { list-style: none; display: grid; gap: 6px; font-size: var(--fs-label); }
.hd__meta li { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); color: var(--text-muted); font-weight: var(--fw-medium); }
.hd__meta b { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.hd__run { width: 100%; }
.hd__hint { display: flex; gap: 6px; font-size: var(--fs-small); color: var(--text-faint); line-height: 1.4; }
.hd__hint svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Tool sections */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.section-title a { font-weight: var(--fw-semibold); text-decoration: none; font-size: var(--fs-label); }

/* Hero rail: the PDF tools. The marketplace version of the same chip (.sellers__brand) is below,
   for the rail on /ecommerce-label-crop/. */
.toolchip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 9px 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--fs-label); white-space: nowrap; }
.toolchip:hover { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-text); }
.toolchip__i { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; }
.toolchip__i svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toolchip:hover .toolchip__i { background: var(--surface); }

/* Sellers section */
.sellers__brand { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: var(--fw-semibold); font-size: var(--fs-label); white-space: nowrap; }
.sellers__brand:hover { background: var(--primary-soft); border-color: var(--primary-soft-border); color: var(--primary-text); }
.sellers__brand img { width: 28px; height: 28px; border-radius: 7px; background: #fff; padding: 2px; }
.seller-band--desk { margin-top: 0; }

@media (max-width: 1000px) { .hh { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .hd__body { grid-template-columns: 1fr; } .hd__out { max-width: none; } }
@media (max-width: 640px) { .hh h1 { font-size: 30px; } .spec dt { min-width: 76px; } .hd__body { grid-template-columns: 1fr; } .hd__out { max-width: none; } }

/* ── Below the hero ────────────────────────────────────────────────────────────────────────────── */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.section--cta { padding-block: 10px 0; }
.section-lead { color: var(--text-muted); max-width: 58ch; margin: -2px 0 18px; }

/* Stats strip */

/* Tool group tabs and filter */
.tfind { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); min-width: 210px; }
.tfind svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; }
.tfind input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-body); color: var(--text); }
.tfind input:focus { outline: none; }
.tools-empty { padding: 26px; margin-top: 10px; text-align: center; color: var(--text-muted); font-weight: var(--fw-medium); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }

/* Three steps */
.home .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; }
.home .step { padding: 16px; }
.home .step__art { border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--border); margin-bottom: 14px; overflow: hidden; }
.home .step__art svg { width: 100%; height: auto; display: block; }
.home .step__art text { font-family: var(--font); }
.home .step__n { display: inline-flex; align-items: center; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 7px; padding: 3px 8px; }
.home .step h3 { margin-top: 10px; font-size: var(--fs-section); font-weight: var(--fw-bold); }
.home .step p { margin-top: 6px; color: var(--text-muted); line-height: 1.55; }

/* Seller band: the packing run, then the printer */

/* The marketplace rail under the band */
.marq { min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marq__track { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
/* Tool names run longer than marketplace names, and the chips are one line each */
.marq--tools .marq__track { grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
.marq.is-rolling .marq__track { display: flex; width: max-content; animation: marq-roll 38s linear infinite; }
.marq.is-rolling:hover .marq__track, .marq.is-rolling:focus-within .marq__track { animation-play-state: paused; }
@keyframes marq-roll { to { transform: translateX(-50%); } }

/* PC Desk */
.dsk { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(20px, 2.4vw, 34px); align-items: center; }
.dsk__copy { min-width: 0; }
.dsk__copy .eyebrow svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
/* The heading was pinned at 28px while every other section title scales - and public.css loads
   after this file, so its `.section h2` (20px) was winning the tie and the heading never reached
   even that. `.home` breaks the tie and the size follows the page's own scale. */
.home .dsk h2 { margin: 14px 0 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: var(--fw-bold); letter-spacing: -.03em; line-height: 1.14; text-wrap: balance; }
.dsk > div > p { margin-top: 10px; color: var(--text-muted); line-height: 1.6; max-width: 48ch; }
/* Four plain ticked lines read as an afterthought next to the shot, so each one sits on its own
   surface with the tick in a soft badge - the same card language as the rest of the page. */
.dsk__list { list-style: none; margin: 18px 0 0; display: grid; gap: 8px; }
.dsk__list li { display: flex; align-items: center; gap: 11px; padding: 10px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-body-lg); font-weight: var(--fw-medium); line-height: 1.35; }
.dsk__tick { width: 21px; height: 21px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--success-soft); }
.dsk__tick svg { width: 11px; height: 11px; fill: none; stroke: var(--success-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dsk .home-hero__actions { margin-top: 20px; }
.dsk .dsk__note { margin-top: 12px; font-size: var(--fs-small); color: var(--text-faint); }
/* The PDF Editor's drawn canvas (#editor). Unlike the screenshot the band used to hold, this is
   artwork in the page's own tokens, so it stays inside the column and simply scales. */
.edm { min-width: 0; }
.edm svg { display: block; width: 100%; height: auto; border-radius: var(--r-lg); filter: drop-shadow(0 34px 70px rgba(3,61,99,.26)); }
.edm svg text { font-family: var(--font); }
@media (prefers-reduced-motion: reduce) { .edm svg animate { display: none; } }

.shot { perspective: 1700px; }
/* Past the breakpoint the screenshot runs out to the window edge: the column alone is not wide
   enough to show the app at a size where its own text is legible. */
@media (min-width: 1081px) { .shot { margin-right: calc((min(1180px, 100vw) - 32px - 100vw) / 2); } }
.shot__win { display: block; width: 100%; height: auto; transform: perspective(1700px) rotateY(-7deg) rotateX(3.5deg); border-radius: var(--r-md); border: 1px solid var(--border-strong); box-shadow: 0 44px 90px -44px rgba(3,61,99,.6), 0 8px 20px -12px rgba(10,29,41,.25); }

/* Plans */

/* Closing call to action */
.endcta { text-align: center; padding: clamp(26px, 4vw, 48px) 22px; background: radial-gradient(90% 120% at 50% 0%, var(--primary-soft), transparent 70%), var(--surface); }
.endcta h2 { font-size: clamp(22px, 3vw, 32px); font-weight: var(--fw-bold); letter-spacing: -.02em; }
.endcta p { margin: 10px auto 0; color: var(--text-muted); max-width: 50ch; }
.endcta__row { justify-content: center; margin-top: 18px; }

@media (max-width: 1080px) { .dsk { grid-template-columns: 1fr; } .shot__win { transform: none; } }
/* One full-width column of ticks under a full-width heading is too loose; pair them up instead */
@media (min-width: 641px) and (max-width: 1080px) { .dsk__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .home .dsk h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .marq.is-rolling .marq__track { animation: none; } }

/* ── Narrow screens ───────────────────────────────────────────────────────────────────────────── */
/* public.css pins this at four columns; on the wider home page let it fill the row instead */
@media (max-width: 480px) {
  .hh__cta { flex-direction: column; align-items: stretch; }
  .hh__cta .btn { width: 100%; }
  .spec > div { flex-direction: column; gap: 2px; }
  .spec dt { min-width: 0; }
  .hh__rail, .spec { margin-top: 20px; padding-top: 16px; }
  .home .step { padding: 16px; }
  .section-title { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* The tool list takes focus when the hero button jumps to it; no ring needed for a mouse click */
#tools:focus { outline: none; }
#tools:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--r-lg); }

/* ── Tool list ─────────────────────────────────────────────────────────────────────────────────
   One list in as many columns as fit, filtered by the group pills above it. Each row is the tool's
   icon and its name; what the tool does is on the tool's own page, a click away. */
.tools__head { text-align: center; max-width: 760px; margin: 0 auto 26px; }
.kicker { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; color: var(--primary-text); }
.kicker--warm { color: var(--accent); }
.tools__head h2 { margin-top: 10px; font-size: clamp(26px, 3vw, 38px); font-weight: var(--fw-bold); letter-spacing: -.03em; }
.segs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 20px; padding: 4px; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); }
.seg { height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-muted); cursor: pointer; }
.seg:hover { color: var(--text); }
.seg[aria-selected="true"] { background: var(--surface); color: var(--primary-text); box-shadow: 0 1px 3px rgba(10,29,41,.14); }
.tfind { display: flex; align-items: center; gap: 8px; width: min(320px, 100%); height: 36px; margin: 14px auto 0; padding: 0 14px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); }
.tfind svg { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; }
.tfind input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--fs-body); color: var(--text); }
.tfind input:focus { outline: none; }

/* min(100%, 320px): below a 352px window the column would otherwise stay 320px wide and the
   rows would run past the screen. Above it this is exactly 320px, so nothing else changes. */
.toollist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 2px 20px; }
.toolrow { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-radius: var(--r-md); border: 1px solid transparent; color: var(--text); text-decoration: none; transition: background .15s, border-color .15s, box-shadow .15s; }
.toolrow:hover { background: var(--surface); border-color: var(--border); box-shadow: 0 1px 2px rgba(10,29,41,.05), 0 10px 26px -20px rgba(3,61,99,.4); }
.toolrow[hidden] { display: none; }
.toolrow__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; }
.toolrow__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.toolrow__name { font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }
.toolrow__tag { margin-left: auto; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--success-text); background: var(--success-soft); border-radius: 7px; padding: 2px 6px; opacity: 0; transition: opacity .15s; }
.toolrow:hover .toolrow__tag { opacity: 1; }
.tools__more { margin-top: 20px; text-align: center; font-size: var(--fs-body-lg); font-weight: var(--fw-semibold); }

/* ── Before and after ──────────────────────────────────────────────────────────────────────────
   Both halves are the same sheet: the left one whole, the right one cropped to the label. */
.wipe-sec__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px 20px; align-items: stretch; }
.wipe-sec__copy { grid-column: 1 / -1; }
.wipe-sec__copy h2 { margin-top: 12px; font-size: clamp(25px, 3vw, 36px); font-weight: var(--fw-bold); letter-spacing: -.03em; line-height: 1.12; }
.wipe-sec__copy p { margin-top: 10px; color: var(--text-muted); line-height: 1.55; max-width: 54ch; }
.wipe-sec__cta { margin-top: 16px; }
.wipe { position: relative; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-alt); overflow: hidden; touch-action: none; }
.wipe__pad { position: relative; aspect-ratio: 16 / 10; }
.wipe__lay { position: absolute; inset: 0; display: grid; place-items: center; padding: clamp(16px, 3vw, 34px); background: var(--surface-alt) }
.wipe__lay--after { clip-path: inset(0 0 0 var(--p, 52%)); }
.wipe__sheet { width: 48%; border-radius: 2px; overflow: hidden; background: var(--hd-paper); box-shadow: 0 22px 36px -20px rgba(3,61,99,.6); }
.wipe__label { width: 83%; border-radius: 4px; overflow: hidden; background: var(--hd-paper); box-shadow: 0 22px 36px -20px rgba(3,61,99,.6); }
.wipe__sheet svg, .wipe__label svg { display: block; width: 100%; height: auto; }
.wipe__sheet svg text, .wipe__label svg text { font-family: var(--font); }
.wipe__cap { position: absolute; top: 14px; font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: .08em; padding: 4px 9px; border-radius: 7px; background: rgba(6,16,25,.78); color: #eef5f9; }
.wipe__cap--a { left: 14px; }
.wipe__cap--b { right: 14px; }
.wipe__bar { position: absolute; top: 0; bottom: 0; left: var(--p, 52%); width: 2px; background: var(--accent); box-shadow: 0 0 16px rgba(230,148,76,.7); }
.wipe__knob { position: absolute; top: 50%; left: var(--p, 52%); transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 1px solid var(--accent); box-shadow: 0 8px 18px -8px rgba(10,29,41,.5); display: grid; place-items: center; color: var(--accent); cursor: ew-resize; touch-action: none; }
.wipe__knob svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

.facts { list-style: none; display: grid; gap: 8px; align-content: space-between; align-self: stretch; }
.facts li { display: flex; gap: 11px; padding: 11px 13px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.facts__icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; background: var(--primary-soft); color: var(--primary-text); display: grid; place-items: center; }
.facts__icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.facts b { display: block; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.facts small { display: block; margin-top: 2px; font-size: var(--fs-label); color: var(--text-muted); line-height: 1.45; }

@media (max-width: 900px) {
  .wipe-sec__grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}