/* ============================================================
   ARECH Megamenu block — front-end styles.

   Port of the NAV system in
     prototypes/navbar-explore-2026-05-19/nav-4-megamenu-full.html
   re-tokenized to the theme tokens (main.css :root) and corrected to the
   responsive standard (responsive_manual_en_0.1: min-width ONLY, no
   max-width media queries; canonical container box).

   ALL rules are scoped under `.arech-megamenu` so nothing leaks into the
   theme. The bar links sit inline next to the theme logo (the theme <header>
   provides the sticky surface + blur); only the panels / scrim / overlay are
   position:fixed and anchored at top:var(--header-height).
   ============================================================ */

.arech-megamenu {
    /* slots inline inside the theme's <header> flex row */
    display: contents;
}

/* -------- DESKTOP LINKS -------- */
.arech-megamenu .arech-mm__links {
    display: none;
    flex: 1;
    justify-content: center;
    align-items: center;
    /* Restore the prototype invariant (nav above scrim). The trigger cluster
       shares the .site-header stacking context with the scrim/panel; without a
       local z-index the triggers (z-index:auto) fall under the scrim (z-98).
       position:relative + z-index here lift the triggers above the scrim so a
       stationary cursor on a trigger is never covered. Secondary hardening to
       the scrim-top fix above; together they make the flicker structurally
       impossible. Scoped to the block — `.site-header` (theme-owned) untouched. */
    position: relative;
    z-index: 101;
}
/* Desktop nav reveals at MD/LG 768 to match the prototype (proto L60): tablet
   portrait shows the inline nav + 3-col mega; the 5-col step lands at 1024. */
@media (min-width: 768px) {
    .arech-megamenu .arech-mm__links { display: flex; }
}
.arech-megamenu .arech-mm__links ul {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}
.arech-megamenu .arech-mm__links > ul > li { position: static; } /* mega spans full width */

.arech-megamenu .arech-mm__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--off-white);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__link:hover,
.arech-megamenu .arech-mm__link:focus-visible { color: var(--orange); }
.arech-megamenu .arech-mm__link:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-megamenu .arech-mm__link.is-active { color: var(--orange); }
.arech-megamenu .arech-mm__link.is-active:hover,
.arech-megamenu .arech-mm__link.is-active:focus-visible { color: var(--off-white); }
.arech-megamenu .arech-mm__link[aria-expanded="true"] { color: var(--orange); }
.arech-megamenu .arech-mm__link[aria-expanded="true"]:hover,
.arech-megamenu .arech-mm__link[aria-expanded="true"]:focus-visible { color: var(--off-white); }

.arech-megamenu .arech-mm__chev {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__link[aria-expanded="true"] .arech-mm__chev { transform: rotate(180deg); }

/* -------- CTA + BURGER -------- */
.arech-megamenu .arech-mm__cta-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}
.arech-megamenu .arech-mm__cta {
    display: none;
    align-items: center;
    min-height: 44px;
    padding: 10px 20px;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-btn);
    transition: background var(--motion-normal) var(--ease-standard),
                transform var(--motion-normal) var(--ease-standard),
                box-shadow var(--motion-normal) var(--ease-standard);
}
@media (min-width: 768px) {
    .arech-megamenu .arech-mm__cta { display: inline-flex; }
}
.arech-megamenu .arech-mm__cta:hover,
.arech-megamenu .arech-mm__cta:focus-visible {
    background: var(--orange-bright);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px color-mix(in oklch, var(--orange) 35%, transparent);
}

.arech-megamenu .arech-mm__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__burger:hover,
.arech-megamenu .arech-mm__burger:focus-visible { border-color: var(--orange); }
@media (min-width: 768px) {
    .arech-megamenu .arech-mm__burger { display: none; }
}
.arech-megamenu .arech-mm__burger span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--off-white);
    position: relative;
}
.arech-megamenu .arech-mm__burger span::before,
.arech-megamenu .arech-mm__burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--off-white);
}
.arech-megamenu .arech-mm__burger span::before { top: -6px; }
.arech-megamenu .arech-mm__burger span::after { top: 6px; }
.arech-megamenu .arech-mm__burger[aria-expanded="true"] span { background: transparent; }
.arech-megamenu .arech-mm__burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.arech-megamenu .arech-mm__burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* -------- MEGA PANELS (full-width, fixed) -------- */
.arech-megamenu .arech-mm__panel {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 99;
    background: color-mix(in oklch, var(--dark) 97%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--motion-normal) var(--ease-decelerate),
                transform var(--motion-normal) var(--ease-decelerate);
}
.arech-megamenu .arech-mm__panel.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
/* Canonical container box (S72): gutter on the band, inner caps at --container. */
.arech-megamenu .arech-mm__panel-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding-block: var(--space-7) var(--space-8);
    padding-inline: var(--container-px);
}
.arech-megamenu .arech-mm__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted-accessible);
    margin-bottom: var(--space-5);
    display: flex;
    align-items: center;
    gap: 12px;
}
.arech-megamenu .arech-mm__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--orange);
}
.arech-megamenu .arech-mm__empty {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--light);
}

/* Products grid — mobile-first min-width steps (prototype used max-width:1100px;
   converted: 1col base → 3col at >=768 → 5col at >=1024 per task spec). */
.arech-megamenu .arech-mm__products-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}
@media (min-width: 768px) {
    .arech-megamenu .arech-mm__products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .arech-megamenu .arech-mm__products-grid { grid-template-columns: repeat(5, 1fr); }
}

.arech-megamenu .arech-mm__card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--dark-2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-btn);
    text-decoration: none;
    color: inherit;
    transition: background var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__card:hover,
.arech-megamenu .arech-mm__card:focus-visible {
    background: var(--dark-3);
    border-color: var(--orange);
    transform: translateY(-2px);
}
.arech-megamenu .arech-mm__card:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-megamenu .arech-mm__card-img {
    aspect-ratio: 16 / 10;
    background: var(--dark-4);
    border: 1px dashed color-mix(in oklch, var(--orange) 40%, transparent);
    border-radius: var(--radius-btn);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--muted-accessible);
    text-transform: uppercase;
}
.arech-megamenu .arech-mm__card-img--photo {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.05);
    /* Transparent: product photos are transparent PNG/WebP, so they sit on the
       mega panel's dark background, not inside a filled box. */
    background: transparent;
}
.arech-megamenu .arech-mm__card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.arech-megamenu .arech-mm__card-title {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 18px;
    color: var(--off-white);
    margin-bottom: 6px;
}
.arech-megamenu .arech-mm__card-body {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--light);
}

/* About grid — same min-width step strategy. */
.arech-megamenu .arech-mm__about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 768px) {
    .arech-megamenu .arech-mm__about-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .arech-megamenu .arech-mm__about-grid { grid-template-columns: repeat(5, 1fr); }
}
.arech-megamenu .arech-mm__about-link {
    display: flex;
    flex-direction: column;
    padding: 16px 12px;
    text-decoration: none;
    color: inherit;
    border-left: 2px solid transparent;
    transition: border-color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__about-link:hover,
.arech-megamenu .arech-mm__about-link:focus-visible {
    border-left-color: var(--orange);
    background: color-mix(in oklch, var(--orange) 4%, transparent);
}
.arech-megamenu .arech-mm__about-link:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-megamenu .arech-mm__about-title {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 15px;
    color: var(--off-white);
    margin-bottom: 4px;
}
.arech-megamenu .arech-mm__about-desc {
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.5;
    color: var(--light);
}

/* -------- SCRIM -------- */
/* ROOT-CAUSE FIX (S74 flicker): the scrim must NEVER cover the nav band.
   Triggers live inside the theme's `.site-header` (a sticky z-index:100 stacking
   context); the scrim + panel are children of that same header, so the scrim's
   local z-index:98 sits ABOVE the triggers (which have z-index:auto). With the
   old `inset:0` the scrim therefore covered the trigger row at y=40, stealing the
   hover off the trigger → mouseleave → close → mouseenter → open → flicker
   (rendered-DOM proof: elementFromPoint(533,40) returned `.arech-mm__scrim`).
   Anchoring the scrim's top at the header height removes the cause: triggers are
   never under the scrim regardless of stacking context, and visually the dim
   correctly begins below the crisp top nav (matches the prototype intent —
   nothing to dim behind a top-anchored nav). Belt-and-braces with the trigger
   z-index lift below (restores the prototype's z-100-nav > z-98-scrim invariant). */
.arech-megamenu .arech-mm__scrim {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-normal) var(--ease-standard);
}
.arech-megamenu .arech-mm__scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* -------- MOBILE OVERLAY -------- */
.arech-megamenu .arech-mm__overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: color-mix(in oklch, var(--dark) 98%, transparent);
    backdrop-filter: blur(30px) saturate(1.4);
    -webkit-backdrop-filter: blur(30px) saturate(1.4);
    display: flex;
    flex-direction: column;
    padding: var(--container-px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-normal) var(--ease-standard);
    overflow-y: auto;
}
.arech-megamenu .arech-mm__overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.arech-megamenu .arech-mm__overlay-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
}
.arech-megamenu .arech-mm__overlay-brand {
    display: block;
    height: 32px;
    width: auto;
}
.arech-megamenu .arech-mm__overlay-close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-btn);
    cursor: pointer;
    color: var(--off-white);
    font-family: var(--font-mono);
    font-size: 22px;
    line-height: 1;
}
.arech-megamenu .arech-mm__overlay-close:hover,
.arech-megamenu .arech-mm__overlay-close:focus-visible { border-color: var(--orange); }
.arech-megamenu .arech-mm__overlay-links {
    list-style: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-5) var(--space-2);
}
.arech-megamenu .arech-mm__overlay-link {
    display: block;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--off-white);
    text-decoration: none;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.arech-megamenu .arech-mm__overlay-link:hover { color: var(--orange); }
.arech-megamenu .arech-mm__overlay-link.is-active { color: var(--orange); }

.arech-megamenu .arech-mm__overlay-acc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--off-white);
    text-decoration: none;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    width: 100%;
    min-height: 44px;
    cursor: pointer;
}
.arech-megamenu .arech-mm__overlay-acc[aria-expanded="true"] { color: var(--orange); }
.arech-megamenu .arech-mm__overlay-acc[aria-expanded="true"] .arech-mm__overlay-acc-icon { transform: rotate(45deg); }
.arech-megamenu .arech-mm__overlay-acc-icon {
    display: inline-block;
    transition: transform var(--motion-fast) var(--ease-standard);
}
.arech-megamenu .arech-mm__overlay-acc-body {
    display: none;
    padding: 12px 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.arech-megamenu .arech-mm__overlay-acc-body.is-open {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.arech-megamenu .arech-mm__overlay-acc-body a {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--light);
    text-decoration: none;
    padding: 8px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.arech-megamenu .arech-mm__overlay-acc-body a:hover { color: var(--orange); }
.arech-megamenu .arech-mm__overlay-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    background: var(--orange);
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-btn);
    margin-top: var(--space-5);
}
.arech-megamenu .arech-mm__overlay-cta:hover,
.arech-megamenu .arech-mm__overlay-cta:focus-visible { background: var(--orange-bright); }

/* -------- REDUCED MOTION (mandatory) -------- */
@media (prefers-reduced-motion: reduce) {
    .arech-megamenu .arech-mm__panel,
    .arech-megamenu .arech-mm__scrim,
    .arech-megamenu .arech-mm__overlay,
    .arech-megamenu .arech-mm__chev,
    .arech-megamenu .arech-mm__card,
    .arech-megamenu .arech-mm__about-link,
    .arech-megamenu .arech-mm__cta,
    .arech-megamenu .arech-mm__overlay-acc-icon,
    .arech-megamenu .arech-mm__link {
        transition: none !important;
    }
}


/* ============================================================
   ARECH Hero — Impact block — front-end styles.
   S69 prototype-fidelity pass — non-dot values restored to the
   homepage prototype (prototypes/homepage/index.html L651-848)
   as the source of truth, with Concrete-platform necessities
   preserved (sticky-header offset, edit-mode, container name).
   LED dot matrix kept EXACTLY as the current live block per the
   client's instruction ("rămân exact așa").
   Token references resolve to the theme's :root in main.css.
   ============================================================ */

.arech-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Prototype L655 — content anchored to the bottom of the 100vh hero. */
    justify-content: flex-end;
    /* Prototype L656-657: 80px top / 96px bottom. Top keeps the sticky
       theme-header offset (prototype had no sticky header). */
    padding: calc(var(--space-9) + var(--header-height, 72px)) var(--container-px) var(--space-9);
    overflow: hidden;
    background: var(--dark);
    color: var(--off-white);
    /* S55 D5 — inline-size container so the LED matrix can step-down via
       @container queries rather than viewport media queries. */
    container-type: inline-size;
    container-name: arech-hero;
}
@media (min-width: 1024px) {
    .arech-hero {
        /* Prototype L661 — 160px bottom padding on desktop. */
        padding: calc(var(--space-11) + var(--header-height, 80px)) var(--container-px) var(--space-11);
    }
}

