/*
 * CETEChat and CETECommand websites, 2026 design. Used by pages with <body class="v2">.
 * Fonts are served from this site: no third-party requests. The header and footer are in chrome.css.
 *
 * Palette: ink (page), vault (raised panels), rule (hairlines), paper (text), mist (quiet text),
 * signal (the brand blue: links and buttons) and brass (premium detail, used sparingly).
 */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2'); }

body.v2 {
  --ink: #060b18;
  --vault: #0b1426;
  --vault-2: #111d35;
  --rule: #1b2944;
  --rule-2: #2a3b5e;
  --paper: #eef2f8;
  --paper-2: #c9d3e3;
  --mist: #94a3bd;
  --signal: #4a94ff;
  --signal-btn: #1f6feb;
  --signal-btn-hi: #2f7cf6;
  --brass: #c9a86a;
  --brass-hi: #e3cc9b;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --wrap: 1360px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 20px;
  /* Names the website demo and store buttons (ported from site.css) expect. */
  --bg: var(--ink); --surface: var(--vault); --surface-2: var(--vault-2); --line: var(--rule); --line-2: var(--rule); --line-3: var(--rule-2);
  --text: var(--paper); --text-strong: #f6f8fc; --muted: var(--paper-2); --soft: var(--mist); --dim: var(--mist); --body-strong: var(--paper-2);
  --accent: var(--signal); --cyan: #38d6e8; --button: var(--signal-btn); --button-hover: var(--signal-btn-hi);

  margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.v2 *, .v2 *::before, .v2 *::after { box-sizing: border-box; }
html:has(body.v2) { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
.v2 img { max-width: 100%; height: auto; display: block; }
.v2 main a { color: #8ab9ff; text-decoration: none; }
.v2 main a:hover { color: #c3dbff; }
.v2 :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }
.v2 h1, .v2 h2, .v2 h3, .v2 h4, .v2 p, .v2 ul, .v2 ol, .v2 dl, .v2 dd, .v2 figure { margin: 0; }
.v2 ul, .v2 ol { padding: 0; }
.v2 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.v2 .skip { position: absolute; left: 16px; top: -60px; background: var(--signal-btn); color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; }
.v2 .skip:focus { top: 16px; color: #fff; }
.v2 .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Type ---------- */
.v2 .display { font-family: var(--serif); font-weight: 400; font-size: clamp(46px, 6.6vw, 92px); line-height: 0.98; letter-spacing: -0.02em; color: #f6f8fc; text-wrap: balance; }
.v2 .h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.015em; color: #f6f8fc; text-wrap: balance; }
.v2 .h3 { font-size: 22px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--paper); }
.v2 .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--paper-2); max-width: 60ch; }
.v2 .quiet { color: var(--mist); }
.v2 .small { font-size: 14.5px; }
.v2 .kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--brass); font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }
.v2 .kicker::before { content: ''; width: 28px; height: 1px; background: currentColor; }

