/* ==========================================================================
   FINDR marketing site - shared styles (Apple-style, "Warm FINDR-Apple")
   Used by findrgh.com homepage, /services/*, and /business-signin/.
   Existing legacy pages (/features, /safety, /appointments, /agents, /get-live,
   /guide) keep their own inline styles and are unaffected.
   ========================================================================== */
:root{
  --orange:#E8742A; --orange-deep:#C4501E; --amber:#E0A23C;
  --ink:#1C1410; --ink-2:#161311; --paper:#FBF8F3; --paper-2:#F2EBE0;
  --line:#E6DCCC; --body:#4A3B2E; --muted:#776859; --white:#fff;
  /* --muted #776859: same warm brown hue as the old #8C7A68, darkened to the lightest value that
     reaches 4.5:1 on --paper-2 (4.54:1). 5.07:1 on --paper, 5.37:1 on white.
     --orange-text: small orange text (eyebrows, .btn-o, .note). 5.30:1 on --paper, 4.74:1 on
     --paper-2, 5.62:1 on white. --orange and --orange-deep stay for fills and borders. */
  --orange-text:#B0461C;
  --maxw:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
h1,h2,h3{font-family:"Manrope","DM Sans",sans-serif;margin:0;letter-spacing:-0.03em;line-height:1.03;font-weight:800;text-wrap:balance;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:22px;}
.center{text-align:center;margin-inline:auto;}

/* skip link for a11y */
/* white on #E8742A is 3.02:1, so this label uses the WCAG large-text size (bold, 18.72px) to pass AA */
.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;z-index:300;
  font-size:1.17rem;font-weight:700;line-height:1.25;}
.skip:focus{left:0;}

/* ── nav ── */
header.nav{position:sticky;top:0;z-index:80;background:rgba(251,248,243,.72);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(230,220,204,.7);
  padding-top:env(safe-area-inset-top,0px);}
