/* ============================================================
Tarth — mobile responsive layer (shared across all pages)
============================================================
Applied to: index.html, hub.html, hub/*.html, trust-center.html, privacy.html
Load AFTER every other stylesheet on the page.
Breakpoints:
- ≤767px (phone: 360/390/430)
- 768–900 (tablet portrait + landscape phone)
- Motion: non-essential animation disabled ≤767px
Strategy: OVERRIDE only, don't rebuild. Desktop design is the
source of truth; this file pares it down for smaller screens
without removing meaning.
============================================================ */
/* ============ 1. GLOBAL MOBILE TOUCH-UPS ============ */
/* Remove desktop-only :hover transform side-effects on touch
(they leave elements stuck in hover state after a tap). */
@media (hover: none) and (pointer: coarse) {
a, button { -webkit-tap-highlight-color: transparent; }
.hub-card:hover, .uc-slide:hover, .sec-card:hover,
.faq-item > summary:hover, .nav-cta:hover, .float-nav:hover {
transform: none !important;
}
}
/* Horizontal overflow safety net — anything that escapes the
viewport on phones is almost always unintended. */
@media (max-width: 767px) {
html, body { overflow-x: hidden; }
.wrap { padding-left: 20px; padding-right: 20px; }
/* Brand mark + ISO pill: equidistant breathing room from screen edges.
Nav .wrap.row gets a touch more padding so the wordmark sits at 22px
from the left, matching the ISO pill's right: 22px. */
nav.top .wrap.row { padding-left: 22px !important; padding-right: 22px !important; }
}
/* ============ 2. SITE-WIDE NAV (slim mobile bar) ============ */
/* Desktop nav already hides `.nav-links` at ≤980px. On ≤767 we
further collapse to just logo + Request early access CTA. */
@media (max-width: 767px) {
nav.top .wrap.row, nav.top.trust-nav .wrap.row {
padding: 0;
}
nav.top { padding: 10px 0; }
.nav-right { gap: 8px; }
.nav-right .nav-ghost { display: none; } /* Drop "Sign in" */
.nav-right .nav-cta {
font-size: 12.5px;
padding: 8px 12px;
border-radius: 10px;
}
.nav-right .nav-cta svg { width: 11px; height: 11px; }
/* Compact mailto on Trust Center nav */
nav.top .nav-right a[href^="mailto"] { font-size: 11.5px; }
/* Shrink brand mark slightly */
.brand { gap: 7px; }
.brand-mark { width: 22px; height: 22px; }
.brand span { font-size: 17px; }
}
/* Floating nav (the pill that appears on scroll) — already hidden
at ≤820px by existing rules; reinforce. */
@media (max-width: 767px) {
.float-nav { display: none !important; }
}
/* ============ 3. LANDING HERO ============ */
@media (max-width: 767px) {
.hero { padding: 12px 0 32px; }
.hero-grid { gap: 28px; }
.hero-pill { font-size: 11px; padding: 6px 10px; }
/* Headline: shrink from 58 → fluid clamp; keep energetic. */
.hero h1,
section.hero h1 {
font-size: clamp(34px, 8.5vw, 44px) !important;
line-height: 1.04;
letter-spacing: -0.022em;
margin: 14px 0 16px;
text-wrap: balance;
}
.lede {
font-size: 15.5px !important;
line-height: 1.55;
margin-bottom: 20px;
}
/* Email CTA — stack input + button */
.email-cta {
flex-direction: column;
gap: 8px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.email-cta input {
width: 100%;
padding: 13px 14px;
background: var(--surface);
border: 1px solid var(--line-2);
border-radius: 12px;
font-size: 15px;
}
.email-cta button {
width: 100%;
padding: 13px 16px;
justify-content: center;
font-size: 14px;
}
/* Trust strip — smaller + allow wrap */
.trusted { margin-top: 22px; }
.trusted .label { font-size: 10.5px; letter-spacing: 0.1em; }
.trusted .marks {
flex-wrap: wrap; row-gap: 6px;
font-size: 12px;
}
.trusted .marks .dot { margin: 0 6px; }
}
/* Hero terminal — mobile: keep it ALIVE (animation on), compact,
and deliver the one essential beat: "agent running your checks."
We hide the right Subject/Progress rail (info-heavy, redundant
with the headline), keep the left modules list as the animated
focal point, and bring the full-report CTA up so the "output is
a report" promise stays visible. Height drops from ~570 → ~320. */
@media (max-width: 767px) {
.hero-terminal-wrap {
border-radius: 14px;
min-width: 0;
max-width: 100%;
margin-top: 6px;
/* Desktop locks the wrapper to height: 620px; min-height: 620px.
Unlock on mobile so the shorter content actually shrinks the card. */
height: auto !important;
min-height: 0 !important;
}
.tarth-app {
min-height: 0 !important;
height: auto !important;
font-size: 11.5px;
border-radius: 14px;
}
.tarth-top {
padding: 8px 12px;
gap: 8px;
}
.tarth-top-l { gap: 8px; min-width: 0; }
.tarth-back { width: 14px; height: 14px; flex: none; }
.tarth-subject-name { font-size: 13px; line-height: 1.2; }
.tarth-subject-meta {
font-size: 10.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 54vw;
}
.tarth-status { font-size: 9.5px; padding: 3px 6px; }
.tarth-status span:last-child { display: none; }
.tarth-report {
font-size: 10.5px !important;
padding: 5px 9px !important;
white-space: nowrap;
border-radius: 8px;
}
/* Body: single column, left-rail only. Right rail hidden so
the terminal reads as "live screening of named subject" —
not a data dump. Progress bar stays via status dot. */
.tarth-body {
grid-template-columns: 1fr !important;
max-height: 260px;
overflow: hidden;
}
.tarth-left {
border-right: 0 !important;
border-bottom: 0 !important;
padding: 6px 10px !important;
max-height: 260px;
overflow-y: auto;
-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0, #000 86%, transparent 100%);
}
.tarth-right { display: none !important; }
.tmod { padding: 9px 10px !important; }
.tmod-head { font-size: 11.5px; gap: 8px; }
.tmod-head .label { font-weight: 500; }
.tmod-body { font-size: 10.5px !important; line-height: 1.45; }
.tmod-body ul { padding-left: 14px; }
}
/* On very small phones (≤380) tighten once more so nothing
pushes out and the status dots stay on one line. */
@media (max-width: 380px) {
.hero h1, section.hero h1 { font-size: 32px !important; }
.tarth-subject-meta { max-width: 52vw; }
}
/* ============ 4. LANDING · OTHER SECTIONS ============ */
@media (max-width: 767px) {
section { padding: 48px 0; }
/* Section eyebrow / titles */
.sec-eyebrow, .eyebrow { font-size: 10.5px; }
h2, .display-serif h2 {
font-size: clamp(28px, 7vw, 38px);
line-height: 1.08;
letter-spacing: -0.02em;
}
/* Large solutions-cta already has a 640 rule; reinforce */
.solutions-cta-head { font-size: 28px !important; }
/* "How it works" step titles — desktop sets font-size: 52px INLINE
via style="". We have to win on specificity + !important. */
.step-copy h3[style],
.step-row .step-copy h3,
.step-row h3 {
font-size: 26px !important;
line-height: 1.15 !important;
letter-spacing: -0.018em !important;
margin: 6px 0 10px !important;
}
.step-copy .eyebrow { font-size: 10.5px !important; }
.step-copy .sub { font-size: 15px !important; line-height: 1.55 !important; }
.step-copy ul { padding-left: 18px !important; }
.step-copy li { font-size: 14.5px !important; line-height: 1.55 !important; margin-bottom: 8px; }
.step-row { gap: 22px !important; }
.frag-cluster { margin-top: 4px; }
/* Use-cases — on mobile: kill the carousel behaviour and simply
stack the 4 real slides vertically. 8 of the 12 .uc-slide
elements are `.uc-clone`s (duplicated for infinite-loop scroll)
— hide them so we only show Individual / Entity / Ongoing /
Associated party once. Every slide reads at full width. */
.uc-carousel {
overflow: visible !important;
padding: 0 !important;
}
.uc-track {
flex-direction: column !important;
flex-wrap: nowrap !important;
width: 100% !important;
transform: none !important;
gap: 12px !important;
overflow: visible !important;
animation: none !important;
transition: none !important;
}
.uc-track .uc-clone { display: none !important; }
.uc-slide {
width: 100% !important;
min-width: 0 !important;
flex: 0 0 auto !important;
padding: 18px 18px 16px !important;
min-height: 0 !important;
opacity: 1 !important;
transform: none !important;
}
.uc-slide .uc-copy { gap: 10px; }
.uc-slide h3 { font-size: 18px !important; line-height: 1.2 !important; margin: 2px 0 4px !important; }
.uc-slide p { font-size: 13.5px !important; line-height: 1.5 !important; }
.uc-slide .uc-num { font-size: 11px !important; }
.uc-slide .uc-visual { display: none !important; } /* Drop the right-side visual on mobile — not meaningful stacked */
.uc-nav, .uc-dots { display: none !important; } /* No nav needed when everything is visible */
/* Hub grid on landing/hub */
.hub-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
.hub-card .cover { aspect-ratio: 16 / 10; }
.hub-card h3 { font-size: 19px; line-height: 1.2; }
/* Trust Center CTA (on landing) */
.sec-trust-cta {
font-size: 14px;
padding: 14px 18px;
width: 100%;
justify-content: space-between;
}
/* Security & Privacy — on mobile, the section becomes a simple
credibility badge strip. Keep the 4 .sec-cert cards (ISO 27001,
SOC 2, GDPR/PDPL, Pen testing) stacked; hide the verbose
`.sec-grid` (Data protection / Access / Rights / Operations)
— all that detail lives in the Trust Center. The existing
"Visit Trust Center" CTA stays and becomes the primary action. */
#security .sec-intro {
grid-template-columns: 1fr !important;
gap: 16px !important;
margin-bottom: 24px;
}
#security .sec-intro-left h2 { font-size: 28px !important; line-height: 1.1 !important; }
#security .sec-intro-right { padding: 0 !important; }
#security .sec-certs {
grid-template-columns: 1fr !important;
gap: 10px !important;
margin-top: 4px !important;
}
#security .sec-cert {
padding: 14px 14px !important;
border-radius: 12px;
gap: 12px !important;
}
#security .sec-cert-body { gap: 2px !important; }
#security .sec-cert-body strong,
#security .sec-cert-body .sec-cert-title { font-size: 14px !important; line-height: 1.25 !important; }
#security .sec-cert-body span,
#security .sec-cert-body .sec-cert-status { font-size: 11.5px !important; line-height: 1.35 !important; }
#security .sec-cert-logo {
width: 36px !important;
height: 36px !important;
flex: 0 0 36px !important;
aspect-ratio: 1 !important;
font-size: 9px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
#security .sec-cert-logo svg {
width: 36px !important;
height: 36px !important;
flex: 0 0 36px !important;
}
#security .sec-cert-mark {
width: 22px !important;
height: 22px !important;
flex: 0 0 22px !important;
aspect-ratio: 1 !important;
}
/* Hide the 4-column deep-dive; link users to the Trust Center instead. */
#security .sec-grid { display: none !important; }
#security .sec-intro-list { display: none !important; }
/* Ensure the Trust Center CTA is visible, full-width, and prominent. */
#security .sec-trust-cta,
#security a[href*="trust-center"] {
margin-top: 20px !important;
display: flex !important;
width: 100% !important;
justify-content: space-between !important;
padding: 14px 18px !important;
font-size: 14px !important;
}
/* FAQ */
.faq-lede h2 { font-size: 30px !important; max-width: 18ch; }
.faq-item > summary { padding: 16px 32px 16px 0; grid-template-columns: 28px 1fr; gap: 10px; }
.faq-q { font-size: 15px; }
.faq-a { font-size: 14.5px; line-height: 1.55; }
/* Brand bridge "tarth works for you." headline */
.brand-bridge-inner .hero-logo-word { font-size: clamp(26px, 7vw, 40px) !important; }
.brand-bridge-inner .hero-logo-mark { width: 28px; height: 28px; }
/* Case study (Zest) — compress and re-align on mobile. Desktop
uses justified body copy + a right-rail stat column; on 335px
that breaks rhythm. Left-align everything, shrink the H2, and
group the 3 stats as a compact strip so they read as a unit. */
#case-study .wrap { text-align: left; }
#case-study .case-topline { margin-bottom: 14px; }
#case-study .case-topline-label { font-size: 10.5px !important; letter-spacing: 0.12em !important; }
#case-study .case-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
/* Copy column */
#case-study .case-copy { padding: 0 !important; gap: 14px !important; }
#case-study h2,
#case-study .case-copy h2 {
font-size: 26px !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
margin: 0 0 4px !important;
text-wrap: balance;
}
#case-study .case-copy p {
font-size: 14.5px !important;
line-height: 1.6 !important;
text-align: left !important;
hyphens: none !important;
margin: 0 !important;
}
#case-study .case-logo-row {
gap: 10px !important;
margin: 2px 0 2px !important;
align-items: center !important;
}
#case-study .case-copy-logo { height: 20px !important; width: auto !important; }
#case-study .jurs { font-size: 10.5px !important; gap: 6px !important; }
/* Pull-quote: lighter framing on mobile */
#case-study .case-quote {
padding: 14px 0 !important;
margin: 6px 0 !important;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
border-radius: 0;
background: transparent;
}
#case-study .case-quote q {
font-size: 15.5px !important;
line-height: 1.48 !important;
text-align: left !important;
font-style: italic;
}
#case-study .case-quote cite {
display: flex !important;
align-items: center;
gap: 8px;
font-size: 11px !important;
margin-top: 10px !important;
}
/* Stats: 3-up strip inside a soft card. Targets real DOM:
.case-stat > .num / .label / .label > .since. */
#case-study .case-visual { padding: 0 !important; }
#case-study .case-stats-inline {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 10px !important;
padding: 16px 12px !important;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
}
#case-study .case-stat { padding: 0 !important; min-width: 0; }
#case-study .case-stat .num {
font-size: 26px !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
}
#case-study .case-stat .num .plus { font-size: 0.62em; }
#case-study .case-stat .label {
font-size: 10.5px !important;
line-height: 1.35 !important;
margin-top: 6px !important;
display: block;
}
#case-study .case-stat .label .since {
display: block;
font-size: 9.5px !important;
margin-top: 2px;
opacity: 0.7;
}
/* Inline CTA inside the case study */
#case-study .case-cta-row { margin-top: 20px !important; }
#case-study .solutions-cta.is-inline { padding: 20px 18px !important; border-radius: 14px; }
#case-study .solutions-cta-head { font-size: 22px !important; margin-bottom: 12px !important; text-align: left !important; }
/* Shift stats grid already 1-col at 780 */
.shift-stats { padding: 28px 18px !important; gap: 16px !important; }
.shift-stats .stat-arrow { display: none; }
.shift-stats .stat-num { font-size: 36px !important; }
/* Audience marquees — slow down + shorter chips */
.aud-track { animation-duration: 60s !important; }
/* Instant-approvals / console — allow horizontal scroll for dense rows */
.inst-console { font-size: 11px; }
.inst-row { grid-template-columns: 22px 1fr auto !important; gap: 8px !important; }
.inst-row .label .route { max-width: 38vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* ============ 5. WAITLIST MODAL — full-screen takeover ============ */
@media (max-width: 767px) {
/* Override the existing 640px rules to go truly full-bleed. */
.wl-modal {
padding: 0 !important;
align-items: stretch !important;
justify-content: stretch !important;
}
.wl-dialog {
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-width: 100vw !important;
max-height: 100dvh !important;
border-radius: 0 !important;
padding: 22px 20px 28px !important;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.wl-close {
top: 16px; right: 16px;
width: 38px; height: 38px;
}
.wl-wrap { max-width: 100% !important; }
.wl-title { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.08; }
.wl-sub { font-size: 14.5px !important; line-height: 1.5; }
.wl-eyebrow { font-size: 10.5px; }
.wl-steps { margin-bottom: 18px; }
.wl-field { gap: 6px; }
.wl-field label { font-size: 10.5px; }
.wl-field input:not([type="radio"]):not([type="checkbox"]),
.wl-field select {
padding: 12px 14px !important;
font-size: 15px;
}
.wl-seg { flex-wrap: nowrap; }
.wl-seg button { font-size: 13px; padding: 10px 12px; }
.wl-submit { width: 100%; }
.wl-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
.wl-actions .wl-skip { text-align: center; padding: 12px 0; }
.wl-links { margin-top: 20px; }
.wl-link { padding: 14px 16px; font-size: 14px; }
.wl-submit-row { flex-direction: column; align-items: stretch; gap: 14px; }
.wl-submit-row .wl-fineprint { text-align: center; max-width: none; }
}
/* ============ 6. HUB INDEX / HUB POSTS ============ */
@media (max-width: 767px) {
.page-head { padding: 28px 0 16px; }
.page-head h1, .hub-head h1 { font-size: clamp(34px, 8vw, 46px) !important; line-height: 1.05; }
.page-head .hub-lede, .hub-lede { font-size: 15px !important; }
.back-link { font-size: 11px; }
/* Hub post body column — prevent overflow of wide code/quotes. */
.post-body { font-size: 16px; line-height: 1.65; }
.post-body h2 { font-size: 26px !important; margin: 36px 0 12px !important; }
.post-body h3 { font-size: 19px !important; margin: 26px 0 10px !important; }
.post-body pre, .post-body code { font-size: 12.5px; }
.post-body pre { padding: 14px; overflow-x: auto; }
.post-body blockquote { padding: 14px 16px; font-size: 17px; }
.post-body figure img, .post-body img { width: 100%; height: auto; border-radius: 10px; }
.post-meta { font-size: 12px; gap: 10px; flex-wrap: wrap; }
/* Related posts on post pages — single column */
.post-related .hub-grid { grid-template-columns: 1fr !important; }
}
/* ============ 7. TRUST CENTER ============ */
@media (max-width: 767px) {
.tc-hero-grid { grid-template-columns: 1fr !important; gap: 28px; }
.tc-hero-left h1 { font-size: clamp(34px, 8vw, 46px) !important; line-height: 1.06; }
.tc-hero-left .tc-lede { font-size: 15px !important; }
.tc-chips { gap: 6px; }
.tc-chip { font-size: 11px; padding: 5px 9px; }
/* Category cards: 2- or 3-col → 1-col */
.tc-cats, .tc-cat-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.tc-cat, .tc-cat-card { padding: 18px 16px !important; }
/* Document rows */
.tc-doc { grid-template-columns: 1fr !important; gap: 10px !important; padding: 16px 14px !important; }
.tc-doc .tc-doc-meta { font-size: 12px; }
.tc-action, .tc-action[disabled] { width: 100%; justify-content: center; }
/* Subprocessor table — horizontal scroll */
.tc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tc-table { min-width: 640px; }
}
/* ============ 8. PRIVACY PAGE ============ */
@media (max-width: 767px) {
.privacy-hero h1 { font-size: clamp(34px, 8vw, 46px) !important; line-height: 1.05; }
.privacy-hero .privacy-meta { font-size: 12px; }
.privacy-body { font-size: 16px; line-height: 1.65; }
.privacy-body h2 { font-size: 22px !important; margin-top: 36px !important; }
.privacy-body h3 { font-size: 17px !important; }
.privacy-body table { font-size: 13px; }
.privacy-body table td, .privacy-body table th { padding: 10px 12px; }
}
/* ============ 9. FOOTER (shared across all pages) ============ */
@media (max-width: 767px) {
footer { padding-top: 40px; padding-bottom: 32px; }
footer .row {
flex-direction: column !important;
align-items: flex-start !important;
gap: 28px;
}
footer .brand-col { text-align: left; }
footer .brand-col p, footer .brand-col .footer-tag { font-size: 13px; max-width: 36ch; }
/* Footer nav row → vertical column */
footer .footer-nav,
footer ul.footer-nav {
flex-direction: column !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 0 !important;
}
footer .footer-nav a { font-size: 13px; }
footer .footer-nav-sep { display: none !important; }
footer .footer-legal, footer .legal { font-size: 11.5px; line-height: 1.55; }
}
/* ============ 10. MOTION REDUCTION ============ */
/* Below 768px: keep core narrative animations (terminal, hero
pill pulse) but kill the expensive/distracting motion. This
protects perf on lower-end Android and long mobile scrolls. */
@media (max-width: 767px) {
/* Marquees — slow dramatically; users on phones can read them */
.aud-track { animation-duration: 75s !important; }
.inst-marquee-track { animation-duration: 55s !important; }
/* Scroll-reveal stagger: disable */
.reveal, .frag-cluster, .reveal.is-in { transition-delay: 0ms !important; }
/* Disable hover scale/lift; tap has no hover */
.hub-card, .uc-slide, .sec-card, .tc-cat, .faq-item {
transition-property: border-color, background, color, box-shadow !important;
}
}
/* Respect OS setting universally */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.aud-track, .inst-marquee-track { animation: none !important; }
}
/* ============ 11. TABLET PORTRAIT / LANDSCAPE PHONE (768–1100) ============ */
@media (min-width: 768px) and (max-width: 1100px) {
.hero-grid { gap: 40px; }
.hero h1, section.hero h1 { font-size: 44px !important; }
section { padding: 64px 0; }
.hub-grid { grid-template-columns: 1fr 1fr !important; }
.tc-cats, .tc-cat-grid { grid-template-columns: 1fr 1fr !important; }
.sec-grid { grid-template-columns: 1fr 1fr !important; }
/* Floating nav visible here — keep but tighten */
.float-nav { font-size: 12.5px; }
/* Hero — center the headline + lede + pill at tablet AND
landscape-phone widths (covers 768–980, which now matches
the index.html grid-collapse breakpoint at 980). The text
reads visually centered when the terminal sits beneath the
copy column instead of beside it. */
.hero .hero-grid {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.hero .hero-grid > div:first-child {
text-align: center !important;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.hero .hero-pill,
.hero h1,
.hero .lede,
.hero .email-cta {
margin-left: auto !important;
margin-right: auto !important;
}
.hero h1 { max-width: 18ch !important; }
.hero .lede { max-width: 56ch; }
.hero .trusted { justify-content: center !important; }
}
/* ================================================================
12. MOBILE V2 — focused revisions (≤767px only)
================================================================
Scope: mobile only. Desktop intentionally unchanged.
Summary of changes in this block:
(a) Hero — drop email input, single small centered "Request early
access" button; center jurisdictions; hide top-right nav CTA
(redundant with the in-hero button); kill hero-terminal scroll.
(b) Centered section headers + centered step copy (titles, lede,
bullets, eyebrows) — global rule for the mobile layout.
(c) Step 01 — drop the top "Configuration · Enhanced + Net Wealth"
card; keep the Modules card only; append a right-side
"Enhanced" / "Enhanced + Net Wealth" label next to "Modules".
(d) Step 02 — drop the "Screening · In Progress" card (the right
column of the split). Keep Paste + Smart Fill.
(e) Step 03 — compress the report card ~70%: hide right scorecard
rail, hide per-module narrative sub-detail, keep header +
summary + risk-module score list. Much shorter card.
(f) Case-study — replace the quote with the stats sentence and the
closing "agent sits inside the workflow…" sentence. Keep
Zest logo + jurisdictions at top, drop the stats card.
(g) CTAs — every .email-cta (hero, both cta-bridges, case-study
inline CTA, and the final .close section) renders as a single
small centered button. No email input.
(h) Security — move "Visit Trust Center" button tighter (up).
================================================================ */
@media (max-width: 767px) {
/* ── (a) HERO ────────────────────────────────────────────────── */
/* The in-hero CTA IS the primary CTA; remove the top-right one. */
nav.top .nav-right .nav-cta { display: none !important; }
/* Center hero content block (button + jurisdictions). */
.hero .hero-grid > div:first-child {
text-align: center;
}
.hero .hero-pill {
margin-left: auto;
margin-right: auto;
}
/* Email CTA in hero → single small centered button, no input. */
section.hero .email-cta {
flex-direction: row !important;
justify-content: center !important;
width: auto !important;
max-width: none !important;
margin: 0 auto 8px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
gap: 0 !important;
}
section.hero .email-cta input[type="email"] { display: none !important; }
section.hero .email-cta button[type="submit"] {
width: auto !important;
flex: 0 0 auto !important;
padding: 11px 18px !important;
font-size: 13.5px !important;
border-radius: 10px !important;
gap: 6px;
}
section.hero .email-cta button[type="submit"] svg {
width: 12px !important;
height: 12px !important;
}
/* Jurisdictions row — center below CTA. */
.hero .trusted {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 24px;
}
.hero .trusted .marks {
justify-content: center;
max-width: 320px;
margin: 0 auto;
}
/* Hero terminal — kill scroll. We show ONE module body at a time
(the active one; all others auto-collapse via existing JS) and
hide inactive+done headers so the left column is simply the
currently-running module. Fixed height, no overflow. */
.hero-terminal-wrap .tarth-body {
max-height: none !important;
overflow: hidden !important;
height: auto !important;
}
.hero-terminal-wrap .tarth-left {
max-height: none !important;
min-height: 260px !important;
overflow: hidden !important;
-webkit-mask-image: none !important;
mask-image: none !important;
padding: 10px 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}
/* Only show the active module; hide pending & collapsed-done ones
so the column never needs to scroll. */
.hero-terminal-wrap .tarth-left .tmod {
display: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.hero-terminal-wrap .tarth-left .tmod[data-state="active"] {
display: block !important;
padding: 4px 2px 0 !important;
}
/* When everything is done, show the last-completed module (PEP,
order:6) so the column isn't blank. */
.hero-terminal-wrap .tarth-left:not(:has(.tmod[data-state="active"])) .tmod[data-mid="pep"] {
display: block !important;
padding: 4px 2px 0 !important;
}
/* ── (b) CENTERED SECTION HEADERS + STEP COPY ──────────────── */
.section-head {
justify-content: center !important;
text-align: center !important;
padding-bottom: 18px !important;
margin-bottom: 36px !important;
}
.section-head .title {
justify-content: center !important;
}
/* Step copy — center titles, bullets, eyebrows. */
.step-row .step-copy,
.step-row.step-row-reverse .step-copy,
.step-row.full-width .step-copy,
.step-row .step-copy.step-copy-wide {
text-align: center !important;
}
.step-copy .eyebrow {
display: block;
text-align: center !important;
}
.step-copy h3,
.step-copy h3[style] {
text-align: center !important;
}
.step-copy p.sub {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 36ch;
}
/* Bullets — center the list block (auto margins) but keep the
text LEFT-aligned so wrapped lines don't look ragged. Discs
sit in a small left gutter so rows don't visually float. */
.step-copy ul {
list-style: disc outside !important;
padding-left: 18px !important;
margin: 14px auto 0 !important;
max-width: 34ch;
width: fit-content;
text-align: left !important;
}
.step-copy li {
text-align: left !important;
padding-left: 0 !important;
margin: 4px 0 !important;
line-height: 1.45 !important;
}
.step-copy li::marker {
color: var(--ink-4);
}
/* ── (c) STEP 01 — drop Configuration card, add module tag ── */
/* Hide the top "Configuration · Enhanced + Net Wealth" card
(first .tm-card inside cluster-01). Keep Modules card (the
second .tm-card). */
.frag-cluster.cluster-01 > .tm-card:first-child {
display: none !important;
}
/* On Modules card head, show the current template name on the
far right in the same mono style. It's already written inline
for the template selector (#fcTplName), but that card is
hidden — so we inject the label via CSS using the ARIA label
pattern. Simplest: style the existing Modules head to flex
with a ::after that reads the current state. We can't read
JS-mutated text with CSS, so instead we keep the whole Modules
card head line reading "Modules · 5 of 5 · Enhanced + Net Wealth"
— see the JS nudge in the next block — and let CSS ensure the
layout places mono caption on the right. */
.frag-cluster.cluster-01 > .tm-card:nth-child(2) .tm-card-head {
justify-content: space-between !important;
display: flex !important;
align-items: center !important;
}
/* Hide the default "Modules · 5 of 5" count on mobile — the
template tag replaces it as the head caption on the right. */
.frag-cluster.cluster-01 > .tm-card:nth-child(2) .tm-card-head #fcModCount {
display: none !important;
}
/* Restyle the head so only "Modules" appears on the left, and
the tm-tpl-tag (template name) appears on the right. */
.frag-cluster.cluster-01 > .tm-card:nth-child(2) .tm-card-head > span:first-child {
font-size: 11px;
font-family: var(--mono);
letter-spacing: 0.02em;
color: var(--ink-3);
}
/* Strip the trailing " · " separator that's in the HTML (after
"Modules") — achieve by hiding any lingering text node
via font-size 0 on the wrapper and then restoring children.
Simpler: the " · " is plain text between #fcModCount and the
outer text. We leave it and just hide #fcModCount; the " · "
hanging off "Modules" is part of the outer span text. Use a
pseudo to push a clean label. */
.frag-cluster.cluster-01 > .tm-card:nth-child(2) .tm-card-head > span:first-child {
font-size: 0 !important;
}
.frag-cluster.cluster-01 > .tm-card:nth-child(2) .tm-card-head > span:first-child::before {
content: "Modules";
font-size: 11px;
font-family: var(--mono);
letter-spacing: 0.02em;
color: var(--ink-3);
}
/* The tag injected by JS will get this class. */
.tm-card-head .tm-tpl-tag {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-3);
letter-spacing: 0.02em;
white-space: nowrap;
margin-left: auto;
padding-left: 10px;
}
/* ── (d) STEP 02 — drop the Thinking card (right of split) ── */
/* cluster-02 contains: .tm-card (Paste), then .tm-split with two
.tm-card children (Smart Fill, Thinking). On mobile, collapse
.tm-split to a single column and hide the Thinking card. */
.frag-cluster.cluster-02 .tm-split {
grid-template-columns: 1fr !important;
display: grid !important;
gap: 12px !important;
}
.frag-cluster.cluster-02 .tm-split > .tm-card:nth-child(2) {
display: none !important;
}
/* ── (e) STEP 03 — compress report card, denser & more report-like ── */
/* Keep the right-rail scorecard but render it INSIDE the body as
a compact inline section, so users still see the score list. */
.tarth-report-card .trp-body {
display: block !important;
}
.tarth-report-card .trp-body-l { padding: 0 !important; }
/* Tighter frame, crisp border, white-paper feel. */
.tarth-report-card {
padding: 14px 12px 14px !important;
border-radius: 10px !important;
}
.tarth-report-card .trp-rail {
margin-bottom: 8px !important;
padding-bottom: 8px !important;
}
.tarth-report-card .trp-rail-meta { display: none !important; }
.tarth-report-card .trp-rail-logo-img { height: 14px !important; }
.tarth-report-card .trp-export {
font-size: 10px !important;
padding: 4px 8px !important;
}
/* Header — denser: eyebrow tiny, name compact, verdict chip
inline under the name. */
.tarth-report-card .trp-head {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
padding-bottom: 10px !important;
margin-bottom: 10px !important;
}
.tarth-report-card .trp-head-eyebrow {
font-size: 10px !important;
letter-spacing: 0.02em;
}
.tarth-report-card .trp-head-name {
font-size: 18px !important;
line-height: 1.1 !important;
margin: 2px 0 !important;
}
.tarth-report-card .trp-head-meta {
font-size: 10px !important;
flex-wrap: wrap;
gap: 3px 6px !important;
line-height: 1.4 !important;
}
.tarth-report-card .trp-head-r {
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
flex-wrap: wrap;
margin-top: 2px !important;
}
.tarth-report-card .trp-badge {
padding: 4px 8px !important;
gap: 6px !important;
}
.tarth-report-card .trp-badge-label { font-size: 9.5px !important; }
.tarth-report-card .trp-badge-value { font-size: 11.5px !important; }
.tarth-report-card .trp-badge-score { font-size: 13px !important; }
.tarth-report-card .trp-rec { font-size: 10.5px !important; }
.tarth-report-card .trp-rec-l1 { font-size: 11px !important; }
.tarth-report-card .trp-rec-l2 { font-size: 9.5px !important; }
/* Summary: tighter type, keep the muted follow-up (it reads
like a finding). */
.tarth-report-card .trp-summary { margin-bottom: 12px !important; }
.tarth-report-card .trp-summary p {
font-size: 11.5px !important;
line-height: 1.5 !important;
margin: 0 0 6px !important;
}
.tarth-report-card .trp-summary-muted {
display: block !important;
font-size: 10.5px !important;
color: var(--ink-3) !important;
}
.tarth-report-card .trp-ref {
font-size: 9px !important;
}
/* SHOW the scorecard inline, compact — this is the "risk modules"
list that makes the card feel like a report. */
.tarth-report-card .trp-scorecard {
display: block !important;
margin-top: 12px !important;
padding-top: 10px !important;
border-top: 1px solid var(--line) !important;
background: transparent !important;
border-left: 0 !important;
}
.tarth-report-card .trp-scorecard-label {
font-size: 9.5px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
color: var(--ink-4) !important;
margin-bottom: 6px !important;
}
.tarth-report-card .trp-scorecard-label-2 {
margin-top: 10px !important;
}
.tarth-report-card .trp-scorelist {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 2px 10px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none;
}
.tarth-report-card .trp-scorelist li {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
font-size: 10.5px !important;
padding: 2px 0 !important;
border: 0 !important;
}
.tarth-report-card .trp-scorelist li .k { color: var(--ink-2); }
.tarth-report-card .trp-scorelist li .v { font-size: 10px !important; }
/* Sources list — denser single-column. */
.tarth-report-card .trp-sources-list {
padding: 0 !important;
margin: 0 !important;
list-style: none;
}
.tarth-report-card .trp-sources-list li {
display: grid !important;
grid-template-columns: 14px 1fr auto;
gap: 6px;
font-size: 10px !important;
padding: 2px 0 !important;
border: 0 !important;
}
.tarth-report-card .trp-sources-list li .n { color: var(--ink-4); }
.tarth-report-card .trp-sources-list li .s {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tarth-report-card .trp-sources-list li .t {
font-size: 9px !important;
color: var(--ink-4);
}
/* Hide the verbose per-module narrative paragraphs — the risk
module score grid above tells the same story denser. */
.tarth-report-card .trp-modules { display: none !important; }
/* ── (f) CASE STUDY — 3 stat cards, NO quote ──────────────── */
/* Show the stats card (was hidden previously). */
#case-study .case-visual { display: block !important; padding: 0 !important; }
/* Center all case-copy content. */
#case-study .case-copy,
#case-study .case-copy h2,
#case-study .case-copy p,
#case-study .case-copy p.reveal {
text-align: center !important;
}
#case-study .case-copy {
align-items: center !important;
display: flex !important;
flex-direction: column !important;
}
/* Centered logo-row. */
#case-study .case-logo-row {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
/* Remove the quote block entirely — user asked for cards, no quote. */
#case-study .case-quote { display: none !important; }
/* Re-order: H2 + logo row + first paragraph, then stat cards,
then closing paragraph. Use flex order. */
#case-study .case-grid {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
#case-study .case-copy { order: 1; width: 100%; }
#case-study .case-visual { order: 2; width: 100%; }
#case-study .case-cta-row { order: 3; width: 100%; }
/* Three stat cards — stacked, clean white surfaces, generous
numerals. Replaces the prior hidden-card fallback. */
#case-study .case-stats-inline {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
#case-study .case-stat {
padding: 18px 20px !important;
min-width: 0;
background: var(--surface, #fff) !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
#case-study .case-stat .num {
font-size: 40px !important;
line-height: 1 !important;
letter-spacing: -0.02em !important;
font-family: var(--serif);
font-style: italic;
}
#case-study .case-stat .num .plus { font-size: 0.55em; font-style: normal; }
#case-study .case-stat .label {
font-size: 12.5px !important;
line-height: 1.35 !important;
color: var(--ink-2) !important;
text-align: center !important;
display: block;
max-width: 22ch;
}
#case-study .case-stat .label .since {
display: block;
font-size: 10.5px !important;
font-family: var(--mono);
color: var(--ink-4);
margin-top: 4px;
letter-spacing: 0.02em;
}
/* Center the inline "Sign up today" CTA's heading. */
#case-study .case-cta-row { margin-top: 12px !important; }
#case-study .solutions-cta-head {
text-align: center !important;
}
/* ── (g) EVERY .email-cta → single small centered button ──── */
/* All CTA sections on mobile render as ONE small centered
"Request early access" button. No email input, no container. */
.solutions-cta .email-cta,
.cta-bridge .email-cta,
section.close .email-cta,
#case-study .email-cta {
flex-direction: row !important;
justify-content: center !important;
width: auto !important;
max-width: none !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
gap: 0 !important;
}
.solutions-cta .email-cta input[type="email"],
.cta-bridge .email-cta input[type="email"],
section.close .email-cta input[type="email"],
#case-study .email-cta input[type="email"] {
display: none !important;
}
.solutions-cta .email-cta button[type="submit"],
.cta-bridge .email-cta button[type="submit"],
section.close .email-cta button[type="submit"],
#case-study .email-cta button[type="submit"] {
width: auto !important;
flex: 0 0 auto !important;
padding: 11px 18px !important;
font-size: 13.5px !important;
border-radius: 10px !important;
gap: 6px;
}
.solutions-cta .email-cta button[type="submit"] svg,
.cta-bridge .email-cta button[type="submit"] svg,
section.close .email-cta button[type="submit"] svg,
#case-study .email-cta button[type="submit"] svg {
width: 12px !important;
height: 12px !important;
}
/* Tighten the close section now that the email row is gone. */
section.close { padding: 48px 0 !important; }
section.close .content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
/* ── (h) SECURITY — Visit Trust Center moves up/closer ────── */
#security .sec-trust {
margin-top: 8px !important;
}
#security .sec-certs {
margin-bottom: 0 !important;
}
}
/* ================================================================
13. MOBILE V3 — feedback pass (≤767px only)
================================================================
Scope: mobile only. Desktop intentionally unchanged.
Goals (per user feedback):
(a) ISO 27001 pill → pinned top-right of viewport (above hero).
(b) Hero terminal → shrink ~35% in footprint, less dominant.
(c) "How it works" — fix double-bullets (steps.css already has
custom magenta-dot bullets; v2 added `list-style: disc`,
producing two markers per item). Center the bullet block,
keep custom dots, fix Step 01 / Step 02 alignment.
(d) Standard mobile card width — every "in-product" card on the
landing page (Step 01 Modules, Step 02 Paste / Smart Fill,
Step 03 Report) shares a single contained width via
`--mob-card-inset`, sitting ~5–6% in from the wrap edges.
(e) Step 03 — strip the report down: hide sources, hide cited
refs, hide secondary risk-modules block, drop ribbon
background, give it the same neutral surface as the other
terminal-style cards above. Trim height ~15%.
(f) Use cases — center text, slightly larger body and title.
(g) Case study — center eyebrow, reorder cards before the
closing "Tarth agent sits inside the workflow" paragraph,
shrink stat cards to Security-card scale (compact 3-up grid
like the cert badges), make heights consistent.
(h) Security — "Audit-ready by default." centered on ONE line,
narrower trust-center button (matched card width), tighter
spacing between certs and button.
(i) Hub CTA — same narrow contained width as other CTAs.
================================================================ */
@media (max-width: 767px) {
/* Shared mobile container width — used by all "in-product"
cards and CTAs so the page reads as a single column with
consistent gutters. The wrap already gives 20px L/R; this
adds another ~14px each side so cards sit visibly inside it. */
:root {
--mob-card-inset: 14px;
}
/* ── (a) ISO 27001 pill → top-right corner of nav ───────────── */
/* Move the pill OUT of hero flow and pin it to the nav row's
right side, aligned vertically with the brand wordmark on
the left. We anchor with position: absolute relative to .hero
(which has position: relative below) and use a negative top
to land on the nav row above the hero. The nav row is
padding: 10px 0 with a 22px brand-mark, so its vertical
center sits ~21px from the page top. With pill height ~22px
we need its top at ~10px from page top → top: -32px relative
to the hero (which starts ~42px from page top). */
.hero .hero-pill {
position: absolute !important;
top: -32px !important; /* pulls pill onto nav row */
right: 22px !important; /* equidistant with the brand mark on the left */
z-index: 60;
margin: 0 !important;
font-size: 10px !important;
padding: 4px 9px 4px 5px !important;
gap: 6px !important;
background: rgba(253, 250, 249, 0.86) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 999px;
}
.hero .hero-pill .live-dot {
width: 12px !important;
height: 12px !important;
}
.hero .hero-pill > span:last-child {
font-size: 10px !important;
line-height: 1 !important;
}
/* Slightly increase top padding on hero so headline doesn't
visually collide with the pinned pill on first paint. */
.hero { padding-top: 18px !important; position: relative !important; }
/* ── (b) HERO TERMINAL — shrink footprint ~35% ─────────────── */
/* Reduce overall card scale: smaller header, smaller module
padding, much shorter body. From ~320px tall → ~210px tall.
Width respects the global container inset. */
.hero-terminal-wrap {
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
border-radius: 12px !important;
}
.tarth-app {
font-size: 10.5px !important;
border-radius: 12px !important;
}
.tarth-top {
padding: 6px 10px !important;
gap: 6px !important;
}
.tarth-back { width: 12px !important; height: 12px !important; }
.tarth-subject-name { font-size: 11.5px !important; line-height: 1.15 !important; }
.tarth-subject-meta { font-size: 9.5px !important; max-width: 50vw !important; }
.tarth-status { font-size: 8.5px !important; padding: 2px 5px !important; }
.tarth-report {
font-size: 9.5px !important;
padding: 4px 8px !important;
border-radius: 7px !important;
}
.hero-terminal-wrap .tarth-left {
min-height: 168px !important;
max-height: 168px !important;
padding: 8px 10px !important;
}
.hero-terminal-wrap .tarth-left .tmod[data-state="active"],
.hero-terminal-wrap .tarth-left:not(:has(.tmod[data-state="active"])) .tmod[data-mid="pep"] {
padding: 2px 0 0 !important;
}
.tmod-head { font-size: 10.5px !important; gap: 6px !important; }
.tmod-body { font-size: 9.5px !important; line-height: 1.4 !important; }
.tmod-body ul { padding-left: 12px !important; }
/* ── (c) HOW IT WORKS — fix double bullets, center cleanly ── */
/* steps.css uses `list-style: none` + a magenta `li::before`
pseudo-dot. Our v2 block reintroduced `list-style: disc`,
creating two markers. Strip the disc, keep the pseudo. */
.step-copy ul {
list-style: none !important;
padding-left: 0 !important;
margin: 14px auto 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
/* Center the block, but cap width so wrapped lines stay tidy. */
max-width: 32ch !important;
width: fit-content !important;
text-align: left !important;
}
.step-copy li {
position: relative !important;
padding-left: 18px !important;
margin: 0 !important;
font-size: 14.5px !important;
line-height: 1.5 !important;
text-align: left !important;
}
.step-copy li::before {
/* Re-anchor the magenta dot for the tighter padding-left. */
left: 2px !important;
top: 8px !important;
width: 5px !important;
height: 5px !important;
}
.step-copy li::marker { color: transparent !important; }
/* Step h3 weights — keep serif, normalize across all 3 steps.
Bumped +15% per Zuhair feedback (28 → 32). */
.step-copy h3,
.step-copy h3[style] {
font-family: var(--serif) !important;
font-weight: 500 !important;
font-size: 32px !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
margin: 4px 0 10px !important;
}
/* Centered eyebrow rule: the desktop ::before adds an 18px line
before the eyebrow. On mobile we hide that line so the
centered eyebrow sits cleanly. */
.step-copy .eyebrow::before { display: none !important; }
/* ── (d) STANDARD MOBILE CARD WIDTH ─────────────────────────── */
/* Single inset applied to every "in-product" card cluster
so they line up vertically as one column at the same width. */
.step-row .frag-cluster.cluster-01,
.step-row .frag-cluster.cluster-02,
.step-row .frag-cluster.cluster-03 {
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
}
.frag-cluster.cluster-02 .tm-card,
.frag-cluster.cluster-01 .tm-card {
border-radius: 12px;
}
/* ── (e) STEP 03 · REPORT — radically simpler ──────────────── */
/* The desktop report card has multiple bands (rail, head,
summary, modules, scorecard, sources). On mobile we keep
just: rail, header (with verdict), summary, and the compact
scorecard. Hide everything else. */
.tarth-report-card {
margin-left: 0 !important;
margin-right: 0 !important;
background: var(--surface) !important;
border: 1px solid var(--line) !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 12px !important;
}
/* Inner content goes edge-to-edge of the card border, so the
rail + head + body backgrounds reach the rounded edges and
there's no visible "white band" around the content. */
.tarth-report-card .trp-rail {
padding-left: 14px !important;
padding-right: 14px !important;
}
.tarth-report-card > .trp-head,
.tarth-report-card > .trp-body,
.tarth-report-card > .trp-sources {
padding-left: 14px !important;
padding-right: 14px !important;
}
/* Kill any decorative overlay / ribbon that gives the wide
"outline" feel on mobile. */
.tarth-report-card::before,
.tarth-report-card::after {
display: none !important;
background: transparent !important;
}
/* Hide the heaviest blocks: per-module narrative, sources list,
and the secondary "Sources cited" group. */
.tarth-report-card .trp-modules,
.tarth-report-card .trp-sources-list,
.tarth-report-card .trp-scorecard-label-2 {
display: none !important;
}
/* Hide superscript citation refs in summary copy — they read
as broken numbers without the sources list to anchor them. */
.tarth-report-card .trp-summary .trp-ref { display: none !important; }
/* Trim head meta to two facts ("Assessed …", "Individual"); the
full string is too dense at this width. */
.tarth-report-card .trp-head-meta .trp-sep:nth-of-type(n+2),
.tarth-report-card .trp-head-meta > span:nth-of-type(n+3) {
display: none !important;
}
/* Compact summary copy a touch more. */
.tarth-report-card .trp-summary p { font-size: 11px !important; }
/* ── (f) USE CASES — centered, larger ──────────────────────── */
.uc-slide {
margin-left: var(--mob-card-inset);
margin-right: var(--mob-card-inset);
text-align: center !important;
padding: 22px 22px 20px !important;
}
.uc-slide .uc-copy {
align-items: center !important;
text-align: center !important;
}
.uc-slide .uc-kicker {
justify-content: center !important;
width: 100%;
display: flex !important;
}
.uc-slide h3,
.uc-slide .uc-title {
text-align: center !important;
font-size: 25px !important; /* +15% from 22 per Zuhair feedback */
line-height: 1.12 !important;
margin: 6px auto 8px !important;
}
.uc-slide .uc-status {
margin: 0 auto 10px !important;
justify-content: center !important;
}
.uc-slide p,
.uc-slide .uc-body {
font-size: 14.5px !important;
line-height: 1.55 !important;
text-align: center !important;
max-width: 32ch;
margin: 0 auto !important;
}
/* ── (g) CASE STUDY — center eyebrow, reorder, smaller cards ── */
/* Center the "Case study" eyebrow row. */
#case-study .case-topline {
justify-content: center !important;
text-align: center !important;
display: flex !important;
}
/* Re-order: H2 + logo + first paragraph (order 1) → stat cards
(order 2) → closing paragraph "Tarth agent sits inside…"
(order 3) → CTA row (order 4). The closing paragraph lives
inside .case-copy as the LAST ; we lift it out visually by
using flex order on case-grid items. */
#case-study .case-grid {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
}
#case-study .case-copy {
order: 1 !important;
display: flex !important;
flex-direction: column !important;
/* Within case-copy, push the LAST paragraph (the "Tarth agent
sits inside the workflow…" sentence) below the stats card. */
}
#case-study .case-copy > * { order: 0; }
#case-study .case-copy > p:last-of-type { order: 2 !important; margin-top: 14px !important; }
#case-study .case-visual { order: 1; } /* same row as case-copy after CSS flex */
/* Trick: case-copy is itself an order-1 flex item. Its inner
last
needs to render AFTER the stat-card grid which is a
SIBLING of case-copy. CSS can't reorder across containers, so
we use a different mechanism — see JS-free approach below: */
/* Cleaner solution: reset and use grid template areas on the
case-grid itself by reading children: copy contents, visual,
cta. Since the closing
is INSIDE case-copy, we can't pull
it out without JS. Instead: hide the in-copy closing
and
reveal a clone via a CSS-driven approach is brittle.
Simpler: leave the paragraph where it is, but make the visual
stats card render BEFORE case-copy's last paragraph by
reversing copy & visual at flex level, then re-ordering
INSIDE case-copy so the last
is on top of the visual… no.
Pragmatic compromise: keep DOM order, just place stats card
BETWEEN .case-copy's main content and its last paragraph by
splitting case-copy visually. We can do this by giving the
closing paragraph display:contents and lifting it via grid —
but that requires DOM changes. So we bite the bullet: a tiny
JS hook (already loaded) is not in scope here. Instead:
accept "stats first → case-copy second" reorder, which moves
the WHOLE narrative below the stats. That reads worse.
Best compromise within CSS only: leave H2/logo/intro at top,
show stats inline at the natural position (between case-copy
and case-cta-row), and let the closing paragraph stay as the
final body paragraph — but VISUALLY pulled to look like
a caption beneath the stats by spacing. So: stats above the
final paragraph, both above CTA. That matches user intent:
"move that paragraph to AFTER the cards". */
/* Reset the prior order/flex experiments → use a clean
grid-areas approach via order on direct children: */
#case-study .case-copy { order: 1; }
#case-study .case-visual { order: 2; }
#case-study .case-cta-row { order: 4; }
/* The closing paragraph is inside .case-copy. To move it AFTER
.case-visual, we lift it visually using a margin trick: turn
.case-copy into a flex column where the last
has order:1
(placed last in case-copy), then increase its top margin so
it's pushed beneath the case-visual that follows case-copy
in the parent grid. */
/* Simpler & correct: make .case-copy display:contents on mobile
so its children become grandchildren of the flex .case-grid.
Then we can `order` them individually. */
#case-study .case-copy {
display: contents !important;
}
/* Now case-copy's children are direct flex items of case-grid.
Order them. */
#case-study .case-copy h2 { order: 1 !important; }
#case-study .case-copy .case-logo-row { order: 2 !important; }
#case-study .case-copy > p:nth-of-type(1) { order: 3 !important; }
/* The pull-quote was hidden in v2; keep it hidden. */
#case-study .case-copy .case-quote { order: 9 !important; display: none !important; }
#case-study .case-visual { order: 5 !important; }
/* Last paragraph in case-copy = the "Tarth agent sits inside the
workflow…" closing sentence. Place it AFTER the stats card. */
#case-study .case-copy > p:last-of-type { order: 6 !important; margin-top: 6px !important; }
#case-study .case-cta-row { order: 7 !important; }
/* Smaller, Security-card style stat cards — 3-up grid, compact,
consistent height, contained width.
Removed the mob-card-inset margin — .case-visual is
width:100% inside .wrap (which already has 20px gutters);
adding 14px margins caused a ~14px rightward overflow that
made the 3-stat strip read as off-center. */
#case-study .case-visual {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
/* Keep the inset feel by insetting the inner stats grid instead. */
#case-study .case-stats-inline {
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
}
#case-study .case-stats-inline {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 8px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
#case-study .case-stat {
padding: 14px 10px !important;
background: var(--surface, #fff) !important;
border: 1px solid var(--line) !important;
border-radius: 12px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 6px !important;
min-height: 110px !important; /* consistent height across 3 cards */
text-align: center !important;
}
#case-study .case-stat .num {
font-size: 26px !important;
line-height: 1 !important;
margin-top: 4px !important;
}
#case-study .case-stat .num .plus { font-size: 0.55em !important; }
#case-study .case-stat .label {
font-size: 10.5px !important;
line-height: 1.3 !important;
color: var(--ink-2) !important;
max-width: none !important;
}
#case-study .case-stat .label .since {
font-size: 9px !important;
margin-top: 3px !important;
}
/* Closing paragraph that now sits below stats — keep generous
line-height so it reads as a thoughtful closer, not a caption. */
#case-study .case-copy > p:last-of-type {
padding-left: var(--mob-card-inset);
padding-right: var(--mob-card-inset);
}
/* ── (h) SECURITY — "Audit-ready by default." centered on one line ── */
/* Re-style the intro h2 inside #security so it fits one line at
widths down to 360px. We use a smaller, single-line clamp. */
#security .sec-intro {
text-align: center !important;
}
#security .sec-intro-left {
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
}
#security .sec-intro-left h2 {
font-size: clamp(20px, 5.6vw, 26px) !important;
line-height: 1.15 !important;
white-space: nowrap !important;
text-align: center !important;
margin: 0 auto !important;
max-width: none !important;
width: auto !important;
display: block !important;
}
/* Cert cards already 1-col; now apply contained inset so they
match the rest of the page. */
#security .sec-certs {
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
}
/* Trust Center button — narrower (matches card width), tighter
to the certs above. */
#security .sec-trust {
margin-top: 14px !important;
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
padding-bottom: 0 !important;
}
#security .sec-trust-cta,
#security a[href*="trust-center"] {
width: 100% !important;
padding: 12px 16px !important;
font-size: 13.5px !important;
margin-top: 0 !important;
}
/* ── (i) HUB — narrow CTA & cards to match ──────────────────── */
#hub .hub-grid {
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
}
#hub .sec-trust {
margin-top: 18px !important;
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
}
#hub .sec-trust-cta {
width: 100% !important;
padding: 12px 16px !important;
font-size: 13.5px !important;
}
}
/* ================================================================
14. MOBILE V4 — second feedback pass (≤767px only)
================================================================
Goals (per user feedback):
(a) ISO pill → squircle, not pill (rounded square).
(b) "How It Works" — every step's copy block AND card cluster
must be centered horizontally on the page (currently the
Step 02 reverse row left-anchors its content via the
desktop `justify-self: start`).
(c) Step 03 report header — restructure right side so "Overall
risk" + score sit on top; "Approve for onboarding" sits
below them with breathing room. Currently the verdict is
cramped and overlapping the subject name.
(d) Use cases — cards getting clipped on the right edge. The
carousel viewport is overflowing; force the slide to live
inside the wrap with no horizontal overflow.
(e) Case study — center the H2, the Zest logo row, and the
jurisdictions pill. (display:contents on .case-copy was
breaking centering because alignment is per-grandchild now.)
(f) Security · "Visit Trust Center" button — sit closer to the
cert cards. Match the gap used between Hub's "Visit the
Hub" button and the hub-grid cards above it.
================================================================ */
@media (max-width: 767px) {
/* ── (a) ISO pill: squircle ──────────────────────────────── */
.hero .hero-pill {
border-radius: 8px !important; /* was 999 (pill) → 8 (squircle) */
padding: 5px 9px 5px 7px !important;
}
.hero .hero-pill .live-dot {
width: 10px !important;
height: 10px !important;
}
/* ── (b) HOW IT WORKS — center every step, both copy & cluster ── */
/* Override the desktop reverse-row left-anchor on mobile so
Step 02 stops sitting flush-left, AND give all step-rows
centered grid items. */
.step-row,
.step-row.step-row-reverse {
justify-items: center !important;
align-items: start !important;
}
.step-row > .step-copy,
.step-row.step-row-reverse > .step-copy,
.step-row > .frag-cluster,
.step-row.step-row-reverse > .frag-cluster {
justify-self: center !important;
width: 100% !important;
max-width: 460px !important; /* readable measure on phones */
margin-left: auto !important;
margin-right: auto !important;
}
/* The cluster cards already inset via --mob-card-inset; clear
that and rely on the parent's centered max-width instead so
all 3 steps' cards line up at IDENTICAL width. */
.step-row .frag-cluster.cluster-01,
.step-row .frag-cluster.cluster-02,
.step-row .frag-cluster.cluster-03 {
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--mob-card-inset) !important;
padding-right: var(--mob-card-inset) !important;
box-sizing: border-box !important;
}
/* Step copy block: same treatment + center the prose. */
.step-row > .step-copy,
.step-row.step-row-reverse > .step-copy {
padding-left: var(--mob-card-inset) !important;
padding-right: var(--mob-card-inset) !important;
box-sizing: border-box !important;
text-align: center !important;
}
/* ── (c) STEP 03 · Report header — clean two-tier right side ── */
/* Stack the head as: subject column on top; verdict column
below — full width, also centered. This keeps the name big
and gives the verdict its own row instead of crowding it. */
.tarth-report-card .trp-head {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 10px !important;
}
/* Keep eyebrow on its own line, then CRA-… on its own line.
The HTML is "Customer Risk Assessment · CRA-2025-1042".
Force the · separator to break onto a new line by making the
trp-mono span `display: block`. */
.tarth-report-card .trp-head-eyebrow {
line-height: 1.45 !important;
}
.tarth-report-card .trp-head-eyebrow .trp-mono {
display: block !important;
margin-top: 1px;
color: var(--ink-3);
font-size: 9.5px !important;
}
/* Hide the trailing " · " that sits between eyebrow text and
the now-block CRA span (it's bare text in the HTML). */
.tarth-report-card .trp-head-eyebrow {
font-size: 0 !important;
}
.tarth-report-card .trp-head-eyebrow::before {
content: "Customer Risk Assessment";
font-family: var(--mono);
font-size: 10px !important;
letter-spacing: 0.06em;
color: var(--ink-3);
text-transform: uppercase;
display: block;
}
.tarth-report-card .trp-head-eyebrow .trp-mono {
font-size: 9.5px !important;
}
/* Right column: verdict (Overall risk badge) on top, then
the recommendation pill underneath, both left-aligned in
the now-stacked head. */
.tarth-report-card .trp-head-r {
flex-direction: column !important;
align-items: flex-start !important;
gap: 8px !important;
margin-top: 4px !important;
width: 100%;
}
.tarth-report-card .trp-badge {
align-self: flex-start !important;
}
.tarth-report-card .trp-rec {
align-self: flex-start !important;
width: 100%;
}
/* ── (d) USE CASES — fix right-edge clip ───────────────────── */
/* The carousel root is full-bleed inside the wrap and the JS
applies a transform to the track. v2 already disables the
transform / animation. Lock down EVERY ancestor's overflow
and force track + slide widths to match the carousel inner
width so nothing escapes. */
.uc-carousel,
.uc-viewport {
overflow: hidden !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.uc-track {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.uc-slide {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
/* respect the standard mobile inset visually */
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
width: calc(100% - 2 * var(--mob-card-inset)) !important;
}
/* ── (e) CASE STUDY — center H2, logo row, jurisdictions pill ── */
/* display:contents (set in v3) was promoting case-copy children
to flex items of case-grid — but case-grid is `flex-direction:
column`, so individual children's text-align: center already
works. The headers/logo were rendering left-aligned because
they had explicit `text-align: left` from desktop reset, and
the logo row used `flex` without `justify-content: center`. */
#case-study .case-copy h2 {
text-align: center !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Logo + jurisdictions pill — center the row AND the pill within. */
#case-study .case-logo-row {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
width: 100% !important;
flex-wrap: wrap !important;
gap: 12px !important;
}
#case-study .case-logo-row .jurs {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
margin: 0 auto !important;
}
/* Body paragraphs centered. */
#case-study .case-copy > p,
#case-study .case-copy > p.reveal {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 38ch;
}
/* ── (f) SECURITY · Trust Center button — match Hub spacing ── */
/* Tighten gap between the last cert card and the Visit Trust
Center button — match Hub's "Visit the Hub" gap (18px).
Desktop sets sec-intro padding-bottom + margin-bottom which
adds ~80px of empty space between certs and button on mobile;
zero those out so the v4 sec-trust margin-top: 18px is the
only spacer. */
#security .sec-intro,
#security .sec-intro-right {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#security .sec-trust {
margin-top: 18px !important;
}
/* Make sure the certs grid has no extra bottom margin pushing
the button down. */
#security .sec-certs {
margin-bottom: 0 !important;
}
/* ── CASE STUDY · stack logo & jurisdictions pill ─────────── */
/* The Zest logo + jurisdictions pill share one flex row; the
logo on the left pushes the pill right of center. Stack them
vertically on mobile so each centers independently. */
#case-study .case-logo-row {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
#case-study .case-logo-row .case-copy-logo {
margin: 0 auto !important;
}
#case-study .case-logo-row .jurs {
margin: 0 auto !important;
}
}
/* ================================================================
15. MOBILE V5 — third feedback pass (≤767px only)
================================================================
Goals (per user feedback):
(a) Step 02 · Smart Fill — rows render as empty on mobile because
the desktop default has `.tm-row { opacity: 0 }` and animates
to .on only when the (now-hidden) Thinking plan completes.
Force-show all extract rows on mobile so the Smart Fill card
is always populated.
(b) Step 03 · Report header — restructure as TWO columns: subject
(left) + verdict stack (right, top-aligned). Verdict on the
right groups Overall Risk badge + Approve recommendation
vertically, both right-aligned, top-aligned with the
eyebrow. No more single-column stack.
================================================================ */
@media (max-width: 767px) {
/* ── (a) Step 02 · Smart Fill — force rows visible ────────── */
.frag-cluster.cluster-02 .fc-extract .tm-row {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* ── (b) Step 03 · Two-column head (subject left, verdict right) ── */
/* Override v4's column-stacked .trp-head: go back to a row, but
compact and right-aligned for the verdict block. */
.tarth-report-card .trp-head {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 10px !important;
}
.tarth-report-card .trp-head-l {
flex: 1 1 auto !important;
min-width: 0 !important;
text-align: left !important;
}
.tarth-report-card .trp-head-r {
flex: 0 0 auto !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important; /* right-aligned */
justify-content: flex-start !important;
gap: 6px !important;
margin-top: 0 !important;
width: auto !important;
}
.tarth-report-card .trp-badge {
align-self: flex-end !important;
padding: 3px 7px !important;
gap: 5px !important;
}
.tarth-report-card .trp-badge-label { font-size: 8.5px !important; }
.tarth-report-card .trp-badge-value { font-size: 10.5px !important; }
.tarth-report-card .trp-badge-score { font-size: 12px !important; }
.tarth-report-card .trp-rec {
align-self: flex-end !important;
width: auto !important;
text-align: right !important;
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
}
.tarth-report-card .trp-rec-label {
text-align: right !important;
align-items: flex-end !important;
}
.tarth-report-card .trp-rec-l1 {
font-size: 10.5px !important;
line-height: 1.2 !important;
}
.tarth-report-card .trp-rec-l2 {
font-size: 9px !important;
line-height: 1.25 !important;
color: var(--ink-3) !important;
}
/* Subject side — denser, single-column. Eyebrow is one line
(no separate CRA-id below since we're tight); name big, meta
trimmed to "Assessed 09 Apr 2026". */
.tarth-report-card .trp-head-eyebrow {
/* undo v4's font-size:0 + ::before override; show eyebrow as
normal text, with the inner trp-mono (CRA id) wrapping
inline if there's room, or stacking on its own line via
`display: block` for clarity. */
font-size: 9.5px !important;
line-height: 1.4 !important;
letter-spacing: 0.06em !important;
color: var(--ink-3) !important;
text-transform: uppercase;
font-family: var(--mono);
}
.tarth-report-card .trp-head-eyebrow::before {
content: none !important;
}
.tarth-report-card .trp-head-eyebrow .trp-mono {
display: block !important;
font-size: 9px !important;
margin-top: 1px;
color: var(--ink-4) !important;
letter-spacing: 0.04em !important;
}
.tarth-report-card .trp-head-name {
font-size: 16px !important;
line-height: 1.15 !important;
margin: 4px 0 2px !important;
}
.tarth-report-card .trp-head-meta {
font-size: 9.5px !important;
line-height: 1.35 !important;
}
}
/* ================================================================
16. MOBILE V6 — fourth feedback pass (≤767px only)
================================================================
Goals:
(a) Step 03 copy block ("Approve findings" + sub) — center the
prose explicitly. step-copy-wide is `text-align: center` on
desktop; on mobile, ensure h3 + sub + eyebrow are all
margin-auto'd at consistent widths matching the other
step-copy blocks.
(b) "Approve for onboarding" recommendation dot — center it
vertically against the l1 line "A" cap-height. Currently
the desktop default `align-self: flex-start; margin-top: 4px`
pushes it up to align with a 2-line label; on the compact
mobile head the label is short and we want the dot vertically
centered.
(c) Padding audit — standardize the page's left/right padding so
every section reads as one column at one width:
- .wrap: 20px L/R (already)
- --mob-card-inset: 14px additional inset for cards
- Total effective gutter: 34px from viewport edge
Audit pass below: enforce consistent inset for any section
that previously slipped (use-cases dot row, hub-grid, etc.)
================================================================ */
@media (max-width: 767px) {
/* ── (a) Step 03 copy block — explicit centering ─────────── */
.step-row.full-width > .step-copy.step-copy-wide,
.step-row[data-step="03"] > .step-copy {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--mob-card-inset) !important;
padding-right: var(--mob-card-inset) !important;
box-sizing: border-box !important;
}
.step-row.full-width .step-copy-wide .eyebrow {
justify-content: center !important;
display: inline-flex !important;
margin-left: auto !important;
margin-right: auto !important;
}
.step-row.full-width .step-copy-wide h3 {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 18ch !important;
}
.step-row.full-width .step-copy-wide .sub {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 38ch !important;
font-size: 14.5px !important;
line-height: 1.55 !important;
}
/* ── (b) Recommendation dot — vertical center on mobile ──── */
.tarth-report-card .trp-rec {
align-items: center !important;
}
.tarth-report-card .trp-rec-dot {
align-self: center !important;
margin-top: 0 !important;
width: 7px !important;
height: 7px !important;
}
/* The label is a flex column. With l1 (10.5px) + l2 (9px) it's
~26px tall. The dot at align-self: center on the row aligns
with the GROUP center, but visually we want the dot on the
baseline of l1 ("Approve for onboarding"). Pull the label
baseline up by giving it tighter line-height, then nudge dot
to align with the first line specifically. */
.tarth-report-card .trp-rec-label {
line-height: 1 !important;
gap: 3px !important;
}
/* Anchor the dot to the FIRST line by aligning trp-rec to
baseline and letting the dot sit on l1's baseline. */
.tarth-report-card .trp-rec {
align-items: flex-start !important;
}
.tarth-report-card .trp-rec-dot {
align-self: flex-start !important;
margin-top: 4px !important; /* matches l1 cap-height */
}
/* ── (c) Padding audit · enforce consistent gutter ───────── */
/* All major section content blocks should sit at:
wrap padding (20px) + optional --mob-card-inset (14px)
for a total gutter of 34px from viewport edge. The wrap
already provides 20px; cards add the inset. Any direct
children of .wrap that aren't cards should respect 0
extra (so they sit at the wrap's 20px gutter). */
/* Reset stray paddings on wrap children that don't need extra. */
.wrap > p,
.wrap > h1,
.wrap > h2,
.wrap > h3 {
padding-left: 0;
padding-right: 0;
}
/* Use cases — dots row sits inside .uc-controls; ensure it
centers within the wrap, no extra inset. */
.uc-controls {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.uc-dots {
justify-content: center !important;
}
/* Hero + section vertical rhythm — keep section padding
consistent so the page reads with one rhythm. */
section {
padding-left: 0;
padding-right: 0;
}
/* Case study CTA row — inset to match cards. */
#case-study .case-cta-row {
padding-left: var(--mob-card-inset) !important;
padding-right: var(--mob-card-inset) !important;
box-sizing: border-box;
width: 100%;
}
/* Hero email CTA + trusted strip — sit at wrap padding (20px),
no additional inset, so the headline and pill align with the
standard text gutter. */
.hero .email-cta,
.hero .trusted {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ================================================================
17. MOBILE V7 — hub.html / trust-center.html / privacy.html
================================================================
Bring the secondary pages up to the same mobile polish as the
landing page. Scope: ≤767px only.
(a) Nav (.nav-links) — hide the desktop link cluster on hub,
trust-center, privacy. Keep brand-mark + Join-the-waitlist
CTA only, matching the landing page's collapsed nav.
(b) Hub — page-head padding/typography, hub-grid → single col
at consistent gutter.
(c) Trust Center — hero, certs, big tables → readable on
phones; single column lists; section padding consistent.
(d) Privacy — wrap padding consistent with rest of site.
================================================================ */
@media (max-width: 767px) {
/* ── (a) NAV — collapse on every page ─────────────────────── */
/* Hub uses .nav-links (NOT .fn-links). Hide it on mobile so the
nav collapses to brand + CTA, matching the landing page. */
nav.top .nav-links,
nav.top .fn-links,
nav.top .fn-sep {
display: none !important;
}
/* Hub keeps "Join the waitlist" as the primary nav CTA — leave
it visible. (Landing-only rule that hides nav-cta is scoped
under .hero in v2 and only matches when nav-cta is inside
hero, which it isn't.) Make it compact. */
nav.top .nav-right .nav-cta {
font-size: 12px !important;
padding: 7px 11px !important;
}
/* ── (b) HUB — page-head + grid ───────────────────────────── */
/* Page-head: tighter top padding, hero h1 scales down. */
.page-head {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
.page-head h1 {
font-size: clamp(38px, 11vw, 56px) !important;
line-height: 1.02 !important;
letter-spacing: -0.02em !important;
}
.page-head .kicker {
font-size: 10.5px !important;
letter-spacing: 0.14em !important;
}
.page-head .back-link {
font-size: 13px !important;
}
.page-head > .wrap > p,
.page-head .lede {
font-size: 15px !important;
line-height: 1.55 !important;
max-width: 36ch !important;
}
/* Hub-grid: single column with the standard mobile inset, gap
tightened so cards read as a tidy stack. */
.hub-section {
padding-top: 24px !important;
padding-bottom: 32px !important;
}
.hub-grid {
grid-template-columns: 1fr !important;
gap: 16px !important;
margin-left: var(--mob-card-inset, 14px) !important;
margin-right: var(--mob-card-inset, 14px) !important;
}
.hub-card {
border-radius: 14px !important;
}
.hub-card .cover {
aspect-ratio: 16 / 9 !important;
width: 100% !important;
height: auto !important;
}
.hub-card .meta,
.hub-card h3 {
padding-left: 16px !important;
padding-right: 16px !important;
}
.hub-card h3 {
font-size: 18px !important;
line-height: 1.25 !important;
}
/* ── (c) TRUST CENTER ─────────────────────────────────────── */
/* Hero block — single column, smaller H1, controls stack. */
.tc-hero {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.tc-hero-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.tc-hero h1,
.tc-hero .tc-hero-h1 {
font-size: clamp(32px, 9vw, 44px) !important;
line-height: 1.05 !important;
letter-spacing: -0.02em !important;
}
.tc-hero p,
.tc-hero .tc-hero-lede {
font-size: 15px !important;
line-height: 1.55 !important;
}
.tc-hero-certs {
grid-template-columns: 1fr !important;
gap: 10px !important;
margin-left: var(--mob-card-inset, 14px) !important;
margin-right: var(--mob-card-inset, 14px) !important;
}
.tc-hero-certs .tc-cert {
padding: 14px 16px !important;
}
/* Sub-section heads ("Controls", "Sub-processors", etc.) */
.tc-shead {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.tc-shead h2 {
font-size: 22px !important;
line-height: 1.15 !important;
}
.tc-shead p {
font-size: 14.5px !important;
line-height: 1.55 !important;
}
/* Tables — privacy/sub-processors/data-table style. Make them
horizontally scrollable rather than letting them squeeze. */
.tc-table-wrap,
.tc-table {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.tc-table table,
table.tc-table {
font-size: 12.5px !important;
min-width: 520px; /* keeps columns legible; user scrolls */
}
.tc-table th,
.tc-table td {
padding: 10px 12px !important;
}
/* Controls list — single column. */
.tc-controls {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.tc-controls .ctrl-state {
justify-self: start !important;
}
/* Section vertical rhythm consistent with landing page. */
.tc-section,
section.tc-section {
padding-top: 36px !important;
padding-bottom: 36px !important;
}
/* ── (d) PRIVACY — gutter consistency ─────────────────────── */
/* The privacy page has its own inline @media (640px); we just
need the wrap padding to match the rest of the site at 20px,
and ensure body line-length is comfortable. */
.privacy-hero,
.privacy-body {
padding-left: 20px !important;
padding-right: 20px !important;
}
.privacy-body p,
.privacy-body li {
font-size: 15px !important;
line-height: 1.65 !important;
max-width: 40ch !important;
}
/* Privacy tables — same scroll treatment as trust-center. */
.privacy-body table {
display: block !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
font-size: 12.5px !important;
}
}
/* ================================================================
19. MOBILE V11 — Zuhair direct feedback (2026-04-25)
================================================================
Item 1: Terminal corners shaded — pseudo-elements kept their
desktop 28px radius inside a 12px-clipped parent.
Apply on every viewport so the fix isn't conditional. */
.hero-terminal-wrap::before,
.hero-terminal-wrap::after {
border-radius: inherit !important;
}
/* ================================================================
18. MOBILE V10 — audit fixes (2026-04-25)
================================================================
Addresses Tarth Mobile Audit findings: dot/text collision in
hero terminal, FAQ orb intercepting taps, sub-44px touch
targets, iOS-zoom inputs, modal polish, footer hit areas.
Scope: ≤767px unless otherwise noted.
================================================================ */
/* ── P0-B: FAQ orb intercepting taps ────────────────────────────
The decorative orb in .close section is z-index:0 with a 760px
diameter sitting above the FAQ. With pointer-events default,
it eats taps for items 7 & 8. Make it visual-only on every
viewport (not just mobile) — there's no reason for it to
intercept clicks anywhere. */
.close .orb-lg,
.close .orb-core,
[class*="orb-lg"],
[class*="orb-core"] {
pointer-events: none !important;
}
@media (max-width: 767px) {
/* ── P0-A: Terminal card — stack header so dot doesn't overlap ── */
.tarth-top {
flex-wrap: wrap !important;
align-items: flex-start !important;
gap: 6px 8px !important;
}
.tarth-top-l {
flex: 1 1 100% !important;
min-width: 0 !important;
overflow: hidden !important;
}
.tarth-subject-name,
.tarth-subject-meta {
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.tarth-top-r {
flex: 0 0 auto !important;
align-self: flex-start !important;
}
/* ── P0-C: Touch targets — 44px floor ────────────────────────── */
/* Primary "Request early access" / submit buttons in the page. */
section .email-cta button[type="submit"],
.case-cta,
a.sec-trust-cta,
.hub-cta {
min-height: 44px !important;
}
/* Hero "View full report" button — desktop is 19px tall. */
.tarth-report {
min-height: 30px !important;
padding: 6px 10px !important;
}
/* Toggle switches in modules — these are decorative/demo
toggles inside the "Configure" step illustration, not real
interactive controls. Reverted padding override that was
squeezing the visual track to a 2px sliver. */
/* (intentionally no overrides — desktop .sw rules apply) */
/* ── P1-D: Hero CTA — full-width up to 280px max ─────────────── */
section.hero .email-cta button[type="submit"] {
width: 100% !important;
max-width: 280px !important;
min-height: 48px !important;
}
/* ── P1-E: Footer link hit areas ─────────────────────────────── */
footer .footer-nav a,
footer ul a {
display: inline-block !important;
padding: 12px 4px !important;
min-height: 44px !important;
line-height: 20px !important;
}
/* Tighten the vertical separator so the nav doesn't grow huge. */
footer .footer-nav-sep {
align-self: center !important;
}
/* ── P1-A + P1-B + P1-C + P2-B: Modal polish ─────────────────── */
/* Inputs/selects: 16px to prevent iOS auto-zoom on focus. */
.wl-dialog input:not([type="radio"]):not([type="checkbox"]),
.wl-dialog select,
.wl-dialog textarea {
font-size: 16px !important;
}
/* Labels (Email, sub-industry, role, volume) — bump from 11.5px
base / 10.5px effective to 13px so they're legible at arm's
length. Match the "Signing up as" label too. */
.wl-dialog .wl-field label,
.wl-dialog .wl-field > label,
.wl-dialog .wl-seg-label {
font-size: 13px !important;
letter-spacing: 0.06em !important;
}
/* Dialog: bottom-sheet feel — top corners rounded, safe-area
padding so content doesn't sit under the iOS home indicator.
Override the existing ≤640px rule (border-radius: 0). */
.wl-modal { padding: 0 !important; align-items: stretch !important; }
.wl-dialog {
max-width: 100% !important;
max-height: 100vh !important;
border-radius: 18px 18px 0 0 !important;
border: 0 !important;
padding: 56px 20px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
}
/* Close button — 44px square. */
.wl-close {
width: 44px !important;
height: 44px !important;
top: 12px !important;
right: 12px !important;
}
/* Step indicator — center vertically with the close button. */
.wl-steps {
margin: 0 0 12px !important;
align-self: center !important;
}
/* Segment buttons (Individual / Organization) — 44px tall. */
.wl-dialog .wl-seg button {
min-height: 44px !important;
font-size: 14px !important;
}
/* ── P2-A: FAQ summary alignment ─────────────────────────────── */
.faq-item summary,
details.faq-item > summary {
display: flex !important;
align-items: baseline !important;
gap: 12px !important;
}
/* ── P2-D: Grain layer — match terminal radius ───────────────── */
.hero-terminal-wrap > .grain-layer {
border-radius: inherit !important;
}
/* ── P2-C: Hub card 1 — match other cards ────────────────────── */
.hub-card:first-child {
padding: 16px !important;
border-radius: 14px !important;
border: 1px solid var(--line) !important;
background: #fff !important;
}
}
/* ================================================================
20. MOBILE V14/V15 — report card pivot to module data (2026-04-25)
================================================================
Per Zuhair: on mobile, the executive summary paragraphs read as
text-heavy. Show the per-module details block instead — it has
Source of Wealth, Adverse Media, Residency with real subtext,
citations, and a "4 more modules" indicator built in.
================================================================ */
@media (max-width: 767px) {
/* Hide the narrative summary paragraphs. */
.tarth-report-card .trp-summary { display: none !important; }
/* SHOW the per-module details block (overrides v2/v3 hide rules). */
.tarth-report-card .trp-modules {
display: block !important;
margin-top: 14px !important;
padding-top: 14px !important;
border-top: 1px solid var(--line) !important;
}
.tarth-report-card .trp-modules .trp-mod {
padding: 10px 12px !important;
margin-bottom: 8px !important;
border: 1px solid var(--line) !important;
border-radius: 8px !important;
background: rgba(253, 250, 249, 0.6) !important;
}
.tarth-report-card .trp-modules .trp-mod:last-of-type {
margin-bottom: 0 !important;
}
.tarth-report-card .trp-modules .trp-mod-head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
margin-bottom: 6px !important;
}
.tarth-report-card .trp-modules .trp-mod-title {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--ink) !important;
letter-spacing: -0.005em !important;
}
.tarth-report-card .trp-modules .trp-mod-tag {
font-size: 9.5px !important;
font-weight: 600 !important;
padding: 3px 8px !important;
border-radius: 6px !important;
flex: 0 0 auto !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
}
.tarth-report-card .trp-modules .trp-mod-body {
font-size: 11px !important;
line-height: 1.5 !important;
color: var(--ink-2) !important;
margin: 0 !important;
}
.tarth-report-card .trp-modules .trp-mod-body b {
color: var(--ink) !important;
font-weight: 600 !important;
}
.tarth-report-card .trp-modules .trp-ref {
font-size: 9px !important;
color: var(--ink-4) !important;
}
/* "4 more modules" footer chip. */
.tarth-report-card .trp-modules .trp-mod-more {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 11px !important;
margin-top: 8px !important;
border: 1px dashed var(--line) !important;
border-radius: 8px !important;
font-family: var(--mono);
font-size: 10px !important;
letter-spacing: 0.04em !important;
color: var(--ink-4) !important;
text-transform: uppercase;
}
.tarth-report-card .trp-modules .trp-mod-more-ell { font-size: 12px; }
/* Hide the standalone scorecard rail on mobile — the modules
block already contains the same information with more depth. */
.tarth-report-card .trp-scorecard {
display: none !important;
}
}
/* ================================================================
17. MOBILE V17 — width consistency + hero centering hard-lock
================================================================
Scope: ≤767px only.
- Hero h1 + lede: hard-center even when inline styles try to
override. The inline `style="font-size: 58px"` on the h1 was
hijacking layout in some viewports.
- Use-case cards / Security cards / Hub cards / Trust Center
CTA / Hub CTA: locked to the SAME computed width as the step
cards under "How It Works" so the page reads as one column at
one width. Width = 100% - 2×var(--mob-card-inset) inside .wrap.
- Case study "Sign up today + Request early access": center the
inline CTA block and stack vertically so the heading no longer
drifts to the far left while the button drifts right.
================================================================ */
@media (max-width: 767px) {
/* ── Hero text — hard center every text element ─────────────── */
.hero .hero-grid {
grid-template-columns: 1fr !important;
}
.hero .hero-grid > div:first-child {
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
}
.hero h1,
section.hero h1 {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 100% !important;
}
.hero .lede,
section.hero .lede {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 100% !important;
}
/* ── Unified card width across page ────────────────────────────
Every visual block on the landing page (use-case slides,
security cert cards, hub cards, "Visit Trust Center" / "Visit
Hub" CTAs, case-study CTA row) sits at the same width as the
step cards: full .wrap width minus 2×var(--mob-card-inset).
─────────────────────────────────────────────────────────── */
/* Use-case slides — match step cards exactly */
.uc-slide {
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
width: calc(100% - 2 * var(--mob-card-inset)) !important;
max-width: calc(100% - 2 * var(--mob-card-inset)) !important;
box-sizing: border-box !important;
}
/* Use-case track + viewport must NOT add any extra inset that
would shrink the slides relative to .sec-certs / hub-grid. */
.uc-carousel,
.uc-viewport,
.uc-track {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Security cert badges — full row width minus inset */
#security .sec-certs {
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
width: calc(100% - 2 * var(--mob-card-inset)) !important;
max-width: calc(100% - 2 * var(--mob-card-inset)) !important;
box-sizing: border-box !important;
}
/* "Visit Trust Center" CTA — match card width */
#security .sec-trust,
#security .sec-trust-cta,
#security a[href*="trust-center"] {
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
width: calc(100% - 2 * var(--mob-card-inset)) !important;
max-width: calc(100% - 2 * var(--mob-card-inset)) !important;
box-sizing: border-box !important;
}
/* Hub grid + cards — match card width */
#hub .hub-grid {
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
width: calc(100% - 2 * var(--mob-card-inset)) !important;
max-width: calc(100% - 2 * var(--mob-card-inset)) !important;
box-sizing: border-box !important;
}
/* "Visit Hub" CTA — match card width */
#hub .sec-trust,
#hub .sec-trust-cta,
#hub a[href*="/hub"] {
margin-left: var(--mob-card-inset) !important;
margin-right: var(--mob-card-inset) !important;
width: calc(100% - 2 * var(--mob-card-inset)) !important;
max-width: calc(100% - 2 * var(--mob-card-inset)) !important;
box-sizing: border-box !important;
}
/* Case-study CTA row: stack heading + form, center both. */
#case-study .case-cta-row {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
box-sizing: border-box !important;
}
#case-study .case-cta-row .solutions-cta.is-inline {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
gap: 14px !important;
}
#case-study .case-cta-row .solutions-cta-head {
text-align: center !important;
margin: 0 auto !important;
white-space: normal !important;
}
#case-study .case-cta-row .email-cta {
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ================================================================
17b. CASE STUDY CTA — center on tablet/desktop too
================================================================
The "Sign up today + Request early access" inline CTA had no
margin auto and was drifting left. Center it on every viewport.
============================================================= */
.solutions-cta.is-inline {
margin-left: auto !important;
margin-right: auto !important;
justify-content: center !important;
}
/* ================================================================
19. DIVIDER AUDIT — section-head dividers kept consistent
================================================================
Earlier draft removed the `.section-head` border on mobile —
it felt too naked. Restore the desktop treatment: every section
title gets the editorial underline on every viewport.
============================================================= */
/* ================================================================
18. PEN TESTING CARD — phantom logo gutter (mobile only)
================================================================
The Pen testing cert card has no .sec-cert-logo on the right,
so its body text reaches further right than the other cards
(ISO 27001, SOC 2, GDPR & UAE PDPL). Pad the body to reserve
the same 40px logo footprint + 10px gap so the body box ends
at the same position as cards that have a logo.
============================================================= */
@media (max-width: 767px) {
.sec-cert:not(:has(.sec-cert-logo)) .sec-cert-body {
padding-right: 50px !important; /* 40px logo + 10px gap */
}
}