/* ==========================================================================
   HostingInfo — editorial directory stylesheet
   --------------------------------------------------------------------------
   Design language: ink & paper. A near-black graphite ground, warm off-white
   type, hairline rules, and exactly one signal colour. Typography and density
   carry the design — no gradients, no glows, no glass. Data is set in
   monospace so figures align down a column and can be scanned.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
    /* surfaces — dark is the default reading environment */
    --ink: #0a0a0c;
    --ink-raised: #111114;
    --ink-hover: #17171b;
    --ink-sunken: #060607;

    /* hairlines */
    --rule: #232329;
    --rule-strong: #35353e;

    /* type */
    --fg: #eceae5;
    --fg-muted: #9d9b95;
    --fg-faint: #6b6a66;

    /* one signal colour, plus a semantic green reserved for money */
    --signal: #e9ab4c;
    --signal-ink: #17130a;
    --money: #6fc78d;
    --alert: #e2795f;

    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --r-sm: 3px;
    --r-md: 5px;

    --header-h: 62px;
    --gutter: 28px;
    --measure: 68ch;

    color-scheme: dark;
}

:root[data-theme="light"] {
    --ink: #f7f5f0;
    --ink-raised: #ffffff;
    --ink-hover: #efece4;
    --ink-sunken: #eae7de;

    --rule: #ddd8cc;
    --rule-strong: #c2bcac;

    --fg: #16150f;
    --fg-muted: #57544b;
    --fg-faint: #86827a;

    --signal: #a4671a;
    --signal-ink: #fffdf7;
    --money: #1d7a4e;
    --alert: #b1442a;

    color-scheme: light;
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 0.4em;
    font-optical-sizing: auto;
}

p { margin: 0 0 1em; color: var(--fg-muted); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--signal); color: var(--signal-ink); }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
    border-radius: 1px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.container--narrow { max-width: 780px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Shared editorial atoms ---------------------------------------------------- */

/* small letterspaced label — the publication's voice for metadata */
.kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-faint);
}
.kicker--signal { color: var(--signal); }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.lede {
    font-size: 1.06rem;
    line-height: 1.6;
    color: var(--fg-muted);
    max-width: 56ch;
}

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }
.section + .section { padding-top: 0; }

/* Section masthead: a numbered label sitting on a full-width hairline. */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule-strong);
    margin-bottom: 28px;
}
.section-head__title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.section-head__note { color: var(--fg-faint); font-size: 0.86rem; margin: 0; }
.section-head__link {
    font-size: 0.84rem; font-weight: 600; color: var(--fg);
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    border-bottom: 1px solid var(--rule-strong); padding-bottom: 2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.section-head__link:hover { color: var(--signal); border-color: var(--signal); }
.section-head__link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ==========================================================================
   3. Header
   ========================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-h);
    display: flex; align-items: center;
    background: var(--ink);
    border-bottom: 1px solid var(--rule);
}
.site-header__inner { display: flex; align-items: center; gap: 32px; }

.brand {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.24rem;
    letter-spacing: -0.02em;
    margin-right: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}
.brand em { font-style: italic; font-weight: 400; color: var(--fg-muted); }
.brand:hover em { color: var(--signal); }

.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a {
    font-size: 0.83rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fg-muted);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.main-nav a:hover { color: var(--fg); }
.main-nav a.is-active { color: var(--fg); border-bottom-color: var(--signal); }

.site-header__actions { display: flex; align-items: center; gap: 12px; }

.icon-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--rule); border-radius: var(--r-sm);
    color: var(--fg-muted);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.icon-btn:hover { color: var(--fg); border-color: var(--rule-strong); }
.icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

#themeToggle .icon-moon { display: none; }
:root[data-theme="light"] #themeToggle .icon-sun { display: none; }
:root[data-theme="light"] #themeToggle .icon-moon { display: block; }

.nav-toggle { display: none; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-sans);
    font-size: 0.86rem; font-weight: 600; letter-spacing: 0.01em;
    padding: 10px 18px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    background: none;
    color: var(--fg);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover { border-color: var(--fg-muted); background: var(--ink-hover); }

