/* ===== CSS Reset & Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* "Ledger" palette */
    --primary: #0E3A34;        /* pine  - brand, buttons, links */
    --primary-dark: #092824;   /* hover state for pine */
    --accent: #D98A1F;         /* amber - highlight, the "selected" cue */
    --accent-bright: #F0B24A;  /* lighter amber - plain amber fails contrast as text on pine */
    --accent-text: #C87C13;    /* amber darkened for text on bone/white: 3.3:1, plain amber is 2.8:1 */
    --secondary: #5F6B67;      /* muted pine-grey, for light surfaces */
    --on-dark-muted: rgba(245, 242, 236, 0.80);  /* muted copy on any dark surface */
    --text-dark: #1F2937;      /* headings and body copy */
    --text-light: #4B5A55;     /* secondary copy */
    --bg-gray: #F5F2EC;        /* bone   - alternating sections */
    --border: #E2DCD0;         /* warm border */
    --white: #ffffff;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ===== Navigation ===== */
.nav {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--text-dark);
}

/* The mark is tight to its bars, so it needs no tile on the white nav. */
.logo-mark {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* :not(.btn-primary) matters here - a bare `.nav-links a` rule outranks
   `.btn-primary` (0,1,1 vs 0,1,0) and would repaint the CTA's white text
   with the dark body colour, making it unreadable on the pine button. */
.nav-links a:not(.btn-primary) {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:not(.btn-primary):hover {
    color: var(--primary);
}

/* ===== Buttons ===== */
.btn-primary {
    background: var(--primary);
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    display: inline-block;
    transition: background 0.2s;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--primary);
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: var(--primary);
    color: var(--white);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

/* ===== Hero Section ===== */
.hero {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--primary) 0%, #17564A 100%);
    color: var(--white);
}

.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
    line-height: 1.7;
    color: var(--on-dark-muted);
}

/* Coloured emphasis for the word "your" on dark banners. Plain amber drops below
   4.5:1 against the lighter end of the pine gradient, so use the bright tint. */
.emph {
    color: var(--accent-bright);
    font-style: normal;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons sitting on the dark hero invert themselves: a solid bone fill for the
   primary action, an outline for the secondary. Pine on pine would vanish, and
   white text on amber fails contrast, so amber is deliberately kept off buttons. */
.hero-cta .btn-primary {
    background: var(--white);
    color: var(--primary);
}

.hero-cta .btn-primary:hover {
    background: var(--bg-gray);
}

.hero-cta .btn-secondary {
    background: transparent;
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.55);
}

.hero-cta .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    border-color: var(--white);
}

/* ===== Sections ===== */
/* The hero caveat sits under the buttons, narrower than the subtitle so it reads
   as a footnote rather than a third paragraph. */
.hero-note {
    max-width: 34rem;
    margin: 1.5rem auto 0;
    font-size: 0.9375rem;
    /* The hero is a dark surface, so the caveat needs the on-dark muted colour,
       not the body copy colour. */
    color: var(--on-dark-muted);
}

/* One-line section that carries the "who is this" answer on its own. */
.section-lead {
    max-width: 44rem;
    margin: 0 auto;
    text-align: center;
    font-size: 1.125rem;
    color: var(--text-dark);
}

.section {
    padding: 5rem 0;
}

.section-gray {
    background: var(--bg-gray);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
}

/* ===== Features ===== */
/* Fixed 2-up so four items land as 2x2 rather than 3 + 1. The 768px query
   below drops this to a single column, giving four stacked rows. The width
   cap stops the two columns from stretching each line of copy too wide. */
.features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    max-width: 64rem;
    margin: 0 auto;
}

/* Three-up variant: the study asks exactly three questions, and the fixed
   2-up above would leave the third one alone on its own row. */
.features--three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 70rem;
}

.feature {
    text-align: center;
}

.feature-icon {
    width: 4rem;
    height: 4rem;
    background: var(--accent);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.feature-text {
    color: var(--text-light);
    line-height: 1.7;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}

/* Bare links inside a card would otherwise fall back to the UA default blue */
.feature-title a {
    color: var(--text-dark);
    text-decoration: none;
}

.feature-title a:hover {
    color: var(--primary);
}

/* Trailing "see more" link beneath a section */
.section-more {
    margin-top: 2rem;
    text-align: center;
}

.section-more a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.section-more a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ===== Benefits ===== */
.benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;
}

.benefit h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.benefit p {
    color: var(--text-light);
    line-height: 1.7;
}

/* ===== CTA Section ===== */
.section-cta {
    background: var(--primary);
    color: var(--white);
}

.cta-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta-text {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: var(--on-dark-muted);
}

