/* Church jobs: ChurchSignal's components (base.css, copied from ChurchSignal's vendor.css) in this
   product's own look: warm and grounded rather than techy. Fraunces (a soft serif) for headings and
   numbers, Inter for everything else, a script accent used sparingly. Palette: deep green (trust),
   terracotta (warmth), mustard (calling), sand (simplicity), sky (hope), with sage for matches.
   Cream pages, soft rounded cards, pill chips. */
:root {
  --green: #173a2c; --green-2: #22513e; --terracotta: #b5532f; --mustard: #d4a03c; --sand: #ebe3d3; --sky: #a9c4cf; --sage: #b9cdb4;
  --bg: #f7f2e8; --bg-2: #efe7d7; --surface: #fffdf8; --line: rgba(23, 58, 44, .11); --line-2: rgba(23, 58, 44, .2);
  --ink: #15281f; --ink-2: #3d4b43; --muted: #7c8076;
  --accent: #173a2c; --accent-ink: #f7f2e8; --accent-soft: #e2eadc; --accent-deep: #0f271d;
  --field: #173a2c; --field-2: #22513e; --leaf: #d4a03c; --field-ink: #c9d6c6;
  --yes: #173a2c; --yes-soft: #e2eadc; --no: #b5532f; --no-soft: #f5e1d8; --warn: #93621a; --warn-soft: #f6e8c8;
  --match: #dce8d6; --match-ink: #1f4a37; --heart: #173a2c; --tag: #ebe3d3; --tag-ink: #3d4b43;
  --shadow: 0 1px 2px rgba(23, 58, 44, .05), 0 24px 60px -36px rgba(23, 58, 44, .35);
  --f: "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --script: "Caveat", "Segoe Script", cursive;
  --r: 22px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e1913; --bg-2: #15241b; --surface: #182a20; --line: rgba(235, 227, 211, .09); --line-2: rgba(235, 227, 211, .18);
  --ink: #f1eadc; --ink-2: #cdc5b5; --muted: #949a8e;
  --accent: #9fc7a6; --accent-ink: #0e1913; --accent-soft: rgba(159, 199, 166, .14); --accent-deep: #0b1610;
  --field: #173a2c; --field-2: #22513e; --leaf: #e2b257; --field-ink: #c9d6c6;
  --yes: #9fc7a6; --yes-soft: rgba(159, 199, 166, .14); --no: #e08360; --no-soft: rgba(224, 131, 96, .14); --warn: #e6bc68; --warn-soft: rgba(230, 188, 104, .13);
  --match: rgba(159, 199, 166, .16); --match-ink: #b9dcbf; --heart: #b9dcbf; --tag: rgba(235, 227, 211, .1); --tag-ink: #e5dccb;
  --shadow: 0 0 0 1px var(--line), 0 24px 60px -36px rgba(0, 0, 0, .8); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0e1913; --bg-2: #15241b; --surface: #182a20; --line: rgba(235, 227, 211, .09); --line-2: rgba(235, 227, 211, .18);
  --ink: #f1eadc; --ink-2: #cdc5b5; --muted: #949a8e;
  --accent: #9fc7a6; --accent-ink: #0e1913; --accent-soft: rgba(159, 199, 166, .14); --accent-deep: #0b1610;
  --field: #173a2c; --field-2: #22513e; --leaf: #e2b257; --field-ink: #c9d6c6;
  --yes: #9fc7a6; --yes-soft: rgba(159, 199, 166, .14); --no: #e08360; --no-soft: rgba(224, 131, 96, .14); --warn: #e6bc68; --warn-soft: rgba(230, 188, 104, .13);
  --match: rgba(159, 199, 166, .16); --match-ink: #b9dcbf; --heart: #b9dcbf; --tag: rgba(235, 227, 211, .1); --tag-ink: #e5dccb;
  --shadow: 0 0 0 1px var(--line), 0 24px 60px -36px rgba(0, 0, 0, .8); color-scheme: dark }

/* type: serif headings with natural spacing (base.css tracks its grotesk tightly) */
h1, h2, h3, .giant, .mark-xl, .word, .stat b, .scene h2, .manifesto h2 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 600; letter-spacing: -0.015em }
h1, h2 { line-height: 1.02 }
.head h1 { font-size: clamp(38px, 5.2vw, 64px) }
.eyebrow, .section h3, .facts dt, .slogan { font: 600 10.5px/1.2 var(--f) !important; letter-spacing: .18em !important; text-transform: uppercase; color: var(--muted) }
.script { font-family: var(--script); font-weight: 500; letter-spacing: 0; color: var(--leaf) }
.wordmark { font: 600 21px/1 var(--serif); letter-spacing: -0.02em; color: var(--ink) }
.g { color: var(--leaf) }
.demo-tag { font: 600 9.5px var(--f); letter-spacing: .14em }

