/* =====================================================================
   Saguaro Logic, Home v2 (motion-led concept, 2026-10-01)
   Mostly light, with dark slate scenes for the big moments.
   Every element's DEFAULT style is its finished state. js/site.js sets the
   starting states for animation, so with no JavaScript or with reduced
   motion the page is complete and readable.
   ===================================================================== */

/* ---------- Brand tokens (Build-Spec 3.2) ---------- */
:root {
  --slate:#10303d; --slate-2:#173f50; --slate-3:#0c2631;
  --green:#76bc43; --green-glow:#9fe07a; --green-text:#3f7a1f;
  --orange:#f9a86a;
  --white:#ffffff; --surface:#f2f5f3; --border:#dfe6e9; --muted:#5b6b72; --ink-2:#2f4650;
  --radius:14px;
  --wrap:1180px;
  --head:"Montserrat", sans-serif; --body:"Source Sans 3", sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--white); color:var(--slate); font-family:var(--body); font-size:18px; line-height:1.6; }
img, svg { max-width:100%; }
h1, h2, h3 { font-family:var(--head); color:inherit; margin:0; }
h2 { font-weight:800; font-size:clamp(32px, 4.2vw, 54px); line-height:1.06; letter-spacing:-.02em; }
h3 { font-weight:700; font-size:20px; line-height:1.3; }
p { margin:0 0 16px; }
a { color:inherit; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 32px; }
.scene { padding:120px 0; position:relative; }
.skip { position:absolute; left:-999px; top:8px; background:#fff; padding:10px 14px; z-index:200; }
.skip:focus { left:8px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid currentColor; outline-offset:3px; border-radius:4px; }

/* ---------- Buttons and links ---------- */
.btn { display:inline-block; background:var(--green); color:var(--slate); font-family:var(--head); font-weight:700; font-size:17px; line-height:1.2;
       padding:16px 28px; min-height:48px; border-radius:10px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(118,188,67,.35); }
.btn:focus-visible { outline:3px solid #fff; outline-offset:0; box-shadow:0 0 0 6px var(--slate); }
.btn-small { padding:11px 18px; font-size:15px; min-height:44px; }
.tlink { display:inline-block; padding:8px 0; font-weight:600; text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:2px; text-underline-offset:4px; }
.tlink.light { color:#fff; }

/* ---------- Scroll menu: hidden over the hero, full width once it shows ---------- */
.topbar { position:fixed; left:0; right:0; top:0; z-index:100; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(12px);
          -webkit-backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--border);
          transition:background .35s ease, border-color .35s ease, color .35s ease; }
.brand { position:relative; display:block; }
.brand .logo-white { display:none; height:40px; width:auto; }
/* Home: over the hero the menu is transparent (white logo, white links); past the hero it becomes the solid bar */
.topbar.is-top { background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; color:#fff; }
.topbar.is-top .logo-color { display:none; } .topbar.is-top .logo-white { display:block; }
.topbar.is-top .menu a:not(.btn) { color:#fff; }
.topbar.is-top .menu a[aria-current] { box-shadow:inset 0 -2px 0 var(--green); }
.topbar.is-top .icon-btn { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35); color:#fff; }
.topbar.is-top .menu.is-open a:not(.btn) { color:var(--slate); }   /* phone menu panel is white */
.topbar.is-static { position:sticky; }   /* inner pages: the solid menu is always there */
.topbar-in { display:flex; align-items:center; justify-content:space-between; height:68px; padding:0 32px; }   /* full width on purpose */
.brand img { height:36px; width:auto; display:block; }
.menu { display:flex; align-items:center; gap:26px; font-weight:600; font-size:16px; white-space:nowrap; }
.menu a { text-decoration:none; padding:10px 0; }
.menu a[aria-current] { box-shadow:inset 0 -2px 0 var(--green); }
.menu .btn { padding:11px 18px; }
.menu-mob { display:none; gap:8px; }
.icon-btn { width:44px; height:44px; border:1px solid #d3e8c2; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--slate); padding:0; }
.menu.is-open { display:flex; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:#fff; padding:8px 20px 20px; border-bottom:1px solid var(--border); }
.menu.is-open a { padding:14px 0; border-bottom:1px solid var(--border); }
.menu.is-open .btn { margin-top:14px; text-align:center; border:0; }

/* ---------- 1. Hero additions (the hero itself is css/hero.css) ---------- */
.hero-wrap { position:relative; }
.hs .hs-inner { padding-top:clamp(132px, 16vh, 170px); }   /* text sits lower, closer to the middle of the sky */
@media (min-width:1024px) {
  .hs-media { margin-top:-24%; }
  /* a soft slate shade on the left, behind the text, so every line stays readable over the bright sky */
  .hs-fade { background:
      radial-gradient(ellipse 52% 46% at 24% 18%, rgba(16,48,61,.8) 0%, rgba(16,48,61,.5) 55%, rgba(16,48,61,0) 100%),
      linear-gradient(#10303d 0%, rgba(16,48,61,.85) 13%, rgba(16,48,61,.45) 27%, rgba(16,48,61,0) 42%, rgba(16,48,61,0) 100%); }
  .hs-explainer, .hs-call { text-shadow:0 1px 8px rgba(11,37,49,.7); }
}   /* the photo slides further up behind the text (sky only), so the steps stay on screen */

/* ---------- 2. The missed calls (dark) ---------- */
.missed { background:radial-gradient(120% 90% at 75% 40%, #173f50 0%, var(--slate) 55%, var(--slate-3) 100%); color:#fff; overflow:hidden; }
.missed-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; min-height:min(760px, 92vh); }
.missed-copy h2 { max-width:13ch; margin-bottom:28px; }
.missed-copy p { font-size:21px; color:#dbe6ea; max-width:30ch; }
.missed-stage { display:flex; flex-direction:column; align-items:center; position:relative; }
.phone { position:relative; width:300px; height:610px; border-radius:46px; background:#0b1f28; padding:12px;
         box-shadow:0 0 0 2px #2a4b59, 0 40px 80px rgba(0,0,0,.5), 0 0 120px rgba(118,188,67,.12); }
.phone::before { content:""; position:absolute; top:22px; left:50%; width:96px; height:26px; margin-left:-48px; background:#000; border-radius:20px; z-index:3; }
.phone-screen { position:absolute; inset:12px; border-radius:36px; overflow:hidden; }
.phone-screen.lock { background:linear-gradient(180deg, #1d4a5d 0%, #0d2a36 100%); color:#fff; padding:58px 14px 14px; }
.phone-screen.search { background:#fff; color:var(--slate); padding:52px 14px 14px; opacity:0; }   /* shown by the animation; see the no-motion rule below */
.ph-status { position:absolute; top:16px; left:26px; right:26px; display:flex; justify-content:space-between; font-size:13px; font-weight:700; }
.ph-icons { display:flex; gap:3px; align-items:flex-end; } .ph-icons i { width:4px; background:currentColor; border-radius:1px; }
.ph-icons i:nth-child(1){height:5px}.ph-icons i:nth-child(2){height:8px}.ph-icons i:nth-child(3){height:11px}
.ph-icons b { width:20px; height:10px; border:1.5px solid currentColor; border-radius:3px; margin-left:4px; position:relative; }
.ph-icons b::after { content:""; position:absolute; inset:1.5px; background:currentColor; border-radius:1px; }   /* fully charged */
.ph-status.dark { color:var(--slate); }
.lock-time { font-family:var(--head); font-weight:600; font-size:62px; text-align:center; line-height:1; margin-top:10px; letter-spacing:-.02em; }
.lock-date { text-align:center; font-size:15px; opacity:.8; margin:8px 0 26px; }
.notifs { display:flex; flex-direction:column; gap:9px; }
.notif { display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.16); will-change:transform, opacity; border-radius:18px; padding:11px 12px; font-size:13px; }
.notif .app { width:34px; height:34px; border-radius:9px; background:#e5484d; display:flex; align-items:center; justify-content:center; flex:none; }
.notif .app svg { width:18px; height:18px; fill:#fff; }
.notif .nt { display:flex; flex-direction:column; line-height:1.3; opacity:.9; } .notif .nt b { font-size:14px; opacity:1; }
.notif .when { margin-left:auto; align-self:flex-start; font-size:12px; opacity:.7; }
.sbar { display:flex; gap:8px; align-items:center; background:#f1f3f4; border-radius:22px; padding:10px 14px; font-size:14px; color:#3c4043; margin-bottom:12px; }
.res { display:flex; gap:10px; padding:11px 4px; border-bottom:1px solid #eceff1; font-size:13px; }
.res .thumb { width:62px; height:52px; border-radius:9px; background:#dfe6e2; flex:none; }
.res .thumb.none { display:flex; align-items:center; justify-content:center; text-align:center; font-size:12px; color:#4f5f66; line-height:1.2; }
.res .rt { display:flex; flex-direction:column; gap:3px; min-width:0; }
.res .bar { display:block; height:9px; background:#d7dcdf; border-radius:5px; }
.res em { font-style:normal; color:var(--muted); font-size:12px; }
.res .stars { color:var(--slate); font-size:12px; }
.res.you { border:1.5px dashed #9aa7ad; border-radius:12px; margin-top:12px; padding:11px; }
.res .tag { align-self:flex-start; background:var(--slate); color:#fff; font-size:10px; letter-spacing:.06em; padding:1px 6px; border-radius:4px; }
.cap { font-family:var(--head); font-weight:700; font-size:22px; margin:26px 0 0; text-align:center; color:#fff; }
.cap-2 { position:absolute; bottom:0; left:0; right:0; opacity:0; }   /* sits on top of cap-1; swapped by the animation */

/* ---------- 3. If nothing changes (light) ---------- */
.nothing { background:var(--white); }
.nothing-intro { font-size:22px; max-width:46ch; color:var(--ink-2); margin-bottom:56px; }
.nothing-h { font-size:18px; font-weight:700; color:var(--green-text); margin-bottom:22px; letter-spacing:0; }
.nothing-list { list-style:none; margin:0 0 56px; padding:0; }
.nothing-list li { font-family:var(--head); font-weight:800; font-size:clamp(30px, 4.6vw, 64px); line-height:1.08; letter-spacing:-.02em; margin-bottom:18px; max-width:20ch; }
.nothing-turn { font-family:var(--head); font-weight:700; font-size:clamp(22px, 2.4vw, 30px); line-height:1.25; max-width:28ch; padding-left:22px; border-left:3px solid var(--green); }

/* ---------- 4. The fix, step by step (light) ---------- */
.fix { background:var(--surface); }
.fix-h { margin-bottom:36px; max-width:16ch; }
/* progress line above the row: fills as the active step moves from 1 to 5 */
.fix-rail { position:relative; height:2px; background:#d3e1d6; margin:0 0 22px; border-radius:2px; }
.fix-rail-fill { position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--green); box-shadow:0 0 6px rgba(118,188,67,.6); transform-origin:left center; }
.steps { list-style:none; margin:0; padding:0; display:flex; gap:14px; align-items:stretch; }
.step { flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px 18px; position:relative;
        transition:flex-grow .7s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease; will-change:flex-grow; }
.step-head { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:12px; }
.mk { width:28px; height:28px; flex:none; border-radius:50%; background:var(--slate); color:#fff; border:2px solid var(--green); font-family:var(--head); font-weight:800;
      font-size:13px; display:flex; align-items:center; justify-content:center; transition:background .3s ease, color .3s ease; }
.step-head h3 { font-size:18px; line-height:1.25; }
.step p { font-size:16px; color:var(--ink-2); margin:0 0 16px; }
.step .ui { margin-top:14px; }
.step-ic { display:none; }
/* the product screens */
.ui { position:relative; color:var(--slate); background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px; font-size:13px; box-shadow:0 18px 40px rgba(16,48,61,.10); }
.ui .ex { position:absolute; top:-10px; right:12px; background:var(--slate); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; }
.ui-top { font-weight:700; font-size:12px; color:var(--muted); margin-bottom:10px; }
.gp { border:1px solid var(--border); border-radius:12px; padding:10px; }
.gp-photos { display:flex; gap:4px; margin-bottom:8px; } .gp-photos i { flex:1; height:46px; border-radius:6px; background:linear-gradient(135deg,#c9dcc0,#e7efe3); }
.gp-photos i:nth-child(2){ background:linear-gradient(135deg,#b7cfd8,#e2ecef);} .gp-photos i:nth-child(3){ background:linear-gradient(135deg,#d9cdb8,#efe9de);}
.gp strong { display:block; font-family:var(--head); font-size:15px; } .gp .stars { color:#e8a33d; font-size:13px; }
.gp-meta { display:block; color:var(--muted); font-size:12px; }
.gp-btns { display:flex; gap:6px; margin-top:8px; } .gp-btns b { flex:1; text-align:center; font-size:11px; border:1px solid var(--border); border-radius:14px; padding:5px 0; color:var(--green-text); }
.bub { border-radius:14px; padding:10px 12px; margin-bottom:8px; line-height:1.4; max-width:92%; }
.bub b { display:block; font-size:12px; margin-bottom:2px; }
.bub.in { background:#e6eaec; color:var(--slate); }   /* darker gray so the customer's message reads clearly */
.bub.out { background:var(--slate); color:#fff; margin-left:auto; }
.bub small { display:block; margin-top:6px; font-size:11px; color:var(--green-glow); }
.job { display:grid; grid-template-columns:1fr auto; gap:2px 8px; border:1px solid var(--border); border-radius:10px; padding:9px 10px; margin-bottom:7px; color:var(--muted); font-size:12px; }
.job strong { color:var(--slate); font-size:13px; grid-column:1; }
.job.new { border-color:var(--green); box-shadow:0 0 0 3px rgba(118,188,67,.18); }
.pill { grid-column:2; grid-row:1 / span 3; align-self:center; background:var(--green); color:var(--slate); font-size:11px; padding:3px 9px; border-radius:20px; }
.inv-row, .inv-total { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px solid var(--border); }
.inv-row.muted { color:var(--muted); font-size:12px; }
.inv-total { font-weight:700; font-family:var(--head); border:0; font-size:15px; }
.stamp { position:absolute; right:16px; bottom:48px; transform:rotate(-12deg); border:3px solid var(--green); color:var(--green-text); font-family:var(--head); font-weight:800;
         font-size:22px; padding:2px 12px; border-radius:8px; letter-spacing:.04em; background:rgba(255,255,255,.85); }
.rv-stars { display:flex; gap:6px; justify-content:center; margin:10px 0 12px; font-size:26px; color:#e8a33d; } .rv-stars i { font-style:normal; }
.rv-btn { display:block; text-align:center; background:var(--green); color:var(--slate); border-radius:10px; padding:9px; font-size:13px; }

/* desktop: the active step widens and shows its text and screen. Inactive steps show only the number and title,
   and their hidden content is taken out of the flow, so the row is only as tall as the open step. */
@media (min-width:1024px) {
  .js-motion .step { flex-grow:1; }
  .js-motion .step:not(.is-active) p, .js-motion .step:not(.is-active) .ui { position:absolute; left:18px; right:18px; visibility:hidden; opacity:0; }
  .js-motion .step.is-active { flex-grow:2.4; border-color:var(--green); box-shadow:0 24px 60px rgba(16,48,61,.14); }
  .js-motion .step.is-active .step-head { flex-direction:row; align-items:center; }
  .js-motion .step.is-active p, .js-motion .step.is-active .ui { animation:stepin .55s cubic-bezier(.22,1,.36,1) .2s both; }
  .steps { align-items:stretch; }
  .js-motion .step.is-done .mk { background:var(--green); color:var(--slate); }
  .js-motion .step:not(.is-active) { cursor:default; }
  .js-motion .step:not(.is-active) h3 { color:var(--muted); }
  .js-motion .step:not(.is-active) .step-ic { display:block; position:absolute; left:18px; bottom:20px; width:44px; height:44px; opacity:.55; }
}
.steps.is-measuring .step, .steps.is-measuring .step * { transition:none !important; animation:none !important; }
@keyframes stepin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---------- 6. What you get + monthly report ---------- */
.report { background:var(--white); }
.report-grid { display:flex; flex-wrap:wrap; gap:48px 64px; align-items:flex-start; }
.report-copy { flex:1 1 400px; min-width:0; }
.dash { flex:1.15 1 460px; min-width:0; }
.report-copy h2 { margin-bottom:10px; }
.report-copy h3 { color:var(--green-text); font-size:18px; margin-bottom:26px; }
.getlist { list-style:none; margin:0; padding:0; }
.getlist li { display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--border); }
.getlist img { width:36px; height:36px; flex:none; margin-top:2px; }
.getlist p { margin:0; flex:1; }
.dash { margin:0; background:linear-gradient(160deg, #173f50, var(--slate) 60%, var(--slate-3)); color:#fff; border-radius:22px; padding:26px;
        box-shadow:0 40px 80px rgba(16,48,61,.28), inset 0 0 0 1px rgba(255,255,255,.06); position:relative; }
.dash-top { display:flex; gap:12px; align-items:baseline; margin-bottom:20px; }
.dash-top strong { font-family:var(--head); font-size:18px; } .dash-top span { color:#a9bec6; font-size:15px; }
.dash-top .ex { margin-left:auto; background:rgba(255,255,255,.12); color:#fff; font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; }
.kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px; }
.kpi { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; }
.kpi span { display:block; font-size:13px; color:#a9bec6; }
.kpi b { font-family:var(--head); font-weight:800; font-size:30px; letter-spacing:-.01em; }
.dash-sec { font-size:13px; color:#a9bec6; margin:6px 0 10px; font-weight:600; }
.sources { list-style:none; margin:0 0 20px; padding:0; }
.sources li { display:grid; grid-template-columns:110px 1fr 44px; gap:10px; align-items:center; font-size:14px; margin-bottom:9px; }
.sources i { display:block; height:10px; border-radius:6px; background:linear-gradient(90deg, var(--green), var(--green-glow)); width:var(--w); box-shadow:0 0 12px rgba(118,188,67,.45); }
.sources b { text-align:right; font-family:var(--head); font-size:14px; }
.weeks { display:flex; gap:14px; align-items:flex-end; height:90px; padding:0 4px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:14px; }
.weeks i { flex:1; height:var(--h); border-radius:6px 6px 0 0; background:linear-gradient(180deg, var(--green-glow), rgba(118,188,67,.35)); }
.dash figcaption { font-size:13px; color:#a9bec6; }
.follow { flex:1 1 100%; font-size:21px; max-width:58ch; margin:12px 0 0; padding-top:28px; border-top:1px solid var(--border); }

/* ---------- 7. Texas map (dark, holographic) ---------- */
.map { background:radial-gradient(90% 80% at 60% 55%, #12394a 0%, var(--slate) 55%, #0a222c 100%); color:#fff; overflow:hidden; }
.map-grid { display:grid; grid-template-columns:330px 1fr; gap:24px; align-items:center; min-height:min(820px, 94vh); }
.map-stage { margin-right:-140px; }   /* the map bleeds past the margin on the right, on purpose */
.map-copy h2 { font-size:clamp(32px, 3.4vw, 46px); }
.map-copy p { color:#dbe6ea; font-size:19px; max-width:34ch; }
.map-copy h2 { margin-bottom:22px; }
.map-stage { position:relative; }
.tx-map { display:block; width:100%; height:auto; overflow:visible; }
.tx-pulse { transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:no-preference) {
  .tx-town.is-lit .tx-pulse { animation:txpulse 2.4s ease-out infinite; }
}
@keyframes txpulse { 0% { transform:scale(.6); opacity:1; } 100% { transform:scale(2.4); opacity:0; } }

/* ---------- 8. Fit: sticky notes become the system ---------- */
.fit { background:var(--surface); overflow:hidden; }
.fit-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; min-height:min(760px, 90vh); }
.fit h2 { margin-bottom:22px; }
.trades { color:var(--muted); font-size:17px; margin-top:22px; }
.checks { list-style:none; margin:0; padding:0; }
.checks li { display:flex; gap:14px; align-items:center; font-family:var(--head); font-weight:700; font-size:20px; line-height:1.3; padding:14px 0; border-bottom:1px solid var(--border); transition:color .4s ease; }
.checks svg { width:28px; height:28px; flex:none; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.js-motion .fit .checks li { color:#9aa7ad; }
.js-motion .fit .checks li svg { transform:scale(.6); opacity:.4; }
.js-motion .fit .checks li.is-on { color:var(--slate); }
.js-motion .fit .checks li.is-on svg { transform:none; opacity:1; }
/* the desk: five note-and-card pairs, stacked */
.desk { position:relative; background:#fff; border:1px solid var(--border); border-radius:22px; padding:30px 26px; box-shadow:0 30px 70px rgba(16,48,61,.12);
        display:flex; flex-direction:column; gap:12px; }
.desk .ex { position:absolute; top:-11px; right:18px; background:var(--slate); color:#fff; font-size:11px; font-weight:700; padding:2px 9px; border-radius:6px; }
.pair { position:relative; height:64px; }
.note, .pair .card { position:absolute; inset:0; display:flex; align-items:center; border-radius:10px; }
.note { background:#fdf3c4; color:#5a4a12; font-family:"Caveat", cursive; font-weight:600; font-size:26px; padding:0 20px; transform:rotate(var(--r)); box-shadow:0 8px 16px rgba(90,74,18,.14);
        opacity:0; visibility:hidden; }   /* default (no motion): the finished state shows only the cards */
.pair .card { background:#fff; border:1px solid var(--border); padding:0 16px; box-shadow:0 10px 24px rgba(16,48,61,.08);
              display:grid; grid-template-columns:38px 1fr; grid-template-rows:auto auto; column-gap:12px; align-content:center; }
.pair .card .ci { grid-row:1 / 3; width:38px; height:38px; border-radius:10px; background:var(--surface); display:flex; align-items:center; justify-content:center; }
.pair .card .ci img { width:28px; height:28px; }
.pair .card b { font-family:var(--head); font-size:15px; line-height:1.25; }
.pair .card span:not(.ci) { font-size:13px; color:var(--green-text); font-weight:600; line-height:1.3; }
@media (max-width:600px) { .pair { height:68px; } .note { font-size:23px; } .pair .card b { font-size:14px; } .desk { padding:26px 16px; } }
.js-motion .note { opacity:1; visibility:visible; }

/* ---------- 9. Recent work: screenshots scroll inside browser frames ---------- */
.work { background:var(--white); }
.work-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; }
.work-head p { color:var(--muted); font-size:19px; margin:0; max-width:32ch; }
.work-grid { display:grid; grid-template-columns:1fr 1fr; gap:36px; }
.site { margin:0; }
.browser { border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:0 30px 60px rgba(16,48,61,.14); background:#fff; }
.bar { height:38px; background:#eef2f3; display:flex; align-items:center; gap:7px; padding:0 14px; }
.bar i { width:10px; height:10px; border-radius:50%; background:#cfd6d9; }
.bar span { margin-left:12px; flex:1; background:#fff; border-radius:7px; font-size:13px; color:var(--muted); padding:4px 12px; }
.viewport { height:420px; overflow:hidden; position:relative; }
.viewport img { display:block; width:100%; height:auto; will-change:transform; }
.site figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-top:18px; }
.site .trade { width:100%; font-size:13px; font-weight:700; color:var(--green-text); }
.site figcaption b { font-family:var(--head); font-size:20px; }
.site figcaption .tlink { margin-left:auto; padding:4px 0; }

/* ---------- 10. Caleb: signals out of the noise ---------- */
.caleb { background:var(--white); border-top:1px solid var(--border); }
.caleb-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:center; }
.caleb h2 { margin-bottom:22px; }
.signal { position:relative; background:radial-gradient(90% 90% at 50% 50%, #173f50, var(--slate) 70%); border-radius:26px; padding:24px; box-shadow:0 30px 70px rgba(16,48,61,.22); }
.signal-svg { display:block; width:100%; height:auto; }
.signal-cap { display:flex; justify-content:space-between; margin:6px 6px 0; font-family:var(--head); font-weight:700; font-size:13px; color:#a9bec6; }
.signal-cap span:last-child { color:var(--green-glow); }
.who { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.avatar { width:64px; height:64px; flex:none; border-radius:50%; background:var(--surface); border:2px solid var(--green); display:flex; align-items:center; justify-content:center;
          font-family:var(--head); font-weight:800; color:var(--slate); background-size:cover; background-position:center; }
/* Caleb's photo fills the round frame */
.avatar picture, .avatar img { display:block; width:100%; height:100%; }
.avatar img { object-fit:cover; border-radius:50%; }
.byline { color:var(--muted); font-size:16px; margin:0; }
.caleb-copy p { max-width:60ch; }
.sig { font-family:"Caveat", cursive; font-weight:600; font-size:36px; color:var(--slate); margin:6px 0 4px; line-height:1; }

/* ---------- 10. Pricing ---------- */
.pricing { background:var(--white); border-top:1px solid var(--border); }
.pricing h2 { margin-bottom:36px; }
.sheets { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:start; margin-bottom:36px; }
.sheet { border:1px solid var(--border); border-radius:18px; padding:32px; background:#fff; }
.sheet.feature { border:2px solid var(--green); box-shadow:0 30px 60px rgba(16,48,61,.10); }
.sheet h3 { font-size:22px; }
.mini-rail { list-style:none; margin:16px 0 10px; padding:0; display:flex; gap:8px; position:relative; }
.mini-rail::before { content:""; position:absolute; left:16px; right:16px; top:16px; height:2px; background:var(--green); opacity:.5; }
.mini-rail li { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--ink-2); text-align:center; line-height:1.2; }
.mini-rail img { width:34px; height:34px; background:#fff; border-radius:10px; }
.mini-rail.one { justify-content:flex-start; } .mini-rail.one li { flex:0 0 auto; } .mini-rail.one::before { display:none; }
.price { font-family:var(--head); font-weight:800; font-size:46px; line-height:1.1; letter-spacing:-.02em; margin:10px 0 6px; }
.small { font-size:16px; color:var(--muted); }
.r-notes { display:grid; grid-template-columns:1fr 1fr; gap:24px 48px; margin-bottom:48px; }
.also { border-top:1px solid var(--border); padding-top:28px; }
.also h3 { margin-bottom:14px; }
.also ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 36px; }
.also li { font-weight:600; padding-left:14px; border-left:2px solid var(--green); line-height:1.3; }

/* ---------- 11. FAQ (two columns, calm) ---------- */
.faq { background:var(--surface); }
.faq-grid { display:grid; grid-template-columns:.9fr 1.3fr; gap:64px; align-items:start; }
.faq-side { position:sticky; top:110px; }
.faq-side h2 { margin-bottom:24px; max-width:9ch; }
.qa { border-bottom:1px solid #cfd9dc; }
.qa summary { list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center; min-height:64px; padding:16px 0; cursor:pointer; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary h3 { font-family:var(--body); font-weight:600; font-size:20px; }
.plus { position:relative; width:18px; height:18px; flex:none; }
.plus::before, .plus::after { content:""; position:absolute; left:0; right:0; top:8px; height:2px; background:var(--slate); transition:transform .25s ease; }
.plus::after { transform:rotate(90deg); }
.qa[open] .plus::after { transform:rotate(0); }
.qa-a { padding:0 0 20px; color:var(--ink-2); }
.qa-a p { margin:0; max-width:62ch; }

/* ---------- 12. Closing ---------- */
.closing { position:relative; color:#fff; padding:150px 0; overflow:hidden; background:var(--slate); }
.closing-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 70%; }
.closing::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(16,48,61,.94) 0%, rgba(16,48,61,.8) 45%, rgba(16,48,61,.35) 100%); }
.closing-in { position:relative; z-index:2; }
.closing h2 { max-width:16ch; margin-bottom:22px; color:#fff; }
.closing p { font-size:20px; max-width:44ch; color:#e8eff1; }
.closing-act { display:flex; flex-wrap:wrap; gap:16px 26px; align-items:center; margin-top:10px; }
.orcall { margin:0; } .orcall a { font-weight:600; text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:2px; text-underline-offset:4px; }

/* ---------- Footer ---------- */
.footer { background:var(--surface); border-top:1px solid var(--border); padding:52px 0 32px; font-size:17px; }
.foot-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; }
.foot-grid img { height:36px; width:auto; }
.foot-col a { display:block; padding:10px 0; text-decoration:none; }
.foot-bottom { margin-top:26px; font-size:15px; color:var(--muted); }

/* ---------- No motion (reduced motion, or JavaScript off): show finished states ---------- */
html:not(.js-motion) .phone-screen.search { opacity:1; position:relative; inset:auto; margin-top:16px; height:auto; }
html:not(.js-motion) .phone { height:auto; }
html:not(.js-motion) .phone-screen { position:relative; inset:auto; }
html:not(.js-motion) .cap-2 { position:static; opacity:1; margin-top:6px; }

/* ---------- Tablet and phone ---------- */
@media (max-width:1023px) {
  .menu { display:none; } .menu-mob { display:flex; } .topbar-in { padding:0 20px; height:64px; }
  .menu.is-open { top:64px; }
  .scene { padding:88px 0; }
  .missed-grid, .map-grid, .fit-grid, .caleb-grid, .faq-grid, .work-grid { grid-template-columns:1fr; gap:44px; }
  .work-head { flex-direction:column; align-items:flex-start; } .fit-grid { min-height:0; }
  .viewport { height:340px; }
  .missed-copy h2 { max-width:none; }
  .steps { flex-direction:column; gap:28px; height:auto !important; }   /* the desktop height lock never applies here */
  .fix-rail { display:none; }
  .faq-side { position:static; }
  .map-stage { margin:0 -20px; overflow:hidden; } .map-grid { min-height:0; }
  .tx-map { width:185%; max-width:none; margin-left:-62%; margin-top:-14%; margin-bottom:-18%; }   /* phones: zoom in on central Texas so the towns are readable */
  .sheets, .r-notes { grid-template-columns:1fr; }
  .photo { width:240px; height:280px; }
}
@media (max-width:600px) {
  body { font-size:17px; }
  .wrap { padding:0 20px; }
  .brand .logo-white { height:32px; }
  .hs .hs-inner { padding-top:96px; }
  .scene { padding:72px 0; }
  .missed-copy p, .nothing-intro, .follow, .closing p { font-size:18px; }
  .phone { width:270px; height:550px; }
  .kpi b { font-size:24px; }
  .sources li { grid-template-columns:96px 1fr 40px; font-size:13px; }
  .sheet { padding:24px; } .price { font-size:38px; }
  .foot-grid { grid-template-columns:1fr; }
  .closing { padding:100px 0; }
  .btn { display:block; text-align:center; }
  .closing-act { flex-direction:column; align-items:stretch; }
}

/* =====================================================================
   Inner pages (Lead System, Contact, Privacy, 404)
   ===================================================================== */
.eyebrow { font-family:var(--head); font-weight:700; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); margin:0 0 14px; }

/* page hero: slate, text left, floating example screens right */
.page-hero { background:radial-gradient(110% 90% at 80% 30%, #173f50 0%, var(--slate) 55%, var(--slate-3) 100%); color:#fff; padding:96px 0 104px; overflow:hidden; }
.ph-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.page-hero h1 { font-weight:800; font-size:clamp(36px, 4.6vw, 58px); line-height:1.05; letter-spacing:-.02em; margin-bottom:20px; color:#fff; max-width:17ch; }
.ph-lead { font-size:20px; line-height:1.55; color:#e3ebee; max-width:46ch; }
.ph-cta { display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; margin:28px 0 12px; }
.ph-small { font-size:16px; color:#c9d6db; max-width:52ch; }
.float-stack { position:relative; height:440px; }
/* will-change keeps each card on its own GPU layer. Without it, Chromium browsers (Chrome, Brave, Edge) snap the slow
   10px float to whole pixels, so the cards hop instead of drift. Safari already does this on its own. */
.float-stack .ui { position:absolute; width:300px; will-change:transform; backface-visibility:hidden; }
.fs-1 { left:0; top:10px; } .fs-2 { right:0; top:150px; } .fs-3 { left:40px; bottom:0; width:260px !important; }
.fs-3 .stamp { bottom:14px; right:14px; }

/* a website is a tool */
.tool-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
.tool-big { font-family:var(--head); font-weight:700; font-size:clamp(22px, 2.2vw, 28px); line-height:1.35; color:var(--slate); margin-bottom:22px; }
.tool p:not(.tool-big) { max-width:62ch; color:var(--ink-2); }

/* four parts, one engine */
.engine-sec { background:var(--surface); }
.engine-sec h2 { margin-bottom:36px; }
.model { max-width:1324px; margin:0 auto 40px; padding:0 20px; }
.model > img { display:block; width:100%; height:auto; }   /* only the phone image; the desktop model is HTML */
.model-phone { display:none !important; max-width:352px; margin:0 auto; }
.parts-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px 48px; }
.parts-list li { display:flex; gap:14px; align-items:flex-start; }
.parts-list .mk { margin-top:2px; }
.parts-list p { margin:0; }

/* what changes */
.changes h2 { margin-bottom:36px; }
.change-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:40px 56px; }
.change-grid li { display:flex; gap:18px; align-items:flex-start; }
.change-grid img { flex:none; }
.change-grid p { margin:4px 0 0; font-size:19px; }

/* normal week timeline */
.week { background:var(--surface); }
.week-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
.week-side { position:sticky; top:120px; }
.ex-tag { display:inline-block; margin-top:16px; background:var(--slate); color:#fff; font-size:12px; font-weight:700; padding:3px 10px; border-radius:6px; }
.timeline { list-style:none; margin:0; padding:0 0 0 0; position:relative; }
.tl-track, .tl-line { position:absolute; left:21px; top:22px; bottom:22px; width:2px; background:#d3e1d6; }
.tl-line { background:var(--green); box-shadow:0 0 6px rgba(118,188,67,.6); }
.tl-stop { position:relative; display:flex; gap:20px; align-items:flex-start; padding:0 0 34px; }
.tl-stop img { width:44px; height:44px; flex:none; position:relative; background:var(--surface); }
.tl-stop p { margin:6px 0 0; font-size:19px; }

/* what you get */
.get h2 { margin-bottom:32px; }
.get-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.get-card { border:1px solid var(--border); border-radius:20px; padding:32px; background:#fff; }
.get-card.dark { background:var(--slate); color:#fff; border-color:var(--slate); }
.get-card h3 { font-size:22px; margin-bottom:16px; }
.get-card ul { list-style:none; margin:0; padding:0; }
.get-card li { position:relative; padding:10px 0 10px 32px; border-top:1px solid var(--border); }
.get-card.dark li { border-top-color:rgba(255,255,255,.12); color:#e3ebee; }
.get-card li::before { content:""; position:absolute; left:2px; top:17px; width:14px; height:8px; border:solid var(--green); border-width:0 0 2.5px 2.5px; transform:rotate(-45deg); }
.partner { margin-top:32px; padding:28px 32px; border-left:3px solid var(--green); background:var(--surface); border-radius:0 14px 14px 0; }
.partner p { margin:0 0 6px; font-size:19px; max-width:70ch; }

/* three steps */
.start h2 { margin-bottom:40px; }
.go-steps { list-style:none; margin:0 0 36px; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; position:relative; }
.go-step:not(:last-child)::after { content:""; position:absolute; left:32px; top:13px; width:calc(100% + 32px - 36px); height:2px; background:var(--green);
  box-shadow:0 0 6px rgba(118,188,67,.5); transform-origin:left center; transition:transform .6s ease-out; }
.go-step:nth-child(2)::after { transition-delay:.5s; }
.js-motion .go-steps:not(.is-in) .go-step::after { transform:scaleX(0); }
.go-step:last-child .mk { background:var(--green); color:var(--slate); box-shadow:0 0 0 6px rgba(118,188,67,.18); }   /* where the line ends: launch */
.go-step { position:relative; }
.go-step .mk { position:relative; margin-bottom:18px; }
.go-step h3 { font-size:21px; margin-bottom:8px; }
.go-step p { color:var(--ink-2); margin:0; }

/* pricing */
.cost { background:var(--surface); }
.cost-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.cost-card { background:#fff; border:2px solid var(--green); border-radius:24px; padding:40px; box-shadow:0 30px 60px rgba(16,48,61,.10); }
.cost-card h2 { margin-bottom:22px; }
.cost-card h3 { font-size:22px; }
.terms { margin-top:24px; padding-top:22px; border-top:1px solid var(--border); }
.term { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.term.rec { border-color:var(--green); background:#f6fbf2; }
.term b { font-family:var(--head); font-size:16px; } .term span { color:var(--ink-2); font-size:16px; }
.after { font-size:16px; color:var(--ink-2); margin:14px 0 0; }
.cost-side .crew { font-family:var(--head); font-weight:800; font-size:clamp(24px, 2.6vw, 34px); line-height:1.2; letter-spacing:-.01em; }
.crew strong { font-weight:800; }
.cost-side p { font-size:19px; }
.notready { margin-top:30px; padding-top:22px; border-top:1px solid #cfd9dc; }

/* add-ons */
.further-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
.further h2 { margin-bottom:16px; }
.addons { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.addons li { border:1px solid var(--border); border-radius:12px; padding:16px 18px; font-weight:600; }

@media (max-width:1199px) { .model-wide { display:none !important; } .model-phone { display:block !important; } }
@media (max-width:1023px) {
  .ph-grid, .tool-grid, .week-grid, .get-cards, .cost-grid, .further-grid { grid-template-columns:1fr; gap:40px; }
  .float-stack { height:auto; max-width:none; display:flex; gap:16px; align-items:flex-start; }
  .float-stack .ui { position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto; width:auto !important; flex:1 1 0; }
  .float-stack .fs-3 { display:none; }
  .week-side { position:static; }
  .parts-list, .change-grid { grid-template-columns:1fr; }
}
@media (max-width:767px) {
  .go-steps { grid-template-columns:1fr; gap:28px; }
  .go-step:not(:last-child)::after { left:13px; top:32px; width:2px; height:calc(100% - 32px + 28px); transform-origin:center top; }
  .js-motion .go-steps:not(.is-in) .go-step::after { transform:scaleY(0); }
  .go-step { padding-left:48px; } .go-step .mk { position:absolute; left:0; top:0; }
  .addons { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .page-hero { padding:72px 0 80px; }
  .float-stack { flex-direction:column; } .float-stack .fs-2 { display:none; }
  .cost-card, .get-card { padding:26px 22px; }
  .tl-stop p, .change-grid p, .cost-side p, .partner p { font-size:17px; }
}

/* ---------- Contact ---------- */
.book { padding:72px 0 96px; background:var(--white); }
.book-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:56px; align-items:start; }
.book h1 { font-weight:800; font-size:clamp(38px, 4.6vw, 58px); line-height:1.05; letter-spacing:-.02em; margin-bottom:18px; }
.book-lead { font-size:20px; line-height:1.55; color:var(--ink-2); max-width:42ch; }
.book-call { font-size:17px; margin-bottom:34px; }
.book-call a { font-weight:700; text-decoration:underline; text-decoration-color:var(--green); text-decoration-thickness:2px; text-underline-offset:4px; }
.small-h2 { font-size:22px; letter-spacing:0; margin-bottom:18px; }
.call-steps { list-style:none; margin:0 0 22px; padding:0; position:relative; }
.cs-line { position:absolute; left:13px; top:14px; bottom:30px; width:2px; background:var(--green); }
.call-steps li { position:relative; display:flex; gap:16px; align-items:flex-start; padding-bottom:18px; }
.call-steps .mk { position:relative; }
.call-steps p { margin:2px 0 0; }
.book-note { color:var(--muted); font-size:16px; max-width:52ch; }
.book-cal { background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:0 30px 60px rgba(16,48,61,.10); overflow:hidden; position:sticky; top:96px; }
.calendly-inline-widget { min-width:320px; height:700px; }
.cal-fallback { text-align:center; margin:0; padding:10px 0 14px; border-top:1px solid var(--border); font-size:15px; }
.talk { background:var(--surface); }
.talk-grid { display:flex; gap:32px; align-items:center; max-width:820px; }
.avatar.big { width:120px; height:120px; font-size:30px; }
.talk h2 { margin-bottom:12px; } .talk p { max-width:56ch; }
.reach h2 { margin-bottom:28px; }
.reach-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin-bottom:24px; }
.reach-card { display:grid; grid-template-columns:48px 1fr; grid-template-rows:auto auto; column-gap:16px; align-items:center; padding:22px; border:1px solid var(--border);
              border-radius:16px; text-decoration:none; transition:border-color .2s ease, box-shadow .2s ease; }
.reach-card:hover { border-color:var(--green); box-shadow:0 12px 30px rgba(16,48,61,.08); }
.reach-card img { grid-row:1 / 3; } .reach-card span { font-size:14px; color:var(--muted); } .reach-card b { font-family:var(--head); font-size:18px; word-break:break-word; }
.support { max-width:70ch; }
.again { padding:72px 0; text-align:center; } .again-in { display:flex; justify-content:center; }

/* ---------- Privacy (readable document) ---------- */
.doc { padding:72px 0 96px; }
.doc-grid { display:grid; grid-template-columns:240px 1fr; gap:64px; align-items:start; }
.doc-toc { position:sticky; top:100px; font-size:15px; }
.doc-toc p { font-family:var(--head); font-weight:700; margin-bottom:10px; }
.doc-toc ol { list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--border); }
.doc-toc a { display:block; padding:6px 0; color:var(--ink-2); text-decoration:none; }
.doc-toc a:hover { color:var(--slate); text-decoration:underline; text-decoration-color:var(--green); }
.doc-body { max-width:720px; }
.doc-body h1 { line-height:1.1; font-weight:800; font-size:clamp(36px, 4vw, 52px); letter-spacing:-.02em; margin-bottom:8px; }
.updated { color:var(--muted); font-size:16px; margin-bottom:32px; }
.doc-body h2 { font-size:26px; letter-spacing:0; margin:44px 0 14px; scroll-margin-top:100px; }
.doc-body ul { padding-left:22px; margin:0 0 16px; } .doc-body li { margin-bottom:8px; }
.doc-body a:not(.tlink) { text-decoration:underline; text-decoration-color:var(--green); text-underline-offset:3px; }
.doc-body .tlink { padding:0; }

/* ---------- 404 ---------- */
.nf { padding:120px 0 140px; }
.nf-in { max-width:720px; }
.nf-line { width:100%; max-width:420px; height:auto; margin-bottom:24px; }
.nf h1 { font-weight:800; font-size:clamp(36px, 5vw, 60px); line-height:1.05; letter-spacing:-.02em; margin-bottom:16px; }
.nf p { font-size:20px; color:var(--ink-2); }
.nf-act { display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; margin-top:28px; }

@media (max-width:1023px) {
  .book-grid, .doc-grid { grid-template-columns:1fr; gap:40px; }
  .book-cal { position:static; }
  .doc-toc { position:static; }
}
@media (max-width:600px) {
  .reach-grid { grid-template-columns:1fr; }
  .talk-grid { flex-direction:column; align-items:flex-start; gap:20px; }
  .avatar.big { width:96px; height:96px; }
  .calendly-inline-widget { height:640px; }
}
.cal-inline { width:100%; height:700px; overflow:auto; }
@media (max-width:600px) { .cal-inline { height:720px; } }

/* ---------- Lead System model, desktop (live HTML: crisp at any size, animated). Scoped under .lsm.
   Laid out at 1320px wide and scaled to fit (js/site.js sets --lsm-scale). Phones and tablets keep the image. ---------- */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.lsm-wrap { --lsm-scale:1; height:calc(560px * var(--lsm-scale)); }
.lsm { --tint:#eef6e7; --line:#d3e8c2; width:1320px; transform:scale(var(--lsm-scale)); transform-origin:top left; font-family:var(--head); color:var(--slate); }
.lsm .card { background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:14px; }
.lsm .card h4 { margin:0 0 4px; font-size:19px; } .lsm .card p { margin:0 0 10px; font-size:16.5px; color:var(--muted); line-height:1.45; font-family:var(--body); }
.lsm .card ul { padding:0; margin:0; } .lsm .card li { list-style:none; display:flex; gap:7px; align-items:center; font-size:16px; font-weight:700; margin:7px 0; }
.lsm .card li img { width:22px; height:22px; flex:none; }
.lsm .engine { background:var(--slate); border-radius:22px; color:#fff; position:relative; padding:22px 24px 24px; }
.lsm .engine .t { font-size:25px; font-weight:800; } .lsm .engine .s { font-size:16.5px; color:#b9c9cf; margin-top:4px; font-family:var(--body); }
.lsm .engine .head { height:96px; }
.lsm .part { background:var(--slate-2); border-radius:14px; position:relative; flex:1; padding:22px 12px 12px; }
.lsm .part .num { font-size:14px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--green); }
.lsm .part .name { font-size:19px; font-weight:800; color:#fff; line-height:1.25; margin:3px 0 12px; }
.lsm .mod { background:#fff; color:var(--slate); border-radius:10px; padding:7px 8px; margin-top:8px; display:flex; gap:9px; align-items:center; font-size:16px; font-weight:700; line-height:1.25; }
.lsm .mod img { width:26px; height:26px; flex:none; }
.lsm .node { position:absolute; top:-12px; left:50%; margin-left:-12px; width:24px; height:24px; border-radius:50%; background:var(--slate); border:2px solid var(--green); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 0 5px rgba(118,188,67,.6); }
.lsm .hbar { height:2px; background:var(--green); border-radius:2px; box-shadow:0 0 4px rgba(118,188,67,.7); }
.lsm .call { color:var(--slate); background:var(--tint); border:1.5px solid var(--green); border-radius:40px; padding:10px 18px 10px 10px; display:flex; gap:12px; align-items:center; position:absolute; left:190px; width:540px; top:38px; }
.lsm .call img { width:40px; height:40px; flex:none; } .lsm .call b { font-size:17px; display:block; } .lsm .call span { display:block; font-size:16.5px; color:var(--muted); font-family:var(--body); }
.lsm .full { display:flex; align-items:flex-start; width:1320px; }
.lsm .side { width:170px; margin-top:90px; flex:none; }
.lsm .link { width:30px; margin-top:117px; flex:none; }
.lsm .core { width:920px; flex:none; }
.lsm .engine .rail { position:absolute; left:0; right:0; top:117px; }
.lsm .parts { display:flex; gap:14px; }
.lsm .loop { position:relative; height:100px; }
.lsm .loop svg { position:absolute; left:0; top:0; width:920px; height:100px; }
.model { margin-bottom:40px; }