/* ============================================================
   Editorial design system — shared by the public homepage and the
   per-persona pitch pages (/host, /landlord, /tenants, /contractor-jobs).
   ============================================================
   Pulled out of PublicHome.cshtml's inline <style> so all pages can
   share one source of truth. Loaded by views that opt in via:
     <link rel="stylesheet" href="~/css/editorial.css" />
   under @section Styles.

   Scope: every rule sits behind .editorial-page so it doesn't leak
   into other layouts. Modernize / Bootstrap tokens still apply
   outside this scope.
   ----------------------------------------------------------------- */

/* Full-bleed wrapper. Each editorial section paints its own background
   edge to edge, so the wrapper must match .body-wrapper exactly.

   These two rules used to be copy-pasted into the inline <style> of all
   five editorial views, and the first of them read:
       margin: 0 calc(-1 * var(--bs-gutter-x, 1.5rem));
   That cancelled horizontal padding on .body-wrapper -- which does not
   have any, at any width. .editorial-page-wrap is a bare <div> child of
   .body-wrapper, not a .container-fluid, so Modernize's
   `.body-wrapper > .container-fluid { padding: 0 24px }` never applied
   to it.

   The result was a wrapper 48px wider than its parent at EVERY
   breakpoint, with #main-wrapper.overflow-hidden silently cropping 24px
   off each edge. Invisible on desktop (the hero's centred .container had
   slack to spare), but on a 375px phone the container is full-width, so
   every line of copy lost its first and last characters -- "What's
   included" rendered as "hat's included" and the feature-list ticks were
   sheared in half.

   Zero is the correct value: there is no padding to escape. */
.editorial-page-wrap {
    margin-inline: 0;
}

.editorial-page-wrap > section {
    width: 100%;
}

/*
   The editorial pages are a FIXED-PALETTE REGION, like .rq-inverse: they
   are the brand showcase and look the same whether the app around them is
   in light or dark mode. So they pin their roles rather than inheriting
   the theme's.

   These used to be hex literals, and they were the original source of the
   --rq-navy collision — this file said #0b1024, app-auth-pages.css said
   #1e2330, and its dark block said #0b0f1a, all under one name. They now
   point at the primitives those literals were copies of, so the marketing
   pages and the app cannot drift apart again.
*/
.editorial-page {
    font-family: var(--rq-font-ui);

    --rq-navy:      var(--rq-navy-900);
    --rq-navy-2:    var(--rq-navy-800);
    --rq-navy-3:    var(--rq-navy-700);
    --rq-blue:      var(--rq-blue-500);
    --rq-blue-2:    var(--rq-blue-400);
    --rq-blue-soft: var(--rq-blue-a14);
    --rq-gold:      var(--rq-gold-400);
    --rq-paper:     var(--rq-paper-300);
    --rq-line-d:    var(--rq-on-dark-12);
    --rq-line-l:    var(--rq-on-light-12);
    --rq-sub-d:     var(--rq-on-dark-72);
    --rq-faint-d:   var(--rq-on-dark-52);
    --rq-sub-l:     var(--rq-on-light-66);

    /* Text on these pages sits on navy, so the region's text roles are
       the light end regardless of the page theme. Pure white for
       headings — this is display type on a dark ground, where the 92%
       used elsewhere reads as slightly muddy. */
    --rq-text: var(--rq-paper-100);
    --rq-sub:  var(--rq-on-dark-72);
}
.editorial-page .display-serif {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.035em;
    font-variation-settings: "opsz" 144;
}