/* buttons and nav: deep green pills on sand */
.btn { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px -14px rgba(23, 58, 44, .6) }
.btn:hover { background: var(--accent-deep); color: var(--accent-ink) }
.ghost { border-color: var(--line-2) } .ghost:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
.nav button[aria-current="page"] { background: var(--accent); color: var(--accent-ink) }
.nav button[aria-current="page"] b { background: var(--leaf); color: #15281f }
.rail { background: color-mix(in srgb, var(--bg) 92%, transparent) }
.act[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
select, input[type="url"], input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], textarea { border-radius: 14px; background: var(--surface) }

/* chips: soft pills */
.chip { background: var(--bg-2); color: var(--ink-2); font-weight: 600 }
.chip.acc { background: var(--tag); color: var(--tag-ink) }
.chip.ok { background: var(--accent); color: var(--accent-ink) }

/* landing: sand hero with a mustard path, deep green and terracotta bands */
.land-hero { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); color: var(--ink); flex-direction: column; gap: 26px; text-align: center; padding: 90px 22px 120px; border-radius: 0 0 36px 36px }
.land-hero .path { position: absolute; inset: auto 0 0 0; width: 100%; height: 46%; pointer-events: none }
.mark-xl { color: var(--ink); font-size: clamp(54px, 9.5vw, 150px); letter-spacing: -0.03em; white-space: normal }
.mark-xl span { color: var(--leaf) }
.land-hero .tag { position: relative; bottom: auto; color: var(--ink-2); font-size: clamp(16px, 1.6vw, 19px); max-width: 34ch }
.land-hero .tag b { color: var(--ink) }
.land-hero .lede { font: 600 12px var(--f); letter-spacing: .32em; text-transform: uppercase; color: var(--ink-2); z-index: 2 }
.land-hero .rule { width: 56px; height: 2px; background: var(--leaf); border: 0; margin: 0 }
.land-hero .btn { z-index: 2 }
.manifesto { background: var(--field); color: #f1eadc; border-radius: 36px; margin: 18px clamp(10px, 1.6vw, 22px) }
.manifesto h2 { color: #f1eadc } .manifesto .tint { color: var(--leaf) }
.manifesto .dots3 i { background: #f1eadc } .manifesto .dots3 i:last-child { background: var(--leaf) }
.manifesto .slogan { color: var(--field-ink) !important }
.manifesto .script { font-size: clamp(30px, 3.6vw, 46px); color: #f1eadc }
.word { font-weight: 500; font-style: italic; color: var(--ink) }
.tile.t0 { background: var(--green); color: #f1eadc } .tile.t1 { background: var(--terracotta); color: #fbf3e8 } .tile.t2 { background: var(--mustard); color: #2a2213 }
.scene { border-radius: 32px }
.scene h2 { letter-spacing: -0.02em; font-weight: 500 }
.scene p { font: 400 15px/1.65 var(--f); letter-spacing: 0; text-transform: none; opacity: .92 }
.scene.s1 { background: var(--green); color: #f1eadc }
.scene.s2 { background: var(--terracotta); color: #fbf3e8 }
.scene.s3 { background: var(--sky); color: #15281f }
.scene::before, .scene::after { background: rgba(255, 255, 255, .07) }
.giant { letter-spacing: -0.03em }
.giant .g { font-style: italic }

/* panels, stats, contact card */
.panel, .leadcard, .card { border-radius: 24px; box-shadow: var(--shadow) }
.stat { border-radius: 20px }
.stat:first-child { background: var(--field); color: #f1eadc }
.stat:first-child span, .person .role, .avatar.unknown { color: var(--field-ink) }
.person { background: var(--field); color: #f1eadc }
.person .note, .person a { color: var(--field-ink) }
.avatar { background: var(--leaf); color: #15281f; font-family: var(--serif) }
.copy { border-color: rgba(241, 234, 220, .25) }
.sheet { background: rgba(14, 25, 19, .42) }

/* job cards */
.card h2 { font-size: 36px }
.card .church { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-top: 10px }
.match { display: flex; align-items: center; gap: 12px }
.match .ring { --p: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--bg-2) 0); }
.match .ring b { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font: 700 15px var(--f); letter-spacing: -0.03em }
.match span { font-size: 14px; color: var(--muted) }
.why li.gap::before { background: var(--no) } .why li.info::before { background: var(--line-2) }
.pay { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600 }
.chip.pay-posted { color: var(--accent-ink); background: var(--accent) }
.chip.pay-estimated { color: var(--warn); background: var(--warn-soft) }
.chip.pay-unclear { color: var(--muted); background: var(--bg-2) }

/* live feed of postings as the crawler finds them */
.feed { display: grid; gap: 6px }
.feed div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--bg-2); font-size: 14px }
.feed div::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent) }
.feed div.fresh { animation: arrive 1.2s ease-out }
.feed small { color: var(--muted); white-space: nowrap }
.feed span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
@keyframes arrive { from { background: var(--accent-soft); transform: translateY(-4px) } }
.live { display: inline-flex; align-items: center; gap: 6px }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent) }
@media (prefers-reduced-motion: no-preference) { .live::before { animation: pulse 2s infinite } @keyframes pulse { 70% { box-shadow: 0 0 0 7px transparent } } }

/* browse list */
.filters { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 10px }
.jobrows { display: grid; gap: 8px }
.browse-more { display: grid; justify-items: center; gap: 8px; padding: 12px 0 4px }
.jobrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 16px 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; text-align: left; width: 100% }
.jobrow:hover { border-color: var(--ink) }
.jobrow b { font-size: 17px; letter-spacing: -0.02em }
.jobrow .sub { grid-column: 1; color: var(--muted); font-size: 14px }
.jobrow .right { grid-row: 1 / span 2; grid-column: 2; display: grid; justify-items: end; gap: 6px; font-size: 13px; color: var(--muted) }

/* profile */
.score { display: flex; align-items: center; gap: 18px }
.score .ring { width: 86px; height: 86px } .score .ring b { width: 68px; height: 68px; font-size: 24px }
.list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.list li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2) }
.list li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none }
.list.fix li::before { content: "→"; color: var(--warn) }
.drop { display: grid; place-items: center; gap: 8px; text-align: center; padding: 26px; border: 1.5px dashed var(--line-2); border-radius: 20px; color: var(--muted); cursor: pointer }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--ink) }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.danger { border-color: var(--no); color: var(--no) } .danger:hover { background: var(--no); color: #ffffff }
input[type="number"], input[type="email"], input[type="tel"], input[type="search"] { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; outline: none }

/* saved list */
.stages { display: flex; flex-wrap: wrap; gap: 6px }
.stages button { border: 1px solid var(--line-2); background: none; border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer }
.stages button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg) }
details.answers { border-radius: 18px; background: var(--bg-2); padding: 14px 16px }
details.answers summary { cursor: pointer; font-weight: 600 }
details.answers dl { display: grid; gap: 12px; margin: 12px 0 0 }
details.answers dt { font-weight: 600; font-size: 14px } details.answers dd { margin: 4px 0 0; color: var(--ink-2); font-size: 14px }
.closed-note { color: var(--no); font-size: 13.5px; font-weight: 600 }
.reqs { display: flex; flex-wrap: wrap; gap: 6px }
.reqs .have { color: var(--accent-ink); background: var(--accent) }
.disclaim { font-size: 12.5px; color: var(--muted) }

/* swipe card: the church at a glance */
.card { gap: 14px }
.card .top { align-items: center }
.card .top .match span { font-size: 12.5px }
.card .top .ring { width: 48px; height: 48px } .card .top .ring b { width: 38px; height: 38px; font-size: 14px }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--bg-2) }
.facts div { min-width: 0 } .facts .wide { grid-column: 1 / -1 }
.facts dt { font: 500 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px }
.facts dd { margin: 0; font-size: 14.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.facts dd .note { font-weight: 400 }
.card .reviews { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px }
.card .foot { flex-wrap: wrap }

/* accounts */
.linkish { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
.signout { margin-left: auto }
input[type="password"] { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px; outline: none }

/* preference pickers and potential matches */
.picker { display: grid; gap: 10px }
.picker .picked:empty { display: none }
.potential { display: grid; gap: 8px }
.potential .jobrow { grid-template-columns: auto minmax(0, 1fr); padding: 12px 14px }
.potential .jobrow .ring { width: 44px; height: 44px } .potential .jobrow .ring b { width: 34px; height: 34px; font-size: 13px }
.potential .jobrow > span { display: grid; gap: 2px; min-width: 0 }
.potential .sub { color: var(--muted); font-size: 13.5px }

/* what the church wants, against the résumé */
.wants { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none }
.wants li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2) }
.wants li::before { content: "•"; grid-row: span 2; color: var(--muted); font-weight: 700 }
.wants li.have::before { content: "✓"; color: var(--accent) } .wants li.miss::before { content: "✕"; color: var(--no) }
.wants li b { font-size: 14.5px } .wants li span { grid-column: 2; font-size: 13.5px; color: var(--ink-2) } .wants li i { color: var(--muted); font-style: normal }
.posting { white-space: pre-line; font-size: 14px; color: var(--ink-2); margin-top: 10px }
.steps-list { display: grid; gap: 8px; margin: 0; padding-left: 22px }
.steps-list li { padding-left: 4px } .steps-list li b { display: block; font-size: 14.5px } .steps-list li span { font-size: 13.5px; color: var(--muted) }
.steps-list li.later b { color: var(--muted) }

