/**
 * BRITE-74 - homepage (resources/views/web-front-view/index.blade.php).
 *
 * The page's own look lives in inline styles copied verbatim from the approved Claude Design
 * canvas, so the desktop rendering cannot drift from what was signed off. This file carries
 * only what inline styles cannot express, plus the places where the existing theme's own
 * global CSS overrides them:
 *
 *   1. The design system's blueprint frame (.blueprint + .corner registration marks). The
 *      canvas imports these from its "Industry" design system stylesheet rather than
 *      declaring them inline; without them the framed figure and cards lose their corner
 *      marks entirely. Values below are that stylesheet's, with the colour resolved against
 *      this page's own --color-text (#1C2421) instead of the design system's default.
 *
 *   2. Hover and focus states. The canvas annotates these with a style-hover attribute that
 *      its own runtime never renders - confirmed by reading the runtime (dc-runtime) and
 *      finding no hover handling of any kind in it. They are the designer's stated intent,
 *      so they are implemented here as real CSS.
 *
 *   3. Narrow-width behaviour. Most of the page's grids are auto-fit and collapse on their
 *      own; the hero's explicit two-column grid does not. That is overridden below.
 *      !important is required and deliberate here - these override inline styles, which is
 *      the one case where nothing else wins.
 *
 *   4. The hero's product-screens figure (BRITE-130): its tabs, its JS-off stacking, and the
 *      image sizing. This replaced BRITE-74's scenario-modelling panel, whose tab and table
 *      rules were removed with it.
 *
 * Everything is scoped under .brh (on the page's <main>) so none of it can reach another page.
 */

/* ── 1. Blueprint frame ──────────────────────────────────────────────────────────────── */

.brh .blueprint {
    position: relative;
    border-radius: 0;
}

.brh .blueprint > .corner {
    position: absolute;
    width: 11px;
    height: 11px;
    color: rgba(28, 36, 33, .55);
}

.brh .blueprint > .corner::before,
.brh .blueprint > .corner::after {
    content: "";
    position: absolute;
    background: currentColor;
}

.brh .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.brh .blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.brh .blueprint > .corner.tl { top: -6px; left: -6px; }
.brh .blueprint > .corner.tr { top: -6px; right: -6px; }
.brh .blueprint > .corner.bl { bottom: -6px; left: -6px; }
.brh .blueprint > .corner.br { bottom: -6px; right: -6px; }

/* ── 2. Interaction states ───────────────────────────────────────────────────────────── */

.brh .brh-btn { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }

/* Solid accent button on a light ground - one step darker on hover. */
.brh .brh-btn-solid:hover,
.brh .brh-btn-solid:focus-visible {
    background: #123029 !important;
    border-color: #123029 !important;
}

/* Outlined button on a light ground - border firms up, accent tint fills. */
.brh .brh-btn-outline:hover,
.brh .brh-btn-outline:focus-visible {
    background: #EAF0ED !important;
    border-color: #1A4137 !important;
}

/* White button on the dark green closing panel. */
.brh .brh-btn-invert:hover,
.brh .brh-btn-invert:focus-visible {
    background: #EAF0ED !important;
    border-color: #EAF0ED !important;
    color: #123029 !important;
}

/* Ghost button on the dark green closing panel. */
.brh .brh-btn-ghost:hover,
.brh .brh-btn-ghost:focus-visible {
    background: #163830 !important;
    border-color: #FFFFFF !important;
}