/* ---- Layer 1 — animated orange grid drift ---- */
/* Prototype L730-734 — fainter grid lines on phones so they don't compete
   with the H1; stronger from SM up. Mobile-first / min-width per
   responsive_manual_en_0.1 §1 (no max-width media queries). */
.arech-hero__grid {
    position: absolute;
    inset: -80px 0 0 0;
    background-image:
        linear-gradient(color-mix(in oklch, var(--orange) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--orange) 4%, transparent) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: arechGridMove var(--motion-ambient-fast) var(--ease-linear) infinite;
    z-index: 1;
}
@media (min-width: 480px) {
    .arech-hero__grid {
        background-image:
            linear-gradient(color-mix(in oklch, var(--orange) 7%, transparent) 1px, transparent 1px),
            linear-gradient(90deg, color-mix(in oklch, var(--orange) 7%, transparent) 1px, transparent 1px);
    }
}
@keyframes arechGridMove {
    0%   { transform: translateY(0); }
    100% { transform: translateY(80px); }
}

/* ---- Layer 2 — dot-wave scan (pure CSS, compositor-only) ----
   Replaces the old <canvas> rAF loop (it pegged the main thread → bad mobile
   TBT/TTI). The dim base dot grid is a static radial-gradient; the scan is a
   child .arech-hero__beam — a brighter dot band swept top→bottom with a
   `transform: translateY` animation that runs on the compositor (zero main
   thread). Look is ~identical: 14px orange dot grid + a slow 12s scan beam. */
.arech-hero__dotwave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    /* dim base grid — was canvas BASE_OPACITY 0.05, SPACING 14, DOT_R 1.5 */
    background-image: radial-gradient(circle at center, color-mix(in oklch, var(--orange) 6%, transparent) 1.5px, transparent 2px);
    background-size: 14px 14px;
    /* right-fade mask (kept from the canvas version) */
    -webkit-mask-image: linear-gradient(to right, black 0%, black 45%, transparent 80%);
    mask-image: linear-gradient(to right, black 0%, black 45%, transparent 80%);
}
.arech-hero__beam {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    /* brighter dots, same 14px grid; the band shape comes from the mask */
    background-image: radial-gradient(circle at center, var(--orange) 1.8px, transparent 2.3px);
    background-size: 14px 14px;
    /* moving band: faint trail (top) ramping to a bright leading edge, then cut
       — mirrors the canvas SCAN_TRAIL_PX (≈25%) + SCAN_BEAM (bright edge). */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.30) 6%, rgba(0,0,0,0.85) 23%, #000 26%, transparent 28%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.30) 6%, rgba(0,0,0,0.85) 23%, #000 26%, transparent 28%);
    opacity: 0.75;
    will-change: transform;
    transform: translateY(-28%);
    animation: arechDotScan 12s linear infinite;
}
@keyframes arechDotScan {
    0%   { transform: translateY(-28%); }
    100% { transform: translateY(100%); }
}

/* ---- Layer 3 — LED dot matrix (right-side perspective) ----
   KEPT EXACTLY AS THE CURRENT LIVE BLOCK per client instruction
   "rămân exact așa" — opacity ladder, gap, flicker timing unchanged. */
.arech-hero__led {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30%;
    height: 100%;
    display: none;
    grid-template-columns: repeat(28, 1fr);
    gap: 4px;
    opacity: 0.40;
    pointer-events: none;
    transform: perspective(800px) rotateY(-8deg);
    transform-origin: right center;
    padding: var(--space-2);
    z-index: 3;
    -webkit-mask-image:
        linear-gradient(to left, black 50%, transparent 100%),
        linear-gradient(to top, black 60%, transparent 100%);
    mask-image:
        linear-gradient(to left, black 50%, transparent 100%),
        linear-gradient(to top, black 60%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
@container arech-hero (min-width: 480px) {
    .arech-hero__led { display: grid; width: 30%; opacity: 0.55; }
}
@container arech-hero (min-width: 768px) {
    .arech-hero__led { width: 45%; opacity: 0.70; }
}
@container arech-hero (min-width: 1024px) {
    .arech-hero__led { width: 55%; opacity: 0.85; }
}
@supports not (container-type: inline-size) {
    @media (min-width: 480px) {
        .arech-hero__led { display: grid; width: 30%; opacity: 0.55; }
    }
    @media (min-width: 768px) {
        .arech-hero__led { width: 45%; opacity: 0.70; }
    }
    @media (min-width: 1024px) {
        .arech-hero__led { width: 55%; opacity: 0.85; }
    }
}
.arech-hero__led .arech-led-dot {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--orange);
    opacity: var(--base, 0.2);
    animation: arechLedFlicker var(--d, 3s) var(--ease-standard) var(--delay, 0s) infinite;
}
@keyframes arechLedFlicker {
    0%, 100% { opacity: var(--base, 0.2); }
    50%      { opacity: var(--peak, 0.8); }
}

/* ---- Layer 4 — radial orange glow ---- */
.arech-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 60% 40%, color-mix(in oklch, var(--orange) 12%, transparent) 0%, transparent 60%);
    pointer-events: none;
    z-index: 4;
}

/* ---- Layer 5 — bottom fade-out into next section ---- */
.arech-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, var(--dark) 100%);
    pointer-events: none;
    z-index: 5;
}

/* ============================================================
   Content layer — prototype L754-758: max-width 720px, left-aligned
   (NOT centered). The hero's padding-inline provides the left gutter.
   ============================================================ */
.arech-hero__content {
    position: relative;
    z-index: 6;
    width: 100%;
    /* S69 — hero content shares the single site container (1200) and centres,
       so the hero starts at the SAME left edge as every other section.
       (Was --container-narrow 720 left-anchored, which broke alignment.) */
    max-width: var(--container);
    margin-inline: auto;
}

/* Eyebrow */
.arech-hero__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--off-white);
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-5);
}
.arech-hero__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--off-white);
    flex-shrink: 0;
}

/* H1 — 3-line stacked, filled / accent / outline.
   Prototype L766-806: font/size live on the spans; uppercase; lh 0.92. */
.arech-hero__h1 {
    margin: var(--space-7) 0 0;
}
.arech-hero__line {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(72px, 9vw, 136px);
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: var(--off-white);
}
.arech-hero__line--2 {
    color: var(--orange);
    white-space: nowrap;
    /* Prototype L790-794 — 4-layer bloom from sharp inner halo to wide ambient. */
    text-shadow:
        0 0 24px color-mix(in oklch, var(--orange) 55%, transparent),
        0 0 56px color-mix(in oklch, var(--orange) 35%, transparent),
        0 0 96px color-mix(in oklch, var(--orange) 18%, transparent),
        0 0 160px color-mix(in oklch, var(--orange) 8%, transparent);
}
.arech-hero__line--3 {
    /* General Sans (var(--font-headline)) for outline-only text per
       arech-font-outline-rule — Geist Black artifacts under text-stroke.
       Mobile-first: thinner stroke on phones, full 1px from SM up
       (responsive_manual_en_0.1 §1 — no max-width media queries). */
    font-family: var(--font-headline);
    font-weight: 700;
    display: inline-block;
    line-height: 1.05;
    padding-bottom: 0.08em;
    letter-spacing: 0.03em;
    -webkit-text-stroke: 0.75px var(--off-white);
    color: transparent;
}
@media (min-width: 480px) {
    .arech-hero__line--3 {
        -webkit-text-stroke-width: 1px;
        letter-spacing: 0.04em;
    }
}

/* Divider — prototype L807-811: 1px tall, space-6 margin. */
.arech-hero__divider {
    width: 48px;
    height: 1px;
    background: linear-gradient(90deg, var(--orange), transparent);
    margin: var(--space-6) 0;
}

/* Subtitle — prototype L818-826: 18px, italic 300, max-width 520px. */
.arech-hero__sub {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    line-height: 1.7;
    color: var(--light);
    max-width: 520px;
    margin: 0 0 var(--space-7);
}

/* CTAs — prototype L833-836: space-4 gap. */
.arech-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.arech-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 28px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-xs);
    border: 1px solid transparent;
    transition:
        background var(--motion-normal) var(--ease-standard),
        transform var(--motion-normal) var(--ease-standard),
        box-shadow var(--motion-normal) var(--ease-standard),
        border-color var(--motion-normal) var(--ease-standard),
        color var(--motion-normal) var(--ease-standard);
}
.arech-hero__btn--primary {
    background: var(--orange);
    color: #fff;
}
.arech-hero__btn--primary:hover,
.arech-hero__btn--primary:focus-visible {
    background: var(--orange-bright);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px color-mix(in oklch, var(--orange) 35%, transparent);
    color: #fff;
}
.arech-hero__btn--ghost {
    background: transparent;
    color: var(--light);
    border-color: color-mix(in oklch, var(--off-white) 18%, transparent);
}
.arech-hero__btn--ghost:hover,
.arech-hero__btn--ghost:focus-visible {
    border-color: var(--orange);
    color: var(--orange);
}
.arech-hero__btn:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

/* Stats row (block-only — not present in prototype hero; kept). */
.arech-hero__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-9);
    padding-top: var(--space-7);
    border-top: 1px solid color-mix(in oklch, var(--orange) 18%, transparent);
    max-width: var(--measure-hero);
}
@media (min-width: 768px) {
    .arech-hero__stats { grid-template-columns: repeat(4, 1fr); }
}
.arech-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.arech-hero__stat-num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 4.5vw, 64px);
    line-height: 1;
    color: var(--orange);
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}
.arech-hero__suffix {
    font-size: 0.45em;
    color: var(--orange-dim);
    margin-left: 4px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
.arech-hero__stat-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted-accessible);
}

/* ============================================================
   Reveal stagger
   ============================================================ */
.arech-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity var(--motion-reveal) var(--ease-standard),
        transform var(--motion-reveal) var(--ease-standard);
}
.arech-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}
.arech-reveal--s1 { transition-delay: var(--stagger-1); }
.arech-reveal--s2 { transition-delay: var(--stagger-2); }
.arech-reveal--s3 { transition-delay: var(--stagger-3); }
.arech-reveal--s4 { transition-delay: var(--stagger-4); }
.arech-reveal--s5 { transition-delay: var(--stagger-5); }

/* ============================================================
   Reduced motion — WCAG 2.2 SC 2.3.3
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .arech-hero__led { display: none; }
    .arech-hero__grid { animation: none; }
    .arech-hero__beam { animation: none; opacity: 0; }
    .arech-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .arech-hero__btn,
    .arech-hero__btn:hover {
        transform: none !important;
        transition: none;
    }
}

/* ============================================================
   Print — strip decorative layers, render plain document
   ============================================================ */
@media print {
    .arech-hero__grid,
    .arech-hero__dotwave,
    .arech-hero__led { display: none !important; }
    .arech-hero {
        min-height: auto;
        padding: 32px 24px;
        color: #000;
        background: #fff;
    }
    .arech-hero__line--2 {
        color: #000;
        text-shadow: none;
    }
    .arech-hero__line--3 {
        -webkit-text-stroke: 0;
        color: #000;
    }
}

/* ============================================================
   Concrete edit-mode tweaks: stop the sticky/fullscreen hero
   from hiding the editor toolbar.
   ============================================================ */
.ccm-edit-mode .arech-hero {
    min-height: 60vh;
    padding-top: var(--space-7);
}
.ccm-edit-mode .arech-hero__led,
.ccm-edit-mode .arech-hero__dotwave {
    opacity: 0.3;
}


/* ============================================================================
   TDM Blocks — design tokens (--tdm-* namespace)

   The package ships its OWN token set so it works standalone on any Concrete
   site. Blocks NEVER hard-code values — they reference var(--tdm-*). The Brand
   Kit dashboard overrides any of these at :root per site, re-skinning every
   block at once.

   Defaults below are seeded from the ARECH design-system-v1 (dark theme) as
   the first consumer; on a new site, set the Brand Kit and these are replaced.
   On ARECH you may also map a token to the live theme variable, e.g.
   `--tdm-color-accent: var(--orange);` so the library tracks the theme.
   ============================================================================ */