/* apply checklist on saved jobs */
.checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step }
.checklist > li { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 10px }
.checklist > li.done { background: var(--accent-soft); border-color: transparent }
.checklist > li.done .stepbody { display: none }
.checklist label { display: flex; gap: 10px; align-items: center; cursor: pointer; font-size: 15px }
.checklist input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); flex: none }
.checklist .dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed var(--line-2); flex: none }
.checklist li.later b { color: var(--muted); font-weight: 500 }
.stepbody { display: grid; gap: 10px; padding-left: 30px }
.research p { margin: 10px 0 }

/* swipe deck: white round buttons, a terracotta X and a deep green heart; a sage match pill */
.round { background: var(--surface); box-shadow: 0 10px 26px -14px rgba(23, 58, 44, .45), 0 0 0 1px var(--line) }
.round.no { color: var(--no) } .round.no:hover { background: var(--no-soft) }
.round.yes { color: var(--heart); background: var(--match) } .round.yes:hover { background: var(--accent-soft) }
.round svg.fill { fill: currentColor; stroke: none; width: 30px; height: 30px }
.round.yes svg.fill { width: 34px; height: 34px }
.stamp { font: 600 15px var(--f); letter-spacing: .14em } .stamp.yes { background: var(--green) } .stamp.no { background: var(--no) }
.matchpill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 99px; background: var(--match); color: var(--match-ink); font: 700 13px var(--f); white-space: nowrap }
.card h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em }
.card .church { font-family: var(--f) }
.match .ring { background: conic-gradient(var(--match-ink) calc(var(--p) * 1%), var(--bg-2) 0) }
.match .ring b { font-family: var(--serif); font-weight: 600 }
.why li::before { background: var(--accent) } .why li.gap::before { background: var(--no) } .why li.info::before { background: var(--leaf) }
.facts, .card .facts { background: var(--bg); border: 1px solid var(--line) }
.feed div, .upnext div { background: var(--bg) }
.chip.pay-posted { color: var(--match-ink); background: var(--match) }
.chip.pay-estimated { color: var(--warn); background: var(--warn-soft) }
.chip.pay-unclear { color: var(--muted); background: var(--bg-2) }
.checklist > li.done { background: var(--match) }
.wants li.have::before { color: var(--match-ink) }
.list li::before { color: var(--match-ink) }
.jobrow b { font-family: var(--serif); font-weight: 600; font-size: 18px; letter-spacing: -0.01em }
.leadcard h3, .sheet h2 { font-family: var(--serif); letter-spacing: -0.015em }

@media (max-width: 760px) {
  .nav { grid-template-columns: repeat(4, 1fr) }
  .signout { display: none }
  .facts { padding: 12px 14px; gap: 8px 12px } .facts dd { font-size: 13.5px }
  .filters { grid-template-columns: 1fr }
  .card h2 { font-size: 28px } .card .church { margin-top: 6px; font-size: 16px }
  .card .why li:nth-child(n+3) { display: none }
  .match .ring { width: 46px; height: 46px } .match .ring b { width: 36px; height: 36px; font-size: 13px }
  .stack { height: max(440px, calc(100dvh - 330px)) }
}

/* ---------- front page: hero, feature rows with phone screenshots, privacy band ---------- */
.land-hero { display: block; padding: clamp(40px, 7vw, 90px) clamp(18px, 4vw, 48px) clamp(150px, 16vw, 210px); text-align: left }
.hero-grid { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 5vw, 80px); align-items: center }
.hero-copy { display: grid; gap: 18px; justify-items: start }
.land-hero .mark-xl { font-size: clamp(44px, 6.4vw, 92px); line-height: 1; letter-spacing: -0.025em }
.land-hero .lede { letter-spacing: .26em; font-size: 11.5px }
.land-hero .tag { max-width: 46ch; font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.6 }
.hero-cta { gap: 18px; align-items: center }
.hero-cta .btn { padding: 16px 26px; font-size: 16px }

.feature { max-width: 1060px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(18px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 6vw, 90px); align-items: center }
.feature.flip .feature-copy { order: 2 }
.feature-copy { display: grid; gap: 14px; max-width: 46ch }
.feature-copy h2 { font-size: clamp(32px, 3.8vw, 50px) }
.feature-copy p:last-child { color: var(--ink-2); font-size: 17px; line-height: 1.65 }
.feature + .feature { border-top: 1px solid var(--line) }

