/**
 * Surf Shack — marketing visual language
 *
 * SYSTEM: Creative. Values taken from the GENERATED table in design-playbook.md
 * (§ "BEGIN GENERATED: systems"), which is authoritative over design-systems.md —
 * that file's hand-written numbers had already drifted once.
 *
 *   Section padding      80–152px fluid
 *   Body                 18px
 *   Interior scale       18 · 27 · 41 · 62   (ratio 1.5)
 *   Hero headline        84px
 *   Measure              65ch
 *   Cards per row        3, with photos
 *   Card photo ratio     1.50  (3:2)
 *   Two-column photo     1:1
 *   Hero text            left
 *   Ground               pure white
 *   Recessed             NONE — "Creative uses no Recessed at all. With its padding
 *                        and a 1.5 scale, whitespace already does that job and a tint
 *                        would be noise."
 *   Statements / page    1
 *   Photographic / page  2
 *   Mid-page band        duo — photograph + dark block
 *   Closing section      flush to the section above
 *
 * BUILD FAILURES this file exists to prevent (playbook §7):
 *   · an interior page opening with a full hero rather than a title band
 *   · more than one Statement, or two adjacent Recessed, on any page
 *   · a Menu page on any surface but Ground
 *
 * SURF SHACK HOUSE RULES — deliberate local additions, not global kit changes:
 *   1. A photographic band must carry an action. No CTA, no band.
 *   2. The Statement band is loud and separated by a wave. On-brand here only.
 *   3. Activity colour coding is fixed:
 *         Open Flow  = orange     Guided Flow = teal
 *         Spa        = purple     Volleyball  = yellow
 *      Volleyball may vary in value but never leaves the yellow family.
 *   4. No full-width row with a single column. A lone list gets a photograph.
 *   5. 17px type floor everywhere, including eyebrows and buttons.
 *   6. CONSECUTIVE IMAGE/TEXT ROWS ALTERNATE — splits and duos together, as one
 *      sequence. A page must never run image/text and then image/text again; the
 *      second reads as a repeat of the first and the eye stops on it. Use
 *      `.ssm-split--flip` / `.ssm-duo--flip` on every other row, so the page goes
 *      image/text, text/image, image/text. Nick, 15 Aug. Measured by
 *      tools/styleaudit.js, which prints the per-page sequence as F/T and fails
 *      on any repeat, so this is checked rather than remembered.
 *
 * @package SurfShack\Core
 */

.ssm{
  /* Brand */
  --brand:#52A3A4; --accent:#F59E57;
  /* Activity coding — one hue each, never crossed.
   *
   * Each activity carries THREE values of the same hue, because one value cannot
   * do every job at a readable contrast. Measured, not guessed:
   *   white on #F59E57 = 2.12:1   white on #D8A81B = 2.20:1
   *   white on #52A3A4 = 2.94:1   white on #8B72B8 = 4.04:1
   * All four failed WCAG AA. The `-btn` value is the fill that carries a label;
   * the `-ink` value is the same hue dark enough to be read on white.
   *
   * REVISED 15 Aug, Nick: "orange/coral buttons should have white text." Revision 3 had
   * solved orange by keeping it bright and putting DARK ink on it. White text is the
   * house style, so the fill moves instead: --act-open-btn is #C25700, the same 27deg
   * hue dropped in value until white clears AA at the 17px button size (4.51:1, measured;
   * white on #F59E57 was 2.12:1). Orange is now the only activity whose button fill
   * differs from its coding hue, which is the price of white text on a light hue.
   * Volleyball yellow is deliberately NOT changed and keeps its dark ink.
   * Different values of one hue is exactly what Nick allowed for volleyball;
   * it is applied to every activity here for the same reason. */
  --act-open:#F59E57;   --act-open-btn:#C25700; --act-open-btn-hover:#B35000; --act-open-ink:#B85E10;
  --act-guided:#52A3A4; --act-guided-btn:#3E8180; --act-guided-ink:#2C7B7A;
  --act-spa:#8B72B8;    --act-spa-btn:#7C60AE;  --act-spa-ink:#6B4F9E;
  --act-vb:#D8A81B;     --act-vb-btn:#D8A81B;   --act-vb-ink:#8A6B10;
  /* Two more codes, for things that are not activities: gift cards and wave
     rentals. Same three-value discipline, same 4.6:1 floor on white. */
  --act-gift:#3AA76D;   --act-gift-btn:#2E8456;  --act-gift-ink:#2E8556;
  --act-rental:#3E8ECC; --act-rental-btn:#2F7AB3; --act-rental-ink:#2A6FA8;
  /* Icon-badge tints. Each is its own hue, light enough that the matching -ink
     glyph clears 3:1, the WCAG threshold for graphics and for bold text at this
     size. */
  --tint-guided:#CFE7E7; --tint-open:#EFD9C8; --tint-spa:#D8D0E7;
  --tint-vb:#EFE5C8;     --tint-gift:#CAEDDA;  --tint-rental:#C8DEEF;

  --ink:#1F3E4A; --ink-muted:#5A7482; --reversed:#fff;
  --ground:#FFFFFF;                 /* Creative: pure white */
  --dark:#16323A;                   /* the duo's dark block */
  --hairline:#E2ECEC;
  --statement:#30807F;   /* loud and on-brand, and the lightest teal that clears
                          4.5:1 against white text (measured 4.65:1). #3FA9A8
                          was louder still but sat at 2.82:1, unreadable. */
  --shadow-sm:0 1px 2px rgba(15,29,27,.04), 0 2px 6px rgba(15,29,27,.05);
  --shadow-md:0 2px 4px rgba(15,29,27,.05), 0 8px 22px rgba(15,29,27,.08);

  --pad:clamp(80px,8vw,152px);
  --gutter:clamp(20px,5vw,48px);
  --radius:4px;
  --grid:1200px; --measure:65ch;
  --tight:8px; --snug:16px; --loose:32px; --block:64px;
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.16s;

  font-family:'League Spartan', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:18px; line-height:1.65; color:var(--ink);
  overflow-x:clip;
}
@media (prefers-reduced-motion: reduce){ .ssm{ --dur:.01s; } }

