@charset "UTF-8";
/* ==========================================================================
   Fresto — LumenCMS theme
   Hand-written CSS, no build step, no Tailwind. Everything is driven by the
   custom properties in :root so the folder stays copyable and rebrandable.

   The thesis: Fresto's world is receipts, kitchen tickets and order numbers.
   Order numbers carry a real, typed prefix per channel (#0001 dine-in,
   #K0001 kiosk, #N0001 online), so the page uses those prefixes as its
   structural device. The signature element is the hero order rail. The
   torn-receipt edge appears exactly twice: closing the hero, and closing the
   final (dark) CTA band.

   Contents
     1.  Tokens
     2.  Reset + base
     3.  Layout primitives
     4.  Type helpers
     5.  Buttons, chips, cards
     6.  Motion
     7.  Header
     8.  Footer
     9.  Blocks
     10. Templates
     11. Right-to-left
     12. Reduced motion / forced colours / print
   ========================================================================== */

/* ------------------------------------------------------------------ 1. Tokens */

:root {
    /* Brand — the product's own palette. */
    --fr-blue: #2653C1;              /* primary */
    --fr-deep: #025CCA;              /* secondary */
    --fr-ember: #FF6B35;             /* kiosk accent */
    --fr-ink: #0B1020;               /* headings, dark bands */
    --fr-body: #4A5266;              /* body copy */
    --fr-surface: #F5F5F5;           /* app neutral surface */
    --fr-paper: #FBFAF7;             /* receipt paper, warm off-white */
    --fr-rule: #E3E6ED;
    --fr-white: #FFFFFF;

    /* Derived, contrast-checked for WCAG AA.
       Ember is a background colour and carries ink text (6.6:1); white on
       ember would fail. --fr-ember-deep is the readable ember for text on
       light surfaces (5.1:1). */
    --fr-ember-deep: #C2410C;
    --fr-ember-soft: #FFF1EA;
    --fr-ember-line: #FFD3C0;
    --fr-blue-soft: #EDF2FE;
    --fr-blue-line: #CFDDFB;
    --fr-blue-ink: #FFFFFF;
    --fr-muted: #6B7386;
    --fr-ink-2: #151B2E;             /* raised surface on dark bands */
    --fr-on-dark: #FBFAF7;
    --fr-on-dark-muted: #A8B0C2;
    --fr-rule-dark: #242C44;

    /* Shape + depth */
    --fr-radius: 14px;
    --fr-radius-sm: 8px;
    --fr-radius-pill: 999px;
    --fr-shadow-card: 0 1px 2px rgb(11 16 32 / 0.04), 0 12px 32px -12px rgb(11 16 32 / 0.12);
    --fr-shadow-lift: 0 2px 4px rgb(11 16 32 / 0.05), 0 24px 48px -20px rgb(11 16 32 / 0.22);

    /* Rhythm */
    --fr-container: 1200px;
    --fr-section: clamp(64px, 9vw, 120px);
    --fr-section-tight: clamp(40px, 6vw, 72px);
    --fr-gap: clamp(16px, 2.2vw, 28px);
    --fr-pad-inline: clamp(16px, 4vw, 32px);
    --fr-header-height: 72px;
    --fr-tap: 44px;

    /* Motion */
    --fr-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --fr-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fr-stagger: 80ms;

    /* Type */
    --fr-font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fr-font-arabic: "Alexandria", "Noto Sans Arabic", ui-sans-serif, system-ui, "Segoe UI", Tahoma, sans-serif;
    --fr-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace;
    --fr-font: var(--fr-font-display);

    --fr-text-xs: 0.78rem;
    --fr-text-sm: 0.875rem;
    --fr-text-base: 1rem;
    --fr-text-lead: clamp(1.02rem, 0.98rem + 0.25vw, 1.18rem);
    --fr-h1: clamp(2.1rem, 1.45rem + 2.8vw, 3.6rem);
    --fr-h2: clamp(1.65rem, 1.3rem + 1.6vw, 2.5rem);
    --fr-h3: clamp(1.18rem, 1.06rem + 0.5vw, 1.45rem);
    --fr-h4: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
    --fr-tracking-tight: -0.02em;
    --fr-tracking-wide: 0.1em;
    --fr-leading: 1.7;

    /* Torn-receipt edge geometry (see .fr-torn) */
    --fr-torn-w: 24px;
    --fr-torn-h: 14px;

    color-scheme: light;
}

/* Wide-gamut brand blue where supported; the hex above stays the fallback. */
@supports (color: oklch(0.48 0.18 264)) {
    :root { --fr-blue: oklch(0.48 0.18 264); }
}

/* ------------------------------------------------------------ 2. Reset + base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--fr-header-height) + 16px);
}

body {
    margin: 0;
    background: var(--fr-white);
    color: var(--fr-body);
    font-family: var(--fr-font);
    font-size: var(--fr-text-base);
    font-weight: 400;
    line-height: var(--fr-leading);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em;
    color: var(--fr-ink);
    font-family: var(--fr-font);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: var(--fr-tracking-tight);
    text-wrap: balance;
}

h1 { font-size: var(--fr-h1); font-weight: 700; }
h2 { font-size: var(--fr-h2); font-weight: 700; }
h3 { font-size: var(--fr-h3); }
h4 { font-size: var(--fr-h4); }

p { margin: 0 0 1em; }
p:last-child { margin-block-end: 0; }

a {
    color: var(--fr-blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--fr-transition);
}
a:hover { color: var(--fr-deep); }

img, svg, video, iframe { max-width: 100%; }
img, svg, video { height: auto; }
img { display: block; }

ul, ol { margin-block: 0 1em; padding-inline-start: 1.2em; }
figure { margin: 0; }
hr { margin-block: 2em; border: 0; border-block-start: 1px solid var(--fr-rule); }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

::selection { background: var(--fr-blue); color: var(--fr-white); }

:focus-visible {
    outline: 3px solid var(--fr-ember-deep);
    outline-offset: 2px;
    border-radius: 3px;
}

.fr-dark :focus-visible,
.fr-footer :focus-visible,
.fr-hero__rail :focus-visible { outline-color: var(--fr-ember); }

/* --------------------------------------------------------- 3. Layout primitives */

.fr-container {
    width: 100%;
    max-width: var(--fr-container);
    margin-inline: auto;
    padding-inline: var(--fr-pad-inline);
}

.fr-container--narrow { max-width: 820px; }
.fr-container--wide { max-width: none; }

.fr-section { position: relative; padding-block: var(--fr-section); }
.fr-section--tight { padding-block: var(--fr-section-tight); }
.fr-section--paper { background: var(--fr-paper); }
.fr-section--surface { background: var(--fr-surface); }

.fr-section--dark,
.fr-dark {
    background: var(--fr-ink);
    color: var(--fr-on-dark-muted);
}

.fr-dark h1, .fr-dark h2, .fr-dark h3,
.fr-dark h4, .fr-dark h5, .fr-dark h6 { color: var(--fr-on-dark); }

/* Only plain prose links are re-coloured. Anything the theme has already
   styled — buttons above all — keeps its own foreground: an ember button needs
   ink text, and a blanket "a { color: white }" here would silently drop it to
   2.8:1. */
.fr-dark a:not([class*="fr-"]) { color: var(--fr-on-dark); }
.fr-dark .fr-eyebrow { color: var(--fr-ember); }
.fr-dark .fr-lead { color: var(--fr-on-dark-muted); }

.fr-section--gradient {
    background: linear-gradient(140deg, var(--fr-blue) 0%, var(--fr-deep) 62%, #0B3E8F 100%);
    color: #E7EEFF;
}
.fr-section--gradient h1, .fr-section--gradient h2, .fr-section--gradient h3,
.fr-section--gradient h4,
.fr-section--gradient a:not([class*="fr-"]) { color: var(--fr-white); }
.fr-section--gradient .fr-eyebrow { color: #FFD9C9; }
.fr-section--gradient .fr-lead { color: #E7EEFF; }

.fr-grid { display: grid; gap: var(--fr-gap); }
.fr-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fr-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
    .fr-cols-3, .fr-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .fr-cols-2, .fr-cols-3, .fr-cols-4 { grid-template-columns: minmax(0, 1fr); }
}

.fr-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.fr-skip {
    position: absolute;
    z-index: 200;
    inset-inline-start: 12px;
    inset-block-start: -140px;
    min-height: var(--fr-tap);
    padding: 12px 20px;
    border-radius: var(--fr-radius-sm);
    background: var(--fr-ink);
    color: var(--fr-white);
    font-weight: 600;
    text-decoration: none;
    transition: inset-block-start 150ms var(--fr-transition);
}
.fr-skip:focus { inset-block-start: 12px; color: var(--fr-white); }

.fr-main:focus { outline: none; }

/* ------------------------------------------------------------- 4. Type helpers */

.fr-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-block-end: 0.9em;
    color: var(--fr-ember-deep);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-xs);
    font-weight: 500;
    letter-spacing: var(--fr-tracking-wide);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.fr-eyebrow::before {
    content: "";
    flex: none;
    width: 18px;
    height: 1px;
    background: currentColor;
}

.fr-head { max-width: 62ch; margin-block-end: clamp(28px, 4vw, 52px); }
.fr-head--center { margin-inline: auto; text-align: center; }
.fr-head--center .fr-eyebrow::before { display: none; }
.fr-head > :last-child { margin-block-end: 0; }

.fr-lead {
    max-width: 62ch;
    color: var(--fr-body);
    font-size: var(--fr-text-lead);
}
.fr-head--center .fr-lead { margin-inline: auto; }

/* The mono face is the signature: order numbers, prices, figures, tables. */
.fr-num,
.fr-mono {
    font-family: var(--fr-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -0.01em;
}

.fr-prose { max-width: 72ch; }
.fr-prose--narrow { max-width: 58ch; }
.fr-prose--wide { max-width: 90ch; }
.fr-prose > :first-child { margin-block-start: 0; }
.fr-prose :is(h2, h3, h4) { margin-block-start: 1.6em; color: var(--fr-ink); }
.fr-prose img { border-radius: var(--fr-radius); }
.fr-prose ul, .fr-prose ol { padding-inline-start: 1.3em; }
.fr-prose li { margin-block-end: 0.4em; }
.fr-prose blockquote {
    margin-inline: 0;
    padding-inline-start: 1.1em;
    border-inline-start: 3px solid var(--fr-ember);
    color: var(--fr-ink);
}
.fr-prose table { width: 100%; font-size: var(--fr-text-sm); }
.fr-prose th, .fr-prose td { padding: 0.65em 0.85em; border: 1px solid var(--fr-rule); text-align: start; }
.fr-prose th { background: var(--fr-surface); color: var(--fr-ink); font-weight: 600; }
.fr-prose pre {
    overflow-x: auto;
    padding: 1em;
    border-radius: var(--fr-radius-sm);
    background: var(--fr-ink);
    color: var(--fr-on-dark);
}
.fr-prose code { font-family: var(--fr-font-mono); font-size: 0.92em; }

/* --------------------------------------------------- 5. Buttons, chips, cards */

.fr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 1.8em; }
.fr-actions--center { justify-content: center; }

.fr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: var(--fr-tap);
    padding-block: 12px;
    padding-inline: 22px;
    border: 1px solid transparent;
    border-radius: var(--fr-radius-sm);
    font-family: var(--fr-font);
    font-size: var(--fr-text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fr-transition), color var(--fr-transition),
                border-color var(--fr-transition), transform var(--fr-transition),
                box-shadow var(--fr-transition);
}

