/* =============================================================================
   soft-studio.css — the SITE-WIDE "Soft Studio" identity.

   2026-08-08: Vytas approved the v10 homepage rebuild (served at the dev root,
   see app/routes/frontend.js and home-next-v10.css) and asked for the rest of
   the site to follow it. This file is the portable half of that identity: the
   token remap, the typography, the shapes and the shared chrome. The homepage
   keeps its own bespoke `.v10-*` components in home-next-v10.css; nothing here
   touches them.

   WHY A TOKEN REMAP AND NOT A REWRITE
   theme-global.css already models the site through semantic tokens (--t-bg,
   --t-text, --t-border, --db-coral …) and most sheets consume them. Pointing
   those tokens at the Soft Studio palette re-skins every rule that was written
   correctly, in one place, with no markup churn. Sheets that hardcoded dark
   values are corrected in their own files against the contract below.

   NOT `data-theme="light"`
   The light/dark toggle was removed because light mode was broken, and both
   frontend_style.pug and frontend_scripts.pug actively strip the attribute.
   So this file redefines the DEFAULT (formerly dark) values instead. No
   attribute is involved, the dead `html[data-theme="light"]` blocks stay
   inert, and there is no flash of the old theme.

   THE PALETTE (identical to home-next-v10.css)
   Canvas  #F4F2EF warm off-white      Ink     #141414
   Card    #FFFFFF                     Line    #E7E4DF
   Pink    #FFD3F6 — THE brand colour. ALWAYS ink text on pink. NEVER pink
           text, NEVER white on pink. Two tints: #FFE7FA and #FFF3FC.
   Mark    #F71EC7 stays, and ONLY as the logo mark — it is the app icon.
   Type    General Sans, one family. Display 620 tight, body 400-500,
           caps labels 600 tracked.
   Shape   Cards 24-28px, images 20-22px, buttons and chips are PILLS.
   Flat    No gradients, no glows (project rule). Elevation is a low-opacity
           NEUTRAL shadow, which is elevation, not a glow.

   LOAD ORDER
   Linked RAW at the END of every style chain (frontend_style_slim,
   frontend_style_ai, frontend_style — plus tools templates after tools-hp),
   so it wins over the bundles. Raw means the origin sends `immutable` for a
   year: the `?v=` token on every link is load-bearing. Bump it on edit.
   ============================================================================= */

/* ONE family sitewide. The CJK/Korean fallbacks are kept because General Sans
   has no CJK glyphs and 43 locales ship from these templates. */
@font-face {
    font-family: 'GeneralSans';
    src: url('/font/GeneralSans-Variable.woff2') format('woff2');
    font-weight: 200 700;
    font-display: swap;
}

/* -----------------------------------------------------------------------------
   1. THE TOKEN CONTRACT
   Every value below overrides the dark default declared in theme-global.css.
   Specificity is identical (:root vs :root) so document order decides, and this
   file always loads later. Sheets being corrected should consume these names
   rather than re-stating the hex.
   -------------------------------------------------------------------------- */