:root {
  /* --- Palette -------------------------------------------------------------
     ink = text on surface; surface = block background; accent = CTA/links. */
  --tdm-color-ink:          #F5F4F0;   /* primary text  (ARECH --off-white) */
  --tdm-color-ink-2:        #B0B0BA;   /* secondary     (ARECH --light)     */
  --tdm-color-ink-3:        #6B6B75;   /* tertiary/meta (ARECH --muted)     */
  --tdm-color-surface:      #0D0D0F;   /* base bg       (ARECH --dark)      */
  --tdm-color-surface-2:    #141416;   /* raised bg                          */
  --tdm-color-surface-3:    #1C1C20;   /* card bg                            */
  --tdm-color-accent:       #E8651A;   /* primary accent (ARECH --orange)   */
  --tdm-color-accent-hover: #FF7A2F;
  --tdm-color-accent-active:#C4510E;
  --tdm-color-on-accent:    #FFFFFF;   /* text on an accent fill (AA-safe)  */

  /* Hairline via color-mix so it tracks ink on any surface. */
  --tdm-hairline: color-mix(in srgb, var(--tdm-color-ink) 14%, transparent);

  /* --- Fonts (self-hosted by the theme; package only references families) - */
  --tdm-font-display:  "Geist", system-ui, sans-serif;
  --tdm-font-headline: "General Sans", Inter, system-ui, sans-serif;
  --tdm-font-body:     "DM Sans", system-ui, sans-serif;
  /* Label / eyebrow / caption voice. DM Mono retired 2026-06-02 site-wide;
     aligned to General Sans to match the theme's --font-mono (S80). */
  --tdm-font-mono:     "General Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Type scale (fluid clamp; never a fixed px in a media query) -------- */
  --tdm-text-h1:      clamp(48px, 6vw, 88px);
  --tdm-text-h2:      clamp(42px, 5vw, 72px);
  --tdm-text-h3:      clamp(28px, 3vw, 36px);
  --tdm-text-h4:      20px;
  --tdm-text-h5:      16px;
  --tdm-text-body:    16px;
  --tdm-text-body-sm: 14px;
  --tdm-text-eyebrow: 11px;
  --tdm-text-caption: 12px;

  --tdm-weight-display:  700;
  --tdm-weight-headline: 600;
  --tdm-weight-body:     400;

  --tdm-leading-tight: 1.1;
  --tdm-leading-snug:  1.3;
  --tdm-leading-body:  1.65;

  /* --- Spacing scale (4px base — matches ARECH --space-1..11) ------------- */
  --tdm-space-1:  4px;
  --tdm-space-2:  8px;
  --tdm-space-3:  12px;
  --tdm-space-4:  16px;
  --tdm-space-5:  24px;
  --tdm-space-6:  32px;
  --tdm-space-7:  48px;
  --tdm-space-8:  64px;
  --tdm-space-9:  96px;
  --tdm-space-10: 128px;
  --tdm-space-11: 160px;

  /* --- Containers (single uniform container — ARECH responsive manual) ---- */
  --tdm-container:        1200px;  /* caps identically across hero/body/footer */
  --tdm-container-narrow: 720px;
  --tdm-gutter:           16px;    /* steps up at breakpoints in base.css      */

  /* --- Radius (cap 6px on cards per ARECH rule; pill only where allowed) -- */
  --tdm-radius-sm:   4px;
  --tdm-radius-md:   6px;
  --tdm-radius-lg:   12px;
  --tdm-radius-pill: 999px;
  --tdm-radius-btn:  2px;   /* flat action buttons (ARECH FIX-1) */

  /* --- Shadow presets ----------------------------------------------------- */
  --tdm-shadow-sm: 0 1px 2px color-mix(in srgb, #000 30%, transparent);
  --tdm-shadow-md: 0 4px 16px color-mix(in srgb, #000 35%, transparent);
  --tdm-shadow-lg: 0 12px 40px color-mix(in srgb, #000 45%, transparent);

  /* --- Motion (composite-only; respect reduced-motion in base.css) -------- */
  --tdm-dur-fast:  150ms;
  --tdm-dur-base:  250ms;
  --tdm-dur-slow:  400ms;
  --tdm-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tdm-ease-emphatic: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================================
   TDM Blocks — scoped base layer (.tdm-*)

   Scoped under .tdm-* so nothing leaks into the host theme. Provides:
   - the shared block wrapper that consumes per-instance --tdmx-* variables
     (emitted by CssEmitter into a `.tdm-i-<bID>` rule);
   - the uniform container + responsive gutter (ARECH responsive manual);
   - alignment + background plumbing;
   - the mandatory prefers-reduced-motion branch.

   Per-instance variables (set by CssEmitter, fall back to global --tdm-* tokens):
     --tdmx-pad-top/right/bottom/left, --tdmx-margin-top/bottom, --tdmx-gap,
     --tdmx-text, --tdmx-heading, --tdmx-accent, --tdmx-align, --tdmx-max-width,
     --tdmx-bg, --tdmx-radius, --tdmx-border, --tdmx-shadow, --tdmx-font-heading,
     --tdmx-font-body.
   ============================================================================ */

.tdm-block {
  --tdmx-pad-top:    var(--tdm-space-9);
  --tdmx-pad-right:  0px;
  --tdmx-pad-bottom: var(--tdm-space-9);
  --tdmx-pad-left:   0px;
  --tdmx-margin-top: 0px;
  --tdmx-margin-bottom: 0px;
  --tdmx-gap:        var(--tdm-space-5);
  --tdmx-text:       var(--tdm-color-ink);
  --tdmx-heading:    var(--tdm-color-ink);
  --tdmx-accent:     var(--tdm-color-accent);
  --tdmx-align:      left;
  --tdmx-max-width:  var(--tdm-container);
  --tdmx-bg:         transparent;
  --tdmx-radius:     0px;
  --tdmx-border:     0 solid transparent;
  --tdmx-shadow:     none;
  --tdmx-font-heading: var(--tdm-font-headline);
  --tdmx-font-body:    var(--tdm-font-body);

  padding: var(--tdmx-pad-top) var(--tdmx-pad-right) var(--tdmx-pad-bottom) var(--tdmx-pad-left);
  margin-block: var(--tdmx-margin-top) var(--tdmx-margin-bottom);
  /* Band pattern by default, contained mode on demand.
     - 'full' (default, no var emitted): max-width:none + margin-inline:0 =>
       the block fills its parent => FULL-BLEED background (the band).
     - 'contained' (PHP emits --tdmx-block-max:var(--tdm-container) and
       --tdmx-block-mi:auto): the whole block (bg + inner) is capped at 1200
       and centred. The ::before/::after image+overlay are inset:0 of this box,
       so they follow the contained box automatically. */
  max-width: var(--tdmx-block-max, none);
  margin-inline: var(--tdmx-block-mi, 0);
  background: var(--tdmx-bg);
  color: var(--tdmx-text);
  border: var(--tdmx-border);
  border-radius: var(--tdmx-radius);
  box-shadow: var(--tdmx-shadow);
  font-family: var(--tdmx-font-body);
  position: relative;
  isolation: isolate;
}

/* Universal background image + overlay via pseudo-elements — driven purely by
   the emitted --tdmx-bg-image / --tdmx-overlay vars, so EVERY block supports a
   background image with overlay without any per-view markup. When the vars are
   unset (no image chosen) they fall back to none/transparent (invisible). */
.tdm-block::after {            /* image layer, behind everything */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--tdmx-bg-image, none);
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.tdm-block::before {           /* overlay, above image, below content */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tdmx-overlay, transparent);
  pointer-events: none;
}
/* Legacy explicit layers (section/hero/cta views) — now redundant no-ops. */
.tdm-block__bg, .tdm-block__overlay { display: none; }

/* Inner = the container. Single uniform width, responsive gutter. */
.tdm-block__inner {
  width: 100%;
  max-width: var(--tdmx-max-width);
  margin-inline: auto;
  padding-inline: var(--tdm-gutter);
  text-align: var(--tdmx-align);
}

.tdm-block h1, .tdm-block h2, .tdm-block h3,
.tdm-block h4, .tdm-block h5, .tdm-block h6 {
  color: var(--tdmx-heading);
  font-family: var(--tdmx-font-heading);
}

.tdm-block img { max-width: 100%; height: auto; display: block; }

/* Responsive gutter — min-width only (ARECH responsive manual). */
@media (min-width: 680px)  { :root { --tdm-gutter: 20px; } }
@media (min-width: 768px)  { :root { --tdm-gutter: 24px; } }
@media (min-width: 1024px) { :root { --tdm-gutter: 32px; --tdm-container: 1140px; } }
@media (min-width: 1440px) { :root { --tdm-gutter: 40px; --tdm-container: 1200px; } }

/* Shared action buttons (flat radius per ARECH; ≥44px touch target). */
.tdm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--tdm-space-6);
  border-radius: var(--tdm-radius-btn); border: 1px solid transparent;
  font-family: var(--tdm-font-headline); font-weight: var(--tdm-weight-headline);
  font-size: var(--tdm-text-body-sm); text-decoration: none; cursor: pointer;
  transition: background var(--tdm-dur-fast) var(--tdm-ease-standard),
              color var(--tdm-dur-fast) var(--tdm-ease-standard),
              border-color var(--tdm-dur-fast) var(--tdm-ease-standard);
}
.tdm-btn--primary { background: var(--tdmx-accent, var(--tdm-color-accent)); color: var(--tdm-color-on-accent); }
.tdm-btn--primary:hover { background: var(--tdm-color-accent-hover); color: var(--tdm-color-on-accent); }
.tdm-btn--ghost { background: transparent; color: var(--tdmx-text, var(--tdm-color-ink));
  border-color: color-mix(in srgb, var(--tdmx-text, var(--tdm-color-ink)) 35%, transparent); }
.tdm-btn--ghost:hover { border-color: var(--tdmx-accent, var(--tdm-color-accent)); color: var(--tdmx-accent, var(--tdm-color-accent)); }
@media (prefers-reduced-motion: reduce) { .tdm-btn { transition: none; } }

/* Hover effects (composite-only). */
.tdm-hover-lift  { transition: transform var(--tdm-dur-base) var(--tdm-ease-standard); }
.tdm-hover-lift:hover  { transform: translateY(-4px); }
.tdm-hover-scale { transition: transform var(--tdm-dur-base) var(--tdm-ease-standard); }
.tdm-hover-scale:hover { transform: scale(1.02); }
.tdm-hover-glow  { transition: box-shadow var(--tdm-dur-base) var(--tdm-ease-standard); }
.tdm-hover-glow:hover  { box-shadow: 0 0 0 1px var(--tdmx-accent), var(--tdm-shadow-md); }

/* Entrance reveal (one per block; JS adds .is-in when in view). */
.tdm-reveal { opacity: 0; transition: opacity var(--tdm-dur-slow) var(--tdm-ease-emphatic),
                                       transform var(--tdm-dur-slow) var(--tdm-ease-emphatic); }
.tdm-reveal.fade-up    { transform: translateY(24px); }
.tdm-reveal.slide-left { transform: translateX(24px); }
.tdm-reveal.is-in      { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tdm-hover-lift, .tdm-hover-scale, .tdm-hover-glow,
  .tdm-reveal { transition: none !important; transform: none !important; }
  .tdm-reveal { opacity: 1 !important; }
}


/* ARECH Icon Bullets — block-11 view.css */
/* TDM Design layer: each threaded property consumes a per-instance --tdmx-* var
   (emitted only on operator change, scoped to .tdm-i-<bID>) and falls back to the
   block's original hardcoded value — so default = byte-identical. Mirrors the
   proven arech_cta_banner threading (theme-class bg override + bg pseudo-elements).
   container-type:inline-size is PRESERVED so the bullets @container queries below
   keep working unchanged. */
.arech-ib {
    /* New stacking context so the -2/-1 bg pseudo-elements anchor to the root
       and stay behind the inner content. */
    position: relative;
    isolation: isolate;
    padding-block: var(--tdmx-pad-top, var(--space-9)) var(--tdmx-pad-bottom, var(--space-9));
    padding-inline: var(--container-px);
    margin-block: var(--tdmx-margin-top, 0px) var(--tdmx-margin-bottom, 0px);
    container-type: inline-size;
}
/* TDM bg threaded as an OVERRIDE on each theme class: with no Design bg set the
   theme background holds (identical); a Design background wins when picked.
   Theme text colours stay as-is so dark-theme contrast is preserved. */
.arech-ib--theme-paper-2 { background-color: var(--tdmx-bg, var(--paper-2)); color: var(--ink-1); }
.arech-ib--theme-paper-1 { background-color: var(--tdmx-bg, var(--paper-1)); color: var(--ink-1); }
.arech-ib--theme-dark    { background-color: var(--tdmx-bg, var(--dark)); color: var(--off-white); }

/* TDM universal background image + overlay (mirrors tdm_blocks base.css, scoped
   to .arech-ib). Active only when the vars are set; otherwise none/transparent
   → invisible → zero visual change at default. Sit behind the inner content. */
.arech-ib::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tdmx-bg-image, none);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.arech-ib::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tdmx-overlay, transparent);
    pointer-events: none;
}

/* S55 D4 — padding-block ladder per audit prescription.
   Paper variants stay on --space-9 (the section-premium "modest" beat);
   dark variant takes the heavier --space-10 step for visual weight.
   Viewport media query is intentional: section-padding is a top-level
   layout decision tied to viewport, not the block's container width.
   --tdmx-pad-* fall back to the original ladder value per breakpoint so a
   Design override wins, default stays byte-identical. */
@media (min-width: 768px) {
    .arech-ib--theme-dark { padding-block: var(--tdmx-pad-top, var(--space-10)) var(--tdmx-pad-bottom, var(--space-10)); }
}

