/*
 * Devanta's own light-only brand tokens, a separate set from `--ap-*`, which the
 * ThemeCompiler rewrites per tenant. Scoped under `.pf` (set on <body> in
 * platform/base.html.twig) so nothing here reaches a tenant page.
 */

.pf {
    --pf-bg: var(--brand-paper);
    --pf-surface: #ffffff;
    --pf-surface-2: #faf9f7;

    --pf-ink: var(--brand-ink);
    --pf-ink-soft: #56545e;
    --pf-muted: #5b594e;
    --pf-faint: #8a8779;
    --pf-line: #e5e2db;
    --pf-line-soft: #eee6da;
    --pf-line-hover: #c2bda9;
    --pf-line-dash: #d8d4c8;
    --pf-track: #ddd9cd;
    --pf-error: #bd413f;
    --pf-success: #2e7d43;

    --pf-lime: var(--brand-lime);
    --pf-lime-rgb: 201, 242, 74;
    --pf-lime-strong: var(--brand-lime-strong);
    --pf-lime-tint: var(--brand-lime-tint);
    --pf-lime-deep: #6b7f00;
    --pf-lime-deeper: #5f7000;
    --pf-focus: #6b7f00;

    /* The fake browser chrome's traffic lights, shared by the editor mock's
       frame and the style-engine window. */
    --pf-dot-red: var(--brand-dot-red);
    --pf-dot-yellow: var(--brand-dot-yellow);
    --pf-dot-green: var(--brand-dot-green);

    /* Wireframe grays, used by the onboarding sketches and controls. */
    --pf-wire-bg: #f7f5f0;
    --pf-wire-line: #eee9df;
    --pf-wire-soft: #e3ded3;
    --pf-wire: #d6d2c9;
    --pf-wire-dim: #cfcabf;
    --pf-wire-deep: #bdb7a8;

    --pf-cream: #f4f2ee;
    --pf-on-dark: #c9c7d0;
    --pf-on-dark-soft: #a5a2ae;
    --pf-on-dark-faint: #84828e;
    --pf-on-dark-mono: #6f6d79;

    --pf-dark: #17170f;
    --pf-dark-panel: #1b1b23;
    --pf-dark-rail: #201f16;
    --pf-dark-slot: #2f2e21;
    --pf-dark-line: rgba(255, 255, 255, 0.08);
    --pf-dark-line-2: rgba(255, 255, 255, 0.1);
    --pf-dark-chip: rgba(255, 255, 255, 0.05);
    --pf-dark-chip-line: rgba(255, 255, 255, 0.14);

    --pf-radius: 16px;
    --pf-radius-sm: 14px;
    --pf-radius-lg: 18px;
    --pf-pill: 100px;

    /* theme.css points --bs-border-radius at the tenant token; the platform is
       not a tenant site and keeps its own scale. */
    --bs-border-radius: var(--pf-radius);
    --bs-border-radius-sm: var(--pf-radius-sm);
    --bs-border-radius-lg: var(--pf-radius-lg);

    --pf-shadow-canvas: 0 40px 80px -34px rgba(0, 0, 0, 0.5);
    --pf-shadow-price: 0 30px 60px -30px rgba(var(--pf-lime-rgb), 0.6);
    --pf-shadow-lift: 0 18px 36px -20px rgba(23, 23, 15, 0.35);
    --pf-shadow-bar: 0 24px 48px -20px rgba(23, 23, 15, 0.55);

    --pf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");

    --pf-maxw: 1480px;
    --pf-maxw-narrow: 820px;
    --pf-gutter: clamp(20px, 5vw, 56px);
    --pf-block: clamp(56px, 9vw, 120px);

    --pf-font-display: 'Archivo Variable', 'Archivo', system-ui, sans-serif;
    --pf-font-body: 'Archivo Variable', 'Archivo', system-ui, sans-serif;
    --pf-font-mono: 'Martian Mono', ui-monospace, monospace;

    background: var(--pf-bg);
    color: var(--pf-ink);
    font-family: var(--pf-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.pf-hl {
    background: linear-gradient(180deg, transparent 58%, var(--pf-lime) 58%);
    padding: 0 0.06em;
}

/* ---- Layout primitives ---- */
.pf-wrap {
    max-width: var(--pf-maxw);
    margin: 0 auto;
    padding-inline: var(--pf-gutter);
}

.pf-section {
    padding-block: var(--pf-block);
}

.pf-eyebrow {
    font-family: var(--pf-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: var(--pf-lime-deep);
    text-transform: uppercase;
}

.pf-h2 {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 600;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.85rem 0 0;
}

.pf-lead {
    color: var(--pf-ink-soft);
    line-height: 1.6;
    margin: 1rem 0 0;
}

.pf-lead--center {
    margin-inline: auto;
    max-width: 48ch;
}

.pf-spacer-lg {
    margin-top: 34px;
}

/* The dark bands. The editor demo, the style engine and the final call are one surface with
   one glow; the service options are that surface as a card rather than a full band, which is
   the border-radius they add. They differ only in where the light falls, so each section
   below keeps its gradient and nothing else. The grain rides these layers, see Grain. */
.pf-editor,
.pf-engine,
.pf-service,
.pf-final {
    background: var(--pf-dark);
    color: var(--pf-cream);
    position: relative;
    overflow: hidden;
}

.pf-editor__inner,
.pf-engine__inner {
    position: relative;
    max-width: var(--pf-maxw);
    margin: 0 auto;
    padding: var(--pf-block) var(--pf-gutter);
}

.pf-editor .pf-eyebrow,
.pf-engine .pf-eyebrow,
.pf-service .pf-eyebrow {
    color: var(--pf-lime);
}

/* ---- Text wrapping ----
   Orphan control for the page's own copy only. The miniature sites and the
   editor mock are laid out on fixed-width stages, so a re-wrap there moves
   pixels that the pan and scale keyframes are tuned against. */
.pf-h2,
.pf-final__h,
.pf-auth__title,
.pf-page__title,
.pf-step__title,
.pf-service__h {
    text-wrap: balance;
}

.pf-lead,
.pf-hero__lead,
.pf-editor__lead,
.pf-engine__lead,
.pf-modules__lead,
.pf-gallery__lead,
.pf-step__text,
.pf-faq__a,
.pf-service__p,
.pf-service__desc,
.pf-final__p,
.pf-auth__lead {
    text-wrap: pretty;
}

/* ---- Buttons ----
   Skinned through Bootstrap's --bs-btn-* variables, never by out-specifying it
   (AGENTS.md). The focus ring stays an outline of our own: --pf-focus is re-pointed
   to lime on the dark bands, which --bs-btn-focus-shadow-rgb could not follow. */
.btn-lime,
.btn-outline-ink,
.btn-outline-cream {
    --bs-btn-padding-x: 24px;
    --bs-btn-padding-y: 15px;
    --bs-btn-font-family: var(--pf-font-mono);
    --bs-btn-font-size: 0.8rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--pf-pill);
    --bs-btn-focus-box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.btn-lime {
    --bs-btn-bg: var(--pf-lime);
    --bs-btn-border-color: var(--pf-lime);
    --bs-btn-color: var(--pf-ink);
    --bs-btn-hover-bg: var(--pf-lime-strong);
    --bs-btn-hover-border-color: var(--pf-lime-strong);
    --bs-btn-hover-color: var(--pf-ink);
    --bs-btn-active-bg: var(--pf-lime-strong);
    --bs-btn-active-border-color: var(--pf-lime-strong);
    --bs-btn-active-color: var(--pf-ink);
}

.btn-outline-ink {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--pf-ink);
    --bs-btn-color: var(--pf-ink);
    --bs-btn-hover-bg: var(--pf-ink);
    --bs-btn-hover-border-color: var(--pf-ink);
    --bs-btn-hover-color: var(--pf-cream);
    --bs-btn-active-bg: var(--pf-ink);
    --bs-btn-active-border-color: var(--pf-ink);
    --bs-btn-active-color: var(--pf-cream);
}

/* The outline sibling for the dark bands, where --pf-ink has no contrast. */
.btn-outline-cream {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(244, 242, 238, 0.4);
    --bs-btn-color: var(--pf-cream);
    --bs-btn-hover-bg: var(--pf-cream);
    --bs-btn-hover-border-color: var(--pf-cream);
    --bs-btn-hover-color: var(--pf-ink);
    --bs-btn-active-bg: var(--pf-cream);
    --bs-btn-active-border-color: var(--pf-cream);
    --bs-btn-active-color: var(--pf-ink);
}

/* Bootstrap's .btn-sm would otherwise take the radius back to --bs-border-radius-sm. */
.btn-lime.btn-sm,
.btn-outline-ink.btn-sm,
.btn-outline-cream.btn-sm {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 10px;
    --bs-btn-font-size: 0.72rem;
    --bs-btn-border-radius: var(--pf-pill);
}

.pf-arrow {
    transition: transform 0.2s ease;
}

.btn-lime:hover .pf-arrow,
.btn-outline-ink:hover .pf-arrow,
.btn-outline-cream:hover .pf-arrow,
.pf-nav__link:hover .pf-arrow {
    transform: translateX(3px);
}

/* Keyboard focus ring for everything the per-component list below does not name.
   Unscoped: this stylesheet only ever loads on the platform host, and its 0,1,0
   stays under every .pf-*:focus-visible rule. */
:focus-visible {
    outline: 2px solid var(--pf-focus);
    outline-offset: 2px;
}

/* ---- Interaction states ----
   --pf-focus is re-pointed at lime on the dark bands below, so one rule reads on
   cream and on ink alike; .pf-swatch clears the browser default, so it has no ring to fall back to. */
.btn-lime:focus-visible,
.btn-outline-ink:focus-visible,
.pf-brand:focus-visible,
.pf-nav__link:focus-visible,
.pf-price__cta:focus-visible,
.btn-check:focus-visible + .pf-billing__opt,
.btn-check:focus-visible + .pf-knob,
.btn-check:focus-visible + .pf-swatch,
.btn-check:focus-visible + .pf-tab,
.pf-ed__chapter:focus-visible,
.pf-faq__q:focus-visible,
.pf-footer__links a:focus-visible {
    outline: 2px solid var(--pf-focus);
    outline-offset: 3px;
}

.pf-trust,
.pf-editor,
.pf-engine,
.pf-final,
.pf-footer,
.pf-service,
.pf-price--featured {
    --pf-focus: var(--pf-lime);
}

.btn-lime:active,
.btn-outline-ink:active,
.pf-price__cta:active,
.pf-billing__opt:active,
.pf-knob:active,
.pf-tab:active,
.pf-ed__chapter:active {
    transform: translateY(1px);
}

.pf-swatch:active {
    transform: scale(0.92);
}

@media (prefers-reduced-motion: reduce) {
    .btn-lime:active,
    .btn-outline-ink:active,
    .pf-price__cta:active,
    .pf-billing__opt:active,
    .pf-knob:active,
    .pf-tab:active,
    .pf-ed__chapter:active,
    .pf-swatch:active {
        transform: none;
    }
}

/* ---- Nav ---- */
/* A Bootstrap navbar repainted by setting the --bs-navbar-* tokens, never by
   out-specifying it (AGENTS.md). The toggler keeps Bootstrap's glyph: its stroke is
   baked into a data URI and cannot read a --pf-* token. */
.pf-nav {
    --bs-navbar-padding-y: 0;
    --bs-navbar-color: var(--pf-muted);
    --bs-navbar-hover-color: var(--pf-ink);
    --bs-navbar-active-color: var(--pf-ink);
    --bs-navbar-brand-color: var(--pf-ink);
    --bs-navbar-brand-hover-color: var(--pf-ink);
    --bs-navbar-brand-padding-y: 0;
    --bs-navbar-brand-margin-end: 0;
    --bs-navbar-brand-font-size: 1.25rem;
    --bs-navbar-nav-link-padding-x: 12px;
    --bs-navbar-toggler-padding-y: 9px;
    --bs-navbar-toggler-padding-x: 11px;
    --bs-navbar-toggler-font-size: 1.1rem;
    --bs-navbar-toggler-border-color: var(--pf-line);
    --bs-navbar-toggler-border-radius: 10px;
    --bs-navbar-toggler-focus-width: 3px;

    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--pf-bg) 86%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--pf-line);
}