/* a phone frame around a static screenshot built from real components */
.phone { margin: 0; width: 300px; height: 610px; flex: none; border-radius: 46px; padding: 11px; background: #15281f; box-shadow: 0 40px 80px -40px rgba(23, 58, 44, .55), inset 0 0 0 2px #2a3f34; position: relative }
.phone .screen { height: 100%; border-radius: 36px; background: var(--bg); overflow: hidden; padding: 38px 14px 16px; display: grid; align-content: start; gap: 10px; font-size: 13px; position: relative }
.phone .screen::before { content: ""; position: absolute; top: 11px; left: 50%; width: 82px; height: 22px; border-radius: 12px; background: #15281f; transform: translateX(-50%) }
.phone, .phone * { pointer-events: none }
.phone .eyebrow { font-size: 9.5px !important; margin: 2px 0 0 }
.phone .note { font-size: 11.5px }
.phone .card.shot { position: static; inset: auto; padding: 16px; gap: 10px; border-radius: 22px; transform: none !important; opacity: 1 }
.phone .card.shot h2 { font-size: 24px }
.phone .card.shot .church { font-size: 13.5px; margin-top: 4px }
.phone .facts { padding: 10px 12px; gap: 7px 10px } .phone .facts dd { font-size: 12px } .phone .facts dt { font-size: 8.5px !important }
.phone .why li { font-size: 12px; gap: 8px } .phone .why li::before { margin-top: 5px; width: 6px; height: 6px }
.phone .chip { font-size: 10.5px; padding: 4px 9px }
.phone .matchpill { font-size: 11.5px; padding: 4px 10px; justify-self: start }
.phone .actions { margin-top: 4px; gap: 14px } .phone .round { width: 48px; height: 48px } .phone .round.yes { width: 60px; height: 60px } .phone .round.undo { width: 36px; height: 36px }
.phone .round svg { width: 20px; height: 20px } .phone .round.yes svg.fill { width: 26px; height: 26px } .phone .round.undo svg { width: 15px; height: 15px }
.phone .score { gap: 12px } .phone .score .ring { width: 60px; height: 60px } .phone .score .ring b { width: 48px; height: 48px; font-size: 17px }
.phone .list li { font-size: 12px }
.phone .potential .jobrow { padding: 9px 10px; gap: 10px } .phone .potential b { font-size: 13.5px } .phone .potential .sub { font-size: 11px }
.phone .potential .ring { width: 36px; height: 36px } .phone .potential .ring b { width: 28px; height: 28px; font-size: 11px }
.phone .wants { gap: 6px } .phone .wants li { padding: 8px 10px; grid-template-columns: 16px minmax(0, 1fr) } .phone .wants li b { font-size: 12.5px } .phone .wants li span { font-size: 11px }
.phone .field { gap: 6px } .phone .field > span { font-size: 12px }
.phone .act { font-size: 11.5px; padding: 6px 10px }
.phone .fake-input { border: 1px solid var(--line-2); border-radius: 12px; padding: 9px 12px; background: var(--surface) }
.phone .btn { padding: 11px 16px; font-size: 13px; justify-self: start }
.phone .checklist { gap: 7px } .phone .checklist > li { padding: 10px 12px; border-radius: 14px; gap: 4px } .phone .checklist label { font-size: 12.5px; gap: 8px }
.phone .checklist .box { width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-2); flex: none } .phone .checklist .tick { width: 16px; height: 16px; border-radius: 5px; background: var(--accent); color: var(--accent-ink); font-size: 11px; display: grid; place-items: center; flex: none }
.phone .checklist .dot { width: 16px; height: 16px } .phone .checklist .note { padding-left: 24px }
.phone .person { padding: 12px; grid-template-columns: 40px minmax(0, 1fr) } .phone .avatar { width: 40px; height: 40px; font-size: 13px } .phone .person .name { font-size: 14px } .phone .person .role { font-size: 11px }
.phone .copy { font-size: 11px; padding: 5px 9px }
.draft-shot { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; padding: 12px; font-size: 12px; line-height: 1.55; color: var(--ink-2) }
.draft-shot mark { background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 0 2px }
.phone .kv { grid-template-columns: 92px minmax(0, 1fr); font-size: 12px; gap: 5px 10px }
.phone .feed div { padding: 9px 11px; font-size: 12px } .phone .feed small { font-size: 10.5px }
.newcount { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; border-radius: 99px; background: var(--match); color: var(--match-ink); font: 600 13px var(--f) }
.newcount.quiet { background: var(--bg-2); color: var(--muted) }
.phone .newcount { margin: 0; font-size: 11.5px; justify-self: start }
.list.ask li::before { content: "?"; color: var(--warn) }

.manifesto.private { gap: 26px; padding: clamp(60px, 9vw, 110px) 24px }
.private-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 560px; text-align: left }
.private-list li { display: flex; gap: 12px; color: #e6e0d2; font-size: 16.5px; line-height: 1.5 }
.private-list li::before { content: "✓"; color: var(--leaf); font-weight: 700 }
.cta-bar { display: none }

@media (max-width: 900px) {
  .hero-grid, .feature { grid-template-columns: 1fr; justify-items: center }
  .hero-copy, .feature-copy { justify-items: start; max-width: 560px; width: 100% }
  .feature.flip .feature-copy { order: 0 }
}

/* ---------- mobile first: most seekers search on their phone ---------- */
html { -webkit-tap-highlight-color: transparent }
@media (max-width: 760px) {
  /* 16px inputs stop iOS zooming in on tap */
  input, select, textarea { font-size: 16px !important }
  main { padding-top: 16px }
  .head { gap: 6px } .head h1 { font-size: 34px } .eyebrow { margin-bottom: 4px }
  .newcount { margin-top: 8px; font-size: 12.5px }
  /* the deck fills the screen between the header and the bottom bar, buttons always in reach */
  .deckwrap { gap: 22px }
  .stack { height: calc(100dvh - 300px - env(safe-area-inset-bottom, 0px)); min-height: 380px; max-height: 560px }
  .card { padding: 18px; gap: 10px; border-radius: 22px }
  .card h2 { font-size: 26px }
  .card .facts { padding: 10px 12px; gap: 6px 10px } .card .facts dd { font-size: 13px }
  .card .why li:nth-child(n+3) { display: none }
  .card .foot { padding-top: 10px; font-size: 12.5px }
  .actions { margin-top: 12px; gap: 22px } .round { width: 60px; height: 60px } .round.yes { width: 72px; height: 72px } .round.undo { width: 44px; height: 44px }
  /* job details: a bottom sheet with Pass / Save pinned at the bottom */
  .sheet { align-items: end; justify-items: stretch }
  .sheet .body { width: 100%; height: auto; max-height: 92dvh; border-radius: 26px 26px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0px)); gap: 18px; animation: sheet-up .22s ease-out }
  .sheet .body::before { content: ""; justify-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); margin-bottom: -6px }
  .sheet h2 { font-size: 30px }
  #sh-actions { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom, 0px)); margin: 0 -18px calc(-18px - env(safe-area-inset-bottom, 0px)); padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); justify-content: stretch }
  #sh-actions > * { flex: 1 }
  /* bigger tap targets */
  .act { padding: 10px 14px; font-size: 14.5px } .act.small { padding: 9px 12px }
  .ghost.small, .btn.small { padding: 11px 16px }
  .checklist label { min-height: 34px } .checklist input[type="checkbox"] { width: 24px; height: 24px }
  .stepbody { padding-left: 0 }
  .leadcard { padding: 18px } .leadcard h3 { font-size: 24px }
  .kv { grid-template-columns: 110px minmax(0, 1fr) }
  .filters { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 8px 0 }
  /* front page */
  .land-hero { padding: 34px 18px 140px }
  .land-hero .mark-xl { font-size: 46px }
  .hero-cta { width: 100% } .hero-cta .btn { width: 100% }
  .phone { transform: scale(.94); transform-origin: top center; margin-bottom: -36px }
  .feature { padding: 44px 18px }
  body.out .rail { display: none }
  body.out .cta-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line) }
  body.out .cta-bar .btn { width: 100% }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: .4 } }
@media (prefers-reduced-motion: reduce) { .sheet .body { animation: none } }
.land-hero .tag { text-align: left }
body.out .cta-bar.hide { transform: translateY(110%); transition: transform .2s } body.out .cta-bar { transition: transform .2s }
.feature .phone { height: auto; max-height: 610px } .feature .phone .screen { height: auto; min-height: 420px; padding-bottom: 22px }
@media (max-width: 760px) {
  /* header + new-count about 110px, buttons about 96px, bottom bar about 76px */
  .wrap > .head .eyebrow { display: none }
  .head h1 { font-size: 30px }
  .stack { height: calc(100dvh - 330px - env(safe-area-inset-bottom, 0px)); min-height: 360px; max-height: 540px }
  .card .top .matchpill { font-size: 12.5px }
  main { padding-bottom: 130px }
}
@media (max-width: 760px) and (max-height: 700px) { .card .why li:nth-child(n+2) { display: none } }
/* touch: vertical drags scroll the page, horizontal drags swipe the card; no text selection on long press */
.card { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none }

/* "Text a friend": a pill that opens Messages on phones */
.share { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 99px; background: var(--match); color: var(--match-ink); font-weight: 600; font-size: 14.5px; text-decoration: none; min-height: 44px }
.share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round }
.share:hover { filter: brightness(.97) }
.share.small { padding: 7px 12px; min-height: 36px; font-size: 13px; gap: 6px } .share.small svg { width: 15px; height: 15px }
.share.ghostish { background: transparent; border: 1.5px solid var(--line-2); color: var(--ink); padding: 7px 14px; min-height: 0; font-size: 13px }
.card .foot { gap: 8px }
@media (max-width: 760px) { .card .foot .reviews { font-size: 12.5px } .card .foot .more { font-size: 12.5px } }