.ssm *,.ssm *::before,.ssm *::after{ box-sizing:border-box; }
.ssm h1,.ssm h2,.ssm h3,.ssm h4,
.ssm p,.ssm li,.ssm a,.ssm button,.ssm summary,.ssm small,.ssm dt,.ssm dd{ font-family:inherit; }
.ssm p,.ssm li,.ssm h1,.ssm h2,.ssm h3,.ssm h4{ text-wrap:pretty; }

/* Interior scale 18 · 27 · 41 · 62. Hero headline is its own size (84px) and is
   set on the hero, not here. 17px is the hard floor for every piece of type. */
.ssm h1,.ssm h2,.ssm h3,.ssm h4{
  margin:0; line-height:1.12; font-weight:700; letter-spacing:-.015em; color:inherit;
}
.ssm h1{ font-size:clamp(38px,5.2vw,62px); }
.ssm h2{ font-size:clamp(29px,3.6vw,41px); }
.ssm h3{ font-size:27px; line-height:1.25; }
.ssm h4{ font-size:22px; }
.ssm p{ margin:0 0 var(--snug); font-size:18px; }
.ssm p:last-child{ margin-bottom:0; }
.ssm img{ max-width:100%; height:auto; display:block; }
.ssm p a,.ssm li a,.ssm-q-a a{ color:var(--act-guided-ink); }

.ssm-eyebrow{
  display:block; font-size:17px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:var(--tight);
}

/* ==========================================================================
   Bands
   ========================================================================== */
/* Full width, no break-out hack: elementor_header_footer drops the_content
   straight into <body>, so .ssm already spans the content width. */
.ssm-band{ width:100%; max-width:100%; padding:var(--pad) var(--gutter); }
.ssm-in{ max-width:var(--grid); margin:0 auto; }
.ssm-band--ground{ background:var(--ground); }

/* ==========================================================================
   Photographic bands
   --------------------------------------------------------------------------
   THE OPENING HERO, home page only, sits at the BOTTOM at 78vh. It is the
   tallest thing on the site and the only photograph with room to be one.

   THE INTERIOR TITLE BAND is ~30vh and CENTERED. Same treatment, full-bleed
   image, scrim, reversed text, and deliberately not the same height. Height is
   what makes the opening hero the opening hero. Someone at /about already knows
   where they are, and a full-height photograph delays the thing they came for.
   Borrow the language, not the drama.
   ========================================================================== */
.ssm-band--photo{
  position:relative; display:flex; align-items:center; min-height:30vh;
  background-color:#5E9AA0; background-image:var(--ssm-shot,none);
  background-size:cover; background-position:center; color:var(--reversed);
}
/* SCRIM RE-CUT 15 Aug, from the site-wide sweep. The first version faded UPWARD —
 * .68 at the bottom, .34 at 45%, .05 at 80% — which protected the bottom edge and left
 * the middle almost bare. Measured where the text actually sits: 26%-74% of the band,
 * vertically centred, on every page checked. So the strong part was in the wrong place.
 *
 * Before: white 17-18px copy measured 3.18:1 against the #5E9AA0 fallback, and nothing
 * at all could be guaranteed where the photograph loaded. 82 instances, 12 pages.
 *
 * Now a plateau across 22%-78%, so the text is entirely inside it, with the top and
 * bottom left light so the photograph still reads as a photograph. .66 was chosen
 * against the WORST case rather than the likely one -- a blown-out white area of the
 * image:
 *     over blown white  #58656B  white text   6.02
 *     over mid grey     #38444B  white text  10.02
 *     over sky blue     #2F4E61  white text   8.81
 *     over the fallback #21424B  white text  10.79
 * Floor 6.02 against a requirement of 4.5, so the band passes for any photograph
 * anyone drops in later -- which is the whole reason to solve it with a scrim rather
 * than by darkening the fallback colour.
 *
 * Ink rather than pure black: #02151F is the site's dark ground, so the scrim reads as
 * the brand dimming the photo instead of a grey wash over it. */
.ssm-band--photo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(2,21,31,.38) 0%,
    rgba(2,21,31,.66) 22%,
    rgba(2,21,31,.66) 78%,
    rgba(2,21,31,.38) 100%);
}
.ssm-band--photo > .ssm-in{ position:relative; z-index:1; width:100%; }
.ssm-band--photo h1,.ssm-band--photo h2,.ssm-band--photo h3{ color:var(--reversed); }
.ssm-band--photo p{ color:rgba(255,255,255,.94); }
.ssm-band--photo .ssm-eyebrow{ color:rgba(255,255,255,.94); }
/* A ghost button over a photograph cannot rely on the photograph. The scrim
   handles the headline, but a 2px outline sitting on an unknown bright area is
   the one element that can lose its edge, so it carries its own backdrop. */
.ssm-band--photo a.ssm-btn--ghost{ background:rgba(0,0,0,.30); backdrop-filter:blur(2px); }

/* Home only. */
.ssm-hero--full.ssm-band--photo{ align-items:flex-end; min-height:78vh; }
.ssm-hero--full h1{ font-size:clamp(42px,7vw,84px); max-width:15ch; }
.ssm-hero h1{ margin-bottom:var(--snug); max-width:18ch; }
.ssm-lede{ font-size:21px; max-width:48ch; margin:0 0 var(--loose); }

/* The quiet title band, for interior pages with no photograph of their own.
   Invariant: no photograph, no photographic band, we do not reach for stock. */
.ssm-hero--quiet{
  background:var(--ground); border-bottom:1px solid var(--hairline);
  min-height:30vh; display:flex; align-items:center;
}
/* A flex child does not stretch across the main axis, so .ssm-in was shrinking
   to fit its text and then centring itself, the quiet hero sat indented while
   every photographic hero sat flush left. Both are the same band; both must
   align identically. */
.ssm-hero--quiet > .ssm-in,
.ssm-band--photo > .ssm-in{ width:100%; }

/* ==========================================================================
   Statement, one per page, loud, wave-separated (Surf Shack house rule)
   ========================================================================== */
