/* Simply design system — component styles implementing ux/manifest/ contracts.
   Hand-written CSS over the token custom properties (see ux/css/README.md for
   why there is no Tailwind build step yet, and why there are no @layer rules).
   Load order: fonts.css, tokens.<brand>.css [, cobrands.simply.css], sds.css. */

/* ---------- scoped reset (coexistence with astro globals) ---------- */

.sds,
.sds :where(*),
.sds :where(*)::before,
.sds :where(*)::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Reset selectors use :where(...) so they carry only the .sds class's
   specificity (0,1,0): strong enough to beat astro's element selectors,
   weak enough that every later .sds-* component rule wins the tie. */

.sds {
  font-family: var(--font-secondary);
  font-size: 16px;
  line-height: 1.5;
  color: hsl(var(--foreground));
}

.sds :where(a) {
  color: inherit;
  text-decoration: none;
}

.sds :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.sds :where(ul) {
  list-style: none;
}

.sds :where(img, svg) {
  display: block;
  max-width: 100%;
}

/* the hidden attribute must always win: UA display:none loses to any author
   display (e.g. our flex containers), so restate it with force */
.sds [hidden] {
  display: none !important;
}

/* ---------- keyframes (from motion tokens) ---------- */

@keyframes sds-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- header ---------- */

.sds-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
  /* the design core's shadow-xs, as on simply.co.za's bar — the token set
     has no small shadow (card/hero only), so the literal lives here */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.sds-header[data-static] {
  position: static;
}

.sds-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0.75rem 1.5rem;
}

.sds-header-logo {
  flex-shrink: 0;
}

/* ---------- lockup ---------- */

.sds-lockup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sds-lockup-brand { height: 28px; width: auto; }
.sds-lockup-cobrand { height: 32px; width: auto; }

.sds-lockup-divider {
  width: 1px;
  height: 28px;
  background: hsl(var(--border));
}

.sds-lockup-fsp {
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--secondary));
  white-space: nowrap;
}

@media (max-width: 767px) {
  .sds-lockup-brand { height: 24px; }
  .sds-lockup-cobrand { height: 26px; }
  .sds-lockup-fsp { display: none; }
}

.sds-lockup[data-context="footer"] img {
  filter: brightness(0) invert(1);
}

/* raster/multi-colour marks that can't knock out cleanly: no filter,
   rendered on a small white chip instead (see cobrand-lockup.md) */
.sds-lockup[data-context="footer"] img[data-no-knockout] {
  filter: none;
  background: #fff;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
}

.sds-lockup[data-context="footer"] .sds-lockup-divider {
  background: hsl(var(--secondary-foreground) / 0.3);
}

.sds-lockup[data-context="footer"] .sds-lockup-fsp {
  color: hsl(var(--secondary-foreground));
}

/* ---------- header nav (desktop) ---------- */

.sds-header-nav {
  display: none;
}

.sds-header-actions {
  display: none;
}

@media (min-width: 768px) {
  .sds-header-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  .sds-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
}

.sds-nav-item {
  position: relative;
}

.sds-nav-trigger,
.sds-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 14px;
  font-weight: 500;
  /* copy is authored sentence case; the design core's header nav applies a
     stylistic all-caps transform (uppercase tracking-wide) */
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: hsl(var(--secondary));
  transition: color 0.2s var(--ease-brand);
}

.sds-nav-trigger:hover,
.sds-nav-link:hover {
  color: hsl(var(--primary));
}

/* fingers get the 44px target; on pointers the items are text-height, which
   is what keeps the bar at simply.co.za's 57px (same rule as the pills) */
@media (pointer: coarse) {
  .sds-nav-trigger,
  .sds-nav-link {
    min-height: 44px;
    padding: 0.25rem;
  }
}

.sds-caret {
  width: 12px;
  height: 12px;
  transition: transform 0.2s var(--ease-brand);
}