.btn--primary { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn--primary:hover { background: var(--fg); border-color: var(--fg); color: var(--ink); }

.btn--sm { padding: 7px 13px; font-size: 0.79rem; }
.btn--block { width: 100%; }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ==========================================================================
   5. Forms
   ========================================================================== */
.field {
    display: flex; align-items: center; gap: 10px;
    background: var(--ink-raised);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    padding: 0 12px;
    height: 42px;
    transition: border-color 0.15s ease;
}
.field:focus-within { border-color: var(--signal); }
.field svg { width: 16px; height: 16px; stroke: var(--fg-faint); fill: none; stroke-width: 1.8; flex-shrink: 0; }
.field input {
    flex: 1; min-width: 0;
    border: none; background: none; outline: none;
    color: var(--fg); font-family: inherit; font-size: 0.92rem;
}
.field input::placeholder { color: var(--fg-faint); }

.select {
    appearance: none;
    height: 42px;
    padding: 0 32px 0 12px;
    background-color: var(--ink-raised);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-sm);
    color: var(--fg);
    font-family: inherit; font-size: 0.85rem; font-weight: 500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' stroke='%239d9b95' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    cursor: pointer;
}
.select:hover { border-color: var(--fg-muted); }

/* ==========================================================================
   6. Provider identity tile
   Flat, mono-lettered, tinted with the provider's own brand colour.
   ========================================================================== */
.logo-tile {
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: -0.03em;
    border-radius: var(--r-sm);
    background: rgba(var(--brand-rgb), 0.13);
    border: 1px solid rgba(var(--brand-rgb), 0.32);
    color: var(--brand-on-dark);
    line-height: 1;
    user-select: none;
}
:root[data-theme="light"] .logo-tile {
    background: rgba(var(--brand-rgb), 0.1);
    color: var(--brand-on-light);
}
.logo-tile--sm { width: 30px; height: 30px; font-size: 0.68rem; }
.logo-tile--md { width: 38px; height: 38px; font-size: 0.8rem; }
.logo-tile--lg { width: 60px; height: 60px; font-size: 1.2rem; border-radius: var(--r-md); }

/* ==========================================================================
   7. Home — masthead
   ========================================================================== */
.masthead {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 56px;
    align-items: end;
    padding: 68px 0 44px;
    border-bottom: 1px solid var(--rule-strong);
}
.masthead__dateline {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 22px;
}
.masthead__dateline .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--money);
    flex-shrink: 0;
}
.masthead h1 {
    font-size: clamp(2.3rem, 5.4vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0 0 18px;
    max-width: 15ch;
}
.masthead h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--signal);
}
.masthead .lede { margin-bottom: 26px; }
.masthead__search { display: flex; gap: 8px; max-width: 460px; }
.masthead__search .field { flex: 1; }

/* the "at a glance" spec block — hairline-separated monospace facts */
.spec-block { border-top: 1px solid var(--rule); }
.spec-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
}
.spec-row__label { font-size: 0.83rem; color: var(--fg-muted); }
.spec-row__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--fg);
}
.spec-row__value small { color: var(--fg-faint); font-size: 0.75rem; font-weight: 400; }

/* ==========================================================================
   8. Home — featured provider cards
   Bordered panels, not floating glass. Hover lifts the rule, not the box.
   ========================================================================== */
.pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: 1px;
}
.pick {
    box-shadow: 0 0 0 1px var(--rule);
    display: flex; flex-direction: column; gap: 12px;
    background: var(--ink);
    padding: 22px;
    position: relative;
    transition: background-color 0.15s ease;
}
.pick:hover { background: var(--ink-raised); }
.pick__top { display: flex; align-items: center; gap: 12px; }
.pick__rank {
    font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-faint);
    margin-left: auto; align-self: flex-start;
}
.pick__name { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.pick__origin { font-size: 0.76rem; color: var(--fg-faint); }
.pick__line { font-size: 0.87rem; color: var(--fg-muted); flex: 1; margin: 0; line-height: 1.5; }
.pick__foot {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-top: 12px; border-top: 1px solid var(--rule);
}
.pick__price { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; }
.pick__price small { color: var(--fg-faint); font-size: 0.72rem; font-weight: 400; }

/* rating: a number plus a five-segment meter */
.rating { display: inline-flex; align-items: center; gap: 9px; }
.rating__num { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 500; }
.meter {
    display: block; width: 46px; height: 3px;
    background: var(--rule-strong); border-radius: 2px; overflow: hidden;
}
.meter i { display: block; height: 100%; background: var(--signal); }

/* category index — a list, not a grid of emoji tiles */
.cat-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1px;
}
.cat-index a {
    box-shadow: 0 0 0 1px var(--rule);
    display: flex; align-items: center; gap: 12px;
    background: var(--ink);
    padding: 16px 18px;
    transition: background-color 0.15s ease;
}
.cat-index a:hover { background: var(--ink-raised); }
.cat-index svg { width: 17px; height: 17px; stroke: var(--signal); fill: none; stroke-width: 1.5; flex-shrink: 0; }
.cat-index__name { font-size: 0.9rem; font-weight: 500; }
.cat-index__count { margin-left: auto; font-family: var(--font-mono); font-size: 0.76rem; color: var(--fg-faint); }

