/* =========================================================================
   PAM Maturity Assessment
   Stylesheet for the rewritten module, on the 2026 brand.

   Colour follows the light dominant recipe on page 13 of the guidelines,
   70 / 20 / 7 / 3:

     foundation (white, black, neutral fills)    ~70%   everything structural
     supporting (purple #6D28FF)                 ~20%   DATA MARKS ONLY, which
                                                        is the six ring fills
                                                        and the active gauge arc
     action (green #00FF00)                       ~7%   the two buttons, nothing
                                                        else, because the
                                                        guidelines say limiting
                                                        its use preserves its power
     accent (pink #FF1F6D)                        ~3%   error states only

   Nothing decorative wears colour. The tier rule, the progress dots and the
   selected answer are all black or neutral, so the only purple on the page is
   on a mark that is showing a number.

   Two deliberate decisions worth knowing about.

   1. The three maturity tiers are NOT colour coded. Emergent, Foundational
      and Advanced are an ordinal scale, and the ring length plus the
      percentage already encode the score, so painting each tier a different
      colour re-encodes what the mark already shows and spends the identity
      channel for nothing. It would also mean inventing a red and a green
      that the brand does not have, and green is reserved for action. The
      tier is carried by its name, its description and the needle position,
      all of which are text or geometry rather than hue.

   2. Text never wears the data colour. Tier names, scores and labels are
      black; the purple is on the marks.

   Everything is scoped under .svt-pam. The file this replaces styled bare
   `button`, `label` and `input[type=checkbox]` with no scope, so it reached
   every element on any page carrying the module.

   Focus indicators use :focus-visible. The file this replaces set
   `outline: none` with nothing put back, a WCAG 2.4.7 failure at AA.

   Every colour pair below was measured. See brand-check.js.
   ========================================================================= */

.svt-pam {
  /* -- dominant ------------------------------------------------------- */
  --svt-black:        #000000;
  --svt-white:        #FFFFFF;
  --svt-surface:      #F7F7F2;   /* foundation fill */
  --svt-surface-warm: #F2F2DF;   /* foundation fill, warmer */
  --svt-line:         #E4E2DD;   /* hairlines and ring tracks */
  --svt-line-strong:  #C1BFB9;   /* foundation grey, inactive gauge arcs */
  --svt-ink:          #000000;                /* 21:1 on white   */
  --svt-ink-muted:    #56534D;                /* 7.66:1 on white */

  /* -- supporting, every data mark ------------------------------------ */
  --svt-purple:       #6D28FF;   /* 6.18:1 on white, 3.36:1 on the grey arc */

  /* -- action, sparingly ---------------------------------------------- */
  /* Measured off saviynt.com's own primary CTA, so the buttons in here match
     the ones either side of them on the page. The green is the brand's, which
     the screenshot's #2FDE49 turned out to be after JPEG compression over a
     photograph. The other two are the parts that were missing.

     The edge is the useful one. #00FF00 against a white page is 1.37:1, so a
     borderless green button never met WCAG 1.4.11 and had to lean on the
     "the filled shape identifies it" reading of the exception. #009900 against
     white is 3.78:1, which clears the rule outright.

     ONE VALUE I COULD NOT VERIFY. The site's button carries
     `hover:bg-lime-brand-300`, so its hover is a LIGHTER green, but hovering
     the real button and reading the computed style gave #00FF00 unchanged, and
     the compiled scale is in a cross-origin stylesheet I cannot read. #4DFF4D
     is the right direction rather than a measured value. If you can get me the
     real lime-brand-300, it is a one line swap. Note that brightening #00FF00
     with a filter does nothing, since the green channel is already at maximum,
     which is why this is a colour rather than the filter it replaces. */
  --svt-green:        #00FF00;   /* fill,  lime-brand-500                   */
  --svt-green-edge:   #009900;   /* 1px border and focus ring, lime-brand-700 */
  --svt-green-hover:  #4DFF4D;   /* see the note below                        */

  /* -- accent, error states only --------------------------------------- */
  --svt-pink:         #FF1F6D;
  --svt-alert-bg:     #FFEDF3;
  --svt-alert-ink:    #A3003C;   /* 7.12:1 on the tint */

  --svt-radius:       16px;
  --svt-radius-sm:    8px;

  /* Hanken Grotesk is the brand's interface and body face, and the
     guidelines say to use it exclusively where only one typeface is
     available. Neue Haas Grotesk is the display face; if you hold a web
     licence, add it in front of the stack for .svt-pam__heading only. */
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  max-width: 1280px;
  min-height: 550px;
  margin: 0 auto;
  padding: 2rem;
  line-height: 1.2;
  color: var(--svt-ink);

  /* The site header is position:fixed and 120px tall, and nothing on the page
     sets a scroll offset, so an anchor landing here put the top of the module
     underneath it. Measured: the section came to rest at 118px from the top of
     the viewport with a 120px header over it.

     8rem clears the header with a little air above. Override it per page with
     --svt-anchor-offset if the header height changes.

     This only covers anchors pointing AT the module. The general fix for every
     anchor on the site, including "Skip to content", is `scroll-padding-top` on
     `html` at the theme level. That belongs to whoever owns the theme, and it
     is not something a module stylesheet should reach out and set. */
  scroll-margin-top: var(--svt-anchor-offset, 8rem);
}

/* :where() keeps these at zero specificity so component classes below win.
   Written as `.svt-pam p` they would outrank .svt-pam__notice. */
.svt-pam :where(p) { line-height: 1.5; margin: 0 0 1rem; }
.svt-pam :where(p:last-child) { margin: 0; }
.svt-pam button,
.svt-pam label { cursor: pointer; }

