/* ============================================================
   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;
    /* Pure white bar (as it shipped originally). The brand logo is a
       transparent PNG, so on white it reads as just the crescent with
       no visible tile — no need to tint the whole navbar to hide a
       seam that never existed. */
    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;
}

/* ---- Pricing selling-point additions ---- */
.tt-pricing-promo-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.tt-pricing-promo-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--me-navy-ink);
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 999px;
    padding: 6px 14px;
}

.tt-pricing-promo-pill-accent {
    color: #fff;
    background: var(--me-navy, #1e3a8a);
    border-color: var(--me-navy, #1e3a8a);
}

.tt-plan {
    position: relative;
}

.tt-plan-ribbon {
    position: absolute;
    top: -11px;
    right: 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: #f59e0b;
    border-radius: 999px;
    padding: 4px 12px;
    box-shadow: 0 6px 16px -8px rgba(245, 158, 11, 0.8);
}

.tt-plan-best {
    font-size: 13px;
    font-weight: 700;
    color: var(--me-navy-ink);
    margin: 0;
    line-height: 1.4;
}

.tt-plan.is-featured .tt-plan-best {
    color: #bfdbfe;
}

.tt-plan-cta-note {
    margin: 6px 0 0;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--tt-ink-soft);
    /* Reserve two lines so a one-line note (e.g. "no credit card")
       and a two-line note ("1st month free for first 25 studios")
       occupy the same height — keeps every card's CTA button on the
       same baseline across the grid. */
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* The 4-up plan grid had no responsive collapse, so on tablets and
   phones the four cards squeezed into unreadable slivers. Step it
   down 4 -> 2 -> 1 like the rest of the marketing grids. */
@media (max-width: 1080px) {
    .tt-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

.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; }
}

/* ---------- Competitor comparison ---------- */
.compare-table-wrap {
    margin-top: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    background: #fff;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 940px;
    font-size: 14px;
}

.compare-table thead th {
    text-align: center;
    padding: 16px 12px;
    font-family: var(--tt-font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tt-ink-soft);
    border-bottom: 1px solid var(--tt-border);
    vertical-align: bottom;
}

.compare-table thead th.compare-feature-col {
    text-align: left;
    width: 32%;
}

.compare-table thead th.compare-us-col {
    background: linear-gradient(180deg, rgba(30, 58, 138, 0.06), rgba(30, 58, 138, 0.02));
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.compare-us-name {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--me-navy-ink, #1e3a8a);
}

.compare-us-tag {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--me-navy, #1e3a8a);
    border-radius: 999px;
    padding: 3px 10px;
}

.compare-table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--tt-ink);
    padding: 13px 14px;
    border-bottom: 1px solid var(--tt-border);
}

.compare-note {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--tt-ink-soft);
    margin-top: 2px;
}

.compare-table tbody td {
    text-align: center;
    padding: 13px 12px;
    border-bottom: 1px solid var(--tt-border);
    color: var(--tt-ink);
}

.compare-table tbody td.compare-us-col {
    background: rgba(30, 58, 138, 0.035);
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-yes {
    color: #16a34a;
    font-size: 18px;
    font-weight: 800;
}

.compare-no {
    color: #cbd5e1;
    font-size: 18px;
    font-weight: 700;
}

.compare-partial {
    color: #d97706;
    font-size: 16px;
    font-weight: 800;
}

/* Competitor column header: name on top, real price beneath. */
.compare-co-name {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--tt-ink);
}

.compare-co-price {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tt-ink-soft);
    white-space: normal;
}

/* Keep the feature column visible while the wide matrix scrolls. */
.compare-table thead th.compare-feature-col,
.compare-table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
}

.compare-table tbody td.compare-us-col {
    background: rgba(30, 58, 138, 0.04);
}

/* Category band rows that group the long feature list. */
.compare-cat-row th.compare-cat {
    text-align: left;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.06), rgba(15, 23, 42, 0.02));
    color: var(--tt-ink);
    font-family: var(--tt-font-display);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 11px 14px;
    border-bottom: 1px solid var(--tt-border);
    position: sticky;
    left: 0;
}

.compare-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 14px 2px 0;
    font-size: 12.5px;
    color: var(--tt-ink-soft);
}

.compare-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.compare-scrollhint {
    font-size: 12px;
    color: var(--tt-ink-soft);
    margin: 6px 2px 0;
}

.compare-sources {
    font-size: 12px;
    color: var(--tt-ink-soft);
    line-height: 1.6;
    margin-top: 18px;
}

/* Collapsible comparison sections. Pricing is open by default; the
   rest start closed so the long matrix stays scannable. */
.compare-section {
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    background: #fff;
    margin-top: 12px;
    overflow: hidden;
}

.compare-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    font-family: var(--tt-font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--tt-ink);
    user-select: none;
}

.compare-summary::-webkit-details-marker { display: none; }