.ssm-band--statement{
  position:relative; background:var(--statement); color:#fff; text-align:center;
  /* No top margin. The wave overlays the section ABOVE rather than sitting in a
     reserved white gap, otherwise a dark band followed by a statement shows a
     white stripe between them. The closing section is flush, per Creative. */
  margin-top:0;
}
.ssm-band--statement h2,.ssm-band--statement h3{ color:#fff; }
.ssm-band--statement h2{ max-width:20ch; margin:0 auto var(--snug); }
.ssm-band--statement p{ color:rgba(255,255,255,.92); max-width:46ch; margin:0 auto var(--loose); }
.ssm-band--statement .ssm-eyebrow{ color:rgba(255,255,255,.8); }
/* Buttons centre with the rest of the band. They were left-aligned because
   .ssm-actions is a flex row and text-align does not reach flex children. */
.ssm-band--statement .ssm-actions{ justify-content:center; }

/* The wave.
 *
 * This is ELEMENTOR'S OWN shape divider — assets/shapes/waves.svg, the same file
 * the Elementor-built pages use — rather than a path I drew. One wave shape on
 * the site, maintained by someone else.
 *
 * Used as a mask so it takes the band's own colour and can never drift out of
 * sync with it. Flipped with scaleY(-1) because the file fills its TOP half, and
 * here the solid edge must meet the statement below. Degrades to no divider if
 * Elementor is ever removed. */
.ssm-band--statement::before{
  content:''; position:absolute; left:0; right:0; top:0; height:64px; z-index:2;
  transform:translateY(-100%) scaleY(-1); background:var(--statement); pointer-events:none;
  -webkit-mask:var(--ssm-wave) no-repeat bottom / 100% 100%;
          mask:var(--ssm-wave) no-repeat bottom / 100% 100%;
}
.ssm{ --ssm-wave:url("/wp-content/plugins/elementor/assets/shapes/waves.svg"); }

/* ==========================================================================
   Buttons
   ========================================================================== */
/* Every rule carries the `a` type selector so it outranks any theme link
   colour. `.ssm a` alone (0,1,1) once beat `.ssm-btn` (0,1,0) and every brand
   button rendered teal text on a teal fill. */
.ssm a.ssm-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:12px 32px; border-radius:var(--radius);
  font-size:17px; font-weight:600; line-height:1.2; text-decoration:none;
  background:var(--accent); color:#fff; border:2px solid var(--accent);
  /* background-color and border-color joined `filter` on 15 Aug: the accent button's
     hover became a colour swap rather than a brightness change, and a swap with no
     transition listed for it simply snapped. */
  transition:filter var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Hover only brightens. It must NOT force a colour: the statement's button is
   white with teal text, and `color:#fff` on hover turned the label invisible. */
.ssm a.ssm-btn:hover,.ssm a.ssm-btn:focus-visible{ filter:brightness(1.06); }
/* Orange and yellow are too light to carry white text (2.12:1 and 2.20:1), so
   they carry INK instead and keep their bright fill. Teal and purple keep white
   text on a darker value of the same hue. */
.ssm a.ssm-btn--brand{ background:var(--act-guided-btn); border-color:var(--act-guided-btn); color:#fff; }
.ssm a.ssm-btn--accent{ background:var(--act-open-btn); border-color:var(--act-open-btn); color:#fff; }
/* Orange hovers by DEEPENING, not by brightening. The shared brightness(1.06) hover
   lightens the fill, which on an orange carrying white text walks the contrast the
   wrong way; and darkening any further than this desaturates it toward brown. #B35000
   holds the saturation and measures 5.17:1 under white. Nick, 15 Aug. */
.ssm a.ssm-btn--accent:hover,.ssm a.ssm-btn--accent:focus-visible{
  background:var(--act-open-btn-hover); border-color:var(--act-open-btn-hover); filter:none;
}
.ssm a.ssm-btn--spa{ background:var(--act-spa-btn); border-color:var(--act-spa-btn); color:#fff; }
.ssm a.ssm-btn--vb{ background:var(--act-vb-btn); border-color:var(--act-vb-btn); color:var(--ink); }
.ssm a.ssm-btn--gift{ background:var(--act-gift-btn); border-color:var(--act-gift-btn); color:#fff; }
.ssm a.ssm-btn--rental{ background:var(--act-rental-btn); border-color:var(--act-rental-btn); color:#fff; }
.ssm a.ssm-btn--ghost{ background:transparent; color:var(--act-guided-ink); border-color:var(--act-guided-ink); }
.ssm a.ssm-btn--ghost:hover{ background:var(--act-guided-btn); color:#fff; filter:none; }
.ssm-band--photo a.ssm-btn--ghost,
.ssm-band--statement a.ssm-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.8); }
.ssm-band--photo a.ssm-btn--ghost:hover,
.ssm-band--statement a.ssm-btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }
.ssm-band--statement a.ssm-btn{ background:#fff; color:var(--statement); border-color:#fff; }
.ssm-band--statement a.ssm-btn:hover{ background:#fff; color:var(--statement); filter:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.35); }
.ssm-duo-block a.ssm-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.8); }
.ssm-duo-block a.ssm-btn--ghost:hover{ background:#fff; color:var(--ink); }
.ssm a.ssm-btn--sm{ min-height:44px; padding:10px 22px; font-size:17px; }
.ssm-actions{ display:flex; flex-wrap:wrap; gap:var(--snug); align-items:center; }

/* ==========================================================================
   Duo, the Creative mid-page band: photograph + dark block.
   Also the fix for a lone list column: a full-width row never carries one
   column. Pair it with a photograph.
   Two-column photo ratio is 1:1.
   ========================================================================== */
.ssm-duo{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:0; }
.ssm-duo--gap{ gap:clamp(var(--loose),5vw,var(--block)); align-items:center; }
.ssm-duo--flip .ssm-duo-fig{ order:2; }
.ssm-duo-fig{
  aspect-ratio:1/1; background-color:#9AD1CE; background-size:cover;
  background-position:center; background-image:var(--ssm-shot,none);
  /* These two lines stop the figure overflowing the page, and both are needed.
   *
   * The duo is `align-items:stretch`, so the figure's HEIGHT is stretched to the row.
   * With `aspect-ratio:1/1` and an auto width, the browser then derives the WIDTH from
   * that stretched height — so a text block taller than half the container makes the
   * square figure wider than its own column. Measured on /rewards-program/ at 768px:
   * the figure computed 793px inside a 768px viewport.
   *
   * `width:100%` pins the width to the track so the ratio can no longer drive it.
   * `min-width:0` is the other half: `1fr` is `minmax(auto,1fr)`, so the oversized
   * figure had also inflated its own track — the columns had skewed to 504/264 instead
   * of 384/384.
   *
   * It only ever showed on pages whose duo text is long, which is why sixteen pages
   * shipped without it. `background-size:cover` means the visible result is unchanged
   * wherever the bug was not firing — verified across every duo page at nine widths. */
  min-width:0; width:100%;
}
.ssm-duo--gap .ssm-duo-fig{ border-radius:var(--radius); }
.ssm-duo-block{
  background:var(--dark); color:#fff;
  padding:clamp(var(--loose),4vw,var(--block));
  display:flex; flex-direction:column; justify-content:center;
}
.ssm-duo-block h2,.ssm-duo-block h3{ color:#fff; }
.ssm-duo-block p{ color:rgba(255,255,255,.86); }
.ssm-duo-block .ssm-eyebrow{ color:rgba(255,255,255,.72); }
.ssm-duo-block .ssm-ticks li::before{ color:#fff; }
/* The light variant, for list-plus-photograph pairs on Ground. */
.ssm-duo-plain{ display:flex; flex-direction:column; justify-content:center; }
.ssm-duo h2,.ssm-duo-plain h2{ margin-bottom:var(--tight); }
.ssm-duo-plain p{ color:var(--ink-muted); max-width:46ch; }

/* ==========================================================================
   SPLIT, a photograph beside text, inside the measure.

   NOT a duo, and the difference is the whole point. Restored 15 Aug after I built
   the front page's welcome row out of duo parts and Nick corrected it.

   | | SPLIT | DUO |
   |---|---|---|
   | width      | inside `.ssm-in`, boxed to the grid | FULL BLEED, edge to edge |
   | gap        | `--block` (64px) between the halves | none, the halves meet |
   | alignment  | `center` | `stretch`, both halves full height |
   | figure     | 4:3, rounded | 1:1, square to the edges |
   | text sits on | the band's own surface | a DARK block |
   | it is      | quiet, editorial, explains something | loud, structural, a chapter |

   A duo is a slab that interrupts the page. A split is a paragraph with a picture
   next to it. Reaching for `.ssm-duo--gap` because it was the class that existed
   gave the welcome row a square stretched photograph hard against its text, when
   what it needed was a rounded 4:3 photograph with air around it.

   Faithful to `.mk-split` in docs/previews/surf-shack-product.html, where the split
   is used twice and alternates, the approved reference for this construct.
   ========================================================================== */
.ssm-split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--block); align-items:center; }
.ssm-split--flip .ssm-split-fig{ order:2; }
.ssm-split-fig{
  aspect-ratio:4/3; border-radius:var(--radius);
  background-color:#9AD1CE; background-size:cover; background-position:center;
  background-image:var(--ssm-shot,none);
  /* `align-items:center` means the figure is never stretched, so the duo's
     ratio-drives-width bug cannot arise here. `min-width:0` is kept anyway, because
     `1fr` is `minmax(auto,1fr)` and a wide image should never inflate its own track. */
  min-width:0; width:100%;
}
.ssm-split h2{ margin-bottom:var(--tight); }
.ssm-split p{ color:var(--ink-muted); max-width:44ch; margin:0 0 var(--snug); }
/* The text half gets its own inset. Without it the copy runs from the page edge
   straight to the gap, and a column of type with air on neither side reads as
   overflow rather than as a column. Scales with the viewport so it stays in
   proportion to the 64px gap beside it. The bare child is styled as well as the
   explicit class, so a split authored the way the preview writes it still works. */
.ssm-split > .ssm-split-body,
.ssm-split > :not(.ssm-split-fig){ padding-inline:clamp(var(--loose),4vw,var(--block)); }
@media (max-width:640px){
  /* One column now, and the band's own padding is already doing this job. Doubling
     up would leave the text in a narrow gutter. */
  .ssm-split > .ssm-split-body,
  .ssm-split > :not(.ssm-split-fig){ padding-inline:0; }
}
@media (max-width:860px){
  .ssm-split{ gap:var(--loose); }
}
@media (max-width:640px){
  /* One column, and the flip resets: on a phone the photograph always leads, whatever
     side it takes on a desktop. Reading order beats alternation at this width. */
  .ssm-split{ grid-template-columns:1fr; gap:var(--loose); }
  .ssm-split--flip .ssm-split-fig{ order:0; }
}

/* ==========================================================================
   Cards, 3 per row, photo ratio 1.5. No hover lift: a card is not a link,
   the button inside it is.
   ========================================================================== */
.ssm-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--snug); }
.ssm-cards--2{ grid-template-columns:repeat(2,1fr); }
.ssm-cards--4{ grid-template-columns:repeat(4,1fr); }
.ssm-card{
  background:var(--ground); border:1px solid var(--hairline); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.ssm-shot{
  aspect-ratio:3/2; background-color:#8FCAC8;
  background-size:cover; background-position:center; background-image:var(--ssm-shot,none);
}
/* Activity tones. Yellow stays yellow; these are values of one hue, not hues. */
.ssm-shot--open{ background-color:var(--act-open-soft); }
.ssm-shot--guided{ background-color:var(--act-guided-soft); }
.ssm-shot--spa{ background-color:var(--act-spa-soft); }
.ssm-shot--vb{ background-color:var(--act-vb-soft); }
.ssm-card--open{ border-top:3px solid var(--act-open); }
.ssm-card--guided{ border-top:3px solid var(--act-guided); }
.ssm-card--spa{ border-top:3px solid var(--act-spa); }
.ssm-card--vb{ border-top:3px solid var(--act-vb); }
.ssm-card--gift{ border-top:3px solid var(--act-gift); }
.ssm-card--rental{ border-top:3px solid var(--act-rental); }
/* Icon and number badges.
 *
 * An informational card is scanned, not read. A glyph or a step number gives the
 * eye something to land on before the words. Numbers are for sequences; icons are
 * for parallel things.
 *
 * The badge tint and its glyph clear 3:1 — the WCAG threshold for graphics, and
 * for bold text at 20px, which is what a step number is. */
.ssm-badge{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--tint-guided); color:var(--act-guided-ink);
  margin-bottom:var(--tight);
}
.ssm-badge svg{ width:24px; height:24px; display:block; }
.ssm-badge--num{ font-weight:800; font-size:20px; letter-spacing:-.02em; }
.ssm-card--open .ssm-badge{ background:var(--tint-open); color:var(--act-open-ink); }
.ssm-card--guided .ssm-badge{ background:var(--tint-guided); color:var(--act-guided-ink); }
.ssm-card--spa .ssm-badge{ background:var(--tint-spa); color:var(--act-spa-ink); }
.ssm-card--vb .ssm-badge{ background:var(--tint-vb); color:var(--act-vb-ink); }
.ssm-card--gift .ssm-badge{ background:var(--tint-gift); color:var(--act-gift-ink); }
.ssm-card--rental .ssm-badge{ background:var(--tint-rental); color:var(--act-rental-ink); }

.ssm-card-b{ padding:var(--loose); display:flex; flex-direction:column; gap:var(--tight); flex:1; }
.ssm-card-b p{ color:var(--ink-muted); flex:1; margin:0; font-size:17px; }
.ssm-price{ font-weight:800; font-size:27px; color:var(--act-guided-ink); letter-spacing:-.015em; }
.ssm-price--open{ color:var(--act-open-ink); }
.ssm-price--guided{ color:var(--act-guided-ink); }
.ssm-price--spa{ color:var(--act-spa-ink); }
.ssm-price--vb{ color:var(--act-vb-ink); }
/* REMOVED 15 Aug — .ssm-price--gift and .ssm-price--rental. The card variants
   .ssm-card--gift and .ssm-card--rental ARE in use; their price variants never were.
   Verified absent from: every element rendered across 45 crawled pages at two widths,
   all served HTML/inline-JS/JS, all `_elementor_data` and post_content in the database,
   and all 25 plugin PHP modules. Re-add the one line if a gift or rental card ever
   shows a price, the tokens --act-gift-ink and --act-rental-ink are still declared. */
.ssm-price small{ display:block; font-weight:600; font-size:17px; color:var(--ink-muted); letter-spacing:0; }
.ssm-card-b .ssm-btn{ align-self:flex-start; margin-top:var(--snug); }

/* ==========================================================================
   Priced lists, menus and anything else that is a list of things with prices.
   NOT cards. A menu item is a line, not an object.
   ========================================================================== */
.ssm-menu{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--block); }
.ssm-menu-sec{ break-inside:avoid; margin-bottom:var(--loose); }
.ssm-menu-sec h3{ margin-bottom:var(--snug); padding-bottom:var(--tight); border-bottom:2px solid var(--hairline); }
.ssm-item{ display:grid; grid-template-columns:1fr auto; gap:var(--snug); padding:var(--tight) 0; align-items:baseline; }
.ssm-item + .ssm-item{ border-top:1px solid var(--hairline); }
.ssm-item-n{ font-weight:600; font-size:18px; }
.ssm-item-d{ grid-column:1/-1; font-size:17px; color:var(--ink-muted); margin:2px 0 0; }
.ssm-item-p{ font-weight:800; font-size:18px; color:var(--act-guided-ink); white-space:nowrap; }
.ssm-note{ font-size:17px; color:var(--ink-muted); margin-top:var(--snug); }

/* ==========================================================================
   Lists, prose, section heads
   ========================================================================== */
.ssm-ticks{ list-style:none; padding:0; margin:0 0 var(--snug); font-size:18px; }
.ssm-ticks li{ padding-left:30px; position:relative; margin-bottom:var(--tight); }
.ssm-ticks li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--act-guided-ink); font-weight:800; }
.ssm-band--photo .ssm-ticks li::before{ color:#fff; }

.ssm-prose{ max-width:var(--measure); }
.ssm-prose p{ font-size:21px; }
.ssm-head{ margin-bottom:var(--loose); }
.ssm-head p{ color:var(--ink-muted); max-width:52ch; margin:var(--tight) 0 0; font-size:21px; }
/* REMOVED 15 Aug — .ssm-sechead, .ssm-sechead .ssm-eyebrow and .ssm-sechead-r: a
   section-header-with-a-right-hand-link pattern that no page, template or module has
   ever used. Same four-gate check as above. `.ssm-head` is the pattern that survived
   and is used throughout; this was the road not taken. */

/* ==========================================================================
   FAQ, native disclosure, no JS
   ========================================================================== */
/* The FAQ sits centred, in a card, with generous vertical padding. On a page of
   full-width bands a bare list of questions floating left reads as leftovers. */
.ssm-band--faq .ssm-head{ text-align:center; }
.ssm-band--faq .ssm-head p{ margin-inline:auto; }
.ssm-faq{
  max-width:820px; margin:0 auto;
  background:var(--ground); border:1px solid var(--hairline); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(var(--loose),4vw,var(--block)) clamp(var(--snug),3vw,var(--loose));
}
.ssm-q{ border-bottom:1px solid var(--hairline); padding:var(--snug) 0; }
.ssm-q:first-child{ padding-top:0; }
.ssm-q:last-child{ border-bottom:0; padding-bottom:0; }
.ssm-q > summary{
  list-style:none; cursor:pointer; font-weight:700; font-size:21px;
  display:flex; align-items:flex-start; gap:var(--snug);
}
.ssm-q > summary::-webkit-details-marker{ display:none; }
.ssm-q > summary::after{ content:"+"; margin-left:auto; color:var(--act-guided-ink); font-weight:800; font-size:27px; line-height:1; }
.ssm-q[open] > summary::after{ content:"−"; }
.ssm-q-a{ padding-top:var(--tight); color:var(--ink-muted); }
.ssm-q-a p{ font-size:18px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .ssm-cards,.ssm-cards--4{ grid-template-columns:repeat(2,1fr); }
  .ssm-menu{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:640px){
  .ssm{ font-size:17px; }
  .ssm p{ font-size:17px; }
  .ssm h3{ font-size:23px; }
  .ssm-lede,.ssm-prose p,.ssm-head p{ font-size:19px; }
  .ssm-cards,.ssm-cards--2,.ssm-cards--4{ grid-template-columns:1fr; }
  .ssm-duo,.ssm-duo--gap{ grid-template-columns:1fr; }
  .ssm-duo--flip .ssm-duo-fig{ order:0; }
  .ssm-duo-fig{ aspect-ratio:4/3; }
  .ssm-hero--full.ssm-band--photo{ min-height:66vh; }
  .ssm-band--photo{ min-height:34vh; }
  .ssm-card-b{ padding:var(--snug); }
  .ssm-actions .ssm-btn{ flex:1 1 auto; }
  .ssm-band--statement::before{ height:34px; -webkit-mask-size:600px 34px; mask-size:600px 34px; }
}

/* ==========================================================================
   Careers, the single-job body.
   The description is editor HTML (h3, strong, ul), so it needs the house
   rhythm applied to tags we do not otherwise style inside .ssm-prose.
   ========================================================================== */
.ssm-jobs-body h3{ margin:var(--loose) 0 var(--tight); font-size:27px; }
.ssm-jobs-body h3:first-child{ margin-top:0; }
.ssm-jobs-body strong{ display:block; margin:var(--loose) 0 var(--tight); font-size:22px; font-weight:700; }
.ssm-jobs-body p strong{ display:inline; margin:0; font-size:inherit; }
.ssm-jobs-body ul{ margin:0 0 var(--snug); padding-left:0; list-style:none; }
.ssm-jobs-body ul li{ position:relative; padding-left:30px; margin-bottom:var(--tight); font-size:18px; }
.ssm-jobs-body ul li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--act-guided-ink); font-weight:800;
}
/* A careers fact card carries a label and a value, nothing else — so the value
   wraps rather than being clipped, unlike a price which is always short. */