/* Visually hidden, still announced. */
.svt-pam__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- focus ---------- */
.svt-pam :focus-visible {
  outline: 3px solid var(--svt-black);
  outline-offset: 2px;
  border-radius: 3px;
}
.svt-pam input:focus-visible { outline-offset: 3px; }

/* The site's own buttons focus with a 2px ring in the border green, offset by
   2px. Matched here so a keyboard user sees the same indicator across the page.
   #009900 on white is 3.78:1, past the 3:1 that 1.4.11 asks of a focus
   indicator. It is only 2.7:1 on the black panel, which is why the rule further
   down keeps the brighter green in there instead. */
.svt-pam__next:focus-visible,
.svt-pam__priority-cta:focus-visible,
.svt-pam__closing-cta:focus-visible,
.svt-pam__form .hs-button:focus-visible,
.svt-pam__form input[type="submit"]:focus-visible {
  outline: 2px solid var(--svt-green-edge);
  outline-offset: 2px;
}

/* ---------- heading ---------- */
.svt-pam__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--svt-ink);
  text-align: center;
  margin: 0 0 2.5rem;
}

/* ---------- configuration error ---------- */
/* Only ever seen by whoever is editing the page, so it is deliberately loud. */
.svt-pam__config-error {
  max-width: 640px;
  margin: 0 auto 2rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--svt-pink);
  background: var(--svt-alert-bg);
  color: var(--svt-alert-ink);
  border-radius: var(--svt-radius-sm);
  line-height: 1.5;
}

/* ---------- progress ---------- */
.svt-pam__progress { margin-bottom: 2rem; }

.svt-pam__steps {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.svt-pam__dot {
  margin: .1em .75rem;
  padding: .3rem;
  border: none;
  background: none;
  line-height: 0;
}

.svt-pam__dot-mark {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--svt-line-strong);
  transition: background-color .2s ease, transform .2s ease;
}

/* Monochrome. aria-current marks the step in the markup, so the styling hangs
   off that rather than a parallel class that could drift out of sync with it,
   and the current step is larger as well as darker so size carries the state
   too rather than colour alone. */
.svt-pam__dot.is-answered .svt-pam__dot-mark { background: var(--svt-black); }

/* Steps the visitor has not reached yet. aria-disabled keeps them in the tab
   order so they can still be found and explained, so this is the visual half
   of that: clearly inactive, and the cursor says so before the click does. */
.svt-pam__dot.is-locked { cursor: not-allowed; }
.svt-pam__dot.is-locked .svt-pam__dot-mark {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--svt-line-strong);
}
.svt-pam__dot[aria-current="step"] .svt-pam__dot-mark {
  background: var(--svt-black);
  transform: scale(1.4);
}
/* Hover sits after the state rules and must not undo them. Filling in a locked
   dot makes it look answered while the cursor says it is not clickable, and
   lightening a dot that is already black reads as going backwards. */
.svt-pam__dot:hover .svt-pam__dot-mark { background: var(--svt-ink-muted); }
.svt-pam__dot.is-answered:hover .svt-pam__dot-mark,
.svt-pam__dot[aria-current="step"]:hover .svt-pam__dot-mark { background: var(--svt-black); }
.svt-pam__dot.is-locked:hover .svt-pam__dot-mark {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--svt-ink-muted);
}

/* ---------- questions ---------- */
.svt-pam__questions {
  max-width: 640px;
  margin: auto;
  padding: 2.5rem 3rem;
  background: var(--svt-surface);
  border-radius: var(--svt-radius);
}

/* A <fieldset> carries a 2px groove border from the browser's own stylesheet,
   so this reset is doing real work. Tailwind's Preflight happens to zero it too
   on saviynt.com, but the module should not depend on the host page for that.

   ON THE !important, AND AN HONEST NOTE ABOUT WHY IT IS HERE.

   A red rectangle was reported around the question on page load, clearing as
   soon as an option was picked, and it stopped after this rule shipped. I then
   went looking for the cause on the preview build and could not find one:

     - the fieldset does not match :invalid, and no input carries `required`,
       so the obvious explanation is wrong
     - deleting these rules from the live CSSOM brings back no red border, only
       Tailwind's `0px solid #e2e8f0`
     - a sweep of every element on the page for a red border, outline or shadow
       found nothing
     - four stylesheets are cross-origin and unreadable, so a rule could be
       hiding in one, but it would have painted when these rules were deleted

   So this guard is not demonstrably what fixed it, and the likeliest remaining
   explanation is a browser extension drawing on form controls, which would be
   local to one machine. Confirm in an incognito window with extensions off. If
   the red box does not appear there either, drop the three !important flags and
   keep the plain reset.

   The fieldset carries tabindex="-1" and is focused programmatically, never by
   Tab, so suppressing its outline is not a 2.4.7 problem. The radios inside
   keep their own focus ring. */
.svt-pam__question {
  margin: 0;
  padding: 0;
  min-width: 0;
}
.svt-pam__question,
.svt-pam__question:invalid,
.svt-pam__question:focus,
.svt-pam__question:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.svt-pam__question-title {
  float: left;          /* stops the legend reserving the fieldset border gap */
  width: 100%;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--svt-ink);
  margin-bottom: 2rem;
  padding: 0;
  line-height: 1.25;
}
.svt-pam__question-title + * { clear: both; }

.svt-pam__hint {
  font-size: .95rem;
  color: var(--svt-ink-muted);
  margin: -1.5rem 0 1.5rem;
}

/* The input is a sibling of the label, not a child of it, so the spacing and
   alignment belong on the row. Aligned to the first line rather than centred,
   which is what reads correctly when an answer wraps. */
