/*
Theme Name: Rubik Combined Listings
Theme URI: https://rubikcombinedlistings.com/
Author: CraftShift
Author URI: https://craftshift.com/
Description: Hand written theme for rubikcombinedlistings.com. No page builder, no framework, one stylesheet. The layout follows craftshift.com; the palette is the app's own.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rcl
*/

/* -------------------------------------------------------------------------
   Tokens

   Two rules govern the palette. The copper is the app icon's own colour and
   carries 3.34:1 on white, so it fills shapes and never sets small text;
   --copper-ink is its readable sibling at 5.58:1. Everything else is a warm
   grey ramp off the icon's near black, which is why no value here is neutral.
   ------------------------------------------------------------------------- */
:root {
    --ink: #28211f;
    --soft: #4a403c;
    --muted: #6e625d;

    --copper: #c07c5f;
    --copper-ink: #96583f;
    --copper-wash: #f6ece6;

    --line: #e8e2de;
    --line-strong: #d9d0ca;
    --wash: #faf7f5;
    --surface: #fff;

    --col: 1200px;
    --radius: 16px;
    --radius-sm: 10px;

    --shadow: 0 1px 2px rgba(40, 33, 31, .05);
    --shadow-lift: 0 10px 30px rgba(40, 33, 31, .09);

    --font: "Rubik", "Rubik Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Rubik", "Rubik Display Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Newsreader", "Newsreader Fallback", "Iowan Old Style", Georgia, serif;
}

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

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

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

h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-display); letter-spacing: -.025em; line-height: 1.15; margin: 0; text-wrap: balance; }
/* The large numbers are display type too, and they wrap nothing, so the
   wider ratio is the right one for them. */
.stats b, .plan__price b { font-family: var(--font-display); }
p { margin: 0; }
img, svg, video { display: block; height: auto; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
ul, ol { margin: 0; padding: 0; }

:where(a, button, summary, input, select, textarea):focus-visible {
    outline: 2px solid var(--copper-ink);
    outline-offset: 3px;
    border-radius: 4px;
}

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

.skip-link {
    background: var(--ink);
    color: #fff;
    left: 8px;
    padding: 10px 18px;
    position: absolute;
    top: -60px;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top .15s;
    z-index: 200;
}
.skip-link:focus { top: 0; }

/* -------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------- */
.wrap { margin-inline: auto; max-width: var(--col); padding-inline: 24px; width: 100%; }

.section { padding-block: 72px; }
.section--tight { padding-block: 52px; }
.section--wash { background: var(--wash); border-block: 1px solid var(--line); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }

.head { margin-bottom: 34px; max-width: 62ch; }
.head h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; }
.head p { color: var(--soft); font-size: 1.02rem; line-height: 1.65; margin-top: 12px; }
.section--ink .head p { color: rgba(255, 255, 255, .74); }
.head--center { margin-inline: auto; text-align: center; }