.nav-in{display:flex;align-items:center;gap:24px;height:58px;max-width:var(--maxw);margin:0 auto;padding-inline:22px;}
.mark{font-family:"Manrope",sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:.02em;color:var(--ink);}
.mark .r{color:var(--orange);}
.nav-links{margin-left:auto;display:flex;gap:24px;align-items:center;font-size:.9rem;font-weight:500;color:var(--body);}
.nav-links a:hover{color:var(--orange-deep);}
/* nav-cta: white on #E8742A is 3.02:1; bold 1.17rem (18.72px) is WCAG large text, which needs 3:1 */
.nav-cta{background:var(--orange);color:#fff!important;padding:7px 16px;border-radius:999px;font-weight:700;font-size:1.17rem;line-height:1.25;}
.nav-cta:hover{background:var(--orange-deep);}
/* "List your business" used to leave "business" alone on line 2 at 320px. Balance plus the tighter
   pill and nav gap under 340px keep the label on one line at 320px and above, at 18.72px bold.
   Below that it may wrap, evenly, rather than push the page sideways. */
.nav-cta{text-wrap:balance;}
@media(max-width:340px){.nav-in{gap:12px;}.nav-cta{padding-inline:12px;letter-spacing:-.01em;}}
@media(max-width:860px){.nav-links a:not(.nav-cta){display:none;}}

/* ── buttons ── */
/* Label size 1.17rem (18.72px) bold = WCAG "large text". The brand orange stays #E8742A, and white
   on it is 3.02:1, which passes AA only at large-text size. Keep every .btn at or above 1.1667rem.
   Set on .btn (not only .btn-p) so paired store buttons stay the same size. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:1.17rem;line-height:1.25;
  padding:14px 24px;border-radius:999px;cursor:pointer;transition:transform .1s,box-shadow .2s,background .2s;
  border:1.5px solid transparent;font-family:inherit;text-align:center;}
.btn-p{background:var(--orange);color:#fff;box-shadow:0 12px 34px rgba(232,116,42,.42);}
.btn-p:hover{transform:translateY(-2px);}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.btn-glass:hover{background:rgba(255,255,255,.24);}
/* .btn-d: secondary store button (App Store next to the orange Play button).
   White fill, deep-orange border and text. Never a black pill.
   Text contrast: 4.65:1 normal, 5.64:1 hover (WCAG AA).
   Border vs the paper background: 4.39:1 normal, 5.73:1 hover. */
.btn-d{background:var(--white);color:var(--orange-deep);border-color:var(--orange-deep);}
.btn-d:hover{background:#FFF5EC;color:#A8421A;border-color:#A8421A;}
/* .btn-o label: --orange-text is 5.30:1 on --paper (was 4.39:1 with --orange-deep). */
.btn-o{background:transparent;color:var(--orange-text);border-color:var(--line);}
.btn-o:hover{border-color:var(--orange);}
/* Focus outline on light surfaces: --orange-deep is 4.39:1 on --paper, 3.93:1 on --paper-2 and
   4.65:1 on white (WCAG 1.4.11 needs 3:1; #E8742A was 2.55 to 3.02:1). Dark and orange
   surfaces switch colour in the "focus outline on dark surfaces" block further down. */
.btn:focus-visible{outline:2px solid var(--orange-deep);outline-offset:2px;}
a:focus-visible{outline:2px solid var(--orange-deep);outline-offset:2px;}
button:focus-visible,summary:focus-visible{outline:2px solid var(--orange-deep);outline-offset:2px;}
/* Soft corners for plain text links only. :where() keeps this at zero class weight, so any class
   that sets its own radius (.btn and .nav-cta pills, tiles, round icons, .skip) keeps its shape
   and the focus outline follows it. */
a:where(:focus-visible){border-radius:4px;}

/* ── hero (image or video) ── */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,6,4,.38) 0%,rgba(8,6,4,.46) 50%,rgba(8,6,4,.82) 100%);}
.hero-c{position:relative;z-index:2;padding:0 22px calc(68px + env(safe-area-inset-bottom,0px));max-width:var(--maxw);margin:0 auto;width:100%;}
.hero h1{font-size:clamp(2.9rem,8vw,6rem);color:#fff;}
.hero h1 .o{color:var(--amber);}
.hero .lede{font-size:clamp(1.05rem,2.4vw,1.5rem);max-width:36ch;margin-top:18px;color:rgba(255,255,255,.94);font-weight:500;}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.store-note{margin-top:16px;font-size:.86rem;color:rgba(255,255,255,.82);}

/* Eyebrow: small letter-spaced label above a heading. The section paragraph rules below
   (.lead p, .showcase p, .panel p) skip it with :where(:not(.eyebrow)), which adds no specificity,
   so this rule sets its size and colour everywhere. Contrast: --orange-text 5.30:1 on --paper,
   4.74:1 on --paper-2; amber 8.13:1 on --ink. */
.eyebrow{font-weight:700;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-text);margin-bottom:12px;}
.hero .eyebrow,.svc-hero .eyebrow{color:var(--amber);}
/* Orange gradient heroes: amber was 2.4:1 there. White is 4.65:1 on the lightest stop (#C4501E). */
.svc-hero.grad .eyebrow{color:#fff;}
/* Photo and video surfaces: no single colour clears 4.5:1 against every pixel of a picture (amber
   measured 1.0 to 2.8:1 on bright spots), so the label is white with a 1px --ink outline and a soft
   glow. Contrast is measured against the outline right at the letter edges (amber there was 2.2:1). */
:is(.hero,.svc-hero:not(.grad),.panel:not(.light)) .eyebrow{color:#fff;
  text-shadow:1px 0 0 var(--ink),-1px 0 0 var(--ink),0 1px 0 var(--ink),0 -1px 0 var(--ink),
    1px 1px 0 var(--ink),-1px -1px 0 var(--ink),1px -1px 0 var(--ink),-1px 1px 0 var(--ink),
    0 0 2px var(--ink),0 0 2px var(--ink),0 0 2px var(--ink),0 0 3px var(--ink),0 0 3px var(--ink),
    0 0 4px var(--ink),0 0 10px rgba(20,14,8,.8);}

/* ── stat strip ── */
.stats{background:var(--ink);color:#fff;}
.stats-in{display:flex;flex-wrap:wrap;gap:10px 44px;justify-content:center;padding:26px 22px;max-width:var(--maxw);margin:0 auto;}
.stat b{font-family:"Manrope";font-size:1.5rem;font-weight:800;}
.stat span{color:#b9a993;font-size:.86rem;margin-left:8px;}

/* ── sections ── */
section{padding-block:clamp(56px,9vw,116px);}
.lead h2{font-size:clamp(2.1rem,5vw,3.6rem);}
.lead p:where(:not(.eyebrow)){color:var(--body);font-size:1.12rem;margin-top:14px;max-width:54ch;}
.lead.center p{margin-inline:auto;}

/* ── Apple-style feature panels ── */
.panel{position:relative;border-radius:32px;overflow:hidden;min-height:520px;display:flex;
  align-items:flex-end;color:#fff;margin-top:26px;}
.panel .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.panel.light{color:var(--ink);background:var(--paper-2);}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 42%,rgba(0,0,0,.62));}
.panel.light::after{display:none;}
.panel-c{position:relative;z-index:2;padding:44px;max-width:60ch;}
.panel h3{font-size:clamp(1.8rem,3.6vw,2.7rem);}
.panel p:where(:not(.eyebrow)){margin-top:10px;font-size:1.06rem;opacity:.96;}
.panel .more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:700;color:#fff;}
.panel.light .more{color:var(--orange-deep);}
.panel .more:hover{gap:11px;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.duo .panel{margin-top:0;min-height:440px;}
@media(max-width:860px){.duo{grid-template-columns:1fr;}.panel{min-height:440px;}.panel-c{padding:30px;}}

/* ── text scrim on photo and video surfaces ──
   The full-surface gradients leave bright parts of a picture behind the text (white body text
   measured 1.2 to 4.3:1 on its worst line). This scrim follows the text block, not the surface
   height, so long copy on a narrow phone stays covered too: it fades in over --scrim-fade above the
   block, then holds --scrim behind every line and deepens to --scrim-end at the bottom. Values are
   the lightest that keep EVERY line at 4.5:1 or better (3:1 for headings and the amber accent)
   against the brightest 5% of pixels behind that line, at 1440, 375 and 320 (video: poster and
   11 frames). The rest of the picture is left as it was. It sits inside the block's own stacking
   context (z-index:2), under the text and above the picture; the surface's overflow:hidden clips
   its full-width sides. */
:is(.hero .hero-c,.svc-hero:not(.grad) .c,.panel:not(.light) .panel-c,.role:not(.solid):not(.ink) .role-c,.login-aside .c)::before{
  content:"";position:absolute;z-index:-1;left:-100vw;right:-100vw;top:calc(-1 * var(--scrim-fade));bottom:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,14,8,0) 0,rgba(20,14,8,var(--scrim)) var(--scrim-fade),rgba(20,14,8,var(--scrim-end)) 100%);}
.hero .hero-c{--scrim:.44;--scrim-end:.44;--scrim-fade:140px;}
.svc-hero .c{--scrim:.23;--scrim-end:.26;--scrim-fade:120px;}
.panel-c{--scrim:.46;--scrim-end:.5;--scrim-fade:120px;}
/* services/delivery/ riders panel: long copy over a bright picture needs a deeper scrim on phones */
.panel.scrim-deep .panel-c{--scrim:.54;--scrim-end:.56;}
.role-c{--scrim:.5;--scrim-end:.54;--scrim-fade:110px;}
.login-aside .c{--scrim:.32;--scrim-end:.32;--scrim-fade:110px;}
/* Desktop panels: the text column sits on the left, so the scrim stops past it and fades out over
   200px, and the right of the picture keeps its full brightness. The fade starts at the block's
   right edge, 44px (the padding) past the longest line. The doubled .panel lifts this selector to
   (0,4,0), level with the base rule's :is() (which takes its most specific argument, the .role
   one), so this later rule wins. */
@media(min-width:861px){
  .panel.panel:not(.light) .panel-c::before{left:0;right:-200px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 200px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 200px),transparent);}
}