/* ───────── HERO ───────── */
.editorial-page .hero {
    position: relative;
    background:
        radial-gradient(1100px 700px at 85% -10%, rgba(59,108,245,.45), transparent 60%),
        radial-gradient(900px 600px at -5% 110%, rgba(122,160,255,.18), transparent 60%),
        linear-gradient(180deg, var(--rq-navy) 0%, var(--rq-navy-850) 100%);
    color: var(--rq-text);
    overflow: hidden;
    padding: 90px 0 130px;
}
.editorial-page .hero::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 64px 64px;
    /* The only hex left in this file, and it stays. In a mask the colour
       channel is ignored — #000 vs transparent means opaque vs cut-out,
       an alpha stencil that fades the grid overlay at its edges.
       Tokenising it would imply it is themeable. It is not. */
    mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
    pointer-events: none;
}
.editorial-page .hero-inner { position: relative; z-index: 2; text-align: center; }
.editorial-page .eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 7px 14px; border: 1px solid var(--rq-line-d);
    border-radius: 999px; font-size: 12px; font-weight: 600;
    color: var(--rq-sub-d); background: rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
}
.editorial-page .eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--rq-mint-400);
    box-shadow: 0 0 0 4px var(--rq-mint-a18);
}
.editorial-page h1.hero-title {
    font-size: clamp(44px, 7.4vw, 92px);
    line-height: 1;
    margin: 22px auto 18px;
    max-width: 14ch;
    color: var(--rq-text);
}
.editorial-page h1.hero-title .accent {
    background: linear-gradient(120deg, var(--rq-blue-200) 0%, var(--rq-gold) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-style: italic;
}
.editorial-page .lede {
    font-size: clamp(16px, 1.5vw, 19px);
    color: var(--rq-sub-d);
    max-width: 58ch; line-height: 1.55;
    margin: 0 auto 38px;
}
.editorial-page .hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.editorial-page .hero-cta .btn { padding: 11px 22px; font-weight: 700; }
.editorial-page .hero-cta .btn-light { background: var(--rq-paper-100); color: var(--rq-navy); border: 0; }
.editorial-page .hero-cta .btn-light:hover { background: var(--rq-paper); }
.editorial-page .hero-cta .btn-ghost { color: var(--rq-text); background: transparent; border: 1px solid rgba(255,255,255,.18); }
.editorial-page .hero-cta .btn-ghost:hover { background: rgba(255,255,255,.06); color: var(--rq-text); }

/* ───────── PATHS GRID (home page only) ───────── */
.editorial-page .paths {
    background: var(--rq-navy);
    color: var(--rq-text);
    padding: 80px 0 60px;
}
.editorial-page .section-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 42px; }
.editorial-page .section-head h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; margin: 0; max-width: 18ch; color: var(--rq-text); }
.editorial-page .section-head p { color: var(--rq-sub-d); max-width: 42ch; margin: 0; line-height: 1.55; }
.editorial-page .door-card {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid var(--rq-line-d); border-radius: 22px;
    padding: 26px 26px 28px;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
    min-height: 260px; display: flex; flex-direction: column;
    text-decoration: none; height: 100%;
}
.editorial-page .door-card:hover {
    transform: translateY(-3px);
    border-color: rgba(122,160,255,.45);
    background: linear-gradient(180deg, rgba(122,160,255,.12), rgba(255,255,255,.02));
}
.editorial-page .door-card .num {
    font-family: "Fraunces", serif;
    font-size: 13px; color: var(--rq-blue-2);
    letter-spacing: .14em; text-transform: uppercase;
    margin-bottom: auto;
}
.editorial-page .door-card .ic {
    width: 48px; height: 48px; border-radius: 13px;
    background: var(--rq-blue-soft); color: var(--rq-blue-2);
    display: flex; align-items: center; justify-content: center;
    margin: 18px 0 18px; font-size: 22px;
}
.editorial-page .door-card h3 {
    font-family: "Fraunces", serif; font-weight: 600;
    font-size: 24px; letter-spacing: -0.02em;
    margin: 0 0 8px; color: var(--rq-text);
}
.editorial-page .door-card p { margin: 0 0 18px; color: var(--rq-sub-d); font-size: 14px; line-height: 1.55; }
.editorial-page .door-card .go {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--rq-blue-2); font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.editorial-page .door-card .go i { transition: transform .2s; }
.editorial-page .door-card:hover .go i { transform: translateX(4px); }
.editorial-page .door-card.feature {
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(122,160,255,.25), transparent 60%),
        linear-gradient(135deg, var(--rq-navy-3), var(--rq-navy-2));
    border-color: rgba(122,160,255,.3);
}
.editorial-page .door-card.feature h3 { font-size: 32px; max-width: 14ch; }
.editorial-page .door-card.feature p { max-width: 42ch; font-size: 15px; }
.editorial-page .door-card.feature .ic { width: 54px; height: 54px; font-size: 26px; }

/* ───────── PITCH PAGE BODY (post-hero content) ───────── */
.editorial-page .pitch-body {
    background: var(--rq-navy);
    color: var(--rq-text);
    padding: 80px 0 100px;
}
.editorial-page .pitch-body h2 {
    font-size: clamp(28px, 3vw, 40px); line-height: 1.1; margin: 0 0 16px; color: var(--rq-text);
}
.editorial-page .pitch-body p { color: var(--rq-sub-d); }
.editorial-page .step-card {
    text-align: center;
    padding: 24px;
}
.editorial-page .step-card .step-ic {
    width: 56px; height: 56px; border-radius: 16px;
    background: var(--rq-blue-soft); color: var(--rq-blue-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; margin-bottom: 16px;
}
.editorial-page .step-card h6 {
    font-family: "Fraunces", serif; font-weight: 600;
    font-size: 18px; letter-spacing: -0.01em; color: var(--rq-text); margin: 0 0 8px;
}
.editorial-page .step-card p { font-size: 14px; line-height: 1.55; margin: 0; }

.editorial-page .feature-list {
    list-style: none; padding: 0; margin: 0;
}
.editorial-page .feature-list li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0;
    color: var(--rq-sub-d);
    font-size: 14.5px; line-height: 1.55;
}
.editorial-page .feature-list li i {
    color: var(--rq-blue-2); margin-top: 3px; font-size: 18px;
}

.editorial-page .final-cta {
    margin-top: 60px;
    text-align: center;
    padding: 56px 28px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
    border: 1px solid var(--rq-line-d);
}
.editorial-page .final-cta h3 {
    font-family: "Fraunces", serif; font-weight: 600;
    font-size: clamp(24px, 2.6vw, 36px); color: var(--rq-text); margin: 0 0 12px;
}
.editorial-page .final-cta p { color: var(--rq-sub-d); margin: 0 0 24px; }