/* Austin AI Guy — shared stylesheet.
   Extracted from index.html so every page stays identical without copy-paste. */
/* ─────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────── */
:root{
  --yellow:      #FAC302;
  --yellow-deep: #E3AF00;
  --bone:        #F4F1EC;
  --ink:         #0F0F0D;
  --ink-70:      rgba(15,15,13,.74);
  --ink-55:      rgba(15,15,13,.60);
  --ink-30:      rgba(15,15,13,.32);
  --ink-14:      rgba(15,15,13,.14);

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --slab: "Anton", "Geist", Impact, sans-serif;

  --t-hero:    clamp(46px, 11.5vw, 132px);
  --t-display: clamp(30px, 5.4vw, 56px);
  --t-lead:    clamp(17px, 2.2vw, 21px);
  --t-body:    17px;
  --t-meta:    12px;

  --container: 1180px;
  --gutter: 24px;
  --pad-y: 92px;
  --nav-h: 62px;
}
@media (max-width: 820px){
  :root{ --t-body:16px; --gutter:18px; --pad-y:62px; --nav-h:56px; }}

/* ─────────────────────────────────────────────
   BASE
   ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 10px); overscroll-behavior:none; }
body{
  overscroll-behavior:none;
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* paper grain — keep it, it's the house texture */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  opacity:.42; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}
header, main, footer, .modal-root, .to-top{ position:relative; z-index:2; }
::selection{ background:var(--ink); color:var(--yellow); }
a{ color:inherit; }
img{ max-width:100%; display:block; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.display{ font-family:var(--slab); font-weight:400; text-transform:uppercase; font-size:var(--t-display); line-height:1.0; letter-spacing:-0.005em; margin:0; text-wrap:balance; }
.lead{ font-size:var(--t-lead); line-height:1.5; margin:0; color:var(--ink-70); text-wrap:pretty; }
.body{ font-size:var(--t-body); line-height:1.6; margin:0; }
.meta{
  font-family:var(--mono);
  font-size:var(--t-meta);
  letter-spacing:0.11em;
  text-transform:uppercase;
  color:var(--ink-55);
  margin:0;
}

/* ─────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────── */
.cta{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-weight:600;
  font-size:16px; letter-spacing:0.01em;
  padding:16px 26px;
  background:var(--ink); color:var(--bone);
  border:2px solid var(--ink);
  border-radius:2px;
  cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  box-shadow:5px 5px 0 rgba(15,15,13,.22);
}
.cta:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(15,15,13,.28); }
.cta:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(15,15,13,.24); }
.cta__arrow{ font-size:17px; line-height:1; transform:translateY(-1px); }
.cta--big{ font-size:19px; padding:20px 34px; }
.cta--onink{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); box-shadow:5px 5px 0 rgba(250,195,2,.25); }
.cta--onink:hover{ box-shadow:7px 7px 0 rgba(250,195,2,.32); }

