/* Leadralia Directory: the stylesheet of the public directory pages.
   Art direction: docs/directory/design/DESIGN.md (approved by the owner 2026-10-08).
   Phone shell below 48rem, desktop layout from 48rem; light only; one accent.
   Generated from the design previews; edit here after the build, not there. */

@font-face{font-family:"Overpass";font-style:normal;font-weight:400;font-display:swap;src:url(/blog-assets/fonts/overpass-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Overpass";font-style:normal;font-weight:400;font-display:swap;src:url(/blog-assets/fonts/overpass-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Overpass";font-style:normal;font-weight:800;font-display:swap;src:url(/blog-assets/fonts/overpass-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Overpass";font-style:normal;font-weight:800;font-display:swap;src:url(/blog-assets/fonts/overpass-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* the 700 file serves the one sign weight (800) for Arabic, so one token covers both scripts */
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/blog-assets/fonts/noto-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;size-adjust:108%;}
@font-face{font-family:"Noto Sans Arabic";font-style:normal;font-weight:800;font-display:swap;src:url(/blog-assets/fonts/noto-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;size-adjust:108%;}
/* The face shown while Overpass loads, sized to it so the swap moves nothing:
   Arial (Arial Bold for the sign weight) scaled to Overpass's letter-frequency
   weighted average width, its line box set to Overpass's typo metrics (ascent
   0.883, descent 0.383, no gap; Overpass sets USE_TYPO_METRICS). Measured
   2026-10-09 from @fontsource/overpass 5.3.0 and Windows' arial.ttf / arialbd.ttf. */
@font-face{font-family:"Overpass Fallback";font-style:normal;font-weight:400;src:local("Arial"),local("ArialMT");size-adjust:100.85%;ascent-override:87.55%;descent-override:37.98%;line-gap-override:0%}
@font-face{font-family:"Overpass Fallback";font-style:normal;font-weight:800;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:99.48%;ascent-override:88.76%;descent-override:38.50%;line-gap-override:0%}

/*
 * tokens.css: Leadralia Directory, filled from docs/directory/design/DESIGN.md.
 *
 * The directory is server-rendered Jinja with one plain stylesheet
 * (static/directory-assets/directory.css), no Tailwind, so the Ghost template's
 * @theme block is left out on purpose: the build pastes this :root block at the
 * top of directory.css and every rule reads the --g-* variables.
 *
 * Light only (owner rule 2026-09-21): no dark tokens, no prefers-color-scheme.
 * One accent: Leadralia green #0E7A57, defined here in oklch.
 */

:root {
  color-scheme: light only;

  /* ---- palette. Source: the roadside guide sign and its post (DESIGN.md 5) ---- */
  --g-paper: oklch(1 0 0);                      /* #FFFFFF  white legend sheeting: the ground */
  --g-paper-2: oklch(0.972 0.004 164);          /* #F3F7F5  the concrete kerb: filters, ads, sponsored, empty covers */
  --g-ink: oklch(0.23 0.02 164);                /* #14201A  regulatory-plate black: 16.8:1 on paper */
  --g-ink-soft: oklch(0.47 0.016 164);          /* #535E58  galvanised post: 6.75:1 on paper, 6.25:1 on paper-2 */
  --g-line: oklch(0.905 0.008 164);             /* #DBE1DE  the plate's aluminium edge: rules, card borders */
  --g-line-strong: oklch(0.62 0.012 164);       /* #808984  the bolts: field and tag-plate boundaries, 3.6:1 */
  --g-accent: oklch(0.5153 0.1058 164.2);       /* #0E7A57  guide-sign green = Leadralia green (about 10% of surface) */
  --g-accent-deep: oklch(0.4222 0.0849 165.1);  /* #0A5C42  pressed and hover, text on wash: 7.2:1 */
  --g-accent-ink: oklch(1 0 0);                 /* #FFFFFF  legend on green: 5.33:1 */
  --g-accent-wash: oklch(0.955 0.022 164);      /* #E4F5EC  selection, verified panel, active chips */
  --g-danger: oklch(0.52 0.16 27);              /* #B33832  form errors only: 5.95:1 */
  --g-scrim: oklch(0.23 0.02 164 / 0.32);       /* behind an open sheet */
  --g-shadow-float: 0 1px 2px oklch(0.23 0.02 164 / 0.12), 0 8px 24px oklch(0.23 0.02 164 / 0.14);

  /* ---- type. Overpass (Highway Gothic lineage) 400 + 800; Noto Sans Arabic 400 + 700 ---- */
  --g-font-latin: "Overpass", "Overpass Fallback", sans-serif;
  --g-font-arabic: "Noto Sans Arabic", "Overpass", "Overpass Fallback", sans-serif;
  --g-font-display: var(--g-font-latin);
  --g-font-body: var(--g-font-latin);
  --g-font-meta: var(--g-font-latin);
  --g-weight-body: 400;
  --g-weight-sign: 800;                         /* names, headings, plate legend: the only other weight */
  --g-meta-size: var(--g-step--1);
  --g-meta-tracking: 0.01em;
  --g-meta-case: none;

  /* Fluid scale: body 16 to 17px; display 42 to 108px (6.35x body on desktop) */
  --g-step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --g-step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --g-step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --g-step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --g-step-3: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);
  --g-step-display: clamp(2.625rem, 1.2rem + 6.4vw, 6.75rem);

  --g-leading-body: 1.55;
  --g-leading-body-ar: 1.75;
  --g-leading-display: 0.98;
  --g-leading-name: 1.12;
  --g-leading-display-ar: 1.3;
  --g-tracking-display: -0.03em;
  --g-tracking-step-3: -0.02em;
  --g-tracking-name: -0.01em;
  --g-measure: 65ch;

  /* ---- grid ---- */
  --g-cols: 12;
  --g-wrap: 76rem;
  --g-gutter: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  --g-margin: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);   /* 16px at 375px wide */

  /* ---- shape: a radius per role, not one value everywhere ---- */
  --g-radius-control: 6px;     /* buttons, fields */
  --g-radius-tag: 3px;         /* supplementary plates */
  --g-radius-surface: 10px;    /* cards, panels */
  --g-radius-media: 8px;       /* covers, logos */
  --g-radius-plate: 10px;      /* the direction plate */
  --g-radius-sheet: 18px;      /* phone sheets, top corners only */
  --g-plate-inset: 4px;        /* the guide sign's white border, inset from the edge */
  --g-plate-border: 2px;

  /* ---- phone shell (below 48rem) ---- */
  --g-appbar-h: 3.5rem;        /* 56px */
  --g-tabbar-h: 3.75rem;       /* 60px */
  --g-actionbar-h: 4rem;       /* 64px */
  --g-touch: 3rem;             /* 48px minimum target */
  --g-row-min: 4rem;           /* 64px list cells */
  --g-safe-top: env(safe-area-inset-top, 0px);
  --g-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- motion ---- */
  --g-ease-out: cubic-bezier(0.25, 0.9, 0.3, 1);     /* a plate coming to rest on its bolts */
  --g-ease-in-out: cubic-bezier(0.6, 0, 0.25, 1);
  --g-dur-small: 0.16s;
  --g-dur-sheet: 0.28s;
  --g-dur-sheet-out: 0.2s;
  --g-plate-travel: 14px;      /* the arrow's arrival */
  --g-plate-lean: 4px;         /* the arrow's lean on hover, focus, press */
  --g-dir: 1;                  /* horizontal sign: 1 in LTR, -1 in RTL */
}

[dir="rtl"] {
  --g-dir: -1;
}

/* Arabic gets its own face and rhythm, never Latin tracking or capitals. */
:lang(ar) {
  --g-font-display: var(--g-font-arabic);
  --g-font-body: var(--g-font-arabic);
  --g-font-meta: var(--g-font-arabic);
  --g-leading-body: var(--g-leading-body-ar);
  --g-leading-display: var(--g-leading-display-ar);
  --g-leading-name: var(--g-leading-display-ar);
  --g-tracking-display: 0;
  --g-tracking-step-3: 0;
  --g-tracking-name: 0;
  --g-meta-tracking: 0;
  --g-meta-case: none;
}

/* Breakpoint (not a variable, CSS cannot read one in @media): phone shell below
   48rem, desktop layout from 48rem. Hover styles only under
   @media (hover: hover) and (pointer: fine). */


*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--g-paper);color:var(--g-ink);font-family:var(--g-font-body);line-height:var(--g-leading-body);-webkit-tap-highlight-color:transparent;interpolate-size:allow-keywords;scroll-padding-block-start:4.5rem}
body{margin:0;font-size:var(--g-step-0);font-weight:var(--g-weight-body);background:var(--g-paper);min-block-size:100svh}
h1,h2,h3{font-family:var(--g-font-display);font-weight:var(--g-weight-sign);margin:0;text-wrap:balance;line-height:1.08}
p{margin:0;text-wrap:pretty}
ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-inline-size:100%}
a{color:var(--g-accent);text-decoration-thickness:1px;text-underline-offset:0.2em}
button{font:inherit;color:inherit}
::selection{background:var(--g-accent-wash);color:var(--g-ink)}
:focus-visible{outline:3px solid var(--g-accent);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
.ic{fill:currentColor;flex:none}
.vh{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{inline-size:100%;max-inline-size:var(--g-wrap);margin-inline:auto;padding-inline:var(--g-margin)}
.meta{font-size:var(--g-meta-size);color:var(--g-ink-soft);letter-spacing:var(--g-meta-tracking);text-transform:var(--g-meta-case)}
.num{font-variant-numeric:tabular-nums}
.name{font-family:var(--g-font-display);font-weight:var(--g-weight-sign);letter-spacing:var(--g-tracking-name);line-height:var(--g-leading-name);text-wrap:balance}
.skip{position:absolute;inset-inline-start:.75rem;inset-block-start:-4rem;z-index:50;padding:.75rem 1rem;background:var(--g-paper);color:var(--g-ink);border:2px solid var(--g-ink);border-radius:var(--g-radius-control);font-weight:800}
.skip:focus{inset-block-start:.75rem}
.js-only{display:none}
.js .js-only{display:flex}
bdi{unicode-bidi:isolate}

/* brand */
.brand{display:inline-flex;align-items:center;gap:.5rem;flex:none;text-decoration:none;color:var(--g-ink)}
.brand-mark{inline-size:28px;block-size:28px;max-inline-size:none;flex:none}
.wm{font-family:"Righteous",var(--g-font-latin);font-size:1.375rem;line-height:1;letter-spacing:-0.01em;white-space:nowrap}
.wm-a{color:var(--g-ink)}
.wm-b{color:var(--g-accent)}
.brand-sub{font-size:var(--g-step-0);color:var(--g-ink-soft)}

/* buttons, fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-block-size:var(--g-touch);padding:.8rem 1.15rem .65rem;border-radius:var(--g-radius-control);border:1.5px solid var(--g-line-strong);background:var(--g-paper);color:var(--g-ink);font-weight:var(--g-weight-sign);font-size:var(--g-step-0);line-height:1.1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--g-dur-small) var(--g-ease-out),border-color var(--g-dur-small) var(--g-ease-out),color var(--g-dur-small) var(--g-ease-out)}
.btn .ic{inline-size:1.2em;block-size:1.2em}
.btn:active{background:var(--g-paper-2)}
.btn-go{background:var(--g-accent);border-color:var(--g-accent);color:var(--g-accent-ink)}
.btn-go:active{background:var(--g-accent-deep);border-color:var(--g-accent-deep)}
.btn-go:focus-visible,.plate:focus-visible{outline-color:var(--g-ink)}
.btn-wide{inline-size:100%}
@supports (text-box:trim-both cap alphabetic){
  .btn:not(:lang(ar)),.chip:not(:lang(ar)),.tagplate:not(:lang(ar)),.key{text-box:trim-both cap alphabetic}
  .btn:not(:lang(ar)){padding-block:.95rem}
  .chip:not(:lang(ar)){padding-block:.6rem}
  .tagplate:not(:lang(ar)){padding-block:.4em}
}
.field{display:grid;gap:.25rem;min-inline-size:0}
.field-label{font-size:var(--g-step--1);color:var(--g-ink-soft)}
.field-input{display:flex;align-items:center;gap:.5rem;min-block-size:var(--g-touch);padding-inline:.75rem;border:1.5px solid var(--g-line-strong);border-radius:var(--g-radius-control);background:var(--g-paper);color:var(--g-ink-soft)}
.field-input:focus-within{border-color:var(--g-accent);outline:3px solid var(--g-accent);outline-offset:1px}
.field-input input{flex:1;min-inline-size:0;border:0;outline:0;background:transparent;font:inherit;color:var(--g-ink);padding-block:.6rem .45rem}
.field-input input::placeholder{color:var(--g-ink-soft)}
.field-input .ic{inline-size:1.25rem;block-size:1.25rem}

/* the verified check, tag plates, chips */
.check{inline-size:.95em;block-size:.95em;flex:none;vertical-align:-0.12em}
.check-disc{fill:var(--g-accent)}
.check-tick{fill:none;stroke:var(--g-accent-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.verified{display:inline-flex;align-items:center;gap:.4rem;color:var(--g-accent-deep);font-weight:var(--g-weight-sign);font-size:var(--g-step--1)}
.plates{display:flex;flex-wrap:wrap;gap:.375rem}
.tagplate{display:inline-flex;align-items:center;padding:.3em .55em .18em;border:1.5px solid var(--g-line-strong);border-radius:var(--g-radius-tag);background:var(--g-paper);color:var(--g-ink);font-size:var(--g-step--1);line-height:1.25;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:.4rem;min-block-size:44px;padding:.55rem .85rem .4rem;border:1.5px solid var(--g-line-strong);border-radius:var(--g-radius-control);background:var(--g-paper);color:var(--g-ink);text-decoration:none;white-space:nowrap;cursor:pointer;line-height:1.1}
.chip .ic{inline-size:1.15rem;block-size:1.15rem}
.chip-on{background:var(--g-accent-wash);border-color:var(--g-accent-deep);color:var(--g-accent-deep);font-weight:var(--g-weight-sign)}
.chip b{font-weight:var(--g-weight-sign)}

/* logos and covers: the business's own, or a typographic fallback */
.logo{display:grid;place-items:center;inline-size:56px;block-size:56px;flex:none;border-radius:var(--g-radius-media);border:1px solid var(--g-line);background:var(--g-paper);overflow:hidden}
.logo img{inline-size:100%;block-size:100%;object-fit:contain;padding:6px}
.logo-fallback{background:var(--g-paper-2)}
.initials{font-family:var(--g-font-display);font-weight:var(--g-weight-sign);color:var(--g-ink);font-size:1.05rem;letter-spacing:0.02em}
.cover{position:relative;display:grid;place-items:center;aspect-ratio:1.91/1;background:var(--g-paper-2);overflow:hidden}
.cover img{inline-size:100%;block-size:100%;object-fit:cover}
/* a home-page screenshot used as a cover (feat/directory-screenshots): keep the top of the page in view */
.cover img[src*="/screenshot-"]{object-position:top center}
.cover-fascia{font-family:var(--g-font-latin);font-weight:var(--g-weight-sign);color:var(--g-ink);font-size:1.15rem;letter-spacing:-0.01em;padding:1rem;text-align:center;overflow-wrap:anywhere;line-height:1.1}
.photo{background:oklch(0.93 0.006 164)}
.photo-note{position:absolute;inset-block-end:.5rem;inset-inline-start:.6rem;font-size:.75rem;color:var(--g-ink-soft);background:var(--g-paper);padding:.15rem .4rem;border-radius:3px}

/* ad slots: the label sits outside and above; the slot keeps its size, sold or not */
.ad{display:grid;gap:.375rem;align-content:start}
.ad-label{font-size:var(--g-step--1);color:var(--g-ink-soft);letter-spacing:var(--g-meta-tracking)}
.ad-body{display:flex;align-items:center;gap:1rem;inline-size:100%;padding:.75rem 1rem;border:1px solid var(--g-line);border-radius:var(--g-radius-surface);background:var(--g-paper-2);color:var(--g-ink);text-decoration:none}
.ad-house{border-style:dashed;border-color:var(--g-line-strong)}
.ad-text{display:grid;gap:.15rem;min-inline-size:0;flex:1}
.ad-title{font-weight:var(--g-weight-sign)}
.ad-desc{color:var(--g-ink-soft);font-size:var(--g-step--1)}
.ad-cta{flex:none;padding:.55rem .8rem .45rem;border:1.5px solid var(--g-line-strong);border-radius:var(--g-radius-control);font-weight:var(--g-weight-sign);font-size:var(--g-step--1);background:var(--g-paper)}
.ad-leaderboard{inline-size:100%;max-inline-size:var(--g-wrap);margin-inline:auto;padding-inline:var(--g-margin)}
.ad-leaderboard .ad-body{min-block-size:90px}
.ad-leaderboard .ad-body:has(> picture){block-size:90px}
.ad-infeed .ad-body{min-block-size:120px}
.ad-sidebar .ad-body{min-block-size:250px;max-inline-size:300px;flex-direction:column;align-items:flex-start;justify-content:center}
/* image creatives (desktop 728x90 / 300x250, phone 320x100 via <picture>, fix/directory-review): never cropped */
.ad-body:has(> picture){padding:0;overflow:hidden;justify-content:center}
.ad-body > picture{display:block;inline-size:100%;block-size:100%}
.ad-body > picture img{inline-size:100%;block-size:100%;object-fit:contain}

/* index lists with leaders: the trade directory's index page */
.ix{display:grid;column-gap:var(--g-gutter)}
.ix a{display:flex;align-items:baseline;gap:.5rem;padding-block:.5rem .35rem;color:var(--g-ink);text-decoration:none;min-block-size:2.5rem}
.ix .lead{flex:1;min-inline-size:1.5rem;border-block-end:2px dotted var(--g-line-strong);translate:0 -0.28em}
.ix .count{color:var(--g-ink-soft);font-variant-numeric:tabular-nums}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;margin-block-end:1rem}
.sec-head h2{font-size:var(--g-step-2)}
.sec-head a{font-weight:var(--g-weight-sign);text-decoration:none}

/* the street: rails of fascia tiles that run past the inline end */
.street{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(15.5rem,17.5rem);gap:var(--g-gutter);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-block:.25rem 1rem;padding-inline:max(var(--g-margin),calc((100% - var(--g-wrap)) / 2 + var(--g-margin))) var(--g-margin);scroll-padding-inline:max(var(--g-margin),calc((100% - var(--g-wrap)) / 2 + var(--g-margin)));scrollbar-width:thin;scrollbar-color:var(--g-line-strong) transparent}
.tile{scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;border:1px solid var(--g-line);border-radius:var(--g-radius-surface);overflow:hidden;background:var(--g-paper);color:var(--g-ink);text-decoration:none}
.tile-body{display:grid;gap:.35rem;align-content:start;padding:0 1rem 1rem}
.tile .logo{margin-block-start:-28px;border:3px solid var(--g-paper);box-shadow:var(--g-shadow-float)}
/* a logo that hangs over a cover must paint above it: .cover is positioned (for its note), so the logo is too */
.tile .logo,.c-id .logo{position:relative;z-index:1}
.tile .name{font-size:var(--g-step-1);display:flex;align-items:baseline;gap:.35rem}
.tile-sponsored{background:var(--g-paper-2)}
.tile-sponsored .logo{border-color:var(--g-paper-2)}
.sponsored{color:var(--g-ink);font-weight:var(--g-weight-sign)}

/* result rows: one fascia per business */
.result{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem 1.1rem;align-items:start;padding-block:1.1rem;border-block-end:1px solid var(--g-line)}
.result-main{display:grid;gap:.35rem;min-inline-size:0}
.result .name{font-size:var(--g-step-1);display:flex;align-items:baseline;gap:.4rem}
.result-link{color:var(--g-ink);text-decoration:none}
.result-link::after{content:"";position:absolute;inset:0;border-radius:var(--g-radius-surface)}
.result-side{position:relative;z-index:1;display:grid;gap:.5rem;justify-items:end}
.result-side .cover{inline-size:168px;border-radius:var(--g-radius-media)}
.result-side .cover-fascia{font-size:.85rem}
.result-site{font-weight:var(--g-weight-sign);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;min-block-size:44px}
.result-site .ic{inline-size:1rem;block-size:1rem}
.result-sponsored{background:var(--g-paper-2);border-radius:var(--g-radius-surface);padding-inline:1rem;border-block-end:0;margin-block:.5rem}

/* the direction plate: the signature (DESIGN.md 7) */
.plate{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:.15rem 1rem;padding:1.05rem 1.3rem 1.2rem;background:var(--g-accent);color:var(--g-accent-ink);border-radius:var(--g-radius-plate);text-decoration:none;transition:background-color var(--g-dur-small) var(--g-ease-out)}
.plate::before{content:"";position:absolute;inset:var(--g-plate-inset);border:var(--g-plate-border) solid var(--g-accent-ink);border-radius:calc(var(--g-radius-plate) - var(--g-plate-inset));pointer-events:none}
.plate:active{background:var(--g-accent-deep)}
.plate ::selection{background:var(--g-paper);color:var(--g-accent-deep)}
.plate-label{grid-column:1 / -1;font-size:var(--g-step--1)}
.plate-legend{display:grid;font-family:var(--g-font-display);font-weight:var(--g-weight-sign);font-size:var(--g-step-1);line-height:1.18}
.plate-arrow{inline-size:2.6rem;block-size:2.6rem;fill:currentColor;transform:translateX(var(--lean,0px))}
[dir="rtl"] .plate-arrow{scale:-1 1}
@media (prefers-reduced-motion:no-preference){
  .plate-arrow{transition:transform var(--g-dur-small) var(--g-ease-out)}
  .plate:focus-visible .plate-arrow,.plate:active .plate-arrow{--lean:var(--g-plate-lean)}
  @supports (animation-timeline:view()){
    .plate-arrow{animation:plate-arrive linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
  }
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  .plate:hover .plate-arrow{--lean:var(--g-plate-lean)}
}
@keyframes plate-arrive{from{translate:calc(var(--g-plate-travel) * -1 * var(--g-dir)) 0;opacity:.35}to{translate:0 0;opacity:1}}

/* panels and lists on the company page */
.block{display:grid;gap:.85rem;padding-block:1.25rem;border-block-start:1px solid var(--g-line)}
.block > h2{font-size:var(--g-step-1)}
.cells{display:grid}
.cell{display:flex;align-items:center;gap:.85rem;min-block-size:3.25rem;padding-block:.5rem;color:var(--g-ink);text-decoration:none;overflow-wrap:anywhere}
.cell + .cell{border-block-start:1px solid var(--g-line)}
.cell .ic{inline-size:1.35rem;block-size:1.35rem;color:var(--g-ink-soft)}
.cell a{color:var(--g-accent);text-decoration:none;font-weight:var(--g-weight-sign)}
.socials{display:flex;flex-wrap:wrap;gap:.5rem}
.social{display:grid;place-items:center;inline-size:var(--g-touch);block-size:var(--g-touch);border:1.5px solid var(--g-line);border-radius:var(--g-radius-control);color:var(--g-ink)}
.social .ic{inline-size:1.35rem;block-size:1.35rem}
.panel-owner{padding:1.1rem 1.2rem;border-radius:var(--g-radius-surface);background:var(--g-accent-wash);display:grid;gap:.4rem;border:0}
.panel-claim{padding:1.1rem 1.2rem;border-radius:var(--g-radius-surface);background:var(--g-paper-2);display:grid;gap:.6rem;border:0}
.panel-owner h2,.panel-claim h2{font-size:var(--g-step-0);display:flex;align-items:center;gap:.45rem}
.panel-owner p{color:var(--g-ink);font-size:var(--g-step--1)}
.about{max-inline-size:var(--g-measure);color:var(--g-ink);white-space:pre-line}
.offers{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--g-gutter)}
.offer{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--g-line);border-radius:var(--g-radius-surface);overflow:hidden;color:var(--g-ink);text-decoration:none;background:var(--g-paper)}
.offer .cover{aspect-ratio:16/10}
.offer-body{display:grid;gap:.3rem;align-content:start;padding:.85rem 1rem 1rem}
.offer-title{font-weight:var(--g-weight-sign);line-height:1.2}
.offer-text{font-size:var(--g-step--1);color:var(--g-ink-soft)}
.offer-go{font-size:var(--g-step--1);color:var(--g-accent);font-weight:var(--g-weight-sign);padding-block-start:.2rem}
.cell > span:last-child{display:grid;gap:.1rem;min-inline-size:0}
.similar .name{font-size:var(--g-step-0);display:flex;align-items:baseline;gap:.35rem}
.correct{font-size:var(--g-step--1);color:var(--g-ink-soft)}
.prices{display:grid}
.prices > div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6rem;padding-block:.65rem;border-block-end:1px solid var(--g-line)}
.prices dt{flex:1;display:flex;align-items:baseline;gap:.5rem;font-weight:var(--g-weight-sign)}
.prices dt .lead{flex:1;min-inline-size:1rem;border-block-end:2px dotted var(--g-line-strong);translate:0 -0.28em}
.prices dd{font-variant-numeric:tabular-nums}
.prices .prices-note{flex-basis:100%;color:var(--g-ink-soft);font-size:var(--g-step--1);padding-block-start:.25rem}
.flabel{font-weight:var(--g-weight-sign)}
.cells li + li{border-block-start:1px solid var(--g-line)}
.similar .logo{inline-size:44px;block-size:44px}
:lang(ar) .initials{letter-spacing:0;font-size:1.3rem}
.reach{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 1.5rem;align-items:center;padding:1.4rem 1.5rem;border:1px solid var(--g-line);border-radius:var(--g-radius-surface);background:var(--g-paper)}
.reach h2{font-size:var(--g-step-1)}
.reach p{color:var(--g-ink-soft);margin-block-start:.3rem}

/* crumbs, pager, footer */
.crumbs{display:flex;flex-wrap:wrap;gap:.35rem;font-size:var(--g-step--1);color:var(--g-ink-soft)}
.crumbs a{color:var(--g-ink-soft);text-decoration:none}
.crumbs [aria-current]{color:var(--g-ink)}
.pager{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;padding-block:1.5rem}
.pg{display:grid;place-items:center;min-inline-size:44px;min-block-size:44px;padding-inline:.8rem;border:1.5px solid var(--g-line);border-radius:var(--g-radius-control);color:var(--g-ink);text-decoration:none;font-variant-numeric:tabular-nums}
.pg[aria-current]{background:var(--g-accent-wash);border-color:var(--g-accent-deep);color:var(--g-accent-deep);font-weight:var(--g-weight-sign)}
.foot{border-block-start:1px solid var(--g-line);margin-block-start:2rem;padding-block:1.75rem 2.5rem;font-size:var(--g-step--1);color:var(--g-ink-soft)}
.foot-row{display:grid;gap:.9rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot a{color:var(--g-ink);text-decoration:none}

/* the language switcher (feat/directory-pages lang_switcher, a native <details>):
   a dropdown on desktop, a bottom sheet on phones; no script either way */
.langs{position:relative}
.langs > summary{display:inline-flex;align-items:center;gap:.4rem;min-block-size:44px;padding-inline:.25rem;color:var(--g-ink);cursor:pointer;list-style:none}
.langs > summary::-webkit-details-marker{display:none}
.langs > summary .ic{inline-size:1.15rem;block-size:1.15rem;color:var(--g-ink-soft)}
.langs ul{position:absolute;inset-inline-end:0;inset-block-start:100%;z-index:30;display:grid;gap:2px;min-inline-size:13rem;max-block-size:70vh;overflow-y:auto;margin-block-start:.4rem;padding:.4rem;background:var(--g-paper);border:1px solid var(--g-line-strong);border-radius:var(--g-radius-surface);box-shadow:var(--g-shadow-float)}
.langs ul a{display:flex;align-items:center;min-block-size:40px;padding-inline:.6rem;border-radius:var(--g-radius-control);color:var(--g-ink);text-decoration:none}
.langs ul a[aria-current]{font-weight:var(--g-weight-sign);color:var(--g-accent-deep)}
.from-site{font-size:var(--g-step--1);color:var(--g-ink-soft)}

/* production pieces the previews did not need */
.js .js-hide{display:none}
.wm-img{display:block;block-size:1.375rem;inline-size:auto;max-inline-size:none;flex:none}
.empty{padding:2rem 1.25rem;border:1px dashed var(--g-line-strong);border-radius:var(--g-radius-surface);background:var(--g-paper-2);color:var(--g-ink)}
.nf{display:grid;gap:1rem;justify-items:start;padding-block:3rem 4rem;max-inline-size:44rem}
.nf h1{font-size:var(--g-step-3);letter-spacing:var(--g-tracking-step-3);line-height:1.05}
.nf p{color:var(--g-ink-soft)}
.nf-code{font-size:var(--g-step--1);color:var(--g-ink-soft);font-variant-numeric:tabular-nums}
.nf form{inline-size:100%}
.chip-on .ic{inline-size:.9rem;block-size:.9rem}
.filters-clear{font-size:var(--g-step--1);font-weight:var(--g-weight-sign);text-decoration:none}
.links-wrap{padding-block:1.5rem .5rem}
.links-wrap h2{font-size:var(--g-step-1);margin-block-end:.5rem}
.ix-cols{columns:3 15rem;column-gap:var(--g-gutter)}
.ix-cols li{break-inside:avoid}
.page-langs{display:none}
.all-list{padding-block:1.25rem .5rem;font-weight:var(--g-weight-sign)}
.all-list a{text-decoration:none}

/* phone-only parts are hidden on desktop and the other way round */
.appbar,.tabbar,.actionbar,.chips,.float-key,.keys-wrap,.sheet-foot,.ph-only,.icon-key,.lang-key,.search-key,.more{display:none}
.sheet-head{display:flex;align-items:baseline;justify-content:space-between;margin-block-end:.75rem}
.sheet-head h2{font-size:var(--g-step-1)}

@media (hover:hover) and (pointer:fine){
  .btn:hover{border-color:var(--g-ink)}
  .btn-go:hover{background:var(--g-accent-deep);border-color:var(--g-accent-deep)}
  a:hover{color:var(--g-accent-deep)}
  .result:hover .result-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:0.18em}
  .tile:hover,.offer:hover{border-color:var(--g-line-strong)}
  .ix a:hover .name-text{text-decoration:underline}
  .social:hover{border-color:var(--g-ink)}
}


@media (min-width:48rem){
  .site-head{border-block-end:1px solid var(--g-line);background:var(--g-paper)}
  .head-row{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;min-block-size:4rem;padding-block:.5rem}
  .head-nav{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.4rem;margin-inline-start:auto}
  .head-nav a:not(.btn){color:var(--g-ink);text-decoration:none}
  .head-search{flex:1 1 30rem;max-inline-size:40rem;display:grid;grid-template-columns:1.3fr 1fr auto;gap:.375rem}
  .head-search .field-input{min-block-size:44px}
  .head-search .btn{min-block-size:44px}
  .stack{display:flex;flex-direction:column}
  .stack > .ad-leaderboard{order:-1}
  .ad-leaderboard{padding-block-start:1rem}

  .hero{padding-block:clamp(2.5rem,5vw,4.5rem) clamp(2rem,3vw,3rem);display:grid;gap:1.6rem}
  .hero h1{font-size:var(--g-step-display);line-height:var(--g-leading-display);letter-spacing:var(--g-tracking-display);max-inline-size:15ch}
  .hero .count{font-size:var(--g-step-1);color:var(--g-ink-soft);max-inline-size:44rem}
  .hero .count strong{color:var(--g-ink);font-weight:var(--g-weight-sign);font-variant-numeric:tabular-nums}
  .search{display:grid;grid-template-columns:1.35fr 1fr 1fr auto;align-items:end;gap:.6rem;max-inline-size:58rem;padding:.75rem;border:1.5px solid var(--g-line-strong);border-radius:var(--g-radius-surface);background:var(--g-paper)}
  .search .btn{min-block-size:3.1rem;padding-inline:1.6rem}
  .search .field-input{min-block-size:3.1rem}
  .popular{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;align-items:baseline}
  .popular a{color:var(--g-ink);text-decoration:none}
  .popular a .count{color:var(--g-ink-soft)}
  .index{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--g-gutter) clamp(2rem,5vw,5rem);padding-block:2rem 1rem;border-block-start:1px solid var(--g-line)}
  .ix-2{grid-template-columns:1fr 1fr}
  .az-wrap{grid-column:1 / -1;display:grid;gap:.6rem;padding-block-start:1rem}
  .az-wrap h2{font-size:var(--g-step-1)}
  .az{display:flex;flex-wrap:wrap;gap:.3rem}
  .key{display:grid;place-items:center;min-inline-size:44px;min-block-size:44px;border:1.5px solid var(--g-line);border-radius:var(--g-radius-control);color:var(--g-ink);text-decoration:none;font-weight:var(--g-weight-sign)}
  .rail{padding-block:2.25rem .5rem}
  .rail .sec-head{margin-block-end:.75rem}
  .rail-sub{color:var(--g-ink-soft)}
  .claim{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:2rem clamp(2rem,6vw,6rem);align-items:start;padding-block:clamp(3rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem);border-block-start:1px solid var(--g-line);margin-block-start:2.5rem}
  .claim h2{font-size:var(--g-step-3);letter-spacing:var(--g-tracking-step-3);line-height:1.02}
  .claim-copy{display:grid;gap:1rem;justify-items:start}
  .claim-copy p{color:var(--g-ink-soft);max-inline-size:34rem;font-size:var(--g-step-1)}

  .page-head{display:grid;gap:.55rem;padding-block:1.4rem 1.2rem}
  .page-head h1{font-size:var(--g-step-3);letter-spacing:var(--g-tracking-step-3);line-height:1.02}
  .page-head .count{color:var(--g-ink-soft)}
  .results-grid{display:grid;grid-template-columns:minmax(14rem,3fr) minmax(0,9fr);gap:var(--g-gutter) clamp(1.5rem,3vw,3rem);align-items:start;padding-block-end:2rem}
  .filters{display:block;position:sticky;inset:auto;inset-block-start:1rem;margin:0;inline-size:auto;block-size:auto;max-block-size:none;overflow:visible;padding:1.2rem;border:0;border-radius:var(--g-radius-surface);background:var(--g-paper-2);color:var(--g-ink)}
  .filters .sheet-body{display:grid;gap:1.25rem}
  .fgroup{display:grid;gap:.55rem;border:0;margin:0;padding:0}
  .fgroup h3,.fgroup legend{font-size:var(--g-step-0);padding:0}
  .flinks a{display:flex;justify-content:space-between;gap:.75rem;padding-block:.3rem;color:var(--g-ink);text-decoration:none}
  .flinks a[aria-current]{color:var(--g-accent-deep);font-weight:var(--g-weight-sign)}
  .flinks .count{color:var(--g-ink-soft);font-variant-numeric:tabular-nums}
  .check-row{display:flex;align-items:center;gap:.6rem;min-block-size:2.25rem}
  .check-row input{inline-size:1.15rem;block-size:1.15rem;accent-color:var(--g-accent)}
  .filters select{font:inherit;min-block-size:44px;padding-inline:.6rem;border:1.5px solid var(--g-line-strong);border-radius:var(--g-radius-control);background:var(--g-paper);color:var(--g-ink)}
  .list .ad-infeed{padding-block:1rem}
  .search-page{display:grid;grid-template-columns:1.35fr 1fr 1fr auto;align-items:end;gap:.6rem;padding:.75rem;border:1.5px solid var(--g-line-strong);border-radius:var(--g-radius-surface);margin-block-end:1.5rem}
  .search-page .locate{display:none}
  .results-wide{grid-template-columns:minmax(0,1fr)}
  .filters .sheet-head{margin-block-end:.25rem}
  .sheet:not(.filters){display:none}

  .shopfront{padding-block:1.25rem 0}
  .shopfront .crumbs{margin-block-end:.9rem}
  .c-cover{border-radius:var(--g-radius-media);max-block-size:22rem;inline-size:100%}
  .c-cover .cover-fascia{font-size:var(--g-step-3)}
  .c-id{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5rem 1.5rem;align-items:end;padding-inline:1.25rem;margin-block-start:-3.75rem}
  .c-id .logo{inline-size:120px;block-size:120px;border:4px solid var(--g-paper);box-shadow:var(--g-shadow-float);grid-row:1 / span 2;align-self:start}
  .c-id .initials{font-size:2.2rem}
  .c-title{display:grid;gap:.45rem;padding-block-start:4.25rem;min-inline-size:0}
  .c-title h1{font-size:var(--g-step-3);letter-spacing:var(--g-tracking-step-3);line-height:1.04}
  .c-kind{font-size:var(--g-step-1);color:var(--g-ink-soft)}
  .c-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:.6rem;padding-block-start:.6rem}
  .c-body{display:grid;grid-template-columns:minmax(0,8fr) minmax(17rem,4fr);grid-template-rows:auto 1fr;column-gap:clamp(1.5rem,4vw,4rem);align-items:start;padding-block:2rem 1rem}
  .c-sideA{grid-column:2;grid-row:1;display:grid;gap:1.25rem;padding-block-end:1.25rem}
  .c-main{grid-column:1;grid-row:1 / span 2;display:grid}
  .c-main > .block:first-child{border-block-start:0;padding-block-start:0}
  .c-sideB{grid-column:2;grid-row:2;display:grid;gap:1.25rem}
  .c-sideA .block:first-of-type{border-block-start:0}
  .c-reach{padding-block:1rem 0}
}