.svt-pam__answer {
  display: flex;
  align-items: flex-start;
  gap: .7em;
  margin-bottom: .5rem;
  padding: .35rem;
  margin-left: -.35rem;
  border-radius: var(--svt-radius-sm);
  transition: background-color .15s ease;
}
.svt-pam__answer:hover { background: rgba(0, 0, 0, .035); }

.svt-pam__answer label {
  flex: 1;
  line-height: 1.4;
  /* Keeps the clickable row past the 24px minimum target size, WCAG 2.5.8. */
  padding: .15rem 0;
}

/* Radio for single choice, checkbox for multi. The shape follows the real
   input type, so the affordance cannot disagree with the behaviour. */
.svt-pam__answer input[type="radio"],
.svt-pam__answer input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.25em; height: 1.25em;
  margin: 0;
  margin-top: .18em;    /* optical alignment with the first line's cap height */
  font: inherit;
  background-color: var(--svt-white);
  border: 2px solid var(--svt-black);
  display: grid;
  place-content: center;
  transition: background-color .15s ease;
}
.svt-pam__answer input[type="radio"]    { border-radius: 50%; }
.svt-pam__answer input[type="checkbox"] { border-radius: 4px; }

/* Black, not green. Green is worth more when it appears twice on the page
   than when it appears on every control, and the guidelines say limiting its
   use preserves its power. */
.svt-pam__answer input:checked { background-color: var(--svt-black); }

.svt-pam__answer input::before {
  content: "";
  width: .5em; height: .5em;
  transform: scale(0);
  transition: transform .12s ease-in-out;
  background: var(--svt-white);
}
.svt-pam__answer input[type="radio"]::before { border-radius: 50%; }
.svt-pam__answer input[type="checkbox"]::before {
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  width: .7em; height: .7em;
}
.svt-pam__answer input:checked::before { transform: scale(1); }

/* ---------- navigation ---------- */
.svt-pam__nav {
  margin: auto;
  max-width: 640px;
  padding: 1.5rem 0 0;
}

/* role="alert" in the markup announces this; here it is made visible, above
   the button so it cannot be missed. */
.svt-pam__error {
  margin: 0 0 1rem;
  padding: .85rem 1.1rem;
  border-left: 4px solid var(--svt-pink);
  background: var(--svt-alert-bg);
  color: var(--svt-alert-ink);
  font-weight: 600;
  border-radius: var(--svt-radius-sm);
}
.svt-pam__error[hidden] { display: none; }

/* The site's primary CTA, matched: pill, 1px darker green edge, 16px label at
   600, 8px by 20px padding. The edge is what makes this pass 1.4.11 rather
   than argue its way around it. At 16px text plus 8px padding the target is
   about 36px tall, comfortably past the 24px minimum in 2.5.8. */
.svt-pam__next {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  border: 1px solid var(--svt-green-edge);
  border-radius: 9999px;
  color: var(--svt-black);
  background: var(--svt-green);
  transition: background-color .2s cubic-bezier(.215, .61, .355, 1);
}
.svt-pam__next:hover { background: var(--svt-green-hover); }

/* ---------- results ---------- */
/* Once the assessment is complete the wizard is done with. The previous build
   left the last question and the Next button sitting above the results. */
.svt-pam--complete .svt-pam__progress,
.svt-pam--complete .svt-pam__questions,
.svt-pam--complete .svt-pam__nav { display: none; }

.svt-pam__results[hidden] { display: none; }
.svt-pam__results:focus { outline: none; }   /* focused programmatically only */

/* The script scrolls here twice: when the assessment finishes, and again when
   the form is submitted and the gate lifts. scrollIntoView honours scroll-margin
   on the element it is scrolling TO, so without this the top of the results
   lands under the site's fixed 120px header. Same custom property as the section
   above, so one override moves both. */
.svt-pam__results { scroll-margin-top: var(--svt-anchor-offset, 8rem); }

.svt-pam__results-top {
  display: flex;
  gap: 1rem;
  padding: 2.5rem;
  background: var(--svt-surface);
  border-radius: var(--svt-radius);
}

.svt-pam__chart {
  flex: 0 0 34%;
  text-align: center;
}
.svt-pam__tiers {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1rem;
}

.svt-pam__results-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--svt-ink-muted);
  margin: 0 0 .5rem;
}

/* The hero number. Black, not the data colour. */
.svt-pam__score { margin: 0; }
.svt-pam__score-value {
  display: block;
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--svt-ink);
}
.svt-pam__score-of {
  display: block;
  font-size: .9rem;
  color: var(--svt-ink-muted);
  margin-top: .25rem;
}

.svt-pam__gauge {
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 1rem auto .5rem;
  display: block;
}
/* Inactive arcs recede; the band the visitor landed in is the only mark that
   carries data, so it is the only one that gets the supporting colour. */
.svt-pam__gauge-arcs path {
  stroke: var(--svt-line-strong);
  transition: stroke .4s ease;
}
.svt-pam__gauge-arcs path.is-active { stroke: var(--svt-purple); }

/* Real text on a textPath rather than vector letterform outlines, so the band
   names scale, translate, and can be found by browser search. Black on the
   inactive grey is 11.42:1; white on the active purple is 6.18:1. */
.svt-pam__gauge-labels text {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .2px;
  fill: var(--svt-black);
  text-transform: uppercase;
}
.svt-pam__gauge-labels text.is-active { fill: var(--svt-white); }

.svt-pam__needle { transition: transform .6s cubic-bezier(.34, 1.2, .64, 1); }
.svt-pam__needle path { fill: var(--svt-black); }

/* With the headline number gone the tier name is the only thing left carrying
   the result in that column, so it takes over the hero role the number had. */