[aria-expanded="true"] > .sds-caret {
  transform: rotate(180deg);
}

.sds-nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 220px;
  padding: 0.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.sds-nav-menu[data-state="open"] {
  display: block;
  animation: sds-fade-in 0.2s ease-out;
}

.sds-nav-menu[data-align="right"] {
  left: auto;
  right: 0;
}

.sds-nav-menu-link {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: hsl(var(--card-foreground));
}

.sds-nav-menu-link:hover {
  background: hsl(var(--muted));
  color: hsl(var(--primary));
}

/* ---------- pills ---------- */

.sds-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 140px;
  padding: 10px 24px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.3px;
  transition: background 0.2s var(--ease-brand);
}

/* fingers get the 44px target; the 32px desktop pill matches simply.co.za
   and the design core (12px, py-2.5, min-w 140) */
@media (pointer: coarse) {
  .sds-pill {
    min-height: 44px;
  }
}

.sds-pill-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.sds-pill-primary:hover {
  background: hsl(var(--primary) / 0.9);
}

.sds-pill-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.sds-pill-secondary:hover {
  background: hsl(var(--secondary) / 0.9);
}

/* ---------- burger + mobile panel ---------- */

.sds-header-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: hsl(var(--secondary));
}

.sds-burger-open,
.sds-burger-close {
  width: 24px;
  height: 24px;
}

.sds-header-burger .sds-burger-close { display: none; }
.sds-header-burger[aria-expanded="true"] .sds-burger-open { display: none; }
.sds-header-burger[aria-expanded="true"] .sds-burger-close { display: block; }

/* after the base rule on purpose: same specificity, so source order decides */
@media (min-width: 768px) {
  .sds-header-burger { display: none; }
}

.sds-header-panel {
  display: none;
  padding: 0.5rem 1.5rem 1.25rem;
  background: hsl(var(--background));
  border-top: 1px solid hsl(var(--border));
}

.sds-header-panel[data-state="open"] {
  display: block;
  animation: sds-fade-in 0.2s ease-out;
}

@media (min-width: 768px) {
  .sds-header-panel { display: none !important; }
}

.sds-panel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.25rem;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: hsl(var(--secondary));
}

/* burger-nav variant: a non-interactive group heading in the trigger's
   typography — its section renders always open (header.md) */
.sds-panel-heading {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.5rem 0.25rem;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: hsl(var(--secondary));
}

.sds-panel-section {
  display: none;
  padding-left: 0.75rem;
}

.sds-panel-section[data-state="open"] {
  display: block;
}

.sds-panel-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.25rem;
  font-size: 15px;
  color: hsl(var(--foreground));
}

.sds-panel-link:hover {
  color: hsl(var(--primary));
}

.sds-panel-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* ---------- layout utilities ---------- */

/* breathing room between the sticky header and page content — the page (not
   the header) owns this space; apps place it above their content wrapper.
   Replaces astro's fixed-header topPaddingBuffer (40px in asterix). */
.sds-content-offset {
  height: 2.5rem;
}

/* sticky-footer app shell: pins the footer to at least the viewport bottom
   so async page content can't leave the (visually loud) footer floating
   mid-screen on first paint — client-rendered apps flash it high otherwise.
   Deliberately NOT scoped under .sds: these wrap arbitrary app content that
   must keep its own styling (the .sds reset never applies here). */
.sds-app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sds-app-shell > .sds-content-grow {
  flex: 1 0 auto;
}

/* ---------- ribbon ---------- */

.sds-ribbon {
  padding: 0.35rem 1rem;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-size: 14px;
  text-align: center;
}

