/* Alloro 2026 home. Scoped to .a26 so the site's shared stylesheet is untouched.
   Layout concept: paper editorial page, two ink bands carry the statement and the product, proof sits on cards. */
.a26 {
  --a-terra: #d66853; --a-terra-bright: #e07a66; --a-terra-deep: #c0543a; --a-terra-text: #b1462c;
  --a-amber: #d9a441; --a-green: #4f8a5b;
  --a-ink: #171615; --a-ink-2: #1e1d1b; --a-ink-soft: #3b3531; --a-muted: #6b635c;
  --a-paper: #f7f5f3; --a-surface: #ffffff; --a-surface-2: #fbf9f7; --a-line: #e8e4df; --a-line-strong: #d8d3cc;
  --a-on-ink: #f0ece8; --a-on-ink-muted: #a8a097; --a-on-ink-line: #2e2c29;
  --a-serif: "Spectral", Georgia, "Times New Roman", serif;
  --a-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --a-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --a-sh-1: 0 1px 2px rgba(23,22,21,.05), 0 6px 18px rgba(23,22,21,.05);
  --a-sh-2: 0 2px 6px rgba(23,22,21,.06), 0 22px 48px -12px rgba(23,22,21,.2);
  --a-sh-3: 0 8px 24px -8px rgba(23,22,21,.18), 0 40px 80px -24px rgba(23,22,21,.28);
  --a-section-y: clamp(4.5rem, 9vw, 8.5rem);
  position: relative;
  font-family: var(--a-sans);
  color: var(--a-ink);
  background: var(--a-paper);
  padding-block: var(--a-section-y);
  overflow: clip;
}
.a26 *, .a26 *::before, .a26 *::after { box-sizing: border-box; }
.a26 img, .a26 video { max-width: 100%; display: block; }
:where(.a26) p { margin: 0; }
.a26-wrap { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* Type */
.a26-display { font: 500 clamp(3rem, 1.4rem + 5.8vw, 6.4rem)/0.96 var(--a-serif); letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.a26-h2 { font: 500 clamp(2.3rem, 1.3rem + 3.8vw, 4.4rem)/1.02 var(--a-serif); letter-spacing: -0.018em; margin: 0; text-wrap: balance; }
.a26-line { display: inline-block; }
.a26-accent { font-style: italic; color: var(--a-terra-text); }
.a26-eyebrow { font: 700 12px/1.3 var(--a-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--a-terra-text); display: inline-flex; align-items: center; gap: 12px; }
.a26-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.a26-kicker { font: italic 400 clamp(1.05rem, 1rem + .3vw, 1.25rem)/1.3 var(--a-serif); color: var(--a-terra-text); margin-bottom: 14px; }
.a26-lead { font: 400 clamp(1.05rem, 1rem + .35vw, 1.25rem)/1.6 var(--a-sans); color: var(--a-ink-soft); max-width: 36em; }
.a26-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buttons and links */
.a26-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.a26-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px; font: 700 16px/1 var(--a-sans); text-decoration: none; border: 1px solid transparent; transition: background-color .25s var(--a-ease), box-shadow .25s var(--a-ease), color .25s; will-change: transform; }
.a26-btn--ink { background: var(--a-ink); color: var(--a-paper); box-shadow: 0 1px 2px rgba(23,22,21,.2), 0 10px 24px -12px rgba(23,22,21,.6); }
.a26-btn--ink:hover { background: #000; box-shadow: 0 1px 2px rgba(23,22,21,.2), 0 18px 32px -14px rgba(192,84,58,.7); }
.a26-btn--ghost { color: var(--a-ink); border-color: rgba(23,22,21,.35); }
.a26-btn--ghost:hover { background: rgba(23,22,21,.06); }
.a26-btn:focus-visible, .a26-link:focus-visible, .a26 [role="tab"]:focus-visible { outline: 2px solid var(--a-terra); outline-offset: 3px; }
.a26-link { font: 600 16px/1.2 var(--a-sans); color: var(--a-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .2s; }
.a26-link:hover { color: var(--a-terra-text); }
.a26-ink .a26-link { color: var(--a-on-ink); }

/* Demo tags (local build only; never shipped) */
.a26-demo-tag, .a26-demo-badge { font: 700 11px/1 var(--a-sans); letter-spacing: .12em; text-transform: uppercase; border-radius: 999px; padding: 6px 10px; }
.a26-demo-tag { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(23,22,21,.82); color: #fff; }
.a26-demo-badge { display: inline-block; align-self: flex-start; border: 1px solid var(--a-ink); color: var(--a-ink); background: transparent; }
.a26-demo-badge--ink { border-color: var(--a-on-ink-muted); color: var(--a-on-ink); }

/* Reveal (JS adds .a26-js to <html>; without JS everything is simply visible) */
.a26-js .a26 [data-a26-reveal] { opacity: 0; transform: translateY(22px); }
.a26-js .a26 [data-a26-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--a-ease), transform .9s var(--a-ease); transition-delay: var(--a26-d, 0ms); }

/* HERO */
.a26-hero { padding-top: clamp(7.5rem, 10vw, 10rem); padding-bottom: 0; background: radial-gradient(1200px 520px at 70% 0%, rgba(214,104,83,.10), transparent 70%), var(--a-paper); }
.a26-dots { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.a26-hero-glow { position: absolute; z-index: 0; left: 50%; top: 58%; width: min(1100px, 120vw); height: 620px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(214,104,83,.22), rgba(214,104,83,0)); filter: blur(10px); pointer-events: none; }
.a26-hero-copy { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px 64px; align-items: end; }
.a26-hero-copy .a26-eyebrow { grid-column: 1 / -1; }
.a26-hero-side { display: flex; flex-direction: column; gap: 18px; padding-bottom: 10px; }
.a26-hero-sub { font: italic 400 clamp(1.3rem, 1.1rem + .8vw, 1.75rem)/1.3 var(--a-serif); color: var(--a-ink); }
.a26-hero .a26-actions { margin-top: 10px; }
.a26-stage { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: clamp(48px, 7vw, 88px) auto 0; padding-inline: max(20px, env(safe-area-inset-left, 0px)); perspective: 1600px; }
.a26-browser { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line); box-shadow: var(--a-sh-3); }
.a26-browser-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; background: var(--a-surface-2); border-bottom: 1px solid var(--a-line); }
.a26-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--a-line-strong); }
.a26-browser-url { margin-left: 14px; font: 500 12px/1 var(--a-sans); color: var(--a-muted); background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 999px; padding: 6px 14px; }
.a26-browser img, .a26-browser video { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; background: var(--a-surface-2); }
.a26-browser--hero { transform-origin: 50% 0; margin-bottom: -2px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.a26-float { position: absolute; z-index: 3; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--a-sh-3); border: 1px solid var(--a-line); background: #fff; }
.a26-float--review { width: min(380px, 34%); right: max(8px, 2%); top: 16%; }
/* Clean fade: the dashboard frame itself fades to transparent (a mask), so no grey wash is painted over the dark sidebar */
.a26-browser--hero { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.6) 76%, transparent 97%); mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,.6) 76%, transparent 97%); box-shadow: 0 -10px 40px -20px rgba(23,22,21,.18); }