.section-cta .btn-primary {
    background: var(--white);
    color: var(--primary);
}

.section-cta .btn-primary:hover {
    background: var(--bg-gray);
}

/* Secondary path under the primary button. The ask is the footer form, so this
   states it where the visitor decides not to book rather than repeating it. */
.cta-alternative {
    max-width: 34rem;
    margin: 1.5rem auto 0;
    font-size: 0.9375rem;
    color: var(--on-dark-muted);
}

.cta-alternative a {
    color: var(--white);
    text-decoration: underline;
}

/* ===== Footer ===== */
.footer {
    background: var(--text-dark);
    color: var(--white);
    padding: 3rem 0 1.5rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-text {
    color: var(--on-dark-muted);
    line-height: 1.6;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--on-dark-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--white);
}

.footer-bottom {
    border-top: 1px solid rgba(245, 242, 236, 0.18);
    padding-top: 1.5rem;
    text-align: center;
    color: var(--on-dark-muted);
}

/* ===== Content Pages ===== */
.page-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 4rem 0 3rem;
    text-align: center;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--white);
}

.page-subtitle {
    font-size: 1.25rem;
    color: var(--on-dark-muted);
}

/* The banners carried no palette colour beyond the pine background itself. A
   short amber rule separates title from subtitle and gives the accent a home.
   The homepage hero and the pine CTA band are the same component in spirit, so
   they share the rule. */
.page-header .page-title::after,
.hero-title::after,
.cta-title::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin: 1.25rem auto 0;
    background: var(--accent);
    border-radius: 2px;
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.content-section {
    margin-bottom: 3rem;
}

.content-section h2 {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.content-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
    margin-top: 1.5rem;
}

.content-section p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.content-section p:last-child {
    margin-bottom: 0;
}

/* Pine sits at ~1.7:1 against the #4B5A55 body copy, well under the 3:1 that
   would let colour alone mark a link (WCAG 1.4.1). The weight step is the
   non-colour cue; the underline is saved for hover and keyboard focus. */
.content-section a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.content-section a:hover,
.content-section a:focus-visible {
    color: var(--primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.feature-list {
    list-style: none;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0;
}

.feature-list li {
    padding-left: 1.75rem;
    position: relative;
    margin-bottom: 1rem;
    color: var(--text-light);
    line-height: 1.8;
}

.feature-list li:last-child {
    margin-bottom: 0;
}

.feature-list li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.7rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
}

.steps-list {
    max-width: 44rem;
    margin: 0 auto;
    padding-left: 1.5rem;
    color: var(--text-light);
    line-height: 1.8;
}

.steps-list li {
    margin-bottom: 0.75rem;
}

.steps-list li:last-child {
    margin-bottom: 0;
}

.legal-list {
    margin: 1rem 0 2rem 1.5rem;
    color: var(--text-light);
    line-height: 1.8;
    padding-left: 0;
}

.legal-list li {
    margin-bottom: 0.75rem;
    margin-left: 0.5rem;
}

.legal-list li:last-child {
    margin-bottom: 0;
}

.legal-list a {
    color: var(--primary);
    text-decoration: none;
}

.legal-list a:hover {
    text-decoration: underline;
}

/* ===== Cookie Consent ===== */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* --text-dark at 92%: just enough to read as a layer over the page rather
       than a band across it. The blur keeps scrolling text from showing
       through the copy - worst case (white behind) is still 11.5:1. */
    background: rgba(31, 41, 55, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--white);
    padding: 1.5rem;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
}

.cookie-consent.show {
    display: block;
    animation: slideUp 0.3s ease-out;
}

/* The bar is fixed, so on short viewports it sat on top of the hero's CTA
   buttons with no way to scroll them clear. main.js sets --cookie-banner-h to
   the measured height while the bar is up. */