.svt-pam--no-score .svt-pam__band { margin: 1.25rem 0 0; }
.svt-pam--no-score .svt-pam__band-name {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  letter-spacing: -.03em;
}

.svt-pam__band { margin: .5rem 0 0; }
.svt-pam__band-name {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--svt-ink);
  line-height: 1.1;
}
.svt-pam__band-range {
  display: block;
  font-size: .9rem;
  color: var(--svt-ink-muted);
  margin-top: .25rem;
}

/* All three tier descriptions render server side so search engines and answer
   engines can read them. Only the matching one is shown. */
.svt-pam__tier[hidden] { display: none; }
/* Visually hidden when the heading is switched off, but still in the DOM and
   the outline. .svt-pam__sr is defined earlier in the file, so without this the
   rule below would win on margin and leave a gap where nothing is drawn. */
.svt-pam__tier-name.svt-pam__sr { margin: -1px; padding: 0; }

.svt-pam__tier-name {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  color: var(--svt-ink);
}
.svt-pam__tier-name::after {
  content: "";
  display: block;
  margin-top: .75rem;
  width: 48px; height: 4px;
  background: var(--svt-black);
  border-radius: 2px;
}
.svt-pam__tier-desc { line-height: 1.6; }

/* ---------- dimension tiles ---------- */
/* These were rings with a percentage in the middle. They are now four segments
   and a level, because each area is scored from one question with four
   options, so the only values it can hold are 0, 33, 67 and 100. A continuous
   arc drew a sliding scale that does not exist, and a percentage carried a
   denominator the page never explained. Four segments say the same thing
   without overclaiming, and the level text beside them means the result is
   never carried by appearance alone. */
.svt-pam__dimensions {
  margin-top: 1rem;
  padding: 1.5rem 2rem 2rem;
  background: var(--svt-surface);
  border-radius: var(--svt-radius);
}
/* Focus lands here programmatically when the gate lifts, so the visitor arrives
   on their results rather than being left behind on the form. It carries
   tabindex="-1", so it is not keyboard reachable and can never take focus by
   Tab, which is why suppressing the ring here is not a 2.4.7 problem. Without
   this, unlocking drew a 3px outline around the whole panel. The same rule is
   already on .svt-pam__results and .svt-pam__question for the same reason. */
.svt-pam__dimensions:focus,
.svt-pam__dimensions:focus-visible { outline: none; }

/* A real heading, not a screen reader only one. Without something visible here
   the tier block and the grid read as two unrelated modules, which is most of
   why the headline score and the six areas felt disconnected. */
.svt-pam__dimensions-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--svt-ink);
  margin: 0 0 .4rem;
}

/* 62ch here was the reading-measure guideline applied to the wrong thing. That
   range is for running body text, where the eye sweeps back to the start of a
   new line over and over. A one line caption has no return sweep at all, and
   the cap was forcing this sentence to wrap with half the row empty beside it.
   The cap stays, wide enough for the default copy to sit on one line and still
   short enough to catch someone pasting a paragraph in here. */
.svt-pam__scale-note {
  margin: 0 0 1rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--svt-ink-muted);
  max-width: 105ch;
}

/* Where to start. Warm foundation fill and a black rule rather than a colour,
   because this is a conclusion drawn in words, not a data mark.

   It was a single line of label plus name, arriving third after the heading and
   the caption, in the smallest type of the three. It is the most actionable
   thing in the results, so it now carries enough to act on without scrolling:
   the area, where they are, where they should be, and the way to talk to
   somebody about it. */
/* Sits in the right hand column of the headline block, directly under the tier
   description, whose last sentence promises to identify where to focus first.
   It used to sit above the grid, three blocks after that promise.

   Black, on the brand's dark dominant treatment, for a reason worth writing
   down. Every light foundation fill is within about 1.03:1 of every other one,
   so #F2F2DF on the #F7F7F2 results panel was effectively invisible and the
   black left rule was carrying the whole separation on its own. There is no
   light fill in the palette that fixes that. Going dark does, it matches the
   form panel's treatment, and it puts the green button on the black it was
   designed to sit on: green against black is 15.3:1, so the button's own edge
   now clears WCAG 1.4.11 outright rather than resting on the exception. */
.svt-pam__priority {
  margin: 1.75rem 0 0;
  padding: 1.6rem 1.75rem;
  background: var(--svt-black);
  color: var(--svt-white);
  border-radius: var(--svt-radius);
}
/* The default focus ring is black, which is invisible here. Same fix the form
   panel already uses. */
.svt-pam__priority :focus-visible { outline-color: var(--svt-green); }
.svt-pam__priority-cta:focus-visible { outline-color: var(--svt-green); }
.svt-pam__priority[hidden] { display: none; }

.svt-pam__priority-label {
  margin: 0 0 .75rem;
  font-size: .6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #BFBDB6;                 /* 11.17:1 on black */
}

/* Two tied areas sit side by side where there is room, and stack where there
   is not. `:empty` matters because the all-top case renders no items at all. */
.svt-pam__priority-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem 2rem;
}
.svt-pam__priority-items:empty { display: none; }

.svt-pam__priority-name {
  margin: 0 0 .2rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--svt-white);
}
/* Underlined, because a link that only looks like a link on hover is not
   discoverable, and this one is the route to the card on a phone. */
.svt-pam__priority-name a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.svt-pam__priority-name a:hover { text-decoration-thickness: 3px; }

.svt-pam__priority-level {
  margin: 0 0 .7rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--svt-white);
}
.svt-pam__priority-ideal {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--svt-white);
}
.svt-pam__priority-ideal-label {
  display: block;
  margin-bottom: .15rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #BFBDB6;                 /* 11.17:1 on black */
}

