/* Selected PartnerHub landing rules; source and adaptations: specs/004-welcome-partner-parity/plan.md. */
.landing {
  --an-duration-base: 0.3s;
  --an-duration-fast: 0.2s;
  --an-header-gradient: radial-gradient(120% 135% at 94% 22%, var(--an-red-deep) 0%, var(--an-ink) 46%, var(--an-dark) 100%);
  --an-hero-gradient: var(--an-header-gradient);
  --an-measure: 760px;
  --an-measure-tight: 640px;
  --an-nav-height: 64px;
  --an-on-dark-body: rgba(255, 255, 255, 0.55);
  --an-on-dark-border: rgba(255, 255, 255, 0.12);
  --an-on-dark-fill: rgba(255, 255, 255, 0.03);
  --an-on-dark-hairline: rgba(255, 255, 255, 0.1);
  --an-on-dark-heading: rgba(255, 255, 255, 1);
  --an-radius-lg: 16px;
  --an-radius-pill: 999px;
  --an-radius-sm: 8px;
  --an-radius-xl: 24px;
  --an-radius-xs: 4px;
  --an-shadow-card: 0 10px 30px -22px rgba(0, 0, 0, 0.25);
  --an-shadow-card-hover: 0 18px 44px -26px rgba(26, 27, 25, 0.3);
  --an-shadow-red: 0 12px 32px rgba(167, 37, 44, 0.35);
  --an-space-1: 4px;
  --an-space-10: 40px;
  --an-space-12: 48px;
  --an-space-16: 64px;
  --an-space-2: 8px;
  --an-space-3: 12px;
  --an-space-4: 16px;
  --an-space-5: 20px;
  --an-space-6: 24px;
  --an-space-8: 32px;
  --an-space-section-y: 96px;
  --an-space-section-y-sm: 64px;
  --an-text-body: 15px;
  --an-text-label: 14px;
}
/* Public landing page (/) — the one marketing surface in the product.
   Built on the design system's published class layer (.an-container, .an-section-label,
   .an-btn-primary, .an-giant-numeral) and the signature devices from style guide §05–§06:
   the fixed ink nav (p.35), the proof bar as the hero's floor (p.38), the dark form variant
   (p.33), the section glow and three-layer CTA band (p.39), the quiet footer (p.36).
   Every value is a --an-* token; the alpha steps that are not tokens are the guide's own
   published numbers for the device in question, cited inline. */

.landing {
    min-height: 100vh;
    background: var(--an-dark-3);
    color: var(--an-on-dark-heading);
    font-family: var(--an-font-sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.landing a { color: inherit; text-decoration: none; }
.landing h1, .landing h2, .landing h3, .landing p { margin: 0; }

/* Skip link (guide p.35): styled red tab on focus, never left to the browser. */
.landing-skip {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 1100;
    background: var(--an-red);
    color: var(--an-white);
    font-size: 15px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 0 0 12px 0;
}
.landing-skip:focus { top: 0; outline: none; }

/* ---- Nav: fixed ink bar, 64px → 68px @1152 (p.35) ------------------------ */
.landing-nav {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: var(--an-nav-height);
    background: var(--an-ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);   /* p.35: bottom hairline .08 */
}
.landing-nav__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--an-space-6);
}
.landing-nav__logo img { height: 40px; width: auto; display: block; }
.landing-nav__links {
    display: none;
    align-items: center;
    gap: var(--an-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.landing-nav__link {
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);                        /* p.35: link .8 */
    transition: color var(--an-duration-fast) var(--an-ease);
}
.landing-nav__link:hover { color: var(--an-red-light); }
.landing-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--an-space-2);
    background: var(--an-red);
    color: var(--an-white);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: var(--an-radius-sm);                     /* p.35: CTA radius 8 */
    transition: transform var(--an-duration-base) var(--an-ease), box-shadow var(--an-duration-base) var(--an-ease);
}
.landing-nav__cta:hover { transform: translateY(-1px); box-shadow: var(--an-shadow-red); }
/* 036: the nav carries both doors — request access is the primary (the public one), sign in the
   quiet outlined second, the same hierarchy the hero and the access band use. */
.landing-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--an-space-2);
    flex-shrink: 0;
}
.landing-nav__cta--secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.24);
    padding: 9px 16px;
}
.landing-nav__cta--secondary:hover { box-shadow: none; border-color: var(--an-red-light); color: var(--an-red-light); }
.landing-nav__link:focus-visible,
.landing-nav__cta:focus-visible,
.landing-nav__logo:focus-visible {
    outline: 2px solid var(--an-red-light);
    outline-offset: 3px;
}
@media (min-width: 900px) {
    .landing-nav__links { display: flex; }
}
@media (min-width: 1152px) {
    .landing-nav { height: 68px; }
}

