/* look E: the ten pages beside the homepage. Loaded after style.css and built on its tokens; the homepage does not load it. */

/* titles and small text */
/* a page's big heading is always weight 800, whatever its level (the calculator's was a first-level heading at 700) */
.hero-heading{font-weight:800}
.page-title{font-family:var(--head);font-weight:800;font-size:clamp(2rem,1.4rem + 2.6vw,3rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.page-title+.lead{margin-top:var(--s4)}
p.eyebrow{margin-bottom:var(--s2)}
.h3{font-weight:700;font-size:1.1875rem;line-height:1.3;letter-spacing:-.005em;margin-top:var(--s6)}
.small{margin-top:var(--s5);font-size:.9375rem;line-height:1.6;color:var(--muted)}
.strong-lead{font-family:var(--head);font-weight:700;color:var(--ink)}
.section-head .lead+.lead{margin-top:var(--s3)}

/* page hero: one column of copy */
.page-hero .hero-copy{max-width:46rem}
.page-hero .ticks{margin-top:var(--s5)}
.page-hero .lead{max-width:40rem}
.page-hero .calc-intro{margin-top:var(--s6)}
/* ticks on a white ground: tinted disc, dark lettering */
.ticks-ink{color:var(--ink)}
.ticks-ink svg{background:var(--tint-2)}
.split-copy .ticks{margin-top:var(--s4)}

/* four figures */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.stats li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5) var(--s4);text-align:center}
.stats strong{display:block;font-family:var(--head);font-weight:800;font-size:clamp(2rem,1.5rem + 2vw,2.75rem);line-height:1.1;letter-spacing:-.02em;color:var(--purple)}
.stats span{display:block;margin-top:var(--s2);font-size:.9375rem;line-height:1.4;font-weight:600;color:var(--text)}
.stats-note{max-width:44rem;margin:var(--s7) auto 0;text-align:center}

/* cards with a picture or a small mark */
.cards-art .card{text-align:center}
.card-art{width:140px;height:140px;object-fit:contain;margin:0 auto var(--s4)}
.loader{position:relative;display:flex;align-items:center;justify-content:center;gap:10px}
.loader span{width:12px;height:12px;border-radius:50%;background:var(--ink);animation:loader-pulse 1.2s infinite ease-in-out}
.loader span:nth-child(2){animation-delay:.2s}
.loader span:nth-child(3){animation-delay:.4s}
.loader em{position:absolute;bottom:30px;font-style:normal;font-size:.8125rem;color:var(--muted)}
@keyframes loader-pulse{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:none}}
.feature-ic{height:44px;width:auto;margin-bottom:var(--s4)}

/* answers made of several paragraphs or a list */
.faq-a{padding:0 var(--s5) var(--s5);max-width:42rem}
.faq-list .faq-a p{padding:0;max-width:none}
.faq-a p+p,.faq-a ul,.faq-a ul+p{margin-top:var(--s3)}
.faq-a ul{list-style:disc;padding-left:1.25rem}

/* closing panel: the line under the button */
.final-note{max-width:36rem;margin:var(--s5) auto 0;font-size:.9375rem;line-height:1.6;color:#d9d8ee}

/* GHL forms and the calendar */
.split-form{align-items:start}
/* --h-m and --h-d: the height each widget reaches once loaded (phone, wide), kept free from the start so nothing below it jumps */
.embed-box{min-height:var(--h-m,0);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);box-shadow:var(--shadow);overflow:hidden}
.embed-wide{max-width:1040px;margin:var(--s7) auto 0}
.ghl-embed{display:block;width:100%;border:0;min-height:480px}