.fr-btn:hover { transform: translateY(-1px); }
.fr-btn:active { transform: translateY(0); }

.fr-btn--primary { background: var(--fr-blue); color: var(--fr-blue-ink); }
.fr-btn--primary:hover { background: var(--fr-deep); color: var(--fr-blue-ink); box-shadow: 0 10px 24px -14px rgb(2 92 202 / 0.9); }

/* Ember carries ink text — white on ember would fail AA. */
.fr-btn--accent { background: var(--fr-ember); color: var(--fr-ink); }
.fr-btn--accent:hover { background: #FF7F4F; color: var(--fr-ink); box-shadow: 0 10px 24px -14px rgb(255 107 53 / 0.95); }

.fr-btn--ghost { border-color: var(--fr-rule); background: var(--fr-white); color: var(--fr-ink); }
.fr-btn--ghost:hover { border-color: #C9D0DE; background: var(--fr-surface); color: var(--fr-ink); }

.fr-btn--on-dark { border-color: var(--fr-rule-dark); background: transparent; color: var(--fr-on-dark); }
.fr-btn--on-dark:hover { border-color: #3A4463; background: var(--fr-ink-2); color: var(--fr-on-dark); }

.fr-btn--block { width: 100%; }

.fr-card {
    position: relative;
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius);
    background: var(--fr-white);
    box-shadow: var(--fr-shadow-card);
}
.fr-card > :last-child { margin-block-end: 0; }
.fr-card h3 { margin-block-end: 0.4em; }

.fr-dark .fr-card {
    border-color: var(--fr-rule-dark);
    background: var(--fr-ink-2);
    box-shadow: none;
}

.fr-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 4px 10px;
    border-radius: var(--fr-radius-pill);
    background: var(--fr-blue-soft);
    color: var(--fr-blue);
    font-family: var(--fr-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fr-chip--ember { background: var(--fr-ember-soft); color: var(--fr-ember-deep); }
.fr-chip--ink { background: rgb(11 16 32 / 0.06); color: var(--fr-ink); }
.fr-dark .fr-chip { background: rgb(38 83 193 / 0.22); color: #A9C4FF; }
.fr-dark .fr-chip--ember { background: rgb(255 107 53 / 0.16); color: var(--fr-ember); }

.fr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--fr-blue-line);
    border-radius: var(--fr-radius-sm);
    background: var(--fr-blue-soft);
    color: var(--fr-blue);
}
.fr-icon svg { width: 22px; height: 22px; }
.fr-icon--ember { border-color: var(--fr-ember-line); background: var(--fr-ember-soft); color: var(--fr-ember-deep); }
.fr-icon--sm { width: 36px; height: 36px; border-radius: 7px; }
.fr-icon--sm svg { width: 18px; height: 18px; }
.fr-dark .fr-icon { border-color: var(--fr-rule-dark); background: rgb(38 83 193 / 0.2); color: #A9C4FF; }

/* Shown whenever a block carries no content yet. */
.fr-empty {
    padding: clamp(24px, 4vw, 44px);
    border: 1px dashed #C9D0DE;
    border-radius: var(--fr-radius);
    color: var(--fr-muted);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-sm);
    text-align: center;
}

.fr-media {
    overflow: hidden;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius);
    background: var(--fr-surface);
    box-shadow: var(--fr-shadow-card);
}
.fr-media img { width: 100%; }

/* Torn-receipt edge — punctuation, used exactly twice: the close of the hero
   and the close of the final (dark) CTA band. */
.fr-torn { padding-block-end: calc(var(--fr-section) + var(--fr-torn-h)); }

@supports (mask-image: conic-gradient(#000 0deg, #0000 90deg)) {
    .fr-torn {
        -webkit-mask:
            linear-gradient(#000 0 0) 50% 0 / 100% calc(100% - var(--fr-torn-h)) no-repeat,
            conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / var(--fr-torn-w) var(--fr-torn-h) repeat-x;
        mask:
            linear-gradient(#000 0 0) 50% 0 / 100% calc(100% - var(--fr-torn-h)) no-repeat,
            conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / var(--fr-torn-w) var(--fr-torn-h) repeat-x;
    }
}

/* ----------------------------------------------------------------- 6. Motion */

/* Scroll reveal. Elements stay visible without JS: the hidden state is only
   applied once theme.js has flagged the document. */
.fr-js .fr-reveal {
    opacity: 0;
    transform: translateY(14px);
}

.fr-js .fr-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 620ms var(--fr-ease-out), transform 620ms var(--fr-ease-out);
    transition-delay: calc(var(--fr-i, 0) * var(--fr-stagger));
}

@keyframes fr-ticket-in {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

@keyframes fr-queue-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes fr-draw {
    from { stroke-dashoffset: 200; }
    to   { stroke-dashoffset: 0; }
}

@keyframes fr-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- 7. Header */

.fr-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    border-block-end: 1px solid var(--fr-rule);
    background: rgb(255 255 255 / 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    transition: box-shadow var(--fr-transition), background-color var(--fr-transition);
}

.fr-header--static { position: relative; }

.fr-header.is-scrolled {
    background: rgb(255 255 255 / 0.96);
    box-shadow: 0 12px 30px -24px rgb(11 16 32 / 0.7);
}

.fr-header__bar {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.6vw, 22px);
    min-height: var(--fr-header-height);
}

.fr-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
    min-height: var(--fr-tap);
    color: var(--fr-ink);
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: var(--fr-tracking-tight);
    text-decoration: none;
}
.fr-brand:hover { color: var(--fr-ink); }
.fr-brand img { max-height: 36px; width: auto; }

.fr-brand__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--fr-blue);
    color: var(--fr-white);
    font-family: var(--fr-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
}

.fr-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.fr-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.fr-nav__item { position: relative; }

.fr-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--fr-tap);
    padding-inline: 12px;
    border-radius: var(--fr-radius-sm);
    color: var(--fr-ink);
    font-size: 0.925rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.fr-nav__link:hover { background: var(--fr-surface); color: var(--fr-blue); }
.fr-nav__link[aria-current="page"] { color: var(--fr-blue); }
.fr-nav__link[aria-current="page"]::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fr-ember);
}

.fr-nav__toggle {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-inline-start: -6px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--fr-muted);
    cursor: pointer;
}
.fr-nav__toggle:hover { background: var(--fr-surface); color: var(--fr-ink); }
.fr-nav__toggle svg { width: 14px; height: 14px; transition: transform var(--fr-transition); }
.fr-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.fr-nav__sub {
    position: absolute;
    z-index: 20;
    inset-block-start: calc(100% + 6px);
    inset-inline-start: 0;
    display: none;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius);
    background: var(--fr-white);
    box-shadow: var(--fr-shadow-lift);
    list-style: none;
}
.fr-nav__item:hover > .fr-nav__sub,
.fr-nav__item:focus-within > .fr-nav__sub,
.fr-nav__item.is-open > .fr-nav__sub { display: block; }

.fr-nav__sub .fr-nav__link {
    width: 100%;
    min-height: 40px;
    font-size: 0.9rem;
}

.fr-header__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.fr-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--fr-tap);
    height: var(--fr-tap);
    padding: 0;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius-sm);
    background: var(--fr-white);
    color: var(--fr-ink);
    cursor: pointer;
}
.fr-burger svg { width: 20px; height: 20px; }
.fr-burger__close { display: none; }
.fr-burger[aria-expanded="true"] .fr-burger__open { display: none; }
.fr-burger[aria-expanded="true"] .fr-burger__close { display: block; }