/* ==========================================================================
   9. Deals — ranked list rows
   ========================================================================== */
.deal-list { border-top: 1px solid var(--rule); }

.deal {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 150px 202px 68px;
    align-items: center;
    gap: 22px;
    padding: 18px 12px 18px 4px;
    border-bottom: 1px solid var(--rule);
    transition: background-color 0.15s ease;
}
.deal:hover { background: var(--ink-raised); }

.deal__rank { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-faint); }
.deal__id { display: flex; align-items: center; gap: 13px; min-width: 0; }
.deal__title { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 2px; }
.deal__provider { font-size: 0.77rem; color: var(--fg-faint); }
.deal__provider a { border-bottom: 1px solid transparent; }
.deal__provider a:hover { color: var(--signal); border-bottom-color: currentColor; }

.deal__price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.deal__price .was { color: var(--fg-faint); text-decoration: line-through; font-size: 0.82rem; margin-right: 8px; }
.deal__price .now { color: var(--money); font-size: 1.06rem; font-weight: 500; }
.deal__price .per { color: var(--fg-faint); font-size: 0.72rem; }

.coupon {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border: 1px dashed var(--rule-strong);
    border-radius: var(--r-sm);
    padding: 7px 11px;
    background: var(--ink-sunken);
}
.coupon code {
    font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500;
    letter-spacing: 0.02em; color: var(--fg);
}
.copy-btn {
    background: none; border: 0; padding: 0;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600;
    color: var(--fg-faint);
    transition: color 0.15s ease;
}
.copy-btn:hover { color: var(--signal); }
.copy-btn.is-copied { color: var(--money); }
.copy-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.deal__off {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--signal);
    text-align: right;
    line-height: 1;
    white-space: nowrap;
}
.deal__off small {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    color: var(--fg-faint);
    font-weight: 500;
    margin-top: 4px;
}

/* ==========================================================================
   10. Directory table
   ========================================================================== */
.toolbar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 14px 0;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule);
    background: var(--ink);
}
.toolbar .field { flex: 1; min-width: 190px; }
.toolbar__filters { display: flex; gap: 8px; flex-wrap: wrap; }

.chip-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.chip {
    display: inline-block;
    font-size: 0.78rem; font-weight: 500;
    padding: 5px 12px;
    border: 1px solid var(--rule);
    border-radius: var(--r-sm);
    background: none;
    color: var(--fg-muted);
    transition: all 0.15s ease;
}
.chip:hover { color: var(--fg); border-color: var(--rule-strong); }
.chip.is-active { background: var(--fg); border-color: var(--fg); color: var(--ink); }

.results-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 0 10px;
    flex-wrap: wrap;
}

.table-wrap { border-bottom: 1px solid var(--rule-strong); }

.dir-table { min-width: 780px; font-size: 0.9rem; }
.dir-table thead th {
    position: sticky;
    top: calc(var(--header-h) - 1px);
    z-index: 30;
    background: var(--ink);
    text-align: left;
    padding: 10px 14px;
    border-top: 1px solid var(--rule-strong);
    border-bottom: 1px solid var(--rule-strong);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-faint);
    white-space: nowrap;
}
.dir-table th.is-sortable { cursor: pointer; user-select: none; }
.dir-table th.is-sortable:hover { color: var(--fg); }
.dir-table th .arrow { opacity: 0; margin-left: 5px; }
.dir-table th.is-sorted { color: var(--signal); }
.dir-table th.is-sorted .arrow { opacity: 1; }