:root {
    /* ---- raw palette. Legacy names, Soft Studio values. Several sheets use
       these directly as surfaces, so they have to flip with everything else. */
    --db-black: #F4F2EF;
    --db-charcoal: #FFFFFF;
    --db-dark: #FFFFFF;
    --db-border: #E7E4DF;
    --db-border-mid: #DAD6D0;
    --db-muted: #6B6660;
    --db-ash: #57534E;
    --db-silver: #6B6660;
    --db-light-bg: #F4F2EF;
    --db-lighter-bg: #FBFAF8;
    /* --db-white is used BOTH as a surface and as a text colour. On a light
       canvas the text use is invisible, so it resolves to ink; the handful of
       genuine surface uses are corrected in their own sheets. */
    --db-white: #141414;
    --db-surface: #FFFFFF;

    /* ---- the accent, split by role -------------------------------------
       Soft Studio has no coloured text and no coloured primary button: the
       action is an ink pill, and pink is a flat decorative fill that always
       carries ink text. --db-coral therefore resolves to INK, which keeps
       `background: var(--db-coral); color: #fff` legible (it becomes the
       black pill from the reference) and turns `color: var(--db-coral)` into
       readable ink instead of a colour that fails on paper. The tint tokens
       become the pink fills, so `background: var(--db-coral-10); color:
       var(--db-coral)` lands exactly on the intended pink-chip-with-ink-text. */
    --db-coral: #141414;
    --db-coral-dark: #000000;
    --db-coral-10: #FFE7FA;
    --db-coral-20: #FFD3F6;
    --db-coral-04: #FFF3FC;
    --db-coral-soft: #FFF3FC;
    /* elevation, never a glow */
    --db-coral-glow: 0 10px 32px rgba(20, 20, 20, 0.08);
    /* the true brand pink, for the places that genuinely want the hue */
    --ss-pink: #FFD3F6;
    --ss-pink-2: #FFE7FA;
    --ss-pink-3: #FFF3FC;
    /* the app mark only — the pink square in the logo */
    --ss-mark: #F71EC7;
    --ss-ink: #141414;
    --ss-paper: #F4F2EF;
    --ss-card: #FFFFFF;
    --ss-line: #E7E4DF;

    /* gradients are banned; every legacy gradient token collapses to a flat
       fill so a sheet that still references one cannot reintroduce a ramp. */
    --db-gradient-border: #E7E4DF;

    /* ---- semantic theme tokens ----------------------------------------
       THE CANVAS IS WHITE. Vytas, 2026-08-09: "why so many pages have gray
       background - remove". The first pass shipped --t-bg as the warm
       #F4F2EF paper, which made every page read grey next to the homepage —
       the homepage renders on #FFFFFF and is the design reference, so the
       site is matched to it, never the reverse.

       --paper is NOT retired: it drops one level to become the TINT, the
       thing an alternating band or a hover state is painted with. That is
       exactly how the homepage uses it (nav hover, burger, the mat behind a
       carousel photo) — sparingly, on top of white, never as the field.
       So --t-bg-elevated (which every "tinted section" rule reads) takes the
       paper value, or those bands would go white-on-white and the section
       rhythm would vanish along with the grey. */
    --t-bg: #FFFFFF;
    --t-bg-elevated: #F4F2EF;
    --t-bg-card: #FFFFFF;
    --t-bg-card-hover: #FBFAF8;
    --t-bg-input: #FFFFFF;
    --t-border: #E7E4DF;
    --t-border-mid: #DAD6D0;
    --t-text: #141414;
    --t-text-secondary: #57534E;
    /* #6B6660 measures 5.09:1 on the canvas — AA for small text */
    --t-text-muted: #6B6660;
    /* WAS #8A857E, which measured 3.28:1 on the paper canvas and 3.66:1 on a
       white card — both under the 4.5 AA floor for small text, and it is only
       ever used AT small sizes (11–14px captions, table headers, spec lines,
       chip costs, timestamps). A runtime contrast sweep found it behind 10 of
       the 11 remaining failures across the page families; app-navigation.css
       and app-redesign.css had already documented the 3.66 measurement without
       acting on it. #736E67 is the lightest value that clears 4.5 against the
       DARKER of the two surfaces it lands on (4.52 on paper, 5.05 on white),
       so the tonal step below --t-text-muted survives. */
    --t-text-faint: #736E67;
    --t-overlay: rgba(20, 20, 20, 0.45);
    --t-overlay-heavy: rgba(20, 20, 20, 0.62);
    --t-card-shadow: 0 6px 22px rgba(20, 20, 20, 0.05);
    --t-card-hover-shadow: 0 12px 32px rgba(20, 20, 20, 0.09);
    /* "glass" becomes an opaque card: a translucent white pane over paper is
       indistinguishable from the paper itself. */
    --t-glass-bg: #FFFFFF;
    --t-glass-border: #E7E4DF;
    --t-scrollbar: rgba(20, 20, 20, 0.16);
    --t-node-bg: #FFFFFF;
    --t-node-content: #F4F2EF;
    --t-node-border: #E7E4DF;
    --t-line-color: #B9B4AD;
    --t-anchor-fill: #DAD6D0;
    --t-anchor-stroke: #6B6660;
    --t-nav-link: #57534E;
    --t-nav-link-hover: #141414;
    --t-nav-cta-bg: #141414;
    --t-nav-cta-text: #FFFFFF;
    --t-nav-scrolled-bg: #FFFFFF;
    --t-tools-label-bg: rgba(255, 255, 255, 0.92);
    --t-tools-label-text: #57534E;
    --t-technique-prompt-bg: #FFF3FC;
    --t-technique-prompt-border: #FFD3F6;
    --t-technique-output-bg: #FBFAF8;
    --t-technique-output-border: #E7E4DF;
    --t-cta-secondary-border: #E7E4DF;
    --t-cta-secondary-hover: #141414;
    --t-footer-link: #6B6660;
    --t-footer-link-hover: #141414;

    /* ---- typography ---------------------------------------------------- */
    --font-clash: 'GeneralSans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Noto Sans JP',
        Roboto, Helvetica, Arial, sans-serif;
    --font-display: var(--font-clash);
    --font-body: var(--font-clash);

    /* ---- ink depths + measure, used by the shared chrome below ---------- */
    --ss-ink-2: #57534E;
    --ss-ink-3: #6B6660;
    --ss-gut: clamp(18px, 4vw, 56px);
    --ss-max: 1380px;

    /* ---- shape + motion ------------------------------------------------ */
    --ss-r-card: 28px;
    --ss-r-panel: 20px;
    --ss-r-img: 22px;
    --ss-r-pill: 999px;
    --ss-ease: cubic-bezier(0.22, 0.7, 0.28, 1);
    --ss-shadow: 0 6px 22px rgba(20, 20, 20, 0.05);
    --ss-shadow-lift: 0 12px 32px rgba(20, 20, 20, 0.09);
    --ss-shadow-float: 0 18px 48px rgba(20, 20, 20, 0.10);
}

