/* ==========================================================================
   licence.broker  v2  —  neubrutalism + aurora-gradient + minimal-navigation
   ========================================================================== */

:root {
    --white: #ffffff;
    --black: #0a0a0a;
    --aurora-green: #1a6b4a;
    --aurora-purple: #3a2a7c;
    --aurora-teal: #1a4a6b;
    --acid: #f0f000;
    --alert: #ff3333;
    --gray: #e0e0e0;

    --border-thin: 2px solid var(--black);
    --border-card: 3px solid var(--black);
    --border-frame: 4px solid var(--black);

    --shadow-lift: 4px 4px 0 var(--black);
    --shadow-lift-lg: 6px 6px 0 var(--black);

    --gap-section: 60px;
    --pad-card: 24px;

    --font-display: "Recursive", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: var(--white);
    color: var(--black);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-variation-settings: "slnt" 0;
}

a, button {
    color: inherit;
    font-family: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

/* ==========================================================================
   Aurora gradient utility — used inside black-bordered frames only
   ========================================================================== */
.aurora-fill {
    background:
        linear-gradient(
            120deg,
            var(--aurora-green) 0%,
            var(--aurora-purple) 38%,
            var(--aurora-teal) 72%,
            var(--aurora-green) 100%
        );
    background-size: 320% 320%;
    animation: aurora-shift 14s ease-in-out infinite;
}

@keyframes aurora-shift {
    0%   { background-position:   0% 50%; }
    25%  { background-position:  60% 30%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position:  40% 70%; }
    100% { background-position:   0% 50%; }
}

/* ==========================================================================
   Layout shell
   ========================================================================== */
.brutal-shell {
    display: block;
    width: 100%;
    padding: 0 28px var(--gap-section);
    max-width: 1440px;
    margin: 0 auto;
}

.section-header {
    margin: var(--gap-section) 0 28px;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto auto;
    align-items: end;
    gap: 4px 18px;
}

.section-index {
    grid-row: 1 / span 2;
    font-family: var(--font-display);
    font-variation-settings: "wght" 700, "CASL" 1;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--black);
}

.section-title {
    grid-column: 2;
    font-family: var(--font-display);
    font-variation-settings: "wght" 900, "CASL" 1, "slnt" 0;
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.section-sub {
    grid-column: 2;
    font-family: var(--font-body);
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--black);
    margin-top: 4px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    min-height: 100vh;
    padding: 64px 0 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 28px;
    position: relative;
}

.hero-frame {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 520px;
    border: var(--border-frame);
    background: var(--white);
    overflow: hidden;
    isolation: isolate;
}

.hero-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            120deg,
            var(--aurora-green) 0%,
            var(--aurora-purple) 38%,
            var(--aurora-teal) 72%,
            var(--aurora-green) 100%
        );
    background-size: 320% 320%;
    animation: aurora-shift 14s ease-in-out infinite, hero-fade-in 600ms 200ms ease both;
    opacity: 0;
    z-index: 0;
}

@keyframes hero-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.hero-frame::after {
    /* faint scanline grid to amplify brutal/manifest feel */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(10,10,10,0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(10,10,10,0.10) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
    opacity: 0.55;
}

.hero-frame-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: clamp(20px, 4vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    color: var(--white);
}

.hero-eyebrow {
    font-family: var(--font-display);
    font-variation-settings: "wght" 700, "CASL" 0.5;
    font-size: 13px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--white);
    opacity: 0;
    animation: fade-up 500ms 200ms ease both;
    align-self: flex-start;
    border: var(--border-thin);
    border-color: var(--white);
    padding: 6px 12px;
    background: rgba(10, 10, 10, 0.40);
    backdrop-filter: blur(2px);
}

.hero-logotype {
    font-family: var(--font-display);
    font-variation-settings: "wght" 900, "CASL" 1, "slnt" 0;
    font-size: clamp(48px, 12vw, 168px);
    line-height: 0.92;
    letter-spacing: -0.035em;
    color: var(--white);
    text-transform: uppercase;
    align-self: stretch;
    transform: scale(0.95);
    opacity: 0;
    animation: hero-pop 500ms 500ms cubic-bezier(.2, .9, .25, 1.1) both;
    text-shadow: 0 4px 0 rgba(10,10,10,0.20);
    word-break: break-word;
}

@keyframes hero-pop {
    0%   { opacity: 0; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1.00); }
}

@keyframes fade-up {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

.hero-meta {
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "CASL" 0.4;
    font-size: 13px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: var(--border-thin);
    border-color: var(--white);
    padding: 8px 14px;
    background: rgba(10, 10, 10, 0.40);
    color: var(--white);
    opacity: 0;
    animation: fade-up 500ms 700ms ease both;
}

.hero-dot {
    width: 9px;
    height: 9px;
    border-radius: 100px;
    background: var(--acid);
    border: 1px solid var(--black);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.65; }
}