/* ---------- Buttons ---------- */
.v2 .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 26px; border-radius: 13px; font-size: 16.5px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; text-decoration: none; }
.v2 .btn-primary { background: var(--signal-btn); color: #fff; }
.v2 .btn-primary:hover { background: var(--signal-btn-hi); color: #fff; }
.v2 .btn-ghost { border-color: var(--rule-2); color: var(--paper); background: transparent; }
.v2 .btn-ghost:hover { border-color: #3d5180; color: #fff; }
.v2 .btn-brass { background: var(--brass); color: #1a1408; }
.v2 .btn-brass:hover { background: var(--brass-hi); color: #1a1408; }
.v2 .btn-sm { height: 44px; padding: 0 18px; border-radius: 11px; font-size: 15px; }
.v2 .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.v2 .textlink { font-weight: 700; color: var(--paper); border-bottom: 1px solid var(--rule-2); padding-bottom: 2px; }
.v2 .textlink:hover { color: #fff; border-color: var(--signal); }

/* ---------- Sections ---------- */
.v2 .sec { padding: clamp(80px, 10vw, 140px) 0; border-top: 1px solid var(--rule); }
.v2 .sec-tight { padding: clamp(56px, 7vw, 96px) 0; }
.v2 .sec-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(44px, 6vw, 72px); }
.v2 .sec-head .lead { justify-self: end; }
.v2 .sec-head.solo { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
.v2 .sec-head.solo .lead { justify-self: start; }
.v2 .sec-head .kicker { grid-column: 1 / -1; }

/* ---------- Hero (home pages) ---------- */
.v2 .hero { position: relative; padding: clamp(56px, 8vw, 112px) 0 clamp(64px, 8vw, 112px); overflow: hidden; }
.v2 .hero::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; background: radial-gradient(closest-side, rgba(74, 148, 255, 0.16), transparent 70%); pointer-events: none; }
.v2 .hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.v2 .hero-copy { display: flex; flex-direction: column; gap: 28px; }
.v2 .hero-copy .lead { max-width: 52ch; }
.v2 .hero-note { font-size: 14.5px; color: var(--mist); }
.v2 .hero-mark { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 7px 14px 7px 10px; border: 1px solid var(--rule-2); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--paper-2); background: rgba(11, 20, 38, 0.6); }
.v2 .hero-mark b { color: var(--brass); font-weight: 800; }

/* The seal: a real message, as it is on your phone and as it is on our server */
.v2 .seal { position: relative; border: 1px solid var(--rule-2); border-radius: 28px; background: linear-gradient(180deg, #0e1a31, #0a1325); box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.04); padding: 22px; }
.v2 .seal-top { display: flex; align-items: center; gap: 12px; padding: 4px 4px 18px; border-bottom: 1px solid var(--rule); }
.v2 .seal-av { width: 40px; height: 40px; border-radius: 12px; background: #1c4fae; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex-shrink: 0; }
.v2 .seal-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.v2 .seal-who strong { font-size: 16px; color: var(--paper); }
.v2 .seal-who span { font-size: 13px; color: var(--mist); }
.v2 .seal-lock { margin-left: auto; color: var(--brass); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.v2 .seal-msgs { display: flex; flex-direction: column; gap: 12px; padding: 22px 4px; min-height: 300px; }
.v2 .bub { max-width: 82%; padding: 12px 16px; border-radius: 18px; font-size: 15.5px; line-height: 1.5; background: var(--vault-2); color: var(--paper); border: 1px solid var(--rule); overflow-wrap: anywhere; }
.v2 .bub.me { align-self: flex-end; background: #1a4fae; border-color: #2459bd; color: #fff; border-bottom-right-radius: 6px; }
.v2 .bub.them { border-bottom-left-radius: 6px; }
.v2 .bub small { display: block; margin-top: 4px; font-size: 11.5px; opacity: 0.7; }
.v2 .seal.cipher .bub { font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; color: #9fb4d9; background: #0b1426; border-color: #1f2f50; }
.v2 .seal.cipher .bub.me { color: #b8cdf2; background: #0e1d3a; }
.v2 .seal-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: #08101f; border: 1px solid var(--rule); }
.v2 .seal-switch button { height: 42px; border: 0; border-radius: 10px; background: transparent; color: var(--mist); font: 700 14.5px var(--sans); cursor: pointer; }
.v2 .seal-switch button[aria-pressed="true"] { background: var(--vault-2); color: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-2); }
.v2 .seal-cap { margin-top: 14px; font-size: 14px; color: var(--mist); min-height: 3.2em; }
.v2 .seal-cap b { color: var(--paper); }

/* Proof strip under the hero */
.v2 .proof { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: #070d1c; }
.v2 .proof ul { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v2 .proof li { display: flex; gap: 14px; align-items: flex-start; padding: 26px 24px; border-left: 1px solid var(--rule); }
.v2 .proof li:first-child { border-left: 0; padding-left: 0; }
.v2 .proof svg { flex-shrink: 0; color: var(--brass); margin-top: 2px; }
.v2 .proof strong { display: block; font-size: 15.5px; color: var(--paper); }
.v2 .proof span { font-size: 14px; color: var(--mist); line-height: 1.5; }

/* Audiences: four columns divided by hairlines (not cards) */
.v2 .who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.v2 .who > div { padding: 32px 28px 8px 0; display: flex; flex-direction: column; gap: 12px; }
.v2 .who > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.v2 .who h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.05; color: #f6f8fc; }
.v2 .who p { color: var(--paper-2); font-size: 16px; }
.v2 .who ul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.v2 .who li { font-size: 15px; color: var(--mist); padding-left: 18px; position: relative; }
.v2 .who li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--brass); }

/* Tour: alternating panels, a picture beside a list of what it does */
.v2 .tour { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 128px); }
.v2 .panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.v2 .panel.flip > .panel-media { order: 2; }
.v2 .panel-copy { display: flex; flex-direction: column; gap: 20px; }
.v2 .panel-copy .h2 { font-size: clamp(34px, 3.6vw, 50px); }
.v2 .ticks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin-top: 6px; }
.v2 .ticks li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: var(--paper-2); }
.v2 .ticks li b { display: block; color: var(--paper); font-weight: 700; }
.v2 .ticks li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 14px; height: 8px; border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(-45deg); }
.v2 .panel-media { position: relative; }
.v2 .shot { border-radius: 20px; border: 1px solid var(--rule-2); box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.9); overflow: hidden; background: #0b1426; }
.v2 .shot-phone { width: min(360px, 78%); margin: 0 auto; border-radius: 40px; padding: 10px; background: #050a15; border: 1px solid #22314f; box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.9); }
.v2 .shot-phone img { border-radius: 31px; }
.v2 .shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
.v2 .shot-pair .shot-phone { width: 100%; }
.v2 .shot-pair .shot-phone:last-child { transform: translateY(-36px); }

/* A designed stand-in when there is no screenshot: a stack of facts on a panel */
.v2 .board { border: 1px solid var(--rule-2); border-radius: 24px; background: linear-gradient(180deg, #0e1a31, #0a1325); padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 4px; }
.v2 .board-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.v2 .board-row:last-child { border-bottom: 0; }
.v2 .board-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #13213d; color: var(--signal); }
.v2 .board-ic.brass { color: var(--brass); background: #1d1a12; }
.v2 .board-row strong { display: block; color: var(--paper); font-size: 15.5px; line-height: 1.35; }
.v2 .board-row span { color: var(--mist); font-size: 13.5px; line-height: 1.4; }
.v2 .board-row em { font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--brass); white-space: nowrap; }

/* Security ledger: what we can never see, and what we need */
.v2 .ledger { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--rule-2); border-radius: 24px; overflow: hidden; }
.v2 .ledger > div { padding: clamp(26px, 3.4vw, 44px); }
.v2 .ledger > div + div { border-left: 1px solid var(--rule-2); background: #08101f; }
.v2 .ledger h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; color: #f6f8fc; margin-bottom: 18px; }
.v2 .ledger ul { list-style: none; display: flex; flex-direction: column; }
.v2 .ledger li { padding: 12px 0; border-top: 1px solid var(--rule); color: var(--paper-2); font-size: 15.5px; }
.v2 .steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-bottom: 40px; }
.v2 .steps3 > div { padding: 0 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.v2 .steps3 > div + div { padding-left: 28px; border-left: 1px solid var(--rule); }
.v2 .steps3 .n { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--brass); }
.v2 .steps3 p { color: var(--paper-2); font-size: 15.5px; }

/* Band: a strong closing or cross-sell block */
.v2 .band { border: 1px solid #3a3220; border-radius: 28px; background: radial-gradient(120% 140% at 100% 0%, rgba(201, 168, 106, 0.16), transparent 55%), #0b1222; padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.v2 .band .h2 { font-size: clamp(34px, 3.8vw, 52px); }
.v2 .band-copy { display: flex; flex-direction: column; gap: 18px; }
.v2 .band.blue { border-color: var(--rule-2); background: radial-gradient(120% 140% at 100% 0%, rgba(74, 148, 255, 0.18), transparent 55%), #0b1222; }

/* Pricing */
.v2 .plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule-2); border-radius: 24px; overflow: hidden; }
.v2 .plan { padding: 30px 26px 30px; display: flex; flex-direction: column; gap: 14px; background: var(--vault); }
.v2 .plan + .plan { border-left: 1px solid var(--rule-2); }
.v2 .plan.feature { background: linear-gradient(180deg, #13203b, #0d1730); box-shadow: inset 0 3px 0 var(--brass); }
.v2 .plan-name { font-size: 15px; font-weight: 800; color: var(--paper); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2 .plan-tag { font-size: 12px; font-weight: 800; color: #1a1408; background: var(--brass); padding: 2px 9px; border-radius: 999px; }
.v2 .plan-price { font-family: var(--serif); font-size: 54px; line-height: 1; color: #f6f8fc; }
.v2 .plan-per { font-size: 14px; color: var(--mist); line-height: 1.45; min-height: 3.2em; }
.v2 .plan-per em { font-style: normal; color: var(--brass); display: block; }
.v2 .plan ul { list-style: none; display: flex; flex-direction: column; gap: 9px; flex: 1; padding-top: 14px; border-top: 1px solid var(--rule); }
.v2 .plan li { font-size: 15px; color: var(--paper-2); padding-left: 22px; position: relative; line-height: 1.45; }
.v2 .plan li::before { content: ''; position: absolute; left: 1px; top: 0.4em; width: 11px; height: 6px; border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal); transform: rotate(-45deg); }
.v2 .plan .btn { width: 100%; margin-top: 8px; }
.v2 .plans-note { margin-top: 22px; color: var(--mist); font-size: 14.5px; max-width: 90ch; }
.v2 .plans.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.v2 .offer { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: space-between; padding: 20px 26px; margin-bottom: 18px; border: 1px solid #3a3220; border-radius: 18px; background: rgba(201, 168, 106, 0.07); }
.v2 .offer strong { color: var(--brass-hi); font-size: 17px; }
.v2 .offer span { color: var(--paper-2); font-size: 15px; }
.v2 .included { margin-top: 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 28px; list-style: none; padding: 26px 0 0; border-top: 1px solid var(--rule); }
.v2 .included li { font-size: 15px; color: var(--paper-2); padding-left: 22px; position: relative; }
.v2 .included li::before { content: ''; position: absolute; left: 1px; top: 0.45em; width: 11px; height: 6px; border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(-45deg); }

/* Download: the three ways in */
.v2 .platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.v2 .platform { border: 1px solid var(--rule-2); border-radius: 22px; padding: 28px; background: var(--vault); display: flex; flex-direction: column; gap: 14px; position: relative; }
.v2 .platform.yours { border-color: var(--brass); }
.v2 .platform .yours-tag { display: none; position: absolute; top: 20px; right: 20px; font-size: 12px; font-weight: 800; color: #1a1408; background: var(--brass); border-radius: 999px; padding: 2px 10px; }
.v2 .platform.yours .yours-tag { display: inline-block; }
.v2 .platform h3 { font-size: 21px; font-weight: 800; color: var(--paper); }
.v2 .platform ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--paper-2); font-size: 15px; }
.v2 .platform .alt { font-size: 13.5px; font-weight: 700; color: var(--mist); margin-top: 4px; }

/* FAQ */
.v2 .faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px 72px; }
.v2 .faq-list { border-top: 1px solid var(--rule-2); }
.v2 .faq details { border-bottom: 1px solid var(--rule-2); }
.v2 .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 18px; font-weight: 700; color: var(--paper); }
.v2 .faq summary::-webkit-details-marker { display: none; }
.v2 .faq summary::after { content: ''; flex-shrink: 0; width: 12px; height: 12px; border-right: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(45deg) translateY(-4px); transition: transform .2s; }
.v2 .faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.v2 .faq details p { padding: 0 0 24px; color: var(--paper-2); font-size: 16px; max-width: 70ch; }

/* Final call to action */
.v2 .final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.v2 .final .display { font-size: clamp(42px, 5.6vw, 80px); max-width: 16ch; }
.v2 .final .cta-row { justify-content: center; }

/* ---------- Detail pages (features.html, command-features.html) ---------- */
.v2 .page-hero { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule); }
.v2 .page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 32px 64px; align-items: end; }
.v2 .page-hero .copy { display: flex; flex-direction: column; gap: 22px; }
.v2 .count { display: flex; gap: 32px; justify-self: end; }
.v2 .count div { display: flex; flex-direction: column; gap: 4px; }
.v2 .count b { font-family: var(--serif); font-weight: 400; font-size: 64px; line-height: 1; color: var(--brass); }
.v2 .count span { font-size: 14px; color: var(--mist); }
.v2 .find { position: relative; margin-top: 8px; max-width: 520px; }
.v2 .find input { width: 100%; height: 54px; padding: 0 18px 0 48px; border-radius: 14px; border: 1px solid var(--rule-2); background: #08101f; color: var(--paper); font: 500 16px var(--sans); }
.v2 .find input::placeholder { color: #6f7f9c; }
.v2 .find input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(74, 148, 255, 0.2); }
.v2 .find svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--mist); pointer-events: none; }
.v2 .find-none { display: none; padding: 40px 0; color: var(--mist); font-size: 17px; }
.v2 .find-none.show { display: block; }

.v2 .spec { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding: 56px 0 120px; }
.v2 .rail { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; padding-bottom: 20px; }
.v2 .rail a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--mist); font-size: 15px; font-weight: 600; border-left: 2px solid transparent; }
.v2 .rail a span { color: #5f6f8d; font-weight: 700; font-size: 13px; }
.v2 .rail a:hover { color: var(--paper); background: rgba(255, 255, 255, 0.03); }
.v2 .rail a.on { color: var(--paper); border-left-color: var(--brass); background: rgba(201, 168, 106, 0.06); border-radius: 0 10px 10px 0; }
.v2 .group { padding-bottom: 72px; margin-bottom: 72px; border-bottom: 1px solid var(--rule); }
.v2 .group:last-child { border-bottom: 0; margin-bottom: 0; }
.v2 .group-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 36px; max-width: 760px; }
.v2 .group-head .h2 { font-size: clamp(34px, 3.6vw, 52px); }
.v2 .group-head p { color: var(--paper-2); font-size: 17.5px; }
.v2 .items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.v2 .item { padding: 22px 0; border-top: 1px solid var(--rule); }
.v2 .item h3 { font-size: 17.5px; font-weight: 700; color: var(--paper); line-height: 1.35; margin-bottom: 6px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v2 .item p { font-size: 15.5px; color: var(--paper-2); line-height: 1.6; }
.v2 .item .tag { font-size: 11.5px; font-weight: 800; color: var(--brass); border: 1px solid #4a3f28; border-radius: 999px; padding: 1px 8px; letter-spacing: 0.01em; }
.v2 .item .tag.new { color: #8ab9ff; border-color: #24406e; }
.v2 .item[hidden], .v2 .group[hidden], .v2 .spot[hidden], .v2 .rail a[hidden] { display: none; }
.v2 .spot { grid-column: 1 / -1; margin: 10px 0 18px; border: 1px solid var(--rule-2); border-radius: 22px; background: linear-gradient(180deg, #0e1a31, #0a1325); padding: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; }
.v2 .spot h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.08; color: #f6f8fc; margin-bottom: 10px; }
.v2 .spot p { color: var(--paper-2); font-size: 16px; }
.v2 .spot ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.v2 .spot li { position: relative; padding-left: 24px; font-size: 15px; color: var(--paper-2); line-height: 1.5; }
.v2 .spot li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 12px; height: 7px; border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(-45deg); }

/* ---------- Motion: one entrance for the hero, nothing scattered ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .v2 .hero-copy > *, .js .v2 .seal { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .js .v2 .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .js .v2 .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .js .v2 .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .js .v2 .seal { animation-delay: .22s; animation-duration: .9s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .v2 .plans, .v2 .plans.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2 .plan + .plan { border-left: 0; }
  .v2 .plan { border-top: 1px solid var(--rule-2); }
  .v2 .plan:nth-child(-n+2) { border-top: 0; }
  .v2 .plan:nth-child(even) { border-left: 1px solid var(--rule-2); }
  .v2 .included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2 .who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2 .who > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .v2 .who > div:nth-child(n+3) { border-top: 1px solid var(--rule); margin-top: 24px; }
}
@media (max-width: 960px) {
  .v2 .hero .wrap, .v2 .panel, .v2 .band, .v2 .sec-head, .v2 .faq, .v2 .page-hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .v2 .panel.flip > .panel-media { order: 0; }
  .v2 .sec-head .lead { justify-self: start; }
  .v2 .count { justify-self: start; }
  .v2 .proof ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2 .proof li:nth-child(3) { border-left: 0; padding-left: 0; }
  .v2 .proof li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .v2 .platforms { grid-template-columns: minmax(0, 1fr); }
  .v2 .ledger { grid-template-columns: minmax(0, 1fr); }
  .v2 .ledger > div + div { border-left: 0; border-top: 1px solid var(--rule-2); }
  .v2 .steps3 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .v2 .steps3 > div + div { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 1px solid var(--rule); }
  .v2 .spec { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .v2 .rail { position: sticky; top: 72px; z-index: 5; flex-direction: row; overflow-x: auto; max-height: none; gap: 4px; margin: 0 calc(var(--pad) * -1) 40px; padding: 12px var(--pad); background: rgba(6, 11, 24, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); scrollbar-width: none; }
  .v2 .rail::-webkit-scrollbar { display: none; }
  .v2 .rail a { flex-shrink: 0; white-space: nowrap; border-left: 0; border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; }
  .v2 .rail a.on { border-color: var(--brass); border-radius: 999px; }
  .v2 .rail a span { display: none; }
  .v2 .spot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body.v2 { font-size: 16px; }
  .v2 .ticks, .v2 .items, .v2 .included { grid-template-columns: minmax(0, 1fr); }
  .v2 .who { grid-template-columns: minmax(0, 1fr); }
  .v2 .who > div, .v2 .who > div + div { padding: 24px 0 0; border-left: 0; }
  .v2 .who > div + div { border-top: 1px solid var(--rule); margin-top: 24px; }
  .v2 .plans, .v2 .plans.five { grid-template-columns: minmax(0, 1fr); }
  .v2 .plan, .v2 .plan:nth-child(-n+2) { border-top: 1px solid var(--rule-2); border-left: 0 !important; }
  .v2 .plan:first-child { border-top: 0; }
  .v2 .proof ul { grid-template-columns: minmax(0, 1fr); }
  .v2 .proof li, .v2 .proof li:nth-child(3) { border-left: 0; padding: 18px 0; border-top: 1px solid var(--rule); }
  .v2 .proof li:first-child { border-top: 0; }
  .v2 .btn { height: 52px; }
  .v2 .cta-row .btn { flex: 1 1 100%; }
  .v2 .shot-pair .shot-phone:last-child { transform: none; }
  .v2 .seal { padding: 16px; border-radius: 22px; }
  .v2 .seal-msgs { min-height: 0; }
  .v2 .count b { font-size: 52px; }
}

/* ---------- Ported from site.css: the website demo (CETECommand) and store buttons ---------- */
/* Website tools demo: an example enquiry form and chat on "Your Business" (nothing is sent). */
.v2 .sd { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.v2 .sd-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.v2 .sd-points li { font-size: 17px; line-height: 1.65; color: var(--muted); padding-left: 22px; position: relative; }
.v2 .sd-points li::before { content: ''; position: absolute; left: 0; top: 11px; width: 8px; height: 8px; border-radius: 4px; background: var(--cyan); }
.v2 .sd-points b { color: var(--text-strong); }
.v2 .sd-swatches { display: flex; align-items: center; gap: 10px; margin-top: 30px; flex-wrap: wrap; }
.v2 .sd-swatches span { font-size: 14px; font-weight: 600; color: var(--soft); margin-right: 4px; }
.v2 .sd-sw { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line-3); cursor: pointer; padding: 0; }
.v2 .sd-sw.on { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.v2 .sd-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

.v2 .sd-stage { --a: #c89a2e; --at: #111111; position: relative; border-radius: 22px; background: #0f0f12; border: 1px solid var(--line-3); overflow: hidden; padding-bottom: 92px; min-height: 640px; color: #17181c; }
.v2 .sd-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #1c1d22; border-bottom: 1px solid #2a2b31; }
.v2 .sd-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3b42; }
.v2 .sd-bar span { margin-left: 12px; flex: 1; font-size: 12px; color: #9a9ba3; background: #111215; border-radius: 8px; padding: 5px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2 .sd-site { padding: 0 26px; }
.v2 .sd-sitehead { display: flex; align-items: center; gap: 10px; padding: 16px 0 18px; color: #e9e7e1; font-size: 13px; }
.v2 .sd-sitehead b { font-size: 15px; letter-spacing: .02em; }
.v2 .sd-nav { margin-left: auto; color: #9a9ba3; }
.v2 .sd-quote { background: var(--a); color: var(--at); font-weight: 700; padding: 7px 12px; border-radius: 6px; white-space: nowrap; }
.v2 .sd-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--a); color: var(--at); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.v2 .sd-form, .v2 .sd-done { background: #fff; border-radius: 12px; padding: 26px 26px 18px; max-width: 620px; margin: 0 auto; font-size: 14px; line-height: 1.45; }
.v2 .sd-form h3, .v2 .sd-done h3 { font-family: var(--serif); font-size: 30px; font-weight: 400; color: #111; }
.v2 .sd-m { color: #646a77; font-weight: 400; }
.v2 .sd-form > .sd-m { margin: 4px 0 0; }
.v2 .sd-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: 16px 0 14px; background: #f0f1f4; border: 1px solid #d6d9e0; border-radius: 12px; }
.v2 .sd-seg label { position: relative; margin: 0; }
.v2 .sd-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.v2 .sd-seg span { display: block; text-align: center; padding: 9px 6px; border-radius: 9px; font-weight: 700; color: #4b5060; transition: background .15s, color .15s; }
.v2 .sd-seg input:checked + span { background: var(--a); color: var(--at); }
.v2 .sd-seg input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }
.v2 .sd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.v2 .sd-grid > .full { grid-column: 1 / -1; }
.v2 .sd-grid label { display: block; margin: 0 0 11px; font-weight: 700; color: #17181c; font-size: 13px; }
.v2 .sd-grid input, .v2 .sd-grid select, .v2 .sd-grid textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid #d6d9e0; border-radius: 9px; font: inherit; font-weight: 400; color: #17181c; background: #fff; }
.v2 .sd-grid input:focus, .v2 .sd-grid select:focus, .v2 .sd-grid textarea:focus { outline: none; border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 25%, transparent); }
.v2 .sd-grid textarea { resize: vertical; min-height: 70px; }
.v2 .sd-sec { margin: 4px 0 10px; padding-top: 10px; border-top: 1px solid #d6d9e0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #646a77; font-weight: 800; }
.v2 .sd-drop { margin: 2px 0 12px; padding: 14px; border: 1px dashed #c9ccd4; border-radius: 9px; text-align: center; color: #646a77; }
.v2 .sd-drop b { color: #17181c; }
.v2 .sd-form .wo { display: none; }
.v2 .sd-form:has(input[value=work_order]:checked) .wo { display: block; }
.v2 .sd-form:has(input[value=work_order]:checked) .q { display: none; }
.v2 .sd-send, .v2 .sd-again { display: block; width: 100%; border: 0; border-radius: 10px; padding: 13px; background: var(--a); color: var(--at); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.v2 .sd-send:hover, .v2 .sd-again:hover { filter: brightness(1.07); }
.v2 .sd-foot { margin-top: 10px; text-align: center; font-size: 12px; color: #646a77; }
.v2 .sd-done { text-align: center; padding: 40px 30px; }
.v2 .sd-done .sd-m { margin: 10px auto 22px; max-width: 420px; }
.v2 .sd-tick { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--a); color: var(--at); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; }

.v2 .sd-launch { position: absolute; right: 22px; bottom: 20px; width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--a); color: var(--at); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.v2 .sd-launch::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ef4444; border: 2px solid #0f0f12; }
.v2 .sd-launch.seen::after { display: none; }
.v2 .sd-chat { position: absolute; right: 22px; bottom: 92px; width: min(340px, calc(100% - 44px)); background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); display: flex; flex-direction: column; overflow: hidden; font-size: 14px; }
.v2 .sd-chat[hidden] { display: none; }
.v2 .sd-chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px; background: var(--a); color: var(--at); }
.v2 .sd-chat-head .sd-logo { background: #fff; color: #111; }
.v2 .sd-chat-head b { display: block; font-size: 15px; }
.v2 .sd-chat-head small { opacity: .85; font-size: 12px; }
.v2 .sd-chat-x { margin-left: auto; background: none; border: 0; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.v2 .sd-chat-body { height: 230px; overflow-y: auto; padding: 14px; background: #f0f1f4; display: flex; flex-direction: column; gap: 8px; }
.v2 .sd-msg { max-width: 82%; padding: 8px 12px; border-radius: 14px; line-height: 1.4; animation: sd-in .25s ease-out; }
.v2 .sd-msg.them { align-self: flex-start; background: #fff; border: 1px solid #dfe2e8; }
.v2 .sd-msg.me { align-self: flex-end; background: var(--a); color: var(--at); }
.v2 .sd-msg small { display: block; font-size: 11px; color: #646a77; margin-bottom: 2px; }
.v2 .sd-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 12px; background: #fff; border: 1px solid #dfe2e8; border-radius: 14px; }
.v2 .sd-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9aa0ad; animation: sd-dot 1s infinite; }
.v2 .sd-typing i:nth-child(2) { animation-delay: .15s; }
.v2 .sd-typing i:nth-child(3) { animation-delay: .3s; }
.v2 .sd-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e3e5ea; }
.v2 .sd-chat-form input { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid #d6d9e0; border-radius: 9px; font: inherit; color: #17181c; }
.v2 .sd-chat-form button { border: 0; border-radius: 9px; padding: 0 14px; background: var(--a); color: var(--at); font: inherit; font-weight: 800; cursor: pointer; }
.v2 .sd-chat-foot { padding: 0 10px 10px; font-size: 11px; color: #646a77; text-align: center; }
@keyframes sd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sd-dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .v2 .sd-msg { animation: none; } .v2 .sd-typing i { animation: none; } }
@media (max-width: 1100px) { .v2 .sd { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 760px) {
  .v2 .sd-points li { font-size: 16px; }
  .v2 .sd-site { padding: 0 12px; }
  .v2 .sd-nav { display: none; }
  .v2 .sd-form, .v2 .sd-done { padding: 20px 16px 14px; }
  .v2 .sd-grid { grid-template-columns: 1fr; }
  .v2 .sd-stage { border-radius: 16px; }
  .v2 .sd-chat { right: 12px; width: calc(100% - 24px); }
  .v2 .sd-launch { right: 14px; }
}
.v2 .sd-face { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .7); flex-shrink: 0; }

/* Download: store buttons, "your device", install from the browser */
.v2 .dl-lead { max-width: 720px; color: var(--muted); font-size: 18px; margin-top: 14px; }
.v2 .dl-card { position: relative; }
.v2 .dl-card.yours { border-color: #2c5fae; box-shadow: 0 0 0 1px #2c5fae inset; }
.v2 .dl-card .dl-you { display: none; position: absolute; top: 18px; right: 18px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--cyan); background: rgba(56, 214, 232, .1); border: 1px solid rgba(56, 214, 232, .3); padding: 3px 10px; border-radius: 999px; }
.v2 .dl-card.yours .dl-you { display: inline-block; }
.v2 .store-btn { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 20px 9px 16px; border-radius: 14px; background: #f4f7fc; color: #070a12; border: 1px solid #f4f7fc; align-self: flex-start; transition: transform .2s, background-color .2s; }
.v2 .store-btn:hover { color: #070a12; transform: translateY(-1px); background: #fff; }
.v2 .store-btn svg { flex-shrink: 0; }
.v2 .store-btn .store-text { display: flex; flex-direction: column; line-height: 1.15; }
.v2 .store-btn .store-top { font-size: 12px; font-weight: 600; opacity: .75; }
.v2 .store-btn .store-name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.v2 .store-btn.soon { background: transparent; color: var(--muted); border: 1px dashed var(--line-3); cursor: default; }
.v2 .store-btn.soon:hover { transform: none; color: var(--muted); background: transparent; }
.v2 .dl-or { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); margin-top: 4px; }
.v2 .dl-card .btn { align-self: flex-start; }
.v2 .dl-more { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 20px 24px; border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); }
.v2 .dl-more strong { color: var(--text); }
.v2 .dl-more a { font-weight: 700; margin-left: auto; }
@media (max-width: 760px) {
  .v2 .dl-lead { font-size: 16px; }
  .v2 .dl-more a { margin-left: 0; }
}


/* ---------- Additions for the CETECommand home ---------- */
.v2 .steps3.six { row-gap: 40px; }
.v2 .steps3.six > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.v2 .fix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--rule-2); border-radius: 24px; overflow: hidden; }
.v2 .fix > div { padding: clamp(26px, 3.4vw, 44px); }
.v2 .fix > div + div { border-left: 1px solid var(--rule-2); background: linear-gradient(180deg, #13203b, #0d1730); }
.v2 .fix h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; color: #f6f8fc; margin-bottom: 16px; }
.v2 .fix ul { list-style: none; }
.v2 .fix li { padding: 12px 0 12px 28px; border-top: 1px solid var(--rule); color: var(--paper-2); font-size: 16px; position: relative; }
.v2 .fix .before li::before { content: ''; position: absolute; left: 2px; top: 50%; width: 12px; height: 2px; background: #6f7f9c; }
.v2 .fix .after li::before { content: ''; position: absolute; left: 1px; top: calc(50% - 6px); width: 12px; height: 7px; border-left: 2px solid var(--brass); border-bottom: 2px solid var(--brass); transform: rotate(-45deg); }
.v2 .hero-shot { position: relative; }
.v2 .hero-shot .shot-phone { position: absolute; width: 34%; right: -2%; bottom: -14%; padding: 7px; border-radius: 30px; }
.v2 .hero-shot .shot-phone img { border-radius: 24px; }
.v2 .sd-wrap { margin-top: 8px; }
@media (max-width: 960px) {
  .v2 .fix { grid-template-columns: minmax(0, 1fr); }
  .v2 .fix > div + div { border-left: 0; border-top: 1px solid var(--rule-2); }
  .v2 .steps3.six > div { padding-left: 0; border-left: 0; }
  .v2 .hero-shot { margin-bottom: 40px; }
}