/* ============================================================
   public.css
   Modern, SaaS-style presentation layer for the public-facing
   marketing + auth pages. Loads AFTER index.css so selectors in
   here override anything we want to replace from the legacy
   stylesheet. Mobile-first; every breakpoint is hand-tuned so
   nothing overlaps and everything stays legible.
   ============================================================ */

/* ============================================================
   MODERN EXECUTIVE brand system
   60% Neutral base (off-white / light gray) for calm, focused surfaces
   30% Secondary (charcoal / dark gray) for structure and text
   10% Accent (navy / cobalt blue) for CTAs and highlights
   The existing legacy variable names (--tt-forest, --tt-gold, etc.)
   are retained but re-pointed to the new palette so every component
   that already consumes them inherits the rebrand automatically.
   ============================================================ */
:root {
    /* --- Primitive palette --- */
    --me-ink:            #1A1D20;  /* near-black text */
    --me-charcoal:       #3C4043;  /* charcoal */
    --me-graphite:       #5F6368;  /* dark gray body text */
    --me-steel:          #80868B;  /* muted gray */
    --me-mist:           #DADCE0;  /* hairline border */
    --me-fog:            #E8EAED;  /* subtle divider */
    --me-snow:           #eef1f4;  /* field (not flat white) */
    --me-paper:          #ffffff;  /* card surface */
    --me-navy:           #2563eb;
    --me-navy-deep:      #1d4ed8;
    --me-navy-ink:       #1e3a8a;
    --me-navy-soft:      #eff6ff;
    --me-success:        #059669;
    --me-warning:        #d97706;
    --me-danger:         #dc2626;

    /* --- Legacy token compatibility (repointed) --- */
    --tt-ink:           var(--me-ink);
    --tt-ink-soft:      var(--me-graphite);
    --tt-cream:         var(--me-snow);
    --tt-cream-soft:    var(--me-paper);
    --tt-forest:        var(--me-charcoal);
    --tt-forest-deep:   var(--me-ink);
    --tt-gold:          var(--me-navy);
    --tt-gold-bright:   var(--me-navy-deep);
    --tt-plum:          var(--me-navy-ink);
    --tt-border:        var(--me-mist);
    --tt-border-strong: var(--me-steel);

    --tt-shadow-sm: none;
    --tt-shadow-md: none;
    --tt-shadow-lg: none;
    --tt-radius-sm: 10px;
    --tt-radius-md: 16px;
    --tt-radius-lg: 24px;
    --tt-max: 1180px;
    --tt-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --tt-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ---------- Public page shell override ----------
   Scoped to the public `tt-public-body` class so we don't
   accidentally restyle every logged-in page that also loads
   public.css for its brand tokens and fonts. */
body.tt-public-body {
    font-family: var(--tt-font-sans);
    color: var(--tt-ink);
    background: var(--me-snow);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Repoint legacy --color-* tokens so every rule in style.css
       (h2 color, label color, signup button, etc.) uses the new
       Modern Executive palette instead of forest/gold. Without
       these overrides you see old forest-green headings and tan
       buttons leaking onto the new public pages. */
    --color-navy:     var(--me-ink);
    --color-red:       var(--me-danger);
    --color-darkRed: #A50E0E;
    --color-blue:      var(--me-navy);
    --color-darkBlue:  var(--me-navy-deep);
    --color-paleGrey:       #eef1f4;
    --color-blueAccent:    var(--me-navy-ink);
    --color-lightGrey: var(--me-snow);
    --color-darkGrey:  var(--me-fog);
    --navbar-bg-color:         #fff;
    --navbar-text-color:       var(--me-ink);
    --navbar-text-color-focus: var(--me-navy);
    --navbar-bg-contrast:      var(--me-navy-soft);
    --brand-primary:   var(--me-charcoal);
    --brand-secondary: var(--me-graphite);
    --brand-accent:    var(--me-navy);
    --brand-text:      var(--me-ink);
}

.marketing-shell {
    background: #eef1f4;
    min-height: 100vh;
}

.marketing-wrap {
    max-width: var(--tt-max);
    margin: 0 auto;
    padding: 0 22px;
    box-sizing: border-box;
}

.marketing-section {
    padding: 72px 0;
}

.marketing-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--me-navy-ink);
    background: #e8eef9;
    border: 1px solid #c7d7f7;
    padding: 6px 12px;
    border-radius: 999px;
}