.ssm-jobs-fact .ssm-price{ white-space:normal; line-height:1.2; }

/* ==========================================================================
   Careers, a tighter rhythm than a marketing page.
   --------------------------------------------------------------------------
   A job page is read, not browsed. The Creative system's 80-152px section
   padding and 30vh title band are tuned for selling; on a role description
   they leave whole screens of nothing between three short facts and the
   thing the reader came for. This variant keeps the type scale and the
   surfaces and only tightens the space.
   ========================================================================== */
.ssm--tight{ --pad:clamp(40px,4vw,64px); }
.ssm--tight .ssm-hero--quiet{ min-height:0; border-bottom:0; padding-bottom:var(--loose); }
.ssm--tight .ssm-hero h1{ margin-bottom:var(--mid,16px); }
.ssm--tight .ssm-head{ margin-bottom:var(--snug); }
.ssm--tight .ssm-card-b{ padding:var(--snug) var(--loose) var(--loose); }
.ssm--tight .ssm-badge{ margin:var(--loose) var(--loose) 0; }
/* The facts row sits directly under the title, so it loses its own top padding. */
.ssm--tight .ssm-band--facts{ padding-top:0; }

/* Careers fact card: label above, value large. */
.ssm-jobs-fact .ssm-price{ white-space:normal; line-height:1.2; }

