/* Public AI Resume Builder landing page (/ai-resume-builder).

   DELIBERATELY SMALL. The page chrome is the ATS checker's: hero, tool card, section
   rhythm, buttons and eyebrows all come from resume-score-marketing.css so the two
   funnel surfaces read as one product rather than two designs. Only two things have no
   equivalent there and live here:

     1. the line offering the upload route to the few who arrive holding a resume, and
     2. the rules that let the wizard, which is an APP screen, sit inside a marketing
        card without dragging the whole dashboard shell in with it.

   Nothing here restyles the wizard itself. The same partial renders inside the real
   dashboard shell on the authenticated screen, and a rule reaching into it from this
   file would change a page this file is never loaded on. */

/* ---------- the one property Bootstrap leaks past marketing.css ----------
   Loading Bootstrap above marketing.css protects every property marketing.css DECLARES.
   It does not protect the ones it never mentions, and body line-height is one: our
   themed bootstrap.min.css sets 1.7 (not stock Bootstrap's 1.5), marketing.css sets
   font-family, background and color on body but no line-height, so 1.7 inherited into
   the whole page. It showed up as the hero CTA standing 52px tall against the checker's
   45, since .btn-hero-primary sets padding and font-size but leans on the inherited
   line-height for its content box.

   Restored to what every other marketing page computes. The wizard is re-given 1.7 just
   below, because that is the rhythm it is designed to on the dashboard. */
body {
    line-height: normal;
}

/* ---------- the second thing Bootstrap takes from a single class ----------
   Reboot in our themed build carries `a:hover { color: #0f4f9e }`. That selector scores
   (0,1,1); marketing.css dresses its hero CTA with `.btn-hero-primary`, which scores
   (0,1,0) and never restates a colour on hover because on a page with no Bootstrap it
   never had to. Specificity, not load order, decides this one, so putting Bootstrap
   above marketing.css could not help: on hover the white label turned dark blue on a
   blue ground and all but vanished.

   Restated at (0,2,0) so the class wins back its own button. Focus and active are
   included because Reboot styles those too and a keyboard user would hit the same wall. */
.btn-hero-primary:hover,
.btn-hero-primary:focus,
.btn-hero-primary:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
    color: #fff;
}

/* ---------- the typeface, which is the widest leak of the three ----------
   Our themed bootstrap.min.css carries
       h6,.h6,h5,.h5,h4,.h4,h3,.h3,h2,.h2,h1,.h1 { font-family: "Ubuntu",sans-serif; ... }
   Marketing pages name their face once, on body, and let every heading inherit it. An
   inherited value loses to any declaration at all, whatever the specificity and whatever
   the order, so loading Bootstrap above marketing.css could not prevent this one: every
   heading on the page came out in Ubuntu while the rest of the site is Geist. It reached
   the H1, the hero title, all four feature headings and the FAQ
   heading, none of which looked like the ATS checker this page is built on.

   Handed back to inheritance rather than given a face, so this page keeps following
   marketing.css the way its siblings do and nothing here has to be revisited if the
   brand font changes. */
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
}

/* The wizard needs no exemption from the rule above: it declares its own heading type in
   resume-builder.css, which is where anything the partial depends on belongs. Measuring
   this is what turned up the reason it has to. */

/* The same shape once more, in paragraphs. Bootstrap sets p { margin-bottom: 1rem };
   the marketing reset zeroes margins through a universal selector, which scores (0,0,0)
   and loses to an element selector no matter which sheet came last. Only the two subtitle
   classes on this page take their spacing from that reset, so only they are restored,
   which keeps this clear of the wizard, whose every paragraph carries its own margin. */
.free-tool-sub,
.section-sub {
    margin-bottom: 0;
}

/* ---------- hero benefit card footnote ----------
   The checker carries the same element as a long inline style attribute. Given as a
   class here instead, because CSS belongs in a stylesheet. */
