/* ============================================================
   Hero redesign — 2026
   ------------------------------------------------------------
   Loaded after landing.css and bootstrap.css; additive overrides only.
   Brand palette is unchanged: #0469B3 blue, #7AC143 CTA.
   ============================================================ */

/* --- 1. Solid brand background ------------------------------------------
   The banner photo was a screenshot of the product — dense with small text and
   charts — and it competed with the headline and form sitting on top of it. It
   also made contrast unpredictable: white text washed out wherever the image
   ran light. A subtle vertical gradient on the brand blue reads as one calm
   surface (white on it is a 5.7:1 contrast ratio, comfortably AA) while
   avoiding the deadness of a single large flat field.

   The shorthand also clears background-image, background-attachment and
   background-position from landing.css. That matters: landing.css re-applies a
   SECOND photo (bannerBG_1024.jpg) inside a max-width:1025px media query. This
   rule is later in source order at equal specificity, so it wins at every
   width and the photo cannot come back on tablets. */
.pageBannerTop {
    position: relative;
    background: linear-gradient(180deg, #0a72bd 0%, #0356a0 100%);
}

/* On a wide monitor the hero's content span stretches past 1500px, and since
       gap = content span − image width − card width
   an intentionally modest product shot leaves a big dead band in the middle.
   No column split can fix that: the leftover is a function of total width.

   So cap the hero's content and centre it. The padding sits INSIDE the element,
   so the blue still bleeds edge to edge while the columns — being percentages
   of the content box — tighten toward each other.

   The media query's min-width must stay ABOVE the cap, or the calc resolves
   negative and the whole declaration is silently dropped. */
@media (min-width: 1480px) {
    .pageBannerTop {
        padding-left: calc((100% - 1440px) / 2);
        padding-right: calc((100% - 1440px) / 2);
    }
}

/* --- 1b. Hero columns ----------------------------------------------------
   The headline now lives INSIDE the left column (it used to be a full-width
   block above both), so the two columns start at the same y and the form card
   top-aligns with the headline by construction.

   GRID TRAP — read before changing any .cN class in this hero:
   gridiculous's .s1 is NOT "start at column 1". It is a one-column OFFSET:

       .s1 { margin-left: 8.33%; }

   So the widths in a row must satisfy:

       8.33% (the .s1 offset) + col1 + col2  <=  91.66%

   ...which also leaves an 8.33% right gutter, matching the 8.33% left offset.
   That is what makes the hero look centred. Exceed it and the last column
   silently wraps onto the next line and the nav overhangs the viewport.

   Current layout, both rows landing exactly on 91.66%:
       nav      .c10 s1            8.33 + 83.33 = 91.66
       content  .c6 s1  + .c4      8.33 + 50.00 + 33.33 = 91.66            */
.hero-copy {
    padding-bottom: 20px;
}

/* Everything in the left column shares one left edge. landing.css nudges the
   lede 2px right of the headline, which reads as a misalignment. */
.hero-copy p {
    margin-left: 0;
}

/* --- 1c. Utility nav ----------------------------------------------------
   This nav used to sit in a row BEFORE .pageBannerTop whose only child was
   float:right. A parent whose sole child is floated collapses to zero height,
   so the nav overflowed downward and landed on the blue by accident — it was
   never really in the hero. Once .pageBannerTop became positioned it painted
   over the float and the nav vanished entirely.

   It now lives inside the hero as a real full-width column, right-aligned with
   text-align rather than a float, so nothing collapses and nothing can paint
   over it. */
.util-nav-wrap {
    padding-top: 18px;
}

/* --- 1d. Browser chrome around the product shot -------------------------
   Matches the treatment on the dashboard landing page: a floating app window
   rather than a bare screenshot. */
/* 90% of the (capped) column. Sized against the 1440px cap this lands the shot
   near 610px with a ~110px gutter before the form card — big enough to read as
   the hero, without the dead band it left when the column stretched across a
   1885px screen. */
.browser-chrome {
    width: 90%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38);
    background: #2b2f36;
}

