/* ===========================================================================
   Concept D — white, product-led, single CTA
   Built to the business brief of 2026-08-11:
     · white base
     · three first-login steps as a horizontal band BELOW the hero
     · the stylised Hive2 interface in the hero instead of a steps panel
     · exactly one button
   Requires styles-v2.css to be linked first.
   ======================================================================== */

/* Public brand typography. The Adobe kit is deliberately loaded async in the
   two concept-D documents; its required p.typekit.net beacon remains intact.
   Bundled Archivo Narrow/Manrope faces paint immediately and remain the
   offline/error fallback. */
@font-face {
    font-family: 'Archivo Narrow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/Archivo-Narrow-600-LatinExt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Archivo Narrow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/Archivo-Narrow-600-Latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope — the app's own display font, and the landing's text face for
   everything that is not an all-caps header. */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/Manrope-LatinExt.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('fonts/Manrope-Latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks for the two Adobe faces used here: Field Gothic
   XXCond (headings) over Archivo Narrow, and Field Gothic No.75 Bold Wide
   (the HIVE wordmark in the header — owner 2026-08-19: "as per the new
   login page") over Manrope 800. Size-adjust comes from measured advance
   widths (Field XXCond/Archivo 48 %; Field Wide/Manrope-800 "HIVE" 117.2 %);
   the overrides preserve the brand-font line boxes. Unique family names keep
   the original local faces unchanged. Lead, steps and all other copy stay
   Manrope (owner 2026-08-19). */
@font-face {
    font-family: 'Field Gothic Wide Metrics Fallback';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Manrope'), url('fonts/Manrope-Latin.woff2') format('woff2');
    size-adjust: 117.2%;
    ascent-override: 89%;
    descent-override: 17%;
    line-gap-override: 0%;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Field Gothic Metrics Fallback';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Archivo Narrow'), url('fonts/Archivo-Narrow-600-LatinExt.woff2') format('woff2');
    size-adjust: 48%;
    ascent-override: 75%;
    descent-override: 25%;
    line-gap-override: 0%;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Field Gothic Metrics Fallback';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: local('Archivo Narrow'), url('fonts/Archivo-Narrow-600-Latin.woff2') format('woff2');
    size-adjust: 48%;
    ascent-override: 75%;
    descent-override: 25%;
    line-gap-override: 0%;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Brand gold, matching the approved v1 landing palette. The application's own
   accent is #E8780A; the landing chrome uses the lighter gold, and the product
   illustration keeps the real product orange. */
.c-white {
    --gold: #F7A900;
    /* d5 brown sweep: was #251600 (dark gold-brown). Business feedback — brown
       is off-brand; ink black reads the same on gold and lifts contrast. */
    --gold-ink: #15141A;
    --font-brand-field: 'field-gothic-xxcondensed', 'Field Gothic Metrics Fallback', 'Archivo Narrow', 'Manrope', sans-serif;
    --font-brand-field-wide: 'field-gothic-wide', 'Field Gothic Wide Metrics Fallback', 'Manrope', sans-serif;

    font-family: 'Manrope', ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--l-text);
    position: relative;
    overflow-x: hidden;
    background: #FDFCF9;
}

/* The photograph lives on a fixed-position layer, NOT on the body via
   background-attachment: fixed.
   Why: with `fixed`, `cover` sizes the image to the viewport, so on any page
   taller than one viewport the default `repeat` tiles it again and leaves a
   visible seam every viewport-height down the page. A fixed layer is sized to
   the viewport once and simply stays there — no tiling to suppress, and none
   of the scroll jank `background-attachment: fixed` causes on mobile.

   Layers: cream wash → warm gold veil (soft-light, to take the grey chill off
   the photo) → the photo. The plain-url declaration is the fallback; the
   image-set() one upgrades to WebP (34 KB vs 210 KB) where supported. */
.c-white::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg,
            rgba(255, 253, 247, .98) 0%,
            rgba(255, 253, 247, .92) 52%,
            rgba(255, 253, 247, .35) 100%),
        radial-gradient(circle at 92% 45%, rgba(30, 20, 8, .16), transparent 48%),
        linear-gradient(rgba(247, 169, 0, .10), rgba(247, 169, 0, .10)),
        url("bg-d3.jpg");
    background-image:
        linear-gradient(90deg,
            rgba(255, 253, 247, .98) 0%,
            rgba(255, 253, 247, .92) 52%,
            rgba(255, 253, 247, .20) 100%),
        radial-gradient(circle at 92% 45%, rgba(30, 20, 8, .16), transparent 48%),
        linear-gradient(rgba(247, 169, 0, .10), rgba(247, 169, 0, .10)),
        image-set(url("bg-d3.webp") type("image/webp"), url("bg-d3.jpg") type("image/jpeg"));
    background-blend-mode: normal, multiply, soft-light, normal;
    background-position: center, center, center, center;
    background-size: cover, cover, cover, cover;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Narrow screens: the hero stacks, so wash top-to-bottom instead of
   left-to-right or the headline lands on the busiest part of the photo. */
@media (max-width: 900px) {
    .c-white::before {
        background-image:
            linear-gradient(180deg,
                rgba(255, 253, 247, .98) 0%,
                rgba(255, 253, 247, .94) 60%,
                rgba(255, 253, 247, .78) 100%),
            radial-gradient(circle at 85% 85%, rgba(30, 20, 8, .12), transparent 48%),
            linear-gradient(rgba(247, 169, 0, .10), rgba(247, 169, 0, .10)),
            url("bg-d3.jpg");
        background-image:
            linear-gradient(180deg,
                rgba(255, 253, 247, .98) 0%,
                rgba(255, 253, 247, .94) 60%,
                rgba(255, 253, 247, .70) 100%),
            radial-gradient(circle at 85% 85%, rgba(30, 20, 8, .12), transparent 48%),
            linear-gradient(rgba(247, 169, 0, .10), rgba(247, 169, 0, .10)),
            image-set(url("bg-d3.webp") type("image/webp"), url("bg-d3.jpg") type("image/jpeg"));
    }
}

/* One-time entrance. Transform/opacity only — no layout shift — and fully
   disabled for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
    .hero__copy  { animation: d-rise .55s cubic-bezier(.16, 1, .3, 1) both; }
    .hero__visual { animation: d-rise .55s cubic-bezier(.16, 1, .3, 1) .12s both; }

    @keyframes d-rise {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
}

.shell {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(1.15rem, 3.4vw, 2.8rem);
}

/* ---- header ---- */
.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.6rem 0;
}

