/* Urmount — connected product stories / Nov 2026 */
:root { --brand-indigo:#31459d; --ink-strong:#10243a; --ink-muted:#65768b; }
html { scroll-padding-top:22px; }
button, a { -webkit-tap-highlight-color:transparent; }
a:focus-visible, button:focus-visible { outline:3px solid #55bcf0; outline-offset:4px; }
.nav { gap:2px; font-size:12px; }
.nav a { padding:11px 10px; white-space:nowrap; }
.nav-cta { padding:11px 17px !important; }
.hero .hero-copy>p { max-width:580px; }
.solution-section h2, .suite-intro h2, .meeting-section h2, .urbie-section h2, .connected-story h2 {
  font-size:clamp(34px,3.75vw,56px); line-height:1.1; letter-spacing:-.045em; margin:16px 0 24px;
}
.solution-section h2 em, .meeting-section h2 em, .urbie-section h2 em { font-style:normal; color:#2b8ec6; }
.solution-section p, .meeting-section p, .urbie-section p, .connected-story p { color:#60768d; }
.mock-ui { position:relative; }
.visual-disclaimer { display:block; color:#94a2b4; font-size:9px; letter-spacing:.015em; margin-top:12px; text-align:right; }
.visual-disclaimer.dark { color:#8ca5c2; }

/* Quick routes: a calm visual overview of the full suite. */
.suite-intro { padding:95px max(5vw,24px) 106px; background:#fff; }
.suite-intro-top { display:grid; grid-template-columns:1.05fr .8fr; gap:70px; align-items:end; }
.suite-intro h2 { max-width:680px; margin-bottom:0; }
.suite-intro-top>p { max-width:490px; margin:0 0 5px; font-size:16px; color:var(--ink-muted); }
.suite-links { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-top:40px; }
.suite-link { background:#f8fbfd; border:1px solid #e1e9f2; border-radius:13px; min-height:156px; padding:17px; display:flex; flex-direction:column; align-items:flex-start; position:relative; transition:transform .22s,box-shadow .22s,border-color .22s; }
.suite-link:hover { transform:translateY(-4px); border-color:#bfdaf1; box-shadow:0 17px 36px rgba(17,48,79,.1); }
.suite-link-icon { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:#e8eefb; color:var(--brand-indigo); font-size:23px; line-height:1; }
.suite-link strong { font-size:14px; color:#1e3249; margin:14px 0 2px; }
.suite-link small { font-size:10px; color:#74889e; }
.suite-arrow { position:absolute; right:18px; top:16px; color:#9fb4c9; font-size:17px; }

/* CRM: editorial text + recognizable product-system illustration. */
.solution-section { padding:105px max(5vw,24px); display:grid; grid-template-columns:.86fr 1.14fr; gap:7vw; align-items:center; }
.solution-copy>p { font-size:17px; max-width:570px; margin-bottom:32px; }
.benefit-list { display:grid; gap:19px; }
.benefit-list>div { display:flex; gap:15px; align-items:flex-start; }
.benefit-mark { color:#277fb3; background:#e8f4fc; border-radius:8px; font-weight:800; font-size:11px; flex:0 0 35px; height:35px; display:grid; place-items:center; }
.benefit-list strong,.benefit-list small { display:block; }
.benefit-list strong { color:#22384e; font-size:14px; }
.benefit-list small { max-width:440px; color:#74869a; line-height:1.6; font-size:12px; margin-top:3px; }
.inline-cta { margin-top:29px; color:#267caf; font-weight:800; font-size:13px; display:inline-flex; gap:18px; align-items:center; }
.inline-cta span { font-size:18px; }
.crm-section { background:#fff; }
.crm-visual { background:#fff; border:1px solid #d8e4ef; border-radius:15px; box-shadow:0 29px 75px rgba(15,45,77,.13); overflow:hidden; transform:rotate(.45deg); }
.mock-window-bar { height:46px; display:flex; align-items:center; gap:14px; background:#0f2943; color:#c7d9e7; padding:0 16px; font-size:10px; }
.mock-window-bar strong { font-size:10px; font-weight:700; }
.window-dots { display:flex; gap:5px; }
.window-dots i { width:7px; height:7px; border-radius:100%; background:#f46a75; }
.window-dots i:nth-child(2) { background:#f5ba5b; }
.window-dots i:nth-child(3) { background:#54c69b; }
.window-label { margin-left:auto; padding:4px 8px; border-radius:15px; background:#183d5d; color:#72d6f8; letter-spacing:.09em; font-size:8px; }
.crm-pane { padding:22px; background:linear-gradient(135deg,#fff,#f9fcfe); }
.mock-overline { color:#7294b2; font-size:9px; font-weight:800; letter-spacing:.11em; }
.crm-contact { display:flex; gap:11px; align-items:center; margin:11px 0 24px; }
.crm-avatar { width:41px; height:41px; display:grid; place-items:center; border-radius:12px; background:linear-gradient(135deg,#263f9e,#32acd8); color:white; font-weight:800; font-size:12px; }
.crm-contact strong,.crm-contact small { display:block; }
.crm-contact strong { font-size:15px; color:#283b55; }
.crm-contact small { color:#8393a4; font-size:10px; }
.crm-contact-status { margin-left:auto; padding:6px 9px; background:#e4f8ee; color:#2b8661; border-radius:25px; font-size:9px; white-space:nowrap; }
.crm-journey { display:flex; align-items:center; margin-bottom:21px; padding:13px 14px; background:#f0f5fb; border:1px solid #e5ebf2; border-radius:11px; }
.crm-journey>div { display:flex; flex-direction:column; align-items:center; text-align:center; min-width:90px; flex:1; }
.crm-journey>div strong { font-size:10px; margin-top:6px; color:#2d465f; }
.crm-journey>div small { font-size:8px; color:#8795a6; }
.crm-journey>i { height:1px; flex:.5; background:#b5c7d7; }
.journey-check { width:24px; height:24px; border-radius:50%; background:#def5ed; color:#25986c; font-size:12px; display:grid; place-items:center; font-weight:800; }
.journey-check.highlight { color:#fff; background:#315ba8; font-size:10px; box-shadow:0 0 0 5px #e2ebfa; }
.crm-bottom-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:10px; }
.crm-widget { border:1px solid #e2eaf3; padding:15px; border-radius:10px; background:#fff; }
.interaction-row { display:flex; gap:9px; align-items:center; border-top:1px solid #edf1f5; padding:9px 0; }
.interaction-row:first-of-type { margin-top:10px; }
.interaction-icon { width:26px; height:26px; display:grid; place-items:center; background:#ebf4fc; color:#3478ae; border-radius:7px; flex:0 0 26px; }
.interaction-row b,.interaction-row small { display:block; }
.interaction-row b { font-size:9px; color:#3e5063; }
.interaction-row small { font-size:8px; color:#8393a4; }
.next-widget>strong { font-size:14px; color:#293e55; display:block; margin-top:16px; }
.next-widget p { font-size:10px; line-height:1.65; margin:9px 0 17px; }
.mini-tag { background:#eff3ff; color:#3754a1; font-size:8px; border-radius:14px; padding:6px 9px; }
.crm-visual .visual-disclaimer { background:#f9fcfe; margin:0; padding:5px 14px 12px; }

/* Campaign orchestration — midnight blue, distinct from the CRM section. */
.campaigns-section { display:block; position:relative; overflow:hidden; background:radial-gradient(circle at 82% 0%,rgba(32,112,188,.3),transparent 36%),linear-gradient(135deg,#061523,#0d2a49 85%); color:#fff; }
.campaigns-section:before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; background:repeating-radial-gradient(ellipse at 95% -10%,transparent 0 38px,rgba(96,185,242,.06) 39px 40px); }
.campaigns-head,.campaigns-showcase,.campaign-capabilities { position:relative; z-index:1; }
.campaigns-head { display:grid; grid-template-columns:1.08fr .8fr; align-items:end; gap:75px; margin-bottom:39px; }
.campaigns-head h2 { max-width:780px; }
.campaigns-head h2 em { color:#5bcef8; }
.campaigns-head>p { color:#9bb3c8; font-size:16px; line-height:1.7; max-width:490px; }
.campaigns-showcase { border-radius:15px; border:1px solid #42627d; box-shadow:0 30px 70px rgba(0,0,0,.26); padding:27px; background:linear-gradient(145deg,#103553,#0e2944); }
.campaign-topbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-bottom:22px; border-bottom:1px solid #2d536e; }
.campaign-topbar strong,.campaign-topbar .mock-overline { display:block; }
.campaign-topbar strong { color:#fff; font-size:18px; margin-top:5px; }
.campaign-version { color:#7ce1b4; border:1px solid #2f725e; border-radius:25px; padding:7px 10px; font-size:10px; }
.campaign-version i { display:inline-block; width:7px; height:7px; background:#4dd3a0; border-radius:50%; margin-right:5px; }
.campaign-flow { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:31px 0; }
.campaign-step { min-width:0; flex:1; padding:17px 14px; min-height:143px; border:1px solid #406784; border-radius:11px; background:#173a58; }
.campaign-step-icon { color:#6bd4fb; display:grid; place-items:center; width:33px; height:33px; background:#234f70; border-radius:9px; font-size:20px; }
.campaign-step small,.campaign-step strong { display:block; }
.campaign-step small { color:#77a7ca; letter-spacing:.12em; font-size:8px; margin-top:12px; }
.campaign-step strong { font-size:13px; color:#fff; margin:3px 0 4px; }
.campaign-step p { color:#9eb7cb; font-size:10px; margin:0; }
.campaign-step.active-step { border-color:#4cadb5; background:linear-gradient(160deg,#15516a,#17405b); }
.campaign-step.active-step .campaign-step-icon { background:#1c6874; color:#7eedd5; }
.campaign-line { flex:0 0 28px; display:grid; place-items:center; color:#63b0d2; font-size:23px; }
.campaign-detail-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px 35px; border-top:1px solid #2d536e; padding-top:18px; color:#b2c5d6; font-size:10px; }
.campaign-detail-row>div { display:flex; align-items:center; gap:8px; }
.dot { width:7px; height:7px; border-radius:50%; background:#57cce9; }
.dot.violet { background:#909aff; }.dot.green { background:#5bddad; }
.campaign-capabilities { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:29px; }
.campaign-capabilities article { border-left:1px solid #31516b; padding:3px 10px 3px 16px; }
.campaign-capabilities span { color:#68c8ec; font-weight:800; font-size:10px; }
.campaign-capabilities b { display:block; font-size:13px; margin:8px 0; }
.campaign-capabilities p { color:#9ab1c5; font-size:11px; margin:0; line-height:1.6; }

/* Meeting minutes: large paper surface plus four-stage story. */
.meeting-section { padding:108px max(5vw,24px); background:#f2f7fb; }
.meeting-top { display:grid; grid-template-columns:1.06fr .8fr; align-items:end; gap:70px; }
.meeting-top h2 { max-width:770px; }
.meeting-top>p { max-width:470px; font-size:16px; line-height:1.7; }
.meeting-layout { display:grid; grid-template-columns:.76fr 1.24fr; align-items:center; gap:6vw; margin-top:33px; }
.meeting-steps { display:grid; gap:0; }
.meeting-steps article { display:flex; gap:18px; position:relative; padding:18px 0 21px; }
.meeting-steps article:not(:last-child):before { content:""; position:absolute; width:1px; left:19px; top:57px; bottom:-5px; background:linear-gradient(#d9e6f0,#bed6e9); }
.meeting-steps article>span { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:11px; color:#396cac; background:#e4effa; border:1px solid #ccddf0; font-size:11px; font-weight:800; }
.meeting-steps strong { font-size:14px; color:#263e57; }
.meeting-steps p { font-size:12px; line-height:1.65; margin:4px 0 0; }
.acta-demo { padding-bottom:10px; border:1px solid #dde7f0; border-radius:14px; box-shadow:0 26px 60px rgba(18,49,78,.1); background:#fff; overflow:hidden; transform:rotate(.3deg); }
.mock-window-bar.light { background:#fff; border-bottom:1px solid #e7eef4; color:#3b5167; }
.document-status { margin-left:auto; font-size:8px; color:#3867a0; font-weight:800; letter-spacing:.07em; }
.acta-demo-main { padding:28px 33px 22px; }
.acta-mini-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:8px; color:#7d91a5; font-weight:800; letter-spacing:.08em; }
.doc-pill { letter-spacing:0; font-size:9px; background:#e5f6ee; border-radius:14px; padding:6px 9px; color:#268463; }
.acta-demo h3 { font-size:24px; margin:16px 0 17px; color:#283e55; letter-spacing:-.04em; }
.doc-lines { padding:12px 0; border-top:1px solid #eaf0f5; }
.doc-lines b { font-size:11px; color:#3a5873; }
.doc-lines p { max-width:500px; font-size:10px; line-height:1.7; margin:6px 0 0; }
.task-mini { display:flex; align-items:center; gap:8px; padding:8px 0; }
.task-mini i { width:17px; height:17px; flex:0 0 17px; font-size:9px; font-style:normal; display:grid; place-items:center; border-radius:50%; background:#e0f6ec; color:#2b9167; }
.task-mini span { font-size:10px; font-weight:700; color:#33475d; }
.task-mini small { font-size:8px; color:#8494a4; margin-left:auto; }
.acta-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:14px 0 0; border-top:1px solid #e8eef4; font-size:9px; color:#8a9aa9; }
.acta-footer strong { font-size:9px; background:#e5effb; color:#3165a0; padding:6px 9px; border-radius:9px; }
.acta-note { display:flex; justify-content:center; align-items:center; gap:13px; padding:14px 10px; background:#edf5fc; color:#447394; font-size:9px; font-weight:800; }
.acta-note i { font-style:normal; color:#7eaccf; }
.acta-demo .visual-disclaimer { padding:5px 15px; margin:0; }
.meeting-note { margin-top:28px; border:1px solid #d9e7f1; padding:14px 19px; border-radius:11px; background:#eaf2fa; display:flex; align-items:center; gap:13px; }
.meeting-note p { margin:0; font-size:12px; line-height:1.7; }
.meeting-note strong { color:#2c5275; }
.privacy-glyph { font-size:25px; color:#408ac0; }

/* Projects: familiar task board, but clearly an illustration. */
.projects-section { background:#fff; grid-template-columns:.82fr 1.18fr; }
.project-board { border:1px solid #dce7f0; border-radius:15px; overflow:hidden; background:#f5f8fc; box-shadow:0 24px 62px rgba(15,45,77,.1); }
.project-board-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; background:#fff; border-bottom:1px solid #e4eaf1; padding:18px 20px; }
.project-board-top small,.project-board-top strong { display:block; }
.project-board-top small { font-size:9px; font-weight:800; letter-spacing:.08em; color:#639ac0; }
.project-board-top strong { font-size:14px; margin-top:4px; color:#273e56; }
.project-board-top>span { color:#6c8196; font-size:9px; background:#eef4fb; padding:7px 9px; border-radius:15px; }
.project-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:14px; }
.project-column { min-width:0; border:1px solid #e2eaf3; border-radius:9px; background:#f9fbfd; padding:10px; }
.project-column h4 { display:flex; align-items:center; gap:5px; margin:2px 1px 12px; color:#354a61; font-size:10px; }
.project-column h4 small { margin-left:auto; font-size:10px; color:#8a9baf; }
.board-dot { width:8px; height:8px; border-radius:50%; background:#c3d0de; }
.board-dot.blue { background:#579ecb; }.board-dot.green { background:#45bf91; }
.board-task { background:#fff; padding:12px 9px; border:1px solid #e2eaf2; border-radius:7px; margin-bottom:8px; min-height:95px; box-shadow:0 4px 8px rgba(17,52,80,.035); }
.board-task span { color:#618fb6; font-size:7px; letter-spacing:.07em; font-weight:800; }
.board-task strong,.board-task small { display:block; }
.board-task strong { font-size:10px; color:#30475c; line-height:1.5; margin:6px 0 9px; }
.board-task small { color:#8b9eaf; font-size:8px; }
.board-task.current { border-left:3px solid #5899c8; }
.board-task.done { border-left:3px solid #43bf90; }
.progress-bar { margin-top:11px; height:4px; border-radius:5px; background:#e8f1f8; overflow:hidden; }
.progress-bar i { display:block; width:63%; height:100%; background:#46a4d7; }
.project-board-foot { display:flex; align-items:center; justify-content:space-between; padding:13px 18px; background:#fff; border-top:1px solid #e0e9f2; font-size:9px; gap:14px; color:#8795a5; }
.project-board-foot strong { color:#4d7baa; font-size:9px; }
.project-board .visual-disclaimer { background:#fff; padding:0 16px 11px; margin:0; }

/* Urbie: restrained conversational showcase, not a fake live chat. */
.urbie-section { position:relative; overflow:hidden; background:linear-gradient(125deg,#121c3b,#233c85 72%,#1a2f70); color:#fff; padding:110px max(5vw,24px); display:grid; grid-template-columns:.9fr 1.1fr; gap:7vw; align-items:center; }
.urbie-aurora { position:absolute; width:600px; height:600px; right:-100px; top:-140px; border-radius:50%; background:radial-gradient(circle,rgba(73,149,228,.28),transparent 63%); pointer-events:none; }
.urbie-content,.urbie-showcase { position:relative; z-index:1; }
.urbie-section h2 em { color:#8ad8fb; }
.urbie-content>p { font-size:17px; color:#bfcee7; line-height:1.75; }
.urbie-points { display:grid; gap:11px; margin:28px 0 32px; }
.urbie-points>div { display:flex; gap:9px; align-items:center; color:#e0e9fa; font-size:12px; }
.urbie-points span { color:#7cd7fa; font-size:18px; }
.urbie-showcase { border:1px solid rgba(167,197,255,.36); border-radius:17px; background:#f9fbff; box-shadow:0 35px 85px rgba(0,0,0,.28); overflow:hidden; transform:rotate(-.6deg); }
.urbie-chat-header { height:76px; background:#fff; border-bottom:1px solid #e1e8f4; display:flex; gap:12px; align-items:center; padding:0 22px; color:#273e60; }
.urbie-monogram { position:relative; width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:13px; font-weight:800; font-size:22px; background:linear-gradient(135deg,#273f9a,#319bd8); color:#fff; }
.sparkle-one { position:absolute; top:-8px; right:-8px; background:#fff; color:#5369c5; font-size:14px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; border:1px solid #e4eafb; }
.urbie-chat-header strong,.urbie-chat-header small { display:block; }
.urbie-chat-header strong { font-size:14px; }.urbie-chat-header small { color:#8797a8; font-size:9px; }
.urbie-active { display:flex; gap:6px; align-items:center; margin-left:auto; font-size:9px; color:#278465; padding:6px 9px; background:#e8f7ef; border-radius:15px; }
.urbie-active i { width:6px; height:6px; background:#3ec594; border-radius:100%; }
.urbie-conversation { padding:31px 23px 29px; min-height:260px; }
.chat-query { color:#fff; background:#334dba; font-size:12px; line-height:1.6; max-width:77%; width:fit-content; border-radius:14px 14px 4px 14px; padding:12px 15px; margin-left:auto; box-shadow:0 9px 20px rgba(42,57,161,.13); }
.urbie-message { display:flex; align-items:flex-start; gap:10px; margin-top:22px; }
.assistant-small { width:29px; height:29px; flex:0 0 29px; display:grid; place-items:center; color:#fff; border-radius:10px; font-size:14px; font-weight:800; background:#304dad; }
.urbie-message>div { background:#fff; border:1px solid #e3e8f4; border-radius:4px 13px 13px 13px; padding:15px; flex:1; }
.urbie-message strong { color:#2b4a87; font-size:10px; }
.urbie-message p { font-size:11px; color:#546980; line-height:1.7; margin:5px 0 10px; }
.fake-inline-link { background:#eef3ff; color:#4258ad; padding:6px 9px; border-radius:7px; font-size:9px; font-weight:700; }
.urbie-input { display:flex; justify-content:space-between; align-items:center; margin:0 23px 13px; background:#fff; border:1px solid #dbe5f0; padding:13px 14px; border-radius:10px; color:#96a5b6; font-size:10px; }
.urbie-input i { width:25px; height:25px; border-radius:7px; background:#e5eaff; color:#3d61b9; font-size:17px; font-style:normal; text-align:center; }
.urbie-showcase .visual-disclaimer { color:#8b98ac; padding:0 20px 13px; margin:0; background:#f9fbff; }

/* One narrative, five modules. */
.connected-story { padding:98px max(5vw,24px) 96px; text-align:center; background:#f6f9fc; }
.connected-story h2 { max-width:900px; margin:16px auto 17px; }
.connected-story>p { max-width:735px; margin:0 auto; line-height:1.75; font-size:16px; }
.story-flow { display:flex; align-items:center; justify-content:center; gap:9px; margin:42px auto 28px; }
.story-flow>a { flex:1; min-width:0; max-width:220px; min-height:125px; padding:21px 11px; border:1px solid #d9e6f1; border-radius:12px; background:#fff; transition:transform .2s,box-shadow .2s; text-align:left; }
.story-flow>a:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(20,60,91,.1); }
.story-flow>a b,.story-flow>a strong,.story-flow>a small { display:block; }
.story-flow>a b { font-size:10px; color:#4596c0; }
.story-flow>a strong { font-size:15px; color:#263e56; margin:10px 0 4px; }
.story-flow>a small { font-size:10px; color:#8393a5; }
.story-flow>span { flex:0 0 15px; color:#77a9c7; font-size:20px; }
.story-bottom { padding:18px 0; border-top:1px solid #dfebf5; display:flex; gap:25px; justify-content:center; flex-wrap:wrap; align-items:center; }
.story-bottom span { font-size:10px; font-weight:800; letter-spacing:.07em; color:#4b91bb; }
.story-bottom strong { font-size:13px; color:#304b66; }

@media(max-width:1220px) {
  .site-header { padding:0 24px; }
  .menu-toggle { display:block; color:#fff; padding:8px 12px; border:1px solid rgba(255,255,255,.24); border-radius:8px; }
  .nav { display:none; position:absolute; top:96px; left:0; right:0; flex-direction:column; align-items:stretch; background:#293f98; padding:18px 24px 23px; border-bottom:1px solid rgba(255,255,255,.18); box-shadow:0 24px 40px rgba(9,25,54,.22); gap:3px; font-size:14px; }
  .nav.open { display:flex; }
  .nav a { padding:12px 16px; }
  .nav-cta { margin-left:0; text-align:center; justify-content:center; }
  .solution-section { gap:4vw; }
  .suite-links { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:1000px) {
  .solution-section,.meeting-layout,.urbie-section { grid-template-columns:1fr; }
  .solution-section { gap:40px; }
  .crm-visual,.acta-demo,.urbie-showcase { max-width:780px; width:100%; justify-self:center; transform:none; }
  .campaigns-head,.meeting-top,.suite-intro-top { grid-template-columns:1fr; gap:15px; }
  .campaigns-head>p,.meeting-top>p,.suite-intro-top>p { max-width:720px; }
  .meeting-layout { gap:30px; }
  .campaign-flow { gap:3px; }
  .campaign-step { padding:15px 9px; }
  .campaign-line { flex-basis:18px; }
}
@media(max-width:720px) {
  .nav { top:82px; }
  .suite-intro,.solution-section,.meeting-section,.urbie-section,.connected-story { padding:72px 24px; }
  .suite-links { grid-template-columns:repeat(2,1fr); gap:10px; }
  .suite-link { min-height:138px; padding:14px; }
  .campaigns-showcase { padding:19px; }
  .campaign-flow { flex-direction:column; gap:4px; align-items:stretch; padding:22px 0; }
  .campaign-step { min-height:0; display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto auto; column-gap:10px; align-items:center; padding:12px 14px; }
  .campaign-step-icon { grid-row:span 3; }
  .campaign-step small { margin:0; }.campaign-step strong { margin:1px 0; }
  .campaign-line { flex:0 0 18px; height:18px; transform:rotate(90deg); }
  .campaign-capabilities { grid-template-columns:repeat(2,1fr); }
  .meeting-top>p,.campaigns-head>p,.suite-intro-top>p { font-size:14px; }
  .project-columns { gap:6px; padding:9px; }
  .project-column { padding:6px; }.board-task { padding:9px 7px; }
  .project-column h4 { flex-wrap:wrap; line-height:1.35; }
  .urbie-content>p { font-size:15px; }
  .story-flow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .story-flow>a { max-width:none; min-height:100px; }
  .story-flow>span { display:none; }
}
@media(max-width:480px) {
  .solution-section,.suite-intro,.meeting-section,.urbie-section,.connected-story { padding-left:20px; padding-right:20px; }
  .suite-links { gap:8px; }.suite-link small { line-height:1.4; }
  .crm-pane { padding:13px; }.crm-journey { padding:12px 5px; }
  .crm-journey>div { min-width:0; }.crm-journey>div strong { font-size:8px; }.crm-journey>div small { font-size:7px; }
  .crm-journey>i { min-width:7px; }
  .crm-bottom-grid { grid-template-columns:1fr; }
  .campaign-capabilities { gap:12px; }
  .meeting-steps article { gap:12px; }
  .acta-demo-main { padding:17px; }.task-mini { flex-wrap:wrap; }.task-mini small { margin-left:25px; }
  .project-columns { grid-template-columns:1fr; gap:9px; }.project-column { padding:10px; }
  .project-board-foot { flex-wrap:wrap; }
  .urbie-chat-header { padding:0 12px; }.urbie-conversation { padding:24px 12px; }
  .chat-query { max-width:90%; }.urbie-input { margin:0 12px 12px; }
  .urbie-active { font-size:8px; }
  .story-flow { grid-template-columns:1fr 1fr; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .suite-link,.story-flow>a,.button,.feature { transition:none; }
}

/* The original refinements stylesheet overrides the hero grid at all widths.
   Restore a single-column product showcase on tablets and phones. */
@media (max-width:1000px) {
  .hero { grid-template-columns:minmax(0,1fr); gap:32px; }
  .hero-copy,.product-stage { min-width:0; width:100%; }
  .real-product-window { transform:none; }
}
@media (max-width:720px) {
  .hero { padding:55px 24px 72px; }
  .product-stage { margin:0; }
  .hero h1 { font-size:clamp(37px,10vw,48px); }
  .hero-copy>p { font-size:16px; }
  .hero .hero-actions { margin:29px 0; }
  .hero .trust-row { margin-top:29px; gap:11px; }
  .product-shot { height:225px; }
}


/* Vistas reales del producto: reemplazan los mockups HTML sin cambiar el layout original. */
.real-screenshot {
  background: #ffffff;
  border: 1px solid #d8e5ef;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 65px rgba(14, 42, 79, .13);
}
.real-screenshot .mock-window-bar { min-height: 42px; }
.real-screenshot .mock-window-bar strong { letter-spacing: .01em; }
.real-screenshot .window-label { white-space: nowrap; }
.real-screen-frame { display: block; margin: 0; padding: 0; overflow: hidden; background: #f4f7fc; }
.real-screen-frame img { display: block; width: 100%; height: auto; max-width: none; }
.real-screen-caption {
  display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: center;
  padding: 12px 16px; background: #fff; border-top: 1px solid #e2eaf4;
  color: #71869a; font-size: 11px; line-height: 1.45;
}
.real-screen-caption strong { color: #2a4c6b; font-size: 11px; }
.real-screen-caption .real-dot { width: 7px; height: 7px; border-radius: 50%; background: #39b88e; box-shadow: 0 0 0 3px #e7f8f0; }
.crm-section .crm-visual { transform: rotate(.3deg); }
.projects-section .project-screenshot { background: #fff; }
.meeting-section .acta-demo { transform: rotate(.2deg); padding-bottom: 0; }
.urbie-section .urbie-showcase { transform: rotate(-.3deg); }
.urbie-section .urbie-showcase .mock-window-bar { background: #fff; color: #304c77; }
.urbie-section .urbie-showcase .window-label { background: #eaf2fd; color: #36669b; }
.urbie-section .urbie-showcase .real-screen-caption { background: #fff; }
/* The actual capture is intentionally shown at its natural aspect ratio, not stretched. */
@media (max-width: 980px) {
  .crm-section .crm-visual, .meeting-section .acta-demo, .urbie-section .urbie-showcase { transform: none; }
  .real-screenshot { width: 100%; max-width: 100%; }
}
@media (max-width: 580px) {
  .real-screenshot .mock-window-bar { padding: 0 10px; gap: 8px; }
  .real-screenshot .mock-window-bar strong { font-size: 9px; }
  .real-screenshot .window-label { font-size: 7px; padding: 4px 6px; }
  .real-screen-caption { padding: 10px 12px; }
}

.real-screen-frame .screen-expand { display:block; position:relative; color:inherit; }
.real-screen-frame .screen-expand:hover img { filter: saturate(1.04); }
.real-screen-frame .screen-expand:focus-visible { outline:3px solid #33a3d1; outline-offset:-3px; }


/* 2026-11-14: Captura real del diseñador de campañas, sin maqueta. */
.campaigns-showcase.campaign-real-screenshot {
  background: #fff;
  color: #263f59;
  border: 1px solid rgba(146, 185, 218, .55);
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .27);
}
.campaign-real-screenshot .mock-window-bar {
  min-height: 45px;
  background: #102c48;
  color: #e4f2fa;
}
.campaign-real-screenshot .real-screen-frame {
  margin: 0;
  background: #f6f9fc;
}
.campaign-real-screenshot .real-screen-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.campaign-real-screenshot .real-screen-caption {
  background: #fff;
}

/* El acta se muestra en un panel del mismo ancho visual que el recorrido
   de la izquierda, siempre reduciendo la captura de 717 px, nunca ampliándola. */
.meeting-section .meeting-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.meeting-section .meeting-steps { min-width: 0; }
.meeting-section .acta-demo {
  width: 100%;
  max-width: 580px;
  justify-self: end;
  transform: none;
}
.meeting-section .acta-screen img {
  display: block;
  width: 100%;
  max-width: 717px;
  height: auto;
  object-fit: contain;
}

/* Contacto comercial visible, accesible y con acciones nativas mailto/tel. */
.cta.contact-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) auto;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(42px, 6vw, 78px) max(5vw, 24px);
  background: linear-gradient(125deg, #071f37, #153b66 65%, #283f9a);
  color: #fff;
}
.contact-cta .section-kicker { color: #72ccee; }
.contact-cta .contact-intro { min-width: 0; }
.contact-cta h2 {
  color: #fff;
  font-size: clamp(28px, 3vw, 43px);
  line-height: 1.16;
  margin: 12px 0 14px;
  max-width: 590px;
}
.contact-cta .contact-intro p {
  margin: 0;
  max-width: 590px;
  color: #cedeee;
  font-size: 14px;
  line-height: 1.75;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: clamp(18px, 2.5vw, 40px);
  border-left: 1px solid rgba(221, 241, 255, .23);
  font-style: normal;
  min-width: 0;
}
.contact-detail { display: flex; align-items: center; gap: 12px; min-width: 0; }
.contact-detail-icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #a4deff;
  font-size: 18px;
}
.contact-detail div { min-width: 0; }
.contact-detail small { display: block; color: #a9c2da; font-size: 11px; margin-bottom: 4px; }
.contact-detail a, .contact-detail div>span:not(.contact-detail-icon) {
  display: inline-block;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-detail a:hover { color: #7fe1fa; text-decoration: underline; }
.contact-cta .contact-demo-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;
  padding: 17px 21px;
  min-height: 54px;
  text-align: center;
  background: #fff;
  color: #19375f;
  border: 1px solid #fff;
  box-shadow: 0 14px 32px rgba(3, 15, 41, .18);
}
.contact-cta .contact-demo-button:hover { background: #eff9ff; color: #11284b; }
.footer-contact { display: flex; flex-direction: column; gap: 5px; margin-left: auto; font-size: 11px; }
.footer-contact a { color: #365b82; text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-contact>span { margin: 0 !important; width: auto !important; }
.site-footer>span:last-child { margin-left: 0; }
@media (max-width: 1140px) {
  .cta.contact-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .contact-demo-button { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 1000px) {
  .meeting-section .meeting-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .meeting-section .acta-demo { max-width: min(580px, 100%); justify-self: center; }
}
@media (max-width: 720px) {
  .cta.contact-cta { grid-template-columns: 1fr; gap: 28px; padding: 56px 24px; }
  .contact-details { border-left: 0; border-top: 1px solid rgba(255,255,255,.2); padding: 25px 0 0; }
  .contact-cta .contact-demo-button { grid-column: auto; justify-self: stretch; white-space: normal; }
  .site-footer .footer-contact { width: 100%; margin: 0; }
  .site-footer>span:last-child { width: auto; }
}