.compare-summary::after {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-right: 2px solid var(--tt-ink-soft);
    border-bottom: 2px solid var(--tt-ink-soft);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.compare-section[open] > .compare-summary::after {
    transform: rotate(-135deg);
}

.compare-summary:hover {
    background: rgba(15, 23, 42, 0.025);
}

.compare-summary-count {
    margin-left: auto;
    font-family: var(--tt-font-body, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 600;
    color: var(--tt-ink-soft);
}

.compare-section .compare-table-wrap {
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--tt-border);
    border-radius: 0;
}

.compare-price-lead {
    margin: 0;
    padding: 14px 18px 2px;
    font-size: 13.5px;
    color: var(--tt-ink-soft);
    line-height: 1.55;
}

.compare-price {
    font-weight: 700;
    color: var(--tt-ink);
    font-size: 13.5px;
}

.compare-price-sub {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--tt-ink-soft);
}

.compare-table tbody td.compare-us-col .compare-price-best {
    color: var(--me-navy-ink, #1e3a8a);
    font-weight: 800;
}

/* Highlight the escalating per-teacher math on rival price cells so
   the cost of "+ per extra teacher" reads at a glance. */
.compare-price-add {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: #b45309;
    line-height: 1.25;
}

/* Expand-all / collapse-all controls above the comparison sections. */
.compare-controls {
    display: flex;
    gap: 10px;
    margin: 14px 2px 4px;
}

.compare-ctrl-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--tt-border);
    background: #fff;
    color: var(--me-navy-ink, #1e3a8a);
    font-family: var(--tt-font-body, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 15px;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.compare-ctrl-btn:hover {
    background: var(--me-navy-soft, #eff6ff);
    border-color: #93c5fd;
}

.compare-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 34px;
}

.compare-highlight {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    padding: 22px 20px;
}

.compare-highlight h3 {
    font-family: var(--tt-font-display);
    font-size: 17px;
    margin: 0 0 8px;
    color: var(--tt-ink);
}

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

@media (max-width: 820px) {
    .compare-highlight-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------
   Compare matrix on phones.

   The 7-column matrix (Feature + us + 5 rivals) can't fit a phone
   even with horizontal scroll: the sticky feature column ate most
   of the width and left a cramped sliver to swipe through, so the
   actual check / cross marks were effectively off-screen and the
   table "disappeared". Below ~720px we reflow every row into a
   self-contained card: the feature name becomes the card title and
   each provider drops onto its own "Name … mark" line (label from
   each cell's data-label / column position). The whole comparison
   then reads top-to-bottom with no sideways scrolling at all.
   ---------------------------------------------------------------- */
@media (max-width: 720px) {
    .compare-scrollhint { display: none; }

    .compare-table-wrap,
    .compare-section .compare-table-wrap {
        overflow-x: visible;
        border: 0;
        border-top: 0;
        border-radius: 0;
        background: transparent;
        margin-top: 0;
    }

    .compare-table {
        min-width: 0;
        width: 100%;
        font-size: 14px;
        display: block;
    }

    .compare-table thead { display: none; }

    .compare-table tbody,
    .compare-table tbody tr,
    .compare-table tbody th,
    .compare-table tbody td {
        display: block;
        width: auto;
    }

    .compare-table tbody tr {
        border: 1px solid var(--tt-border);
        border-radius: var(--tt-radius-md);
        background: #fff;
        margin: 0 0 12px;
        padding: 4px 14px 8px;
        overflow: hidden;
    }

    .compare-table tbody tr:last-child { margin-bottom: 0; }

    /* Feature name -> card heading. Drop the sticky positioning that
       only made sense for a scrolling matrix. */
    .compare-table tbody th[scope="row"] {
        position: static;
        left: auto;
        z-index: auto;
        padding: 11px 0 9px;
        border-bottom: 1px solid var(--tt-border);
        font-size: 15px;
        font-weight: 800;
        color: var(--tt-ink);
    }

    /* Each provider cell becomes a "label … value" row. */
    .compare-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        text-align: right;
        padding: 9px 0;
        border-bottom: 1px solid rgba(15, 23, 42, 0.07);
        color: var(--tt-ink);
    }

    .compare-table tbody td:last-child { border-bottom: 0; }

    .compare-table tbody td::before {
        content: attr(data-label);
        flex: 1 1 auto;
        text-align: left;
        font-size: 13px;
        font-weight: 600;
        color: var(--tt-ink-soft);
    }

    /* Pull the price sub-notes back under the value column so the
       label/value split stays clean. */
    .compare-price,
    .compare-table tbody td .compare-price {
        text-align: right;
    }

    /* Highlight our own column as a tinted, full-bleed band so the
       reader's eye lands on it inside every card. */
    .compare-table tbody td.compare-us-col {
        background: rgba(30, 58, 138, 0.06);
        margin: 4px -14px 0;
        padding: 10px 14px;
        border-bottom: 0;
        border-radius: 8px;
        font-weight: 700;
    }

    .compare-table tbody td.compare-us-col::before {
        color: var(--me-navy-ink, #1e3a8a);
        font-weight: 800;
    }

    /* Order the highlighted "us" cell first inside the card so the
       comparison anchor sits at the top, rivals beneath it. */
    .compare-table tbody tr { display: flex; flex-direction: column; }
    .compare-table tbody th[scope="row"] { order: -2; }
    .compare-table tbody td.compare-us-col { order: -1; }
}

/* ============================================================
   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;
    }

    /* Push the hamburger to the far right. The <nav> wrapper stays in
       the flow but its links are fixed-positioned, so it collapses to
       zero width and the toggle lands on the right edge. */
    .tt-nav-toggle { display: inline-flex; margin-left: auto; }

    .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; }