/* S55 C1+C2 fix — global h2/h4 rules in main.css set color: var(--off-white)
   directly on h2/h4, breaking the cascade from the container color above.
   Re-declare color explicitly on heading descendants per theme variant.
   --tdmx-heading recolours the title, --tdmx-text recolours the label, each
   falling back to the original per-theme token. Dark variant heading/label kept
   on --off-white fallback so a light-theme Design colour can't darken them into
   invisibility on near-black (mirrors cta_banner's dark-hardcode note). */
.arech-ib--theme-paper-2 .arech-ib__h2,
.arech-ib--theme-paper-1 .arech-ib__h2 { color: var(--tdmx-heading, var(--ink-1)); }
.arech-ib--theme-paper-2 .arech-ib__label,
.arech-ib--theme-paper-1 .arech-ib__label { color: var(--tdmx-text, var(--ink-1)); }
.arech-ib--theme-dark .arech-ib__h2 { color: var(--tdmx-heading, var(--off-white)); }
.arech-ib--theme-dark .arech-ib__label { color: var(--tdmx-text, var(--off-white)); }

/* __inner: max-width threaded; text-align threaded with a `left` fallback so the
   default keeps the block's left-aligned reading layout. The bullets grid/list
   layout below is NOT touched. */
.arech-ib__inner {
    max-width: var(--tdmx-max-width, var(--container));
    margin-inline: auto;
    text-align: var(--tdmx-align, left);
}

.arech-ib__header { max-width: 60ch; margin-bottom: var(--space-7); }
.arech-ib__eyebrow {
    font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange));
    margin: 0 0 var(--space-3);
}
.arech-ib__h2 {
    color: inherit; /* defeat global h2{color:off-white}; take the themed container color */
    font-family: var(--font-display); font-weight: 700;
    /* S55 D3 — clamp aligned to prototype global h2 (L391-398).
       Previous clamp(28px, 4vw, 48px) was two scale steps small. */
    font-size: clamp(42px, 5vw, 72px); line-height: 1.1;
    margin: 0 0 var(--space-4);
    /* S56 P3 — soft cap raised from 38ch to 56ch. 38ch forced
       "Why Buyers Choose a Factory-Direct LED Display Supplier"
       (~52 chars) to wrap on 4 narrow lines. 56ch holds the headline
       on a balanced 2-3 line break at common viewport widths. */
    max-width: min(56ch, 100%);
}
.arech-ib__pullquote {
    font-family: var(--font-body); font-size: 18px; line-height: 1.5;
    font-style: italic; color: var(--tdmx-accent, var(--orange));
    border-left: 3px solid var(--tdmx-accent, var(--orange)); padding-left: var(--space-4);
    margin: 0;
}

.arech-ib__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--space-5);
}
@container (min-width: 768px) {
    .arech-ib--two-col .arech-ib__list { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-7); }
}

.arech-ib__item {
    display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4); align-items: start;
}
@container (max-width: 480px) {
    .arech-ib__item { grid-template-columns: 1fr; gap: var(--space-3); }
}

.arech-ib__icon {
    display: grid; place-items: center;
    width: 64px; height: 64px;
    /* Bullet-icon accent threaded: both the soft tint backdrop and the glyph
       colour derive from --tdmx-accent (orange fallback), so a Design accent
       recolours the whole icon chip systematically via color-mix. */
    background-color: color-mix(in oklch, var(--tdmx-accent, var(--orange)) 12%, transparent);
    color: var(--tdmx-accent, var(--orange)); border-radius: var(--radius-sm);
}
.arech-ib__icon img { display: block; width: 32px; height: 32px; }

.arech-ib__copy { padding-top: var(--space-2); }
.arech-ib__label {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(18px, 1.8vw, 22px); line-height: 1.2;
    margin: 0 0 var(--space-2);
}
.arech-ib__body {
    font-family: var(--font-body); font-size: 16px; line-height: 1.55;
    /* Body text threaded → --tdmx-text. The original colour was inherited (no
       explicit colour); the fallback is `inherit` so default = byte-identical
       (themed container colour at 0.86 opacity). */
    color: var(--tdmx-text, inherit);
    margin: 0 0 var(--space-2); opacity: 0.86;
}
.arech-ib__link {
    font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange)); text-decoration: none;
    /* Touch target: 44px-tall inline-flex hit area. */
    display: inline-flex; min-height: 44px; align-items: center;
    transition: color var(--motion-fast) var(--ease-standard);
}
/* Hover/focus colours kept hardcoded on the systematic orange-bright token
   (no hover var in the contract); same rationale as cta_banner. */
.arech-ib__link:hover, .arech-ib__link:focus-visible { color: var(--orange-bright); }
.arech-ib__link:focus-visible { outline: 2px solid var(--tdmx-accent, var(--orange)); outline-offset: 2px; }

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

.ccm-edit-mode .arech-ib { padding-block: var(--space-7); }

@media print {
    .arech-ib { background: #fff !important; color: #000 !important; }
    .arech-ib__icon { background: transparent !important; }
}


/* ============================================================
   ARECH Feature Cards block — front-end styles.
   Port of `site/src/components/products-hub/ProductsHubFamilyGrid.astro`
   styles, BEM-renamed to `.arech-fc__*` and parameterised so the
   block adapts to 2/3/4 desktop columns via .arech-fc--cols-* class.
   ============================================================ */

.arech-fc {
    /* TDM Design layer: each property consumes a per-instance --tdmx-* var
       (emitted only on operator change, scoped to .tdm-i-<bID>) and falls back
       to the block's original hardcoded value — so default = byte-identical. */
    background: var(--tdmx-bg, var(--paper-1));
    color: var(--tdmx-text, var(--ink-2));
    padding-block: var(--tdmx-pad-top, var(--space-9)) var(--tdmx-pad-bottom, var(--space-9));
    padding-inline: var(--container-px);
    margin-block: var(--tdmx-margin-top, 0px) var(--tdmx-margin-bottom, 0px);
    /* Required so the bg-image/overlay pseudo-elements can position behind. */
    position: relative;
    isolation: isolate;
}
/* TDM universal background image + overlay (mirrors tdm_blocks base.css, scoped
   to .arech-fc). Active only when the vars are set; otherwise none/transparent
   → invisible → zero visual change at default. */
.arech-fc::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tdmx-bg-image, none);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.arech-fc::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tdmx-overlay, transparent);
    pointer-events: none;
}
@media (min-width: 768px) {
    .arech-fc {
        padding-block: var(--tdmx-pad-top, var(--space-10)) var(--tdmx-pad-bottom, var(--space-10));
    }
}
@media (min-width: 1024px) {
    .arech-fc {
        padding-block: var(--tdmx-pad-top, var(--space-11)) var(--tdmx-pad-bottom, var(--space-11));
    }
}

.arech-fc__inner {
    max-width: var(--tdmx-max-width, var(--container));
    margin-inline: auto;
    text-align: var(--tdmx-align, left);
}

/* ---- Section head ---- */
.arech-fc__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
    align-items: end;
}
@media (min-width: 1024px) {
    .arech-fc__head {
        grid-template-columns: 1.5fr 1fr;
        gap: var(--space-7);
    }
}

.arech-fc__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange-text));
    margin-bottom: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.arech-fc__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--tdmx-accent, var(--orange-text));
}

.arech-fc__title {
    font-family: var(--font-headline);
    font-weight: 600;
    /* S55 D3 — clamp aligned to prototype global h2 (L391-398).
       Previous clamp(32px, 4vw, 56px) drifted small relative to the
       prototype's 42-72px range. Padding ladder already matches
       prototype `section-premium` (96 → 128 → 160) per audit § 2 row 5. */
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--tdmx-heading, var(--ink-1));
    margin: 0;
}
.arech-fc__accent {
    color: var(--tdmx-accent, var(--orange-text));
}

.arech-fc__lead {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--tdmx-text, var(--ink-3));
    max-width: 48ch;
    margin: 0;
}

/* ---- Grid ---- */
.arech-fc__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 680px) {
    .arech-fc__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }
}
@media (min-width: 1024px) {
    .arech-fc--cols-2 .arech-fc__grid { grid-template-columns: repeat(2, 1fr); }
    .arech-fc--cols-3 .arech-fc__grid { grid-template-columns: repeat(3, 1fr); }
    .arech-fc--cols-4 .arech-fc__grid { grid-template-columns: repeat(3, 1fr); }

    .arech-fc--cols-3 .arech-fc__cell[data-span="wide"] { grid-column: span 2; }
    .arech-fc--cols-4 .arech-fc__cell[data-span="wide"] { grid-column: span 2; }
}
@media (min-width: 1440px) {
    .arech-fc--cols-4 .arech-fc__grid { grid-template-columns: repeat(4, 1fr); }
}

.arech-fc__cell {
    display: flex;
}

/* ---- Card ---- */
.arech-fc__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--paper-0);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
}
a.arech-fc__card:hover,
a.arech-fc__card:focus-visible {
    border-color: var(--orange-link);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(10, 10, 11, 0.08);
}
a.arech-fc__card:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

.arech-fc__img-wrap {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    /* Transparent: product photos are transparent PNG/WebP, so they sit on the
       card surface instead of inside a filled grey box. contain keeps the whole
       product visible (never cropped). */
    background: transparent;
}
.arech-fc__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--motion-normal) var(--ease-standard);
}
a.arech-fc__card:hover .arech-fc__img {
    transform: scale(1.04);
}

.arech-fc__num-wrap {
    padding: var(--space-5) var(--space-5) 0;
}
.arech-fc__num {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--off-white);
    background: rgba(10, 10, 11, 0.65);
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
}
.arech-fc__num--solo {
    position: static;
    display: inline-block;
    color: var(--orange-text);
    background: transparent;
    padding: 0;
    font-size: 22px;
    font-weight: 700;
}

.arech-fc__body {
    padding: var(--space-5) var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.arech-fc__title3 {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.25;
    color: var(--tdmx-heading, var(--ink-1));
    margin: 0;
}
.arech-fc__body-text {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--tdmx-text, var(--ink-3));
    margin: 0;
}
.arech-fc__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange-link));
    transition: color var(--motion-fast) var(--ease-standard);
}
a.arech-fc__card:hover .arech-fc__cta {
    color: var(--orange-text);
}
.arech-fc__cta svg {
    transition: transform var(--motion-fast) var(--ease-standard);
}
a.arech-fc__card:hover .arech-fc__cta svg {
    transform: translateX(4px);
}

/* ---- Footer link ---- */
.arech-fc__foot {
    margin-top: var(--space-7);
    text-align: center;
}
.arech-fc__talk {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--orange-text);
    border-bottom: 1px solid var(--orange-link);
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-fc__talk:hover {
    color: var(--ink-1);
}
.arech-fc__talk svg {
    transition: transform var(--motion-fast) var(--ease-standard);
}
.arech-fc__talk:hover svg {
    transform: translateX(4px);
}

/* ---- Reveal stagger ---- */
.arech-fc .arech-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--motion-reveal) var(--ease-standard),
        transform var(--motion-reveal) var(--ease-standard);
}
.arech-fc .arech-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}
.arech-fc .arech-reveal--s1 { transition-delay: var(--stagger-1); }
.arech-fc .arech-reveal--s2 { transition-delay: var(--stagger-2); }
.arech-fc .arech-reveal--s3 { transition-delay: var(--stagger-3); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .arech-fc .arech-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .arech-fc__card,
    .arech-fc__img,
    .arech-fc__cta svg,
    .arech-fc__talk svg {
        transition: none !important;
        transform: none !important;
    }
}

/* ---- Concrete edit-mode shim ---- */
.ccm-edit-mode .arech-fc {
    padding-block: var(--space-6);
}


/* ARECH Numbered Steps — block-10 view.css */
/* TDM Design layer: each property consumes a per-instance --tdmx-* var
   (emitted only on operator change, scoped to .tdm-i-<bID>) and falls back
   to the block's original hardcoded value — so default = byte-identical. */
.arech-ns {
    /* New stacking context so the -2/-1 bg pseudo-elements anchor to the root. */
    position: relative;
    isolation: isolate;
    padding-block: var(--tdmx-pad-top, var(--space-9)) var(--tdmx-pad-bottom, var(--space-9));
    padding-inline: var(--container-px);
    margin-block: var(--tdmx-margin-top, 0px) var(--tdmx-margin-bottom, 0px);
    container-type: inline-size;
}
/* TDM universal background image + overlay (mirrors tdm_blocks base.css, scoped
   to .arech-ns). Active only when the vars are set; otherwise none/transparent
   → invisible → zero visual change at default. Sit behind the inner content. */
.arech-ns::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tdmx-bg-image, none);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.arech-ns::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tdmx-overlay, transparent);
    pointer-events: none;
}

/* TDM bg threaded as an OVERRIDE on each theme class: with no Design bg set the
   theme background holds (identical); a Design background wins when picked.
   Theme text colours stay as-is so dark-theme contrast is preserved. */