/* ─────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:60;
  height:var(--nav-h);
  background:var(--yellow);
  border-bottom:2px solid var(--ink);
}
.nav__inner{
  height:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.wordmark{
  font-family:var(--slab); text-transform:uppercase;
  font-size:clamp(18px,2.6vw,25px); letter-spacing:-0.01em;
  text-decoration:none; color:var(--ink); white-space:nowrap;
}
.wordmark .ai{ color:var(--bone); }
.nav .cta{ padding:10px 18px; font-size:14px; box-shadow:3px 3px 0 rgba(15,15,13,.2); }
.nav .cta:hover{ box-shadow:5px 5px 0 rgba(15,15,13,.26); }
.band--ink .meta{ color:rgba(244,241,236,.60); }
.band--ink .lead{ color:rgba(244,241,236,.78); }
.band__eyebrow .rule{ flex:1; height:2px; background:var(--ink); opacity:.22; }
.band--ink .band__eyebrow .rule{ background:var(--bone); opacity:.28; }

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero{ background:var(--yellow); border-bottom:2px solid var(--ink); padding:64px 0 0; }
.hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px; align-items:center;
}
.hero__from{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:13px; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--ink); margin:0 0 22px;
}
.hero__from .rule{ width:26px; height:2px; background:var(--ink); opacity:.4; flex:none; }
.hero__from a{
  text-decoration:none; font-weight:500;
  border-bottom:2px solid var(--ink); padding-bottom:2px;
  transition:background .14s ease, color .14s ease;
}
.hero__from a:hover{ background:var(--ink); color:var(--yellow); }
@media (max-width:820px){ .hero__from{ font-size:11px; letter-spacing:0.06em; gap:9px; margin-bottom:18px; }}

.hero__head{ font-family:var(--slab); text-transform:uppercase; font-size:var(--t-hero); line-height:0.92; letter-spacing:-0.015em; margin:0; }
.hero__head .cream{ color:var(--bone); }
.hero__sub{ font-size:clamp(18px,2.4vw,24px); line-height:1.4; margin:22px 0 0; max-width:19em; font-weight:500; }
/* --- serving / call now band --- */
.hero__serve{
  display:flex; align-items:baseline; justify-content:center; gap:14px; flex-wrap:wrap;
  width:100%; margin-top:46px;
  background:none; color:var(--ink); cursor:pointer;
  border:none; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  padding:15px 12px;
  font-family:var(--slab); text-transform:uppercase; letter-spacing:.01em;
  font-size:clamp(18px,2.7vw,30px); line-height:1.1;
  transition:background .14s ease, color .14s ease;
}
.hero__serve strong{ font-weight:400; }
.hero__serve-dot{ opacity:.45; }
.hero__serve:hover{ background:var(--ink); color:var(--yellow); }
.hero__serve:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; }
@media (max-width:820px){ .hero__serve{ margin-top:32px; gap:10px; padding:12px 8px; } }

/* --- the help key: a real, pressable button --- */
.hero__art{ position:relative; align-self:center; display:flex; flex-direction:column; align-items:center; }
.keycap{
  appearance:none; -webkit-appearance:none;
  background:none; border:none; padding:0; margin:0;
  display:block; width:100%; max-width:520px; cursor:pointer;
  text-decoration:none; color:inherit;
  -webkit-tap-highlight-color:transparent;
  transform-origin:50% 62%;
  transition:transform .2s cubic-bezier(.22,.7,.3,1);
}
.keycap__float{ display:block; animation:keycap-float 5.5s ease-in-out infinite; }
.keycap img{
  display:block; width:100%; height:auto;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
  animation:keycap-nudge 9s ease-in-out infinite;
}
.keycap:hover{ transform:translateY(-10px) scale(1.035); }
.keycap:focus-visible{ outline:3px solid var(--ink); outline-offset:10px; border-radius:6px; }
.keycap:active,
.keycap.is-pressed{
  transform:translate(7px,11px) scale(.952);
  transition-duration:.06s;
}
.keycap:hover .keycap__float,
.keycap:active .keycap__float,
.keycap.is-pressed .keycap__float{ animation-play-state:paused; }
.keycap:hover img, .keycap.is-pressed img{ animation-play-state:paused; }

@keyframes keycap-float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-13px); }
}
@keyframes keycap-nudge{
  0%,86%,100%{ transform:rotate(0deg); }
  89%{ transform:rotate(-2.4deg); }
  92%{ transform:rotate(1.9deg); }
  95%{ transform:rotate(-.9deg); }
}

.keycap__hint{
  margin:2px 0 0; display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); opacity:.58; transition:opacity .18s ease;
  pointer-events:none;
}
.keycap__hint .up{ display:inline-block; animation:hint-bob 2.2s ease-in-out infinite; }
.hero__art:hover .keycap__hint{ opacity:1; }
@keyframes hint-bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-4px); }
}
@media (max-width:900px){
  .hero{ padding-top:40px; }
  .hero__grid{ grid-template-columns:1fr; gap:32px; }
  .hero__head{ line-height:0.96; }
  .hero__art{ max-width:440px; }
  .hero__sub{ max-width:none; }}
