/* Defend.ink site theme — the navy + amber look of /for-lawyers, as reusable parts.
   Everything is scoped under .th so it can be adopted page by page without touching existing styles.
   Colours: navy #0f172a / #1e3a5f (contrast + headings), amber #f59e0b (the one main action per section),
   soft blue #eef4ff → #e8f0fe (hero), greys for body text, green only for "included" ticks. */

.th {
    --th-navy: #0f172a; --th-navy2: #1e3a5f;
    --th-amber: #f59e0b; --th-amber2: #fbbf24; --th-amber-dk: #d97706;
    --th-ink: #0f172a; --th-body: #475569; --th-mute: #64748b; --th-line: #e2e8f0;
    --th-soft: #f8fafc; --th-sky: #eef4ff; --th-sky2: #e8f0fe;
    --th-green: #16a34a; --th-green-bg: #f0fdf4; --th-green-line: #bbf7d0;
    --th-radius: 16px; --th-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 32px -16px rgba(15,23,42,.18);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--th-ink); -webkit-font-smoothing: antialiased;
}
.th *, .th *::before, .th *::after { box-sizing: border-box; }
.th a { text-decoration: none; }

/* ── Layout ── */
.th-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.th-section { padding: 84px 0; background: #fff; }
.th-section.th-alt { background: var(--th-soft); }
.th-section.th-navy { background: linear-gradient(135deg, var(--th-navy) 0%, var(--th-navy2) 100%); color: #fff; }
.th-section.th-sky { background: linear-gradient(160deg, var(--th-sky) 0%, #f0f7ff 50%, var(--th-sky2) 100%); }
.th-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }

/* ── Type ── */
.th-eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--th-navy2); background: rgba(30,58,95,.08); padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.th-navy .th-eyebrow { color: var(--th-amber2); background: rgba(251,191,36,.12); }
.th-h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 18px; color: var(--th-ink); }
.th-h1 em { font-style: normal; color: var(--th-amber); }
.th-h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 12px; color: var(--th-ink); }
.th-navy .th-h2 { color: #fff; }
.th-lead { font-size: 18px; line-height: 1.65; color: var(--th-body); margin: 0; }
.th-navy .th-lead { color: #cbd5e1; }

/* ── Buttons ── */
.th-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 16px; border-radius: 12px; padding: 14px 26px; border: 2px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .15s, background .15s; line-height: 1.2; }
.th-btn:hover { transform: translateY(-1px); }
.th-btn-primary { background: var(--th-amber); color: var(--th-navy); box-shadow: 0 8px 20px -8px rgba(245,158,11,.8); }
.th-btn-primary:hover { background: #fbab1f; }
.th-btn-ghost { background: #fff; color: var(--th-navy); border-color: var(--th-line); }
.th-btn-ghost:hover { border-color: #cbd5e1; box-shadow: var(--th-shadow); }
.th-btn-navy { background: var(--th-navy); color: #fff; }
.th-btn-sm { font-size: 14.5px; padding: 11px 20px; border-radius: 10px; }
.th-btn-block { display: flex; width: 100%; }

/* ── Cards, chips, lists ── */
.th-card { background: #fff; border: 1px solid var(--th-line); border-radius: var(--th-radius); padding: 26px; box-shadow: var(--th-shadow); }
.th-grid { display: grid; gap: 20px; }
.th-grid-3 { grid-template-columns: repeat(3, 1fr); }
.th-grid-2 { grid-template-columns: repeat(2, 1fr); }
.th-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--th-sky); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px; }
.th-card h3 { font-size: 18px; font-weight: 800; margin: 0 0 6px; color: var(--th-ink); letter-spacing: -.01em; }
.th-card p { font-size: 15px; line-height: 1.6; color: var(--th-body); margin: 0; }
.th-ticks { list-style: none; margin: 0; padding: 0; }
.th-ticks li { position: relative; padding: 6px 0 6px 28px; font-size: 15px; line-height: 1.45; color: #334155; }
.th-ticks li::before { content: '✓'; position: absolute; left: 0; top: 7px; width: 19px; height: 19px; border-radius: 50%; background: #dcfce7; color: var(--th-green); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.th-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #065f46; background: rgba(6,95,70,.08); border: 1px solid rgba(6,95,70,.2); border-radius: 999px; padding: 6px 14px; }
.th-pill:hover { background: rgba(6,95,70,.14); }
.th-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--th-mute); margin-top: 20px; }

/* ── Product mock-ups (pure HTML/CSS pictures of what a lawyer gets) ── */
.th-browser { background: #fff; border-radius: 16px; border: 1px solid var(--th-line); box-shadow: 0 30px 60px -28px rgba(15,23,42,.35); overflow: hidden; max-width: 100%; min-width: 0; }
.th-browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #f1f5f9; border-bottom: 1px solid var(--th-line); min-width: 0; }
.th-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.th-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: 8px; background: #fff; border: 1px solid var(--th-line); border-radius: 8px; padding: 5px 12px; font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: #334155; }
.th-sample { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--th-mute); background: #f1f5f9; border-radius: 6px; padding: 2px 8px; }

/* ── Step numbers, stats, FAQ ── */
.th-step { text-align: center; padding: 8px 12px; }
.th-step-n { width: 52px; height: 52px; border-radius: 50%; background: var(--th-navy); color: var(--th-amber2); font-size: 22px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.th-step h3 { font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.th-step p { font-size: 15px; line-height: 1.6; color: var(--th-body); margin: 0; }
.th-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 64px; }
.th-stat b { display: block; font-size: 40px; font-weight: 900; letter-spacing: -.03em; color: var(--th-amber2); line-height: 1.1; }
.th-stat span { font-size: 14.5px; color: #cbd5e1; }
.th-faq details { background: #fff; border: 1px solid var(--th-line); border-radius: 14px; padding: 0; margin-bottom: 12px; }
.th-faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 16.5px; padding: 18px 22px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.th-faq summary::-webkit-details-marker { display: none; }
.th-faq summary::after { content: '+'; font-size: 22px; color: var(--th-mute); font-weight: 500; }
.th-faq details[open] summary::after { content: '−'; }
.th-faq .th-ans { padding: 0 22px 20px; font-size: 15.5px; line-height: 1.65; color: var(--th-body); }

@media (max-width: 860px) {
    .th-section { padding: 60px 0; }
    .th-grid-3, .th-grid-2 { grid-template-columns: 1fr; }
    .th-lead { font-size: 16.5px; }
    .th-btn { width: 100%; }
    .th-head { margin-bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) { .th-btn { transition: none; } .th-btn:hover { transform: none; } }

/* ═══ Modern layer: dark hero, glass, glow, bento, motion ═══ */
.th-h1, .th-h2 { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; }
.th-grad { background: linear-gradient(90deg, #fde68a 0%, #fbbf24 40%, #f59e0b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.th-hero-dark { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 85% -10%, rgba(245,158,11,.18), transparent 60%), radial-gradient(900px 600px at -10% 110%, rgba(59,130,246,.22), transparent 60%), linear-gradient(160deg, #0b1220 0%, #0f172a 45%, #1e3a5f 100%); color: #fff; padding: 78px 0 92px; }
.th-hero-dark::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); pointer-events: none; }
.th-hero-dark .th-container { position: relative; z-index: 1; }
.th-hero-dark .th-h1 { color: #fff; font-size: clamp(38px, 5.6vw, 66px); letter-spacing: -.035em; line-height: 1.04; }
.th-hero-dark .th-lead { color: #cbd5e1; }
.th-hero-dark .th-trust { color: #94a3b8; }
.th-badge-live { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: #e2e8f0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; backdrop-filter: blur(8px); }
.th-badge-live i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: th-pulse 2s infinite; }
.th-btn-glass { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); backdrop-filter: blur(8px); }
.th-btn-glass:hover { background: rgba(255,255,255,.14); }
.th-btn-primary.th-glowbtn { box-shadow: 0 0 0 1px rgba(251,191,36,.5), 0 12px 40px -6px rgba(245,158,11,.65); }

.th-stage { position: relative; padding: 34px 26px 40px; }
.th-glass { min-width: 0; max-width: 100%; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); color: #fff; }
.th-glass-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.10); }
.th-glass-bar .th-url { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #cbd5e1; }
.th-glass-body { padding: 20px; }
.th-glass .th-kpi { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.th-glass .th-kpi b { color: #fff; }
.th-glass .th-kpi span { color: #94a3b8; }
.th-glass .th-row { border-top-color: rgba(255,255,255,.10); color: #e2e8f0; }
.th-glass .th-row small { color: #94a3b8; }
.th-glass .th-sample { background: rgba(255,255,255,.10); color: #cbd5e1; }
.th-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--th-ink); border-radius: 14px; padding: 10px 14px; font-size: 13px; font-weight: 700; box-shadow: 0 20px 40px -14px rgba(0,0,0,.5); animation: th-float 6s ease-in-out infinite; }
.th-float small { display: block; font-weight: 500; color: var(--th-mute); font-size: 11.5px; }
.th-float .ic { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--th-sky); }
.th-float.f1 { top: 0; left: -6px; animation-delay: 0s; }
.th-float.f2 { bottom: -2px; left: 4%; animation-delay: -2s; }
.th-float.f3 { top: 62%; right: -10px; animation-delay: -4s; }

.th-marquee { background: #0b1220; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); overflow: hidden; max-width: 100%; padding: 16px 0; }
.th-marquee:hover .th-marquee-track { animation-play-state: paused; }
.th-marquee-track { display: flex; gap: 12px; width: max-content; animation: th-scroll 38s linear infinite; }
.th-marquee a { flex: none; color: #cbd5e1; font-size: 14px; font-weight: 600; padding: 7px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.04); text-decoration: none; }
.th-marquee a:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); }

.th-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.th-tile { position: relative; background: #fff; border: 1px solid var(--th-line); border-radius: 24px; padding: 26px; overflow: hidden; box-shadow: var(--th-shadow); transition: transform .2s, box-shadow .2s; }
.th-tile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 24px 48px -20px rgba(15,23,42,.28); }
.th-tile h3 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 6px; }
.th-tile p { font-size: 15px; line-height: 1.55; color: var(--th-body); margin: 0; }
.th-tile .th-more { display: inline-block; margin-top: 14px; }
.th-tile.th-t-dark { background: linear-gradient(145deg, #0f172a, #1e3a5f); border-color: transparent; color: #fff; }
.th-tile.th-t-dark h3 { color: #fff; } .th-tile.th-t-dark p { color: #cbd5e1; } .th-tile.th-t-dark .th-more { color: #fbbf24; }
.th-tile.th-t-amber { background: linear-gradient(145deg, #fffbeb, #fef3c7); border-color: #fde68a; }
.th-t-a { grid-column: span 4; } .th-t-b { grid-column: span 2; } .th-t-c { grid-column: span 2; } .th-t-d { grid-column: span 2; } .th-t-e { grid-column: span 2; }
.th-mini { margin-top: 18px; border-radius: 14px; padding: 14px; font-size: 13.5px; }
.th-mini.dk { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.th-mini.lt { background: var(--th-soft); border: 1px solid var(--th-line); }
.th-mini .ln { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(148,163,184,.25); } .th-mini .ln:first-child { border-top: 0; padding-top: 0; }
.th-mini .ln small { opacity: .7; }
.th-bar { height: 8px; border-radius: 99px; background: #e2e8f0; overflow: hidden; margin-top: 10px; } .th-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.th-domain { display: flex; align-items: center; gap: 8px; margin-top: 18px; background: #fff; border: 1px solid #fde68a; border-radius: 12px; padding: 10px 14px; font: 700 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
.th-domain b { margin-left: auto; font: 700 11.5px 'Inter', sans-serif; color: var(--th-green); }

/* soft scroll-in (only when JS runs; respects reduced motion) */
.th.th-js .th-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.th.th-js .th-reveal.is-in { opacity: 1; transform: none; }

@keyframes th-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes th-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
@keyframes th-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 860px) {
    .th-hero-dark { padding: 56px 0 64px; }
    .th-bento { grid-template-columns: 1fr; }
    .th-t-a, .th-t-b, .th-t-c, .th-t-d, .th-t-e { grid-column: auto; }
    .th-float.f3 { display: none; }
    .th-float.f1 { left: 0; } .th-float.f2 { left: 0; }
    .th-stage { padding: 30px 6px 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .th-float, .th-badge-live i, .th-marquee-track { animation: none; }
    .th-marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
    .th-marquee a[aria-hidden="true"] { display: none; }
    .th.th-js .th-reveal { opacity: 1; transform: none; transition: none; }
}

/* audience switch: lawyers (this page) / people looking for a lawyer */
.th-seg { display: inline-flex; padding: 4px; margin-bottom: 30px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.th-seg span, .th-seg a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 999px; line-height: 1.2; white-space: nowrap; }
.th-seg .on { background: #fff; color: var(--th-navy); box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); }
.th-seg a { color: #cbd5e1; transition: color .15s, background .15s; }
.th-seg a:hover { color: #fff; background: rgba(255,255,255,.10); }
.th-seg a b { color: var(--th-amber2); font-weight: 800; transition: transform .15s; }
.th-seg a:hover b { transform: translateX(3px); }
@media (max-width: 420px) { .th-seg span, .th-seg a { padding: 9px 13px; font-size: 13px; } }

/* Tool landings — compact dark header, same navy and gold as the homepage hero */
.th-tools .th-pagehead {
    position: relative;
    overflow: hidden;
    background: radial-gradient(900px 280px at 80% -20%, rgba(245,158,11,.22), transparent 55%), linear-gradient(160deg, #0b1220 0%, #0f172a 48%, #1e3a5f 100%);
    color: #fff;
    padding: 36px 0 32px;
    text-align: center;
}
.th-tools .th-pagehead .th-h1 { color: #fff; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; margin-bottom: 10px; }
.th-tools .th-pagehead .th-h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #fde68a 0%, #fbbf24 45%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.th-tools .th-pagehead .th-lead { color: #cbd5e1; font-size: 16.5px; max-width: 640px; margin-left: auto; margin-right: auto; }
.th-tools .th-pagehead .th-crumb, .th-tools .th-pagehead .th-crumb a { color: #cbd5e1; justify-content: center; }
.th-tools .th-pagehead .th-crumb a:hover { color: #fff; }
.th-tools .th-pagehead .th-trust { margin-top: 14px; justify-content: center; color: #94a3b8; }
.th-tools .th-pagehead + .th-section { padding-top: 48px; }
.th-mark { font-style: normal; color: #fbbf24; }
.th-navy .th-step h3 { color: #fff; }
.th-navy .th-step p { color: #cbd5e1; }
.th-navy .th-step-n { background: rgba(251,191,36,.16); color: #fbbf24; border: 1px solid rgba(251,191,36,.4); }
.th-navy .th-prose { margin-left: auto; margin-right: auto; }
.th-navy .th-prose h2, .th-navy .th-prose h3 { color: #fff; }
.th-navy .th-prose p, .th-navy .th-prose li { color: #cbd5e1; }
.th-navy .th-prose a { color: #fbbf24; font-weight: 700; }
.th-navy .th-prose a:hover { text-decoration: underline; }
.th-tools .th-tile { display: flex; flex-direction: column; height: 100%; color: inherit; }
.th-tools .th-tile .th-more { margin-top: auto; padding-top: 16px; font-weight: 800; }
.th-tools .th-t-amber .th-more { color: #92400e; }
.th-tools .th-t-dark .th-icon { background: rgba(255,255,255,.08); }
.th-crumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--th-mute); margin-bottom: 14px; }
.th-crumb a { color: var(--th-navy2); }
.th-crumb a:hover { text-decoration: underline; }
.th-hero-dark .th-crumb, .th-hero-dark .th-crumb a { color: #cbd5e1; }
.th-linkcard { display: flex; flex-direction: column; height: 100%; color: inherit; transition: transform .15s, box-shadow .15s; }
.th-linkcard:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 18px 36px -18px rgba(15,23,42,.28); }
.th-linkcard .go { display: inline-block; margin-top: auto; padding-top: 16px; font-weight: 800; font-size: 14.5px; color: var(--th-navy2); }
.th-soon { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a6200; background: #fef6e4; border: 1px solid #f0d9a8; border-radius: 999px; padding: 3px 8px; }
.th-prose { max-width: 760px; }
.th-prose h2 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.th-prose h3 { font-size: 18px; font-weight: 800; margin: 22px 0 8px; }
.th-prose p, .th-prose li { font-size: 16px; line-height: 1.7; color: var(--th-body); }
.th-prose p { margin: 0 0 14px; }
.th-prose ul { margin: 0 0 14px; padding-left: 1.2em; }
.th-note { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; border-radius: 12px; padding: 12px 16px; font-size: 14.5px; line-height: 1.55; margin-bottom: 22px; }
@media (max-width: 640px) {
    .th-tools .th-pagehead { padding: 22px 0 20px; }
    .th-tools .th-pagehead .th-h1 { font-size: 28px; }
    .th-tools .th-pagehead .th-lead { font-size: 15.5px; }
    .th-tools .th-pagehead .th-crumb { margin-bottom: 10px; }
    .th-tools .th-pagehead + .th-section { padding-top: 32px; }
    .th-tools .th-h2 { font-size: 24px; }
    .th-tools .th-container { padding-left: 32px; padding-right: 32px; }
    .th-navy .th-prose h2 { font-size: 24px; }
}