/* ---------- light look: cream surfaces, deep green only on the main button and the heart ---------- */
.land-hero .tag { padding: 0; font-size: clamp(16.5px, 1.5vw, 19px) }
.land-hero .path path:nth-child(2) { opacity: .28 !important }   /* the hills strip: a soft sage line, not a dark band */
.nav button[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 6px 18px -10px rgba(23, 58, 44, .45), 0 0 0 1px var(--line) }
.nav button[aria-current="page"] b { background: var(--leaf); color: #15281f }
.tabs button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 6px 18px -10px rgba(23, 58, 44, .45) }
.stat:first-child { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line) } .stat:first-child span { color: var(--muted) }
.stat { background: var(--bg-2) } .stat:first-child b { color: var(--match-ink) }
.person { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow) }
.person .role, .person .note, .person a { color: var(--muted) }
.avatar.unknown { color: var(--muted); border-color: var(--line-2) }
.copy { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line) } .copy:hover { background: var(--match) }
.shimmer { background: linear-gradient(90deg, var(--bg-2), var(--surface), var(--bg-2)); background-size: 200% 100%; color: var(--muted) }
.act[aria-pressed="true"] { background: var(--match); border-color: var(--match-ink); color: var(--match-ink) }
.stages button[aria-pressed="true"] { background: var(--match); border-color: var(--match-ink); color: var(--match-ink) }
.manifesto, .manifesto.private { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow) }
.manifesto h2 { color: var(--ink) } .manifesto .tint { color: var(--match-ink) }
.manifesto .dots3 i { background: var(--ink) } .manifesto .dots3 i:last-child { background: var(--leaf) }
.manifesto .slogan { color: var(--muted) !important }
.manifesto .script { color: var(--warn) }
.private-list li { color: var(--ink-2) } .private-list li::before { color: var(--match-ink) }
.phone { background: #2a3b32 } .phone .screen::before { background: #2a3b32 }
/* long emails and links wrap instead of pushing the saved-job card wider than the phone */
.leadcard, .leadcard > *, .kit, .kit > *, .checklist > li, .stepbody, .person > div { min-width: 0 }
.leadcard { overflow-wrap: anywhere }
.copy { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* the logo goes home; on phones it lives in a slim top bar, since the main bar sits at the bottom */
.wordmark { text-decoration: none; cursor: pointer }
.topbar { display: none }
@media (max-width: 760px) {
  .topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 4px; background: var(--bg) }
  .topbar .wordmark { font-size: 20px }
  .stack { height: calc(100dvh - 372px - env(safe-area-inset-bottom, 0px)) }
}

/* live counter on the front page */
.counter { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 4px; padding: 8px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px -12px rgba(23, 58, 44, .35); font-size: 14px; color: var(--ink-2); line-height: 1.35 }
.counter b { color: var(--ink); font-variant-numeric: tabular-nums }
.counter.bump { animation: bump .9s ease-out }
@keyframes bump { 0% { background: var(--match); transform: scale(1.03) } }
@media (max-width: 760px) { .counter { font-size: 12.5px; padding: 7px 12px; border-radius: 16px } }
@media (prefers-reduced-motion: reduce) { .counter.bump { animation: none } }
.counter { display: inline-block } .counter .live { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0 }

/* the optional résumé review: each point names its source */
.advice { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.advice li { display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border-left: 4px solid var(--leaf) }
.advice li.ok { border-left-color: var(--match-ink); background: var(--match) }
.advice li b { font-size: 14.5px } .advice li span { font-size: 14px; color: var(--ink-2) }
.advice li small { font-size: 12px; color: var(--muted) } .advice li small a { color: inherit }
.where-on { display: grid; gap: 4px; margin-top: 2px } .where-on small { font-size: 11.5px; color: var(--muted); font-weight: 600 }
.where-on q { display: block; font-size: 13px; color: var(--ink); background: var(--surface); border-radius: 8px; padding: 6px 9px; quotes: "“" "”" }
.where-on q::before { content: open-quote } .where-on q::after { content: close-quote }
.advice li.tip { border-left-color: var(--sky) }
/* tailoring: match now → if true, and before/after rewrites */
.lift { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 6px }
.lift > div:not(.arrow) { display: grid; gap: 2px } .lift small { font-size: 11.5px; color: var(--muted) }
.lift b { font: 600 30px/1 var(--serif); color: var(--match-ink) } .lift span { font-size: 12.5px; color: var(--ink-2) }
.lift .arrow { font-size: 22px; color: var(--muted) }
.advice li.rewrite { border-left-color: var(--sky); background: var(--bg-2) }
.ba { display: grid; gap: 3px; margin: 2px 0 } .ba small { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em }
.ba p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); background: var(--surface); padding: 8px 10px; border-radius: 10px }
.ba p.after { color: var(--ink); border: 1px solid var(--match-ink) }
.ba mark { background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 0 2px }
.advice li.rewrite .copy { justify-self: start; margin-top: 4px }
.jobrow .right .matchpill { font-size: 12px; padding: 4px 9px }
.filters:has(#f-sort) { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) }
@media (max-width: 760px) { .filters:has(#f-sort) { grid-template-columns: 1fr 1fr } .filters:has(#f-sort) #f-q { grid-column: 1 / -1 } }
@media (max-width: 760px) { .filters:has(#f-sort) #f-sort { grid-column: 1 / -1 } }
/* "Just posted" rows open their job */
.feed button { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--bg); border: 1px solid transparent; font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; width: 100%; min-height: 44px }
.feed button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent) }
.feed button:hover { border-color: var(--line-2) }
.feed button.fresh { animation: arrive 1.2s ease-out }
.feed button small { color: var(--muted); white-space: nowrap } .feed button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ---------- Matches: the swipe deck front and center ---------- */
.deck-page { max-width: 980px; gap: 18px }
.deck-head { display: grid; justify-items: center; gap: 8px; text-align: center }
.deck-head h1 { font-size: clamp(30px, 3.6vw, 44px) }
.deck-head .newcount { margin: 0 }
.deck-center { display: grid; justify-items: center; width: 100% }
.deck-center .stack { width: min(520px, 100%); height: 640px }
.deck-center .keys { display: grid; gap: 4px; justify-items: center }
.deck-center .keys .hint { font-size: 13.5px; color: var(--ink-2) }
.tally { margin: 14px 0 0; font-size: 14px; color: var(--muted) } .tally b { color: var(--ink); font-variant-numeric: tabular-nums }
.tally .linkish { color: var(--muted); text-decoration: none; font-weight: 400 } .tally .linkish:hover { text-decoration: underline }
.deck-below { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; margin-top: 18px }
.deck-below .panel.wide { grid-column: 1 / -1 }
.deck-below .linkish { justify-self: start; font-size: 14px }
@media (max-width: 760px) {
  .deck-page { gap: 10px }
  .deck-head h1 { font-size: 28px }
  .deck-center .stack { height: calc(100dvh - 330px - env(safe-area-inset-bottom, 0px)); min-height: 380px; max-height: 560px }
  .deck-center .keys .kbd-hint { display: none } .deck-center .keys { display: grid }
  .deck-below { grid-template-columns: 1fr; margin-top: 8px }
}
@media (min-width: 761px) { .deck-center .keys .hint { display: none } }

/* ---------- job panel: church first, fit and next step, the rest folded ---------- */
.sheet .body.jd { gap: 14px; padding-bottom: 0 }
.jd-church { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center }
.jd-church .avatar { width: 48px; height: 48px; font-size: 16px }
.jd-church b { display: block; font-size: 17px } .jd-church span { font-size: 13.5px; color: var(--muted) }
.jd-meta { margin: -6px 0 0 60px; font-size: 13.5px; color: var(--ink-2) } .jd-meta a { color: var(--ink-2) }
.jd-role { border-top: 1px solid var(--line); padding-top: 14px }
.jd-role h2 { font-size: clamp(30px, 4vw, 40px) } .jd-role p { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px }
.jd-fit { display: grid; gap: 6px }
.jd-bar { height: 8px; border-radius: 4px; background: var(--bg-2); overflow: hidden } .jd-bar div { height: 100%; background: var(--match-ink); border-radius: 4px }
.jd-score { margin: 0; font-size: 14.5px; color: var(--ink-2) } .jd-score b { font: 600 20px var(--serif); color: var(--ink) }
.jd-lift { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 9px 12px; border-radius: 12px; background: var(--match); color: var(--match-ink); font-size: 14px }
.jd-lift b { font-weight: 700 } .jd-lift .linkish { color: var(--match-ink) }
.shimmer-text { color: var(--muted) }
.jd-sg { margin: 0; font-size: 13.5px; color: var(--ink-2) } .jd-sg .ok { color: var(--match-ink); font-weight: 600 } .jd-sg .gap { color: var(--no); font-weight: 600 }
.jd-next { display: grid; gap: 3px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line) }
.jd-next small { font: 600 10.5px var(--f); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.jd-next b { font-size: 16px } .jd-next span { font-size: 13.5px; color: var(--ink-2) } .jd-next .more-steps { color: var(--muted) }
.folds { display: grid; border-top: 1px solid var(--line) }
.fold { border-bottom: 1px solid var(--line) }
.fold summary { display: flex; align-items: center; gap: 10px; padding: 15px 2px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15.5px; min-height: 48px }
.fold summary::-webkit-details-marker { display: none }
.fold summary small { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--muted) }
.fold summary i { font-style: normal; color: var(--muted); font-size: 20px; transition: transform .15s; margin-left: 4px } .fold summary small + i { margin-left: 4px }
.fold summary span + i { margin-left: auto }
.fold[open] summary i { transform: rotate(90deg) }
.fold-body { display: grid; gap: 12px; padding: 0 2px 16px }
.jd-foot { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; margin: 4px -28px 0; padding: 12px 28px calc(14px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line) }
.jd-foot > * { flex: 1; justify-content: center } .jd-foot .share { flex: 0 0 auto }
@media (max-width: 760px) {
  .jd-foot { margin: 4px -18px 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) }
  .jd-meta { margin-left: 0 }
}