.sds-ribbon[data-variant="accent"] {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.sds-ribbon a,
.sds-ribbon a:hover,
.sds-ribbon a:focus-visible {
  font-weight: 700;
  text-decoration: underline;
  /* the ribbon's own foreground, whatever the host app's link globals say
     (bootstrap blue on asterix, astro's a/a:hover on tenandsix): the strip
     is dark on every brand and its links have to read on it. !important
     because astro's element rules are (see the coexistence block). */
  color: inherit !important;
}

.sds-ribbon a:hover,
.sds-ribbon a:focus-visible {
  text-decoration-thickness: 2px;
}

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

.sds-footer-strip {
  height: 8px;
  /* per-brand solid bands (hard-stop gradient) from the token sheets:
     simply reproduces the design core's colour-strip.png, absa its brand
     stripe bar, rml its own three — see gradient.footer-strip in
     ux/tokens/<brand>.tokens.json */
  background: var(--gradient-footer-strip);
}

.sds-footer-band {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  padding: 3rem 1.5rem;
}

.sds-footer-top,
.sds-footer-compliance,
.sds-footer-copyright {
  max-width: var(--container-max);
  margin-inline: auto;
}

.sds-footer-top {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.sds-footer-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
}

.sds-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: hsl(var(--secondary-foreground));
  transition: color 0.2s var(--ease-brand);
}

.sds-footer-link:hover {
  color: hsl(var(--secondary-foreground) / 0.8);
}

.sds-footer-social {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.sds-footer-social-label {
  margin-right: 0.5rem;
}

.sds-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: hsl(var(--secondary-foreground) / 0.8);
}

.sds-footer-social-link:hover {
  color: hsl(var(--secondary-foreground));
}

.sds-footer-social-link svg {
  width: 22px;
  height: 22px;
}

.sds-footer-compliance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid hsl(var(--secondary-foreground) / 0.1);
}

.sds-footer-brand,
.sds-footer-underwriter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: 28rem;
}

.sds-footer-underwriter img {
  height: 56px;
  width: auto;
}

.sds-footer-fineprint {
  font-size: 11px;
  line-height: 1.6;
  color: hsl(var(--secondary-foreground) / 0.4);
  text-align: center;
}

.sds-footer-copyright {
  margin-top: 1.5rem;
  font-size: 11px;
  color: hsl(var(--secondary-foreground) / 0.3);
  text-align: center;
}

@media (min-width: 768px) {
  .sds-footer-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .sds-footer-compliance {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .sds-footer-brand {
    align-items: flex-start;
  }
  .sds-footer-brand .sds-footer-fineprint {
    text-align: left;
  }
  .sds-footer-underwriter {
    align-items: flex-end;
  }
  .sds-footer-underwriter .sds-footer-fineprint {
    text-align: right;
  }
}

/* ---------- header burger-nav variant (header.md) ---------- */

/* Internal tools (suffix) keep their whole claims-gated menu in the burger
   panel at every width — agents' existing navigation muscle-memory. The bar
   carries only the lockup, actions and Log out; the desktop nav dropdowns
   never render. The !importants out-rank the coexistence counters and the
   panel's own >=768px display:none!important gate below/above. */

.sds-header[data-nav="burger"] .sds-header-nav {
  display: none !important;
}

.sds-header[data-nav="burger"] .sds-header-burger {
  display: inline-flex !important;
}

.sds-header[data-nav="burger"] .sds-header-actions {
  display: flex;
}

.sds-header[data-nav="burger"] .sds-header-panel[data-state="open"] {
  display: block !important;
}

/* The mobile panel is a full-width block in the page flow — right for a
   phone, wrong for an always-on burger on a wide screen: the menu opened
   far left of the burger and shoved the page content down. The variant's
   panel is instead an overlay card hanging off the bar's right edge, its
   right side flush with the burger (bar padding 1.5rem inside the
   container), the width of a nav dropdown. On narrow screens the card
   spans the viewport so it never overflows. The sticky header is already
   the containing block; a static one needs position: relative below. */
.sds-header[data-nav="burger"] .sds-header-panel {
  position: absolute;
  top: 100%;
  right: calc(max(0px, (100% - var(--container-max)) / 2) + 1.5rem);
  left: auto;
  z-index: 10;
  width: min(320px, 100vw - 3rem);
  padding: 0.5rem 1rem 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-card);
}

