/* ==========================================================================
   SaveEZ — 2026 design system
   Dark-first. EZ Deals is the commercial engine, so it owns the primary
   accent (electric lime); gold products carry a secondary metal accent.
   Deliberately shares nothing with the previous charcoal/orange theme.
   ========================================================================== */

:root {
    /* Ground: a true ink, cooler and deeper than the old charcoal */
    --ink:        #0A0B0E;
    --ink-raise:  #121419;
    --ink-card:   #191C23;
    --line:       rgba(255, 255, 255, .09);
    --line-soft:  rgba(255, 255, 255, .05);

    /* EZ Deals — the money maker, so it gets the loudest colour */
    --deal:       #CBF34A;
    --deal-dim:   #9BBE2E;
    --deal-glow:  rgba(203, 243, 74, .18);

    /* Gold products — secondary, metallic, never competes with --deal */
    --gold:       #E0B142;
    --gold-dim:   #A97722;

    /* Type */
    --paper:      #F4F1EA;
    --paper-dim:  #B9B7B1;
    --muted:      #86857F;

    --font-display: 'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
    --font-text:    'Public Sans', system-ui, -apple-system, sans-serif;

    --shell:      1220px;
    --gutter:     24px;
    --radius:     14px;
    --radius-lg:  22px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: lining-nums;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.02;
    margin: 0;
}

/* Figures are compared down a column, so they get tabular digits. */
.num, .stat__value, .deal-card__off, .price {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

.shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Sections are separated by hairlines rather than stacked cards. */
.band { border-top: 1px solid var(--line); padding: 92px 0; }
.band--tight { padding: 64px 0; }
.band--raise { background: var(--ink-raise); }
.band--flush { border-top: 0; }

/* Numbered section label: 01 / EZ DEALS */
.kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 26px;
}
.kicker__idx { color: var(--deal); font-variant-numeric: tabular-nums; }
.kicker__rule { flex: 1; height: 1px; background: var(--line); }
.kicker--gold .kicker__idx { color: var(--gold); }

/* ------------------------------------------------------------------ nav */
.nav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(10, 11, 14, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.nav__in {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 68px;
}
.nav__brand { display: flex; align-items: center; }
/* One lockup everywhere - the app, the site and the admin panel - so the
   letterforms and the lime EZ are identical wherever the brand appears. */
.nav__brand img { width: 132px; height: auto; display: block; }
.nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav__link {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--paper-dim);
    white-space: nowrap;
    padding: 6px 0;
    border-bottom: 1.5px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.nav__link:hover { color: var(--paper); }
.nav__link.is-active { color: var(--paper); border-bottom-color: var(--deal); }
.nav__toggle { display: none; background: none; border: 0; color: var(--paper); padding: 8px; cursor: pointer; }

/* ------------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-text);
    font-size: 15px;
    font-weight: 700;
    padding: 13px 22px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--deal { background: var(--deal); color: #10160A; }
.btn--deal:hover { background: #D9FA6B; color: #10160A; }
.btn--gold { background: var(--gold); color: #1A140A; }
.btn--ghost { border-color: var(--line); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper-dim); color: var(--paper); }
.btn--sm { padding: 9px 16px; font-size: 13.5px; }

/* ---------------------------------------------------------------- hero */
.hero { padding: 84px 0 76px; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: end; }
.hero h1 { font-size: clamp(42px, 6.4vw, 82px); }
.hero h1 em { font-style: normal; color: var(--deal); }
.hero__sub {
    margin: 22px 0 30px;
    font-size: 17.5px;
    line-height: 1.55;
    color: var(--paper-dim);
    max-width: 46ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__note { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* Stat rail beside the hero */
.rail { border-left: 1px solid var(--line); padding-left: 28px; display: grid; gap: 26px; }
.stat__value { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stat--deal .stat__value { color: var(--deal); }
.stat--gold .stat__value { color: var(--gold); }
.stat__label { margin-top: 6px; font-size: 13.5px; color: var(--muted); }

/* ---------------------------------------------------------- deal tiles */
.deal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.deal-card {
    background: var(--ink-card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s ease, transform .15s ease;
}
.deal-card:hover { border-color: var(--deal); transform: translateY(-2px); }

/* The brand's own card artwork carries the recognition, but sixteen different
   art directions at full strength drown the discount - which is the actual
   proposition. A constant scrim puts every tile on the same tonal floor so the
   lime figure stays the loudest thing in the grid, and the panel is shorter so
   each card reads as artwork PLUS a label rather than artwork alone. */
.deal-card__art {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #20242C;
    overflow: hidden;
}
.deal-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.88);
}
.deal-card__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 11, 14, .34) 0%, rgba(10, 11, 14, .52) 100%);
    pointer-events: none;
    transition: background .15s ease;
}
.deal-card:hover .deal-card__art::after {
    background: linear-gradient(180deg, rgba(10, 11, 14, .12) 0%, rgba(10, 11, 14, .28) 100%);
}

.deal-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px 14px;
}
.deal-card__brand { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.deal-card__off { color: var(--deal); font-weight: 800; font-size: 14px; white-space: nowrap; }

/* ------------------------------------------------------------- feature */
.feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature { background: var(--ink); padding: 28px 24px; }
.feature__idx { font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--gold); margin-bottom: 14px; }
.feature h3 { font-size: 21px; margin-bottom: 9px; }
.feature p { margin: 0; font-size: 14.5px; color: var(--paper-dim); line-height: 1.55; }

/* Split layout for gold products */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: start; }
.split h2 { font-size: clamp(30px, 3.6vw, 44px); }
.split p { color: var(--paper-dim); }