/* Real bee logo, not a drawn mark — sized to the v1 lockup. */
.c-white .brand { color: var(--l-text); gap: .75rem; }
.c-white .brand__mark { width: 42px; height: 42px; object-fit: contain; }
/* HIVE wordmark = the login panel's lockup face (Field Gothic No.75 Bold Wide,
   700, .08em) so the two surfaces a client sees before logging in carry one
   mark; sized so the cap height is ~half the bee mark, as on the login. */
.c-white .brand__hive { font-family: var(--font-brand-field-wide); font-size: 1.9rem; font-weight: 700; letter-spacing: .08em; line-height: 1; }
.c-white .brand__rule { height: 30px; }

/* Brandbook lockup (INSURANCE BEE CLAIM SOLUTIONS) regenerated from the
   guidelines vector at 3x (HIVE-640 item 3): transparent ground, CLAIM
   SOLUTIONS in the claim-solutions brand orange (#F47420) so it reads on the
   cream header. No chip chrome — it sits as a plain co-brand mark. */
.c-white .brand__badge {
    height: 48px;
    width: auto;
    display: block;
}

.c-white .lang { background: rgba(255, 255, 255, .72); }
.c-white .lang a { color: var(--l-text); }
.c-white .lang a[aria-current="true"] { background: var(--gold); color: var(--gold-ink); }

/* ---- gold accents ---- */
.c-white .eyebrow::before {
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(247, 169, 0, .22);
}

/* Dark ink on gold: white on #F7A900 fails AA badly. */
.c-white .btn--primary {
    background: var(--gold);
    border-color: #D89400;
    color: var(--gold-ink);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset,
                0 14px 34px -14px rgba(232, 120, 10, .55);
}

.c-white .btn--primary:hover {
    background: #FFB714;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset,
                0 18px 40px -14px rgba(232, 120, 10, .7);
}

.c-white .step__n { background: var(--gold); color: var(--gold-ink); }
/* d5: .c-white .note__icon deleted — dead since the d4 note→band__intro merge. */

/* ---- hero ---- */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: clamp(2rem, 4.5vw, 4.5rem);
    align-items: center;
    padding: clamp(1.4rem, 3.5vw, 3rem) 0 clamp(2.4rem, 5vw, 4rem);
}

.hero__copy { max-width: 34rem; }

/* d5: the .eyebrow rule was deleted — the eyebrow itself was removed from the
   markup in d4, and the rule was the last --amber-ink (brown) reference. */

