/* PrayerLane marketing stylesheet.
   Brand system: docs/brand.md. Road vernacular, flat surfaces, no gradients.
   Mobile first; every breakpoint below is a min-width. */

:root {
  --asphalt:   #2A2A2E;
  --blacktop:  #1D1D20;
  --concrete:  #C9CBCE;
  --line:      #FAFAF7;
  /* Lane Yellow is taken from the logo artwork, which is the colour of record.
     Anything drawn in CSS has to match the mark, not the other way round. */
  --yellow:    #F2AB02;
  --green:     #006747;
  --green-dk:  #00543A;
  --slate:     #55575C;
  --caution:   #E8710A;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sign: "Overpass", var(--sans);

  --page:  1120px;
  --prose: 44rem;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--asphalt);
  background: var(--line);
}

h1, h2, h3, h4, .sign-type {
  font-family: var(--sign);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.1rem, 7.2vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 5.2vw, 2.5rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.005em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); }
a:hover { color: var(--green-dk); }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
  border-radius: 2px;
}

img, svg { max-width: 100%; }

/* ---------- layout ---------- */

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 1.25rem; }
.prose { max-width: var(--prose); }

.band { padding: 3.5rem 0; }
.band--dark { background: var(--asphalt); color: var(--line); }
.band--deep { background: var(--blacktop); color: var(--line); }
.band--light { background: var(--line); color: var(--asphalt); }
.band--paper { background: #F1F1EE; color: var(--asphalt); }

.band--dark a, .band--deep a { color: var(--yellow); }
.band--dark h2, .band--deep h2 { color: var(--line); }

@media (min-width: 48rem) { .band { padding: 5rem 0; } }

.center { text-align: center; }
.center .prose { margin-left: auto; margin-right: auto; }

/* ---------- lane motifs ---------- */

.lane-rule {
  border: 0;
  border-top: 4px dashed var(--yellow);
  width: 132px;
  margin: 1.5rem 0;
}
.center .lane-rule { margin-left: auto; margin-right: auto; }

/* Full-width lane line between major sections.

   It sits inside the dark band and slightly in from the edge, never on the
   seam between two sections. A lane line is paint on a road: on the boundary
   it reads as a border between two panels, but a few pixels onto the asphalt
   it reads as a marking on the surface, which is the whole point of the motif.

   Deliberately a dashed border rather than a repeating background:
   docs/brand.md rules out gradients, and a grep for "gradient" in this file
   should come back empty. */
.lane-edge { position: relative; }
.lane-edge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 5px dashed var(--yellow);
}
.lane-edge--bottom::after { bottom: 10px; }
.lane-edge--top::after { top: 10px; }

.eyebrow {
  font-family: var(--sign);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 .75rem;
}
.band--dark .eyebrow, .band--deep .eyebrow { color: var(--yellow); }

.lede { font-size: 1.1875rem; line-height: 1.6; }
.band--dark .lede, .band--deep .lede { color: var(--concrete); }

.fineprint { font-size: .9375rem; color: var(--slate); }
.band--dark .fineprint, .band--deep .fineprint { color: var(--concrete); }

/* ---------- buttons (highway guide signs) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sign);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  padding: .95rem 1.6rem;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}

.btn--primary {
  background: var(--green);
  color: var(--line);
  border-color: var(--green);
  box-shadow: inset 0 0 0 2px rgba(250, 250, 247, .55);
}
.btn--primary:hover { background: var(--green-dk); border-color: var(--green-dk); color: var(--line); }

.btn--ghost {
  background: transparent;
  color: var(--line);
  border-color: var(--concrete);
}
.btn--ghost:hover { border-color: var(--yellow); color: var(--yellow); }

.btn--ghost-dark {
  background: transparent;
  color: var(--asphalt);
  border-color: var(--slate);
}
.btn--ghost-dark:hover { border-color: var(--green); color: var(--green); }

.btn--wide { width: 100%; }

.btn-row { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 30rem) {
  .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .btn--wide { width: auto; }
}
.center .btn-row { justify-content: center; }

/* ---------- site header ---------- */

.site-head {
  background: var(--asphalt);
  color: var(--line);
  border-bottom: 1px solid rgba(250, 250, 247, .12);
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

/* The logo carries its own lane marks, so nothing is drawn around it. */
.wordmark { display: inline-block; line-height: 0; }
.wordmark img { display: block; width: auto; height: 32px; }
@media (min-width: 48rem) { .wordmark img { height: 38px; } }

/* The section links collapse on small screens, but the call to action never
   does: a phone visitor still gets one tap to the waitlist. */
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a:not(.btn) { display: none; }
@media (min-width: 56rem) { .site-nav a:not(.btn) { display: inline; } }

.site-nav a {
  font-family: var(--sign);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--concrete);
  text-decoration: none;
}
.site-nav a:hover { color: var(--yellow); }

