/* ══ THE AUDIT PASS (17 Oct 2026, PREVIEW) ═══════════════════════════════════
   Daniel: "use a skill for accessibility on the entire site and the design
   critique/marketing/brand critique on the hero", then "Fix all".
   Loaded last on index.html. js/polish.js runs the moving parts.
   WCAG 2.1 AA: skip link, focus ring, the closed menu out of the Tab order,
   a label on the newsletter email, nothing that loops forever on its own,
   chapter labels readable on any sheet, bigger tap areas on small links.
   Hero (design and brand review): the app screens show on the first phone
   screen, one Apply button at a time, a lighter "See how it works", violet
   (not pink) on the label dot, and an "Illustration" note under any screen
   that carries a photo (stock models, not members). */

/* ── screen reader only ── */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── skip link: off screen until you Tab to it ── */
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 20px; border-radius: 999px;
  background: #fff; color: #0d0b14; font-weight: 700; font-size: 15px; text-decoration: none;
  transform: translateY(-160%); transition: transform .25s ease; }
.skip:focus { transform: none; }
#main:focus { outline: none; }

/* ── one clear focus ring everywhere (violet reads on ink and on warm white) ── */
:focus-visible { outline: 3px solid #8b5cf6 !important; outline-offset: 3px; }
.hx :focus-visible, .rule :focus-visible, .events :focus-visible, .cta :focus-visible,
.mobile-menu :focus-visible, .pill :focus-visible, .plans .pc :focus-visible, .manifesto :focus-visible { outline-color: #c4b0ff !important; }
.interest-form input:focus-visible { outline-offset: 2px; }
.postscript .interest-form input::placeholder { color: #6e6888; }

/* ── the closed menu leaves the Tab order (it was invisible but focusable) ── */
.mobile-menu { visibility: hidden; transition: opacity .6s var(--br-ease, ease), visibility 0s linear .6s; }
.mobile-menu.open { visibility: visible; transition: opacity .6s var(--br-ease, ease), visibility 0s; }

/* ── nothing loops forever on its own ── */
/* the hero shine: one pass, then rests */
.hx h1 em { animation: brShine 4.5s ease-in-out .9s 1 both; }
/* the card's edge light: two sweeps when the card comes into view (4.8s), then rests */
@keyframes pcSweep { from { --pc-a: 200deg; } to { --pc-a: 560deg; } }
.plans .pc::before { animation: none; --pc-a: 200deg; }
.plans .pc.lit::before { animation: pcSweep 2.4s cubic-bezier(.45, 0, .2, 1) 2; }
@media (prefers-reduced-motion: reduce) { .plans .pc.lit::before, .hx h1 em { animation: none; } }

/* the pause button on reels that play by themselves */
.film-hold { position: absolute; right: -18px; top: 24%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(13, 11, 20, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); opacity: 0; transition: opacity .4s ease; }
.film.live .film-hold { opacity: 1; }
.film-hold svg { width: 16px; height: 16px; }
.film-hold .ps { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.film-hold .pl { fill: currentColor; display: none; }
.film.held .film-hold .ps { display: none; }
.film.held .film-hold .pl { display: block; }

/* ── event chips: pressed state reads without color alone ── */
.chip[aria-pressed="true"] { font-weight: 700; }

/* ── bigger tap areas on small text links (no layout change: inline padding) ── */
.nav .nav-links a, .nav .nl-right a:not(.btn), footer a:not(.btn), .nominate-line a { padding-block: 8px; }

/* ── the "Illustration" note ── */
.illus { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.hx .illus { position: relative; z-index: 5; width: 100vw; margin: 0 calc(50% - 50vw); padding: 14px 16px 2px; background: var(--t-ink2, #14122a); color: rgba(255, 255, 255, .62); }
.ch-card .illus { margin-top: 8px; font-size: 10.5px; color: rgba(13, 11, 20, .62); }

/* ── hero: violet dot, a lighter second link ── */
.hx-eyebrow i { background: #a78bfa; box-shadow: 0 0 0 4px rgba(167, 139, 250, .2); }
.hx .hx-link { font-weight: 500; color: rgba(255, 255, 255, .8); border-bottom-width: 1px; }

@media (max-width: 900px) {
  /* the app screens on the first phone screen */
  .hx-main { padding-top: 46px; }
  .hx h1 { margin-top: 18px; }
  .hx-sub { margin-top: 14px; max-width: 32ch; font-size: 17px; line-height: 1.45; text-wrap: balance; }
  .hx-ctas { margin-top: 20px; gap: 4px; }
  .hx-ctas .btn { min-height: 0; height: 58px; padding-top: 0; padding-bottom: 0; }
  .hx .hx-link { font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
  .hx-assure { margin-top: 2px; }
  .hx-stage { padding-top: 6px; }
  .fan { margin-top: 0; }

  /* chapter labels: a small dark glass chip, readable on every sheet */
  .chap { mix-blend-mode: normal; font-size: 12.5px; padding-left: 12px; padding-right: 12px; }
  .chap > span { padding: 6px 11px; border-radius: 999px; background: rgba(13, 11, 20, .58); color: #fff;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .chap > span:empty { display: none; }

  /* the pill: menu and logo only while the hero's Apply button is on screen */
  .pill-cta { max-width: 200px; overflow: hidden;
    transition: max-width .55s var(--g-ease, ease), padding .55s var(--g-ease, ease), opacity .35s ease, visibility 0s; }
  .pill.lite .pill-cta { max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; visibility: hidden;
    transition: max-width .55s var(--g-ease, ease), padding .55s var(--g-ease, ease), opacity .25s ease, visibility 0s linear .55s; }
  .pill.lite { gap: 0; }
  .pill.lite .pill-logo { padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pill-cta, .pill.lite .pill-cta { transition: none; } }

/* ── How it works: tap a step, watch it play (17 Oct, later) ──
   Like findmyplace.church's feature lists. Phone: the phone, then five
   numbered tabs with a bar that fills, then the open step's words.
   Desktop: the steps as a list on the left, the phone on the right. */
.hw { position: relative; display: grid; gap: 8px; justify-items: center; margin-top: 26px; padding-bottom: clamp(70px, 9vw, 120px); }
.hw-stage { position: relative; order: 2; width: min(84vw, 420px); }
.hw-side { order: 1; }
.hw-phone .film-how { width: 100%; aspect-ratio: 1080 / 1900; background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.hw-hold { position: absolute; top: 6%; right: -6px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(13, 11, 20, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -12px rgba(13, 11, 20, .6); }
.hw-hold svg { width: 16px; height: 16px; }
.hw-hold .ps { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.hw-hold .pl { fill: currentColor; display: none; }
.how.held .hw-hold .ps { display: none; }
.how.held .hw-hold .pl { display: block; }
.hw-side { width: 100%; max-width: 560px; text-align: center; }
.hw-hint { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 600; font-size: 13px; color: rgba(13, 11, 20, .7); }
.hw-hi { width: 22px; height: 22px; border-radius: 50%; background: var(--g-grad); position: relative; flex: none; }
.hw-hi::after { content: ""; position: absolute; left: 8px; top: 6px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.hw-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.hw-b { position: relative; min-height: 50px; border: 0; border-radius: 16px; cursor: pointer; overflow: hidden; font: inherit; color: var(--t-ink);
  background: rgba(13, 11, 20, .06); display: grid; place-items: center; padding: 0; transition: background .3s ease, color .3s ease; }
.hw-b .hw-n { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.hw-b .hw-tx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hw-b.on { background: var(--t-ink); color: #fff; }
.hw-bar { position: absolute; left: 10px; right: 10px; bottom: 7px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; opacity: 0; }
.hw-b.on .hw-bar { opacity: 1; }
.hw-bar i { position: absolute; inset: 0; display: block; background: linear-gradient(90deg, #b9a0ff, #e2a0e6); transform-origin: left; transform: scaleX(var(--p, 0)); }
.hw-now { margin: 12px auto 0; max-width: 36ch; }
.hw-now b { display: block; font-weight: 800; text-transform: uppercase; letter-spacing: -.045em; line-height: .95; font-size: clamp(1.5rem, 6.4vw, 2.2rem); color: var(--t-ink); }
.hw-now span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: rgba(13, 11, 20, .74); }
.hw .illus { margin: 8px 0 0; font-size: 10px; color: rgba(13, 11, 20, .6); }
.how.static .hw-hold { display: none; }

@media (min-width: 901px) {
  .hw { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: center; gap: clamp(40px, 6vw, 96px); max-width: 1080px; margin-left: auto; margin-right: auto; }
  .hw-stage { order: 2; width: 100%; }
  .hw-side { order: 1; text-align: left; max-width: 520px; justify-self: end; }
  .hw-list { grid-template-columns: 1fr; gap: 6px; }
  .hw-b { display: flex; align-items: flex-start; gap: 16px; text-align: left; padding: 18px 20px 18px 24px; min-height: 0; background: transparent; }
  .hw-hint { font-size: 14px; margin-bottom: 14px; }
  .hw-b:hover { background: rgba(13, 11, 20, .04); }
  .hw-b .hw-tx { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; flex: 1; }
  .hw-b .hw-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(13, 11, 20, .07); }
  .hw-t { display: block; font-weight: 700; font-size: 21px; letter-spacing: -.02em; color: rgba(13, 11, 20, .55); transition: color .25s ease; }
  .hw-d { display: none; margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: rgba(13, 11, 20, .72); }
  .hw-b.on { background: #fff; color: var(--t-ink); box-shadow: 0 18px 40px -26px rgba(23, 26, 58, .45), inset 0 0 0 1px rgba(13, 11, 20, .06); }
  .hw-b.on .hw-n { background: var(--g-grad); color: #fff; }
  .hw-b.on .hw-t { color: var(--t-ink); }
  .hw-b.on .hw-d { display: block; }
  .hw-bar { left: 0; right: auto; top: 18px; bottom: 18px; width: 3px; height: auto; background: rgba(13, 11, 20, .08); }
  .hw-bar i { background: linear-gradient(180deg, #6b2ac1, #a52fa8); transform-origin: top; transform: scaleY(var(--p, 0)); }
  .hw-now { display: none; }
}

/* ══ GOLDEN HOUR HERO (17 Oct 2026) ════════════════════════════════════════
   Daniel picked mockup A: "Golden hour!". A warm photo of two people instead
   of the dark purple. Phones: the photo fills the first screen and the words
   sit on its lower part over a soft ink fade. Desktop: words on the left, the
   photo as a tall rounded card on the right. The brand gradient is only on
   the button's arrow. */
.hx { background: #0d0b14; }
.hx::after { display: none; }
.hx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx h1 { color: #fff; }
.hx h1 em, .hx h1 em .wd > span { background: none !important; color: #f3e7d9 !important; -webkit-text-fill-color: #f3e7d9 !important; }
.hx h1 em { animation: none !important; }
.hx .hx-sub { color: rgba(255, 255, 255, .88); }
.hx .hx-assure { color: rgba(255, 255, 255, .7); }
.hx .hx-eyebrow { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; }
.hx-eyebrow i { background: #c4b0ff; box-shadow: none; }
.hx .btn-primary { background: #fff; color: #0d0b14; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); }
.hx .btn-primary:hover { background: #fff; }
.hx .btn-primary::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-4L15 10l-4.5 4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat, linear-gradient(100deg, #6b2ac1, #a52fa8); }
.hx .btn-primary:hover::after { background-color: transparent; }

@media (max-width: 900px) {
  /* the photo on top (the faces stay clear), the words rise out of its fade */
  .hx { position: relative; }
  .hx .hx-main { display: flex; flex-direction: column; padding: max(330px, 52svh) 0 0 !important; position: static; }
  .hx-photo { position: absolute; top: 0; left: 0; right: 0; height: max(330px, 52svh); z-index: 0; }
  .hx-photo img { object-position: 50% 25%; }
  .hx-photo::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13, 11, 20, .25) 0%, rgba(13, 11, 20, 0) 22%, rgba(13, 11, 20, 0) 55%, rgba(13, 11, 20, .75) 82%, #0d0b14 100%); }
  .hx .hx-copy { order: 1; position: relative; z-index: 1; margin-top: -86px; }
  .hx .hx-eyebrow { position: absolute; top: calc(14px + 86px - max(330px, 52svh)); left: 0; right: 0; width: max-content; margin: 0 auto; white-space: nowrap; }
  .hx h1 { margin-top: 0; font-size: clamp(2.7rem, 12.6vw, 3.3rem); }
  .hx .hx-sub { margin-top: 10px; }
  .hx-ctas { margin-top: 16px; }
  .hx .hx-link { display: none; }
  .hx .hx-assure { margin-top: 10px; padding-bottom: 26px; }
  /* the pill waits until the hero's own Apply button scrolls away */
  .pill.lite { transform: translate(-50%, 160%); opacity: 0; visibility: hidden; }
  .pill { transition: transform .6s var(--g-ease, ease), opacity .4s ease, visibility 0s; }
}
@media (min-width: 901px) {
  .hx .hx-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: center; gap: clamp(40px, 6vw, 90px);
    justify-items: start; text-align: left; padding-top: 130px; padding-bottom: 80px; max-width: 1180px; }
  .hx .hx-copy { margin: 0; max-width: 620px; }
  .hx .hx-eyebrow { margin: 0; }
  .hx .hx-sub { margin-left: 0; margin-right: 0; }
  .hx .hx-ctas { justify-content: flex-start; }
  .hx h1 { font-size: clamp(3.6rem, 6.4vw, 6.4rem); }
  .hx-photo { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 36px; overflow: hidden;
    box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); }
  .hx-photo img { object-position: 50% 30%; }
}

/* How it works on phones (17 Oct, Daniel: "I don't like how the phone got smaller"):
   the phone is big again (as it was in the Grail pass), and the steps, the bar
   and the words sit together in one glass card over its lower part. */
@media (max-width: 900px) {
  .hw { gap: 0; }
  .hw-stage { order: 1; width: min(80vw, 400px, calc((100svh - 120px) / 1.76)); }
  .hw-side { order: 2; position: relative; z-index: 4; width: calc(100% - 8px); max-width: 480px; margin-top: -96px;
    padding: 12px 12px 14px; border-radius: 28px; background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 30px 60px -30px rgba(23, 26, 58, .5); }
  .hw-hint { display: none; }
  .hw-list { gap: 6px; }
  .hw-b { min-height: 42px; border-radius: 13px; }
  .hw-b .hw-n { font-size: 14px; }
  .hw-bar { bottom: 6px; }
  .hw-now { margin-top: 10px; padding: 0 6px; min-height: 0; }
  .hw-now b { font-size: clamp(1.3rem, 6vw, 1.75rem); }
  .hw-now span { margin-top: 5px; font-size: 14px; line-height: 1.45; }
  .hw-hold { top: 4%; right: -2px; }
  .hw .illus { display: none; }
  .how.photo .hw .illus { display: block; }
}

/* the pinned pill steps aside while How it works is on screen, so the phone
   and its step card get the whole screen (Daniel: "it's hard to see
   everything on the 5 tap steps") */
@media (max-width: 900px) {
  .pill.away { transform: translate(-50%, 160%); opacity: 0; visibility: hidden; }
}

/* two edges where the Apply section meets the letter sheet (Daniel: "look at
   the two competing borders"): main.css rounded all four corners of .cta on
   phones, so its bottom curve showed under the next sheet's top curve. Only
   the top corners round now, the 20px gap under it that let the page show
   through the next sheet's corners is gone, and the footer shares the warm white. */
.cta { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-bottom: 0 !important; }
footer { background: var(--t-warm, #f5f2ec); }

/* ══ THE MEMBERSHIP CARD, MORE ENTICING (17 Oct 2026) ══════════════════════
   Daniel: "the membership card needs to look more enticing (edit info and
   colors to make more clickable and wanting to apply)". The same couple as the
   hero across the top, a "Free to apply" badge, warm cream on the price,
   the brand gradient on a big Apply button, and six things you get (each one
   true: see LOG.md 17 Oct). */
.plans .pc { padding-top: 0 !important; background:
    radial-gradient(70% 30% at 50% 46%, rgba(243, 231, 217, .10), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, rgba(107, 42, 193, .28), transparent 70%),
    linear-gradient(180deg, #17142a 0%, #0d0b14 100%) !important; }
.pc-photo { position: relative; height: 230px; margin: 0 -30px 0; overflow: hidden; }
.pc-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 20, 42, 0) 35%, rgba(23, 20, 42, .7) 75%, #17142a 100%); }
.pc-badge { position: absolute; top: 16px; left: 16px; z-index: 1; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; letter-spacing: .02em;
  color: #fff; background: var(--g-grad); box-shadow: 0 10px 24px -10px rgba(107, 42, 193, .8); }
.plans .pc-icon { position: relative; z-index: 3; margin: -40px auto 12px !important; width: 50px; height: 50px; color: #fff;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.plans .pc-name { color: #fff; }
.plans .pc-for { color: rgba(243, 231, 217, .72) !important; }
.plans .pc-price, .plans .pc-price .pc-cur { background: linear-gradient(180deg, #ffffff 0%, #f3e7d9 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; }
.pc-after { margin: 10px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: #f3e7d9; }
.plans .pc-btn { background: var(--g-grad) !important; color: #fff !important; height: 62px; font-size: 1.15rem; max-width: 440px;
  box-shadow: 0 20px 40px -18px rgba(165, 47, 168, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.plans .pc-btn::after { background-color: rgba(255, 255, 255, .22) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h9m-3.5-4L15 10l-4.5 4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
.plans .pc-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -18px rgba(165, 47, 168, .9); }
.plans .pc-note { color: rgba(243, 231, 217, .62) !important; }
.pc-inc { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(243, 231, 217, .14); text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #c4b0ff; }
.plans .pc-inc + .pc-list { margin-top: 16px !important; padding-top: 0 !important; border-top: 0 !important; }
.plans .pc-list li { color: rgba(255, 255, 255, .9) !important; }
.plans .pc-list svg { color: #fff !important; background: var(--g-grad) !important; box-shadow: none !important; }
@media (min-width: 761px) {
  .plans .pc-list { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 26px; row-gap: 14px; width: 100% !important; }
  .pc-photo { height: 260px; }
}
@media (max-width: 760px) {
  .pc-photo { margin: 0 -22px 0; height: 210px; }
}
@media (min-width: 761px) { .plans .pc { width: min(640px, 100%) !important; } }

/* ══ DESKTOP LAYOUT (17 Oct 2026, PREVIEW) ═══════════════════════════════════
   Daniel: "now that mobile looks great, make desktop look more like a desktop
   site". Under 901px nothing here applies, so the phone layout he signed off
   on is untouched. Above it the stacked, centered sections become split
   layouts that use the width: words on one side, the picture on the other.
   The hero, the No catfish statement and Ready to be yoked stay centered on
   purpose. They are the big moments. */
.side-get { display: none; }
@media (min-width: 901px) {
  /* shared: left aligned section heads */
  .dk-left, .founders-copy, .rule .wrap, .nominate-inner, .events .sec-head, .plans .sec-head { text-align: left !important; }

  /* How it works: heading and steps on the left, the phone on the right, one screen */
  .how.story { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr;
    column-gap: clamp(48px, 7vw, 120px);
    padding: clamp(84px, 10vh, 120px) max(40px, calc((100% - 1180px) / 2)) clamp(60px, 7vh, 100px); align-content: center; min-height: 100svh; box-sizing: border-box; }
  .how.story > .story-intro, .how.story > .hw { display: contents; }
  .how .story-intro .kicker { grid-column: 1; grid-row: 1; justify-self: start; align-self: end; margin-left: 0 !important; margin-right: 0 !important; }
  .how .story-intro h2 { grid-column: 1; grid-row: 2; text-align: left; margin: 14px 0 26px; max-width: 12ch; font-size: clamp(3rem, 4.6vw, 4.6rem); }
  .how .hw-side { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; margin: 0 !important; max-width: 520px; }
  .how .hw-stage { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: min(380px, calc((100svh - 120px) / 1.76)) !important; }

  /* Our story: photo left, words right */
  .founders-grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr) !important; justify-items: start !important; align-items: center;
    gap: clamp(48px, 7vw, 110px) !important; max-width: 1120px; margin-left: auto; margin-right: auto; }
  .founders-photo { margin: 0 !important; width: 100% !important; }
  .founders-copy { margin: 0 !important; max-width: 560px !important; }
  .founders-copy .kicker.script-k { margin-left: 0 !important; margin-right: 0 !important; }
  .founders-copy .quote { text-align: left; max-width: 14ch; font-size: clamp(2.6rem, 4.2vw, 4rem); }
  .founders-copy p { margin-left: 0 !important; margin-right: 0 !important; text-align: left; }
  .founders-copy .sig::before { margin: 0 0 14px !important; }

  /* Know someone: words left, the phone right */
  .nominate-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto 1fr;
    column-gap: clamp(48px, 7vw, 120px); max-width: 1180px !important; align-items: start; }
  .nominate-inner .kicker { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 0 !important; margin-right: 0 !important; }
  .nominate-inner h2 { grid-column: 1; grid-row: 2; text-align: left; margin: 14px 0 22px; font-size: clamp(3rem, 4.8vw, 4.8rem); }
  .nominate-inner > p:not(.nom-foot) { grid-column: 1; grid-row: 3; text-align: left !important; margin: 0 0 28px !important; max-width: 44ch; }
  .nominate-inner .btn { grid-column: 1; grid-row: 4; justify-self: start; margin-left: 0 !important; margin-right: 0 !important; }
  .nominate-inner .nom-foot { grid-column: 1; grid-row: 5; text-align: left !important; margin: 20px 0 0 !important; max-width: 44ch; }
  .nominate-inner .film-refer { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0 !important; width: min(380px, calc((100svh - 110px) / 2.04)) !important; }
  .nominate-inner { align-content: center; }
  .nominate { padding-top: clamp(70px, 8vh, 100px) !important; padding-bottom: clamp(70px, 8vh, 100px) !important; }

  /* Membership: heading and what you get on the left, the price card on the right */
  .plans .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); column-gap: clamp(48px, 7vw, 110px); align-items: center; max-width: 1180px; }
  .plans .sec-head { margin: 0 !important; max-width: 560px; }
  .plans .sec-head .kicker { margin-left: 0; }
  .plans .sec-head h2 { text-align: left; margin-left: 0; max-width: 11ch; font-size: clamp(3rem, 4.8vw, 4.8rem); }
  .plans .sec-head p { margin-left: 0 !important; text-align: left; }
  .plans .plan-grid { grid-template-columns: minmax(0, 1fr) !important; margin: 0 !important; }
  .plans .pc { width: 100% !important; }
  .plans .pc .pc-inc, .plans .pc .pc-list { display: none !important; }
  .side-get { display: block; margin-top: 34px; padding-top: 28px; border-top: 1px solid rgba(27, 21, 48, .12); }
  .side-k { margin: 0 0 16px; font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: #6b2ac1; }
  .side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .side-list li { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; align-items: center; font-size: 1.06rem; line-height: 1.4; color: var(--t-ink, #1b1530); }
  .side-list svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; color: #fff; background: var(--g-grad, linear-gradient(135deg, #6b2ac1, #c2338f)); box-sizing: border-box; }

  /* The Yoked Standard: all five in one row, everything lined up left */
  .standard { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 1180px !important; gap: 12px !important; }
  .standard .std:nth-of-type(5) { grid-column: span 2 !important; }
  .standard .kicker { text-align: left !important; margin: 0 0 26px !important; }
  .std, .std:nth-of-type(n) { grid-column: auto; min-height: 280px !important; padding: 24px 20px !important; text-align: left !important; align-items: flex-start; }
  .std .n { text-align: left !important; margin: 0 0 auto !important; align-self: flex-start; }
  .std > div { margin-top: 28px; }

  /* Footer: logo and email on the left, links in columns */
  footer .wrap { max-width: 1180px; }
  .foot-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; column-gap: 80px; row-gap: 14px; text-align: left !important; }
  .foot-grid img { grid-column: 1; grid-row: 1; height: 64px; justify-self: start; }
  .foot-grid .foot-mail { grid-column: 1; grid-row: 2; justify-self: start; }
  .foot-grid .foot-links { grid-column: 2; grid-row: 1 / span 2; display: grid !important; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(4, auto); grid-auto-flow: column; justify-content: end; gap: 14px 56px !important; }
  .foot-links a { justify-content: flex-start !important; text-align: left !important; }
  footer .wrap > p.foot-legal, footer .foot-verse { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
  footer .wrap > p.foot-legal:last-child { max-width: 90ch !important; }
  footer .wrap > p.foot-legal:first-of-type { margin-top: 40px !important; padding-top: 26px; border-top: 1px solid rgba(27, 21, 48, .1); }
  footer .foot-verse { margin-top: 30px; }
}

/* ══ PREMIUM DESKTOP (17 Oct 2026, PREVIEW) ═══════════════════════════════════
   Daniel: "I want the hero to take up whole top area on desktop not the phone
   size cutouts ... make full screen photos and a premium desktop website."
   Plan he said yes to: full screen hero, full screen photo moments (the rule,
   events, the closer), two backgrounds instead of five, soft motion, more air.
   Every photo is the same couple (Alexander Mass, Unsplash). Phones never load
   the .dk-photo images (a 1px gif until 901px). Nothing here touches phones. */
.dk-photo { display: none; }
@media (min-width: 901px) {
  :root { --dk-ease: cubic-bezier(.22, .8, .2, 1); --dk-pad: max(56px, calc((100% - 1320px) / 2)); }

  /* ── the menu: clear over the photo, white glass once you scroll ── */
  .nav:not(.scrolled) .nav-inner { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .nav:not(.scrolled) .nav-logo .nl-color { filter: brightness(0) invert(1); }
  .nav:not(.scrolled) .nav-links a, .nav:not(.scrolled) .nl-right a:not(.btn) { color: rgba(255, 255, 255, .88) !important; }
  .nav:not(.scrolled) .nav-links a:hover, .nav:not(.scrolled) .nl-right a:not(.btn):hover { color: #fff !important; }
  .nav:not(.scrolled) .nl-right a.btn-white { background: #fff !important; color: var(--t-ink) !important; box-shadow: none !important; }
  .nav .nav-inner { transition: background .6s var(--dk-ease), box-shadow .6s var(--dk-ease); }

  /* ── the hero: the photo is the whole first screen ── */
  .hx { position: relative; height: 100svh; min-height: 680px; max-height: 1200px; overflow: hidden; padding: 0 !important; background: #0d0b14; }
  .hx .hx-main { position: static !important; display: block !important; padding: 0 !important; max-width: none !important; width: auto !important; }
  .hx-photo { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; aspect-ratio: auto !important;
    border-radius: 0 !important; box-shadow: none !important; z-index: 0; overflow: hidden; }
  .hx-photo picture, .hx-photo img { display: block; width: 100%; height: 100%; }
  .hx-photo img { object-fit: cover; object-position: 50% 38% !important; transform-origin: 50% 35%; animation: dkDrift 14s var(--dk-ease) both; }
  @keyframes dkDrift { from { transform: scale(1.09); } to { transform: scale(1); } }
  .hx-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(13, 11, 20, .5) 0%, rgba(13, 11, 20, 0) 17%, rgba(13, 11, 20, 0) 42%, rgba(13, 11, 20, .55) 66%, rgba(13, 11, 20, .94) 100%),
      linear-gradient(90deg, rgba(13, 11, 20, .32) 0%, rgba(13, 11, 20, 0) 45%); }
  .hx .hx-copy { position: absolute !important; z-index: 2; left: var(--dk-pad); right: var(--dk-pad); bottom: 128px; margin: 0 !important; max-width: none !important;
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); column-gap: clamp(40px, 5vw, 96px); align-items: end; text-align: left; }
  .hx .hx-eyebrow { grid-column: 1; grid-row: 1; justify-self: start; margin: 0 0 26px !important; background: rgba(13, 11, 20, .28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .hx h1 { grid-column: 1; grid-row: 2 / span 3; align-self: end; margin: 0 !important; font-size: min(clamp(4.6rem, 8.2vw, 9.4rem), 14.5svh) !important;
    line-height: .84 !important; letter-spacing: -.05em; text-shadow: 0 20px 80px rgba(0, 0, 0, .35); }
  .hx h1 .l { display: block; }
  .hx .hx-sub { grid-column: 2; grid-row: 2; margin: 0 0 26px !important; max-width: none; font-size: 1.14rem; line-height: 1.55; color: rgba(255, 255, 255, .86); text-align: left; }
  .hx .hx-ctas { grid-column: 2; grid-row: 3; margin: 0 !important; justify-content: flex-start !important; gap: 22px; flex-wrap: wrap; }
  .hx .hx-link { display: inline-flex !important; color: rgba(255, 255, 255, .9); }
  .hx .hx-assure { grid-column: 2; grid-row: 4; margin: 16px 0 0 !important; padding: 0 !important; color: rgba(255, 255, 255, .62); text-align: left; }
  .hx-proof { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: transparent !important; border: 0 !important; padding: 0 !important; }
  .hx-proof ul { display: flex !important; justify-content: space-between; gap: 24px; margin: 0 var(--dk-pad) !important; max-width: none !important; width: auto !important;
    padding: 24px 0 30px !important; border-top: 1px solid rgba(255, 255, 255, .16); }
  .hx-proof li { color: rgba(255, 255, 255, .82) !important; font-weight: 500 !important; font-size: .92rem; }
  .hx-proof svg { color: #fff !important; opacity: .8; }
  /* the words rise in after the photo settles */
  .hx .hx-eyebrow, .hx h1, .hx .hx-sub, .hx .hx-ctas, .hx .hx-assure, .hx-proof ul { animation: dkRise 1.1s var(--dk-ease) both; }
  .hx h1 { animation-delay: .12s; } .hx .hx-sub { animation-delay: .32s; } .hx .hx-ctas { animation-delay: .42s; }
  .hx .hx-assure { animation-delay: .5s; } .hx-proof ul { animation-delay: .65s; }
  @keyframes dkRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

  /* ── two backgrounds, not five: warm white for the light sections, ink for the dark ── */
  .how.story, .founders, .nominate, .plans, .safety, .postscript, footer { background: var(--t-warm) !important; }
  .manifesto, .events, .rule, .cta { background: var(--t-ink) !important; }

  /* ── more air ── */
  .manifesto { padding-top: clamp(130px, 14vh, 180px) !important; padding-bottom: clamp(130px, 14vh, 180px) !important; }
  .manifesto h2 { font-size: clamp(4rem, 6.6vw, 7rem) !important; max-width: 13ch !important; }
  .founders { padding-top: clamp(120px, 13vh, 170px) !important; padding-bottom: clamp(120px, 13vh, 170px) !important; }
  .safety { padding-top: clamp(110px, 12vh, 160px) !important; padding-bottom: clamp(110px, 12vh, 160px) !important; }
  .plans { padding-top: clamp(110px, 12vh, 160px) !important; padding-bottom: clamp(110px, 12vh, 160px) !important; }

  /* ── full height photo halves (the rule: photo right; events: photo left) ── */
  .rule, .events { position: relative; display: grid !important; grid-template-columns: 1fr 1fr; min-height: 100svh; padding: 0 !important; overflow: hidden; }
  .dk-photo { display: block; position: relative; overflow: hidden; min-height: 100%; }
  .dk-photo picture, .dk-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
  .dk-photo img { object-fit: cover; }
  .dk-rule { grid-column: 2; grid-row: 1; }
  .dk-events { grid-column: 1; grid-row: 1; }
  .dk-rule img { object-position: 50% 40%; }
  .dk-events img { object-position: 60% 30%; }
  .rule .wrap, .events .wrap { grid-row: 1; align-self: center; width: auto !important; max-width: 620px !important; margin: 0 !important;
    padding: clamp(110px, 12vh, 150px) clamp(48px, 6vw, 110px) !important; display: block !important; text-align: left !important; }
  .rule .wrap { grid-column: 1; justify-self: end; }
  .events .wrap { grid-column: 2; justify-self: start; }
  .rule .kicker, .events .kicker { margin-left: 0 !important; margin-right: 0 !important; }
  .rule h2 { text-align: left; margin: 22px 0 30px !important; max-width: 10ch !important; font-size: clamp(3.4rem, 5.2vw, 5.6rem) !important; }
  .rule .rule-lead, .rule .rule-sub { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 44ch !important; }
  .rule .rule-lead { font-size: 1.2rem; line-height: 1.6; margin-bottom: 18px !important; }
  .events .sec-head { margin: 0 0 34px !important; max-width: none; }
  .events .sec-head h2 { text-align: left; margin: 22px 0 18px !important; max-width: 11ch; font-size: clamp(3.2rem, 4.8vw, 5rem) !important; }
  .events .sec-head p { margin: 0 !important; text-align: left; max-width: 42ch; }
  .events .event-chips { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 !important; }
  .events .event-chips .chip { justify-content: flex-start; padding: 18px 20px; border-radius: 16px; font-size: 1rem; }
  .events .event-chips .chip:nth-child(7) { grid-column: 1 / -1; }
  .events .note { text-align: left !important; margin: 22px 0 0 !important; }
  /* the photo edge melts into the ink instead of a hard cut */
  .dk-rule::after, .dk-events::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
  .dk-rule::after { background: linear-gradient(90deg, var(--t-ink) 0%, rgba(13, 11, 20, 0) 22%); }
  .dk-events::after { background: linear-gradient(270deg, var(--t-ink) 0%, rgba(13, 11, 20, 0) 22%); }

  /* ── the closer: a full screen photo (a sunset pasture, HBZuFZj34cw, no couple), the words on the right ── */
  .cta { position: relative; min-height: 100svh; display: flex !important; align-items: center; justify-content: flex-end; padding: 0 !important; overflow: hidden; }
  .dk-cta { position: absolute !important; inset: 0; z-index: 0; }
  .dk-cta img { object-position: 30% 50%; }
  .dk-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(270deg, rgba(13, 11, 20, .92) 0%, rgba(13, 11, 20, .78) 30%, rgba(13, 11, 20, 0) 58%),
      linear-gradient(0deg, rgba(13, 11, 20, .5) 0%, rgba(13, 11, 20, 0) 30%); }
  .cta .wrap { position: relative; z-index: 1; width: min(560px, 42%) !important; margin: 0 var(--dk-pad) 0 0 !important; text-align: left !important; padding: 120px 0 !important; }
  .cta .cta-icon { margin: 0 0 30px !important; width: 72px; height: 72px; border-radius: 18px; }
  .cta h2 { text-align: left; font-size: clamp(3.6rem, 5.4vw, 6rem) !important; margin-left: 0 !important; }
  .cta p { text-align: left !important; margin-left: 0 !important; color: rgba(255, 255, 255, .86) !important; }
  .cta .btn { margin-left: 0 !important; }
  .cta .cta-assure { text-align: left !important; color: rgba(255, 255, 255, .78) !important; }

  /* ── our story: the founders get the big treatment (Daniel's tall 4:5 version of the photo) ── */
  .founders-grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr) !important; }
  .founders-photo .frame { aspect-ratio: 4 / 5; }
  .founders-photo .frame picture, .founders-photo .frame img.subject { display: block; width: 100%; height: 100%; }
  .founders-photo .frame img.subject { object-fit: cover; object-position: 50% 35%; }
  .dk-events img { object-position: 50% 30% !important; }

  /* ── photos move a touch slower than the page (only where the browser can do it smoothly) ── */
  @supports (animation-timeline: view()) {
    .dk-photo img { animation: dkPar linear both; animation-timeline: view(); }
    .dk-cta img { animation-name: dkParSoft; }
    @keyframes dkParSoft { from { transform: translateY(-2%) scale(1.04); } to { transform: translateY(2%) scale(1.04); } }
    @keyframes dkPar { from { transform: translateY(-5%) scale(1.12); } to { transform: translateY(5%) scale(1.12); } }
  }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .hx-photo img, .dk-photo img, .hx .hx-eyebrow, .hx h1, .hx .hx-sub, .hx .hx-ctas, .hx .hx-assure, .hx-proof ul { animation: none !important; transform: none !important; }
}

/* ══ REVIEW FIXES (17 Oct, after the design, accessibility and brand reviews) ══
   - the faded serif "Yoked" behind the founders photo: not the logo, so it goes (all sizes)
   - the closer's small print over the photo was too faint (desktop rule above)
   - phones: the hero tag sat white on bright sky, and the step buttons were 42px tall */
.founders::after { display: none !important; }
.cta p.cta-assure { color: rgba(255, 255, 255, .72); }
@media (max-width: 900px) {
  .hx .hx-eyebrow { background: rgba(13, 11, 20, .5) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2) !important;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .hw-b { min-height: 44px !important; }
}

/* ══ PHONE HERO LOGO (17 Oct) ═══════════════════════════════════════════════
   Daniel: "is the logo somewhere on the hero?" Phones: the white logo (the real
   file, filtered white, never redrawn) sits top center on the photo where the
   East Texas tag was; the tag drops down to sit just above the headline. */
.hx-logo { display: none; }
@media (max-width: 900px) {
  .hx-logo { display: block; position: absolute; z-index: 3; top: calc(18px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
    height: 40px; width: auto; filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0, 0, 0, .35)); }
  .hx .hx-eyebrow { position: static !important; top: auto !important; display: inline-flex !important; width: max-content; margin: 0 auto 12px !important; }
  .hx .hx-copy { margin-top: -128px !important; }
}

/* ══ 18 OCT: THE PROOF ROW, DESIGNED (all sizes) ═══════════════════════════
   Daniel: "What's up with ugly icons on the first photo?? Remove those!" then
   "This needs a better design on these 3 things". The icons are gone from the
   markup; the three facts are now glass pills, centered, wrapping as needed, on
   the hero's own dark ground. One design at every width (the 901 to 1023 band
   used to drop them into a lopsided two column grid). */
.hx-proof { background: transparent !important; border: 0 !important; padding: 0 !important; }
.hx-proof ul { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px !important;
  width: auto !important; max-width: 720px !important; margin: 0 auto !important; padding: 2px 20px 34px !important; }
.hx-proof li { display: inline-flex !important; align-items: center; gap: 0 !important; white-space: nowrap; padding: 10px 16px; border-radius: 999px;
  font-size: .86rem !important; font-weight: 600 !important; letter-spacing: .005em; color: rgba(255, 255, 255, .9) !important;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hx-proof svg { display: none !important; }
@media (max-width: 900px) {
  .hx .hx-assure { padding-bottom: 18px !important; }
  .manifesto { padding-top: 64px !important; }
}
@media (min-width: 901px) {
  .hx-proof ul { max-width: none !important; margin: 0 var(--dk-pad) !important; padding: 22px 0 30px !important; border-top: 1px solid rgba(255, 255, 255, .14); gap: 12px !important; }
  .hx-proof li { padding: 11px 18px; font-size: .9rem !important; background: rgba(255, 255, 255, .09); }
}
@media (max-width: 900px) {
  /* one card per row: the number on the left, the words beside it, so no card has a hole in it */
  .standard { grid-template-columns: 1fr !important; gap: 10px !important; }
  .standard .std, .standard .std:nth-of-type(n) { grid-column: 1 / -1 !important; flex-direction: row !important; justify-content: flex-start !important;
    align-items: flex-start !important; gap: 14px; min-height: 0 !important; padding: 22px 20px 24px !important; text-align: left !important; }
  .standard .std .n { flex: none; width: 1.45em; text-align: left !important; font-size: 2.3rem !important; line-height: .9 !important; margin: 0 !important; }
  .standard .std > div { margin: 2px 0 0 !important; }
  .standard .std h4 { font-size: 1.1rem !important; line-height: 1.25 !important; margin: 0 0 6px !important; }
  .standard .std p { font-size: .95rem !important; line-height: 1.5 !important; }
}

/* the Standard: five in one row only when there is room for the words */
@media (min-width: 1200px) {
  .standard { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .standard .std:nth-of-type(5) { grid-column: auto !important; }
}