.hero-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    background: var(--white);
    border: var(--border-thin);
    z-index: 3;
}
.hero-corner--tl { top: -9px;    left: -9px;  }
.hero-corner--tr { top: -9px;    right: -9px; }
.hero-corner--bl { bottom: -9px; left: -9px;  }
.hero-corner--br { bottom: -9px; right: -9px; }

.hero-tagline {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(15px, 1.5vw, 18px);
    color: var(--black);
    line-height: 1.6;
    opacity: 0;
    animation: fade-up 400ms 1000ms ease both;
    border-top: var(--border-thin);
    padding-top: 14px;
    width: 100%;
    text-align: left;
    letter-spacing: -0.005em;
}

/* ==========================================================================
   AVAILABLE — zero-gap stack
   ========================================================================== */
.available { padding-top: 4px; }

.licence-stack {
    display: flex;
    flex-direction: column;
    border: var(--border-card);
    background: var(--white);
}

.licence-card {
    position: relative;
    background: var(--white);
    padding: var(--pad-card);
    border-bottom: var(--border-card);
    transition:
        transform 100ms ease,
        box-shadow 100ms ease,
        background-color 120ms ease;
    cursor: pointer;
    outline: none;
    /* bounce-enter */
    opacity: 0;
    transform: translateY(30px);
}

.licence-card:last-child { border-bottom: 0; }

.licence-card.is-in {
    animation: card-bounce 460ms cubic-bezier(.2, .9, .3, 1.15) forwards;
}

@keyframes card-bounce {
    0%   { opacity: 0;   transform: translateY(30px); }
    65%  { opacity: 1;   transform: translateY(-5px); }
    100% { opacity: 1;   transform: translateY(0); }
}

.licence-card:hover,
.licence-card.is-active {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-lift);
    background: #fbfbf2;
    z-index: 2;
}

.licence-card.is-active { background: var(--acid); }

.licence-card.licence-card--alert .licence-name { color: var(--alert); }
.licence-card.licence-card--alert:hover { background: #fff0f0; }

.licence-card-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(16px, 3vw, 36px);
}

.licence-card-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.licence-name {
    font-family: var(--font-display);
    font-variation-settings: "wght" 800, "CASL" 0.6, "slnt" 0;
    font-size: clamp(20px, 2.4vw, 32px);
    letter-spacing: -0.015em;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--black);
    margin-top: 4px;
    word-break: break-word;
}

.licence-desc {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.55;
    color: var(--black);
    max-width: 64ch;
}

.licence-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.meta-pill {
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "CASL" 0.3;
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border: var(--border-thin);
    background: var(--white);
    padding: 4px 10px;
    color: var(--black);
}

/* Badges (neubrutalist pills with aurora fill) */
.badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: var(--border-thin);
    border-radius: 100px;
    padding: 6px 14px 6px 12px;
    font-family: var(--font-display);
    font-variation-settings: "wght" 700, "CASL" 0.5;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
    background:
        linear-gradient(
            120deg,
            var(--aurora-green) 0%,
            var(--aurora-purple) 50%,
            var(--aurora-teal) 100%
        );
    background-size: 240% 240%;
    animation: aurora-shift 12s ease-in-out infinite;
    transform: translateX(-20px);
    opacity: 0;
    transition: transform 120ms ease, box-shadow 120ms ease;
    align-self: flex-start;
    overflow: hidden;
}

.badge::after {
    /* subtle film over aurora to lift readability */
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.25);
    border-radius: inherit;
    pointer-events: none;
}

.badge > * { position: relative; z-index: 1; }

.licence-card.is-in .badge {
    animation: badge-slide-in 220ms 80ms ease forwards, aurora-shift 12s 220ms ease-in-out infinite;
}

@keyframes badge-slide-in {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.licence-card:hover .badge {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}

.badge--alert {
    background: linear-gradient(120deg, var(--alert), #b91c1c, var(--alert));
    background-size: 220% 220%;
    animation: aurora-shift 8s ease-in-out infinite;
}

.badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 100px;
    background: var(--white);
    box-shadow: 0 0 0 1px var(--black);
}

/* Claim arrow */
.licence-card-claim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: var(--border-thin);
    padding: 10px 14px;
    background: var(--white);
    transition: transform 120ms ease, background-color 120ms ease;
    flex-shrink: 0;
}

.licence-card:hover .licence-card-claim {
    background: var(--acid);
    transform: translateX(4px);
}

.claim-arrow {
    width: 36px;
    height: 36px;
}