.ladder { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ladder__row { background: var(--ink); padding: 20px 2px; display: grid; grid-template-columns: 34px 1fr auto; gap: 18px; align-items: baseline; }
.ladder__idx { font-size: 12px; font-weight: 700; color: var(--gold); letter-spacing: .1em; }
.ladder__name { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.ladder__desc { grid-column: 2 / -1; font-size: 14.5px; color: var(--muted); margin-top: 4px; }
.ladder__meta { font-size: 13px; color: var(--paper-dim); white-space: nowrap; }

/* ------------------------------------------------------------- legal */
/* Terms is 62,000 characters of admin-managed plain text with no markup;
   partials/legal-text.php rebuilds headings and paragraphs from the line
   breaks. These only cover the page's own furniture - the clause headings and
   paragraphs it emits inherit .article h2 and .article p, which already say
   the right thing. */
.legal__top { margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.legal__top h1 { font-size: clamp(32px, 4.4vw, 50px); margin-bottom: 12px; }
.legal__langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.legal__langs .chip { text-decoration: none; border-bottom: 0; }
.legal__langs .chip:hover { border-color: var(--paper-dim); color: var(--paper); }
.legal__langs .chip[aria-current] { font-weight: 600; }

/* The first clause heading follows the rule straight after the header border,
   where 40px of its own margin reads as a gap rather than as separation. */
.legal__head:first-of-type { margin-top: 8px; }

/* ----------------------------------------------------------- article */
.article { max-width: 74ch; }
.article h1 { font-size: clamp(34px, 4.6vw, 54px); margin-bottom: 14px; }
.article h2 { font-size: 24px; margin: 40px 0 12px; }
.article h3 { font-size: 19px; margin: 28px 0 10px; }
.article p, .article li { color: var(--paper-dim); font-size: 16px; line-height: 1.75; }
.article p { margin: 0 0 16px; }
.article ul, .article ol { padding-left: 20px; margin: 0 0 18px; }
.article li { margin-bottom: 8px; }
.article a { color: var(--deal); border-bottom: 1px solid rgba(203, 243, 74, .35); }
.article strong { color: var(--paper); }
.article table { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.article th, .article td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 14.5px; }
.lede { font-size: 18.5px; color: var(--paper-dim); line-height: 1.6; margin-bottom: 8px; }

/* --------------------------------------------------------------- forms */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--paper-dim); margin-bottom: 7px; }
.input, .textarea, select.input {
    width: 100%;
    background: var(--ink-card);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--paper);
    font-family: var(--font-text);
    font-size: 15px;
    padding: 13px 14px;
}
.input:focus, .textarea:focus { outline: none; border-color: var(--deal); box-shadow: 0 0 0 3px var(--deal-glow); }
.textarea { min-height: 130px; resize: vertical; }

/* ------------------------------------------------------------ accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
    width: 100%;
    background: none;
    border: 0;
    color: var(--paper);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-align: left;
    padding: 20px 40px 20px 0;
    position: relative;
    cursor: pointer;
}
.acc__q::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--deal); font-size: 22px; font-weight: 400; }
.acc__item.is-open .acc__q::after { content: "\2212"; }
.acc__a { display: none; padding: 0 40px 22px 0; color: var(--paper-dim); font-size: 15.5px; line-height: 1.7; }
.acc__item.is-open .acc__a { display: block; }

/* ---------------------------------------------------------------- misc */
.tagline { font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); letter-spacing: -.03em; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; font-size: 13px; color: var(--paper-dim); }
.chip--deal { border-color: rgba(203, 243, 74, .4); color: var(--deal); }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }

/* -------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); padding: 62px 0 34px; background: var(--ink-raise); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.foot__brand { margin-bottom: 16px; }
.foot__brand img { width: 128px; height: auto; display: block; }
.foot__addr { font-size: 13.5px; color: var(--muted); line-height: 1.65; max-width: 34ch; }
.foot h4 { font-family: var(--font-text); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { font-size: 14.5px; color: var(--paper-dim); }
.foot a:hover { color: var(--deal); }
.foot__base { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }

/* --------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .deal-grid { grid-template-columns: repeat(3, 1fr); }
    .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .band { padding: 66px 0; }
    .hero { padding: 58px 0 52px; }
    .hero__grid, .split, .cols-2 { grid-template-columns: 1fr; gap: 34px; }
    .rail { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 26px; grid-template-columns: 1fr 1fr; }
    .feature-row { grid-template-columns: 1fr; }
    .nav__links {
        display: none;
        position: absolute;
        top: 68px; left: 0; right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--ink-raise);
        border-bottom: 1px solid var(--line);
        padding: 8px 24px 18px;
    }
    .nav__links.is-open { display: flex; }
    .nav__links .nav__link { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
    .nav__toggle { display: block; margin-left: auto; }
    .nav__cta { display: none; }
}

@media (max-width: 560px) {
    .deal-grid { grid-template-columns: repeat(2, 1fr); }
    .foot__grid { grid-template-columns: 1fr; gap: 28px; }
    .rail { grid-template-columns: 1fr; }
}

/* Plan gating — a brand that needs a paid plan says so on the tile, so the grid
   never implies the whole catalogue is open to everyone. */
.plan-badge {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 1;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.plan-badge--plus  { background: rgba(10,11,14,.72); color: var(--paper); border: 1px solid rgba(255,255,255,.22); }
.plan-badge--elite { background: rgba(224,177,66,.92); color: #1A140A; }