/* SashBoard's own website (sashboard.html): graphite and gold, Figtree. Not a pageant's brand. */
:root {
  --ink: #1d1c1a; --ink-2: #3c3a36; --muted: #6f6b63; --line: #e4e0d7; --paper: #faf9f6; --card: #ffffff;
  --gold: #b49b57; --gold-deep: #7e6a33; --gold-soft: #f3eedf; --night: #1d1c1a; --night-2: #2a2825;
  --radius: 18px; --shadow: 0 18px 50px rgba(29, 28, 26, .12);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #f2efe8; --ink-2: #d9d4c9; --muted: #a39d91; --line: #34322e; --paper: #141311; --card: #1d1c1a; --gold-soft: #2a2620; --gold-deep: #d6c79e; --shadow: 0 18px 50px rgba(0, 0, 0, .4); color-scheme: dark; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--paper); }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--card); padding: .5rem .8rem; border-radius: 8px; }
.kicker { margin: 0 0 .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.fine { font-size: .82rem; color: var(--muted); margin: .9rem 0 0; }
.center { text-align: center; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .7rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent; font: inherit; font-weight: 700; font-size: .98rem; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 40px; padding: .45rem 1rem; font-size: .9rem; }
.btn-gold { background: var(--gold); color: #1d1c1a; }   /* ink on gold: 6.3:1 */
.btn-gold:hover { background: #c2ab6b; }
.btn-ghost { border-color: color-mix(in srgb, currentColor 35%, transparent); background: transparent; color: inherit; }
.btn-ghost:hover { border-color: currentColor; }
.btn.wide { width: 100%; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 60%, transparent); outline-offset: 2px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); background: color-mix(in srgb, var(--night) 88%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); color: #fff; border-bottom: 1px solid rgba(180, 155, 87, .25); }
.nav-in { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.mark { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; }
.mark-sash { width: 30px; height: 30px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(180, 155, 87, .45); }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; } .nav-links a { text-decoration: none; opacity: .82; font-weight: 600; font-size: .95rem; } .nav-links a:hover { opacity: 1; }
.nav-cta { display: flex; align-items: center; gap: 1rem; } .nav-cta .link { text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .85; }
/* The full row of links only where it fits on one line; narrower, the Menu (below). */
.nav-links a, .nav-cta a { white-space: nowrap; }
@media (max-width: 900px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }

/* Hero */
.hero { background: radial-gradient(700px 360px at 85% 10%, rgba(180, 155, 87, .28), transparent 70%), linear-gradient(180deg, var(--night), var(--night-2)); color: #fff; overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: center; padding-block: 4.5rem 3rem; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 800; }
/* The slogan's second line (2026-10-13): what SashBoard is, in gold under "Everything behind the crown." */
.hero .tagline { margin: .7rem 0 0; font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 700; line-height: 1.25; color: var(--gold); text-wrap: balance; }
.hero .tagline + .lede { margin-top: .9rem; }
.lede { font-size: 1.15rem; opacity: .82; max-width: 34rem; margin: 1.1rem 0 1.6rem; }
.hero-cta { display: flex; gap: .7rem; flex-wrap: wrap; }
.hero .fine { color: rgba(255, 255, 255, .62); }
.phones { position: relative; height: 560px; }
.phone { margin: 0; position: absolute; width: 230px; aspect-ratio: 390 / 844; border-radius: 34px; padding: 7px; background: #0e0d0c; box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 28px; }
.phones .p1 { left: 0; top: 70px; transform: rotate(-7deg); }
.phones .p2 { left: 50%; top: 0; margin-left: -115px; z-index: 2; }
.phones .p3 { right: 0; top: 70px; transform: rotate(7deg); }
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; padding-block: 3rem 0; }
  .phones { height: 420px; margin-top: .5rem; }
  .phone { width: 180px; border-radius: 28px; } .phone img { border-radius: 22px; }
  .phones .p2 { margin-left: -90px; }
  .phones .p1 { left: 2%; top: 60px; } .phones .p3 { right: 2%; top: 60px; }
}
@media (max-width: 420px) { .phones { height: 360px; } .phone { width: 150px; } .phones .p2 { margin-left: -75px; } .phones .p1 { left: -4%; } .phones .p3 { right: -4%; } }

/* Sections */
section { scroll-margin-top: 72px; }
.sec-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; text-align: center; margin-bottom: .6rem; }
.sec-sub { text-align: center; color: var(--muted); max-width: 40rem; margin: 0 auto 1.6rem; }
.who { padding-block: 4.5rem 2rem; }
.who-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.who-grid article { padding: 1.2rem 1.1rem; border-top: 3px solid var(--gold); background: var(--card); border-radius: 0 0 14px 14px; }
.who-grid h3 { font-size: 1.05rem; margin-bottom: .4rem; } .who-grid p { margin: 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 980px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .who-grid article:last-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .who-grid { grid-template-columns: 1fr; } }

.showcase { display: grid; grid-template-columns: auto 1fr; gap: 3rem; align-items: center; margin-top: 4rem; padding: 2.5rem; border-radius: 28px; background: linear-gradient(135deg, var(--gold-soft), var(--card) 70%); border: 1px solid var(--line); }
.showcase .phone { position: relative; width: 240px; box-shadow: var(--shadow); }
.showcase h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .7rem; } .showcase p { color: var(--muted); max-width: 32rem; }
@media (max-width: 760px) { .showcase { grid-template-columns: 1fr; padding: 1.6rem; gap: 1.6rem; justify-items: center; text-align: center; } .showcase .phone { width: 200px; } }

/* Pricing */
.pricing { padding-block: 4.5rem; background: var(--card); border-block: 1px solid var(--line); }
.period { display: flex; width: max-content; margin: 0 auto 2rem; padding: 4px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); }
.period button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .92rem; padding: .55rem 1.1rem; border-radius: 999px; color: var(--muted); cursor: pointer; min-height: 40px; }
.period button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.period em { font-style: normal; font-size: .76rem; color: var(--gold); margin-left: .25rem; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; max-width: 820px; margin: 0 auto; }
.plan { position: relative; display: flex; flex-direction: column; padding: 1.7rem 1.5rem; border-radius: 22px; border: 1px solid var(--line); background: var(--paper); }
.plan.best { border: 2px solid var(--gold); background: var(--card); box-shadow: var(--shadow); }
.flag { position: absolute; top: -13px; left: 1.5rem; margin: 0; padding: .2rem .7rem; border-radius: 999px; background: var(--gold); color: #1d1c1a; font-size: .75rem; font-weight: 800; letter-spacing: .04em; }
.plan h3 { font-size: 1.25rem; }
.price { margin: .6rem 0 .2rem; } .price b { font-size: 2.6rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .price span { color: var(--muted); font-weight: 600; }
.plan-for { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; }
.plan ul { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .55rem; flex: 1; align-content: start; }
.plan li { position: relative; padding-left: 1.6rem; font-size: .94rem; }
.plan li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.plan li.fee { color: var(--muted); } .plan li.fee::before { border: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transform: none; top: .5em; left: 3px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } .plan.best { order: -1; } }

/* Start */
.start { padding-block: 4.5rem; }
.start-in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: start; }
.start h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin-bottom: 1rem; }
.start-copy p { color: var(--muted); }
.steps { margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: .8rem; }
.steps li { counter-increment: s; display: flex; gap: .8rem; align-items: center; font-weight: 600; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); font-weight: 800; font-size: .9rem; }
.start-form { padding: 1.8rem; border-radius: 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.field { display: grid; gap: .35rem; margin-bottom: 1rem; min-width: 0; }
.field label { font-weight: 700; font-size: .88rem; }
.field input, .field select { width: 100%; min-height: 48px; padding: .6rem .85rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
.field input:focus, .field select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-msg { margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: 12px; background: #fdecea; color: #8c2a20; font-size: .9rem; }
.sent { text-align: center; padding: 1rem 0 .2rem; } .sent h3 { font-size: 1.4rem; margin-bottom: .4rem; } .sent p { color: var(--muted); margin: 0; }
.start-form.done > :not(.sent) { display: none; }
@media (max-width: 860px) { .start-in { grid-template-columns: 1fr; gap: 1.8rem; } .start-form { padding: 1.3rem; } }
@media (max-width: 420px) { .row { grid-template-columns: 1fr; gap: 0; } }

/* FAQ */
.faq { padding-block: 1rem 5rem; }
.faq-in { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.1rem 2rem 1.1rem 0; font-weight: 700; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 400; color: var(--gold); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 1.2rem; color: var(--muted); }

/* Footer */
.foot { background: var(--night); color: #fff; padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom)); }
.foot-in { display: grid; gap: 1rem; }
.foot nav { display: flex; gap: 1.4rem; flex-wrap: wrap; } .foot nav a { text-decoration: none; opacity: .75; font-size: .92rem; }
.foot .fine { color: rgba(255, 255, 255, .5); max-width: 46rem; }

/* Confirming (from the email link) */
.confirm { min-height: 70vh; display: grid; place-items: center; }
.confirm[hidden] { display: none; }
.confirm-in { width: 100%; display: grid; place-items: center; padding-block: 4rem; }
.confirm-card { max-width: 460px; text-align: center; padding: 2.4rem 2rem; border-radius: 26px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.confirm-card h2 { font-size: 1.8rem; margin-bottom: .6rem; } .confirm-card p { color: var(--muted); margin: 0 0 1.4rem; }
.spinner { width: 34px; height: 34px; margin: 0 auto 1.2rem; border-radius: 50%; border: 3px solid var(--gold-soft); border-top-color: var(--gold); animation: spin .8s linear infinite; }
.spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
body.confirming main > section:not(.confirm) { display: none; }

/* Hero: the ribbon plays once over the dark hero (its black melts away), and the App Store note. */
.hero-ribbon { display: block; width: 92px; height: auto; margin: 0 0 1rem -6px; mix-blend-mode: screen; }
.soon { display: inline-flex; align-items: center; gap: .5rem; margin: 1.1rem 0 0; padding: .4rem .85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: .82rem; font-weight: 600; color: rgba(255, 255, 255, .78); }
.soon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(180, 155, 87, .2); }
.hero .fine a { color: #fff; }

/* Request a demo */
.demo { padding-block: 4.5rem; background: var(--card); border-block: 1px solid var(--line); scroll-margin-top: 64px; }
.demo-in { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; }
.demo h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin-bottom: .8rem; }
.demo-copy > p { color: var(--muted); }
.demo-points { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.demo-points li { position: relative; padding-left: 1.7rem; font-weight: 600; }
.demo-points li::before { content: ""; position: absolute; left: .1rem; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.walk-form h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.muted-p { color: var(--muted); margin: 0 0 1.2rem; font-size: .95rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field textarea { width: 100%; padding: .6rem .85rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; resize: vertical; }
.field textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.opt { font-weight: 400; color: var(--muted); }
.start-form.done > :not(.sent) { display: none; }
@media (max-width: 860px) { .demo-in { grid-template-columns: 1fr; gap: 2rem; } }

/* Safety */
.safety { padding-block: 4.5rem 3rem; }
.safe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.safe-grid article { padding: 1.3rem 1.3rem 1.2rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold); }
.safe-grid h3 { font-size: 1.05rem; margin-bottom: .4rem; } .safe-grid p { margin: 0; font-size: .92rem; color: var(--muted); }
@media (max-width: 900px) { .safe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .safe-grid { grid-template-columns: 1fr; } }
.faq details a, .safety a { color: var(--gold-deep); }

/* Contact */
.contact { padding-block: 1rem 5rem; }
.contact-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; max-width: 980px; }
.contact h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); font-weight: 800; margin-bottom: .7rem; } .contact-in > div p { color: var(--muted); }
@media (max-width: 860px) { .contact-in { grid-template-columns: 1fr; gap: 1.5rem; } }
.foot-guides a { font-size: .84rem !important; opacity: .55 !important; }
/* Social links (2026-10-13): icon buttons, the name beside each on wider screens */
.foot .foot-social { gap: .6rem; }
.foot .foot-social a { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .9rem 0 .7rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; opacity: .85; }
.foot .foot-social a:hover, .foot .foot-social a:focus-visible { opacity: 1; border-color: var(--gold, #b49b57); color: var(--gold, #b49b57); }
.foot .foot-social svg { flex: none; }

/* Text pages (terms, guides) */
.doc { padding-block: 3.5rem 5rem; }
.doc-in { max-width: 760px; }
.doc h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; margin-bottom: .4rem; }
.doc h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; }
.doc h3 { font-size: 1.08rem; margin: 1.4rem 0 .4rem; }
.doc p, .doc li { color: var(--ink-2); }
.doc ul, .doc ol { padding-left: 1.3rem; display: grid; gap: .45rem; }
.doc a { color: var(--gold-deep); }
.doc-date { color: var(--muted); font-size: .9rem; margin: 0 0 1.6rem; }
.doc .lede-d { font-size: 1.15rem; color: var(--muted); margin: .6rem 0 1.4rem; }
.doc-cta { display: flex; gap: .7rem; flex-wrap: wrap; margin: 2.4rem 0 0; padding: 1.6rem; border-radius: 22px; background: var(--card); border: 1px solid var(--line); align-items: center; justify-content: space-between; }
.doc-cta p { margin: 0; font-weight: 700; color: var(--ink); }
.doc-cta div { display: flex; gap: .6rem; flex-wrap: wrap; }
.doc-cta .btn-ghost { color: var(--ink); }
.page-hero { background: radial-gradient(700px 360px at 85% 10%, rgba(180, 155, 87, .28), transparent 70%), linear-gradient(180deg, var(--night), var(--night-2)); color: #fff; }
.page-hero .wrap { padding-block: 4rem 3.2rem; max-width: 900px; }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; }
.page-hero .lede { margin-bottom: 1.4rem; }
.page-hero .hero-cta .btn-ghost { color: #fff; }
.sb-sections { padding-block: 3.5rem 1rem; }
.sb-sections .wrap { max-width: 900px; display: grid; gap: 2.2rem; }
.sb-sec { display: grid; grid-template-columns: 210px 1fr; gap: 1.6rem; align-items: start; }
.sb-sec h2 { font-size: 1.25rem; margin: 0; }
.sb-sec p { margin: 0 0 .6rem; color: var(--ink-2); } .sb-sec ul { margin: .2rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; color: var(--ink-2); }
@media (max-width: 700px) { .sb-sec { grid-template-columns: 1fr; gap: .5rem; } }
.related { padding-block: 1rem 4rem; }
.related .wrap { max-width: 900px; }
.related h2 { font-size: 1.1rem; margin-bottom: .8rem; }
.related nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.related a { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); text-decoration: none; font-size: .9rem; font-weight: 600; }
.related a:hover { border-color: var(--gold); }

/* Sound familiar? The problem, then what changes. */
/* Miss Nebo's story (2026-10-13): real facts only; quotes go in when the people quoted have said yes */
.story { padding-block: 4rem; background: var(--gold-soft); }
.story-eyebrow { text-align: center; margin: 0 0 .4rem; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.story-facts { list-style: none; padding: 0; margin: 1.4rem auto 2rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 52rem; }
.story-facts li { display: grid; gap: .2rem; justify-items: center; text-align: center; }
.story-facts b { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.story-facts span { font-size: .9rem; color: var(--muted); max-width: 14rem; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; max-width: 60rem; margin: 0 auto; }
.story-col { padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.story-col h3 { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.story-col.now h3 { color: var(--gold-deep); }
.story-col ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; font-size: .96rem; color: var(--ink-2); }
.story-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; max-width: 60rem; margin: 1.2rem auto 0; }
.story-quote { margin: 0; padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.story-quote p { font-size: 1.05rem; color: var(--ink); margin: 0 0 .8rem; }
.story-quote footer { font-size: .86rem; color: var(--muted); }
@media (max-width: 760px) {
  .story { padding-block: 3rem; }
  .story-facts { grid-template-columns: 1fr; gap: 1.1rem; }
  .story-grid, .story-quotes { grid-template-columns: 1fr; }
}

/* ---- Phones (2026-10-12) ----
   A Menu for the sections, long card lists as rows you swipe (a sliver of the next card shows),
   the next step kept in reach at the bottom, and links big enough for a thumb. */
.nav-menu { display: none; }
.nav-sheet { display: none; }
.mcta { display: none; }
.rail-dots { display: none; }
@media (max-width: 900px) {
  .nav-in { gap: .8rem; }
  .nav-cta { gap: .5rem; }
  .nav-cta .link { padding: .7rem .35rem; }
  .nav-menu { display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; }
  .nav-menu span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease; }
  .nav-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav-sheet:not([hidden]) { display: grid; padding: .3rem max(20px, env(safe-area-inset-left)) 1rem; border-top: 1px solid rgba(255, 255, 255, .08); animation: sheet-in .22s ease both; }
  .nav-sheet a { display: flex; align-items: center; min-height: 48px; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .nav-sheet a:last-child { border-bottom: 0; color: var(--gold); }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(-6px); } }
}
@media (max-width: 420px) { .nav-cta:has(.nav-menu) .link { display: none; } }   /* Sign in is in the Menu */
@media (max-width: 640px) {
  /* Swipe rows: the cards run past the page's edges, and snap into place. */
  .rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: .8rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    margin-inline: -20px; padding: .2rem 20px 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; min-width: 0; }
  .rail-dots { display: flex; justify-content: center; gap: 6px; margin-top: .2rem; }
  .rail-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s, width .2s; }
  .rail-dots i.on { width: 18px; border-radius: 3px; background: var(--gold); }
  .showcase { margin-top: 2.5rem; }
  /* Thumb-sized links in the footer. */
  .foot nav { gap: 0 1.2rem; } .foot nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-guides { display: grid !important; gap: 0 !important; } .foot-guides a { min-height: 40px; }
  /* The next step, at the bottom once past the top. */
  .mcta { display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: .7rem max(16px, env(safe-area-inset-left)) calc(.7rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--night) 90%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border-top: 1px solid rgba(255, 255, 255, .08); color: #fff; transform: translateY(110%); transition: transform .3s cubic-bezier(.2, .9, .25, 1); }
  .mcta .btn { flex: 1; min-height: 46px; padding-inline: .6rem; font-size: .95rem; }
  .mcta .btn-ghost { flex: .85; }
  .mcta.on { transform: none; }
  body.mcta-space .foot { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

/* Sign-ups by request (154): the self-serve form steps aside until they open. */
.by-request #start { display: none; }

/* ---- A season in SashBoard (2026-10-13): the app, step by step as you scroll ----
   Wide screens: the steps scroll past a phone that stays in view; its screen changes with the step in
   the middle, and a large gold sash behind it draws itself with your scrolling (SashMotion).
   Phones: each step shows its own screen. Without scripts, every step reads at full strength. */
.tour { padding-block: 4.5rem 3rem; overflow-x: clip; }   /* the sash behind the phone never widens the page (clip keeps the phone sticky) */
.tour-in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3.5rem; max-width: 64rem; margin: 1.5rem auto 0; }
.tour-steps { list-style: none; padding: 0; margin: 0; }
.tour-step { min-height: 58vh; display: grid; align-content: center; gap: .55rem; }
.tour-steps > .tour-step:first-child { min-height: 46vh; align-content: start; padding-top: 12vh; }
.tour-steps > .tour-step:last-child { min-height: 64vh; }
html.js-tour .tour-step { opacity: .32; transition: opacity .5s ease; }
html.js-tour .tour-step.is-on { opacity: 1; }
.tour-n { font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: var(--gold-deep); font-variant-numeric: tabular-nums; }
.tour-step h3 { font-size: clamp(1.45rem, 2.6vw, 2.05rem); font-weight: 800; line-height: 1.15; text-wrap: balance; }
.tour-step p { color: var(--ink-2); max-width: 30rem; font-size: 1.05rem; margin: 0; }
.tour-inline { display: none; }
.tour-stage { position: sticky; top: calc(50vh - 300px); height: 600px; display: grid; place-items: center; }
.tour-sash { position: absolute; inset: -6% -40%; opacity: .2; pointer-events: none; }
.tour-sash .sb-ribbon { width: 100%; height: 100%; }
.tour .phone.tour-phone { position: relative; width: 270px; z-index: 1; }
.tour-phone img { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); opacity: 0; transform: scale(.985); transition: opacity .55s ease, transform .55s ease; }
.tour-phone img.on { opacity: 1; transform: none; }
.tour-dots { position: absolute; bottom: -4px; left: 0; right: 0; display: flex; justify-content: center; gap: .45rem; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .3s ease, transform .3s ease; }
.tour-dots span.on { background: var(--gold); transform: scale(1.3); }
@media (max-width: 860px) {
  .tour-in { grid-template-columns: 1fr; gap: 0; }
  .tour-stage { display: none; }
  .tour-step, .tour-steps > .tour-step:first-child, .tour-steps > .tour-step:last-child { min-height: 0; padding-block: 1.6rem; align-content: start; }
  html.js-tour .tour-step { opacity: 1; }
  .tour .phone.tour-inline { display: block; position: relative; width: min(250px, 66vw); margin: .9rem auto 0; transform: none; }
}

/* ---- Gentle reveals: headings and cards settle in as they reach the screen ----
   Only once scripts are running and motion is allowed (html.js-reveal); never left hidden. */
html.js-reveal .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s), transform .7s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s); }
html.js-reveal .rv.in { opacity: 1; transform: none; }