/* Nobody has a weakest area when every area is at the top, so the label would
   be pointing at nothing. */
.svt-pam__priority-note {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--svt-white);
}
.svt-pam__priority-note[hidden] { display: none; }
.svt-pam__priority.is-all-top .svt-pam__priority-label { display: none; }

/* The action, at the point the visitor has just been told what their problem
   is. Green is the brand's action colour and this is the only place it appears
   once the assessment is finished, so the allowance is spent exactly once.
   Same treatment as the site's primary CTA, so the three buttons in this
   module and the ones either side of it on the page are one thing. */
.svt-pam__priority-actions { margin: 1.4rem 0 0; }
/* Hidden by the script when the label would leave the link unnamed. */
.svt-pam__priority-actions[hidden] { display: none; }
.svt-pam__priority-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  border: 1px solid var(--svt-green-edge);
  border-radius: 9999px;
  color: var(--svt-black);
  background: var(--svt-green);
  transition: background-color .2s cubic-bezier(.215, .61, .355, 1);
  text-decoration: none;
}
.svt-pam__priority-cta:hover { background: var(--svt-green-hover); }

/* ---------- closing CTA ---------- */
/* The same offer, repeated after the six tiles, because the panel that carries
   it first is a long way above by the time anybody reaches the bottom.

   Deliberately quieter than that panel. Two black blocks on one page would
   compete, and the one at the top is doing the harder job: it names the weakest
   area and its ideal state. This one only has to be there when the reader
   finishes and looks up. So: the page's own background, a hairline above it to
   separate it from the tiles, and the same button. */
.svt-pam__closing {
  display: block;
  margin: 2rem 0 0;
  padding: 2rem 1.5rem 0;
  border-top: 1px solid var(--svt-line);
  text-align: center;
}
.svt-pam__closing[hidden] { display: none; }

.svt-pam__closing-note {
  /* 62ch is the reading measure. Centred, so it wants to be narrower than the
     full width or the eye loses the start of each line on the return sweep. */
  max-width: 52ch;
  margin: 0 auto 1.25rem;
  color: var(--svt-ink-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.svt-pam__closing-actions { margin: 0; }
.svt-pam__closing-actions[hidden] { display: none; }

/* Identical to the button in the panel and to the site's own CTA. A second
   treatment for the same action would read as a different action. */
.svt-pam__closing-cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  border: 1px solid var(--svt-green-edge);
  border-radius: 9999px;
  color: var(--svt-black);
  background: var(--svt-green);
  transition: background-color .2s cubic-bezier(.215, .61, .355, 1);
  text-decoration: none;
}
.svt-pam__closing-cta:hover { background: var(--svt-green-hover); }

.svt-pam__dimension-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1rem;
}

.svt-pam__dimension {
  padding: 1.25rem;
  background: var(--svt-white);
  border: 1px solid var(--svt-line);
  border-radius: var(--svt-radius-sm);
  /* The panel above links here, and saviynt.com has a fixed header, so without
     this the card lands underneath it. */
  scroll-margin-top: 120px;
}
/* The one the visitor was told to start with. Black rather than a colour, so
   the emphasis costs nothing from the accent allowance and reads the same to
   anyone who cannot separate hues. */
.svt-pam__dimension.is-start-here {
  border-color: var(--svt-black);
  box-shadow: inset 0 0 0 1px var(--svt-black);
}

.svt-pam__start-here {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .25rem .6rem;
  font-size: .6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.4;
  color: var(--svt-white);
  background: var(--svt-black);
  border-radius: 999px;
}
.svt-pam__start-here[hidden] { display: none; }

.svt-pam__dimension-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 .35rem;
  color: var(--svt-ink);
}
/* What the area means, for anyone who is not already fluent in the term. It now
   sits at the foot of the tile, under a hairline, because it is the only line
   here that does not change with the answer. Above the meter it also pushed the
   result to a different height on every card, since real descriptions run to
   five or eight lines rather than the two I had been testing with. */
.svt-pam__dimension-text {
  margin: 1rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid var(--svt-line);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--svt-ink-muted);
}

/* ---------- the level meter ---------- */
.svt-pam__meter {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .9rem;
}
.svt-pam__meter-track {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
  width: 104px;
}
/* Unfilled segments are the remainder and carry no data, so they recede. The
   pair that matters for WCAG 1.4.11 is filled against unfilled, since that
   boundary is what tells you the level. #6D28FF on #C1BFB9 measures 3.36:1,
   and the filled segment on the white card is 6.18:1. */
.svt-pam__meter-seg {
  flex: 1;
  height: 10px;
  border-radius: 2px;
  background: var(--svt-line-strong);
  transition: background-color .4s ease;
}
.svt-pam__meter-seg.is-filled { background: var(--svt-purple); }

/* One flex child holding both, so they wrap as a single run of text rather
   than as two columns that fight each other for width. */
.svt-pam__meter-text { flex: 1; min-width: 0; }

/* Black, not the data colour. Text never wears the mark's hue. */
.svt-pam__level {
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--svt-ink);
}
.svt-pam__level[hidden] { display: none; }

/* This area's contribution to the headline total. Deliberately quiet: it is
   there so the six numbers can be seen to add up, not to grade the area. */
.svt-pam__points {
  display: block;
  margin-top: .1rem;
  font-size: .75rem;
  line-height: 1.3;
  color: var(--svt-ink-muted);
}
.svt-pam__points[hidden] { display: none; }