.marketing-heading {
    font-family: var(--tt-font-display);
    font-weight: 700;
    color: var(--tt-ink);
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.marketing-sub {
    font-size: 17px;
    line-height: 1.65;
    color: var(--tt-ink-soft);
    max-width: 60ch;
}

/* ---------- Public navbar (override of legacy .navbar-*) ---------- */
.tt-nav-body {
    padding-top: 72px; /* clearance for the fixed nav */
}

.tt-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.tt-navbar-inner {
    max-width: var(--tt-max);
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.tt-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--tt-ink);
    font-family: var(--tt-font-display);
    font-weight: 700;
    font-size: 20px;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.tt-brand:hover {
    color: var(--tt-forest-deep);
}

.tt-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-family: var(--tt-font-display);
    font-weight: 800;
    font-size: 18px;
    border: 1px solid #1d4ed8;
}

/* Wordmark image used in the public navbar + footer. The PNGs are
   ~2.5:1 so we lock the height and let the width follow naturally. */
.tt-brand-logo {
    display: block;
    height: 36px;
    width: auto;
    max-width: 220px;
}

.tt-brand-on-dark {
    color: #fff;
}

.tt-footer-brand .tt-brand-logo {
    height: 38px;
}

@media (max-width: 640px) {
    .tt-brand-logo { height: 30px; max-width: 180px; }
    .tt-footer-brand .tt-brand-logo { height: 32px; }
}

.tt-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tt-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tt-ink-soft);
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.tt-nav-link:hover,
.tt-nav-link:focus-visible {
    background: var(--me-fog);
    color: var(--me-ink);
    outline: none;
}

.tt-nav-cta {
    background: #2563eb;
    color: #fff !important;
    font-weight: 600;
    padding: 9px 18px;
    border: 1px solid #1d4ed8;
}

.tt-nav-cta:hover {
    background: #1d4ed8;
    color: #fff !important;
}

.tt-nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--me-mist);
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--me-ink);
}

.tt-nav-toggle[aria-expanded="true"] {
    background: var(--me-ink);
    color: #fff;
    border-color: var(--me-ink);
}

.tt-nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
}

.tt-nav-toggle-bar::before,
.tt-nav-toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
}

.tt-nav-toggle-bar::before { top: -6px; }
.tt-nav-toggle-bar::after  { top:  6px; }

/* ---------- Hero ---------- */
.tt-hero {
    padding: 84px 0 52px;
    position: relative;
}

.tt-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

.tt-hero h1 {
    font-size: clamp(40px, 6vw, 68px);
    margin: 18px 0 18px;
}

.tt-hero h1 .accent {
    color: var(--me-navy);
    font-style: normal;
}

.tt-hero p.tt-hero-sub {
    font-size: 18px;
    color: var(--tt-ink-soft);
    line-height: 1.65;
    max-width: 56ch;
    margin: 0 0 28px;
}

.tt-hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.tt-btn:hover {
    transform: none;
}

.tt-btn:active {
    transform: none;
}

.tt-btn-primary {
    background: #2563eb;
    color: #fff;
    border-color: #1d4ed8;
}

.tt-btn-primary:hover {
    background: #1d4ed8;
    color: #fff;
}

.tt-btn-secondary {
    background: #fff;
    color: var(--me-ink);
    border-color: var(--me-mist);
}

.tt-btn-secondary:hover {
    background: #fff;
    border-color: var(--me-navy);
    color: var(--me-navy-ink);
}

.tt-btn-ghost {
    background: transparent;
    color: var(--me-ink);
    border-color: transparent;
    box-shadow: none;
}

.tt-btn-ghost:hover {
    background: var(--me-fog);
    transform: none;
    box-shadow: none;
}

.tt-hero-note {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--tt-ink-soft);
}

.tt-hero-note-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
    border: 1px solid #1d4ed8;
}

.tt-hero-art {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--tt-radius-lg);
    overflow: hidden;
    background: #e5e7eb;
    border: 1px solid #d1d5db;
    transform: none;
}

.tt-hero-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05);
}

.tt-hero-art::after {
    content: none;
}

.tt-hero-chip {
    position: absolute;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tt-ink);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
}

.tt-hero-chip small {
    font-weight: 500;
    color: var(--tt-ink-soft);
    display: block;
    margin-top: 2px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tt-hero-chip-1 {
    top: 24px;
    left: -22px;
}

.tt-hero-chip-2 {
    bottom: 30px;
    right: -18px;
    background: #f8fafc;
}

.tt-hero-chip-emoji {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #2563eb;
    border: 1px solid #1d4ed8;
    color: #fff;
    font-weight: 800;
    font-family: var(--tt-font-display);
}

/* ---------- Trusted by / logos strip ---------- */
.tt-trust {
    padding: 18px 0 8px;
}

.tt-trust-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px 42px;
    color: var(--tt-ink-soft);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.78;
}