/* ---- Hero ---------------------------------------------------------------- */
.landing-hero {
    position: relative;
    padding-top: calc(var(--an-nav-height) + var(--an-space-section-y-sm));
    padding-bottom: 0;                                       /* p.38: proof bar is the floor */
    background: var(--an-hero-gradient);
    overflow: hidden;
}
/* Section glow (p.39): blurred red radial, atmosphere only, never carries meaning. */
.landing-glow {
    position: absolute;
    width: 640px;
    height: 640px;
    border-radius: var(--an-radius-pill);
    background: rgba(167, 37, 44, 0.12);
    filter: blur(120px);
    pointer-events: none;
}
.landing-hero .landing-glow { top: -200px; right: -160px; }

.landing-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--an-space-12);
    align-items: center;
}
@media (min-width: 1024px) {
    .landing-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--an-space-16); }
}

/* Hero eyebrow (p.38 hero variant): 40×1px rule + uppercase 14px/700 at .2em. */
.landing-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--an-space-6);
    font-family: var(--an-font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--an-red-light);
}
.landing-eyebrow::before {
    content: "";
    width: 40px;
    height: 1px;
    background: var(--an-red-light);
    flex-shrink: 0;
}
.landing-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(196, 73, 80, 0.6), transparent);
}

.landing-hero__title {
    font-size: clamp(2.75rem, 6.6vw, 4.9rem);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--an-on-dark-heading);
}
.landing-hero__title .an-accent-dark { text-transform: none; }
/* Routes.razor focuses the h1 on navigation (FocusOnNavigate); the UA ring is blue. */
.landing-hero__title:focus { outline: none; }

.landing-hero__lede {
    margin-top: var(--an-space-6);
    max-width: var(--an-measure-tight);
    font-size: 18px;
    line-height: 1.55;
    color: var(--an-on-dark-body);
}
.landing-hero__lede strong { color: var(--an-on-dark-heading); font-weight: 600; }

.landing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--an-space-6);
    margin-top: var(--an-space-8);
}
.landing-hero__actions .an-btn-ghost { color: var(--an-on-dark-heading); }
.landing-hero__actions .an-btn-ghost:hover { color: var(--an-red-light); }
.landing-hero__actions .an-btn-ghost .an-arrow {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--an-radius-xs);
    background: var(--an-on-dark-fill);
    border: 1px solid var(--an-on-dark-border);
}

/* Proof bar (p.38): hairline top, 28/0/30 padding, 800/22px numerals, 13.5px/.5 labels. */
.landing-proof {
    position: relative;
    margin-top: var(--an-space-12);
    padding: 28px 0 30px;
    border-top: 1px solid var(--an-on-dark-hairline);
}
.landing-proof__lead {
    font-size: 17px;
    color: var(--an-on-dark-body);
    margin-bottom: var(--an-space-5);
}
.landing-proof__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.landing-proof__facts li { display: flex; align-items: baseline; }
.landing-proof__facts b {
    font-size: 22px;
    font-weight: 800;
    color: var(--an-on-dark-heading);
    letter-spacing: -0.02em;
}
.landing-proof__facts span {
    font-size: 13.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);                        /* p.38: label .5 */
    margin-left: 8px;
}
@media (max-width: 600px) {
    .landing-proof__facts { display: grid; grid-template-columns: max-content 1fr; gap: 12px 8px; }
    .landing-proof__facts li { display: contents; }
}
@media (min-width: 1280px) {
    .landing-proof__facts { flex-wrap: nowrap; justify-content: space-between; gap: 24px; }
}

/* ---- Sections ------------------------------------------------------------ */
.landing-section {
    position: relative;
    padding: var(--an-space-section-y-sm) 0;
    scroll-margin-top: var(--an-nav-height);   /* anchors land below the fixed nav */
}
@media (min-width: 768px) {
    .landing-section { padding: var(--an-space-section-y) 0; }
}
.landing-section.is-light {
    background: var(--an-paper);
    color: var(--an-ink);
}
.landing-section.is-ink {
    background: var(--an-ink);
}
.landing-section__head { max-width: var(--an-measure); margin-bottom: var(--an-space-12); }
.landing-section__title {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.landing-section__lede {
    margin-top: var(--an-space-5);
    font-size: 17px;
    line-height: 1.55;
    color: var(--an-gray-3);
}
.is-ink .landing-section__lede { color: var(--an-on-dark-body); }

/* Feature grid: numbered cards carrying the giant numeral (p.38 feature row, 56px). */
.landing-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--an-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 700px) { .landing-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .landing-features { grid-template-columns: repeat(3, 1fr); } }

