/* ═══════════════════════════════════════════════════════════
     HERO WORDMARK — live Sabre Shark text
     Crisp at every density, theme-aware, accessible.
     PNG version persists hidden so share-card renderer keeps working.
     ═══════════════════════════════════════════════════════════ */
  .hero-wordmark {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;     /* bar spans container cross-axis */
    width: fit-content;        /* container shrinks to text width → bar matches */
    max-width: 100%;           /* never overflow parent on narrow viewports */
    line-height: 1;
    padding: 24px 0 8px;
  }
  .hero-wordmark-text {
    font-family: 'Sabre Shark', 'Barlow Condensed', sans-serif;
    font-size: clamp(88px, 15vw, 220px);
    font-weight: 800;
    /* Solid accent green — confident single-color brand mark.
       Gradient story is carried by the spectrum bar beneath. */
    color: var(--accent);
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    /* Italic-overhang padding kept — Sabre Shark's M angular extension still
       clips against ancestor overflow:hidden without the extra right padding. */
    padding-right: 0.32em;
    overflow: visible;
    letter-spacing: 0.02em;
    line-height: 0.82;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Must match the global Sabre Shark suppression rule — class-specificity
       would otherwise let narrower feature lists win and reintroduce the
       decorative glyph substitutions (particularly the fina/swsh/aalt
       features that were adding a split M glyph). */
    font-feature-settings:
      "liga" 0, "dlig" 0, "clig" 0, "hlig" 0, "rlig" 0,
      "calt" 0, "salt" 0, "aalt" 0, "nalt" 0,
      "swsh" 0, "cswh" 0, "ornm" 0, "titl" 0,
      "init" 0, "medi" 0, "fina" 0, "isol" 0,
      "case" 0, "cpsp" 0,
      "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0, "ss05" 0, "ss06" 0,
      "ss07" 0, "ss08" 0, "ss09" 0, "ss10" 0, "ss11" 0, "ss12" 0,
      "ss13" 0, "ss14" 0, "ss15" 0, "ss16" 0, "ss17" 0, "ss18" 0,
      "ss19" 0, "ss20" 0;
    font-variant-ligatures: none;
    font-variant-alternates: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-position: normal;
    /* Reveal animation — once per session, gated by html.brand-reveal */
    opacity: 1;
  }
  html.brand-reveal .hero-wordmark-text {
    animation: wordmarkReveal 0.85s cubic-bezier(0.2, 1, 0.3, 1) 0.15s both;
  }
  html.brand-reveal .hero-wordmark-bar {
    animation: barDrawIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.05s both;
    transform-origin: left center;
  }
  @keyframes wordmarkReveal {
    from { opacity: 0; transform: translateY(8px) scale(0.985); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0)   scale(1);     filter: blur(0);   }
  }
  @keyframes barDrawIn {
    from { transform: scaleX(0);    opacity: 0; }
    30%  {                           opacity: 1; }
    to   { transform: scaleX(0.92); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.brand-reveal .hero-wordmark-text,
    html.brand-reveal .hero-wordmark-bar { animation: none; }
  }
  .hero-wordmark-bar {
    width: 100%;
    height: 10px;
    /* ── Length control via scaleX ──
       margin-right doesn't work here because .hero-wordmark is a fit-content
       flex container — adding right-margin to a 100%-wide child causes the
       container to grow to accommodate it, which expands the bar's 100% in
       response. scaleX doesn't affect layout at all: the bar's visual width
       shrinks from the left origin while the container stays the same size.
       0.7 = 70% of text width. Tune from 0.5 (very short) to 1.0 (full). */
    transform: scaleX(0.92);
    transform-origin: left center;
    margin-top: 14px;
    background: linear-gradient(to right,
      #5878A0 0%,
      #1050D8 20%,
      #0098D0 40%,
      #00A888 60%,
      #229040 80%,
      #57BB46 100%);
    /* Trapezoid — slants reduced to match the slimmer 10px height */
    clip-path: polygon(
      0% 50%,
      10px 0%,
      calc(100% - 10px) 0%,
      100% 50%,
      calc(100% - 10px) 100%,
      10px 100%
    );
    filter: drop-shadow(0 0 18px rgba(87, 187, 70, 0.22));
  }
  .hero-wordmark-glow {
    position: absolute;
    bottom: -20px;
    left: -40px;
    right: -40px;
    height: 140px;
    background: radial-gradient(ellipse 80% 100% at 30% 0%,
      rgba(87, 187, 70, 0.28) 0%,
      rgba(87, 187, 70, 0.10) 45%,
      transparent 72%);
    pointer-events: none;
    filter: blur(22px);
    z-index: -1;
  }
  @media (max-width: 720px) {
    .hero-wordmark { padding: 16px 0 4px; max-width: 100%; }
    .hero-wordmark-text {
      font-size: clamp(56px, 18vw, 110px);
      letter-spacing: 0.01em;
      /* NO explicit width — let width: fit-content from the main rule stay
         active on mobile too. Forcing width: 100% here spreads the gradient
         across the full container width while the text only samples a slice
         of it, making the M fall in the wrong gradient zone. */
    }
    .hero-wordmark-bar {
      height: 7px;
      margin-top: 10px;
      clip-path: polygon(
        0% 50%,
        7px 0%,
        calc(100% - 7px) 0%,
        100% 50%,
        calc(100% - 7px) 100%,
        7px 100%
      );
    }
    .hero-wordmark-glow {
      height: 100px;
      /* Keep glow inside the container on mobile to prevent horizontal scroll */
      left: 0;
      right: 0;
    }
  }
  @media (max-width: 380px) {
    .hero-wordmark-text { font-size: clamp(48px, 19vw, 84px); }
  }

  /* ── Compact header wordmark — matches hero aesthetic, much smaller ── */
  .logo-wordmark-compact {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    line-height: 1;
    gap: 3px;
  }
  .logo-wordmark-sm {
    font-size: 15px !important;
    letter-spacing: 1.3px !important;
    line-height: 0.9 !important;
    /* Solid accent green — matches hero wordmark treatment across every surface. */
    color: var(--accent) !important;
    /* Italic-overhang padding — scaled for the smaller font size. */
    padding-right: 0.32em !important;
    text-shadow: none !important;
  }
  .logo-wordmark-bar {
    width: 100%;
    height: 3px;
    background: linear-gradient(to right,
      #5878A0 0%,
      #1050D8 20%,
      #0098D0 40%,
      #00A888 60%,
      #229040 80%,
      #57BB46 100%);
    /* Same trapezoid geometry as hero bar — narrow top, wide base. */
    clip-path: polygon(
      0% 50%,
      3px 0%,
      calc(100% - 3px) 0%,
      100% 50%,
      calc(100% - 3px) 100%,
      3px 100%
    );
    opacity: 0.9;
    /* Match the hero bar's 0.92 scale, anchored left. Harmonises the compact
       mark with the full hero wordmark across every touchpoint. */
    transform: scaleX(0.92);
    transform-origin: left center;
  }
  @media (max-width: 480px) {
    .logo-wordmark-sm { font-size: 13px !important; letter-spacing: 1.1px !important; }
    .logo-wordmark-bar {
      height: 2px;
      clip-path: polygon(
        0% 50%,
        2px 0%,
        calc(100% - 2px) 0%,
        100% 50%,
        calc(100% - 2px) 100%,
        2px 100%
      );
    }
  }

/* Input focus border (replaces inline onfocus/onblur on signInEmail) */
#signInEmail:focus, #signInPassword:focus, #ppassword:focus { border-color: var(--accent) !important; outline: none; }