/* ==========================================================================
   Revilicious site stylesheet
   One file for the whole site. Sections:
     1. Foundation      tokens, reset, base type
     2. Shared shell    header, footer, logo, eyebrow, section headings
     3. Shared pieces   cards, buttons, ribbon, pattern panel
     4. Home (doorway)  hero, fork, doors, partner strip
     5. Business page   hero, steps, benefits, who it's for, CTA, cross-paths
     6. Responsive      all breakpoints, grouped
   ========================================================================== */

/* ---- 1. Foundation ------------------------------------------------------ */

/* Self-hosted Inter, subset to exactly the characters this site uses. Inter
   is not preinstalled on Windows or Android, so without this every visitor on
   those platforms would silently see their system font (Segoe UI / Roboto)
   instead of Inter. font-display: swap avoids an invisible-text flash; the
   fallback stack below still covers the brief moment before these load.
   Font files: assets/fonts/ (OFL-1.1 licensed, see assets/fonts/OFL.txt). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/inter-600.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/inter-700.woff2") format("woff2");
}

/* 750 has no distinct static weight; it reuses the Bold outline so a heading
   set to font-weight: 750 in this stylesheet still resolves to a real,
   self-hosted face instead of falling back to the system font. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 750;
  font-display: swap;
  src: url("../assets/fonts/inter-700.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/inter-800.woff2") format("woff2");
}

/* 850 aliases the ExtraBold outline for the same reason 750 aliases Bold. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 850;
  font-display: swap;
  src: url("../assets/fonts/inter-800.woff2") format("woff2");
}

:root {
  --red: #e31820;
  --red-dark: #b70f18;
  --ink: #161616;
  --muted: #666a73;
  --soft: #f7f7f8;
  --line: #ececef;
  --radius: 28px;
  --shadow: 0 24px 70px rgba(20, 20, 20, .08);
  --shadow-hover: 0 30px 80px rgba(227, 24, 32, .16);
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 16ch;
  margin-bottom: 26px;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: -.05em;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -.05em;
}

/* ---- 2. Shared shell ---------------------------------------------------- */

.site-header,
.site-footer,
main {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
}

.logo-icon-text {
  height: 46px;
  width: auto;
  display: block;
}

.launch-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--red-dark);
  background: #fff0f1;
  font-weight: 750;
  font-size: .92rem;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--red);
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo nav"
    "meta meta";
  align-items: center;
  gap: 22px 28px;
  padding: 40px 0 46px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer > .logo {
  grid-area: logo;
}

.footer-nav {
  grid-area: nav;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-weight: 700;
  font-size: .98rem;
}

.footer-nav a {
  color: var(--ink);
}

.footer-nav a:hover {
  color: var(--red-dark);
}

.footer-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: .95rem;
  line-height: 1.4;
}

.footer-meta a {
  color: var(--red-dark);
  font-weight: 700;
}

/* ---- 3. Shared pieces --------------------------------------------------- */

/* Card base, shared by the fork doors, the steps and the benefit cards. */
.door,
.step,
.benefit-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

/* Primary call to action. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 14px 30px rgba(227, 24, 32, .22);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--red-dark);
  box-shadow: 0 18px 38px rgba(227, 24, 32, .28);
}

.btn-primary:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* The red icon ribbon: sub-page signature and section divider. Full-bleed slim
   band. The base .ribbon is the combo icon set (generic + business + events);
   .ribbon-business and .ribbon-events swap in the audience-specific sets. */
.ribbon {
  height: 96px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: var(--red);
  background-image: url("../assets/revilicious-ribbon.svg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto 100%;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .05);
}

.ribbon-business {
  background-image: url("../assets/revilicious-ribbon-business.svg");
}

.ribbon-events {
  background-image: url("../assets/revilicious-ribbon-events.svg");
}

/* Shared pattern panel (doorway hero only). */
.pattern-panel {
  position: absolute;
  inset: 0 -90px 0 auto;
  width: min(700px, 138%);
  height: 100%;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 10px 24px rgba(227, 24, 32, .08));
}

.mobile-band {
  display: none;
}