.tt-trust-inner strong {
    color: var(--tt-ink);
    letter-spacing: 0;
    text-transform: none;
    font-family: var(--tt-font-display);
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Mission strip ---------- */
.tt-mission {
    padding: 56px 0;
    text-align: center;
}

.tt-mission-card {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: var(--tt-radius-lg);
    padding: 56px 36px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Legacy style.css has a global `h2 { color: var(--color-navy); }`
   rule that makes every heading forest-green on public pages. That
   produces forest-on-charcoal inside the mission card (unreadable).
   Force the mission card title back to white, and do the same for
   any other element that sits on a dark surface. */
.tt-mission-card h2,
.tt-mission-card .tt-mission-eyebrow,
.tt-mission-card p {
    color: #fff !important;
}

.tt-mission-card .tt-mission-eyebrow {
    color: #8AB4F8 !important;
}

.tt-mission-card p {
    color: rgba(255, 255, 255, 0.85) !important;
}

.tt-mission-card::before {
    content: none;
}

.tt-mission-eyebrow {
    position: relative;
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #8AB4F8;
    font-weight: 700;
}

.tt-mission h2 {
    position: relative;
    font-family: var(--tt-font-display);
    font-size: clamp(32px, 4.4vw, 56px);
    line-height: 1.1;
    margin: 14px auto 18px;
    max-width: 22ch;
    letter-spacing: -0.01em;
}

.tt-mission p {
    position: relative;
    font-size: 17px;
    line-height: 1.7;
    max-width: 60ch;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Feature cards ---------- */
.tt-features-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}

.tt-features-header h2 {
    font-family: var(--tt-font-display);
    font-size: clamp(28px, 3.8vw, 44px);
    margin: 14px 0 14px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.tt-features-header p {
    font-size: 16px;
    color: var(--tt-ink-soft);
    line-height: 1.6;
}

.tt-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.tt-feature-card {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    padding: 26px;
    transition: border-color 0.18s ease;
}

.tt-feature-card:hover {
    transform: none;
    border-color: #93c5fd;
}

.tt-feature-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--me-navy-soft);
    color: var(--me-navy-ink);
    font-family: var(--tt-font-display);
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 14px;
    border: 1px solid var(--me-mist);
}

.tt-feature-card h3 {
    font-family: var(--tt-font-display);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 8px;
    color: var(--tt-ink);
    letter-spacing: -0.01em;
}

.tt-feature-card p {
    color: var(--tt-ink-soft);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

/* ---------- How it works ---------- */
.tt-how {
    background: #fff;
    border-radius: var(--tt-radius-lg);
    padding: 46px 40px;
    border: 1px solid var(--tt-border);
}

.tt-how-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 34px;
}

.tt-how-header h2 {
    font-family: var(--tt-font-display);
    font-size: clamp(26px, 3.2vw, 38px);
    margin: 12px 0 10px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.tt-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.tt-step {
    padding: 22px;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    background: var(--tt-cream-soft);
    position: relative;
}

.tt-step-num {
    font-family: var(--tt-font-display);
    font-weight: 800;
    font-size: 28px;
    color: var(--me-navy);
    line-height: 1;
    display: block;
    margin-bottom: 10px;
}

.tt-step h4 {
    font-family: var(--tt-font-display);
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 6px;
    color: var(--tt-ink);
}

.tt-step p {
    font-size: 14px;
    color: var(--tt-ink-soft);
    line-height: 1.55;
    margin: 0;
}

/* ---------- Showcase ---------- */
.tt-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.tt-showcase-flip {
    grid-template-columns: 1fr 1fr;
}

.tt-showcase-flip .tt-showcase-text {
    order: 2;
}

.tt-showcase-text h2 {
    font-family: var(--tt-font-display);
    font-size: clamp(28px, 3.6vw, 42px);
    line-height: 1.1;
    margin: 12px 0 14px;
    letter-spacing: -0.01em;
    color: var(--tt-ink);
}

.tt-showcase-text p {
    color: var(--tt-ink-soft);
    line-height: 1.7;
    font-size: 16px;
    margin: 0 0 16px;
}

.tt-showcase-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 22px;
    display: grid;
    gap: 10px;
}

.tt-showcase-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--tt-ink);
    font-size: 15px;
    line-height: 1.5;
}

.tt-showcase-list li::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--me-navy-soft);
    border: 2px solid var(--me-navy);
    position: relative;
    margin-top: 2px;
}

.tt-showcase-media {
    aspect-ratio: 4 / 3;
    border-radius: var(--tt-radius-lg);
    overflow: hidden;
    border: 1px solid var(--tt-border);
    background: var(--tt-cream);
}

.tt-showcase-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Testimonials ---------- */
.tt-quote-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.tt-quote {
    background: #fff;
    border-radius: var(--tt-radius-md);
    padding: 28px;
    border: 1px solid var(--tt-border);
}