body.cookie-visible {
    padding-bottom: var(--cookie-banner-h, 7rem);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.cookie-text {
    flex: 1;
    min-width: 250px;
}

.cookie-text p {
    margin: 0;
    line-height: 1.6;
    font-size: 0.95rem;
    color: var(--on-dark-muted);
}

/* These links sit inline in the surrounding copy, so unlike the article body
   there is no colour difference to lean on. The body text is muted instead and
   the links stay white and semibold - the same trade as the footer. */
.cookie-text a {
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
}

.cookie-text a:hover,
.cookie-text a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

/* Pine on the slate bar measured 1.17:1, so the button had no perceptible
   edge. White matches the inverted CTA already used in .section-cta. */
.btn-accept {
    background: var(--white);
    color: var(--primary);
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-accept:hover {
    background: var(--bg-gray);
}

/* Refusing has to be as easy as accepting, so this is a full-size button
   beside Accept rather than a link or a dimmed-out afterthought. */
.btn-decline {
    background: transparent;
    color: var(--white);
    padding: 0.75rem 1.5rem;
    border: 1px solid var(--on-dark-muted);
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.btn-decline:hover {
    background: rgba(245, 242, 236, 0.12);
    border-color: var(--white);
}

/* ===== Wordmark ===== */
/* Two-tone name; the mark sits beside it and the text still carries the link
   name if the SVG fails to load. */
.wordmark {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: none;
}

.wordmark-mar {
    color: var(--accent-text);
}

.wordmark-vizio {
    color: var(--primary);
}

.logo-link:hover .wordmark {
    filter: brightness(0.85);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .nav-links {
        gap: 1rem;
    }
    
    .features,
    .features--three,
    .benefits {
        grid-template-columns: 1fr;
    }
    
    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .cookie-actions {
        width: 100%;
    }
    
    .btn-accept,
    .btn-decline {
        width: 100%;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .page-subtitle {
        font-size: 1.125rem;
    }

}

/* The mark plus the full call to action no longer fit on one phone-width row. */
@media (max-width: 480px) {
    .logo-mark {
        width: 1.5rem;
        height: 1.5rem;
    }

    .logo-link {
        gap: 0.375rem;
    }

    .wordmark {
        font-size: 1.25rem;
    }

    .nav-links {
        gap: 0.75rem;
    }

    .nav-links .btn-primary {
        padding: 0.65rem 1rem;
        font-size: 0.9375rem;
    }
}

/* ===== Email signup ===== */
/* One surface: a dark strip at the top of the footer, marked .footer-subscribe.
   js/subscribe.js drives any form carrying data-subscribe-form, so a second
   surface would only need the same attributes. */
.subscribe-text {
    max-width: 34rem;
    margin: 0 auto 1.5rem;
    color: var(--text-light);
}

.subscribe-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

/* The required field and the action own a full row; first name and industry
   share the row between them. */
.subscribe-form .subscribe-input[name="email"],
.subscribe-form button[type="submit"] {
    grid-column: 1 / -1;
}

/* Full width, so the button squares off with the fields above it. */
.subscribe-form button[type="submit"] {
    justify-self: stretch;
}

/* `hidden` loses to display:flex above, so state the intent explicitly. */
.subscribe-form[hidden] {
    display: none;
}

.subscribe-input {
    width: 100%;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-dark);
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.subscribe-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(14, 58, 52, 0.15);
}

/* Off-screen rather than display:none so naive bots still fill it in. */
.subscribe-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.subscribe-status {
    margin: 1rem 0 0;
    min-height: 1.25rem;
    font-size: 0.9375rem;
}

.subscribe-status--success {
    color: var(--primary);
    font-weight: 600;
}

.subscribe-status--error {
    color: #B42318;
    font-weight: 600;
}

.subscribe-note {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    color: var(--secondary);
}

.subscribe-note a {
    color: inherit;
    text-decoration: underline;
}

/* Footer variant: a full-width strip above the link columns. The id is the
   target of the CTA link on the home page; the offset keeps the sticky nav off
   the heading after the jump. */
.footer-subscribe {
    scroll-margin-top: 6rem;
    max-width: 34rem;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(245, 242, 236, 0.18);
}

.footer-subscribe .footer-title {
    margin: 0 0 0.5rem;
}

/* Pine on the slate footer measures about 1.2:1, so the button needs the same
   inversion already used by .section-cta and the cookie bar. */
.footer-subscribe .btn-primary {
    background: var(--white);
    color: var(--primary);
}

.footer-subscribe .btn-primary:hover {
    background: var(--bg-gray);
}

.footer-subscribe .subscribe-text {
    margin: 0 0 1rem;
    color: var(--on-dark-muted);
}

.footer-subscribe .subscribe-input:focus {
    border-color: var(--accent-bright);
    box-shadow: 0 0 0 3px rgba(240, 178, 74, 0.25);
}

.footer-subscribe .subscribe-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(245, 242, 236, 0.3);
    color: var(--white);
}

.footer-subscribe .subscribe-input::placeholder {
    color: var(--on-dark-muted);
}

.footer-subscribe .subscribe-status--success {
    color: var(--accent-bright);
}

.footer-subscribe .subscribe-status--error {
    color: #FCA5A5;
}

.footer-subscribe .subscribe-note {
    margin-top: 0.75rem;
    color: var(--on-dark-muted);
}

@media (max-width: 768px) {
    .subscribe-form {
        grid-template-columns: 1fr;
    }
}