:root{
    --paper:#FAF8F5;
    --paper-2:#F2EEE8;
    --ink:#14171C;
    --ink-2:#2B303A;
    --slate:#5A6070;
    --slate-2:#878D9C;
    --rule:#DDD7CD;
    --brass:#9A6E2C;
    --brass-bright:#B8863F;
    --named:#3F6B5A;
    --absent:#9E4A3D;
    --band:#14171C;
    --band-soft:#1E222A;
    --band-rule:#31363F;
    --band-text:#D8D4CC;
    --band-dim:#8A8F99;
    --shadow:0 1px 2px rgba(20,23,28,.05),0 8px 28px -12px rgba(20,23,28,.18);
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#101317;
      --paper-2:#171B21;
      --ink:#EDE9E2;
      --ink-2:#CDC8C0;
      --slate:#9AA0AC;
      --slate-2:#767C89;
      --rule:#2A2F37;
      --brass:#D3A15C;
      --brass-bright:#E0B472;
      --named:#7FB09A;
      --absent:#D08574;
      --band:#080A0D;
      --band-soft:#121519;
      --band-rule:#262B33;
      --band-text:#D8D4CC;
      --band-dim:#7C818C;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px -12px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"]{
    --paper:#101317;
    --paper-2:#171B21;
    --ink:#EDE9E2;
    --ink-2:#CDC8C0;
    --slate:#9AA0AC;
    --slate-2:#767C89;
    --rule:#2A2F37;
    --brass:#D3A15C;
    --brass-bright:#E0B472;
    --named:#7FB09A;
    --absent:#D08574;
    --band:#080A0D;
    --band-soft:#121519;
    --band-rule:#262B33;
    --band-text:#D8D4CC;
    --band-dim:#7C818C;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px -12px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
  .col{max-width:640px}
  h1,h2,h3{font-family:Newsreader,Georgia,"Times New Roman",serif;font-weight:500;text-wrap:balance;margin:0}
  p{margin:0}
  a{color:inherit}

  .eyebrow{
    font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--brass);font-weight:500;
  }

  /* ---------- header ---------- */
  header{border-bottom:1px solid var(--rule);background:var(--paper)}
  .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0}
  .mark{display:flex;align-items:baseline;gap:10px;text-decoration:none}
  .mark b{font-family:Newsreader,Georgia,serif;font-weight:600;font-size:21px;letter-spacing:-.01em}
  .mark span{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--slate-2);
  }
  .bar nav{display:flex;align-items:center;gap:26px}
  .bar nav a{
    text-decoration:none;color:var(--slate);font-size:14.5px;font-weight:500;
    padding:4px 0;border-bottom:1px solid transparent;
  }
  .bar nav a:hover{color:var(--ink);border-bottom-color:var(--brass)}
  .bar nav a.tel{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;
    color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;
  }
  @media(max-width:760px){.bar nav a.hide-sm{display:none}}

  .btn{
    display:inline-block;text-decoration:none;font-weight:600;font-size:15px;
    padding:12px 22px;border-radius:2px;border:1px solid var(--ink);
    background:var(--ink);color:var(--paper);transition:background .15s,border-color .15s;
  }
  .btn:hover{background:var(--brass);border-color:var(--brass)}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
  .btn.ghost:hover{background:transparent;border-color:var(--brass);color:var(--brass)}
  .btn.sm{padding:9px 17px;font-size:14px}
  a:focus-visible,button:focus-visible{outline:2px solid var(--brass-bright);outline-offset:3px}

  /* ---------- hero ---------- */
  .hero{padding:86px 0 64px}
  .hero h1{font-size:clamp(2.5rem,5.6vw,4.1rem);line-height:1.04;letter-spacing:-.022em;margin:20px 0 0}
  .hero h1 em{font-style:italic;color:var(--brass)}
  .hero .sub{margin-top:26px;font-size:19.5px;line-height:1.6;color:var(--ink-2);max-width:560px}
  .hero .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:36px}
  .hero .cta small{font-size:13.5px;color:var(--slate-2)}

  /* ---------- demo band ---------- */
  .band{background:var(--band);color:var(--band-text);padding:74px 0 78px}
  .band .lede{max-width:600px;margin-bottom:36px}
  .band .lede h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.18;color:#F2EFE9;margin-top:14px;letter-spacing:-.015em}
  .band .lede p{margin-top:14px;color:var(--band-dim);font-size:16.5px}

  .answer{
    background:var(--band-soft);border:1px solid var(--band-rule);border-radius:4px;
    overflow:hidden;max-width:760px;
  }
  .answer .q{
    padding:18px 22px;border-bottom:1px solid var(--band-rule);
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  }
  .answer .q .tag{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--band-dim);
  }
  .answer .q .typed{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;color:#F2EFE9;
  }
  .answer .body{padding:22px}
  .answer .body > p{font-size:15.5px;color:var(--band-dim);margin-bottom:16px}
  .rows{display:flex;flex-direction:column;gap:1px;background:var(--band-rule);border:1px solid var(--band-rule);border-radius:3px;overflow:hidden}
  .row{
    background:var(--band-soft);display:flex;align-items:center;gap:14px;
    padding:13px 16px;
  }
  .row .n{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--band-dim);
    font-variant-numeric:tabular-nums;min-width:18px;
  }
  .row .name{font-size:15.5px;color:#F2EFE9;font-weight:500;flex:1;min-width:0}
  .row .state{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.11em;
    text-transform:uppercase;padding:3px 9px;border-radius:2px;white-space:nowrap;
  }
  .row .state.in{color:var(--named);border:1px solid color-mix(in srgb,var(--named) 45%,transparent)}
  .row.gap{background:repeating-linear-gradient(135deg,var(--band-soft),var(--band-soft) 7px,rgba(158,74,61,.07) 7px,rgba(158,74,61,.07) 14px)}
  .row.gap .name{color:var(--absent);font-style:italic;font-family:Newsreader,Georgia,serif;font-size:17px}
  .row .state.out{color:var(--absent);border:1px solid color-mix(in srgb,var(--absent) 50%,transparent)}
  .answer .foot{
    padding:16px 22px;border-top:1px solid var(--band-rule);
    font-size:14px;color:var(--band-dim);line-height:1.55;
  }
  .answer .foot b{color:#F2EFE9;font-weight:600}

  /* ---------- generic section ---------- */
  section.blk{padding:76px 0}
  section.blk + section.blk{border-top:1px solid var(--rule)}
  .blk h2{font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.14;letter-spacing:-.018em;margin-top:14px}
  .blk .body{margin-top:22px;display:flex;flex-direction:column;gap:17px}
  .blk .body p{color:var(--ink-2);font-size:17.5px}
  .blk .body p.lift{font-family:Newsreader,Georgia,serif;font-size:22px;line-height:1.45;color:var(--ink)}

  /* ---------- ladder ---------- */
  .ladder{margin-top:40px;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
  .step{
    display:grid;grid-template-columns:76px 1fr auto;gap:24px;align-items:start;
    padding:26px 0;border-bottom:1px solid var(--rule);
  }
  .step .idx{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.12em;
    color:var(--slate-2);padding-top:6px;text-transform:uppercase;
  }
  .step h3{font-size:20px;letter-spacing:-.01em}
  .step p{margin-top:7px;color:var(--slate);font-size:16px;max-width:52ch}
  .step .price{
    font-family:Newsreader,Georgia,serif;font-size:23px;color:var(--ink);white-space:nowrap;
    padding-top:2px;font-variant-numeric:tabular-nums;
  }
  .step .price small{display:block;font-family:"Public Sans",sans-serif;font-size:12.5px;color:var(--slate-2);letter-spacing:.02em;margin-top:2px}
  @media(max-width:720px){
    .step{grid-template-columns:1fr;gap:8px}
    .step .price{padding-top:8px}
  }

  /* ---------- founder ---------- */
  .founder{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:start}
  @media(max-width:860px){.founder{grid-template-columns:1fr;gap:32px}}
  .card{
    border:1px solid var(--rule);border-radius:3px;background:var(--paper-2);
    padding:26px;box-shadow:var(--shadow);
  }
  .card .ph{
    display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
    border-radius:2px;margin-bottom:18px;background:var(--paper-2);
    filter:saturate(.96);
  }
  .card .nm{font-family:Newsreader,Georgia,serif;font-size:21px;font-weight:600}
  .card .rl{font-size:14px;color:var(--slate);margin-top:3px}
  .card dl{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}
  .card dt{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--slate-2);
  }
  .card dd{margin:2px 0 0;font-size:15.5px;color:var(--ink-2)}

  /* ---------- limits ---------- */
  .limits{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .limits .h{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;margin-bottom:14px;
  }
  .straight{
    margin-top:34px;background:var(--paper);border:1px solid var(--rule);border-left:2px solid var(--absent);
    padding:24px 26px;max-width:660px;
  }
  .straight .h{color:var(--absent)}
  .straight ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
  .straight li{font-size:16px;color:var(--slate);padding-left:17px;position:relative;line-height:1.5}
  .straight li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--absent)}

  .getlead{margin-top:44px;font-family:Newsreader,Georgia,serif;font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.3;color:var(--ink);max-width:22ch;letter-spacing:-.012em}
  .gets{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
  @media(max-width:760px){.gets{grid-template-columns:1fr}}
  .get{background:var(--paper);padding:22px 24px;display:flex;gap:14px;align-items:flex-start}
  .get .tick{color:var(--named);font-size:16px;line-height:1.45;flex:none}
  .get p{font-size:16.5px;color:var(--ink-2);line-height:1.5}

  /* ---------- close ---------- */
  .close{padding:82px 0 90px;text-align:left}
  .close h2{font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.02em;max-width:16ch;margin-top:14px}
  .close p{margin-top:20px;color:var(--ink-2);font-size:18px;max-width:52ch}
  .close .cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
  .close .reach{margin-top:18px;font-size:14.5px;color:var(--slate-2);max-width:46ch}

  footer{border-top:1px solid var(--rule);padding:30px 0 44px}
  .fbar{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline;
    font-size:13.5px;color:var(--slate-2)}
  .fbar a{color:var(--slate);text-decoration:none;border-bottom:1px solid transparent}
  .fbar a:hover{color:var(--ink);border-bottom-color:var(--brass)}
  .fbar .lnks{display:flex;gap:20px;flex-wrap:wrap}

  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* ---------- header mark, added 27 August 2026 with the v5 logo system ----------
     Two files rather than one, because the v5 mark has a light-ground and a dark-ground
     version and the page already switches its whole palette on prefers-color-scheme.
     A single mark would go muddy on one of the two grounds. */
  .mark .mk{display:block;width:30px;height:30px;flex:none;align-self:center}
  .mark .mk-dark{display:none}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .mark .mk-light{display:none}
    :root:not([data-theme="light"]) .mark .mk-dark{display:block}
  }
  :root[data-theme="dark"] .mark .mk-light{display:none}
  :root[data-theme="dark"] .mark .mk-dark{display:block}
  .mark{align-items:center}

  /* ---------- legal pages ----------
     Privacy and terms. Same type scale as the rest of the site rather than the shrunken
     grey small print every other company uses, because a page nobody can read is not a
     disclosure. */
  .legal{padding-top:60px}
  .legal .upd{
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--slate-2);margin-top:16px;
  }
  .legal .body{margin-top:34px;gap:0}
  .legal .body h3{
    font-size:21px;letter-spacing:-.01em;margin-top:40px;padding-top:22px;
    border-top:1px solid var(--rule);
  }
  .legal .body h3:first-child{margin-top:0;padding-top:0;border-top:0}
  .legal .body p{margin-top:14px;font-size:17px}
  .legal .body p.lift{margin-top:0}
  .legal ul.plain{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
  .legal ul.plain li{font-size:17px;color:var(--ink-2);padding-left:18px;position:relative;line-height:1.55}
  .legal ul.plain li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--brass)}
  .legal a{color:var(--ink);border-bottom:1px solid var(--rule);text-decoration:none}
  .legal a:hover{border-bottom-color:var(--brass);color:var(--brass)}

  /* ---------- hero headline, widened 27 August 2026 on Jerry's instruction ----------
     "the phrase should flow across the screen, not be bunched together like it is."
     Two separate causes, and fixing only one of them would not have done it.

     ONE: the headline was inheriting .col{max-width:640px}, a measure sized for reading
     body copy. A 4rem display line inside a 640px column has nowhere to go and stacks
     into three short lines.

     TWO, and this is the one that is easy to miss: h1,h2,h3 carry text-wrap:balance,
     which deliberately EVENS the lines out by pulling them in short of the available
     width. That is right for a two line subhead and wrong for a hero, because balancing
     is exactly what "bunched together" looks like. text-wrap:pretty keeps the orphan
     control and drops the evening, so the line fills the measure it is given.

     Body copy underneath keeps its own narrower measure; only the headline widens. */
  .hero .col{max-width:none}
  .hero h1{max-width:17ch;text-wrap:pretty}
  @media(min-width:900px){
    .hero h1{max-width:none;font-size:clamp(3rem,6.2vw,4.6rem)}
  }

  /* ---------- HERO HAD NO SIDE PADDING. Found 27 August 2026, and it predates today.
     The markup is <section class="wrap hero">, both classes on ONE element. .wrap sets
     padding:0 28px, then .hero sets padding:86px 0 64px, and a shorthand overwrites all
     four sides. So the hero lost its 28px gutters while every other section kept them.

     INVISIBLE ON A WIDE SCREEN, which is why it survived. Above 1080px the wrap is
     centred with slack either side, so nothing touches the edge. Below 1080px the
     headline and the sub-paragraph sit hard against the left edge of the glass, and the
     dark band immediately underneath keeps its gutters, so the page looks misaligned.
     That is every phone, every tablet, and any laptop window not run full width.

     Longhand for the vertical values, so the horizontal ones survive. */
  .hero{padding:86px 0 64px;padding-left:28px;padding-right:28px}

  /* The clause break. Left to itself the line broke after "but it", which splits the
     turn in the sentence across two lines. Wide enough to hold each clause whole, put
     each on its own line; below that let it wrap naturally rather than forcing a
     ragged break. */
  @media(min-width:1100px){
    .hero h1 em{display:block}
  }

  /* ---------- the scale line under the demo, added 27 August 2026 ----------
     Jerry: "didn't we expand our search? shouldn't this be more general to North Atlanta?"

     He is right that a Roswell or Marietta owner must not read the demo as an Alpharetta
     problem. He is wrong that the demo itself should be generalised, and the reason is
     the eyebrow directly above it: "A real answer, not a mockup". Those five names came
     back from one real query about one real town. Relabel that query "North Atlanta" and
     the five names no longer correspond to anything that was ever asked, which makes the
     line above it untrue and takes the whole section's credibility with it.

     So the specific proof stays and the scale goes underneath it. A verifiable example
     plus a real number beats a vague regional claim, and it answers his actual worry.
     Counts are read off the two map CSVs in 09-REVENUE, not from a note: 55 med spas
     across three cities plus 164 across twelve, of which 40 and 81 are unnamed. */
  .band .scale{
    margin-top:28px;max-width:760px;font-size:16.5px;line-height:1.6;color:var(--band-dim);
  }
  .band .scale b{color:#F2EFE9;font-weight:600}

  /* ---------- the header on phones. 27 August 2026, and it took two attempts ----------
     Found by Jerry pulling the published site up on his own phone, which is the check
     headless Chrome cannot do: it will not open a window under about 500px on Windows.
     `.claude\scripts\narrow-preview.py` renders the page inside an iframe of an exact
     width so media queries fire honestly. Use it for anything below 500px.

     THE ORIGINAL BUG. .hide-sm collapsed FOUR things under 760px and the phone number was
     one of them. Hiding the three section links is right, they crowd a small header.
     Hiding the number is backwards: tapping to call is the easiest action there is on a
     phone, and it was gone from exactly where a convinced reader's thumb is.

     THE FIRST FIX WAS WRONG AND THE HARNESS CAUGHT IT. Putting the number back left four
     items fighting for 390px, so the wordmark broke onto two lines and the button onto
     three. Reading the CSS would never have shown that; only rendering it did.

     WHAT GOES INSTEAD, and the reasoning is the point: the header's "Get the free check"
     button is REDUNDANT ON A PHONE. The hero's own "See what it says about you" button
     sits in the same first screenful and does the same job. The phone number is not
     redundant - it is the only tap-to-call above the fold. So the header CTA drops and
     the number stays. Nothing that is the only way to do something ever gets hidden. */
  .mark b{white-space:nowrap}
  .btn{white-space:nowrap}

  @media(max-width:760px){
    .bar nav a.tel.hide-sm{display:inline}
    .bar nav{gap:16px}
  }
  @media(max-width:560px){
    .bar nav a.btn.sm{display:none}
    .mark span{display:none}
  }


  /* ---------- the phone menu, added 27 August 2026 on Jerry's ask ----------
     The three section links hide under 760px and had nowhere else to go, so on a phone
     the page was pure scroll with no way to jump. This gives them somewhere.

     BUILT ON <details>, NOT ON A SCRIPT. It opens, closes, takes keyboard focus and
     announces itself to a screen reader with no JavaScript at all. The five lines in the
     shell only close it after a tap; strip them and the menu still works. */
  .menu{display:none;position:relative}
  .menu summary{
    list-style:none;cursor:pointer;width:40px;height:40px;display:flex;
    align-items:center;justify-content:center;border:1px solid var(--rule);border-radius:2px;
  }
  .menu summary::-webkit-details-marker{display:none}
  .menu summary:focus-visible{outline:2px solid var(--brass-bright);outline-offset:3px}
  /* Three bars from one element: the middle is the box, the other two are its corners. */
  .menu .bars,.menu .bars::before,.menu .bars::after{
    display:block;width:18px;height:1.5px;background:var(--ink);content:"";position:relative;
  }
  .menu .bars::before{position:absolute;top:-6px}
  .menu .bars::after{position:absolute;top:6px}
  .menu[open] .bars{background:transparent}
  .menu[open] .bars::before{top:0;transform:rotate(45deg)}
  .menu[open] .bars::after{top:0;transform:rotate(-45deg)}

  .menu .sheet{
    position:absolute;right:0;top:calc(100% + 12px);z-index:40;min-width:230px;
    background:var(--paper);border:1px solid var(--rule);border-radius:3px;
    box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column;
  }
  .menu .sheet a{
    text-decoration:none;color:var(--ink);font-size:16.5px;font-weight:500;
    padding:13px 14px;border-radius:2px;
  }
  .menu .sheet a:hover{background:var(--paper-2)}
  .menu .sheet a.go{
    margin-top:6px;background:var(--ink);color:var(--paper);text-align:center;font-weight:600;
  }
  .menu .sheet a.ring{
    text-align:center;color:var(--slate);font-size:15px;
    font-family:"IBM Plex Mono",ui-monospace,monospace;
  }

  @media(max-width:760px){
    .menu{display:block}
  }