.browser-chrome__bar {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #2b2f36;
}

.browser-chrome__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    flex: none;
}

.browser-chrome__dot--red   { background: #ff5f57; }
.browser-chrome__dot--amber { background: #febc2e; }
.browser-chrome__dot--green { background: #28c840; }

.browser-chrome__url {
    flex: 1 1 auto;
    margin-left: 10px;
    padding: 5px 12px;
    background: #1e2126;
    border-radius: 6px;
    color: #9aa1ad;
    font-size: 12px;
    text-align: center;
}

.browser-chrome__shot {
    display: block;
    width: 100%;
    height: auto;
}

/* Top-align the card with the headline. .bannerH1 carries margin-top .67em at
   a 48px font = 32px, so the form column takes exactly the same offset
   (landing.css sets 40px, which would sit the card 8px low). */
.signUpForm {
    padding-top: 32px;
}

/* --- 2. The signup form becomes a white card ---------------------------
   Previously the inputs floated directly on the photo with nothing holding
   them together.

   IMPORTANT: .signUpForm is itself the gridiculous column (class="c5
   signUpForm") — a left-floated 41.66% box. Constraining IT shrinks the
   column and breaks the row's symmetry, so the card is a separate inner
   element. The column keeps its width; the card sits inside it. */
.signup-card {
    background: #fff;
    color: #1d2430;
    padding: 28px;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    margin-bottom: 40px;
    /* A full 41.66% column is a gratuitously wide form on a large monitor.
       Cap the card and pin it to the column's right edge, so the hero's left
       and right gutters stay equal. */
    max-width: 460px;
    margin-left: auto;
    margin-right: 0;
}

.signup-card .formHeading {
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 300;
    color: #1d2430;
}

/* Fields now sit on white, so they need a border of their own.
   This project's bootstrap.css is a partial build and never defines
   .form-control, so the inputs had no width rule and rendered at their
   intrinsic size. That went unnoticed while they sat on the banner photo
   (the shortfall just showed background), but inside a card it reads as
   dead white space. Make them fill the card. */
.signup-card .form-control {
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1px solid #d8dde3;
    box-shadow: none;
}

.signup-card .form-control:focus {
    border-color: #0469B3;
    box-shadow: 0 0 0 3px rgba(4, 105, 179, 0.15);
}

.signup-card .btn-signup {
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
}

/* This line was white-on-blue; it now sits on the white card. */
.signup-card .signin-line {
    color: #5b6472;
    font-size: 15px;
    padding-top: 6px;
}

.signup-card .signin-line a {
    color: #0469B3;
    font-size: inherit;
    text-decoration: underline;
}

/* --- 3. Nasdaq consent: summary + "Läs mer" ----------------------------
   The full consent text ran to ~60 justified words and visually outweighed the
   form itself. It is now a one-line summary, with the complete legal wording
   (unchanged in substance) one click away. Same checkbox, same binding — only
   the presentation changed. */
.consent-block {
    margin: 18px 0 4px;
}

.consent-block label {
    font-size: 14px;
    line-height: 1.5;
    font-weight: normal;
    color: #5b6472;
    margin: 0;
}

/* Keeps the summary text off the floated custom checkbox. */
.consent-summary {
    display: block;
    overflow: hidden;
}

.consent-more {
    background: none;
    border: 0;
    padding: 0;
    margin: 8px 0 0 1.8em;
    font-size: 13px;
    color: #0469B3;
    text-decoration: underline;
    cursor: pointer;
}

.consent-full {
    margin: 10px 0 0 1.8em;
    padding: 12px 14px;
    background: #f5f7f9;
    border-radius: 8px;
}

.consent-full p {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.55;
    color: #5b6472;
}

.consent-full p:last-child {
    margin-bottom: 0;
}

.consent-full a {
    color: #0469B3;
}