.hero h1 {
    font-family: var(--font-brand-field);
    text-transform: uppercase;
    margin-top: 1.1rem;
    font-size: clamp(3rem, 4.5vw + 1rem, 5rem);
    font-weight: 600;
    /* Keep enough leading for Lithuanian ogoneks (Ą Ę Į Ų), including at the
       narrow 360px tier where the title wraps most aggressively. */
    line-height: 1.08;
    letter-spacing: .005em;
}

/* d5: the h1 <em> accent (brown second half) is gone — the whole headline is
   ink black per business feedback; the <em> wrappers were removed from the
   markup too so the emphasis split no longer exists anywhere. */

/* Owner 2026-08-19 (after the relay publish): the lead and the band intro stay
   in Manrope — the brand compressed face is for display lines only; long
   sentences read better in the text face (plan §5 line 192). */
.hero__lead {
    margin-top: 1.25rem;
    font-size: var(--t-lead);
    line-height: 1.55;
    color: var(--l-muted);
    max-width: 33rem;
}

/* d5, owner-approved AA EXCEPTION (2026-08-12): brand orange #E8780A on the
   cream ground measures 2.90:1 — below the 3:1 large-text bar (and the lead
   clamps to 16.6px on mobile where 4.5:1 would apply). Business explicitly
   asked for the brand orange here; precedent is the in-app dark-orange CTA
   exception. The harness allowlists THIS RULE ONLY — do not relax the global
   contrast gate, and do not reuse this exception for new elements. */
.c-white .url-strong { color: var(--amber); text-decoration: none; }
/* d5.1: the URL is a real link now — rest state unchanged (bold orange, no
   underline); hover/keyboard-focus reveal the underline, same 2px thickness
   language as .note__link. Color stays #E8780A, so no new AA surface. */
.c-white a.url-strong:hover,
.c-white a.url-strong:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Single CTA — the brief removed the secondary recovery button. */
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }

.cta-wrap { position: relative; display: inline-flex; max-width: 100%; }
.c-white .cta-wrap .btn--primary {
    min-width: 21.5rem;
    min-height: 4.25rem;
    justify-content: space-between;
    padding: .72rem 4.7rem .72rem 1.9rem;
    font-size: 1.03rem;
}
.cta-copy { display: grid; gap: .12rem; text-align: left; line-height: 1.2; }
.cta-copy strong { font: inherit; font-weight: 760; }
.cta-copy small { font-size: .68rem; font-weight: 650; letter-spacing: .01em; opacity: .78; }
[data-countdown-value] { display: inline-block; width: 2ch; font-variant-numeric: tabular-nums; text-align: right; }
.cta-pause {
    position: absolute;
    right: .72rem;
    top: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    /* d5 brown sweep: overlays were rgba(37,22,0,…) — #251600 in rgba form. */
    border: 1px solid rgba(21, 20, 26, .28);
    border-radius: 9px;
    color: var(--gold-ink);
    background: rgba(21, 20, 26, .10);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.cta-pause__icon { width: 15px; height: 15px; }
.cta-pause:hover { border-color: rgba(21, 20, 26, .5); background: rgba(255, 255, 255, .28); transform: translateY(-50%) scale(1.04); }
.cta-pause:focus-visible { transform: translateY(-50%); }
.cta-pause[aria-pressed="true"] { background: rgba(255, 255, 255, .42); }
.cta-pause[hidden], [data-countdown-line][hidden], .cta-pause__icon[hidden] { display: none !important; }

/* ---- hero visual ---- */
.hero__visual { position: relative; }

.hero__visual .appwin {
    /* d5.2 (business request): enlarge the UI illustration ~20% by bleeding
       into the empty margin right of the 1240px shell — the copy column keeps
       every pixel. +21% at 1440, +6% at 1280, current size at ≤1240, and the
       stacked mobile layout is untouched. The +1rem (not the full shell
       padding) is a deliberate allowance for classic Windows scrollbars, where
       100vw exceeds the true viewport by ~15px — without it the bleed can
       summon a horizontal scrollbar on real desktops even though headless
       measurements pass. */
    width: calc(100% + clamp(0px, (100vw - 1240px) / 2 + 1rem, 132px));
    box-shadow: 0 44px 84px -40px rgba(35, 25, 10, .48),
                0 4px 14px -6px rgba(35, 25, 10, .12);
}

/* Address badge overlapping the window corner — repeats the new URL at the
   point where the eye rests on the product. */
.badge {
    position: absolute;
    right: -.4rem;
    bottom: -1.05rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .72rem 1.05rem;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--l-line);
    box-shadow: 0 18px 42px -18px rgba(35, 25, 10, .4);
    font-size: .8rem;
    line-height: 1.35;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.badge:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 22px 46px -18px rgba(35, 25, 10, .46); }

