/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
    :root {
      --bg: #f7f8fb;
      --surface: #ffffff;
      --text: #111827;
      --muted: #6b7280;
      --green: #10b981;
      --green-dark: #059669;
      --border: rgba(15, 23, 42, 0.08);
      --shadow: 0 24px 80px rgba(15, 23, 42, 0.08);
    }
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      scroll-behavior: smooth;
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    .page {
      overflow-x: hidden;
    }
    
    .site-header {
        position: sticky;
        top: 0;
        z-index: 10;

        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;

        padding: 12px 40px;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(15,23,42,0.08);
        -webkit-backdrop-filter: blur(18px);
    }

    /* On desktop the wrapper is transparent so nav-links and cta-header sit
       directly in the header grid (brand | nav | cta). It only becomes a real
       container in the mobile dropdown below. */
    .site-menu {
        display: contents;
    }

    /* Hamburger button: hidden on desktop, shown in the mobile media query. */
    .menu-toggle {
        display: none;
        justify-self: end;
        flex-direction: column;
        gap: 5px;
        padding: 8px;
        border: none;
        background: none;
        cursor: pointer;
    }
    .menu-toggle-bar {
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background: var(--text);
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    /* Morph the bars into an X when the menu is open (public header or admin
       shell — the .is-open class lives on whichever element holds the
       mobile-menu controller). */
    .is-open .menu-toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .is-open .menu-toggle-bar:nth-child(2) {
        opacity: 0;
    }
    .is-open .menu-toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .brand {
        justify-self: start;
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
        font-size: 1rem;
    }
    .brand-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: var(--green);
      display: grid;
      place-items: center;
      color: white;
      font-weight: 700;
    }
    .nav-links {
        justify-self: center;
        display: flex;
        gap: 32px;
        font-size: 0.95rem;
        color: var(--muted);
    }
    .nav-links a:hover {
      color: var(--text);
    }
    .cta-header {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 18px;
    }
    /* button_to renders a <form>; keep it inline so the logout button lines up
       with the rest of the header instead of stacking/adding margin. */
    .cta-header form {
        margin: 0;
        display: flex;
    }
    .btn-link {
        border: none;
        background: none;
        cursor: pointer;
        padding: 0;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--muted);
        transition: color 0.2s ease;
    }
    .btn-link:hover {
        color: var(--text);
    }
    .btn-primary {
      border: none;
      outline: none;
      cursor: pointer;
      border-radius: 999px;
      padding: 10px 20px;
      color: white;
      background: var(--green);
      font-weight: 600;
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      background: var(--green-dark);
    }
    .hero {
      position: relative;
      padding: 80px 24px 48px;
      min-height: calc(100vh - 96px);
      display: grid;
      gap: 24px;
      align-items: center;
      justify-items: center;
      text-align: center;
      background: radial-gradient(circle at top left, rgba(16,185,129,0.16), transparent 28%),
                  radial-gradient(circle at right, rgba(59,130,246,0.06), transparent 24%);
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.8), transparent 25%),
                        radial-gradient(circle at 80% 60%, rgba(15,23,42,0.05), transparent 25%);
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      max-width: 680px;
      z-index: 1;
      margin: 0 auto;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      padding: 10px 16px;
      border-radius: 999px;
      background: rgba(16,185,129,0.09);
      color: var(--green);
      font-size: 0.82rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 700;
    }
    .hero h1 {
      font-size: clamp(2.2rem, 4vw, 3rem);
      line-height: 1.04;
      margin: 0;
      letter-spacing: -0.035em;
    }
    .hero h1 em {
      font-style: normal;
      color: var(--green);
    }
    .hero p {
      max-width: 520px;
      margin: 16px auto 24px;
      color: var(--muted);
      font-size: 0.98rem;
      line-height: 1.7;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }
    .btn-secondary {
      border: 1px solid rgba(15,23,42,0.12);
      background: white;
      color: var(--text);
      border-radius: 999px;
      padding: 14px 24px;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .btn-secondary:hover {
      transform: translateY(-2px);
      border-color: rgba(15,23,42,0.2);
    }
    .hero-features {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 28px;
      position: relative;
      z-index: 1;
    }
    .feature-pill {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 20px;
      background: rgba(255,255,255,0.8);
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 16px;
      box-shadow: 0 12px 40px rgba(15,23,42,0.06);
    }
    .feature-pill span {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: rgba(16,185,129,0.12);
      color: var(--green);
      font-weight: 700;
    }
    .hero-background {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image: radial-gradient(circle at 70% 10%, rgba(59,130,246,0.1), transparent 22%),
                        radial-gradient(circle at 40% 90%, rgba(16,185,129,0.08), transparent 20%);
    }
    .how-it-works {
      padding: 64px 40px;
      display: grid;
      gap: 32px;
      background: white;
    }
    .how-it-works-header {
      max-width: 640px;
      margin: 0 auto;
      text-align: center;
    }
    .how-it-works-header h2 {
      margin: 0 0 16px;
      font-size: 0.95rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--green);
    }
    .how-it-works-header h3 {
      margin: 0;
      font-size: clamp(2rem, 3vw, 3rem);
      line-height: 1.05;
    }
    .how-it-works-header p {
      margin-top: 18px;
      color: var(--muted);
      line-height: 1.8;
    }
    .how-grid {
      display: grid;
      grid-template-columns: minmax(320px, 420px) 1fr;
      gap: 52px;
      align-items: center;
      max-width: 1140px;
      margin: 0 auto;
    }
    .phone-screen {
      max-width: 320px;   /* or whatever feels right */
      margin: 0 auto;
    }

    .phone-screen img {
      width: 100%;
      height: auto;
      border-radius: 26px;
    }
    .phone-placeholder {
      color: rgba(255,255,255,0.72);
      text-align: center;
      font-size: 0.95rem;
      line-height: 1.6;
      max-width: 240px;
      padding: 18px;
    }
    .steps-list {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 20px;
      min-height: 420px;
    }
    .step-card {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 18px;
      align-items: start;
    }
    .step-badge {
      width: 48px;
      height: 48px;
      border-radius: 16px;
      background: rgba(16,185,129,0.15);
      color: var(--green);
      display: grid;
      place-items: center;
      font-weight: 700;
      font-size: 1rem;
    }
    .step-heading {
      margin: 0 0 6px;
      font-size: 1.05rem;
      font-weight: 700;
    }
    .step-description {
      margin: 0;
      color: var(--muted);
      line-height: 1.75;
    }
    .contact-cta {
      padding: 70px 40px;
      background: #f8fafc;
      display: grid;
      gap: 28px;
      justify-items: center;
      text-align: center;
    }
    .flash-messages {
      width: 100%;
      max-width: 720px;
    }
    .flash {
      border-radius: 18px;
      padding: 18px 22px;
      font-weight: 600;
      border: 1px solid rgba(16,185,129,0.2);
      background: rgba(16,185,129,0.1);
      color: rgba(15,23,42,0.95);
    }
    .flash-alert {
      border-color: rgba(239,68,68,0.25);
      background: rgba(254,226,226,0.9);
      color: #991b1b;
    }
    .contact-form {
      width: 100%;
      max-width: 720px;
      display: grid;
      gap: 18px;
      text-align: left;
    }
    .form-group {
      display: grid;
      gap: 10px;
    }
    .form-group label {
      font-weight: 700;
      color: var(--text);
      font-size: 0.95rem;
    }
    .form-control {
      width: 100%;
      border: 1px solid rgba(15,23,42,0.12);
      border-radius: 18px;
      padding: 16px 18px;
      font-size: 1rem;
      color: var(--text);
      background: white;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .form-control:focus {
      outline: none;
      border-color: var(--green);
      box-shadow: 0 0 0 3px rgba(16,185,129,0.12);
    }
    .form-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }
    .form-actions--split {
      justify-content: space-between;
      align-items: center;
    }
    /* Keep every button in an action row the same height with vertically
       centered labels, regardless of each variant's base padding. */
    .form-actions .btn-primary,
    .form-actions .btn-secondary,
    .form-actions .btn-danger,
    .form-actions input[type="submit"] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 22px;
      line-height: 1.1;
    }
    .form-hint {
      margin: 0;
      color: var(--muted);
      font-size: 0.88rem;
      line-height: 1.5;
    }

    /* Campaign create/edit wizard (custom calendars + steps) */
    .campaign-wizard {
      display: grid;
      gap: 36px;
    }
    .campaign-wizard > [data-campaign-wizard-target="step"]:not([hidden]) {
      display: grid;
      gap: 22px;
    }
    .dp-step-label {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--green);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .wizard-error {
      margin: 0;
      color: #b91c1c;
      font-size: 0.9rem;
      font-weight: 600;
    }
    .form-actions-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .roster-picker {
      border: 1px solid rgba(15,23,42,0.12);
      border-radius: 18px;
      padding: 8px 18px 14px;
      background: white;
    }
    .dp-section {
      display: grid;
      gap: 10px;
    }
    .dp-section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .dp-section-head h3 {
      margin: 0;
      font-size: 1.02rem;
      font-weight: 700;
      color: var(--text);
    }
    .dp-section-summary {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--green);
    }
    .dp-toggle {
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
    }
    .dp-toggle input {
      width: 16px;
      height: 16px;
      accent-color: var(--green);
      cursor: pointer;
    }
    .dp-send-time:not([hidden]) {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .dp-send-time-label {
      font-weight: 600;
      color: var(--text);
      font-size: 0.95rem;
    }
    .dp-hour-select {
      width: auto;
      padding: 10px 14px;
    }
    .date-picker {
      border: 1px solid rgba(15,23,42,0.12);
      border-radius: 18px;
      padding: 18px 20px 22px;
      background: white;
      max-width: 480px;
      margin: 4px auto 0;
    }
    .dp-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }
    .dp-month {
      font-weight: 700;
      color: var(--text);
      font-size: 1.08rem;
    }
    .dp-nav {
      border: 1px solid rgba(15,23,42,0.12);
      background: white;
      border-radius: 10px;
      width: 38px;
      height: 38px;
      font-size: 1.25rem;
      line-height: 1;
      color: var(--text);
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
    }
    .dp-nav:hover:not(:disabled) {
      background: rgba(16,185,129,0.08);
      border-color: var(--green);
    }
    .dp-nav:disabled {
      opacity: 0.35;
      cursor: default;
    }
    .dp-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }
    .dp-dow {
      text-align: center;
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--muted);
      padding-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .dp-cell {
      aspect-ratio: 1 / 1;
      min-height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .dp-day {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      background: transparent;
      border-radius: 12px;
      font: inherit;
      font-size: 1rem;
      line-height: 1;
      color: var(--text);
      cursor: pointer;
      transition: background 0.12s ease, color 0.12s ease;
    }
    button.dp-day:hover {
      background: rgba(16,185,129,0.12);
    }
    .dp-day--today {
      font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(16,185,129,0.35);
    }
    .dp-day--in-range {
      background: rgba(16,185,129,0.12);
      border-radius: 0;
    }
    .dp-day--start,
    .dp-day--end {
      background: var(--green);
      color: white;
      font-weight: 700;
    }
    button.dp-day--start:hover,
    button.dp-day--end:hover {
      background: var(--green);
    }
    .dp-day--start {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .dp-day--end {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .dp-day--start.dp-day--end {
      border-radius: 12px;
    }
    .dp-day--disabled {
      color: rgba(15,23,42,0.25);
      cursor: default;
    }
    .btn-danger {
      border: 1px solid rgba(239,68,68,0.25);
      background: rgba(254,226,226,0.6);
      color: #b91c1c;
      border-radius: 999px;
      padding: 10px 20px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .btn-danger:hover {
      transform: translateY(-2px);
      background: rgba(254,202,202,0.8);
    }
    .contact-cta h2 {
      margin: 0 0 16px;
      font-size: clamp(2rem, 3vw, 3rem);
    }
    .contact-cta p {
      margin: 0;
      max-width: 680px;
      color: var(--muted);
      line-height: 1.8;
    }
    .small-features {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px;
      margin-top: 40px;
    }
    .small-feature {
      background: white;
      border: 1px solid var(--border);
      border-radius: 18px;
      padding: 18px 20px;
      min-width: 220px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .small-feature-icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: rgba(16,185,129,0.14);
      display: grid;
      place-items: center;
      color: var(--green);
      font-weight: 700;
    }
    .speiry-heading {
      font-size: clamp(4.5rem, 7vw, 5.5rem);
      font-weight: 800;
      margin: 0 0 24px;
      color: var(--green);
      letter-spacing: -0.02em;
    }
    .site-footer {
      border-top: 1px solid rgba(15,23,42,0.08);
      background: white;
      padding: 24px 40px;
      margin-top: 60px;
    }

    .footer-content {
      max-width: 1140px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.9rem;
      color: var(--muted);
    }

    .footer-links {
      display: flex;
      gap: 24px;
    }

    .footer-links a:hover {
      color: var(--text);
    }

    .legal-wrapper {
    padding: 80px 24px;
    background: radial-gradient(circle at top left, rgba(16,185,129,0.12), transparent 30%);
    
    display: flex;
    flex-direction: column;
    align-items: center; /* 👈 this centers everything */
    }

    .legal-card {
    width: 100%;
    max-width: 820px;  /* 👈 controls readable width */
    margin: 0 auto;    /* 👈 backup centering */
    }

    .legal-hero {
      text-align: center;
      margin-bottom: 40px;
    }

    .legal-hero h1 {
      font-size: clamp(2.5rem, 4vw, 3.5rem);
      margin: 0;
      letter-spacing: -0.03em;
    }

    .legal-updated {
      margin-top: 12px;
      color: var(--muted);
    }

    .legal-card p {
    margin: 0;
    line-height: 1.75;
    color: #374151;
    }

    .legal-card > p + p {
    margin-top: 16px;
    }

    /* Section spacing */
    .legal-section {
    margin-top: 32px;
    }

    /* Headings */
    .legal-section h2 {
    margin: 0 0 10px;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    }

    .legal-section h3 {
    margin: 12px 0 6px;
    font-size: 0.95rem;
    color: #6b7280;
    font-weight: 600;
    }

    /* Lists */
    .legal-section ul {
    margin: 12px 0 0;
    padding-left: 18px;
    }

    .legal-section li {
    margin-bottom: 6px;
    color: #4b5563;
    }

    /* Remove ugly default HR spacing */
    .legal-card hr {
    display: none;
    }
    @media (max-width: 1024px) {
      .site-header, .cta-header, .hero, .how-it-works, .contact-cta {
        padding-left: 24px;
        padding-right: 24px;
      }
    }
    @media (max-width: 820px) {
      /* Switch the header from a 3-column grid to a simple bar with the brand
         on the left and the hamburger on the right. */
      .site-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .site-header .menu-toggle {
        display: flex;
      }
      /* The wrapper becomes a real dropdown panel that slides under the bar. */
      .site-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding: 20px 24px 24px;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(15,23,42,0.08);
        box-shadow: 0 16px 32px rgba(15,23,42,0.08);
      }
      .site-header.is-open .site-menu {
        display: flex;
      }
      .site-menu .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
      }
      .site-menu .nav-links a {
        padding: 10px 0;
      }
      .site-menu .cta-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }
      .site-menu .cta-header form,
      .site-menu .cta-header form .btn-link,
      .site-menu .cta-header .btn-primary,
      .site-menu .cta-header .btn-link {
        width: 100%;
      }
      .site-menu .cta-header .btn-link {
        padding: 12px 0;
      }
      .how-grid {
        grid-template-columns: 1fr;
      }
      .phone-screen {
        max-width: 100%;
        margin: 0 auto;
      }
      .steps-list {
        min-height: auto;
      }
      .hero-features {
        grid-template-columns: 1fr;
      }
    }
    .btn-primary:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        background: #94a3b8 !important; /* overrides green */
        box-shadow: none;
    }   
    .sms-opt-in-section {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .opt-in-header {
        text-align: center;
        max-width: 520px;
        margin: 0 auto 24px;
    }

    /* Tokenized SMS opt-in confirmation page (from the invite email).
       Three vertical zones: welcome at top, consent text centered, button
       at the bottom middle. */
    .opt-in-confirm {
        min-height: calc(100vh - 96px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 48px 24px;
        background: radial-gradient(circle at top left, rgba(16,185,129,0.12), transparent 30%);
    }
    .opt-in-confirm__hero {
        text-align: center;
    }
    .opt-in-confirm__hero h1 {
        font-size: clamp(2.5rem, 4vw, 3.5rem);
        margin: 0;
        letter-spacing: -0.03em;
    }
    .opt-in-confirm__body {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 620px;
        text-align: center;
        line-height: 1.6;
        color: #374151;
    }
    .opt-in-confirm__body p {
        margin: 0;
    }
    .opt-in-confirm__actions {
        display: flex;
        justify-content: center;
    }

    /* Auth (login / password reset) */
    .auth-wrapper {
        min-height: calc(100vh - 96px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px 24px;
        background: radial-gradient(circle at top left, rgba(16,185,129,0.16), transparent 28%),
                    radial-gradient(circle at right, rgba(59,130,246,0.06), transparent 24%);
    }
    .auth-card {
        width: 100%;
        max-width: 420px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        box-shadow: var(--shadow);
        padding: 40px;
    }
    .auth-header {
        text-align: center;
        margin-bottom: 28px;
    }
    .auth-header .brand-icon {
        margin: 0 auto 16px;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 1.15rem;
    }
    .auth-header h1 {
        margin: 0 0 6px;
        font-size: 1.6rem;
        letter-spacing: -0.02em;
    }
    .auth-header p {
        margin: 0;
        color: var(--muted);
        font-size: 0.95rem;
    }
    .auth-form {
        display: grid;
        gap: 18px;
    }
    .auth-submit {
        width: 100%;
        padding: 14px;
        margin-top: 4px;
        font-size: 1rem;
    }
    .auth-card .flash {
        margin-bottom: 18px;
    }
    .auth-footer {
        margin-top: 20px;
        text-align: center;
        font-size: 0.9rem;
        color: var(--muted);
    }
    .auth-footer a {
        color: var(--green);
        font-weight: 600;
    }
    .auth-footer a:hover {
        color: var(--green-dark);
    }

    /* Admin shell (sidebar layout shown when logged in) */
    .admin-shell {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    .admin-topbar-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .admin-topbar {
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 28px;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--border);
    }
    .admin-body {
        display: flex;
        flex: 1;
        min-height: 0;
    }
    .sidebar {
        position: sticky;
        top: 61px;
        align-self: flex-start;
        flex-shrink: 0;
        width: 240px;
        height: calc(100vh - 61px);
        overflow-y: auto;
        padding: 24px 16px;
        background: var(--surface);
        border-right: 1px solid var(--border);
    }
    .sidebar-label {
        margin: 0 0 12px;
        padding: 0 14px;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--muted);
    }
    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .sidebar-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 14px;
        border-radius: 12px;
        color: var(--muted);
        font-weight: 600;
        font-size: 0.95rem;
        transition: background 0.15s ease, color 0.15s ease;
    }
    .sidebar-link svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }
    .sidebar-link:hover {
        background: rgba(15,23,42,0.04);
        color: var(--text);
    }
    .sidebar-link.is-active {
        background: rgba(16,185,129,0.12);
        color: var(--green-dark);
    }
    .admin-main {
        flex: 1;
        min-width: 0;
    }
    @media (max-width: 720px) {
        .admin-body {
            flex-direction: column;
        }
        /* Show the hamburger and turn the sidebar into a dropdown panel that
           overlays under the topbar — same pattern as the public site. */
        .admin-menu-toggle {
            display: flex;
        }
        .sidebar {
            display: none;
            position: absolute;
            top: 61px;
            left: 0;
            right: 0;
            z-index: 9;
            width: 100%;
            height: auto;
            padding: 12px 16px 16px;
            border-right: none;
            border-bottom: 1px solid var(--border);
            background: rgba(255,255,255,0.98);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            box-shadow: 0 16px 32px rgba(15,23,42,0.08);
        }
        .admin-shell.is-open .sidebar {
            display: block;
        }
        .sidebar-nav {
            flex-direction: column;
        }
        /* Reclaim horizontal space on phones — the big top/side padding wastes
           room that the lists and panels can use. */
        .manage-wrapper,
        .users-wrapper {
            padding: 28px 16px 56px;
        }
        /* Panel heads put a title on the left and an action button on the right.
           With no wrapping the button was pushed past the panel edge and clipped
           (the panel has overflow:hidden). Stack them so the button drops onto
           its own line and spans the width. Covers "New employee",
           "Create campaign", and "Add employees". */
        .users-panel-head {
            flex-wrap: wrap;
            padding: 18px 20px;
        }
        .users-panel-head > .btn-primary,
        .users-panel-head > form {
            width: 100%;
        }
        .users-panel-head > form .btn-primary,
        .users-panel-head > form input[type="submit"] {
            width: 100%;
        }
        /* The collapse toggle keeps its title row from spanning full width, so a
           wrapped button would sit oddly; let the left group grow to fill. */
        .panel-head-left {
            flex: 1;
            min-width: 0;
        }
        /* Wizard / form button rows: let them wrap and fill so "Cancel", "Next",
           "Save changes", etc. are never pushed off-screen in Edit campaign. */
        .form-actions,
        .form-actions--split {
            flex-wrap: wrap;
        }
        .panel-padded {
            padding: 20px;
        }
        /* Tighten the calendar so the 7-column grid fits a narrow screen. */
        .date-picker {
            padding: 14px 10px 16px;
        }
        .dp-grid {
            gap: 3px;
        }
        /* The cells use aspect-ratio + min-height, which transfers a ~40px
           automatic *min-width* to every cell. Seven of those overflow a narrow
           phone and clipped the right side of steps 1 & 2. min-width:0 lets the
           1fr columns shrink to fit; min-height keeps them tappable. */
        .dp-cell {
            min-height: 40px;
            min-width: 0;
        }
    }

    /* Manage dashboard */
    .manage-wrapper {
        min-height: calc(100vh - 61px);
        padding: 56px 24px 80px;
        background: radial-gradient(circle at top left, rgba(16,185,129,0.14), transparent 30%),
                    radial-gradient(circle at right, rgba(59,130,246,0.05), transparent 24%);
    }
    .manage-container {
        width: 100%;
        max-width: 880px;
        margin: 0 auto;
    }
    .manage-header {
        margin-bottom: 32px;
    }
    .manage-header h1 {
        margin: 14px 0 6px;
        font-size: clamp(1.9rem, 3vw, 2.4rem);
        letter-spacing: -0.03em;
    }
    .manage-header p {
        margin: 0;
        color: var(--muted);
        font-size: 0.98rem;
    }
    .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }
    .dashboard-card {
        display: grid;
        gap: 6px;
        padding: 24px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 20px;
        box-shadow: var(--shadow);
        transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .dashboard-card:hover {
        transform: translateY(-3px);
        border-color: rgba(16,185,129,0.35);
    }
    .dashboard-card-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        margin-bottom: 8px;
        background: rgba(16,185,129,0.14);
        color: var(--green-dark);
        display: grid;
        place-items: center;
    }
    .dashboard-card-icon svg {
        width: 22px;
        height: 22px;
    }
    .dashboard-card-title {
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--text);
    }
    .dashboard-card-desc {
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Users (team directory) */
    .users-wrapper {
        min-height: calc(100vh - 61px);
        padding: 56px 24px 80px;
        background: radial-gradient(circle at top left, rgba(16,185,129,0.14), transparent 30%),
                    radial-gradient(circle at right, rgba(59,130,246,0.05), transparent 24%);
    }
    .users-container {
        width: 100%;
        max-width: 880px;
        margin: 0 auto;
    }
    .users-header {
        text-align: center;
        margin-bottom: 32px;
    }
    .users-header h1 {
        margin: 14px 0 6px;
        font-size: clamp(2rem, 3vw, 2.6rem);
        letter-spacing: -0.03em;
    }
    .users-header p {
        margin: 0;
        color: var(--muted);
        font-size: 0.98rem;
    }
    .users-container .flash {
        margin-bottom: 18px;
    }
    .users-panel {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 24px;
        box-shadow: var(--shadow);
        overflow: hidden;
    }
    .deactivated-toggle {
        display: flex;
        justify-content: center;
        margin: 24px 0;
    }
    .deactivated-panel {
        margin-top: 20px;
    }
    .users-panel--muted {
        background: rgba(15,23,42,0.02);
        box-shadow: none;
    }
    .users-panel--muted .user-avatar {
        background: rgba(15,23,42,0.06);
        color: var(--muted);
    }
    .users-panel--muted .user-name {
        color: var(--muted);
    }
    .users-container--narrow {
        max-width: 560px;
    }
    .panel-padded {
        padding: 28px;
    }
    .users-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 22px 28px;
        border-bottom: 1px solid var(--border);
    }
    .panel-head-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .detail-list {
        margin: 0 0 24px;
        display: grid;
        gap: 4px;
    }
    .detail-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
    }
    .detail-row:last-child {
        border-bottom: none;
    }
    .detail-row dt {
        color: var(--muted);
        font-size: 0.9rem;
        font-weight: 600;
    }
    .detail-row dd {
        margin: 0;
        font-weight: 600;
        color: var(--text);
    }
    .users-panel-head h2 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 700;
    }
    .count-pill {
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(16,185,129,0.1);
        color: var(--green-dark);
        font-size: 0.82rem;
        font-weight: 700;
    }
    .user-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .user-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 20px;
        padding: 18px 28px;
        border-bottom: 1px solid var(--border);
        transition: background 0.15s ease;
        text-decoration: none;
        color: inherit;
    }
    .user-list li:last-child .user-row {
        border-bottom: none;
    }
    .user-row:hover {
        background: rgba(16,185,129,0.04);
    }
    .user-identity {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }
    .user-avatar {
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        background: rgba(16,185,129,0.14);
        color: var(--green-dark);
        display: grid;
        place-items: center;
        font-weight: 700;
        font-size: 0.9rem;
    }
    .user-name-block {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    .user-name {
        font-weight: 600;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user-email {
        font-size: 0.85rem;
        color: var(--muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .user-phone {
        color: var(--muted);
        font-size: 0.92rem;
        font-variant-numeric: tabular-nums;
    }
    .role-badge {
        padding: 6px 14px;
        border-radius: 999px;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.02em;
    }
    .role-badge--admin {
        background: rgba(16,185,129,0.12);
        color: var(--green-dark);
    }
    .role-badge--employee {
        background: rgba(15,23,42,0.06);
        color: var(--muted);
    }
    .user-contact {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
        text-align: right;
    }
    .sms-hint {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }
    .sms-hint--in {
        color: var(--green-dark);
    }
    .sms-hint--out {
        color: #b91c1c;
    }
    .sms-detail {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .inline-form {
        margin: 0;
    }
    .opt-in-warning {
        color: #d97706;
        font-size: 0.9rem;
        cursor: help;
        line-height: 1;
    }
    .btn-inline {
        padding: 6px 14px;
        font-size: 0.8rem;
    }
    .users-empty {
        padding: 48px 28px;
        text-align: center;
        color: var(--muted);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }
    .users-empty p {
        margin: 0;
    }

    /* Campaigns (admin directory) */
    .campaign-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .campaign-row {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(max-content, 0.9fr) max-content max-content;
        align-items: center;
        gap: 24px;
        padding: 20px 28px;
        border-bottom: 1px solid var(--border);
        text-decoration: none;
        color: inherit;
        transition: background 0.15s ease;
    }
    .campaign-row:hover {
        background: rgba(16,185,129,0.04);
    }
    .campaign-list li:last-child .campaign-row {
        border-bottom: none;
    }
    .campaign-main {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .campaign-title-block {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
    }
    .campaign-name {
        font-weight: 600;
        font-size: 1.02rem;
        color: var(--text);
        overflow-wrap: anywhere;
        line-height: 1.25;
    }
    .campaign-dates {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        flex-shrink: 0;
        text-align: left;
        color: var(--muted);
        font-size: 0.88rem;
    }
    .campaign-date-item {
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
    .campaign-date-item--primary {
        color: var(--text);
        font-size: 0.95rem;
        font-weight: 600;
    }
    .campaign-date-item--due {
        color: var(--muted);
        font-size: 0.78rem;
    }
    .campaign-date-item--send {
        color: var(--green);
        font-size: 0.78rem;
        font-weight: 600;
    }
    .campaign-date-label {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.68rem;
        margin-right: 6px;
        color: var(--muted);
    }
    .status-badge {
        padding: 5px 12px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }
    .status-badge--draft {
        background: rgba(15,23,42,0.06);
        color: var(--muted);
    }
    .status-badge--active {
        background: rgba(16,185,129,0.14);
        color: var(--green-dark);
    }
    .status-badge--closed {
        background: rgba(239,68,68,0.12);
        color: #b91c1c;
    }
    .campaign-stats {
        display: flex;
        gap: 28px;
        flex-shrink: 0;
    }
    .campaign-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    .campaign-stat-value {
        font-size: 1.3rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1.1;
    }
    .campaign-stat-label {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
    }
    .campaign-stat--confirmed .campaign-stat-value {
        color: var(--green-dark);
    }
    .campaign-stat--received .campaign-stat-value {
        color: #2563eb;
    }
    .campaign-stat--awaiting .campaign-stat-value {
        color: var(--text);
    }
    @media (max-width: 640px) {
        .campaign-row {
            grid-template-columns: 1fr;
            align-items: flex-start;
            gap: 14px;
        }
        .campaign-stats {
            gap: 24px;
            align-self: stretch;
        }
        .campaign-stat {
            align-items: flex-start;
        }
    }
    @media (max-width: 640px) {
        .user-row {
            grid-template-columns: 1fr auto;
            gap: 8px 16px;
        }
        .user-contact {
            grid-column: 1 / -1;
            order: 3;
            align-items: flex-start;
            text-align: left;
            padding-left: 56px;
        }
    }

    /* ===== Campaign detail page ===== */
    .back-link {
        display: inline-block;
        margin-bottom: 10px;
        color: var(--muted);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 600;
    }
    .back-link:hover {
        color: var(--green-dark);
    }
    .campaign-detail-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
        padding: 24px 28px;
        margin-bottom: 18px;
    }
    .campaign-detail-summary {
        display: flex;
        align-items: center;
        gap: 18px;
    }
    .campaign-detail-dates {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .campaign-detail-schedule {
        font-weight: 600;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }
    .campaign-detail-due {
        font-size: 0.78rem;
        color: var(--muted);
        font-variant-numeric: tabular-nums;
    }
    .campaign-detail-send {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--green);
        font-variant-numeric: tabular-nums;
    }
    .campaign-detail-tz {
        font-size: 0.74rem;
        color: var(--muted);
        margin-top: 2px;
    }

    /* Launch bar (draft only) */
    .launch-bar {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 20px 24px;
        margin-bottom: 18px;
        background: rgba(16,185,129,0.06);
        border: 1px solid rgba(16,185,129,0.2);
        border-radius: 20px;
    }
    .launch-bar-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .launch-bar--ended {
        background: rgba(245,158,11,0.08);
        border-color: rgba(245,158,11,0.25);
    }
    .launch-bar--live {
        background: rgba(59,130,246,0.06);
        border-color: rgba(59,130,246,0.22);
    }
    .launch-bar-help--warn {
        color: #b45309;
        font-weight: 600;
    }
    .launch-bar h2 {
        margin: 0;
        font-size: 1.02rem;
        font-weight: 700;
    }
    .launch-bar p,
    .launch-bar-help {
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;
    }
    .campaign-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 24px;
    }
    .campaign-actions-form {
        margin: 0;
    }
    /* Keep the Edit link and Delete button the same height despite their
       different base padding (mirrors .form-actions). */
    .campaign-actions .btn-secondary,
    .campaign-actions .btn-danger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 22px;
        line-height: 1.1;
    }
    .launch-bar-form {
        margin: 0;
    }
    .launch-bar-actions {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Roster / responses list */
    .roster-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .roster-row {
        display: grid;
        grid-template-columns: minmax(180px, 1fr) minmax(0, 1.6fr) auto;
        align-items: center;
        gap: 20px;
        padding: 18px 28px;
        border-bottom: 1px solid var(--border);
    }
    .roster-list li:last-child .roster-row {
        border-bottom: none;
    }
    .roster-identity {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }
    .roster-availability {
        min-width: 0;
        color: var(--text);
        font-size: 0.9rem;
    }
    .slot-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .slot-list li {
        font-variant-numeric: tabular-nums;
    }
    .slot-empty {
        color: var(--muted);
        font-size: 0.85rem;
    }
    .roster-status {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px 10px;
    }
    .roster-optin {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
        line-height: 1.2;
    }
    .link-button {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: var(--green-dark);
        font-size: 0.74rem;
        font-weight: 600;
    }
    .link-button:hover {
        text-decoration: underline;
    }
    .response-status {
        padding: 5px 12px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .response-status--requested {
        background: rgba(15,23,42,0.06);
        color: var(--muted);
    }
    .response-status--received {
        background: rgba(37,99,235,0.12);
        color: #2563eb;
    }
    .response-status--confirmed {
        background: rgba(16,185,129,0.14);
        color: var(--green-dark);
    }
    .roster-remove-form {
        margin: 0;
    }
    .roster-remove {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--muted);
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
        transition: all 0.15s ease;
    }
    .roster-remove:hover {
        background: rgba(239,68,68,0.1);
        border-color: rgba(239,68,68,0.3);
        color: #dc2626;
    }

    /* Add-employees modal */
    dialog.modal {
        width: min(440px, 92vw);
        border: none;
        border-radius: 20px;
        padding: 24px;
        box-shadow: var(--shadow);
        color: var(--text);
    }
    dialog.modal::backdrop {
        background: rgba(15,23,42,0.45);
    }
    .modal-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    .modal-head h3 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
    }
    .modal-close {
        border: none;
        background: none;
        font-size: 1.4rem;
        line-height: 1;
        color: var(--muted);
        cursor: pointer;
    }
    .modal-select-all {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        font-weight: 600;
        border-bottom: 1px solid var(--border);
    }
    .modal-employee-list {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 320px;
        overflow-y: auto;
    }
    .modal-employee {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
    }
    .modal-employee:last-child {
        border-bottom: none;
    }
    .modal-employee .user-email {
        margin-left: auto;
        color: var(--muted);
        font-size: 0.85rem;
    }
    .modal-empty {
        color: var(--muted);
        padding: 8px 0 16px;
    }
    .modal-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 18px;
    }
    @media (max-width: 640px) {
        /* Two columns: identity on the left, status (incl. the × remove button
           and response badge) pinned to the far right of the top row.
           Availability drops to a full-width second row underneath. */
        .roster-row {
            grid-template-columns: 1fr auto;
            column-gap: 12px;
            row-gap: 10px;
            align-items: start;
        }
        .roster-identity {
            grid-column: 1;
            grid-row: 1;
        }
        .roster-status {
            grid-column: 2;
            grid-row: 1;
            justify-content: flex-end;
        }
        .roster-availability {
            grid-column: 1 / -1;
            grid-row: 2;
        }
    }

    /* ===== Collapsible panels ===== */
    .collapse-toggle {
        border: none;
        background: none;
        cursor: pointer;
        padding: 2px 4px;
        margin-right: 2px;
        color: var(--muted);
        display: inline-flex;
        align-items: center;
    }
    .collapse-chevron {
        font-size: 0.8rem;
        transition: transform 0.15s ease;
    }
    .collapse-chevron.is-collapsed {
        transform: rotate(-90deg);
    }

    /* ===== Availability calendar ===== */
    .cal-legend {
        display: flex;
        gap: 16px;
        font-size: 0.8rem;
        color: var(--muted);
        flex-wrap: wrap;
    }
    .cal-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .cal-swatch {
        width: 18px;
        height: 14px;
        border-radius: 4px;
        display: inline-block;
        box-sizing: border-box;
    }
    /* Swatches mirror the actual event styling: confirmed is a solid filled
       card, awaiting is a dashed outline — colour on real events is per person. */
    .cal-swatch--confirmed {
        background: #e2e8f0;
        border: 1px solid #64748b;
        box-shadow: inset 0 0 0 1.5px rgba(15,23,42,0.15);
    }
    .cal-swatch--pending {
        background: rgba(15,23,42,0.03);
        border: 1px dashed #94a3b8;
    }
    .calendar-pager-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 14px 20px 4px;
    }
    .cal-nav {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid var(--border);
        background: var(--surface);
        color: var(--text);
        cursor: pointer;
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    }
    .cal-nav:hover:not(:disabled) {
        background: rgba(16,185,129,0.08);
        border-color: var(--green);
    }
    .cal-nav:active:not(:disabled) {
        transform: scale(0.94);
    }
    .cal-nav:disabled {
        opacity: 0.4;
        cursor: default;
    }
    .cal-week-label {
        font-weight: 600;
        font-size: 0.92rem;
        min-width: 180px;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .calendar-week {
        margin: 8px 20px 20px;
        max-height: 520px;
        overflow: auto;
        border: 1px solid var(--border);
        border-radius: 14px;
    }
    .calendar {
        display: grid;
        grid-template-columns: 56px repeat(7, minmax(0, 1fr));
        min-width: 640px;
    }
    .cal-corner {
        position: sticky;
        top: 0;
        left: 0;
        background: var(--surface);
        z-index: 4;
        border-bottom: 1px solid var(--border);
    }
    .cal-day-head {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--surface);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 4px 10px;
        border-bottom: 1px solid var(--border);
    }
    .cal-dow {
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-weight: 700;
        color: var(--muted);
    }
    .cal-date {
        font-weight: 600;
        font-size: 0.9rem;
        font-variant-numeric: tabular-nums;
    }
    .cal-gutter {
        position: sticky;
        left: 0;
        background: var(--surface);
        z-index: 2;
        border-right: 1px solid var(--border);
    }
    .cal-hour {
        height: var(--cal-hour);
    }
    .cal-hour span {
        display: block;
        font-size: 0.66rem;
        color: var(--muted);
        text-align: right;
        padding: 2px 8px 0 0;
        font-variant-numeric: tabular-nums;
    }
    .cal-day-col {
        position: relative;
        height: var(--cal-body-height);
        border-right: 1px solid var(--border);
        background-image: repeating-linear-gradient(
            to bottom,
            var(--border),
            var(--border) 1px,
            transparent 1px,
            transparent var(--cal-hour)
        );
    }
    .cal-event {
        position: absolute;
        border-radius: 8px;
        padding: 3px 7px;
        overflow: hidden;
        box-sizing: border-box;
        border: 1px solid transparent;
        line-height: 1.2;
        cursor: default;
        box-shadow: 0 1px 2px rgba(15,23,42,0.06);
        transition: box-shadow 0.12s ease, transform 0.12s ease;
    }
    .cal-event:hover {
        box-shadow: 0 4px 10px rgba(15,23,42,0.16);
        transform: translateY(-1px);
        z-index: 5;
    }
    .cal-event-initials {
        display: flex;
        align-items: center;
        gap: 3px;
        font-weight: 700;
        font-size: 0.72rem;
        white-space: nowrap;
    }
    .cal-event-time {
        display: block;
        font-size: 0.62rem;
        opacity: 0.85;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Awaiting confirmation: dashed outline + faint diagonal hatch so it reads as
       "provisional" at a glance, distinct from the solid confirmed cards. */
    .cal-event--pending {
        border-style: dashed;
        opacity: 0.92;
        background-image: repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.35),
            rgba(255,255,255,0.35) 4px,
            transparent 4px,
            transparent 8px
        );
    }
    .cal-event--confirmed {
        box-shadow: inset 0 0 0 1.5px rgba(15,23,42,0.16), 0 1px 2px rgba(15,23,42,0.08);
    }
    .cal-color-0 { background: #d1fae5; color: #065f46; border-color: #34d399; }
    .cal-color-1 { background: #dbeafe; color: #1e40af; border-color: #60a5fa; }
    .cal-color-2 { background: #fef3c7; color: #92400e; border-color: #fbbf24; }
    .cal-color-3 { background: #ede9fe; color: #5b21b6; border-color: #a78bfa; }
    .cal-color-4 { background: #ffe4e6; color: #9f1239; border-color: #fb7185; }
    .cal-color-5 { background: #cffafe; color: #155e75; border-color: #22d3ee; }
    .cal-color-6 { background: #ffedd5; color: #9a3412; border-color: #fb923c; }
    .cal-color-7 { background: #ecfccb; color: #3f6212; border-color: #a3e635; }

    /* ----- Calendar on small screens ----- */
    @media (max-width: 720px) {
        /* The legend used to sit to the right of the title and collide with it
           once there wasn't room. Stack the calendar panel head so the legend
           drops onto its own full-width line under "Availability calendar". */
        .calendar-panel .users-panel-head {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
        .cal-legend {
            width: 100%;
        }
        /* Reclaim horizontal room for the grid — the scroll container and pager
           don't need desktop-sized side gutters on a phone. */
        .calendar-week {
            margin: 8px 12px 16px;
        }
        .calendar-pager-bar {
            padding: 12px 12px 4px;
            gap: 12px;
        }
        .cal-week-label {
            min-width: 0;
            flex: 1;
        }
        /* Comfortable thumb targets for week navigation on touch screens. */
        .cal-nav {
            width: 42px;
            height: 42px;
            font-size: 1.05rem;
        }
        /* Single-day mode: the pager collapses the 7-column week to one full-width
           day (gutter + one day), so no cramped columns or horizontal scroll. The
           JS hides the other six day heads/columns; this drops the 640px min-width
           the week grid uses and sizes the grid to just the gutter + one day. */
        .calendar.is-day-mode {
            grid-template-columns: 56px minmax(0, 1fr);
            min-width: 0;
        }
        .cal-day-head[hidden],
        .cal-day-col[hidden] {
            display: none;
        }
    }

    /* ============================================================
       Landing: "How it works" flow timeline
       ============================================================ */
    .flow-diagram {
      padding: 72px 40px 24px;
      display: grid;
      gap: 44px;
      background: white;
    }
    .flow-header {
      max-width: 640px;
      margin: 0 auto;
      text-align: center;
    }
    .flow-header h2 {
      margin: 0 0 16px;
      font-size: 0.95rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--green);
    }
    .flow-header h3 {
      margin: 0;
      font-size: clamp(2rem, 3vw, 3rem);
      line-height: 1.05;
    }
    .flow-header p {
      margin-top: 18px;
      color: var(--muted);
      line-height: 1.7;
    }
    .flow-track {
      list-style: none;
      margin: 0 auto;
      padding: 0;
      max-width: 1040px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      /* Four shared rows — step label / title / icon / description. Every node
         is a subgrid spanning these rows, so the labels line up in one row, the
         icons in the next, and the descriptions in the last, across all three
         columns regardless of how far the title text wraps. */
      grid-template-rows: auto auto auto auto;
      column-gap: 28px;
      row-gap: 14px;
    }
    .flow-node {
      grid-row: 1 / -1;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: subgrid;
      justify-items: center;
      text-align: center;
      position: relative;
    }
    /* Explicit row for every node child so the connector pseudo-element (also
       row 3) never bumps the icon out of its row via auto-placement. */
    .flow-step {
      grid-row: 1;
      grid-column: 1;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--green);
    }
    .flow-title {
      grid-row: 2;
      grid-column: 1;
      margin: 0;
      font-size: 1.15rem;
      font-weight: 700;
      line-height: 1.25;
      max-width: 220px;
      align-self: end; /* sit at the bottom of the (possibly 2-line) title row */
    }
    .flow-icon {
      grid-row: 3;
      grid-column: 1;
      width: 84px;
      height: 84px;
      border-radius: 24px;
      display: grid;
      place-items: center;
      align-self: center;
      color: var(--green);
      /* Opaque tint (not translucent) so the connector line is fully hidden
         behind the icons, leaving visible dashes only in the gaps: icon — icon — icon. */
      background: #e7f7f0;
      border: 1px solid rgba(16,185,129,0.18);
      box-shadow: 0 14px 34px rgba(16,185,129,0.14);
      position: relative;
      z-index: 1;
    }
    .flow-icon svg {
      width: 44px;
      height: 44px;
    }
    /* Dashed connector between adjacent icons only. It lives in the icon row of
       the subgrid and is vertically centered on it, so it tracks the icons no
       matter how the titles wrap. It runs from this icon's center to the next
       icon's center; the opaque icons cover the overlapping halves, leaving a
       dash segment in the gap. Hidden on the last node. */
    .flow-node::after {
      content: "";
      grid-row: 3;
      grid-column: 1;
      align-self: center;
      justify-self: start;
      z-index: 0;
      height: 2px;
      margin-left: 50%;
      width: calc(100% + 28px);
      background: repeating-linear-gradient(90deg, rgba(16,185,129,0.5) 0 7px, transparent 7px 15px);
    }
    .flow-node:last-child::after {
      display: none;
    }
    .flow-desc {
      grid-row: 4;
      grid-column: 1;
      margin: 0;
      color: var(--muted);
      line-height: 1.7;
      font-size: 0.95rem;
      max-width: 260px;
    }

    /* ============================================================
       Landing: Campaign management showcase (product screenshots)
       ============================================================ */
    .campaign-showcase {
      padding: 72px 40px;
      display: grid;
      gap: 56px;
      background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }
    .showcase-header {
      max-width: 680px;
      margin: 0 auto;
      text-align: center;
    }
    .showcase-header h2 {
      margin: 0 0 16px;
      font-size: 0.95rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--green);
    }
    .showcase-header h3 {
      margin: 0;
      font-size: clamp(2rem, 3vw, 2.9rem);
      line-height: 1.06;
    }
    .showcase-header p {
      margin-top: 18px;
      color: var(--muted);
      line-height: 1.8;
    }
    .showcase-feature {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      gap: 52px;
      align-items: center;
      max-width: 1140px;
      margin: 0 auto;
      width: 100%;
    }
    .showcase-feature--reverse .showcase-copy { order: 2; }
    .showcase-feature--reverse .showcase-shot { order: 1; }
    .showcase-eyebrow {
      display: inline-block;
      margin-bottom: 14px;
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(16,185,129,0.10);
      color: var(--green);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .showcase-copy h4 {
      margin: 0 0 14px;
      font-size: clamp(1.4rem, 2.2vw, 1.9rem);
      line-height: 1.15;
      letter-spacing: -0.02em;
    }
    .showcase-copy > p {
      margin: 0 0 20px;
      color: var(--muted);
      line-height: 1.8;
    }
    .showcase-points {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 12px;
    }
    .showcase-points li {
      position: relative;
      padding-left: 30px;
      color: var(--text);
      line-height: 1.5;
    }
    .showcase-points li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 1px;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: rgba(16,185,129,0.15);
      /* green checkmark */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: 13px 13px, cover;
    }
    /* Browser-window frame around each screenshot */
    .showcase-shot {
      margin: 0;
    }
    .shot-frame {
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--border);
      box-shadow: 0 30px 70px rgba(15,23,42,0.14);
    }
    .shot-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      background: #f1f5f9;
      border-bottom: 1px solid var(--border);
    }
    .shot-bar span {
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: #cbd5e1;
    }
    .shot-bar span:nth-child(1) { background: #fca5a5; }
    .shot-bar span:nth-child(2) { background: #fcd34d; }
    .shot-bar span:nth-child(3) { background: #86efac; }
    .shot-frame img {
      display: block;
      width: 100%;
      height: auto;
    }

    @media (max-width: 900px) {
      .flow-diagram { padding-left: 24px; padding-right: 24px; }
      .flow-track {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 40px;
        max-width: 420px;
      }
      /* Drop the subgrid spanning so nodes stack vertically instead of
         overlapping in a single column, and hide the horizontal connector. */
      .flow-node {
        grid-row: auto;
        grid-template-rows: none;
        gap: 12px;
      }
      .flow-node::after { display: none; }
      .campaign-showcase { padding-left: 24px; padding-right: 24px; gap: 44px; }
      .showcase-feature {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .showcase-feature--reverse .showcase-copy { order: 1; }
      .showcase-feature--reverse .showcase-shot { order: 2; }
    }