/* ---------- at a glance, beside the headline ---------- */
.svt-pam__glance {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--svt-line-strong);
  text-align: left;
}
.svt-pam__glance[hidden] { display: none; }
.svt-pam__glance-title {
  margin: 0 0 .6rem;
  font-size: .6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--svt-ink-muted);
}
.svt-pam__glance-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .35rem;
}
.svt-pam__glance-row:last-child { margin-bottom: 0; }
.svt-pam__glance-name {
  flex: 1;
  min-width: 0;
  font-size: .75rem;
  line-height: 1.3;
  color: var(--svt-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Same mark as the tiles below, at a smaller size, so the eye maps the summary
   onto the detail without being told to. */
.svt-pam__glance-meter {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  width: 64px;
}
.svt-pam__glance-meter .svt-pam__meter-seg { height: 6px; border-radius: 1px; }

/* ---------- the two copy lines ---------- */
.svt-pam__echo,
.svt-pam__ideal {
  display: block;
  font-size: .875rem;
  line-height: 1.5;
}
.svt-pam__echo[hidden],
.svt-pam__ideal[hidden] { display: none; }

.svt-pam__echo { margin: 0 0 .85rem; }
/* The forward-looking line, set apart by a rule rather than by colour. */
.svt-pam__ideal {
  margin: 0;
  padding-left: .7rem;
  border-left: 2px solid var(--svt-black);
}

.svt-pam__echo-label,
.svt-pam__ideal-label {
  display: block;
  margin-bottom: .15rem;
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--svt-ink-muted);
}
.svt-pam__echo-text,
.svt-pam__ideal-text { color: var(--svt-ink); }

/* At the top of the scale there is no next answer, so a "next step" label
   would be describing something that is not there. */
.svt-pam__ideal.is-top { border-left-color: var(--svt-line-strong); }
.svt-pam__ideal.is-top .svt-pam__ideal-label { display: none; }
.svt-pam__ideal.is-top .svt-pam__ideal-text { color: var(--svt-ink-muted); }

/* ---------- the gate ---------- */
/* The blur is only the visible half. The module also sets inert and
   aria-hidden, so the gate applies to screen reader and keyboard users too
   rather than only to people who can see it. */
.svt-pam__gated-area { position: relative; }

.svt-pam__dimensions.is-gated {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}

/* While gated the form sits centred over the scores, so neither element has
   to know the other's height. Once the gate lifts the form is hidden and the
   scores are ordinary flow content again. */
.svt-pam__gated-area:has(.is-gated) .svt-pam__form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 2rem));
  margin: 0;
}
/* Without :has() the form stays in flow below the scores. Taller, never overlapping. */
@supports not selector(:has(*)) {
  .svt-pam__gated-area .svt-pam__form { position: static; transform: none; }
}

/* ---------- form ---------- */
/* The brand's dark dominant treatment: black field, white type, green action. */
.svt-pam__form {
  position: relative;
  z-index: 2;
  padding: 2.5rem;
  background: var(--svt-black);
  color: var(--svt-white);
  max-width: 520px;
  margin: 2rem auto 0;
  text-align: center;
  border-radius: var(--svt-radius);
}

/* HubSpot's {% form %} tag always renders its own title element, and renders it
   EMPTY when no title is set on the form. On the sandbox page that produced an
   empty h3 sitting inside this panel, which is an empty heading in the document
   outline: WCAG 1.3.1, and something every audit tool flags.

   This module renders its own populated heading above the form, so HubSpot's is
   redundant whether or not it has text in it. display:none takes it out of the
   accessibility tree as well as off the page, which is what makes this a fix
   rather than a cover-up.

   Scoped inside this module. Any other form on the page is left alone, so if
   there is a second empty form title elsewhere it is a page editor fix, not
   this one. */
.svt-pam__form .hs_cos_wrapper.form-title { display: none; }
.svt-pam__form[hidden] { display: none; }