.claim-label {
    font-family: var(--font-display);
    font-variation-settings: "wght" 800, "CASL" 0.5;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: var(--border-card);
    background: var(--white);
}

.how-block {
    position: relative;
    padding: clamp(20px, 2.4vw, 32px);
    border-right: var(--border-card);
    overflow: hidden;
    isolation: isolate;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.how-block:last-child { border-right: 0; }

.how-block--white  { background: var(--white); color: var(--black); }
.how-block--aurora {
    color: var(--white);
    background:
        linear-gradient(
            120deg,
            var(--aurora-green) 0%,
            var(--aurora-purple) 50%,
            var(--aurora-teal) 100%
        );
    background-size: 320% 320%;
    animation: aurora-shift 14s ease-in-out infinite;
}

.how-block--aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.55;
    z-index: 0;
}

.how-block > * { position: relative; z-index: 1; }

.how-num {
    font-family: var(--font-display);
    font-variation-settings: "wght" 900, "CASL" 1;
    font-size: clamp(72px, 9vw, 132px);
    line-height: 0.85;
    letter-spacing: -0.06em;
    color: inherit;
    text-shadow: 0 4px 0 rgba(10,10,10,0.18);
    align-self: flex-start;
    padding-right: 8px;
    border-bottom: var(--border-card);
    border-color: currentColor;
    width: 100%;
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.how-block--aurora .how-num { text-shadow: 0 3px 0 rgba(10,10,10,0.45); }

.how-heading {
    font-family: var(--font-display);
    font-variation-settings: "wght" 800, "CASL" 0.6;
    font-size: clamp(18px, 1.6vw, 22px);
    letter-spacing: -0.005em;
    text-transform: uppercase;
}

.how-body {
    font-family: var(--font-body);
    font-size: clamp(14px, 1.15vw, 16px);
    line-height: 1.6;
}

.how-list {
    list-style: none;
    margin-top: auto;
    padding-top: 14px;
    border-top: var(--border-thin);
    border-color: currentColor;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.how-list li {
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "CASL" 0.3;
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding-left: 22px;
    position: relative;
}

.how-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 14px;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%);
}

/* ==========================================================================
   DIRECT FOOTER
   ========================================================================== */
.direct {
    margin-top: var(--gap-section);
}

.direct-frame {
    position: relative;
    border: var(--border-frame);
    background: var(--white);
    padding: clamp(22px, 2.6vw, 36px);
    overflow: hidden;
    isolation: isolate;
}

.direct-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            120deg,
            var(--aurora-green) 0%,
            var(--aurora-purple) 50%,
            var(--aurora-teal) 100%
        );
    background-size: 320% 320%;
    animation: aurora-shift 14s ease-in-out infinite, direct-breathe 4s ease-in-out infinite;
    opacity: 0.18;
    z-index: 0;
}

@keyframes direct-breathe {
    0%, 100% { opacity: 0.10; }
    50%      { opacity: 0.28; }
}

.direct-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: var(--border-card);
    background: var(--white);
}

.direct-col {
    padding: 18px 20px;
    border-right: var(--border-card);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.direct-col:last-child { border-right: 0; }

.direct-label {
    font-family: var(--font-display);
    font-variation-settings: "wght" 700, "CASL" 0.5;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--black);
    opacity: 0.8;
}

.direct-value {
    font-family: var(--font-display);
    font-variation-settings: "wght" 700, "CASL" 0.6;
    font-size: clamp(14px, 1.3vw, 18px);
    letter-spacing: -0.005em;
    color: var(--black);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 100px;
    background: var(--aurora-green);
    border: 1.5px solid var(--black);
    animation: pulse 1.8s ease-in-out infinite;
}

.direct-bottom {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.direct-rule {
    flex: 1;
    height: 2px;
    background: var(--black);
}

.direct-stamp {
    font-family: var(--font-display);
    font-variation-settings: "wght" 600, "CASL" 0.4;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ==========================================================================
   FLOATING BROKER BUTTON + RADIAL MENU
   ========================================================================== */
.broker-shell {
    position: fixed;
    right: clamp(20px, 3vw, 36px);
    bottom: clamp(20px, 3vw, 36px);
    z-index: 60;
    width: 0;
    height: 0;
}

.broker-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 96px;
    height: 96px;
    border-radius: 100px;
    border: var(--border-frame);
    color: var(--white);
    background:
        linear-gradient(
            120deg,
            var(--aurora-green) 0%,
            var(--aurora-purple) 50%,
            var(--aurora-teal) 100%
        );
    background-size: 240% 240%;
    animation: aurora-shift 8s ease-in-out infinite, broker-enter 500ms 800ms ease both;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: transform 120ms ease, box-shadow 120ms ease;
    box-shadow: var(--shadow-lift);
}

@keyframes broker-enter {
    0%   { opacity: 0; transform: scale(0.6) rotate(-12deg); }
    100% { opacity: 1; transform: scale(1.0) rotate(0); }
}

.broker-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-lift-lg);
}

