/* ========== Same Team — shared styles ========== */
:root{
  --crimson:#264653; --crimson2:#2A9D8F; --bright:#E9A93A;
  --ink:#1F2F36; --muted:#5A6870; --bg:#ffffff; --cream:#FBF8F3;
  --soft:#E6F3F1; --soft2:#FDF1DD; --line:#E3DCD0; --green:#2A7F72;
  --shadow:0 10px 30px rgba(38,70,83,.08);
  --shadow-lg:0 24px 60px rgba(38,70,83,.14);
  --radius:16px;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Fraunces","Georgia",serif;line-height:1.12;margin:0 0 .4em;font-weight:600}
a{color:var(--crimson2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.center{text-align:center}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--crimson2)}
.muted{color:var(--muted)}

/* buttons */
.btn{display:inline-block;background:var(--crimson);color:#fff;border:none;border-radius:12px;
  padding:14px 26px;font-size:16px;font-weight:700;cursor:pointer;transition:.15s;text-decoration:none}
.btn:hover{background:var(--ink);text-decoration:none;transform:translateY(-1px)} /* DAVE S95 28 Sep: was var(--crimson2) teal, white on #2A9D8F = 3.32:1 (Lee L51 BTN-HOVER); ink #1F2F36 keeps white text >= 4.5:1 */
.btn.outline{background:var(--soft);color:var(--crimson);border:2px solid var(--crimson)}
.btn.outline:hover{background:#D7EDEA}
.btn.big{padding:16px 32px;font-size:17px}
.btn.white{background:var(--soft);color:var(--crimson)}
.btn.white:hover{background:#D7EDEA}

/* header */
header.site{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Fraunces",serif;font-weight:600;font-size:22px;color:var(--crimson);text-decoration:none}
.brand:hover{text-decoration:none}
.brand .mark{width:38px;height:38px;flex:none}
.nav-links{display:flex;align-items:center;gap:26px;flex-wrap:nowrap;min-width:0}
/* DAVE #94, 14 Sep 2026 (Keith: "pushed together and all out of symmetry"). THE RULE: the links are
   ONE ROW or they are the menu. They never wrap. Everything below is that rule plus the two sizes it
   needs to keep it true on a 13" laptop. */
.nav-links a{color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap}
.nav-links a:hover{color:var(--crimson2);text-decoration:none}
.nav-links a.active{color:var(--crimson);position:relative}
.nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:3px;background:var(--crimson);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:14px}
.menu-btn{display:none;background:none;border:none;font-size:26px;color:var(--crimson);cursor:pointer}
/* 1181-1440: the 13" laptop band. Tighter gap and a half-point smaller type, so eight links plus the
   right cluster fit one row instead of folding onto three. */
@media(min-width:1181px) and (max-width:1440px){
  .nav-links{gap:22px}
  .nav-links a{font-size:14.5px}
}
/* DAVE 20 Sep 2026 (QUEUE #270, Keith 11:57 CT: the magnifier "sit[s] on top of whatever tab is
   between pricing and log in"). MEASURED CAUSE, not guessed: .nav-links has min-width:0 and the
   default flex-shrink:1, so above 1180 the eight nowrap links are squeezed BELOW their content width
   and spill right, under the CTA cluster. document.elementFromPoint at the FAQ link's centre returned
   BUTTON.st-searchbtn - FAQ was covered AND unclickable, on /answers/* at every width from 1181 up and
   on the root pages from ~1600 up. The magnifier is only the first thing in that cluster: with it
   hidden, "Log in" covers FAQ at 1920 instead, so dropping it would not have fixed this.
   Refusing the shrink is the whole fix. Scoped to 1181+ because below that the links ARE the menu
   (position:absolute), where shrink cannot apply. Overlap 18-46px -> 0 at 1181/1280/1366/1440/1441/
   1600/1920; the CTA cluster stays inside the nav box at every one and page scrollWidth never grows. */
@media(min-width:1181px){
  .nav-links{flex:0 0 auto}
  /* The SAME over-shrink, landing on the other flex child, and it predates #270: with the links
     refusing to shrink the slack comes out of .brand instead, and "Same Team" folds onto two lines.
     Measured before and after #270 on three pages - it wrapped at 1181/1280/1440/1920 on /answers/*
     and at 1920 on the root pages in BOTH states, so this is not caused by the rule above; the rule
     above only moved which child pays. Neither child should pay: the bar is one row or it is the
     menu, which is Keith's own #94 ruling of 14 Sep. */
  header.site .brand{flex:0 0 auto}
  /* Refusing to shrink is only half of it: with nothing shrinking, a bar whose content exactly fills
     the row puts "Same Team" hard against "Home" and FAQ hard against the magnifier. `gap` on the
     flex container is a MINIMUM separation that space-between cannot eat, so 18px is guaranteed on
     both seams. It only fits because the 13" band's tighter values are extended above 1440 here -
     measured, the /answers/* container is 1080px against the root pages' 1120px, and at the wide
     band's 26px/15px the content is 1075px, which leaves 5px for two gaps. Same values as Keith's
     own #94 band, applied to every width where the bar is a row rather than only to the laptop one.
     13px is the largest value that also keeps the CTA cluster inside the narrower container: at 18px
     it hung 10px past the right edge on every /answers/* page (inside the viewport, but outside the
     column everything else lines up with). Result at 1181/1280/1366/1440/1441/1600/1920/2560, both
     container widths: 13px on both seams, 0px overhang, no page scroll. */
  .nav{gap:13px}
  .nav-links{gap:22px}
  .nav-links a{font-size:14.5px}
}
/* THE COLLAPSE POINT IS 1180, NOT 860. Below it the links become the menu rather than squeezing. */
@media(max-width:1180px){
  .nav-links{position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;gap:0;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;padding:8px 0}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:14px 24px}
  .nav-links a.active:after{display:none}
  .menu-btn{display:block}
}
/* "Get started" keeps its own, LOWER breakpoint on purpose: hiding the primary CTA on a 1100px screen
   just because the links collapsed would cost a sale. It goes only where the bar is genuinely tight. */
@media(max-width:860px){
  .nav-cta .btn{display:none}
}

/* hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1200px 400px at 80% -10%, rgba(233,169,58,.18), transparent 60%),
  linear-gradient(135deg,#1B333C 0%,#264653 48%,#2A9D8F 100%);color:#fff;padding:76px 0 84px}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.hero h1{font-size:52px;color:#fff;margin-bottom:18px}
.hero p.lead{font-size:20px;color:#D7EDEA;max-width:560px;margin:0 0 26px}
.hero .form{display:flex;gap:10px;flex-wrap:wrap;max-width:520px}
.hero .form input{flex:1;min-width:220px;padding:15px 16px;border:none;border-radius:12px;font-size:16px}
.hero .subnote{font-size:13.5px;color:#C2E3DE;margin-top:12px}
.hero .art{display:flex;justify-content:center}
.hero .card-float{background:#fff;color:var(--ink);border-radius:20px;box-shadow:var(--shadow-lg);
  padding:22px;max-width:340px;width:100%}
.trust-strip{background:#1B333C;color:#D7EDEA;text-align:center;font-size:14.5px;padding:12px 0}
@media(max-width:860px){.hero .grid{grid-template-columns:1fr}.hero h1{font-size:38px}.hero .art{margin-top:6px}}

/* sections */
section.pad{padding:76px 0}
section.soft{background:var(--cream)}
.section-head{max-width:720px;margin:0 auto 42px;text-align:center}
.section-head h2,.section-head h1{font-size:36px;color:var(--crimson)}
.section-head p{font-size:18px;color:var(--muted)}

/* cards / grid */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.card .ic{width:52px;height:52px;border-radius:14px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:16px}
.card h3{font-size:21px;color:var(--crimson)}
.card p{color:var(--muted);margin:0}
.step{position:relative}
.step .num{width:56px;height:56px;border-radius:50%;background:var(--crimson);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;line-height:1;text-align:center;font-family:"Fraunces",serif;margin-bottom:14px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;text-align:center}
.stat .n{font-family:"Fraunces",serif;font-size:44px;color:var(--crimson);font-weight:600}
.stat .l{color:var(--muted);font-size:15px}

/* founder */
.founder{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px;box-shadow:var(--shadow)}
.founder .badge{width:170px;height:170px;border-radius:16px;background:linear-gradient(135deg,var(--crimson),var(--bright));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:64px}
.founder h2{color:var(--crimson);font-size:30px}
.founder-ctas{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:8px}
@media(max-width:720px){.founder{grid-template-columns:1fr!important;gap:16px;text-align:left}.founder .badge{width:150px!important;height:150px!important}.founder h2{font-size:24px}.founder .badge span{font-size:52px}}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;max-width:820px;margin:0 auto}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.plan>.btn{margin-top:auto}
.plan>.btn:not(.outline){border:2px solid transparent}
.plan.feat{padding:33px}
.plan.feat{border:2px solid var(--crimson);box-shadow:var(--shadow-lg)}
.plan .pop{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--crimson);color:#fff;
  font-size:12px;font-weight:700;padding:6px 16px;border-radius:20px;letter-spacing:.5px}
