/* SwitchMyAttorney — design system
   Editorial, calm, sourced. The reader is injured, mid-case, and nervous about a
   confrontation. Nothing here shouts. Type does the work; color is used sparingly
   and almost always to mark something that is quoted, sourced, or actionable.

   Palette is a PROPOSAL, not an approved brand. Change the tokens, nothing else.

   2026-10-30, second palette. The first was warm cream with a terracotta accent.
   That exact pairing — yellow-cream ground, terracotta or rust accent — is the
   documented signature of a generated page, and a reader who has seen a hundred of
   them reads it before reading a word. It is also wrong for this site twice over:
   the warmth says boutique firm, and R. 4-7.22(d)(11) forbids communicating in a
   way that leads a reader to conclude this is a law firm. So: white ground, near
   black ink, and ONE hue, a blue in two weights. No second accent. Navy-and-gold
   was available and rejected for the same reason — it is what every firm in
   Florida already wears, and this is not a firm.

   2026-10-30, the Google reference. Olivier pointed at creators.google and said he
   liked the design and the font. What was measured off that page, and adopted here:
   headings in a geometric sans at weight 400 and 500 and NEVER 700 (its h2 is 60px
   at weight 400, and that lightness is most of why the page reads calm); negative
   tracking on display type and slightly POSITIVE tracking on body; Google's own grey
   ramp, which is better than the one I had; pill buttons at radius 48px; panels with
   no border, sitting on a pale grey instead; and a lot of air.

   What was NOT adopted, and why. Google Sans is Google's proprietary brand face. The
   woff2 does fetch from fonts.gstatic.com, so it is technically possible and still
   wrong: it is unlicensed for third parties, and on a site whose whole premise is
   complying with R. 4-7.22 the last thing we do is dress in a trademark that implies
   a Google relationship we do not have. Substitutes, both open, both on Google
   Fonts: DM Sans for display, the closest open relative of Product Sans and so of
   Google Sans, and Inter for text, engineered for long reading at small sizes the
   way Google Sans Text is. Two families, which is taste-skill's ceiling.
   Google's blue #1A73E8 was also measured, not assumed: 4.51:1 on white, which
   clears AA by one hundredth. Ours stays at 6.97:1.

   Contrast, measured, not assumed: ink on white 16.1:1, mid 10.5:1, soft ink 6.05:1,
   the blue on white and white on the blue 6.97:1 both ways, white on the deep blue
   11.5:1. Dark: text 13.4:1, soft 6.1:1, blue 7.6:1. */

:root {
  --paper:        #FFFFFF;
  --paper-sunk:   #F8F9FA;
  --paper-card:   #F8F9FA;
  --ink:          #202124;
  --ink-mid:      #3C4043;
  --ink-soft:     #5F6368;
  --ink-faint:    #6F7479;
  --rule:         #DADCE0;
  --rule-soft:    #E8EAED;
  --brand:        #1550C8;
  --brand-bright: #1A62E8;
  --brand-deep:   #10357E;
  --brand-wash:   #EDF2FD;
  /* not a second hue: the accent is the brand blue at its deepest, so quoted law
     and a call to action read as the same voice at two volumes. */
  --accent:       #10357E;
  --accent-deep:  #0A2558;
  --accent-wash:  #E8EDF9;
  --warn-wash:    #FFF8E6;
  --warn-rule:    #E3C65F;

  /* --display is the geometric face, used large and never heavier than 500.
     --sans is the reading face, used for every running word on the site.
     --serif is kept only so an old rule that still asks for it does not fall back to
     Times; nothing should reach for it. */
  --display: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans);

  /* One frame, used by the chrome and the article alike. Earned 2026-10-30: the
     masthead ran to 70rem while the article ran to 44rem, so the wordmark sat 225px
     to the left of the headline it sits above and nothing on the page shared an
     edge. A reader reads that as "everything is pushed to one side" before they can
     say why. One width, one pair of margins, everywhere. */
  /* 48rem is 768px, which at the 18px reading size is ~72 characters a line — inside
     the 65-75 band that long-form reading wants. It was 52rem, matching the 840px
     container on creators.google, but that page sets 16px body copy in a much narrower
     text block; copying the container and not the measure put these 5,000-word pages at
     78 characters. Measured in the browser with the real font, not estimated.
     Only running text and headings use this token. The hero and the photographs sit on
     the article grid's wide track, the routing cards on their own 64rem band, and the
     chrome on 64rem, so none of them narrow with it. */
  --measure: 48rem;
  --phone-glyph: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1.1l-2.3 2.1z"/></svg>');
  --wide: 52rem;
  /* 52rem is 832px, within eight pixels of the 840px text column creators.google
     uses, and it is the width long legal reading wants. The one-frame rule from
     earlier today still holds: the chrome and the article share it. */
  --radius: 16px;
  --radius-sm: 8px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #202124;
    --paper-sunk:   #292A2D;
    --paper-card:   #292A2D;
    --ink:          #E8EAED;
    --ink-mid:      #DADCE0;
    --ink-soft:     #9AA0A6;
    --ink-faint:    #8E959B;
    --rule:         #3C4043;
    --rule-soft:    #303134;
    --brand:        #8CB2FF;
    --brand-bright: #AFC9FF;
    --brand-deep:   #C8D8FF;
    --brand-wash:   #15202F;
    --accent:       #C8D8FF;
    --accent-deep:  #E0E9FF;
    --accent-wash:  #141D29;
    --warn-wash:    #241F16;
    --warn-rule:    #6B5A28;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  /* positive tracking on running text, negative on display. That split is the
     Google Sans Text / Google Sans relationship, and it is why their body copy
     reads open while their headlines read tight. */
  letter-spacing: .005em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------- skip link ---------- */

.sma-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: .65rem 1rem;
  font-family: var(--sans);
  font-size: .9rem;
  z-index: 50;
}
.sma-skip:focus { left: .5rem; top: .5rem; }

/* ---------- chrome ---------- */

.sma-shell { max-width: var(--wide); margin: 0 auto; padding: 0 1rem; }

.sma-masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

/* Two rows at every width: the wordmark and the language switch on the first, the
   nav on the second, both starting at the page's one left edge.

   This used to collapse onto a single row from 46rem up, which worked while the
   chrome ran to 70rem. Once the frame came down to 46rem to share an edge with the
   article, one row could no longer hold a wordmark, five links and a language
   switch, and every link broke mid-phrase: "Can you / switch?", "How we are / paid".
   A nav that reads as five two-line fragments is worse than a nav on its own line. */
.sma-masthead-inner { padding: 1.1rem 0 .95rem; }

/* The chrome now sits on the wide track, 64rem, the same edge the hero and the bands
   use. That is what makes one row possible again: at 46rem a wordmark, five links and
   a language switch broke every link mid-phrase, and at 64rem there is room for all of
   it with air to spare. Below 60rem it falls back to the two rows. */
.sma-masthead .sma-shell,
.sma-notice .sma-shell,
.sma-footer .sma-shell { max-width: 64rem; }


.sma-masthead-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.sma-nav {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 1.15rem;
  margin-top: .5rem;
  padding-bottom: .3rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sma-nav::-webkit-scrollbar { display: none; }

.sma-wordmark {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3125rem;
  letter-spacing: -.016em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: .12em;
  white-space: nowrap;
}
.sma-wordmark .sma-wordmark-switch { color: var(--brand); }
.sma-wordmark:hover { color: var(--ink); }

.sma-nav {
  font-family: var(--sans);
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  /* No flex-wrap here on purpose. A base `flex-wrap: wrap` declared after the
     max-width block below would beat it at equal specificity and the mobile nav
     would silently keep wrapping — the duplicate-cascade trap. */
}
.sma-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.sma-nav a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.sma-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }

.sma-lang {
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  padding: .3rem 0;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.sma-lang:hover { color: var(--brand-bright); text-decoration: underline; }

/* ORDER MATTERS HERE, and it has now bitten three times in this file. This stylesheet
   declares .sma-nav, .sma-masthead-top and .sma-figure twice, so a rule written above
   the second declaration loses at equal specificity even inside a media query — a
   media query adds no weight. The one-row masthead must therefore sit below every
   selector it overrides: .sma-masthead-top's display:flex, both .sma-nav blocks, and
   .sma-lang. Verified in the browser with getComputedStyle, which is the only way any
   of this was ever caught.

   The chrome sits on the wide track, 64rem — the same edge the hero and the bands use.
   That is what makes one row possible again: at 46rem a wordmark, five links and a
   language switch broke every link mid-phrase. Below 60rem it falls back to two rows. */
@media (min-width: 64rem) {
  .sma-masthead-inner { display: flex; align-items: baseline; gap: 2.5rem; }
  /* display:contents promotes the wordmark and the switch into the same flex row, so
     the markup does not have to change. */
  .sma-masthead-top { display: contents; }
  .sma-wordmark { order: 1; }
  .sma-nav { order: 2; flex: 1 1 auto; margin-top: 0; padding-bottom: 0; }
  .sma-lang { order: 3; margin-left: auto; }
  .sma-call { order: 4; }
}

/* Below that breakpoint the wordmark, the language switch and a twelve-character
   phone number do not fit one 390px row, so the number takes a row of its own
   rather than pushing the page into horizontal scroll. */
@media (max-width: 63.99rem) {
  .sma-masthead-top { flex-wrap: wrap; }
  .sma-call {
    flex: 0 0 100%;
    margin-top: .55rem;
    padding-top: .55rem;
    border-top: 1px solid var(--rule);
  }
  .sma-call-number { font-size: 1.0625rem; }
}

/* the persistent (d)(11) notice — on every page, both languages */
.sma-notice {
  background: var(--paper-sunk);
  color: var(--ink-mid);
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sma-notice { background: var(--paper-sunk); color: var(--ink-mid); border-bottom: 1px solid var(--rule); }
}
.sma-notice p { margin: 0; padding: .7rem 0; }

.sma-breadcrumb {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--ink-faint);
  padding: 1.1rem 0 0;
}
.sma-breadcrumb a { color: var(--ink-faint); text-decoration: none; border-bottom: 1px solid var(--rule); }
.sma-breadcrumb a:hover { color: var(--brand); border-bottom-color: var(--brand); }
.sma-breadcrumb span { padding: 0 .4em; }

/* ---------- article ---------- */

main { display: block; }

.sma-article {
  /* A stack of full-bleed bands, not one centred column. The named tracks hand every
     ordinary child the 52rem measure automatically, let the hero span a wider track,
     and let a band run edge to edge — with no 100vw, no transforms and no negative
     margins, so there is no scrollbar overflow to chase. At 1440 the wide track comes
     out at exactly 1024px, which is the 64rem the hero wants. */
  display: grid;
  grid-template-columns:
    [full-start] 1fr
    [wide-start] minmax(0, 6rem)
    [text-start] min(var(--measure), calc(100% - 2.5rem)) [text-end]
    minmax(0, 6rem) [wide-end]
    1fr [full-end];
  padding: 2.5rem 0 6rem;
}
/* A hero is the top of the page, so nothing sits above it. The article's own top
   padding was showing as a white strip between the notice and the photograph. */
.sma-article:has(> .sma-hero:first-child) { padding-top: 0; }
.sma-article > * { grid-column: text; }
/* Photographs share the text column. They used to run on the wider track, which put
   them 960px against 768px of prose — Olivier, 2026-10-30: "images are way wider than
   the text, text should be as wide [as] if not more than images." One column edge for
   everything in the article is also simply tidier than two. */
.sma-article > .sma-figure { grid-column: text; }
.sma-article > .sma-band,
.sma-article > .sma-hero { grid-column: full; }

.sma-article > :first-child { margin-top: 0; }

/* Weight 500 at the top, 400 under it. creators.google sets its 60px h2 at 400 and
   nothing on the page is bolder than 500, which is most of why it reads composed
   rather than loud. Bold headings were the first thing to go. */
h1 {
  font-family: var(--display);
  font-size: clamp(2.35rem, 1.2rem + 4.6vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 500;
  margin: .45em 0 .55em;
  text-wrap: balance;
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -.016em;
  font-weight: 400;
  margin: 2.9em 0 .7em;
  text-wrap: balance;
}

h3 {
  font-family: var(--display);
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -.008em;
  margin: 2.2em 0 .55em;
  color: var(--ink);
}

p { margin: 0 0 1.15em; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .14em; }
a:hover { color: var(--brand-bright); text-decoration-thickness: 2px; }

/* ---------- the surfaces the browser draws ---------- */
/* Selection, caret, focus ring, scrollbar and form accents all ship with defaults that
   belong to no design system. They are cheap to theme and they are what separates a
   page that was built from one that was assembled. */
::selection { background: var(--brand-wash); color: var(--ink); }
.sma-band-dark ::selection { background: rgba(175, 201, 255, .28); color: #FFF; }

html {
  caret-color: var(--brand);
  accent-color: var(--brand);
  scrollbar-color: var(--rule) transparent;
}

/* One focus ring for the whole site, in the brand, offset so it never crowds the
   glyphs. Components that need a different colour (on navy, on near-black) override it
   below; nothing is left with the browser's default. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

strong { font-weight: 600; }

em { font-style: italic; }

ul, ol { margin: 0 0 1.3em; padding-left: 1.4em; }
li { margin-bottom: .5em; }
li > ul, li > ol { margin-top: .5em; }

/* the lede */
.sma-lede {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-mid);
  margin-bottom: 1.4em;
}

/* the boxed answer — the single most important component on the site */
.sma-answer {
  background: var(--brand-wash);
  border-radius: var(--radius);
  padding: 1.6rem 1.75rem .5rem;
  margin: 2.2rem 0 2.6rem;
}
.sma-answer > p:last-child { margin-bottom: 1.15em; }
.sma-answer strong { font-weight: 600; }
.sma-answer ul { margin-bottom: 1.15em; }

/* the source block near the top of every page */
.sma-sources-block {
  list-style: none;
  padding: 1.45rem 1.6rem .3rem;
  margin: 1.8rem 0 2.4rem;
  background: var(--paper-sunk);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.55;
}
.sma-sources-block li { margin-bottom: .9em; padding-left: 1.05em; position: relative; }
.sma-sources-block li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .34em; height: .34em;
  background: var(--brand);
  border-radius: 50%;
}
.sma-sources-block strong { color: var(--ink); }

/* quoted law — the thing competitors do not do, so it gets the signature treatment.
   The 3px accent bar down the left was the most generic way to mark a quote there is,
   and it is on impeccable's refuse list for exactly that reason. A tinted ground with
   the site's own radius says the same thing in the vocabulary the bands and cards
   already speak, and it leaves the emphasis for the citation underneath. */
blockquote {
  margin: 2.1rem 0 2.4rem;
  padding: 1.5rem 1.6rem 1.3rem;
  background: var(--accent-wash);
  border-radius: var(--radius);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) blockquote { background: var(--accent-wash); }
}
/* inside a dark band the wash would vanish, so the quote inverts to a lighter plane */
.sma-band-dark blockquote { background: rgba(255, 255, 255, .06); color: #E8EAED; }
blockquote p { font-size: 1.0625rem; line-height: 1.58; margin-bottom: .85em; }
blockquote cite,
.sma-cite {
  display: block;
  margin-top: .9rem;
  font-family: var(--display);
  font-size: .9375rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -.006em;
  /* reporter citations are columns of figures in prose; lining them up is the whole
     reason tabular numerals exist */
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* The numbered steps get their own tinted plane so the sequence reads as a process
   rather than as another list in the prose. */
/* steps and checklists */
.sma-steps, .sma-checklist {
  counter-reset: sma-step;
  list-style: none;
  margin: 1.7rem 0 2rem;
}
.sma-checklist { padding-left: 0; }

/* The steps panel is a card, so the numerals belong INSIDE its padding. This rule has
   to sit below the shared one above: `padding-left: 0` there used to win on source
   order and the circles ended up sitting on the edge of the white -- Olivier,
   2026-10-30: "the number are on the edge of the white block." The left padding is
   deliberately larger than the right, because the numerals hang into it. */
.sma-steps {
  background: var(--brand-wash);
  border-radius: var(--radius);
  padding: 2rem 2.2rem 1.8rem 2.4rem;
}
.sma-band-sunk .sma-steps { background: var(--paper); }
@media (max-width: 40rem) {
  .sma-steps { padding: 1.5rem 1.3rem 1.3rem 1.5rem; }
}
.sma-steps > li, .sma-checklist > li {
  counter-increment: sma-step;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.1em;
}
.sma-steps > li::before, .sma-checklist > li::before {
  content: counter(sma-step);
  position: absolute;
  left: 0; top: .08em;
  width: 1.85rem; height: 1.85rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-wash);
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
}

/* tables */
.sma-table-wrap { overflow-x: auto; margin: 1.8rem 0 1.2rem; }
.sma-table {
  border-collapse: collapse;
  width: 100%;
  /* fee arithmetic in columns: proportional figures wander, tabular ones line up */
  font-variant-numeric: tabular-nums;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.45;
}
.sma-table caption {
  caption-side: top;
  text-align: left;
  font-size: .8125rem;
  color: var(--ink-faint);
  padding-bottom: .55rem;
}
.sma-table th, .sma-table td {
  border: 1px solid var(--rule);
  padding: .6rem .7rem;
  text-align: left;
  vertical-align: top;
}
.sma-table thead th {
  background: var(--paper-sunk);
  font-weight: 600;
  color: var(--ink);
}
.sma-table tbody th { font-weight: 600; background: var(--paper-sunk); }
.sma-illustration-label {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--ink-faint);
  margin-top: -.4rem;
}