/* ==========================================================================
   Forms
   ========================================================================== */
.ssm-form{ max-width:760px; }
.ssm-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--loose); }
.ssm-field{ display:flex; flex-direction:column; margin:0 0 var(--snug); }
.ssm-field label{ font-weight:700; font-size:17px; margin-bottom:var(--tight); }
.ssm-form-note{ font-size:17px; color:var(--ink-muted); margin-bottom:var(--tight); }
.ssm-field input,.ssm-field textarea{
  font:inherit; font-size:18px; color:var(--ink); background:var(--ground);
  border:1px solid #C7D8D8; border-radius:var(--radius); padding:12px 14px;
  min-height:52px; width:100%;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ssm-field textarea{ resize:vertical; min-height:132px; }
.ssm-field input:focus,.ssm-field textarea:focus{
  outline:none; border-color:var(--act-guided-btn);
  box-shadow:0 0 0 3px rgba(62,129,128,.18);
}
.ssm-field input:user-invalid,.ssm-field textarea:user-invalid{ border-color:var(--bad,#B42318); }
.ssm-form button[type=submit]{ font:inherit; }
.ssm-form button[disabled]{ opacity:.6; cursor:progress; }

/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, but almost none skip a field that is merely positioned away. */
.ssm-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.ssm-form-status{ margin-top:var(--snug); font-size:17px; min-height:1.5em; }
.ssm-form-status.is-busy{ color:var(--ink-muted); }
.ssm-form-status.is-bad{ color:#B42318; font-weight:600; }
.ssm-form-done{
  border:1px solid var(--hairline); border-left:3px solid var(--act-gift);
  border-radius:var(--radius); background:var(--ground); padding:var(--loose);
  box-shadow:var(--shadow-sm);
}
.ssm-form-done h3{ margin-bottom:var(--tight); color:var(--act-gift-ink); }
.ssm-form-done p{ margin:0; color:var(--ink-muted); }

@media (max-width:640px){
  .ssm-form-grid{ grid-template-columns:1fr; }
}

/* Buttons that are actually <button>.
   Every rule above is written `.ssm a.ssm-btn` so it can outrank a theme's link
   colour, which meant a real submit button matched none of them and rendered as
   the browser default. These mirror the anchor rules for form controls. */
.ssm button.ssm-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:12px 32px; border-radius:var(--radius);
  font-size:17px; font-weight:600; line-height:1.2; text-decoration:none;
  background:var(--accent); color:#fff; border:2px solid var(--accent); cursor:pointer;
  /* background-color and border-color joined `filter` on 15 Aug: the accent button's
     hover became a colour swap rather than a brightness change, and a swap with no
     transition listed for it simply snapped. */
  transition:filter var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ssm button.ssm-btn:hover:not([disabled]){ filter:brightness(1.06); }
.ssm button.ssm-btn--accent{ background:var(--act-open-btn); border-color:var(--act-open-btn); color:#fff; }
.ssm button.ssm-btn--accent:hover:not([disabled]){
  background:var(--act-open-btn-hover); border-color:var(--act-open-btn-hover); filter:none;
}
.ssm button.ssm-btn--brand{ background:var(--act-guided-btn); border-color:var(--act-guided-btn); color:#fff; }
.ssm button.ssm-btn--ghost{ background:transparent; color:var(--act-guided-ink); border-color:var(--act-guided-ink); }

/* The hint sits UNDER its input, not above it. Above, it pushed that one field
   down and broke the alignment of every other field on the row. */
.ssm-field{ position:relative; }
.ssm-field .ssm-form-note{ order:3; margin:var(--tight) 0 0; }
.ssm-field label{ order:1; }
.ssm-field input,.ssm-field textarea{ order:2; }

/* The form inside the Elementor popup. The popup container carries no padding —
   deliberately, so the plugin owns the spacing rather than an Elementor setting
   that would have to be kept in sync with the design system by hand. */
.ssm-applyform{ padding:clamp(var(--snug),4vw,var(--loose)); }
.ssm-applyform .ssm-head{ margin-bottom:var(--snug); }
.ssm-applyform .ssm-head h2{ font-size:clamp(26px,3vw,34px); }
.ssm-applyform .ssm-form{ max-width:none; }

/* File input: the browser default is a grey OS control that ignores every token
   in this file. Styled as a dropzone-ish field so it belongs with its neighbours. */
.ssm-field--file input[type=file]{
  font:inherit; font-size:17px; color:var(--ink-muted);
  background:var(--ground); border:1px dashed #C7D8D8; border-radius:var(--radius);
  padding:14px; min-height:56px; width:100%; cursor:pointer;
}
.ssm-field--file input[type=file]::file-selector-button{
  font:inherit; font-size:17px; font-weight:600; cursor:pointer;
  margin-right:var(--snug); padding:8px 16px; border-radius:var(--radius);
  border:2px solid var(--act-guided-ink); background:transparent; color:var(--act-guided-ink);
}
.ssm-field--file input[type=file]:hover{ border-color:var(--act-guided-btn); }
.ssm-field--file input[type=file]:focus{
  outline:none; border-color:var(--act-guided-btn); box-shadow:0 0 0 3px rgba(62,129,128,.18);
}

/* Rounded corners on the application popup.
   Elementor's modal wrapper is outside `.ssm`, so this is the one place a rule has
   to reach past the scope, targeted at the popup's own class (set in
   ssr_jobapp_ensure_popup) rather than every Elementor modal on the site.
   `overflow:hidden` so the form's own corners cannot square off the frame. */
.elementor-popup-modal.ssm-apply-popup .dialog-widget-content,
.elementor-popup-modal .dialog-message .ssm-applyform{ border-radius:10px; }
.elementor-popup-modal.ssm-apply-popup .dialog-widget-content{
  overflow:hidden; box-shadow:0 2px 4px rgba(15,29,27,.05), 0 8px 22px rgba(15,29,27,.08);
}

/* Modal density.
   A modal is not a page: it competes with the viewport rather than owning it, and
   on a laptop the form was taller than the window. Same type scale and the same
   44px+ touch targets, only the space between things comes in. */
.ssm-applyform{ padding:clamp(18px,2.5vw,28px); }
.ssm-applyform .ssm-head{ margin-bottom:var(--snug); }
.ssm-applyform .ssm-head h2{ font-size:clamp(24px,2.6vw,30px); }
.ssm-applyform .ssm-head p{ font-size:18px; margin-top:2px; }
.ssm-applyform .ssm-form-grid{ gap:0 var(--snug); }
.ssm-applyform .ssm-field{ margin-bottom:12px; }
.ssm-applyform .ssm-field label{ margin-bottom:2px; }
.ssm-applyform .ssm-field input{ min-height:46px; padding:9px 12px; }
.ssm-applyform .ssm-field textarea{ min-height:104px; padding:10px 12px; }
.ssm-applyform .ssm-form-note{ margin-top:2px; }
.ssm-applyform .ssm-field--file input[type=file]{ min-height:48px; padding:10px; }
.ssm-applyform .ssm-actions{ margin-top:var(--snug) !important; }
.ssm-applyform .ssm-form-status{ margin-top:var(--tight); }

/* Careers fact cards, compact.
   Three short facts do not need three tall cards. The badge moves beside the text
   instead of above it, which halves the height and puts the label and its value on
   the same optical line as the glyph. */
.ssm-jobs-fact{
  flex-direction:row; align-items:center; gap:var(--snug);
  padding:var(--snug) var(--loose) var(--snug) var(--snug);
}
.ssm-jobs-fact .ssm-badge{ width:40px; height:40px; margin:0; }
.ssm-jobs-fact .ssm-badge svg{ width:20px; height:20px; }
.ssm-jobs-fact .ssm-card-b{ padding:0; gap:0; flex:1; }
.ssm-jobs-fact .ssm-eyebrow{ font-size:17px; letter-spacing:.08em; margin-bottom:0; line-height:1.3; }
.ssm-jobs-fact .ssm-price{ font-size:22px; line-height:1.25; }
/* Fact card internals, now that the badge carries no inline margin. */
.ssm-jobs-fact{ justify-content:flex-start; }
.ssm-jobs-fact .ssm-card-b{ align-items:flex-start; text-align:left; }

/* ==========================================================================
   Careers archive (/jobs/), Elementor template 5668.
   --------------------------------------------------------------------------
   This grid is still an Elementor archive template, not our markup.

   Targeting the generated element ids was the first attempt and was wrong: the six
   cards are six separate containers with six DIFFERENT ids, not one looped item, so
   the rules only ever hit one card. These selectors are structural instead, every
   child container of the row, and the button widget inside it, so they survive the
   template being edited and do not care how many roles are listed.

   The fix: descriptions run from two lines to five, so the buttons sat at six
   different heights. Content stays top-aligned and the button is pushed to the
   bottom, so the row of calls to action reads as one line instead of a stagger.
   ========================================================================== */
body.post-type-archive-jobs .elementor-location-archive .e-con.e-child{
  justify-content:flex-start;
}
body.post-type-archive-jobs .elementor-location-archive .e-con.e-child > .elementor-widget-button{
  margin-top:auto;
}

/* Modal backdrop — matched to the app's own dialogs.
   `.ssr-dlg-ov` in includes/helpers/ssr-dialogs.php has used rgba(15,32,40,.55)
   since the booking dialogs were built. Elementor's default overlay is a flat
   black at a different opacity, so the careers modal dimmed the page a shade
   differently from every other dialog on the site. Same value here, and the panel
   takes the dialogs' 16px radius and lifted shadow to go with it. */
/* Elementor has NO separate overlay element — the dim is a background colour on
   the modal wrapper itself, defaulting to rgba(0,0,0,.8). That is why targeting
   `.dialog-widget-overlay` did nothing. `!important` is needed here and only here:
   Elementor writes its overlay colour as an inline-priority rule from the popup's
   own settings, so a plain declaration loses. */
.elementor-popup-modal.ssm-apply-popup{
  background-color:rgba(15,32,40,.55) !important;
}
.elementor-popup-modal.ssm-apply-popup .dialog-widget-content{
  border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.3) !important;
}

/* ==========================================================================
   Long-form legal, privacy, terms, and anything else that is a document
   rather than a page.
   --------------------------------------------------------------------------
   The Creative system had no pattern for this. `.ssm-prose` is a measure and a
   paragraph size; it says nothing about the h2/h3/ul/ol rhythm a policy needs,
   so a legal page rendered as an undifferentiated wall, which is exactly how
   /privacy/ looked before this: theme defaults, a duplicated H1, 11 sections
   with no visible hierarchy.

   Reuse before invention. This borrows the careers page's reasoning wholesale:
   a document is READ, not browsed, so it runs inside `.ssm--tight` at the same
   reduced band padding, and it inherits the type scale and surfaces unchanged.
   Only the vertical rhythm and the list marks are new.

   The numbered-section look comes from a CSS counter rather than typed-in
   numbers, so inserting section 4 does not mean renumbering seven headings by
   hand, the thing nobody ever remembers to do.
   ========================================================================== */
.ssm-legal{ max-width:var(--measure); counter-reset:ssm-legal-sec; }

.ssm-legal > h2{
  counter-increment:ssm-legal-sec;
  margin:var(--block) 0 var(--snug);
  font-size:27px;
  scroll-margin-top:96px;   /* so an in-page #anchor does not land under the sticky header */
}
.ssm-legal > h2:first-child{ margin-top:0; }
.ssm-legal > h2::before{
  content:counter(ssm-legal-sec) ".";
  margin-right:.5em;
  color:var(--act-guided-ink);
  font-variant-numeric:tabular-nums;
}

.ssm-legal h3{ margin:var(--loose) 0 var(--tight); font-size:21px; }
.ssm-legal p{ margin:0 0 var(--snug); }
.ssm-legal > p:last-child{ margin-bottom:0; }

/* Lists carry a brand tick on the marketing pages because they are selling
   points. Here they are enumerations of fact, so they get a plain rule-coloured
   marker, a policy that ticks at you reads as advertising. */
.ssm-legal ul{ list-style:none; padding:0; margin:0 0 var(--snug); }
.ssm-legal ul li{ position:relative; padding-left:24px; margin-bottom:var(--tight); }
.ssm-legal ul li::before{
  content:""; position:absolute; left:6px; top:.7em;
  width:6px; height:6px; border-radius:50%; background:var(--act-guided-ink);
}
.ssm-legal ol{ padding-left:24px; margin:0 0 var(--snug); }
.ssm-legal ol li{ margin-bottom:var(--tight); }

/* Inline links inside a document need to be visibly links — there is no
   surrounding button or card to make them obvious the way there is on a
   marketing band. --act-guided-ink is 4.6:1 on white. */
.ssm-legal a:not(.ssm-btn){
  color:var(--act-guided-ink);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.ssm-legal a:not(.ssm-btn):hover{ text-decoration-thickness:2px; }

/* The "last updated" stamp and the contact block that closes every policy. */
.ssm-legal-stamp{
  display:inline-block;
  background:var(--ground);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:6px 12px;
  font-size:17px;
  color:var(--ink-muted);
  margin-bottom:var(--loose);
}
.ssm-legal-contact{
  margin-top:var(--block);
  padding:var(--loose);
  background:var(--ground);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
}
.ssm-legal-contact p:last-child{ margin-bottom:0; }

/* ==========================================================================
   404.
   --------------------------------------------------------------------------
   One band, centred, with the ways out. A 404 is a dead end, and the only
   thing that matters is how quickly the reader is not on it any more, so the
   links are the content, not a footnote under an apology.
   ========================================================================== */
.ssm-404{ text-align:center; }
.ssm-404 .ssm-in{ max-width:640px; }
.ssm-404 h1{ margin:0 0 var(--snug); max-width:none; }
.ssm-404 .ssm-lede{ max-width:none; margin-left:auto; margin-right:auto; }
.ssm-404 .ssm-actions{ justify-content:center; }
.ssm-404-links{
  list-style:none; padding:0;
  margin:var(--block) 0 0;
  display:flex; flex-wrap:wrap; gap:var(--tight) var(--loose);
  justify-content:center;
  border-top:1px solid var(--hairline);
  padding-top:var(--loose);
}
.ssm-404-links a{
  color:var(--act-guided-ink);
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:600;
}