/* -----------------------------------------------------------------------------
   2. BASE CANVAS
   -------------------------------------------------------------------------- */

html {
    background-color: var(--t-bg);
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--t-bg);
    color: var(--t-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The one selection colour: pink field, ink text, per the palette rule. */
::selection { background: var(--ss-pink); color: var(--ss-ink); }

/* Scrollbars follow the canvas rather than staying dark on Chromium. */
* { scrollbar-color: rgba(20, 20, 20, 0.22) transparent; }
::-webkit-scrollbar-thumb { background: rgba(20, 20, 20, 0.22); }
::-webkit-scrollbar-track { background: transparent; }

/* Focus ring: ink, matching the reference. Applied at the same strength the
   old coral ring used in theme-global. */
:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY
   Sizes are deliberately NOT overridden — every page family sets its own scale
   and a global size change would reflow layouts that were tuned around them.
   What travels is the identity: one family, tight tracking, the 620 display
   weight, and balanced headline wrapping.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--t-text);
    letter-spacing: -0.022em;
    text-wrap: balance;
}

h1, h2 { font-weight: 620; letter-spacing: -0.028em; line-height: 1.06; }
h3 { font-weight: 620; letter-spacing: -0.022em; }
h4, h5, h6 { font-weight: 600; letter-spacing: -0.014em; }