.svt-pam__form-title {
  color: var(--svt-white);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
}
.svt-pam__form-sub {
  color: var(--svt-white);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

/* Collection notice. #BFBDB6 on black is 11.17:1. */
.svt-pam__notice {
  color: #BFBDB6;
  font-size: .8125rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.svt-pam__notice a { color: var(--svt-white); text-decoration: underline; }

/* ---------- the HubSpot form, laid out by us rather than by HubSpot ----------

   Measured on the sandbox page. HubSpot generates a stylesheet per form, keyed
   to the form GUID and a style variant id, and that sheet was setting field
   widths to 95%, 50%, 33%, 34% and auto depending on the field. Two embeds of
   the same form can carry different style variant ids, which is why the form
   renders one way on one page and ragged on another: inputs at different widths,
   centred rather than aligned, the country select sizing itself to "United
   States" while the state select sizes to "Maine", and a typed email running out
   of room and clipping.

   Those selectors are specific (.hs-form-GUID_STYLE fieldset.form-columns-1
   .hs-input) and the variant id changes, so there is nothing stable to target
   and out-specify. The !important on width is deliberate and is the same call
   already made for the submit button below: the alternative is layout that
   depends on a per-form setting nobody remembers exists.

   Measured contrast for everything set here, against the surface it sits on:
   labels 21:1 on the panel, input text 21:1 on the input, placeholder 7.66:1
   on the input, required marker and error text 5.67:1 on the panel.

   Everything here is scoped inside .svt-pam__form, so other forms on the page
   keep whatever HubSpot gives them. */

/* The panel centres its heading, sub-heading and notice. A form is not prose,
   so from the form element down it runs left, which is what gives the fields
   and labels a common edge to scan. */
.svt-pam__form .hs-form { text-align: left; }

/* HubSpot groups fields in fieldsets and gives them a max-width of its own.
   The browser's default fieldset border shows through wherever the host page
   has not reset it, which on a black panel is a white box around the form. The
   same lesson as the red box around the question: reset it here rather than
   hope the theme does it. */
.svt-pam__form .hs-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: none !important;
}

/* One column, deliberately. The panel is 520px wide, so HubSpot's two and
   three column layouts would put fields in 230px and 150px boxes. */
.svt-pam__form .hs-form-field { width: 100% !important; margin-bottom: 1rem; }

.svt-pam__form .hs-form .hs-input {
  box-sizing: border-box;
  width: 100% !important;
  border: none;
  border-radius: var(--svt-radius-sm);
  font-family: inherit;
  font-size: 15px !important;
  padding: 13px 12px !important;
  color: var(--svt-black);
  background: var(--svt-white);
}

/* The international phone field is two controls on one row, a dialling code
   select and the number. Forcing both to 100% would stack them and lose the
   pairing, so the split is preserved and only the row is made to fill. */
.svt-pam__form .hs-fieldtype-intl-phone.hs-input {
  display: flex;
  gap: .5rem;
  padding: 0 !important;
  background: none;
}
.svt-pam__form .hs-fieldtype-intl-phone.hs-input select { width: 30% !important; flex: 0 0 30%; }
.svt-pam__form .hs-fieldtype-intl-phone.hs-input input  { width: auto !important; flex: 1 1 auto; }

/* Checkboxes and radios size to themselves. Without this the 100% above turns
   a tickbox into a full width bar. */
.svt-pam__form .hs-form .hs-input[type="checkbox"],
.svt-pam__form .hs-form .hs-input[type="radio"] { width: auto !important; }

/* LABELS.

   The theme colours form labels #383C33, which is the previous brand's dark.
   On this black panel that measures 1.86:1 against the 4.5:1 that 1.4.3 asks
   for, so with labels switched on in the form they were on the page but not
   readable, leaving what looked like a column of unexplained empty boxes with
   gaps between them.

   White on black is 21:1. */
.svt-pam__form .hs-form label,
.svt-pam__form .hs-form label span {
  color: var(--svt-white);
  text-align: left;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}
.svt-pam__form .hs-form > label,
.svt-pam__form .hs-form-field > label { display: block; margin-bottom: .35rem; }

/* The required marker. HubSpot renders it inside the label, and the theme's
   red on black is too dark to rely on. The brand's error pink measures 5.66:1
   on black. Colour is not the only signal: the field is also marked required
   to assistive technology by HubSpot's own markup. */
.svt-pam__form .hs-form label .hs-form-required { color: var(--svt-pink); }

/* Placeholders sit on the white input, not on the panel, so they are measured
   against white. #56534D is 7.66:1 there. They are supplementary to the label
   rather than a replacement for it: a placeholder disappears the moment
   somebody types, which is the whole reason WCAG 3.3.2 asks for a real label. */
.svt-pam__form .hs-form .hs-input::placeholder { color: var(--svt-ink-muted); opacity: 1; }

/* Chrome paints autofilled fields with its own pale blue, which reads as a
   different kind of field next to the empty ones. The inset shadow is the only
   way to override it, and text-fill-color is the only way to set the text. */
.svt-pam__form .hs-form .hs-input:-webkit-autofill,
.svt-pam__form .hs-form .hs-input:-webkit-autofill:hover,
.svt-pam__form .hs-form .hs-input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--svt-white);
  box-shadow: inset 0 0 0 1000px var(--svt-white);
  -webkit-text-fill-color: var(--svt-black);
  caret-color: var(--svt-black);
}

/* Validation messages. To be straight about this one: HubSpot's own #F2545B
   measures 6.19:1 on black and already passes, so this is a brand consistency
   change rather than a contrast fix. The brand's error pink is 5.67:1 on black,
   which is lower but still comfortably past 4.5:1. The list reset underneath is
   the part doing real work, because the rollup renders as a bulleted list. */
/* Deliberately NOT .hs-main-font-element. HubSpot puts that class on the thank
   you message as well as on error text, and a pink "Thanks for submitting the
   form" would read as a failure. */
.svt-pam__form .hs-error-msg,
.svt-pam__form .hs-error-msgs li,
.svt-pam__form .hs-error-msgs label,
.svt-pam__form .hs_error_rollup label {
  color: var(--svt-pink);
  font-size: .8125rem;
  font-weight: 600;
}
.svt-pam__form .hs-error-msgs { list-style: none; margin: .35rem 0 0; padding: 0; }
/* The answer transcript rides along as a hidden field. The old rule hid the
   textarea but not its label, so HubSpot's internal field label was showing to
   visitors as "The assessment data will be stored here." Hiding the whole
   field wrapper fixes that. HubSpot builds the wrapper class from the field's
   internal name, so this matches without needing a new selector on the form.

   A CSS-hidden field still submits its value, unlike a disabled one, so the
   transcript keeps arriving. The better long-term fix is to change the field
   type to hidden in the HubSpot form itself, which removes the label entirely
   rather than covering it up. */
.svt-pam__form .hs_cpam_maturity_model_risk_assessment,
.svt-pam__form .input textarea[name="cpam_maturity_model_risk_assessment"] {
  display: none;
}

.svt-pam__form .hs_submit.hs-submit { margin-top: 1.25rem; }
/* HubSpot wraps the submit in .actions, which inherits the form's own left
   alignment rather than the panel's centring. */
.svt-pam__form .hs_submit .actions { text-align: center; }

/* HubSpot renders the submit as <input type="submit" class="hs-button primary
   large">, and the theme styles `.hs-button` with enough weight to beat a
   plain class selector. That is why it was still rendering as white on a mid
   green, which measures about 1.9:1 and fails WCAG 1.4.3 badly.

   !important is deliberate here and limited to the properties that carry the
   contrast. It is the only reliable way to win against a theme rule we do not
   control, and losing this particular fight is an accessibility failure rather
   than a cosmetic one. #383C33 on #00FF00 measures 8.22:1. */