/* ---- 4. Home (doorway) -------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 48px;
  padding: 46px 0 70px;
}

.hero-copy {
  max-width: 580px;
  padding-right: 40px;
}

.hero-text {
  max-width: 590px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.24rem);
  line-height: 1.6;
}

.hero-text-lead {
  color: var(--ink);
  font-weight: 600;
}

.hero-copy p:last-of-type {
  margin-bottom: 0;
}

.hero-art {
  min-height: 600px;
  position: relative;
  overflow: visible;
}

.fork {
  padding: 40px 0 96px;
}

.fork-title-part {
  display: block;
}

.doors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 32px 30px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.door:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: #ffd4d7;
}

.door:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.door-icons {
  display: inline-flex;
  gap: 10px;
  margin-bottom: 22px;
  color: var(--red);
}

.door-icons svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.door h3 {
  margin-bottom: 10px;
  font-size: 1.34rem;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.door p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

.door-cta,
.partner-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  background: #fff0f1;
  color: var(--red-dark);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}

.door-cta {
  margin-top: 24px;
  align-self: flex-start;
}

.door:hover .door-cta,
.partner-link:hover {
  background: #ffe1e4;
}

.cta-arrow {
  transition: transform .18s ease;
}

.door:hover .cta-arrow,
.partner-link:hover .cta-arrow {
  transform: translateX(4px);
}

.partner-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 26px 34px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff4f5, #fff 60%);
  border: 1px solid #ffe1e4;
}

.partner-icons {
  margin-bottom: 0;
}

.partner-icons svg {
  width: 26px;
  height: 26px;
}

.partner-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 1.02rem;
}

.partner-text strong {
  color: var(--ink);
  font-weight: 750;
}

.partner-label {
  display: block;
  margin-bottom: 4px;
  color: var(--red);
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.fork-fallback {
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.fork-fallback a {
  color: var(--red-dark);
  font-weight: 700;
  border-bottom: 1.5px solid #ffd4d7;
}

.fork-fallback a:hover {
  border-bottom-color: var(--red);
}

/* ---- 5. Business page --------------------------------------------------- */

/* Text-led hero used by sub-pages (no curved pattern panel). */
.page-hero {
  max-width: 760px;
  padding: 50px 0 44px;
}

.page-hero .hero-text {
  color: var(--muted);
}