/* STATEMENT: eight jobs after closing time */
.a26-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: start; }
.a26-stack { display: flex; flex-direction: column; gap: 18px; padding-top: 10px; }
.a26-marquee { position: relative; z-index: 1; margin-top: clamp(48px, 6vw, 80px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
/* One design: a single line of serif job names, ink on paper, small terracotta marks between them */
.a26-marquee { border-block: 1px solid var(--a-line); padding-block: clamp(18px, 2.4vw, 30px); }
.a26-marquee-track { display: flex; align-items: center; width: max-content; animation: a26-marquee 48s linear infinite; }
.a26-marquee-track span { flex: none; display: inline-flex; align-items: center; font: 400 clamp(1.7rem, 1.2rem + 1.8vw, 2.9rem)/1 var(--a-serif); letter-spacing: -0.01em; color: var(--a-ink); white-space: nowrap; }
.a26-marquee-track span::after { content: ""; width: 9px; height: 9px; margin-inline: clamp(22px, 3vw, 44px); border-radius: 50%; background: var(--a-terra); box-shadow: 0 0 0 5px rgba(214,104,83,.14); }
@keyframes a26-marquee { to { transform: translateX(-50%); } }
.a26-marquee:hover .a26-marquee-track { animation-play-state: paused; }

/* INK bands */
/* The site's shared stylesheet paints every section after #main with paper using an id selector,
   so the ink (and the founder gradient) are painted on a layer behind the content instead. */
.a26-ink { color: var(--a-on-ink); }
.a26-ink::before, .a26-founder::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.a26-ink::before { background: var(--a-ink); }
.a26-ink .a26-accent { color: var(--a-terra-bright); }
.a26-ink .a26-kicker { color: var(--a-terra-bright); }
.a26-ink-glow { position: absolute; z-index: 0; width: 900px; height: 900px; left: -260px; top: -320px; background: radial-gradient(closest-side, rgba(214,104,83,.28), rgba(214,104,83,0)); pointer-events: none; }
.a26-ink-glow--right { left: auto; right: -320px; top: 22%; }
.a26-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.a26-owner { padding-block: clamp(6rem, 12vw, 11rem); }
.a26-statement-text { margin-top: clamp(28px, 4vw, 48px); max-width: 30ch; font: 400 clamp(1.6rem, 1.1rem + 2vw, 2.9rem)/1.28 var(--a-serif); letter-spacing: -0.01em; color: var(--a-on-ink); text-wrap: balance; }
.a26-word { display: inline; transition: opacity .2s linear; }

/* PROOF */
.a26-proof-h { margin-bottom: clamp(32px, 4vw, 56px); }
.a26-pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.a26-pc { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 18px; box-shadow: var(--a-sh-1); padding: clamp(22px, 3vw, 34px); min-width: 0; transition: box-shadow .35s var(--a-ease), transform .35s var(--a-ease); }
.a26-pc:hover { box-shadow: var(--a-sh-2); }
.a26-pc--lead { grid-column: 1 / -1; gap: 18px; }
.a26-lead-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.a26-pins { display: flex; align-items: flex-end; gap: clamp(8px, 1.4vw, 16px); padding-bottom: 6px; }
.a26-pin { position: relative; display: grid; place-items: center; width: clamp(48px, 5vw, 62px); height: clamp(48px, 5vw, 62px); border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: linear-gradient(140deg, var(--a-terra-bright), var(--a-terra-deep)); box-shadow: 0 10px 22px -10px rgba(192,84,58,.8), inset 0 1px 0 rgba(255,255,255,.35); }
.a26-pin b { transform: rotate(45deg); font: italic 600 15px/1 var(--a-serif); color: #fff; }
.a26-pin--new { width: clamp(58px, 6vw, 74px); height: clamp(58px, 6vw, 74px); box-shadow: 0 0 0 6px rgba(214,104,83,.16), 0 14px 26px -10px rgba(192,84,58,.9), inset 0 1px 0 rgba(255,255,255,.35); }
.a26-pin--new b { font-size: 18px; }
.a26-pc--lead .a26-chart { margin-top: 4px; }
.a26-pc--lead .a26-pc-line { max-width: 52em; }
/* 64 inquiries, one mark each */
.a26-grid64 { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 6px; padding: 6px 0 2px; }
.a26-grid64 i { display: block; aspect-ratio: 4 / 3; border-radius: 3px; background: linear-gradient(160deg, var(--a-terra-bright), var(--a-terra)); box-shadow: inset 0 -1px 0 rgba(0,0,0,.08); }
.a26-grid64 i::before { content: ""; display: block; height: 50%; border-bottom: 1.5px solid rgba(255,255,255,.55); transform: skewY(0); clip-path: polygon(0 0, 50% 100%, 100% 0); background: rgba(255,255,255,.22); }
/* about 350 vs 726 */
.a26-cols { display: flex; align-items: flex-end; gap: 18px; height: 190px; padding-top: 6px; }
.a26-col { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 8px; height: 100%; }
.a26-col-bar { position: relative; flex: 1; display: flex; align-items: flex-end; border-radius: 12px; background: var(--a-surface-2); border: 1px solid var(--a-line); overflow: hidden; }
.a26-col-bar i { display: block; width: 100%; height: var(--a26-h, 100%); border-radius: 10px 10px 0 0; background: linear-gradient(180deg, rgba(214,104,83,.45), rgba(214,104,83,.25)); }
.a26-col--b .a26-col-bar i { background: linear-gradient(180deg, var(--a-terra-bright), var(--a-terra-deep)); box-shadow: 0 -12px 30px -8px rgba(214,104,83,.6); }
.a26-col-n { font: 500 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1 var(--a-serif); color: var(--a-ink); font-variant-numeric: tabular-nums; }
.a26-col--b .a26-col-n { color: var(--a-terra-text); }
.a26-col-l { font: 700 12px/1 var(--a-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); }
/* DEMO slope: 4.3 to 2.6 */
.a26-slope { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.a26-slope text { font: 500 18px var(--a-serif); fill: var(--a-ink); }
.a26-slope-ax { stroke: var(--a-line-strong); stroke-dasharray: 3 4; }
.a26-slope-line { fill: none; stroke: var(--a-terra); stroke-width: 3; stroke-linecap: round; }
.a26-slope-dot { fill: var(--a-surface); stroke: var(--a-terra); stroke-width: 3; }
.a26-slope-dot--end { fill: var(--a-terra); }
/* visuals lead, text steps back */
.a26-pc--visual .a26-pc-big { font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.6rem); }
.a26-proof .a26-pc-line { font-size: 15px; line-height: 1.55; color: var(--a-ink-soft); }
.a26-chart .a26-pc-cap { margin-top: 10px; font-size: 13.5px; color: var(--a-muted); }
.a26-pc-text { display: flex; flex-direction: column; gap: 14px; }
.a26-pc-who { font: 700 12px/1.4 var(--a-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); }
.a26-pc-big { font: 500 clamp(2.8rem, 1.8rem + 3.6vw, 4.6rem)/1 var(--a-serif); letter-spacing: -0.02em; color: var(--a-terra-text); font-variant-numeric: tabular-nums; }
.a26-pc-line { font: 400 17px/1.6 var(--a-sans); color: var(--a-ink); }
.a26-pc-cap { font: 400 15px/1.6 var(--a-sans); color: var(--a-ink-soft); }
.a26-pc-src { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--a-line); font: 400 14px/1.5 var(--a-sans); color: var(--a-muted); }
.a26-chart { margin: 0; min-width: 0; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 14px; padding: 18px 18px 10px; }
.a26-chart-title { font: 500 18px/1.2 var(--a-serif); margin-bottom: 6px; }
.a26-chart-legend { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; font: 600 12px/1 var(--a-sans); color: var(--a-muted); margin-bottom: 8px; }
.a26-chart-legend .k { display: inline-block; width: 18px; height: 3px; border-radius: 2px; background: var(--a-terra); margin-right: -6px; }
.a26-chart-legend .k-bar { height: 10px; width: 10px; background: rgba(217,164,65,.55); }
.a26-chart-plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.a26-chart-plot text { font-family: var(--a-sans); font-size: 12px; fill: var(--a-muted); }
.a26-chart-plot .ax { stroke: var(--a-line-strong); stroke-width: 1; }
.a26-chart-plot .gr { stroke: var(--a-line); stroke-width: 1; stroke-dasharray: 2 4; }
.a26-chart-plot .rank { fill: none; stroke: var(--a-terra); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.a26-chart-plot .rank-area { fill: url(#a26-rank-fill); }
.a26-chart-plot .bar { fill: rgba(217,164,65,.55); }
.a26-chart-plot .dot { fill: var(--a-surface); stroke: var(--a-terra); stroke-width: 3; }
.a26-chart-plot .note { font-size: 12px; font-weight: 600; fill: var(--a-ink-soft); }
.a26-chart-plot .note-line { stroke: var(--a-ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.a26-chart-plot .win { font-family: var(--a-serif); font-size: 15px; font-style: italic; fill: var(--a-terra-text); }
.a26-dbl { display: flex; flex-direction: column; gap: 10px; }
.a26-dbl-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font: 600 13px/1 var(--a-sans); color: var(--a-muted); }
.a26-dbl-bar { height: 14px; background: var(--a-surface-2); border: 1px solid var(--a-line); border-radius: 999px; overflow: hidden; }
.a26-dbl-bar i { display: block; height: 100%; width: var(--a26-w, 100%); background: linear-gradient(90deg, var(--a-terra-bright), var(--a-terra)); border-radius: 999px; }
.a26-dbl-n { text-align: right; color: var(--a-ink); font-variant-numeric: tabular-nums; }
.a26-demo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.a26-pc--demo, .a26-quote { border-style: dashed; border-color: var(--a-line-strong); }
.a26-quote { position: relative; margin: 0; display: flex; flex-direction: column; gap: 18px; background: var(--a-surface); border: 1px dashed var(--a-line-strong); border-radius: 18px; padding: clamp(22px, 3vw, 30px); }
.a26-quote blockquote { margin: 0; font: 400 clamp(1.15rem, 1.05rem + .4vw, 1.4rem)/1.45 var(--a-serif); color: var(--a-ink); }
.a26-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; font: 400 14px/1.4 var(--a-sans); color: var(--a-muted); }
.a26-quote figcaption strong { color: var(--a-ink); font-weight: 700; }
.a26-quote-avatar { width: 40px; height: 40px; border-radius: 50%; background: repeating-linear-gradient(45deg, var(--a-line), var(--a-line) 4px, var(--a-surface-2) 4px, var(--a-surface-2) 8px); flex: none; }

/* FOUNDER */
.a26-founder::before { background: linear-gradient(180deg, var(--a-paper), #f3ece6); }
.a26-founder-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px 56px; align-items: center; max-width: 1040px; }
.a26-founder-photo { position: relative; width: clamp(120px, 14vw, 176px); aspect-ratio: 1; }
.a26-founder-photo::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(214,104,83,.45); }
.a26-founder-photo::after { content: ""; position: absolute; inset: -22px; border-radius: 50%; border: 1px dashed rgba(214,104,83,.3); animation: a26-spin 60s linear infinite; }
.a26-founder-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@keyframes a26-spin { to { transform: rotate(360deg); } }
.a26-founder-quote { margin: 0 0 18px; font: 400 clamp(1.4rem, 1rem + 1.6vw, 2.3rem)/1.32 var(--a-serif); color: var(--a-ink); text-wrap: pretty; }
.a26-founder-name { font: 700 14px/1.4 var(--a-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--a-muted); }
.a26-founder-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 18px; }

/* HOW IT WORKS: sticky phone */
.a26-section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.a26-how .a26-h2 { color: var(--a-on-ink); }
.a26-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 80px; align-items: start; }
.a26-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.a26-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 32px 0 32px 28px; border-left: 1px solid var(--a-on-ink-line); position: relative; opacity: .38; transition: opacity .5s var(--a-ease); }
.a26-step::before { content: ""; position: absolute; left: -1px; top: 32px; bottom: 32px; width: 2px; background: var(--a-terra); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--a-ease); }
.a26-step.is-active { opacity: 1; }
.a26-step.is-active::before { transform: scaleY(1); }
.a26-step-n { font: 500 clamp(3rem, 2rem + 3vw, 4.8rem)/1 var(--a-serif); color: var(--a-terra-bright); }
/* the site's shared CSS sets h3 { font-size: 18px !important }, so this one size needs !important too */
.a26-step h3 { margin: 0; font: 500 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.15 var(--a-serif); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem) !important; color: var(--a-on-ink); }
.a26-step p { font: 400 17px/1.6 var(--a-sans); color: var(--a-on-ink-muted); max-width: 30em; }
.a26-phone-col { position: sticky; top: max(90px, calc(50vh - 330px)); display: flex; justify-content: center; }
.a26-phone { position: relative; width: min(330px, 100%); aspect-ratio: 390 / 844; border-radius: 48px; padding: 12px; background: linear-gradient(145deg, #2c2a27, #0d0c0b); box-shadow: 0 0 0 1px #3d3a36, 0 50px 100px -30px rgba(0,0,0,.8), 0 0 120px rgba(214,104,83,.25); }
.a26-phone-notch { position: absolute; z-index: 3; top: 22px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%); background: #0d0c0b; border-radius: 999px; }
.a26-phone-screen { position: relative; width: 100%; height: 100%; border-radius: 37px; overflow: hidden; background: var(--a-paper); }
.a26-phone-shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); transition: opacity .6s var(--a-ease), transform .8s var(--a-ease); }
.a26-phone-shot.is-active { opacity: 1; transform: none; }
.a26-phone-shot img { width: 100%; height: auto; display: block; will-change: transform; }
.a26-phone .a26-demo-tag { top: auto; bottom: -38px; right: 50%; transform: translateX(50%); }
/* The flow: a band that narrows from seen on Google, to visited, to asked; particles show who drops off */
.a26-flow { position: relative; margin: clamp(56px, 8vw, 110px) 0 0; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--a-on-ink-line); border-radius: 22px; overflow: hidden; }
.a26-flow .a26-demo-badge { position: absolute; top: 18px; right: 18px; z-index: 2; }
.a26-flow-month { font: 700 12px/1 var(--a-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--a-on-ink-muted); margin-bottom: 8px; }
.a26-flow-stage { position: relative; height: clamp(160px, 20vw, 240px); }
.a26-flow-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.a26-flow-rate { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 1; font: 700 13px/1 var(--a-sans); color: var(--a-on-ink); background: rgba(23,22,21,.75); border: 1px solid rgba(224,122,102,.55); border-radius: 999px; padding: 7px 11px; backdrop-filter: blur(4px); }
.a26-flow-gates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; text-align: center; }
.a26-flow-gate { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.a26-fn { font: 500 clamp(1.9rem, 1.3rem + 2vw, 3.1rem)/1 var(--a-serif); color: var(--a-on-ink); font-variant-numeric: tabular-nums; }
.a26-flow-gate--lead .a26-fn { color: var(--a-terra-bright); }
.a26-fl { font: 700 12px/1.3 var(--a-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--a-on-ink-muted); }
/* A slow tour through four real screens, standing in for the silent loops */
.a26-browser--tour { margin-top: 28px; border-color: var(--a-on-ink-line); box-shadow: 0 40px 120px -30px rgba(214,104,83,.35), 0 30px 60px -30px rgba(0,0,0,.8); }
.a26-tour { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--a-surface-2); }
.a26-tour-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity 1.1s var(--a-ease); }
.a26-tour-shot.is-active { opacity: 1; animation: a26-pan 6s ease-out both; }
@keyframes a26-pan { from { transform: scale(1.06) translate(1.2%, 1%); } to { transform: scale(1) translate(0, 0); } }

