/* ⚠️ Marketing-only styles: no design-system copies here (DesignSystemConsumptionConventionTests). */

/* ⭐ The display type scale; a heading's font-size is always one of these (TypeScaleConventionTests). */
:root {
    --mkt-text-12: 0.75rem;
    --mkt-text-14: 0.875rem;
    --mkt-text-16: 1rem;
    --mkt-text-18: 1.125rem;
    --mkt-text-20: 1.25rem;
    --mkt-text-24: 1.5rem;
    --mkt-text-28: 1.75rem;
    --mkt-text-32: 2rem;
    --mkt-text-40: 2.5rem;
    --mkt-text-48: 3rem;
    --mkt-text-52: 3.25rem;
    --mkt-text-56: 3.5rem;
    --mkt-text-60: 3.75rem;
}

/* ⭐ The one title every non-legal page opens with: 52px, 40px on a phone (PageHeaderConventionTests). */
.page-title {
    color: var(--clr-white);
    font-size: var(--mkt-text-52);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

@media (max-width: 60rem) { /* --bp-lg */
    .page-title {
        font-size: var(--mkt-text-40);
    }
}

/* The small purple label above a section heading, left-aligned like the heading (PageHeaderConventionTests). */
.section-eyebrow {
    color: var(--accent-text);
    font-size: var(--mkt-text-12);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Large button for hero and closing bands; 51px tall like the design's large button. */
.btn-lg {
    padding: 1rem 1.75rem;
    font-size: var(--mkt-text-16);
    line-height: 1.2;
}

/* A button as the design draws it: hover and press change the colour only, in 150ms, so the package's glow, lift and shrink are switched off. */
.btn-flat {
    box-shadow: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-flat:hover,
.btn-flat:active {
    transform: none;
    box-shadow: none;
}

/* A reader who prefers reduced motion gets the colour change at once. */
@media (prefers-reduced-motion: reduce) {
    .btn-flat {
        transition: none;
    }
}

/* The Light button's label and arrow are the page background colour, a step darker than the package's ink. */
.btn-light {
    color: var(--clr-black);
}

/* Colours the design uses that Inky.Design has no token for; the closing call to action band owns both. */
:root {
    --mkt-cta-gradient-end: #2a1457;
    --mkt-cta-scrim: #080514;
}

/* The purple glow behind a page hero: this one colour at 32% strength, fading to nothing. */
:root {
    --mkt-hero-glow: #7d3bed;
}

/* The store badges' black fill and grey outline, which Inky.Design has no token for. */
:root {
    --mkt-store-badge-fill: #000;
    --mkt-store-badge-outline: #6b7280;
}

/* Colours Inky.Design has no token for: the portfolio tile backing and the featured plan's top. */
:root {
    --mkt-tile-midnight: #12091f;
    --mkt-plan-featured-top: #1b1233;
}

/* The rhythm every Home section shares: 96px above and below, a 1px line, 28px phone gutters. */
:root {
    --mkt-section-space: 6rem;
    --mkt-section-line: 1px;
    --mkt-section-gutter: var(--space-6);
    --mkt-section-header-gap: 3.5rem;
}

@media (max-width: 60rem) { /* --bp-lg */
    :root {
        --mkt-section-space: 3.5rem;
        --mkt-section-line: 0;
        --mkt-section-gutter: 1.75rem;
    }
}

/* ⚠️ A heading may break inside a word so enlarged text wraps; "anywhere", not "break-word", lowers the minimum width (TextEnlargementReflowE2ETests). */
h1,
h2,
h3,
h4 {
    overflow-wrap: anywhere;
}

/* A header or footer text link as the design draws it: a 3px by 7px focus box that leaves the text in place, and a 44px pointer area. */
.chrome-link {
    position: relative;
    margin: -0.1875rem -0.4375rem;
    padding: 0.1875rem 0.4375rem;
    border-radius: 0.3125rem;
}

.chrome-link::after {
    content: '';
    position: absolute;
    inset: -0.6rem -0.25rem;
}

/* The open phone menu is modal: the page behind it must not scroll. */
html:has(dialog[open]) {
    overflow: hidden;
}

/* A jump to a form control leaves its label in view; a textarea ignores its own scroll margin, so the page makes the room. */
html:has(.form-field :target) {
    scroll-padding-top: var(--space-16);
}