/* ---------- pictures ---------- */
/* taste-skill's floor is four real pictures per page and SVG does not count. These
   four are commissioned editorial still lifes, deliberately not documentary. Nothing
   in them depicts a real building, a real document or a person, because a
   photographed courthouse would be a false depiction and a suited figure at a desk is
   precisely what R. 4-7.22(d)(11) forbids: it leads a reader to conclude this is a
   law firm. Objects, paper and light, making no claim. There are no captions for the
   same reason — a caption under an illustration reads as evidence.

   display:contents on <picture> keeps the WebP source wrapper out of the layout, so
   the rules below still address the <img> directly. */
picture { display: contents; }

.sma-figure { margin: 3rem 0; }

/* The hero breaks out wider than the reading column. This is the one place the
   one-frame rule bends, and it bends on purpose: a picture that shares the text's
   measure reads as an illustration inside a document, while one that runs past it on
   both sides reads as the top of a designed page. The text stays at 52rem, so nothing
   else moves. calc() keeps it from ever exceeding the viewport on the way down to the
   point where it simply matches the column again. */
.sma-figure-hero { margin: 2.2rem 0 2.6rem; }
/* h2 carries a 2.9em top margin, which collapsed against the figure left the picture
   floating between two sections instead of introducing the one below it. */
.sma-figure + h2 { margin-top: 1.6em; }

/* The lede runs straight into the hero, so it loses its own trailing space. */
.sma-lede + .sma-figure-hero { margin-top: 1.6rem; }
.sma-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-sunk);
}

/* A 16:9 hero at this width is 576px tall, which pushed the three things Florida law
   has already settled below the fold — and those three holdings are the reason the
   page exists. A band crops the same photograph to 466px and buys back a screenful.
   object-position favours the upper frame so a standing figure keeps their head. */
.sma-figure-hero img { aspect-ratio: 22 / 10; object-position: center 38%; }

/* Below roughly 808px the wide track collapses to the full viewport, so photographs run
   edge to edge. That is a good look on a phone and a tablet — but a 16px radius whose
   rounded corners touch the screen edge reads as a mistake rather than a decision, so
   the corners square off at the width where the bleed begins. */
@media (max-width: 50rem) {
  .sma-article > .sma-figure img { border-radius: 0; }
}
@media (max-width: 34rem) {
  /* On a phone the band would be a letterbox slot, so it opens back out. */
  .sma-figure-hero img { aspect-ratio: 4 / 3; }
}

/* On the dark ground a full-white photograph is a flash in a dim room. A small, even
   reduction reads as the same picture with the lamp turned down, which is what the
   rest of the palette already does. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sma-figure img { filter: brightness(.86); }
}

/* ---------- motion ---------- */
/* There is deliberately no hidden start state in this file. motion.js sets the
   opacity itself, in the same tick in which it builds the tween, so a reader whose
   JavaScript is off, whose CDN is blocked, or who has asked for reduced motion is
   never served copy that a script has to arrive to reveal. The only rule here is the
   print override below, for a page printed mid-tween. */

/* ---------- the hero ---------- */
/* Olivier, 2026-10-30, after seeing the editorial version: "I dont like it at all. make
   it more like [a WordPress marketing site]. that type of design." This is the
   conventional commercial layout and it is a deliberate client decision, not a default I
   drifted into: photograph full width, a scrim over it, the headline and the actions on
   top. taste-skill and impeccable both refuse a hero overlay by name; the client's
   brief outranks both, and the brief here is explicit. */
.sma-hero {
  position: relative;
  display: grid;
  min-height: clamp(36rem, 24rem + 34vw, 54rem);
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}
/* An article hero is shorter than the home page's. The home hero is the whole first
   screen because the home page has nothing above the fold to lose; an article has to
   start giving the reader the answer inside the first screen, so this one takes about
   half the viewport and no more. */
.sma-hero-inner { min-height: clamp(24rem, 17rem + 20vw, 34rem); }
.sma-hero-inner .sma-hero-body { padding: 3.2rem 0; }
.sma-hero-inner h1 { font-size: clamp(1.95rem, 1.1rem + 2.8vw, 2.9rem); }
.sma-hero-inner .sma-lede { margin-bottom: 1.4em; }
/* The first paragraph of the article should not start the instant the photograph
   stops; an article hero is a lid, and the body needs a breath under it. */
/* Flush: the hero is a full-bleed photograph and a white band under it read as a
   margin left in by mistake. What follows sets its own top padding. */
.sma-hero-inner + * { margin-top: 0; }

/* Descendant, not child: `display: contents` on <picture> removes its box from layout
   but NOT its place in the DOM, so `.sma-hero > img` matches nothing and the photograph
   falls back into normal flow at its natural size with the copy stranded beneath it.
   That is what happened on the first build of this hero. */
.sma-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  border-radius: 0;
}
/* The scrim is what makes white type legible over a photograph, so it is a function and
   not decoration. Solid rather than a gradient: a photograph whose brightness shifts
   under a gradient fails contrast in the light patch, and this one has a bright window. */
/* A single slow settle rather than a loop: the frame eases out of a 6% push-in over
   half a minute and then stops. It reads as a live scene without a video file, and it
   is the page's one authored moment. Off entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .sma-hero img {
    animation: sma-hero-settle 30s cubic-bezier(.16, 1, .3, 1) forwards;
    will-change: transform;
  }
}
@keyframes sma-hero-settle {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

/* Directional, not flat. The copy now sits on the left of the frame and the subject
   stands in the right third, so the scrim is heaviest where the type is and lifts off
   her: a solid 62% over the whole photograph buried the one thing worth looking at.
   The stops are measured against the type zone, not eyeballed -- the lightest value
   anywhere under text is .78, which keeps white over this photograph above 11:1. */
.sma-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(14, 15, 17, .80) 0%,
    rgba(14, 15, 17, .76) 38%,
    rgba(14, 15, 17, .70) 58%,
    rgba(14, 15, 17, .34) 78%,
    rgba(14, 15, 17, .12) 100%);
}
/* Left-aligned on the same edge as the body text below it, so the page has one left
   edge from the headline to the footer. */