.arech-ns--theme-paper-2 { background-color: var(--tdmx-bg, var(--paper-2)); color: var(--ink-1); }
.arech-ns--theme-paper-1 { background-color: var(--tdmx-bg, var(--paper-1)); color: var(--ink-1); }
.arech-ns--theme-dark    { background-color: var(--tdmx-bg, var(--dark)); color: var(--off-white); }

/* S55 D4 — padding-block ladder per audit prescription.
   Paper-2 (paper "How to Spec" usage) stays modest at --space-9;
   dark variant steps to --space-10 from 768+ for visual weight.
   --tdmx-pad-* (when set) override the per-theme ladder. */
@media (min-width: 768px) {
    .arech-ns--theme-dark { padding-block: var(--tdmx-pad-top, var(--space-10)) var(--tdmx-pad-bottom, var(--space-10)); }
}

.arech-ns__inner {
    max-width: var(--tdmx-max-width, var(--container));
    margin-inline: auto;
    text-align: var(--tdmx-align, start);
}

.arech-ns__header { max-width: 60ch; margin-bottom: var(--space-7); }
.arech-ns__eyebrow {
    font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange));
    margin: 0 0 var(--space-3);
}
.arech-ns__h2 {
    /* Default inherits the themed container color (defeats global h2{color:off-white});
       --tdmx-heading wins when the operator picks a Design heading colour. */
    color: var(--tdmx-heading, inherit);
    font-family: var(--font-display); font-weight: 700;
    /* S55 D3 — clamp aligned to prototype global h2 (L391-398). */
    font-size: clamp(42px, 5vw, 72px); line-height: 1.1;
    margin: 0 0 var(--space-4);
    /* S55 D2/D1 — soft cap replaces hard 28ch. */
    max-width: min(38ch, 100%);
}
.arech-ns__intro {
    font-family: var(--font-body); font-size: 18px; line-height: 1.6;
    color: var(--tdmx-text, inherit);
    margin: 0; max-width: 60ch; opacity: 0.86;
}

.arech-ns__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; gap: var(--space-6);
    counter-reset: arech-ns;
}

.arech-ns__step {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: start;
    padding-block: var(--space-4) var(--space-5);
    border-top: 1px solid color-mix(in oklch, currentColor 12%, transparent);
}
.arech-ns__step:last-of-type { border-bottom: 1px solid color-mix(in oklch, currentColor 12%, transparent); }

/* Mobile-first: number stacks above copy by default; the
   <number> 1fr two-column layout engages at MD 680 (container). */
@container (min-width: 680px) {
    .arech-ns__step { grid-template-columns: 96px 1fr; gap: var(--space-5); }
}

.arech-ns__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    color: var(--tdmx-accent, var(--orange));
    letter-spacing: -0.02em;
}

.arech-ns__copy { padding-top: var(--space-3); }
.arech-ns__title {
    /* Default inherits the themed container color (defeats global h3{color:off-white});
       --tdmx-heading wins when the operator picks a Design heading colour. */
    color: var(--tdmx-heading, inherit);
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(20px, 2vw, 28px); line-height: 1.2;
    margin: 0 0 var(--space-2);
}
.arech-ns__body {
    font-family: var(--font-body); font-size: 16px; line-height: 1.55;
    color: var(--tdmx-text, inherit);
    margin: 0; opacity: 0.86;
}

.arech-ns__closing {
    font-family: var(--font-body); font-size: 18px; line-height: 1.5;
    color: var(--tdmx-accent, var(--orange)); font-weight: 500;
    margin: var(--space-7) 0 0;
}

@media (prefers-reduced-motion: reduce) { /* no animations to disable */ }
.ccm-edit-mode .arech-ns { padding-block: var(--space-7); }

@media print {
    .arech-ns { background: #fff !important; color: #000 !important; }
    .arech-ns__num { color: #000 !important; }
}


/* ======================================================================
   TDM Comparison — feature comparison matrix (B2B "us vs them" / variants).
   Tokens come from the package tokens.css (--tdm-*); Design-controlled props
   consume var(--tdmx-*, <fallback>) so a control left at its default keeps
   this CSS fallback (emit-only-on-change).

   Namespaced .tdm-cmp__* only — NOT .reveal (the package-global scroll-reveal
   class whose base state is opacity:0). The responsive idiom mirrors tdm_table:
   an overflow-x scroll wrapper + a sticky first column on narrow screens.
   ====================================================================== */

.tdm-cmp {
  /* outer block surface — Design layer drives these (fallbacks = neutral band) */
  padding-top: var(--tdmx-pad-top, var(--tdm-space-9, 80px));
  padding-bottom: var(--tdmx-pad-bottom, var(--tdm-space-9, 80px));
  padding-left: var(--tdmx-pad-left, 0);
  padding-right: var(--tdmx-pad-right, 0);
  margin-top: var(--tdmx-margin-top, 0);
  margin-bottom: var(--tdmx-margin-bottom, 0);
}

.tdm-cmp__inner {
  text-align: var(--tdmx-align, left);
}

/* ---------- header ---------- */
.tdm-cmp__header {
  max-width: 64ch;
  margin-bottom: var(--tdm-space-7, 48px);
}
.tdm-cmp__eyebrow {
  font-family: var(--tdm-font-mono, monospace);
  font-size: var(--tdm-text-eyebrow, 0.8125rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  margin: 0 0 var(--tdm-space-2, 8px);
}
.tdm-cmp__heading {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.15;
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
  margin: 0;
}
.tdm-cmp__intro {
  margin: var(--tdm-space-3, 12px) 0 0;
  font-size: var(--tdm-text-body, 1rem);
  line-height: 1.6;
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
}
/* When centred, keep the header's max-width box centred too. */
.tdm-block[style*="--tdmx-align: center"] .tdm-cmp__header,
.tdm-block[style*="--tdmx-align:center"] .tdm-cmp__header { margin-inline: auto; }

/* ---------- scroll wrapper (responsive: horizontal scroll on phones) ------- */
.tdm-cmp__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* The optional Design radius + hairline border frame the whole matrix. */
  border-radius: var(--tdmx-radius, var(--tdm-radius-md, 6px));
  border: var(--tdmx-border, 1px solid var(--tdm-hairline, color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 10%, transparent)));
}

/* ---------- table ---------- */
.tdm-cmp__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tdm-text-body, 1rem);
  color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA));
  text-align: left;
  /* Keep columns comfortably wide so the matrix scrolls on phones rather than
     cramping — the sticky first column stays readable. */
  min-width: 36rem;
}
.tdm-cmp--cols-4 .tdm-cmp__table { min-width: 48rem; }

.tdm-cmp__table th,
.tdm-cmp__table td {
  padding: var(--tdm-space-3, 12px) var(--tdm-space-4, 20px);
  vertical-align: middle;
  border-bottom: 1px solid var(--tdm-hairline, color-mix(in srgb, var(--tdm-color-ink, #F5F4F0) 8%, transparent));
}
.tdm-cmp__table tbody tr:last-child th,
.tdm-cmp__table tbody tr:last-child td { border-bottom: 0; }

/* option columns are centred; the feature column stays left */
.tdm-cmp__colhead,
.tdm-cmp__cell { text-align: center; }

/* ---------- column headers ---------- */
.tdm-cmp__corner { background: transparent; }
.tdm-cmp__colhead {
  font-family: var(--tdmx-font-heading, var(--tdm-font-headline, sans-serif));
  font-weight: var(--tdm-weight-headline, 600);
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
  white-space: nowrap;
  vertical-align: bottom;
}
.tdm-cmp__colhead-label { display: block; }
.tdm-cmp__badge {
  display: inline-block;
  margin-top: var(--tdm-space-1, 4px);
  font-family: var(--tdm-font-mono, monospace);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tdm-color-on-accent, #FFFFFF);
  background: var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
  padding: 2px 8px;
  border-radius: var(--tdm-radius-pill, 999px);
}

/* featured column — accent-tinted band + top accent rule */
.tdm-cmp__colhead--featured,
.tdm-cmp__cell--featured {
  background: color-mix(in srgb, var(--tdmx-accent, var(--tdm-color-accent, #E8651A)) 7%, transparent);
}
.tdm-cmp__colhead--featured {
  box-shadow: inset 0 3px 0 0 var(--tdmx-accent, var(--tdm-color-accent, #E8651A));
}

/* ---------- feature (row) labels — sticky first column ---------- */
.tdm-cmp__rowhead {
  font-weight: 600;
  text-align: left;
  color: var(--tdmx-heading, var(--tdm-color-ink, #F5F4F0));
}
.tdm-cmp__corner,
.tdm-cmp__rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--tdm-color-surface, #0D0D0F);
}

/* ---------- cell marks ---------- */
.tdm-cmp__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tdm-cmp__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.tdm-cmp__mark--yes { color: var(--tdmx-accent, var(--tdm-color-accent, #E8651A)); }
.tdm-cmp__mark--no  { color: var(--tdm-color-ink-3, #6B6B75); }
.tdm-cmp__mark--dash { color: var(--tdm-color-ink-3, #6B6B75); }
.tdm-cmp__text { color: var(--tdmx-text, var(--tdm-color-ink-2, #B0B0BA)); }

/* screen-reader-only label for icon cells */
.tdm-cmp__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* images (if any free-text cell ever carries one) never overflow */
.tdm-cmp img { max-width: 100%; height: auto; display: block; }

/* reduced-motion: the package reveal observer already respects this; no block
   animation runs here regardless. Stated for clarity. */
@media (prefers-reduced-motion: reduce) {
  .tdm-cmp * { scroll-behavior: auto; }
}


/* ============================================================
   ARECH Logo Showcase / Trust Bar — front-end styles.
   Port of `site/src/components/home/HomeTrustBar.astro` lines 50-90.
   Theme variants: --paper-2 (default), --paper-1 (lighter), --dark.
   ============================================================ */

.arech-ls {
    overflow: hidden;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    /* S55 D4 — token-anchored padding (was magic 18px).
       Logo strip is a decorative interlude between sections —
       lighter than full section-premium rhythm but heavy enough
       to register as its own band. --space-5 (24px) hits the
       compositional sweet spot per the section-rhythm cascade. */
    padding-block: var(--space-5);
    padding-inline: 0;
}
.arech-ls--paper-2 { background: var(--paper-2); }
.arech-ls--paper-1 { background: var(--paper-1); }
.arech-ls--dark {
    background: var(--dark-2);
    border-color: color-mix(in oklch, var(--off-white) 8%, transparent);
}

.arech-ls__track {
    display: flex;
    /* Shorthand split — duration is supplied per-instance via inline
       style="animation-duration: <speed>s" in view.php. The 30s fallback
       below keeps the marquee animated even if the inline style fails to
       render (e.g. cache-stripped). css-architect gate (S49): a missing
       <duration> in the `animation` shorthand resolves to 0s and the
       marquee never moves; splitting the longhand properties is the
       safest fix. */
    animation-name: arechLsScroll;
    animation-duration: 30s;
    animation-timing-function: var(--ease-linear);
    animation-iteration-count: infinite;
    white-space: nowrap;
    width: max-content;
}
@keyframes arechLsScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.arech-ls__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-inline: var(--space-7);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-right: 1px solid var(--hairline);
    flex-shrink: 0;
}
.arech-ls--dark .arech-ls__item {
    color: var(--light);
    border-right-color: color-mix(in oklch, var(--off-white) 8%, transparent);
}

.arech-ls__tick {
    color: var(--orange);
}
.arech-ls--dark .arech-ls__tick {
    color: var(--orange-bright);
}

/* ---- Optional per-item logo image (replaces the text label) ----
   The logo item uses a FIXED-WIDTH slot so the marquee track width is
   deterministic regardless of when each logo decodes. Without this, a lazy
   SVG/raster with `width:auto` would have zero width until decode, then grow,
   shifting the seamless `translateX(-50%)` loop math (visible seam + CLS).
   The fixed slot reserves space up-front, so decode timing is irrelevant. */
.arech-ls__item--logo {
    padding-block: 0;
    padding-inline: var(--space-5);
    inline-size: 180px;          /* fixed slot — no clean token at this width */
    justify-content: center;
}
/* The <picture> is display:contents globally, so the box sizing lives on the
   <img>. Cap the logo to a band-rhythm height (tied to the band's own padding
   token); width follows aspect, object-fit contain keeps it un-cropped. */
.arech-ls__logo-img {
    display: block;
    block-size: var(--space-5);  /* 24px — matches the band padding unit */
    inline-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .arech-ls__track {
        animation: none;
    }
}

/* ---- Print ---- */
@media print {
    .arech-ls { display: none !important; }
}

/* ---- Concrete edit-mode shim ---- */
.ccm-edit-mode .arech-ls__track {
    animation-play-state: paused;
}


/* ============================================================
   ARECH FAQ Accordion block — front-end styles.
   Port of `site/src/components/product-type/ProductTypeSectionFAQ.astro`
   lines 77-200, BEM-renamed to `.arech-faq__*`.
   Zero JS — uses native <details>/<summary> for accordion behaviour.
   ============================================================ */

.arech-faq {
    /* TDM Design layer: each property consumes a per-instance --tdmx-* var
       (emitted only on operator change, scoped to .tdm-i-<bID>) and falls back
       to the block's original hardcoded value — so default = byte-identical. */
    background: var(--tdmx-bg, var(--paper-1));
    color: var(--ink-2);
    /* New stacking context so the -2/-1 bg pseudo-elements anchor to the root. */
    position: relative;
    isolation: isolate;
    /* S55 D4 — FAQ stays modest (paper surface). Default --space-9
       at base; --space-10 from 768+ keeps adjacent CTA section
       (which steps to --space-11) visually distinct. */
    padding-block: var(--tdmx-pad-top, var(--space-9)) var(--tdmx-pad-bottom, var(--space-9));
    padding-inline: var(--container-px);
    margin-block: var(--tdmx-margin-top, 0px) var(--tdmx-margin-bottom, 0px);
}
/* TDM universal background image + overlay (mirrors tdm_blocks base.css, scoped
   to .arech-faq). Active only when the vars are set; otherwise none/transparent
   → invisible → zero visual change at default. Sit behind the inner content. */
.arech-faq::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tdmx-bg-image, none);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.arech-faq::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tdmx-overlay, transparent);
    pointer-events: none;
}
@media (min-width: 768px) {
    .arech-faq {
        padding-block: var(--tdmx-pad-top, var(--space-10)) var(--tdmx-pad-bottom, var(--space-10));
    }
}

.arech-faq__inner {
    /* S73 FIX-5 — full container, left-aligned (no longer a narrow centered
       reading column). 70/30 two-column grid from LG-up; single column on
       phone + small tablet with the side image hidden. Caps identically to
       every other section so the FAQ left edge aligns to the container. */
    max-width: var(--tdmx-max-width, var(--container));
    margin-inline: auto;
    /* text-align threaded for parity with the shared Design layer; the 70/30
       grid layout below is unaffected by it (children set their own alignment). */
    text-align: var(--tdmx-align, left);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: start;
}
@media (min-width: 1024px) {
    .arech-faq__inner {
        /* 70% FAQ / 30% side image. gap is part of the track sizing via the
           fr units so the columns share the gutter cleanly. */
        grid-template-columns: 7fr 3fr;
        gap: var(--space-8);
    }
}

/* S78b — no side image set (public): collapse the FAQ to a single full-width
   column. Higher specificity than the media-query rule above, so it wins at all
   breakpoints without a media query. The 70/30 grid returns once an image is
   picked (the --noaside modifier is dropped by the view). */
.arech-faq--noaside .arech-faq__inner {
    grid-template-columns: 1fr;
}

/* Left column keeps a comfortable reading measure without forcing the
   accordion items narrow. */
.arech-faq__main {
    min-width: 0;
}

/* ---- Side image (30%) ---- */
.arech-faq__aside {
    /* Hidden on phone + small tablet — FAQ goes full width there. */
    display: none;
}
@media (min-width: 1024px) {
    .arech-faq__aside {
        display: block;
        align-self: start;
        position: sticky;
        top: var(--space-8);
    }
}

.arech-faq__image {
    max-width: 100%;
    height: auto;
    display: block;
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--hairline);
    object-fit: cover;
    aspect-ratio: 3 / 4;
}

.arech-faq__image-tbd {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--paper-2);
    border: 1px dashed var(--hairline);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-5);
}
.arech-faq__image-tbd-label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ---- Section head ---- */
.arech-faq__head {
    margin-bottom: var(--space-7);
}

.arech-faq__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange-text));
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space-4);
}
.arech-faq__eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--tdmx-accent, var(--orange-text));
}

.arech-faq__title {
    font-family: var(--font-headline);
    font-weight: 600;
    /* S55 D3 — clamp aligned to prototype global h2 (L391-398). */
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--tdmx-heading, var(--ink-1));
    margin: 0;
    /* S73 FIX-5 — readable measure cap. The block now sits in a 70% column
       (wider than the old 880px narrow container), so 38ch keeps the headline
       from running edge-to-edge while still letting it wrap naturally. */
    max-width: min(38ch, 100%);
}
.arech-faq__accent {
    color: var(--tdmx-accent, var(--orange-text));
}

/* ---- Accordion list ---- */
.arech-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.arech-faq__item {
    background: var(--paper-2);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--motion-fast) var(--ease-standard);
}
.arech-faq__item[open] {
    border-color: var(--orange-link);
}

.arech-faq__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    list-style: none;
    cursor: pointer;
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.45;
    color: var(--tdmx-text, var(--ink-1));
    user-select: none;
}
.arech-faq__summary::-webkit-details-marker { display: none; }
.arech-faq__summary:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}
.arech-faq__summary > span:first-child {
    flex: 1;
}

.arech-faq__chev {
    display: inline-flex;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--tdmx-accent, var(--orange-link));
    transition: transform var(--motion-fast) var(--ease-standard);
}
.arech-faq__item[open] .arech-faq__chev {
    transform: rotate(180deg);
}
.arech-faq__chev svg {
    width: 100%;
    height: 100%;
}

.arech-faq__body {
    padding: 0 var(--space-6) var(--space-6);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--tdmx-text, var(--ink-3));
}
.arech-faq__body a {
    color: var(--orange-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-faq__body a:hover {
    color: var(--orange-text);
}

/* ---- Reveal stagger ---- */
.arech-faq .arech-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--motion-reveal) var(--ease-standard),
        transform var(--motion-reveal) var(--ease-standard);
}
.arech-faq .arech-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}
.arech-faq .arech-reveal--s1 { transition-delay: var(--stagger-1); }
.arech-faq .arech-reveal--s2 { transition-delay: var(--stagger-2); }
.arech-faq .arech-reveal--s3 { transition-delay: var(--stagger-3); }
.arech-faq .arech-reveal--s4 { transition-delay: var(--stagger-4); }
.arech-faq .arech-reveal--s5 { transition-delay: var(--stagger-5); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .arech-faq .arech-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .arech-faq__chev,
    .arech-faq__item {
        transition: none !important;
    }
}

