/* ═══════════════════════════════════════════════════
   TRUST CENTER — page-specific layout only.
   Card visuals, chips, badges all come from trust-shared.css;
   hero/section/button/grid primitives come from atominc-shared.css
   (.page-hero, .sec, .sec-center, .s-eyebrow/.s-h2/.s-h3/.s-body,
   .s-btn-green/.s-btn-outline, .cards-grid, .feat-list). This file
   only adds what's genuinely new to this page: the in-page anchor
   nav, the status rows, the two-state roadmap, and the FAQ accordion.
   ═══════════════════════════════════════════════════ */

/* ── HERO EXTRAS ─────────────────────────────────────────── */
/* Taller + a masked hairline grid layered under the shared .page-hero
   radial glows, for more presence than the standard sub-page hero.
   Scoped as a compound selector (.page-hero.tc-hero) so every other
   page still gets the plain, shorter .page-hero. */
.page-hero.tc-hero { padding: 172px 0 116px; }
.tc-hero-grid {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 0),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 0);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 88%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, #000 30%, transparent 88%);
}
.tc-hero-icon {
    width: 76px; height: 76px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 26px;
    background: rgba(22,163,74,.15);
    border: 1px solid rgba(22,163,74,.3);
    color: #86efac;
}
.tc-hero-icon svg { width: 34px; height: 34px; }

/* ── ICON PROMINENCE (Trust Center only) ── a soft category-tinted
   glow behind each card icon, layered on top of trust-shared.css's
   sitewide icon sizing rather than resizing it again here. */
.tc-page .trust-card-icon { box-shadow: 0 8px 20px -6px var(--accent-glow, rgba(22,163,74,.3)); }

/* ── SUB-SECTION HEAD ── used when two related topics share one
   .sec (e.g. Privacy + Data Processing) instead of two full sections */
.tc-sub-head { text-align: center; max-width: 560px; margin: 56px auto 28px; }
.tc-sub-head h3 { font-size: 1.3rem; font-weight: 800; color: var(--ink); margin: 0 0 8px; letter-spacing: -.01em; }
.tc-sub-head p { font-size: .92rem; color: var(--ink-muted); line-height: 1.6; margin: 0; }

/* ── ANCHOR NAV ── sticky pill strip beneath the fixed header.
   Plain in-page links, no JS — extend by appending another <a>. */
.tc-nav-wrap {
    position: sticky;
    top: 68px;
    z-index: 40;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.tc-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding: 14px 40px;
    scrollbar-width: none;
}
.tc-nav::-webkit-scrollbar { display: none; }
.tc-nav a {
    flex-shrink: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 50px;
    white-space: nowrap;
    transition: all .2s ease;
}
.tc-nav a:hover { background: var(--green-light); color: var(--green); }

/* Every anchored section clears the fixed header + sticky nav strip */
.tc-anchor { scroll-margin-top: 140px; }

/* ── SECTION INTRO ── (thin wrapper around .sec-center for a
   link-out, e.g. Privacy Overview → full Privacy Policy) */
.tc-sec-link { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--green); text-decoration: none; margin-top: 8px; }
.tc-sec-link:hover { text-decoration: underline; }
.tc-sec-link svg { width: 15px; height: 15px; }

/* ── COMPLIANCE ROADMAP NOTE ── small hedge line under the
   Compliance Overview grid, calling out SOC2/ISO27001 as roadmap */
.tc-hedge {
    max-width: 760px; margin: 32px auto 0;
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(217,119,6,.06); border: 1px solid rgba(217,119,6,.2);
    border-radius: var(--radius-md); padding: 14px 18px;
    font-size: .85rem; color: #92400e; line-height: 1.6;
}
.tc-hedge svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: #b45309; }


/* ── TRUST AT A GLANCE + ROADMAP — elevated/prominent treatment ──
   A soft green-tinted background lifts this section visually above
   the plain white/surface alternation used elsewhere, since it's the
   page's closing "summary" content the polish pass asked to emphasize. */
.tc-prominent {
    background: radial-gradient(ellipse 900px 500px at 50% 0%, rgba(22,163,74,.06) 0%, transparent 70%), var(--surface);
}
.tc-badges-row .trust-badge { padding: 10px 18px; font-size: .85rem; }
.tc-badges-row .trust-badge svg { width: 16px; height: 16px; }