.site-nav .btn { padding: .6rem 1.1rem; font-size: .9375rem; color: var(--line); }
.site-nav .btn:hover { color: var(--line); }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
  background: var(--yellow);
  color: var(--asphalt);
  padding: .6rem 1rem;
  border-radius: 6px;
  font-weight: 600;
}

/* ---------- hero ---------- */

.hero { padding: 3.25rem 0 3.75rem; }
@media (min-width: 48rem) { .hero { padding: 5.5rem 0 5rem; } }

.hero h1 { max-width: 18ch; }
.hero .lede { max-width: 40rem; font-size: 1.25rem; }

.hero__promise {
  margin-top: 2.25rem;
  display: inline-block;
  max-width: 34rem;
  font-size: .9375rem;
  color: var(--concrete);
  border-left: 4px solid var(--yellow);
  padding-left: .85rem;
  text-align: left;
}

/* ---------- guide-sign panels ---------- */

.sign {
  background: var(--green);
  color: var(--line);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: inset 0 0 0 2px rgba(250, 250, 247, .55);
}
.sign h3 { color: var(--line); }
.sign p { color: rgba(250, 250, 247, .9); }

.panel {
  background: #fff;
  border: 1px solid var(--concrete);
  border-radius: 14px;
  padding: 1.5rem;
}
.panel h3 { color: var(--asphalt); }

.panel--dark {
  background: rgba(250, 250, 247, .05);
  border-color: rgba(250, 250, 247, .18);
  color: var(--line);
}
.panel--dark h3 { color: var(--line); }
.panel--dark p { color: var(--concrete); }

.grid { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 40rem) { .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 40rem) { .grid--4 { grid-template-columns: 1fr 1fr; } }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow);
}
.checklist li:last-child { margin-bottom: 0; }

.panel--dead .checklist li::before { background: var(--slate); }

/* ---------- lane illustration ---------- */

/* The artwork's own background is #202125, within four units of Blacktop, so
   it sits on the deep band with no frame, no padding and no visible edge. Put
   it on any other surface and you will see the seam. */
.lane-figure { margin: 2.5rem 0 0; }

/* Sideways scroll on a phone rather than shrinking the signage past the point
   of legibility. The floor is the narrowest width the lettering still reads
   at, not the viewport. */
.lane-figure__scroll { overflow-x: auto; }
.lane-figure img { display: block; min-width: 680px; width: 100%; height: auto; }

.lane-figure figcaption {
  margin-top: 1rem;
  font-size: .9375rem;
  color: var(--concrete);
  max-width: var(--prose);
}

/* Small roadside label above a card heading. */
.step {
  font-family: var(--sign);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--yellow);
  margin: 0 0 .5rem;
}

/* Lane Yellow is a paint colour: it reads on asphalt and washes out on paper.
   On the light bands the label takes the same green the eyebrow does. */
.band--light .step, .band--paper .step { color: var(--green); }

/* ---------- demo ---------- */

.demo-notice {
  border-left: 4px solid var(--yellow);
  background: rgba(245, 179, 1, .08);
  padding: .9rem 1.1rem;
  border-radius: 0 8px 8px 0;
  font-size: .9375rem;
  color: var(--concrete);
  margin-bottom: 1.75rem;
}
.demo-notice strong { color: var(--line); }

.swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.swatches__label {
  font-family: var(--sign);
  font-weight: 600;
  font-size: .875rem;
  color: var(--concrete);
  margin-right: .3rem;
}
.swatch {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid rgba(250, 250, 247, .35);
  cursor: pointer;
  padding: 0;
}
.swatch[aria-pressed="true"] { border-color: var(--yellow); border-width: 3px; }

/* Demo prayer form. Deliberately neutral so the accent variable does the
   talking: this is what a tenant's themed on-ramp looks like. */
.pl-form {
  --accent: #006747;
  --accent-dk: #00543A;
  background: #fff;
  color: var(--asphalt);
  border-radius: 14px;
  padding: 1.5rem;
  max-width: 40rem;
}
@media (min-width: 40rem) { .pl-form { padding: 2rem; } }

.pl-form__head { border-bottom: 1px solid var(--concrete); padding-bottom: 1rem; margin-bottom: 1.25rem; }
.pl-form__head h3 { margin-bottom: .2rem; }
.pl-form__head p { font-size: .9375rem; color: var(--slate); margin: 0; }

