/* ==========================================================================
   Your Own Business Website - the sales pages (/, /thanks, /terms, /privacy).

   OUR pages, the same for every prospect, so someone who has just looked at
   their mockup sees a clear change of speaker. Adapted from the retired
   per-site offer template (public/templates/offer/). System fonts only: the
   pages make no third-party request but the link out to Stripe and Cloudflare
   Web Analytics (cookieless; declared in the Privacy Policy).
   ========================================================================== */

:root{
  --brand:#0E7C66;            /* white text on it: 5.1:1 */
  --brand-deep:#0A5C4C;
  --brand-ink:#ffffff;
  /* The brand green is too dark to read on --night. This is the accent for
     anything sitting on a dark band: the wordmark's .Website, the
     calculator's figure, the tick in the "what you get" list. */
  --brand-lift:#34C39F;
  --tint:#EEF6F3;
  --tint-2:#DDEFE9;

  --paper:#FAFAF8;
  --card:#ffffff;
  --ink:#141618;
  --ink-2:#30363B;
  --muted:#5F666D;
  --rule:rgba(20,22,24,.12);
  --night:#0F1715;

  --r:14px;
  --r-lg:22px;
  --shadow:0 1px 2px rgba(20,22,24,.05), 0 10px 28px rgba(20,22,24,.07);
  --font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--brand-deep)}