.pdf__form{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.pdf__form input{
  flex:1; min-width:200px; padding:14px 14px;
  border:2px solid var(--ink); background:var(--bone);
  font:inherit; font-size:15px; color:var(--ink); border-radius:2px;
}
.pdf__form input::placeholder{ color:var(--ink-30); }
.pdf__msg{ margin-top:10px; min-height:1em; font-size:12px; font-family:var(--mono); letter-spacing:0.04em; }
.final .display{ color:var(--yellow); }
.footer__name .ai{ color:var(--bone); }

/* ─────────────────────────────────────────────
   MODAL — tier picker (kept: wired to Stripe)
   ───────────────────────────────────────────── */
.modal-root{ position:fixed; inset:0; z-index:200; display:none; }
.modal-root.is-open{ display:block; }
.modal__scrim{ position:absolute; inset:0; background:rgba(15,15,13,.62); }
.modal__shell{
  position:relative; margin:5vh auto; max-width:760px; width:calc(100% - 32px);
  max-height:90vh; overflow:auto; background:var(--bone);
  border:2px solid var(--ink); box-shadow:12px 12px 0 rgba(15,15,13,.28);
}
.modal__head{ position:sticky; top:0; background:var(--yellow); border-bottom:2px solid var(--ink); padding:14px 22px; display:flex; align-items:center; justify-content:space-between; }
.modal__close{ background:none; border:none; font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; color:var(--ink); }
.modal__body{ padding:26px 22px 30px; }
.modal__intro .display{ font-size:clamp(26px,4vw,40px); }
.modal__intro .lead{ margin-top:10px; }
.tier-list{ margin-top:24px; display:flex; flex-direction:column; gap:0; border-top:2px solid var(--ink); }
.tier{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:14px; align-items:start;
  width:100%; text-align:left; background:transparent; border:none; border-bottom:1px solid var(--ink-14);
  padding:20px 4px; cursor:pointer; font:inherit; color:inherit;
  transition:background .12s ease, padding-left .12s ease;
}
.tier:hover{ background:rgba(250,195,2,.28); padding-left:10px; }
.tier__num{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--ink-55); padding-top:5px; }
.tier__name{ display:block; font-family:var(--slab); text-transform:uppercase; font-size:20px; line-height:1.1; }
.tier__desc{ display:block; font-size:14px; line-height:1.5; color:var(--ink-70); margin-top:6px; }
.tier__price{ font-family:var(--mono); font-size:13px; text-align:right; white-space:nowrap; display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.tier__price .strike{ text-decoration:line-through; color:var(--ink-30); }
.tier__price .sub{ font-size:10px; letter-spacing:0.05em; color:var(--ink-55); white-space:normal; max-width:150px; text-align:right; }
.tier__arrow{ font-size:16px; padding-top:3px; }
.tier-foot{ margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.tier-foot__copy{ font-size:14px; line-height:1.5; color:var(--ink-70); margin:0; }
.tier-foot__copy .meta{ display:inline; margin-right:6px; color:var(--ink); }
.tier-foot__fine{ font-size:12px; color:var(--ink-55); margin:6px 0 0; line-height:1.5; }
@media (max-width:640px){
  .tier{ grid-template-columns:1fr auto; grid-template-areas:"num arrow" "main main" "price price"; }
  .tier__num{ grid-area:num; } .tier__main{ grid-area:main; } .tier__price{ grid-area:price; text-align:left; align-items:flex-start; }
  .tier__price .sub{ text-align:left; } .tier__arrow{ grid-area:arrow; }}

.tier-form, .tier-confirm{ display:none; }
.tier-form.is-active, .tier-confirm.is-active{ display:block; }
.tier-form__crumb{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:baseline; border-bottom:2px solid var(--ink); padding-bottom:12px; }
.tier-form__back{ background:none; border:none; cursor:pointer; font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--ink); padding:0; }
.tier-form__selected{ font-family:var(--mono); font-size:12px; letter-spacing:0.04em; color:var(--ink-70); margin:0; }
.tier-form__selected .sep{ margin:0 8px; color:var(--ink-30); }
.tier-form__fields{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field--full{ grid-column:1 / -1; }
.field label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-55); margin-bottom:6px; }
.field input, .field textarea{
  width:100%; padding:12px 12px; border:2px solid var(--ink); background:var(--bone);
  font:inherit; font-size:15px; color:var(--ink); border-radius:2px; resize:vertical;
}
.tier-form__submit{ margin-top:22px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.tier-form__note{ font-size:13px; color:var(--ink-55); margin:0; max-width:26em; }
.tier-confirm .display{ margin-top:10px; }
.tier-confirm .body{ margin:14px 0 22px; max-width:34em; }
@media (max-width:640px){ .tier-form__fields{ grid-template-columns:1fr; }}

/* ─────────────────────────────────────────────
   TO TOP
   ───────────────────────────────────────────── */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:70;
  display:inline-flex; align-items:center; gap:7px;
  background:var(--yellow); color:var(--ink); border:2px solid var(--ink);
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  padding:9px 13px; cursor:pointer; border-radius:2px;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
  box-shadow:3px 3px 0 rgba(15,15,13,.22);
}
.to-top.is-visible{ opacity:1; pointer-events:auto; }

