/* ============================================================
   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-green:     var(--me-ink);
    --color-red:       var(--me-danger);
    --color-darkerRed: #A50E0E;
    --color-gold:      var(--me-navy);
    --color-darkGold:  var(--me-navy-deep);
    --color-tan:       #eef1f4;
    --color-purple:    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;
}

.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-green); }`
   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;
}

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

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

/* ---------- 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;
    gap: 18px;
    max-width: 640px;
    margin: 24px auto 0;
    text-align: left;
}
.contact-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.contact-field label {
    font-weight: 600;
    color: var(--me-ink);
    font-size: 14px;
    text-align: left;
    align-self: flex-start;
}
.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;
}