a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
h1,h2,h3{margin:0 0 .4em;font-weight:800;line-height:1.08;letter-spacing:-.025em}
h1{font-size:clamp(2.1rem,6vw,3.7rem)}
h2{font-size:clamp(1.6rem,4vw,2.4rem)}
h3{font-size:1.12rem;letter-spacing:-.01em;line-height:1.25}
p{margin:0 0 1rem}
.wrap{width:min(1080px,calc(100% - 40px));margin:0 auto}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.skip{position:absolute;left:-9999px;top:8px;background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{left:8px}

/* top bar */
.top{background:var(--night);color:#fff;font-size:14px;padding:12px 0}
.top a{color:#fff;text-decoration:none;font-weight:700}
.top a:hover{text-decoration:underline}
/* The wordmark IS the domain, so the .Website suffix is the mark - the old
   green "Y" square was an arbitrary initial doing no work. The accent has to
   carry the whole idea ("your own business… website"), so it is coloured, not
   just bolder. The legal and spoken name stays "Your Own Business Website" -
   see the footer, the Terms, and the aria-label on the link. */
.logo{display:inline-flex;align-items:baseline;font-size:16px;font-weight:800;letter-spacing:-.015em}
.logo .tld{color:var(--brand-lift)}
.top .who{opacity:.88}
.top .who b{font-weight:700}

/* hero */
.hero{padding:clamp(52px,9vw,112px) 0 clamp(40px,6vw,72px);background:linear-gradient(180deg,var(--tint) 0%,var(--paper) 100%)}
/* Text on the left, the laptop on the right from 900px; stacked below that.
   The heading is sized for the half-width column, so each of its two lines
   stays on one line down to that breakpoint. */
.hero .wrap{display:grid;gap:36px 44px;grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.hero .wrap{grid-template-columns:1.08fr 1fr}}
.hero h1{font-size:clamp(2rem,3.9vw,2.75rem)}
.eyebrow{margin:0 0 14px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-deep)}
.hl{color:var(--brand)}
.lede{font-size:clamp(1.05rem,2vw,1.28rem);color:var(--ink-2);max-width:62ch;margin:18px 0 28px}
.fine{font-size:14px;color:var(--muted);margin:14px 0 0}
.center{text-align:center}
/* The offer line above the Check Out Now button. */
.hero .offer{margin:0 0 20px;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:60ch}
.hero .offer b{color:var(--ink)}
/* Shown only to a prospect who followed a link from their own mockup (data-show
   ="sent"); the hero's own copy has to stand up without it. */
.hero .pin{display:inline-block;margin:0 0 24px;padding:11px 18px;background:var(--tint-2);border-radius:var(--r);
  font-weight:700;font-size:15.5px;color:var(--brand-deep)}

/* The laptop. The art is a static SVG (hero-laptop.svg); the SCREEN is real
   HTML laid over it at the exact rectangle the art leaves white (x 112 y 36,
   576 x 352 of an 800 x 620 viewBox, hence the percentages), so the search
   sentence is live text, the results are a real list, and nothing inside the
   screen is an image. Sizes inside the screen are in cqw, container-query
   units of the laptop's own width, so the whole thing scales like a picture. */
.laptop{position:relative;width:100%;max-width:580px;margin:0 auto;container-type:inline-size}
.laptop-art{display:block;width:100%;height:auto}
.screen{position:absolute;left:14%;top:5.806%;width:72%;height:56.774%;overflow:hidden;
  background:#fff;padding:2cqw 2.2cqw;display:flex;flex-direction:column;gap:1.5cqw;color:var(--ink)}
.searchbar{display:flex;align-items:center;gap:1.5cqw;flex:none;padding:1.35cqw 2.2cqw;
  border:.22cqw solid var(--rule);border-radius:99cqw;box-shadow:0 .4cqw 1.4cqw rgba(20,22,24,.08)}
.searchbar .mag{width:2.5cqw;height:2.5cqw;flex:none}
.query{margin:0;font-size:2.5cqw;font-weight:600;line-height:1.25;letter-spacing:-.01em;white-space:nowrap}
/* The term's box fits the term that is showing (user's call: the words after
   it may slide left and right, but the sentence must never wrap to a second
   line and back). Every phrase is in the DOM; only the visible one is
   displayed, so the box, underline included, is exactly its width. The
   article before it is a fixed "a", which is why every phrase starts with a
   consonant sound (a test enforces it). */
.rot{display:inline-block;vertical-align:baseline;color:var(--brand-deep);font-weight:800;
  border-bottom:.25cqw solid var(--brand-lift);white-space:nowrap}
.rot > span{display:none}
.rot > span.on{display:inline-block}
/* The trade rolls over (the page's other animation is the credential cards).
   Out goes up, in comes from below; sales.js drives the classes. */
.rot > span{transition:transform .22s ease,opacity .22s ease}
.rot > span.out{transform:translateY(-.45em);opacity:0}
.rot > span.in{transform:translateY(.45em);opacity:0;transition:none}
@media (prefers-reduced-motion:reduce){.rot > span{transition:none}}
/* Five results, each a fact in the link-title position and its source where a
   search page prints the address. Sized so five fit the screen at one line each. */
.results{list-style:none;margin:0;padding:0;display:grid;gap:1.45cqw;align-content:start}
.results li{display:grid;gap:.15cqw;min-width:0}
.results b{font-size:2.2cqw;line-height:1.2;color:var(--brand-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.results .src{font-size:1.6cqw;line-height:1.25;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A narrow laptop (phones, and the grid's first hundred pixels): two results,
   larger and allowed to wrap, or the text is confetti. Measured: three wrapped
   results overflow a 335px laptop's screen by 20px. */
@container (max-width:430px){
  .results li:nth-child(n+3){display:none}
  .results{gap:2.4cqw}
  .results b{font-size:2.8cqw;white-space:normal}
  .results .src{font-size:2cqw;white-space:normal}
  /* Always the same two lines: "Hire a <term>", then "near me today" on its
     own. The term's length changes the first line's length, never the count. */
  .query{font-size:3.2cqw}
  .query .tail{display:block}
  .searchbar .mag{width:3.3cqw;height:3.3cqw}
}

/* buttons */
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.ctas.col{flex-direction:column;align-items:stretch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:999px;cursor:pointer;
  font-weight:800;font-size:16px;text-decoration:none;border:2px solid var(--brand);color:var(--brand-deep);background:transparent;
  transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn.primary{background:var(--brand);color:var(--brand-ink)}
.btn.primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn.ghost{border-color:var(--rule);color:var(--ink)}
@media (max-width:560px){.hero .ctas .btn,.contact .ctas .btn{flex:1 1 100%}}

/* what you get */
.gets{padding:clamp(44px,6vw,84px) 0;background:var(--night);color:#fff}
.gets .two{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
@media (min-width:860px){.gets .two{grid-template-columns:1fr 1.5fr}}
.gets .sub{color:rgba(255,255,255,.74);font-size:1.05rem;max-width:36ch}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.checks li{padding-left:34px;position:relative;color:rgba(255,255,255,.84);font-size:15.5px}
.checks li b{color:#fff}
.checks li::before{content:"";position:absolute;left:0;top:4px;width:21px;height:21px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2334C39F'/%3E%3Cpath d='M5.5 10.5l3 3 6-6' stroke='%230F1715' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* steps */
.steps{padding:clamp(44px,6vw,84px) 0}
.stepgrid{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.stepgrid li{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px 24px 22px;box-shadow:var(--shadow)}
.stepgrid .num{display:inline-flex;width:38px;height:38px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:14px}
.stepgrid p{margin:0;color:var(--ink-2);font-size:15.5px}

/* what it's worth - a white card of sliders beside a night card that carries
   the number, so the figure pops without a second full-width dark band. */
.calc{padding:clamp(44px,6vw,84px) 0}
.calc .sub{margin:14px 0 0;max-width:64ch;color:var(--ink-2);font-size:clamp(1rem,1.7vw,1.1rem)}
.calc > .wrap > .fine{max-width:72ch;margin-top:20px}
.calcgrid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:28px;align-items:start}
@media (min-width:880px){.calcgrid{grid-template-columns:1fr 1fr}}
.calcinputs{background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow)}
.calcinputs label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 10px;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.calcinputs label b{font-size:19px;letter-spacing:-.02em;text-transform:none;color:var(--brand-deep);white-space:nowrap}
.calcinputs input[type=range]{display:block;width:100%;height:24px;margin:0 0 26px;cursor:pointer;accent-color:var(--brand)}
.calcinputs input[type=range]:focus-visible{outline:3px solid var(--brand);outline-offset:4px;border-radius:6px}
.calcinputs .fine{margin:0}
.calcout{background:var(--night);color:#fff;border-radius:var(--r-lg);padding:clamp(24px,3vw,32px);box-shadow:var(--shadow)}
.outlabel{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.outbig{margin:8px 0 0;font-size:clamp(2.6rem,7vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--brand-lift)}
.outsub{margin:16px 0 0;color:rgba(255,255,255,.8);font-size:15.5px}
.outpay{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-size:15.5px;font-weight:700;color:#fff}

/* about - its own tinted band, because the two sections it sits between
   ("how it works" and the price) are both on paper. */
.about{padding:clamp(44px,6vw,84px) 0;background:var(--tint);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.about .wrap{max-width:820px}
.about .eyebrow{margin-bottom:10px}
.about p{color:var(--ink-2);font-size:clamp(1rem,1.7vw,1.1rem);max-width:66ch}
.about p:last-child{margin-bottom:0}
.about .sig{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);font-size:15.5px;color:var(--muted)}
.about .sig b{color:var(--ink)}

/* who's behind this - five figures on a dark band, so they carry weight.
   Flex, not grid, so a row that does not fill (three then two on a tablet,
   two-two-one on a phone) centres itself instead of leaving a hole. */
.creds{padding:clamp(44px,6vw,84px) 0;background:var(--night);color:#fff}
.creds h2{text-align:center;margin-bottom:28px}
.credgrid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.credgrid li{flex:1 1 160px;max-width:210px;min-width:140px;display:grid;gap:8px;align-content:center;text-align:center;
  padding:24px 16px 22px;border-radius:var(--r-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.credgrid b{font-size:clamp(2rem,4vw,2.7rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--brand-lift)}
.credgrid span{font-size:14.5px;line-height:1.35;color:rgba(255,255,255,.78)}
@media (max-width:560px){.credgrid li{flex-basis:calc(50% - 7px);max-width:none;min-width:0;padding:20px 12px 18px}}
/* The cards slide in from the left one after the other, the first time the
   band is scrolled into view: sales.js arms the band (cards offset and
   hidden), then plays it. Unarmed, they are just there, so no JavaScript and
   reduced motion both cost nothing. */
.creds.armed .credgrid li{opacity:0;transform:translateX(-56px)}
.creds.play .credgrid li{animation:cred-in .6s cubic-bezier(.2,.7,.2,1) forwards}
.creds.play .credgrid li:nth-child(2){animation-delay:.11s}
.creds.play .credgrid li:nth-child(3){animation-delay:.22s}
.creds.play .credgrid li:nth-child(4){animation-delay:.33s}
.creds.play .credgrid li:nth-child(5){animation-delay:.44s}
@keyframes cred-in{to{opacity:1;transform:none}}

/* price - a top gap of its own now that the about band runs above it */
.price{padding:clamp(44px,6vw,84px) 0 clamp(44px,6vw,84px)}
.pricecard{display:grid;gap:28px;grid-template-columns:1fr;background:var(--card);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(24px,4vw,44px);box-shadow:var(--shadow)}
@media (min-width:820px){.pricecard{grid-template-columns:1.35fr 1fr;align-items:center}}
.big{font-size:clamp(2.6rem,7vw,4.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:6px 0 10px;color:var(--ink)}
.big small{font-size:1rem;font-weight:700;letter-spacing:0;color:var(--muted)}
.plus{font-weight:700;color:var(--ink-2);margin:0 0 14px}
.pricenote{color:var(--muted);font-size:15px;margin:0}
.guarantee{margin:16px 0 0;padding:14px 16px;background:var(--tint);border-radius:var(--r);color:var(--ink-2);font-size:15.5px}
.guarantee b{color:var(--brand-deep)}

/* faq */
.faq{padding:clamp(44px,6vw,84px) 0 clamp(56px,8vw,100px);background:var(--tint)}
.faq .wrap{max-width:860px}
.faq details{border-top:1px solid var(--rule);padding:4px 0}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;font-weight:800;padding:14px 32px 14px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:1.5rem;font-weight:500;color:var(--brand-deep)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 16px;color:var(--ink-2);font-size:15.5px;max-width:70ch}

/* contact band */
.contact{padding:clamp(36px,5vw,64px) 0;text-align:center}
.contact .ctas{justify-content:center;margin-top:16px}

/* thank-you and legal pages */
.page{padding:clamp(44px,7vw,88px) 0 clamp(56px,8vw,96px)}
.page .wrap{max-width:780px}
.page .lede{margin-top:10px}
.nextsteps{list-style:none;counter-reset:n;margin:24px 0 8px;padding:0;display:grid;gap:14px}
.nextsteps li{counter-increment:n;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px 18px 64px;position:relative;box-shadow:var(--shadow)}
.nextsteps li::before{content:counter(n);position:absolute;left:18px;top:17px;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:grid;place-items:center}
.nextsteps p{margin:4px 0 0;color:var(--ink-2);font-size:15.5px}
.legal h1{font-size:clamp(1.9rem,5vw,2.8rem)}
.legal h2{font-size:1.25rem;letter-spacing:-.01em;margin:2em 0 .5em}
.legal p,.legal li{color:var(--ink-2);font-size:16px}
.legal ul{padding-left:1.2em}
.legal li{margin:0 0 .45em}
.legal .meta{color:var(--muted);font-size:14px}
.legal .draft{background:#FFF7E0;border:1px solid #F0D48A;border-radius:var(--r);padding:12px 14px;font-size:14.5px;color:#5A4500}
mark.todo{background:#FFE58F;color:#3D2E00;padding:0 .2em;border-radius:3px}

/* footer */
.foot{padding:22px 0;font-size:14px;color:var(--muted);border-top:1px solid var(--rule)}
.foot a{font-weight:700;text-decoration:none;color:var(--ink-2)}
.foot a:hover{text-decoration:underline}
.foot nav{display:flex;gap:16px;flex-wrap:wrap}