/* Glare: light from the top-left, a warm tint from the bottom-right, a light-catching top edge,
   and a soft spotlight that follows the pointer (JS sets --mx/--my) */
.a26-pc, .a26-quote, .a26-tabpanels, .a26-cta, .a26-flow { isolation: isolate; }
.a26-pc, .a26-quote {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(214,104,83,.09) 0%, rgba(214,104,83,0) 60%),
    linear-gradient(155deg, #ffffff 0%, #fbf6f1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.35), var(--a-sh-1);
}
.a26-pc::before, .a26-quote::before, .a26-tabpanels::before, .a26-flow::before, .a26-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 60%);
  background-size: 250% 100%; background-position: 120% 0; opacity: .7;
}
.a26-pc.is-in::before, .a26-quote.is-in::before { animation: a26-sheen 1.8s .4s var(--a-ease) both; }
@keyframes a26-sheen { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.a26-pc::after, .a26-quote::after, .a26-tabpanels::after, .a26-flow::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(214,104,83,.10), rgba(214,104,83,0) 45%);
}
.a26-pc:hover::after, .a26-quote:hover::after, .a26-tabpanels:hover::after, .a26-flow:hover::after { opacity: 1; }
.a26-flow { background:
    radial-gradient(110% 90% at 0% 0%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 50%),
    radial-gradient(80% 90% at 100% 100%, rgba(214,104,83,.16) 0%, rgba(214,104,83,0) 60%),
    var(--a-ink-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 90px -40px rgba(0,0,0,.8); }
.a26-flow::before { background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.06) 45%, rgba(255,255,255,0) 60%); background-size: 250% 100%; }
.a26-flow::after { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(224,122,102,.14), rgba(224,122,102,0) 45%); }
.a26-cta { background:
    radial-gradient(90% 120% at 0% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 50%),
    radial-gradient(70% 90% at 100% 100%, rgba(120,40,20,.25) 0%, rgba(120,40,20,0) 60%),
    var(--a-terra);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 40px 80px -40px rgba(192,84,58,.7); }