@media (max-width: 960px) {
    .fr-js .fr-nav--desktop { display: none; }
    .fr-js .fr-header__cta { display: none; }
    .fr-js .fr-burger { display: inline-flex; }

    /* Without JavaScript the panel can never open, so the real menu stays in
       the bar and wraps onto a second line instead of disappearing. */
    html:not(.fr-js) .fr-header__bar { flex-wrap: wrap; padding-block: 8px; }
    html:not(.fr-js) .fr-nav { margin-inline-start: 0; width: 100%; order: 3; }
    html:not(.fr-js) .fr-nav__list { flex-wrap: wrap; }
    html:not(.fr-js) .fr-header__actions { margin-inline-start: auto; }
    html:not(.fr-js) .fr-burger { display: none; }

    /* The header's language dropdown is absolutely positioned and 190px wide.
       Once the bar is narrow it no longer fits beside the burger: measured on a
       390px viewport it escaped the viewport by 6px in LTR and 21px in RTL,
       taking the page's scrollWidth past its clientWidth. That horizontal
       overflow is what made the whole page shift and parts of the menu sit
       off-screen — the panel markup was never the problem.

       Hiding it here loses nothing: the mobile panel already lists every
       language as a flat, full-width list (see partials/language-switcher.blade.php,
       style="mobile"), which is both reachable and a proper tap target. This
       mirrors what the theme already does with .fr-header__cta directly above. */
    .fr-js .fr-lang { display: none; }
}

/* Language switcher — a native <details> so it works without JavaScript. */
.fr-lang { position: relative; }

.fr-lang__summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--fr-tap);
    padding-inline: 12px;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius-sm);
    background: var(--fr-white);
    color: var(--fr-ink);
    font-family: var(--fr-font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}
.fr-lang__summary::-webkit-details-marker { display: none; }
.fr-lang__summary:hover { background: var(--fr-surface); }
.fr-lang__summary svg { width: 13px; height: 13px; color: var(--fr-muted); transition: transform var(--fr-transition); }
.fr-lang[open] > .fr-lang__summary svg { transform: rotate(180deg); }

.fr-lang__list {
    position: absolute;
    z-index: 30;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius);
    background: var(--fr-white);
    box-shadow: var(--fr-shadow-lift);
    list-style: none;
}

.fr-lang__link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding-inline: 10px;
    border-radius: var(--fr-radius-sm);
    color: var(--fr-ink);
    font-size: 0.9rem;
    text-decoration: none;
}
.fr-lang__link:hover { background: var(--fr-surface); color: var(--fr-ink); }
.fr-lang__link[aria-current="true"] { background: var(--fr-blue-soft); color: var(--fr-blue); }
.fr-lang__code {
    margin-inline-start: auto;
    color: var(--fr-muted);
    font-family: var(--fr-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
}

/* Mobile panel */
.fr-mobile {
    position: fixed;
    z-index: 150;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--fr-white);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.fr-mobile[hidden] { display: none; }

.fr-mobile__head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--fr-header-height);
    padding-inline: var(--fr-pad-inline);
    border-block-end: 1px solid var(--fr-rule);
}
.fr-mobile__head .fr-burger { display: inline-flex; margin-inline-start: auto; }

.fr-mobile__body { padding: 20px var(--fr-pad-inline) 40px; }

.fr-mobile__list { margin: 0 0 20px; padding: 0; list-style: none; }
.fr-mobile__list .fr-mobile__list { margin: 0 0 0 0; padding-inline-start: 14px; border-inline-start: 1px solid var(--fr-rule); }

.fr-mobile__link {
    display: flex;
    align-items: center;
    min-height: var(--fr-tap);
    padding-block: 8px;
    border-block-end: 1px solid var(--fr-rule);
    color: var(--fr-ink);
    font-size: 1.02rem;
    font-weight: 500;
    text-decoration: none;
}
.fr-mobile__link:hover { color: var(--fr-blue); }
.fr-mobile__list .fr-mobile__list .fr-mobile__link { font-size: 0.94rem; font-weight: 400; color: var(--fr-body); }

.fr-mobile__foot { display: grid; gap: 10px; margin-block-start: 20px; }

body.fr-lock { overflow: hidden; }

/* ----------------------------------------------------------------- 8. Footer */

.fr-footer {
    background: var(--fr-ink);
    color: var(--fr-on-dark-muted);
}

.fr-footer__top {
    display: grid;
    gap: clamp(28px, 4vw, 56px);
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    padding-block: clamp(48px, 6vw, 80px);
}

@media (max-width: 900px) {
    .fr-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fr-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .fr-footer__top { grid-template-columns: minmax(0, 1fr); }

    /* A CTA pair sitting side by side is wider than a phone: measured 403px of
       buttons inside a 374px column, overflowing the page by 29px. The row
       already wraps, but a flex item's default min-width:auto refuses to shrink
       below its content, so the second button pushed straight past the edge.
       Letting them shrink and go full width keeps the page from scrolling
       sideways — and full-width CTAs are the better phone target anyway. */
    .fr-actions { max-width: 100%; }

    .fr-actions .fr-btn {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 100%;
    }
}

.fr-footer .fr-brand { color: var(--fr-on-dark); }
.fr-footer .fr-brand:hover { color: var(--fr-on-dark); }
.fr-footer__about { margin-block-start: 16px; max-width: 40ch; font-size: 0.94rem; }

.fr-footer__title {
    margin-block-end: 14px;
    color: var(--fr-on-dark);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-xs);
    font-weight: 500;
    letter-spacing: var(--fr-tracking-wide);
    text-transform: uppercase;
}

.fr-footer__list { margin: 0; padding: 0; list-style: none; }
.fr-footer__list li + li { margin-block-start: 2px; }

.fr-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    color: var(--fr-on-dark-muted);
    font-size: 0.94rem;
    text-decoration: none;
}
.fr-footer__link:hover { color: var(--fr-on-dark); text-decoration: underline; }
.fr-footer__link svg { width: 16px; height: 16px; flex: none; opacity: 0.8; }

.fr-footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 22px;
    border-block-start: 1px solid var(--fr-rule-dark);
    font-size: var(--fr-text-sm);
}
.fr-footer__bar p { margin: 0; }
.fr-footer__stamp {
    color: var(--fr-on-dark-muted);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-xs);
    letter-spacing: 0.06em;
}

/* ----------------------------------------------------------------- 9. Blocks */

/* --- hero + the order rail (the signature element) ----------------------- */

.fr-hero {
    position: relative;
    padding-block: clamp(52px, 7vw, 96px);
    background:
        radial-gradient(120% 90% at 100% 0%, rgb(38 83 193 / 0.08) 0%, rgb(38 83 193 / 0) 55%),
        radial-gradient(90% 70% at 0% 10%, rgb(255 107 53 / 0.07) 0%, rgb(255 107 53 / 0) 50%),
        var(--fr-paper);
}

.fr-hero--dark {
    background:
        radial-gradient(120% 90% at 100% 0%, rgb(38 83 193 / 0.35) 0%, rgb(11 16 32 / 0) 55%),
        var(--fr-ink);
    color: var(--fr-on-dark-muted);
}

.fr-hero--gradient {
    background: linear-gradient(140deg, var(--fr-blue) 0%, var(--fr-deep) 60%, #0B3E8F 100%);
    color: #E7EEFF;
}
.fr-hero--gradient h1, .fr-hero--gradient .fr-hero__title { color: var(--fr-white); }
.fr-hero--gradient .fr-lead { color: #E7EEFF; }
.fr-hero--gradient .fr-eyebrow { color: #FFD9C9; }

.fr-hero__inner { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.fr-hero--split .fr-hero__inner { grid-template-columns: minmax(0, 1fr); }

/* The rail is the point of the hero, so it gets the wider half — wide enough
   for the tickets to converge sideways rather than stack. */
@media (min-width: 1040px) {
    .fr-hero--split .fr-hero__inner { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
}

.fr-hero--center .fr-hero__copy { max-width: 46rem; margin-inline: auto; text-align: center; }
.fr-hero--center .fr-hero__copy .fr-lead { margin-inline: auto; }
.fr-hero--center .fr-eyebrow::before { display: none; }
.fr-hero--center .fr-actions { justify-content: center; }
.fr-hero--center .fr-hero__trust { justify-content: center; }

.fr-hero__title { margin-block-end: 0.35em; }
.fr-hero__copy .fr-lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); }

.fr-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    color: var(--fr-body);
    font-size: var(--fr-text-sm);
}
.fr-hero--dark .fr-hero__trust, .fr-hero--gradient .fr-hero__trust { color: inherit; }
.fr-hero__trust li { display: flex; align-items: center; gap: 8px; }
.fr-hero__trust svg { width: 16px; height: 16px; flex: none; color: var(--fr-ember-deep); }
.fr-hero--dark .fr-hero__trust svg, .fr-hero--gradient .fr-hero__trust svg { color: var(--fr-ember); }

.fr-hero__media { margin: 0; }

/* The rail itself. Container queries so it reflows to its own width, not the
   viewport's — it is reused inside narrow and wide hero layouts alike. */
.fr-hero__rail { container-type: inline-size; }

.fr-rail {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.fr-rail__channels { display: grid; gap: 12px; }

.fr-ticket {
    --fr-ticket-accent: var(--fr-blue);
    position: relative;
    padding: 14px 16px 12px;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius-sm);
    background: var(--fr-paper);
    box-shadow: var(--fr-shadow-card);
}

/* Perforated top edge: the ticket has been torn off the printer. */
.fr-ticket::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: -1px;
    height: 3px;
    border-start-start-radius: var(--fr-radius-sm);
    border-start-end-radius: var(--fr-radius-sm);
    background: var(--fr-ticket-accent);
}

.fr-ticket--kiosk { --fr-ticket-accent: var(--fr-ember); }
.fr-ticket--online { --fr-ticket-accent: var(--fr-deep); }

.fr-ticket__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-block-end: 8px;
    border-block-end: 1px dashed #D6D2C6;
}