/* ═════════════════════════════════════════════
   YELLOW PAGES — bought by the column-inch
   ═════════════════════════════════════════════ */
.yp{ background:var(--yellow); padding:34px 0 44px; }
@media (max-width:820px){ .yp{ padding:22px 0 30px; }}
.yp__inner{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
/* the ad frame */
.ypad{ border:4px solid var(--ink); background:var(--yellow); margin:0 0 0; }
.ypsec{ padding:26px 26px 30px; border-bottom:3px solid var(--ink); }
.ypsec:last-child{ border-bottom:none; }
@media (max-width:820px){ .ypsec{ padding:20px 16px 24px; } .ypad{ border-width:3px; }}

/* reverse-out bars */
.ypbar{
  margin:0;
  background:var(--ink); color:var(--yellow);
  text-align:center; padding:13px 18px;
  font-family:var(--slab); text-transform:uppercase;
  font-size:clamp(17px,3.1vw,30px); line-height:1.12; letter-spacing:.01em;
  border-bottom:3px solid var(--ink);
}
.ypbar + .deal{ border-top:none; }
.ypbar small{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--bone); margin-top:7px; font-weight:400; }

/* section headings */
.yph{ margin:0 0 4px; font-family:var(--slab); text-transform:uppercase; font-size:clamp(22px,3.6vw,38px); line-height:1.02; }
.yph--c{ text-align:center; }
.ypk{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin:0 0 12px; }
.ypk--c{ text-align:center; }
.yprule{ height:0; border-top:3px solid var(--ink); border-bottom:1px solid var(--ink); margin:14px 0 18px; }

/* service checklist — YP ads list everything */
.svc{ list-style:none; margin:0; padding:0; columns:2; column-gap:34px; }
.svc li{
  break-inside:avoid; display:grid; grid-template-columns:20px 1fr; gap:9px;
  padding:7px 0; border-bottom:1px dotted rgba(15,15,13,.42);
  font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.01em;
  text-transform:uppercase; line-height:1.3;
}
.svc .ck{ font-weight:700; font-size:15px; line-height:1.2; }
@media (max-width:700px){ .svc{ columns:1; } .svc li{ font-size:13px; }}

/* results with dot leaders */
.res{ margin:0; }
.res__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:8px; padding:13px 0; border-bottom:1px solid var(--ink); }
.res__row:last-child{ border-bottom:none; }
.res__n{ font-family:var(--slab); font-size:clamp(26px,4.2vw,42px); line-height:1; }
.res__d{ border-bottom:3px dotted rgba(15,15,13,.45); transform:translateY(-5px); min-width:20px; }
.res__l{ font-family:var(--sans); font-size:14px; font-weight:500; text-transform:uppercase; letter-spacing:.02em; text-align:right; max-width:30ch; line-height:1.35; }
@media (max-width:700px){
  .res__row{ grid-template-columns:1fr; gap:2px; }
  .res__d{ display:none; }
  .res__l{ text-align:left; max-width:none; }}