.landing-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--an-space-3);
    padding: var(--an-space-8) var(--an-space-6) var(--an-space-6);
    background: var(--an-white);
    border: 1px solid var(--an-border);
    border-radius: var(--an-radius-lg);
    box-shadow: var(--an-shadow-card);
    transition: transform var(--an-duration-base) var(--an-ease),
                box-shadow var(--an-duration-base) var(--an-ease),
                border-color var(--an-duration-base) var(--an-ease);
}

.landing-feature .an-giant-numeral { font-size: 56px; }
.landing-feature__icon {
    position: absolute;
    top: var(--an-space-6);
    right: var(--an-space-6);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--an-radius-sm);
    background: var(--an-paper);
    border: 1px solid var(--an-border);
    color: var(--an-gray-4);
}
.landing-feature__icon svg { width: 20px; height: 20px; }
.landing-feature h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--an-ink);
}
.landing-feature p {
    font-size: var(--an-text-body);
    line-height: 1.55;
    color: var(--an-gray-3);
}
.landing-feature__tier {
    margin-top: auto;
    padding-top: var(--an-space-3);
    font-family: var(--an-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--an-gray-5);
}

/* ---- ArchitectNow: who is behind the portal (036) ------------------------ */
/* Light section between the features and SnyperSeller: three service-lane cards that are
   links out to architectnow.net, the partnership claims block, and a quiet facts strip. */
.landing-company {
    background: var(--an-paper);
    color: var(--an-ink);
}
.landing-lanes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--an-space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 900px) { .landing-lanes { grid-template-columns: repeat(3, 1fr); } }
.landing-lane {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--an-space-3);
    height: 100%;
    padding: var(--an-space-8) var(--an-space-6) var(--an-space-6);
    background: var(--an-white);
    border: 1px solid var(--an-border);
    border-radius: var(--an-radius-lg);
    box-shadow: var(--an-shadow-card);
    color: inherit;
    text-decoration: none;
    transition: transform var(--an-duration-base) var(--an-ease),
                box-shadow var(--an-duration-base) var(--an-ease),
                border-color var(--an-duration-base) var(--an-ease);
}
.landing-lane:hover,
.landing-lane:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--an-shadow-card-hover);
    border-color: var(--an-gray-7);
}
.landing-lane:focus-visible { outline: 2px solid var(--an-red); outline-offset: 3px; }
.landing-lane .an-giant-numeral { font-size: 56px; }
.landing-lane h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--an-ink);
}
.landing-lane p {
    flex: 1;
    font-size: 15px;
    line-height: 1.55;
    color: var(--an-gray-3);
}
.landing-lane__more {
    margin-top: var(--an-space-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--an-red);
}

.landing-partnership {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--an-space-8);
    margin-top: var(--an-space-12);
    padding: var(--an-space-8);
    background: var(--an-white);
    border: 1px solid var(--an-border);
    border-radius: var(--an-radius-xl);
}
@media (min-width: 1024px) {
    .landing-partnership { grid-template-columns: 1.1fr 1fr; gap: var(--an-space-12); padding: var(--an-space-10); }
}
.landing-partnership__head h3 {
    margin-top: var(--an-space-4);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--an-ink);
}
.landing-partnership__head p {
    margin-top: var(--an-space-4);
    margin-bottom: var(--an-space-6);
    font-size: 16px;
    line-height: 1.55;
    color: var(--an-gray-3);
}
/* The claims: two columns of definition lists, each value a squared tag (p.39 — never pills). */
.landing-partnership__claims {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--an-space-6);
    margin: 0;
}
@media (min-width: 600px) { .landing-partnership__claims { grid-template-columns: 1fr 1fr; } }
.landing-partnership__claims dt {
    margin-bottom: var(--an-space-2);
    font-size: var(--an-text-label);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--an-gray-4);
}
.landing-partnership__claims dt + dd ~ dt { margin-top: var(--an-space-5); }
.landing-partnership__claims dd {
    display: inline-block;
    margin: 0 var(--an-space-2) var(--an-space-2) 0;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--an-ink);
    background: var(--an-paper);
    border: 1px solid var(--an-border);
    border-radius: var(--an-radius-xs);
}