.pf-nav__inner {
    max-width: var(--pf-maxw);
    margin: 0 auto;
    padding: 14px var(--pf-gutter);
}

.pf-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 650;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    color: var(--pf-ink);
}

.pf-brand__mark {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    background: var(--pf-ink);
    color: var(--pf-cream);
    border-radius: 9px;
}

.pf-brand__mark .brand-logo {
    width: 19px;
    height: 19px;
}

.pf-brand__mark .brand-logo__accent {
    fill: var(--pf-lime);
}

.pf-nav__link {
    font-family: var(--pf-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Collapsed: the panel is in flow under the bar, so the entries are full-width
   rows and the CTA needs air rather than the row's 8px gap. */
@media (max-width: 991.98px) {
    .pf-nav__links .nav-link {
        padding: 14px 2px;
        font-size: 0.78rem;
        border-bottom: 1px solid var(--pf-line);
    }

    .pf-nav__links .btn {
        display: flex;
        margin: 16px 0 12px;
        justify-content: center;
    }
}

/* In-page targets (#editeur, #modeles, #tarifs) sit under the sticky nav
   without an offset of its own height. */
.pf [id] {
    scroll-margin-top: 84px;
}

/* scroll-behavior only acts on the scrolling element, so it cannot go on .pf
   itself; :has keeps it off the tenant hosts that serve the login page from
   this same stylesheet. */
html:has(body.pf) {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html:has(body.pf) {
        scroll-behavior: auto;
    }
}

/* ---- Hero ---- */
.pf-hero {
    max-width: var(--pf-maxw);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 72px) var(--pf-gutter) clamp(48px, 7vw, 90px);
}

.pf-hero__title {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 600;
    font-size: clamp(2.5rem, 6vw, 4.7rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 22px 0 0;
}

.pf-hero__lead {
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    line-height: 1.6;
    color: var(--pf-muted);
    margin: 22px 0 0;
    max-width: 44ch;
}

.pf-hero__note {
    font-family: var(--pf-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--pf-faint);
    margin-top: 18px;
}

/* ---- Hero rotor: « Fait pour <métier> » ---- */
.pf-hero__rotor-label {
    font-family: var(--pf-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-faint);
}

/* Every word shares one grid cell: the widest word sets the width, the
   staggered animation decides which one shows. Delays are negative so the
   reel is already mid-cycle on load. Durations and delays are all
   7 (words) x 2.2 s; touch one, touch them all. */
.pf-hero__rotor-word {
    grid-area: 1 / 1;
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.1;
    white-space: nowrap;
    opacity: 0;
    animation: pf-word-cycle 15.4s ease-in-out infinite;
}

.pf-hero__rotor-word:nth-child(1) { animation-delay: -15.4s; }
.pf-hero__rotor-word:nth-child(2) { animation-delay: -13.2s; }
.pf-hero__rotor-word:nth-child(3) { animation-delay: -11s; }
.pf-hero__rotor-word:nth-child(4) { animation-delay: -8.8s; }
.pf-hero__rotor-word:nth-child(5) { animation-delay: -6.6s; }
.pf-hero__rotor-word:nth-child(6) { animation-delay: -4.4s; }
.pf-hero__rotor-word:nth-child(7) { animation-delay: -2.2s; }

.pf-hero__caret {
    display: inline-block;
    width: 2px;
    height: 0.92em;
    margin-left: 3px;
    background: var(--pf-ink);
    vertical-align: -0.06em;
    animation: pf-caret 1s steps(1, end) infinite;
}

@keyframes pf-word-cycle {
    0% { opacity: 0; transform: translateY(8px); }
    2%, 12.3% { opacity: 1; transform: none; }
    14.3%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes pf-caret {
    0%, 45% { opacity: 1; }
    55%, 100% { opacity: 0; }
}

/* ---- Trust strip ---- */
.pf-trust {
    background: var(--pf-dark);
    border-top: 1px solid var(--pf-dark-line);
    position: relative;
    overflow: hidden;
}

.pf-trust__inner {
    position: relative;
    max-width: var(--pf-maxw);
    margin: 0 auto;
    padding: 18px var(--pf-gutter);
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    align-items: center;
    justify-content: center;
}

.pf-trust__label {
    font-family: var(--pf-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    color: var(--pf-on-dark-mono);
    text-transform: uppercase;
}

.pf-trust__name {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-size: 1.05rem;
    color: var(--pf-on-dark);
}

/* ---- Grain ----
   Film grain over the dark bands only, so they read as a surface rather than a
   flat fill. It rides the glow layers, which already sit under .pf-*__inner,
   and so never lands on top of the copy or the controls. */
.pf-trust::after,
.pf-editor__glow::after,
.pf-engine__glow::after,
.pf-final__glow::after,
.pf-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--pf-grain);
    mix-blend-mode: overlay;
    opacity: 0.38;
    pointer-events: none;
}

/* ---- How it works: the three steps ----
   The rule over each step fills a third further than the one before, so the
   order reads without a number to carry it. The staircase offset only applies
   once the three sit side by side. */
.pf-step {
    position: relative;
    padding-top: 23px;
}

.pf-step::before,
.pf-step::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
}

.pf-step::before {
    right: 0;
    background: var(--pf-track);
}

.pf-step::after {
    width: 33.33%;
    background: var(--pf-ink);
}

.pf-steps > :nth-child(2) .pf-step::after {
    width: 66.66%;
}

.pf-steps > :nth-child(3) .pf-step::after {
    width: 100%;
    background: var(--pf-lime);
}

@media (min-width: 768px) {
    .pf-steps > :nth-child(2) .pf-step {
        margin-top: 36px;
    }

    .pf-steps > :nth-child(3) .pf-step {
        margin-top: 72px;
    }
}

.pf-step__title {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.pf-step__text {
    color: var(--pf-ink-soft);
    line-height: 1.6;
    margin: 0;
}

/* ---- The editor, animated demo (widget 2) ---- */
.pf-editor__glow {
    background: radial-gradient(80% 55% at 80% 0%, rgba(var(--pf-lime-rgb), 0.18), transparent 60%);
}

.pf-editor__title {
    max-width: 22ch;
}

.pf-editor__lead {
    max-width: 48ch;
    color: var(--pf-on-dark);
    line-height: 1.65;
}

.pf-editor__fine {
    font-family: var(--pf-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--pf-on-dark-faint);
}

/* ---- Preset gallery (widget 3) ---- */
.pf-band {
    background: var(--pf-surface);
    border-top: 1px solid var(--pf-line);
    border-bottom: 1px solid var(--pf-line);
}

.pf-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pf-surface);
    color: var(--pf-ink-soft);
    border: 1px solid var(--pf-line);
    padding: 10px 16px;
    border-radius: var(--pf-pill);
    font-family: var(--pf-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.btn-check:checked + .pf-tab {
    background: var(--pf-ink);
    color: #fff;
    border-color: var(--pf-ink);
}

.btn-check:not(:checked) + .pf-tab:hover {
    border-color: var(--pf-line-hover);
    color: var(--pf-ink);
}

.pf-tab__dot {
    width: 8px;
    height: 8px;
    background: var(--pf-tab-accent);
}

.pf-gallery__lead {
    color: var(--pf-ink-soft);
    line-height: 1.6;
    margin: 0;
    max-width: 40ch;
    font-size: 0.95rem;
}

/* ---- The hero's browser window, one template capture at a time ---- */
.pf-gal {
    border-radius: var(--pf-radius);
    overflow: hidden;
    background: var(--pf-dark);
    box-shadow: var(--pf-shadow-canvas);
}

.pf-gal__chrome {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
}

.pf-gal__dots span {
    width: 8px;
    height: 8px;
    background: var(--pf-dark-slot);
}

.pf-gal__url {
    flex: 1;
    max-width: 340px;
    margin: 0 auto;
    text-align: center;
    font-family: var(--pf-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: var(--pf-on-dark);
    background: var(--pf-dark-rail);
    border: 1px solid var(--pf-dark-slot);
    border-radius: var(--pf-pill);
    padding: 5px 12px;
}

.pf-gal__live {
    font-family: var(--pf-font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pf-faint);
}

.pf-gal__view {
    position: relative;
    aspect-ratio: 1120 / 620;
    overflow: hidden;
    background: var(--pf-surface);

    /* Size containment so 100cqh below reads the frame's own height. */
    container-type: size;
}

/* ---- Real template captures ----
   Each panel is the template's 1280 x 1100 card capture (assets/images/onboarding),
   tall enough for the move below. While its trade shows, it fades in, holds on
   the template's own hero, then scrolls half a frame (100cqh is the frame height)
   over the step gallery.js sets. */
.pf-gal__shot {
    position: absolute;
    inset: 0;
    animation: pf-shot-in 0.5s ease both;
}

.pf-gal__shot img {
    animation: pf-shot-glide var(--pf-gal-step, 6s) cubic-bezier(0.45, 0, 0.3, 1) both;
}

@keyframes pf-shot-in {
    from { opacity: 0; }
}

@keyframes pf-shot-glide {
    0%, 40% { transform: translateY(0); }
    100% { transform: translateY(-50cqh); }
}

.pf-gal__shot:focus-visible img {
    animation-play-state: paused;
}

.pf-gal__shot:focus-visible {
    outline: 3px solid var(--pf-lime);
    outline-offset: -3px;
}

.pf-gal__open {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(6px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--pf-pill);
    background: var(--pf-dark);
    color: var(--pf-lime);
    font-family: var(--pf-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pf-gal__shot:hover .pf-gal__open,
.pf-gal__shot:focus-visible .pf-gal__open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .pf-gal__shot,
    .pf-gal__shot img {
        animation: none;
    }

    .pf-gal__open {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Accent colors: a decorative demo palette shared by the style-engine
   swatches. JS reads --pf-acc off a swatch to restyle the live preview, so the
   colors live here in one place. */
.pf-acc--gold { --pf-acc: #a87f00; }
.pf-acc--blue { --pf-acc: #0074c8; }
.pf-acc--terracotta { --pf-acc: #ca6800; }
.pf-acc--rose { --pf-acc: #b2417f; }
.pf-acc--green { --pf-acc: #008349; }
.pf-acc--coral { --pf-acc: #d55753; }

/* ---- Templates by trade: the home's tiles and the /modeles catalog ---- */
.pf-trade-tile {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.pf-trade-tile:is(:hover, :focus-visible) {
    border-color: var(--pf-ink);
}

.pf-trade-tile__stage {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--pf-wire-bg);
    transition: background 0.3s ease;
}

.pf-trade-tile__photo {
    transition: opacity 0.3s ease, transform 0.4s ease;
}

/* The trade's templates wait out of sight until the tile is pointed at, then fan out over the photo. */
.pf-trade-tile__shot {
    position: absolute;
    left: 9%;
    width: 82%;
    aspect-ratio: 16 / 10;
    object-position: top;
    border-radius: 10px;
    box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.3s ease, transform 0.35s ease;
}

.pf-trade-tile__shot--1 {
    top: 6%;
    --pf-fan: -5deg;
}

.pf-trade-tile__shot--2 {
    top: 31%;
    --pf-fan: 1deg;
}

.pf-trade-tile__shot--3 {
    top: 56%;
    --pf-fan: 5deg;
}

.pf-trade-tile:is(:hover, :focus-visible) .pf-trade-tile__stage {
    background: var(--pf-dark);
}

.pf-trade-tile:is(:hover, :focus-visible) .pf-trade-tile__photo {
    opacity: 0.18;
    transform: scale(1.06);
}

.pf-trade-tile:is(:hover, :focus-visible) .pf-trade-tile__shot {
    opacity: 1;
    transform: rotate(var(--pf-fan));
}

.pf-trade-tile__label {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.25;
}

.pf-template-count {
    font-family: var(--pf-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pf-muted);
}

.pf-trade-tile__arrow {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    background: var(--pf-cream);
    transition: background 0.2s ease;
}

.pf-trade-tile:is(:hover, :focus-visible) .pf-trade-tile__arrow {
    background: var(--pf-lime);
}

.pf-trades-foot {
    border: 1px dashed var(--pf-line-dash);
    border-radius: var(--pf-radius);
}

.pf-trades-foot__text {
    color: var(--pf-ink-soft);
    line-height: 1.6;
}

.pf-cat-head {
    padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px);
}

.pf-cat-crumb {
    font-family: var(--pf-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pf-muted);
}

.pf-cat-head__title {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 600;
    font-size: clamp(2.4rem, 6vw, 3.75rem);
    line-height: 1;
    letter-spacing: -0.025em;
    max-width: 16ch;
    text-wrap: balance;
}

.pf-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-pill);
    background: var(--pf-surface);
    color: var(--pf-ink);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.pf-cat-chip:hover {
    border-color: var(--pf-ink);
}

.pf-cat-chip img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

/* Below the sticky platform nav. */
.pf-cat-toc {
    position: sticky;
    top: 96px;
}

.pf-cat-toc__link {
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--pf-ink-soft);
    font-size: 0.9rem;
}

.pf-cat-toc__link:hover {
    background: var(--pf-surface);
    color: var(--pf-ink);
}

.pf-cat-trade {
    padding-top: 28px;
    border-top: 1px solid var(--pf-line);
    scroll-margin-top: 80px;
}

.pf-cat-trade__photo {
    width: 52px;
    height: 52px;
    border-radius: 12px;
}

.pf-cat-trade__title {
    font-family: var(--pf-font-display);
    font-stretch: 112%;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.015em;
}

.pf-cat-card {
    padding: 10px 10px 16px;
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    background: var(--pf-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pf-cat-card:is(:hover, :focus-visible) {
    border-color: var(--pf-ink);
    box-shadow: var(--pf-shadow-lift);
}

.pf-cat-card__shot {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
}

.pf-cat-card .pf-onb-card__preview {
    height: 190px;
}

.pf-cat-card__open {
    background: rgba(23, 23, 15, 0.62);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.pf-cat-card__open span {
    padding: 11px 18px;
    border-radius: var(--pf-pill);
    background: var(--pf-lime);
    color: var(--pf-ink);
    font-family: var(--pf-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pf-cat-card:is(:hover, :focus-visible) .pf-cat-card__open {
    opacity: 1;
}

.pf-cat-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 9px;
    border-radius: var(--pf-pill);
    background: var(--pf-dark);
    color: var(--pf-lime);
    font-family: var(--pf-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pf-cat-card__name {
    font-weight: 600;
    font-size: 1rem;
}

.pf-cat-card__desc {
    color: var(--pf-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.pf-cat-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border-radius: var(--pf-pill);
    background: var(--pf-cream);
    color: var(--pf-ink-soft);
    font-size: 0.72rem;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .pf-trade-tile__photo,
    .pf-trade-tile__shot {
        transition: none;
    }
}

/* ---- Module library ---- */
.pf-modules__title {
    max-width: 18ch;
}

.pf-modules__lead {
    color: var(--pf-ink-soft);
    line-height: 1.65;
    margin: 0;
    max-width: 44ch;
    font-size: 0.95rem;
}

.pf-module {
    background: var(--pf-surface-2);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pf-module__icon,
.pf-mod-proof__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--pf-lime);
    color: var(--pf-ink);
    font-size: 0.95rem;
}

.pf-module__name {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 600;
    font-size: 1.15rem;
}

.pf-module__arrow {
    margin-left: auto;
    color: var(--pf-faint);
}

.pf-module:hover,
.pf-module:focus-visible {
    border-color: var(--pf-ink);
}

.pf-module:hover .pf-module__arrow {
    color: var(--pf-ink);
    transform: translateX(3px);
}

.pf-module__desc {
    color: var(--pf-ink-soft);
    line-height: 1.6;
    margin: 0;
    font-size: 0.93rem;
}

/* ---- Style engine (widget 4) ---- */
.pf-center {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.pf-engine__lead {
    color: var(--pf-on-dark);
    line-height: 1.6;
    margin: 16px auto 0;
    max-width: 52ch;
}

/* The mockup is drawn at 1200px, and the site's container is 1480px. Past about
   1280 the knobs stop filling their panel and the preview flattens into a wide
   empty band, so the pair stops growing while the section keeps its own width. */
.pf-engine__grid {
    max-width: 1280px;
    margin-inline: auto;
}

.pf-engine__controls {
    background: var(--pf-dark-chip);
    border: 1px solid var(--pf-dark-line-2);
    border-radius: var(--pf-radius);
}

.pf-knob-label {
    font-family: var(--pf-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    color: var(--pf-on-dark-faint);
    text-transform: uppercase;
}

.pf-knob {
    background: var(--pf-dark-chip);
    color: var(--pf-on-dark);
    border: 1px solid var(--pf-dark-chip-line);
    padding: 9px 13px;
    border-radius: 9px;
    font-family: var(--pf-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.btn-check:checked + .pf-knob {
    background: var(--pf-lime);
    color: var(--pf-ink);
    border-color: var(--pf-lime);
}

.btn-check:not(:checked) + .pf-knob:hover {
    background: var(--pf-dark-chip-line);
    color: var(--pf-cream);
}

.btn-check:checked + .pf-knob:hover {
    background: var(--pf-lime-strong);
    border-color: var(--pf-lime-strong);
}

.pf-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pf-acc, var(--pf-lime));
    cursor: pointer;
    border: 2px solid transparent;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.2s ease, transform 0.12s ease;
}

.btn-check:checked + .pf-swatch {
    border-color: #fff;
    outline-color: var(--pf-acc);
}

.btn-check:not(:checked) + .pf-swatch:hover {
    outline-color: var(--pf-dark-chip-line);
}

/* The checked swatch paints its ring with --pf-acc, and it sits later in the
   file than the shared focus rule, so the focus color has to be restated here
   to win on source order. Without it the ring on the selected swatch is that
   swatch's own accent, which reads as selection, not focus. */
.btn-check:focus-visible + .pf-swatch {
    outline-color: var(--pf-focus);
}

/* live preview */
.pf-window {
    background: var(--pf-dark-panel);
    border: 1px solid var(--pf-dark-line-2);
    border-radius: var(--pf-radius);
    padding: 12px;
}

.pf-window__dots {
    padding: 4px 6px 12px;
}

.pf-window__dot {
    width: 11px;
    height: 11px;
}

.pf-window__dot--r { background: var(--pf-dot-red); }
.pf-window__dot--y { background: var(--pf-dot-yellow); }
.pf-window__dot--g { background: var(--pf-dot-green); }

.pf-se {
    --pf-p-bg: #f7f5f0;
    --pf-p-panel: #ffffff;
    --pf-p-text: #201e1d;
    --pf-p-line: #e5e1d8;
    --pf-p-acc: #a87f00;
    /* Tenant-font simulation: pinned to the Éditorial pair, not the Devanta brand font. */
    --pf-p-font: 'Fraunces', serif;
    --pf-p-rad: 8px;

    background: var(--pf-p-bg);
    color: var(--pf-p-text);
    font-family: var(--pf-p-font);
    border-radius: 10px;
    overflow: hidden;
    transition: background 0.35s ease, color 0.35s ease;
}

.pf-se__bar {
    padding: 13px 18px;
    background: var(--pf-p-panel);
    border-bottom: 1px solid var(--pf-p-line);
}

.pf-se__logo {
    font-family: var(--pf-p-font);
    font-weight: 700;
    font-size: 0.9rem;
}

.pf-se__nav {
    font-family: var(--pf-font-mono);
    font-size: 0.58rem;
    opacity: 0.7;
}

.pf-se__inner {
    padding: clamp(26px, 3vw, 40px) clamp(22px, 2.6vw, 34px);
}

/* The two content modes the knob swaps on .pf-se__inner: alignment and
   text-align always travel together, so one class carries both. */
.pf-layout0 {
    align-items: flex-start;
    text-align: left;
}

.pf-layout1 {
    align-items: center;
    text-align: center;
}

.pf-se__eyebrow {
    font-family: var(--pf-font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    color: var(--pf-p-acc);
    font-weight: 600;
}

.pf-se__h {
    font-family: var(--pf-p-font);
    font-weight: 700;
    font-size: clamp(1.7rem, 2.6vw, 2.3rem);
    line-height: 1.05;
}

.pf-se__p {
    font-size: 0.82rem;
    line-height: 1.55;
    opacity: 0.72;
}

.pf-se__btn {
    display: inline-block;
    background: var(--pf-p-acc);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--pf-p-rad);
    font-size: 0.72rem;
    font-weight: 600;
}

.pf-se__btn--ghost {
    background: transparent;
    color: var(--pf-p-text);
    border: 1px solid var(--pf-p-line);
}

.pf-se__card {
    height: 58px;
    background: var(--pf-p-panel);
    border: 1px solid var(--pf-p-line);
    border-radius: var(--pf-p-rad);
}

.pf-engine__caption {
    font-family: var(--pf-font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    color: var(--pf-on-dark-faint);
}

.pf-font0 { --pf-p-font: 'Fraunces', serif; }
.pf-font1 { --pf-p-font: 'Space Grotesk', sans-serif; }
.pf-font2 { --pf-p-font: 'Playfair Display', serif; }
.pf-font3 { --pf-p-font: 'Bricolage Grotesque', sans-serif; }

.pf-rad0 { --pf-p-rad: 0; }
.pf-rad1 { --pf-p-rad: 8px; }
.pf-rad2 { --pf-p-rad: 18px; }

/* ---- Pricing ---- */
.pf-billing {
    display: inline-flex;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-pill);
    padding: 4px;
    gap: 2px;
    margin-top: 28px;
}

.pf-billing__opt {
    font-family: var(--pf-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pf-ink-soft);
    border-radius: var(--pf-pill);
    padding: 9px 18px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.12s ease;
}

.btn-check:checked + .pf-billing__opt {
    background: var(--pf-ink);
    color: var(--pf-cream);
}

.btn-check:not(:checked) + .pf-billing__opt:hover {
    background: var(--pf-lime-tint);
    color: var(--pf-ink);
}

/* The two price sets both ship in the HTML; the grid's state class decides
   which one shows, so the toggle costs no request. Monthly is the default,
   which is also what a visitor without JS keeps (the control stays hidden). */
.pf-price-grid [data-pf-annual] {
    display: none;
}

.pf-price-grid.is-annual [data-pf-monthly] {
    display: none;
}

.pf-price-grid.is-annual [data-pf-annual] {
    display: inline-block;
}

/* Below md the plans swipe side by side, the featured one first. Bootstrap has
   no breakpoint-bound overflow and no scroll snap; the row does the rest. */
@media (max-width: 767.98px) {
    .pf-price-grid {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .pf-price-grid > * {
        scroll-snap-align: start;
    }
}

.pf-price {
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    padding: 26px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pf-price--featured {
    background: var(--pf-dark);
    color: var(--pf-cream);
    border-color: var(--pf-dark);
    box-shadow: var(--pf-shadow-price);
}

.pf-price__badge {
    position: absolute;
    top: -11px;
    left: 26px;
    font-family: var(--pf-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--pf-lime);
    color: var(--pf-ink);
    padding: 5px 11px;
    border-radius: var(--pf-pill);
}

.pf-price__name {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-size: 1.25rem;
    margin: 0;
}

.pf-price__amount {
    margin: 12px 0 2px;
}

.pf-price__value {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-size: 2.4rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pf-price__per {
    color: var(--pf-faint);
}

.pf-price--featured .pf-price__per {
    color: var(--pf-on-dark);
}

.pf-price__promo {
    font-family: var(--pf-font-mono);
    font-size: 0.68rem;
    color: var(--pf-faint);
    margin: 0 0 16px;
    min-height: 1em;
}

.pf-price__deal {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-family: var(--pf-font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    background: var(--pf-lime-tint);
    color: var(--pf-lime-deeper);
    border: 1px solid var(--pf-lime-strong);
    padding: 6px 12px;
    border-radius: var(--pf-pill);
}

.pf-price__deal--plain {
    background: none;
    border-color: transparent;
    color: var(--pf-faint);
    font-weight: 400;
    padding-inline: 0;
}

.pf-price--featured .pf-price__deal {
    background: var(--pf-lime);
    color: var(--pf-ink);
    border-color: var(--pf-lime);
    padding: 7px 12px;
}

.pf-price__list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--pf-ink-soft);
    font-size: 0.9rem;
}

.pf-price--featured .pf-price__list {
    color: var(--pf-on-dark);
}

.pf-price__cta {
    margin-top: auto;
    text-align: center;
    font-family: var(--pf-font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid var(--pf-line);
    color: var(--pf-ink);
    padding: 13px;
    border-radius: var(--pf-pill);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}

.pf-price__cta:hover {
    border-color: var(--pf-ink);
    color: var(--pf-ink);
}

.pf-price__cta--primary {
    background: var(--pf-lime);
    color: var(--pf-ink);
    border-color: var(--pf-lime);
}

.pf-price__cta--primary:hover {
    background: var(--pf-lime-strong);
    color: var(--pf-ink);
    border-color: var(--pf-lime-strong);
}

/* ---- Service options (one-time, sold alongside a plan) ---- */
.pf-service {
    margin-top: 26px;
    border-radius: var(--pf-radius-lg);
}

.pf-service__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(26px, 4vw, 52px);
    padding: clamp(28px, 4.5vw, 48px);
}

.pf-service__intro {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.pf-service__h {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 600;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    max-width: 18ch;
}

.pf-service__p {
    color: var(--pf-on-dark);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
    max-width: 44ch;
}

.pf-service__grid {
    flex: 1.35 1 400px;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.pf-service__card {
    background: var(--pf-dark-chip);
    border: 1px solid var(--pf-dark-chip-line);
    border-radius: var(--pf-radius-sm);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
}

.pf-service__card--featured {
    background: rgba(var(--pf-lime-rgb), 0.07);
    border-color: rgba(var(--pf-lime-rgb), 0.45);
}

.pf-service__badge {
    position: absolute;
    top: -10px;
    left: 22px;
    white-space: nowrap;
    font-family: var(--pf-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--pf-lime);
    color: var(--pf-ink);
    padding: 4px 10px;
    border-radius: var(--pf-pill);
}

.pf-service__head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-service__name {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.pf-service__price {
    margin-left: auto;
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.pf-service__once {
    font-family: var(--pf-font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pf-on-dark-faint);
}

.pf-service__desc {
    color: var(--pf-on-dark);
    font-size: 0.88rem;
    line-height: 1.6;
    margin: 0;
}

/* ---- FAQ ---- */
.pf-faq {
    max-width: var(--pf-maxw-narrow);
    margin: 0 auto;
    padding: var(--pf-block) var(--pf-gutter);
}

.pf-faq__item {
    border-top: 1px solid var(--pf-line);
    padding: 20px 0;
}

.pf-faq__item:last-of-type {
    border-bottom: 1px solid var(--pf-line);
}

.pf-faq__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-size: 1.15rem;
    font-weight: 600;
    list-style: none;
    transition: color 0.2s ease;
}

.pf-faq__q::-webkit-details-marker {
    display: none;
}

.pf-faq__q:hover {
    color: var(--pf-lime-deep);
}

.pf-faq__icon {
    color: var(--pf-lime-deep);
    font-size: 1.4rem;
    line-height: 1;
    transition: transform 0.25s ease;
}

.pf-faq__item[open] .pf-faq__icon {
    transform: rotate(45deg);
}

.pf-faq__a {
    color: var(--pf-ink-soft);
    line-height: 1.6;
    margin: 14px 0 0;
}

/* ---- Final CTA ---- */
.pf-final__glow {
    background: radial-gradient(70% 120% at 50% 120%, rgba(var(--pf-lime-rgb), 0.35), transparent 60%);
}

.pf-final__inner {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(64px, 10vw, 130px) var(--pf-gutter);
    text-align: center;
}

.pf-final__h {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 600;
    font-size: clamp(2.1rem, 5vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0;
}

.pf-final__p {
    color: var(--pf-on-dark);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.6;
    margin: 20px auto 0;
    max-width: 42ch;
}

.pf-final .btn {
    margin-top: 30px;
}

/* ---- Footer ---- */
.pf-footer {
    background: var(--pf-dark);
    color: var(--pf-on-dark-faint);
    border-top: 1px solid var(--pf-dark-line);
    position: relative;
    overflow: hidden;
}

.pf-footer__inner {
    position: relative;
    max-width: var(--pf-maxw);
    margin: 0 auto;
    padding: clamp(36px, 5vw, 52px) var(--pf-gutter) 32px;
}

.pf-footer__label {
    font-family: var(--pf-font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    color: var(--pf-on-dark-faint);
}

.pf-footer__note {
    color: var(--pf-on-dark);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 44ch;
}

.pf-footer__links {
    font-family: var(--pf-font-mono);
    font-size: 0.7rem;
    line-height: 2.1;
}

/* Per-anchor .link-underline-opacity-0 plus its -100-hover pair would be two
   utilities on each of seven links to say what the hover rule says once. */
.pf-footer__links a {
    color: var(--pf-on-dark-soft);
    width: fit-content;
}

.pf-footer__links a:hover {
    color: var(--pf-cream);
    text-decoration: underline;
}

.pf-footer__bar {
    border-top: 1px solid var(--pf-dark-line-2);
}

.pf-footer__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--pf-cream);
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 650;
    letter-spacing: -0.03em;
}

.pf-footer__brand .pf-brand__mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
}

.pf-footer__brand .brand-logo {
    width: 16px;
    height: 16px;
}

.pf-footer__origin {
    font-family: var(--pf-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    color: var(--pf-on-dark-soft);
}

.pf-footer__dot {
    width: 6px;
    height: 6px;
    background: var(--pf-lime);
}

.pf-footer__copy {
    font-family: var(--pf-font-mono);
    font-size: 0.7rem;
}

/* ---- Content pages (legal notice, terms, privacy) ---- */
.pf-page {
    max-width: var(--pf-maxw-narrow);
    margin: 0 auto;
    padding: clamp(48px, 7vw, 90px) var(--pf-gutter);
}

.pf-page__title {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 600;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.85rem 0 0;
}

.pf-page__meta {
    font-family: var(--pf-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--pf-faint);
    margin: 0.75rem 0 0;
}

.pf-prose {
    margin-top: 2rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--pf-ink-soft);
}

.pf-prose h2 {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 600;
    font-size: 1.35rem;
    color: var(--pf-ink);
    margin: 2.25rem 0 0.75rem;
}

.pf-prose h2:first-child {
    margin-top: 0;
}

.pf-prose p {
    margin: 0 0 1.25rem;
}

.pf-prose ul {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
}

.pf-prose li {
    margin-bottom: 0.5rem;
}

.pf-prose strong {
    color: var(--pf-ink);
}

.pf-prose a {
    color: var(--pf-lime-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- Auth pages (sign-in, signup, confirmation) ---- */
.pf-auth {
    max-width: 680px;
    margin: clamp(40px, 8vh, 96px) auto;
    padding-inline: var(--pf-gutter);
}

/* Stands in for the nav on the screens that render without chrome. */
.pf-auth__brand,
.pf-onb__brand {
    margin-bottom: 1.75rem;
}

.pf-auth--narrow {
    max-width: 460px;
}

.pf-auth__back {
    margin: 1.75rem 0 0;
    font-size: 0.9rem;
}

.pf-auth__back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pf-muted);
}

.pf-auth__back a:hover {
    color: var(--pf-ink);
}

.pf-auth__back a:hover .pf-arrow--back {
    transform: translateX(-3px);
}

.pf-auth__title {
    font-family: var(--pf-font-display);
    font-stretch: 115%;
    font-weight: 600;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.6rem 0 0;
}

.pf-auth__lead {
    color: var(--pf-ink-soft);
    line-height: 1.6;
    margin: 0.6rem 0 0;
}

.pf-auth-or {
    color: var(--pf-muted);
    font-size: 0.8rem;
}

.pf-auth-or__rule {
    height: 1px;
    background: var(--pf-line);
}

.pf-auth__alt {
    color: var(--pf-muted);
    font-size: 0.9rem;
    margin: 1rem 0 0;
}

.pf-auth__alt a,
.pf-auth__alt .btn-link {
    color: var(--pf-lime-deep);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The auth panels are Bootstrap cards: .card owns the surface and .card-body the
   padding, both through --bs-card-*. Only the top margin stays, and only because
   1.75rem falls between mt-4 and mt-5. */
.card {
    --bs-card-bg: var(--pf-surface);
    --bs-card-border-color: var(--pf-line);
    --bs-card-border-radius: var(--pf-radius);
    --bs-card-spacer-x: clamp(24px, 4vw, 36px);
    --bs-card-spacer-y: clamp(24px, 4vw, 36px);
}

.pf-panel {
    margin-top: 1.75rem;
}

.pf-confirm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: var(--pf-lime);
    color: var(--pf-ink);
    font-size: 1.1rem;
}

/* A failed sign-in and its good-news twin, in the panel above the fields they
   refer to. Bootstrap's .alert is the box; only the palette is ours. */
.alert {
    --bs-alert-border-radius: 10px;
    --bs-alert-padding-x: 14px;
    --bs-alert-padding-y: 12px;
    --bs-alert-margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.alert-danger {
    --bs-alert-bg: color-mix(in srgb, var(--pf-error) 8%, transparent);
    --bs-alert-border-color: color-mix(in srgb, var(--pf-error) 35%, transparent);
    --bs-alert-color: var(--pf-error);
}

.alert-success {
    --bs-alert-bg: color-mix(in srgb, var(--pf-success) 8%, transparent);
    --bs-alert-border-color: color-mix(in srgb, var(--pf-success) 35%, transparent);
    --bs-alert-color: var(--pf-success);
}

/* ---- Forms (form_row output, Bootstrap layout, restyled) ---- */
.pf-form .form-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pf-ink);
    margin-bottom: 0.4rem;
}

/* The tenant sites' required mark (components.css), on the platform's tokens. */
.pf-form .required-legend {
    color: var(--pf-muted);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.pf-form .required-mark,
.pf-form .form-label.required::after {
    color: var(--pf-lime-deep);
    font-weight: 700;
}

.pf-form .form-label.required::after {
    content: ' *' / '';
}

.pf-form .form-control {
    background: var(--pf-surface-2);
    border: 1px solid var(--pf-line);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--pf-ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pf-form .form-control::placeholder {
    color: var(--pf-faint);
}

.pf-form .form-control:focus {
    border-color: var(--pf-lime-deep);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-lime) 45%, transparent);
}

.pf-form .form-text {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--pf-faint);
}

.pf-form .form-control.is-invalid {
    border-color: var(--pf-error);
}

.pf-form .invalid-feedback {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--pf-error);
}

@media (prefers-reduced-motion: reduce) {
    .pf-se,
    .pf-tab,
    .pf-knob,
    .pf-swatch,
    .pf-arrow,
    .pf-faq__icon {
        transition: none;
    }

    /* The hero freezes on its first word and holds its first trade; the tabs still switch it. */
    .pf-hero__rotor-word,
    .pf-hero__caret {
        animation: none;
    }

    .pf-hero__rotor-word:first-child {
        opacity: 1;
    }
}

/* ---- Signup form extras (password eye, live subdomain preview) ---- */
.pf-passfield .form-control {
    padding-right: 46px;
}

.pf-passfield__toggle {
    right: 6px;
    color: var(--pf-faint);
    padding: 8px;
    font-size: 0.95rem;
}

.pf-passfield__toggle:hover {
    color: var(--pf-ink);
}

/* Sits directly under the business-name row, which carries the bottom margin. */
.pf-slug-preview {
    margin: -0.7rem 0 1rem;
    font-size: 0.8rem;
    color: var(--pf-lime-deep);
}

.pf-auth__terms {
    margin: 14px 0 0;
    font-size: 0.78rem;
    color: var(--pf-faint);
    text-align: center;
}

/* ---- Onboarding (premiers pas) ---- */
.pf-onb__lead {
    max-width: 56ch;
}

.pf-onb-card {
    position: relative;
    display: block;
    background: var(--pf-surface);
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius);
    overflow: hidden;
    cursor: pointer;
}

.pf-onb-card:hover {
    border-color: var(--pf-line-hover);
}

/* Kept in the tree (not display:none) so keyboard focus still reaches it. */
.pf-onb-card:has(.pf-onb-card__input:checked) {
    border-color: var(--pf-lime-deep);
    box-shadow: 0 0 0 1px var(--pf-lime-deep);
}

.pf-onb-card:has(.pf-onb-card__input:focus-visible),
.pf-onb-toggle:has(.pf-onb-toggle__input:focus-visible) {
    outline: 2px solid var(--pf-lime-deep);
    outline-offset: 2px;
}

.pf-onb-card__preview {
    display: block;
    height: 150px;
    overflow: hidden;
    background: var(--pf-wire-bg);
}

.pf-onb-card__preview img {
    object-position: top;
}

.pf-onb-card__preview--placeholder {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 26px;
}

.pf-onb-wire {
    display: block;
    border-radius: 4px;
    background: var(--pf-wire);
}

.pf-onb-wire--eyebrow {
    height: 12px;
    width: 38%;
    background: var(--pf-wire-soft);
}

.pf-onb-wire--title {
    height: 26px;
    width: 74%;
    border-radius: 6px;
    background: var(--pf-wire-deep);
}

.pf-onb-wire--lead {
    height: 10px;
    width: 60%;
    background: var(--pf-wire-soft);
}

.pf-onb-wire--tile {
    height: 52px;
    border-radius: 8px;
    background: var(--pf-wire-line);
}

.pf-onb-card__soon {
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pf-faint);
}

.pf-onb-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--pf-line);
}

/* Fed per render from the template's theme accent, the apparence swatch pattern. */
.pf-onb-card__dot {
    width: 8px;
    height: 8px;
    background: var(--pf-onb-accent, var(--pf-lime-deep));
}

.pf-onb-card__label {
    font-weight: 600;
    font-size: 0.92rem;
}

/* The live-render link takes the meta row's free space, so the check that
   follows it sits flush right on its own gap. */
.pf-onb-card__view {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pf-lime-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pf-onb-card__view i {
    font-size: 0.68rem;
}

.pf-onb-card__check {
    display: none;
    place-items: center;
    width: 22px;
    height: 22px;
    background: var(--pf-lime);
    font-size: 0.7rem;
}

.pf-onb-card:has(.pf-onb-card__input:checked) .pf-onb-card__check {
    display: inline-grid;
}

.pf-onb__list {
    display: grid;
    gap: 12px;
    margin-top: 32px;
}

.pf-onb-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--pf-radius);
    cursor: pointer;
    background: var(--pf-surface-2);
    border: 2px solid var(--pf-line);
}

.pf-onb-toggle:has(.pf-onb-toggle__input:checked) {
    background: var(--pf-surface);
    border-color: var(--pf-lime-deep);
    box-shadow: var(--pf-shadow-lift);
}

.pf-onb-toggle__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: none;
    background: var(--pf-bg);
    color: var(--pf-ink-soft);
    font-size: 1rem;
}

.pf-onb-toggle__desc {
    display: block;
    font-size: 0.88rem;
    color: var(--pf-ink-soft);
    line-height: 1.5;
    margin-top: 4px;
}

/* Bootstrap's form-switch, repainted rather than rebuilt: the knob image comes
   through --bs-form-switch-bg, the track through our tokens. */
.pf-onb-toggle__switch {
    flex: none;
    margin: 0;
    padding: 0;
    min-height: 0;
}

.pf-onb-toggle__switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");

    width: 46px;
    height: 26px;
    margin: 0;
    float: none;
    cursor: pointer;
    background-color: var(--pf-wire-deep);
    border-color: var(--pf-wire-deep);
}

/* The card's :has(:focus-visible) outline is the focus ring here. */
.pf-onb-toggle__switch .form-check-input:focus {
    border-color: var(--pf-wire-deep);
    box-shadow: none;
}

.pf-onb-toggle__switch .form-check-input:checked {
    background-color: var(--pf-lime-deep);
    border-color: var(--pf-lime-deep);
}

.pf-onb-badge {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 100px;
    background: var(--pf-lime-tint);
    color: var(--pf-lime-deeper);
}

.pf-onb__locked {
    margin-top: 28px;
}

.pf-onb-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 100px;
    border: 1px dashed var(--pf-line-hover);
    color: var(--pf-faint);
    font-size: 0.85rem;
}

.pf-onb-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--pf-ink);
    border-radius: 100px;
    padding: 10px 10px 10px 22px;
    box-shadow: var(--pf-shadow-bar);
}

.pf-onb-bar__summary {
    color: var(--pf-on-dark);
    font-size: 0.88rem;
    white-space: nowrap;
}

/* The model grid's bar appears once a card is picked; the required radio
   group blocks an empty submit anyway. Forms without cards keep their bar. */
form[data-pf-onb]:has(.pf-onb-card__input):not(:has(.pf-onb-card__input:checked)) .pf-onb-bar {
    display: none;
}

.pf-onb__back {
    margin: 26px 0 0;
    font-size: 0.88rem;
}

.pf-onb__back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pf-muted);
}

.pf-onb__back a:hover {
    color: var(--pf-ink);
}