/* ==========================================================================
   Product pages in the style of the new front page.
   Loaded after the current site's landing.css / site.css / product.css and
   scoped to body.v5, so the markup and scripts of those pages stay as they are.
   ========================================================================== */
.v5 { --pad: clamp(1.25rem, 5vw, 5rem); --ease: cubic-bezier(.32, .72, 0, 1); background: var(--rdw-paper); }
.v5 .paper-bg, .v5 .paper-grain, .v5 .divider, .v5 > .nav, .v5 .mobile-menu, .v5 .back-to-top, .v5 .eyebrow { display: none !important; }

/* ── Bar: the same full-width header as the front page ─────────────────── */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: 72px; display: flex; align-items: center; gap: 2rem;
    padding: 0 clamp(1.25rem, 4vw, 3rem); background: color-mix(in srgb, var(--rdw-paper) 95%, transparent);
    border-bottom: 1px solid rgba(10, 10, 10, .06); box-shadow: inset 0 1px 0 rgba(255, 251, 242, .9), 0 8px 24px -12px rgba(58, 42, 14, .12); }
.bar__logo { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; flex: none; text-decoration: none;
    font: 700 .78rem var(--rdw-font-heading); letter-spacing: .08em; color: #c9a84c; background: linear-gradient(170deg, #1a1608 0%, #000 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 8px 18px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .06); }
.bar__nav { display: flex; gap: 2rem; margin: 0 auto; }
.bar__nav a { font: 600 .78rem var(--rdw-font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--rdw-ink-2); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .3s, border-color .3s; }
.bar__nav a:hover { color: var(--rdw-gold-deep); }
.bar__nav a[aria-current] { color: var(--rdw-ink); border-bottom-color: var(--rdw-gold); }
.bar__lang { display: flex; gap: 6px; }
.bar__lang a { padding: 4px 8px; border-radius: 4px; font: 600 .78rem var(--rdw-font-body); letter-spacing: .1em; color: var(--rdw-ink-3); text-decoration: none; }
.bar__lang a[aria-current] { color: var(--rdw-ink); background: var(--rdw-paper-2); }
.v5 .bar .bar__cta { padding: .6rem 1.1rem; font-size: .85rem; }

/* ── Type: large, tight, left-aligned; gold is flat ─────────────────────── */
.v5 .h1, .v5 .hero__title { font: 700 clamp(2.7rem, 5.8vw, 5.4rem)/.98 var(--rdw-font-heading); letter-spacing: -.035em; color: var(--rdw-ink); max-width: 13ch; text-wrap: balance; }
.v5 .h2 { font: 700 clamp(2.1rem, 4.4vw, 4.1rem)/1.03 var(--rdw-font-heading); letter-spacing: -.03em; max-width: 17ch; text-wrap: balance; }
.v5 .gold-chisel, .v5 .gold-flat { background: none; -webkit-background-clip: border-box; background-clip: border-box; -webkit-text-fill-color: currentColor; color: var(--rdw-gold-deep); text-shadow: none; filter: none; font-style: normal; padding: 0; box-shadow: none; }
.v5 .gold-mark { background: var(--rdw-gold); color: #000; -webkit-text-fill-color: #000; padding: .02em .16em; border-radius: 0; font-style: normal; text-shadow: none; box-shadow: none; filter: none; transform: none; display: inline; }
.v5 .lead { font-size: clamp(1.05rem, 1.35vw, 1.28rem); line-height: 1.55; color: var(--rdw-ink-2); max-width: 38em; }
.v5 .section__head, .v5 .section__head--center { text-align: left; margin-inline: 0; max-width: none; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.v5 .section__head--center .lead, .v5 .section__head--center .h2 { margin-inline: 0; }

/* ── Buttons: solid black and a plain outline, as on the front page ────── */
.v5 .btn { display: inline-flex; align-items: center; gap: .6rem; border-radius: 999px; padding: .85rem 1.5rem; font: 600 1rem var(--rdw-font-body); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
    background-image: none; box-shadow: none; text-shadow: none; border: 1.5px solid transparent; transform: none; transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), scale .3s var(--ease); }
.v5 .btn:active { scale: .98; }
.v5 .btn--primary, .v5 .btn--solid { background: #000; color: var(--rdw-paper); }
.v5 .btn--primary:hover, .v5 .btn--solid:hover { background: var(--rdw-gold-deep); color: #fff; }
.v5 .btn--ghost { background: transparent; border-color: rgba(10, 10, 10, .75); color: var(--rdw-ink); }
.v5 .btn--ghost:hover { background: #000; color: var(--rdw-paper); border-color: #000; }

/* ── Hero: paper, the product name outlined behind it ───────────────────── */
.v5 main { padding-top: 72px; }
.v5 .hero { position: relative; overflow: hidden; background: var(--rdw-paper); background-image: none; min-height: 0; padding: clamp(3rem, 7vw, 6.5rem) var(--pad) clamp(6rem, 13vw, 12rem); border: 0; }
.v5 .hero::before, .v5 .hero::after { content: none; }
.v5 .hero__inner { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; }
.v5 .hero__ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.ph__word { position: absolute; left: calc(var(--pad) - .04em); bottom: -.15em; margin: 0; z-index: 0; pointer-events: none; white-space: nowrap;
    font: 700 clamp(5rem, 19vw, 21rem)/.8 var(--rdw-font-heading); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(10, 10, 10, .12); }
.v5 .cf-logo__gold { color: var(--rdw-gold-deep); background: none; -webkit-text-fill-color: currentColor; }
/* the hero tags are a plain list with a gold dash, not a row of chips */
.v5 .rc-tags { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; padding: 0; margin: 1.6rem 0 0; list-style: none; }
.v5 .rc-tags li { position: relative; padding: 0 0 0 1.3rem; background: none; border: 0; box-shadow: none; border-radius: 0; font: 500 .98rem var(--rdw-font-body); color: var(--rdw-ink); }
.v5 .rc-tags li::before { content: ""; position: absolute; left: 0; top: .72em; width: .8rem; height: 2px; background: var(--rdw-gold); }

/* ── Sections: air on paper; the dark ones are inset panels, like the sheets ── */
.v5 .section { background: transparent; background-image: none; border: 0; padding: clamp(4rem, 8vw, 7.5rem) var(--pad); }
.v5 .section::before, .v5 .section::after { content: none; }
.v5 .section__inner { max-width: 1400px; margin: 0 auto; }
.v5 .section--black, .v5 #contact { background: #000; color: var(--rdw-paper); margin: clamp(1rem, 3vw, 3rem) clamp(.6rem, 1.6vw, 1.6rem); border-radius: clamp(22px, 2.6vw, 38px);
    box-shadow: 0 0 0 1px rgba(201, 168, 76, .35), 0 40px 80px -40px rgba(20, 14, 2, .6); }
.v5 .section--black .h2, .v5 #contact .h2, .v5 #contact .contact__headline { color: var(--rdw-paper); }
.v5 .section--black .gold-chisel, .v5 #contact .gold-chisel { color: var(--rdw-gold); }
.v5 .section--black .lead, .v5 .section--black p, .v5 #contact .contact__lead, .v5 #contact p { color: rgba(245, 240, 232, .78); }
.v5 .section--black .btn--primary, .v5 #contact .btn--primary { background: var(--rdw-gold); color: #000; }
.v5 .section--black .btn--primary:hover, .v5 #contact .btn--primary:hover { background: var(--rdw-paper); color: #000; }
.v5 .section--black .btn--ghost, .v5 #contact .btn--ghost { border-color: rgba(245, 240, 232, .6); color: var(--rdw-paper); background: transparent; }
.v5 .section--black .btn--ghost:hover, .v5 #contact .btn--ghost:hover { background: var(--rdw-paper); color: #000; border-color: var(--rdw-paper); }
.v5 #contact .contact__head { text-align: left; margin-inline: 0; }
.v5 #contact .contact__buttons { justify-content: flex-start; }
.v5 #contact .contact__meta-line { color: rgba(245, 240, 232, .6); text-align: left; }

/* ── Cards: one quiet card, one hairline, one soft warm shadow ──────────── */
.v5 :is(.ps-card, .feat-card, .specs-card, .pricing-card, .pricing-included, .changelog-card, .how-step, .shot-tile, .notch-tile, .kpi) {
    background: rgba(255, 255, 255, .62); background-image: none; border: 0; border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(10, 10, 10, .07), 0 26px 44px -30px rgba(20, 14, 2, .5); }
.v5 :is(.ps-card, .feat-card, .specs-card, .pricing-card, .pricing-included, .changelog-card, .how-step)::before { content: none; }
.v5 .feat-card__title, .v5 .how-step__title, .v5 .ps-card__title, .v5 .pricing-card__title { font-family: var(--rdw-font-heading); letter-spacing: -.01em; }
/* before / after: the answer is the dark card */
.v5 .ps-card--solution, .v5 .pricing-card--feature { background: #000; color: var(--rdw-paper); box-shadow: 0 0 0 1px rgba(201, 168, 76, .4), 0 34px 60px -30px rgba(20, 14, 2, .8); }
.v5 .ps-card--solution :is(h3, li, p), .v5 .pricing-card--feature :is(h3, p, li, span) { color: var(--rdw-paper); }
.v5 .ps-card--solution .ps-card__kicker, .v5 .pricing-card--feature .pricing-card__amount { color: var(--rdw-gold); background: none; border-color: rgba(201, 168, 76, .4); -webkit-text-fill-color: currentColor; }
.v5 .pricing-card--feature .btn--primary { background: var(--rdw-gold); color: #000; }
.v5 .pricing-card--feature .btn--primary:hover { background: var(--rdw-paper); }
.v5 .how-step__num { color: var(--rdw-gold-deep); background: none; -webkit-text-fill-color: currentColor; box-shadow: none; font-family: var(--rdw-font-heading); }

/* ── Footer: black, as the contact panel of the front page ──────────────── */
.v5 .footer { background: #000; background-image: none; color: rgba(245, 240, 232, .7); border: 0; margin-top: clamp(2rem, 5vw, 5rem); }
.v5 .footer :is(.footer__text, a) { color: var(--rdw-paper); }
.v5 .footer a:hover { color: var(--rdw-gold); }
.v5 .footer__links a { background: transparent; box-shadow: none; border: 1.5px solid rgba(245, 240, 232, .35); border-radius: 999px; }
.v5 .footer__trademark { background: transparent; color: rgba(245, 240, 232, .5); border-color: rgba(245, 240, 232, .12); }
.v5 .footer__trademark a { color: rgba(245, 240, 232, .7); }

/* ── Dock ───────────────────────────────────────────────────────────────── */
.dock { position: fixed; right: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2.4vw, 28px); z-index: 25; display: grid; gap: 2px; padding: 5px;
    background: #000; border-radius: 16px; box-shadow: 0 0 0 1px rgba(201, 168, 76, .32), 0 18px 36px -14px rgba(20, 14, 2, .55);
    opacity: 0; translate: 0 12px; transition: opacity .5s, translate .5s var(--ease, ease); }
.dock.is-ready { opacity: 1; translate: 0 0; }
.dock button { appearance: none; position: relative; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; cursor: pointer;
    background: transparent; color: #c9a84c; transition: background-color .3s, color .3s, opacity .3s, scale .2s; }
.dock button:hover { background: rgba(201, 168, 76, .18); color: #e6cd84; }
.dock button:active { scale: .94; }
.dock button:focus-visible { outline: 2px solid #c9a84c; outline-offset: 1px; }
.dock button:disabled { opacity: .28; cursor: default; background: transparent; }
.dock [data-dock="top"] { margin-top: 3px; }
.dock [data-dock="top"]::before { content: ""; position: absolute; left: 9px; right: 9px; top: -3px; height: 1px; background: rgba(201, 168, 76, .28); }

@media (max-width: 860px) {
    .bar { height: 60px; gap: .8rem; }
    .bar__logo { width: 38px; height: 38px; }
    .bar__nav { margin: 0 0 0 auto; gap: 1rem; }
    .bar__nav a { font-size: .7rem; letter-spacing: .1em; }
    .bar__nav a:not([aria-current]) { display: none; }
    .v5 main { padding-top: 60px; }
    .dock button { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }

/* ── Second pass: everything starts at the left edge; no hairlines between sections ── */
.v5 .section, .v5 .hero { border: 0 !important; box-shadow: none; }
.v5 .section--black, .v5 #contact { box-shadow: 0 0 0 1px rgba(201, 168, 76, .35), 0 40px 80px -40px rgba(20, 14, 2, .6); }
.v5 .section__head--center, .v5 .contact__head, .v5 .section--how .section__inner { display: block; text-align: left !important; max-width: none !important; }
.v5 .section__head--center > *, .v5 .contact__head > *, .v5 .section--how .section__inner > * { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; }
.v5 .contact__buttons { justify-content: flex-start !important; }
.v5 #contact .gold-flat, .v5 .section--black .gold-flat { color: var(--rdw-gold); }
.v5 #contact .section__inner { padding-block: clamp(1rem, 3vw, 3rem); }
.v5 .footer { margin-bottom: 0; }
html:has(body.v5) { background: #000; }

/* ── Film: a product animation in a frame, copy beside it ───────────────── */
.film { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.film__more { margin-top: 1.8rem; }
.film__frame { border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(201, 168, 76, .4), 0 40px 70px -30px #000; }
.film__frame--paper { background: var(--rdw-paper); box-shadow: 0 0 0 6px rgba(201, 168, 76, .28), 0 40px 70px -30px #000; }
.film__frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.v5 .showcase-split { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.v5 #contact .contact, .v5 #contact .contact__head, .v5 #contact .section__inner > * { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; }
@media (max-width: 860px) {
    .film, .v5 .showcase-split { grid-template-columns: 1fr; }
}
.v5 .showcase-split__media { background: none; border: 0; box-shadow: none; padding: 0; height: auto; aspect-ratio: auto; overflow: visible; }
.v5 .h2 + .lead, .v5 .h2 + p { margin-top: 1.2rem; }

.v5 .gold-mark { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.v5 .gold-mark::before, .v5 .gold-mark::after { content: none; }

/* ── Drawn hero figures (hero_figures.py) ───────────────────────────────── */
.nest, .notchfig { align-self: center; }
.nest svg, .notchfig svg { display: block; width: 100%; height: auto; overflow: visible; }

/* CutForge: parts settle onto a sheet */
.nest__sheet { fill: #fffdf8; stroke: var(--rdw-ink); stroke-width: 1.5; filter: drop-shadow(0 26px 30px rgba(20, 14, 2, .16)); }
.nest__rule path { stroke: var(--rdw-ink-3); stroke-width: 1; }
.nest__rule text { font: 500 13px var(--rdw-font-body); fill: var(--rdw-ink-3); }
.nest__label, .notchfig__label { font: 600 15px var(--rdw-font-heading); fill: var(--rdw-ink); }
.nest__part { stroke: var(--rdw-ink); stroke-width: 1.5; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.nest__part--a { fill: #c9a84c; }
.nest__part--b { fill: #0a0a0a; }
.nest__part--c { fill: var(--rdw-paper-2); }
.nest__part--d { fill: var(--rdw-gold-deep); }
.nest__track { fill: rgba(10, 10, 10, .1); }
.nest__fill { fill: var(--rdw-gold-deep); transform-box: fill-box; transform-origin: left center; }

/* RhinoNotchesPro: a pattern piece gets its seam allowance and notches */
.notchfig__piece { fill: #fffdf8; stroke: var(--rdw-ink); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 26px 30px rgba(20, 14, 2, .14)); }
.notchfig__seam { fill: none; stroke: var(--rdw-ink-3); stroke-width: 1.5; stroke-dasharray: 9 7; }
.notchfig__mark path { fill: none; stroke: var(--rdw-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notchfig__mark .gap { stroke: var(--rdw-paper); stroke-width: 4.5; stroke-linecap: butt; }
.notchfig__mark .cut { fill: var(--rdw-paper); }
.notchfig__mark .tab { fill: #fffdf8; }
.notchfig__mark--e .gap { stroke: #fffdf8; }
.notchfig__mark circle { fill: var(--rdw-gold-deep); }
.notchfig__cmd rect { fill: #0a0a0a; }
.notchfig__cmd text { font: 500 17px ui-monospace, Consolas, monospace; fill: #e6cd84; }
.notchfig__label { font-size: 22px; }
.notchfig__label--end { fill: var(--rdw-gold-deep); }
.notchfig svg { width: auto; max-width: 100%; height: min(66vh, 600px); margin-inline: auto; }
.notchfig__piece { stroke-width: 2.4; }

@media (prefers-reduced-motion: no-preference) {
    .nest__part { animation: nest-in 13s cubic-bezier(.32, .72, 0, 1) calc(var(--i) * .42s) infinite backwards; }
    .nest__fill { animation: nest-fill 13s cubic-bezier(.5, 0, .2, 1) infinite; }
    .nest__label--end, .notchfig__label--end { animation: fig-say 13s ease infinite; }
    .notchfig__piece { stroke-dasharray: 1; animation: notch-piece 13s cubic-bezier(.5, 0, .2, 1) infinite; }
    .notchfig__seam { animation: notch-seam 13s ease infinite; }
    .notchfig__mark > * { animation: notch-mark 13s cubic-bezier(.32, .72, 0, 1) calc(var(--i) * .22s) infinite backwards; transform-box: fill-box; transform-origin: center top; }
    .notchfig__cmd { animation: notch-cmd 13s ease infinite; }
}
@keyframes nest-in {
    0% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
    5% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); }
    17%, 90% { opacity: 1; transform: none; }
    96%, 100% { opacity: 0; transform: none; }
}
@keyframes nest-fill { 0%, 12% { transform: scaleX(0); } 48%, 92% { transform: scaleX(1); } 97%, 100% { transform: scaleX(0); } }
@keyframes fig-say { 0%, 44% { opacity: 0; } 54%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes notch-piece { 0% { stroke-dashoffset: 1; fill-opacity: 0; opacity: 1; } 14% { stroke-dashoffset: 0; fill-opacity: 0; opacity: 1; } 20%, 92% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; } 98%, 100% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 0; } }
@keyframes notch-seam { 0%, 24% { opacity: 0; } 32%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes notch-cmd { 0%, 18% { opacity: 0; } 24%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes notch-mark { 0%, 30% { opacity: 0; transform: scale(.2); } 34%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: none; } }

/* ── Contact form on the product pages: topic select, required marks ────── */
.v5 .field select { font-family: var(--rdw-font-body); font-size: .95rem; padding: .8rem .95rem; background: var(--rdw-paper); border: 1px solid rgba(10, 10, 10, .1); border-radius: 8px; color: var(--rdw-ink); width: 100%; }
.v5 .field select:focus { outline: none; border-color: var(--rdw-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, .18); }
.req { color: var(--rdw-gold-deep); font-weight: 700; margin-left: .15em; }
.v5 #contact .req { color: var(--rdw-gold); }

/* the CutForge figure is upright too, with type that holds its own beside the hero title */
.nest svg { width: auto; max-width: 100%; height: min(68vh, 620px); margin-inline: auto; }
.nest__label { font-size: 22px; }
.nest__label--end { fill: var(--rdw-gold-deep); }
.nest__rule text { font-size: 15px; }
.nest, .notchfig { align-self: start; }

/* ── The same containers as the front page: dark sections run the full width with square edges
      (as its theses and contact do); only cards inside a section are rounded. ───────────────── */
.v5 .section--black, .v5 #contact { margin: 0; border-radius: 0; box-shadow: none; padding-block: clamp(4.5rem, 9vw, 8.5rem); }
.v5 .footer { margin-top: 0; border-top: 1px solid rgba(245, 240, 232, .14); }
.v5 #contact .contact__meta-line { display: none; }   /* the business line lives in the footer, as on the front page */

/* ── Purchase card: the horizontal logo, icon and wordmark side by side ─── */
.v5 .pricing-card__head { display: grid; gap: .9rem; justify-items: start; text-align: left; }
.lockup { display: flex; align-items: center; gap: .85rem; margin: 0; }
.lockup__icon { width: 60px; height: 60px; flex: none; border-radius: 24%; object-fit: cover; background: #000; box-shadow: 0 0 0 1px rgba(201, 168, 76, .45); }
.lockup__name { font: 700 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--rdw-font-heading); letter-spacing: -.02em; color: var(--rdw-paper); }
.lockup__name b { font-weight: 700; color: var(--rdw-gold); }
.lockup__name small { font: 600 .62em var(--rdw-font-heading); letter-spacing: .12em; text-transform: uppercase; margin-left: .45em; color: rgba(245, 240, 232, .7); }
/* product icons everywhere: clipped to their own rounded square, so no light corners show on dark */
.v5 :is(.product-switch__icon, .included-banner__logo, .cf-logo__icon) { border-radius: 24%; object-fit: cover; }

/* ── Screenshot tiles: the picture fills the card, the caption has its margins ── */
.v5 .shot-tile { overflow: hidden; padding: 0; }
.v5 .shot-tile__media { border-radius: 0; margin: 0; box-shadow: none; border: 0; }
.v5 .shot-tile__caption { padding: 1.1rem 1.3rem 1.35rem; }
.v5 .shot-tile__title { font-family: var(--rdw-font-heading); }

/* ── Pricing, policy and support pages ──────────────────────────────────── */
.v5 .subpage-hero { background: none; background-image: none; border: 0; text-align: left; padding: clamp(3rem, 7vw, 6rem) var(--pad) clamp(1.5rem, 3vw, 2.5rem); }
.v5 .subpage-hero::before, .v5 .subpage-hero::after { content: none; }
.v5 .subpage-hero__inner { max-width: 1400px; margin: 0 auto; text-align: left; }
.v5 .subpage-hero h1 { font: 700 clamp(2.7rem, 6vw, 5.4rem)/.98 var(--rdw-font-heading); letter-spacing: -.035em; color: var(--rdw-ink); margin: 0; }
.v5 .subpage-hero p { margin: 1.2rem 0 0; font-size: clamp(1.05rem, 1.35vw, 1.28rem); color: var(--rdw-ink-2); max-width: 38em; }
.v5 :is(.pricing-page, .policy-page, .support-page) { background: none; background-image: none; border: 0; padding: clamp(1rem, 2vw, 2rem) var(--pad) clamp(4rem, 8vw, 7rem); }
.v5 :is(.pricing-page__inner, .policy-page__inner, .support-page__inner) { max-width: 1400px; margin: 0 auto; }
.v5 :is(.pp-card, .product-switch__opt, .policy-card, .support-card, .guarantee-banner, .included-banner) {
    background: rgba(255, 255, 255, .62); background-image: none; border: 0; border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(10, 10, 10, .07), 0 26px 44px -30px rgba(20, 14, 2, .5); }
.v5 :is(.pp-card, .product-switch__opt, .policy-card, .support-card, .guarantee-banner, .included-banner)::before { content: none; }
.v5 .product-switch__opt { text-decoration: none; color: var(--rdw-ink); transition: box-shadow .3s, background-color .3s; }
.v5 .product-switch__opt.is-active { background: #000; color: var(--rdw-paper); box-shadow: 0 0 0 1px rgba(201, 168, 76, .5), 0 26px 44px -26px rgba(20, 14, 2, .7); }
.v5 .product-switch__opt.is-active :is(.product-switch__name, .product-switch__from) { color: var(--rdw-paper); }
.v5 .product-switch__opt.is-active .product-switch__check { color: var(--rdw-gold); }
.v5 .product-switch__name, .v5 .pp-card__plan { font-family: var(--rdw-font-heading); letter-spacing: -.01em; }
.v5 .pp-card__price { font-family: var(--rdw-font-heading); color: var(--rdw-ink); }
.v5 .pp-card--featured { background: #000; color: var(--rdw-paper); box-shadow: 0 0 0 1px rgba(201, 168, 76, .5), 0 34px 60px -30px rgba(20, 14, 2, .8); }
.v5 .pp-card--featured :is(.pp-card__plan, .pp-card__price, .pp-card__note, li, span) { color: var(--rdw-paper); }
.v5 .pp-card--featured .pp-card__amount { color: var(--rdw-gold); -webkit-text-fill-color: currentColor; background: none; }
.v5 .pp-card__badge { background: var(--rdw-gold); background-image: none; color: #000 !important; border-radius: 999px; box-shadow: none; font: 600 .78rem var(--rdw-font-body); letter-spacing: .04em; }
.v5 .pp-card--featured .btn--primary { background: var(--rdw-gold); color: #000; }
.v5 .pp-card--featured .btn--primary:hover { background: var(--rdw-paper); color: #000; }
.v5 .pp-card__cta { justify-content: center; width: 100%; cursor: pointer; }
.v5 .included-banner { background: #000; color: var(--rdw-paper); box-shadow: 0 0 0 1px rgba(201, 168, 76, .4); }
.v5 .included-banner :is(h2, p, .included-banner__name) { color: var(--rdw-paper); }
.v5 .included-banner h2 { font: 700 clamp(1.5rem, 2.4vw, 2.2rem)/1.1 var(--rdw-font-heading); letter-spacing: -.02em; }
.v5 .included-banner .btn--primary { background: var(--rdw-gold); color: #000; }
.v5 .included-banner .btn--primary:hover { background: var(--rdw-paper); }
.v5 .policy-tabs a { border-radius: 0; background: none; box-shadow: none; border: 0; border-bottom: 2px solid transparent; padding: .4rem .1rem; margin-right: 1.4rem; font: 600 .95rem var(--rdw-font-heading); color: var(--rdw-ink-3); text-decoration: none; }
.v5 .policy-tabs a:hover { color: var(--rdw-ink); }
.v5 .policy-tabs a.is-active { color: var(--rdw-ink); border-bottom-color: var(--rdw-gold-deep); background: none; }
.v5 .policy-card :is(h2, h3) { font-family: var(--rdw-font-heading); letter-spacing: -.01em; }
.v5 .policy-highlight { background: rgba(201, 168, 76, .14); border: 0; border-left: 3px solid var(--rdw-gold-deep); border-radius: 0 12px 12px 0; box-shadow: none; }

/* the bar on a phone: every link stays reachable in a strip that scrolls sideways; the button gives way */
@media (max-width: 860px) {
    .v5 .bar .bar__cta { display: none; }
    .v5 .bar__nav { flex: 1 1 auto; min-width: 0; margin: 0; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(90deg, #000 86%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 1.4rem; }
    .v5 .bar__nav::-webkit-scrollbar { display: none; }
    .v5 .bar__nav a, .v5 .bar__nav a:not([aria-current]) { display: block; flex: none; white-space: nowrap; }
    .v5 .bar__lang { flex: none; }
}

/* long Finnish compounds must not run off a phone screen */
@media (max-width: 860px) {
    .v5 .h1, .v5 .hero__title, .v5 .subpage-hero h1 { font-size: clamp(2rem, 9vw, 2.7rem); max-width: none; hyphens: auto; overflow-wrap: anywhere; }
    .v5 .h2 { font-size: clamp(1.8rem, 7.4vw, 2.4rem); hyphens: auto; overflow-wrap: anywhere; }
}

/* ── Buying: the plans sit under the product's own logo, on the product page and on the one pricing page ── */
.lockup--ink .lockup__name { color: var(--rdw-ink); }
.lockup--ink .lockup__name b { color: var(--rdw-gold-deep); }
.lockup--ink .lockup__name small { color: var(--rdw-ink-3); }
.v5 .pricing-grid { display: block; }
.buy { padding: clamp(1.4rem, 3vw, 2.6rem); border-radius: 26px; background: rgba(255, 255, 255, .62); box-shadow: 0 0 0 1px rgba(10, 10, 10, .07), 0 26px 44px -30px rgba(20, 14, 2, .5); }
.buy__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2.5rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.buy__head .lockup__icon { width: 72px; height: 72px; }
.buy__head .lockup__name { font-size: clamp(1.9rem, 3vw, 2.7rem); }
.buy__desc { margin: 0; max-width: 30em; color: var(--rdw-ink-2); }
.buy .pricing-cards, .priceblock .pricing-cards { margin: 0; max-width: none; }
.buy .pricing-page__vat, .buy .pricing-card__note { margin: 1.2rem 0 0; text-align: left; color: var(--rdw-ink-3); font-size: .88rem; }
.buy .pricing-card__note { margin-top: .3rem; }
.v5 .pricing-included { margin-top: 1.4rem; padding: clamp(1.2rem, 2.4vw, 2rem); }
.v5 .pricing-included__list { columns: 2; column-gap: 3rem; }
.v5 .pricing-included__list li { break-inside: avoid; }
.v5 .pp-card { background: #fffdf8; }
.v5 .pp-card--featured { background: #000; }

.pricejump { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0 0 1.6rem; }
.pricejump a { display: flex; align-items: center; gap: .65rem; padding: .45rem 1rem .45rem .45rem; border-radius: 14px; text-decoration: none; color: var(--rdw-ink);
    font: 600 1rem var(--rdw-font-heading); background: rgba(255, 255, 255, .62); box-shadow: 0 0 0 1px rgba(10, 10, 10, .08); transition: box-shadow .3s, background-color .3s; }
.pricejump a:hover { background: #fff; box-shadow: 0 0 0 1.5px var(--rdw-gold-deep); }
.pricejump img { border-radius: 24%; object-fit: cover; background: #000; }
.priceblock { scroll-margin-top: 96px; margin-top: clamp(2rem, 4vw, 3.4rem); padding-top: clamp(2rem, 4vw, 3.4rem); border-top: 1px solid rgba(10, 10, 10, .14); }
.priceblock__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem 2.2rem; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.priceblock__head .lockup__icon { width: 76px; height: 76px; }
.priceblock__head .lockup__name { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.priceblock__desc { margin: 0; color: var(--rdw-ink-2); max-width: 30em; }
.priceblock__more { font-weight: 600; color: var(--rdw-ink); text-decoration: none; border-bottom: 2px solid var(--rdw-gold); padding-bottom: 2px; white-space: nowrap; }
.priceblock__more:hover { color: var(--rdw-gold-deep); }
.v5 .pricing-page .guarantee-banner { margin: 0; }
@media (max-width: 860px) {
    .v5 .pricing-included__list { columns: 1; }
    .priceblock__head { grid-template-columns: 1fr; }
    .buy__head .lockup__icon, .priceblock__head .lockup__icon { width: 56px; height: 56px; }
}

/* ── Header: the software drop-down, each product selectable on its own ────────── */
.bar__nav { align-items: center; }
.bar__drop { position: relative; }
.bar__dropbtn { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; padding: 6px 2px;
    font: 600 .78rem var(--rdw-font-body); text-transform: uppercase; letter-spacing: .14em; color: var(--rdw-ink-2); transition: color .3s; }
.bar__dropbtn svg { width: 12px; height: 12px; transition: rotate .3s; }
.bar__dropbtn:hover, .bar__drop:focus-within .bar__dropbtn, .bar__drop.is-open .bar__dropbtn { color: var(--rdw-gold-deep); }
.bar__dropbtn.is-current { color: var(--rdw-ink); border-bottom-color: var(--rdw-gold); }
.bar__drop.is-open .bar__dropbtn svg, .bar__drop:hover .bar__dropbtn svg { rotate: 180deg; }
.bar__menu { position: absolute; top: 100%; left: 50%; translate: -50% 8px; z-index: 40; width: max-content; min-width: 320px; display: grid; gap: 2px; padding: 8px;
    background: var(--rdw-paper); border-radius: 18px; box-shadow: 0 0 0 1px rgba(10, 10, 10, .08), 0 30px 50px -20px rgba(20, 14, 2, .45);
    opacity: 0; visibility: hidden; transition: opacity .25s, translate .25s cubic-bezier(.32, .72, 0, 1), visibility 0s .25s; }
.bar__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }      /* keeps the hover alive across the gap */
.bar__drop:hover .bar__menu, .bar__drop:focus-within .bar__menu, .bar__drop.is-open .bar__menu { opacity: 1; visibility: visible; translate: -50% 14px; transition-delay: 0s; }
.bar .bar__menu a { display: flex; align-items: center; gap: .85rem; padding: .6rem .9rem .6rem .6rem; border: 0; border-radius: 12px; text-decoration: none; text-transform: none; letter-spacing: 0; color: var(--rdw-ink); transition: background-color .2s; }
.bar .bar__menu a:hover, .bar .bar__menu a:focus-visible { background: rgba(201, 168, 76, .16); color: var(--rdw-ink); }
.bar .bar__menu a[aria-current] { background: rgba(10, 10, 10, .06); border: 0; }
.bar__menu img { border-radius: 24%; object-fit: cover; background: #000; flex: none; }
.bar__menu span { display: grid; gap: .1rem; }
.bar__menu b { font: 700 1rem var(--rdw-font-heading); letter-spacing: -.01em; }
.bar__menu small { font: 400 .82rem var(--rdw-font-body); color: var(--rdw-ink-3); }
.bar .bar__menu a.bar__menu-all { justify-content: center; margin-top: 4px; padding: .7rem; border-top: 1px solid rgba(10, 10, 10, .1); border-radius: 0 0 12px 12px; font: 600 .86rem var(--rdw-font-body); color: var(--rdw-ink-2); }
@media (max-width: 860px) {
    .bar__dropbtn { font-size: .72rem; letter-spacing: .1em; }
    .bar__drop { position: static; }
    .bar__menu { position: fixed; top: 60px; left: 10px; right: 10px; width: auto; min-width: 0; translate: 0 -6px; }
    .bar__drop:hover .bar__menu, .bar__drop:focus-within .bar__menu, .bar__drop.is-open .bar__menu { translate: 0 4px; }
}

/* the product pages use the same short menu as the front page, so the sideways strip is gone */
@media (max-width: 860px) {
    .v5 .bar__nav { flex: 0 1 auto; margin: 0 0 0 auto; overflow: visible; mask-image: none; -webkit-mask-image: none; padding-right: 0; gap: 1rem; }
    .v5 .bar__nav a, .v5 .bar__nav a:not([aria-current]) { display: block; }
}
@media (max-width: 480px) { .v5 .bar__nav > a:first-child { display: none; } }

/* the menu on a phone: its rows stay icon-beside-text, and the bar keeps to Software and Contact */
@media (max-width: 860px) { .bar .bar__nav .bar__menu a { display: flex; white-space: normal; } }
@media (max-width: 480px) { .bar .bar__nav > a:nth-of-type(1), .bar .bar__nav > a:nth-of-type(2) { display: none; } }

/* a phone bar that fits: Finnish labels are long, so the bar tightens and the language pair stays whole */
@media (max-width: 480px) {
    .bar { padding: 0 12px; gap: .55rem; }
    .bar .bar__nav { gap: .75rem; }
    .bar .bar__nav > a, .bar__dropbtn { font-size: .66rem; letter-spacing: .08em; }
    .bar__lang { gap: 2px; flex: none; }
    .bar__lang a { padding: 4px 5px; font-size: .7rem; }
    .bar__logo { width: 34px; height: 34px; font-size: .68rem; }
}
/* nothing on a pricing or product page may push the phone screen sideways */
.v5 { overflow-x: clip; }
@media (max-width: 860px) {
    .priceblock__head > *, .buy__head > * { min-width: 0; }
    .priceblock__more { white-space: normal; justify-self: start; }
    .v5 .guarantee-banner { flex-wrap: wrap; gap: .8rem; }
    .v5 .pricing-cards { grid-template-columns: 1fr; }
    .pricejump a { font-size: .92rem; }
}
/* the lockup on a phone: the longest name (RhinoNotches PRO) must fit beside its icon */
@media (max-width: 860px) {
    .lockup { min-width: 0; gap: .65rem; }
    .buy__head .lockup__name, .priceblock__head .lockup__name, .lockup__name { font-size: clamp(1.35rem, 6.4vw, 1.9rem); }
    .lockup__name small { font-size: .5em; margin-left: .3em; }
}
/* policy pages on a phone: the tabs wrap, long words and links break inside the card */
@media (max-width: 860px) {
    .v5 .policy-tabs { display: flex; flex-wrap: wrap; gap: .3rem 0; white-space: normal; max-width: 100%; }
    .v5 .policy-tabs a { margin-right: 1.1rem; }
    .v5 .policy-card, .v5 .support-card { overflow-wrap: anywhere; }
    .v5 .policy-card table { display: block; overflow-x: auto; }
}

/* the dock on a phone: a low row centred at the foot of the screen, in the gap under the cards, not on top of them */
@media (max-width: 860px) {
    .dock, .js-scroll .dock { grid-auto-flow: column; right: 50%; bottom: 6px; translate: 50% 12px; padding: 4px; border-radius: 14px; }
    .dock.is-ready, .js-scroll .dock.is-ready { translate: 50% 0; }
    .dock button { width: 44px; height: 36px; border-radius: 10px; }
    .dock [data-dock="top"] { margin-top: 0; margin-left: 3px; }
    .dock [data-dock="top"]::before { left: -3px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
}

/* phone: the footer leaves room for the floating row of buttons, so its links are never underneath it */
@media (max-width: 860px) { .foot, .v5 .footer { padding-bottom: 5rem; } }