.svt-pam__form .hs-button,
.svt-pam__form input[type="submit"],
.svt-pam__form .hs_submit input[type="submit"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 8px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  border: 1px solid var(--svt-green-edge) !important;
  border-radius: 9999px;
  color: var(--svt-black) !important;
  background: var(--svt-green) !important;
  transition: background-color .2s cubic-bezier(.215, .61, .355, 1);
  background-image: none !important;
  text-shadow: none;
  cursor: pointer;
}
.svt-pam__form .hs-button:hover,
.svt-pam__form input[type="submit"]:hover { background: var(--svt-green-hover) !important; }

/* The focus ring has to be visible against the black panel. */
.svt-pam__form :focus-visible { outline-color: var(--svt-green); }

/* ---------- misconfigured ---------- */
.svt-pam--misconfigured .svt-pam__questions,
.svt-pam--misconfigured .svt-pam__nav { display: none; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .svt-pam *,
  .svt-pam *::before {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  .svt-pam__results-top { flex-direction: column; padding: 1.5rem; }
  .svt-pam__chart { flex: 1 1 auto; }
  .svt-pam__tiers { padding-left: 0; }
  .svt-pam__dimensions { padding: 1.25rem 1.25rem 1.5rem; }
  .svt-pam__questions { padding: 2rem; }
  /* One column from here down. Two cards carrying a name, a description, a
     level and two lines of copy do not sit side by side at this width, and
     the auto-fit minimum alone would still try at around 700px. */
  .svt-pam__dimension-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .svt-pam { padding: 1rem; }
  .svt-pam__dot { margin: .1em .5rem; }
  .svt-pam__questions { padding: 1.25rem; }
  .svt-pam__answer { font-size: 16px; }
  .svt-pam__form { padding: 1.5rem; }
  /* A narrower track buys back enough width for "Level 3 of 4, Established"
     to stay on one line in a single column card. A longer custom level name
     will still wrap onto a second line, which is untidy rather than broken. */
  .svt-pam__meter { gap: .6rem; }
  .svt-pam__meter-track { width: 88px; }
  /* Overlaying a full form on a tall panel does not work at this width. */
  .svt-pam__gated-area:has(.is-gated) .svt-pam__form {
    position: static;
    transform: none;
    width: auto;
    margin: 1.5rem auto 0;
  }

  /* ---- what the visitor can reach without scrolling, on a phone ----

     Once the form drops out of the overlay above, the order down the page is
     what decides whether the form is on screen at the moment it becomes the
     only thing to do. Measured at the top of the results, gated:

       320x568   form at 774, first field 929   off screen
       375x667   form at 667, first field 822   off screen
       360x800   form at 715, first field 870   off screen
       390x844   form at 667, first field 822   at the very bottom

     Nothing wrong with the form. The block above it is 526px, and 256px of
     that is the tier DESCRIPTION, two paragraphs of prose. The result itself,
     the dial and the word under it, is only 206px.

     So the prose moves below the form while the gate is up, and the result
     stays where it is. First field lands at 483 to 513 on every size above,
     and the result is still the first thing read. Putting the whole form above
     the result was measured too: it does get the form on screen, but the dial
     and the tier name end up below the fold on every single phone, which asks
     for an email before showing what was earned.

     Once the gate lifts the order returns to normal, so the "Where to start"
     panel does not end up buried under all six tiles. That is what the
     :has(.is-gated) pair below is for.

     display:contents lets the two halves of the results header be ordered
     against the form without touching the markup. It is a plain layout div
     with no semantics, so removing its box costs nothing; the card it was
     drawing is put back on each half. Where :has() is not supported the state
     rules never match and the order stays as it is today. */
  .svt-pam__results { display: flex; flex-direction: column; gap: 1rem; }
  .svt-pam__results-top { display: contents; }
  .svt-pam__chart,
  .svt-pam__tiers {
    background: var(--svt-surface);
    border-radius: var(--svt-radius);
    padding: 1.5rem;
  }
  .svt-pam__chart      { order: 1; }
  .svt-pam__tiers      { order: 2; }
  .svt-pam__gated-area { order: 3; }
  /* The closing CTA is the last thing either way, so it does not move with the
     gate. It is still given an order, because a flex item without one defaults
     to 0 and would jump to the top. */
  .svt-pam__closing    { order: 4; }

  .svt-pam__results:has(.is-gated) .svt-pam__gated-area { order: 2; }
  .svt-pam__results:has(.is-gated) .svt-pam__tiers      { order: 3; }

  /* Clipped to a band, because a full height blurred grid on a phone is a lot
     of scrolling past nothing readable. The fade is what stops the clip reading
     as a rendering failure: a hard edge through the middle of a tile looks like
     content that did not load, rather than content being withheld.

     Decorative only. The grid already carries inert and aria-hidden while
     gated, so nothing here is the difference between reaching it and not. */
  .svt-pam__gated-area:has(.is-gated) .svt-pam__dimensions {
    max-height: 300px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  }
}

/* The reorder above clears the fold on every current phone. A 320px screen,
   iPhone SE first generation, was still nine pixels short, so this buys those
   back by tightening the padding at that size only. Measured: first field at
   577 against a 568 viewport before, 561 after. */
@media (max-width: 360px) {
  .svt-pam__results { gap: .75rem; }
  .svt-pam__chart,
  .svt-pam__tiers,
  .svt-pam__form { padding: 1.25rem; }
}