.plan .pname{font-family:"Fraunces",serif;font-size:26px;color:var(--crimson);font-weight:600}
.plan .price{font-family:"Fraunces",serif;font-size:52px;color:var(--ink);margin:8px 0 0}
.plan .price small{font-size:17px;color:var(--muted);font-weight:400;font-family:"Inter",sans-serif}
.plan .alt{color:var(--green);font-weight:700;font-size:14px;margin-bottom:18px}
.plan ul{list-style:none;padding:0;margin:0 0 26px}
.plan li{padding:9px 0 9px 30px;position:relative;border-top:1px solid var(--soft);font-size:15.5px}
.plan li:first-child{border-top:none}
.plan li:before{content:"✓";position:absolute;left:2px;color:var(--green);font-weight:800}
.plan li strong{color:var(--crimson)}
.billing{display:inline-flex;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:5px;margin:0 auto 30px;gap:4px}
.billing button{border:none;background:none;padding:11px 18px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer}
.billing button.on{background:var(--crimson);color:#fff}
.billing .save{color:var(--green);font-size:12px;margin-left:6px}
.billing button.on .save{color:#FBEBC8}

/* faq */
.faq{max-width:800px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;padding:6px 22px;box-shadow:var(--shadow)}
.faq summary{font-weight:700;font-size:17px;color:var(--crimson);cursor:pointer;list-style:none;padding:16px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--bright);font-weight:800;margin-right:12px}
.faq details[open] summary:before{content:"–"}
.faq p{color:var(--muted);margin:0 0 18px;font-size:15.5px}

/* CTA band */
.cta-band{background:linear-gradient(135deg,#264653,#2A9D8F);color:#fff;text-align:center;padding:70px 0}
.cta-band h2{font-size:34px;color:#fff}
.cta-band p{color:#D7EDEA;font-size:19px;max-width:620px;margin:0 auto 26px}
.cta-band .form{display:flex;gap:10px;max-width:520px;margin:0 auto;justify-content:center;flex-wrap:wrap}
.cta-band .form input{flex:1;min-width:220px;padding:15px 16px;border:none;border-radius:12px;font-size:16px}

/* form success */
.form-ok{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);border-radius:12px;
  padding:14px 16px;margin-top:12px;font-size:15px;color:#fff;max-width:520px}
.form-ok.dark{background:var(--soft2);border-color:#C2E3DE;color:#1F6B60}
#dl-ok.form-ok{background:var(--soft2);border-color:#C2E3DE;color:#1F6B60} /* DAVE S99 28 Sep (Lee L54): every #dl-ok sits on a white card, so the default translucent-white box printed white on white (1.00:1); it takes the light .form-ok.dark box */

/* value list */
.vlist{list-style:none;padding:0;margin:0}
.vlist li{padding:12px 0 12px 38px;position:relative;font-size:17px;border-bottom:1px solid var(--line)}
.vlist li:before{content:"✓";position:absolute;left:0;top:12px;width:24px;height:24px;background:var(--soft);
  color:var(--green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}

/* disclaimer / footer */
.disc{background:#F7F5F0;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);text-align:center;padding:12px 24px}
footer.site{background:#16262D;color:#D9D3C7;padding:50px 0 26px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
footer.site h4{color:#fff;font-family:"Inter",sans-serif;font-size:14px;letter-spacing:1px;text-transform:uppercase;margin:0 0 14px}
footer.site a{display:block;color:#D9D3C7;margin-bottom:9px;font-size:15px}
footer.site a:hover{color:#fff}
footer.site .brand{color:#fff}
footer.site .fine{border-top:1px solid rgba(255,255,255,.15);margin-top:34px;padding-top:20px;font-size:13px;color:#9FB5B0;text-align:center}
@media(max-width:720px){footer.site .cols{grid-template-columns:1fr}}
.reveal{opacity:0;transform:translateY(14px);transition:.6s ease}
.reveal.in{opacity:1;transform:none}

/* legal pages */
.legal{max-width:820px;margin:0 auto}
.legal h1{font-size:38px;color:var(--crimson);margin-bottom:6px}
.legal h2{font-size:22px;color:var(--crimson);margin-top:34px}
.legal p,.legal li{color:#3a3340;font-size:16px;line-height:1.75}
.legal ul{padding-left:22px;margin:8px 0}
.legal li{margin-bottom:6px}
.legal .updated{color:var(--muted);font-size:14px;margin-bottom:22px}
.legal a{color:var(--crimson2)}
.legal-note{background:#FDF1DD;border:1px solid #F2D39A;color:#8A6414;font-size:14px;padding:13px 16px;border-radius:10px;margin-bottom:26px}
footer.site .fine a{display:inline;color:#D9D3C7;margin:0}
footer.site .fine a:hover{color:#fff}

/* founder photo (drop a real photo at assets/elizabeth.jpg; falls back to the initial) */
.founder .badge{position:relative;overflow:hidden}
.founder .badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* resources / blog */
.res-hero{background:var(--cream);border-bottom:1px solid var(--line)}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.post{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);text-decoration:none;transition:.15s}
.post:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
.post .band{height:8px;background:linear-gradient(90deg,var(--crimson),var(--bright))}
.post .body{padding:22px}
.post .cat{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--green)}
.post h3{color:var(--crimson);font-size:19px;margin:6px 0 8px}
.post p{color:var(--muted);font-size:14.5px;margin:0}
.post .more{color:var(--crimson2);font-weight:700;font-size:14px;margin-top:12px;display:inline-block}
.article{max-width:760px;margin:0 auto}
.article .cat{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--green)}
.article h1{font-size:38px;color:var(--crimson);margin:6px 0 4px}
.article .updated{color:var(--muted);font-size:14px;margin-bottom:24px}
.article h2{font-size:23px;color:var(--crimson);margin-top:30px}
.article p,.article li{font-size:16.5px;line-height:1.75;color:#2f2a2c}
.article ul{padding-left:22px}
.article .callout{background:var(--soft);border-left:5px solid var(--crimson);border-radius:8px;padding:14px 18px;margin:22px 0;font-size:15.5px}
.article .tip{background:var(--soft2);border-left:5px solid var(--green);border-radius:8px;padding:14px 18px;margin:22px 0;font-size:15.5px;color:#1F6B60}

/* ===== site upgrade pass: premium feel + mobile + proof ===== */
.cred-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.cred{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.30);border-radius:22px;padding:8px 15px;font-size:13.5px;font-weight:600;color:#fff;display:inline-flex;align-items:center;gap:7px}
.cred .dot{color:#F2D39A}
.proofband{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px;box-shadow:var(--shadow);max-width:860px;margin:0 auto;text-align:center}
.proof .q{font-family:"Fraunces",serif;font-size:23px;color:var(--ink);line-height:1.5;margin:0}
.proof .by{color:var(--muted);font-size:15px;margin-top:14px}
.proof .who{display:inline-flex;align-items:center;gap:10px;justify-content:center;margin-top:16px;color:var(--crimson);font-weight:700}
.proof .who .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--crimson),var(--crimson2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-family:"Fraunces",serif}
.microcopy{font-size:13px;color:var(--muted);margin-top:10px}
/* same-team promise band */
.promise{background:var(--soft);border-bottom:1px solid var(--line);padding:44px 0}
.promise .inner{max-width:980px;margin:0 auto;text-align:center}
.promise .tag{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:20px;padding:6px 15px;font-size:12px;font-weight:800;color:var(--green);letter-spacing:.6px;text-transform:uppercase;margin-bottom:14px}
.promise h2{color:var(--crimson);font-size:26px;margin:0 0 10px;line-height:1.2}
.promise p{color:#4a4144;font-size:17px;margin:0 auto;max-width:700px;line-height:1.6}
button,.btn,.plan-btn{-webkit-tap-highlight-color:transparent}
.btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:560px){
  .btn,.btn.big{width:100%;min-height:52px}
  .founder-ctas{flex-direction:column;align-items:stretch}
  .hero .form,.cta-band .form{flex-direction:column}
  .hero .form input,.cta-band .form input{min-width:0;width:100%}
  .stat .n{font-size:36px}
  .section-head h2,.section-head h1{font-size:29px}
  .hero h1{font-size:32px}
}
/* DAVE 23 Sep 2026 (QUEUE #JOE-F10). A long email link (faq.html section-head) could not wrap and pushed the page 2px wide at 390px (scrollWidth 392, measured live). break-word lets it wrap only when it would overflow. */
a[href^="mailto:"]{overflow-wrap:break-word}