/* CONNECT_CUSTOMER_OPERATIONS_LANDING_V1 — 2026-09-10
   Public-site composition only. Workspace and enquiry contracts stay shared. */
.connect-site {
  --bg: #f6f8fa; --bg-2: #edf1f4; --surface: #fff; --surface-2: #f3f6f8;
  --ink: #172d3b; --muted: #536674; --line: #dce3e8; --line-strong: #bcc8cf;
  --accent: #88532e; --accent-2: #d88a4b; --accent-soft: #f6eade;
  --lp-navy: #172d3b; --lp-on-navy: #f8fafb; --lp-navy-muted: #c2cfd7;
  --lp-success: #28634b; --lp-success-soft: #eaf3ed;
  --lp-xs: .75rem; --lp-sm: .875rem; --lp-body: 1rem; --lp-lead: 1.125rem;
  --lp-h1: clamp(2.75rem, 4.65vw, 4.4rem); --lp-h2: clamp(2rem, 3.1vw, 3rem);
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --lp-radius: 1.25rem; --lp-round: 999px; --lp-fast: 180ms;
  --lp-width: 1240px; --lp-gutter: clamp(1.25rem, 4vw, 3rem); --header: 84px;
  background: var(--bg); color: var(--ink); font-family: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, sans-serif;
  font-size: var(--lp-body); line-height: 1.65;
}
html[data-theme="dark"] .connect-site {
  --bg: #101820; --bg-2: #192631; --surface: #1c2b36; --surface-2: #22333f;
  --ink: #f1f5f8; --muted: #b5c4ce; --line: #354653; --line-strong: #647783;
  --accent: #edb181; --accent-soft: #3c3028; --lp-success: #a4d2b6; --lp-success-soft: #233c32;
}
.connect-site::before { display: none; }
.connect-site :is(h1,h2,h3,h4,p,figure) { margin: 0; }
.connect-site :is(h1,h2,h3,h4) { font-family: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, sans-serif; color: inherit; font-style: normal; }
.connect-site h1 { font-size: var(--lp-h1); line-height: 1.075; font-weight: 650; letter-spacing: -.058em; max-width: 13ch; }
.connect-site h2 { font-size: var(--lp-h2); line-height: 1.13; font-weight: 650; letter-spacing: -.045em; }
.connect-site h3 { font-size: 1.25rem; font-weight: 650; line-height: 1.3; letter-spacing: -.02em; }
.connect-site button { cursor: pointer; }
.connect-site [hidden] { display: none !important; }
.connect-site :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 5px; }
.lp-wrap { width: min(var(--lp-width), calc(100% - var(--lp-gutter) * 2)); margin-inline: auto; }
.lp-section { padding-block: var(--s-9); scroll-margin-top: var(--s-2); }
.lp-icon { display: inline-block; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.lp-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp-header { position: sticky; top: 0; z-index: 50; height: var(--header); background: var(--bg); border-bottom: 1px solid var(--line); }
.lp-header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.lp-brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; text-decoration: none; flex: 0 0 auto; }
.lp-brand img { width: 40px; height: 40px; }
.lp-brand span { display: grid; line-height: 1.1; }
.lp-brand strong { font-size: 1.375rem; font-weight: 700; letter-spacing: -.04em; }
.lp-brand small { font-size: var(--lp-xs); color: var(--muted); margin-top: var(--s-1); }
.lp-nav,.lp-header-actions { display: flex; align-items: center; gap: var(--s-5); }
.lp-nav a,.lp-signin { font-size: var(--lp-sm); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.lp-nav a:hover,.lp-signin:hover { color: var(--accent); }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 52px; padding: var(--s-3) var(--s-5); border: 1px solid transparent; border-radius: .65rem; font-size: var(--lp-sm); font-weight: 650; line-height: 1.4; text-decoration: none; transition: transform var(--lp-fast), background var(--lp-fast); }
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn-primary { background: var(--lp-navy); color: var(--lp-on-navy); box-shadow: 0 4px 0 rgba(23,45,59,.08); }
.lp-btn-primary:hover { background: #2b4353; }
html[data-theme="dark"] .lp-btn-primary { background: var(--accent-2); color: #182630; }
.lp-btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.lp-theme,.lp-menu-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); }
.lp-menu-toggle { display: none; }
.lp-mobile-menu { position: absolute; inset: var(--header) 0 auto; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s-5); box-shadow: var(--shadow-soft); }
.lp-mobile-menu a { display: flex; align-items: center; min-height: 48px; text-decoration: none; }
.lp-mobile-menu .lp-btn { margin-block: var(--s-3); }
.lp-hero { padding-block: var(--s-8) var(--s-7); }
.lp-hero-grid { display: grid; grid-template-columns: 1fr 1.03fr; align-items: center; gap: var(--s-7); }
.lp-intro { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5) !important; font-size: var(--lp-sm); font-weight: 600; color: var(--accent); }
.lp-intro::before { content: ''; width: 24px; height: 2px; background: var(--accent-2); }
.lp-hero-lede { color: var(--muted); font-size: var(--lp-lead); max-width: 47ch; margin-top: var(--s-5) !important; }
.lp-hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.lp-reassurance { margin-top: var(--s-4) !important; color: var(--muted); font-size: var(--lp-xs); }
.lp-hero-signoff { margin-top: var(--s-6) !important; display: flex; gap: var(--s-2); align-items: center; font-size: var(--lp-sm); }
.lp-hero-signoff .lp-icon { color: var(--accent); }
.lp-demo { position: relative; padding: var(--s-5); border: 1px solid var(--line); border-radius: 1.75rem; background: var(--bg-2); }
.lp-demo-caption { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--lp-xs); color: var(--muted); margin-bottom: var(--s-4); }
.lp-demo-caption b { color: var(--ink); font-weight: 650; }
.lp-workspace { border-radius: var(--lp-radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 18px 35px rgba(23,45,59,.09); }
.lp-record { background: var(--lp-navy); color: var(--lp-on-navy); padding: var(--s-5); display: flex; gap: var(--s-3); align-items: center; }
.lp-avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #354d5c; color: #f3d1ac; font-size: var(--lp-sm); font-weight: 650; }
.lp-record h2 { font-size: var(--lp-lead); letter-spacing: -.015em; }
.lp-record p { font-size: var(--lp-xs); color: var(--lp-navy-muted); margin-top: var(--s-1); }
.lp-record-tag { margin-left: auto; border: 1px solid #6b7e89; padding: var(--s-1) var(--s-2); border-radius: var(--lp-round); font-size: var(--lp-xs); white-space: nowrap; }
.lp-demo-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-1); padding: var(--s-3); border-bottom: 1px solid var(--line); }
.lp-demo-tabs button { display: flex; justify-content: center; align-items: center; gap: var(--s-2); min-height: 46px; border: 0; border-radius: .5rem; background: transparent; color: var(--muted); font-size: var(--lp-sm); font-weight: 600; }
.lp-demo-tabs button[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); }
.lp-demo-tabs button:hover { background: var(--surface-2); color: var(--ink); }
.lp-demo-tabs button[aria-selected="true"]:hover { background: var(--accent-soft); color: var(--accent); }
.connect-site [role="tabpanel"]:not([hidden]) { animation: lp-panel-enter 220ms ease-out; }
@keyframes lp-panel-enter { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.lp-demo-panel { padding: var(--s-5); min-height: 240px; }
.lp-message-meta { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--muted); font-size: var(--lp-xs); margin-bottom: var(--s-3) !important; }
.lp-message { font-size: var(--lp-body); line-height: 1.55; padding: var(--s-4); border-radius: .25rem .9rem .9rem; background: var(--surface-2); }
.lp-demo-answer { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.lp-demo-answer .lp-icon { color: var(--accent); margin-top: var(--s-1); }
.lp-demo-answer strong { font-size: var(--lp-sm); }
.lp-demo-answer p { color: var(--muted); font-size: var(--lp-sm); margin-top: var(--s-1); }
.lp-record-footer { display: flex; gap: var(--s-2); align-items: center; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--lp-xs); }
.lp-record-footer .lp-icon { width: 1rem; height: 1rem; color: var(--accent); }
.lp-next-action { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); margin: var(--s-4) var(--s-3) 0; border: 1px solid var(--line); border-radius: .85rem; background: var(--surface); }
.lp-next-action>span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: .65rem; color: var(--accent); background: var(--accent-soft); }
.lp-next-action strong { font-size: var(--lp-sm); }
.lp-next-action p { color: var(--muted); font-size: var(--lp-xs); }
.lp-connection-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-top: var(--s-7); margin-top: var(--s-7); border-top: 1px solid var(--line); }
.lp-connection-strip p { font-size: var(--lp-sm); color: var(--muted); max-width: 29ch; }
.lp-connection-items { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-5); }
.lp-connection-items span { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--lp-sm); }
.lp-connection-items .lp-plus { font-size: var(--lp-lead); font-weight: 400; color: var(--line-strong); }
.lp-white { background: var(--surface); }
.lp-section-head { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--s-8); margin-bottom: var(--s-7); }
.lp-section-head>p,.lp-section-copy>p { color: var(--muted); max-width: 55ch; }
.lp-label { display: flex; align-items: center; gap: var(--s-2); color: var(--accent); font-size: var(--lp-sm); font-weight: 650; margin-bottom: var(--s-4) !important; }
.lp-pain-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-7); }
.lp-pain-grid article { padding-top: var(--s-5); border-top: 2px solid var(--line); }
.lp-pain-grid .lp-icon { margin-bottom: var(--s-4); color: var(--muted); }
.lp-pain-grid p { color: var(--muted); font-size: var(--lp-body); margin-top: var(--s-3); }
.lp-pain-grid .lp-resolution { color: var(--accent); font-size: var(--lp-sm); font-weight: 600; margin-top: var(--s-5); }
.lp-journey { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-5); }
.lp-journey article { position: relative; }
.lp-step-number { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); margin-bottom: var(--s-5); color: var(--accent); font-size: var(--lp-sm); font-weight: 650; }
.lp-journey article:not(:last-child)::after { content: ''; position: absolute; height: 1px; background: var(--line-strong); top: 22px; left: 60px; right: 0; }
.lp-journey h3 { font-size: 1.5rem; }
.lp-journey p { color: var(--muted); margin-top: var(--s-3); font-size: var(--lp-sm); }
.lp-journey ul { padding: 0; margin: var(--s-5) 0 0; list-style: none; }
.lp-journey li { display: flex; gap: var(--s-2); font-size: var(--lp-sm); padding-block: var(--s-2); }
.lp-journey li::before { content: '✓'; color: var(--accent); }
.lp-example { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-5) var(--s-6); border-radius: var(--lp-radius); background: var(--surface); border: 1px solid var(--line); margin-top: var(--s-7); }
.lp-example>span { color: var(--accent); }
.lp-example p { color: var(--muted); font-size: var(--lp-sm); }
.lp-example b { color: var(--ink); }
.lp-channels { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-5); }
.lp-channel { border: 1px solid var(--line); border-radius: var(--lp-radius); padding: var(--s-6); background: var(--bg); }
.lp-channel-icon { display: inline-flex; padding: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; margin-bottom: var(--s-5); color: var(--accent); }
.lp-channel h3 { font-size: 1.5rem; }
.lp-channel p { color: var(--muted); font-size: var(--lp-sm); margin-block: var(--s-3) var(--s-5); }
.lp-channel span:last-child { font-size: var(--lp-xs); font-weight: 650; }
.lp-section-note { margin-top: var(--s-5) !important; font-size: var(--lp-sm); color: var(--muted); }
.lp-control { background: var(--lp-navy); color: var(--lp-on-navy); }
.lp-control .lp-label { color: #f0b47f; }
.lp-control .lp-section-head>p { color: var(--lp-navy-muted); }
.lp-control-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--s-8); align-items: start; }
.lp-mode-tabs { display: grid; gap: var(--s-3); }
.lp-mode-tab { display: grid; grid-template-columns: 36px 1fr 20px; gap: var(--s-4); align-items: center; width: 100%; min-height: 98px; text-align: left; background: transparent; color: #fff; border: 1px solid #506574; border-radius: .8rem; padding: var(--s-5); }
.lp-mode-tab[aria-selected="true"] { background: #293f4e; border-color: #efb780; }
.lp-mode-tab:hover { border-color: #efb780; }
.lp-mode-tab>span:first-child { color: #edb181; }
.lp-mode-tab strong { font-size: var(--lp-lead); font-weight: 650; }
.lp-mode-tab small { display: block; color: var(--lp-navy-muted); font-size: var(--lp-sm); margin-top: var(--s-1); }
.lp-mode-tab>span:last-child { color: #efb780; }
.lp-policy { background: var(--surface); color: var(--ink); padding: var(--s-6); border-radius: var(--lp-radius); }
.lp-policy-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: var(--lp-xs); color: var(--muted); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
/*  --accent is the display copper; on this panel it measured under 4.5:1.
    --accent-text is the same family at reading weight. */
.lp-policy-top span { color: var(--accent-text); }
.lp-policy-panel { padding-block: var(--s-5); min-height: 175px; }
.lp-policy-panel h3 { font-size: 1.4rem; }
.lp-policy-panel p { margin-top: var(--s-3); font-size: var(--lp-sm); color: var(--muted); }
.lp-policy-result { display: flex; align-items: center; gap: var(--s-2); font-size: var(--lp-sm); font-weight: 650; color: var(--accent); margin-top: var(--s-4); }
.lp-needs-you { padding: var(--s-4); border-radius: .6rem; background: var(--accent-soft); font-size: var(--lp-sm); }
/* --accent-text, not --accent: the display copper on its own soft tint is under 4.5:1 (axe, 320/390/1440). */
.lp-needs-you strong { display: flex; align-items: center; gap: var(--s-2); color: var(--accent-text, var(--accent)); }
.lp-needs-you p { margin-top: var(--s-2); color: var(--muted); }
.lp-control-foot { color: var(--lp-navy-muted); font-size: var(--lp-sm); margin-top: var(--s-5) !important; }
.lp-knowledge { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.lp-section-copy h2 { margin-bottom: var(--s-5); }
.lp-knowledge-map { background: var(--surface); border: 1px solid var(--line); border-radius: var(--lp-radius); padding: var(--s-6); }
.lp-knowledge-map>p { font-size: var(--lp-sm); color: var(--muted); margin-bottom: var(--s-5); }
.lp-knowledge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.lp-knowledge-grid span { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: .5rem; font-size: var(--lp-sm); }
.lp-knowledge-result { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-5); margin-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--lp-sm); }
.lp-knowledge-result img { width: 36px; height: 36px; }
.lp-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.lp-fit-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.lp-fit-list li { display: flex; align-items: start; gap: var(--s-3); padding-block: var(--s-4); border-bottom: 1px solid var(--line); font-size: var(--lp-body); }
.lp-fit-list .lp-icon { color: var(--accent); margin-top: var(--s-1); }
.lp-why-now { padding: var(--s-7); border-radius: var(--lp-radius); background: var(--accent-soft); }
.lp-why-now h3 { font-size: 1.75rem; }
.lp-why-now p { color: var(--muted); margin-top: var(--s-4); }
.lp-why-now .lp-btn { margin-top: var(--s-5); }
.lp-proof-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: var(--s-7); align-items: center; }
.lp-proof-layout h2 { margin-bottom: var(--s-5); }
.lp-proof-layout p { color: var(--muted); font-size: var(--lp-sm); }
.lp-proof-tabs { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-5); }
.lp-proof-tabs button { text-align: left; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); min-height: 52px; background: transparent; border: 1px solid var(--line); border-radius: .6rem; font-size: var(--lp-sm); color: var(--muted); }
.lp-proof-tabs button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.lp-proof-screen { padding: var(--s-3); border-radius: var(--lp-radius); background: var(--surface); border: 1px solid var(--line); }
.lp-proof-screen img { width: 100%; height: auto; border-radius: .6rem; }
.lp-proof-screen figcaption { display: block; margin: var(--s-3); font-size: var(--lp-xs); color: var(--muted); }
.lp-start-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s-7); }
.lp-start-steps li { display: flex; gap: var(--s-4); }
.lp-start-steps .lp-step-number { flex: 0 0 auto; }
.lp-start-steps p { margin-top: var(--s-3); font-size: var(--lp-sm); color: var(--muted); }
.lp-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s-8); }
.lp-faq-title p { color: var(--muted); margin-top: var(--s-5); }
.lp-faq-title a { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-4); color: var(--accent-text, var(--accent)); text-underline-offset: 4px; }
.lp-faq-list details { border-bottom: 1px solid var(--line); }
.lp-faq-list details:first-child { border-top: 1px solid var(--line); }
.lp-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding-block: var(--s-5); list-style: none; cursor: pointer; font-size: var(--lp-body); font-weight: 600; }
.lp-faq-list summary::-webkit-details-marker { display: none; }
.lp-faq-list summary::after { content: '+'; color: var(--accent); font-size: 1.5rem; font-weight: 400; }
.lp-faq-list details[open] summary::after { content: '−'; }
.lp-faq-list p { padding-bottom: var(--s-5); font-size: var(--lp-sm); color: var(--muted); }
.lp-closing { margin-bottom: var(--s-7); padding: var(--s-8); border: 1px solid var(--line); border-radius: 1.75rem; background: var(--surface); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-8); align-items: center; }
.lp-closing h2 { max-width: 18ch; }
.lp-closing p { color: var(--muted); margin-top: var(--s-5); }
.lp-closing-actions { display: grid; justify-items: start; gap: var(--s-4); }
.lp-closing-actions p { margin: 0; font-size: var(--lp-sm); }
.lp-footer { border-top: 1px solid var(--line); padding-block: var(--s-7) 7rem; }
.lp-footer-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-6); }
.lp-footer-copy { color: var(--muted); font-size: var(--lp-sm); margin-top: var(--s-4) !important; max-width: 28ch; }
.lp-footer-contact { display: grid; justify-content: start; font-size: var(--lp-sm); }
.lp-footer a:not(.lp-brand) { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; text-decoration: none; }
.lp-footer a:hover { text-decoration: underline; }
.lp-footer nav { display: flex; flex-wrap: wrap; align-content: start; justify-content: end; gap: var(--s-2) var(--s-5); font-size: var(--lp-sm); }
.lp-footer-bottom { display: flex; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--lp-xs); color: var(--muted); }