/* Uppercase eyebrows: the reference tracks them wide and keeps them small. */
.eyebrow, .kicker, .section-label, .lr-eyebrow, .hp-eyebrow, .uc-eyebrow {
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* -----------------------------------------------------------------------------
   4. SHAPE
   Cards and media round off; buttons and chips become pills.

   This file is now the SINGLE enforcement point for button shape and size. The
   two blocks that used to live at the bottom of theme-global.css ("Button radius
   standard — 10px" and "Button padding — compact") were retired on 2026-08-09:
   they were not merely redundant, they were actively winning against surfaces
   that had ALREADY been migrated. `.mcp-btn`, `.state-btn` and `.db-related-link`
   each shipped a correct `border-radius: 999px` in their own sheet and each was
   flattened back to 10px by theme-global's `!important`, which is why /mcp,
   /gallery and every use-case tail still rendered rounded rectangles next to the
   homepage's pills. Measured with Playwright across 36 pages, one URL per style
   chain — 15 button classes were off-pattern, 12 of them for that one reason.

   Reverting to the old standard is a single-block change: swap `--ss-r-pill`
   below for `10px` and drop the size block.
   -------------------------------------------------------------------------- */

/* --- shape. Carries the union of the two retired theme-global lists plus every
   page-family CTA class the audit surfaced. `html:root:root` beats page sheets,
   scoped `.x-page .btn` rules and inline <style> blocks alike. A new CTA class
   goes HERE and nowhere else. */
html:root:root .button,
html:root:root a.button,
html:root:root button.button,
html:root:root .btn,
html:root:root a.btn,
html:root:root button.btn,
html:root:root input[type="submit"],
html:root:root input[type="button"],
html:root:root .cta-button,
html:root:root [class*="cta-button"],
html:root:root [class*="-cta"],
html:root:root .lr-navbar__cta,
html:root:root .lr-btn,
html:root:root .hp-btn,
html:root:root .uc-btn,
html:root:root .tp-btn,
html:root:root .ms-generate-btn,
html:root:root .ms-signup-cta,
html:root:root .ai-btn,
html:root:root .ai-generate-btn,
html:root:root .db-exit__cta,
html:root:root .gd-action,
html:root:root .pricing-cta,
html:root:root .signup-btn,
/* --- inherited from theme-global's retired radius list */
html:root:root .mcp-btn,
html:root:root .ma2-btn,
html:root:root .lr-hero__btn-primary,
html:root:root .lr-hero__btn-secondary,
html:root:root .lr-bento__btn,
html:root:root .lr-create__cta,
html:root:root .lr-cta__btn-primary,
html:root:root .lr-cta__btn-secondary,
html:root:root .lr-technique__run-btn,
html:root:root .db-btn-primary,
html:root:root .db-btn-secondary,
html:root:root .btn-primary,
html:root:root .btn-secondary,
html:root:root .btn-primary-large,
html:root:root .btn-secondary-large,
html:root:root .hero-carousel-btn-primary,
html:root:root .hero-carousel-btn-secondary,
html:root:root .explore-btn,
html:root:root .options-btn,
html:root:root .see-more-button,
html:root:root .use-template-button,
html:root:root .state-btn,
html:root:root .gd-action-btn,
html:root:root .gd-download-btn,
html:root:root .gd-generate-btn,
html:root:root .ai-help-btn,
html:root:root .main-button,
html:root:root .submit-button,
html:root:root .footer__submit-button,
html:root:root .button-shine,
html:root:root .button-shine2,
html:root:root .btn-header-green,
html:root:root .mobile-get-started-btn,
html:root:root .mobile-app-cta__btn,
html:root:root .login-button,
html:root:root .cs-cta-primary,
html:root:root .cs-cta-secondary,
html:root:root .dbf-cta,
html:root:root .pricingHero a.cta-new-col-white,
/* --- page-family CTAs the 36-page sweep found still on 8/10/14px */
html:root:root .db-related-link,
html:root:root .mcp-copy,
html:root:root .fl-btn,
html:root:root .st-btn,
html:root:root .st-crosslink,
html:root:root .st-inputmock__go,
html:root:root .ent-btn,
html:root:root .aff-cta-button,
html:root:root .fig-btn,
html:root:root .dm-final-btn,
html:root:root .dm-submit,
html:root:root .featured-apps-link {
    border-radius: var(--ss-r-pill) !important;
}

/* --- size and type. The reference control is 42px tall, 14.5px/600, ink or
   ghost. Two sizing models exist across the codebase — padding-driven
   (`padding: Ypx X`) and min-height-driven (`min-height: 50px; padding: 0 X`) —
   so height is neutralised and driven from ONE padding for both, with a tight
   line-height so a stray font-size cannot inflate the box. Padding-driven
   (rather than `min-height` + `display: inline-flex`) on purpose: it is correct
   whether the button is inline-block, flex or a bare <input>, and changes no
   element's display mode.

   Deliberately a NAMED LIST, not the broad `.button` / `.btn` hook used for
   shape above: those two class names also carry table controls, form addons and
   app chrome, and force-sizing all of them is a blast radius the look does not
   need. Small utility controls (options / see-more / state / gd-action /
   gd-download / ai-help) keep their own size for the same reason.

   The sweep found the outliers this fixes: 22px type on the /use-cases and
   /glossary search submit, 17px on /features CTAs, 16px across
   /compare /affiliates /plugins/figma /demo, and 52–54px tall controls on
   /pricing /login /signup /enterprise against the reference's 42px. */
html:root:root [class*="cta-button"],
html:root:root .mcp-btn,
html:root:root .ma2-btn,
html:root:root .lr-hero__btn-primary,
html:root:root .lr-hero__btn-secondary,
html:root:root .lr-navbar__cta,
html:root:root .lr-bento__btn,
html:root:root .lr-create__cta,
html:root:root .lr-cta__btn-primary,
html:root:root .lr-cta__btn-secondary,
html:root:root .lr-technique__run-btn,
html:root:root .uc-button-primary,
html:root:root .uc-button-secondary,
html:root:root .db-btn-primary,
html:root:root .db-btn-secondary,
html:root:root .btn-primary,
html:root:root .btn-primary-large,
html:root:root .btn-secondary,
html:root:root .btn-secondary-large,
html:root:root .hero-carousel-btn-primary,
html:root:root .hero-carousel-btn-secondary,
html:root:root .explore-btn,
html:root:root .use-template-button,
html:root:root .gd-generate-btn,
html:root:root .ai-generate-btn,
html:root:root .main-button,
html:root:root .submit-button,
html:root:root .footer__submit-button,
html:root:root .button-shine,
html:root:root .button-shine2,
html:root:root .btn-header-green,
html:root:root .mobile-get-started-btn,
html:root:root .mobile-app-cta__btn,
html:root:root .login-button,
html:root:root .cs-cta-primary,
html:root:root .cs-cta-secondary,
html:root:root .dbf-cta,
html:root:root .ms-generate-btn,
html:root:root .ms-signup-cta,
html:root:root .db-exit__cta,
html:root:root .pricingHero a.cta-new-col-white,
html:root:root .st-btn,
html:root:root .st-crosslink,
html:root:root .ent-btn,
html:root:root .aff-cta-button,
html:root:root .fig-btn,
html:root:root .dm-final-btn,
html:root:root .fl-btn,
html:root:root .featured-apps-link,
html:root:root .db-related-link,
html:root:root .cta-new-col-white,
html:root:root .cta-white-black-border,
html:root:root .cta-secondary {
    min-height: 0 !important;
    height: auto !important;
    padding: 12px 20px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}

/* The reference's small control (`.v10-btn--sm`): 36px, 13.5px/600. For inline
   controls that sit beside body text or inside a code row, where the 42px base
   would out-weigh the thing it acts on. */
html:root:root .mcp-copy {
    padding: 9px 15px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
}

/* Round icon buttons and segmented groups keep their own shapes — restated so
   the pill rule above cannot flatten them. */
html:root:root .button-group .button:not(:first-child):not(:last-child),
html:root:root .prefix, html:root:root .postfix {
    border-radius: 0 !important;
}
html:root:root .icon-btn, html:root:root .share-btn,
html:root:root .carousel-dot, html:root:root [class*="__dot"] {
    border-radius: 50% !important;
}

/* --- surfaces. Only containers that already read as cards are rounded; a blunt
   universal radius would round table cells, inputs inside groups and media
   that is meant to bleed. */
.card, .lr-card, .hp-card, .uc-card, .tp-card, .ai-card,
.feature-card, .pricing-card, .plan-card, .tool-card, .model-card,
.gallery-card, .template-item, .task-item, .app-card, .use-case-card {
    border-radius: var(--ss-r-card);
}

.panel, .lr-panel, .hp-panel, .uc-panel, .ai-panel, .box, .content-box {
    border-radius: var(--ss-r-panel);
}

img.rounded, .media, .thumb, .thumbnail, .preview-img,
.card img, .lr-card img, .hp-card img, .uc-card img, .tool-card img {
    border-radius: var(--ss-r-img);
}

input, select, textarea, .input, .form-control {
    border-radius: 14px;
}

/* -----------------------------------------------------------------------------
   5. FLAT — no gradients, no glows
   The project rule predates this identity and still holds. Legacy sheets carry
   pink glow shadows and multi-stop ramps; the tokens above neutralise the ones
   that go through variables, and these catch the literal cases by class.
   -------------------------------------------------------------------------- */

.glow, .has-glow, [class*="-glow"] { box-shadow: var(--ss-shadow) !important; }

/* Text clipped to a gradient renders as transparent text the moment the ramp
   is removed, so those elements need an explicit ink fill, not just a flat
   background. */
[class*="gradient-text"], .text-gradient, .lr-gradient-text, .hp-gradient-text {
    background: none !important;
    -webkit-text-fill-color: var(--t-text) !important;
    color: var(--t-text) !important;
}

/* Legacy Bootstrap button ramps, on the auth chain (bootstrap.css + signuppro).
   They currently sit on the hidden confirm dialog, so nothing renders wrong
   today — but each one is a two-stop ramp and two of them are a SECOND hue
   (#0088CC→#0044CC blue, #F71EC7→#791AFE magenta-to-violet). The moment that
   dialog opens it would be the only gradient left on the site. Flat fills, one
   hue, ink primary. background-image alone is not enough: btn-primary has no
   background-color under its ramp, so stripping the image would leave an
   invisible button. */
.btn, .btn-primary, .btn-secondary, .btn-warning, .btn-danger,
.btn-success, .btn-info, .btn-inverse {
    background-image: none !important;
    text-shadow: none !important;
}
.btn-primary, .btn-warning, .btn-danger, .btn-success, .btn-info, .btn-inverse {
    background-color: var(--ss-ink) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

/* -----------------------------------------------------------------------------
   6. PRIMITIVES
   The reference's three controls, available to any sheet by class so page
   families can adopt them instead of inventing a fourth button.
   -------------------------------------------------------------------------- */

.ss-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 42px; padding: 0 20px;
    background: var(--ss-ink); color: #fff;
    border: 1px solid transparent; border-radius: var(--ss-r-pill);
    font-family: var(--font-body); font-size: 14.5px; font-weight: 600;
    line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background-color 150ms var(--ss-ease), transform 120ms var(--ss-ease);
}
.ss-btn:hover { background: #000; color: #fff; }
.ss-btn:active { transform: scale(0.98); }

.ss-btn--ghost {
    background: var(--ss-card); color: var(--ss-ink); border-color: var(--ss-line);
}
.ss-btn--ghost:hover { background: var(--ss-card); border-color: var(--ss-ink); }

.ss-tag {
    display: inline-flex; align-items: center; line-height: 1;
    background: var(--ss-pink-3); color: var(--ss-ink);
    border-radius: var(--ss-r-pill); padding: 8px 15px;
    font-size: 13px; font-weight: 600;
}

.ss-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; color: var(--ss-ink);
}
.ss-link::after { content: '\2192'; transition: transform 150ms var(--ss-ease); }
.ss-link:hover::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .ss-btn, .ss-btn:active, .ss-link::after, .ss-link:hover::after {
        transition: none; transform: none;
    }
}

/* -----------------------------------------------------------------------------
   7. SHARED CHROME — the floating nav capsule
   The reference's nav is a white pill that floats over the canvas and only
   gains its shadow once the page is scrolled. `.lr-navbar` already carries the
   right grid and the right breakpoints, so this reshapes it rather than
   replacing the markup: the mega dropdowns, the language switcher and the
   sub-1280 drawer handoff all keep working untouched.
   -------------------------------------------------------------------------- */

.lr-navbar {
    top: 12px;
    left: 50%;
    right: auto;
    width: min(1380px, calc(100% - 28px));
    transform: translateX(-50%);
    padding: 0 10px 0 22px;
    min-height: 62px;
    background: #FFFFFF;
    border-radius: var(--ss-r-pill);
    box-shadow: 0 0 0 rgba(20, 20, 20, 0);
    transition: box-shadow 220ms var(--ss-ease);
}

.lr-navbar.lr-navbar--scrolled {
    background: #FFFFFF;
    box-shadow: 0 6px 24px rgba(20, 20, 20, 0.08);
    /* the capsule is opaque, so the blur bought nothing but a paint cost */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) { .lr-navbar { transition: none; } }

/* The wordmark ships white-on-transparent for the old dark bar. On the white
   capsule it has to be inverted to ink — the same trick the retired light
   theme used, restated here because that selector is attribute-gated and the
   attribute is stripped on every page. */
.lr-navbar__logo img { filter: brightness(0); }

.lr-navbar__link {
    /* the reference's nav items are sentence case, not tracked-out caps */
    text-transform: none;
    letter-spacing: -0.005em;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--t-nav-link);
    border-radius: var(--ss-r-pill);
    padding: 9px 13px;
    transition: background-color 150ms var(--ss-ease), color 150ms var(--ss-ease);
}
.lr-navbar__link:hover { background: var(--ss-paper); color: var(--ss-ink); }
.lr-navbar__links { gap: 2px; }

