/* SubjectMate public design system
   ===========================================================================
   Reusable visual primitives for the public marketing pages. Introduced with
   the year-subject facelift pilot (year-5-maths, year-9-science,
   year-12-english).

   Scope rules, so this does not quietly become a framework:
     - Only components actually used by a public page belong here.
     - Everything is prefixed .sm- so it can never collide with a page's own
       classes, with nav.js, or with footer.css.
     - No :root block. Tokens come from the page and from nav.js, which injects
       the canonical set. Every token use carries a literal fallback so a page
       that lacks one still renders correctly.

   Contrast discipline (see the palette notes in CLAUDE.md): brand teal, amber
   and violet fail AA against white at body sizes. They are used here only for
   icon tiles, rules, tinted grounds and large or decorative text. All reading
   copy is --ink or --ink-soft. Accent colours are never the sole signal for
   state.
   =========================================================================== */

/* ── Stage accent ──────────────────────────────────────────────────────────
   One knob that makes primary, secondary and senior feel distinct while
   sharing every other value. Set on a wrapper, read by the components. */
.sm-stage-primary  { --sm-accent:#C2410C; --sm-accent-soft:#E8735A; --sm-accent-tint:#FDF0ED; }
.sm-stage-secondary{ --sm-accent:#4E8A90; --sm-accent-soft:#79B4BA; --sm-accent-tint:#E8F5F6; }
.sm-stage-senior   { --sm-accent:#6D28D9; --sm-accent-soft:#7C3AED; --sm-accent-tint:#F3E8FF; }

/* ── Section bands ─────────────────────────────────────────────────────────
   Colour does the sectioning. Alternating grounds are what stop a long page
   reading as one undifferentiated scroll. */
.sm-band            { padding:72px 0; position:relative; }
.sm-band--cream     { background:var(--cream,#FAF6EF); }
.sm-band--white     { background:var(--white,#fff); }
/* A wash rather than the full tint: at section width the raw accent tint reads
   as candy, which is the opposite of premium. */
.sm-band--tint      { background:color-mix(in srgb, var(--sm-accent-tint,#E8F5F6) 52%, var(--cream,#FAF6EF)); }
.sm-band--tight     { padding:56px 0; }
.sm-wrap            { max-width:1160px; margin:0 auto; padding:0 48px; }
/* Narrows the measure without moving the left edge, so a narrow section still
   lines up with every other section on the page. */
.sm-measure         { max-width:840px; }

/* ── Title over supporting text ────────────────────────────────────────────
   One primitive for every title/subtitle pair in the system: hero chips,
   testimonial attribution, and anything added later.

   It exists because the first cut of these components nested two <span>s inside
   a plain <span>. Spans are display:inline, so the pair ran together on one line
   ("Priya M.Parent, Brisbane QLD") and any vertical margin on them was dropped,
   since margin-top and margin-bottom do not apply to inline boxes. Spacing is
   now owned by this flex column rather than by whitespace in the text nodes.

   min-width:0 lets a long title wrap instead of forcing the flex row wider. */
.sm-stack{ display:flex; flex-direction:column; gap:2px; min-width:0; }

/* -- Fact list ------------------------------------------------------------
   A row of short facts. The separating dot is drawn by CSS rather than typed
   into the copy as a middot, so the text nodes stay clean, assistive tech does
   not announce stray punctuation, and the spacing is identical everywhere. */
.sm-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 15px; margin:0; padding:0; list-style:none; }
.sm-meta > li{ position:relative; }
.sm-meta > li + li::before{
  content:''; position:absolute; left:-9px; top:50%; width:3px; height:3px;
  border-radius:50%; background:currentColor; opacity:0.42; transform:translateY(-50%);
}

/* ── Eyebrow and section titles ────────────────────────────────────────────
   The single most repeated premium signal on the homepage. */
/* --teal-dark measures 3.64:1 on cream at this size, which fails AA for text
   under 18.66px. #42757A is the same hue two steps darker and measures 4.84:1
   on cream and 5.21:1 on white, so the eyebrow keeps its brand colour without
   adding contrast debt. */
.sm-eyebrow{
  display:block; font-family:'Nunito',sans-serif; font-size:12px; font-weight:800;
  letter-spacing:0.14em; text-transform:uppercase; color:#42757A;
  margin-bottom:12px;
}
/* When an eyebrow carries more than one fact it also takes .sm-meta, which keeps
   this type treatment and lets CSS draw the separators. */
ul.sm-eyebrow{ display:flex; }
/* text-wrap:balance evens the line lengths of a heading instead of leaving one
   orphaned word; pretty does the same job for body copy. Both fall back to
   normal wrapping where unsupported. */
.sm-title{
  font-family:'Nunito',sans-serif; font-size:clamp(26px,3.1vw,40px); font-weight:900;
  line-height:1.14; letter-spacing:-0.4px; color:var(--ink,#1A1714); margin:0 0 14px;
  text-wrap:balance;
}
.sm-lede{
  font-size:16.5px; line-height:1.7; color:var(--ink-soft,#4A4540); font-weight:400;
  max-width:620px; margin:0 0 34px; text-wrap:pretty;
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Split composition. The right column carries a product mock so the first
   screen shows the thing itself rather than an empty half. */
.sm-hero{ position:relative; background:var(--cream,#FAF6EF); padding:22px 0 68px; isolation:isolate; overflow:hidden; }
.sm-hero-grid{ display:grid; grid-template-columns:1.02fr 0.98fr; gap:56px; align-items:center; }
.sm-hero-copy{ min-width:0; }

.sm-hero h1{
  font-family:'Nunito',sans-serif; font-size:clamp(31px,3.9vw,49px); font-weight:900;
  line-height:1.11; letter-spacing:-0.6px; color:var(--ink,#1A1714); margin:0 0 16px;
  text-wrap:balance;
}
.sm-hero h1 .sm-accent{ color:var(--sm-accent,#4E8A90); }
/* Keeps a keyword phrase whole. text-wrap:balance optimises for even line
   lengths and will happily break "Year 5 Maths" across two lines, which
   scatters the one phrase a parent is scanning for. Wrap the phrase in this
   and balance works around it. */
.sm-kw{ white-space:nowrap; }
.sm-hero-lead{ font-size:17px; line-height:1.68; color:var(--ink-soft,#4A4540); margin:0 0 12px; max-width:520px; text-wrap:pretty; }
.sm-hero-prime{ font-size:14.5px; font-weight:700; color:var(--teal-dark,#4E8A90); margin:0 0 26px; }

/* Aurora. Transform-only animation on a decorative layer, per the house
   pattern established by the homepage hero. */
/* --mx/--my let a pointer listener nudge the light source. They default to 0,
   so a page that never sets them renders exactly as before. The offset rides on
   the gradient positions rather than on transform, because transform is already
   owned by the drift animation and the two would overwrite each other. */
.sm-aurora{
  position:absolute; inset:-14%; z-index:-1; pointer-events:none; filter:blur(10px);
  background:
    radial-gradient(24% 30% at calc(74% + var(--mx,0px)) calc(34% + var(--my,0px)), color-mix(in srgb, var(--sm-accent-soft,#79B4BA) 26%, transparent), transparent 68%),
    radial-gradient(18% 22% at calc(86% + var(--mx,0px)) calc(26% + var(--my,0px)), rgba(142,196,201,0.18), transparent 72%),
    radial-gradient(20% 26% at calc(62% + var(--mx,0px)) calc(72% + var(--my,0px)), rgba(121,180,186,0.12), transparent 70%);
  transition:background .25s ease-out;
  animation:sm-aurora-drift 24s ease-in-out infinite alternate;
}
@keyframes sm-aurora-drift{
  0%  { transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-1.6%,1.1%,0) scale(1.06); }
}

/* ── Buttons ───────────────────────────────────────────────────────────────
   Matches the homepage's reviewed lift and press values. */
.sm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Nunito',sans-serif; font-size:16px; font-weight:800; text-decoration:none;
  padding:15px 30px; border-radius:100px; border:2px solid transparent; cursor:pointer;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .32s cubic-bezier(.22,.61,.36,1),
             background .22s ease, color .22s ease, border-color .22s ease;
}
.sm-btn--primary{ background:var(--teal,#79B4BA); color:#fff; box-shadow:0 6px 20px rgba(30,138,120,0.32); }
.sm-btn--primary:hover{ background:var(--teal-dark,#4E8A90); transform:translateY(-3px) scale(1.02); box-shadow:0 14px 34px rgba(30,138,120,0.32); }
.sm-btn--primary:active{ transform:translateY(-1px) scale(0.99); }
.sm-btn--ghost{ background:#fff; color:var(--ink,#1A1714); border-color:var(--border,rgba(26,23,20,0.1)); font-size:15px; padding:14px 24px; }
.sm-btn--ghost:hover{ border-color:var(--teal,#79B4BA); color:var(--teal-dark,#4E8A90); transform:translateY(-2px) scale(1.01); }
.sm-btn--onteal{ background:#fff; color:var(--teal-dark,#4E8A90); box-shadow:0 6px 20px rgba(0,0,0,0.14); }
.sm-btn--onteal:hover{ background:var(--cream,#FAF6EF); transform:translateY(-3px) scale(1.02); box-shadow:0 14px 34px rgba(0,0,0,0.18); }
.sm-btn--onteal-ghost{ background:rgba(255,255,255,0.14); color:#fff; border-color:rgba(255,255,255,0.36); font-size:15px; padding:14px 24px; }
.sm-btn--onteal-ghost:hover{ background:rgba(255,255,255,0.24); transform:translateY(-2px) scale(1.01); }
.sm-cta-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:22px; }

/* ── Trust evidence ────────────────────────────────────────────────────────*/
.sm-trust{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:0; padding:0; list-style:none; }
.sm-trust li{ display:flex; align-items:flex-start; gap:7px; font-size:13.5px; font-weight:600; line-height:1.45; color:var(--ink-soft,#4A4540); }
.sm-trust li svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; fill:none; stroke:var(--teal-dark,#4E8A90); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* ── Product mock frame ────────────────────────────────────────────────────
   Shared chrome; each page supplies its own subject-specific interior so the
   three pilots never show the same picture. */
.sm-mock-cradle{ position:relative; width:100%; max-width:470px; margin-left:auto; }
.sm-mock-cradle::before{
  content:''; position:absolute; inset:-26px; z-index:-1; border-radius:44px; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 36%, color-mix(in srgb, var(--sm-accent-soft,#79B4BA) 28%, transparent), transparent 70%);
  filter:blur(30px); animation:sm-halo 7s ease-in-out infinite;
}
@keyframes sm-halo{ 0%,100%{ opacity:.55; } 50%{ opacity:.85; } }
.sm-mock{
  background:#fff; border:1px solid rgba(26,23,20,0.08); border-radius:22px; overflow:hidden;
  box-shadow:0 26px 68px rgba(26,23,20,0.13), 0 4px 16px rgba(26,23,20,0.05);
}
.sm-mock-bar{
  display:flex; align-items:center; gap:9px; padding:12px 16px;
  border-bottom:1px solid var(--border,rgba(26,23,20,0.1)); background:rgba(250,246,239,0.6);
  font-family:'Nunito',sans-serif; font-size:12.5px; font-weight:800; color:var(--ink-soft,#4A4540);
}
.sm-mock-dot{ width:7px; height:7px; border-radius:50%; background:#4ABE7C; flex-shrink:0; }
.sm-mock-bar > .sm-mock-dot{ margin-right:1px; }
/* Tool name first in Nunito 800, its context second in the body face at a
   lighter weight. Two type treatments carry the hierarchy, so the bar needs no
   middot between them. */
.sm-mock-t{ flex-shrink:0; font-family:'Nunito',sans-serif; font-size:12.5px; font-weight:800; color:var(--ink,#1A1714); }
.sm-mock-ctx{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:'Lato',sans-serif; font-size:12px; font-weight:400; color:var(--ink-soft,#4A4540); }
/* No separate Live badge: the status dot beside the name already carries that,
   and dropping the word keeps the right half of the bar clear for a chip. */
.sm-mock-body{ padding:16px; }

/* Chat bubbles, used inside a mock. */
.sm-bub{ max-width:88%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.55; margin-bottom:10px; }
.sm-bub--child{ background:var(--teal,#79B4BA); color:#fff; margin-left:auto; border-bottom-right-radius:5px; }
.sm-bub--tutor{ background:var(--cream,#FAF6EF); border:1px solid var(--border,rgba(26,23,20,0.1)); color:var(--ink-soft,#4A4540); border-bottom-left-radius:5px; }
.sm-bub--note{ background:var(--sm-accent-tint,#E8F5F6); border:1px solid rgba(121,180,186,0.32); color:var(--ink-soft,#4A4540); font-size:12px; border-radius:11px; margin-bottom:0; }

/* Floating chips that break the mock's bounds and give the hero depth. */
.sm-chip{
  position:absolute; z-index:3; display:flex; align-items:flex-start; gap:9px; max-width:210px;
  background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.75); border-radius:13px; padding:8px 11px;
  box-shadow:0 10px 26px rgba(26,23,20,0.1); font-family:'Nunito',sans-serif;
  /* These sit over part of a live tool by design, so they must never take the
     pointer. They are aria-hidden in the markup for the same reason. */
  pointer-events:none;
}
.sm-chip-ic{ width:26px; height:26px; border-radius:8px; margin-top:1px; display:grid; place-items:center; flex-shrink:0; background:var(--sm-accent-tint,#E8F5F6); }
.sm-chip-ic svg{ width:13px; height:13px; fill:none; stroke:var(--sm-accent,#4E8A90); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
/* 9.5px sat below a comfortable reading floor. Both lines move up and the pair
   now sits on a clear two-step scale in two different faces. */
.sm-chip-t{ display:block; font-family:'Nunito',sans-serif; font-size:11.5px; font-weight:800; line-height:1.32; color:var(--ink,#1A1714); overflow-wrap:break-word; }
.sm-chip-s{ display:block; font-family:'Lato',sans-serif; font-size:10.5px; font-weight:400; line-height:1.4; color:var(--ink-soft,#4A4540); overflow-wrap:break-word; }
/* Art direction for the floating cards.

   They must overlap the product to give the composition depth, but the overlap
   has to land on padding or empty canvas, never on controls, annotations or
   feedback text. Each mock is therefore laid out with a deliberate quiet zone,
   and each page picks the pair of anchors that sits over it:

     year-5-maths     tr / br  -> the panel's top and bottom padding
     year-9-science   tl / bl  -> empty sky above the wave, canvas floor below
     year-12-english  tr / br  -> the header's empty right half, the card's foot

   The cards sit mostly outside the mock and bleed into the section gutter, so
   roughly a fifth of each card overlaps the product. */
/* Placement. Each card bites ONE corner of the mock and hangs the rest into the
   gutter, so it reads as an annotation on the product rather than a satellite
   beside it. Two per hero, on opposite diagonal corners, never stacked down one
   edge.

   The bite is expressed with `translate` in percentages of the card itself
   rather than in pixels. These labels differ in length, so the old fixed -44px
   gave a short card a 28% bite and a long one none at all; measured on
   year-4-science it left the card 71% across the product and sitting on the
   step title. A percentage holds the same 15% bite whatever the label runs to.
   `translate` is its own property, applied before `transform`, so the float
   keyframes still compose on top instead of overwriting the placement, which is
   why this is not done with `transform`.

   The right pair bites the mock's VERTICAL edge: 181px of gutter sits outboard
   of the mock at 1440, which comfortably holds the 85% that hangs out.
   The left pair cannot do the same. To its left is the hero copy column, only
   80px away, so a card bleeding 85% of its width leftwards lands on the
   headline. Those two bite the HORIZONTAL edge instead, inset from the left
   corner, which keeps the same corner reading and stays clear of the copy
   entirely. Both directions land the overlap on the mock's 22px corner radius
   and its 12-16px padding, never on the content inside. */
/* Which edges are actually available was measured across all 79 heroes at six
   widths rather than assumed, and the room is very lopsided:

     outboard right gutter   140px at 1440, 380px at 1920
     clear space BELOW mock   44-52px
     clear space ABOVE mock   22-24px
     gap left to copy column  52-80px

   Only the right gutter is generous. Nothing can hang upwards: 22px will not
   hold 85% of a 54px card, and .sm-hero is overflow:hidden, so the attempt is
   clipped rather than merely tight. That rules out any card bleeding above the
   mock, and the left gap is far too narrow for a 150px card to bleed sideways
   without landing on the headline.

   So the two viable bites are the RIGHT edge (horizontal) and the BOTTOM edge
   (vertical), which is exactly one diagonal: top-right plus bottom-left. Both
   are pinned so the card never crosses the mock's top edge or the hero's box.
   The bite is 15% of the card either way, and the card is width-capped below so
   85% of it always fits the measured gutter. */
.sm-chip--tr{ top:16px;   right:0;   left:auto;  bottom:auto; translate:85% 0; animation:sm-float-a 8s ease-in-out infinite; }
.sm-chip--br{ bottom:16px; right:0;  left:auto;  top:auto;    translate:85% 0; animation:sm-float-b 9s ease-in-out infinite; }
.sm-chip--tl{ top:16px;   left:0;    right:auto; bottom:auto; translate:-85% 0; animation:sm-float-a 8s ease-in-out infinite; }
.sm-chip--bl{ bottom:0;   left:28px; right:auto; top:auto;    translate:0 85%; animation:sm-float-b 9s ease-in-out infinite; }
/* Card width is set per anchor, because the two anchors are bounded by
   different things and one figure cannot serve both.

   The top-right card bleeds sideways into a 151px gutter, so its width has to
   stay low: 168px puts 85% of it at 143px, inside that budget.
   The bottom-left card bleeds downwards into 40-52px, so what bounds it is
   HEIGHT, not width. Capping it to 168px as well pushed its longer labels onto
   a third line, made the card taller than the space beneath the mock, and was
   what clipped it at 1920. Given more width it wraps to fewer lines and fits.
   Both still take the same 15% bite, which is what the eye actually reads. */
.sm-chip{ width:168px; max-width:168px; }
.sm-chip--bl{ width:210px; max-width:210px; }
/* Below 1280px the outboard gutter collapses (68px at 1200, 48px at 1024), so
   there is no safe corner left. Per the responsive rule the cards are dropped
   rather than pulled onto the product: they are decoration, and aria-hidden. */
@media (max-width:1279px){
  .sm-chip{ display:none; }
}
@keyframes sm-float-a{ 0%,100%{ transform:translateY(0) rotate(-1.5deg); } 50%{ transform:translateY(-7px) rotate(-1.5deg); } }
@keyframes sm-float-b{ 0%,100%{ transform:translateY(0) rotate(1.5deg); } 50%{ transform:translateY(-6px) rotate(1.5deg); } }

/* ── Premium card + icon tile ──────────────────────────────────────────────*/
.sm-grid{ display:grid; gap:20px; }
.sm-grid--3{ grid-template-columns:repeat(3,1fr); }
.sm-card{
  background:#fff; border:1px solid var(--border,rgba(26,23,20,0.1)); border-radius:20px;
  padding:26px 24px; position:relative;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s cubic-bezier(.22,.61,.36,1), border-color .22s ease;
}
@media (hover:hover){ .sm-card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(26,23,20,0.09); } }
.sm-card h3{ font-family:'Nunito',sans-serif; font-size:17px; font-weight:900; line-height:1.3; color:var(--ink,#1A1714); margin:0 0 8px; text-wrap:balance; }
.sm-card p{ font-size:14.5px; line-height:1.65; color:var(--ink-soft,#4A4540); margin:0; text-wrap:pretty; }
.sm-icon-tile{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px; background:var(--sm-accent-tint,#E8F5F6); }
.sm-icon-tile svg{ width:21px; height:21px; fill:none; stroke:var(--sm-accent,#4E8A90); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── Curriculum coverage ───────────────────────────────────────────────────
   Compact cards with a numbered tile, so coverage scans as a considered
   syllabus rather than a checklist wall. */
.sm-topics{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sm-topic{
  display:flex; align-items:center; gap:13px; background:#fff; border-radius:15px;
  border:1px solid var(--border,rgba(26,23,20,0.1)); padding:15px 17px;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease, box-shadow .22s ease;
}
@media (hover:hover){ .sm-topic:hover{ transform:translateY(-2px); border-color:var(--sm-accent-soft,#79B4BA); box-shadow:0 10px 26px rgba(26,23,20,0.07); } }
.sm-topic-n{
  width:29px; height:29px; border-radius:9px; flex-shrink:0; display:grid; place-items:center;
  background:var(--sm-accent-tint,#E8F5F6); color:var(--sm-accent,#4E8A90);
  font-family:'Nunito',sans-serif; font-size:12.5px; font-weight:900;
}
.sm-topic span{ min-width:0; font-size:14.5px; font-weight:700; line-height:1.4; color:var(--ink,#1A1714); overflow-wrap:break-word; }
.sm-topics-note{ margin-top:22px; max-width:680px; font-size:14px; line-height:1.65; color:var(--ink-soft,#4A4540); text-wrap:pretty; }
.sm-topics-note b{ color:var(--ink,#1A1714); }

/* ── Proof ─────────────────────────────────────────────────────────────────*/
.sm-proof{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.sm-quote{
  position:relative; background:#fff; border:1px solid var(--border,rgba(26,23,20,0.1));
  border-radius:20px; padding:26px 24px 22px; overflow:hidden;
  box-shadow:0 14px 38px -26px rgba(78,138,144,0.34);
}
.sm-quote::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--sm-accent-soft,#79B4BA), var(--teal-mid,#8EC4C9));
}
.sm-stars{ color:#C8913A; font-size:13px; letter-spacing:2px; margin-bottom:11px; }
.sm-stars span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.sm-tag{
  display:inline-block; background:var(--sm-accent-tint,#E8F5F6); color:var(--sm-accent,#4E8A90);
  font-family:'Nunito',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:0.07em;
  text-transform:uppercase; padding:5px 11px; border-radius:8px; margin-bottom:14px;
}
.sm-quote p{ font-size:15px; line-height:1.62; color:var(--ink,#1A1714); margin:0 0 18px; text-wrap:pretty; }
.sm-attr{ display:flex; align-items:center; gap:11px; padding-top:15px; border-top:1px solid var(--border,rgba(26,23,20,0.1)); }
.sm-av{
  width:40px; height:40px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--teal-mid,#8EC4C9), var(--teal-dark,#4E8A90)); color:#fff;
  font-family:'Nunito',sans-serif; font-size:14px; font-weight:800;
}
.sm-attr-n{ display:block; font-style:normal; font-family:'Nunito',sans-serif; font-size:14px; font-weight:800; line-height:1.35; color:var(--ink,#1A1714); }
/* Who said it is trust evidence, not decoration, so it takes --ink-soft
   (9.47:1) rather than --ink-muted, which measures 3.69:1 at this size. */
.sm-attr-d{ display:block; font-size:12px; line-height:1.4; color:var(--ink-soft,#4A4540); }
.sm-proof-more{ margin-top:22px; font-size:14px; }
.sm-proof-more a{ color:var(--teal-dark,#4E8A90); font-weight:700; text-decoration:none; border-bottom:1.5px solid transparent; transition:border-color .22s ease; }
.sm-proof-more a:hover{ border-bottom-color:var(--teal-dark,#4E8A90); }

/* ── Price anchor ──────────────────────────────────────────────────────────*/
.sm-anchor{
  display:flex; align-items:flex-start; gap:14px; background:#fff; border-radius:16px;
  border:1px solid var(--border,rgba(26,23,20,0.1)); border-left:4px solid #C8913A;
  padding:18px 22px; font-size:15px; line-height:1.6; color:var(--ink-soft,#4A4540); margin-top:24px;
}
.sm-anchor b{ color:var(--ink,#1A1714); }
.sm-anchor svg{ width:19px; height:19px; flex-shrink:0; margin-top:3px; fill:none; stroke:#C8913A; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ── FAQ, native details/summary ───────────────────────────────────────────*/
.sm-faq{ display:flex; flex-direction:column; gap:10px; }
.sm-faq details{
  background:#fff; border:1px solid var(--border,rgba(26,23,20,0.1)); border-radius:15px;
  overflow:hidden; transition:border-color .22s ease, box-shadow .22s ease;
}
.sm-faq details[open]{ border-color:var(--sm-accent-soft,#79B4BA); box-shadow:0 12px 30px rgba(26,23,20,0.06); }
.sm-faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; line-height:1.4;
  padding:18px 22px; font-family:'Nunito',sans-serif; font-size:15.5px; font-weight:800;
  color:var(--ink,#1A1714); transition:color .22s ease, background .22s ease;
}
.sm-faq summary::-webkit-details-marker{ display:none; }
.sm-faq summary:hover{ color:var(--sm-accent,#4E8A90); background:rgba(250,246,239,0.7); }
.sm-faq-ic{
  width:26px; height:26px; border-radius:8px; flex-shrink:0; margin-top:-1px; display:grid; place-items:center;
  background:var(--sm-accent-tint,#E8F5F6); color:var(--sm-accent,#4E8A90);
  font-family:'Nunito',sans-serif; font-size:16px; font-weight:900; line-height:1;
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.sm-faq details[open] .sm-faq-ic{ transform:rotate(45deg); }
.sm-faq-a{ padding:0 22px 20px; max-width:66ch; font-size:14.5px; line-height:1.7; color:var(--ink-soft,#4A4540); text-wrap:pretty; }
.sm-faq-a p{ margin:0; }

/* ── Related page cards ────────────────────────────────────────────────────*/
.sm-rel{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.sm-rel-card{
  display:flex; flex-direction:column; background:#fff; border-radius:17px; text-decoration:none;
  border:1px solid var(--border,rgba(26,23,20,0.1)); padding:20px 21px;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .22s ease;
}
@media (hover:hover){ .sm-rel-card:hover{ transform:translateY(-3px); border-color:var(--sm-accent-soft,#79B4BA); box-shadow:0 16px 38px rgba(26,23,20,0.09); } }
.sm-rel-k{ display:block; font-family:'Nunito',sans-serif; font-size:10.5px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft,#4A4540); margin-bottom:9px; }
.sm-rel-t{ display:block; font-family:'Nunito',sans-serif; font-size:16px; font-weight:800; line-height:1.3; color:var(--ink,#1A1714); margin-bottom:6px; }
.sm-rel-d{ display:block; font-size:13.5px; line-height:1.55; color:var(--ink-soft,#4A4540); margin-bottom:14px; }
/* The card title is already the link text, so repeating the word Explore six
   times down the grid added noise and no information. The arrow alone carries
   the affordance. */
.sm-rel-go{ margin-top:auto; display:inline-flex; align-items:center; color:var(--sm-accent,#4E8A90); }
.sm-rel-go svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .26s cubic-bezier(.22,.61,.36,1); }
@media (hover:hover){ .sm-rel-card:hover .sm-rel-go svg{ transform:translateX(4px); } }

/* ── Closing CTA ───────────────────────────────────────────────────────────*/
/* Deeper than --teal on purpose. White on --teal measures 2.32:1, so the
   homepage's flat light-teal closing band fails AA for both its heading and its
   body copy. This gradient runs #47797F to #37656B, where white measures 4.94:1
   and 6.3:1, and reads richer rather than louder. */
.sm-cta{ position:relative; background-color:#3F7178; background-image:linear-gradient(160deg,#47797F,#37656B); padding:82px 0; text-align:center; overflow:hidden; }
.sm-cta::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 120% at 50% 0%, rgba(255,255,255,0.16), transparent 62%);
}
.sm-cta-inner{ position:relative; max-width:660px; margin:0 auto; padding:0 24px; }
.sm-cta h2{ font-family:'Nunito',sans-serif; font-size:clamp(27px,3.4vw,41px); font-weight:900; line-height:1.15; letter-spacing:-0.4px; color:#fff; margin:0 0 14px; text-wrap:balance; }
.sm-cta p{ font-size:16.5px; line-height:1.65; color:#fff; margin:0 0 30px; text-wrap:pretty; }
.sm-cta .sm-cta-row{ justify-content:center; margin-bottom:0; }
.sm-cta-fine{ margin-top:20px; font-size:13px; color:rgba(255,255,255,0.95); justify-content:center; }

/* ── Entrance motion ───────────────────────────────────────────────────────
   Load-time only, CSS-only, on the hero alone. Deliberately no scroll-linked
   reveal: it would need JavaScript on every page and risks late-arriving
   content shifting layout. */
.sm-hero-copy > *{ animation:sm-rise .55s cubic-bezier(.16,1,.3,1) both; }
.sm-hero-copy > *:nth-child(1){ animation-delay:.04s; }
.sm-hero-copy > *:nth-child(2){ animation-delay:.09s; }
.sm-hero-copy > *:nth-child(3){ animation-delay:.14s; }
.sm-hero-copy > *:nth-child(4){ animation-delay:.19s; }
.sm-hero-copy > *:nth-child(5){ animation-delay:.24s; }
.sm-hero-copy > *:nth-child(6){ animation-delay:.29s; }
.sm-hero-visual{ animation:sm-rise .65s cubic-bezier(.16,1,.3,1) .14s both; }
@keyframes sm-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ── Focus ─────────────────────────────────────────────────────────────────*/
.sm-btn:focus-visible, .sm-rel-card:focus-visible, .sm-faq summary:focus-visible, .sm-proof-more a:focus-visible{
  outline:2px solid var(--teal-dark,#4E8A90); outline-offset:3px; border-radius:8px;
}
.sm-cta .sm-btn:focus-visible{ outline-color:#fff; }

/* ── Responsive ────────────────────────────────────────────────────────────*/
@media (max-width:900px){
  .sm-hero-grid{ grid-template-columns:1fr; gap:44px; }
  .sm-hero-copy{ max-width:640px; }
  .sm-hero-lead{ max-width:none; }
  .sm-mock-cradle{ margin:0 auto; max-width:440px; }
  .sm-grid--3, .sm-topics, .sm-rel{ grid-template-columns:repeat(2,1fr); }
  .sm-proof{ grid-template-columns:1fr; }
  .sm-band{ padding:58px 0; }
  .sm-wrap{ padding:0 32px; }
}
@media (max-width:768px){
  .sm-wrap{ padding:0 24px; }
  /* The chips sit outside the mock's box; at this width that would push the
     page wider than the viewport, so they are dropped rather than clipped. */
  .sm-chip{ display:none; }
  .sm-mock-cradle{ max-width:100%; }
}
@media (max-width:560px){
  .sm-grid--3, .sm-topics, .sm-rel{ grid-template-columns:1fr; }
  .sm-band{ padding:46px 0; }
  .sm-hero{ padding:16px 0 50px; }
  .sm-cta{ padding:60px 0; }
  .sm-cta-row{ flex-direction:column; align-items:stretch; }
  .sm-btn{ width:100%; }
  .sm-card{ padding:22px 20px; }
  .sm-quote{ padding:22px 20px 18px; }
  .sm-faq summary{ padding:16px 18px; font-size:15px; }
  .sm-faq-a{ padding:0 18px 18px; }
}

/* ── Reduced motion ────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  .sm-aurora, .sm-mock-cradle::before, .sm-chip{ animation:none; }
  .sm-hero-copy > *, .sm-hero-visual{ animation:none; opacity:1; transform:none; }
  .sm-card, .sm-topic, .sm-rel-card, .sm-btn{ transition:none; }
  .sm-card:hover, .sm-topic:hover, .sm-rel-card:hover, .sm-btn:hover, .sm-btn:active{ transform:none; }
  .sm-rel-card:hover .sm-rel-go svg{ transform:none; }
  .sm-faq-ic{ transition:none; }
}

/* The live graph's 44px slider touch target used to be declared here, scoped to
   .sm-hero, because the component was still duplicated inline across app.html,
   secondary.html, senior.html and interactive-graphs.html. Those pages now load
   the shared live-graph.js, so the target lives in the component and applies
   everywhere the graph is mounted. Nothing graph related belongs in this file. */

/* Hero tool holders, reserved space
   ---------------------------------------------------------------------------
   Both hero mounts fill an empty holder after the page has painted, so on a
   warm cache the hero grows once the panel lands and everything below it jumps.
   The height each panel will take is declared on the holder itself as a custom
   property, because these are different tools of genuinely different heights,
   and it is applied only while the holder is :empty, so the reservation is
   released the instant the real panel arrives and can never pad the mounted
   result. A holder with no property set still gets a sensible default. */
.sm-hero .sm-mock-body > div:empty{ min-height:var(--sm-tool-h,320px); }
@media (max-width:900px){
  .sm-hero .sm-mock-body > div:empty{ min-height:var(--sm-tool-h-md,var(--sm-tool-h,320px)); }
}
@media (max-width:560px){
  .sm-hero .sm-mock-body > div:empty{ min-height:var(--sm-tool-h-sm,var(--sm-tool-h,320px)); }
}

/* Hero tool controls, touch target and focus
   ---------------------------------------------------------------------------
   The mounted panels come from maths-features.js, which sizes its own input and
   button chrome at about 36px. Inside app.html that is lifted to 46-48px by
   subjectmate-premium-theme.css, but that sheet is scoped to .bubble and loaded
   only there, so the identical control renders under the 44px minimum on a
   marketing hero. Lift it here, matching the attribute-selector convention that
   theme already uses, so one tool is one size wherever it appears. The panels
   also set outline:none on a focused input with only a border-colour change to
   replace it, which is too quiet on a cream hero, so restore a real ring. */
.sm-hero [class$="-input"],
.sm-hero [class$="-check"],
.sm-hero [class$="-btn"],
.sm-hero [class$="-move"]{ min-height:44px; }
.sm-hero [class$="-input"]:focus-visible,
.sm-hero [class$="-check"]:focus-visible,
.sm-hero [class$="-btn"]:focus-visible,
.sm-hero [class$="-move"]:focus-visible{
  outline:2px solid var(--teal-dark,#4E8A90);
  outline-offset:2px;
}

/* ── Cinematic hero attachment layer (.sm-fx-) ─────────────────────────────
   The components above assume this file owns the hero markup (.sm-hero,
   .sm-mock-cradle, .sm-hero-visual). The advice, tool and audience pages were
   built earlier and carry their own hero structure, which is not being
   rewritten. This layer therefore adds the same cinematics as decoration only:
   every rule here attaches to a class dropped onto markup that already exists,
   and none of it assumes a particular child structure.

   It deliberately declares NO new keyframes. Drift, halo, float and rise are
   reused from the definitions above, so there is exactly one aurora system in
   the codebase and one place to retune it. */

/* The hero becomes the stacking and clipping context. isolation:isolate is what
   lets the z-index:-1 aurora paint above the hero's own background instead of
   disappearing behind it; overflow:hidden is what guarantees the outward-bleeding
   pills can never widen the document. */
.sm-fx-hero{ position:relative; isolation:isolate; overflow:hidden; }

/* Background texture. A single fine dot grid at very low contrast, sized in rem
   so it does not shimmer against the aurora. ::after is used because two pages
   already own .hero::before. */
.sm-fx-hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(26,23,20,0.05) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
          mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
}
.sm-fx-hero--dark::after{ background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); }

/* Dark heroes: same light, retuned. The teal at 26% reads as grey haze on a near
   black ground, so the accent is lifted and the third pool dropped entirely. */
.sm-fx-hero--dark .sm-aurora{
  filter:blur(14px);
  background:
    radial-gradient(26% 32% at calc(74% + var(--mx,0px)) calc(34% + var(--my,0px)), rgba(143,212,218,0.20), transparent 68%),
    radial-gradient(20% 24% at calc(86% + var(--mx,0px)) calc(26% + var(--my,0px)), rgba(124,58,237,0.20), transparent 72%);
}

/* The visual column. Becomes the positioning parent for the halo and the pills,
   so they anchor to the product rather than to the section. */
.sm-fx-stage{ position:relative; }
.sm-fx-stage::before{
  content:''; position:absolute; inset:-30px; z-index:-1; pointer-events:none; border-radius:44px;
  background:radial-gradient(50% 50% at 50% 40%, color-mix(in srgb, var(--sm-accent-soft,#79B4BA) 26%, transparent), transparent 70%);
  filter:blur(34px); animation:sm-halo 7s ease-in-out infinite;
}
.sm-fx-hero--dark .sm-fx-stage::before{
  background:radial-gradient(50% 50% at 50% 40%, rgba(143,212,218,0.20), transparent 70%);
}

/* Depth and parallax on the product itself. --pty is written by the shared
   pointer listener; at rest it is 0, so this is inert without JavaScript. The
   shadow is a layered pair rather than one large blur: a tight contact shadow
   plus a wide ambient one is what reads as weight instead of haze. */
.sm-fx-mock{
  transform:translate3d(0,var(--pty,0px),0);
  box-shadow:0 2px 8px rgba(26,23,20,0.05), 0 26px 64px rgba(26,23,20,0.13);
  animation:sm-rise .65s cubic-bezier(.16,1,.3,1) .12s both;
}
.sm-fx-hero--dark .sm-fx-mock{ box-shadow:0 2px 8px rgba(0,0,0,0.3), 0 30px 70px rgba(0,0,0,0.45); }
/* Promoted only while a pointer is actually driving it, then released, so these
   do not each hold a compositor layer for the life of the page. */
.sm-fx-mock.sm-fx-live{ will-change:transform; }

/* Hero headline accent. Same treatment .sm-hero h1 .sm-accent already uses, so
   one phrase carries the brand colour and the rest of the heading stays ink.
   --teal-dark measures 3.51-3.92 against the four grounds these heroes use,
   which clears the 3:1 large-text threshold at h1 sizes and nothing smaller;
   it must not be reused on body copy, where it fails. On the two dark heroes it
   would sit at about 1.4, so those invert to the bright tint at 8.56 and up. */
.sm-fx-hero h1 .sm-hl{ color:var(--teal-dark,#4E8A90); }
.sm-fx-hero--dark h1 .sm-hl{ color:#8FD4DA; }

/* Entrance for the copy column, matching .sm-hero-copy above. */
.sm-fx-copy > *{ animation:sm-rise .55s cubic-bezier(.16,1,.3,1) both; }
.sm-fx-copy > *:nth-child(1){ animation-delay:.04s; }
.sm-fx-copy > *:nth-child(2){ animation-delay:.09s; }
.sm-fx-copy > *:nth-child(3){ animation-delay:.14s; }
.sm-fx-copy > *:nth-child(4){ animation-delay:.19s; }
.sm-fx-copy > *:nth-child(5){ animation-delay:.24s; }
.sm-fx-copy > *:nth-child(6){ animation-delay:.29s; }

/* Four of these heroes carry a live tool the visitor can drag. The pills sit
   over part of that surface by design, so they must never take the pointer.
   This is also why they are aria-hidden in the markup and dropped entirely
   below 1100px: content that can disappear at a breakpoint cannot be content
   anyone needs. */
.sm-fx-stage .sm-chip{ pointer-events:none; }

/* Placement: an annotation on the product, not a satellite beside it.
   Each pill is given an explicit width so the overlap can be expressed as a
   fraction of it rather than guessed in pixels: at -0.8 of its own width the
   pill hangs 20% over the mock's corner, which is enough to read as attached
   and little enough to leave the product dominant. Two per hero, on opposite
   corners, so they frame the mock instead of stacking down one edge.
   --sm-fx-pill-w lets the two 1160px-wide heroes use a narrower pill, since
   their gutter is 50px tighter than everyone else's. */
.sm-fx-stage .sm-chip{
  width:var(--sm-fx-pill-w,168px); max-width:none;
}
/* Same reasoning as the year heroes: the bottom card is bounded by the space
   beneath the mock, so it is given width in order to stay short. */
.sm-fx-stage .sm-chip--bl{ width:210px; }
/* The pill hangs off the PRODUCT, not off the grid column that holds it. On
   several of these pages the mock is narrower or shorter than its column (a
   460px dashboard in a 552px cell, a card with a caption beneath it), so a pill
   pinned to the column edge floats in dead space and reads as detached, which is
   the whole problem this pass exists to fix. public-motion.js measures the mock
   inside the stage and publishes the four gaps; these offsets cancel them out so
   the overlap is always against the product itself. Each defaults to 0, so
   without JavaScript this collapses to plain column anchoring. */
/* The offset is expressed with the `translate` property, in percentages of the
   pill itself, so the bite is 22% whether the label runs to one line or three.
   Pixel stand-offs were tried first and could not hold: these labels differ in
   length, so a fixed -46px left a two-line pill 12% over the mock and a one-line
   pill not touching it at all. `translate` is its own property, applied before
   `transform`, so the float keyframes still compose on top instead of
   overwriting the placement, which is why this is not done with transform. */
/* Same measured constraint as the year heroes above: there is 22-24px of clear
   space over a mock and .sm-fx-hero is overflow:hidden, so a card cannot bleed
   upwards at all. The previous -30% did exactly that and was clipped at 1920 on
   every page that used it. The pair now sits 16px inside the mock's top or
   bottom and takes its whole 15% bite on the right edge, where the gutter is. */
.sm-fx-stage .sm-chip--tr{
  top:calc(var(--sm-fx-off-t,0px) + 16px); bottom:auto; left:auto; right:var(--sm-fx-off-r,0px);
  translate:85% 0;
}
.sm-fx-stage .sm-chip--br{
  bottom:calc(var(--sm-fx-off-b,0px) + 16px); top:auto; left:auto; right:var(--sm-fx-off-r,0px);
  translate:85% 0;
}
/* The left-hand pair bites the mock's horizontal edge rather than its side.
   Measurement showed why: a pill bleeding 78% of its width to the LEFT of the
   mock crosses the 52-64px column gap and lands 79px inside the hero copy,
   covering the eyebrow or headline on nine of these twelve pages. Hanging off
   the top or bottom edge keeps the same corner and the same attached read, and
   stays entirely clear of the copy column. --sm-fx-pill-x slides it along that
   edge for a mock whose corner is already occupied by a wordmark. */
.sm-fx-stage .sm-chip--tl{
  top:calc(var(--sm-fx-off-t,0px) + 16px); bottom:auto; right:auto; left:var(--sm-fx-off-l,0px);
  translate:-85% 0;
}
.sm-fx-stage .sm-chip--bl{
  bottom:var(--sm-fx-off-b,0px); top:auto; right:auto; left:var(--sm-fx-off-l,0px);
  translate:var(--sm-fx-pill-x,26px) 85%;
}

/* Below this the gutter no longer holds the outboard 80%, and the pill would
   either be clipped or pushed onto the hero copy. Dropped, which costs nothing:
   it is decoration, and aria-hidden. */
@media (max-width:1439px){
  .sm-fx-stage .sm-chip{ display:none; }
}

/* Pills on a dark hero: the frosted white card would glare, so it inverts. */
.sm-fx-hero--dark .sm-chip{
  background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.18);
  box-shadow:0 10px 30px rgba(0,0,0,0.34);
}
.sm-fx-hero--dark .sm-chip-t{ color:#FAF6EF; }
.sm-fx-hero--dark .sm-chip-ic{ background:rgba(255,255,255,0.12); }
.sm-fx-hero--dark .sm-chip-ic svg{ stroke:#8FD4DA; }

/* Below this width the gutter the pills bleed into no longer exists, so they
   would sit on top of the product. Dropped rather than repositioned. The
   .sm-chip rule above already does this at 768px for the year pages; these
   heroes are narrower and need it sooner. */
@media (max-width:1100px){
  .sm-fx-stage .sm-chip{ display:none; }
  .sm-fx-stage::before{ inset:-16px; filter:blur(26px); }
}

/* Set by public-motion.js while the hero is outside the viewport. A hero
   normally scrolls away for the whole session, so pausing here is most of the
   ambient cost of the effect. */
.sm-fx-idle .sm-aurora,
.sm-fx-idle .sm-fx-stage::before,
.sm-fx-idle .sm-chip{ animation-play-state:paused; }

/* Reduced motion. Extends the block above rather than restating it: the light
   and the depth stay, all movement stops, and parallax is pinned at rest. */
@media (prefers-reduced-motion:reduce){
  .sm-fx-stage::before, .sm-fx-hero .sm-aurora, .sm-fx-stage .sm-chip{ animation:none; }
  .sm-fx-mock{ animation:none; transform:none; }
  .sm-fx-copy > *{ animation:none; opacity:1; transform:none; }
  .sm-fx-hero .sm-aurora{ transition:none; }
}

/* ── Legal documents (.sm-legal-) ──────────────────────────────────────────
   Shared by privacy.html and terms.html. These are trust pages, so the brief
   is the opposite of the marketing sections above: the document is the design.
   Almost nothing here is a card. What the layer actually buys is a comfortable
   measure, a clause rhythm you can scan, and a contents rail, which is exactly
   the part that would otherwise have been written twice and drifted.

   The one deliberate borrow from the marketing language is the hero: it reuses
   .sm-fx-hero and .sm-aurora unchanged, so a parent arriving from the homepage
   meets the same light. No new keyframes, no new tokens, no second aurora.

   Contrast. The document band is white. --teal-dark measures 3.92:1 there,
   which fails AA for body text, so inline links take #42757A (5.21:1 on white,
   4.84:1 on cream), the same colour .sm-eyebrow already uses for the same
   reason. Reading copy is --ink-soft. Teal appears only as a rule, a marker or
   a tinted ground, never as small text and never as the sole signal for state.*/

.sm-legal-hero{ background:var(--cream,#FAF6EF); padding:104px 0 46px; }
.sm-legal-hero h1{
  font-family:'Nunito',sans-serif; font-size:clamp(30px,3.6vw,45px); font-weight:900;
  line-height:1.1; letter-spacing:-0.6px; color:var(--ink,#1A1714); margin:0 0 14px;
  text-wrap:balance;
}
.sm-legal-lede{
  font-size:17px; line-height:1.68; color:var(--ink-soft,#4A4540);
  max-width:600px; margin:0 0 22px; text-wrap:pretty;
}
/* Hero footer row: when the document was last touched, and the way across to
   the other legal page. Both are facts a parent looks for first, so they sit
   above the fold rather than at the bottom of the contents rail. */
.sm-legal-facts{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.sm-legal-stamp{
  display:inline-flex; align-items:center; gap:9px; background:var(--white,#fff);
  border:1px solid var(--border,rgba(26,23,20,0.1)); border-radius:100px;
  padding:8px 16px; font-size:13.5px; font-weight:600; color:var(--ink-soft,#4A4540);
}
.sm-legal-stamp svg{ width:14px; height:14px; flex-shrink:0; fill:none; stroke:#42757A; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.sm-legal-swap{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700;
  color:#42757A; text-decoration:none; border-bottom:1.5px solid transparent;
  transition:border-color .22s ease;
}
.sm-legal-swap:hover{ border-bottom-color:#42757A; }
.sm-legal-swap:focus-visible{ outline:2px solid var(--teal-dark,#4E8A90); outline-offset:4px; border-radius:6px; }
.sm-legal-swap svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ── Documentation layout ──
   Contents rail left, document right. The rail is fixed-width so the document's
   measure does not change with the length of the longest section title. */
.sm-legal-band{ background:var(--white,#fff); padding:56px 0 76px; }
.sm-legal-layout{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:0 60px; align-items:start; }

/* The rail. align-self:start is what lets position:sticky work inside a grid
   item; without it the item stretches to the row height and never scrolls. */
.sm-legal-toc{
  position:sticky; top:88px; align-self:start;
  max-height:calc(100vh - 116px); overflow-y:auto; overscroll-behavior:contain;
}
/* On desktop the disclosure is not a control, only a heading. The summary is
   still a real <summary> in the markup so the same element can collapse on
   small screens; here it is styled flat and its marker removed. */
.sm-legal-toc > summary{
  list-style:none; cursor:default; display:block;
  font-family:'Nunito',sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-soft,#4A4540);
  padding:0 0 12px 12px;
}
.sm-legal-toc > summary::-webkit-details-marker{ display:none; }
.sm-legal-toc-chev{ display:none; }
.sm-legal-toc-nav{ display:flex; flex-direction:column; border-left:1px solid var(--border,rgba(26,23,20,0.1)); }
.sm-legal-toc-nav a{
  display:block; padding:8px 12px; margin-left:-1px;
  border-left:2px solid transparent;
  font-size:13.5px; line-height:1.4; font-weight:600; color:var(--ink-soft,#4A4540);
  text-decoration:none; transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.sm-legal-toc-nav a:hover{ color:var(--ink,#1A1714); border-left-color:var(--teal,#79B4BA); }
/* Current section. Colour alone would be the sole signal, so the weight change
   and the solid left rule carry it too. */
.sm-legal-toc-nav a[aria-current="true"]{
  color:#42757A; font-weight:800;
  border-left-color:#42757A; background:var(--teal-light,#E8F5F6);
  border-radius:0 8px 8px 0;
}
.sm-legal-toc-nav a:focus-visible{ outline:2px solid var(--teal-dark,#4E8A90); outline-offset:-2px; border-radius:6px; }

/* ── The document ──
   Element selectors, scoped to .sm-legal-doc. Legal copy is plain prose and
   plain lists; giving every paragraph a class would be noise for no gain. */
.sm-legal-doc{ max-width:74ch; }
.sm-legal-doc h2{
  font-family:'Nunito',sans-serif; font-size:clamp(19px,2.1vw,23px); font-weight:800;
  line-height:1.28; letter-spacing:-0.2px; color:var(--ink,#1A1714);
  margin:0 0 14px; text-wrap:balance;
  /* Clears the 66px fixed header plus a breathing gap, so an anchored heading
     lands below the bar rather than under it. */
  scroll-margin-top:92px;
}
/* Hairline between clauses. The rule belongs to the heading rather than to a
   wrapper so the document markup stays flat, and :first-of-type is exempt so
   the page does not open on a stray line. */
.sm-legal-doc > h2:not(:first-of-type){
  margin-top:46px; padding-top:38px; border-top:1px solid var(--border,rgba(26,23,20,0.1));
}
.sm-legal-doc h3{
  font-family:'Nunito',sans-serif; font-size:16.5px; font-weight:800; color:var(--ink,#1A1714);
  margin:28px 0 10px; scroll-margin-top:92px;
}
.sm-legal-doc p{
  font-size:16.5px; line-height:1.78; color:var(--ink-soft,#4A4540); margin:0 0 18px;
  text-wrap:pretty;
}
.sm-legal-doc ul,
.sm-legal-doc ol{ margin:0 0 18px; padding-left:24px; }
.sm-legal-doc li{
  font-size:16.5px; line-height:1.75; color:var(--ink-soft,#4A4540);
  margin-bottom:9px; padding-left:4px; text-wrap:pretty;
}
.sm-legal-doc li::marker{ color:var(--teal-dark,#4E8A90); }
.sm-legal-doc strong,
.sm-legal-doc b{ color:var(--ink,#1A1714); font-weight:700; }
/* Underlined by default. On a page whose whole job is to be trusted, a link has
   to be identifiable without relying on colour. */
.sm-legal-doc a{
  color:#42757A; font-weight:700; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1.5px;
  text-decoration-color:rgba(66,117,122,0.4);
  transition:text-decoration-color .18s ease, color .18s ease;
  /* Long addresses must never widen the page on a narrow screen. */
  overflow-wrap:anywhere;
}
.sm-legal-doc a:hover{ color:var(--ink,#1A1714); text-decoration-color:currentColor; }
.sm-legal-doc a:focus-visible{ outline:2px solid var(--teal-dark,#4E8A90); outline-offset:3px; border-radius:4px; }
.sm-legal-doc > :last-child{ margin-bottom:0; }

/* ── Notices ──
   The only containers in the document, and used sparingly: a summary of what
   the clause means, or a way to reach a human. Everything else is typeset. */
.sm-note{
  background:var(--cream,#FAF6EF); border:1px solid var(--border,rgba(26,23,20,0.1));
  border-left:3px solid var(--teal,#79B4BA); border-radius:0 14px 14px 0;
  padding:20px 24px; margin:0 0 32px;
}
.sm-note--key{ background:var(--teal-light,#E8F5F6); border-color:rgba(121,180,186,0.42); border-left-color:#42757A; }
.sm-note--contact{ border-left-color:#C8913A; }
.sm-note-t{
  display:block; font-family:'Nunito',sans-serif; font-size:11.5px; font-weight:800;
  letter-spacing:0.12em; text-transform:uppercase; color:#42757A; margin-bottom:9px;
}
.sm-note--contact .sm-note-t{ color:#8A6320; }
.sm-legal-doc .sm-note p{ font-size:15.5px; line-height:1.7; margin:0; }
.sm-legal-doc .sm-note p + p{ margin-top:12px; }

/* ── Responsive ──
   Below 900px the rail cannot sit beside the document without stealing measure
   from it, so it becomes a disclosure above the text instead of being squeezed.
   legal-toc.js closes it at these widths; with JavaScript off it stays open,
   which is still usable, just longer. */
@media (max-width:900px){
  .sm-legal-hero{ padding:96px 0 38px; }
  .sm-legal-band{ padding:0 0 60px; }
  .sm-legal-layout{ grid-template-columns:minmax(0,1fr); gap:0; }
  .sm-legal-toc{
    position:static; max-height:none; overflow:visible;
    background:var(--cream,#FAF6EF); border:1px solid var(--border,rgba(26,23,20,0.1));
    border-radius:16px; margin:28px 0 34px;
  }
  .sm-legal-toc > summary{
    cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 20px; min-height:48px; color:var(--ink,#1A1714); font-size:12px;
  }
  .sm-legal-toc > summary:focus-visible{ outline:2px solid var(--teal-dark,#4E8A90); outline-offset:-2px; border-radius:16px; }
  .sm-legal-toc-chev{
    display:block; width:16px; height:16px; flex-shrink:0; fill:none; stroke:var(--ink-soft,#4A4540);
    stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
    transition:transform .26s cubic-bezier(.22,.61,.36,1);
  }
  .sm-legal-toc[open] .sm-legal-toc-chev{ transform:rotate(180deg); }
  .sm-legal-toc-nav{ border-left:none; padding:0 12px 12px; }
  .sm-legal-toc-nav a{ padding:11px 12px; border-left:none; border-radius:10px; min-height:44px; }
  .sm-legal-toc-nav a:hover{ background:var(--white,#fff); }
  /* Scrollspy would fight the reader on a page with no visible rail. */
  .sm-legal-toc-nav a[aria-current="true"]{ background:var(--teal-light,#E8F5F6); border-left-color:transparent; border-radius:10px; }
  .sm-legal-doc{ max-width:none; }
}
@media (max-width:560px){
  .sm-legal-hero{ padding:88px 0 32px; }
  .sm-legal-doc p, .sm-legal-doc li{ font-size:16px; }
  .sm-legal-doc > h2:not(:first-of-type){ margin-top:38px; padding-top:30px; }
  .sm-note{ padding:18px 20px; }
  .sm-legal-facts{ gap:10px 12px; }
}
@media (prefers-reduced-motion:reduce){
  .sm-legal-toc-chev, .sm-legal-toc-nav a, .sm-legal-doc a, .sm-legal-swap{ transition:none; }
}