.dir-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--rule);
    vertical-align: middle;
}
.dir-table tbody tr { transition: background-color 0.12s ease; }
.dir-table tbody tr:hover { background: var(--ink-raised); }

.cell-rank { font-family: var(--font-mono); font-size: 0.78rem; color: var(--fg-faint); width: 46px; }
.cell-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cell-name__text { min-width: 0; }
.cell-name__title { font-weight: 600; font-size: 0.94rem; letter-spacing: -0.01em; }
.cell-name__line {
    font-size: 0.78rem; color: var(--fg-faint);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch;
}
.cell-origin { font-size: 0.84rem; color: var(--fg-muted); white-space: nowrap; }
.cell-tags { font-size: 0.78rem; color: var(--fg-faint); }
.cell-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.88rem; white-space: nowrap; }
.cell-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.95rem; font-weight: 500; text-align: right; white-space: nowrap; }
.cell-go { text-align: right; width: 40px; }
.cell-go svg { width: 15px; height: 15px; stroke: var(--fg-faint); fill: none; stroke-width: 1.8; transition: stroke 0.15s ease, transform 0.15s ease; }
tr:hover .cell-go svg { stroke: var(--signal); transform: translateX(3px); }

.has-deal {
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--signal);
    border: 1px solid rgba(233, 171, 76, 0.4);
    border-radius: var(--r-sm);
    padding: 2px 6px;
    white-space: nowrap;
}

.empty-state { text-align: center; padding: 72px 20px; }
.empty-state h3 { font-size: 1.2rem; margin-bottom: 6px; }
.empty-state p { color: var(--fg-faint); font-size: 0.9rem; }

/* ==========================================================================
   11. Page head (interior pages)
   ========================================================================== */
.page-head {
    padding: 52px 0 30px;
    border-bottom: 1px solid var(--rule-strong);
}
.page-head h1 {
    font-size: clamp(2rem, 4.2vw, 3.1rem);
    letter-spacing: -0.03em;
    margin: 14px 0 14px;
    max-width: 18ch;
}
.page-head h1 em { font-style: italic; font-weight: 400; color: var(--signal); }
.page-head .lede { margin: 0; }

.breadcrumb {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 0.72rem;
    color: var(--fg-faint);
    margin-bottom: 22px;
}
.breadcrumb a { transition: color 0.15s ease; }
.breadcrumb a:hover { color: var(--signal); }

/* ==========================================================================
   12. Provider detail
   ========================================================================== */
.provider-head { padding: 40px 0 32px; border-bottom: 1px solid var(--rule-strong); }
.provider-head__row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.provider-head__text { flex: 1; min-width: 260px; }
.provider-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 0 0 6px; letter-spacing: -0.025em; }
.provider-head__line { font-size: 1rem; color: var(--fg-muted); margin: 0 0 16px; max-width: 52ch; }
.provider-head__meta {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    font-size: 0.84rem; color: var(--fg-muted);
}
.provider-head__meta .sep { color: var(--rule-strong); }
.provider-head__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
    padding: 44px 0 72px;
}
.detail-main { min-width: 0; }
.detail-block { margin-bottom: 44px; }
.detail-block > h2 {
    font-size: 1.3rem;
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rule);
}
.detail-block p { max-width: var(--measure); }

/* features as a two-column hairline list */
.feature-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0 28px;
}
.feature-list li {
    display: flex; align-items: baseline; gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 0.89rem;
}
.feature-list li::before { content: "—"; color: var(--signal); font-family: var(--font-mono); font-size: 0.8rem; }

