@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/brand/fonts/inter-latin-var.woff2') format('woff2-variations');
}

:root {
  color-scheme: dark;
  --night: #0d0f12;
  --blue: #0e1620;
  --brand: #ff6a00;
  --brand-hover: #ff8a00;
  --brand-deep: #e55f00;
  --brand-on-light: #af3c00;
  --live: #5fb87a;
  --live-on-light: #257a41;
  --next: #2fbf5f;
  --next-hover: #27a851;
  --prestige: #d4af37;
  --prestige-deep: #b8902a;
  --prestige-on-light: #7b5f1f;
  --warning: #d8962e;
  --error: #e17c78;
  --danger-fill: #b73330;
  --info: #77c8ed;
  --paper: #f4f1ea;
  --ink: #cbd3dd;
  --muted: #8a93a0;
  --line: #242c35;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: linear-gradient(145deg, var(--night), var(--blue)); color: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; line-height: 1.7; }
a { color: inherit; text-decoration: none; }

.bar { min-height: 34px; padding: 8px 20px; text-align: center; background: var(--blue); border-bottom: 1px solid rgba(255,106,0,.16); color: var(--muted); font-size: 11px; font-weight: 720; letter-spacing: .14em; }
.bar a { color: var(--brand); margin-left: 10px; }
.header { height: 88px; max-width: 1220px; margin: auto; padding: 0 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; border-bottom: 1px solid rgba(203,211,221,.08); }
.logo { min-width: 0; }
.logo img { width: 233px; max-width: 100%; height: auto; }
.nav { display: flex; gap: 28px; color: var(--muted); font-size: 13px; font-weight: 600; }
.nav a:hover { color: var(--brand); }
.header .cta { justify-self: end; }
.mobile-menu { display: none; position: relative; }
.mobile-menu summary { min-width: 44px; min-height: 44px; padding: 0 12px; display: grid; place-items: center; border: 1px solid #3a424c; border-radius: 11px; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 750; list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu nav { position: absolute; z-index: 20; top: calc(100% + 9px); right: 0; min-width: 220px; padding: 10px; display: flex; flex-direction: column; border: 1px solid #303842; border-radius: 15px; background: #0d1117; box-shadow: 0 22px 60px rgba(0,0,0,.58); }
.mobile-menu nav a { min-height: 44px; padding: 0 12px; display: flex; align-items: center; border-bottom: 1px solid #222a33; color: var(--ink); font-size: 13px; }
.mobile-menu nav a:last-child { border-bottom: 0; }
.mobile-menu nav a:hover, .mobile-menu nav a:focus-visible { color: var(--brand); }
.cta, .cta-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 11px; font-size: 13px; font-weight: 750; transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.cta { background: var(--brand); color: var(--night); }
.cta:hover { background: var(--brand-hover); transform: translateY(-1px); }
.cta-next { background: var(--next); color: var(--night); }
.cta-next:hover { background: var(--next-hover); }
.cta-ghost { border: 1px solid #3a424c; color: var(--ink); }
.cta-ghost:hover { border-color: var(--brand); color: var(--paper); }
.cta:focus-visible, .cta-ghost:focus-visible, .nav a:focus-visible, details.faq summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.hero { min-height: 660px; margin: 0; padding: 125px max(28px, calc((100vw - 1160px) / 2)) 115px; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero:before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('/brand/first-light/desktop.webp') center bottom / cover no-repeat; }
.hero:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,10,14,.95), rgba(7,10,14,.63) 58%, rgba(7,10,14,.38)), linear-gradient(0deg, rgba(7,10,14,.78), transparent 42%); }
.kicker { color: var(--prestige); font-size: 12px; font-weight: 760; letter-spacing: .18em; text-transform: uppercase; }
h1 { max-width: 1000px; margin: 25px 0 30px; font-size: clamp(3.2rem, 6.2vw, 6.2rem); font-weight: 680; line-height: .96; letter-spacing: -.045em; text-wrap: balance; }
h1 em, h2 em { color: inherit; font: inherit; }
.earned-word { color: var(--prestige); font: inherit; }
.lede { max-width: 740px; margin: 0; color: var(--ink); font-size: clamp(1rem, 1.6vw, 1.25rem); text-shadow: 0 2px 16px rgba(0,0,0,.9); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

.intro-band { border-block: 1px solid var(--line); background: var(--night); }
.intro-grid, .sections, .footer-inner { max-width: 1160px; margin: auto; }
.intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.intro-grid > div { padding: 30px; border-right: 1px solid var(--line); }
.intro-grid > div:last-child { border-right: 0; }
.intro-grid b { display: block; color: var(--brand); font: 720 11px Inter, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.intro-grid span { display: block; margin-top: 8px; color: var(--ink); font-size: 14px; font-weight: 700; }

.sections { padding: 80px 28px 120px; }
.section { display: grid; grid-template-columns: 280px 1fr; gap: 7vw; padding: 72px 0; border-bottom: 1px solid var(--line); }
.section:last-child { border-bottom: 0; }
.section .num { color: var(--prestige); font: 720 12px Inter, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .15em; }
.section h2 { margin: 0 0 20px; max-width: 730px; font-size: clamp(2rem, 4vw, 4.4rem); font-weight: 680; line-height: 1; letter-spacing: -.045em; }
.section p { max-width: 720px; color: var(--ink); }
.section ul { max-width: 720px; margin: 24px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.section li { padding: 15px 17px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.section li:before { content: "✓"; color: var(--live); margin-right: 9px; font-weight: 900; }

.principle { padding: 120px 28px; text-align: center; background: var(--night); border-block: 1px solid var(--line); }
.principle h2 { max-width: 940px; margin: 0 auto; color: var(--paper); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(2.4rem, 5vw, 5.7rem); font-weight: 680; line-height: 1.02; letter-spacing: -.045em; }
.principle p { color: var(--muted); margin: 25px auto 0; max-width: 640px; }
.closing { min-height: 600px; padding: 90px 24px; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.closing:before { content: ""; position: absolute; inset: 0; z-index: -2; background: url('/brand/first-light/desktop.webp') center bottom / cover no-repeat; }
.closing:after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,10,14,.7), rgba(7,10,14,.92)); }
.closing h2 { font-size: clamp(3rem, 6vw, 6rem); font-weight: 680; line-height: .95; letter-spacing: -.045em; margin: 20px 0 30px; }

.footer { padding: 75px 28px 28px; border-top: 1px solid var(--line); background: var(--night); }
.footer-inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 70px; }
.footer-brand img { width: 248px; max-width: 100%; height: auto; }
.footer-brand p { color: var(--muted); font-size: 13px; max-width: 350px; }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.footer-nav div { display: flex; flex-direction: column; gap: 9px; }
.footer-nav b { color: var(--prestige); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 7px; }
.footer-nav a { color: var(--muted); font-size: 13px; }
.footer-nav a:hover { color: var(--paper); }
.fine { max-width: 1160px; margin: 55px auto 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); opacity: .72; font-size: 11px; }

details.faq { max-width: 760px; border-top: 1px solid var(--line); padding: 15px 0; }
details.faq:last-child { border-bottom: 1px solid var(--line); }
/* 44px to tap on a phone (the 375px pass after the third site-audit run found 31px). The padding
   moved from the details to the summary, so the spacing a reader sees is unchanged. */
details.faq summary { padding: 7px 0; cursor: pointer; color: var(--paper); font-size: 18px; font-weight: 750; }
.faq-more a { min-height: 44px; display: inline-flex; align-items: center; }
details.faq p { color: var(--muted); }
.contact-card { max-width: 760px; padding: 30px; border: 1px solid rgba(255,106,0,.3); background: rgba(24,31,35,.75); border-radius: 18px; }
.contact-card a.email { display: block; color: var(--brand); font-size: clamp(1.5rem, 3vw, 2.7rem); font-weight: 720; letter-spacing: -.035em; }
.contact-card p { color: var(--muted); }

/* Six nav items since Pricing joined them on 2026-09-29. Between the phone menu and a wide
   desktop, the centre column would otherwise push the call to action off the right edge. */
@media (max-width: 1080px) {
  .nav { gap: 18px; }
}
@media (max-width: 900px) {
  .nav { gap: 13px; font-size: 12px; }
}

@media (max-width: 760px) {
  .bar { font-size: 10px; letter-spacing: .08em; }
  .header { height: 74px; padding: 0 13px; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
  .logo img { width: 168px; max-width: 100%; height: auto; }
  .nav { display: none; }
  .mobile-menu { display: block; }
  .header .cta { min-height: 42px; padding: 0 15px; font-size: 11px; }
  .hero { min-height: 640px; padding: 85px 21px; }
  .hero:before { background-image: url('/brand/first-light/mobile.webp'); }
  .hero:after { background: linear-gradient(0deg, rgba(7,10,14,.82), rgba(7,10,14,.42) 50%, rgba(7,10,14,.74)); }
  .hero h1 { font-size: clamp(2.65rem, 10.5vw, 3.75rem); }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-grid > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .section { grid-template-columns: 1fr; gap: 20px; padding: 55px 0; }
  .section ul { grid-template-columns: 1fr; }
  .sections { padding: 45px 21px 85px; }
  .principle { padding: 80px 21px; }
  .closing:before { background-image: url('/brand/first-light/mobile.webp'); }
  .footer { padding: 60px 21px 25px; }
  .footer-inner { grid-template-columns: 1fr; gap: 45px; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .fine { margin-top: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* About: product philosophy first, founder context only where the origin helps. */
.about-hero .lede { max-width: 680px; }

.about-thesis {
  padding: 110px max(28px, calc((100vw - 1160px) / 2));
  background: var(--paper);
  color: #15191e;
  border-block: 1px solid #d6d3cc;
}
.about-thesis .kicker { color: #96520d; }
.about-thesis h2 {
  max-width: 980px;
  margin: 22px 0 30px;
  font-size: clamp(2.5rem, 5vw, 5.4rem);
  font-weight: 680;
  line-height: .99;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.about-thesis > p:last-child {
  max-width: 760px;
  margin: 0;
  color: #505861;
  font-size: 1.04rem;
  line-height: 1.8;
}

.about-doctrine {
  padding: 120px max(28px, calc((100vw - 1160px) / 2));
  background: var(--night);
}
.about-doctrine-head {
  display: grid;
  grid-template-columns: .75fr 1.5fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 64px;
}
.about-doctrine-head h2 {
  margin: 0;
  font-size: clamp(2.5rem, 4.4vw, 4.9rem);
  font-weight: 680;
  line-height: 1;
  letter-spacing: -.045em;
}
.about-doctrine-head > p:last-child { margin: 0; color: var(--ink); }
.about-law-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.about-law-grid article {
  min-height: 290px;
  padding: 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #0b1016;
}
.about-law-grid b { color: var(--brand); font-size: .72rem; letter-spacing: .14em; }
.about-law-grid h3 {
  max-width: 430px;
  margin: 72px 0 14px;
  color: var(--paper);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}
.about-law-grid p { max-width: 470px; margin: 0; color: var(--muted); }

.about-origin {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  gap: clamp(54px, 8vw, 120px);
  align-items: center;
  padding: 120px max(28px, calc((100vw - 1160px) / 2));
  background: var(--blue);
  border-block: 1px solid var(--line);
}
.about-origin-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid #38414a;
  border-radius: 22px;
  background: #080b0f;
  box-shadow: 0 35px 90px rgba(0, 0, 0, .5);
}
.about-origin-photo picture,
.about-origin-photo img { width: 100%; height: 100%; display: block; }
.about-origin-photo img { object-fit: cover; object-position: center; }
.about-origin-photo::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(0deg, rgba(7, 10, 14, .96), transparent);
  pointer-events: none;
}
.about-origin-photo figcaption {
  position: absolute;
  z-index: 1;
  inset: auto 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.about-origin-photo figcaption b {
  color: var(--paper);
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.about-origin-photo figcaption span { color: var(--ink); font-size: .9rem; }
.about-origin-copy h2 {
  margin: 24px 0 28px;
  font-size: clamp(2.6rem, 4.7vw, 5.2rem);
  font-weight: 680;
  line-height: .98;
  letter-spacing: -.045em;
}
.about-origin-copy > p:not(.kicker) {
  max-width: 680px;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.8;
}
.about-bio { margin-top: 36px; padding-top: 28px; border-top: 1px solid #36404a; }
.about-bio > div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.about-bio b { color: var(--paper); font-size: 1rem; }
.about-bio span { color: var(--prestige); font-size: .72rem; font-weight: 760; letter-spacing: .1em; text-transform: uppercase; }
.about-bio-link { min-height: 44px; display: inline-flex; align-items: center; margin-left: auto; color: var(--brand); font-size: .82rem; font-weight: 720; }
.about-bio-link:hover, .about-bio-link:focus-visible { color: var(--brand-hover); }
.about-bio p { max-width: 660px; margin: 14px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.72; }
.about-open { margin-top: 28px; padding-top: 24px; border-top: 1px solid #36404a; }
.about-open b { color: var(--prestige); font-size: .72rem; font-weight: 760; letter-spacing: .14em; }
.about-open p { max-width: 660px; margin: 10px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.72; }
.about-open-links { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 0 22px; }
.about-open-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--brand); font-size: .82rem; font-weight: 720; }
.about-open-links a:hover, .about-open-links a:focus-visible { color: var(--brand-hover); }

.about-standard {
  padding: 120px max(28px, calc((100vw - 1160px) / 2));
  background: var(--night);
  text-align: center;
}
.about-standard h2 {
  max-width: 970px;
  margin: 24px auto 34px;
  font-size: clamp(2.5rem, 5vw, 5.3rem);
  font-weight: 680;
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

@media (max-width: 900px) {
  .about-thesis,
  .about-doctrine,
  .about-origin,
  .about-standard { padding: 82px 22px; }
  .about-doctrine-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 42px; }
  .about-law-grid { grid-template-columns: 1fr; }
  .about-law-grid article { min-height: 230px; padding: 26px; }
  .about-law-grid h3 { margin-top: 48px; }
  .about-origin { grid-template-columns: 1fr; gap: 48px; }
  .about-origin-photo { width: min(100%, 560px); justify-self: center; }
}

@media (max-width: 520px) {
  .about-thesis h2,
  .about-doctrine-head h2,
  .about-origin-copy h2,
  .about-standard h2 { font-size: 2.45rem; }
  .about-origin-photo { border-radius: 16px; }
  .about-origin-photo figcaption { inset: auto 22px 22px; }
}

/* Install link in the static-page nav, menu and footer. Added 2026-09-09: rackiq.ai/app
   was live and orphaned, with no link to it on any surface, so every visitor who wanted
   the app had nowhere to go. Brand orange so it reads as the action in a row of grey
   navigation links, not as one more page. */
.nav-get-app{color:#ff6a00;font-weight:750}
.nav-get-app:hover{color:#ff8a00}