.landing-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--an-space-4);
    margin: var(--an-space-10) 0 0;
    padding: var(--an-space-6) 0 0;
    border-top: 1px solid var(--an-border);
    list-style: none;
}
@media (min-width: 900px) { .landing-facts { grid-template-columns: repeat(4, 1fr); } }
.landing-facts li { display: grid; gap: 2px; }
.landing-facts span {
    font-size: var(--an-text-label);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--an-gray-4);
}
.landing-facts b { font-size: 16px; font-weight: 700; color: var(--an-ink); }

/* ---- Get access: dark section, the three invited ways + the request CTA (036) ------ */
.landing-access {
    position: relative;
    background: var(--an-dark-3);
    overflow: hidden;
}
.landing-access .landing-glow { bottom: -260px; left: 50%; transform: translateX(-50%); }
.landing-access__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--an-space-12);
    align-items: center;
}
@media (min-width: 1024px) {
    .landing-access__grid { grid-template-columns: 1fr 1fr; gap: var(--an-space-16); }
}
.landing-access .landing-hero__actions { margin-top: var(--an-space-8); }
.landing-ways {
    display: grid;
    gap: var(--an-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
.landing-way {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--an-space-5);
    row-gap: var(--an-space-1);
    padding: var(--an-space-5) var(--an-space-6);
    background: var(--an-on-dark-fill);
    border: 1px solid var(--an-on-dark-border);
    border-radius: var(--an-radius-lg);
}
.landing-way .an-giant-numeral { grid-row: 1 / span 2; font-size: 40px; line-height: 1; }
.landing-way h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--an-on-dark-heading);
}
.landing-way p { font-size: 15px; line-height: 1.5; color: var(--an-on-dark-body); }

/* ---- Footer: the quietest thing on the page (p.36) ----------------------- */
.landing-footer {
    background: var(--an-ink);
    border-top: 1px solid rgba(255, 255, 255, 0.06);        /* p.36: top hairline .06 */
    padding: 40px 0 32px;
}
.landing-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--an-space-8);
}
@media (min-width: 1024px) {
    .landing-footer__grid { grid-template-columns: 280px 1fr; gap: var(--an-space-12); }
}
.landing-footer__logo img { height: 48px; width: auto; opacity: 0.9; transition: opacity var(--an-duration-fast) var(--an-ease); }
.landing-footer__logo:hover img { opacity: 1; }
.landing-footer__blurb {
    margin-top: var(--an-space-4);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.4);                        /* p.36: blurb .4 */
}
.landing-footer__contact {
    margin-top: var(--an-space-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.landing-footer__contact a {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--an-duration-fast) var(--an-ease);
}
.landing-footer__contact a:hover { color: rgba(255, 255, 255, 0.9); }
.landing-footer__rows { display: flex; flex-direction: column; gap: 14px; }
.landing-footer__row {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 6px 16px;
    align-items: baseline;
}
.landing-footer__row > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.landing-footer__row > div { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.landing-footer__row a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    transition: color var(--an-duration-fast) var(--an-ease);
}
.landing-footer__row a:hover { color: rgba(255, 255, 255, 0.85); }
.landing-footer__bottom {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.25);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--an-space-2);
}
@media (max-width: 767px) {
    .landing-footer__row { grid-template-columns: 1fr; }
    .landing-footer__row a { padding-block: 12px; }
}


/* Accessibility adaptations: readable small copy and real 44px link targets. */
.landing a { min-height: 44px; }
.landing-nav__logo { display: flex; align-items: center; }
.landing-nav__logo img { max-width: 45vw; object-fit: contain; }
.landing-nav__cta { align-items: center; }
.landing-nav__link { display: inline-flex; align-items: center; font-size: 15px; }
.landing-footer__row a { display: inline-flex; align-items: center; font-size: 15px; color: var(--an-gray-7); }
.landing-footer__blurb, .landing-footer__bottom { font-size: 15px; color: var(--an-gray-7); }
.landing-proof__facts span { font-size: 15px; color: var(--an-gray-7); }
.landing-employee-note { margin-top: 24px !important; color: var(--an-gray-7); font-size: 15px; }
.landing a:focus-visible { outline: 2px solid var(--an-red-light); outline-offset: 3px; }
.landing .is-light a:focus-visible, .landing-company a:focus-visible { outline-color: var(--an-red); }

/* PartnerHub app.css editorial numeral primitive, scoped to this landing page. */
.landing .an-giant-numeral { display: inline-block; font-weight: 900; letter-spacing: -.05em; line-height: 1; color: var(--an-red); user-select: none; }
.landing-way .an-giant-numeral { color: var(--an-red-light); }
/* Hero cards use PartnerHub's terminal ground so body copy stays legible over the glow. */
.landing-hero .landing-way { background: var(--an-terminal); }