/* Entrepreneurs United. A clean white page with one bold accent (varsity red, chosen 2026-10-15).
   Personality comes from the real photos and the handwritten polaroid caption. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo.woff2") format("woff2"); font-weight: 500 900; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --paper: #FFFFFF;
  --ink: #0B0D12;
  --mute: #4A515E;
  --line: #E2E5EB;
  --field: #C5CAD3;
  --accent: #C8102E;      /* buttons and accent text: 5.9:1 with white */
  --accent-deep: #A50D26; /* hover */
  --on-accent: #FFFFFF;
  --pop: #0B0D12;         /* the sticker */
  --on-pop: #FFFFFF;
  --tint: #F1F2F4;        /* light neutral fill: checks, notices, photo panels (no pink: Chad 2026-10-15) */
  --tint-deep: #E3E5E9;
  --deep: #A50D26;        /* the dark red: section bands */
  --ink-soft: #C9CDD6;    /* body text on black and dark red */
  --good: #1A7F45;
  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --display: var(--font-display);
  --body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;
  --wrap: 1240px;
  --wrap-wide: 1720px;   /* grids and cards; text keeps its own measure (Chad's wide-screen rule, 2026-09-01) */
  --r: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
/* Short pages (paid resources, privacy) left the footer floating mid-screen with white below it:
   main takes the spare height so the footer always sits on the bottom edge. */