/* ── device showcase ── */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-top:30px;}
.showcase.rev{direction:rtl;}.showcase.rev>*{direction:ltr;}
@media(max-width:860px){.showcase{grid-template-columns:1fr;gap:26px;}.showcase.rev{direction:ltr;}}
.phone{width:290px;max-width:78vw;margin-inline:auto;background:#0c0a08;border-radius:40px;padding:11px;
  box-shadow:0 40px 90px rgba(20,14,8,.4);border:1px solid #241c14;}
.phone img{border-radius:30px;width:100%;height:auto;}
.showcase h3{font-size:clamp(1.7rem,3.4vw,2.5rem);}
.showcase p:where(:not(.eyebrow)){color:var(--body);font-size:1.06rem;margin-top:12px;}
.band .showcase p:where(:not(.eyebrow)){color:#d8cbba;}
/* Stacked on phones, the eyebrow sits 26px under the phone mockup. The desktop shadow (40px drop,
   90px blur) reached that far and pulled --orange-text down to 2.7:1, and a --paper outline that
   patched it left a light halo on --paper-2 sections. Below 860px the shadow is short enough to end
   above the label, so the label sits on the section's own background with no outline. */
@media(max-width:860px){.showcase .phone{box-shadow:0 8px 16px rgba(20,14,8,.3);}}

/* ── bento of all services ── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px;}
/* 3-up variant (#ai-tools). Declared before the breakpoints below so they still collapse it on phones. */
.bento-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:860px){.bento{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.bento{grid-template-columns:1fr;}}
.tile{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:22px;transition:.15s;display:block;}
.tile:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(20,14,8,.08);border-color:var(--orange);}
.tile .ic{font-size:1.7rem;line-height:1;}
.tile h4{font-family:"Manrope";font-weight:800;font-size:1.08rem;margin:12px 0 4px;letter-spacing:-.01em;color:var(--ink);}
.tile p{color:var(--muted);font-size:.9rem;}

/* ── chocolate service tiles (#services + #ai-tools bento) ── */
#services .tile,#ai-tools .tile{
  --a:#7A4A2B;                 /* milk chocolate, one warm accent across every tile */
  background:#fff;
  background:linear-gradient(165deg, color-mix(in srgb, var(--a) 17%, #fff), color-mix(in srgb, var(--a) 5%, #fff));
  border:1px solid color-mix(in srgb, var(--a) 30%, var(--line));
}
#services .tile .ic,#ai-tools .tile .ic{
  width:56px;height:56px;display:grid;place-items:center;border-radius:16px;
  background:var(--a);
  background:linear-gradient(140deg, color-mix(in srgb, var(--a) 90%, #fff), color-mix(in srgb, var(--a) 60%, #fff));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px color-mix(in srgb, var(--a) 70%, #fff), 0 8px 18px color-mix(in srgb, var(--a) 45%, transparent);
  font-size:1.6rem;
}
#services .tile:hover,#ai-tools .tile:hover{
  transform:translateY(-4px);
  border-color:var(--a);
  box-shadow:0 22px 48px color-mix(in srgb, var(--a) 40%, transparent);
}

/* ── dark business band ── */
.band{background:var(--ink);color:#fff;}
.band h2,.band h3{color:#fff;}
.band .lead p:where(:not(.eyebrow)),.band p{color:#d8cbba;}
.band .eyebrow{color:var(--amber);}

/* ── service detail ── */
.svc-hero{position:relative;min-height:64vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;}
.svc-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;}
.svc-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.72));}
.svc-hero.grad{background:linear-gradient(145deg,#C4501E 0%,#7a2f12 46%,#1C1410 100%);min-height:56vh;}
.svc-hero.grad::after{display:none;}
.svc-hero .c{position:relative;z-index:2;padding:36px 22px 54px;max-width:var(--maxw);margin:0 auto;width:100%;}
.svc-hero h1{font-size:clamp(2.5rem,6vw,4.4rem);color:#fff;}
.svc-hero .lede{font-size:clamp(1.02rem,2.2vw,1.4rem);max-width:42ch;margin-top:16px;color:rgba(255,255,255,.94);font-weight:500;}
.svc-hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;}
@media(max-width:860px){.steps{grid-template-columns:1fr;}}
.step{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:26px;}
/* white on #E8742A is 3.02:1, so the number is 1.2rem (19.2px) bold, WCAG large text (needs 3:1) */
.step .n{width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem;line-height:1;margin-bottom:14px;}
.step h4{font-family:"Manrope";font-weight:800;margin:0 0 6px;font-size:1.12rem;}
.step p{color:var(--body);font-size:.96rem;}

/* callout list */
.callouts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px;}
@media(max-width:640px){.callouts{grid-template-columns:1fr;}}
.callout{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 20px;}
.callout .tick{color:var(--orange);font-weight:800;flex:none;font-size:1.05rem;line-height:1.5;}
.callout p{color:var(--body);font-size:.98rem;}
.callout b{color:var(--ink);}

.note{background:#fff5ec;border:1px dashed var(--orange);border-radius:14px;padding:14px 18px;font-size:.92rem;color:var(--orange-text);margin-top:26px;}

/* ── login ── */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--paper);}
@media(max-width:860px){.login-wrap{grid-template-columns:1fr;}.login-aside{min-height:34vh;}}
.login-aside{position:relative;color:#fff;overflow:hidden;display:flex;align-items:flex-end;}
.login-aside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.login-aside::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(196,80,30,.55),rgba(10,10,11,.72));}
.login-aside .c{position:relative;z-index:2;padding:48px;}
.login-aside h2{font-size:2.3rem;color:#fff;}
.login-aside p{margin-top:12px;opacity:.94;max-width:36ch;}
.login-form{display:flex;align-items:center;justify-content:center;padding:48px 26px;}
.lf{width:100%;max-width:410px;}
.lf .mark{font-size:1.6rem;}
.lf h1{font-size:1.9rem;margin:22px 0 6px;}
.lf .sub{color:var(--muted);margin-bottom:26px;}
.field{margin-bottom:16px;}
.field label{display:block;font-weight:600;font-size:.86rem;margin-bottom:7px;color:var(--ink);}
.field input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:14px;font:inherit;background:#fff;color:var(--ink);}
.field input:focus{outline:2px solid var(--orange-deep);outline-offset:1px;border-color:var(--orange-deep);}
.lf .btn-p{width:100%;box-shadow:none;margin-top:6px;}
.lf .btn-o{width:100%;}
.lf .row{display:flex;justify-content:space-between;align-items:center;font-size:.86rem;color:var(--muted);margin-top:14px;gap:10px;flex-wrap:wrap;}
.lf .row label{display:flex;gap:7px;align-items:center;font-weight:500;cursor:pointer;}
.lf .row a{color:var(--orange-deep);font-weight:600;}
.lf .divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem;margin:22px 0;}
.lf .divider::before,.lf .divider::after{content:"";flex:1;height:1px;background:var(--line);}
.lf .foot{margin-top:24px;font-size:.9rem;color:var(--body);}
.lf .foot a{color:var(--orange-deep);font-weight:700;}