.sma-hero-body {
  position: relative;
  z-index: 1;
  width: min(48rem, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 4rem 0;
  text-align: left;
  color: #FFF;
}
/* 36rem, not the full 48rem of the body text: the subject stands at about 65% of the
   frame and a wider column would run into her. */
.sma-hero-body > * { max-width: 36rem; }
/* The hero lede is set smaller than a lede in the page body. At body size this one ran
   to eight lines and pushed both buttons below the fold on a 900px screen, which on a
   page whose whole job is the consultation is a conversion bug, not a typographic one. */
.sma-hero-body .sma-lede { font-size: 1.0625rem; line-height: 1.62; }
/* The hero headline is a two-sentence hook, so it is set a step below the page h1
   scale: at the full 4.25rem it ran to five lines and pushed the CTAs out of the
   first screen. */
.sma-hero-body h1 {
  color: #FFF;
  margin: 0 0 .5em;
  font-size: clamp(2.1rem, 1.15rem + 3.2vw, 3.25rem);
  letter-spacing: -.018em;
}
.sma-hero-body .sma-lede { color: #E8EAED; margin-bottom: 1.6em; }
.sma-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: flex-start;
  margin: 0;
}

/* Below the breakpoint the photograph is cropped hard to the subject and there is no
   room to hold type beside her, so the scrim goes back to covering the frame. */
@media (max-width: 46rem) {
  .sma-hero::after {
    background: linear-gradient(180deg,
      rgba(14, 15, 17, .74) 0%,
      rgba(14, 15, 17, .80) 100%);
  }
  .sma-hero-body { padding: 3.2rem 0; }
  .sma-hero-body > * { max-width: none; }
}

/* ---------- the tracked phone number ----------
   CallRail's swap.js rewrites the text node and the href of anything whose text
   matches the account number, so the number is printed literally and never built
   from parts or split across elements. */
.sma-call {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.sma-call-label { color: var(--ink-soft); }
.sma-call-number {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.sma-call:hover .sma-call-number { color: var(--brand-bright); text-decoration: underline; }

.sma-hero-call { margin: 1.1rem 0 0; }
.sma-hero-call a {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #FFF;
  text-decoration-color: rgba(255, 255, 255, .5);
  text-underline-offset: .22em;
  white-space: nowrap;
}
.sma-hero-call a:hover { text-decoration-color: #FFF; }

.sma-footer-call { margin: .9rem 0 0; }
.sma-footer-call a {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #FFF;
  text-decoration: none;
  white-space: nowrap;
}
.sma-footer-call a:hover { text-decoration: underline; }

/* Beside a filled button, not competing with it: the form is the primary action and
   the call is the alternative for someone who would rather talk. */
.sma-call-inline {
  display: inline-block;
  margin-left: 1rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sma-band-dark .sma-call-inline, .sma-band-brand .sma-call-inline { color: #FFF; }
@media (max-width: 34rem) {
  .sma-call-inline { display: block; margin: 1rem 0 0; }
}

/* ---------- buttons ---------- */
.sma-btn {
  display: inline-block;
  padding: .95rem 1.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  background: var(--brand);
  color: #FFF;
  border: 2px solid var(--brand);
}
.sma-btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #FFF; }
.sma-btn-ghost { background: transparent; color: #FFF; border-color: rgba(255, 255, 255, .55); }
.sma-btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: #FFF; color: #FFF; }
.sma-btn:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }
/* Inside a band the anchor becomes a grid item and stretches the full measure, which
   turns a pill into a bar. Buttons size to their label. */
.sma-band > .sma-btn { justify-self: start; }

/* ---------- bands ---------- */
/* This is the part of creators.google the first pass missed. That page is a sequence
   of full-width sections on alternating grounds — white, pale grey, near-black — and
   taking its type and its grey ramp without taking its sectioning is exactly why a
   correctly typeset page still read as a legal memo with photographs dropped in.
   Each band is its own little grid so its contents keep the reading measure. */
.sma-band {
  display: grid;
  grid-template-columns: 1fr min(var(--measure), calc(100% - 2.5rem)) 1fr;
  padding: 4.5rem 0;
}
.sma-band > * { grid-column: 2; }
.sma-band > :first-child { margin-top: 0; }
.sma-band > :last-child { margin-bottom: 0; }
/* 4.5rem of air above and below every band is right on a desktop and absurd on a
   phone, where it is most of a screen before any words. */
@media (max-width: 40rem) { .sma-band { padding: 3rem 0; } }

.sma-band-sunk { background: var(--paper-sunk); }

/* This band used to run on its own 64rem track so three cards would fit. That gave its
   heading a left edge 128px out from every other heading on the page — a second column
   edge, which is the same defect as photographs overhanging the prose. It now shares the
   one column, and the cards go two-up with the third spanning, which is why its list
   splits into two columns rather than standing as one tall thin block. */

/* One near-black band carries the thing the page exists to say. Here that is the three
   holdings in Rosenberg, and giving them the only inverted block on the page is the
   whole argument of the site in one visual move. */
.sma-band-dark { background: #202124; color: #DADCE0; }
.sma-band-dark h2, .sma-band-dark h3, .sma-band-dark strong { color: #FFF; }
.sma-band-dark a { color: #AFC9FF; }
.sma-band-dark a:hover { color: #FFF; }
.sma-band-dark a:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }

/* The closing action gets the brand at full strength rather than another grey. White on
   #1550C8 is 6.97:1, measured. */
.sma-band-brand { background: var(--brand); color: #FFF; }
.sma-band-brand h2, .sma-band-brand h3, .sma-band-brand strong { color: #FFF; }
.sma-band-brand p { color: #DDE6F7; }
.sma-band-brand .sma-btn {
  background: #FFF; color: var(--brand-deep); border-color: #FFF;
}
.sma-band-brand .sma-btn:hover { background: #FFF; color: var(--brand-deep); }
.sma-band-brand a:not(.sma-btn) { color: #FFF; }

@media (prefers-color-scheme: dark) {
  /* In dark mode the page ground is already #202124 and sunk is #292A2D, so the dark
     band has to go below both or the three grounds collapse into one. */
  :root:not([data-theme="light"]) .sma-band-dark { background: #16181A; }
}

/* the three holdings */
.sma-band-answer h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
  margin: 0 0 1.1em;
  letter-spacing: -.014em;
}
/* the bridge sentence now opens the band, above its heading */
.sma-band-answer > p:first-child { font-size: 1.0625rem; margin-bottom: 1.6em; color: #C7CED8; }
.sma-band-answer ul { margin: 0 0 1.5em; }
.sma-band-answer li { margin-bottom: 1.15em; }
/* The caveat under the holdings is secondary, but neutral grey on a coloured plane is
   the lazy move and the craft floor bans it. This is tinted toward the brand so it
   reads as the same voice lowered, not as disabled text. 7.09:1 on #202124. */
.sma-band-answer > p:last-child { margin-bottom: 0; color: #A3ADBA; font-size: 1rem; }

/* the closing call to action, which is itself the band */
.sma-band-cta { padding: 4rem 0 4.2rem; }
.sma-band-cta p { margin: 0 0 1.5rem; font-size: 1.0625rem; max-width: 40rem; }
.sma-band-cta a {
  display: inline-block;
  padding: .8rem 1.6rem;
  background: #FFF;
  color: #202124;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
}
.sma-band-cta a:hover { background: #FFF; color: #202124; text-decoration: none; }
.sma-band-cta a:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }
/* The bare-anchor rule above turns everything in this band into a white pill, which
   made the call link a white button with white text on it -- an invisible control.
   The call is the secondary action here, so it reverts to a plain underlined link. */
.sma-band-cta a.sma-call-inline,
.sma-band-brand a.sma-call-inline {
  display: inline-block;
  padding: 0;
  background: none;
  border-radius: 0;
  color: #FFF;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .5);
  text-underline-offset: .22em;
}
.sma-band-cta a.sma-call-inline:hover,
.sma-band-brand a.sma-call-inline:hover {
  background: none;
  color: #FFF;
  text-decoration: underline;
  text-decoration-color: #FFF;
}

/* calls to action */
/* No border. creators.google never draws a hairline box around anything: a panel is
   a block of pale grey with a generous radius, and the action inside it is a filled
   pill at radius 48px, 16px type, weight 500, no shadow at rest. */
.sma-cta {
  margin: 2.6rem 0;
  padding: 1.75rem 1.75rem 1.6rem;
  background: var(--paper-sunk);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.sma-cta p { margin: 0 0 1.1rem; }
.sma-cta p:last-of-type { margin-bottom: 1.15rem; }
.sma-cta a {
  display: inline-block;
  margin-top: 0;
  padding: .75rem 1.5rem;
  background: var(--brand);
  color: #FFF;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  text-decoration: none;
}
.sma-cta a:hover { background: var(--brand-deep); color: #FFF; }
.sma-cta a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sma-cta-closing {
  background: var(--brand-deep);
  color: #DDE6F7;
  padding: 2.1rem 1.9rem 1.9rem;
  font-size: 1.0625rem;
}
.sma-cta-closing a { background: #FFF; color: var(--brand-deep); }
.sma-cta-closing a:hover { background: #FFF; color: var(--brand-deep); }
.sma-cta-closing a:focus-visible { outline-color: #FFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sma-cta-closing { background: var(--brand-wash); color: var(--ink-soft); }
  :root:not([data-theme="light"]) .sma-cta a { background: var(--brand); color: #202124; }
  :root:not([data-theme="light"]) .sma-cta a:hover { background: var(--brand-bright); color: #202124; }
  :root:not([data-theme="light"]) .sma-cta-closing a { background: var(--brand); color: #202124; }
}

/* related links */
.sma-related {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0 2rem;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.5;
}
.sma-related li {
  padding: .75rem 0;
  border-top: 1px solid var(--rule-soft);
  margin-bottom: 0;
  color: var(--ink-soft);
}
.sma-related li:last-child { border-bottom: 1px solid var(--rule-soft); }
.sma-related a { font-weight: 500; color: var(--ink); text-decoration: none; }
.sma-related a:hover { color: var(--brand); text-decoration: underline; }
.sma-related a:focus-visible { color: var(--brand); text-decoration: underline; }

/* home-page routing cards */
.sma-routes {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 2.2rem 0 3rem;
}
@media (min-width: 46rem) { .sma-routes { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.sma-routes > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 46rem) {
  .sma-routes > :last-child:nth-child(odd) ul { columns: 2; column-gap: 2.2rem; }
  .sma-routes > :last-child:nth-child(odd) li { break-inside: avoid; }
}
.sma-route {
  background: var(--paper-card);
  border-radius: var(--radius);
  padding: 1.6rem 1.6rem .9rem;
}
/* --paper-card and --paper-sunk are the same #F8F9FA, so on a sunk band the cards
   disappeared into their own background and the section read as three bare columns.
   On a grey band they go white, which is the whole point of a card. The call to action
   inside a grey band had exactly the same problem. */
.sma-band-sunk .sma-route,
.sma-band-sunk .sma-cta { background: var(--paper); }

/* In the commercial register a card is a lifted object, not a tinted area. The shadow
   carries a real offset and a soft blur — a zero-offset halo is the decoration
   impeccable refuses, and this is not that. */
.sma-route {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px -6px rgba(16, 24, 40, .12);
  border-top: 3px solid var(--brand);
  transition: box-shadow .18s ease-out, transform .18s ease-out;
}
.sma-route:hover {
  box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 14px 28px -10px rgba(16, 24, 40, .18);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .sma-route { transition: none; }
  .sma-route:hover { transform: none; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sma-route {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -6px rgba(0, 0, 0, .5);
  }
}
.sma-route h3 {
  margin: 0 0 .7rem;
  font-size: 1.125rem;
  letter-spacing: -.008em;
  color: var(--ink);
}
.sma-route ul {
  list-style: none;
  padding-left: 0;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.45;
}
.sma-route li { margin-bottom: 1.05em; }
.sma-route a {
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.sma-route a:hover { color: var(--brand); text-decoration: underline; }
.sma-route a:focus-visible { color: var(--brand); text-decoration: underline; }
.sma-route span { display: block; color: var(--ink-soft); font-size: .9375rem; margin-top: .1em; }

/* Three cards now get three tracks, so the old "odd one out spans the row" rule is
   gone — with three columns it matched the third card and tore the row open again. */

/* byline + disclaimer */
.sma-page-meta {
  margin: 3rem 0 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-faint);
}
.sma-page-meta p { margin: 0; }
.sma-page-meta strong { color: var(--ink-soft); }

.sma-disclaimer {
  background: var(--warn-wash);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.sma-disclaimer p { margin: 0; }

/* ---------- footer ---------- */

.sma-footer {
  border-top: none;
  background: #16181A;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.65;
  color: #AAB4C2;
  padding: 3.4rem 0 2.6rem;
}
.sma-footer h2 { color: #FFF; }
.sma-footer a { color: #C7CED8; }
.sma-footer a:hover { color: #FFF; }
.sma-footer .sma-todo { color: #E3C65F; }
.sma-footer-brand .sma-wordmark { color: #FFF; font-size: 1.25rem; display: inline-block; margin-bottom: .7rem; }
.sma-footer-brand .sma-wordmark .sma-wordmark-switch { color: #8CB2FF; }
.sma-footer-brand .sma-wordmark:hover { color: #FFF; }
.sma-footer-brand p { margin: 0; max-width: 24rem; }
.sma-footer-grid {
  display: grid;
  gap: 1.8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .sma-footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.4rem; } }
.sma-footer h2 {
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--ink);
  margin: 0 0 .7rem;
  font-weight: 600;
}
.sma-footer ul { list-style: none; padding-left: 0; margin: 0; }
.sma-footer li { margin-bottom: .45em; }
.sma-footer a { color: var(--ink-soft); }
.sma-footer a:hover { color: var(--brand); }
.sma-footer-legal {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8125rem;
  color: #8E99A8;
}
.sma-footer-legal p { margin: 0 0 .7em; }

/* a field that is not filled in yet — visible on purpose, never shipped */
.sma-todo {
  font-family: var(--sans);
  background: var(--warn-wash);
  border-bottom: 1px dashed var(--warn-rule);
  padding: 0 .2em;
  color: var(--accent-deep);
}

/* ---------- preview-only scaffolding ---------- */

.sma-preview-bar {
  background: #2B2118;
  color: #F0E4D4;
  font-family: var(--sans);
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .01em;
}
.sma-preview-bar p { margin: 0; padding: .45rem 0; }
.sma-preview-bar strong { color: #F7B267; }

.sma-stub {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem 1rem 5rem;
}
.sma-stub h1 { font-size: 1.6rem; }
.sma-stub .sma-stub-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9375rem;
  background: var(--paper-sunk);
  padding: .2em .45em;
  border-radius: var(--radius-sm);
}
.sma-stub dl { font-family: var(--sans); font-size: .9375rem; }
.sma-stub dt { font-weight: 600; margin-top: 1.1em; }
.sma-stub dd { margin: .25em 0 0; color: var(--ink-soft); }

/* ---------- print ---------- */

@media print {
  .sma-masthead, .sma-notice, .sma-preview-bar, .sma-footer, .sma-breadcrumb, .sma-cta,
  .sma-figure { display: none; }
  .sma-reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .sma-article { max-width: none; }
}

/* ============================================================================
   SOCIAL PROOF, CASES, FEATURE SECTIONS AND THE REQUEST FORM
   Appended 2026-10-30. Everything here sits at the end of the file on purpose:
   this stylesheet declares .sma-nav, .sma-masthead-top and .sma-figure twice, and
   a rule only wins if it is below every selector it overrides.
   ========================================================================= */

/* A placeholder has to be impossible to mistake for finished work, on screen as
   well as in the source. */
.sma-ph-flag {
  display: inline-block;
  margin: 0 0 1.2rem;
  padding: .3rem .7rem;
  background: #FDE68A;
  color: #4A3203;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.sma-band-dark .sma-ph-flag, .sma-band-brand .sma-ph-flag { color: #4A3203; }

.sma-legal-note {
  margin: 1.8rem 0 0;
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.sma-band-dark .sma-legal-note { color: #A3ADBA; }

/* ---------- coverage marquee ---------- */
.sma-marquee {
  grid-column: full;
  padding: 2rem 0;
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule);
}
.sma-marquee .sma-ph-flag { margin: 0 1.5rem 1.1rem; }
/* The label sits centred above the logos rather than beside them, so the logos get the
   whole width of the screen to run across -- Olivier, 2026-10-31: "can we center this
   and cover the entire or wide of the screen." Beside them it pinned the first logo
   against a label at the far left edge and ate a chunk of a wide screen. */
.sma-marquee-eyebrow {
  margin: 0 0 1.25rem;
  text-align: center;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sma-marquee-win { overflow: hidden; }
.sma-marquee-vp { display: flex; width: max-content; }
.sma-marquee-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  margin: 0;
  /* Half the gap at each end, so the seam between the two copies of the track is the
     same distance as the gap inside one -- and so the first logo is not flush against
     the edge when reduced motion holds the marquee still. */
  padding: 0 1.75rem;
  list-style: none;
}
.sma-marquee-track li {
  margin: 0;
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.sma-marquee-track li.sma-marquee-ph {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: #8A6A10;
  border: 1px dashed #D9B84A;
  border-radius: var(--radius-sm);
  padding: .4rem .8rem;
}
/* Each logo is a mask filled with the current text color, not a picture of a logo:
   one flat ink for all eight whatever the brand's own colors are, and it follows the
   grey ramp into dark mode instead of staying a light shape on a light band. */
.sma-logo {
  display: block;
  width: var(--logo-w);
  height: var(--logo-h);
  background: currentColor;
  opacity: .78;
  -webkit-mask: var(--logo) no-repeat center / contain;
  mask: var(--logo) no-repeat center / contain;
}
@media (max-width: 46rem) {
  .sma-marquee-eyebrow { margin-bottom: 1rem; }
  /* The marks are sized for a desktop strip; a phone takes them down a notch. */
  .sma-logo { width: calc(var(--logo-w) * .76); height: calc(var(--logo-h) * .76); }
  .sma-marquee-track { gap: 2.5rem; padding: 0 1.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .sma-marquee-vp { animation: sma-marquee var(--marquee-s, 100s) linear infinite; }
  .sma-marquee:hover .sma-marquee-vp { animation-play-state: paused; }
}
@keyframes sma-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- authorities, where the borrowed proof used to be ---------- */
/* Citations, not logos: a row of institutional marks beside a qualifying provider reads
   as endorsement, and R. 4-7.22(d)(8) forbids implying one. So these are set as type. */
.sma-auth {
  display: block;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
}
.sma-auth em {
  display: block;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-top: .15rem;
}
.sma-marquee-auth .sma-marquee-track { gap: 3rem; }
.sma-holdings-sub {
  margin: .6rem auto 2.4rem;
  max-width: 34rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--ink-soft);
}
/* The holdings rotator is the written-review rotator with a court in place of a
   customer, so the quote carries the weight and the citation sits under it. */
.sma-social-law .sma-review-who { font-style: normal; }
.sma-social-law .sma-review-who span { font-variant-numeric: tabular-nums; }

/* ---------- rating badge ---------- */
/* Olivier, 2026-10-31, on the first version -- a thin pill with 11px stars and a grey
   quote in a grey card: "this is horrible, I need big start and very out in your face
   an bold." So the proof is the loudest thing between the hero and the article: the
   stars and the score are set at display size, the block is centred, and the quote is
   type rather than a card. */
.sma-social { text-align: center; }
.sma-social > h2 {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.9rem);
  line-height: 1.1;
  margin-bottom: 0;
}
.sma-rating { margin: 2.2rem 0 2.8rem; }
.sma-stars {
  margin: 0;
  color: #F0A202;
  font-size: clamp(2.4rem, 1.5rem + 3.2vw, 3.9rem);
  line-height: 1;
  letter-spacing: .05em;
}
.sma-rating-score {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .65rem;
  margin: .9rem 0 0;
  font-family: var(--display);
  color: var(--ink);
}
.sma-rating-score strong {
  font-size: clamp(3.2rem, 2rem + 4.4vw, 5.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.sma-rating-score span {
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -.015em;
}
.sma-rating-sub {
  margin: .55rem 0 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- rotating written reviews ---------- */
.sma-rotator { position: relative; }
.sma-rotator-track { margin: 0; padding: 0; list-style: none; }
.sma-review { margin: 0; display: none; }
.sma-review[data-on] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .sma-review[data-on] { animation: sma-fade .45s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes sma-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* No card behind the quote: at this size the sentence is the thing, and a pale panel
   inside a pale band only made it quieter. */
.sma-review blockquote { margin: 0; padding: 0; background: none; }
.sma-review blockquote p {
  margin: 0 auto;
  max-width: 44rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.sma-review-who {
  margin: 1.4rem 0 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.sma-review-who span { display: block; font-weight: 400; color: var(--ink-soft); }
.sma-rotator-dots { display: flex; justify-content: center; gap: .6rem; margin-top: 1.9rem; }
.sma-dot {
  width: 11px; height: 11px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--rule);
  cursor: pointer;
}
.sma-dot[data-on] { background: var(--brand); }
.sma-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- video reviews ---------- */
.sma-vr { text-align: center; }
.sma-vr > h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1.1; }
.sma-vr-sub { color: var(--ink-soft); font-size: 1.0625rem; }
.sma-vr-stage { position: relative; margin: 2.4rem 0 0; }
/* With a single review there is nothing to page through, so the track stops being a
   carousel and the one frame takes the width. */
.sma-vr-one .sma-vr-track { overflow: visible; justify-content: center; }
.sma-vr-one .sma-vr-slide { flex: 0 0 min(100%, 50rem); }
.sma-vr-track {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sma-vr-track::-webkit-scrollbar { display: none; }
.sma-vr-slide { flex: 0 0 min(100%, 34rem); scroll-snap-align: center; margin: 0; }
.sma-vr-frame {
  position: relative;
  display: grid;
  place-items: center;
  gap: .9rem;
  aspect-ratio: 16 / 9;
  background: var(--paper-sunk);
  border-radius: var(--radius);
  overflow: hidden;
}
.sma-vr-frame video, .sma-vr-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.sma-vr-play {
  width: 84px; height: 84px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 6px rgba(16, 24, 40, .18), 0 14px 34px -8px rgba(16, 24, 40, .4);
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
button.sma-vr-play:hover { transform: scale(1.06); }
.sma-vr-play:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.sma-vr-play::after {
  content: "";
  position: absolute;
  left: 33px; top: 26px;
  border-left: 26px solid var(--brand);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}
/* Once it is playing the overlay has to leave, or it swallows the pause click. */
.sma-vr-frame[data-playing] .sma-vr-play { display: none; }
.sma-vr-note {
  z-index: 1;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  color: #8A6A10;
  background: #FDE68A;
  padding: .25rem .6rem;
  border-radius: var(--radius-sm);
}
.sma-vr-arrow {
  position: absolute;
  top: 50%;
  left: -1.1rem;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px -6px rgba(16, 24, 40, .14);
}
.sma-vr-next { left: auto; right: -1.1rem; }
.sma-vr-arrow::after {
  content: "";
  position: absolute;
  left: 18px; top: 16px;
  width: 10px; height: 10px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
.sma-vr-next::after { left: 15px; transform: rotate(-135deg); }
.sma-vr-arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 62rem) {
  .sma-vr-arrow { left: .4rem; }
  .sma-vr-next { left: auto; right: .4rem; }
}

/* ---------- cases this covers ---------- */
.sma-cases { grid-column: full; padding: 4.5rem 0; }
.sma-cases-grid {
  display: grid;
  gap: 2.4rem;
  align-items: center;
  width: min(64rem, calc(100% - 2.5rem));
  margin: 0 auto;
}
@media (min-width: 56rem) {
  .sma-cases-grid { grid-template-columns: 1fr 1.05fr; gap: 3.2rem; align-items: stretch; }
}
/* The photograph fills its column instead of floating in the middle of it. With
   `align-items: center` on the grid it sat at its natural 4:3 height with dead space
   above and below, which is what made the block read as unfinished. */
.sma-cases-shot { margin: 0; height: 100%; }
.sma-cases-shot img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 20rem;
  object-fit: cover;
  border-radius: var(--radius);
}
.sma-cases-body h2 { margin-top: 0; }
/* Tiles rather than a bulleted list. A two-column list of unequal-length labels wraps
   on some rows and not others, and the ragged baselines were the other half of what
   made this block look unfinished. Equal boxes line up whatever the label does. */
.sma-cases-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}
.sma-cases-list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  min-height: 3.1rem;
  padding: .55rem .9rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.sma-cases-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.sma-band-sunk .sma-cases-list li { background: var(--paper); }
.sma-cases-more { margin: 1.9rem 0 0; }
.sma-cases-more a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border: 2px solid var(--brand);
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #FFF;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.sma-cases-more a:hover { background: var(--brand-bright); border-color: var(--brand-bright); }
.sma-cases-more a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (max-width: 34rem) { .sma-cases-list { grid-template-columns: 1fr; } }

/* ---------- alternating feature sections ---------- */
.sma-feature { grid-column: full; padding: 4.5rem 0; }
.sma-feature-sunk { background: var(--paper-sunk); }
.sma-feature-grid {
  display: grid;
  gap: 2.4rem;
  align-items: center;
  width: min(64rem, calc(100% - 2.5rem));
  margin: 0 auto;
}
@media (min-width: 56rem) {
  .sma-feature-grid { grid-template-columns: 1fr 1fr; gap: 3.4rem; }
  .sma-feature-flip .sma-feature-shot { order: 2; }
}
.sma-feature h2 {
  margin-top: 0;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.9rem);
  line-height: 1.1;
}
.sma-feature p { font-size: 1.0625rem; }
.sma-feature-shot { position: relative; margin: 0; }
.sma-feature-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
/* The panel overlaps the photograph rather than sitting under it: that overlap is
   the whole reason this layout reads as designed and not as a stacked card. */
.sma-feature-panel {
  position: relative;
  margin: -3.4rem 1.5rem 0 1.5rem;
  padding: 1.5rem 1.6rem;
  background: var(--brand);
  color: #FFF;
  border-radius: var(--radius);
  box-shadow: 0 12px 30px -12px rgba(16, 24, 40, .45);
}
.sma-feature-panel p {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: 1.1875rem;
  line-height: 1.25;
  font-weight: 500;
}
.sma-feature-panel .sma-btn {
  background: #FFF;
  color: var(--brand);
  border-color: #FFF;
  font-size: 1rem;
  padding: .75rem 1.4rem;
}
.sma-feature-panel .sma-btn:hover { background: #F1F3F4; color: var(--brand); }

/* ---------- the request form ---------- */
.sma-form { margin: 2.2rem 0 0; }
.sma-field { margin: 0 0 1.4rem; }
.sma-field > label {
  display: block;
  margin: 0 0 .4rem;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
}
.sma-hint {
  display: block;
  margin: .25rem 0 .5rem;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 400;
  color: var(--ink-soft);
}
.sma-field input[type="text"],
.sma-field input[type="tel"],
.sma-field input[type="email"],
.sma-field select,
.sma-field textarea {
  width: 100%;
  padding: .8rem .9rem;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.sma-field textarea { min-height: 7.5rem; resize: vertical; }
.sma-field input:focus-visible,
.sma-field select:focus-visible,
.sma-field textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
.sma-choices { display: grid; gap: .55rem; }
@media (min-width: 40rem) { .sma-choices { grid-template-columns: 1fr 1fr; } }
.sma-choice {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .85rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 1rem;
  cursor: pointer;
}
.sma-choice:hover { border-color: var(--brand); }
.sma-choice input { margin: .25rem 0 0; }
.sma-form-consent {
  margin: 1.8rem 0 0;
  padding: 1.2rem 1.3rem;
  background: var(--paper-sunk);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.sma-form-consent label { display: flex; gap: .6rem; align-items: flex-start; }
.sma-form-submit { margin: 1.8rem 0 0; }
.sma-form-submit button {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  padding: .95rem 1.9rem;
  border: 2px solid var(--brand);
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #FFF;
  cursor: pointer;
}
.sma-form-submit button:hover { background: var(--brand-bright); border-color: var(--brand-bright); }
.sma-form-submit button:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }


/* ---------- the phone masthead ----------------------------------------------
   Appended at the end of the file on purpose. This stylesheet declares .sma-nav and
   .sma-masthead-top twice, so anything written higher up loses at equal specificity
   even inside a media query -- the trap documented above, which has now bitten four
   times. Everything here must win, so it goes last.

   Olivier, 2026-10-31: "we need to fix this header on mobile. get a sophisticated menu
   and ad those question below the phone number to the menu also we need margins, make
   look like a top page." The four nav questions were wrapping into a mangled grid and
   the language switch was running off the right edge. They are now a panel. */
@media (max-width: 63.99rem) {
  .sma-masthead {
    position: sticky;
    top: 0;
    z-index: 40;
    /* No backdrop-filter. On this layout it creates a containing block that traps the
       panel underneath it. Solid paper instead. */
    background: var(--paper);
  }
  .sma-masthead .sma-shell { padding: 0 1.25rem; }
  .sma-masthead-inner { padding: .2rem 0; }

  .sma-masthead-top {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: .7rem;
    min-height: 3.75rem;
  }
  .sma-wordmark { font-size: 1.25rem; margin-right: auto; }

  /* The number stays on the bar because it is the thing that converts, but it shrinks
     to a pill so the wordmark and the button both keep their room. */
  .sma-masthead-top .sma-call {
    flex: 0 0 auto;
    margin: 0;
    padding: .42rem .7rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--brand-wash);
    gap: 0;
  }
  .sma-masthead-top .sma-call-label { display: none; }
  .sma-masthead-top .sma-call-number { font-size: .875rem; letter-spacing: -.015em; }
  .sma-masthead-top .sma-lang { display: none; }
}
/* On a phone the wordmark, the number and the button do not fit on one row -- at 375px
   they measured 414, which is a scrolling page. So the number becomes a drawn handset
   and the full number lives on the panel's call button and in the hero. */
@media (max-width: 29.99rem) {
  .sma-masthead-top .sma-call {
    width: 42px; height: 42px;
    padding: 0;
    place-items: center;
    display: grid;
  }
  .sma-masthead-top .sma-call-number { display: none; }
  .sma-masthead-top .sma-call::after {
    content: "";
    width: 19px; height: 19px;
    background: var(--brand);
    -webkit-mask: var(--phone-glyph) no-repeat center / contain;
    mask: var(--phone-glyph) no-repeat center / contain;
  }
  .sma-wordmark { font-size: 1.1875rem; }
}
@media (max-width: 63.99rem) {

  .sma-burger {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    margin-right: -.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
  }
  /* Three bars drawn from one element: the middle is the span, the outer two are its
     pseudo-elements, so the close state is two rotations and an opacity. */
  .sma-burger span,
  .sma-burger span::before,
  .sma-burger span::after {
    content: "";
    display: block;
    width: 22px; height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), opacity .12s linear;
  }
  .sma-burger span { position: relative; }
  .sma-burger span::before { position: absolute; top: -7px; }
  .sma-burger span::after { position: absolute; top: 7px; }
  .sma-burger[aria-expanded="true"] span { background: transparent; }
  .sma-burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .sma-burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }
  .sma-burger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

  /* The panel. grid-template-rows 0fr -> 1fr animates to the content's own height,
     which a max-height guess never does honestly. */
  .js .sma-nav {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: grid-template-rows .26s cubic-bezier(.16, 1, .3, 1);
  }
  .js .sma-nav > * { visibility: hidden; transition: visibility 0s .26s; }
  .js .sma-nav[data-open] { grid-template-rows: 1fr; }
  .js .sma-nav[data-open] > * { visibility: visible; transition: visibility 0s; }
  .js .sma-nav {
    display: block;
    max-height: 0;
    transition: max-height .28s cubic-bezier(.16, 1, .3, 1);
  }
  .js .sma-nav[data-open] { max-height: 30rem; }

  .sma-nav a {
    display: block;
    padding: .95rem 0;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }
  .sma-nav a:first-child { border-top: 1px solid var(--rule); }
  .sma-nav a[aria-current="page"] { color: var(--brand); }
  .sma-nav a:hover { border-bottom-color: var(--rule); }
  .sma-nav-call {
    margin: 1.1rem 0 1.3rem;
    padding: .95rem 1.2rem !important;
    text-align: center;
    border: 0 !important;
    border-radius: var(--radius-pill);
    background: var(--brand);
    color: #FFF !important;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .sma-notice .sma-shell { padding: 0 1.25rem; }
}
/* The in-panel call button and the language row have no place on a wide screen, where
   the bar already carries both. */
@media (min-width: 64rem) {
  .sma-burger, .sma-nav-call { display: none; }
}


/* ---------- the re-enactment label ----------------------------------------
   The disclosure sits on the frame, not only under it and not only in the footer. A
   viewer who watches the clip and never scrolls has still been told. */
.sma-vr-disclosure {
  margin: .4rem auto 0;
  max-width: 36rem;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.sma-vr-tag {
  position: absolute;
  left: .75rem; bottom: .75rem;
  z-index: 2;
  padding: .3rem .6rem;
  border-radius: var(--radius-sm);
  background: rgba(16, 24, 40, .72);
  color: #FFF;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Once the native controls appear the badge would sit on the scrubber, so it steps up. */
.sma-vr-frame[data-playing] .sma-vr-tag { bottom: 3.4rem; background: rgba(16, 24, 40, .6); }


/* The paid-placement label rides with the eyebrow, so it is read as part of the claim
   rather than found later in the footer. */
/* No chip. The bordered pill read as a badge the site had been given, which is the
   opposite of what it says, and it put two objects on a line that needs one. It is
   now the second half of the eyebrow, in the same type, a shade lighter. */
.sma-marquee-paid {
  margin-left: .45rem;
  font-weight: 500;
  color: var(--ink-faint);
}
.sma-marquee-track a { display: block; text-decoration: none; }
.sma-marquee-track a:hover .sma-logo { opacity: 1; }


/* ---------- the request form's plumbing ---------- */
/* Off-screen rather than display:none: a bot that reads the stylesheet skips a hidden
   field, and one that does not read it fills this in and tells us what it is. */
.sma-hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sma-form-note {
  margin: 1.6rem 0 0;
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.sma-form-status {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.sma-form-status:empty { margin: 0; }
.sma-form-status.is-sending { color: var(--ink-soft); }
.sma-form-status.is-ok {
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--brand);
  background: var(--brand-wash);
  color: var(--ink);
  font-weight: 500;
}
.sma-form-status.is-fail {
  padding: 1rem 1.2rem;
  border-left: 3px solid #B3261E;
  background: #FCEEEC;
  color: #7A1C15;
  font-weight: 500;
}


/* The language switch had nowhere to go on a phone: it is hidden in the bar to keep
   the row from overflowing, which left a Spanish speaker on a phone with no way to
   cross over. It lives in the panel now, marked out from the section links because it
   does something different. */
.sma-nav-lang { display: none; }
@media (max-width: 63.99rem) {
  .sma-nav-lang {
    display: block;
    margin-top: .2rem;
    padding: .95rem 0 !important;
    color: var(--brand) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--rule) !important;
  }
  .sma-nav-lang::after { content: " \2192"; }
}


/* With the score and the count gone, the stars carry the block on their own and need
   room under them rather than a number. */
.sma-rating { margin: 1.9rem 0 2.6rem; }


/* The strip carries bigger marks now, so it needs the room and a wider gap; the phone
   keeps the smaller end of it. */
.sma-marquee { padding: 2.6rem 0; }
.sma-marquee-track { gap: 4.5rem; }
@media (max-width: 63.99rem) {
  .sma-marquee { padding: 1.8rem 0; }
  .sma-marquee-track { gap: 2.75rem; }
  .sma-logo { width: calc(var(--logo-w) * .52); height: calc(var(--logo-h) * .52); }
}


/* Three or fewer reviews sit on the page together instead of behind an arrow. The
   column count comes from the markup, so adding a fourth turns the carousel back on
   without touching this. */
.sma-vr-grid .sma-vr-track {
  display: grid;
  grid-template-columns: repeat(var(--vr-cols, 2), minmax(0, 1fr));
  gap: 1.6rem;
  overflow: visible;
}
.sma-vr-grid .sma-vr-slide { flex: initial; min-width: 0; }
.sma-vr-grid .sma-vr-arrow { display: none; }
/* The play button is sized for a full-width frame; in a column it would swamp it. */
.sma-vr-grid .sma-vr-play { width: 66px; height: 66px; }
.sma-vr-grid .sma-vr-play::after {
  left: 26px; top: 20px;
  border-left-width: 20px; border-top-width: 13px; border-bottom-width: 13px;
}
@media (max-width: 56rem) {
  .sma-vr-grid .sma-vr-track { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---------- "Cases this covers": the one block that is a list, built as one --------
   Three feature rows follow this section with the same shape -- contained photograph
   in a rounded box on one side, heading and copy on the other -- and before this
   change the cases block made a run of four. The content here is not an argument, it
   is an inventory, so it is built as a different kind of section instead of the same
   one with the photo flipped: dark, the photograph running off the edge of the window
   rather than floating in a rounded box, and the tiles set wide.
   Appended at the end of the file on purpose: `.sma-cases` is declared earlier and a
   rule written above it loses at equal specificity. */
.sma-cases {
  background: #202124;
  color: #DADCE0;
  padding: 0;
}
/* Unguarded, this selector matches in light mode too, because data-theme is unset
   there -- which is how the band ended up near-black on a light page. It belongs
   inside the query, the same way .sma-band-dark does it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sma-cases { background: #16181A; }
}
:root[data-theme="dark"] .sma-cases { background: #16181A; }
.sma-cases-grid {
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 0;
  align-items: stretch;
}
@media (min-width: 56rem) {
  /* 38% leaves the list a real measure at 1280 and still reads as a wide panel. */
  .sma-cases-grid { grid-template-columns: 38% 1fr; gap: 0; }
}
/* Square on every edge: the bleed is the point, and a radius would put the photograph
   back in a box. */
.sma-cases-shot img {
  border-radius: 0;
  min-height: 16rem;
  height: 100%;
}
.sma-cases-body {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 4rem);
  max-width: 54rem;
}
.sma-cases-body h2 { color: #FFF; }
.sma-cases-body > p { color: #C7CBD1; }
/* Outlined on dark rather than filled: eight filled tiles on a dark ground reads as a
   keypad. The hairline keeps them as labels. */
.sma-cases-list li {
  background: transparent;
  border-color: rgba(255, 255, 255, .17);
  color: #E8EAED;
}
.sma-band-sunk .sma-cases-list li { background: transparent; }
.sma-cases-list li::before { background: #AFC9FF; }
@media (min-width: 100rem) {
  /* Only where four across still leaves each label on one line. At 1440 it did not:
     "Motorcycle accidents" and the longer Spanish labels wrapped, and eight tiles
     with two of them double-height is the ragged look the tiles were meant to fix.
     Eight divides evenly by two and by four, so there is no half-empty last row
     either way. */
  .sma-cases-list { grid-template-columns: repeat(4, 1fr); }
}
/* Brand blue on #202124 is under 4.5:1, so the action inverts on this surface. */
.sma-cases-more a {
  background: #FFF;
  border-color: #FFF;
  color: #202124;
}
.sma-cases-more a:hover { background: #F1F3F4; border-color: #F1F3F4; color: #202124; }
.sma-cases-more a:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }
@media (max-width: 56rem) {
  /* Stacked, the photograph is a band across the top rather than a tall panel. */
  .sma-cases-shot img { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ---------- breadcrumb over the hero, not in a white strip above it ----------
   On an article the crumb sat in its own white row between the masthead and the
   photograph, which read as a margin above the hero. The hero is full-bleed and
   dark, so the crumb can sit on it: the white row disappears, the hero starts
   directly under the masthead, and the crumb is still the first thing in the DOM
   after it. Scoped with :has() to pages whose first element really is a dark inner
   hero -- anywhere else the white row is correct and stays. A browser without
   :has() keeps the old layout, which is merely the previous spacing. */
@supports selector(body:has(.sma-hero-inner)) {
  body:has(.sma-article > .sma-hero-inner:first-child) .sma-shell:has(> .sma-breadcrumb) {
    position: relative;
    z-index: 2;
    /* exactly the row's own height, so the hero starts where the notice bar ends
       rather than sliding a few pixels underneath it */
    margin-bottom: -2.2rem;
  }
  body:has(.sma-article > .sma-hero-inner:first-child) .sma-breadcrumb {
    padding: .85rem 0 0;
    color: rgba(255, 255, 255, .72);
  }
  body:has(.sma-article > .sma-hero-inner:first-child) .sma-breadcrumb a {
    color: rgba(255, 255, 255, .82);
    border-bottom-color: rgba(255, 255, 255, .34);
  }
  body:has(.sma-article > .sma-hero-inner:first-child) .sma-breadcrumb a:hover {
    color: #FFF;
    border-bottom-color: #FFF;
  }
  /* The top of the photograph is not reliably dark enough for white text on every
     page, so the hero gets a short scrim behind the crumb only. */
  body:has(.sma-article > .sma-hero-inner:first-child) .sma-hero-inner::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 1;
  }
  body:has(.sma-article > .sma-hero-inner:first-child) .sma-hero-inner .sma-hero-body {
    position: relative;
    z-index: 2;
  }
}

/* ---------- hero play cue + the full-screen player it opens ----------
   The "Video reviews" band came off the home page and the footage moved here. The
   two disclosures moved with it, into the dialog, under the video: a disclosure on
   a page that no longer shows the thing it discloses is no disclosure at all. */
.sma-hero-play-row { margin: 1.6rem 0 0; }
.sma-hero-play {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: #FFF;
  text-align: left;
}
/* Two thirds of the size it is on a thumbnail: in the hero it sits beside a line of
   text, not in the middle of a frame. */
.sma-hero-play .sma-vr-play {
  display: block;
  flex: 0 0 auto;
  width: 56px; height: 56px;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.sma-hero-play .sma-vr-play::after {
  left: 22px; top: 17px;
  border-left-width: 17px;
  border-top-width: 11px;
  border-bottom-width: 11px;
}
.sma-hero-play:hover .sma-vr-play { transform: scale(1.07); }
.sma-hero-play:focus-visible { outline: 3px solid #FFF; outline-offset: 5px; border-radius: 4px; }
.sma-hero-play > span:last-child { border-bottom: 1px solid rgba(255, 255, 255, .45); }

.sma-lb {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: #0B0C0D;
  color: #DADCE0;
  overscroll-behavior: contain;
}
.sma-lb::backdrop { background: rgba(0, 0, 0, .86); }
.sma-lb-inner {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  width: min(74rem, 100%);
  margin: 0 auto;
  padding: clamp(3.25rem, 7vh, 4.5rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 3vh, 2rem);
  box-sizing: border-box;
}
/* Sized to the footage rather than stretched to the row: at 390px a 16:9 clip in a
   full-height box is mostly black bar. It takes the width it can, keeps its shape,
   and sits in the middle of whatever is left. */
.sma-lb-video {
  display: block;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  object-fit: contain;
  background: #000;
  border-radius: var(--radius-sm);
}
.sma-lb-foot { padding-top: 1rem; text-align: center; }
.sma-lb .sma-vr-disclosure,
.sma-lb .sma-legal-note {
  margin: 0 auto .4rem;
  max-width: 46rem;
  color: #A3ADBA;
  font-size: .8125rem;
  line-height: 1.45;
}
.sma-lb-next {
  margin-top: .6rem;
  padding: .55rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius-pill);
  background: none;
  color: #FFF;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.sma-lb-next:hover { background: rgba(255, 255, 255, .12); }
/* 48px of target, always in the same corner, above the video on every size. Escape
   and a tap on the backdrop close it too, but a visible control is the one people
   look for. */
.sma-lb-close {
  position: absolute;
  top: .75rem; right: .75rem;
  width: 48px; height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  cursor: pointer;
  z-index: 2;
}
.sma-lb-close:hover { background: rgba(255, 255, 255, .26); }
.sma-lb-close:focus-visible { outline: 3px solid #FFF; outline-offset: 3px; }
.sma-lb-close::before, .sma-lb-close::after {
  content: "";
  position: absolute;
  left: 14px; top: 23px;
  width: 20px; height: 2px;
  background: #FFF;
}
.sma-lb-close::before { transform: rotate(45deg); }
.sma-lb-close::after { transform: rotate(-45deg); }
@media (max-width: 46rem) {
  .sma-hero-play { font-size: .9375rem; gap: .7rem; }
  .sma-hero-play .sma-vr-play { width: 48px; height: 48px; }
  .sma-hero-play .sma-vr-play::after {
    left: 19px; top: 15px;
    border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px;
  }
}