/* ===== apply.church · Daylight =====
   Church and ministry jobs, on your terms. Bright white with sky-blue panes, ink text, a deep teal for
   actions and sun yellow for what's lit: a saved role, a just-posted job. Bricolage Grotesque headings,
   Figtree for everything else. Pill buttons, rounded panes, and one slanted patch of light on the
   front page. Text pairs were checked to WCAG AA (4.5:1). */
:root {
  --bg: #FFFFFF; --bg-2: #EAF4FF; --surface: #FFFFFF; --line: #D5E3F2; --line-2: #8A9099;
  --ink: #1B2433; --ink-2: #4B5566; --muted: #4B5566;
  --accent: #0E6B6B; --accent-ink: #FFFFFF; --accent-soft: #E3F2F1; --accent-deep: #0A5252;
  --green: #0E6B6B; --green-2: #0A5252; --mustard: #FFC83D; --sage: #EAF4FF; --sand: #EAF4FF; --sky: #EAF4FF;
  --field: #1B2433; --field-2: #26324A; --leaf: #0E6B6B; --field-ink: #D5E3F2;
  --yes: #0E6B6B; --yes-soft: #E3F2F1; --no: #B4442A; --no-soft: #FCE6E0; --warn: #7A4A00; --warn-soft: #FFF3D1;
  --match: #EAF4FF; --match-ink: #1B2433; --heart: #0E6B6B; --tag: #EAF4FF; --tag-ink: #1B2433;
  --sun: #FFC83D; --mark: #FFE9A3; --unknown: #F2F5F9;
  --shadow: 0 20px 50px -36px rgba(27, 36, 51, .45);
  --f: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --mono: var(--f); --script: var(--f);
  --r: 16px;
}
body { background: var(--bg); color: var(--ink); font-family: var(--f) }
h1, h2, h3, .giant, .mark-xl, .word, .stat b, .scene h2, .manifesto h2 { font-family: var(--serif); font-weight: 800; letter-spacing: -0.04em }
.eyebrow, .section h3, .facts dt, .slogan, .k { font-family: var(--f) !important; font-weight: 700 !important; letter-spacing: .12em !important; color: var(--ink-2) }
.script { font: 700 20px/1.4 var(--serif); letter-spacing: -0.02em; color: var(--ink) }

/* logo: apply, a window with one lit pane for the dot, church in teal */
.wordmark { display: inline-flex; align-items: center; font: 800 26px/1 var(--serif); letter-spacing: -0.05em; color: var(--ink); white-space: nowrap }
.wordmark .ch { font-weight: 500; letter-spacing: -0.03em; color: var(--accent) }
.pd { display: inline-grid; grid-template-columns: 1fr 1fr; gap: .045em; padding: .045em; background: var(--ink); border-radius: .1em; margin: 0 .07em; align-self: flex-end; margin-bottom: .1em }
.pd i { width: .14em; height: .14em; border-radius: .03em; background: var(--bg-2) } .pd i.lit { background: var(--sun) }
.demo-tag { font: 700 10px/1 var(--f) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--ink) !important; background: var(--sun) !important; border: 0; padding: 5px 8px; border-radius: 99px }
.topbar .demo-tag { margin-left: auto }

/* evidence, notes, unknowns */
mark { background: var(--mark); color: var(--ink); padding: 0 .12em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone }
.mnote, .hero p.mnote { font: 600 15px/1.45 var(--f) !important; color: var(--ink) !important; border-left: 4px solid var(--sun); padding: 2px 0 2px 12px; margin: 10px 0 0; max-width: 46ch }
.unk, .chip.pay-unclear { display: inline-block; border: 1px dashed var(--line-2) !important; background: var(--unknown) !important; color: var(--ink-2) !important; border-radius: 99px !important; padding: 1px 9px; font-weight: 600 }
.chip.pay-posted { background: var(--bg-2) !important; color: var(--ink) !important; border: 0 !important; border-radius: 99px !important; font-weight: 700; font-variant-numeric: tabular-nums }
.matchpill { background: var(--accent-soft) !important; color: var(--accent-deep) !important; border: 0; border-radius: 99px !important; font: 700 13px var(--f) !important }
.wants li { border-radius: 12px !important; background: var(--bg-2) !important; border: 0 }
.wants li.have::before { content: "✓"; color: var(--accent) !important }
.wants li.miss::before { content: "◐"; color: var(--warn) !important }