/* ── footer ── */
footer.site{background:var(--ink);color:#c9bba9;padding-block:52px;padding-bottom:calc(52px + env(safe-area-inset-bottom,0px));}
.foot-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:.9rem;max-width:640px;}
.foot-links a:hover{color:#fff;}
/* Footer small print on --ink: #948371 is 4.97:1 (the old #8c7a68 was 4.41:1). */
.foot-bottom{margin-top:26px;font-size:.82rem;color:#948371;}
.foot-social{margin-top:14px;display:flex;gap:12px;}
.foot-social a{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:var(--orange);color:#fff;}
.foot-social a:hover{background:var(--orange-deep);}
.foot-social svg{width:20px;height:20px;fill:currentColor;}

/* ── button label wrapping at the 1.17rem label size ──
   Balanced lines, so a wrapped label never leaves one word on line 2 (arrows use  ). */
.btn{text-wrap:balance;}
/* Store buttons stay on one line down to 320px, so the Play / App Store pair stays even. */
.btn[href^="https://apps.apple.com/"],.btn[href^="https://play.google.com/"]{white-space:nowrap;}
@media(max-width:340px){
  .btn[href^="https://apps.apple.com/"],.btn[href^="https://play.google.com/"]{padding-inline:16px;letter-spacing:-.01em;}
}
/* Below 300px even the trimmed label no longer fits, so the store buttons wrap again. */
@media(max-width:300px){
  .btn[href^="https://apps.apple.com/"],.btn[href^="https://play.google.com/"]{white-space:normal;}
}

/* ── small-text contrast ── */
/* Chocolate tiles fade to #E8E0DB at the top, darker than --paper-2, so their small text gets
   its own value: #6F6052 is 4.64:1 there and 5.3:1 or better lower down the tile. */
#services .tile p,#ai-tools .tile p{color:#6F6052;}

/* ── focus outline on dark surfaces ──
   Colour only; width, offset and radius come from the focus rules near the top.
   Dark sections keep --orange (6.02:1 on --ink; --orange-deep would be 3.90:1).
   Orange cards (--orange-deep to #A8421A) use white: 4.65:1 or better. */
:is(.band,.stats,footer.site,.hero,.svc-hero,.bz-hero,.bz.dark,.agent,.trust,.roster,.panel:not(.light),.role:not(.solid),.login-aside)
  :is(a,button,.btn,summary,input):focus-visible{outline-color:var(--orange);}
:is(.snap,.final,.join-final) :is(a,button,.btn,summary,input):focus-visible{outline-color:#fff;}
/* Photo and video surfaces: a single colour cannot clear 3:1 against every pixel of a picture
   (orange measured 1.6 to 2.7:1 there), so these get a two-tone ring. The 2px white outline sits
   between two 2px --ink bands (the 6px shadow fills the 2px offset gap and shows 2px outside the
   outline). White and --ink are 17.9:1 apart, so against any background pixel at least one of
   them is 4.27:1 or better. The shadow replaces a button's glow only while it has focus. */
:is(.hero,.svc-hero,.bz-hero,.panel:not(.light),.role:not(.solid):not(.ink),.login-aside)
  :is(a,button,.btn,summary,input):focus-visible{outline-color:#fff;box-shadow:0 0 0 6px var(--ink);}

/* ── background video pause / play toggle (WCAG 2.2.2) ──
   44px round button in the hero's bottom-right corner. Translucent dark backing, never a black
   pill: the white icon stays at least 4:1 even over the brightest video frame. */
.vid-toggle{position:absolute;right:16px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:3;
  width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);
  background:rgba(20,14,8,.55);color:#fff;display:grid;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .2s;}
.vid-toggle:hover{background:rgba(20,14,8,.78);}
.vid-toggle svg{width:18px;height:18px;fill:currentColor;display:block;}
.vid-toggle .i-play,.vid-toggle[data-paused="true"] .i-pause{display:none;}
.vid-toggle[data-paused="true"] .i-play{display:block;}
@media(min-width:861px){.vid-toggle{right:24px;bottom:20px;}}
/* In a feature panel the text and link sit at the bottom, so the toggle takes the empty top-right corner. */
.panel .vid-toggle{top:16px;right:16px;bottom:auto;}

/* ── reduced motion: never autoplay, show poster ── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .btn,.tile,.panel .more{transition:none;}
}