.score-benefit-note {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.82rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

/* ---------- the route out ----------
   The line for the minority who arrive holding a resume. Set quietly and to one side: it
   is a genuine alternative but not what this page is for, and given any more weight it
   becomes the two card fork that used to stand here, charging every visitor a decision
   before the interview would open.

   It shares the subtitle's row rather than taking one of its own, so it costs the page no
   height at all. The subtitle is the taller of the two and sets the row, and the link
   rides at the far end of it: baseline alignment rather than centring, because these are
   two runs of text at different sizes and it is their baselines that should agree.
   .free-tool-sub is capped at 760px by marketing.css and the row is far wider, so
   space-between separates them without either needing a width of its own. */
.arb-sub-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.arb-alt-path {
    margin: 0;
    flex: 0 0 auto;
    font-size: 0.88rem;
    color: var(--score-muted, #5b6b80);
}

.arb-alt-path a {
    color: #1363c6;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

/* Every state restated at the same values, and kept rather than deleted: Bootstrap's
   Reboot underlines a bare `a`, and marketing.css dresses its own link hovers, so leaving
   these unstated would hand the decision to whichever sheet the layout brought. The arrow
   is what marks this as a link, the same way Start over is marked by nothing at all. */
.arb-alt-path a:hover,
.arb-alt-path a:focus,
.arb-alt-path a:active {
    color: #1363c6;
    text-decoration: none;
}

/* ---------- the card, once the interview starts ----------
   The 1180px cap is the checker's, sized for an upload box, and it is wrong for an
   interview with a resume forming beside it. Set in the markup on this page's card,
   since the interview is open from the first paint and there is no longer a fork answer
   to widen it on.

   1360 and not wider: it stays inside a 1440 viewport with margin either side, and the
   prose sections below remain at 1140 so the tool reads as the working surface it is. */
.free-tool-inner.arb-working {
    max-width: 1360px;
    transition: max-width 0.35s ease;
}

/* Clears the fixed marketing header when the hero CTA scrolls to the card, with enough
   left over that its top edge does not sit flush against the nav. */
.free-tool-inner {
    scroll-margin-top: 84px;
}

@media (prefers-reduced-motion: reduce) {
    .free-tool-inner.arb-working {
        transition: none;
    }
}

/* ---------- the wizard, embedded ---------- */
.arb-wizard[hidden] {
    display: none;
}

.arb-wizard {
    /* The marketing header is fixed, so a bare scrollIntoView puts the step rail
       underneath it. */
    scroll-margin-top: 80px;
}

/* .dashboard-v2 is an app SHELL, not a component. It fills the viewport
   (min-height: 100vh), paints the dashboard's own ground, and forces 36px/132px of
   vertical padding with !important. All of that is right for a standalone screen and
   wrong for a wizard sitting inside a marketing card: it stacked a second grey against
   this page's card and left roughly a full viewport of empty band under the questions.
   Reduced here to what the wizard actually needs, which is its typography and the card,
   rail and field styles scoped beneath it. */
.arb-wizard .dashboard-v2 {
    min-height: 0;
    background: transparent;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* The wizard's own buttons are deliberately NOT touched from here. marketing.css claims
   .btn-primary for its nav, and the fix for that lives with the partial, in
   resume-builder.css, where the two step buttons are declared in full. */

/* ---------- dark-band headings ----------
   The same collision as the wizard's typography, in the other direction. This page loads
   css/bootstrap.min.css so the interview's form controls render (see HeadAssets in
   Public.cshtml), and that file styles headings directly:

       h1, h2, h3, h4, h5, h6 { ... color: #14183e }

   A rule set ON the element beats a colour inherited from an ancestor, so inside the dark
   How It Works band the near-black brand navy won over the light colour .how-section
   passes down, and the headline plus all three step titles rendered at roughly 1:1
   against the ground. Invisible, not merely low contrast.

   The checker page never shows this because _LayoutMarketing ships no Bootstrap and the
   checker adds none, so there its headings inherit and come out near-white. That is why
   the two pages diverged on markup that is otherwise identical.

   Restoring inheritance rather than naming a colour keeps the band's light-on-dark
   treatment in one place, .how-section, so this does not have to be kept in step with it.
   Scoped to the section, so the marketing chrome and the wizard are untouched. */
.resume-score-page .how-section h2,
.resume-score-page .how-section h3 {
    color: inherit;
}