.tt-quote p {
    font-family: var(--tt-font-display);
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: var(--tt-ink);
    margin: 0 0 14px;
}

.tt-quote footer {
    color: var(--tt-ink-soft);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    /* Legacy index.css sets a forest background on every <footer>. The
       testimonial card uses <footer> semantically for the byline, so
       clear the background explicitly. */
    background: transparent !important;
    padding: 0;
    min-height: 0;
    border: 0;
}

.tt-quote-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2563eb;
    border: 1px solid #1d4ed8;
    color: #fff;
    font-family: var(--tt-font-display);
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Final CTA ---------- */
.tt-cta {
    background: #1d4ed8;
    border: 1px solid #1e40af;
    border-radius: var(--tt-radius-lg);
    padding: 48px 36px;
    color: #fff;
    text-align: center;
}

.tt-cta h2 {
    font-family: var(--tt-font-display);
    font-size: clamp(26px, 3.4vw, 40px);
    margin: 0 0 10px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.tt-cta p {
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.88;
    max-width: 62ch;
    margin: 0 auto 22px;
}

.tt-cta .tt-btn-primary {
    background: #fff;
    color: var(--me-navy-ink);
}

.tt-cta .tt-btn-primary:hover {
    background: var(--me-navy-soft);
    color: var(--me-navy-ink);
}

/* ---------- Auth cards (SignIn / Register / Forgot) ---------- */
.tt-auth-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 96px 20px 48px;
    min-height: calc(100vh - 160px);
}

.tt-auth-card {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    padding: 40px 36px;
    width: 100%;
    max-width: 460px;
}

/* Brand lockup at the top of every auth card. The PNG already
   contains the wordmark, so we simply center it and let the
   marketing-eyebrow / h1 do the rest. */
.tt-auth-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 24px;
}

.tt-auth-logo img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 280px;
}

@media (max-width: 640px) {
    .tt-auth-logo img { height: 44px; max-width: 220px; }
}

.tt-auth-card.tt-auth-card-wide {
    max-width: 860px;
}

.tt-auth-card h1 {
    font-family: var(--tt-font-display);
    font-size: 30px;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--tt-ink);
}

.tt-auth-card .tt-auth-sub {
    color: var(--tt-ink-soft);
    font-size: 14px;
    margin: 0 0 22px;
    line-height: 1.55;
}

.tt-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 14px;
}

.tt-field > span,
.tt-field > label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tt-ink);
    letter-spacing: 0.01em;
}