.lp-footer-brand-block { min-width: 0; }
.lp-footer-parent {
  width: fit-content; max-width: 100%; gap: var(--s-3); justify-content: space-between;
  margin-top: var(--s-4); padding: .65rem .8rem; border: 1px solid rgba(247,240,231,.16);
  border-radius: .8rem; background: rgba(247,240,231,.055); color: #F7F0E7;
}
.lp-footer-parent:hover { border-color: rgba(247,240,231,.3); background: rgba(247,240,231,.09); text-decoration: none !important; }
.lp-footer-parent > span:first-child { display: grid; gap: .08rem; }
.lp-footer-parent small { color: #B7B0A7; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.lp-footer-parent strong { color: #F7F0E7; font-size: var(--lp-xs); }
.lp-footer-socials { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .8rem; }
.lp-footer .lp-social-link {
  min-height: 40px; padding: .45rem .7rem; gap: .45rem; border: 1px solid rgba(247,240,231,.16);
  border-radius: 999px; background: rgba(247,240,231,.035); color: #F7F0E7; font-size: var(--lp-xs);
}
.lp-footer .lp-social-link:hover { border-color: rgba(247,240,231,.3); background: rgba(247,240,231,.09); text-decoration: none; }
.lp-social-link svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.lp-footer-family { display: grid; gap: .25rem; align-content: start; min-width: 0; }
.lp-footer-family > b {
  margin-bottom: var(--s-2); font-size: var(--lp-xs); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: #B7B0A7;
}
.lp-footer .lp-footer-family a {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  min-height: 52px; padding: .45rem .65rem; border: 1px solid transparent; border-radius: .7rem;
  color: #F7F0E7;
}
.lp-footer-family a:hover { border-color: rgba(247,240,231,.16); background: rgba(247,240,231,.055); text-decoration: none; }
.lp-footer-family a > span:first-child { display: grid; gap: .1rem; min-width: 0; }
.lp-footer-family strong { color: #F7F0E7; font-size: var(--lp-xs); }
.lp-footer-family small { color: #B7B0A7; font-size: .72rem; line-height: 1.35; }
/* Cira retains its native dialog and request flow; align its surfaces and touch targets. */
.connect-site .cira-launcher { right: var(--s-5); bottom: max(var(--s-5),env(safe-area-inset-bottom)); background: var(--lp-navy); box-shadow: 0 8px 25px rgba(0,0,0,.18); }
.connect-site .cira-launcher-copy small { font-size: var(--lp-xs); text-transform: none; letter-spacing: 0; color: #c2cfd7; }
.connect-site .cira-teaser { right: var(--s-5); bottom: 100px; background: var(--surface); color: var(--ink); }
.connect-site :is(.cira-dialog,.cira-header) { background: var(--surface); color: var(--ink); }
.connect-site .cira-dialog { border-color: var(--line); }
.connect-site :is(.cira-identity h2,.cira-step h3,.cira-success h3) { color: var(--ink); }
.connect-site .cira-identity h2 { font-size: var(--lp-lead); }
.connect-site .cira-step-label { margin: var(--s-2) var(--s-5) 0; }
.connect-site :is(.cira-help,.cira-identity p,.cira-identity p span,.cira-step-label,.cira-details summary span,.cira-privacy-note,.cira-consent,.cira-success>p:not(.cira-kicker),.cira-success-summary,.cira-teaser-id span) { font-size: var(--lp-sm); color: var(--muted); letter-spacing: 0; text-transform: none; }
.connect-site :is(.cira-kicker,.cira-field>span,.cira-fieldset legend,.cira-channel-fieldset legend,.cira-submit-status) { font-size: var(--lp-sm); color: var(--muted); }
.connect-site .cira-kicker { text-transform: none; letter-spacing: 0; margin-bottom: var(--s-3); }
.connect-site .cira-step h3 { font-size: 1.5rem; }
.connect-site :is(.cira-field input,.cira-field textarea,.cira-field select) { font-size: var(--lp-body); background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.connect-site :is(.cira-choice-grid button,.cira-details,.cira-review,.cira-back,.cira-close) { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.connect-site .cira-choice-grid button.is-selected { background: var(--accent-soft); border-color: var(--accent); }
.connect-site :is(.cira-review dt,.cira-review dd) { color: var(--ink); }
.connect-site :is(.cira-primary,.cira-back,.cira-close,.cira-teaser-dismiss,.cira-teaser-action) { min-width: 44px; min-height: 44px; }
.connect-site .cira-primary { background: var(--lp-navy); color: white; border-color: var(--lp-navy); }
.connect-site .cira-teaser-dismiss { top: var(--s-1); right: var(--s-1); }
.connect-site .cira-channel-fieldset label,.connect-site .cira-consent { min-height: 44px; align-items: center; font-size: var(--lp-sm); }
.connect-site .cira-consent input,.connect-site .cira-channel-fieldset input { width: 20px; height: 20px; flex: 0 0 auto; }
.connect-site .cira-submit-status { color: #aa392d; }
.connect-site #cira-form[aria-busy="true"] .cira-submit-status { color: var(--muted); }
.connect-site #cira-submit-status:not(:empty) { padding: var(--s-4) var(--s-5) 0; }
.connect-site #cira-submit-status:empty { min-height: 0; margin: 0; }
html[data-theme="dark"] .connect-site .cira-submit-status { color: #ffb3a9; }
.connect-site .cira-details summary { min-height: 44px; }
/* CIRA_SHORT_VIEWPORT_DENSITY_V1: desktop zoom / short laptop viewports must not
   turn the first decision into a clipped mini-scroll while seven choices fit. */
@media (min-width: 601px) and (max-height: 650px) {
  .connect-site .cira-header { padding: 14px 20px 12px; }
  .connect-site .cira-progress { padding-top: 10px; }
  .connect-site .cira-step-label { margin-top: 4px; }
  .connect-site :is(.cira-step,.cira-success) { padding-top: 12px; padding-bottom: 14px; }
  .connect-site [data-cira-step="1"] .cira-kicker { margin-bottom: 4px; }
  .connect-site [data-cira-step="1"] .cira-help { margin: 6px 0 10px; }
  .connect-site [data-cira-step="1"] .cira-choice-grid { margin-top: 10px; gap: 7px; }
  .connect-site [data-cira-step="1"] .cira-choice-grid button { min-height: 54px; }
}
@media (min-width: 1101px) { .lp-mobile-menu { display: none; } }
@media (max-width: 1100px) {
  .lp-nav { gap: var(--s-4); } .lp-nav,.lp-header-actions>.lp-btn,.lp-header-actions>.lp-signin { display: none; }
  .lp-menu-toggle { display: grid; } .lp-header-actions { gap: var(--s-3); }
  .connect-site .cira-launcher-copy { display: none; }
  .connect-site .cira-launcher { padding: var(--s-2); }
  .lp-hero-grid { gap: var(--s-5); } .lp-hero-grid h1 { font-size: clamp(2.8rem,4.8vw,3.7rem); }
  .lp-demo { padding: var(--s-4); } .lp-record-tag { display: none; }
  .lp-control-layout,.lp-knowledge,.lp-fit,.lp-faq { gap: var(--s-7); }
  .lp-section-head { gap: var(--s-7); } .lp-journey { grid-template-columns: repeat(2,1fr); row-gap: var(--s-7); }
  .lp-journey article:nth-child(2)::after { display: none; }
  .lp-channel { padding: var(--s-5); } .lp-connection-items { gap: var(--s-3); }
  .lp-footer-top { grid-template-columns: 1fr 1fr; } .lp-footer nav { grid-column: 1/-1; justify-content: start; }
}
@media (max-width: 820px) {
  .connect-site { --header: 76px; --s-9: 4.5rem; }
  .lp-hero-grid { grid-template-columns: 1fr; gap: var(--s-7); } .lp-hero { padding-top: var(--s-7); }
  .lp-hero-grid h1 { font-size: clamp(2.85rem,8vw,4.4rem); max-width: 21ch; }
  .lp-hero-lede { max-width: 56ch; } .lp-demo { max-width: 620px; width: 100%; margin-inline: auto; }
  .lp-record-tag { display: block; } .lp-demo-panel { min-height: 214px; }
  .lp-section-head { grid-template-columns: 1fr; gap: var(--s-5); }
  .lp-pain-grid { gap: var(--s-5); } .lp-control-layout,.lp-knowledge,.lp-fit,.lp-faq { grid-template-columns: 1fr; }
  .lp-channels { grid-template-columns: 1fr; } .lp-channel { display: grid; grid-template-columns: 52px 1fr; gap: 0 var(--s-4); }
  .lp-channel-icon { grid-row: 1/4; align-self: start; margin: 0; } .lp-channel p { margin-bottom: var(--s-3); }
  .lp-connection-strip { align-items: start; flex-direction: column; } .lp-connection-strip p { max-width: none; }
  .lp-proof-layout { grid-template-columns: 1fr; } .lp-proof-tabs { flex-direction: row; }
  .lp-proof-tabs button { flex: 1; } .lp-start-steps { grid-template-columns: 1fr; }
  .lp-closing { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-7); }
}
@media (max-width: 540px) {
  .connect-site { --lp-gutter: 1.25rem; --s-9: 3.5rem; }
  .lp-hero-grid h1 { font-size: clamp(2.6rem,11vw,3.4rem); max-width: 12ch; }
  .lp-intro { font-size: var(--lp-xs); } .lp-hero-lede { font-size: var(--lp-body); }
  .lp-hero-actions { display: grid; } .lp-hero-signoff { align-items: start; }
  .lp-demo { padding: var(--s-3); border-radius: var(--lp-radius); } .lp-demo-caption { flex-direction: column; align-items: start; gap: var(--s-1); }
  .lp-record,.lp-demo-panel { padding: var(--s-4); } .lp-demo-tabs { gap: 0; padding: var(--s-2); }
  .lp-demo-tabs button { font-size: var(--lp-xs); gap: var(--s-1); } .lp-demo-tabs .lp-icon { width: 1rem; height: 1rem; }
  .lp-record-tag { display: none; } .lp-record h2 { font-size: var(--lp-body); } .lp-demo-panel { min-height: 255px; }
  .lp-next-action { margin-inline: 0; } .lp-record-footer { padding: var(--s-3); font-size: var(--lp-xs); }
  .lp-connection-items { gap: var(--s-4); } .lp-connection-items .lp-plus { display: none; }
  .lp-connection-items span { font-size: var(--lp-sm); } .lp-connection-items span:last-child { width: 100%; }
  .lp-pain-grid,.lp-journey { grid-template-columns: 1fr; }
  .lp-journey article { padding-left: var(--s-8); } .lp-journey .lp-step-number { position: absolute; left: 0; top: 0; }
  .lp-journey article::after { display: none; } .lp-journey article:not(:last-child)::before { content: ''; position: absolute; width: 1px; top: 56px; bottom: -24px; left: 22px; background: var(--line); }
  .lp-journey ul { margin-top: var(--s-3); } .lp-example { padding: var(--s-5); align-items: start; }
  .lp-mode-tab { padding: var(--s-4); gap: var(--s-3); grid-template-columns: 24px 1fr 16px; }
  .lp-policy,.lp-knowledge-map,.lp-why-now { padding: var(--s-5); }
  .lp-knowledge-grid { gap: var(--s-2); } .lp-knowledge-grid span { padding: var(--s-3); font-size: var(--lp-sm); }
  .lp-proof-tabs { flex-direction: column; } .lp-closing { padding: var(--s-5); }
  .lp-footer-top { grid-template-columns: 1fr; } .lp-footer-bottom { flex-direction: column; gap: var(--s-2); }
  .connect-site .cira-launcher { right: var(--s-4); bottom: max(var(--s-4),env(safe-area-inset-bottom)); min-height: 52px; padding: var(--s-2); }
  .connect-site .cira-launcher-copy { display: none; } .connect-site .cira-avatar { width: 36px; height: 36px; }
  .connect-site .cira-teaser { right: var(--s-4); bottom: 82px; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .connect-site { --header: 64px; }
  .lp-mobile-menu { max-height: calc(100dvh - var(--header)); overflow-y: auto; }
  .connect-site .cira-launcher-copy { display: none; }
}
@media (prefers-reduced-motion: reduce) { .connect-site *, .connect-site *::before, .connect-site *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* 2026-09-14 — clearer editorial hierarchy and one surface rhythm. */
.connect-site { --lp-radius: .75rem; }
.connect-site h1 { letter-spacing: -.045em; text-wrap: balance; }
.connect-site h2 { letter-spacing: -.03em; text-wrap: balance; }
.connect-site .lp-hero-grid h1 { max-width: 16ch; }
.connect-site .lp-hero-lede { line-height: 1.65; max-width: 48ch; }
.lp-hero-grid { align-items: center; }
.connect-site .lp-demo {
  border-radius: var(--lp-radius);
  padding: var(--s-4);
  background: var(--surface-2);
}
.connect-site .lp-workspace { box-shadow: var(--shadow-soft); }
.connect-site .lp-next-action { margin-inline: 0; border-radius: var(--lp-radius); }
.connect-site .lp-record-tag { border-radius: var(--s-1); }
.connect-site .lp-section-head { align-items: start; }
.connect-site .lp-section-head > p { padding-top: var(--s-7); }
.connect-site .lp-channel {
  border-radius: var(--lp-radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.connect-site .lp-why-now { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--lp-radius); }
.connect-site .lp-closing { border-radius: var(--lp-radius); border-top: 3px solid var(--accent); }
.connect-site .lp-btn { border-radius: var(--s-2); font-weight: 600; }
.connect-site .lp-proof-tabs button { border-radius: var(--s-2); }
.connect-site :is(.lp-btn, .lp-theme, .lp-menu-toggle):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
@media (hover: hover) {
  .connect-site :is(.lp-channel, .lp-proof-tabs button):hover { border-color: var(--line-strong); }
}
@media (max-width: 820px) {
  .connect-site .lp-section-head > p { padding-top: 0; }
  .connect-site .lp-hero-grid h1 { max-width: 19ch; }
}
@media (max-width: 540px) {
  .connect-site .lp-hero-grid h1 { max-width: 16ch; font-size: clamp(2.35rem, 10vw, 3.1rem); }
  .connect-site .lp-demo { padding: var(--s-2); }
  .connect-site .lp-proof-tabs button { text-align: left; }
}

/* CONNECT_OPPORTUNITY_VISUALS_V1 — 2026-10-03. Shared opportunity and channel card shell. */
.connect-site :is(#problem, #channels) .lp-pain-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}
.connect-site :is(#problem, #channels) .lp-opportunity-card {
  min-width: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--lp-radius);
  box-shadow: var(--shadow-soft);
  transform: none;
  transition: transform var(--lp-fast) ease, border-color var(--lp-fast) ease, box-shadow var(--lp-fast) ease;
}
.connect-site :is(#problem, #channels) .lp-opportunity-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
}
.connect-site :is(#problem, #channels) .lp-opportunity-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep each story centered within its section's image frame. */
  object-position: 50% 50%;
  transition: transform var(--lp-fast) ease;
}
.connect-site :is(#problem, #channels) .lp-opportunity-caption {
  padding: var(--s-4) var(--s-5);
  display: grid;
  align-content: space-between;
  gap: var(--s-2);
}
.connect-site :is(#problem, #channels) .lp-opportunity-caption h3 {
  font-size: var(--lp-body);
  line-height: 1.35;
}
.connect-site :is(#problem, #channels) .lp-opportunity-caption .lp-resolution {
  margin: 0;
  font-size: var(--lp-sm);
  line-height: 1.45;
  color: var(--accent-text);
}
.connect-site :is(#problem, #channels) .lp-opportunity-progress { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .connect-site :is(#problem, #channels) .lp-opportunity-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--shadow);
  }
  .connect-site :is(#problem, #channels) .lp-opportunity-card:hover img { transform: scale(1.015); }
}
@media (max-width: 1179px) {
  .connect-site :is(#problem, #channels) .lp-pain-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(60% - var(--s-4));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-block: var(--s-4);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .connect-site :is(#problem, #channels) .lp-pain-grid::-webkit-scrollbar { display: none; }
  .connect-site :is(#problem, #channels) .lp-pain-grid:focus-visible {
    outline-offset: calc(-1 * var(--s-1));
    border-radius: var(--lp-radius);
  }
  .connect-site :is(#problem, #channels) .lp-opportunity-card { scroll-snap-align: start; }
  .connect-site :is(#problem, #channels) .lp-opportunity-card:last-child { scroll-snap-align: end; }
  .connect-site :is(#problem, #channels) .lp-opportunity-progress {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s-2);
    color: var(--muted);
    font-size: var(--lp-xs);
  }
  .connect-site :is(#problem, #channels) .lp-opportunity-dots { display: flex; gap: var(--s-1); }
  .connect-site :is(#problem, #channels) .lp-opportunity-dots button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--lp-round);
    color: var(--muted);
    background: transparent;
  }
  .connect-site :is(#problem, #channels) .lp-opportunity-dots button span {
    width: var(--s-2);
    height: var(--s-2);
    border: 1px solid currentColor;
    border-radius: var(--lp-round);
  }
  .connect-site :is(#problem, #channels) .lp-opportunity-dots button[aria-current] { color: var(--accent-text); }
  .connect-site :is(#problem, #channels) .lp-opportunity-dots button[aria-current] span { background: currentColor; }
  .connect-site :is(#problem, #channels) .lp-opportunity-dots button:hover { background: var(--accent-soft); }
  .connect-site :is(#problem, #channels) .lp-opportunity-dots button:focus-visible { outline-offset: 0; }
  .connect-site :is(#problem, #channels) .lp-opportunity-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
}
@media (max-width: 640px) {
  .connect-site :is(#problem, #channels) .lp-pain-grid { grid-auto-columns: calc(90% - var(--s-4)); }
  .connect-site :is(#problem, #channels) .lp-opportunity-caption { padding: var(--s-4); }
}
@media (prefers-reduced-motion: reduce) {
  .connect-site :is(#problem, #channels) .lp-opportunity-card,
  .connect-site :is(#problem, #channels) .lp-opportunity-image img { transform: none; transition: none; }
}

/* CONNECT_CHANNEL_VISUALS_V1 — preserve the devices and channel icons in each crop. */
.connect-site #channels .lp-opportunity-card {
  grid-template-columns: minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--premium-gold) 24%, transparent);
}
.connect-site #channels .lp-opportunity-card::before { display: none; }
.connect-site #channels .lp-opportunity-image { aspect-ratio: 3 / 4; background: var(--sig-graphite); }
.connect-site #channels .lp-opportunity-image img { object-fit: cover; object-position: 50% 50%; }
.connect-site #channels .lp-opportunity-caption {
  min-height: calc(var(--s-8) * 3);
  align-content: center;
}
.connect-site #channels .lp-opportunity-caption h3 { font-size: var(--lp-lead); }
.connect-site #channels .lp-opportunity-caption .lp-resolution,
.connect-site #channels .lp-opportunity-dots button[aria-current] { color: var(--premium-gold); }
.connect-site #channels .lp-opportunity-progress,
.connect-site #channels .lp-opportunity-dots button { color: var(--sig-paper); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .connect-site #channels .lp-opportunity-card:hover { border-color: var(--premium-gold); }
}
@media (min-width: 821px) and (max-width: 1179px) {
  .connect-site #channels .lp-pain-grid { grid-auto-columns: calc(47% - var(--s-4)); }
}
@media (max-width: 820px) {
  .connect-site #channels .lp-pain-grid { grid-auto-columns: calc(47% - var(--s-4)); }
}
@media (min-width: 641px) and (max-width: 820px) {
  .connect-site #channels .lp-opportunity-caption { min-height: calc(var(--s-8) * 2 + var(--s-4)); }
}
@media (max-width: 640px) {
  .connect-site #channels .lp-pain-grid { grid-auto-columns: calc(88% - var(--s-4)); }
  .connect-site #channels .lp-opportunity-caption { min-height: calc(var(--s-8) * 2 + var(--s-4)); }
}