.broker-btn[aria-expanded="true"] {
    transform: rotate(45deg) translate(-2px, -2px);
    box-shadow: var(--shadow-lift-lg);
}

.broker-btn-label {
    font-family: var(--font-display);
    font-variation-settings: "wght" 800, "CASL" 0.6;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    transition: opacity 100ms ease;
}

.broker-btn[aria-expanded="true"] .broker-btn-label { opacity: 0; }

.broker-btn-plus {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.broker-btn-plus svg {
    width: 100%;
    height: 100%;
}

/* Radial menu — semicircle above the button */
.broker-radial {
    position: absolute;
    right: 48px; /* center on broker btn */
    bottom: 48px;
    width: 0; height: 0;
    pointer-events: none;
}

.broker-shell.is-open .broker-radial { pointer-events: auto; }

.radial-item {
    position: absolute;
    left: 0; top: 0;
    width: 64px;
    height: 64px;
    border-radius: 100px;
    border: var(--border-card);
    background: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transform-origin: center;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition:
        transform 220ms cubic-bezier(.2,.9,.3,1.15),
        opacity 220ms ease,
        background-color 120ms ease,
        box-shadow 120ms ease;
    transition-delay: calc(var(--i) * 60ms);
    box-shadow: var(--shadow-lift);
}

.broker-shell.is-open .radial-item {
    /* Spread items in a semicircle from 180° to 360° (above & left of button).
       Distance: 130px. Use trig with --angle. */
    --angle: calc(180deg + var(--i) * 22deg);
    --r: 130px;
    transform:
        translate(
            calc(-50% + cos(var(--angle)) * var(--r)),
            calc(-50% + sin(var(--angle)) * var(--r))
        )
        scale(1);
    opacity: 1;
    transition-delay: calc(var(--i) * 80ms);
}

.broker-shell.is-open .radial-item:hover {
    background: var(--acid);
    transform:
        translate(
            calc(-50% + cos(var(--angle)) * var(--r)),
            calc(-50% + sin(var(--angle)) * var(--r))
        )
        scale(1.08);
    box-shadow: var(--shadow-lift-lg);
}

.radial-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
}
.radial-icon svg { width: 100%; height: 100%; }

.radial-label {
    font-family: var(--font-display);
    font-variation-settings: "wght" 800, "CASL" 0.6;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.broker-toast {
    position: absolute;
    right: 110px;
    bottom: 38px;
    background: var(--white);
    border: var(--border-thin);
    box-shadow: var(--shadow-lift);
    padding: 10px 14px;
    font-family: var(--font-display);
    font-variation-settings: "wght" 700, "CASL" 0.5;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--black);
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    white-space: nowrap;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.broker-toast.is-show {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   Reveal helpers
   ========================================================================== */
.reveal-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 500ms ease, transform 500ms ease;
}
.reveal-up.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
    .how-grid {
        grid-template-columns: 1fr;
    }
    .how-block {
        border-right: 0;
        border-bottom: var(--border-card);
        min-height: 280px;
    }
    .how-block:last-child { border-bottom: 0; }

    .direct-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .direct-col {
        border-right: var(--border-card);
        border-bottom: var(--border-card);
    }
    .direct-col:nth-child(2n) { border-right: 0; }
    .direct-col:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 640px) {
    .brutal-shell { padding: 0 16px var(--gap-section); }

    .hero { min-height: auto; padding: 56px 0 28px; }
    .hero-frame { height: auto; min-height: 460px; aspect-ratio: 4 / 5; }

    .licence-card-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .licence-card-claim {
        flex-direction: row;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 12px;
    }
    .claim-arrow { width: 28px; height: 28px; }

    .direct-grid { grid-template-columns: 1fr; }
    .direct-col {
        border-right: 0;
        border-bottom: var(--border-card);
    }
    .direct-col:last-child { border-bottom: 0; }

    .broker-btn { width: 78px; height: 78px; }
    .broker-radial { right: 39px; bottom: 39px; }
    .radial-item { width: 54px; height: 54px; }
    .broker-shell.is-open .radial-item {
        --r: 108px;
    }
    .broker-toast { right: 96px; bottom: 28px; }
}

@media (max-width: 420px) {
    .hero-eyebrow,
    .hero-meta {
        font-size: 11px;
        padding: 5px 10px;
        letter-spacing: 0.08em;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .licence-card { opacity: 1; transform: none; }
}