/* plans as columns of a single comparison band */
.plan-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
}
.plan { background: var(--ink); padding: 20px; box-shadow: 0 0 0 1px var(--rule); }
.plan__name { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 10px; }
.plan__price { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.plan__price span { font-size: 0.75rem; color: var(--fg-faint); font-weight: 400; }
.plan ul { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.plan li { font-size: 0.83rem; color: var(--fg-muted); padding: 4px 0; }

/* pros / cons */
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.pc h3 {
    font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 10px;
}
.pc--pro h3 { color: var(--money); }
.pc--con h3 { color: var(--alert); }
.pc li {
    font-size: 0.88rem; color: var(--fg-muted);
    padding: 8px 0 8px 16px; border-bottom: 1px solid var(--rule);
    position: relative;
}
.pc li::before { content: "+"; position: absolute; left: 0; font-family: var(--font-mono); color: var(--money); }
.pc--con li::before { content: "−"; color: var(--alert); }

/* faq */
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
    cursor: pointer; list-style: none;
    padding: 15px 30px 15px 0;
    font-weight: 600; font-size: 0.94rem;
    position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; position: absolute; right: 4px; top: 13px;
    font-family: var(--font-mono); font-size: 1.1rem; font-weight: 400; color: var(--signal);
    transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 16px; margin: 0; font-size: 0.9rem; }

/* sidebar rail */
.rail { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 28px; }
.rail__card { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 18px; }
.rail__card h3 {
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint);
    margin-bottom: 12px;
}
.rail__card .spec-block { border-top: 0; }
.rail__card .spec-row:first-child { padding-top: 0; }
.rail__card .spec-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rail__card--deal { border-color: rgba(233, 171, 76, 0.4); }
.rail__card--deal h3 { color: var(--signal); }
.rail__deal-title { font-size: 0.9rem; font-weight: 600; color: var(--fg); margin-bottom: 12px; line-height: 1.4; }

.related { display: flex; flex-direction: column; }
.related a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 0; border-bottom: 1px solid var(--rule);
    transition: opacity 0.15s ease;
}
.related a:last-child { border-bottom: 0; }
.related a:hover { opacity: 0.72; }
.related__name { font-size: 0.87rem; font-weight: 500; }
.related__meta { font-family: var(--font-mono); font-size: 0.71rem; color: var(--fg-faint); }

/* ==========================================================================
   13. Editorial prose (about, privacy, 404)
   ========================================================================== */
.prose { max-width: var(--measure); padding: 44px 0 72px; }
.prose h2 { font-size: 1.35rem; margin: 36px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 0.96rem; line-height: 1.7; }
.prose a { color: var(--signal); border-bottom: 1px solid currentColor; }
.prose ul { margin: 0 0 1em; }
.prose li { font-size: 0.96rem; color: var(--fg-muted); padding: 5px 0 5px 18px; position: relative; }
.prose li::before { content: "—"; position: absolute; left: 0; color: var(--signal); }

.team { max-width: var(--measure); padding: 8px 0 40px; }
.team__title { font-size: 1.35rem; margin: 8px 0 24px; }
.team__member { display: flex; gap: 22px; align-items: flex-start; background: var(--ink); padding: 26px; box-shadow: 0 0 0 1px var(--rule); }
.team__avatar {
    flex: 0 0 56px; width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule-strong); border-radius: 50%;
    font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.04em;
    color: var(--signal);
}
.team__body h3 { font-size: 1.05rem; margin: 0 0 2px; }
.team__role { font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint); margin: 0 0 14px; }
.team__body p { font-size: 0.94rem; line-height: 1.7; color: var(--fg-muted); margin: 0 0 12px; }
.team__links { margin: 0; }
.team__links a { color: var(--signal); border-bottom: 1px solid currentColor; }

@media (max-width: 640px) {
    .team__member { flex-direction: column; gap: 16px; padding: 20px; }
}

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; }
.contact-card { background: var(--ink); padding: 24px; box-shadow: 0 0 0 1px var(--rule); transition: background-color 0.15s ease; }
a.contact-card:hover { background: var(--ink-raised); }
.contact-card h3 { font-size: 1rem; margin: 10px 0 4px; }
.contact-card p { font-size: 0.87rem; margin: 0; }
.contact-card svg { width: 18px; height: 18px; stroke: var(--signal); fill: none; stroke-width: 1.5; }

/* ==========================================================================
   14. Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--rule-strong); padding: 52px 0 32px; margin-top: 40px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--rule);
}
.footer-brand p { font-size: 0.86rem; max-width: 34ch; margin: 12px 0 0; }
.footer-col h4 {
    font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint);
    margin-bottom: 12px;
}
.footer-col a {
    display: block; font-size: 0.87rem; color: var(--fg-muted);
    padding: 5px 0; transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--signal); }

.newsletter-form { display: flex; gap: 8px; margin-top: 6px; }
.newsletter-form .field { flex: 1; height: 38px; }
.newsletter-note { font-family: var(--font-mono); font-size: 0.72rem; color: var(--money); min-height: 1.2em; margin: 8px 0 0; }

.footer-bottom {
    display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding-top: 24px;
}
.footer-bottom p { font-size: 0.78rem; color: var(--fg-faint); margin: 0; }
.footer-bottom a { color: var(--fg-muted); border-bottom: 1px solid var(--rule-strong); }
.footer-bottom a:hover { color: var(--signal); }

/* ==========================================================================
   15. Toast
   ========================================================================== */
.toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translate(-50%, 16px);
    background: var(--fg); color: var(--ink);
    font-size: 0.83rem; font-weight: 600;
    padding: 10px 18px; border-radius: var(--r-sm);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 200;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   16. Reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   17. Responsive
   ========================================================================== */
@media (max-width: 1000px) {
    .table-wrap { overflow-x: auto; }
    .dir-table thead th { position: static; }

    .masthead { grid-template-columns: 1fr; gap: 36px; align-items: start; }
    .detail-layout { grid-template-columns: 1fr; gap: 40px; }
    .rail { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 760px) {
    :root { --gutter: 20px; }

    .nav-toggle {
        display: flex; flex-direction: column; gap: 3.5px;
        align-items: center; justify-content: center;
    }
    .nav-toggle span { width: 15px; height: 1.5px; background: currentColor; }

    .main-nav {
        position: absolute; top: var(--header-h); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--ink);
        border-bottom: 1px solid var(--rule);
        padding: 6px var(--gutter) 14px;
        display: none;
    }
    .main-nav.is-open { display: flex; }
    .main-nav a { padding: 11px 0; border-bottom: 1px solid var(--rule); }
    .main-nav a.is-active { border-bottom-color: var(--signal); }

    .site-header__cta { display: none; }

    .pc-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }

    /* deals collapse from a row into a stacked record */
    .deal {
        grid-template-columns: 1fr auto;
        gap: 12px 16px;
        padding: 18px 0;
    }
    .deal__rank { display: none; }
    .deal__id { grid-column: 1 / -1; }
    .deal__off { grid-row: 1; grid-column: 2; font-size: 1.15rem; }
    .deal__id { grid-row: 1; grid-column: 1; }
    .deal__price { grid-column: 1; }
    .coupon { grid-column: 2; justify-self: end; }

    .table-wrap { margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ─── Score strip ──────────────────────────────────────────────────────────── */

.score-strip {
    display: flex;
    gap: 0;
    background: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0 0 32px;
}

.score-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border-right: 1px solid var(--rule);
    text-align: center;
}
.score-item:last-child { border-right: none; }

.score-item__label {
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-faint);
    white-space: nowrap;
}

.score-bar {
    width: 100%;
    height: 4px;
    background: var(--rule);
    border-radius: 2px;
    overflow: hidden;
}

.score-bar__fill {
    height: 100%;
    background: var(--signal);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.score-item__value {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}

/* ─── Best-for tags ────────────────────────────────────────────────────────── */

.best-for {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.best-for__label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-faint);
    white-space: nowrap;
}

.best-for__chip {
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--signal) 12%, transparent);
    color: var(--signal);
    border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
    white-space: nowrap;
}

/* ─── Infrastructure grid ──────────────────────────────────────────────────── */

.infra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.infra-card {
    background: var(--ink);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 20px 22px;
}

.infra-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fg-faint);
    margin: 0 0 14px;
}

.infra-card__title svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    flex-shrink: 0;
}

.infra-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.infra-list li {
    font-size: 0.88rem;
    color: var(--fg);
    padding-left: 14px;
    position: relative;
}
.infra-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    color: var(--signal);
    font-weight: 700;
}

/* ─── Guarantee badge ──────────────────────────────────────────────────────── */

.guarantee-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--signal) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--signal) 25%, transparent);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--signal);
}

.guarantee-badge svg {
    width: 16px; height: 16px;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    flex-shrink: 0;
}

.guarantee-badge--none {
    background: color-mix(in srgb, var(--fg-faint) 8%, transparent);
    border-color: var(--rule);
    color: var(--fg-faint);
}

@media (max-width: 760px) {
    .score-strip {
        flex-wrap: wrap;
        border-radius: var(--radius);
    }
    .score-item {
        flex: 1 1 calc(33.333% - 1px);
        padding: 14px 10px;
        min-width: 90px;
    }
    .infra-grid {
        grid-template-columns: 1fr;
    }
}