.tt-field input,
.tt-field select,
.tt-field textarea {
    font: inherit;
    font-size: 15px;
    padding: 11px 14px;
    border: 1px solid var(--tt-border);
    border-radius: 12px;
    background: var(--tt-cream-soft);
    color: var(--tt-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.tt-field input:focus,
.tt-field select:focus,
.tt-field textarea:focus {
    border-color: var(--me-navy);
    outline: 2px solid #bfdbfe;
    outline-offset: 0;
    background: #fff;
}

.tt-field .tt-hint {
    font-size: 12px;
    color: var(--tt-ink-soft);
    font-weight: 400;
}

/* Terms and policy agreement card on the public registration form.
   Replaces the inline-styled checkbox row with a structured card
   featuring an icon header, plain-language bullet points (so a
   first-time user sees what they're agreeing to before they tick
   the box), and a styled custom checkbox so the agreement reads
   as professional rather than a wall of legalese. */
.tt-terms-card {
    margin: 6px 0 18px;
    padding: 18px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.18);
}
.tt-terms-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.tt-terms-card-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--tt-forest, #1d4ed8);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tt-terms-card-icon svg {
    width: 22px;
    height: 22px;
}
.tt-terms-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--tt-ink, #0f172a);
}
.tt-terms-card-help {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--tt-ink-soft, #475569);
    line-height: 1.5;
}
.tt-terms-points {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tt-terms-points li {
    position: relative;
    padding-left: 26px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--tt-ink, #1f2937);
}
.tt-terms-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ecfdf5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23047857' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5l3 3 6-6'/></svg>") center/12px no-repeat;
    border: 1px solid #a7f3d0;
}
.tt-terms-points strong {
    color: var(--tt-ink, #0f172a);
    font-weight: 700;
}
.tt-terms-check {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.tt-terms-check:hover {
    border-color: var(--tt-forest, #1d4ed8);
}
.tt-terms-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.tt-terms-check-box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
    margin-top: 1px;
}
.tt-terms-check-box::after {
    content: "";
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5l3 3 6-6'/></svg>") center/contain no-repeat;
    transform: scale(0);
    transition: transform 120ms ease;
}
.tt-terms-check input[type="checkbox"]:checked + .tt-terms-check-box {
    background: var(--tt-forest, #1d4ed8);
    border-color: var(--tt-forest, #1d4ed8);
}
.tt-terms-check input[type="checkbox"]:checked + .tt-terms-check-box::after {
    transform: scale(1);
}
.tt-terms-check input[type="checkbox"]:focus-visible + .tt-terms-check-box {
    outline: 2px solid #bfdbfe;
    outline-offset: 2px;
}
.tt-terms-check-text {
    font-size: 14px;
    line-height: 1.55;
    color: var(--tt-ink, #1f2937);
}
.tt-terms-check-text a {
    color: var(--tt-forest-deep, #1e3a8a);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tt-terms-check-text a:hover {
    color: var(--tt-forest, #1d4ed8);
}
.tt-terms-error {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #b91c1c;
}
.tt-terms-error:empty {
    display: none;
}

.tt-auth-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.tt-auth-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--tt-border);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--tt-ink-soft);
}

.tt-auth-footer a {
    color: var(--me-navy-ink);
    font-weight: 600;
    text-decoration: none;
}

.tt-auth-footer a:hover {
    color: var(--me-navy);
    text-decoration: underline;
}

.tt-auth-error {
    background: rgba(217, 48, 37, 0.08);
    border: 1px solid rgba(217, 48, 37, 0.4);
    color: #A50E0E;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 14px;
}

/* asp-validation-summary always renders the wrapper div (often with an
   empty <ul> inside) even when there are no errors. Keying off
   `:empty` therefore never matches, which is what was causing the
   persistent red bar above the login form. Hide the wrapper whenever
   Razor has flagged the model as valid OR when the element truly is
   empty. */
.tt-auth-error:empty,
.tt-auth-error.validation-summary-valid,
.tt-auth-error.field-validation-valid {
    display: none !important;
}

.tt-auth-error ul { margin: 0; padding: 0 0 0 18px; }

/* ---------- Pricing ---------- */
.tt-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.tt-plan {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    padding: 26px 22px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s ease;
}

.tt-plan:hover {
    transform: none;
    border-color: #93c5fd;
}

.tt-plan.is-featured {
    background: #1e3a8a;
    color: #fff;
    border-color: #1e40af;
}

.tt-plan.is-featured .tt-plan-price,
.tt-plan.is-featured h3 {
    color: #fff;
}

.tt-plan.is-featured .tt-plan-note {
    color: rgba(255, 255, 255, 0.82);
}

.tt-plan h3 {
    font-family: var(--tt-font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--tt-ink);
}

.tt-plan-price {
    font-family: var(--tt-font-display);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--tt-ink);
    letter-spacing: -0.02em;
}

.tt-plan-note {
    font-size: 13px;
    color: var(--tt-ink-soft);
    line-height: 1.5;
}

.tt-plan-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    background: var(--me-navy);
    color: #fff;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.tt-plan.is-featured .tt-plan-cta {
    background: #fff;
    color: var(--me-navy-ink);
}

.tt-plan-cta:hover {
    background: var(--me-navy-ink);
    color: #fff;
    transform: none;
}

.tt-plan.is-featured .tt-plan-cta:hover {
    background: var(--me-navy-soft);
    color: var(--me-navy-ink);
}

/* Newer pricing surfaces use a 3-column layout (Student / Teacher /
   Business Owner) instead of the legacy 4-card credit grid. */
.tt-pricing-grid.tt-pricing-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.tt-plan-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--me-navy-ink);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 999px;
    padding: 4px 10px;
    align-self: flex-start;
}

.tt-plan.is-featured .tt-plan-eyebrow {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.tt-plan-period {
    font-family: var(--tt-font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--tt-ink-soft);
    margin-left: 6px;
    letter-spacing: 0;
}

.tt-plan.is-featured .tt-plan-period {
    color: rgba(255, 255, 255, 0.7);
}

.tt-plan-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--tt-ink);
    font-size: 13.5px;
    line-height: 1.45;
}

.tt-plan-list li {
    position: relative;
    padding-left: 22px;
}

.tt-plan-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #dbeafe url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>") center / 10px 10px no-repeat;
}

.tt-plan.is-featured .tt-plan-list {
    color: rgba(255, 255, 255, 0.92);
}