/* EIGHT JOBS: tabs */
.a26-split-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.a26-tabs { display: grid; grid-template-columns: minmax(220px, .32fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.a26-tablist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--a-line); }
.a26-tablist li { border-bottom: 1px solid var(--a-line); }
.a26-tablist button { position: relative; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 16px 4px; font: 500 clamp(1.1rem, 1rem + .5vw, 1.45rem)/1.2 var(--a-serif); color: var(--a-muted); transition: color .25s; }
.a26-tablist button:hover { color: var(--a-ink); }
.a26-tablist button[aria-selected="true"] { color: var(--a-ink); }
.a26-tablist button[aria-selected="true"] span { font-style: italic; color: var(--a-terra-text); }
.a26-tab-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--a-terra); transform: scaleX(0); transform-origin: left; }
.a26-tablist button[aria-selected="true"] .a26-tab-prog { transform: scaleX(var(--a26-p, 1)); }
.a26-tabpanels { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--a-line); background: var(--a-surface); box-shadow: var(--a-sh-2); aspect-ratio: 16 / 10; }
.a26-tabpanel { position: absolute; inset: 0; }
.a26-tabpanel[hidden] { display: none; }
.a26-tabpanel img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.a26-tabpanel.is-active { animation: a26-fade .6s var(--a-ease); }
@keyframes a26-fade { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
.a26-tabpanel--empty { display: grid; place-items: center; background: radial-gradient(closest-side, rgba(214,104,83,.12), transparent), var(--a-surface-2); }
.a26-tabpanel--empty[hidden] { display: none; }
.a26-empty-job { font: italic 500 clamp(2rem, 1.4rem + 2vw, 3.4rem)/1 var(--a-serif); color: var(--a-terra-text); }

/* CLOSING CTA */
.a26-close { padding-top: 0; }
.a26-cta { position: relative; overflow: hidden; border-radius: 28px; background: var(--a-terra); color: var(--a-ink); padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 88px); }
.a26-cta-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 22px; max-width: 760px; }
.a26-cta .a26-lead { color: #2a1a14; }
.a26-cta .a26-btn--ghost { border-color: rgba(23,22,21,.45); }

/* Placeholder for an app screen not captured yet (local baseline only): a plain skeleton, no numbers */
.a26-ph { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--a-surface-2); overflow: hidden; display: block; }
.a26-tabpanel .a26-ph, .a26-phone-shot .a26-ph { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.a26-ph i { position: absolute; display: block; }
.a26-ph-side { left: 0; top: 0; bottom: 0; width: 17%; background: #1e1d1b; }
.a26-ph-top { left: 21%; right: 4%; top: 7%; height: 7%; border-radius: 8px; background: linear-gradient(90deg, var(--a-line) 0 34%, transparent 34%); }
.a26-ph-cards { left: 21%; right: 4%; top: 20%; height: 22%; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2.5%; }
.a26-ph-cards b { display: block; border-radius: 12px; background: var(--a-surface); border: 1px solid var(--a-line); }
.a26-ph-chart { left: 21%; right: 4%; top: 48%; bottom: 8%; border-radius: 12px; background:
  linear-gradient(transparent 0 70%, rgba(214,104,83,.10) 70%), repeating-linear-gradient(transparent 0 24%, var(--a-line) 24% calc(24% + 1px)), var(--a-surface); border: 1px solid var(--a-line); }
.a26-ph-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 12px/1 var(--a-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--a-muted); background: var(--a-surface); border: 1px dashed var(--a-line-strong); border-radius: 999px; padding: 10px 16px; white-space: nowrap; }
.a26-ph--phone .a26-ph-side { display: none; }
.a26-ph--phone .a26-ph-top { left: 6%; right: 6%; top: 9%; height: 5%; }
.a26-ph--phone .a26-ph-cards { left: 6%; right: 6%; top: 18%; height: 14%; grid-template-columns: 1fr 1fr; }
.a26-ph--phone .a26-ph-cards b:nth-child(3) { display: none; }
.a26-ph--phone .a26-ph-chart { left: 6%; right: 6%; top: 36%; bottom: 10%; }

/* Phone and tablet */
@media (max-width: 960px) {
  .a26-hero-copy, .a26-split, .a26-pc--lead, .a26-how-grid, .a26-tabs { grid-template-columns: minmax(0, 1fr); }
  .a26-demo-row { grid-template-columns: minmax(0, 1fr); }
  .a26-pcards { grid-template-columns: minmax(0, 1fr); }
  .a26-float--review { display: none; }
  .a26-phone-col { position: relative; top: 0; order: -1; }
  .a26-phone { width: min(270px, 72%); }
  .a26-how-grid { gap: 32px; }
  .a26-step { min-height: 0; opacity: 1; padding-block: 18px; }
  .a26-step::before { transform: scaleY(1); }
  .a26-tablist { flex-direction: row; overflow-x: auto; border-top: 0; gap: 8px; padding-bottom: 6px; scrollbar-width: none; }
  .a26-tablist li { border: 0; flex: none; }
  .a26-tablist button { padding: 10px 16px; border: 1px solid var(--a-line-strong); border-radius: 999px; font-size: 1rem; }
  .a26-tablist button[aria-selected="true"] { background: var(--a-ink); border-color: var(--a-ink); }
  .a26-tablist button[aria-selected="true"] span { color: var(--a-on-ink); font-style: normal; }
  .a26-tab-prog { display: none; }
}
@media (max-width: 640px) {
  .a26-grid64 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .a26-cols { height: 150px; }
  .a26-pins { gap: 6px; }
  .a26-flow-gates { gap: 6px; }
  .a26-fl { font-size: 12px; letter-spacing: .04em; }
  .a26-founder-row { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .a26-stage { margin-top: 40px; }
  .a26-browser-url { display: none; }
}

/* Reduced motion: everything visible and still */
@media (prefers-reduced-motion: reduce) {
  .a26-js .a26 [data-a26-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .a26-marquee-track, .a26-founder-photo::after { animation: none !important; }
  .a26-step { opacity: 1; }
  .a26-step::before { transform: scaleY(1); }
  .a26-tabpanel.is-active, .a26-tour-shot.is-active { animation: none; }
  .a26-pc.is-in::before, .a26-quote.is-in::before { animation: none; }
}

/* Loops: the phone video fills the screen; the product video does not pan */
.a26-phone-video { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
video.a26-tour-shot.is-active { animation: none; }

/* ===== Rev 4 ===== */
/* Five offices: pins with where each one started */
.a26-pin-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.a26-pin-wrap small { font: 600 12px/1 var(--a-sans); color: var(--a-muted); white-space: nowrap; }
.a26-pin-wrap--new small { color: var(--a-terra-text); }
.a26-pins { align-items: flex-end; }
/* 64 a month: the six real months */
.a26-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; height: 170px; }
.a26-month { display: flex; flex-direction: column; align-items: stretch; gap: 6px; height: 100%; min-width: 0; }
.a26-month-bar { flex: 1; display: flex; align-items: flex-end; }
.a26-month-bar i { display: block; width: 100%; height: var(--a26-h, 100%); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--a-terra-bright), var(--a-terra)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.a26-month:last-child .a26-month-bar i { background: linear-gradient(180deg, var(--a-terra), var(--a-terra-deep)); }
.a26-month-n { text-align: center; font: 500 16px/1 var(--a-serif); color: var(--a-ink); font-variant-numeric: tabular-nums; }
.a26-month-l { text-align: center; font: 700 12px/1 var(--a-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted); }
/* About 350 to 726 on one scale */
.a26-dumb-svg { width: 100%; height: auto; overflow: visible; }
.a26-dumb-svg text { font: 500 12px var(--a-sans); fill: var(--a-muted); }
.a26-dumb-axis, .a26-dumb-ticks line { stroke: var(--a-line-strong); stroke-width: 1; }
.a26-dumb-line { fill: none; stroke: var(--a-terra); stroke-width: 6; stroke-linecap: round; opacity: .9; }
.a26-dumb-a { fill: var(--a-surface); stroke: var(--a-terra); stroke-width: 3; }
.a26-dumb-b { fill: var(--a-terra); stroke: #fff; stroke-width: 3; }
.a26-dumb-svg .a26-dumb-l { font: 600 13px var(--a-sans); fill: var(--a-ink-soft); }
.a26-dumb-svg .a26-dumb-l--b { fill: var(--a-terra-text); }
/* 15 locations: first rank to latest rank, one row each */
.a26-pc--ranks { border-style: solid; }
.a26-ranks svg { width: 100%; height: auto; display: block; overflow: visible; }
.a26-ranks text { font: 600 12px var(--a-sans); fill: var(--a-muted); }
.a26-ranks .gr { stroke: var(--a-line); stroke-dasharray: 2 4; }
.a26-ranks .ln { stroke: rgba(214,104,83,.55); stroke-width: 3; stroke-linecap: round; }
.a26-ranks .ln--flat { stroke: var(--a-line-strong); }
.a26-ranks .ln--worse { stroke: #9a938a; }
.a26-ranks .from { fill: var(--a-surface); stroke: #b9b1a8; stroke-width: 2; }
.a26-ranks .to { fill: var(--a-terra); }
.a26-ranks .to--flat { fill: #9a938a; }
.a26-demo-row { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
/* The flow as its own section */
.a26-flowsec { padding-block: clamp(5rem, 10vw, 9rem); }
.a26-flowsec .a26-h2 { color: var(--a-on-ink); }
.a26-flowsec .a26-section-head { max-width: 860px; margin-inline: auto; margin-bottom: clamp(36px, 5vw, 56px); }
.a26-flow-sub { margin-top: 18px; font: 400 clamp(1.05rem, 1rem + .35vw, 1.25rem)/1.6 var(--a-sans); color: var(--a-on-ink-muted); max-width: 40em; }
.a26-flowsec .a26-flow { margin-top: 0; }
.a26-ink-glow--center { left: 50%; top: 30%; transform: translateX(-50%); width: 1200px; height: 900px; }
.a26-fd { font: 400 13px/1.4 var(--a-sans); color: var(--a-on-ink-muted); max-width: 22ch; }
.a26-flow-src { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--a-on-ink-line); font: 400 13px/1.4 var(--a-sans); color: var(--a-on-ink-muted); }
.a26-flowsec .a26-flow-stage { height: clamp(180px, 22vw, 280px); }

/* The closing band on About, Benefits and the feature pages (shared component): a clean terracotta card */
section.close-section.close--brand { background: var(--paper, #f7f5f3) !important; padding-block: clamp(3.5rem, 7vw, 6.5rem) !important; }
section.close-section.close--brand .cta-band { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: clamp(44px, 7vw, 96px) clamp(24px, 6vw, 88px) !important; background:
    radial-gradient(90% 120% at 0% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 50%),
    radial-gradient(70% 90% at 100% 100%, rgba(120,40,20,.25) 0%, rgba(120,40,20,0) 60%),
    radial-gradient(rgba(23,22,21,.10) 1px, transparent 1.5px) 0 0 / 22px 22px,
    #d66853 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 40px 80px -40px rgba(192,84,58,.7); }
section.close-section.close--brand .cta-band .decor { display: none !important; }
section.close-section.close--brand .ctac { max-width: 760px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
section.close-section.close--brand .ctac h2 { color: #171615 !important; font-family: "Spectral", Georgia, serif !important; font-weight: 500 !important; letter-spacing: -0.018em; line-height: 1.04 !important; font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.2rem) !important; text-wrap: balance; margin: 0 !important; }
section.close-section.close--brand .ctac h2 span { font-style: italic; color: #171615 !important; }
section.close-section.close--brand .ctac > p { color: #2a1a14 !important; font: 500 16px/1.4 "Plus Jakarta Sans", sans-serif !important; letter-spacing: .02em; margin: 0 !important; opacity: .85; }
section.close-section.close--brand .hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 8px; }
section.close-section.close--brand .hero-actions a { min-height: 54px; padding: 0 28px !important; border-radius: 999px !important; font-size: 16px !important; }
section.close-section.close--brand .hero-actions a:first-child { background: #171615 !important; color: #f7f5f3 !important; border-color: #171615 !important; box-shadow: 0 1px 2px rgba(23,22,21,.2), 0 10px 24px -12px rgba(23,22,21,.6) !important; }
section.close-section.close--brand .hero-actions a:not(:first-child) { background: transparent !important; color: #171615 !important; border: 1px solid rgba(23,22,21,.45) !important; box-shadow: none !important; }
section.close-section.close--brand .hero-actions a:not(:first-child):hover { background: rgba(23,22,21,.07) !important; }

@media (max-width: 960px) {
  .a26-demo-row { grid-template-columns: minmax(0, 1fr); }
  .a26-pins { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .a26-months { height: 140px; gap: 6px; }
  .a26-flow-gates .a26-fd { display: none; }
  .a26-pin-wrap small { font-size: 12px; }
}

/* Rev 4 fixes after the first look */
.a26-pin-wrap { gap: 16px; }
.a26-browser--hero { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 74%, transparent 100%); }
section.close-section.close--brand > .container { max-width: 1240px !important; width: 100%; margin-inline: auto !important; padding-inline: max(20px, env(safe-area-inset-left, 0px)) !important; }
section.close-section.close--brand .ctac { max-width: 920px; }
section.close-section.close--brand .ctac h2 { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.6rem) !important; }
/* The shared CSS makes .cta-band full-bleed (width: 100vw, negative margin); keep it a card inside the container */
section.close-section.close--brand .cta-band { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Hero: no fade at all. The whole dashboard sits in its frame with rounded corners and a soft shadow (cleanest edge) */
.a26-browser--hero { -webkit-mask-image: none; mask-image: none; border-radius: 16px; margin-bottom: 0; box-shadow: 0 2px 6px rgba(23,22,21,.05), 0 40px 90px -30px rgba(23,22,21,.35), 0 0 0 1px rgba(23,22,21,.04); }
.a26-hero { padding-bottom: clamp(4rem, 8vw, 7rem); }

/* ===== Rev 5 ===== */
/* 1. Header: a frosted paper bar with a hairline (it was 80% see-through with no blur, so dark sections showed through grey) */
header.site-header { background: rgba(247,245,243,.9) !important; -webkit-backdrop-filter: saturate(170%) blur(18px); backdrop-filter: saturate(170%) blur(18px); border-bottom: 1px solid rgba(23,22,21,.07) !important; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 24px -18px rgba(23,22,21,.25) !important; }
header.site-header .nav-links a { color: #3b3531 !important; transition: color .2s; }
header.site-header .nav-links a:hover, header.site-header .nav-links a[aria-current="page"] { color: #171615 !important; }
header.site-header .nav-cta a { background: #171615 !important; color: #f7f5f3 !important; border-color: #171615 !important; }
header.site-header .nav-cta a:hover { background: #000 !important; }

/* 2. Footer: an ink band that closes the page; no decor, no wave markers */
footer.site-footer { position: relative; background: #171615 !important; color: #f0ece8 !important; border-top: 0 !important; padding-block: clamp(4rem, 7vw, 6rem) 2rem !important; overflow: hidden; }
footer.site-footer::before { content: ""; position: absolute; width: 900px; height: 600px; left: -240px; top: -260px; background: radial-gradient(closest-side, rgba(214,104,83,.22), rgba(214,104,83,0)); pointer-events: none; }
footer.site-footer .decor { display: none !important; }
footer.site-footer .container { position: relative; z-index: 1; }
footer.site-footer .brand span { color: #f0ece8 !important; font-family: "Spectral", Georgia, serif !important; }
footer.site-footer .foot-id, footer.site-footer .foot-brand p { color: #a8a097 !important; }
footer.site-footer .foot-id a { color: #e07a66 !important; }
footer.site-footer h3 { color: #a8a097 !important; font: 700 12px/1.3 "Plus Jakarta Sans", sans-serif !important; letter-spacing: .12em !important; text-transform: uppercase; }
footer.site-footer .alloro-menu li::before { content: none !important; display: none !important; }
footer.site-footer .alloro-menu li { padding-left: 0 !important; }
footer.site-footer .alloro-menu a { color: #f0ece8 !important; text-decoration: none; transition: color .2s; }
footer.site-footer .alloro-menu a:hover { color: #e07a66 !important; }
footer.site-footer .foot-bottom { border-top: 1px solid #2e2c29 !important; color: #a8a097 !important; }
footer.site-footer .foot-bottom a { color: #a8a097 !important; }
footer.site-footer .foot-bottom a:hover { color: #f0ece8 !important; }
footer.site-footer a:focus-visible { outline: 2px solid #e07a66; outline-offset: 3px; }

/* 3. Tighter rhythm */
.a26-statement { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.a26-close { padding-bottom: clamp(3rem, 6vw, 5rem); }
.a26-step { min-height: 46vh; }
.a26-hero { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }

/* 7. Wide screens: the hero dashboard and the flow get more room */
@media (min-width: 1600px) {
  .a26-wrap { max-width: 1400px; }
  .a26-stage { max-width: 1480px; }
  .a26-flowsec .a26-wrap { max-width: 1480px; }
}
/* Rev 5 fixes after the first look */
header.site-header { background: rgba(247,245,243,.97) !important; }
.a26-owner { padding-bottom: clamp(3rem, 6vw, 5rem); }
.a26-flowsec { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.a26-browser--tour { margin-top: clamp(64px, 7vw, 96px); }

/* ===== Rev 6 ===== */
/* Footer squiggles kept (Jov), now flowing: a repeating wave that travels slowly, staggered link to link */
footer.site-footer .alloro-menu li { position: relative; padding-left: 28px !important; }
footer.site-footer .alloro-menu li::before {
  content: "" !important; display: block !important; position: absolute; left: 0; top: 50%; width: 18px; height: 8px; margin-top: -4px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%208'%3E%3Cpath%20d='M0%204%20Q2.5%201.5%205%204%20T10%204'%20fill='none'%20stroke='%23E07A66'%20stroke-width='1.6'%20stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 10px 8px repeat-x !important;
  animation: a26-wave 1.8s linear infinite; transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: 20% 50%;
}
footer.site-footer .alloro-menu li:nth-child(2)::before { animation-delay: -.3s; }
footer.site-footer .alloro-menu li:nth-child(3)::before { animation-delay: -.6s; }
footer.site-footer .alloro-menu li:nth-child(4)::before { animation-delay: -.9s; }
footer.site-footer .alloro-menu li:nth-child(5)::before { animation-delay: -1.2s; }
footer.site-footer .alloro-menu li:nth-child(6)::before { animation-delay: -1.5s; }
footer.site-footer .alloro-menu li:hover::before, footer.site-footer .alloro-menu li:focus-within::before { transform: rotate(-16deg) translateX(3px) scale(1.15); animation-duration: .7s; }
@keyframes a26-wave { from { background-position-x: 0; } to { background-position-x: 10px; } }
@media (prefers-reduced-motion: reduce) { footer.site-footer .alloro-menu li::before { animation: none; } }
/* Real results: one chart family (thin terracotta line, soft gradient area, serif values) */
.a26-area svg, .a26-slope15 svg { width: 100%; height: auto; display: block; overflow: visible; }
.a26-area .ax { stroke: var(--a-line-strong); }
.a26-area .line { fill: none; stroke: var(--a-terra); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.a26-area .pt { fill: var(--a-surface); stroke: var(--a-terra); stroke-width: 2.5; }
.a26-area .pt--last { fill: var(--a-terra); stroke: #fff; stroke-width: 3; }
.a26-area .v { font: 500 14px var(--a-serif); fill: var(--a-ink-soft); }
.a26-area .v--last { font-size: 16px; fill: var(--a-terra-text); }
.a26-area .lab { font: 700 11.5px var(--a-sans); letter-spacing: .08em; fill: var(--a-muted); text-transform: uppercase; }
.a26-morph { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); padding: 18px 0 6px; }
.a26-morph small { display: block; font: 700 12px/1 var(--a-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); margin-bottom: 8px; }
.a26-morph-from { font: 400 clamp(2rem, 1.5rem + 1.6vw, 2.8rem)/1 var(--a-serif); color: var(--a-muted); }
.a26-morph-to { font: 500 clamp(3rem, 2rem + 3vw, 4.6rem)/1 var(--a-serif); color: var(--a-terra-text); font-variant-numeric: tabular-nums; }
.a26-morph-arrow { flex: 1; min-width: 60px; max-width: 160px; height: auto; overflow: visible; }
.a26-morph-arrow path { fill: none; stroke: var(--a-terra); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.a26-slope15 .gr { stroke: var(--a-line); stroke-dasharray: 2 4; }
.a26-slope15 .ax { stroke: var(--a-line-strong); }
.a26-slope15 .hd { font: 700 11.5px var(--a-sans); letter-spacing: .08em; text-transform: uppercase; fill: var(--a-muted); }
.a26-slope15 .tk { font: 600 12px var(--a-sans); fill: var(--a-muted); }
.a26-slope15 .sl { stroke-width: 2; stroke-linecap: round; }
.a26-slope15 .sl--up { stroke: rgba(214,104,83,.7); }
.a26-slope15 .sl--flat { stroke: #cfc8c1; }
.a26-slope15 .sl--down { stroke: #9a938a; stroke-dasharray: 4 4; }
.a26-slope15 .a { fill: var(--a-surface); stroke: #b9b1a8; stroke-width: 2; }
.a26-slope15 .b { fill: var(--a-terra); stroke: #fff; stroke-width: 1.5; }
.a26-slope15 .b--flat, .a26-slope15 .b--down { fill: #9a938a; }
.a26-slope15 .avg { font: italic 500 13px var(--a-serif); fill: var(--a-muted); }
.a26-slope15 .avg--b { fill: var(--a-terra-text); }
.a26-hbars { display: flex; flex-direction: column; gap: 14px; padding: 10px 0 4px; }
.a26-hbar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 54px; align-items: center; gap: 12px; }
.a26-hbar-l { font: 600 13px/1.2 var(--a-sans); color: var(--a-muted); }
.a26-hbar-t { height: 12px; border-radius: 999px; background: var(--a-surface-2); border: 1px solid var(--a-line); overflow: hidden; }
.a26-hbar-t i { display: block; height: 100%; width: var(--a26-w, 100%); border-radius: 999px; background: #d8d3cc; }
.a26-hbar--you .a26-hbar-l { color: var(--a-ink); }
.a26-hbar--you .a26-hbar-t i { background: linear-gradient(90deg, var(--a-terra-bright), var(--a-terra)); }
.a26-hbar-n { text-align: right; font: 500 17px/1 var(--a-serif); color: var(--a-ink); font-variant-numeric: tabular-nums; }
.a26-hbar--you .a26-hbar-n { color: var(--a-terra-text); }
.a26-pc--real { border-style: solid; }

/* Videos: quicker, smoother crossfade between loops */
.a26-tour-shot { transition: opacity .7s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: opacity; }

/* Hero dashboard and product video fit inside one screen (frame is 16:10 plus its 38px bar) */
.a26-stage, .a26-stage:where(*) { max-width: min(1180px, calc((100vh - 230px) * 1.6)) !important; }
@media (min-width: 1600px) { .a26-stage { max-width: min(1180px, calc((100vh - 230px) * 1.6)) !important; } }
.a26-browser--tour { max-width: min(1080px, calc((100vh - 200px) * 1.6)); margin-inline: auto; }
@media (max-width: 760px) { .a26-stage { max-width: 100% !important; } .a26-browser--tour { max-width: 100%; } }

/* ===== Rev 7 ===== */
/* Five offices: a quiet before/now strip in place of the pins */
.a26-five { display: grid; gap: 6px; min-width: min(100%, 420px); }
.a26-five-row { display: grid; grid-template-columns: 64px repeat(5, minmax(0, 1fr)); align-items: baseline; gap: 6px; }
.a26-five-l { font: 700 12px/1 var(--a-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--a-muted); }
.a26-five-c { text-align: center; font: 400 clamp(1.05rem, .95rem + .4vw, 1.35rem)/1.2 var(--a-serif); color: var(--a-muted); font-variant-numeric: tabular-nums; }
.a26-five-row--now { padding-top: 8px; border-top: 1px solid var(--a-line); }
.a26-five-row--now .a26-five-c { font-weight: 500; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.75rem); color: var(--a-terra-text); }
.a26-five-row--now .a26-five-l { color: var(--a-ink-soft); }
/* 15 locations: two tracks */
.a26-dots15 svg { width: 100%; height: auto; display: block; overflow: visible; }
.a26-dots15 .tr { stroke: var(--a-line-strong); stroke-width: 1.5; stroke-linecap: round; }
.a26-dots15 .tg { stroke: var(--a-line); stroke-dasharray: 2 4; }
.a26-dots15 .tl { font: 700 11.5px var(--a-sans); letter-spacing: .08em; text-transform: uppercase; fill: var(--a-muted); }
.a26-dots15 .tl--b { fill: var(--a-terra-text); }
.a26-dots15 .tk { font: 600 12px var(--a-sans); fill: var(--a-muted); }
.a26-dots15 .a { fill: var(--a-surface); stroke: #b9b1a8; stroke-width: 1.8; }
.a26-dots15 .b { fill: var(--a-terra); stroke: #fff; stroke-width: 1.5; }
.a26-dots15 .b--flat, .a26-dots15 .b--down { fill: #9a938a; }
.a26-dots15 .avg { fill: #9a938a; }
.a26-dots15 .avg.is-b { fill: var(--a-terra); }
.a26-dots15 .avgt { font: italic 500 13px var(--a-serif); fill: var(--a-muted); }
.a26-dots15 .avgt.is-b { fill: var(--a-terra-text); }
.a26-dots15 .ct { font: 600 12px var(--a-sans); fill: var(--a-muted); }
.a26-dots15 .ct--b { fill: var(--a-terra-text); }

/* ===== Rev 8: Real results as a bento wall ===== */
.a26-bento { --tile-pad: clamp(22px, 2.4vw, 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.a26-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: var(--tile-pad); border-radius: 22px; border: 1px solid var(--a-line);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(214,104,83,.08) 0%, rgba(214,104,83,0) 60%),
    linear-gradient(155deg, #ffffff 0%, #fbf6f1 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(23,22,21,.04), 0 18px 40px -26px rgba(23,22,21,.25);
  transition: box-shadow .35s var(--a-ease); }
.a26-tile:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 4px rgba(23,22,21,.05), 0 28px 60px -28px rgba(192,84,58,.35); }
.a26-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(214,104,83,.09), rgba(214,104,83,0) 45%); }
.a26-tile:hover::after { opacity: 1; }
.a26-tile--lead { grid-column: span 2; grid-row: span 2; }
.a26-tile-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; }
.a26-tile-big { margin: 2px 0 0; font: 500 clamp(2.6rem, 1.6rem + 2.8vw, 4.4rem)/1 var(--a-serif); letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #c0543a 0%, #e07a66 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a26-tile--lead .a26-tile-big { font-size: clamp(3.4rem, 2rem + 4.4vw, 6.2rem); }
.a26-tile-big--sm { font-size: clamp(2.2rem, 1.5rem + 2vw, 3.3rem); }
.a26-tile-big .a26-arrow { -webkit-text-fill-color: #b9b1a8; color: #b9b1a8; font-weight: 300; padding-inline: .08em; }
.a26-tile .a26-pc-who { font-size: 12px; }
.a26-tile .a26-pc-line { font-size: 14.5px; line-height: 1.55; color: var(--a-ink-soft); max-width: 46em; }
.a26-tile .a26-pc-src { margin-top: auto; padding-top: 12px; font-size: 12.5px; }
.a26-tile .a26-demo-badge { align-self: flex-start; font-size: 11px; padding: 5px 9px; }
.a26-tile .a26-pc-cap { font-size: 13px; color: var(--a-muted); padding-inline: var(--tile-pad); margin-top: 6px; }
.a26-spark, .a26-curve { margin-inline: calc(-1 * var(--tile-pad)); position: relative; }
.a26-curve { margin-top: 6px; }
.a26-spark svg, .a26-curve-plot svg, .a26-gauge svg { width: 100%; height: auto; display: block; overflow: visible; }
.a26-spark .ln, .a26-curve-plot .ln { fill: none; stroke: #d66853; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 6px 10px rgba(214,104,83,.35)); }
.a26-spark .p0 { fill: var(--a-surface); stroke: #d66853; stroke-width: 2.5; }
.a26-spark .p1 { fill: #d66853; stroke: #fff; stroke-width: 3; }
.a26-spark .v0 { font: 500 13px var(--a-serif); fill: var(--a-muted); }
.a26-spark .v1 { font: 500 15px var(--a-serif); fill: var(--a-terra-text); }
.a26-spark .ml, .a26-curve-plot .ml { font: 700 11px var(--a-sans); letter-spacing: .1em; text-transform: uppercase; fill: #a8a097; }
.a26-curve-plot .yl { font: 600 12px var(--a-sans); fill: var(--a-muted); }
.a26-curve-plot .gl { stroke: var(--a-line); stroke-dasharray: 2 5; }
.a26-curve-plot .rb { fill: rgba(217,164,65,.35); }
.a26-curve-plot .nl { stroke: var(--a-ink-soft); stroke-width: 1; stroke-dasharray: 3 4; opacity: .55; }
.a26-curve-plot .nt { font: 600 12px var(--a-sans); fill: var(--a-ink-soft); }
.a26-curve-plot .win { fill: #fff; stroke: #d66853; stroke-width: 3.5; filter: drop-shadow(0 0 8px rgba(214,104,83,.6)); }
.a26-curve-plot .wt { font: italic 500 15px var(--a-serif); fill: var(--a-terra-text); }
.a26-spark .cross, .a26-curve-plot .cross { stroke: rgba(23,22,21,.25); stroke-width: 1; opacity: 0; transition: opacity .2s; }
.a26-spark .hdot, .a26-curve-plot .hdot { fill: #fff; stroke: #c0543a; stroke-width: 2.5; opacity: 0; transition: opacity .2s; }
.a26-tip { position: absolute; z-index: 3; pointer-events: none; white-space: nowrap; font: 600 12.5px/1 var(--a-sans); color: #f7f5f3; background: rgba(23,22,21,.92); border-radius: 999px; padding: 8px 12px; box-shadow: 0 8px 20px -8px rgba(23,22,21,.6); }
.a26-gauge { display: flex; justify-content: center; margin: 4px 0 0; }
.a26-gauge svg { max-width: 300px; }
.a26-gauge .tk { fill: none; stroke: var(--a-line); stroke-width: 14; stroke-linecap: round; }
.a26-gauge .tk--in { stroke-width: 6; }
.a26-gauge .g0 { fill: none; stroke: #e9b3a6; stroke-width: 6; stroke-linecap: round; }
.a26-gauge .g1 { fill: none; stroke: #d66853; stroke-width: 14; stroke-linecap: round; filter: drop-shadow(0 6px 12px rgba(214,104,83,.4)); }
.a26-gauge .e0 { fill: #fff; stroke: #e9b3a6; stroke-width: 2.5; }
.a26-gauge .e1 { fill: #fff; stroke: #c0543a; stroke-width: 3.5; }
.a26-gauge .c1 { font: 500 44px var(--a-serif); fill: var(--a-terra-text); }
.a26-gauge .c0 { font: 600 12.5px var(--a-sans); fill: var(--a-muted); }
.a26-gauge .lb { font: 600 12px var(--a-sans); fill: #a8a097; }
.a26-tile .a26-hbars { padding-top: 2px; }
@media (max-width: 1100px) { .a26-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .a26-tile--lead { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 680px) { .a26-bento { grid-template-columns: minmax(0, 1fr); } }

/* ===== Rev 8: the 12 enhancements (CSS part) ===== */
.a26-js .a26 [data-a26-reveal] { transform: translateY(14px); }
.a26-js .a26 [data-a26-reveal].is-in { transition: opacity .6s var(--a-ease), transform .6s var(--a-ease); transition-delay: var(--a26-d, 0ms); }
.a26-flow-gate--lead .a26-fn { display: inline-block; }
.a26-flow-gate--lead .a26-fn.is-pulse { animation: a26-pulse 1.1s var(--a-ease); }
@keyframes a26-pulse { 0% { transform: scale(1); text-shadow: 0 0 0 rgba(224,122,102,0); } 25% { transform: scale(1.12); text-shadow: 0 0 22px rgba(224,122,102,.85); } 100% { transform: scale(1); text-shadow: 0 0 0 rgba(224,122,102,0); } }
.a26-demo-tag { background: rgba(255,255,255,.88); color: #6b635c; border: 1px solid rgba(23,22,21,.08); letter-spacing: .06em; font-size: 11px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.a26-phone .a26-demo-tag { background: transparent; border: 0; color: #a8a097; }
.a26-hero { padding-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.a26-proof { padding-bottom: clamp(3rem, 6vw, 5rem); }
.a26-how { padding-bottom: clamp(3.5rem, 6vw, 5rem); }
footer.site-footer .foot-grid { padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important; margin-bottom: 0 !important; }
footer.site-footer .foot-bottom { margin-top: clamp(1.5rem, 3vw, 2.5rem) !important; }
.a26-step { opacity: .55; }
.a26-step.is-active { opacity: 1; }
.a26-tabpanel.is-active { z-index: 2; animation: a26-in .55s var(--a-ease) both; }
.a26-tabpanel.is-leaving { z-index: 1; display: block; }
@keyframes a26-in { from { opacity: 0; } to { opacity: 1; } }
.a26-phone-shot { opacity: 0; transform: translateY(18px); transition: opacity .22s ease, transform .22s ease; }
.a26-phone-shot.is-active { opacity: 1; transform: none; transition: opacity .45s .18s var(--a-ease), transform .55s .18s var(--a-ease); }
header.site-header .nav-links a { position: relative; }
header.site-header .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: #d66853; transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
header.site-header .nav-links a:hover::after, header.site-header .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
header.site-header .nav-cta a { font-size: 15px !important; padding: 12px 20px !important; min-height: 0 !important; }
@media (prefers-reduced-motion: reduce) { .a26-flow-gate--lead .a26-fn.is-pulse { animation: none; } .a26-phone-shot, .a26-phone-shot.is-active { transition: none; } }

/* 4. product video framed shorter, anchored to the top: the review and its drafted reply show; the panel below them (whose app wording says "practice" and "patients") never does */
.a26-tour { aspect-ratio: 16 / 7.6; }
video.a26-tour-shot { object-fit: cover; object-position: top center; }

/* ===== Rev 9 ===== */
/* Separation between "Never taught" and "Who found you": its own lighter dark ground and a glowing line where it begins */
.a26-owner { padding-bottom: clamp(4.5rem, 8vw, 7rem); }
.a26-flowsec { padding-top: clamp(4.5rem, 8vw, 7rem); }
.a26-flowsec::before { background: radial-gradient(1000px 520px at 50% 0%, rgba(214,104,83,.12), rgba(214,104,83,0) 70%), linear-gradient(180deg, #23201e 0%, #1a1917 100%) !important; }
.a26-flowsec::after { content: ""; position: absolute; z-index: 1; top: 0; left: 50%; width: min(760px, 80%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(224,122,102,0), rgba(224,122,102,.8), rgba(224,122,102,0)); box-shadow: 0 0 22px 1px rgba(224,122,102,.45); pointer-events: none; }

/* Home closing card: words left, the free check in a phone on the right, peeking out of the card */
.a26-cta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 32px 56px; align-items: center; }
.a26-cta-phone { position: relative; margin: -24px 0 calc(-1 * clamp(40px, 7vw, 96px) - 70px); justify-self: center; width: min(250px, 100%); aspect-ratio: 390 / 700; border-radius: 36px; overflow: hidden; border: 9px solid #171615; background: #171615;
  box-shadow: 0 50px 80px -30px rgba(60,20,10,.6), 0 0 0 1px rgba(255,255,255,.1) inset; transform: rotate(6deg) translateY(8px); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.a26-cta:hover .a26-cta-phone { transform: rotate(2deg) translateY(-6px); }
.a26-cta-phone img { width: 100%; height: auto; display: block; }
.a26-cta::after { content: ""; position: absolute; z-index: 0; width: 70%; height: 140%; top: -40%; left: -10%; background: radial-gradient(closest-side, rgba(255,255,255,.2), rgba(255,255,255,0)); pointer-events: none; animation: a26-drift 16s ease-in-out infinite alternate; }
@keyframes a26-drift { from { transform: translate(0, 0); } to { transform: translate(40%, 18%); } }
@media (max-width: 860px) { .a26-cta-grid { grid-template-columns: minmax(0, 1fr); } .a26-cta-phone { display: none; } }

/* The closing band on About, Benefits and the feature pages: same look as the home card */
section.close-section.close--brand .ctac { margin-inline: 0 !important; text-align: left !important; align-items: flex-start !important; max-width: min(640px, 62%) !important; }
section.close-section.close--brand .hero-actions { justify-content: flex-start !important; }
section.close-section.close--brand .cta-band::after { content: ""; position: absolute; z-index: 0; right: clamp(28px, 7vw, 120px); bottom: -96px; width: clamp(200px, 18vw, 250px); aspect-ratio: 390 / 720; border-radius: 36px; border: 9px solid #171615;
  background: #171615 url("https://alloro-main-bucket.s3.us-east-1.amazonaws.com/uploads/ae4510ab-43bd-43f1-925a-a7dbe062ecd4/4891cdb2-phone-check.webp.webp") top center / cover no-repeat; box-shadow: 0 50px 80px -30px rgba(60,20,10,.6); transform: rotate(6deg); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
section.close-section.close--brand .cta-band:hover::after { transform: rotate(2deg) translateY(-12px); }
section.close-section.close--brand .ctac { position: relative; z-index: 1; }
@media (max-width: 900px) { section.close-section.close--brand .cta-band::after { display: none; } section.close-section.close--brand .ctac { max-width: none !important; } }

/* Primary buttons everywhere: a soft light sweep and an arrow that nudges on hover */
.a26-btn, section.close-section.close--brand .hero-actions a, header.site-header .nav-cta a { position: relative; overflow: hidden; }
.a26-btn--ink::after, section.close-section.close--brand .hero-actions a:first-child::after, header.site-header .nav-cta a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 70%); transition: transform .9s cubic-bezier(0.22, 1, 0.36, 1); }
.a26-btn--ink:hover::after, section.close-section.close--brand .hero-actions a:first-child:hover::after, header.site-header .nav-cta a:hover::after { transform: translateX(120%); }
.a26-btn span[aria-hidden="true"], section.close-section.close--brand .hero-actions a svg { display: inline-block; transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1); }
.a26-btn:hover span[aria-hidden="true"], section.close-section.close--brand .hero-actions a:hover svg { transform: translateX(4px); }
.a26-btn--ink:hover, section.close-section.close--brand .hero-actions a:first-child:hover { box-shadow: 0 1px 2px rgba(23,22,21,.2), 0 18px 34px -14px rgba(23,22,21,.65) !important; }

/* Smoother transitions everywhere: one easing curve, longer and gentler */
.a26 { --a-ease: cubic-bezier(0.22, 1, 0.36, 1); }
.a26-js .a26 [data-a26-reveal] { transform: translateY(18px); }
.a26-js .a26 [data-a26-reveal].is-in { transition: opacity .9s var(--a-ease), transform 1s var(--a-ease); transition-delay: var(--a26-d, 0ms); }
.a26-pc, .a26-tile, .a26-quote { transition: box-shadow .55s var(--a-ease), transform .55s var(--a-ease); }
.a26-tile:hover { transform: translateY(-3px); }
.a26-btn { transition: background-color .45s var(--a-ease), box-shadow .45s var(--a-ease), color .45s, border-color .45s; }
.a26-tabpanel.is-active { animation-duration: .8s; }
.a26-tour-shot { transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1); }
.a26-phone-shot { transition: opacity .3s ease, transform .3s ease; }
.a26-phone-shot.is-active { transition: opacity .7s .22s var(--a-ease), transform .8s .22s var(--a-ease); }
.a26-word { transition: opacity .4s ease; }
.a26-step { transition: opacity .7s var(--a-ease); }
.a26-step::before { transition: transform .9s var(--a-ease); }
header.site-header .nav-links a::after { transition-duration: .5s; }
footer.site-footer .alloro-menu a { transition: color .35s ease; }
@media (prefers-reduced-motion: reduce) { .a26-cta::after { animation: none; } .a26-btn--ink::after { display: none; } }

/* ===== Rev 10 ===== */
/* Hero: the app video replaces the still. Same frame, same rise and tilt on scroll; the crop keeps the app's
   dental wording (the last fifth of the review screen) out of view. */
.a26-tour--hero { aspect-ratio: 16 / 8.4; background: var(--a-surface-2, #f1ede9); }
.a26-browser--hero .a26-tour-shot { transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* "Why we understand" now sits right under the hero: same breathing room above and below */
.a26-owner { padding-top: clamp(4.5rem, 8vw, 7rem); }

/* Proof cards in plain words: a unit beside the big number, and two simple rows of 15 dots */
.a26-tile-unit { font: 500 .36em/1 var(--a-sans); letter-spacing: 0; color: var(--a-muted); margin-left: .25em; vertical-align: .35em; }
.a26-ones { display: grid; gap: 12px; margin: 20px 0 6px; }
.a26-ones-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 34px; align-items: center; gap: 12px; }
.a26-ones-l { font: 700 12px/1 var(--a-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--a-muted); }
.a26-ones-d { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 5px; }
.a26-ones-d i { display: block; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(23,22,21,.18); background: transparent; transition: background-color .5s var(--a-ease), border-color .5s var(--a-ease), transform .5s var(--a-ease); transition-delay: calc(var(--k, 0) * 55ms + 250ms); }
.a26-ones-d i.on { background: #bdb4ac; border-color: #bdb4ac; }
.a26-ones-row:last-child .a26-ones-d i.on { background: var(--a-terra); border-color: var(--a-terra); }
.a26-ones-n { font: 500 22px/1 var(--a-serif); color: var(--a-ink); text-align: right; font-variant-numeric: tabular-nums; }
.a26-ones-row:last-child .a26-ones-n { color: var(--a-terra-text); }
.a26-ones-row:last-child .a26-ones-l { color: var(--a-terra-text); }
.a26-js .a26-tile:not(.is-in) .a26-ones-d i.on { background: transparent; border-color: rgba(23,22,21,.18); transform: scale(.6); }
@media (prefers-reduced-motion: reduce) { .a26-ones-d i { transition: none; } }

/* Rev 10c bar labels: room for "Next best nearby" on one line */
.a26-hbar { grid-template-columns: 136px minmax(0, 1fr) 54px; }
.a26-hbar-l { white-space: nowrap; }
@media (max-width: 420px) { .a26-hbar { grid-template-columns: 112px minmax(0, 1fr) 46px; } .a26-hbar-l { white-space: normal; } }

/* Rev 10f header on-brand: same header on every page (the old "on-brand" mode painted the logo word near-white) */
header.site-header.on-brand { background: rgba(247,245,243,.97) !important; border-bottom-color: rgba(23,22,21,.07) !important; -webkit-backdrop-filter: saturate(1.7) blur(18px) !important; backdrop-filter: saturate(1.7) blur(18px) !important; }
header.site-header.on-brand .brand, header.site-header.on-brand .brand span { color: #171615 !important; }
header.site-header.on-brand .nav-links a { color: #3b3531 !important; font-weight: 500 !important; }
header.site-header.on-brand .nav-links a:hover, header.site-header.on-brand .nav-links a[aria-current="page"] { color: #171615 !important; }
header.site-header.on-brand .nav-toggle { color: #171615 !important; border-color: rgb(216,211,204) !important; }

/* ===== Rev 12 ===== */
/* Hero: the label sits right above the headline (the headline used to drop to the bottom of a tall row) */
.a26-hero-copy { row-gap: 0; }
.a26-hero-copy .a26-eyebrow { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: clamp(14px, 1.6vw, 22px); }
.a26-hero-copy .a26-display { grid-column: 1; grid-row: 2; align-self: end; }
.a26-hero-copy .a26-hero-side { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
@media (max-width: 960px) {
  .a26-hero-copy .a26-eyebrow, .a26-hero-copy .a26-display, .a26-hero-copy .a26-hero-side { grid-column: auto; grid-row: auto; }
  .a26-hero-copy .a26-hero-side { margin-top: 24px; }
}

/* Proof cards beside the hero video: tucked behind the frame, sliding out to the sides, never over the video */
.a26-hero { overflow-x: clip; }
.a26-browser--hero { z-index: 2; }
.a26-side {
  --cw: clamp(280px, 22vw, 380px);
  --out: min(calc(var(--cw) * .74), calc((100vw - 100%) / 2 + 2px));
  position: absolute; z-index: 1; margin: 0; width: var(--cw); border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid var(--a-line); box-shadow: 0 30px 60px -24px rgba(23,22,21,.28), 0 2px 6px rgba(23,22,21,.06);
  transition: box-shadow .55s var(--a-ease);
}
.a26-side img { display: block; width: 100%; height: auto; }
.a26-side--l1 { left: calc(20px - var(--out)); top: 9%; rotate: -3deg; }
.a26-side--l2 { left: calc(20px - var(--out)); top: 50%; rotate: 2deg; }
.a26-side--r1 { right: calc(20px - var(--out)); top: 24%; rotate: 2.5deg; }
@media (max-width: 1180px) { .a26-side { display: none; } }

/* Rev 12b: more of each card outside the frame; positions for the swapped cards */
.a26-side { --out: min(calc(var(--cw) * .8), calc((100vw - 100%) / 2 + 2px)); }
.a26-side--l1 { top: 7%; }
.a26-side--l2 { top: 44%; }
.a26-side--r1 { top: 30%; rotate: -2deg; }

/* ===== Rev 13 ===== */
/* Proof chips beside the hero video: small, one fact each, tucked behind the frame; hover slides one in front */
.a26-chip {
  --cw: 252px; --out: min(calc(var(--cw) * .86), calc((100vw - 100%) / 2 + 2px));
  position: absolute; z-index: 1; width: var(--cw); display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(255,255,255,.96); border: 1px solid var(--a-line); border-radius: 14px;
  box-shadow: 0 18px 40px -20px rgba(23,22,21,.28), 0 1px 3px rgba(23,22,21,.06);
  cursor: default; pointer-events: auto;
  transition: translate .65s var(--a-ease), scale .65s var(--a-ease), rotate .65s var(--a-ease), box-shadow .65s var(--a-ease), z-index 0s .65s;
}
.a26-chip-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(214,104,83,.12); color: var(--a-terra-deep); }
.a26-chip-t { display: grid; gap: 3px; min-width: 0; }
.a26-chip-t b { font: 700 14px/1.2 var(--a-sans); color: var(--a-ink); white-space: nowrap; }
.a26-chip-t span { font: 500 12.5px/1.35 var(--a-sans); color: var(--a-muted); }
.a26-chip-stars { font-style: normal; color: var(--a-terra); letter-spacing: 1px; font-size: 12px; margin-right: 4px; }
.a26-chip--l1 { left: calc(20px - var(--out)); top: 14%; rotate: -2deg; }
.a26-chip--l2 { left: calc(20px - var(--out)); top: 52%; rotate: 1.5deg; }
.a26-chip--r1 { right: calc(20px - var(--out)); top: 22%; rotate: 2deg; }
.a26-chip--r2 { right: calc(20px - var(--out)); top: 60%; rotate: -1.5deg; }
.a26-chip:hover { z-index: 4; scale: 1.06; rotate: 0deg; box-shadow: 0 30px 60px -22px rgba(23,22,21,.38), 0 2px 6px rgba(23,22,21,.08);
  transition: translate .65s var(--a-ease), scale .65s var(--a-ease), rotate .65s var(--a-ease), box-shadow .65s var(--a-ease), z-index 0s 0s; }
.a26-chip--l1:hover, .a26-chip--l2:hover { translate: 70px 0; }
.a26-chip--r1:hover, .a26-chip--r2:hover { translate: -70px 0; }
@media (max-width: 1180px) { .a26-chip { display: none; } }
@media (prefers-reduced-motion: reduce) { .a26-chip { transition: none; } }

/* Rev 13b: only the icon edge tucks behind the frame, never the words */
.a26-chip { --cw: clamp(224px, 16vw, 252px); --out: min(calc(var(--cw) - 34px), calc((100vw - 100%) / 2 + 2px)); }
@media (max-width: 1240px) { .a26-chip { display: none; } }

/* Rev 13c: left chips mirror the right ones, so the tucked edge is always the icon */
.a26-chip--l1, .a26-chip--l2 { flex-direction: row-reverse; text-align: right; }
.a26-chip--l1 .a26-chip-t, .a26-chip--l2 .a26-chip-t { justify-items: end; }

/* ===== Rev 14 ===== */
/* One column for the whole site: every home section uses the same width rule as the header, footer and the
   other pages (.container: 1180px, or the screen minus the gutter, stepped at 640/768/1024/1280/1536). */
.a26-wrap, .a26-flowsec .a26-wrap { width: min(100% - (var(--gutter, 1.25rem) * 2), 1180px) !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-inline: auto !important; }
@media (min-width: 640px) { .a26-wrap, .a26-flowsec .a26-wrap { max-width: 40rem !important; } }
@media (min-width: 768px) { .a26-wrap, .a26-flowsec .a26-wrap { max-width: 48rem !important; } }
@media (min-width: 1024px) { .a26-wrap, .a26-flowsec .a26-wrap { max-width: 64rem !important; } }
@media (min-width: 1280px) { .a26-wrap, .a26-flowsec .a26-wrap { max-width: 80rem !important; } }
@media (min-width: 1536px) { .a26-wrap, .a26-flowsec .a26-wrap { max-width: 96rem !important; } }

/* Rev 14b: the hero headline keeps "Your business," on one line in the narrower site column */
.a26-hero .a26-display { font-size: clamp(3rem, 1.4rem + 5.2vw, 5.6rem); }