/* testimonials */
.says{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.says__q{ padding:16px 18px; border-right:2px solid var(--ink); }
.says__q:last-child{ border-right:none; }
.says__q p{ margin:0 0 10px; font-size:15px; line-height:1.42; }
.says__q span{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; }
@media (max-width:820px){
  .says{ grid-template-columns:1fr; }
  .says__q{ border-right:none; border-bottom:2px solid var(--ink); padding:14px 0; }
  .says__q:last-child{ border-bottom:none; }}

/* coupon */
.coupon{ border:3px dashed var(--ink); padding:20px 22px; display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:center; }
.coupon__clip{ font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; margin:0 0 10px; }
.coupon__h{ font-family:var(--slab); text-transform:uppercase; font-size:clamp(20px,3vw,31px); line-height:1.02; margin:0 0 8px; }
.coupon__s{ font-size:14px; line-height:1.45; margin:0 0 14px; }
@media (max-width:820px){ .coupon{ grid-template-columns:1fr; gap:18px; padding:18px 16px; }}

/* the close */
.close{ background:var(--ink); color:var(--bone); padding:34px 26px 38px; text-align:center; position:relative; }
.close--tight{ padding:38px 26px 34px; }
.close--tight .close__h{ font-size:clamp(28px,5.4vw,54px); }
.close--tight .close__rows{ max-width:470px; margin-top:26px; }
.close__k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); margin:0 0 14px; }
.close__h{ font-family:var(--slab); text-transform:uppercase; color:var(--yellow); font-size:clamp(30px,6.4vw,66px); line-height:.98; margin:0; }
.close__s{ margin:16px auto 0; max-width:36ch; font-size:16px; line-height:1.45; color:rgba(244,241,236,.82); }
.close__cta{ margin-top:26px; }
.close__rows{ margin:28px auto 0; max-width:560px; border-top:2px solid rgba(244,241,236,.28); }
.close__row{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:baseline; padding:10px 0; border-bottom:1px solid rgba(244,241,236,.18); }
.close__row b{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); font-weight:500; }
.close__row i{ border-bottom:2px dotted rgba(244,241,236,.3); transform:translateY(-5px); }
.close__row span{ font-family:var(--sans); font-size:13px; text-transform:uppercase; letter-spacing:.03em; text-align:right; }
/* phone — findable, not shouty. Same yellow as the labels. */
.tel{ color:var(--yellow); text-decoration:none; border-bottom:1px solid rgba(250,195,2,.42); white-space:nowrap; }
.tel:hover{ border-bottom-color:var(--yellow); }
@media (max-width:700px){
  .close__row{ grid-template-columns:1fr; gap:1px; text-align:left; }
  .close__row i{ display:none; }
  .close__row span{ text-align:left; }}

/* starburst */
.burst{ position:absolute; top:-26px; right:18px; width:112px; height:112px; }
.burst svg{ width:100%; height:100%; display:block; animation:burst-spin 22s linear infinite; }
.burst__t{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  font-family:var(--slab); text-transform:uppercase; color:var(--ink);
  font-size:20px; line-height:.95; transform:rotate(-11deg);
}
.burst__t em{ font-style:normal; font-family:var(--mono); font-size:8px; letter-spacing:.09em; margin-top:3px; font-weight:500; }
@keyframes burst-spin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
@media (max-width:820px){ .burst{ width:84px; height:84px; top:-20px; right:8px; } .burst__t{ font-size:15px; } .burst__t em{ font-size:7px; }}