.tt-plan.is-featured .tt-plan-list li::before {
    background: rgba(255, 255, 255, 0.2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>") center / 10px 10px no-repeat;
}

.tt-plan-secondary {
    margin-top: 6px;
    color: var(--me-navy-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

.tt-plan.is-featured .tt-plan-secondary {
    color: #c7d7f7;
}

.tt-plan-secondary:hover {
    text-decoration: underline;
}

.tt-pricing-callout {
    margin-top: 48px;
    padding: 32px 28px;
    border-radius: var(--tt-radius-md);
    text-align: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(15, 23, 42, 0.04));
    border: 1px solid var(--tt-border);
}

.tt-pricing-callout h3 {
    font-family: var(--tt-font-display);
    font-size: clamp(22px, 2.6vw, 28px);
    margin: 0 0 8px;
    color: var(--tt-ink);
    letter-spacing: -0.01em;
}

.tt-pricing-callout p {
    color: var(--tt-ink-soft);
    margin: 0 auto 18px;
    max-width: 56ch;
    font-size: 14.5px;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .tt-pricing-grid.tt-pricing-grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   Pricing feature pages (PricingPrivateTutor / PricingBusinessOwner)

   These two destinations use a simpler "one featured plan + a
   companion details card" layout, distinct from the 3-up
   .tt-plan grid on the main /Public/Marketing/PublicPricing
   page. The classes below (.pricing-feature-*) were referenced
   from the markup but had no rules; rendering collapsed to an
   unstyled stack on every viewport. We model them on the
   .tt-plan pattern so the typography / spacing matches the rest
   of the marketing surface.
   ============================================================ */
.pricing-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 28px;
}

.pricing-feature-card {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    color: var(--tt-ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    min-width: 0;
}
.pricing-feature-card:hover {
    border-color: #93c5fd;
}

.pricing-feature-card-featured {
    background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
    border-color: #1e40af;
    color: #fff;
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.45);
}
.pricing-feature-card-featured h3,
.pricing-feature-card-featured .pricing-feature-amount,
.pricing-feature-card-featured .pricing-feature-currency {
    color: #fff;
}
.pricing-feature-card-featured .pricing-feature-desc,
.pricing-feature-card-featured .pricing-feature-period,
.pricing-feature-card-featured .pricing-feature-fineprint {
    color: rgba(255, 255, 255, 0.85);
}

.pricing-feature-eyebrow {
    display: inline-flex;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--me-navy-ink);
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 999px;
    padding: 4px 10px;
}
.pricing-feature-card-featured .pricing-feature-eyebrow {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.pricing-feature-card h3 {
    font-family: var(--tt-font-display);
    font-size: clamp(20px, 2.2vw, 24px);
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--tt-ink);
    line-height: 1.2;
}

.pricing-feature-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--tt-font-display);
    line-height: 1;
}
.pricing-feature-currency {
    font-size: 22px;
    font-weight: 700;
    color: var(--tt-ink);
}
.pricing-feature-amount {
    font-size: 44px;
    font-weight: 800;
    color: var(--tt-ink);
    letter-spacing: -0.02em;
}
.pricing-feature-period {
    font-family: var(--tt-font-body, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: var(--tt-ink-soft);
    margin-left: 6px;
}

.pricing-feature-desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--tt-ink-soft);
    margin: 0;
}

.pricing-feature-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: inherit;
    font-size: 14px;
    line-height: 1.5;
}
.pricing-feature-list li {
    position: relative;
    padding-left: 24px;
}
.pricing-feature-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #dbeafe url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e40af' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>") center / 10px 10px no-repeat;
}
.pricing-feature-card-featured .pricing-feature-list li::before {
    background: rgba(255, 255, 255, 0.2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4L19 6'/></svg>") center / 10px 10px no-repeat;
}
.pricing-feature-list-light li strong {
    color: var(--tt-ink);
}

.pricing-feature-cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background: var(--me-navy);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
    font-family: inherit;
    box-sizing: border-box;
}
.pricing-feature-card-featured .pricing-feature-cta {
    background: #fff;
    color: var(--me-navy-ink);
}
.pricing-feature-cta:hover {
    background: var(--me-navy-ink);
    color: #fff;
}
.pricing-feature-card-featured .pricing-feature-cta:hover {
    background: var(--me-navy-soft);
    color: var(--me-navy-ink);
}
.pricing-feature-cta:active { transform: translateY(1px); }