.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-family: var(--sign);
  font-weight: 600;
  font-size: .875rem;
  margin-bottom: .4rem;
}
.field input[type="text"],
.field input[type="email"],
.field textarea,
.field select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: .7rem .85rem;
  color: var(--asphalt);
  background: #fff;
  border: 2px solid var(--concrete);
  border-radius: 8px;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent, var(--green));
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}
.field .hint { font-size: .8125rem; color: var(--slate); margin: .35rem 0 0; }
.req { color: var(--caution); }

.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.pl-form .btn--submit {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  width: 100%;
  box-shadow: none;
}
.pl-form .btn--submit:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.pl-form .btn--submit:disabled { opacity: .65; cursor: not-allowed; }

.form-msg {
  display: none;
  border-radius: 8px;
  padding: .8rem 1rem;
  font-size: .9375rem;
  margin-bottom: 1.1rem;
}
.form-msg--error { display: block; background: #FDF0E4; border: 1px solid var(--caution); color: #8A4106; }
.form-msg--ok { display: block; background: #E4EFEA; border: 1px solid var(--green); color: var(--green-dk); }

.honeypot { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }

/* ---------- pricing ---------- */

.toggle {
  display: inline-flex;
  border: 2px solid var(--concrete);
  border-radius: 999px;
  padding: 3px;
  background: #fff;
  margin-bottom: 2rem;
}
.toggle button {
  font-family: var(--sign);
  font-weight: 600;
  font-size: .9375rem;
  border: 0;
  background: transparent;
  color: var(--slate);
  padding: .5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
}
.toggle button[aria-pressed="true"] { background: var(--green); color: var(--line); }

.tier {
  background: #fff;
  border: 1px solid var(--concrete);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.tier--featured { border: 2px solid var(--green); }

/* Mile marker: a small vertical roadside plate. */
.marker {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: .35rem .5rem;
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 6px;
  font-family: var(--sign);
  font-weight: 700;
  line-height: 1;
  color: var(--green);
  margin-bottom: 1rem;
}
.marker span:first-child { font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; }
.marker span:last-child { font-size: 1.125rem; margin-top: .15rem; }

.tier__price {
  font-family: var(--sign);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.tier__per { font-family: var(--sans); font-weight: 400; font-size: 1rem; color: var(--slate); }
.tier__billed { font-size: .875rem; color: var(--slate); margin: .5rem 0 1.25rem; min-height: 1.4em; }
.tier ul.checklist { margin-bottom: 1.5rem; }
.tier .btn { margin-top: auto; }

.tier--featured .marker { background: var(--green); color: var(--line); border-color: var(--green); }

/* ---------- faq ---------- */

.faq details {
  border-bottom: 1px solid var(--concrete);
  padding: 1.1rem 0;
}
.faq details:first-of-type { border-top: 1px solid var(--concrete); }
.faq summary {
  font-family: var(--sign);
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow);
  transition: transform .15s;
}
.faq details[open] summary::after { transform: rotate(90deg); }
.faq details > div { padding-top: .75rem; max-width: var(--prose); }

/* ---------- waitlist ---------- */

.waitlist-card {
  background: rgba(250, 250, 247, .05);
  border: 1px solid rgba(250, 250, 247, .18);
  border-radius: 14px;
  padding: 1.5rem;
}
@media (min-width: 40rem) { .waitlist-card { padding: 2rem; } }

.waitlist-card label { color: var(--line); }
.waitlist-card .hint { color: var(--concrete); }
.waitlist-card input, .waitlist-card select {
  background: var(--line);
  border-color: transparent;
}
.waitlist-card input:focus, .waitlist-card select:focus { border-color: var(--yellow); }

/* ---------- footer ---------- */

.site-foot {
  background: var(--blacktop);
  color: var(--concrete);
  padding: 2.75rem 0 2rem;
  font-size: .9375rem;
}
.site-foot a { color: var(--concrete); text-decoration: none; }
.site-foot a:hover { color: var(--yellow); }

.foot-grid { display: grid; gap: 1.75rem; }
@media (min-width: 48rem) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.foot-grid h4 {
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--line);
  margin-bottom: .75rem;
}

.foot-brand { margin-bottom: 1.1rem; line-height: 0; }
.foot-brand img { display: block; width: auto; height: 40px; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: .5rem; }

.foot-legal {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 250, 247, .12);
  font-size: .8125rem;
  color: var(--slate);
}
.foot-legal a { color: var(--slate); }

/* ---------- legal / document pages ---------- */

.doc { padding: 2.75rem 0 4rem; }
.doc h2 { font-size: 1.4rem; margin-top: 2.25rem; }
.doc h3 { font-size: 1.0625rem; margin-top: 1.5rem; }
.doc ul { padding-left: 1.25rem; }
.doc li { margin-bottom: .5rem; }
.doc .updated { font-size: .9375rem; color: var(--slate); }