/* surfaces and controls */
.card { border: 1px solid var(--line); background: var(--surface); border-radius: 22px }
.card, .panel, .leadcard, .kit, .fold, .jd-next, .jobrow { box-shadow: none !important }
.btn { background: var(--accent); color: var(--accent-ink); border-radius: 99px !important; box-shadow: none !important; font-weight: 700 }
.btn:hover { background: var(--accent-deep); color: var(--accent-ink) }
.ghost { border-radius: 99px !important; border: 1.5px solid var(--ink) !important; color: var(--ink); background: transparent }
.ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.chip { border-radius: 99px }
.act { border-radius: 99px }
select, input[type="url"], input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], textarea { border-radius: 12px !important; border-color: var(--line-2) !important; background: var(--surface) }
:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px }
.nav button[aria-current="page"] { background: var(--ink); color: var(--bg); box-shadow: none }
.nav button[aria-current="page"] b, .nav b { background: var(--sun); color: var(--ink) }
.round.yes { background: var(--accent) !important; color: #fff !important }
.round { box-shadow: 0 0 0 1px var(--line) !important }
.jd-bar div { background: var(--accent) !important }
.jd-score small { color: var(--ink-2); font-weight: 400 }
.avatar { background: var(--sun) !important; color: var(--ink) !important; font-family: var(--serif) }
.phone { background: var(--ink) !important; box-shadow: 0 30px 60px -40px rgba(27, 36, 51, .5) !important }
.phone .screen::before { background: var(--ink) !important }

/* front page: left copy, live panes on the right, a slanted patch of light behind */
.land-hero { position: relative; overflow: hidden; background: var(--bg) !important; border-radius: 0 !important; text-align: left; padding-top: 56px }
.land-hero::before { content: ""; position: absolute; top: -20%; right: 18%; width: 300px; height: 150%; background: var(--sun); opacity: .16; transform: skewX(-18deg); pointer-events: none }
.land-hero .hero-grid { position: relative; align-items: center }
.land-hero .lede { font: 700 13px/1.3 var(--f) !important; letter-spacing: .12em !important; color: var(--accent) !important }
.land-hero .mark-xl { font-size: clamp(42px, 5.4vw, 74px) !important; line-height: .98 !important; letter-spacing: -0.045em !important; max-width: 13ch }
.land-hero .tag { font-size: clamp(17px, 1.5vw, 20px) !important; max-width: 40ch !important; color: var(--ink-2) }
.land-hero .note b { color: var(--warn) }
.hero-cta { gap: 12px; align-items: center }
.hero-feed { display: flex; flex-direction: column; gap: 12px; min-width: 0; width: min(100%, 520px); justify-self: end }
.hero-feed .eyebrow { display: inline-flex; align-items: center; gap: 8px }
.hero-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.hero-panes .pn { display: flex; flex-direction: column; gap: 3px; text-align: left; background: var(--bg-2); border: 0; border-radius: 18px; padding: 16px 18px; font: 400 14.5px/1.35 var(--f); color: var(--ink-2); cursor: pointer; min-width: 0; min-height: 132px }
.hero-panes .pn:hover { box-shadow: inset 0 0 0 2px var(--accent) }
.hero-panes .pn small { font: 700 11px/1.2 var(--f); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2) }
.hero-panes .pn b { font: 800 18px/1.15 var(--serif); letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere }
.hero-panes .pn em { font-style: normal; font-weight: 700; color: var(--ink); margin-top: auto }
.hero-panes .pn.lit { background: var(--sun); color: var(--ink) }
.hero-panes .pn.lit small { color: var(--ink) }
@media (prefers-reduced-motion: no-preference) { .hero-panes .pn.lit { animation: arrive 1.2s ease-out } }
.counter { border-radius: 99px !important; border: 1px solid var(--line); background: var(--surface) }
.counter .live { background: none !important; width: auto; height: auto }
.live::before { background: var(--accent) }
.manifesto { background: var(--ink) !important; color: var(--bg) !important; border-radius: 28px !important }
.manifesto h2 { color: var(--bg) }
.manifesto .tint, .manifesto .script { color: var(--sun) !important }
.manifesto .private-list li { color: #E6EBF2 !important } .manifesto .private-list li::before { color: var(--sun) !important }
.dots3 i { background: var(--sun) !important }
.g, .giant .g { color: var(--accent) }
.cta-bar { background: color-mix(in srgb, var(--bg) 94%, transparent) }
.scene.s3 { color: var(--ink) }
@media (max-width: 760px) {
  .hero-feed { justify-self: stretch; width: 100% }
  .hero-panes .pn { min-height: 0 }
  .wordmark { font-size: 24px }
}
@media (min-width: 901px) {
  .land-hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 500px) }
  .land-hero .hero-feed { width: 100% }
}
/* every phone mockup keeps the same iPhone proportions, whatever its content */
.phone, .feature .phone { height: auto !important; max-height: none !important; aspect-ratio: 300 / 640 }
.phone .screen, .feature .phone .screen { height: 100% !important; min-height: 0 !important }

/* ===== phones first: the app shell and views at 375 × 812, scaling up =====
   Touch targets at least 44px, 16px inputs, nothing that needs hover, primary actions in thumb reach
   above the bottom bar, and the Daylight look kept throughout. */

/* sign-in and sign-up */
.pass-row { position: relative; display: flex; align-items: center }
.pass-row input { padding-right: 78px !important }
.pass-show { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 64px; border: 0; border-radius: 10px; background: none; color: var(--accent); font-weight: 700; font-size: 15px; cursor: pointer }
.pass-show:focus-visible { outline-offset: -2px }
.welcome-actions { justify-content: center }

/* browse: the Filters button only shows on phones */
.f-toggle { display: none }
.f-more { display: contents }

/* profile: one column on phones; two on wider screens (résumé, then goals beside it) */
.profile-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start }
.profile-grid > .panel { min-width: 0 }
.profile-grid h2.eyebrow { margin: 0; text-wrap: initial }
/* Two column wrappers: on phones they dissolve and the panels follow this order; wider, each column stacks with no gaps. */
.profile-grid > .pf-col { display: contents }
.profile-grid .pf-resume { order: 1 } .profile-grid .pf-goals { order: 2 } .profile-grid .pf-exp { order: 3 }
.profile-grid .pf-alerts { order: 4 } .profile-grid .pf-account { order: 5 }
@media (min-width: 900px) {
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
  .profile-grid > .pf-col { display: flex; flex-direction: column; gap: 20px; min-width: 0 }
}