@media (max-width:47.99rem){
  body{font-size:1rem;padding-block-end:calc(var(--g-tabbar-h) + var(--g-safe-bottom))}
  .page-company{padding-block-end:calc(var(--g-actionbar-h) + var(--g-safe-bottom))}
  .site-head,.crumbs,.desk-only,.result-side,.popular,.index,.c-actions{display:none}
  .ph-only{display:block}
  .wrap{padding-inline:var(--g-margin)}

  /* top app bar */
  .appbar{position:sticky;inset-block-start:0;z-index:20;display:flex;align-items:center;gap:.6rem;min-block-size:calc(var(--g-appbar-h) + var(--g-safe-top));padding:var(--g-safe-top) var(--g-margin) 0;background:var(--g-paper);border-block-end:1px solid var(--g-line)}
  .appbar .brand-mark{inline-size:30px;block-size:30px}
  .search-key{flex:1;min-inline-size:0;display:flex;align-items:center;gap:.55rem;min-block-size:44px;padding:0 .8rem;border:1.5px solid var(--g-line-strong);border-radius:var(--g-radius-control);color:var(--g-ink-soft);text-decoration:none;background:var(--g-paper)}
  .search-key .ic{inline-size:1.2rem;block-size:1.2rem;color:var(--g-ink)}
  .search-key span{padding-block-start:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lang-key{display:grid;place-items:center;min-inline-size:44px;min-block-size:44px;padding-inline:.5rem;border:0;background:transparent;color:var(--g-ink);font-weight:var(--g-weight-sign);cursor:pointer}
  .icon-key{display:grid;place-items:center;inline-size:44px;block-size:44px;flex:none;color:var(--g-ink);border:0;background:transparent;border-radius:50%;text-decoration:none;cursor:pointer}
  .icon-key .ic{inline-size:1.4rem;block-size:1.4rem}
  [dir="rtl"] .icon-key .flip{scale:-1 1}

  /* inner screens: the page head is the app bar */
  .page-head{position:sticky;inset-block-start:0;z-index:20;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;column-gap:.4rem;min-block-size:calc(var(--g-appbar-h) + var(--g-safe-top));padding:calc(var(--g-safe-top) + .3rem) calc(var(--g-margin) - .5rem) .3rem;background:var(--g-paper);border-block-end:1px solid var(--g-line)}
  .page-head .icon-key{display:grid;grid-row:1 / span 2}
  .page-head h1{font-size:var(--g-step-1);line-height:1.15;letter-spacing:0;grid-column:2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .page-head .count{grid-column:2;font-size:var(--g-step--1);color:var(--g-ink-soft)}
  .page-head .lang-key{grid-column:3;grid-row:1 / span 2}
  .page-head .count{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page-head-root{grid-template-columns:minmax(0,1fr) auto}
  .page-head-root h1,.page-head-root .count{grid-column:1}

  .chips{grid-column:1 / -1;display:flex;gap:.5rem;overflow-x:auto;margin:.35rem calc((var(--g-margin) - .5rem) * -1) -.3rem;padding:.5rem var(--g-margin);border-block-start:1px solid var(--g-line);scrollbar-width:none;overscroll-behavior-x:contain}
  .chips::-webkit-scrollbar{display:none}

  .stack{display:flex;flex-direction:column}
  .ad-leaderboard{padding:.9rem var(--g-margin) .25rem}
  .ad-leaderboard .ad-body{min-block-size:100px}
  .ad-leaderboard .ad-body:has(> picture){block-size:100px}
  .ad-body{padding:.65rem .8rem}
  .ad-cta{display:none}

  /* the language switcher as a bottom sheet: the open summary draws the scrim, so a tap outside closes it */
  .langs > summary{inline-size:44px;justify-content:center;padding:0}
  .langs > summary > span{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)}
  .langs > summary .ic{inline-size:1.4rem;block-size:1.4rem;color:var(--g-ink)}
  .langs[open] > summary::before{content:"";position:fixed;inset:0;z-index:39;background:oklch(0.23 0.02 164 / 0.32);cursor:default}
  .langs ul{position:fixed;inset:auto 0 0 0;z-index:40;min-inline-size:0;max-block-size:80svh;margin:0;padding:.5rem var(--g-margin) calc(.75rem + var(--g-safe-bottom));border:0;border-start-start-radius:var(--g-radius-sheet);border-start-end-radius:var(--g-radius-sheet);overscroll-behavior:contain}
  .langs ul a{min-block-size:52px;font-size:var(--g-step-1);border-radius:0;border-block-end:1px solid var(--g-line)}
  /* the sticky bars and the floating cover key make stacking contexts: lift the one holding an open switcher above the tab and action bars */
  :is(.appbar,.page-head,.float-key):has(.langs[open]){z-index:41}
  .page-langs{display:block;grid-column:3;grid-row:1 / span 2}
  .search-page{display:grid;gap:.9rem;padding-block:1rem}
  .search-page .btn{inline-size:100%}
  .nf{padding-block:2rem 3rem}
  .nf .btn{inline-size:100%}
  .all-list{padding-inline:var(--g-margin)}
  .ix-cols{columns:auto}
  .wm-img{block-size:1.2rem}
  /* bottom tab bar */
  .tabbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);min-block-size:calc(var(--g-tabbar-h) + var(--g-safe-bottom));padding-block-end:var(--g-safe-bottom);background:var(--g-paper);border-block-start:1px solid var(--g-line)}
  .tab{display:grid;justify-items:center;align-content:center;gap:.15rem;min-block-size:var(--g-tabbar-h);color:var(--g-ink-soft);text-decoration:none;font-size:.75rem;line-height:1.1}
  .tab .ic{inline-size:1.6rem;block-size:1.6rem}
  .tab .ic-on{display:none}
  .tab[aria-current]{color:var(--g-ink);font-weight:var(--g-weight-sign)}
  .tab[aria-current] .ic-off{display:none}
  .tab[aria-current] .ic-on{display:block;color:var(--g-accent)}
  .tab:active{background:var(--g-paper-2)}
  .page-company .tabbar{display:none}

  /* home screen */
  .hero{display:grid;gap:.5rem;padding-block:1.4rem 1rem}
  .hero h1{font-size:var(--g-step-3);line-height:1.05;letter-spacing:var(--g-tracking-step-3)}
  .hero .count{color:var(--g-ink-soft)}
  .hero .count strong{color:var(--g-ink);font-weight:var(--g-weight-sign)}
  .hero .search{display:none}
  .keys-wrap{display:grid;gap:.6rem;padding-block:.75rem 1rem}
  .keys-wrap h2,.rail h2,.towns h2{font-size:var(--g-step-1)}
  .keys{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;gap:.5rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(var(--g-margin) * -1);padding-inline:var(--g-margin)}
  .keys::-webkit-scrollbar{display:none}
  .keys a{scroll-snap-align:start;display:flex;align-items:baseline;gap:.45rem;min-block-size:48px;padding:.8rem .95rem .6rem;border:1.5px solid var(--g-line);border-radius:var(--g-radius-control);color:var(--g-ink);text-decoration:none}
  .keys a:active{background:var(--g-paper-2)}
  .keys .count{color:var(--g-ink-soft);font-size:var(--g-step--1)}
  .rail{padding-block:1.25rem .25rem}
  .rail .sec-head{margin-block-end:.6rem}
  .rail-sub{font-size:var(--g-step--1);color:var(--g-ink-soft)}
  .street{grid-auto-columns:80%;gap:.75rem;padding-inline:var(--g-margin);scroll-padding-inline:var(--g-margin);scrollbar-width:none}
  .street::-webkit-scrollbar{display:none}
  .tile:active{background:var(--g-paper-2)}
  .towns{padding-block:1.25rem .5rem}
  .towns .ix a{min-block-size:52px;align-items:center}
  .claim{margin-block:1.5rem 0;padding:1.25rem;border-radius:var(--g-radius-surface);background:var(--g-paper-2);display:grid;gap:.75rem}
  .claim h2{font-size:var(--g-step-2)}
  .claim-copy{display:grid;gap:.6rem}
  .claim-copy p{color:var(--g-ink-soft)}
  .claim .btn{inline-size:100%}
  .prices dd{font-size:var(--g-step--1)}
  .foot{margin-block-start:1.5rem;padding-block:1.25rem 1.5rem}

  /* search screen */
  .search-screen{display:grid;gap:.9rem;padding-block:1rem}
  .search-screen .btn{inline-size:100%}
  .locate{display:none;align-items:center;gap:.6rem;min-block-size:48px;padding-inline:.25rem;color:var(--g-accent);font-weight:var(--g-weight-sign);text-decoration:none;border:0;background:transparent}
  .js .locate{display:flex}
  .locate .ic{inline-size:1.3rem;block-size:1.3rem}

  /* results screen */
  .results-grid{display:block;padding-inline:0}
  .result{grid-template-columns:48px minmax(0,1fr);gap:.2rem .85rem;padding:.9rem var(--g-margin);min-block-size:var(--g-row-min)}
  .result .logo{inline-size:48px;block-size:48px;grid-row:1 / span 3}
  .result .name{font-size:1.125rem}
  .result-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .result .plates > :nth-child(n+4){display:none}
  .result-link::after{border-radius:0}
  .result:active{background:var(--g-paper-2)}
  .result-sponsored{margin:0;border-radius:0;padding-inline:var(--g-margin)}
  .list .ad-infeed{padding:1rem var(--g-margin)}
  .more{display:grid;gap:.5rem;justify-items:center;padding:1.25rem var(--g-margin) .5rem}
  .more .btn{inline-size:100%}
  .pager{display:none}
  .reach{margin:1rem var(--g-margin) 0;grid-template-columns:1fr;padding:1.1rem}
  .reach .btn{inline-size:100%;white-space:normal}

  /* sheets: native popover, no script (fallback below) */
  @supports selector(:popover-open){
  .sheet{position:fixed;inset:auto 0 0 0;z-index:40;margin:0;inline-size:100%;max-inline-size:100%;max-block-size:90svh;padding:0;border:0;display:flex;flex-direction:column;background:var(--g-paper);color:var(--g-ink);border-start-start-radius:var(--g-radius-sheet);border-start-end-radius:var(--g-radius-sheet);box-shadow:var(--g-shadow-float);overscroll-behavior:contain;translate:0 0}
    .sheet:not(:popover-open):not([data-demo-open]){display:none}
    .sheet::backdrop{background:oklch(0.23 0.02 164 / 0.32)}
  }
  @supports not selector(:popover-open){
    .sheet{position:static;display:block;margin:1rem var(--g-margin);padding:0;border:1px solid var(--g-line);border-radius:var(--g-radius-surface);inline-size:auto;block-size:auto}
    .chips [popovertarget],.float-key[popovertarget],.demo-scrim{display:none}
  }
  .sheet-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0;padding-block:.6rem;padding-inline:var(--g-margin) .5rem;border-block-end:1px solid var(--g-line)}
  .sheet-head h2{font-size:var(--g-step-1)}
  .sheet-body{flex:1;min-block-size:0;overflow-y:auto;overscroll-behavior:contain;padding:1rem var(--g-margin)}
  .sheet-foot{display:block;padding:.75rem var(--g-margin) calc(.75rem + var(--g-safe-bottom));border-block-start:1px solid var(--g-line);background:var(--g-paper)}
  .sheet-foot .btn{inline-size:100%}
  .filters form{display:flex;flex-direction:column;min-block-size:0;flex:1}
  .filters .fgroup{display:grid;gap:.5rem;border:0;margin:0 0 1.25rem;padding:0}
  .filters .fgroup h3,.filters .fgroup legend{font-size:var(--g-step-0);padding:0;margin-block-end:.25rem}
  .flinks a{display:flex;justify-content:space-between;align-items:center;min-block-size:48px;color:var(--g-ink);text-decoration:none;border-block-end:1px solid var(--g-line)}
  .flinks a[aria-current]{color:var(--g-accent-deep);font-weight:var(--g-weight-sign)}
  .flinks .count{color:var(--g-ink-soft)}
  .check-row{display:flex;align-items:center;gap:.75rem;min-block-size:48px;border-block-end:1px solid var(--g-line)}
  .check-row input{inline-size:1.35rem;block-size:1.35rem;accent-color:var(--g-accent)}
  .filters select{font:inherit;inline-size:100%;min-block-size:48px;padding-inline:.6rem;border:1.5px solid var(--g-line-strong);border-radius:var(--g-radius-control);background:var(--g-paper);color:var(--g-ink)}
  .opt{display:flex;align-items:center;justify-content:space-between;min-block-size:56px;color:var(--g-ink);text-decoration:none;border-block-end:1px solid var(--g-line);font-size:var(--g-step-1)}
  .opt[aria-current]{font-weight:var(--g-weight-sign)}
  .opt .ic{inline-size:1.4rem;block-size:1.4rem;color:var(--g-accent)}
  .demo-scrim{position:fixed;inset:0;z-index:39;background:oklch(0.23 0.02 164 / 0.32)}

  /* company screen */
  .stack-company > *{order:10}
  .stack-company > .shopfront{order:1}
  .stack-company > .c-body{display:contents}
  .c-sideA{order:2;display:grid;gap:0}
  .stack-company > .ad-leaderboard{order:3}
  .c-main{order:4}
  .c-sideB{order:5;display:grid;gap:1rem;padding-inline:var(--g-margin)}
  .c-reach{order:6}
  .shopfront{position:relative;padding:0}
  .shopfront > .wrap{padding:0}
  .c-cover{border-radius:0;inline-size:100%}
  .c-cover .cover-fascia{font-size:var(--g-step-2)}
  .float-key{position:absolute;z-index:5;inset-block-start:calc(var(--g-safe-top) + .75rem);display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;background:var(--g-paper);color:var(--g-ink);box-shadow:var(--g-shadow-float);text-decoration:none;border:0;font-weight:var(--g-weight-sign);font-size:.8rem;cursor:pointer}
  .float-key .ic{inline-size:1.35rem;block-size:1.35rem}
  .fk-start{inset-inline-start:.75rem}
  .fk-end{inset-inline-end:.75rem}
  [dir="rtl"] .float-key .flip{scale:-1 1}
  .c-id{display:grid;gap:.5rem;padding-inline:var(--g-margin);margin-block-start:-2.5rem;position:relative}
  .c-id .logo{inline-size:84px;block-size:84px;border:4px solid var(--g-paper);box-shadow:var(--g-shadow-float)}
  .c-id .initials{font-size:1.6rem}
  .c-title{display:grid;gap:.4rem}
  .c-title h1{font-size:clamp(1.6rem,1.2rem + 2vw,2rem);line-height:1.1}
  .c-kind{color:var(--g-ink-soft)}
  .c-title .plates{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--g-margin) * -1);padding-inline:var(--g-margin)}
  .c-title .plates::-webkit-scrollbar{display:none}
  .c-sideA{padding-inline:var(--g-margin);padding-block-start:1.1rem}
  .c-sideA .block{border-block-start:0;padding-block:1rem 0}
  .c-main .block{padding-inline:var(--g-margin)}
  .offers{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;gap:.75rem;margin-inline:calc(var(--g-margin) * -1);padding-inline:var(--g-margin);scroll-padding-inline:var(--g-margin);scrollbar-width:none;overscroll-behavior-x:contain}
  .offers::-webkit-scrollbar{display:none}
  .offer{scroll-snap-align:start}
  .offer:active{background:var(--g-paper-2)}
  .ad-sidebar .ad-body{margin-inline:auto}
  .c-reach{padding-inline:0}
  .c-reach .reach{margin-inline:var(--g-margin)}
  .actionbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:30;display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:.5rem;padding:.6rem var(--g-margin) calc(.6rem + var(--g-safe-bottom));background:var(--g-paper);border-block-start:1px solid var(--g-line)}
  .actionbar .btn{flex-direction:column;gap:.2rem;min-block-size:52px;padding:.45rem .25rem;font-size:.8125rem;white-space:normal;text-align:center}
  .actionbar .btn .ic{inline-size:1.35rem;block-size:1.35rem}
  .foot{padding-inline:var(--g-margin)}
}

@media (max-width:47.99rem) and (prefers-reduced-motion:no-preference){
  .sheet{transition:translate var(--g-dur-sheet-out) var(--g-ease-in-out),overlay var(--g-dur-sheet-out) allow-discrete,display var(--g-dur-sheet-out) allow-discrete}
  .sheet:not(:popover-open):not([data-demo-open]){translate:0 100%}
  .sheet:popover-open{translate:0 0;transition-duration:var(--g-dur-sheet);transition-timing-function:var(--g-ease-out)}
  @starting-style{.sheet:popover-open{translate:0 100%}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important}
}