.lr-navbar__cta {
    background-color: var(--ss-ink);
    color: #FFFFFF;
    padding: 0 16px;
    min-height: 36px;
    font-size: 13.5px;
}
.lr-navbar__cta:hover { background-color: #000000; color: #FFFFFF; }

/* the dropdown becomes the reference's floating white card */
.lr-navbar__dropdown-menu {
    background: #FFFFFF;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 18px 48px rgba(20, 20, 20, 0.10);
}
.lr-navbar__dropdown-item:hover { background: var(--ss-paper); }
.lr-navbar__dropdown-heading { color: var(--t-text-faint); letter-spacing: 0.11em; }
.lr-navbar__dropdown-title { color: var(--t-text); }
.lr-navbar__dropdown-desc { color: var(--t-text-secondary); }

/* the fixed capsule now sits 12px lower, so the spacer that reserves its
   height has to grow by the same amount or the first section slides under it */
.lr-navbar-spacer { height: 86px; }

/* the sub-1280 pill nav and its drawer follow the same capsule treatment */
nav.tab-bar {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--ss-line);
}

/* -----------------------------------------------------------------------------
   8. SHARED CHROME — footer
   The footer markup is shared by every chain and already reads its colours from
   the tokens, so it flips with them. These are the residual hardcoded pieces.
   -------------------------------------------------------------------------- */