.pricing-feature-secondary {
    margin-top: auto;
    color: var(--me-navy-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: left;
}
.pricing-feature-secondary:hover { text-decoration: underline; }

.pricing-feature-fineprint {
    font-size: 12.5px;
    color: var(--tt-ink-soft);
    margin: 0;
    line-height: 1.45;
}

/* Inline status banner (e.g. "Upgrade confirmed") above the
   featured plan on PricingBusinessOwner. */
.pricing-banner {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    margin: 20px 0 8px;
    border: 1px solid transparent;
}
.pricing-banner-success {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}
.pricing-banner-error {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

@media (max-width: 820px) {
    .pricing-feature-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 20px;
    }
    .pricing-feature-card { padding: 22px 20px; gap: 12px; }
    .pricing-feature-amount { font-size: 38px; }
    .pricing-feature-cta { min-height: 48px; font-size: 15px; }
}
@media (max-width: 480px) {
    .pricing-feature-card { padding: 20px 18px; }
    .pricing-feature-amount { font-size: 34px; }
}

/* ---------- Public footer ---------- */
.tt-footer {
    background: #0f172a;
    border-top: 1px solid #334155;
    color: #fff;
    padding: 48px 0 28px;
    margin-top: 48px;
}

.tt-footer-inner {
    max-width: var(--tt-max);
    margin: 0 auto;
    padding: 0 22px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 36px;
}

.tt-footer-brand p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.6;
    max-width: 36ch;
}

.tt-footer h4 {
    font-family: var(--tt-font-display);
    font-size: 15px;
    color: #fff;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 10px;
}

.tt-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.tt-footer a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.15s ease;
}

.tt-footer a:hover { color: #8AB4F8; }

.tt-footer-bottom {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

/* Hide the legacy public footer when we render our own. */
.tt-nav-body ~ footer,
body.tt-public-body > #page-container > footer {
    display: none;
}

/* ============================================================
   Tablet
   ============================================================ */
@media (max-width: 960px) {
    .tt-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .tt-hero-art {
        max-width: 440px;
        margin: 0 auto;
        transform: none;
    }

    .tt-hero-chip-1 { left: 12px; }
    .tt-hero-chip-2 { right: 12px; }

    .tt-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .tt-steps       { grid-template-columns: repeat(2, 1fr); }
    .tt-showcase,
    .tt-showcase-flip { grid-template-columns: 1fr; gap: 28px; }
    .tt-showcase-flip .tt-showcase-text { order: 0; }
    .tt-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .tt-footer-inner { grid-template-columns: 1fr 1fr; }
    .tt-footer-brand { grid-column: 1 / -1; }
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 640px) {
    .tt-nav-body { padding-top: 68px; }

    .tt-navbar-inner {
        padding: 12px 16px;
    }

    .tt-nav-toggle { display: inline-flex; }

    .tt-nav-links {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 14px;
        background: #fff;
        border: 1px solid var(--me-mist);
        border-radius: var(--tt-radius-md);
        display: none;
    }

    .tt-nav-links.is-open { display: flex; }

    .tt-nav-link {
        justify-content: flex-start;
        padding: 12px 14px;
        font-size: 15px;
    }

    .marketing-wrap { padding: 0 16px; }
    .marketing-section { padding: 48px 0; }

    .tt-hero {
        padding: 28px 0 36px;
    }

    .tt-hero h1 {
        font-size: clamp(32px, 9vw, 44px);
    }

    .tt-hero p.tt-hero-sub {
        font-size: 16px;
    }

    .tt-btn {
        padding: 13px 18px;
        font-size: 14.5px;
        flex: 1 1 auto;
    }

    .tt-mission-card { padding: 36px 22px; }

    .tt-feature-grid { grid-template-columns: 1fr; }
    .tt-feature-card { padding: 22px; }
    .tt-steps        { grid-template-columns: 1fr; }

    .tt-quote-grid { grid-template-columns: 1fr; }

    .tt-cta { padding: 36px 22px; }

    .tt-pricing-grid { grid-template-columns: 1fr; }

    .tt-auth-shell {
        padding: 80px 16px 32px;
        min-height: auto;
    }

    .tt-auth-card {
        padding: 28px 22px;
        border-radius: var(--tt-radius-md);
    }

    .tt-auth-card h1 { font-size: 26px; }

    .tt-how { padding: 28px 20px; }

    .tt-hero-chip { display: none; }

    .tt-footer-inner { grid-template-columns: 1fr; gap: 22px; }
    .tt-footer-brand { grid-column: 1 / -1; }
}

/* Very small phones: keep everything readable. */
@media (max-width: 360px) {
    .tt-navbar-inner { padding: 10px 12px; }
    .tt-brand { font-size: 17px; }
    .tt-hero h1 { font-size: 32px; }
    .tt-btn { font-size: 14px; padding: 12px 14px; }
}

/* ============================================================
   Contact form (Public/Support/ContactUs.cshtml)
   ============================================================ */
.contact-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    margin: 0 auto;
    gap: 18px;
    max-width: 640px;
    margin: 24px auto 0;
    text-align: left;
}
.contact-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    text-align: center;
}
.contact-field label {
    font-weight: 700;
    color: var(--me-ink);
    text-align: center;
    width: 100%;
    font-size: 14px;
    align-self: center;
}
.contact-field input,
.contact-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--me-mist);
    background: #ffffff;
    color: var(--me-ink);
    font-size: 15px;
    font-family: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-field textarea {
    min-height: 160px;
    resize: vertical;
}
.contact-field input:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--me-navy);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: var(--me-steel);
    font-family: inherit;
    font-size: 14px;
}
.contact-error {
    display: block;
    color: var(--me-danger);
    font-size: 13px;
    margin-top: 2px;
}
.contact-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 6px;
}
.contact-banner {
    max-width: 640px;
    margin: 18px auto 0;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
}
.contact-banner-success {
    background: #E6F4EA;
    color: #137333;
    border: 1px solid #A7F3D0;
}
.contact-banner-error {
    background: #FDE7E9;
    color: #8D1F1F;
    border: 1px solid #FCA5A5;
}
.contact-validation:empty { display: none; }
.contact-validation {
    max-width: 640px;
    margin: 0 auto;
    color: var(--me-danger);
    font-size: 14px;
}