.belief-line {
  margin: 22px 0 0;
  color: var(--red-dark);
  font-weight: 800;
  font-size: 1.1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

/* How it works */
.how-it-works {
  padding: 78px 0;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.step {
  padding: 30px;
}

.step-number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 22px;
  border-radius: 999px;
  color: var(--red-dark);
  background: #fff0f1;
  font-weight: 850;
  font-size: 1.1rem;
}

.step h3 {
  margin-bottom: 10px;
  font-size: 1.25rem;
  letter-spacing: -.025em;
}

.step p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Benefits */
.benefits {
  padding: 78px 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.benefit-card {
  padding: 30px;
}

.benefit-card .icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border-radius: 18px;
  color: #fff;
  background: var(--red);
}

.benefit-card .icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit-card h3 {
  margin-bottom: 10px;
  font-size: 1.25rem;
  letter-spacing: -.025em;
}

.benefit-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Who it's for */
.local {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 54px;
  margin: 72px 0 78px;
  padding: 48px;
  border-radius: calc(var(--radius) + 8px);
  background: linear-gradient(135deg, #fff4f5, #fff 55%);
  border: 1px solid #ffe1e4;
}

.local p:last-child {
  margin: 0;
  align-self: end;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.7;
}

/* Conversion band */
.cta-band {
  margin: 0 0 78px;
  padding: 56px 48px;
  border-radius: calc(var(--radius) + 8px);
  background-color: var(--red);
  color: #fff;
  text-align: center;
}

.cta-band h2 {
  max-width: 20ch;
  margin: 0 auto 14px;
  color: #fff;
}

.cta-band p {
  max-width: 48ch;
  margin: 0 auto 30px;
  color: rgba(255, 255, 255, .92);
  font-size: 1.1rem;
  line-height: 1.6;
}

.cta-band .btn-primary {
  background: #fff;
  color: var(--red-dark);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

.cta-band .btn-primary:hover {
  background: #fff0f1;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
}

/* Cross-path wayfinding back to the other journeys */
.cross-paths {
  margin: 0 0 8px;
  padding: 26px 0 4px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.cross-paths a {
  color: var(--red-dark);
  font-weight: 700;
  border-bottom: 1.5px solid #ffd4d7;
}

.cross-paths a:hover {
  border-bottom-color: var(--red);
}

/* ---- Partner & Philosophy: narrative argument layout ------------------- */

.argument,
.partner-block {
  padding: 52px 0;
  border-top: 1px solid var(--line);
}

.argument {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 30px 56px;
  align-items: start;
}

.argument h2 {
  font-size: clamp(1.55rem, 3.3vw, 2.25rem);
}

.argument-body p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.7;
}

.argument-body p:last-child {
  margin-bottom: 0;
}

.partner-fits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 30px;
}

.fit {
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow);
}

.fit h3 {
  margin-bottom: 8px;
  font-size: 1.16rem;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.fit p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.cta-band .cta-secondary {
  max-width: none;
  margin: 18px 0 0;
  font-size: .98rem;
}

.cta-band .cta-secondary a {
  color: #fff;
  font-weight: 700;
  border-bottom: 1.5px solid rgba(255, 255, 255, .5);
}

.cta-band .cta-secondary a:hover {
  border-bottom-color: #fff;
}

/* ---- 6. Responsive ------------------------------------------------------ */

@media (max-width: 980px) {
  .site-header,
  .site-footer,
  main {
    width: min(100% - 32px, 900px);
  }

  .hero {
    grid-template-columns: 1fr .82fr;
    gap: 28px;
    min-height: 520px;
    padding: 34px 0 54px;
  }

  .hero-copy {
    max-width: 520px;
    padding-right: 12px;
  }

  .hero-art {
    min-height: 480px;
  }

  .pattern-panel {
    inset: 0 -130px 0 auto;
    width: min(640px, 150%);
    filter: drop-shadow(0 14px 32px rgba(227, 24, 32, .10));
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .desktop-only {
    display: none;
  }

  .partner-strip {
    gap: 22px;
    padding: 24px 28px;
  }
}

@media (max-width: 760px) {
  .site-header,
  .site-footer,
  main {
    width: min(100% - 28px, 680px);
  }

  .site-header {
    min-height: 78px;
  }

  .logo-icon-text {
    height: 38px;
  }

  .launch-pill {
    display: none;
  }

  .doors {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .fork {
    padding: 30px 0 72px;
  }

  .partner-strip {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 26px;
  }

  .partner-link {
    justify-self: start;
  }

  .site-footer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "logo"
      "nav"
      "meta";
    gap: 20px;
  }

  .footer-nav {
    justify-self: start;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .how-it-works,
  .benefits {
    padding: 58px 0;
  }

  .local {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 30px;
    margin-bottom: 58px;
  }

  .cta-band {
    padding: 44px 28px;
    margin-bottom: 58px;
  }

  .ribbon {
    height: 76px;
  }

  .argument {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 40px 0;
  }

  .partner-block {
    padding: 40px 0;
  }

  .partner-fits {
    grid-template-columns: 1fr;
    margin-top: 22px;
  }
}

@media (max-width: 700px) and (orientation: portrait) {
  .mobile-band {
    display: block;
    height: 150px;
    width: 100vw;
    margin: 0 0 10px calc(50% - 50vw);
    background: var(--red) url("../assets/revilicious-pattern-on-red.svg") center / cover no-repeat;
    border-radius: 0 0 50% 50% / 0 0 60px 60px;
    box-shadow: 0 24px 44px rgba(227, 24, 32, .16);
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding-top: 28px;
    padding-bottom: 48px;
  }

  .hero-copy {
    max-width: 100%;
    padding-right: 0;
  }

  .hero-art {
    display: none;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .optional-card {
    display: none;
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: clamp(2.4rem, 11.5vw, 3.8rem);
  }

  .door,
  .step,
  .benefit-card {
    padding: 24px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-meta {
    flex-direction: column;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .door,
  .door-cta,
  .partner-link,
  .cta-arrow,
  .btn-primary {
    transition: none;
  }
}