/* our own audit survey, after the GHL survey on the live site: light fields with the words inside, one orange bar under them */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.survey{width:100%;max-width:400px}
.survey [hidden]{display:none}
.survey-fields{padding:0 16px 44px}
.survey-slide{display:grid;gap:18px}
.survey-slide+.survey-slide{margin-top:18px}
.survey-slide[hidden]+.survey-slide{margin-top:0}
.survey input[type=text],.survey input[type=email]{display:block;width:100%;height:40px;padding:9px 18px;font:400 1rem/1.3 var(--body);color:var(--ink);background:#fff;border:1px solid #a9b3c6;border-radius:5px}
.survey input::placeholder{color:#85858f;font-size:.78125rem}
.survey input:focus-visible{outline:2px solid var(--purple);outline-offset:0;border-color:var(--purple)}
.with-icon{position:relative;display:block}
.with-icon svg{position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;fill:none;stroke:#8c8c8c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.survey .with-icon input{padding-left:36px}
.survey .hp{position:absolute;left:-9999px;width:1px;height:1px;padding:0;border:0;opacity:0}
.survey-bar{display:flex;align-items:stretch;height:50px;background:var(--orange);border-radius:0 0 8px 8px;overflow:hidden}
.bar-btn{display:inline-flex;align-items:center;gap:4px;padding:0 24px;border:0;background:none;font-family:var(--head);font-weight:600;font-size:.875rem;line-height:1;color:var(--ink);cursor:pointer;transition:background-color .2s var(--out)}
.bar-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bar-go{margin-left:auto;background:rgba(0,0,0,.1)}
.bar-go:hover{background:rgba(0,0,0,.17)}
.bar-prev:hover{background:rgba(0,0,0,.07)}
.bar-btn:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;border-radius:0}
.bar-btn[disabled]{opacity:.6;cursor:default}
.bar-step{align-self:center;margin-left:auto;font-family:var(--head);font-weight:600;font-size:.875rem;color:var(--ink)}
/* phones, as on the live site: arrows without the words NEXT and PREV, and the step count in the bar */
.bar-prev span,[data-next] span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.field-error{margin-top:10px;font-size:.875rem;line-height:1.4;color:#cb3837}
.form-error{margin-top:var(--s4);font-weight:600;color:#b42318}

/* the audit sign-up page: no menu, no site footer, two panels that fill one screen (spacing follows the screen's height) */
.landing{display:grid;min-height:100vh;min-height:100dvh}
/* not painted until the page's last script has run, so a half-read page is never centred and then moved (see LANDING_JS) */
.js .landing:not(.is-ready){visibility:hidden}
.landing-main,.landing-side{display:flex;align-items:center;padding:clamp(1.25rem,4vh,3rem) var(--gutter)}
.landing-in{display:grid;gap:clamp(.75rem,2.2vh,1.375rem);width:100%;max-width:33rem;margin-inline:auto}
.landing-logo{justify-self:start;border-radius:4px}
.landing-logo img{width:132px;height:53px}
.landing p.eyebrow{margin:0 0 calc(-1 * clamp(.375rem,1.2vh,.75rem))}
.landing .page-title{font-size:clamp(1.875rem,1.1rem + 2.1vw,2.625rem)}
.landing .lead{margin-top:0;font-size:1.0625rem;line-height:1.6}
.landing .small{margin-top:0;max-width:400px;font-size:.875rem;line-height:1.55}
.landing-legal{font-size:.8125rem;line-height:1.5;color:var(--muted)}
.landing-legal a{color:inherit}
.landing-side{background:var(--purple);color:#fff}
.landing-side :focus-visible{outline-color:#fff}
.landing-side h2{color:#fff;font-size:clamp(1.375rem,1rem + 1.1vw,1.75rem);line-height:1.15}
.landing-side p{font-size:.9375rem;line-height:1.6}
.discover-row{display:grid;grid-template-columns:120px 1fr;gap:var(--s5);align-items:start}
.landing-side .report{justify-self:start;width:120px;padding:5px}
html.book,html.book body{background:transparent}html.book .landing-main{background:var(--paper)}.book .landing-side .report{display:none}.book .discover-row{grid-template-columns:1fr}  /* opened as a book from the cover: the report is already open, do not show its cover again (Tazio, 2026-10-03) */
.landing-side .report img{border-radius:6px}
.landing-side .ticks{margin-top:0;gap:var(--s2)}
.landing-side .ticks li{grid-template-columns:24px 1fr;gap:var(--s2);font-size:.9375rem;line-height:1.45}
.landing-side .ticks svg{width:24px;height:24px;padding:4px}
.landing-rule{border:0;border-top:1px solid rgba(255,255,255,.4);margin:clamp(.125rem,1vh,.5rem) 0}
/* the four platform logos always share one line (Tazio, 2026-10-01): columns in the logos' own proportions (their widths at
   28 px high), so in a narrower panel all four shrink by the same factor. From 458 px they have their full size. */
.landing-logos{display:grid;grid-template-columns:90fr 100fr 100fr 72fr;column-gap:7%;align-items:center;max-width:458px}
.landing-logos img{display:block;width:100%;height:auto;filter:brightness(0) invert(1);opacity:.8}

/* our own website cost calculator, after Tazio's GHL form (measured 2026-10-02): a 767 px white card, one row per slider
   (label, 8 px track with a 20 px purple thumb, bold value on the right, rows 43 px apart on desktop), the total card and the
   contact fields that only show once Pages and Design are set, the purple Connect button only once the fields are valid.
   His total card was a blue-violet gradient with a blue note and a green rule; here the brand purple, white and orange. */
.calc-box{max-width:767px;margin:var(--s7) auto 0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5) var(--s4);box-shadow:var(--shadow)}
.calc [hidden]{display:none}
.crow{display:grid;grid-template-columns:max-content 1fr max-content;gap:10px;align-items:center;min-height:24px}
.crow+.crow{margin-top:19px}
.crow label{font-size:1rem;font-weight:500;line-height:1.5;color:var(--ink);white-space:nowrap}
.crow output{min-width:80px;font-size:.875rem;font-weight:700;line-height:1.5;color:var(--text);text-align:right;white-space:nowrap}
.crow input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;margin:0;border-radius:5px;background:#ddd;outline:none;opacity:.7;transition:opacity .2s}
.crow input[type=range]:hover,.crow input[type=range]:focus-visible{opacity:1}
.crow input[type=range]:focus-visible{outline:3px solid var(--purple);outline-offset:6px}
.crow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--purple);cursor:pointer}
.crow input[type=range]:hover::-webkit-slider-thumb{background:var(--purple-deep)}
.crow input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--purple);cursor:pointer}
.crow input[type=range]::-moz-range-track{height:8px;border-radius:5px;background:#ddd}
.calc-total{margin-top:15px;padding:20px;border-radius:8px;background:var(--purple);color:#fff;text-align:center;box-shadow:0 4px 6px rgba(0,0,0,.1);animation:calc-in .3s ease-out}
@keyframes calc-in{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}}
.calc-amount{font-family:var(--head);font-weight:700;font-size:2.1875rem;line-height:1.5;margin-bottom:10px}
.calc-amount-label{font-size:1.0625rem;opacity:.9}
.calc-base{margin-top:10px;padding:15px;border-radius:6px;background:rgba(255,255,255,.18);font-size:.875rem;line-height:1.5}
.calc-breakdown{margin-top:10px;padding:15px;border-radius:6px;border-left:4px solid var(--orange);background:#fff;color:var(--ink);text-align:left}
.cb-item{display:flex;justify-content:space-between;gap:var(--s4);margin:5px 0;padding:3px 0;font-size:.9375rem}
.cb-base{font-weight:700;border-bottom:1px solid #eee;padding-bottom:8px;margin-bottom:8px}
.cb-total{border-top:2px solid var(--orange);margin-top:10px;padding-top:8px;font-weight:700;font-size:1.0625rem}
.calc-contact{margin-top:20px}
.js .calc-contact:not(.is-on){display:none}
/* the two consent lines only once first name, last name, phone and email are in the right form (Tazio, 2026-10-02) */
.js .calc-contact:not(.is-valid) .ccheck{display:none}
.cfield{margin-top:12px}
.cfield label{display:block;margin-bottom:6px;font-size:1rem;font-weight:500;color:var(--ink)}
.cfield input{width:100%;height:36px;padding:8px 15px;border:1px solid #acacac;border-radius:5px;background:#fff;font:400 1rem/1.2 var(--body);color:var(--ink)}
.cfield input::placeholder{color:#8c8c8c;font-weight:300}
.ccheck{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:start;margin-top:14px;font-size:.9375rem;line-height:1.5;color:var(--ink);cursor:pointer}
.ccheck input{width:16px;height:16px;margin:4px 0 0}
.ccheck a{color:var(--purple)}
.calc-submit{display:block;width:100%;min-height:44px;margin-top:20px;border:0;border-radius:6px;background:var(--purple);color:#fff;font:600 1rem/1.2 var(--body);cursor:pointer}
.js .calc-submit:not(.is-on){display:none}
.calc-submit:hover{background:var(--purple-deep)}
.calc-submit:disabled{opacity:.6;cursor:default}
.calc-done{text-align:center;padding:var(--s6) 0}

/* contact details */
.contact-list{display:grid;gap:var(--s5);margin-top:var(--s6)}
.contact-list li{display:grid;grid-template-columns:44px 1fr;gap:var(--s4);align-items:start}
.contact-list strong{font-family:var(--head)}
.ci{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--tint-2);color:var(--purple-deep)}
.ci svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* legal text */
.prose{max-width:calc(48rem + 2 * var(--gutter))}
.prose h1{font-weight:800;font-size:clamp(2rem,1.4rem + 2.6vw,3rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:var(--s4)}
.prose h2{font-size:1.375rem;line-height:1.25;letter-spacing:-.01em;margin:var(--s7) 0 var(--s3)}
.prose h3,.prose h4{font-family:var(--head);font-weight:700;font-size:1.125rem;line-height:1.3;color:var(--ink);margin:var(--s6) 0 var(--s2)}
.prose p{margin-top:var(--s3)}
.prose ul,.prose ol{list-style:revert;margin:var(--s3) 0 0 1.4rem}
.prose li{margin-top:var(--s1)}
.prose table{display:block;overflow-x:auto;border-collapse:collapse;width:100%;margin:var(--s4) 0;font-size:.9375rem}
.prose td,.prose th{border:1px solid var(--line);padding:var(--s2);vertical-align:top}
.prose{overflow-wrap:break-word}

@media (min-width:640px){
  .survey-fields{padding:0 40px 44px}
  .bar-step{display:none}
  .bar-prev span,[data-next] span{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
}

@media (min-width:760px){
  .stats{grid-template-columns:repeat(4,1fr);gap:var(--s5)}
}

@media (min-width:900px){
  .embed-box{min-height:var(--h-d,0)}
  .split-form{grid-template-columns:1fr 1fr}
}

/* The edge between the white and the purple panel is an arrow tip pointing at the form (Tazio, 2026-10-01: "It is about
   directing the user to the important thing on the screen"), always: to the left when the panels are side by side, upward when
   the purple panel is under the form. Both sides of the tip lean at the same angle (--tip-s: .16 = 16 px per 100 px).
   The page's script measures the form's middle (--tip-x, --tip-y) and the panel's size (--tip-w, --tip-h) and sets has-tip;
   without script the edge is the straight line. */
.landing{--tip-s:.16}
@media (max-width:1023.98px){
  /* under the form: the tip is on the panel's top edge, above the form's middle; the text starts below the lower end of the edge */
  .has-tip .landing-side{clip-path:polygon(0 calc(var(--tip-x) * var(--tip-s)),var(--tip-x) 0,100% calc((var(--tip-w) - var(--tip-x)) * var(--tip-s)),calc(100% + 8px) calc((var(--tip-w) - var(--tip-x)) * var(--tip-s)),calc(100% + 8px) calc(100% + 8px),-8px calc(100% + 8px),-8px calc(var(--tip-x) * var(--tip-s)));
    padding-top:calc(clamp(1.25rem,4vh,3rem) + max(var(--tip-x),var(--tip-w) - var(--tip-x)) * var(--tip-s))}
}
@media (min-width:1024px){
  /* side by side from 1024 px (narrower, the tip would touch the form). The purple panel reaches 24 px into the white column
     and its text starts 56 px further right, clear of the leaning edge. */
  .landing{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .landing--one{grid-template-columns:1fr}
  .has-tip .landing-side{margin-left:-24px;padding-left:calc(var(--gutter) + 80px);
    clip-path:polygon(calc(var(--tip-y) * var(--tip-s)) 0,calc(var(--tip-y) * var(--tip-s)) -8px,calc(100% + 8px) -8px,calc(100% + 8px) calc(100% + 8px),calc((var(--tip-h) - var(--tip-y)) * var(--tip-s)) calc(100% + 8px),calc((var(--tip-h) - var(--tip-y)) * var(--tip-s)) 100%,0 var(--tip-y))}  /* the polygon's edges lie 8 px outside the panel's top, right and bottom: an edge on the box line itself left a light hairline at the right corners on Tazio's screen (2026-10-03) */
}

/* short laptop screens: the sign-up page tightens so it still fits without scrolling */
/* slide 2 of the form is the tallest state: in a window or overlay under 800 px high the centred column gets less air above and below,
   so it still fits (the content is centred, so nothing moves where it already fitted) */
@media (min-width:1024px) and (max-height:800px){
  .landing-main,.landing-side{padding-block:1.25rem}
}
@media (min-width:1024px) and (max-height:700px){
  .landing-main,.landing-side{padding-block:.875rem}
  .landing-in{gap:.5rem}
  .landing-logo img{width:104px;height:41px}
  .landing .page-title{font-size:1.875rem}
  .landing .lead{font-size:1rem;line-height:1.5}
  .landing .small{font-size:.8125rem;line-height:1.45}
  .landing .survey-fields{padding-bottom:26px}
  .landing .survey-slide{gap:12px}
  .landing-side p{font-size:.875rem;line-height:1.5}
}

@media (prefers-reduced-motion:reduce){
  .loader span{animation:none}
}

@media (min-width:760px){
  .calc-box{padding:var(--s6)}
  /* each row's value column is as wide as its own value and the slider fills the rest (Tazio picked B, 2026-10-02) */
  .crow{grid-template-columns:190px 1fr max-content;gap:15px}
  .crow-yn{grid-template-columns:312px 1fr max-content}
  .crow output{min-width:0}
}

/* the 91-Second Business Audit (business_audit.py). The quiz reuses the calculator's steps, tiles and pills (calc_steps.CSS,
   written into that page); these are its own parts and the results page. Look E tokens only. */
.ba-quiz{max-width:767px}
.ba-q{border:0;padding:0;margin:0}
.ba-q+.ba-q{margin-top:var(--s5)}
.ba-q legend,.ba-q .q-label{display:block;font-family:var(--head);font-weight:700;font-size:1.0625rem;line-height:1.35;color:var(--ink);margin-bottom:var(--s3)}
/* Your numbers, Marketing, Operations: two questions a row from 800 px (Tazio, 2026-10-03). Each question spans three rows of
   the step's grid (question, field, helper line), so the fields of a row line up even when one question wraps to two lines */
@media (min-width:800px){
  .ba-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s6);align-items:start}
  .ba-cols>.ba-q{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;padding-bottom:var(--s5)}
  .ba-cols>.ba-q+.ba-q{margin-top:0}
  .ba-cols .q-label{align-self:end}
  .ba-cols .ba-two{grid-template-columns:1fr}
}
.ba-q{transition:opacity .3s var(--out)}
.js .ba-quiz .is-later{visibility:hidden;opacity:0}
@media (prefers-reduced-motion:reduce){.ba-q{transition:none}}
.ba-under .field-error{margin-top:var(--s2)}   /* red line and benchmark line share one row of the two-column grid (they overlapped as two) */
.ba-help{margin-top:var(--s2);min-height:1.45em;font-size:.875rem;line-height:1.45;color:var(--muted)}
.ba-cats{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.ba-two{grid-template-columns:1fr}
@media (min-width:640px){.ba-two{grid-template-columns:1fr 1fr}}
.ba-quiz select,.ba-quiz input[type=text],.ba-quiz input[type=email]{display:block;width:100%;height:48px;padding:0 14px;font:400 1rem/1.3 var(--body);color:var(--ink);background:var(--paper);border:1px solid #a9b3c6;border-radius:8px}
.ba-quiz input.sr{width:1px;height:1px;padding:0;border:0}   /* the bot trap keeps its 1 px size (the rule above made it 1425 px wide, a sideways scroll) */
.ba-quiz select:focus-visible,.ba-quiz input:focus-visible{outline:2px solid var(--purple);outline-offset:0;border-color:var(--purple)}
.ba-num{position:relative;display:block;max-width:20rem}
.ba-num.has-pre input{padding-left:30px}
.ba-num.has-suf input{padding-right:110px}
.ba-pre,.ba-suf{position:absolute;top:50%;transform:translateY(-50%);font-weight:600;color:var(--muted);pointer-events:none}
.ba-pre{left:14px}
.ba-suf{right:14px;font-size:.9375rem}
/* the answers as one joined bar, equal parts, 48 px tall, the chosen part purple (Tazio picked B on
   sheets/audit-choice-options, 2026-10-03: "I prefer the joined bar"); the quiz only, the calculator keeps its pills */
.ba-quiz .segs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;width:100%;max-width:28rem;border:1.5px solid var(--purple);border-radius:10px;overflow:hidden}
.ba-quiz .seg{position:relative}
.ba-quiz .seg span{display:grid;place-items:center;height:100%;min-height:48px;padding:6px 8px;text-align:center;border:0;border-radius:0;font:600 .9375rem/1.2 var(--head);color:var(--purple-deep);background:var(--paper);transition:background-color .15s}
.ba-quiz .seg+.seg span{border-left:1.5px solid var(--purple)}
.ba-quiz .seg:hover span{background:var(--tint)}
.ba-quiz .seg:has(input:checked) span{background:var(--purple);color:#fff}
.ba-quiz .seg:has(input:focus-visible) span{outline:3px solid var(--ink);outline-offset:-4px}
/* the 0 to 10 scale: six a row on phones (two rows), eleven from 640 px */
/* phones: 0 to 5 on the first row, 6 to 10 spread over the second (30 columns: 6 x 5, then 5 x 6), no empty box */
.ba-quiz .segs.ba-scale{grid-auto-flow:row;grid-template-columns:repeat(30,1fr);max-width:none}
.ba-quiz .ba-scale .seg{grid-column:span 5}
.ba-quiz .ba-scale .seg:nth-child(n+7){grid-column:span 6}
.ba-quiz .ba-scale .seg:nth-child(1) span,.ba-quiz .ba-scale .seg:nth-child(7) span{border-left:0}
.ba-quiz .ba-scale .seg:nth-child(n+7) span{border-top:1.5px solid var(--purple)}
@media (min-width:640px){.ba-quiz .segs.ba-scale{grid-template-columns:repeat(11,1fr)}.ba-quiz .ba-scale .seg,.ba-quiz .ba-scale .seg:nth-child(n+7){grid-column:auto}.ba-quiz .ba-scale .seg:nth-child(7) span{border-left:1.5px solid var(--purple)}.ba-quiz .ba-scale .seg:nth-child(n+7) span{border-top:0}}
.ba-quiz .ba-cols .segs{align-self:start}
.est-bar .b-now{font-family:var(--head);font-weight:700;font-size:.9375rem;color:var(--orange);text-align:right}
.js .ba-reveal:not(.is-on){display:none}
.ba-grade{display:grid;gap:var(--s5);align-items:center}
@media (min-width:640px){.ba-grade{grid-template-columns:160px 1fr;gap:var(--s6)}}
.ba-ring{position:relative;width:160px;height:160px;margin-inline:auto}
.ba-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ba-ring circle{fill:none;stroke-width:10}
.ring-bg{stroke:var(--tint-2)}
.ring-fg{stroke:var(--purple);stroke-linecap:round;transition:stroke-dasharray .8s var(--out)}
.ring-g{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:18px;font-family:var(--head);font-weight:800;font-size:3.25rem;line-height:1;color:var(--ink)}
.ring-s{position:absolute;left:0;right:0;bottom:38px;text-align:center;font-size:.8125rem;font-weight:600;color:var(--muted)}
.ba-headline{font-family:var(--head);font-weight:700;font-size:1.25rem;line-height:1.35;color:var(--ink);min-height:6.75em}
/* room for the longest of the eight headlines, measured at 320 to 1440 px, so the bars under it never move when it arrives */
@media (min-width:380px){.ba-headline{min-height:5.4em}}
@media (min-width:700px){.ba-headline{min-height:4.05em}}
@media (min-width:900px){.ba-headline{min-height:2.7em}}
.ba-bars{display:grid;gap:10px;margin-top:var(--s4)}
.ba-bars li{display:grid;grid-template-columns:6.5rem 1fr 2.25rem;gap:var(--s3);align-items:center;font-size:.9375rem}
.bar-n{font-weight:600;color:var(--ink)}
.bar-t{height:10px;border-radius:999px;background:var(--tint-2);overflow:hidden}
.bar-t i{display:block;height:100%;width:0;border-radius:inherit;background:var(--purple);transition:width .8s var(--out)}
.bar-v{text-align:right;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.ring-fg,.bar-t i{transition:none}}
.ba-contact{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.ba-note{font-size:.9375rem;line-height:1.55;margin-bottom:var(--s4)}
.ba-contact .cfield label{display:block;font-weight:600;font-size:.875rem;color:var(--ink);margin-bottom:4px}
.ba-contact .cfield{margin-bottom:var(--s3)}
.ba-warn{margin:-.25rem 0 var(--s4);padding:var(--s3) var(--s4);border-left:3px solid var(--orange);background:#fdeee4;border-radius:0 8px 8px 0;font-size:.9375rem;line-height:1.5;color:var(--ink)}
.ba-privacy{font-size:.8125rem;color:var(--muted)}
.ba-quiz .step-nav .btn,.bad-tools .btn{width:auto}

/* results page: a landing page (no menu, no footer) that scrolls */
.ba-dash{display:block;background:var(--tint)}
.bad-in{max-width:880px;margin-inline:auto;padding:var(--s5) var(--gutter) var(--s7)}
.bad-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);margin-bottom:var(--s5)}
.bad-tools{display:flex;gap:var(--s2)}
.btn-back{background:var(--paper);border:1px solid var(--line);box-shadow:none;color:var(--ink)}
.btn-back:hover{background:var(--paper);border-color:var(--purple);color:var(--ink)}
.bad-tools .btn{min-height:40px;padding:var(--s2) var(--s4);font-size:.9375rem}
.ba-dash .page-title{font-size:clamp(1.875rem,1.2rem + 2vw,2.5rem)}
.ba-dash p.eyebrow{margin:0 0 var(--s2)}
.ba-quiz .b-step{white-space:nowrap}
.ba-quiz .b-now{min-width:0}
.bad-meta{margin-top:var(--s2);color:var(--muted)}
.bad-card{margin-top:var(--s5);background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--shadow)}
@media (min-width:640px){.bad-card{padding:var(--s6)}}
.bad-h{font-size:1.1875rem;font-weight:800;letter-spacing:-.005em;margin-bottom:var(--s4)}
.ba-grade .bad-h{margin:var(--s5) 0 0}
.bad-metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
@media (min-width:760px){.bad-metrics{grid-template-columns:repeat(3,1fr)}}
.bad-metrics li{padding:var(--s4);border:1px solid var(--line);border-radius:8px}
.m-n{font-size:.8125rem;font-weight:600;line-height:1.35;color:var(--muted)}
.m-v{margin-top:4px;font-family:var(--head);font-weight:800;font-size:1.5rem;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.m-b{margin-top:4px;font-size:.75rem;line-height:1.4;color:var(--muted)}
.ba-chip{display:inline-block;margin-top:var(--s2);padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.5;background:var(--tint);color:var(--muted)}
.ba-chip.is-good{background:var(--tint-2);color:var(--purple-deep)}
.ba-chip.is-low{background:#fdeee4;color:#c2410c}
.ba-chip.is-mid{background:var(--tint);color:var(--ink)}
.bad-range{font-family:var(--head);font-weight:800;font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);line-height:1.15;color:var(--purple);transition:opacity .2s}
.bad-range small{font-size:1rem;font-weight:700;color:var(--muted)}
.bad-short{margin-top:var(--s2);font-weight:600;color:var(--ink);min-height:1.65em}
.bad-range.is-empty{font-size:clamp(1.25rem,1rem + 1vw,1.625rem);color:var(--ink)}
.bad-range.is-empty small{display:none}
.bad-track.is-empty .t-range{visibility:hidden}
.is-busy .bad-range,.is-busy .bad-short{opacity:.5}
.bad-track{position:relative;height:12px;margin:var(--s7) 0 var(--s6);border-radius:999px;background:var(--tint-2);--now:0%;--lo:0%;--hi:0%;--goal:0%}
.t-range{position:absolute;top:0;bottom:0;left:var(--lo);width:calc(var(--hi) - var(--lo));min-width:4px;border-radius:999px;background:var(--purple);transition:left .4s var(--out),width .4s var(--out)}
.t-now,.t-goal{position:absolute;top:-8px;bottom:-8px;width:2px;background:var(--ink)}
.t-now{left:var(--now)}
.t-goal{left:var(--goal);background:var(--orange-deep)}
.t-now em,.t-goal em{position:absolute;left:50%;transform:translateX(-50%);font-style:normal;font-size:.75rem;font-weight:700;white-space:nowrap;color:var(--ink)}
.t-now em{bottom:calc(100% + 4px)}
.t-goal em{top:calc(100% + 4px);color:#c2410c}
.bad-note{font-size:.8125rem;line-height:1.5;color:var(--muted)}
.bad-lead{margin:calc(-1 * var(--s2)) 0 var(--s4);font-size:.9375rem}
.bad-actions{display:grid;gap:var(--s2)}
.ba-act{display:grid;grid-template-columns:1fr max-content;gap:var(--s2) var(--s3);align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:8px}
.ba-act.is-on{border-color:var(--purple);background:var(--tint)}
.ba-act label{display:grid;grid-template-columns:20px 1fr;gap:2px var(--s3);cursor:pointer}
.ba-act input{grid-row:span 2;width:20px;height:20px;margin:2px 0 0;accent-color:var(--purple)}
.act-n{font-weight:700;color:var(--ink);line-height:1.35}
.act-d{font-size:.875rem;line-height:1.4}
.ba-act .ba-chip{margin:0}
@media (max-width:519.98px){.ba-act{grid-template-columns:1fr}.ba-act .ba-chip{justify-self:start;margin-left:32px}}
.bad-plan{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s5)}
.bad-plan .btn{width:auto}
.bad-plan-note{flex:1 1 16rem;font-size:.9375rem;line-height:1.5}
.bad-plan[hidden]{display:none}
.bad-cta{margin-top:var(--s5);padding:var(--s6) var(--s5);border-radius:var(--r);background:var(--purple);text-align:center}
.bad-cta h2{color:#fff;font-size:clamp(1.375rem,1rem + 1.2vw,1.875rem)}
.bad-cta .btn{width:auto;margin-top:var(--s5)}
.ba-dash .landing-legal{margin-top:var(--s5);text-align:center}
.bad-missing[hidden]{display:none}
.bad-missing{display:grid;gap:var(--s4);max-width:36rem;padding-block:var(--s8)}
.bad-missing .btn{width:auto}
.print-only{display:none}
@media print{
  @page{margin:14mm}
  .no-print{display:none!important}
  .print-only{display:block}
  body,.ba-dash{background:#fff}
  .bad-in{padding:0;max-width:none}
  .bad-top{margin-bottom:var(--s3)}
  .bad-card{box-shadow:none;break-inside:avoid;margin-top:var(--s3);padding:var(--s4)}
  .ba-ring,.ring-fg,.bar-t i,.t-range{transition:none}
  .bad-actions{grid-template-columns:1fr 1fr;gap:6px}
  .ba-act{padding:6px 10px}
  .ba-act input{display:none}
  .ba-act label{grid-template-columns:1fr}
  .act-d{font-size:.75rem}
  .ba-act:not(.is-on){opacity:.7}
  .bad-printed{margin-top:var(--s3);font-size:.75rem;color:var(--muted)}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* /services (services_page.py) */
.svc[id]{scroll-margin-top:88px}
/* arriving from a footer link or an old address: the card (or every card of the question) borders out purple */
.svc:target,section:target .svc{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple),var(--shadow)}
.section-head .q-n{margin-bottom:var(--s2)}
.svc-link{margin-top:var(--s4)}
.svc-link a{font-weight:600;color:var(--purple-deep)}
.svc-note{margin:var(--s7) auto 0;text-align:center;text-wrap:balance;font-size:1rem;line-height:1.6;color:var(--muted)}
.svc-pair{display:grid;gap:var(--s5)}
.svc-pair h2{font-size:clamp(1.375rem,1.1rem + .8vw,1.625rem);line-height:1.2}
.svc-pair p{margin-top:var(--s4)}
.svc-out li{margin-top:var(--s4);line-height:1.55}
.svc-out strong{color:var(--ink)}
@media (min-width:900px){
  .cards-2{grid-template-columns:1fr 1fr}
  .svc-pair{grid-template-columns:1fr 1fr;gap:var(--s6)}
}

/* /about (about_page.py) */
.about-hero .hero-copy{max-width:none}
.about-logo{display:none}
.about-how h3{margin:0}
.about-how p{margin-top:var(--s2)}
@media (min-width:900px){
  .about-hero{grid-template-columns:7fr 5fr}
  .about-logo{display:block;justify-self:center;width:min(100%,360px);background:#fff;border-radius:var(--r);padding:var(--s6) var(--s5);box-shadow:0 2px 4px rgba(22,20,58,.12),0 18px 40px rgba(22,20,58,.16)}
}
.about-sym{display:none}
@media (min-width:900px){
  .about-sym-card{width:min(100%,320px);padding:var(--s6)}
  .about-sym-card img{width:100%;max-width:240px;margin-inline:auto}
  .about-sym{display:block;justify-self:center;width:min(100%,300px);border-radius:50%;box-shadow:0 2px 4px rgba(22,20,58,.12),0 18px 40px rgba(22,20,58,.2)}
  .about-sym img{display:block;width:100%;border-radius:50%}
}
@media (min-width:900px){.about-sym-plain{box-shadow:none}}
@media (min-width:900px){.about-sym-shape img{border-radius:0;filter:drop-shadow(0 2px 2px rgba(22,20,58,.18)) drop-shadow(0 10px 14px rgba(22,20,58,.22))}}
/* about hero E: the ball. Arrival from below left, behind How We Work (z-index), apex, landing with two soft bounces;
   .out = hop up and off to the right (scroll), removing .out plays the arrival again. Transform and opacity only. */
.ball-hero{overflow-x:clip}
.ball-hero+.section{position:relative;z-index:1}
@media (min-width:900px){
  .about-ball{box-shadow:none;border-radius:0}
  .about-ball img{position:relative;border-radius:50%}
  .about-ball .by{position:relative}
  .about-ball .by::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 2px 4px rgba(22,20,58,.12),0 18px 40px rgba(22,20,58,.2);opacity:0;animation:ball-in-s 1.5s .25s both}
  .about-ball .bx{animation:ball-in-x .9s cubic-bezier(.25,.6,.45,1) .25s both}
  .about-ball .by{animation:ball-in-y 1.5s .25s both,ball-in-swing 1.5s .25s both}
  .about-ball img{animation:ball-in-r 1.5s .25s both}
  .about-ball.out .bx{animation:ball-out-x .8s both,ball-out-o .8s both}
  .about-ball.out .by{animation:ball-out-y .8s both}
  .about-ball.out img{animation:ball-out-r .8s both}
  .about-ball.out .by::before{animation:ball-out-s .8s both}
  .about-ball.gone .by{opacity:0;animation:none}
}
@keyframes ball-in-x{from{transform:translateX(-300px)}to{transform:none}}
@keyframes ball-in-y{
  0%{transform:translateY(560px);animation-timing-function:cubic-bezier(.33,.66,.66,1)}
  30%{transform:translateY(-90px);animation-timing-function:cubic-bezier(.33,0,.66,.33)}
  60%{transform:none;animation-timing-function:cubic-bezier(.33,.66,.66,1)}
  72%{transform:translateY(-28px);animation-timing-function:cubic-bezier(.33,0,.66,.33)}
  82%{transform:none;animation-timing-function:cubic-bezier(.33,.66,.66,1)}
  90%{transform:translateY(-7px);animation-timing-function:cubic-bezier(.33,0,.66,.33)}
  100%{transform:none}}
@keyframes ball-in-r{
  0%{transform:rotate(-50deg)}
  58%{transform:rotate(0)}
  61%{transform:scale(1.05,.95)}
  66%{transform:none}
  81%{transform:none}
  83%{transform:scale(1.02,.98)}
  87%,100%{transform:none}}
@keyframes ball-in-s{0%,84%{opacity:1}100%{opacity:0}}
@keyframes ball-out-s{0%{opacity:0}10%,100%{opacity:1}}
/* exit (his rule: ALWAYS upward and onward): a crouch (0.1 s), then a jump up and to the right: steady sideways speed,
   the rise slowing, so the path bends right as it climbs and leaves above the top of the screen; it never goes down */
@keyframes ball-out-x{0%,12%{transform:none;animation-timing-function:linear}100%{transform:translateX(420px)}}
@keyframes ball-out-y{0%,12%{transform:none;animation-timing-function:cubic-bezier(.33,.66,.66,1)}100%{transform:translateY(-760px)}}
@keyframes ball-out-r{0%{transform:none}7%{transform:scale(1.05,.93)}12%{transform:none}100%{transform:rotate(50deg)}}
@keyframes ball-out-o{0%,85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.about-ball .bx,.about-ball .by,.about-ball img{animation:none!important}.about-ball.out .bx{opacity:1}.about-ball .by::before{animation:none!important;opacity:0}}
/* BALL-SWING (ball_swing.py writes this block, do not edit by hand) */
@keyframes ball-in-swing{0%{translate:-114.9px 53.6px}1%{translate:-114.2px 52.7px}2%{translate:-113.2px 51.6px}3%{translate:-111.9px 50.2px}4%{translate:-110.3px 48.4px}5%{translate:-108.4px 46.3px}6%{translate:-106.0px 43.9px}7%{translate:-103.3px 41.3px}8%{translate:-100.2px 38.4px}9%{translate:-96.8px 35.4px}10%{translate:-93.0px 32.3px}11%{translate:-89.0px 29.3px}12%{translate:-84.9px 26.3px}13%{translate:-80.6px 23.5px}14%{translate:-76.2px 20.8px}15%{translate:-71.9px 18.3px}16%{translate:-67.6px 16.1px}17%{translate:-63.4px 14.1px}18%{translate:-59.4px 12.3px}19%{translate:-55.5px 10.7px}20%{translate:-51.8px 9.2px}21%{translate:-48.2px 8.0px}22%{translate:-44.9px 6.9px}23%{translate:-41.6px 5.9px}24%{translate:-38.6px 5.1px}25%{translate:-35.7px 4.3px}26%{translate:-33.0px 3.7px}27%{translate:-30.4px 3.1px}28%{translate:-28.0px 2.6px}29%{translate:-25.7px 2.2px}30%{translate:-23.6px 1.9px}31%{translate:-21.6px 1.6px}32%{translate:-19.7px 1.3px}33%{translate:-17.9px 1.1px}34%{translate:-16.3px 0.9px}35%{translate:-14.7px 0.7px}36%{translate:-13.2px 0.6px}37%{translate:-11.9px 0.5px}38%{translate:-10.6px 0.4px}39%{translate:-9.5px 0.3px}40%{translate:-8.4px 0.2px}41%{translate:-7.4px 0.2px}42%{translate:-6.4px 0.1px}43%{translate:-5.6px 0.1px}44%{translate:-4.8px 0.1px}45%{translate:-4.1px 0.1px}46%{translate:-3.4px 0.0px}47%{translate:-2.8px 0.0px}48%{translate:-2.3px 0.0px}49%{translate:-1.9px 0.0px}50%{translate:-1.5px 0.0px}51%{translate:-1.1px 0.0px}52%{translate:-0.8px 0.0px}53%{translate:-0.5px 0.0px}54%{translate:-0.3px 0.0px}55%{translate:-0.2px 0.0px}56%{translate:-0.1px 0.0px}57%{translate:-0.0px 0.0px}58%{translate:0.0px 0.0px}59%{translate:0.0px 4.3px}60%{translate:0.0px 6.9px}61%{translate:0.0px 7.5px}62%{translate:0.0px 5.3px}63%{translate:0.0px 2.4px}64%{translate:0.0px 0.9px}65%{translate:0.0px 0.2px}66%{translate:0.0px 0.0px}67%{translate:0.0px 0.0px}68%{translate:0.0px 0.0px}69%{translate:0.0px 0.0px}70%{translate:0.0px 0.0px}71%{translate:0.0px 0.0px}72%{translate:0.0px 0.0px}73%{translate:0.0px 0.0px}74%{translate:0.0px 0.0px}75%{translate:0.0px 0.0px}76%{translate:0.0px 0.0px}77%{translate:0.0px 0.0px}78%{translate:0.0px 0.0px}79%{translate:0.0px 0.0px}80%{translate:0.0px 0.0px}81%{translate:0.0px 0.0px}82%{translate:0.0px 2.4px}83%{translate:0.0px 3.0px}84%{translate:0.0px 1.8px}85%{translate:0.0px 0.6px}86%{translate:0.0px 0.1px}87%{translate:0.0px 0.0px}88%{translate:0.0px 0.0px}89%{translate:0.0px 0.0px}90%{translate:0.0px 0.0px}91%{translate:0.0px 0.0px}92%{translate:0.0px 0.0px}93%{translate:0.0px 0.0px}94%{translate:0.0px 0.0px}95%{translate:0.0px 0.0px}96%{translate:0.0px 0.0px}97%{translate:0.0px 0.0px}98%{translate:0.0px 0.0px}99%{translate:0.0px 0.0px}100%{translate:0.0px 0.0px}}
/* BALL-SWING end */
/* about hero lead: the shared step ladder (.step-lead in e-3q/style.css) with a 52 px step (its column is wider), from
   1180 px only, where its paragraph has the full 602 px (at 1100 to 1179 it is 558 px and 4 lines) */
.about-step{--st:52px}
@media (max-width:1179.98px){.about-step{text-align:start;text-wrap:pretty}.about-step::before{content:none}}
/* calculator: the inverse ladder (his ask): the paragraph UNDER the button steps up, each line --st shorter than the one
   below, the first one --c past the button's right corner, so the slant points up at it (aim checked: 0 px off the
   corner with the 32 px gap). No justifying (his call): lines break naturally, so
   the steps are close, not exact; offset and step from a search for the most even natural ladder. The paragraph is 640 px from 760 px up (the .wide text starts there). */
@media (min-width:760px){
  .calc-step{--bw:252px;--c:72px;--st:68px;--lh:1.6em;text-wrap:wrap}
  .calc-step::before{content:"";float:right;width:calc(100% - var(--bw));height:calc(5 * var(--lh));
    shape-outside:polygon(var(--c) 0,100% 0,100% 100%,calc(var(--c) + 5 * var(--st)) 100%)}
}