/* ============================================================
   Legal pages: Terms / Privacy / Policy presentation
   Used by /Public/Support/TermsAndPolicy and the in-app
   per-business policy viewer. Wide reading column, generous
   line-height, sticky-feeling TOC at the top.
   ============================================================ */
.legal-shell {
    background: #f5f7fb;
}
.legal-wrap {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 18px;
}
.legal-header {
    text-align: left;
    margin-bottom: 26px;
}
.legal-header h1 {
    margin: 6px 0 12px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.2;
    color: #0f172a;
}
.legal-subtitle {
    color: rgba(15, 23, 42, 0.78);
    line-height: 1.6;
    font-size: 16px;
    max-width: 760px;
}
.legal-meta {
    color: rgba(15, 23, 42, 0.6);
    font-size: 13px;
    margin-top: 10px;
}
.legal-toc {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 26px 0 36px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.legal-toc strong {
    display: block;
    color: #0f172a;
    margin-bottom: 8px;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.legal-toc ol {
    margin: 0;
    padding-left: 0;
    columns: 2;
    column-gap: 26px;
    font-size: 14px;
    line-height: 1.65;
    /* The link text inside each <li> already includes its own
       "1." / "2." / etc. prefix; we suppress the browser's
       default ordered-list numbering so the user doesn't see
       "1. 1. Definitions" / "2. 2. Acceptance & Eligibility". */
    list-style: none;
}
.legal-toc ol li {
    break-inside: avoid;
    margin-bottom: 2px;
}
.legal-toc a {
    color: #1d4ed8;
    text-decoration: none;
}
.legal-toc a:hover {
    text-decoration: underline;
}
.legal-article {
    color: #1f2937;
    font-size: 16px;
    line-height: 1.7;
}
.legal-article section {
    margin: 0 0 38px;
    scroll-margin-top: 84px;
}
.legal-article h2 {
    color: #0f172a;
    font-size: 22px;
    margin: 28px 0 12px;
    line-height: 1.25;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 26px;
}
.legal-article section:first-of-type h2 {
    border-top: none;
    padding-top: 0;
    margin-top: 8px;
}
.legal-article h3 {
    color: #0f172a;
    font-size: 17px;
    margin: 22px 0 8px;
    line-height: 1.3;
}
.legal-article p {
    margin: 0 0 14px;
}
.legal-article ul,
.legal-article ol {
    padding-left: 22px;
    margin: 0 0 16px;
}
.legal-article li {
    margin-bottom: 6px;
}
.legal-article a {
    color: #1d4ed8;
    text-decoration: none;
}
.legal-article a:hover {
    text-decoration: underline;
}
@media (max-width: 720px) {
    .legal-toc ol {
        columns: 1;
    }
}

/* Password show/hide toggle (auth + studio pages) */
.tt-password-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}
.tt-password-wrap input {
    flex: 1;
    padding-right: 44px;
}
/* Edge / IE inject their own "reveal password" eye icon into every
   <input type="password">. Combined with our custom .tt-password-toggle
   that gave users two eyeballs stacked on each other in the field.
   Suppress the browser-native reveal so only our consistent control
   remains, matching the rest of the auth UI. */
.tt-password-wrap input::-ms-reveal,
.tt-password-wrap input::-ms-clear,
.tt-password-wrap input::-webkit-credentials-auto-fill-button {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0;
    height: 0;
}
.tt-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--tt-ink-soft, #64748b);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    line-height: 0;
}
.tt-password-toggle:hover { color: var(--tt-ink, #0f172a); }
.tt-password-toggle.is-visible .tt-password-icon-show { display: none; }
.tt-password-toggle:not(.is-visible) .tt-password-icon-hide { display: none; }