main { flex: 1 0 auto; display: flex; flex-direction: column; }
main > section:last-child { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 20; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.gut { --gutter: clamp(16px, 4vw, 64px); padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.wrap { max-width: var(--wrap); margin-inline: auto; }
.wrap-wide { max-width: var(--wrap-wide); margin-inline: auto; }

/* ---------- nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); transition: box-shadow .2s ease; }
.nav.scrolled { box-shadow: 0 8px 24px -18px rgba(11,13,18,.45); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--paper); }
[id] { scroll-margin-top: 96px; }
.nav .wrap-wide { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { text-decoration: none; font-family: var(--display); font-weight: 900; font-stretch: 118%; font-size: 17px; letter-spacing: .01em; text-transform: uppercase; line-height: 1; display: flex; flex-direction: column; gap: 2px; }
.brand span:last-child { color: var(--accent); }
@media (max-width: 420px) { .brand { font-size: 14px; font-stretch: 108%; } }
.navright { display: flex; align-items: center; gap: 22px; }
.links { display: flex; align-items: center; gap: 26px; font-weight: 600; font-size: 15px; }
.links a { text-decoration: none; }
.links a:hover { color: var(--accent); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); cursor: pointer; padding: 0; place-content: center; gap: 4px; }
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 860px) {
  .navright { gap: 8px; }
  .nav .wrap-wide { gap: 10px; }
  .nav-toggle { display: grid; }
  .links { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 8; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-block: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(11,13,18,.3); padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  .links.open { display: flex; }
  .links a { padding: 15px 0; font-size: 18px; border-bottom: 1px solid var(--line); }
  .links a:last-child { border-bottom: 0; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 16px var(--body); text-decoration: none; padding: 14px 22px; border-radius: 999px; border: 2px solid var(--ink); white-space: nowrap; cursor: pointer; transition: transform .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-main { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-main:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 420px) { .ctas .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; } }

/* ---------- hero ---------- */
.hero .wrap-wide { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(20px, 5vw, 72px) clamp(40px, 5vw, 72px); }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: var(--tint); border-radius: 999px; padding: 6px 13px; }
h1 { font-family: var(--display); font-weight: 900; font-stretch: 112%; font-size: clamp(44px, 6.6vw, 104px); line-height: .94; letter-spacing: -.02em; margin: 20px 0 0; text-wrap: balance; }
h1 em { font-style: normal; color: var(--accent); display: block; }
.lede { font-size: clamp(18px, 1.6vw, 21px); max-width: 34em; color: var(--mute); margin: 24px 0 0; }
.lede strong { color: var(--ink); font-weight: 650; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fbnote { font-size: 14px; color: var(--mute); margin: 14px 0 0; max-width: 40em; }

/* The founders, part of the page. On wide screens the hero runs to the right edge of the window:
   the text keeps the site's left edge, the photos take the rest. Each photo fades out in a soft
   oval (head solid, shoulders and chest dissolving) so no straight photo edge shows anywhere. */
.hero { position: relative; overflow: hidden; padding-right: 0; }
.hero .wrap-wide { max-width: none; margin-left: max(0px, calc((100% - var(--wrap-wide) - var(--gutter)) / 2)); grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr); align-items: end; gap: clamp(16px, 3vw, 48px); padding-block: clamp(12px, 2vw, 32px) 0; }
.hero .wrap-wide > div:first-child { align-self: center; padding-bottom: clamp(80px, 9vw, 160px); position: relative; z-index: 3; }
.hero h1 { font-size: clamp(42px, 4.7vw, 100px); }
/* The color transition: the bottom of the hero warms through pink into the red section below. It
   sits BEHIND the founders (2026-10-15: painted over them, it cut their bodies off with a pink band);
   each photo fades at its own bottom and shoulders into it instead. */
.hero::after { display: none; content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(140px, 16vw, 280px); z-index: 0; background: linear-gradient(180deg, rgba(252, 237, 239, 0) 0%, var(--tint) 30%, var(--tint-deep) 55%, var(--accent) 100%); pointer-events: none; }
.hero-people { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: 4%; width: 100%; max-width: 1180px; justify-self: center; margin-right: clamp(16px, 3vw, 56px); }
.hero-people::before { display: none; content: ""; position: absolute; left: -8%; right: -8%; top: 30%; bottom: 0; z-index: 0; background: radial-gradient(ellipse 62% 100% at 50% 100%, var(--ink) 0, var(--ink) 34%, rgba(11, 13, 18, .55) 58%, rgba(11, 13, 18, 0) 80%); }
.founder { position: relative; z-index: 1; margin: 0; width: 48%; aspect-ratio: 76 / 100; flex: none; }
.founder img { width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse 54% 120% at 50% 16%, #000 76%, transparent 100%); mask-image: radial-gradient(ellipse 54% 120% at 50% 16%, #000 76%, transparent 100%); transition: transform .5s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 100%; }
.founder-chad img { object-position: 50% 0; }
/* Desktop (Chad, 2026-10-15: "I didn't want the shadow fade, just our normal pictures on desktop,
   mobile looks fine"): the plain cutouts, no fade, each in its own natural shape so nothing crops
   the arms. Seth's cutout is wider (973x995) than Chad's (1365x1792), so the boxes get those
   ratios and widths that keep the two heads the same size (43.8% / 56.2%, no gap: Chad asked for the
   two pictures right next to each other). Phones keep the faded crop. */
@media (min-width: 901px) {
  .hero-people .founder img { -webkit-mask-image: none; mask-image: none; object-fit: contain; object-position: 50% 100%; }
  .hero-people { gap: 0; }
  .hero-people .founder-chad { width: 43.8%; aspect-ratio: 1365 / 1792; }
  .hero-people .founder-seth { width: 56.2%; aspect-ratio: 973 / 995; }
}
.founder-seth { width: 46%; }
.founder-seth img { object-position: 42% 0; }
.founder { overflow: hidden; }
.founder .tag { position: absolute; bottom: 40%; z-index: 5; }
.founder-chad .tag { left: 6%; transform: rotate(-3deg); }
.founder-seth .tag { left: 6%; right: auto; transform: rotate(2deg); }
.tag { z-index: 4; display: grid; background: var(--paper); border-radius: 12px; padding: 8px 13px; font-size: 13px; line-height: 1.25; color: var(--mute); box-shadow: 0 10px 24px -10px rgba(11,13,18,.35); }
.tag b { color: var(--ink); font-family: var(--display); font-weight: 850; font-size: 15px; }
.hero-people .sticker { top: 2%; left: 0; right: auto; z-index: 5; }
@media (hover: hover) {
  .founder:hover img { transform: scale(1.03); }
}
@media (max-width: 900px) {
  .hero { padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .hero .wrap-wide { grid-template-columns: minmax(0, 1fr); margin-left: 0; }
  .hero .wrap-wide > div:first-child { padding-bottom: 8px; }
  .hero-people { max-width: 620px; margin-inline: auto; margin-right: auto; gap: 2%; }
  .founder { width: 49%; }
  .founder-seth { width: 49%; }
  /* Phone (Chad, 2026-10-15: "our bodies got cut off"): the transition painted over 60% of the
     small photos and the crop zoom pushed the shoulders out. No zoom, the fade goes BEHIND the
     founders, and each photo only softens at its own bottom edge, so head, shoulders and chest show. */
  .founder img { transform: none; }
  .founder .tag { bottom: 16%; }
  /* On a phone the sticker would sit on a head or a name tag: park it in the gap between the two heads. */
  /* Chad 2026-10-15: on a phone every spot in the photo block lands on someone's head. The badge only
     repeats the Join free buttons right above it, so phones and tablets go without. */
  .hero-people .sticker { display: none; }
}

/* The red section the hero flows into, then a wave into the pink "week" section (Oma Gourd's seam). */
.fitsec { background: var(--ink); color: var(--on-accent); padding-top: clamp(40px, 5vw, 72px); }
.fitsec .h2 { color: var(--on-accent); }
.fitsec .h2 em { color: var(--accent); }
.fitsec .sub, .fitsec .fit p { color: var(--ink-soft); }
.fitsec .fit div { border-top-color: rgba(255, 255, 255, .85); }
.fitsec .fit h3 { color: var(--on-accent); }
@media (hover: hover) {
  .fitsec .fit div:hover { border-top-color: var(--on-accent); }
  .fitsec .fit div:hover h3 { color: var(--accent); }
}
.seam { display: block; width: 100%; height: clamp(36px, 5vw, 90px); margin-top: -1px; background: var(--deep); }
.seam path { fill: var(--ink); }
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(40px, 5vw, 90px); z-index: 4; display: block; }
.hero-wave path { fill: var(--ink); }

/* The coffee polaroid, now in the About story. */
.board { position: relative; justify-self: center; width: min(100%, 440px); padding: 10px 6px; }
.polaroid { background: #fff; padding: 12px 12px 0; margin: 0; border-radius: 4px; box-shadow: 0 1px 2px rgba(11,13,18,.08), 0 18px 40px -12px rgba(11,13,18,.28); transform: rotate(-2.4deg); }
.polaroid img { aspect-ratio: 480 / 448; width: 100%; object-fit: cover; border-radius: 2px; }
.polaroid figcaption { font-family: var(--hand); font-size: clamp(24px, 6vw, 28px); font-weight: 700; line-height: 1.1; padding: 10px 4px 14px; color: var(--ink); }
.sticker { position: absolute; top: 0; right: 0; z-index: 3; width: clamp(84px, 22vw, 112px); aspect-ratio: 1; border-radius: 50%; background: var(--pop); color: var(--on-pop); display: grid; place-items: center; text-align: center; transform: rotate(9deg); font-family: var(--display); font-weight: 900; font-stretch: 118%; line-height: .95; font-size: clamp(14px, 3.6vw, 19px); text-transform: uppercase; box-shadow: 0 10px 22px -8px rgba(11,13,18,.45); }
.sticker small { display: block; font: 700 clamp(8px, 2vw, 10px) var(--body); letter-spacing: .12em; margin-top: 5px; }
@media (max-width: 900px) {
  .hero .wrap-wide { grid-template-columns: 1fr; }
  .board { width: min(100%, 400px); }
}
@media (max-width: 480px) {
  .tag { padding: 6px 10px; font-size: 12px; }
  .tag b { font-size: 13px; }
}

/* ---------- sections ---------- */
section.block { padding-block: clamp(56px, 7vw, 104px); }
.band { background: var(--deep); color: var(--on-accent); }
.band.dark { background: var(--ink); }
.band .h2, .band .h3, .band .monthly b, .band .checks b { color: var(--on-accent); }
.band .h2 em { color: var(--on-accent); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
.band.dark .h2 em { color: var(--accent); text-decoration: none; }
.band .sub, .band .monthly, .band .checks span { color: var(--ink-soft); }
.band.dark .sub { color: var(--ink-soft); }
.costbox .h3, .band .day h3, .band .person h3, .band .empty h2 { color: var(--ink); }
.h2 { font-family: var(--display); font-weight: 900; font-stretch: 110%; font-size: clamp(32px, 4.2vw, 60px); line-height: .98; letter-spacing: -.015em; margin: 0; text-wrap: balance; max-width: 16em; }
.h2 em { font-style: normal; color: var(--accent); }
.sub { color: var(--mute); max-width: 38em; margin: 16px 0 0; font-size: 18px; }

.fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 40px; }
.fit div { border-top: 3px solid var(--ink); padding-top: 16px; }
.fit h3 { font-family: var(--display); font-weight: 850; font-stretch: 105%; font-size: 22px; line-height: 1.1; margin: 0 0 8px; }
.fit p { margin: 0; color: var(--mute); }
@media (max-width: 860px) { .fit { grid-template-columns: 1fr; } }

.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.day { background: var(--paper); border-radius: var(--r); padding: 26px 24px 24px; display: grid; gap: 8px; align-content: start; }
.day .dn { font-family: var(--display); font-weight: 900; font-stretch: 125%; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.day h3 { font-family: var(--display); font-weight: 800; font-stretch: 105%; font-size: 26px; line-height: 1.05; margin: 0; }
.day p { margin: 0; color: var(--mute); }
.monthly { margin: 22px 0 0; font-size: 15px; color: var(--mute); }
.monthly b { color: var(--ink); }
@media (max-width: 860px) { .days { grid-template-columns: 1fr; } }

.story { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.story .sub + .sub { margin-top: 14px; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }
.founders .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: clamp(40px, 5vw, 64px); }
.person { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 30px); align-items: start; background: var(--paper); border-radius: 18px; padding: clamp(16px, 2vw, 22px); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; }
.shot { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: var(--tint); }
.shot-seth { background: var(--accent); }
.shot img { position: absolute; left: 0; top: 6%; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.shot-chad img { object-position: 50% 0; }
.shot-seth img { object-position: 14% 0; }
.person > div:last-child { padding-top: 6px; }
.side { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.person h3 { font-family: var(--display); font-weight: 900; font-stretch: 110%; font-size: 30px; line-height: 1; margin: 8px 0 10px; }
.person p { margin: 0; color: var(--mute); }
@media (max-width: 980px) { .founders .grid { grid-template-columns: 1fr; } }
@media (max-width: 1280px) { .person { grid-template-columns: 1fr; } .shot { aspect-ratio: 4 / 5; width: 100%; max-width: 340px; } }
@media (max-width: 520px) { .shot { aspect-ratio: 1; } }

/* ---------- hover: cards lift, the accent wakes up ---------- */
@media (hover: hover) {
  .day, .fit div, .person { will-change: transform; }
  .day { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease; box-shadow: 0 0 0 0 transparent; }
  .day:hover { transform: translateY(-6px); box-shadow: 0 18px 34px -18px rgba(11,13,18,.35), inset 0 4px 0 var(--accent); }
  .day .dn { transition: letter-spacing .3s ease; }
  .day:hover .dn { letter-spacing: .16em; }
  .fit div { transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease; }
  .fit div:hover { transform: translateY(-4px); border-top-color: var(--accent); }
  .fit div:hover h3 { color: var(--accent); }
  .person:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -22px rgba(11,13,18,.4); }
  .person:hover .shot img { transform: scale(1.05); }
  .checks li { transition: transform .25s ease; }
  .checks li:hover { transform: translateX(6px); }
  .polaroid { transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease; }
  .polaroid:hover { transform: rotate(0deg) scale(1.02); box-shadow: 0 1px 2px rgba(11,13,18,.08), 0 26px 50px -16px rgba(11,13,18,.35); }
  .faq summary { transition: color .2s ease, padding-left .2s ease; }
  .faq summary:hover { color: var(--accent); padding-left: 6px; }
}

/* ---------- audit ---------- */
.audit .wrap-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.checks svg { width: 28px; height: 28px; }
.checks b { display: block; }
.checks span { color: var(--mute); font-size: 16px; }
.limits { margin: 26px 0 0; font-size: 15px; color: var(--mute); max-width: 36em; }
.formcard { border: 2px solid var(--ink); border-radius: 18px; padding: clamp(20px, 3vw, 32px); background: var(--paper); box-shadow: 8px 8px 0 var(--accent); min-width: 0; }
.formcard h3 { font-family: var(--display); font-weight: 900; font-stretch: 110%; font-size: 26px; margin: 0 0 4px; line-height: 1.05; }
.formcard > p { margin: 0 0 18px; color: var(--mute); font-size: 15px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fields .full { grid-column: 1 / -1; }
label.f { display: grid; gap: 5px; font-weight: 600; font-size: 14px; min-width: 0; }
label.f input { font: 400 16px var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--field); border-radius: 10px; padding: 11px 12px; width: 100%; min-width: 0; }
label.f select, label.f textarea { font: 400 16px var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--field); border-radius: 10px; padding: 11px 12px; width: 100%; min-width: 0; }
label.f textarea { resize: vertical; }
label.f input:focus, label.f select:focus, label.f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 16, 46, .2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.preview .wrap-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.from { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.limits a { color: var(--ink); }
@media (max-width: 980px) { .preview .wrap-wide { grid-template-columns: 1fr; } }
.listing { grid-column: 1 / -1; border: 1.5px dashed var(--field); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.listing.off .picker { display: none; }
.listing-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.listing-top b { font-size: 14px; }
.picker { display: grid; gap: 8px; }
.picker-note { font-size: 14px; color: var(--mute); margin: 0; }
.picker-note.ok { color: var(--good); font-weight: 600; }
.picker-results { display: grid; gap: 6px; }
.pick { text-align: left; font: 400 15px var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.pick:hover { border-color: var(--ink); }
.pick[aria-checked="true"] { border-color: var(--accent); background: var(--tint); }
.pick b { display: block; }
.pick span { color: var(--mute); font-size: 14px; }
.opt { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mute); }
.opt input { margin-top: 4px; accent-color: var(--accent); flex: none; }
.formcard > .opt { margin-top: 14px; }
.formcard .btn-main.wide { width: 100%; justify-content: center; margin-top: 16px; }
.fine { font-size: 13px; color: var(--mute); margin: 12px 0 0; }
.formerr { font-size: 15px; font-weight: 600; color: var(--accent); margin: 12px 0 0; }

.progress { display: grid; gap: 10px; }
.progress h3 { margin: 0; }
.progress p { margin: 0; color: var(--mute); }
.bar { height: 8px; border-radius: 999px; background: var(--tint); overflow: hidden; }
.bar i { display: block; height: 100%; width: 30%; background: var(--accent); border-radius: 999px; animation: slide 1.4s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

.result { margin-top: 40px; }
.result-head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.result-head h3 { font-family: var(--display); font-weight: 900; font-stretch: 110%; font-size: clamp(24px, 3vw, 34px); margin: 0; }
.result iframe { width: 100%; border: 1px solid var(--line); border-radius: var(--r); margin-top: 18px; min-height: 900px; background: var(--paper); }
@media (max-width: 980px) { .audit .wrap-wide { grid-template-columns: 1fr; } .formcard { box-shadow: 6px 6px 0 var(--accent); margin-right: 6px; } }
@media (max-width: 480px) { .fields { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq .list { margin-top: 36px; display: grid; gap: 0; max-width: 60em; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-family: var(--display); font-weight: 800; font-stretch: 105%; font-size: 20px; line-height: 1.2; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 26px; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0 0 20px; color: var(--mute); max-width: 44em; }

/* ---------- closing + footer ---------- */
.closer { background: var(--deep); color: #fff; }
.closer .wrap-wide { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding-block: clamp(48px, 6vw, 80px); }
.closer .h2 { color: #fff; }
.closer .h2 em { color: #fff; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }
.closer .btn-main { background: #fff; color: var(--deep); border-color: #fff; }
.closer .btn-main:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.closer .btn-main { border-color: var(--accent); }
.closer-note { margin: 14px 0 0; color: #fff; max-width: 36em; }
.closer-note a { color: #fff; }
footer { background: var(--ink); }
footer .wrap-wide { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; padding-block: 36px 10px; font-size: 14px; color: var(--ink-soft); }
footer .brand { color: #fff; }
footer nav a { text-decoration: none; font-weight: 600; color: #fff; }
footer nav a:hover { color: var(--accent); }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.st-credit-wrap { text-align: center; padding-block: 10px 28px; }
.st-credit { font-family: ui-monospace, Consolas, monospace; font-size: .75rem; color: var(--accent); text-decoration: none; }
.st-credit:hover { text-decoration: underline; }
.st-wm { font-weight: 700; }

/* ---------- content and resource pages ---------- */
.pagehead .wrap-wide { padding-block: clamp(28px, 5vw, 72px) clamp(8px, 2vw, 24px); }
.pagehead h1 { font-size: clamp(40px, 6vw, 88px); max-width: 14em; }
.pagehead h1 em { display: inline; }
.pagehead .lede a { color: var(--ink); }
.lede, .sub { text-wrap: pretty; }
.disclose { margin: 20px 0 0; max-width: 46em; font-size: 15px; color: var(--mute); background: var(--tint); border-radius: 12px; padding: 12px 16px; }
.disclose b { color: var(--ink); }
section.block.tight { padding-block: clamp(32px, 4vw, 56px); }
.h3 { font-family: var(--display); font-weight: 900; font-stretch: 108%; font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 22px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 980px) { .cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.rcard, .vcard { background: var(--paper); border: 1.5px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rcard h3, .vcard h3 { font-family: var(--display); font-weight: 850; font-stretch: 105%; font-size: 22px; line-height: 1.1; margin: 0; }
.rcard p, .vcard p { margin: 0; color: var(--mute); flex: 1; }
.rcard .btn { margin-top: 6px; }
.kind { font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cardtop { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.aff { font-size: 12px; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.vcard { padding: 0 0 20px; overflow: hidden; }
.vcard h3, .vcard p { padding-inline: 20px; }
.video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: var(--ink); cursor: pointer; overflow: hidden; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .4s ease, opacity .3s ease; }
.play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--accent); box-shadow: 0 10px 26px -8px rgba(0,0,0,.5); transition: transform .25s ease; }
.play::after { content: ""; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent var(--on-accent); }
.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.empty { border: 1.5px dashed var(--field); border-radius: 14px; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; background: var(--paper); }
.empty h2 { font-family: var(--display); font-weight: 850; font-stretch: 105%; font-size: 19px; margin: 0; }
.empty .btn { padding: 9px 16px; font-size: 14px; }
.empty p { margin: 0; color: var(--mute); }
@media (hover: hover) {
  .rcard, .vcard { transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, border-color .3s ease; }
  .rcard:hover, .vcard:hover { transform: translateY(-6px); border-color: var(--ink); box-shadow: 6px 6px 0 var(--accent); }
  .video:hover img { transform: scale(1.04); opacity: 1; }
  .video:hover .play { transform: scale(1.1); }
}

/* ---------- product pages (Seedly CRM, Build, Hyperchat) ---------- */
.product-head .wrap-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.product-head h1 { font-size: clamp(38px, 5vw, 72px); margin-top: 14px; }
.product-head h1 em { display: block; }
.crumb { display: inline-block; font-size: 14px; font-weight: 600; color: var(--mute); text-decoration: none; margin-top: 18px; }
.cardtop.under { margin-top: 16px; }
.crumb::before { content: "\2190  "; }
.crumb:hover { color: var(--accent); }
.price { font-family: var(--display); font-weight: 900; font-stretch: 108%; font-size: 22px; align-self: center; }
.pshot { margin: 0; }
.hero-shot img { max-height: min(72vh, 640px); width: auto; margin-inline: auto; }
.hero-shot.mono img { filter: grayscale(1) contrast(1.08); }
.pshot img { width: 100%; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 24px 50px -28px rgba(11,13,18,.45); background: var(--paper); }
.pshot figcaption { font-size: 13px; color: var(--mute); margin-top: 10px; }
.product-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.product-body .checks { margin-top: 0; }
.costbox { background: var(--paper); border-radius: 18px; padding: clamp(20px, 3vw, 32px); }
.costbox p { margin: 0 0 26px; color: var(--mute); }
.costbox .h3 { font-size: 22px; margin-bottom: 10px; }
.good { margin: 0; padding-left: 20px; color: var(--mute); display: grid; gap: 8px; }
.shots > :only-child { grid-column: 1 / -1; width: 100%; max-width: 1240px; margin-inline: auto; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.rcard .more { font-size: 14px; font-weight: 600; color: var(--ink); }
.rcard .row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 6px; }
@media (max-width: 900px) { .product-head .wrap-wide, .product-body, .shots { grid-template-columns: 1fr; } }

/* ---------- the phone action bar ---------- */
.mobile-cta { display: none; }
@media (max-width: 640px) {
  .mobile-cta { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--ink); padding: 8px max(10px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); box-shadow: 0 -10px 24px -16px rgba(0,0,0,.6); }
  .mobile-cta a { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 10px; border-radius: 999px; font: 700 15px var(--body); text-decoration: none; line-height: 1.15; }
  .mobile-cta .primary { background: var(--accent); color: var(--on-accent); }
  .mobile-cta .ghost { color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
  footer { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- articles: guides and founder notes (ported from WEU at the same paths) ---------- */
.article { max-width: 46em; }
.crumbs { font-size: 14px; color: var(--mute); }
.crumbs a { color: var(--mute); }
.article h1 { font-size: clamp(34px, 4.4vw, 60px); margin-top: 14px; }
.byline { color: var(--mute); font-size: 15px; margin: 14px 0 0; }
.byline a { color: var(--ink); }
.article-body { margin-top: 28px; font-size: 18px; line-height: 1.7; }
.article-body h2 { font-family: var(--display); font-weight: 850; font-stretch: 105%; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; margin: 40px 0 10px; }
.article-body h3 { font-family: var(--display); font-weight: 800; font-size: 21px; margin: 28px 0 8px; }
.article-body p, .article-body li { color: #2A2F38; }
.article-body ul, .article-body ol { padding-left: 1.2em; display: grid; gap: 8px; }
.article-body a { color: var(--accent-deep); }
.article-cta { margin-top: 48px; background: var(--ink); color: #fff; border-radius: 18px; padding: clamp(22px, 3vw, 36px); }
.article-cta h2 { font-family: var(--display); font-weight: 900; font-stretch: 108%; font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 8px; }
.article-cta p { color: var(--ink-soft); margin: 0 0 18px; }
.article-cta .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }

/* ---------- plain pages (privacy) ---------- */
.prose { max-width: var(--wrap-wide); padding-block: clamp(40px, 6vw, 80px); }
.prose > * { max-width: 44em; }
.prose h1 { font-size: clamp(36px, 5vw, 56px); }
.prose h2 { font-family: var(--display); font-weight: 850; font-stretch: 105%; font-size: 24px; margin: 36px 0 8px; }
.prose p, .prose li { color: var(--mute); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; } .btn:hover { transform: none; }
  .bar i { animation: none; width: 100%; opacity: .5; }
  .founder img, .shot img, .day, .fit div, .person, .checks li, .polaroid, .faq summary { transition: none !important; }
  .founder:hover img, .day:hover, .fit div:hover, .person:hover, .checks li:hover, .polaroid:hover { transform: none !important; }
}