/* trust badges */
/* certifications — YP ads always list them */
.certs{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:2px solid var(--ink); }
.certs li{ padding:14px 12px; border-right:1px solid rgba(15,15,13,.35); text-align:center; }
.certs li:last-child{ border-right:none; }
.certs b{ display:block; font-family:var(--sans); font-weight:600; font-size:13px; line-height:1.25; text-transform:uppercase; letter-spacing:.01em; }
.certs span{ display:block; margin-top:5px; font-family:var(--mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; opacity:.62; }
@media (max-width:820px){
  .certs{ grid-template-columns:1fr 1fr; }
  .certs li{ border-right:1px solid rgba(15,15,13,.35); border-bottom:1px solid rgba(15,15,13,.35); padding:11px 8px; }
  .certs li:nth-child(2n){ border-right:none; }
  .certs li:last-child{ grid-column:1 / -1; border-bottom:none; border-right:none; }
}

.badges{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; }
.badges li{
  font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  padding:11px 16px; border-right:2px solid var(--ink);
}
.badges li:last-child{ border-right:none; }
@media (max-width:820px){ .badges li{ padding:8px 11px; font-size:10px; border-right-width:1px; }}

/* YP footer */
.ypfoot{ background:var(--ink); color:var(--bone); padding:26px 0 30px; text-align:center; }
.ypfoot__n{ font-family:var(--slab); text-transform:uppercase; font-size:clamp(22px,4vw,34px); margin:0 0 8px; }
.ypfoot__n .ai{ color:var(--yellow); }
.ypfoot p{ margin:0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:rgba(244,241,236,.66); line-height:1.9; }
.ypfoot a{ color:var(--yellow); text-decoration:none; border-bottom:1px solid rgba(250,195,2,.45); }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .keycap__float, .keycap img, .keycap__hint .up, .burst svg{ animation:none !important; }}

/* ─────────────────────────────────────────────
   THE DEAL — retainer offer band
   ───────────────────────────────────────────── */
.deal{ background:var(--ink); color:var(--bone); padding:30px 26px 32px; border-bottom:3px solid var(--ink); }
.deal__k{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); margin:0 0 14px; text-align:center; }
.deal__h{ font-family:var(--slab); text-transform:uppercase; color:var(--yellow); text-align:center;
  font-size:clamp(26px,5vw,54px); line-height:1; margin:0; }
.deal__h em{ font-style:normal; color:var(--bone); }
.deal__s{ text-align:center; margin:16px auto 0; max-width:44ch; font-size:16px; line-height:1.5; color:rgba(244,241,236,.82); }
.deal__strike{ text-decoration:line-through; color:rgba(244,241,236,.5); }
.deal__rows{ margin:26px auto 0; max-width:620px; border-top:2px solid rgba(244,241,236,.28); }
.deal__row{ display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:baseline; padding:11px 0; border-bottom:1px solid rgba(244,241,236,.18); }
.deal__row b{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); font-weight:500; }
.deal__row i{ border-bottom:2px dotted rgba(244,241,236,.3); transform:translateY(-5px); }
.deal__row span{ font-family:var(--sans); font-size:13px; text-transform:uppercase; letter-spacing:.03em; text-align:right; }
.deal__why{ margin:22px auto 0; max-width:52ch; text-align:center; font-family:var(--sans); font-size:14px; line-height:1.55; color:rgba(244,241,236,.66); }
.deal__why b{ color:var(--bone); font-weight:500; }
@media (max-width:700px){
  .deal{ padding:24px 16px 26px; }
  .deal__row{ grid-template-columns:1fr; gap:1px; text-align:left; }
  .deal__row i{ display:none; }
  .deal__row span{ text-align:left; }
}

/* ─────────────────────────────────────────────
   MOBILE — legible type, thumb-sized targets
   ───────────────────────────────────────────── */
@media (max-width:820px){
  /* nothing under 11px: these are all labels people actually read */
  .deal__row b,
  .close__row b     { font-size:11px; letter-spacing:.1em; }
  .deal__row span,
  .close__row span  { font-size:14px; }
  .says__q span     { font-size:11px; letter-spacing:.07em; }
  .certs span       { font-size:11px; }
  .certs b          { font-size:13.5px; }
  .badges li        { font-size:11px; padding:9px 12px; }
  .tier__price .sub { font-size:11px; }
  .tier__num        { font-size:12px; }
  .tier__desc       { font-size:14.5px; }
  .menu__price,
  .mono             { font-size:12.5px; }
  .keycap__hint     { font-size:11.5px; }
  .hero__from       { font-size:11.5px; }

  /* the starburst shrinks below readability — give the label room */
  .burst            { width:96px; height:96px; top:-22px; right:6px; }
  .burst__t         { font-size:17px; }
  .burst__t em      { font-size:9px; letter-spacing:.05em; margin-top:2px; }

  /* 44px targets */
  .wordmark         { display:inline-block; padding:6px 0; }
  .to-top           { padding:12px 15px; }
  .tel,
  .ypfoot a,
  .final__off a,
  .deal__why a      { display:inline-block; padding:5px 1px; }
  .modal__close     { padding:8px 4px; }
  .tier             { padding:22px 4px; }
}