.dbf-col-title { color: var(--t-text); letter-spacing: 0.1em; }

/* The oversized DESIGNERBOX watermark across the footer floor. It reads its
   colour from --t-bg-card, which was #1A1A1A on the dark canvas and is #FFFFFF
   here — white on paper is a ghost, and inking it turns a 240px watermark into
   a solid black slab. It gets its own faint tint instead. */
.footer-brand-statement-text,
.footer-wordmark, .footer-brand-mark, [class*="footer"][class*="wordmark"] {
    color: rgba(20, 20, 20, 0.055);
}

/* THE WORDMARK. frontend_brand_logo.pug used to carry an inline color:#fff for
   the old dark bar; that inline value beat every stylesheet and left the logo
   invisible on the white capsule and the paper footer — on every page. The
   inline colour is gone now, so the lockup inherits, and theme-global's
   `.db-logo__word{color:#fff}` remains the default for the surfaces that are
   still dark (login, signup). These are the light ones. !important is required
   because app-navigation.css sets the mobile bar's wordmark white with it. */
.lr-navbar .db-logo__word,
nav.tab-bar .db-logo__word,
#mobile-menu .db-logo__word,
.dbf .db-logo__word,
.dbf-logo .db-logo__word {
    color: var(--t-text) !important;
}

/* -----------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */

input, select, textarea {
    background-color: var(--t-bg-input);
    color: var(--t-text);
    border-color: var(--t-border);
}
input::placeholder, textarea::placeholder { color: var(--t-text-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--ss-ink); }

/* -----------------------------------------------------------------------------
   10. UTILITIES for the per-family corrections
   Page sheets that need an explicitly dark band (a closing CTA, a stat strip)
   should use this rather than re-stating hex, so a future palette change is
   still a one-file edit.
   -------------------------------------------------------------------------- */