.badge strong { display: block; font-size: .9rem; font-weight: 750; }
.badge__sub { color: var(--l-muted); }

.badge__pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #16A34A;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .16);
    flex: none;
}

/* ---- horizontal step band ---- */
.band {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--l-line);
    /* Translucent so the photograph stays faintly visible behind the band
       instead of being cut off by a hard opaque edge. */
    background: rgba(255, 253, 247, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.band__inner { padding: clamp(2rem, 4vw, 2.9rem) 0; }

.band h2 {
    font-family: var(--font-brand-field);
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: clamp(2rem, 1.5vw + 1.25rem, 2.8rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.012em;
}

.band__intro {
    max-width: 64rem;
    margin-top: .65rem;
    color: var(--l-muted);
    font-size: .96rem;
    line-height: 1.55;
}

.c-white .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.7rem;
    margin-top: 1.8rem;
    position: relative;
}

/* Hairline through the chip centres so the band reads as one sequence. Chips
   sit above it (opaque background + z-index). Desktop only — stacked steps
   read top-to-bottom without help. */
.c-white .steps::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 44px;
    right: 44px;
    height: 1px;
    background: var(--l-line-2);
}

/* step__n colour is set once in the gold-accent block above — do not respecify
   the colour here. Size upgrade only: larger chip, soft gold ring. */
.c-white .step__n {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 1rem;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 5px rgba(247, 169, 0, .16);
}

.c-white .step p {
    color: var(--l-muted);
}

/* Preserve the approved desktop fold: font arrival must not change the
   hero's block size and pull the first-login band into the viewport. */
@media (min-width: 901px) {
    .hero { block-size: clamp(34rem, calc(100vh - 335px), 42rem); }
}

@media (max-width: 860px) {
    .c-white .steps { grid-template-columns: 1fr; gap: 1.15rem; }
    .c-white .steps::before { content: none; }
}

/* ---- warning (in the hero, under the CTA) + support tail ---- */
.tail { padding: clamp(1.4rem, 2.8vw, 2rem) 0 0; }

/* d5: the .note box rules (.c-white .note, .c-white .hero__copy .note) were
   deleted as dead — the d4 merge replaced the note with p.band__intro and only
   the .note__link anchor survived in markup. The dead body rule was also the
   last #4A3520 (brown) reference. */

.note__link { color: var(--gold-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color .16s ease, text-decoration-thickness .16s ease; }
/* d5: hover was #B45309 (brown) → brand orange. Shares the .url-strong AA
   exception (hover-only state, underline affordance is not color-dependent). */
.note__link:hover, .note__link:focus-visible { color: var(--amber); text-decoration-thickness: 2px; }

.support {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* d5.3 (business): no wide gap — contacts follow the text directly.
       HIVE-640 item 4: the panel hugs its content instead of stretching a
       blank tail to the right edge. */
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    gap: .6rem .6rem;
    margin-top: 1.1rem;
    padding: 1.05rem 1.35rem 1.05rem 1.15rem;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .64);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 1px solid var(--l-line);
    font-size: .92rem;
}

/* HIVE-640 item 4 — gold support glyph in front of the question. */
.support__icon {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gold) 18%, #fff);
    color: var(--gold);
}
.support__icon svg { width: 20px; height: 20px; }

.support__hint { color: var(--l-muted); }
.support a { text-underline-offset: 2px; }
/* d5 brown sweep: hover was --amber-deep (brown). */
.support a:hover { color: var(--amber); }

.c-white .foot {
    margin-top: 2.4rem;
    padding: 1.5rem 0 2.2rem;
    border-top: 1px solid var(--l-line);
    color: var(--l-muted);
}

/* ---- responsive ---- */
@media (max-width: 1040px) {
    .hero { grid-template-columns: 1fr; gap: 2.4rem; }
    .hero__copy { max-width: none; }
    .badge { position: static; margin-top: 1rem; display: inline-flex; }
}

@media (max-width: 560px) {
    .head { padding: 1.1rem 0; }
    .actions .cta-wrap, .actions .btn { width: 100%; }
    .c-white .cta-wrap .btn--primary { min-width: 0; }
    .c-white .brand { gap: .52rem; }
    .c-white .brand__mark { width: 36px; height: 36px; }
    .c-white .brand__hive { font-size: 1.45rem; }
    .c-white .brand__rule { height: 26px; }
    .c-white .brand__badge { height: 36px; }
    .support { flex-direction: column; align-items: flex-start; gap: .45rem; }
}