/* job panel: a top bar with Back and share; the action bar stays at the bottom */
.jd-top { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.jd-top .share { flex: none }
.jd-foot .ghost, .jd-foot .btn { min-height: 48px; justify-content: center; text-align: center }

/* no sticky hover on touch screens: a tapped button doesn't stay "lit" */
@media (hover: none) {
  .ghost:hover { background: transparent; color: var(--ink) }
  .ghost.danger:hover { background: transparent; color: var(--no) }
  .btn:hover { background: var(--accent); color: var(--accent-ink) }
  .act:not([aria-pressed="true"]):hover { border-color: var(--line-2) }
  .jobrow:hover { border-color: var(--line) }
  .nav button:not([aria-current="page"]):hover { background: none; color: var(--ink-2) }
  .hero-panes .pn:hover { box-shadow: none }
  .feed button:hover { border-color: transparent }
  .copy:hover { background: var(--bg-2) }
  .ghost:active, .jobrow:active, .feed button:active, .hero-panes .pn:active { background: var(--bg-2) }
  .btn:active { background: var(--accent-deep) }
}

@media (max-width: 760px) {
  /* reading size and inputs */
  body { font-size: 16px; line-height: 1.5 }
  .note { font-size: 14px } .disclaim { font-size: 13px }
  select, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="url"] { min-height: 50px }
  .chip, .matchpill { white-space: normal; max-width: 100% }

  /* bottom bar: four 52px targets above the home indicator, a clear active state, badges on the icon */
  .rail { padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) }
  .nav { gap: 4px }
  .nav button { min-height: 52px; justify-content: center; gap: 4px; padding: 6px 2px; font-size: 12px; font-weight: 600; border-radius: 14px; color: var(--ink-2) }
  .nav button svg { width: 22px; height: 22px }
  .nav button[aria-current="page"] { background: var(--accent-soft); color: var(--accent-deep); box-shadow: none; font-weight: 800 }
  .nav button[aria-current="page"] svg { stroke-width: 2.3 }
  .nav button b { top: 2px; left: calc(50% + 6px); min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; font: 800 11px/1 var(--f); border-radius: 99px; box-shadow: 0 0 0 2px var(--bg) }
  main { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) }
  main.bleed { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) }

  /* bigger tap targets everywhere */
  .btn, .ghost { min-height: 48px }
  .ghost.small, .btn.small, .share.small, .share.ghostish, .act, .copy { min-height: 44px }
  .act { display: inline-flex; align-items: center }
  .copy { padding: 10px 14px }
  .checklist label { min-height: 44px }
  .phone .btn, .phone .ghost, .phone .act, .phone .chip { min-height: 0 }   /* front-page screenshots keep their drawn size */
  .phone .checklist label { min-height: 0 }

  /* front page */
  .hero-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100% }
  .hero-cta .btn, .hero-cta .ghost { width: 100%; min-height: 52px; font-size: 16px; justify-content: center }
  .land-hero .tag { font-size: 17px !important }
  .feature-copy p:last-child { font-size: 16px; line-height: 1.6 }
  .manifesto { margin: 12px; padding: 52px 20px }
  .private-list li { font-size: 16px }
  .start { padding: 48px 16px 28px; gap: 20px }
  .start .giant { font-size: clamp(38px, 11vw, 48px) }
  .welcome-actions { display: grid; width: 100%; gap: 10px; justify-content: stretch }
  .welcome-actions > * { width: 100%; min-height: 52px; justify-content: center }
  body.out .cta-bar .btn { min-height: 52px; font-size: 16px }

  /* the sign-up / sign-in form */
  .auth { padding: 20px 16px; gap: 14px }
  .auth .field > label { font-size: 15px }
  .auth-actions { display: grid; justify-items: center; gap: 6px }
  .auth-actions .btn { width: 100%; min-height: 54px; font-size: 16.5px }
  .auth .note .linkish, .auth .linkish { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 15px }

  /* browse: a sticky search bar, with role, state and sort behind Filters */
  .wrap .filters, .wrap .filters:has(#f-sort) { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; background: var(--bg); padding: 8px 0 10px }
  .wrap .filters:has(#f-q) #f-q { grid-column: 1 }
  .f-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer }
  .f-toggle b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--sun); color: var(--ink); font-size: 12px; display: grid; place-items: center }
  .f-toggle b:empty { display: none }
  .f-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s }
  .filters.open .f-toggle::after { transform: translateY(2px) rotate(-135deg) }
  .filters.open .f-toggle { border-color: var(--ink) }
  .f-more { display: none }
  .filters.open .f-more { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
  .filters.open .f-more #f-sort { grid-column: 1 / -1 }
  .jobrows { gap: 10px }
  .jobrow { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 16px; min-height: 76px; border-radius: 16px }
  .jobrow b { font-size: 17.5px; line-height: 1.25 }
  .jobrow .sub { grid-column: 1; grid-row: 2; font-size: 14.5px; color: var(--ink-2) }
  .jobrow .right { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; justify-items: start; justify-content: flex-start; align-items: center; gap: 6px 10px; font-size: 13.5px }
  .browse-more .ghost { width: 100%; min-height: 50px; justify-content: center }

  /* saved: the three lists and the stage picker as large segmented controls */
  .saved-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; border-radius: 16px }
  .saved-tabs button { min-height: 46px; padding: 6px 4px; font-size: 14.5px; border-radius: 12px; text-align: center }
  .leadcard { padding: 16px; gap: 14px; border-radius: 20px }
  .leadcard h3 { font-size: 22px; line-height: 1.15 }
  .stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--bg-2) }
  .stages button { min-height: 46px; padding: 6px 4px; border: 0; border-radius: 12px; background: transparent; font-size: 14.5px; color: var(--ink-2) }
  .stages button[aria-pressed="true"] { background: var(--surface); border: 0; color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); font-weight: 800 }
  .lead-prep .btn { width: 100%; min-height: 52px; font-size: 16px; text-align: center }
  .lead-more { gap: 8px }
  .lead-more > * { flex: 1 1 auto; justify-content: center }
  .checklist > li { padding: 12px 14px }

  /* job details: a full-screen sheet, Back pinned at the top, the actions pinned at the bottom */
  .sheet { align-items: stretch; justify-items: stretch; background: var(--bg); backdrop-filter: none }
  .sheet .body, .sheet .body.jd { width: 100%; height: 100%; height: 100dvh; max-height: none; border-radius: 0; padding: 0 16px; gap: 16px; animation: sheet-up .2s ease-out }
  .sheet .body::before { display: none }
  .jd-top { position: sticky; top: 0; z-index: 3; margin: 0 -16px; padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line) }
  .jd-top .close { min-height: 44px; padding: 0 16px; font-size: 15px }
  .jd-top .share { min-height: 44px }
  .jd-meta a { display: inline-block; padding: 6px 0 }
  .jd-role h2, .sheet h2 { font-size: 28px }
  .fold summary { min-height: 52px; font-size: 16px }
  .posting { font-size: 15.5px; line-height: 1.6 }
  .sheet .jd #sh-actions { position: sticky; bottom: 0; z-index: 3; display: flex; gap: 8px; align-items: stretch; margin: 4px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line) }
  .sheet .jd #sh-actions > * { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 6px 8px; justify-content: center; text-align: center; font-size: 15px; line-height: 1.15; white-space: normal }
  .sheet .jd #sh-actions > .btn { flex-grow: 1.35 }

  /* profile */
  .profile-grid { gap: 14px }
  .profile-grid > .panel { padding: 18px 16px; border-radius: 20px }
  .pf-account .btn { width: 100% }
  .pf-danger { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px }
  .pf-danger > * { width: 100%; justify-content: center }
  .drop { min-height: 120px; padding: 22px 16px }
}
@media (max-width: 360px) {
  .hero-panes { grid-template-columns: minmax(0, 1fr) }
  .saved-tabs button, .stages button { font-size: 13.5px }
}
@media (prefers-reduced-motion: reduce) { .f-toggle::after { transition: none } }

/* Swipe / List toggle above the deck and the matches list */
.view-toggle { justify-self: center }
.mfeed .head .view-toggle { align-self: center }