.fr-ticket__channel {
    color: var(--fr-muted);
    font-family: var(--fr-font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.fr-ticket__num {
    color: var(--fr-ticket-accent);
    font-family: var(--fr-font-mono);
    font-size: 1.02rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.fr-ticket__lines { margin: 8px 0 0; padding: 0; list-style: none; }
.fr-ticket__lines li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--fr-body);
    font-size: 0.82rem;
    line-height: 1.9;
}
.fr-ticket__lines span:last-child {
    color: var(--fr-ink);
    font-family: var(--fr-font-mono);
    font-variant-numeric: tabular-nums;
}

.fr-ticket__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-block-start: 8px;
    padding-block-start: 8px;
    border-block-start: 1px dashed #D6D2C6;
    color: var(--fr-ink);
    font-size: 0.78rem;
    font-weight: 600;
}
.fr-ticket__total { font-family: var(--fr-font-mono); font-variant-numeric: tabular-nums; }
.fr-ticket__meta { color: var(--fr-muted); font-weight: 500; }

.fr-rail__link { position: relative; display: grid; place-items: center; min-height: 44px; }
.fr-rail__wires { display: none; width: 100%; height: 100%; }
.fr-rail__wires path { fill: none; stroke: #C6CEDE; stroke-width: 1.5; stroke-linecap: round; }
.fr-rail__wires circle { fill: var(--fr-ember); }

/* Narrow-container fallback for the converging wires: the three channels merge
   downwards into the queue instead of sideways. */
.fr-rail__merge { display: block; width: min(210px, 70%); height: 44px; color: #BFC8DA; }
.fr-rail__merge svg { width: 100%; height: 100%; }
.fr-rail__merge path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.fr-rail__merge circle { fill: var(--fr-ember); stroke: none; }

.fr-rail__queue {
    padding: 16px;
    border: 1px solid var(--fr-rule-dark);
    border-radius: var(--fr-radius);
    background: var(--fr-ink);
    color: var(--fr-on-dark-muted);
    box-shadow: var(--fr-shadow-lift);
}

.fr-rail__queue-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-block-end: 12px;
    border-block-end: 1px solid var(--fr-rule-dark);
}
.fr-rail__queue-title {
    color: var(--fr-on-dark);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: var(--fr-tracking-tight);
}
.fr-rail__queue-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: auto;
    color: var(--fr-ember);
    font-family: var(--fr-font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.fr-rail__queue-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.fr-rail__queue-list { margin: 0; padding: 0; list-style: none; }

.fr-rail__row {
    display: grid;
    gap: 4px 12px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding-block: 11px;
    border-block-end: 1px solid rgb(255 255 255 / 0.06);
}
.fr-rail__row:last-child { border-block-end: 0; padding-block-end: 2px; }

.fr-rail__row-num {
    color: #A9C4FF;
    font-family: var(--fr-font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.fr-rail__row--kiosk .fr-rail__row-num { color: var(--fr-ember); }
.fr-rail__row--online .fr-rail__row-num { color: #7FD0FF; }

.fr-rail__row-label { color: var(--fr-on-dark-muted); font-size: 0.82rem; }

.fr-rail__status {
    justify-self: end;
    padding: 3px 9px;
    border-radius: var(--fr-radius-pill);
    background: rgb(255 255 255 / 0.08);
    color: var(--fr-on-dark);
    font-family: var(--fr-font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fr-rail__status--ready { background: rgb(255 107 53 / 0.18); color: #FFB08C; }
.fr-rail__status--new { background: rgb(38 83 193 / 0.28); color: #A9C4FF; }

.fr-rail__screen {
    margin-block-start: 14px;
    overflow: hidden;
    border: 1px solid var(--fr-rule-dark);
    border-radius: var(--fr-radius-sm);
    background: var(--fr-ink-2);
}
.fr-rail__screen img { width: 100%; }

.fr-rail__foot {
    margin-block-start: 12px;
    padding-block-start: 12px;
    border-block-start: 1px dashed var(--fr-rule-dark);
    color: var(--fr-on-dark-muted);
    font-family: var(--fr-font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Sideways convergence as soon as the rail's own box can carry it — a container
   query, because the rail is reused inside a narrow split hero and a full-width
   centred one. Below this it merges downwards instead. */
@container (min-width: 600px) {
    .fr-rail {
        gap: 0;
        grid-template-columns: minmax(0, 1fr) clamp(56px, 8cqi, 92px) minmax(0, 1.04fr);
    }
    .fr-rail__channels { gap: 14px; }
    .fr-ticket--kiosk { margin-inline-start: clamp(12px, 3cqi, 30px); }
    .fr-rail__wires { display: block; height: 100%; min-height: 260px; }
    .fr-rail__merge { display: none; }
    .fr-rail__link { align-self: stretch; }
}

/* Entrance timeline: tickets slide into the rail on an ~80ms stagger, the
   wires draw, the queue lands last. Runs once, never loops. */
.fr-js .fr-rail:not(.is-ready) .fr-ticket,
.fr-js .fr-rail:not(.is-ready) .fr-rail__queue,
.fr-js .fr-rail:not(.is-ready) .fr-rail__link { opacity: 0; }

.fr-rail.is-ready .fr-ticket {
    animation: fr-ticket-in 560ms var(--fr-ease-out) both;
    animation-delay: calc(var(--fr-i, 0) * var(--fr-stagger));
}
.fr-rail.is-ready .fr-rail__link {
    animation: fr-fade-up 500ms var(--fr-ease-out) both;
    animation-delay: calc(3 * var(--fr-stagger));
}
.fr-rail.is-ready .fr-rail__wires path {
    stroke-dasharray: 240;
    animation: fr-draw 900ms var(--fr-ease-out) both;
    animation-delay: calc(3 * var(--fr-stagger));
}
.fr-rail.is-ready .fr-rail__queue {
    animation: fr-queue-in 620ms var(--fr-ease-out) both;
    animation-delay: calc(4 * var(--fr-stagger));
}
.fr-rail.is-ready .fr-rail__row {
    animation: fr-queue-in 460ms var(--fr-ease-out) both;
    animation-delay: calc((5 + var(--fr-i, 0)) * var(--fr-stagger));
}

.fr-js .fr-hero:not(.is-ready) .fr-hero__copy > * { opacity: 0; }
.fr-hero.is-ready .fr-hero__copy > * {
    animation: fr-fade-up 620ms var(--fr-ease-out) both;
    animation-delay: calc(var(--fr-i, 0) * var(--fr-stagger));
}

/* --- logo strip ---------------------------------------------------------- */

.fr-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 56px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.fr-logos__item { display: flex; align-items: center; }
.fr-logos__item img {
    max-height: 34px;
    width: auto;
    opacity: 0.62;
    filter: grayscale(1);
    transition: opacity var(--fr-transition), filter var(--fr-transition);
}
.fr-logos__item a { display: flex; min-height: var(--fr-tap); align-items: center; }
.fr-logos__item:hover img { opacity: 1; filter: none; }
.fr-logos__label {
    color: var(--fr-muted);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-sm);
}

.fr-strip__heading {
    margin-block-end: clamp(20px, 3vw, 32px);
    color: var(--fr-muted);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-xs);
    font-weight: 500;
    letter-spacing: var(--fr-tracking-wide);
    text-align: center;
    text-transform: uppercase;
}

/* --- features grid ------------------------------------------------------- */

.fr-feature { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.fr-feature__title { margin: 0; font-size: var(--fr-h4); font-weight: 600; }
.fr-feature p { color: var(--fr-body); font-size: 0.95rem; }
.fr-feature__index {
    color: var(--fr-muted);
    font-family: var(--fr-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}

/* --- feature split ------------------------------------------------------- */

.fr-split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }

@media (min-width: 900px) {
    .fr-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fr-split--start .fr-split__media { order: -1; }
    /* No image: one column, and the copy keeps a comfortable measure. */
    .fr-split--solo { grid-template-columns: minmax(0, 1fr); }
    .fr-split--solo .fr-split__body { max-width: 68ch; }
    .fr-split--solo .fr-bullets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fr-split__body > :last-child { margin-block-end: 0; }
.fr-split__title { margin-block-end: 0.4em; }

.fr-bullets { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fr-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--fr-ink);
    font-size: 0.96rem;
    font-weight: 500;
}
.fr-bullets svg { width: 20px; height: 20px; flex: none; margin-block-start: 2px; color: var(--fr-blue); }
.fr-dark .fr-bullets li { color: var(--fr-on-dark); }
.fr-dark .fr-bullets svg { color: var(--fr-ember); }

.fr-split__media { margin: 0; }

/* --- stats: read as a receipt totals block ------------------------------- */

.fr-stats {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius);
    background: var(--fr-paper);
    overflow: hidden;
}

.fr-stat {
    padding: clamp(22px, 3vw, 34px) clamp(18px, 2.4vw, 28px);
    border-inline-end: 1px dashed #D6D2C6;
}
.fr-stat:last-child { border-inline-end: 0; }

@media (max-width: 760px) {
    .fr-stat { border-inline-end: 0; border-block-end: 1px dashed #D6D2C6; }
    .fr-stat:last-child { border-block-end: 0; }
}

.fr-stat__value {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: var(--fr-ink);
    font-family: var(--fr-font-mono);
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.fr-stat__suffix { color: var(--fr-ember-deep); font-size: 0.62em; font-weight: 500; }
.fr-stat__label {
    margin-block-start: 10px;
    color: var(--fr-muted);
    font-size: 0.88rem;
}
.fr-dark .fr-stats { border-color: var(--fr-rule-dark); background: var(--fr-ink-2); }
.fr-dark .fr-stat { border-color: var(--fr-rule-dark); }
.fr-dark .fr-stat__value { color: var(--fr-on-dark); }
.fr-dark .fr-stat__suffix { color: var(--fr-ember); }

/* --- steps: a genuine sequence, so the numbering is earned --------------- */

.fr-steps {
    display: grid;
    gap: clamp(24px, 3vw, 32px);
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    counter-reset: fr-step;
}

.fr-step {
    position: relative;
    padding-block-start: 30px;
    border-block-start: 2px solid var(--fr-rule);
}

.fr-step__num {
    position: absolute;
    inset-block-start: -16px;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--fr-white);
    border-radius: 50%;
    background: var(--fr-blue);
    color: var(--fr-white);
    font-family: var(--fr-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The last step is the payoff — stamp it in the kiosk accent. */
.fr-step:last-child .fr-step__num { background: var(--fr-ember); color: var(--fr-ink); }

.fr-step__title { margin-block-end: 0.4em; font-size: var(--fr-h4); }
.fr-step p { color: var(--fr-body); font-size: 0.95rem; margin: 0; }

.fr-section--paper .fr-step__num, .fr-section--surface .fr-step__num { border-color: var(--fr-paper); }
.fr-dark .fr-step { border-color: var(--fr-rule-dark); }
.fr-dark .fr-step__num { border-color: var(--fr-ink); }

/* --- pricing ------------------------------------------------------------- */

.fr-plans {
    display: grid;
    gap: clamp(18px, 2.4vw, 26px);
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    align-items: start;
}

.fr-plan { display: flex; flex-direction: column; height: 100%; }
.fr-plan--featured {
    border-color: var(--fr-ember-line);
    box-shadow: var(--fr-shadow-lift);
}
.fr-plan__badge {
    position: absolute;
    inset-block-start: -12px;
    inset-inline-start: clamp(20px, 2.4vw, 28px);
}
.fr-plan__name { margin-block-end: 6px; font-size: var(--fr-h4); }
.fr-plan__desc { color: var(--fr-muted); font-size: 0.9rem; }

.fr-plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-block: 18px 4px;
    color: var(--fr-ink);
    font-family: var(--fr-font-mono);
    font-variant-numeric: tabular-nums;
}
.fr-plan__amount { font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem); font-weight: 600; letter-spacing: -0.03em; }
.fr-plan__currency { font-size: 1rem; font-weight: 500; color: var(--fr-muted); }
.fr-plan__period { color: var(--fr-muted); font-size: 0.82rem; }

.fr-plan__features { margin: 20px 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; }
.fr-plan__features li { display: flex; align-items: flex-start; gap: 9px; font-size: 0.92rem; color: var(--fr-body); }
.fr-plan__features svg { width: 18px; height: 18px; flex: none; margin-block-start: 3px; color: var(--fr-blue); }
.fr-plan--featured .fr-plan__features svg { color: var(--fr-ember-deep); }
.fr-plan__cta { margin-block-start: auto; }

/* --- FAQ ----------------------------------------------------------------- */

.fr-faq { max-width: 820px; margin-inline: auto; border-block-start: 1px solid var(--fr-rule); }

.fr-faq__item { border-block-end: 1px solid var(--fr-rule); }

.fr-faq__q {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: var(--fr-tap);
    padding-block: 18px;
    color: var(--fr-ink);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: var(--fr-tracking-tight);
    cursor: pointer;
    list-style: none;
}
.fr-faq__q::-webkit-details-marker { display: none; }
.fr-faq__q:hover { color: var(--fr-blue); }

.fr-faq__sign {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    margin-inline-start: auto;
    color: var(--fr-muted);
}
.fr-faq__sign::before,
.fr-faq__sign::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--fr-transition), opacity var(--fr-transition);
}
.fr-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.fr-faq__item[open] .fr-faq__sign { color: var(--fr-ember-deep); }
.fr-faq__item[open] .fr-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.fr-faq__a { padding-block-end: 22px; color: var(--fr-body); max-width: 68ch; }
.fr-faq__a p:last-child { margin-block-end: 0; }

.fr-dark .fr-faq, .fr-dark .fr-faq__item { border-color: var(--fr-rule-dark); }
.fr-dark .fr-faq__q { color: var(--fr-on-dark); }

/* --- testimonials -------------------------------------------------------- */

.fr-quote { display: flex; flex-direction: column; gap: 18px; height: 100%; }
.fr-quote__stars { display: flex; gap: 2px; color: var(--fr-ember); }
.fr-quote__stars svg { width: 16px; height: 16px; }
.fr-quote blockquote { margin: 0; color: var(--fr-ink); font-size: 1rem; line-height: 1.65; }
.fr-dark .fr-quote blockquote { color: var(--fr-on-dark); }

.fr-quote__by { display: flex; align-items: center; gap: 12px; margin-block-start: auto; padding-block-start: 4px; }
.fr-quote__avatar {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--fr-surface);
}
.fr-quote__avatar--initial {
    display: grid;
    place-items: center;
    background: var(--fr-blue-soft);
    color: var(--fr-blue);
    font-family: var(--fr-font-mono);
    font-size: 0.85rem;
    font-weight: 600;
}
.fr-quote__name { color: var(--fr-ink); font-size: 0.94rem; font-weight: 600; }
.fr-dark .fr-quote__name { color: var(--fr-on-dark); }
.fr-quote__role { color: var(--fr-muted); font-size: 0.82rem; }

/* --- CTA banner ---------------------------------------------------------- */

.fr-cta { position: relative; }
.fr-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(22px, 4vw, 48px);
}
.fr-cta__body { max-width: 60ch; }
.fr-cta__body > :last-child { margin-block-end: 0; }
.fr-cta__title { margin-block-end: 0.35em; }
.fr-cta .fr-actions { margin-block-start: 0; flex: none; }

.fr-cta--solid {
    background: linear-gradient(135deg, var(--fr-blue) 0%, var(--fr-deep) 100%);
    color: #E7EEFF;
}
.fr-cta--solid .fr-cta__title { color: var(--fr-white); }
/* .fr-lead carries its own colour, so it has to be restated on a dark band —
   inheriting from the section is not enough. */
.fr-cta--solid .fr-lead { color: #E7EEFF; }

.fr-cta--soft {
    background: var(--fr-blue-soft);
    color: var(--fr-body);
}
.fr-cta--soft .fr-cta__title { color: var(--fr-ink); }

.fr-cta--dark { background: var(--fr-ink); color: var(--fr-on-dark-muted); }
.fr-cta--dark .fr-cta__title { color: var(--fr-on-dark); }
.fr-cta--dark .fr-lead { color: var(--fr-on-dark-muted); }

/* CTA banner — optional background image, gradient, and side image */
.fr-cta--bgimage { position: relative; overflow: hidden; color: #F4F7FF; }
.fr-cta--bgimage .fr-cta__title { color: var(--fr-white); }
.fr-cta--bgimage .fr-lead { color: #E7EEFF; }
.fr-cta__backdrop { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.fr-cta__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 13, 19, 0.35), rgba(11, 13, 19, 0.72));
}
.fr-cta--bgimage > * { position: relative; z-index: 1; }

.fr-cta--split .fr-cta__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); justify-content: initial; }
.fr-cta--image-start .fr-cta__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.fr-cta--image-start .fr-cta__media { order: -1; }
.fr-cta--split .fr-cta__content { min-width: 0; }
.fr-cta--split .fr-cta__media img { display: block; width: 100%; max-height: 26rem; object-fit: cover; border-radius: var(--fr-radius-lg, 16px); }
@media (max-width: 900px) {
    .fr-cta--split .fr-cta__inner,
    .fr-cta--image-start .fr-cta__inner { grid-template-columns: 1fr; }
    .fr-cta--image-start .fr-cta__media { order: 0; }
}

.fr-cta--grad-primary { background: linear-gradient(135deg, #152E5C, #2563eb) !important; }
.fr-cta--grad-sunset { background: linear-gradient(135deg, #7c2d12, #e11d48 55%, #f59e0b) !important; }
.fr-cta--grad-ocean { background: linear-gradient(135deg, #0c4a6e, #0369a1 55%, #22d3ee) !important; }
.fr-cta--grad-primary,
.fr-cta--grad-sunset,
.fr-cta--grad-ocean { color: #F4F7FF; }
.fr-cta--grad-primary .fr-cta__title,
.fr-cta--grad-sunset .fr-cta__title,
.fr-cta--grad-ocean .fr-cta__title { color: var(--fr-white); }
.fr-cta--grad-primary .fr-lead,
.fr-cta--grad-sunset .fr-lead,
.fr-cta--grad-ocean .fr-lead { color: #E7EEFF; }

/* --- comparison table ---------------------------------------------------- */

.fr-compare { position: relative; }

.fr-compare__hint {
    display: none;
    align-items: center;
    gap: 8px;
    margin-block-end: 10px;
    color: var(--fr-muted);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fr-compare__hint svg { width: 15px; height: 15px; }
.fr-compare.is-overflowing .fr-compare__hint { display: flex; }

.fr-compare__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius);
    background: var(--fr-white);
}

.fr-compare__scroll {
    overflow-x: auto;
    scrollbar-color: #C6CEDE transparent;
}
.fr-compare__scroll:focus-visible { outline-offset: -3px; }

/* Fade affordance on the scrollable edge — hidden once the end is reached. */
.fr-compare.is-overflowing .fr-compare__frame::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 48px;
    background: linear-gradient(var(--fr-fade-dir, to left), rgb(255 255 255 / 0.97), rgb(255 255 255 / 0));
    pointer-events: none;
}
.fr-compare.is-at-end .fr-compare__frame::after { display: none; }

.fr-compare table {
    width: 100%;
    min-width: 620px;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--fr-font-mono);
    font-size: 0.84rem;
    font-variant-numeric: tabular-nums;
}

.fr-compare caption {
    padding: 14px 16px;
    border-block-end: 1px solid var(--fr-rule);
    color: var(--fr-muted);
    font-size: var(--fr-text-xs);
    letter-spacing: 0.08em;
    text-align: start;
    text-transform: uppercase;
}

.fr-compare th,
.fr-compare td {
    padding: 13px 16px;
    border-block-end: 1px solid var(--fr-rule);
    text-align: start;
    vertical-align: middle;
}

.fr-compare thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    background: var(--fr-surface);
    color: var(--fr-ink);
    font-size: var(--fr-text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fr-compare thead th.is-highlight { background: var(--fr-blue-soft); color: var(--fr-blue); }
.fr-compare td.is-highlight { background: rgb(237 242 254 / 0.55); color: var(--fr-ink); font-weight: 500; }

/* The row label column stays put while the values scroll. */
.fr-compare th[scope="row"],
.fr-compare thead th:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    min-width: 190px;
    border-inline-end: 1px solid var(--fr-rule);
    background: var(--fr-white);
    color: var(--fr-ink);
    font-family: var(--fr-font);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
}
.fr-compare thead th:first-child { z-index: 3; background: var(--fr-surface); }

.fr-compare tbody tr:last-child th,
.fr-compare tbody tr:last-child td { border-block-end: 0; }
.fr-compare tbody tr:hover td { background: rgb(245 245 245 / 0.6); }

.fr-compare__yes { color: var(--fr-blue); font-weight: 600; }
.fr-compare__no { color: var(--fr-muted); }

@media (max-width: 640px) {
    .fr-compare th[scope="row"], .fr-compare thead th:first-child { min-width: 150px; }
}

/* --- gallery ------------------------------------------------------------- */

.fr-gallery figure { margin: 0; }
.fr-gallery__figure { overflow: hidden; border: 1px solid var(--fr-rule); border-radius: var(--fr-radius); background: var(--fr-surface); }
.fr-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fr-gallery figcaption { margin-block-start: 10px; color: var(--fr-muted); font-size: var(--fr-text-sm); }

/* --- video --------------------------------------------------------------- */

.fr-video { max-width: 900px; margin-inline: auto; }
.fr-video__frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius);
    background: var(--fr-ink);
    box-shadow: var(--fr-shadow-lift);
}
.fr-video__frame iframe,
.fr-video__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.fr-video figcaption { margin-block-start: 12px; color: var(--fr-muted); font-size: var(--fr-text-sm); text-align: center; }

/* --- team ---------------------------------------------------------------- */

.fr-member { text-align: start; }
.fr-member__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-block-end: 16px;
    border-radius: var(--fr-radius);
    object-fit: cover;
    background: var(--fr-surface);
}
.fr-member__photo--placeholder {
    display: grid;
    place-items: center;
    color: var(--fr-muted);
    font-family: var(--fr-font-mono);
    font-size: 1.4rem;
}
.fr-member__name { margin-block-end: 2px; font-size: var(--fr-h4); }
.fr-member__role { color: var(--fr-ember-deep); font-family: var(--fr-font-mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
.fr-member__bio { margin-block-start: 12px; color: var(--fr-body); font-size: 0.92rem; }
.fr-member__link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--fr-tap); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.fr-member__link svg { width: 15px; height: 15px; }

/* --- contact form -------------------------------------------------------- */

.fr-contact { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }

@media (min-width: 940px) {
    .fr-contact { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.fr-contact__details { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.fr-contact__detail { display: flex; align-items: center; gap: 12px; }
.fr-contact__detail-label { display: block; color: var(--fr-muted); font-family: var(--fr-font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.fr-contact__detail-value { color: var(--fr-ink); font-size: 0.96rem; font-weight: 500; text-decoration: none; }
a.fr-contact__detail-value:hover { color: var(--fr-blue); }
.fr-dark .fr-contact__detail-value { color: var(--fr-on-dark); }

.fr-form { display: grid; gap: 16px; }
.fr-form__row { display: grid; gap: 16px; }
@media (min-width: 620px) { .fr-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fr-field { display: grid; gap: 7px; }
.fr-label { color: var(--fr-ink); font-size: 0.86rem; font-weight: 600; }
.fr-label__req { color: var(--fr-ember-deep); }
.fr-dark .fr-label { color: var(--fr-on-dark); }

.fr-input,
.fr-textarea {
    width: 100%;
    min-height: var(--fr-tap);
    padding: 12px 14px;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius-sm);
    background: var(--fr-white);
    color: var(--fr-ink);
    font-size: 0.95rem;
    transition: border-color var(--fr-transition), box-shadow var(--fr-transition);
}
.fr-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.fr-input::placeholder, .fr-textarea::placeholder { color: #98A0B3; }
.fr-input:hover, .fr-textarea:hover { border-color: #C9D0DE; }
.fr-input:focus, .fr-textarea:focus {
    outline: none;
    border-color: var(--fr-blue);
    box-shadow: 0 0 0 3px rgb(38 83 193 / 0.16);
}
.fr-input:focus-visible, .fr-textarea:focus-visible { outline: 3px solid var(--fr-ember-deep); outline-offset: 1px; }
.fr-input[aria-invalid="true"], .fr-textarea[aria-invalid="true"] { border-color: #B42318; }

.fr-error { color: #B42318; font-size: var(--fr-text-sm); }

.fr-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.fr-note { color: var(--fr-muted); font-size: var(--fr-text-sm); }

.fr-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--fr-rule);
    border-inline-start: 3px solid var(--fr-blue);
    border-radius: var(--fr-radius-sm);
    background: var(--fr-blue-soft);
    color: var(--fr-ink);
    font-size: 0.94rem;
}
.fr-alert svg { width: 20px; height: 20px; flex: none; color: var(--fr-blue); }
.fr-alert--error { border-inline-start-color: #B42318; background: #FEF3F2; }
.fr-alert--error svg { color: #B42318; }

/* --- spacer / html ------------------------------------------------------- */

.fr-spacer { display: block; }
.fr-spacer--sm { height: clamp(20px, 3vw, 32px); }
.fr-spacer--md { height: clamp(36px, 5vw, 56px); }
.fr-spacer--lg { height: clamp(56px, 8vw, 88px); }
.fr-spacer--xl { height: clamp(80px, 11vw, 128px); }

.fr-html > :first-child { margin-block-start: 0; }
.fr-html > :last-child { margin-block-end: 0; }

/* -------------------------------------------------------------- 10. Templates */

.fr-page-head {
    padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 44px);
    background:
        radial-gradient(90% 120% at 100% 0%, rgb(38 83 193 / 0.07), rgb(38 83 193 / 0) 60%),
        var(--fr-paper);
    border-block-end: 1px solid var(--fr-rule);
}
.fr-page-head__inner { max-width: 62ch; }
.fr-page-head--center .fr-page-head__inner { margin-inline: auto; text-align: center; }
.fr-page-head h1 { margin-block-end: 0.3em; }

.fr-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    color: var(--fr-muted);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fr-breadcrumb a { color: var(--fr-muted); text-decoration: none; }
.fr-breadcrumb a:hover { color: var(--fr-blue); }
.fr-breadcrumb li + li::before { content: "/"; margin-inline-end: 8px; color: #C6CEDE; }

.fr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    color: var(--fr-muted);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.fr-meta__dot { width: 4px; height: 4px; border-radius: 50%; background: #C6CEDE; }

.fr-posts { display: grid; gap: clamp(20px, 3vw, 30px); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.fr-post-card { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; }
.fr-post-card__media { display: block; aspect-ratio: 16 / 10; background: var(--fr-surface); }
.fr-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--fr-ease-out); }
.fr-post-card:hover .fr-post-card__media img { transform: scale(1.03); }
.fr-post-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: clamp(18px, 2.2vw, 24px); }
.fr-post-card__title { margin: 0; font-size: var(--fr-h4); }
.fr-post-card__title a { color: var(--fr-ink); text-decoration: none; }
.fr-post-card__title a:hover { color: var(--fr-blue); }
.fr-post-card__excerpt { color: var(--fr-body); font-size: 0.92rem; margin: 0; }
.fr-post-card__foot { margin-block-start: auto; padding-block-start: 8px; }

.fr-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: clamp(24px, 3vw, 36px); }
.fr-filter {
    display: inline-flex;
    align-items: center;
    min-height: var(--fr-tap);
    padding-inline: 16px;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius-pill);
    background: var(--fr-white);
    color: var(--fr-ink);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
}
.fr-filter:hover { border-color: #C9D0DE; background: var(--fr-surface); color: var(--fr-ink); }
.fr-filter[aria-current="true"] { border-color: var(--fr-blue); background: var(--fr-blue); color: var(--fr-white); }

.fr-pagination { margin-block-start: clamp(32px, 4vw, 48px); }
.fr-pagination nav { display: flex; justify-content: center; }
.fr-pagination svg { width: 18px; height: 18px; }
.fr-pagination a, .fr-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--fr-tap);
    min-height: var(--fr-tap);
    padding-inline: 12px;
    border-radius: var(--fr-radius-sm);
    color: var(--fr-ink);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-sm);
    text-decoration: none;
}
.fr-pagination a:hover { background: var(--fr-surface); }

.fr-article { display: grid; gap: clamp(32px, 5vw, 56px); }
@media (min-width: 1040px) { .fr-article { grid-template-columns: minmax(0, 1fr) 260px; } }
.fr-article__cover { margin-block-end: clamp(24px, 4vw, 40px); }
.fr-article__aside { position: sticky; inset-block-start: calc(var(--fr-header-height) + 24px); align-self: start; }
.fr-article__aside .fr-footer__title { color: var(--fr-ink); }

.fr-related { margin-block-start: clamp(48px, 6vw, 72px); padding-block-start: clamp(32px, 4vw, 48px); border-block-start: 1px solid var(--fr-rule); }

/* ------------------------------------------------------------ 11. Right-to-left */

/* Arabic swaps the display face; every layout rule above already uses logical
   properties, so nothing else has to flip. */
html[dir="rtl"] {
    --fr-font: var(--fr-font-arabic);
    --fr-tracking-tight: 0;
    --fr-tracking-wide: 0.04em;
}

html[dir="rtl"] .fr-num,
html[dir="rtl"] .fr-mono,
html[dir="rtl"] .fr-ticket__num,
html[dir="rtl"] .fr-rail__row-num,
html[dir="rtl"] .fr-stat__value,
html[dir="rtl"] .fr-plan__price {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Physical drawings (the converging wires) are the one thing that must mirror;
   the vertical merge is symmetrical and stays as it is. */
html[dir="rtl"] .fr-rail__wires { transform: scaleX(-1); }

html[dir="rtl"] .fr-compare__hint svg { transform: scaleX(-1); }
html[dir="rtl"] .fr-compare { --fr-fade-dir: to right; }

/* --------------------------------------- 12. Reduced motion, forced colours */

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

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .fr-js .fr-reveal { opacity: 1; transform: none; }
    .fr-js .fr-rail:not(.is-ready) .fr-ticket,
    .fr-js .fr-rail:not(.is-ready) .fr-rail__queue,
    .fr-js .fr-rail:not(.is-ready) .fr-rail__link,
    .fr-js .fr-hero:not(.is-ready) .fr-hero__copy > * { opacity: 1; }
    .fr-btn:hover { transform: none; }
    .fr-post-card:hover .fr-post-card__media img { transform: none; }
}

@media (forced-colors: active) {
    .fr-card, .fr-ticket, .fr-rail__queue, .fr-compare__scroll { border: 1px solid CanvasText; }
    .fr-btn { border-color: CanvasText; }
    .fr-icon { border: 1px solid CanvasText; }
}

@media print {
    .fr-header, .fr-mobile, .fr-footer, .fr-skip, .fr-actions { display: none !important; }
    body { color: #000; }
    .fr-section { padding-block: 24px; }
}

/* ------------------------------------------------- 13. Glue and small parts */

/* Every inline icon gets a sane default size; the components above override it. */
.fr-svg { width: 1.15em; height: 1.15em; flex: none; }
.fr-btn .fr-svg { width: 18px; height: 18px; }
.fr-compare__yes .fr-svg { width: 18px; height: 18px; }

/* Mirror directional glyphs in right-to-left layouts. */
.fr-flip .fr-svg { transform: scaleX(-1); }
html[dir="rtl"] .fr-btn--quiet .fr-svg,
html[dir="rtl"] .fr-pagination .fr-svg { transform: scaleX(-1); }
html[dir="rtl"] .fr-pagination .fr-flip .fr-svg { transform: none; }

/* Header: with no menu configured the actions still sit at the inline end. */
.fr-header__actions--pushed { margin-inline-start: auto; }

/* Second-level dropdowns open to the side, not below. */
.fr-nav__sub .fr-nav__sub {
    inset-block-start: -6px;
    inset-inline-start: calc(100% + 6px);
}

/* Section sub-heading, used by the blog templates. */
.fr-subtitle {
    margin-block-end: 14px;
    color: var(--fr-ink);
    font-family: var(--fr-font-mono);
    font-size: var(--fr-text-xs);
    font-weight: 500;
    letter-spacing: var(--fr-tracking-wide);
    text-transform: uppercase;
}

.fr-aside__link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--fr-ink);
    font-size: 0.94rem;
    font-weight: 500;
    text-decoration: none;
}
.fr-aside__link:hover { color: var(--fr-blue); }

.fr-posts--featured { margin-block-end: clamp(32px, 4vw, 56px); }

.fr-steps { margin: 0; padding: 0; list-style: none; }

.fr-hero--center .fr-hero__rail {
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
}

.fr-gallery__figure { display: block; }

.fr-quote__name,
.fr-quote__role { display: block; }

.fr-contact__detail-value { display: block; }

.fr-contact__intro > :last-child { margin-block-end: 0; }

.fr-form__actions { align-items: center; margin-block-start: 4px; }

.fr-post-card__media { overflow: hidden; }

/* ------------------------------------------------------------------ Masonry grid */

.fr-masonry {
    display: grid;
    gap: var(--fr-masonry-gap, var(--fr-gap));
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fr-masonry--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fr-masonry--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fr-masonry--cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.fr-masonry__card {
    position: relative;
    overflow: hidden;
    box-shadow: none;
}

.fr-masonry__card--outlined {
    background: transparent;
}

.fr-masonry__card--solid {
    background: var(--fr-ink);
    color: var(--fr-on-dark-muted);
}

.fr-masonry__card--solid h3 { color: var(--fr-on-dark); }

.fr-masonry__media {
    display: block;
    position: relative;
    overflow: hidden;
    margin: -22px -22px 0;
    border-radius: calc(var(--fr-radius) - 2px);
}

.fr-masonry__card .fr-masonry__media + * { margin-block-start: 18px; }

.fr-masonry__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fr-masonry__card--image .fr-masonry__media {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
}

.fr-masonry__card--image .fr-masonry__media img {
    height: 100%;
}

.fr-masonry__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-block-end: 18px;
    border-radius: 14px;
    background: var(--fr-ember-soft);
    color: var(--fr-ember-deep);
}

.fr-masonry__card--image .fr-masonry__icon,
.fr-masonry__card--image .fr-masonry__title,
.fr-masonry__card--image .fr-masonry__text,
.fr-masonry__card--image .fr-masonry__actions {
    position: relative;
}

.fr-masonry__title { margin-block-end: 0.4em; }
.fr-masonry__text { margin-block-end: 0; }
.fr-masonry__actions { margin-block-start: 1.3em; }

.fr-masonry__card--align-center { text-align: center; }
.fr-masonry__card--align-center .fr-masonry__icon { margin-inline: auto; }
.fr-masonry__card--align-center .fr-masonry__actions { text-align: center; }
.fr-masonry__card--align-end { text-align: end; }

.fr-masonry__btn--glow {
    background: linear-gradient(140deg, var(--fr-ember) 0%, #FF8A4F 100%);
    color: var(--fr-ink);
    box-shadow: 0 14px 30px -10px rgb(255 107 53 / 0.65);
}

.fr-masonry__btn--glow:hover {
    background: #FF7F4F;
    color: var(--fr-ink);
    box-shadow: 0 18px 38px -10px rgb(255 107 53 / 0.8);
}

.fr-masonry__btn--solid {
    background: var(--fr-blue);
    color: var(--fr-blue-ink);
}

.fr-masonry__btn--solid:hover {
    background: var(--fr-deep);
    color: var(--fr-blue-ink);
}

.fr-masonry__btn--outline {
    border-color: var(--fr-rule);
    background: transparent;
    color: var(--fr-ink);
}

.fr-masonry__btn--outline:hover {
    border-color: #C9D0DE;
    background: var(--fr-surface);
    color: var(--fr-ink);
}

.fr-dark .fr-masonry__card {
    border-color: var(--fr-rule-dark);
    background: var(--fr-ink-2);
    color: var(--fr-on-dark-muted);
    box-shadow: none;
}

.fr-dark .fr-masonry__card--outlined {
    background: transparent;
}

.fr-dark .fr-masonry__card h3 { color: var(--fr-on-dark); }

.fr-dark .fr-masonry__btn--outline {
    border-color: var(--fr-rule-dark);
    color: var(--fr-on-dark);
}

.fr-dark .fr-masonry__btn--outline:hover {
    border-color: #3A4463;
    background: var(--fr-ink-2);
    color: var(--fr-on-dark);
}

@media (max-width: 1000px) {
    .fr-masonry,
    .fr-masonry--cols-2,
    .fr-masonry--cols-3,
    .fr-masonry--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .fr-masonry__card--image .fr-masonry__media {
        position: static;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 640px) {
    .fr-masonry,
    .fr-masonry--cols-2,
    .fr-masonry--cols-3,
    .fr-masonry--cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* -------------------------------------------------------------- Bento grid */

.fr-bento--bg,
.fr-bento--bg-solid {
    padding-block: var(--fr-section, 96px);
}

/* Section background variants (section_bg_type). */
.fr-bento--bg-primary {
    background-color: var(--fr-ember);
}

.fr-bento--bg-primary .fr-head h2,
.fr-bento--bg-primary .fr-lead,
.fr-bento--bg-primary .fr-bento__title,
.fr-bento--bg-primary .fr-bento__text {
    color: var(--fr-ink);
}

.fr-bento--bg-secondary {
    background-color: var(--fr-ink);
    color: var(--fr-white);
}

.fr-bento--bg-secondary .fr-head h2,
.fr-bento--bg-secondary .fr-lead,
.fr-bento--bg-secondary .fr-bento__title,
.fr-bento--bg-secondary .fr-bento__text {
    color: var(--fr-white);
}

.fr-bento--bg-secondary .fr-bento__zone {
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 14%);
}

.fr-bento--bg-secondary .fr-bento__zone--b {
    color: var(--fr-white);
}

.fr-bento--bg-gradient {
    background: linear-gradient(135deg, var(--fr-ember), var(--fr-blue));
    color: var(--fr-ink);
}

.fr-bento--bg-gradient .fr-bento__title,
.fr-bento--bg-gradient .fr-bento__text {
    color: var(--fr-ink);
}

/* Staggered mosaic: two columns, each its own row-template grid so the
   splits differ — left 2fr/1fr, right 1fr/2fr (B and C half of A and D). */
.fr-bento__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fr-bento-gap, var(--fr-gap));
}

.fr-bento__col {
    display: grid;
    gap: var(--fr-bento-gap, var(--fr-gap));
    min-width: 0;
}

.fr-bento__col--left { grid-template-rows: 2fr 1fr; }
.fr-bento__col--right { grid-template-rows: 1fr 2fr; }

.fr-bento__zone {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    border: 1px solid var(--fr-rule);
    border-radius: 22px;
    background: var(--fr-white);
    color: var(--fr-ink);
    box-shadow: none;
}

.fr-bento__media {
    position: relative;
    display: block;
    overflow: hidden;
    height: 100%;
}

.fr-bento__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fr-bento__zone--a .fr-bento__media img,
.fr-bento__zone--d .fr-bento__media img {
    position: absolute;
    inset: 0;
    height: 100%;
}

.fr-bento__feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 28px;
}

.fr-bento__zone--align-center { text-align: center; }
.fr-bento__zone--align-center .fr-bento__feature { align-items: center; }
.fr-bento__zone--align-end { text-align: end; }
.fr-bento__zone--align-end .fr-bento__feature { align-items: flex-end; }

.fr-bento__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-block-end: 18px;
    border-radius: 14px;
    background: var(--fr-ember-soft);
    color: var(--fr-ember-deep);
}

.fr-bento__zone--align-center .fr-bento__icon { margin-inline: auto; }

.fr-bento__icon svg {
    width: 24px;
    height: 24px;
}

.fr-bento__title {
    margin-block-end: 0.4em;
    color: var(--fr-ink);
}

.fr-bento__zone--size-sm .fr-bento__title { font-size: 1rem; }
.fr-bento__zone--size-md .fr-bento__title { font-size: 1.2rem; }
.fr-bento__zone--size-lg .fr-bento__title { font-size: var(--fr-h3, 1.45rem); }
.fr-bento__zone--size-xl .fr-bento__title { font-size: var(--fr-h2, 2rem); }

.fr-bento__text {
    margin-block-end: 0;
}

.fr-bento__text ul,
.fr-bento__text ol {
    margin: 0.5em 0;
    padding-inline-start: 1.3em;
    text-align: start;
}

.fr-bento__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fr-bento-gap, var(--fr-gap));
    height: 100%;
    padding: var(--fr-bento-gap, var(--fr-gap));
}

.fr-bento__item {
    overflow: hidden;
    border-radius: 16px;
}

.fr-bento__item--media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fr-bento__item--cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.fr-bento__cta--glow {
    background: linear-gradient(140deg, var(--fr-ember) 0%, #FF8A4F 100%);
    color: var(--fr-ink);
    box-shadow: 0 14px 30px -10px rgb(255 107 53 / 0.65);
}

.fr-bento__cta--glow:hover {
    background: #FF7F4F;
    color: var(--fr-ink);
    box-shadow: 0 18px 38px -10px rgb(255 107 53 / 0.8);
}

@media (max-width: 640px) {
    .fr-bento__grid {
        grid-template-columns: 1fr;
    }

    .fr-bento__col--left,
    .fr-bento__col--right {
        grid-template-rows: none;
    }

    .fr-bento__zone {
        min-height: 180px;
    }
}

@media (max-width: 480px) {
    .fr-bento__pair {
        grid-template-columns: 1fr;
    }

    .fr-bento__feature {
        padding: 24px;
    }
}

/* ==========================================================================
   Downloads table
   --------------------------------------------------------------------------
   Rows come from the Downloads resource, so this block sizes itself to
   whatever is published rather than to a fixed column count.

   Fresto's signature is the mono figure: version, size and date are set in
   --fr-font-mono with tabular numerals so a column of sizes lines up on the
   decimal the way a receipt does.

   Under 640px the table becomes a stack of cards. Each cell keeps its column
   name through the data-label attribute, so a bare "24.1 MB" never appears
   without the word Size in front of it.
   ========================================================================== */

.fr-downloads__scroll { overflow-x: auto; }
.fr-downloads__scroll:focus-visible { outline: 2px solid var(--fr-blue); outline-offset: 4px; }

.fr-downloads__table {
    width: 100%;
    border-collapse: collapse;
}

.fr-downloads__table th,
.fr-downloads__table td {
    padding: 16px 18px;
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--fr-rule);
}

.fr-downloads__table thead th {
    color: var(--fr-body);
    font-family: var(--fr-font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fr-downloads__name {
    display: block;
    color: var(--fr-ink);
    font-weight: 600;
}

.fr-downloads__desc {
    display: block;
    margin-block-start: 4px;
    max-width: 52ch;
    color: var(--fr-body);
    font-size: .92rem;
    line-height: 1.55;
}

.fr-downloads__mono {
    font-family: var(--fr-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fr-body);
    white-space: nowrap;
}

.fr-downloads__tag,
.fr-downloads__ext {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius-pill);
    background: var(--fr-paper);
    font-size: .75rem;
    white-space: nowrap;
}

.fr-downloads__ext {
    margin-inline-start: 6px;
    font-family: var(--fr-font-mono);
    letter-spacing: .04em;
}

.fr-downloads__action { text-align: end; }

.fr-downloads__button {
    white-space: nowrap;
}

.fr-downloads__icon { width: 16px; height: 16px; flex: none; }

.fr-downloads__empty {
    padding: clamp(28px, 5vw, 48px);
    border: 1px dashed var(--fr-rule);
    border-radius: var(--fr-radius);
    background: var(--fr-paper);
    color: var(--fr-body);
    text-align: center;
}

/* Style variants. */
.fr-downloads--bordered .fr-downloads__table {
    border: 1px solid var(--fr-rule);
    border-radius: var(--fr-radius);
    overflow: hidden;
}

.fr-downloads--striped tbody tr:nth-child(even) { background: var(--fr-paper); }

.fr-downloads--cards .fr-downloads__table { border-collapse: separate; border-spacing: 0 10px; }
.fr-downloads--cards thead th { border-block-end: 0; }
.fr-downloads--cards tbody tr { box-shadow: var(--fr-shadow-card); }
.fr-downloads--cards tbody td {
    background: var(--fr-paper);
    border-block: 1px solid var(--fr-rule);
    border-block-end: 1px solid var(--fr-rule);
}
.fr-downloads--cards tbody td:first-child {
    border-inline-start: 1px solid var(--fr-rule);
    border-start-start-radius: var(--fr-radius);
    border-end-start-radius: var(--fr-radius);
}
.fr-downloads--cards tbody td:last-child {
    border-inline-end: 1px solid var(--fr-rule);
    border-start-end-radius: var(--fr-radius);
    border-end-end-radius: var(--fr-radius);
}

/* On the dark band the rules and surfaces invert with the section. */
.fr-section--dark .fr-downloads__table th,
.fr-section--dark .fr-downloads__table td { border-block-end-color: var(--fr-rule-dark); }
.fr-section--dark .fr-downloads__name { color: var(--fr-paper); }
.fr-section--dark .fr-downloads__tag,
.fr-section--dark .fr-downloads__ext {
    background: var(--fr-ink-2);
    border-color: var(--fr-rule-dark);
}
.fr-section--dark .fr-downloads--striped tbody tr:nth-child(even) { background: var(--fr-ink-2); }
.fr-section--dark .fr-downloads__empty {
    background: var(--fr-ink-2);
    border-color: var(--fr-rule-dark);
}

@media (max-width: 640px) {
    .fr-downloads__table,
    .fr-downloads__table tbody,
    .fr-downloads__table tr,
    .fr-downloads__table td { display: block; width: 100%; }

    .fr-downloads__table thead { display: none; }

    .fr-downloads__table tr {
        margin-block-end: 14px;
        padding: 10px 4px;
        border: 1px solid var(--fr-rule);
        border-radius: var(--fr-radius);
        background: var(--fr-paper);
    }

    .fr-downloads__table td { padding: 6px 16px; border-block-end: 0; }

    .fr-downloads__table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-block-end: 2px;
        font-family: var(--fr-font-mono);
        font-size: .68rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--fr-body);
    }

    /* The name cell leads the card; its own label would be noise. */
    .fr-downloads__table td:first-child::before { content: none; }

    .fr-downloads__action { text-align: start; padding-block-start: 10px; }
    .fr-downloads__button { width: 100%; justify-content: center; }
}