/* the starburst overlaps the close heading on the narrowest phones */
@media (max-width:420px){
  .burst{ width:82px; height:82px; top:-18px; right:2px; }
  .burst__t{ font-size:15px; }
  /* "15 minutes" can't be set legibly inside an 82px badge, and the page
     says it in four other places — the burst just says FREE */
  .burst__t em{ display:none; }
  .close__h{ padding-top:34px; }
}


/* ─────────────────────────────────────────────
   MOBILE — one screen, no scroll  (front page only)
   Scoped to html.onepager. aig.css is shared with the five vertical pages,
   which are long and must stay scrollable — never unscope these rules.
   The front page is nav + hero + footer sized to fit 100svh, so the help key
   is always on screen and the only thing to do is press it. Type and the key
   scale off viewport height so it holds from an SE up to a Pro Max.
   ───────────────────────────────────────────── */
@media (max-width:820px){
  html.onepager{ height:100%; }
  .onepager body{ min-height:100svh; display:flex; flex-direction:column; }
  .onepager .nav{ flex:0 0 auto; }
  .onepager main{ flex:1 1 auto; display:flex; flex-direction:column; }

  .onepager .hero{ flex:1 1 auto; display:flex; align-items:stretch; padding:0; border-bottom:none; }
  .onepager .hero > .container{ display:flex; flex-direction:column; width:100%; padding-top:14px; }
  .onepager .hero__grid{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:clamp(10px,2.6vh,26px); margin:0; }

  .onepager .hero__from{ font-size:10.5px; margin:0 0 10px; gap:8px; }
  .onepager .hero__from .rule{ width:18px; }
  .onepager .hero__head{ font-size:clamp(30px,7.8vh,48px); line-height:.94; }
  .onepager .hero__sub{ font-size:clamp(13.5px,1.9vh,16px); line-height:1.32; margin:10px 0 0; }

  .onepager .hero__art{ margin:0; }
  .onepager .keycap{ max-width:min(80vw,36vh); }
  .onepager .keycap__hint{ font-size:10.5px; margin-top:7px; }

  .onepager .hero__serve{ margin-top:14px; font-size:clamp(15px,2.4vh,20px); padding:10px 8px; border-bottom-width:0; }

  /* footer: phone and legal only */
  .onepager .ypfoot{ flex:0 0 auto; padding:12px 0 14px; }
  .onepager .ypfoot .foot-wide{ display:none; }
  .onepager .ypfoot p{ font-size:11.5px; line-height:1.7; }
}

/* Lock the page only where it's been verified to fit. Below 600px tall the
   footer would clip, and unreachable legal links beat a small scroll. */
@media (max-width:820px) and (min-height:600px){
  .onepager body{ height:100svh; overflow:hidden; }
}

/* very short phones: give the key less room rather than clipping the type */
@media (max-width:820px) and (max-height:700px){
  .onepager .hero__head{ font-size:clamp(27px,7vh,38px); }
  .onepager .hero__sub{ display:none; }
  .onepager .keycap{ max-width:min(80vw,38vh); }
  .onepager .hero__from{ font-size:10px; margin-bottom:6px; }
  .onepager .hero__serve{ margin-top:10px; padding:8px 6px; }
  .onepager .keycap__hint{ margin-top:5px; }
  .onepager .ypfoot{ padding:9px 0 11px; }
  .onepager .ypfoot p{ line-height:1.6; }
}

/* iPhone SE-era heights: shrink the key again so the footer still fits */
@media (max-width:820px) and (max-height:599px){
  .onepager .keycap{ max-width:min(80vw,32vh); }
}