.sds-header[data-nav="burger"][data-static] {
  position: relative;
}

/* ---------- form primitives (login.md "Form primitives") ---------- */

/* The first generic form classes: deliberately not sds-login-*, since an
   input and a primary button look the same on every screen. Values are the
   design core's own (simply-design-core src/components/ui/{input,button,
   label}.tsx as used on its Index page) translated off Tailwind: h-10,
   rounded-md, px-3/px-4, text-sm, the ring-offset focus ring. Promoted to
   their own contracts when the inputs/buttons wave lands. */

.sds-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space-y-2, as the design core's form card */
}

.sds-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1; /* leading-none */
  color: hsl(var(--foreground));
}

.sds-input {
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-secondary);
  /* text-base on phones (iOS zooms anything under 16px), text-sm from md */
  font-size: 16px;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-md);
  transition: box-shadow 0.2s var(--ease-brand);
}

@media (min-width: 768px) {
  .sds-input { font-size: 14px; }
}

.sds-input::placeholder {
  color: hsl(var(--muted-foreground));
}

/* the design core's focus ring: 2px in --ring, held off the control by 2px
   of page background, with the border colour left alone */
.sds-input:focus-visible,
.sds-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.sds-input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.sds-input[aria-invalid="true"] {
  border-color: hsl(var(--destructive));
}

/* The one input variant this wave adds: the design core has no one-time-pin
   field. Same tokens, taller box, and the digits set as digits. */
.sds-input[data-variant="pin"] {
  height: 3rem;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.5em;
  /* the tracking is added to the right of the last glyph too, so the string
     sits off-centre without compensating padding */
  padding-left: calc(0.75rem + 0.5em);
}

@media (min-width: 768px) {
  .sds-input[data-variant="pin"] { font-size: 20px; }
}

.sds-hint,
.sds-error {
  font-size: 14px;
  line-height: 22px; /* the design core's 14/22 small print */
}

.sds-hint { color: hsl(var(--muted-foreground)); }
.sds-error { color: hsl(var(--destructive)); }

.sds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--radius-md);
  transition: background 0.2s var(--ease-brand);
}

/* fingers get the 44px target; the design core's 40px stands on pointers
   (same rule as the header pills) */
@media (pointer: coarse) {
  .sds-button { min-height: 44px; }
}

.sds-button:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.sds-button-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.sds-button-primary:hover:not(:disabled) {
  background: hsl(var(--primary) / 0.9);
}

/* size lg — the design core's own CTA size */
.sds-button-lg {
  height: 2.75rem;
  padding: 0.5rem 2rem;
}

.sds-button-block {
  width: 100%;
}

/* ---------- login (login.md) ---------- */

.sds-login {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: hsl(var(--background));
}

/* identity bar */

.sds-login-bar {
  background: hsl(var(--page-header));
  border-bottom: 1px solid hsl(var(--border));
}

.sds-login-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 1.25rem 1.5rem;
}

.sds-login-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* the design core's badge: rounded-full, 1px border, 12px semibold. Its
   outline variant is transparent; the login bar sits on --page-header, so
   the chip keeps a --background fill to read as a chip. */
.sds-login-context {
  padding: 0.125rem 0.625rem;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  white-space: nowrap;
}

.sds-login-underwriter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  color: hsl(var(--muted-foreground));
}

.sds-login-underwriter strong {
  font-weight: 600;
  color: hsl(var(--secondary));
}

.sds-login-underwriter-mark {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  object-fit: cover;
}

@media (max-width: 639px) {
  .sds-login-underwriter {
    display: none;
  }
}

/* split */

.sds-login-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  flex: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 1rem;
}

@media (min-width: 640px) {
  .sds-login-split { padding: 1.5rem; }
}

@media (min-width: 1024px) {
  .sds-login-split { grid-template-columns: 1fr 1fr; }
}