/* ---- The gold sheen (2026-10-13): a soft light sweeps across the main sign-up buttons every few
   seconds, never on form buttons. Off with Reduce Motion (the global rule stops it). ---- */
.nav .btn-gold, .hero-cta .btn-gold, .mcta .btn-gold, .plan .btn-gold { position: relative; overflow: hidden; isolation: isolate; }
.nav .btn-gold::after, .hero-cta .btn-gold::after, .mcta .btn-gold::after, .plan .btn-gold::after {
  content: ''; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 250, 234, .55) 48%, rgba(255, 255, 255, .15) 54%, transparent 70%);
  transform: translateX(-130%); animation: sb-shine 7s cubic-bezier(.4, 0, .2, 1) 1.8s infinite;
}
.hero-cta .btn-gold::after { animation-delay: 1.2s; }
.plan .btn-gold::after { animation-delay: 3.4s; }
.mcta .btn-gold::after { animation-delay: 2.6s; }
@keyframes sb-shine { 0%, 74% { transform: translateX(-130%); } 92%, 100% { transform: translateX(130%); } }
@media (hover: hover) { .nav .btn-gold:hover::after, .hero-cta .btn-gold:hover::after, .plan .btn-gold:hover::after { animation: sb-shine-now .9s cubic-bezier(.4, 0, .2, 1) 1 both; } }
@keyframes sb-shine-now { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

/* ---- The hero on a phone (2026-10-13): one large phone, the screens beside it peeking in; it moves
   on by itself every few seconds until someone touches it, with ‹ › buttons, swiping, dots and a
   caption. Wider screens keep the three-phone fan. ---- */
.hero-live { display: none; }
@media (max-width: 760px) {
  .phones { display: none; }
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-copy, .hero-live { min-width: 0; }
  .hero-live { display: block; position: relative; margin: 1.6rem calc(-1 * max(20px, env(safe-area-inset-left))) 0; padding-bottom: 1.6rem; }
  .hl-track { display: flex; gap: 16px; margin: 0; padding: 10px calc(50% - 110px) 22px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hl-track::-webkit-scrollbar { display: none; }
  .hl-slide { flex: 0 0 220px; scroll-snap-align: center; scroll-snap-stop: always; }
  .hl-slide .phone { position: relative; width: 220px; border-radius: 32px; transform: scale(.88); opacity: .5; transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .45s ease; }
  .hl-slide .phone img { border-radius: 26px; }
  .hl-slide.on .phone { transform: none; opacity: 1; }
  .hl-btn { position: absolute; top: calc(50% - 46px); z-index: 2; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(29, 28, 26, .7); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); cursor: pointer; transition: transform .15s ease, background .15s ease; }
  .hl-btn:active { transform: scale(.92); background: rgba(180, 155, 87, .85); }
  .hl-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .hl-prev { left: max(14px, env(safe-area-inset-left)); }
  .hl-next { right: max(14px, env(safe-area-inset-right)); }
  .hl-foot { display: grid; justify-items: center; gap: .55rem; }
  .hl-cap { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
  .hl-dots { display: flex; gap: .2rem; }
  .hl-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
  .hl-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: background .3s ease, transform .3s ease; }
  .hl-dot.on::before { background: var(--gold); transform: scale(1.35); }
}

/* The sign-up form's plan choice and billing (2026-10-15). */
.pp-pick { border: 0; padding: 0; margin: 0 0 1rem; display: block; min-width: 0; }
.pp-pick legend { font-weight: 700; font-size: .88rem; padding: 0; margin-bottom: .35rem; }
.pp-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pp { position: relative; display: block; cursor: pointer; }
.pp input { position: absolute; opacity: 0; pointer-events: none; }
.pp span { display: grid; gap: .2rem; min-height: 64px; padding: .8rem .95rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.pp b { font-size: .98rem; } .pp small { color: var(--muted); font-size: .84rem; } .pp em { font-style: normal; font-weight: 700; color: var(--ink); }
.pp em[data-pp-per] { font-weight: 500; color: var(--muted); }
.pp input:checked + span { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.pp input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--gold) 60%, transparent); outline-offset: 2px; }
.pp-bill { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pp-bill-l { font-weight: 700; font-size: .88rem; margin-right: .3rem; }
.pp-bill label { position: relative; cursor: pointer; }
.pp-bill input { position: absolute; opacity: 0; pointer-events: none; }
.pp-bill label span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 600; font-size: .9rem; }
.pp-bill label input:checked + span { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-deep); }
.pp-bill input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--gold) 60%, transparent); outline-offset: 2px; }
.sent-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1rem; margin-top: 1.1rem; }
.sent-acts .link { background: none; border: 0; padding: .4rem; color: var(--gold-deep); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
@media (max-width: 520px) { .pp-row, .start-form .row { grid-template-columns: 1fr; } }

/* ---- Sign-up: their portal beside the form, as they type (2026-10-15) ---- */
.live-phone { margin: 1.8rem 0 0; display: grid; gap: .7rem; justify-items: start; }
.lp-screen { width: 250px; aspect-ratio: 390 / 700; border-radius: 34px; padding: 1rem .85rem; background: #FBF7EC; color: #3D3B37; border: 7px solid #0e0d0c; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .6rem; overflow: hidden; font-size: .8rem; }
.lp-bar { display: flex; align-items: center; gap: .45rem; padding-bottom: .5rem; border-bottom: 1px solid #E7DFCC; }
.lp-bar b, .lp-card b, .lp-hero strong { overflow-wrap: anywhere; }
.lp-bar b { font-size: .86rem; }
.lp-hero { display: grid; gap: .2rem; padding: .8rem; border-radius: 16px; background: #3D3B37; color: #FBF7EC; }
.lp-hero small { color: #d8cfb8; font-size: .66rem; }
.lp-hero strong { font-size: 1.05rem; line-height: 1.15; }
.lp-chip { justify-self: start; margin-top: .3rem; padding: .2rem .55rem; border-radius: 999px; background: #B49B57; color: #fff; font-size: .66rem; font-weight: 700; }
.lp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.lp-tiles span { display: grid; padding: .5rem .6rem; border-radius: 12px; background: #fff; border: 1px solid #E7DFCC; font-size: .66rem; color: #6b675f; }
.lp-tiles i { font-style: normal; font-weight: 800; font-size: .95rem; color: #3D3B37; }
.lp-card { display: grid; gap: .25rem; padding: .7rem; border-radius: 14px; background: linear-gradient(180deg, #F5EEDC, #fff); border: 1px solid #E7DFCC; }
.lp-card small { font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7a6530; }
.lp-card ol { margin: .2rem 0 0; padding-left: 1.1rem; display: grid; gap: .15rem; color: #6b675f; font-size: .7rem; }
.lp-addr { margin-top: auto; text-align: center; font-size: .66rem; color: #6b675f; overflow-wrap: anywhere; }
.lp-addr span { color: #3D3B37; font-weight: 700; }
.live-phone figcaption { font-size: .82rem; color: var(--muted); max-width: 30ch; }
@media (max-width: 860px) { .live-phone { display: none; } }
.lp-hint { display: block; margin-top: .35rem; font-size: .76rem; color: var(--muted); overflow-wrap: anywhere; } .lp-hint b { color: var(--ink-2); }
.start-form .row { align-items: start; }

/* Guides (2026-10-15): the index's cards, tables in a guide, and its questions. */
.guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .8rem; margin-top: .4rem; }
.guide-card { display: grid; gap: .3rem; padding: 1.1rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.guide-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.guide-card strong { font-size: 1.05rem; line-height: 1.25; }
.guide-card span { color: var(--muted); font-size: .9rem; line-height: 1.4; }
.sb-sec.guide-index { grid-template-columns: 1fr; } .guide-index > h2 { display: none; }
.sb-sec .tbl { overflow-x: auto; margin: .6rem 0 1rem; }
.sb-sec table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.sb-sec th, .sb-sec td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.sb-sec th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.guide-faq { padding-block: .5rem 3rem; }
.guide-faq .sec-title { margin-bottom: .6rem; }
.guide-faq p { color: var(--muted); margin: 0 0 1.1rem; }

/* Homepage, less template (2026-10-16): the "why" band on Sash White in both themes, a numbered list
   instead of cards; the rest of the features as a plain two-column list; the founder's note. */
.familiar { padding-block: 4.5rem; background: #fbf7ec; color: #1d1c1a; border-block: 1px solid #e9e1cc; }
.familiar .kicker { color: #7e6a33; }
.familiar-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 3.5rem; align-items: start; }
.familiar-head { position: sticky; top: 96px; }
.familiar-head h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.15; text-wrap: balance; margin: 0 0 1rem; }
.familiar-head p:last-child { color: #57534b; max-width: 30rem; margin: 0; }
.fixes { list-style: none; margin: 0; padding: 0; counter-reset: fix; }
.fixes li { counter-increment: fix; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: .6rem; padding: 1.25rem 0; border-top: 1px solid #e3dac3; }
.fixes li:last-child { border-bottom: 1px solid #e3dac3; }
.fixes li::before { content: counter(fix, decimal-leading-zero); grid-row: span 2; font-weight: 800; font-size: .9rem; color: #7e6a33; font-variant-numeric: tabular-nums; padding-top: .2rem; }
.fixes h3 { font-size: 1.12rem; margin: 0 0 .3rem; }
.fixes p { margin: 0; color: #3c3a36; font-size: .98rem; }
@media (max-width: 860px) { .familiar-in { grid-template-columns: 1fr; gap: 1.6rem; } .familiar-head { position: static; } }

.also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; margin: 2rem auto 0; max-width: 60rem; }
.also > div { padding: 1rem 0; border-top: 1px solid var(--line); }
.also dt { font-weight: 700; margin-bottom: .2rem; }
.also dd { margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 700px) { .also { grid-template-columns: 1fr; } }

.founder { padding-block: 4.5rem; }
.founder-in { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: center; max-width: 54rem; }
.founder-photo { margin: 0; width: 220px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--gold-soft); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin: 0 0 .8rem; }
.founder p { max-width: 38rem; }
.founder-sign { font-weight: 700; color: var(--ink-2); }
@media (max-width: 700px) { .founder-in { grid-template-columns: 1fr; } .founder-photo { width: 140px; } }
/* Icon tiles (demo-miss-utah.html's role buttons) */
.feat-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--gold-soft); }
.feat-ic svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Guides (2026-10-16): the author's byline, a worked example, the founder's note */
.byline { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; font-size: .92rem; color: var(--muted); }
.byline img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.byline a { color: inherit; font-weight: 700; }
.page-hero .byline { color: inherit; opacity: .85; }
.sb-example > div { padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--gold-soft); border: 1px solid var(--line); }
.sb-example > div > p:first-child { margin-top: 0; }
.sb-note { display: flex; gap: .8rem; align-items: flex-start; margin: 0 0 1.1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--line); }
.sb-note img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.sb-note p { margin: 0; font-size: .97rem; }

/* The agreement box on the sign-up form (2026-10-16): a real checkbox, a full tap area */
.agree-line { display: flex; gap: .65rem; align-items: flex-start; margin: .2rem 0 1rem; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.agree-line input { flex: none; width: 22px; height: 22px; margin: .1rem 0 0; accent-color: var(--gold); }
.agree-line a { color: inherit; font-weight: 600; }