/* ============================================================================
flo · empresas.css — layout CÁLIDO para las landings de flo Empresas
----------------------------------------------------------------------------
Mismo lenguaje visual que el home (index.html): fondo claro (--bg), tinta
oscura (--ink), acento ámbar, y teal (--t900) SOLO en nav-cta/botones/mockups
/banda CTA. NO usa base.css (que pinta el body oscuro). Depende de tokens.css.
========================================================================== */
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',-apple-system,system-ui,sans-serif; color:var(--ink); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased}
.serif{font-family:'DM Serif Display',Georgia,serif; font-weight:400}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1120px; margin:0 auto; padding:0 22px}
em{font-family:'DM Serif Display',serif; font-style:italic; color:inherit}
a{color:inherit}
/* nav */
nav{position:sticky; top:0; z-index:30; background:rgba(247,250,248,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 22px; max-width:1120px; margin:0 auto}
.logo{font-family:'DM Serif Display',serif; font-size:30px; line-height:1; color:var(--ink); text-decoration:none; position:relative; padding-right:13px}
.logo-dot{position:absolute; top:2px; right:0; width:9px; height:9px; border-radius:50%; background:var(--amber)}
.nav-links{display:flex; align-items:center; gap:18px}
.nav-link{font-size:14px; color:var(--muted); text-decoration:none; font-weight:500}
.nav-cta{font-size:14px; font-weight:500; color:#fff; background:var(--t900); padding:10px 18px; border-radius:var(--r-pill); text-decoration:none}
/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:500; font-size:15px; color:#fff; background:var(--t900); border:none; border-radius:var(--r-pill); padding:14px 26px; text-decoration:none; cursor:pointer; transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; font-weight:500; font-size:15px; color:var(--t600); background:transparent; border:none; text-decoration:none; padding:14px 10px; cursor:pointer}
.cta-reassure{font-size:12.5px; color:var(--hint); margin-top:12px}
/* eyebrows / titles */
.eyebrow{font-size:11.5px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--fill)}
.section-title{font-family:'DM Serif Display',serif; font-weight:400; font-size:clamp(28px,4vw,40px); line-height:1.1; letter-spacing:-.4px; color:var(--ink)}
.section-head{text-align:center; max-width:640px; margin:0 auto}
.section-head .eyebrow{text-align:center}
.section-head .section-title{margin-top:8px}
.section-head p{font-size:16px; color:var(--muted); margin:12px auto 0; max-width:52ch}
.divider{height:1px; background:var(--border); max-width:1120px; margin:0 auto}
/* hero */
.hero{padding:56px 0 34px}
.hero-inner{max-width:1120px; margin:0 auto; padding:0 22px; display:grid; grid-template-columns:1.04fr .96fr; gap:44px; align-items:center}
.hero-tag{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--muted); background:#fff; border:1px solid var(--border); border-radius:var(--r-pill); padding:6px 14px}
.tag-dot{width:7px; height:7px; border-radius:50%; background:var(--fill)}
.hero h1{font-family:'DM Serif Display',serif; font-weight:400; font-size:clamp(38px,5.4vw,58px); line-height:1.05; letter-spacing:-1px; margin:18px 0 0; color:var(--ink)}
.hero h1 em{color:var(--t600)}
.hero-sub{font-size:17px; color:var(--muted); margin:16px 0 0; max-width:46ch}
.hero-sub strong{color:var(--ink); font-weight:500}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:24px 0 0}
.hero-note{font-size:12.5px; color:var(--hint); margin-top:14px}
.hero-visual{display:flex; justify-content:center}
/* generic split (copy + device/visual) */
.split{padding:60px 0}
.split.alt{background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.split-inner{max-width:1080px; margin:0 auto; padding:0 22px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.split-inner.flip .split-copy{order:2}
.split-copy .eyebrow{text-align:left}
.split-copy h2{font-family:'DM Serif Display',serif; font-weight:400; font-size:clamp(26px,3.6vw,38px); line-height:1.1; margin:8px 0 0; color:var(--ink)}
.split-copy>p{font-size:16px; color:var(--muted); margin:14px 0 0; max-width:44ch}
.split-copy>p strong{color:var(--ink); font-weight:500}
.split-device{display:flex; justify-content:center}
.split-points{margin-top:22px; display:flex; flex-direction:column; gap:15px}
.split-point{display:flex; gap:12px; align-items:flex-start}
.split-point-ic{font-size:19px; flex:none; line-height:1.3}
.split-point-tx{font-size:13.5px; color:var(--muted); line-height:1.5}
.split-point-tx strong{display:block; color:var(--ink); font-weight:500; margin-bottom:1px}
.split-note{margin-top:18px; background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:13px 15px; font-size:13px; color:var(--muted); line-height:1.5}
.split-note strong{color:var(--ink); font-weight:500}
/* trust strip (logos, sobre banda clara) */
.trust{padding:30px 0 8px}
.trust-head{text-align:center; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--hint); margin-bottom:22px}
.trust-logos{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:26px 46px; max-width:940px; margin:0 auto; padding:0 22px}
.trust-logos img{width:auto; object-fit:contain; filter:brightness(0); opacity:.42; transition:opacity .2s ease}
.trust-logos img:hover{opacity:.72}
/* módulos / feature cards */
.cards{padding:8px 0 60px}
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1040px; margin:40px auto 0; padding:0 22px}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:26px 24px; display:flex; flex-direction:column}
.card-ic{font-size:26px}
.card-tag{font-size:11px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; color:var(--fill); margin:14px 0 4px}
.card h3{font-size:18px; font-weight:500; color:var(--ink); margin-bottom:8px}
.card p{font-size:13.5px; color:var(--muted); margin-bottom:20px}
.card p strong{color:var(--ink); font-weight:500}
.card .more{margin-top:auto; font-size:13px; font-weight:500; color:var(--t600); text-decoration:none}
.card .more:hover{text-decoration:underline}
/* feature grid compacto (capacidades) */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1000px; margin:40px auto 0; padding:0 22px}
.feat{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:22px}
.feat-ic{font-size:22px}
.feat h3{font-size:15.5px; font-weight:500; margin:10px 0 6px; color:var(--ink)}
.feat p{font-size:13px; color:var(--muted); line-height:1.55}
/* pasos */
.steps{max-width:720px; margin:36px auto 0; padding:0 22px; display:flex; flex-direction:column; gap:6px}
.step{display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:none}
.step-n{font-family:'DM Serif Display',serif; font-size:17px; color:var(--fill); background:var(--surface2); min-width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none}
.step h4{font-size:16px; font-weight:500; color:var(--ink)}
.step p{font-size:13.5px; color:var(--muted); margin-top:3px}
/* tarjeta "próximamente" */
.soon-card{max-width:760px; margin:34px auto 0; background:#fff; border:1px dashed var(--amber); border-radius:var(--r-lg); padding:26px 28px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; box-shadow:0 12px 30px rgba(239,159,39,.10)}
.soon-card .ico{font-size:30px}
.soon-card .body{flex:1; min-width:230px}
.soon-pill{display:inline-block; font-size:10px; letter-spacing:.8px; text-transform:uppercase; color:#8a5a00; background:var(--amber); padding:3px 11px; border-radius:var(--r-pill); font-weight:600; margin-bottom:10px}
.soon-card h3{font-size:19px; font-weight:500; color:var(--ink); margin-bottom:6px}
.soon-card p{font-size:13.5px; color:var(--muted); line-height:1.55}
/* faq */
.faq{padding:60px 0; background:#fff; border-top:1px solid var(--border)}
.faq-inner{max-width:760px; margin:0 auto; padding:0 22px}
.faq h2{font-family:'DM Serif Display',serif; font-weight:400; font-size:clamp(26px,3.5vw,36px); line-height:1.12; text-align:center; margin:8px 0 0; color:var(--ink)}
.faq-list{margin-top:32px; display:flex; flex-direction:column; gap:14px}
.faq-item{border-bottom:1px solid var(--border); padding-bottom:14px}
.faq-q{font-size:15px; font-weight:500; color:var(--ink)}
.faq-a{font-size:14px; color:var(--muted); margin-top:6px}
/* cta final (banda teal) */
.cta{padding:72px 22px; background:var(--t900)}
.cta-inner{max-width:680px; margin:0 auto; text-align:center; color:#fff}
.cta h2{font-family:'DM Serif Display',serif; font-weight:400; font-size:clamp(28px,4.5vw,44px); line-height:1.08; letter-spacing:-.4px}
.cta h2 em{color:var(--amber)}
.cta p{font-size:16px; color:var(--soft); margin-top:16px}
.cta .btn{background:var(--amber); color:#3a2606; margin-top:22px}
.cta-note{font-size:12px; color:var(--t400); margin-top:14px}
/* footer */
footer{background:#fff; border-top:1px solid var(--border); padding:30px 22px; text-align:center}
.footer-logo{font-family:'DM Serif Display',serif; font-size:24px; position:relative; display:inline-block; padding-right:10px; color:var(--ink)}
.footer-dot{position:absolute; top:1px; right:0; width:7px; height:7px; border-radius:50%; background:var(--amber)}
.footer-links{list-style:none; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin:14px 0; padding:0}
.footer-links a{font-size:13px; color:var(--muted); text-decoration:none}
.footer-copy{font-size:12px; color:var(--hint)}
.footer-copy a{color:inherit; text-decoration:underline}
/* ── devices / app mockups ── */
.device{position:relative; width:300px; max-width:100%; background:#0b1c17; border-radius:48px; padding:11px; box-shadow:0 28px 64px rgba(12,42,34,.30); flex:none}
.device-screen{position:relative; background:#04342C; border-radius:37px; overflow:hidden}
.dvc-island{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:84px; height:22px; background:#05140f; border-radius:13px; z-index:6}
.dvc-status{display:flex; justify-content:space-between; align-items:center; padding:14px 24px 8px; font-size:13px; font-weight:600; color:#fff; position:relative; z-index:4}
.dvc-status .st-ic{display:flex; gap:6px; align-items:center}
.dvc-status svg{display:block}
.app-hero{background:linear-gradient(168deg,#063e33,#0a5642); padding:4px 18px 22px; color:#fff}
.app-top{display:flex; align-items:center; justify-content:space-between; margin:6px 0 16px}
.app-logo{font-family:'DM Serif Display',serif; font-size:22px; position:relative; padding-right:10px; color:#E1F5EE}
.app-logo i{position:absolute; top:2px; right:0; width:6px; height:6px; border-radius:50%; background:var(--amber)}
.app-refresh{font-size:10.5px; color:var(--soft); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:5px 11px}
.app-greet{font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--soft)}
.app-big{font-family:'DM Serif Display',serif; font-size:38px; letter-spacing:-1px; line-height:1; margin:6px 0 4px}
.app-saving{font-size:12px; color:var(--amber)}
.app-body{background:#fff; padding:18px 16px 22px; border-radius:20px 20px 0 0; margin-top:-10px; position:relative}
.app-sec{font-size:10.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--hint); margin-bottom:12px}
.app-movs{display:flex; flex-direction:column}
.app-mov{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border)}
.app-mov:last-child{border-bottom:none}
.app-mov-ic{width:28px; height:28px; border-radius:8px; background:var(--surface2); display:grid; place-items:center; font-size:13px; flex:none}
.app-mov-nm{font-size:12px; color:var(--ink); flex:1}
.app-mov-nm small{display:block; color:var(--hint); font-size:10px}
.app-mov-nm small.ok{color:var(--t400)}
.app-mov-amt{font-size:12px; font-weight:500; font-variant-numeric:tabular-nums}
.app-pill{font-size:9.5px; font-weight:600; padding:3px 8px; border-radius:999px; flex:none}
.app-pill.wait{color:#8a5a00; background:#fdf0d6}
.app-pill.ok{color:var(--t600); background:var(--t50)}
.app-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.app-chip{font-size:10px; font-weight:500; color:var(--muted); background:var(--surface2); border-radius:999px; padding:5px 10px; display:inline-flex; align-items:center; gap:5px}
.app-insight{display:flex; gap:8px; align-items:flex-start; margin-top:16px; background:var(--surface2); border-radius:12px; padding:11px 12px; font-size:11px; color:var(--muted); line-height:1.45}
.app-insight strong{color:var(--ink); font-weight:600}
/* ── chat WhatsApp mock ── */
.wa-screen{display:flex; flex-direction:column; height:540px; background:#E7DECF}
.wa-head{display:flex; align-items:center; gap:10px; background:#075E54; color:#fff; padding:46px 13px 11px}
.wa-back{font-size:22px; line-height:1; opacity:.95}
.wa-ava{width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; background:linear-gradient(160deg,#1D9E75,#085041); position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.wa-ava span{position:relative; font-family:'DM Serif Display',serif; font-size:20px; line-height:1; color:#fff; padding-right:6px; transform:translateY(-1px)}
.wa-ava i{position:absolute; top:1px; right:0; width:5px; height:5px; border-radius:50%; background:var(--amber)}
.wa-meta{flex:1; min-width:0}
.wa-name{font-size:14.5px; font-weight:600; line-height:1.2}
.wa-presence{font-size:11px; color:#bfe5d8}
.wa-dots{opacity:.85; font-size:18px}
.wa-body{flex:1; display:flex; flex-direction:column; gap:7px; padding:14px 12px; overflow:hidden}
.wa-day{align-self:center; background:rgba(255,255,255,.8); color:#5b6b66; font-size:10px; font-weight:500; padding:3px 11px; border-radius:8px; margin-bottom:3px}
.wa-msg{max-width:82%; padding:7px 10px 16px; border-radius:9px; font-size:12.5px; line-height:1.42; color:#0b1c17; box-shadow:0 1px .5px rgba(0,0,0,.13); position:relative}
.wa-msg strong{font-weight:600}
.wa-t{position:absolute; right:9px; bottom:5px; font-size:9px; color:#8c9b95}
.wa-in{align-self:flex-start; background:#fff; border-top-left-radius:2px}
.wa-out{align-self:flex-end; background:#DCF8C6; border-top-right-radius:2px}
.wa-out .wa-t{color:#5aa06b}
.wa-photo{align-self:flex-end; width:140px; background:#DCF8C6; border-radius:9px; border-top-right-radius:2px; padding:4px 4px 16px; box-shadow:0 1px .5px rgba(0,0,0,.13); position:relative}
.wa-photo-img{background:#fff; border-radius:6px; padding:12px; display:flex; flex-direction:column; gap:5px}
.wa-photo-img .rl{height:4px; border-radius:2px; background:#e3ddd0}
.wa-photo-img .rl.dark{background:#c8a96b}
.wa-photo .wa-t{color:#5aa06b}
.wa-input{display:flex; align-items:center; justify-content:space-between; gap:8px; background:#fff; color:#9aa5a0; font-size:12px; border-radius:999px; padding:9px 8px 9px 15px; margin:0 9px 11px}
.wa-send{width:30px; height:30px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; font-size:13px; flex:none}
/* ── mockup DESKTOP del portal real (flo Empresas · bandeja de recepción) ── */
.pmock{width:100%; max-width:640px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 26px 60px rgba(12,42,34,.16); color:var(--ink)}
.pmock-bar{display:flex; align-items:center; gap:7px; padding:10px 14px; background:#EDF1EF; border-bottom:1px solid var(--border)}
.pmock-bar i{width:10px; height:10px; border-radius:50%; background:#cdd8d3; flex:none}
.pmock-url{margin-left:8px; font-size:10.5px; color:var(--hint); background:#fff; border:1px solid var(--border); border-radius:6px; padding:3px 12px}
.pmock-grid{display:grid; grid-template-columns:156px 1fr; min-height:352px}
.pmock-side{background:#F6F9F7; border-right:1px solid var(--border); padding:14px 11px; display:flex; flex-direction:column; gap:2px}
.pmock-brand{font-family:'DM Serif Display',serif; font-size:17px; color:var(--ink); display:flex; align-items:center; gap:7px; margin-bottom:12px}
.pmock-brand em{font-style:normal; font-size:8.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:#fff; background:var(--t900); border-radius:5px; padding:2px 6px; font-family:var(--sans)}
.pmock-nl{font-size:8.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--hint); margin:10px 0 3px}
.pmock-ni{display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--muted); padding:6px 8px; border-radius:7px}
.pmock-ni.on{background:#fff; color:var(--ink); font-weight:500; box-shadow:0 1px 3px rgba(12,42,34,.08)}
.pmock-ni .ct{font-size:9px; background:var(--surface2); border-radius:20px; padding:1px 7px; color:var(--muted)}
.pmock-ni .soon{font-size:8px; color:var(--hint); text-transform:uppercase; letter-spacing:.3px}
.pmock-main{padding:16px 16px 18px; min-width:0}
.pmock-h{font-family:'DM Serif Display',serif; font-size:18px; color:var(--ink); line-height:1}
.pmock-crumb{font-size:10px; color:var(--hint); margin-top:3px}
.pmock-mets{display:flex; gap:7px; margin:13px 0}
.pmock-met{flex:1; background:#F6F9F7; border:1px solid var(--border); border-radius:9px; padding:7px 9px}
.pmock-met b{display:block; font-size:14px; color:var(--ink); font-variant-numeric:tabular-nums}
.pmock-met span{font-size:8.5px; color:var(--hint)}
.pmock-tabs{display:flex; gap:4px; margin-bottom:9px; flex-wrap:wrap}
.pmock-tab{font-size:9.5px; color:var(--muted); padding:4px 9px; border-radius:20px}
.pmock-tab.on{background:var(--t900); color:#fff}
.pmock-tab .n{opacity:.55; margin-left:3px}
.pmock table{width:100%; border-collapse:collapse}
.pmock th{font-size:8.5px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; color:var(--hint); text-align:left; padding:5px 7px; border-bottom:1px solid var(--border)}
.pmock td{font-size:10.5px; padding:7px; border-bottom:1px solid var(--border); color:var(--ink); vertical-align:middle}
.pmock tr.sel td{background:#EEF6F2}
.pmock-tscroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.pmock-tscroll table{min-width:420px}
.pmock .prov{font-weight:500}
.pmock .prov small{display:block; color:var(--hint); font-weight:400; font-size:8.5px}
.pmock .r{text-align:right; font-variant-numeric:tabular-nums}
.pmock-chip{display:inline-flex; align-items:center; font-size:9px; font-weight:600; padding:2px 8px; border-radius:20px; white-space:nowrap}
.c-warn{background:#F8EFD8; color:#AF7317}
.c-act{background:#E1F4EE; color:#0E8A6B}
.c-crit{background:#F8E7E1; color:#C0442A}
.c-fiscal{background:#E8F2F8; color:#2F7EA6}
.c-mut{background:#EDF1EF; color:#6B7C75}
.pmock-actbar{display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 12px; background:#F6F9F7; border:1px solid var(--border); border-radius:9px}
.pmock-actbar .who{font-size:10px; color:var(--muted); flex:1; line-height:1.35}
.pmock-actbar .who b{color:var(--ink); font-weight:500}
.pmb{font-size:10.5px; font-weight:600; border-radius:7px; padding:6px 13px; flex:none}
.pmb.ok{background:#0F6B52; color:#fff}
.pmb.no{background:#fff; border:1px solid #C0442A; color:#C0442A}
/* ── panel de auditoría (timeline por factura) ── */
.audit{width:100%; max-width:440px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 22px 52px rgba(12,42,34,.14); overflow:hidden}
.audit-h{padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between}
.audit-h b{font-size:13px; color:var(--ink)}
.audit-h .doc{font-size:10px; color:var(--hint)}
.audit-body{padding:16px 18px}
.audit-dian{display:flex; align-items:center; gap:8px; background:#F8EFD8; color:#8a5a00; border-radius:8px; padding:8px 11px; font-size:11px; line-height:1.35; margin-bottom:16px}
.tl{position:relative; padding-left:22px}
.tl::before{content:''; position:absolute; left:6px; top:5px; bottom:8px; width:2px; background:var(--border)}
.tl-item{position:relative; padding:0 0 15px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:''; position:absolute; left:-19px; top:1px; width:11px; height:11px; border-radius:50%; background:var(--fill); border:2px solid #fff; box-shadow:0 0 0 1px var(--border)}
.tl-item.now::before{background:var(--amber)}
.tl-item.wait::before{background:#cdd8d3}
.tl-t{font-size:12px; font-weight:500; color:var(--ink)}
.tl-t .who{font-weight:400; color:var(--muted)}
.tl-m{font-size:10px; color:var(--hint); margin-top:1px}
.rej-lbl{font-size:9.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--hint); margin-bottom:6px; display:block}
.rej-field{border:1px solid var(--border); border-radius:8px; padding:9px 11px; font-size:12px; color:var(--ink); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; background:#fff}
.rej-field.ph{color:var(--hint)}
.kvrow{display:flex; justify-content:space-between; gap:12px; font-size:11.5px; padding:7px 0; border-bottom:1px solid var(--border)}
.kvrow:last-of-type{border-bottom:none}
.kvrow .k{color:var(--hint)}
.kvrow .v{color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; text-align:right}
/* ── integraciones (Siigo + futuros) ── */
.integ{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:820px; margin:38px auto 0; padding:0 22px}
.integ-card{background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px}
.integ-card.live{border-color:var(--t400)}
.integ-name{font-family:'DM Serif Display',serif; font-size:22px; color:var(--ink); letter-spacing:-.3px}
.integ-status{font-size:10px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; border-radius:20px; padding:4px 11px}
.integ-status.on{color:var(--t600); background:var(--t50)}
.integ-status.soon{color:var(--hint); background:var(--surface2)}
.integ-desc{font-size:12px; color:var(--muted); line-height:1.5}
/* responsive */
@media(max-width:860px){
.pmock-grid{grid-template-columns:1fr}
.pmock-side{display:none}
.pmock-actbar{flex-wrap:wrap; gap:7px}
.pmock-actbar .who{flex-basis:100%}
.integ{grid-template-columns:1fr; max-width:420px}
.hero-inner{grid-template-columns:1fr; gap:32px}
.hero-visual{order:-1}
.hero h1,.hero-sub,.eyebrow{text-align:center}
.hero-ctas{justify-content:center}
.hero-note{text-align:center}
.split-inner{grid-template-columns:1fr; gap:30px}
.split-inner.flip .split-copy{order:0}
.split-device{order:-1}
.split-copy .eyebrow,.split-copy h2{text-align:center}
.split-copy>p{margin-left:auto; margin-right:auto; text-align:center}
.card-grid,.feat-grid{grid-template-columns:1fr}
.trust-logos{gap:22px 32px}
.nav-inner{padding:10px 16px}
.logo{font-size:26px}
.nav-links{gap:12px}
.nav-link{font-size:13px}
.nav-cta{font-size:13px; padding:8px 13px}
}
@media(max-width:430px){
.nav-inner{padding:9px 13px}
.logo{font-size:23px}
.nav-link{display:none}
.nav-cta{font-size:12.5px; padding:8px 12px}
}