/* form-only: no hero to sit beside, so the form takes the page and centres
   in it instead of holding the left column's position */
.sds-login[data-layout="form-only"] .sds-login-split {
  grid-template-columns: 1fr;
}

.sds-login[data-layout="form-only"] .sds-login-panel {
  justify-content: center;
}

/* hero */

.sds-login-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* with a testimonial the auto margin below eats the free space, so copy
     sits top and quote bottom (the reference); without one the copy centres
     instead of stranding empty surface under it */
  justify-content: center;
  gap: 3rem;
  overflow: hidden;
  padding: 3.5rem 2rem;
  color: hsl(var(--hero-foreground));
  background: hsl(var(--hero));
  border-radius: calc(var(--radius-lg) * 2);
}

@media (min-width: 640px) {
  .sds-login-hero { padding: 3.5rem 3rem; }
}

@media (min-width: 1024px) {
  .sds-login-hero {
    min-height: 560px;
    padding: 5rem 3.5rem;
  }
}

.sds-login-cluster {
  position: absolute;
  pointer-events: none;
}

.sds-login-cluster[data-position="top"] {
  top: -2.5rem;
  right: -2.5rem;
  width: 340px;
}

.sds-login-cluster[data-position="bottom"] {
  bottom: -4rem;
  left: -4rem;
  width: 260px;
  opacity: 0.35;
  transform: rotate(180deg);
}

/* the hero is a column on phones, so a 340px mark would sit under the
   headline instead of in the corner behind it */
@media (max-width: 639px) {
  .sds-login-cluster[data-position="top"] {
    top: -3rem;
    right: -3.5rem;
    width: 220px;
  }
  .sds-login-cluster[data-position="bottom"] {
    bottom: -3.5rem;
    left: -3.5rem;
    width: 180px;
  }
}

/* The cluster motif is drawn in hero tokens, not the simply illustration
   palette, so every brand gets its own (see login.md provenance). Each mark
   is an annulus — a light outer ring, the hero surface knocking out its
   middle, a warm or cool centre — and the alpha lives in the fills so the
   marks stay legible instead of muddying into the surface. The outer tint
   assumes a dark hero, which is what the token means. */
.sds-login-cluster .sds-login-ring-outer     { fill: hsl(var(--hero-foreground) / 0.2); }
.sds-login-cluster .sds-login-ring-mid       { fill: hsl(var(--hero)); }
.sds-login-cluster .sds-login-ring-inner     { fill: hsl(var(--hero-highlight) / 0.55); }
.sds-login-cluster .sds-login-ring-inner-alt { fill: hsl(var(--hero-accent) / 0.65); }

.sds-login-hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 32rem;
}

.sds-login-eyebrow {
  font-family: var(--font-script);
  font-size: 30px;
  line-height: 1;
  color: hsl(var(--hero-accent));
}

.sds-login-headline {
  font-family: var(--font-primary);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em; /* tracking-tight, as the design core's h1 */
}

@media (min-width: 640px) {
  .sds-login-headline { font-size: 60px; }
}

.sds-login-headline-highlight {
  display: block;
  color: hsl(var(--hero-highlight));
}

.sds-login-blurb {
  font-size: 18px;
  line-height: 1.625; /* text-lg leading-relaxed */
  color: hsl(var(--hero-foreground) / 0.85);
}

.sds-login-testimonial {
  position: relative;
  max-width: 32rem;
  margin-top: auto;
  padding: 1.5rem;
  background: hsl(var(--hero-foreground) / 0.08);
  border: 1px solid hsl(var(--hero-foreground) / 0.15);
  border-radius: calc(var(--radius-lg) + 4px);
}

.sds-login-quote {
  font-family: var(--font-primary);
  font-size: 18px;
  line-height: 1.375;
}

.sds-login-attribution {
  margin-top: 1rem;
  font-size: 14px;
  line-height: 22px;
  color: hsl(var(--hero-foreground) / 0.7);
}