.eyebrow {
    color: var(--copper-ink);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.section--ink .eyebrow { color: var(--copper); }

.badge {
    align-items: center;
    background: var(--copper-wash);
    border-radius: 999px;
    color: var(--copper-ink);
    display: inline-flex;
    font-size: .8rem;
    font-weight: 600;
    gap: 8px;
    padding: 7px 15px;
}
.badge svg { height: 14px; width: 14px; }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
    align-items: center;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    color: #fff;
    display: inline-flex;
    font-size: .94rem;
    font-weight: 600;
    gap: 9px;
    justify-content: center;
    padding: 14px 26px;
    text-decoration: none;
    transition: background .16s, border-color .16s, transform .16s;
}
.btn:hover { background: #3d322e; border-color: #3d322e; transform: translateY(-1px); }

.btn--copper { background: var(--copper-ink); border-color: var(--copper-ink); }
.btn--copper:hover { background: #7f4a34; border-color: #7f4a34; }

.btn--ghost { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow); color: var(--ink); }
.btn--ghost:hover { background: var(--surface); border-color: var(--copper); transform: translateY(-1px); }

.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--light:hover { background: #f0e9e5; border-color: #f0e9e5; }

.btn--sm { font-size: .87rem; padding: 10px 18px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.head--center .actions { justify-content: center; }

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.site-header {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-header__bar { align-items: center; display: flex; gap: 26px; height: 68px; justify-content: space-between; }

.brand { align-items: center; display: flex; flex-shrink: 0; gap: 10px; text-decoration: none; }
.brand__mark { border-radius: 9px; height: 34px; width: 34px; }
.brand__name { font-size: .98rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.brand__name span { color: var(--muted); display: block; font-size: .72rem; font-weight: 500; letter-spacing: 0; }

.nav { display: flex; flex: 1; justify-content: center; }
.nav ul { display: flex; gap: 4px; list-style: none; }
.nav a {
    border-radius: 8px;
    color: var(--soft);
    display: block;
    font-size: .91rem;
    font-weight: 500;
    padding: 8px 13px;
    text-decoration: none;
    transition: background .14s, color .14s;
}
.nav a:hover { background: var(--wash); color: var(--ink); }
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-parent > a { color: var(--ink); font-weight: 600; }

.site-header__cta { display: flex; flex-shrink: 0; gap: 10px; }

.burger {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    cursor: pointer;
    display: none;
    height: 40px;
    justify-content: center;
    width: 40px;
}
.burger span { background: var(--ink); border-radius: 2px; display: block; height: 2px; position: relative; transition: transform .2s, opacity .2s; width: 17px; }
.burger span::before, .burger span::after { background: var(--ink); border-radius: 2px; content: ""; height: 2px; left: 0; position: absolute; transition: transform .2s, opacity .2s; width: 17px; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
    .burger { display: flex; }
    .site-header__cta .btn { display: none; }
    .nav {
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        display: none;
        left: 0;
        padding: 14px 24px 22px;
        position: absolute;
        right: 0;
        top: 100%;
    }
    .nav.is-open { display: block; }
    .nav ul { flex-direction: column; gap: 2px; }
    .nav a { font-size: 1rem; padding: 11px 12px; }
    .nav__mobile-cta { display: flex; gap: 10px; margin-top: 14px; }
    .nav__mobile-cta .btn { flex: 1; }
}
@media (min-width: 1001px) {
    .nav__mobile-cta { display: none; }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero { background: var(--wash); border-bottom: 1px solid var(--line); overflow: hidden; padding-block: 74px 66px; position: relative; }
.hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }
.hero__lede { color: var(--soft); font-size: 1.1rem; line-height: 1.62; margin-top: 20px; max-width: 60ch; }
.hero .actions { margin-top: 30px; }
.hero--center { text-align: center; }
.hero--center .hero__lede { margin-inline: auto; }
.hero--center .badge { margin-bottom: 20px; }

.hero__grid { align-items: center; display: grid; gap: 54px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-width: 900px) {
    .hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .hero { padding-block: 52px 48px; }
}

.hero__proof { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: .88rem; gap: 10px 22px; margin-top: 26px; }
.hero__proof a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.hero__proof a:hover { color: var(--ink); text-decoration-color: var(--copper); }
.hero__proof strong { color: var(--ink); font-weight: 700; }

.stars { color: var(--copper-ink); font-size: .95rem; letter-spacing: 1px; }

/* -------------------------------------------------------------------------
   Cards and grids
   ------------------------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    padding: 26px;
    transition: border-color .16s, box-shadow .16s, transform .16s;
}
.card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 9px; }
.card p { color: var(--soft); font-size: .94rem; line-height: 1.62; }
.card > a:last-child { color: var(--copper-ink); font-size: .88rem; font-weight: 600; margin-top: auto; padding-top: 15px; text-decoration: none; }
.card > a:last-child:hover { text-decoration: underline; text-underline-offset: 3px; }
a.card { text-decoration: none; }
a.card:hover, .card--lift:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }

.card__icon {
    align-items: center;
    background: var(--copper-wash);
    border-radius: 11px;
    color: var(--copper-ink);
    display: inline-flex;
    height: 42px;
    justify-content: center;
    margin-bottom: 16px;
    width: 42px;
}
.card__icon svg { height: 21px; width: 21px; }

.section--ink .card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .13); }
.section--ink .card p { color: rgba(255, 255, 255, .72); }
.section--ink .card__icon { background: rgba(192, 124, 95, .2); color: var(--copper); }

/* App icon cards (partners, our apps) */
.app-card__icon {
    background: var(--wash);
    border: 1px solid var(--line);
    border-radius: 12px;
    height: 54px;
    margin-bottom: 15px;
    object-fit: contain;
    padding: 7px;
    width: 54px;
}

/* Tag pills */
.pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pills li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; padding: 8px 15px; }
.section--wash .pills li { background: var(--surface); }

/* -------------------------------------------------------------------------
   Steps
   ------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); list-style: none; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.steps li::before {
    align-items: center;
    background: var(--ink);
    border-radius: 9px;
    color: #fff;
    content: counter(step);
    counter-increment: step;
    display: flex;
    font-size: .84rem;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    margin-bottom: 15px;
    width: 30px;
}
.steps h3 { font-size: 1.04rem; font-weight: 700; margin-bottom: 8px; }
.steps p { color: var(--soft); font-size: .93rem; line-height: 1.62; }

/* -------------------------------------------------------------------------
   Reviews
   ------------------------------------------------------------------------- */
.quote { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; padding: 24px; }
.quote__stars { color: var(--copper-ink); font-size: .9rem; letter-spacing: 2px; margin-bottom: 12px; }
.quote p { color: var(--soft); font-size: .94rem; line-height: 1.66; }
.quote footer { color: var(--muted); font-size: .84rem; margin-top: auto; padding-top: 16px; }
.quote footer b { color: var(--ink); font-weight: 600; }
a.quote { text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s; }
a.quote:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }

/* Marquee: two identical tracks, the pair translated by half its width. */
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); overflow: hidden; }
.marquee__track { display: flex; gap: 20px; width: max-content; animation: marquee 82s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee .quote { flex: 0 0 350px; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
    .marquee__track { animation: none; }
}

/* -------------------------------------------------------------------------
   Stats
   ------------------------------------------------------------------------- */
.stats { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); list-style: none; }
.stats li { border-left: 3px solid var(--copper); padding-left: 18px; }
.stats b { display: block; font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stats span { color: var(--muted); font-size: .89rem; }
.stats a { color: inherit; text-decoration: none; }
.stats a:hover b { color: var(--copper-ink); }
.section--ink .stats span { color: rgba(255, 255, 255, .68); }

/* -------------------------------------------------------------------------
   Comparison table
   ------------------------------------------------------------------------- */
.table-scroll { -webkit-overflow-scrolling: touch; overflow-x: auto; }
table.data {
    border-collapse: collapse;
    font-size: .93rem;
    min-width: 620px;
    width: 100%;
}
table.data th, table.data td { border-bottom: 1px solid var(--line); padding: 14px 16px; text-align: left; vertical-align: top; }
table.data thead th { border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
table.data tbody th { font-weight: 600; }
table.data td { color: var(--soft); }
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }
.yes { color: var(--copper-ink); font-weight: 700; }
.no { color: var(--muted); }

/* -------------------------------------------------------------------------
   Pricing
   ------------------------------------------------------------------------- */
.plans { align-items: stretch; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(244px, 1fr)); }
.plan {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    position: relative;
}
.plan--featured { border-color: var(--copper); box-shadow: 0 0 0 1px var(--copper); }
.plan__tag {
    background: var(--copper-ink);
    border-radius: 999px;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    left: 24px;
    letter-spacing: .05em;
    padding: 5px 11px;
    position: absolute;
    text-transform: uppercase;
    top: -12px;
}
.plan h3 { font-size: 1.02rem; font-weight: 700; }
.plan__price { align-items: baseline; display: flex; gap: 5px; margin-top: 14px; }
.plan__price b { font-size: 2.3rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.plan__price span { color: var(--muted); font-size: .87rem; }
.plan__year { color: var(--muted); font-size: .83rem; margin-top: 7px; min-height: 20px; }
.plan__lead { border-top: 1px solid var(--line); color: var(--ink); font-size: .93rem; font-weight: 600; margin-top: 18px; padding-top: 18px; }
.plan ul { display: grid; gap: 9px; list-style: none; margin-top: 14px; }
.plan li { color: var(--soft); font-size: .89rem; line-height: 1.5; padding-left: 24px; position: relative; }
.plan li::before {
    background: var(--copper-wash);
    border-radius: 50%;
    color: var(--copper-ink);
    content: "\2713";
    display: block;
    font-size: .68rem;
    height: 16px;
    left: 0;
    line-height: 16px;
    position: absolute;
    text-align: center;
    top: 3px;
    width: 16px;
}
.plan .btn { margin-top: 24px; width: 100%; }

/* -------------------------------------------------------------------------
   FAQ and details lists
   ------------------------------------------------------------------------- */
.faq-grid { display: grid; gap: 26px 44px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.faq-grid h3 { font-size: 1.01rem; font-weight: 700; margin-bottom: 7px; }
.faq-grid p { color: var(--soft); font-size: .93rem; line-height: 1.66; }
.faq-grid a, .prose a, .note a { color: var(--copper-ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.faq-grid a:hover, .prose a:hover, .note a:hover { text-decoration-color: var(--copper); }

.qa { border-top: 1px solid var(--line); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__item summary { cursor: pointer; font-size: 1.01rem; font-weight: 600; letter-spacing: -.01em; list-style: none; padding: 18px 44px 18px 0; position: relative; }
.qa__item summary::-webkit-details-marker { display: none; }
.qa__item summary::after {
    border-bottom: 2px solid var(--muted);
    border-right: 2px solid var(--muted);
    content: "";
    height: 8px;
    position: absolute;
    right: 6px;
    top: 24px;
    transform: rotate(45deg);
    transition: transform .18s, top .18s;
    width: 8px;
}
.qa__item[open] summary::after { top: 27px; transform: rotate(-135deg); }
.qa__item > div, .qa__item > p { color: var(--soft); font-size: .95rem; line-height: 1.72; max-width: 82ch; padding: 0 44px 22px 0; }
.qa__item.is-hidden { display: none; }

.note { color: var(--muted); font-size: .9rem; line-height: 1.65; margin-top: 22px; }

/* -------------------------------------------------------------------------
   Prose (blog posts, plain pages)
   ------------------------------------------------------------------------- */
.prose { color: var(--soft); font-size: 1.03rem; line-height: 1.75; }
.prose > * + * { margin-top: 22px; }
.prose h2 { color: var(--ink); font-size: 1.55rem; font-weight: 800; margin-top: 46px; }
.prose h3 { color: var(--ink); font-size: 1.2rem; font-weight: 700; margin-top: 34px; }
.prose h4 { color: var(--ink); font-size: 1.03rem; font-weight: 700; margin-top: 26px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 8px; }
.prose img, .prose figure { border-radius: var(--radius); margin-block: 30px; }
.prose figcaption { color: var(--muted); font-size: .86rem; margin-top: 10px; text-align: center; }
.prose blockquote { border-left: 3px solid var(--copper); color: var(--ink); font-size: 1.05rem; margin-inline: 0; padding: 4px 0 4px 22px; }
.prose code { background: var(--wash); border: 1px solid var(--line); border-radius: 5px; font-size: .88em; padding: 2px 6px; }
.prose pre { background: var(--ink); border-radius: var(--radius-sm); color: #f2ebe7; overflow-x: auto; padding: 18px 20px; }
.prose pre code { background: none; border: 0; color: inherit; padding: 0; }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; width: 100%; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; }
.prose hr { background: var(--line); border: 0; height: 1px; margin-block: 40px; }

/* -------------------------------------------------------------------------
   Blog
   ------------------------------------------------------------------------- */
.post-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s; }
.post-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.post-card__media { aspect-ratio: 16 / 9; background: var(--wash); object-fit: cover; width: 100%; }
.post-card__body { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.post-card h2, .post-card h3 { font-size: 1.06rem; font-weight: 700; line-height: 1.32; }
.post-card p { color: var(--soft); font-size: .92rem; line-height: 1.6; margin-top: 10px; }
.post-card__meta { color: var(--muted); font-size: .82rem; margin-top: auto; padding-top: 16px; }

.post-header { border-bottom: 1px solid var(--line); padding-block: 56px 40px; }
.post-header h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -.032em; }
.post-header__meta { color: var(--muted); display: flex; flex-wrap: wrap; font-size: .88rem; gap: 8px 16px; margin-top: 18px; }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 44px; }
.pagination .page-numbers {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--soft);
    display: block;
    font-size: .9rem;
    min-width: 40px;
    padding: 9px 13px;
    text-align: center;
    text-decoration: none;
}
.pagination .page-numbers:hover { border-color: var(--copper); color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }

.breadcrumb { color: var(--muted); font-size: .85rem; margin-bottom: 18px; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* -------------------------------------------------------------------------
   CTA strip
   ------------------------------------------------------------------------- */
.cta { background: var(--ink); color: #fff; }
.cta__inner { align-items: center; display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; padding-block: 52px; }
.cta h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; }
.cta p { color: rgba(255, 255, 255, .74); font-size: .96rem; margin-top: 9px; max-width: 54ch; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--wash); border-top: 1px solid var(--line); padding-block: 56px 30px; }
.site-footer__grid { display: grid; gap: 36px; grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); }
.site-footer__about p { color: var(--soft); font-size: .9rem; line-height: 1.65; margin-top: 14px; max-width: 34ch; }
.site-footer h2 { color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .07em; margin-bottom: 14px; text-transform: uppercase; }
.site-footer ul { display: grid; gap: 9px; list-style: none; }
.site-footer a { color: var(--soft); font-size: .9rem; text-decoration: none; }
.site-footer a:hover { color: var(--copper-ink); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom {
    align-items: center;
    border-top: 1px solid var(--line);
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .85rem;
    gap: 12px 22px;
    justify-content: space-between;
    margin-top: 44px;
    padding-top: 22px;
}
.site-footer__bottom a { font-size: .85rem; }

/* -------------------------------------------------------------------------
   Themes page
   ------------------------------------------------------------------------- */
.theme-search { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.theme-search input {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: inherit;
    flex: 1 1 300px;
    font: inherit;
    font-size: .93rem;
    height: 46px;
    max-width: 440px;
    padding: 0 15px;
}
.theme-count { color: var(--muted); font-size: .87rem; font-variant-numeric: tabular-nums; }

.theme-grid { columns: 4 200px; column-gap: 20px; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.theme-grid > div { break-inside: avoid; padding: 0; }
.theme-row {
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 9px 2px;
}
.theme-row.is-hidden { display: none; }
.theme-row b { font-size: .91rem; font-weight: 500; }
.theme-row span { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   Help centre
   ------------------------------------------------------------------------- */
.doc-layout { display: grid; gap: 48px; grid-template-columns: 232px minmax(0, 1fr); }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 28px; } }

.doc-toc { align-self: start; position: sticky; top: 92px; }
@media (max-width: 900px) { .doc-toc { position: static; } }
.doc-toc ol { display: grid; gap: 2px; list-style: none; }
.doc-toc a {
    border-left: 2px solid var(--line);
    color: var(--muted);
    display: block;
    font-size: .88rem;
    line-height: 1.4;
    padding: 7px 0 7px 14px;
    text-decoration: none;
    transition: border-color .14s, color .14s;
}
.doc-toc a:hover { color: var(--ink); }
.doc-toc a.is-active { border-left-color: var(--copper); color: var(--ink); font-weight: 600; }

.doc-section { scroll-margin-top: 96px; }
.doc-section + .doc-section { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 44px; }
.doc-section h2 { font-size: 1.42rem; font-weight: 800; }
.doc-section > p, .doc-section li { color: var(--soft); line-height: 1.72; }
.doc-section > * + * { margin-top: 16px; }
.doc-section h3 { font-size: 1.06rem; font-weight: 700; margin-top: 28px; }
.doc-section ul, .doc-section ol { display: grid; gap: 9px; padding-left: 22px; }
.doc-section a { color: var(--copper-ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

.callout { background: var(--copper-wash); border-radius: var(--radius-sm); border-left: 3px solid var(--copper); font-size: .93rem; padding: 16px 18px; }
.callout p { color: var(--soft); }
.callout b { color: var(--ink); }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 620px) {
    .section { padding-block: 52px; }
    .section--tight { padding-block: 40px; }
    .wrap { padding-inline: 20px; }
    .cta__inner { flex-direction: column; align-items: flex-start; }
    .marquee .quote { flex-basis: 290px; }
    .theme-grid { columns: 1; }
    .site-footer__grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .site-footer__about { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   Screenshots and alternating rows
   ------------------------------------------------------------------------- */
.shot {
    background: var(--wash);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: 0;
    overflow: hidden;
}
.shot img { display: block; width: 100%; }
.shot--hero { box-shadow: var(--shadow-lift); }

.split { align-items: center; display: grid; gap: 46px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.split + .split { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 56px; }
.split__text h2 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); font-weight: 800; }
.split__text > p { color: var(--soft); font-size: 1.01rem; line-height: 1.68; margin-top: 14px; max-width: 52ch; }
.split__text .note { margin-top: 18px; }
/* The image leads on odd rows. Source order stays text first so a screen
   reader and a narrow screen both meet the explanation before the picture. */
@media (min-width: 861px) {
    .split--flip .split__text { order: 2; }
}

.faq-grid__item { break-inside: avoid; }

/* -------------------------------------------------------------------------
   Video facade
   ------------------------------------------------------------------------- */
.video {
    aspect-ratio: 16 / 9;
    background: var(--ink);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    display: block;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 100%;
}
.video img { height: 100%; object-fit: cover; opacity: .82; transition: opacity .18s, transform .3s; width: 100%; }
.video:hover img { opacity: 1; transform: scale(1.03); }
.video__play {
    align-items: center;
    background: rgba(40, 33, 31, .78);
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    color: #fff;
    display: flex;
    height: 62px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background .18s, transform .18s;
    width: 62px;
}
.video:hover .video__play { background: var(--copper-ink); transform: translate(-50%, -50%) scale(1.06); }
.video__play svg { height: 26px; margin-left: 3px; width: 26px; }
.video-frame { aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); display: block; width: 100%; }

.video-card { display: flex; flex-direction: column; gap: 14px; }
.video-card h3 { font-size: 1rem; font-weight: 700; line-height: 1.4; }
.video-card p { color: var(--muted); font-size: .87rem; }

/* -------------------------------------------------------------------------
   Corrections after the first read-through
   ------------------------------------------------------------------------- */

/* A search box directly under the paragraph it belongs to was sitting on the
   text. It is a new thought, so it gets the space of one. */
.hero .theme-search { margin-top: 28px; }
.hero .theme-search + nav { margin-top: 22px; }

/* A .head with no paragraph under the heading needs less room beneath it than
   one with two lines of explanation, or the gap reads as a missing element. */
.head:not(:has(p)) { margin-bottom: 26px; }

/* The help centre's list of sections. Not an eyebrow: it labels a list rather
   than introducing a heading, so it stays sentence case and quiet. */
.doc-toc__label {
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 12px;
    padding-left: 16px;
}

/* Section headings run to two lines at most sizes; without this the second
   line sits too far from the first at the large end of the clamp. */
.head h2, .split__text h2, .cta h2 { line-height: 1.14; }

/* Hero badges carry an icon whose optical weight differs from the text. */
.badge svg { flex-shrink: 0; }

/* -------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .hero { padding-block: 44px 40px; }
    .hero h1 { letter-spacing: -.03em; }
    .hero__lede { font-size: 1.02rem; }
    .hero .actions .btn { flex: 1 1 auto; justify-content: center; }
    .hero__proof { gap: 8px 16px; }

    .split + .split { margin-top: 40px; padding-top: 40px; }
    .split { gap: 28px; }

    .doc-section + .doc-section { margin-top: 32px; padding-top: 32px; }
    .doc-toc { border-bottom: 1px solid var(--line); margin-bottom: 8px; padding-bottom: 22px; }
    .doc-toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
    .doc-toc a { border: 1px solid var(--line); border-left-width: 1px; border-radius: 999px; padding: 7px 13px; }
    .doc-toc a.is-active { border-color: var(--copper); }
    .doc-toc__label { padding-left: 0; }

    .stats { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats b { font-size: 1.6rem; }

    .plans { grid-template-columns: 1fr; }
    .plan--featured { margin-top: 14px; }

    .qa__item summary { font-size: .98rem; padding-right: 36px; }
    .qa__item > p { padding-right: 0; }

    .theme-search input { max-width: none; }
    .theme-search { gap: 8px; }
}

@media (max-width: 520px) {
    .section { padding-block: 44px; }
    .head { margin-bottom: 24px; }
    .card { padding: 22px; }
    .steps li { padding: 22px; }
    .hero .actions { flex-direction: column; }
    .hero .actions .btn { width: 100%; }
    .cta .btn { width: 100%; }
    .stats { grid-template-columns: 1fr; }
    .marquee .quote { flex-basis: 82vw; }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------------------
   Two level navigation

   A parent that opens a panel is a <button>, not a link, so it is styled to
   match the links beside it rather than inheriting anything from the button
   reset. On desktop the panel opens on hover and on focus; on mobile the
   whole bar is already a panel, so the children simply nest.
   ------------------------------------------------------------------------- */
.nav li { position: relative; }

.nav [data-sub] {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--soft);
    cursor: pointer;
    display: flex;
    font-size: .91rem;
    font-weight: 500;
    gap: 5px;
    padding: 8px 13px;
    transition: background .14s, color .14s;
}
.nav [data-sub]:hover, .nav .has-sub:hover [data-sub] { background: var(--wash); color: var(--ink); }
.nav .has-sub.is-current > [data-sub] { color: var(--ink); font-weight: 600; }
.nav [data-sub] svg { height: 13px; transition: transform .18s; width: 13px; }
.nav .has-sub.is-open [data-sub] svg, .nav .has-sub:hover [data-sub] svg { transform: rotate(180deg); }

.nav .sub-menu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-lift);
    display: grid;
    gap: 2px;
    left: 0;
    list-style: none;
    min-width: 218px;
    opacity: 0;
    padding: 7px;
    pointer-events: none;
    position: absolute;
    top: calc(100% + 9px);
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s;
    z-index: 120;
}
/* The gap between the button and the panel would drop the hover halfway, so
   an invisible bridge spans it. */
.nav .has-sub::after { content: ""; height: 12px; left: 0; position: absolute; right: 0; top: 100%; }
/* The open state is a class on the list item rather than an attribute
   selector on the button plus an adjacent sibling combinator. The attribute
   form is tidier to read and did not reliably win the cascade against the
   closed state in Chrome; one class on the parent is unambiguous, and the
   script keeps the class and aria-expanded in step. */
.nav .has-sub:hover .sub-menu,
.nav .has-sub:focus-within .sub-menu,
.nav .has-sub.is-open .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.nav .sub-menu a { border-radius: 8px; font-size: .89rem; padding: 9px 12px; white-space: nowrap; }
.nav .sub-menu .current-menu-item > a { background: var(--wash); color: var(--ink); font-weight: 600; }

@media (max-width: 1000px) {
    .nav li { position: static; }
    .nav [data-sub] { font-size: 1rem; justify-content: space-between; padding: 11px 12px; width: 100%; }
    .nav .has-sub::after { display: none; }
    .nav .sub-menu {
        border: 0;
        border-left: 2px solid var(--line);
        border-radius: 0;
        box-shadow: none;
        display: none;
        margin: 2px 0 8px 12px;
        min-width: 0;
        opacity: 1;
        padding: 0 0 0 8px;
        pointer-events: auto;
        position: static;
        transform: none;
    }
    /* Hover does not exist here, so only the explicit open state shows a panel. */
    .nav .has-sub:hover .sub-menu, .nav .has-sub:focus-within .sub-menu { display: none; }
    .nav .has-sub.is-open .sub-menu { display: grid; }
}

/* -------------------------------------------------------------------------
   Metric matched fallbacks

   Both faces load from Google Fonts with display=swap, so the browser draws a
   system face first and repaints when the real one lands. Left alone that
   repaint moves every line on the page, which a visitor sees and Core Web
   Vitals counts as layout shift. The overrides below make the stand-in occupy
   the same space, so the swap is invisible.

   The ratios are measured at the sizes the faces are actually set in, not at
   some round number: Newsreader carries an optical size axis and is narrower
   than Georgia at 17px while being wider at 100px, so a ratio taken at the
   wrong size wraps a line early and moves the text it was meant to hold still.
   ------------------------------------------------------------------------- */
/* Rubik runs wider than the system sans, and by different amounts at
   different weights: measured in Chrome against Helvetica Neue it is 103.3%
   at regular and 107.0% at 800. One ratio cannot serve both, so there are two
   rules split on the weight descriptor, one for text and one for headings.

   No ascent or descent override: every line-height in this stylesheet is set
   explicitly, so the line box height does not come from the font's own
   metrics and an override would only move the first baseline inside a box
   whose height is already fixed. Rubik and Helvetica agree on normal line
   height at 1.1875 in any case. */
/* Two families, because Rubik runs wider than the system sans by different
   amounts at different weights: measured in Chrome it is 103.4% of Helvetica
   Neue at regular and 107.0% at 800. One ratio cannot serve both.

   The display face must name the real bold file in local(). A rule sourced
   from local("Helvetica Neue") with a 700 to 900 weight descriptor does not
   resolve at all: the browser skips the whole face, falls through to the next
   family in the stack, and headings render 7% narrow with no size-adjust
   applied. Naming Helvetica Neue Bold and Arial Bold brings the error to
   0.4%, which is a fifth of a pixel on a 54px heading.

   No ascent or descent override anywhere: every line-height in this
   stylesheet is set explicitly, so the line box height never comes from the
   font's own metrics, and Rubik and Helvetica agree at 1.1875 regardless. */
@font-face {
    font-family: "Rubik Fallback";
    src: local("Helvetica Neue"), local("Arial");
    size-adjust: 103.4%;
}

@font-face {
    font-family: "Rubik Display Fallback";
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
         local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 700 900;
    size-adjust: 107%;
}

@font-face {
    font-family: "Newsreader Fallback";
    src: local("Georgia"), local("Times New Roman");
    size-adjust: 95.3%;
    ascent-override: 77.6%;
    descent-override: 27.3%;
    line-gap-override: 0%;
}

/* The serif is for words a person wrote: review quotes and pull quotes. It is
   never used for interface text, where it would read as decoration. */
.quote p, .prose blockquote {
    font-family: var(--font-serif);
    font-size: 1.04rem;
    line-height: 1.62;
}
.marquee .quote p { font-size: 1.01rem; }

/* Footer: five columns, the first one twice as wide because it carries the
   description and the install button rather than a list of links. */
.site-footer__grid { grid-template-columns: minmax(240px, 1.6fr) repeat(4, minmax(130px, 1fr)); }
.site-footer__proof { align-items: center; display: flex; flex-wrap: wrap; font-size: .86rem; gap: 8px; margin: 14px 0 18px; }
.site-footer__proof a { color: var(--soft); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.site-footer__proof a:hover { color: var(--copper-ink); }
.site-footer .btn { margin-top: 2px; }

@media (max-width: 1080px) {
    .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .site-footer__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* -------------------------------------------------------------------------
   Grid children may not be wider than their track

   A grid track written as 1fr is really minmax(auto, 1fr), and auto refuses to
   go below the item's min-content width. The comparison tables carry
   min-width: 620px so they stay readable inside their own scroller, and that
   620px propagated up through the track and made the whole help centre page
   scroll sideways on a phone. min-width: 0 lets the track win, and the table
   keeps scrolling inside .table-scroll where it was always meant to.
   ------------------------------------------------------------------------- */
.doc-layout > *,
.grid > *,
.hero__grid > *,
.split > *,
.site-footer__grid > *,
.plans > * { min-width: 0; }

.table-scroll { max-width: 100%; min-width: 0; }