/* ---- Concrete edit-mode shim ---- */
.ccm-edit-mode .arech-faq {
    padding-block: var(--space-6);
}


/* ============================================================
   ARECH News Carousel block — block-32 view.css
   Horizontal slide carousel with arrows + dots + keyboard + swipe.
   All values reference tokens from themes/arech/css/main.css :root.
   ============================================================ */

.arech-nc {
    padding-block: var(--space-8);
    padding-inline: var(--container-px);
    background-color: var(--paper-1);
    color: var(--ink-1);
    container-type: inline-size;
}
@media (min-width: 768px) { .arech-nc { padding-block: var(--space-9); } }

.arech-nc__inner {
    /* S69 — single container; gutter comes from the outer .arech-nc band. */
    max-width: var(--container);
    margin-inline: auto;
}

/* ---- Header ---- */
.arech-nc__head {
    margin-bottom: var(--space-6);
    max-width: 64ch;
}
.arech-nc__eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-text);
    margin: 0 0 var(--space-3);
}
.arech-nc__h2 {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--ink-1);
    margin: 0;
}

/* ---- Viewport / track ---- */
.arech-nc__viewport {
    overflow: hidden;
    width: 100%;
    margin-top: var(--space-4);
}
.arech-nc__track {
    display: flex;
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform var(--motion-slow) var(--ease-decelerate);
    will-change: transform;
}
.arech-nc__slide {
    flex: 0 0 calc((100% - 0 * var(--space-4)) / 1);
    min-width: 0;
}

/* slides-visible — xs default 1 */
.arech-nc[data-arech-nc-slides-xs="1"] .arech-nc__slide { flex-basis: 100%; }
.arech-nc[data-arech-nc-slides-xs="2"] .arech-nc__slide {
    flex-basis: calc((100% - var(--space-4)) / 2);
}

@container (min-width: 768px) {
    .arech-nc[data-arech-nc-slides-md="1"] .arech-nc__slide { flex-basis: 100%; }
    .arech-nc[data-arech-nc-slides-md="2"] .arech-nc__slide {
        flex-basis: calc((100% - var(--space-4)) / 2);
    }
    .arech-nc[data-arech-nc-slides-md="3"] .arech-nc__slide {
        flex-basis: calc((100% - 2 * var(--space-4)) / 3);
    }
    .arech-nc[data-arech-nc-slides-md="4"] .arech-nc__slide {
        flex-basis: calc((100% - 3 * var(--space-4)) / 4);
    }
}

@container (min-width: 1024px) {
    .arech-nc[data-arech-nc-slides-lg="1"] .arech-nc__slide { flex-basis: 100%; }
    .arech-nc[data-arech-nc-slides-lg="2"] .arech-nc__slide {
        flex-basis: calc((100% - var(--space-4)) / 2);
    }
    .arech-nc[data-arech-nc-slides-lg="3"] .arech-nc__slide {
        flex-basis: calc((100% - 2 * var(--space-4)) / 3);
    }
    .arech-nc[data-arech-nc-slides-lg="4"] .arech-nc__slide {
        flex-basis: calc((100% - 3 * var(--space-4)) / 4);
    }
    .arech-nc[data-arech-nc-slides-lg="5"] .arech-nc__slide {
        flex-basis: calc((100% - 4 * var(--space-4)) / 5);
    }
}

/* ---- Card ---- */
.arech-nc__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--paper-0);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition:
        transform var(--motion-normal) var(--ease-standard),
        border-color var(--motion-normal) var(--ease-standard),
        box-shadow var(--motion-normal) var(--ease-standard);
}
.arech-nc__card:hover,
.arech-nc__card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--orange);
    box-shadow: 0 8px 24px color-mix(in oklch, var(--ink-1) 8%, transparent);
}
.arech-nc__card:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}

.arech-nc__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--paper-3);
}
.arech-nc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--motion-slow) var(--ease-standard);
}
.arech-nc__card:hover .arech-nc__media img {
    transform: scale(1.04);
}

.arech-nc__body {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.arech-nc__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0;
}
.arech-nc__cat { color: var(--orange-text); font-weight: 600; }
.arech-nc__date { opacity: 0.8; }

.arech-nc__h4 {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.3;
    margin: 0;
    color: var(--ink-1);
}
.arech-nc__excerpt {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-3);
    margin: 0;
}

/* ---- Controls ---- */
.arech-nc__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
}
.arech-nc__arrow {
    background-color: var(--paper-0);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-pill);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-1);
    cursor: pointer;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard);
}
.arech-nc__arrow:hover,
.arech-nc__arrow:focus-visible {
    background-color: var(--orange);
    color: var(--white);
    border-color: var(--orange);
}
.arech-nc__arrow:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-nc__arrow[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.arech-nc__dots {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}
/* Visual pip stays 8px; ::before extender pushes touch-target to 44x44
   per WCAG 2.5.5 Target Size (Enhanced). Fix from S52 css-architect gate B1. */
.arech-nc__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background-color: color-mix(in oklch, var(--ink-1) 18%, transparent);
    border: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        transform var(--motion-fast) var(--ease-standard);
}
.arech-nc__dot::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
}
.arech-nc__dot:hover { background-color: color-mix(in oklch, var(--ink-1) 40%, transparent); }
.arech-nc__dot.is-active {
    background-color: var(--orange);
    transform: scale(1.25);
}
.arech-nc__dot:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px;
}