.ss-dark {
    background: var(--ss-ink);
    color: #FFFFFF;
    border-radius: 32px;
}
.ss-dark h1, .ss-dark h2, .ss-dark h3, .ss-dark h4 { color: #FFFFFF; }
.ss-dark p, .ss-dark li { color: rgba(255, 255, 255, 0.72); }

/* -----------------------------------------------------------------------------
   11. SHARED BLOCK — Featured Apps
   MOVED here from landing-redesign.css on 2026-08-09. The block is included by
   common/v3/frontend_featured_apps.pug on the /tools listing and every
   /tools/<slug> detail page — and those pages run the THIRD style chain
   (frontend_detail.css), which loads neither all_ai.css nor
   landing-redesign.css. So the fix was correct and simply never reached the
   pages that needed it: /tools kept a pure-black 1440x1386 slab and an
   ink-on-black "APPS" label. soft-studio.css is the only sheet all three
   chains load, so a genuinely shared block belongs here.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   Section 8: Featured Apps — Soft Studio

   SHARED BLOCK. `common/v3/frontend_featured_apps.pug` is included by the
   homepage, the /tools listing and every /tools/<slug> detail page, so this is
   the widest-reaching section in the file.

   It was authored for the dark canvas and hardcodes its colours instead of
   reading tokens: `background:#000` on the section, `#ffffff` on both titles,
   `rgba(255,255,255,.5)` on the body copy and `rgba(255,255,255,.04-.08)` on
   every surface (app-redesign.css:1371-1690). None of that flipped with the
   token remap, so on paper the whole block rendered white-on-white — invisible
   apart from the `em`, which had already been re-inked to #141414 and so sat at
   1.14:1 on the leftover black band.

   Restated here at `.featured-apps-section <child>` (0,2,0) so it beats every
   single-class rule in app-redesign.css regardless of bundle order. Selectors
   are matched to the CURRENT markup — the previous version of this block
   targeted `.app-tile` / `.app-card` / `.section-title`, none of which the
   partial has emitted for a long time, which is why it never took effect.
   ========================================================================== */

.featured-apps-section {
    background: var(--t-bg) !important;
}

/* the coral hairline "gradient separator" above the section — a ramp, banned */
.featured-apps-section::before {
    display: none !important;
}

/* --- header ---------------------------------------------------------------
   The legacy heading shouts in 800-weight uppercase. Soft Studio has no
   uppercase display size, so it takes the same treatment home.css already
   applies to this exact class on the homepage: sentence weight, tight
   tracking, no caps transform. The text node itself is untouched. */
.featured-apps-section .featured-apps-title {
    color: var(--t-text) !important;
    font-family: var(--font-display) !important;
    text-transform: none !important;
    font-weight: 620 !important;
    font-size: clamp(1.9rem, 4vw, 3rem) !important;
    letter-spacing: -0.028em !important;
    line-height: 1.08 !important;
}

/* Ink on pink — the one accent the block carries. Never pink text. */
.featured-apps-section .featured-apps-title em,
.featured-apps-section .section-title em,
.featured-apps-section .section-title .italic-accent,
.featured-apps-section .section-title i {
    background: var(--ss-pink, #FFD3F6) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--t-text) !important;
    color: var(--t-text) !important;
    font-style: normal !important;
    border-radius: var(--ss-r-pill, 999px);
    /* the markup is `em  APPS` — the leading space lives INSIDE the element, so
       the left padding is trimmed to keep the pill optically centred */
    padding: 0.04em 0.34em 0.04em 0.06em !important;
}

.featured-apps-section .section-title {
    color: var(--t-text) !important;
}

.featured-apps-section .featured-apps-subtitle {
    color: var(--t-text-secondary) !important;
}

.featured-apps-section .featured-apps-header {
    margin-bottom: clamp(40px, 5vw, 64px) !important;
}

/* --- tiles ---------------------------------------------------------------- */
.featured-apps-section .fa-tile,
.featured-apps-section .app-tile,
.featured-apps-section .app-card {
    background: var(--t-bg-card) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--ss-r-card, 28px) !important;
    box-shadow: none !important;
}

/* Elevation is a low-opacity NEUTRAL shadow. The original lifted on a
   rgba(247,30,199,.15) bloom, which is a coloured glow and is banned. */
.featured-apps-section .fa-tile:hover,
.featured-apps-section .app-tile:hover,
.featured-apps-section .app-card:hover {
    background: var(--t-bg-card) !important;
    border-color: var(--t-border-mid) !important;
    box-shadow: var(--ss-shadow-lift, 0 12px 32px rgba(20, 20, 20, 0.09)) !important;
    transform: translateY(-4px) !important;
}

.featured-apps-section .fa-tile:focus-within {
    border-color: var(--t-text) !important;
    box-shadow: var(--ss-shadow, 0 6px 22px rgba(20, 20, 20, 0.05)) !important;
}

/* The icon plate. `--ss-pink-3` is the token's stated purpose: a faint tint for
   large fields. The glyph itself was rgba(255,255,255,.25) — invisible. */
.featured-apps-section .fa-tile-image {
    background: var(--ss-pink-3, #FFF3FC) !important;
}

.featured-apps-section .fa-tile-image-placeholder {
    color: var(--t-text) !important;
    opacity: 0.42;
}

.featured-apps-section .fa-tile-title,
.featured-apps-section .app-tile .app-name,
.featured-apps-section .app-card .app-name {
    color: var(--t-text) !important;
    font-weight: 620 !important;
    letter-spacing: -0.014em !important;
}

.featured-apps-section .fa-tile-desc,
.featured-apps-section .app-tile .app-description,
.featured-apps-section .app-card .app-description {
    color: var(--t-text-secondary) !important;
}

/* --- actions: ink pill primary, ghost pill secondary ---------------------- */
.featured-apps-section .fa-tile-launch {
    background: var(--t-text) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    border-radius: var(--ss-r-pill, 999px) !important;
}

.featured-apps-section .fa-tile-launch:hover {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    transform: none !important;
}

.featured-apps-section .fa-tile-launch:active {
    transform: scale(0.98) !important;
}

.featured-apps-section .fa-tile-launch:focus-visible,
.featured-apps-section .featured-apps-link:focus-visible {
    outline: 2px solid var(--t-text) !important;
    outline-offset: 2px !important;
}

.featured-apps-section .featured-apps-link {
    background: var(--t-bg-card) !important;
    color: var(--t-text) !important;
    border: 1px solid var(--t-border) !important;
    border-radius: var(--ss-r-pill, 999px) !important;
    box-shadow: none !important;
}

.featured-apps-section .featured-apps-link:hover {
    background: var(--t-text) !important;
    color: #ffffff !important;
    border-color: var(--t-text) !important;
    transform: translateY(-2px) !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .featured-apps-section .fa-tile:hover,
    .featured-apps-section .app-tile:hover,
    .featured-apps-section .app-card:hover,
    .featured-apps-section .fa-tile-launch:active,
    .featured-apps-section .featured-apps-link:hover {
        transform: none !important;
    }
}

/* -----------------------------------------------------------------------------
   12. HOVER IS A FILL, NOT A LEAP
   Vytas, 2026-08-09: "ensure all hover effects are consistant like in header
   menu".

   THE REFERENCE (soft-studio-chrome.css): a nav item and a mega-menu row hover
   by filling with --paper over 150ms. Nothing moves, nothing grows, no shadow
   blooms. That is the whole gesture.

   THE PROBLEM: 65 rules across uc-pages, app-redesign, landing-redesign,
   theme-global, tools-hp, home, studios, gallery and frontend-seo-pages lifted
   their element on hover — translateY(-2px) to translateY(-12px), several with
   a rotate and a scale(1.03) as well, and most paired with a bigger shadow. So
   cards jumped on nine surfaces while the header, sitting directly above them,
   stayed still. Two motion languages on one page.

   THE FIX: neutralise the lift where it happens, keep the feedback. Elements
   still change fill, border and colour on hover — only the displacement goes.

   DELIBERATELY NOT NEUTRALISED:
   · :active — `transform: scale(0.98)` is the press state and stays.
   · ::before / ::after — the arrow nudge on .v10-link and .v10-btn--arrow is a
     pseudo-element, so these selectors never reach it.
   · img inside a hovered card — a slow photo zoom reads as depth, not as the
     component leaping, and the selectors below stop at the element itself.
   -------------------------------------------------------------------------- */

a:hover, button:hover, summary:hover,
[class*="card"]:hover, [class*="tile"]:hover, [class*="-item"]:hover,
[class*="btn"]:hover, [class*="button"]:hover, [class*="chip"]:hover,
[class*="panel"]:hover, [class*="cta"]:hover {
    transform: none !important;
}

/* Elevation may deepen slightly on hover, but it may not bloom into a halo and
   it may not carry colour. One neutral step, the same everywhere. */
[class*="card"]:hover, [class*="tile"]:hover, [class*="panel"]:hover {
    box-shadow: var(--ss-shadow-lift) !important;
}

/* THE FEEDBACK ITSELF. Removing the lift is only half the job: on several
   surfaces the lift WAS the entire hover, so those cards went completely dead
   to the pointer — measurably worse than the inconsistency it replaced (an
   /apps card returned an identical computed style before and after hover).
   So cards take the header's gesture: fill with --paper, firm the hairline.
   Same fill, same 150ms, same curve as a nav row.

   `:not(.ss-dark)` keeps deliberate ink surfaces dark, and the `:has(a, button)`
   guard means only cards that actually DO something light up — a static
   content panel is not made to look clickable. */
[class*="card"]:hover:not(.ss-dark):has(a, button),
[class*="tile"]:hover:not(.ss-dark):has(a, button),
a[class*="card"]:hover:not(.ss-dark),
a[class*="tile"]:hover:not(.ss-dark) {
    background-color: var(--ss-paper);
    border-color: var(--t-border-mid);
}

/* One duration and one curve, so a hover feels the same on a nav row, a card
   and a button. */
a, button, summary,
[class*="card"], [class*="tile"], [class*="-item"],
[class*="btn"], [class*="button"], [class*="chip"] {
    transition-duration: 150ms;
    transition-timing-function: var(--ss-ease);
}

@media (prefers-reduced-motion: reduce) {
    a, button, summary, [class*="card"], [class*="tile"], [class*="-item"],
    [class*="btn"], [class*="button"], [class*="chip"] {
        transition-duration: 0.01ms !important;
    }
}