.brh .brh-faq-btn:hover { color: #1A4137 !important; }

/* The design's focus ring, from the canvas's own :focus-visible rule. The theme's global
   stylesheet does not set one on these elements, so without this keyboard focus is the
   browser default. */
.brh :focus-visible {
    outline: 2px solid #1A4137;
    outline-offset: 2px;
}

.brh ::selection { background: rgba(26, 65, 55, .22); }

/* ── 3. Theme collisions ─────────────────────────────────────────────────────────────── */

/* style.min.css carries bare element selectors that reach into any page's content. Three of
   them hit this design. Found by enumerating, in the browser, every bare-tag rule in the
   loaded stylesheets that matches an element inside .brh - not by reading the minified CSS,
   which is where the first one had already been missed once.

   (a) `header { background-color: white; box-shadow: ... }`. The design uses <header> as a
   semantic grouping element inside five sections. On the dark green "More than a budget"
   panel that painted a white block behind white text, so the H2 and one paragraph rendered
   invisible - white on white. On the light sections it was near-invisible and would have
   shipped unnoticed. */
.brh header {
    background-color: transparent;
    box-shadow: none;
}

/* (c) `dl { padding-left: 1.3rem }`. The "What could your surplus do for you?" grid is a <dl>
   and the design gives it no padding, so the theme's indent shifted the whole grid 20.8px
   right of the heading above it. The <ul>/<ol> equivalents are unaffected - those carry an
   explicit padding:0 from the design. */
.brh dl { padding-left: 0; }

/* The hero's "Create your budget" button jumps to #create. theme.js pins the site header
   (position:fixed, z-index 999) once the page is scrolled, so without this the heading the
   jump lands on sits underneath it. 60px is --header-clearance from front-layout.css, the
   single source of truth for the header's real height; the extra 20px is breathing room. */
.brh #create { scroll-margin-top: calc(var(--header-clearance, 60px) + 20px); }

/* ── 4. Narrow widths ────────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* The hero is the page's one explicitly two-column grid; every other grid is auto-fit
       and collapses without help. Below the theme's own lg breakpoint the two columns are
       too narrow for a 3-column table beside body copy. */
    .brh .brh-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 44px !important;
    }
}