/* form panel */

.sds-login-panel {
  display: flex;
  align-items: center;
  padding: 2.5rem 1.5rem;
}

@media (min-width: 640px) {
  .sds-login-panel { padding: 2.5rem 3rem; }
}

@media (min-width: 1024px) {
  .sds-login-panel { padding: 4rem; }
}

/* the design core's page CTA is <Button size="lg" className="shadow-hero">;
   this form's submit is that button */
.sds-login-form .sds-button-primary {
  box-shadow: var(--shadow-hero);
}

.sds-login-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 28rem;
}

.sds-login-heading {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sds-login-title {
  font-family: var(--font-primary);
  /* the design core sets its 36px heading semibold, in --secondary */
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: hsl(var(--secondary));
}

.sds-login-subtitle {
  color: hsl(var(--muted-foreground));
}

.sds-login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 14px;
}

.sds-login-action {
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.sds-login-action:hover {
  color: hsl(var(--foreground));
  text-decoration: underline;
}

.sds-login-footnote {
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: hsl(var(--muted-foreground));
}

/* underlined always, not just on hover: a brand whose accent is a neutral
   (absa's #303030) would otherwise leave this looking like body text */
.sds-login-footnote-link {
  font-weight: 600;
  color: hsl(var(--accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- coexistence: astro 3.0.7-tailwind !important war ---------- */

/* The astro tailwind theme (loaded by astro body components on tenandsix,
   suffix-pano's 3.x copies) styles BARE elements as its design language,
   with !important on every declaration: button gets background
   var(--primary) (our --primary is an hsl triple, so that computes to an
   invalid color = transparent), white text, a 1px primary border, min-width
   0, its paddings, and display:inline-flex (which un-hides the burger on
   desktop); p gets slate text. Specificity can't beat !important, so we win
   the exact contested properties back in kind — !important at (0,2,0) vs
   the theme's element selectors. Deliberately scoped to sds-classed
   buttons, NOT bare button-in-.sds: slotted app content (e.g. an astro
   call-me button riding the right slot) must keep its own styling. Values
   mirror the component rules above; keep them in step. Harmless where the
   astro theme css isn't loaded (identical outcomes, asterix included). */

.sds .sds-nav-trigger,
.sds .sds-panel-trigger,
.sds .sds-header-burger {
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.sds .sds-nav-trigger:hover,
.sds .sds-panel-trigger:hover,
.sds .sds-header-burger:hover {
  background: none !important;
}

/* astro also kills the focus outline (outline transparent + ring shadow);
   give the chrome buttons back the UA focus indicator */
.sds .sds-nav-trigger:focus,
.sds .sds-panel-trigger:focus,
.sds .sds-header-burger:focus,
.sds .sds-pill:focus {
  outline: revert !important;
  box-shadow: none !important;
}

.sds .sds-nav-trigger {
  padding: 0 !important;
  color: hsl(var(--secondary)) !important;
}

/* keeps the coarse-pointer touch target from the nav rule above */
@media (pointer: coarse) {
  .sds .sds-nav-trigger {
    padding: 0.25rem !important;
  }
}

.sds .sds-nav-trigger:hover {
  color: hsl(var(--primary)) !important;
}

.sds .sds-panel-trigger {
  display: flex !important;
  padding: 0.5rem 0.25rem !important;
  color: hsl(var(--secondary)) !important;
}

.sds .sds-header-burger {
  padding: 0 !important;
  color: hsl(var(--secondary)) !important;
}

@media (min-width: 768px) {
  .sds .sds-header-burger {
    display: none !important;
  }
}

.sds .sds-pill {
  min-width: 140px !important;
  padding: 10px 24px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
}

.sds .sds-pill-primary {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.sds .sds-pill-primary:hover {
  background: hsl(var(--primary) / 0.9) !important;
}

.sds .sds-pill-secondary {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
}

.sds .sds-pill-secondary:hover {
  background: hsl(var(--secondary) / 0.9) !important;
}

.sds .sds-footer-fineprint {
  color: hsl(var(--secondary-foreground) / 0.4) !important;
}

.sds .sds-footer-copyright {
  color: hsl(var(--secondary-foreground) / 0.3) !important;
}

/* login + form primitives (login.md). Same war, more elements: the theme's
   base layer styles h1/h2 (text-2xl/xl, font-medium, its own margins), p
   (text-slate-800), input[type=text|tel|number], textarea and button as its
   own design language with !important on every declaration — which would
   crush the hero type, paint the hero copy slate on the hero surface, and
   re-skin the field and submit button. Win the contested properties back in
   kind; values mirror the component rules above, keep them in step.
   (blockquote/label/form are styled WITHOUT !important, so our single-class
   rules already beat those element selectors — nothing to counter there.) */

.sds .sds-login-headline {
  margin: 0 !important;
  font-family: var(--font-primary) !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  color: hsl(var(--hero-foreground)) !important;
}

@media (min-width: 640px) {
  .sds .sds-login-headline { font-size: 60px !important; }
}

.sds .sds-login-headline-highlight {
  color: hsl(var(--hero-highlight)) !important;
}

.sds .sds-login-title {
  margin: 0 !important;
  font-family: var(--font-primary) !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  color: hsl(var(--secondary)) !important;
}

/* these all sit in flex containers whose gap owns the spacing */
.sds .sds-login-eyebrow,
.sds .sds-login-blurb,
.sds .sds-login-subtitle,
.sds .sds-login-footnote,
.sds .sds-login-underwriter,
.sds .sds-hint,
.sds .sds-error {
  margin: 0 !important;
}

/* the one paragraph with a margin of its own — restate it, don't zero it */
.sds .sds-login-attribution {
  margin: 1rem 0 0 !important;
}

.sds .sds-login-eyebrow { color: hsl(var(--hero-accent)) !important; }
.sds .sds-login-blurb { color: hsl(var(--hero-foreground) / 0.85) !important; }
.sds .sds-login-attribution { color: hsl(var(--hero-foreground) / 0.7) !important; }
.sds .sds-login-quote { font-family: var(--font-primary) !important; }

.sds .sds-login-subtitle,
.sds .sds-login-footnote,
.sds .sds-login-underwriter,
.sds .sds-hint {
  color: hsl(var(--muted-foreground)) !important;
}

.sds .sds-error { color: hsl(var(--destructive)) !important; }

.sds .sds-input {
  display: block !important;
  width: 100% !important;
  height: 2.5rem !important;
  margin: 0 !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 16px !important;
  color: hsl(var(--foreground)) !important;
  background: hsl(var(--background)) !important;
  border: 1px solid hsl(var(--input)) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  .sds .sds-input { font-size: 14px !important; }
}

.sds .sds-input:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)) !important;
}

.sds .sds-input[aria-invalid="true"] {
  border-color: hsl(var(--destructive)) !important;
}

.sds .sds-input[data-variant="pin"] {
  height: 3rem !important;
  padding-left: calc(0.75rem + 0.5em) !important;
  font-size: 20px !important;
}

.sds .sds-button {
  min-width: 0 !important;
  height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

.sds .sds-button-lg {
  height: 2.75rem !important;
  padding: 0.5rem 2rem !important;
}

.sds .sds-button-primary {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.sds .sds-button-primary:hover:not(:disabled) {
  background: hsl(var(--primary) / 0.9) !important;
}

.sds .sds-login-form .sds-button-primary {
  box-shadow: var(--shadow-hero) !important;
}

.sds .sds-button-block { width: 100% !important; }

/* a secondary action is a submit button too (resend the pin) */
.sds .sds-login-action {
  min-width: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: hsl(var(--muted-foreground)) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.sds .sds-login-action:hover {
  color: hsl(var(--foreground)) !important;
}