.tc-roadmap-divider {
    display: flex; align-items: center; gap: 16px;
    max-width: 980px; margin: 52px auto 28px;
    font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}
.tc-roadmap-divider::before, .tc-roadmap-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.tc-roadmap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; align-items: start; }
.tc-roadmap-panel { padding: 30px 26px; }
.tc-roadmap-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.tc-roadmap-head svg { width: 18px; height: 18px; }
.tc-roadmap-head span:not(.trust-chip) { font-size: .98rem; font-weight: 800; color: var(--ink); }
.tc-roadmap-head .trust-chip { margin-left: auto; }
.tc-roadmap-panel.is-current .tc-roadmap-head { color: #15803d; }
.tc-roadmap-panel.is-future .tc-roadmap-head { color: #b45309; }
.tc-roadmap-panel .feat-list li svg { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.tc-roadmap-panel.is-current .feat-list li svg { color: #16a34a; }
.tc-roadmap-panel.is-future .feat-list li svg { color: #d97706; }
.tc-roadmap-panel.is-future .feat-list li { color: var(--ink-muted); }

/* ── FAQ ACCORDION (page-scoped clone of the Pricing page pattern,
   restyled onto global tokens instead of --rq-* page vars) ── */
.tc-accordion { display: flex; flex-direction: column; gap: 8px; max-width: 760px; margin: 0 auto; }
.tc-accordion__item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: border-color .25s; }
.tc-accordion__item:has(.tc-accordion__trigger[aria-expanded="true"]) { border-color: rgba(22,163,74,.35); box-shadow: 0 4px 16px rgba(22,163,74,.08); }
.tc-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: none; border: none; cursor: pointer; color: var(--ink); font-family: inherit; font-size: .92rem; font-weight: 600; text-align: left; transition: color .25s; }
.tc-accordion__trigger:hover { color: var(--green); }
.tc-accordion__trigger[aria-expanded="true"] { color: var(--green); }
.tc-accordion__chevron { flex-shrink: 0; color: #9ca3af; transition: transform .25s ease, color .25s; }
.tc-accordion__trigger[aria-expanded="true"] .tc-accordion__chevron { transform: rotate(180deg); color: var(--green); }
.tc-accordion__panel { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .38s ease, opacity .28s ease; }
.tc-accordion__panel p { padding: 0 22px 20px; font-size: .88rem; color: var(--ink-muted); line-height: 1.75; }

/* ── CONTACT SECURITY TEAM ── */
.tc-contact-card { max-width: 560px; margin: 0 auto; text-align: center; }
.tc-contact-email { font-size: 1.15rem; font-weight: 800; color: var(--green); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 14px; }
.tc-contact-email:hover { text-decoration: underline; }
.tc-contact-note { font-size: .82rem; color: var(--ink-muted); line-height: 1.6; }

/* ── TRUST BADGES STRIP ── */
.tc-badges-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; }

/* ── CLOSING CTA ── bookends the hero (same navy + radial-glow
   technique) for a deliberate, symmetric ending instead of the page
   just stopping at the last content section before the footer. */
.tc-closing {
    position: relative; overflow: hidden;
    padding: 96px 0;
    background: var(--navy);
    text-align: center;
}
.tc-closing-grid {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 30%, rgba(22,163,74,.16) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 90%, rgba(230,57,117,.1) 0%, transparent 50%);
}
.tc-closing-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.tc-closing h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: #fff; margin: 0 0 14px; text-wrap: balance; }
.tc-closing p { font-size: 1rem; color: rgba(255,255,255,.68); line-height: 1.7; margin: 0 0 30px; }

/* ── EXTENSIBILITY NOTE (visual, not just a code comment) ──
   Small closing line under the anchor nav content signalling more
   sections land here later (Whitepaper, DPA, Subprocessors, etc). */
.tc-more-soon { text-align: center; font-size: .78rem; color: #9ca3af; padding: 8px 0 0; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .tc-roadmap { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .page-hero.tc-hero { padding: 140px 0 84px; }
    .tc-hero-icon { width: 64px; height: 64px; }
    .tc-hero-icon svg { width: 28px; height: 28px; }
    .tc-nav { padding: 12px 20px; }

    .tc-roadmap-head { flex-wrap: wrap; }
    .tc-closing { padding: 72px 0; }
}