@media (max-width: 767.98px) {
    /* 32px of side padding on a 390px phone leaves the hero figure ~326px. 20px is the theme container's own phone gutter. */
    .brh .brh-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Vertical rhythm designed for a desktop viewport reads as dead space on a phone. */
    .brh .brh-container {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

}

/* repeat(auto-fit, minmax(Npx, 1fr)) does not shrink below Npx: once the container is
   narrower than one track the grid overflows it rather than collapsing. The page's grids use
   N between 220px and 320px, so on a 320px phone (280px of content width) the 300px and 320px
   grids pushed ~40px of the dark "More than a budget" panel off-screen. Measured, not assumed:
   an element-rect sweep caught it while a scrollWidth check did not, because the clip below
   was silently swallowing it.

   Below 480px every one of these grids is already a single column on its own - two 220px
   tracks plus the gap need 441px and only 439px is available - so pinning them to one column
   here removes the forced minimum without changing the layout at any width where the design's
   own multi-column behaviour was still in play. */
@media (max-width: 479.98px) {
    .brh .brh-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Belt and braces after the above: the blueprint corner marks sit 6px outside their own box,
   and nothing on this page should ever be able to make the document scroll sideways. This is
   NOT the overflow fix - it hides symptoms rather than curing them, which is why the grid rule
   above exists and why verification asserts element rects rather than scrollWidth. */
.brh { overflow-x: clip; }

/* ── 5. Product screens figure (BRITE-130) ───────────────────────────────────────────── */

/* The hero figure: three crops of real app screens behind three tabs. This replaced the
   scenario-modelling panel, and inherits its geometry - the figure draws the outer border,
   so the tablist only needs a rule underneath it, and the sizing matches what the design
   already proved works at three-across in a 515px slot. */
.brh .brh-screens-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid #DDE4E1;
}

.brh .brh-screen-tab {
    padding: 13px 8px;
    border: 0;
    border-right: 1px solid #DDE4E1;
    background: transparent;
    color: #44534D;
    cursor: pointer;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    transition: background-color .18s ease, color .18s ease;
}

/* The design gives every tab a right-hand rule, including the last, which would double up
   against the figure's own border. */
.brh .brh-screen-tab:last-child { border-right: 0; }
.brh .brh-screen-tab[aria-selected="true"] { background: #1A4137; color: #FFFFFF; }
.brh .brh-screen-tab:not([aria-selected="true"]):hover { background: #EAF0ED; }

/* The panel is focusable because it holds nothing focusable of its own. Inset rather than
   offset, so the ring stays inside the figure's border instead of straddling it. */
.brh .brh-screen-panel:focus-visible { outline-offset: -3px; }

/* The intrinsic width/height on the <img> is the DPR-3 pixel size, which is what reserves
   the right box before the file arrives; these put it back to fluid once it has. Pinned
   here rather than left to the theme, whose bare `img` selector reaches into this page
   (see section 3). */
.brh .brh-screen-panel img { max-width: 100%; height: auto; }

/* JS-off: the tablist would be inert, so it is not rendered at all and the three crops
   stack, each above its own note. `data-js` is set by the inline script beside the markup,
   during parse, so the tabbed form is what actually paints. */
.brh .brh-screens:not([data-js="on"]) .brh-screens-tabs { display: none; }

.brh .brh-screens:not([data-js="on"]) .brh-screen-panel + .brh-screen-panel {
    border-top: 1px solid #DDE4E1;
}

/* The frame must not change size between tabs (BRITE-130 TASK 4 amendment). The three
   crops have different shapes - 1.11, 3.16 and 1.52 against a 1.05 slot - so left to
   themselves the figure grows and shrinks under the cursor, which reads as jarring even
   though it moves nothing else on the page (the hero row's height comes from the 778px
   text column, not the figure).

   The box is pinned to the SUMMARY crop's own ratio rather than to a literal 464px.
   Summary is the tab that loads, so the frame is exactly full on arrival and can only
   ever shrink its content, never grow the frame - and because the hero grid is fluid
   between 992px and 1244px, a hard 464px would leave white under Summary at every width
   below 1244. This resolves to 464px at the 515.5px slot, which is the number the
   amendment asked for, and stays exactly full everywhere else.

   The image is NOT scaled up to fill: the slot is only 515.5px wide, so filling the
   height would overflow horizontally, and upscaling would destroy the legibility this
   whole figure exists to protect. Short panels simply leave white below - the entry crop
   shows about 163px of content in a 464px box. Top-aligned, so the table header starts at
   the same y on every tab; centring would make the content jump even with the frame fixed,
   which is most of the problem back again. */
@media (min-width: 992px) {
    .brh .brh-screen-panel > picture {
        display: block;
        aspect-ratio: 533 / 480;
    }
}

/* Pinning the frame is not enough on its own: the note under it wraps to a second line on
   the longer tabs once the slot narrows (first seen at 992px, where the figure still moved
   24px between tabs while the frame itself held). Two lines are reserved so the whole
   figure holds still, not just the image box.

   line-height is pinned here rather than inherited because the theme sets it on a bare
   `p` selector - 1.7em in style.min.css and 1.8em in responsive.css - so the reserved
   height would otherwise depend on which of those wins at a given width. That is the
   BRITE-129 hazard in its mildest form. */
.brh .brh-screen-note {
    line-height: 1.5 !important;
    /* 14px font x 1.5 = 21px line boxes; two of them measure 43px once sub-pixel rounding
       is applied, not 42. Plus the 14px top and bottom padding from the inline style,
       which this min-height includes because * sets border-box. */
    min-height: 72px;
}

/* Below the hero grid's own collapse the figure shares its width with stacked content and
   the crops stop being readable - measured at 350px: 7.3px cap height on Summary and 5.2px
   on the others, against a ~7px floor. A picture of a financial table nobody can read is
   the artefact this ticket exists to remove, so the images are dropped entirely here and
   the tabs plus their notes carry the story instead. The app's own phone-width behaviour
   is BRITE-137; this is the marketing page being honest, not a fix for that.

   Dropping them also settles the loading question: every image is loading="lazy", and a
   display:none picture never approaches the viewport, so nothing is fetched at all. */
@media (max-width: 991.98px) {
    .brh .brh-screen-panel > picture { display: none; }

    /* The note's rule would otherwise double up against the tablist's own bottom border. */
    .brh .brh-screen-note { border-top: 0 !important; }

    /* "Demo data" labels the screenshots, and there are none here. */
    .brh .brh-screens-demo-label { display: none; }
}

@media (max-width: 767.98px) {
    /* Three uppercase labels across a 350px figure give about 110px each, which wraps
       "Go as deep as you like" onto three lines and leaves the row ragged. Stacked, each
       tab gets the full width and stays on one line. */
    .brh .brh-screens-tabs { grid-template-columns: minmax(0, 1fr); }

    .brh .brh-screen-tab {
        border-right: 0;
        border-bottom: 1px solid #DDE4E1;
    }

    .brh .brh-screen-tab:last-child { border-bottom: 0; }
}