/* ---- Live region (visually hidden) ---- */
.arech-nc__live {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- Tail CTA ---- */
.arech-nc__tail {
    margin: var(--space-6) 0 0;
    text-align: center;
}
.arech-nc__tail-link {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--orange-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--orange-text);
    padding-bottom: 2px;
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-nc__tail-link:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* ---- Reveal fade on container enter ---- */
.arech-nc__viewport,
.arech-nc__controls,
.arech-nc__tail {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--motion-reveal) var(--ease-standard),
        transform var(--motion-reveal) var(--ease-standard);
}
.arech-nc.is-in .arech-nc__viewport { transition-delay: var(--stagger-1); opacity: 1; transform: translateY(0); }
.arech-nc.is-in .arech-nc__controls { transition-delay: var(--stagger-2); opacity: 1; transform: translateY(0); }
.arech-nc.is-in .arech-nc__tail { transition-delay: var(--stagger-3); opacity: 1; transform: translateY(0); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .arech-nc__track { transition: none; }
    .arech-nc__media img { transition: none; }
    .arech-nc__card { transition: none; }
    .arech-nc__card:hover { transform: none; }
    .arech-nc__card:hover .arech-nc__media img { transform: none; }
    .arech-nc__viewport,
    .arech-nc__controls,
    .arech-nc__tail {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Concrete edit-mode shim ---- */
.ccm-edit-mode .arech-nc {
    padding-block: var(--space-5);
}
.ccm-edit-mode .arech-nc__viewport,
.ccm-edit-mode .arech-nc__controls,
.ccm-edit-mode .arech-nc__tail {
    opacity: 1;
    transform: none;
}
.ccm-edit-mode .arech-nc__track { transform: none !important; }
.ccm-edit-mode .arech-nc__viewport { overflow: visible; }

/* ============================================================
   AUTO-NEWS variant (.arech-nc--related) — the "Continue reading"
   / "More from the factory" carousel ported from news-post-v2's
   .related-news section. The base carousel chrome above already
   matches the prototype's .related-card (paper card, 16:9 media,
   hover lift, orange category chip), so this modifier only adds:
   the slightly darker band the prototype uses (.related-news =
   --paper-2), the meta separator dot, and the per-card "Read
   article" CTA row that the prototype cards carry.
   ============================================================ */
.arech-nc--related {
    background-color: var(--paper-2);
    border-top: 1px solid var(--hairline);
}
.arech-nc--related .arech-nc__sep {
    color: var(--orange);
}
/* Per-card CTA row (prototype .related-card-cta). */
.arech-nc--related .arech-nc__cta {
    margin-top: auto;
    padding-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--orange-text);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: gap var(--motion-fast) var(--ease-standard);
}
.arech-nc--related .arech-nc__card:hover .arech-nc__cta,
.arech-nc--related .arech-nc__card:focus-visible .arech-nc__cta {
    gap: var(--space-3);
    color: var(--orange);
}
@media (prefers-reduced-motion: reduce) {
    .arech-nc--related .arech-nc__cta { transition: none; }
}

/* ---- Print ---- */
@media print {
    .arech-nc { background: #fff !important; color: #000 !important; }
    .arech-nc__controls { display: none !important; }
    .arech-nc__viewport { overflow: visible !important; }
    .arech-nc__track { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--space-4); transform: none !important; }
}


/* ============================================================
   ARECH CTA Banner block — front-end styles.
   Port of `site/src/components/home/HomeCTAPanel.astro` lines 47-180.
   Light or dark variant + optional radial-orange glow + grid overlay.
   ============================================================ */

.arech-cta {
    /* TDM Design layer: each property consumes a per-instance --tdmx-* var
       (emitted only on operator change, scoped to .tdm-i-<bID>) and falls back
       to the block's original hardcoded value — so default = byte-identical. */
    position: relative;
    overflow: hidden;
    /* New stacking context so the -2/-1 bg pseudo-elements anchor to the root
       (and stay behind the glow/grid at z-index:1 and inner at z-index:2). */
    isolation: isolate;
    padding-block: var(--tdmx-pad-top, var(--space-9)) var(--tdmx-pad-bottom, var(--space-9));
    padding-inline: var(--container-px);
    margin-block: var(--tdmx-margin-top, 0px) var(--tdmx-margin-bottom, 0px);
}
/* TDM universal background image + overlay (mirrors tdm_blocks base.css, scoped
   to .arech-cta). Active only when the vars are set; otherwise none/transparent
   → invisible → zero visual change at default. Sit behind the decorative
   glow/grid (z-index:1) and the inner content (z-index:2). */
.arech-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: var(--tdmx-bg-image, none);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.arech-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tdmx-overlay, transparent);
    pointer-events: none;
}
@media (min-width: 768px) {
    .arech-cta {
        padding-block: var(--tdmx-pad-top, var(--space-10)) var(--tdmx-pad-bottom, var(--space-10));
    }
}
@media (min-width: 1024px) {
    .arech-cta {
        padding-block: var(--tdmx-pad-top, var(--space-11)) var(--tdmx-pad-bottom, var(--space-11));
    }
}

/* TDM bg threaded as an OVERRIDE on each theme class: with no Design bg set the
   theme background holds (identical); a Design background wins when picked.
   Theme text colours stay as-is so dark-theme contrast is preserved. */
.arech-cta--paper-2 { background: var(--tdmx-bg, var(--paper-2)); color: var(--ink-2); }
.arech-cta--paper-1 { background: var(--tdmx-bg, var(--paper-1)); color: var(--ink-2); }
.arech-cta--dark { background: var(--tdmx-bg, var(--dark)); color: var(--off-white); }

/* ---- Background decorations ---- */
.arech-cta__glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse 100% 70% at 50% 50%, color-mix(in oklch, var(--orange) 8%, transparent) 0%, transparent 70%);
    pointer-events: none;
}
.arech-cta__grid-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image:
        linear-gradient(color-mix(in oklch, var(--orange) 4%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--orange) 4%, transparent) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
}
.arech-cta--dark .arech-cta__glow {
    background: radial-gradient(ellipse 100% 70% at 50% 50%, color-mix(in oklch, var(--orange) 18%, transparent) 0%, transparent 70%);
}

/* ---- Inner ---- */
.arech-cta__inner {
    position: relative;
    z-index: 2;
    max-width: var(--tdmx-max-width, var(--container-narrow));
    margin-inline: auto;
    text-align: var(--tdmx-align, center);
}

/* ---- Eyebrow ---- */
.arech-cta__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tdmx-accent, var(--orange-text));
    margin-bottom: var(--space-4);
}
/* Dark-theme accent kept hardcoded so the var doesn't override the dark
   variant's brighter orange (contrast on near-black). */
.arech-cta--dark .arech-cta__eyebrow { color: var(--tdmx-accent, var(--orange)); }

/* ---- Title ---- */
.arech-cta__title {
    font-family: var(--font-headline);
    font-weight: 600;
    /* S55 D3 — clamp aligned to prototype global h2 (L391-398).
       Padding ladder already matches prototype `section-premium`
       (96 → 128 → 160) per audit § 2 row 9 — no D4 change needed. */
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--tdmx-heading, var(--ink-1));
    margin: 0 0 var(--space-5);
}
/* Dark-theme heading kept hardcoded (light ink on near-black) so a Design
   --tdmx-heading meant for light themes can't darken it into invisibility. */
.arech-cta--dark .arech-cta__title { color: var(--off-white); }
.arech-cta__accent { color: var(--tdmx-accent, var(--orange-text)); }
.arech-cta--dark .arech-cta__accent { color: var(--tdmx-accent, var(--orange)); }

/* ---- Body ---- */
.arech-cta__body {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--tdmx-text, var(--ink-3));
    max-width: 56ch;
    margin: 0 auto var(--space-7);
}
/* Dark-theme body kept hardcoded (light text on near-black) for contrast. */
.arech-cta--dark .arech-cta__body { color: var(--light); }

/* ---- Contact rows ---- */
.arech-cta__rows {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-7);
    max-width: 420px;
    margin-inline: auto;
}
@media (min-width: 680px) {
    .arech-cta__rows {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
        max-width: 560px;
    }
}

.arech-cta__row {
    text-align: center;
    padding-block: var(--space-3);
}
.arech-cta__row-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tdmx-text, var(--ink-4));
    margin-bottom: var(--space-2);
}
/* Dark-theme row label kept hardcoded (accessible muted on near-black). */
.arech-cta--dark .arech-cta__row-label { color: var(--muted-accessible); }

.arech-cta__row-link {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 18px;
    color: var(--tdmx-text, var(--ink-1));
    text-decoration: none;
    /* Touch target: 44px-tall inline-flex hit area. */
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-cta__row-link:hover {
    color: var(--tdmx-accent, var(--orange-text));
}
/* Dark-theme row link kept hardcoded (light text on near-black) for contrast. */
.arech-cta--dark .arech-cta__row-link {
    color: var(--off-white);
}
.arech-cta--dark .arech-cta__row-link:hover {
    color: var(--orange-bright);
}

/* ---- Primary button ---- */
.arech-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 32px;
    /* Accent surface: --tdmx-accent recolours the primary button when the
       operator picks a Design accent; hover states stay on the systematic
       orange-bright/orange-dim tokens (no hover var in the contract). */
    background: var(--tdmx-accent, var(--orange));
    color: var(--white);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition:
        background var(--motion-normal) var(--ease-standard),
        transform var(--motion-normal) var(--ease-standard),
        box-shadow var(--motion-normal) var(--ease-standard);
}
.arech-cta__button:hover,
.arech-cta__button:focus-visible {
    background: var(--orange-bright);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px color-mix(in oklch, var(--orange) 30%, transparent);
}
.arech-cta--paper-2 .arech-cta__button:hover,
.arech-cta--paper-1 .arech-cta__button:hover {
    background: var(--orange-dim);
}
.arech-cta__button:focus-visible {
    outline: 2px solid var(--orange-text);
    outline-offset: 3px;
}

/* ---- Reveal stagger ---- */
.arech-cta .arech-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--motion-reveal) var(--ease-standard),
        transform var(--motion-reveal) var(--ease-standard);
}
.arech-cta .arech-reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}
.arech-cta .arech-reveal--s1 { transition-delay: var(--stagger-1); }
.arech-cta .arech-reveal--s2 { transition-delay: var(--stagger-2); }
.arech-cta .arech-reveal--s3 { transition-delay: var(--stagger-3); }
.arech-cta .arech-reveal--s4 { transition-delay: var(--stagger-4); }
.arech-cta .arech-reveal--s5 { transition-delay: var(--stagger-5); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .arech-cta .arech-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .arech-cta__button,
    .arech-cta__button:hover,
    .arech-cta__row-link {
        transform: none !important;
        transition: none;
    }
}

/* ---- Concrete edit-mode shim ---- */
.ccm-edit-mode .arech-cta {
    padding-block: var(--space-6);
}


/* ============================================================
   ARECH Footer block — front-end styles.

   Port of the FOOTER in
     prototypes/footer-explore-2026-05-19/footer-A-classic.html
   re-tokenized to the theme tokens (main.css :root) and corrected to the
   responsive standard (responsive_manual_en_0.1):
     • min-width media queries ONLY (no max-width);
     • the prototype's --container-wide:1440 inner becomes the canonical
       container box (--container 1140/1200 + --container-px gutter) so the
       footer caps identically to the navbar + page content;
     • subtle white hairlines use color-mix() (modern CSS, S72 direction);
     • small body text uses --muted-accessible / --light for WCAG AA contrast
       (the prototype's flat --muted #6b6b75 fails 4.5:1 on --dark-2).

   ALL rules are scoped under `.arech-footer` so nothing leaks into the theme.
   ============================================================ */

.arech-footer {
    background: var(--dark-2);
    border-top: 1px solid color-mix(in oklch, var(--white) 4%, transparent);
    padding-block: var(--space-9) var(--space-7);
    color: var(--light);
    font-family: var(--font-body);
}

.arech-footer__inner {
    max-width: calc(var(--container) + 2 * var(--container-px));
    margin-inline: auto;
    padding-inline: var(--container-px);
}

/* -------- COLUMN GRID -------- */
.arech-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
@media (min-width: 768px) {
    .arech-footer__cols {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "brand brand brand"
            "products company legal";
        gap: var(--space-5);
    }
    .arech-footer__col--brand    { grid-area: brand; }
    .arech-footer__col--products { grid-area: products; }
    .arech-footer__col--company  { grid-area: company; }
    .arech-footer__col--legal    { grid-area: legal; }
}
@media (min-width: 1024px) {
    .arech-footer__cols {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        grid-template-areas: "brand products company legal";
        gap: var(--space-6);
    }
}

/* Discrete vertical separators sitting in the middle of the column gap. */
@media (min-width: 768px) {
    .arech-footer__col--company,
    .arech-footer__col--legal { position: relative; }
    .arech-footer__col--company::before,
    .arech-footer__col--legal::before {
        content: '';
        position: absolute;
        inset-inline-start: calc(var(--space-5) / -2);
        inset-block: 0;
        inline-size: 1px;
        background: color-mix(in oklch, var(--white) 6%, transparent);
    }
}
@media (min-width: 1024px) {
    .arech-footer__col--products { position: relative; }
    .arech-footer__col--products::before {
        content: '';
        position: absolute;
        inset-inline-start: calc(var(--space-6) / -2);
        inset-block: 0;
        inline-size: 1px;
        background: color-mix(in oklch, var(--white) 6%, transparent);
    }
    .arech-footer__col--company::before,
    .arech-footer__col--legal::before {
        inset-inline-start: calc(var(--space-6) / -2);
    }
}

/* -------- BRAND COLUMN -------- */
.arech-footer__col--brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.arech-footer__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    align-self: flex-start;
}
.arech-footer__logo:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-footer__logo-img {
    height: 44px;
    width: auto;
    display: block;
}
.arech-footer__tagline {
    font-style: italic;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted-accessible);
    max-width: 42ch;
    margin: 0;
}

/* Social media row */
.arech-footer__social {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}
.arech-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--muted-accessible);
    text-decoration: none;
    border-radius: var(--radius-xs);
    transition: color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}
.arech-footer__social a:hover,
.arech-footer__social a:focus-visible {
    color: var(--off-white);
    background: color-mix(in oklch, var(--white) 5%, transparent);
}
.arech-footer__social a:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-footer__social svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* -------- LINK COLUMNS -------- */
.arech-footer__head {
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: var(--off-white);
    margin: 0 0 var(--space-5);
}
.arech-footer__links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
}
.arech-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 14px;
    font-weight: 400;
    color: var(--light);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard);
}
.arech-footer__links a:hover,
.arech-footer__links a:focus-visible { color: var(--off-white); }
.arech-footer__links a:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
.arech-footer__links .arech-footer__all {
    color: var(--orange);
    font-weight: 500;
    margin-top: var(--space-2);
}
.arech-footer__links .arech-footer__all:hover,
.arech-footer__links .arech-footer__all:focus-visible { color: var(--orange-bright); }

/* -------- BASE ROW -------- */
.arech-footer__base {
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid color-mix(in oklch, var(--white) 4%, transparent);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}
@media (min-width: 1024px) {
    .arech-footer__base {
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: var(--space-8);
    }
}
.arech-footer__copyright {
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted-accessible);
    max-width: 60ch;
    margin: 0;
}
.arech-footer__addresses {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-accessible);
    font-style: normal;
}
@media (min-width: 1024px) {
    .arech-footer__addresses {
        text-align: end;
        align-items: flex-end;
    }
}

/* Images inside the footer never overflow (responsive standard §). */
.arech-footer img {
    max-width: 100%;
    height: auto;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .arech-footer__social a { transition: none; }
    .arech-footer__links a { transition: none; }
}


/* ============================================================================
   TDM Back To Top — view styles. Ported from prototypes/back-to-top/index.html
   (v1.0), re-namespaced .btt-* → .tdm-btt-*, driven by data-* attributes
   (model / theme / shape / size / position) + changed-only scoped custom props
   (--tdm-btt-icon / --tdm-btt-bg / --tdm-btt-size / --tdm-btt-bd-w/-c) that fall
   back to the theme presets below. Modern CSS on purpose: conic-gradient,
   color-mix, :has() not required. Brand tokens come from tdm_blocks/tokens.css.
   ============================================================================ */

/* The reveal sentinel — an invisible 1px marker placed at the threshold; the
   IntersectionObserver in view.js toggles .is-visible on the button. */
.tdm-btt-sentinel {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  /* `top` is set inline from the reveal_threshold setting. */
}

/* ---------------------------------------------------------------------------
   1. Base button — fixed, hidden until revealed. Defaults via custom props so
      the changed-only inline <style> can override per instance.
   --------------------------------------------------------------------------- */
.tdm-btt {
  /* size + hit area (kept >= 44px even at S 40 via min-width/height) */
  --tdm-btt-size: 48px;
  --tdm-btt-hit: 48px;
  --tdm-btt-radius: 50%;
  --tdm-btt-bd-w: 0px;
  --tdm-btt-bd-c: transparent;
  --tdm-btt-inset: var(--tdm-space-5, 24px);
  --tdm-btt-p: 0; /* scroll progress 0..1 for the gauge */

  position: fixed;
  z-index: 8000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tdm-btt-hit);
  min-height: var(--tdm-btt-hit);
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--tdm-font-mono, system-ui, sans-serif);

  /* reveal state (hidden + out of tab order until shown) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease),
    transform var(--tdm-dur-base, 250ms) var(--tdm-ease-emphatic, ease),
    visibility 0s linear var(--tdm-dur-base, 250ms);
}

.tdm-btt.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease),
    transform var(--tdm-dur-slow, 400ms) var(--tdm-ease-emphatic, ease);
}

/* size keys (the inline override sets --tdm-btt-size; we also pad the hit area) */
.tdm-btt[data-size="s"] { --tdm-btt-size: 40px; --tdm-btt-hit: 44px; }
.tdm-btt[data-size="m"] { --tdm-btt-size: 48px; --tdm-btt-hit: 48px; }
.tdm-btt[data-size="l"] { --tdm-btt-size: 56px; --tdm-btt-hit: 56px; }

/* ---------------------------------------------------------------------------
   2. Theme presets — seed --tdm-btt-bg / --tdm-btt-icon / --tdm-btt-ring.
      The changed-only inline <style> overrides --tdm-btt-bg / --tdm-btt-icon
      when the operator sets an explicit colour.
   --------------------------------------------------------------------------- */
.tdm-btt[data-theme="dark"] {
  --tdm-btt-bg: var(--tdm-color-accent, #E8651A);
  --tdm-btt-icon: var(--tdm-color-ink, #F5F4F0);
  --tdm-btt-ring: var(--tdm-color-accent, #E8651A);
}
.tdm-btt[data-theme="light"] {
  --tdm-btt-bg: #FFFFFF;
  --tdm-btt-icon: #B84A0C; /* AA-safe orange-link on paper */
  --tdm-btt-ring: #B84A0C;
}

/* ---------------------------------------------------------------------------
   3. Shape → radius (data-shape). Gauge + pillar override internally below.
   --------------------------------------------------------------------------- */
.tdm-btt[data-shape="circle"]  { --tdm-btt-radius: 50%; }
.tdm-btt[data-shape="rounded"] { --tdm-btt-radius: var(--tdm-radius-md, 6px); }
.tdm-btt[data-shape="square"]  { --tdm-btt-radius: 2px; }
.tdm-btt[data-shape="pill"]    { --tdm-btt-radius: calc(var(--tdm-btt-size) / 2); }

/* ---------------------------------------------------------------------------
   4. Position presets — inset clears the mobile address bar.
   --------------------------------------------------------------------------- */
.tdm-btt[data-position="bottom-right"]  { right: var(--tdm-btt-inset); bottom: max(var(--tdm-btt-inset), env(safe-area-inset-bottom)); left: auto; }
.tdm-btt[data-position="bottom-left"]   { left: var(--tdm-btt-inset); bottom: max(var(--tdm-btt-inset), env(safe-area-inset-bottom)); right: auto; }
.tdm-btt[data-position="bottom-center"] { left: 50%; bottom: max(var(--tdm-btt-inset), env(safe-area-inset-bottom)); right: auto; transform: translateX(-50%) translateY(12px); }
.tdm-btt[data-position="bottom-center"].is-visible { transform: translateX(-50%) translateY(0); }

@media (min-width: 768px) {
  .tdm-btt { --tdm-btt-inset: var(--tdm-space-6, 32px); }
}

/* ---------------------------------------------------------------------------
   5. The visible "face" — the coloured chip the user sees.
   --------------------------------------------------------------------------- */
.tdm-btt__face {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tdm-btt-size);
  height: var(--tdm-btt-size);
  border-radius: var(--tdm-btt-radius);
  background: var(--tdm-btt-bg);
  border: var(--tdm-btt-bd-w) solid var(--tdm-btt-bd-c);
  color: var(--tdm-btt-icon);
  transition:
    background var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease),
    transform var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease),
    box-shadow var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease);
}
.tdm-btt:hover  .tdm-btt__face { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, #000 35%, transparent); }
.tdm-btt:active .tdm-btt__face { transform: translateY(0); }
.tdm-btt:focus-visible { outline: none; }
.tdm-btt:focus-visible .tdm-btt__face { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tdm-btt-ring) 80%, transparent); }

.tdm-btt__disc { display: inline-flex; align-items: center; justify-content: center; }
.tdm-btt__icon { width: 45%; height: 45%; display: block; line-height: 0; }
.tdm-btt__icon svg { width: 100%; height: 100%; display: block; }

/* stacked label (model 3) — hidden by default */
.tdm-btt__label {
  display: none;
  font-family: var(--tdm-font-mono, system-ui, sans-serif);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 2px;
  color: var(--tdm-btt-icon);
  line-height: 1;
}

/* live % readout (gauge) — hidden by default */
.tdm-btt__pct {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--tdm-font-mono, system-ui, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--tdm-btt-icon);
}

/* ---------------------------------------------------------------------------
   MODEL: scroll-gauge (conic progress ring)
   --------------------------------------------------------------------------- */
.tdm-btt[data-model="scroll-gauge"] .tdm-btt__face { border-radius: 50%; background: transparent; padding: 0; }
.tdm-btt[data-model="scroll-gauge"] .tdm-btt__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--tdm-btt-ring) calc(var(--tdm-btt-p) * 360deg),
    color-mix(in srgb, var(--tdm-btt-ring) 22%, transparent) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.tdm-btt[data-model="scroll-gauge"] .tdm-btt__disc {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--tdm-btt-bg);
}
.tdm-btt[data-model="scroll-gauge"] .tdm-btt__icon { width: 42%; height: 42%; }
.tdm-btt[data-model="scroll-gauge"].show-pct .tdm-btt__icon { opacity: 0; }
.tdm-btt[data-model="scroll-gauge"].show-pct .tdm-btt__pct { display: inline-flex; }

/* The ring/disc are only meaningful for the gauge — hide for other models. */
.tdm-btt:not([data-model="scroll-gauge"]) .tdm-btt__ring { display: none; }

/* ---------------------------------------------------------------------------
   MODEL: edge-pillar (half-pill welded to the edge)
   --------------------------------------------------------------------------- */
.tdm-btt[data-model="edge-pillar"] { bottom: 50%; }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-right"]  { right: 0; left: auto; transform: translateY(40px); }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-right"].is-visible { transform: translateY(0); }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-left"]   { left: 0; right: auto; transform: translateY(40px); }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-left"].is-visible  { transform: translateY(0); }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-center"] { left: 0; right: auto; transform: translateY(40px); } /* center N/A → docks left */
.tdm-btt[data-model="edge-pillar"][data-position="bottom-center"].is-visible { transform: translateY(0); }
.tdm-btt[data-model="edge-pillar"] .tdm-btt__face {
  width: calc(var(--tdm-btt-size) * 0.74);
  height: calc(var(--tdm-btt-size) * 1.9);
  border-radius: 10px 0 0 10px; /* rounded only on the inboard side */
}
.tdm-btt[data-model="edge-pillar"][data-position="bottom-left"] .tdm-btt__face,
.tdm-btt[data-model="edge-pillar"][data-position="bottom-center"] .tdm-btt__face { border-radius: 0 10px 10px 0; }
.tdm-btt[data-model="edge-pillar"]:hover .tdm-btt__face { transform: translateX(-3px); }
.tdm-btt[data-model="edge-pillar"][data-position="bottom-left"]:hover .tdm-btt__face,
.tdm-btt[data-model="edge-pillar"][data-position="bottom-center"]:hover .tdm-btt__face { transform: translateX(3px); }

/* ---------------------------------------------------------------------------
   MODEL: stacked-label
   --------------------------------------------------------------------------- */
.tdm-btt[data-model="stacked-label"] .tdm-btt__face {
  flex-direction: column;
  gap: 1px;
  width: auto;
  min-width: var(--tdm-btt-size);
  height: auto;
  min-height: var(--tdm-btt-size);
  padding: 8px 12px;
}
.tdm-btt[data-model="stacked-label"] .tdm-btt__disc { flex-direction: column; }
.tdm-btt[data-model="stacked-label"] .tdm-btt__icon { width: 18px; height: 18px; }
.tdm-btt[data-model="stacked-label"] .tdm-btt__label { display: block; }

/* ---------------------------------------------------------------------------
   MODEL: notch-riser (rises from below with overshoot)
   --------------------------------------------------------------------------- */
.tdm-btt[data-model="notch-riser"][data-position="bottom-right"],
.tdm-btt[data-model="notch-riser"][data-position="bottom-left"] { transform: translateY(140%); }
.tdm-btt[data-model="notch-riser"][data-position="bottom-center"] { transform: translateX(-50%) translateY(140%); }
.tdm-btt[data-model="notch-riser"].is-visible[data-position="bottom-right"],
.tdm-btt[data-model="notch-riser"].is-visible[data-position="bottom-left"] {
  transform: translateY(0);
  transition: transform var(--tdm-dur-slow, 400ms) var(--tdm-ease-emphatic, cubic-bezier(0.34, 1.56, 0.64, 1)),
              opacity var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease);
}
.tdm-btt[data-model="notch-riser"].is-visible[data-position="bottom-center"] {
  transform: translateX(-50%) translateY(0);
  transition: transform var(--tdm-dur-slow, 400ms) var(--tdm-ease-emphatic, cubic-bezier(0.34, 1.56, 0.64, 1)),
              opacity var(--tdm-dur-base, 250ms) var(--tdm-ease-standard, ease);
}
.tdm-btt[data-model="notch-riser"] .tdm-btt__face { border-radius: min(var(--tdm-btt-radius), 6px); }

/* MODEL: plain-chevron uses the base .tdm-btt__face as-is — nothing special. */

/* ---------------------------------------------------------------------------
   Reduced motion: no overshoot, no float, no transform reveal — fade only.
   Reveal still works; scroll is instant (handled in view.js).
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tdm-btt,
  .tdm-btt.is-visible,
  .tdm-btt[data-model="notch-riser"].is-visible[data-position="bottom-right"],
  .tdm-btt[data-model="notch-riser"].is-visible[data-position="bottom-left"] {
    transform: none !important;
    transition: opacity var(--tdm-dur-base, 250ms) linear, visibility 0s !important;
  }
  .tdm-btt[data-position="bottom-center"],
  .tdm-btt[data-position="bottom-center"].is-visible { transform: translateX(-50%) !important; }
  .tdm-btt:hover .tdm-btt__face,
  .tdm-btt[data-model="edge-pillar"]:hover .tdm-btt__face { transform: none; }
}