/* ============================================================
   POLARIS — section & component layout styles
   ============================================================ */

/* ===== icon chip ===== */
.icon-chip { display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid; flex: none; }
/* matte silver — Linear-style: gradient border bright at top, fading toward bottom
   (masked pseudo so the stroke follows the radius and only the top edge catches light) */
.icon-chip.silver {
  position: relative;
  color: #d8dee7;
  border: none;
  background:
    radial-gradient(130% 90% at 50% -10%, rgba(255,255,255,0.07), transparent 55%),
    linear-gradient(180deg, #20242b, #15181d);
  box-shadow: none;
  text-shadow: none;
}
.icon-chip.silver::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.03) 55%, rgba(255,255,255,0) 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.icon-chip.silver svg { filter: none; position: relative; }

/* color-splashes off → neutralize the accent color tokens to gray */
body.no-splash {
  --c-red: #8b929c; --c-amber: #8b929c; --c-green: #8b929c;
  --c-blue: #8b929c; --c-purple: #8b929c; --c-teal: #8b929c;
}

/* ===== reveal — kept as a hook class; content is always visible.
   (Entrance animations are intentionally omitted so content never depends
   on an animation frame to appear.) ===== */
.reveal { }

/* ===== Hero load animation — Linear 1:1 (timings lifted from linear.app prod bundle) =====
   Text: tween 1s cubic-bezier(.25,.1,.25,1), from opacity 0 + blur(10px) + translateY(20%).
   Timeline: .2s window shell · .4s H1 line 1 + frame shine sweep · .5s H1 line 2 ·
   .6s subhead · .7s CTA row (ours; Linear has no hero buttons) · 1.3s window internals
   + floor/shadow/light (1.5s, 85% of the fade lands in the first 20%) · 2.0s badge */
@keyframes pol-rise { from { opacity: 0; filter: blur(10px); transform: translateY(20%); }
  to { opacity: 1; filter: blur(0px); transform: translateY(0%); } }
@keyframes pol-fade { from { opacity: 0; } to { opacity: 1; } }
/* 85% peak moved from 20% → 40% of the timeline (fix 2026-06-12): our floor/shadow
   are brighter than Linear's, so their original fast pop visibly led the window
   panel (80% vs 50% at t+0.25s) and read as a gap. Softer ramp lets the panel catch up. */
@keyframes pol-fade-85 { 0% { opacity: 0; } 40% { opacity: 0.85; } 100% { opacity: 1; } }
@keyframes pol-fade-85-grain { 0% { opacity: 0; } 40% { opacity: 0.47; } 100% { opacity: 0.55; } }
.hero .hero-h1 .hl-line,
.hero .subhead,
.hero .cta-row,
.hero .audience {
  opacity: 0;
  animation: pol-rise 1s cubic-bezier(.25,.1,.25,1) both;
  will-change: opacity, transform, filter;
}
.hero .hero-h1 .hl-line { display: inline-block; animation-delay: 0.4s; }
.hero .hero-h1 .hl-line2 { animation-delay: 0.5s; }
.hero .subhead { animation-delay: 0.6s; }
.hero .cta-row { animation-delay: 0.7s; }
.hero .audience { animation-delay: 2s; }
/* window: shell appears almost immediately, internals at 1.3s (opacity-only —
   a transform here would break the full-bleed 100vw centering) */
.hero .hero-preview {
  opacity: 0;
  animation: pol-fade 0.5s cubic-bezier(.455,.03,.515,.955) 0.2s both;
}
.lin-sb, .lin-content {
  opacity: 0;
  animation: pol-fade 1.5s cubic-bezier(.455,.03,.515,.955) 1.3s both;
}
/* safety net: never leave hero content hidden.
   Text gets transform/filter resets; the window pieces get opacity ONLY —
   .hero-preview centers itself via translateX(-50%), a forced transform:none
   shoves the whole window half a width to the right. */
body.anim-done .hero .hero-h1 .hl-line,
body.anim-done .hero .subhead,
body.anim-done .hero .cta-row,
body.anim-done .hero .audience { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
body.anim-done .hero .hero-preview,
body.anim-done .lin-sb,
body.anim-done .lin-content { opacity: 1 !important; animation: none !important; }
body.anim-done .lin-app { animation: none !important; }
body.anim-done .hero::after, body.anim-done .hero::before,
body.anim-done .lin-stage::after, body.anim-done .lin-shine, body.anim-done .lin-vshine { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-h1 .hl-line, .hero .subhead, .hero .cta-row, .hero .audience, .hero .hero-preview, .lin-sb, .lin-content {
    animation: none; opacity: 1;
  }
  .hero::after, .hero::before, .lin-stage::after, .lin-shine, .lin-vshine { animation: none; }
}

/* ============================================================
   STICKY HEADER — glassmorphic, hairline-divided (Linear-style)
   ============================================================ */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s ease, box-shadow .3s ease;
  border-bottom: 1px solid var(--hair-2); }
.site-header .header-inner {
  position: relative;
  /* 1fr auto 1fr: nav sits on the true page center regardless of how wide the
     logo (left) and lang toggle + CTA (right) are — flex space-between shifted
     it ~53px left because the right group is wider than the logo */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 60px; max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
}
.site-header .header-nav { justify-self: center; }
.site-header .header-actions { justify-self: end; }
/* glass layer behind header */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  background: rgba(8,9,11,0.55);
  opacity: 0; transition: opacity .3s ease;
}
.site-header.scrolled::before { opacity: 1; }
/* faint top highlight line (Linear) */
.site-header::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,139,245,0.5) 30%, rgba(255,255,255,0.35) 50%, rgba(124,139,245,0.5) 70%, transparent);
  opacity: 0; transition: opacity .3s ease;
}
.site-header.scrolled::after { opacity: 0.7; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand .name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink-0); }
.header-nav { display: flex; align-items: center; gap: 28px; }
.header-nav a { color: var(--ink-1); text-decoration: none; font-size: 14px; font-weight: 450; transition: color .15s ease; }
.header-nav a:hover { color: var(--ink-0); }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-actions .login { color: var(--ink-1); text-decoration: none; font-size: 14px; font-weight: 450; }
.header-actions .login:hover { color: var(--ink-0); }
@media (max-width: 860px) { .header-nav { display: none; } }

/* ===== Language toggle — frosted-glass pill (matches header glass) ===== */
.lang-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 9999px; border: 1px solid var(--hair);
  background: rgba(255,255,255,0.045);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(255,255,255,0.07) inset, 0 4px 12px -8px rgba(0,0,0,0.5); }
.lang-toggle button { font-family: var(--font); font-size: 12px; font-weight: 550; letter-spacing: 0.05em;
  color: var(--ink-2); background: none; border: none; border-radius: 9999px;
  padding: 5px 10px; cursor: pointer; line-height: 1;
  transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.lang-toggle button:hover { color: var(--ink-0); }
.lang-toggle button.on { color: var(--ink-0); background: rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 1px 2px rgba(0,0,0,0.35); }

/* footer language links */
.f-lang { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font);
  font-size: inherit; color: var(--ink-2); transition: color .15s ease; }
.f-lang:hover { color: var(--ink-0); }
.f-lang.on { color: var(--ink-0); }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 0; position: relative; overflow-x: clip; isolation: isolate;
  background: #08090a;
}
/* grey floor — a centered, fixed-width panel with rounded bottom corners (Linear) */
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  top: 0; bottom: 52px;
  width: min(2200px, calc(100% - 24px));
  border-radius: 0 0 8px 8px;
  /* floor-light.png — Linear-style lighting plate (40% alpha baked in):
     darkens the floor corners, pools light behind the window's base */
  background:
    url("assets/fx/floor-light.png") center bottom / 100% auto no-repeat,
    linear-gradient(180deg,
    #08090a 0%,
    #08090a 46%,
    #16191d 56%,
    #34383e 64%,
    #565a61 70%,
    #6c7078 76%,
    #777b83 82%,
    #777b83 100%);
  animation: pol-fade-85 1.5s cubic-bezier(.455,.03,.515,.955) 1.3s both;
}
/* film grain over the grey lower half — fades in with the floor.
   z-index 1 so it paints ABOVE the ::after floor panel (same-element pseudos
   paint ::before under ::after otherwise). Seamless 256px tile, overlay blend. */
.hero::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 50%; transform: translateX(-50%);
  top: 0; bottom: 52px;
  width: min(2200px, calc(100% - 24px));
  border-radius: 0 0 8px 8px;
  background-image: url("assets/fx/grain.png");
  background-size: 256px 256px; background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.55;
  animation: pol-fade-85-grain 1.5s cubic-bezier(.455,.03,.515,.955) 1.3s both;
  -webkit-mask-image: linear-gradient(180deg, transparent 48%, #000 66%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 48%, #000 66%, #000 100%);
}
/* sharp edge where the grey floor meets the dark page below (no fade) */
.problem-blend { position: relative; }
.hero .container { display: flex; flex-direction: column; align-items: stretch; position: relative; z-index: 1; }
.hero-copy { display: flex; flex-direction: column; justify-content: flex-start;
  align-items: flex-start; max-width: 1040px; padding: 200px 0 0; } /* Linear: 200px spacer above headline */
/* hero footer row: CTA buttons on the left, avatar badge on the right (Linear-style) */
.hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-top: 32px; position: relative; z-index: 1; } /* 32px: roomier gap below the subhead, per operator 2026-06-12 */
.hero .audience { margin-left: auto; /* stays right-aligned now that the trust line is gone */
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; color: #d0d6e0; cursor: default; white-space: nowrap;
  transition: color .2s ease; }
.hero .audience .geo { color: #8a8f98; transition: color .2s ease; }
.hero .audience:hover { color: #eef1f5; }
.hero .audience:hover .geo { color: #b6bcc6; }
.hero .audience .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; --gc: 116,170,255;
  background: radial-gradient(circle at 35% 30%, #cfe2ff, #74aaff 58%, #3f7fe0);
  animation: dot-glow 2.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero .audience .dot { animation: none; } }
.hero-h1 { margin: 0; max-width: 1040px; font-weight: 600; font-size: clamp(42px, 5.6vw, 64px);
  line-height: 1.05; letter-spacing: -0.035em; color: var(--ink-0); }
.hero-h2 { margin: 16px 0 0; max-width: 820px; font-weight: 500; font-size: clamp(21px, 2.7vw, 30px);
  line-height: 1.2; letter-spacing: -0.02em; color: var(--ink-0); }
.hero .subhead { margin: 18px 0 0; max-width: 880px; color: #8a8f98; font-size: 19px; line-height: 1.62; } /* 880 (was 800): Spanish copy must never wrap to a 3rd line; #8a8f98 per operator 2026-06-12 */
.hero .cta-row { display: flex; align-items: center; gap: 14px; margin: 0; } /* spacing owned by .hero-foot now */
.hero .trust { margin: 0; font-family: var(--mono); font-size: 15px; color: var(--ink-3); letter-spacing: 0.04em; line-height: 1.6; }

/* hero app — peeks up from the bottom of the first viewport (Linear-style half/half) */
.hero-preview { margin-top: 70px; padding-bottom: 0; width: min(1340px, 95vw); margin-left: 50%; transform: translateX(-50%); max-width: none; position: relative; } /* Linear: 70px spacer between description/badge row and the window */
/* faint light pooled behind the signature glass so the frost reads (iOS control-center-on-black) */
.glass-backlight { position: relative; }
.glass-backlight::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -6% -4% -10% -4%;
  background:
    radial-gradient(42% 60% at 24% 22%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(40% 55% at 80% 30%, rgba(255,255,255,0.10), transparent 72%),
    radial-gradient(46% 60% at 62% 96%, color-mix(in oklab, var(--c-teal) 16%, transparent), transparent 74%);
  filter: blur(36px);
  opacity: 0.85;
}
.glass-backlight > * { position: relative; z-index: 1; }
.glass-panel { padding: 16px; }
.gp-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 16px; }
.gp-bar .lhs { display: flex; align-items: center; gap: 10px; }
.gp-bar .title { font-size: 13px; color: var(--ink-1); font-weight: 500; }
.gp-dots { display: flex; gap: 7px; }
.gp-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.16); display: block; }
.win-tag { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); padding: 3px 8px; border: 1px solid var(--hair); border-radius: 6px; }

.hero-grid { display: grid; grid-template-columns: 230px 1fr 250px; gap: 12px; }
.sub-panel { background: rgba(14,16,20,0.55); border: 1px solid var(--hair); border-radius: 14px; padding: 16px; }
.sub-panel .ph { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-1);
  background: rgba(255,255,255,0.05); border: 1px solid var(--hair); border-radius: 8px; padding: 7px 10px; margin: 0 6px 8px 0; cursor: default; }
.chip.on { color: var(--ink-0); border-color: var(--hair-top); background: rgba(255,255,255,0.09); }
.co-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--hair-2); }
.co-row:last-child { border-bottom: none; }
.co-row .co { font-size: 13.5px; color: var(--ink-0); font-weight: 480; }
.co-row .meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); }
.stat { display: flex; align-items: baseline; justify-content: space-between; padding: 9px 0; }
.stat .k { font-size: 12.5px; color: var(--ink-1); display: flex; align-items: center; gap: 8px; }
.stat .v { font-family: var(--mono); font-size: 15px; color: var(--ink-0); }
.stat .v.accent { color: var(--ink-0); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PROBLEM
   ============================================================ */
.problem-lead { font-weight: 500; font-size: 33px; line-height: 1.3; letter-spacing: -0.02em; max-width: 1040px; color: var(--ink-0); text-wrap: pretty; }
.problem-lead .dim { color: var(--ink-2); }
.bad-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.bad-card { position: relative; padding: 30px; border-radius: var(--radius-lg);
  background: #121314;
  border: 1px solid var(--hair); overflow: hidden;
  box-shadow: 0 1px 0 0 var(--hair-top) inset; }
.bad-card::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.bad-card:nth-child(1)::before { background:
    radial-gradient(74% 60% at 0% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%); }
.bad-card:nth-child(2)::before { background:
    radial-gradient(64% 56% at 100% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%),
    radial-gradient(56% 50% at 0% 100%, rgba(255,255,255,0.026), transparent 76%); }
.bad-card > * { position: relative; }
.bad-card .bc-label { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px;
  margin: 0 -30px; padding: 0 30px 16px; border-bottom: 1px solid var(--hair-2); }
.bad-card .bc-label .x { width: 7px; height: 7px; border-radius: 50%; flex: none; --gc: 240,99,93;
  background: radial-gradient(circle at 35% 30%, #ff938b, #f0635d 58%, #c2382f);
  animation: dot-glow 2.1s ease-in-out infinite; }
.bad-card h3 { font-size: 19px; font-weight: 560; margin: 16px 0 10px; letter-spacing: -0.01em; }
.bad-card p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0; }

/* PROBLEM — grid of fading illustration (top) + copy (bottom); grid frame fully visible */
.prob-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); margin-top: 44px; border: 1px solid var(--hair); border-radius: 16px; }
.prob-cell { position: relative; display: flex; flex-direction: column; padding: 10px 40px 44px; }
.prob-cell:nth-child(2) { border-left: 1px solid var(--hair); }
.prob-ill { position: relative; min-height: 330px; display: flex; align-items: flex-start; justify-content: center; padding: 36px 0 16px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 94%); }
.prob-copy h3 { font-size: 21px; font-weight: 560; letter-spacing: -0.01em; color: var(--ink-0); margin: 0 0 10px; }
.prob-copy p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0; max-width: 470px; }

/* mini illustration window */
.prob-win { width: 100%; max-width: 384px; height: 274px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; background: #0f1011; overflow: hidden;
  box-shadow: 0 28px 56px -30px rgba(0,0,0,0.75), 0 0 0.75px hsl(205 20% 10% / 0.25); }
.prob-win-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--hair-2); font-size: 12.5px; color: var(--ink-1); }
.prob-win-head svg { color: var(--ink-3); }
.prob-win-meta { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3); }
.prob-rows { display: flex; flex-direction: column; }
.prob-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--hair-2); font-size: 12.5px; }
.prob-row:last-child { border-bottom: 0; }
.prob-co { color: var(--ink-1); }
.prob-row.dead .prob-co { color: var(--ink-3); text-decoration: line-through; }
.prob-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-3); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.prob-tag.ok { color: var(--ink-1); }
.prob-tiles { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; padding: 11px 12px; }
.prob-tile { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 1px solid var(--hair-2); border-radius: 9px; background: rgba(255,255,255,0.018); font-size: 12px; color: var(--ink-1); }
.prob-tile svg { color: var(--ink-2); flex: none; }
.prob-tile > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prob-tile .prob-login { margin-left: auto; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.02em; color: var(--ink-3); white-space: nowrap; }
.prob-tile.wide { grid-column: 1 / -1; }
@media (max-width: 820px) {
  .prob-grid { grid-template-columns: 1fr; }
  .prob-cell { padding: 8px 28px 36px; }
  .prob-cell:nth-child(2) { border-left: 0; border-top: 1px solid var(--hair); }
  .prob-ill { min-height: 280px; }
}
.solution-wrap { margin-top: 28px; }
.solution-glass { position: relative; padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 30px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: #121314;
  border: 1px solid var(--hair);
  box-shadow: 0 1px 0 var(--hair-top) inset; }
/* wide box: top-right + bottom-left, softer */
.solution-glass::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(34% 88% at 100% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.026) 34%, transparent 82%),
    radial-gradient(28% 76% at 0% 100%, rgba(255,255,255,0.024), transparent 78%); }
.solution-glass > * { position: relative; }
.solution-glass .sg-text { font-size: 26px; font-weight: 540; letter-spacing: -0.02em; line-height: 1.32; max-width: 640px; }
.solution-glass .sg-text b { color: var(--ink-0); }
.solution-glass .sg-cue { font-family: var(--mono); font-size: 12px; color: var(--ink-1); display: flex; align-items: center; gap: 8px; letter-spacing: 0.05em; white-space: nowrap; animation: scroll-bounce 1.8s ease-in-out infinite; }
.solution-glass .sg-cue svg { animation: scroll-bounce-arrow 1.8s ease-in-out infinite; }
@keyframes scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes scroll-bounce-arrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .solution-glass .sg-cue, .solution-glass .sg-cue svg { animation: none; } }
@media (max-width: 820px) { .bad-cards { grid-template-columns: 1fr; } .solution-glass { flex-direction: column; align-items: flex-start; } .problem-lead { font-size: 24px; } }

/* ============================================================
   BENEFITS — bento of varying sizes (money largest)
   ============================================================ */
/* BENEFITS — equal-size grid: illustration (top) + divider + copy (bottom), full visible frame */
.bene-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-auto-rows: 1fr; gap: 0; margin-top: 0;
  border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
/* robust cell dividers (real borders — 1px grid gaps vanish at some zoom levels) */
.bene-grid:not(.bene-grid-hero) > .bene-cell:nth-child(odd) { border-right: 1px solid var(--hair); }
.bene-grid:not(.bene-grid-hero) > .bene-cell:nth-child(1),
.bene-grid:not(.bene-grid-hero) > .bene-cell:nth-child(2) { border-bottom: 1px solid var(--hair); }
/* hero is its own single-cell table, gap above the 2x2 grid */
.bene-grid-hero { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; margin: 44px 0 28px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; }
.bene-cell { background: var(--bg-0); display: flex; flex-direction: column; min-height: 380px; }
/* full-width hero cell: copy on top, price comparison below — both full width */
.bene-hero { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 28px; min-height: 0; padding: 40px 44px; }
.bene-hero-copy { min-width: 0; }
.bene-hero-copy .bene-title { font-size: 24px; }
.bene-hero-copy p { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: 11px 0 0; max-width: 760px; }
.bene-hero-fig { width: 100%; min-width: 0; }
.bene-hero-fig .cost-compare { width: 100%; margin: 0; padding: 0; border-top: 0; }
.bene-fig { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 34px 36px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); }
/* price comparison: no fade, smaller */
.bene-fig-cmp { -webkit-mask-image: none; mask-image: none; padding: 22px 36px 18px; }
.bene-fig-cmp .cost-compare { width: 100%; max-width: 332px; margin: 0; padding: 0; border-top: 0; }
.bene-fig-cmp .cmp-row { padding: 9px 0; gap: 6px; }
.bene-fig-cmp .cmp-name { font-size: 12.5px; }
.bene-fig-cmp .cmp-price { font-size: 12.5px; }
.bene-fig-cmp .cmp-row.win .cmp-price { font-size: 13px; }
.bene-fig-cmp .cmp-per { font-size: 9px; }
.bene-fig-cmp .bar { height: 6px; }
.bene-fig-cmp .cmp-desc { font-size: 10.5px; }
/* divider between illustration and header */
.bene-copy { padding: 22px 40px 38px; }
.bene-title { display: block; font-size: 20px; font-weight: 560; letter-spacing: -0.01em; color: var(--ink-0); margin: 0 0 10px; }
.bene-copy p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 0; max-width: 470px; }

/* picture-style illustrations — gradient orbs/tiles + silver-gradient icons */
.viz { display: flex; align-items: center; justify-content: center; gap: 20px; width: 332px; height: 190px; }
.viz.viz-col-c { flex-direction: column; gap: 11px; }
.viz-row { display: flex; gap: 9px; }
.viz-col { display: flex; flex-direction: column; gap: 11px; }
.viz-orb { width: 78px; height: 78px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: radial-gradient(132% 132% at 32% 22%, #1b1c1d 0%, #131414 44%, #090a0b 100%);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -12px 22px -14px #000, 0 18px 34px -18px rgba(0,0,0,0.85); }
.viz-orb.lg { width: 98px; height: 98px; }
.viz-tile { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: linear-gradient(158deg, #171818 0%, #0e0f10 58%, #090a0b 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 24px -16px rgba(0,0,0,0.85); }
.viz-tile.sm { width: 46px; height: 46px; border-radius: 12px; }
/* "see your matches": a lead-search window mock-up, hero-window style, top-left crisp / bottom+right faded */
.viz.viz-search { width: 100%; height: auto; align-items: flex-start; justify-content: flex-start; }
.bene-fig:has(.viz-search) { align-items: flex-start; padding-top: 30px; -webkit-mask-image: none; mask-image: none; overflow: hidden; }
.lm-win {
  width: 564px; flex: none; font-family: var(--font);
  zoom: 0.86;
  max-height: 318px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: #101112; overflow: hidden;
  box-shadow: 0 24px 54px -26px rgba(0,0,0,0.92), inset 0 1px 0 rgba(255,255,255,0.05);
  -webkit-mask-image: linear-gradient(to right, #000 32%, transparent 88%), linear-gradient(to bottom, #000 26%, transparent 94%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 32%, transparent 88%), linear-gradient(to bottom, #000 26%, transparent 94%);
  mask-composite: intersect; }
.lm-head { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.lm-head-l { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: #F7F8F8; }
.lm-head-l svg { color: #8A8F98; }
.lm-head-r { font-size: 11px; color: #8A8F98; font-variant-numeric: tabular-nums; }
.lm-head-n { font-size: 11px; font-weight: 400; color: #8A8F98; font-variant-numeric: tabular-nums; }
.lm-filters { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.lm-filter { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; white-space: nowrap; flex: none;
  border: 1px solid rgba(255,255,255,0.11); background: rgba(255,255,255,0.03); font-size: 12px; color: #F7F8F8; cursor: pointer; }
.lm-filter .lm-filter-k { color: #8A8F98; }
.lm-filter svg { color: #8A8F98; margin-left: 1px; }
.lm-free { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.03em; color: #D0D6E0; border: 1px solid rgba(255,255,255,0.13); border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.lm-rows { display: flex; flex-direction: column; }
.lm-row { display: flex; align-items: center; gap: 11px; height: 49px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.lm-av { width: 28px; height: 28px; flex: none; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #cdd2da; background: linear-gradient(150deg, #26282b, #15171a); border: 1px solid rgba(255,255,255,0.07); }
.lm-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lm-co { font-size: 13px; font-weight: 500; color: #F7F8F8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-sub { font-size: 11px; color: #8A8F98; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-contact { display: flex; align-items: center; gap: 14px; flex: none; white-space: nowrap; }
.lm-c-email, .lm-c-phone { font-size: 12px; color: #8A8F98; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap; }
.lm-show { font-size: 11px; font-weight: 500; color: #D0D6E0; padding: 3px 9px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.04); cursor: pointer; }
/* "hours back": triangle of three orbs (automation / time++ / dollar) joined by straight lines */
.viz.viz-tri { position: relative; width: 330px; height: 234px; }
.viz-tri-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.viz-tri-orb { position: absolute; width: 84px; height: 84px; z-index: 1;
  background: linear-gradient(145deg, #2b2d2f 0%, #17191b 46%, #0a0b0c 100%); }
.viz-tri-orb.tri-a { left: 123px; top: 6px; }
.viz-tri-orb.tri-t { left: 203px; top: 144px; }
.viz-tri-orb.tri-d { left: 43px; top: 144px; }
/* silver sheen on the rims where the lines touch (same masked-ring technique as viz-safe) */
.viz-tri-orb::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 4px rgba(222,229,238,0.55)); }
.viz-tri-orb.tri-a::after { background:
  radial-gradient(40% 56% at 25% 93%, rgba(238,241,245,0.95), rgba(180,188,200,0.3) 52%, transparent 70%),
  radial-gradient(40% 56% at 75% 93%, rgba(238,241,245,0.95), rgba(180,188,200,0.3) 52%, transparent 70%); }
.viz-tri-orb.tri-t::after { background:
  radial-gradient(40% 56% at 25% 7%, rgba(238,241,245,0.95), rgba(180,188,200,0.3) 52%, transparent 70%),
  radial-gradient(44% 62% at 0% 50%, rgba(238,241,245,0.95), rgba(180,188,200,0.3) 52%, transparent 70%); }
.viz-tri-orb.tri-d::after { background:
  radial-gradient(40% 56% at 75% 7%, rgba(238,241,245,0.95), rgba(180,188,200,0.3) 52%, transparent 70%),
  radial-gradient(44% 62% at 100% 50%, rgba(238,241,245,0.95), rgba(180,188,200,0.3) 52%, transparent 70%); }
.viz-ico.viz-ico-blue path, .viz-ico.viz-ico-blue circle, .viz-ico.viz-ico-blue ellipse, .viz-ico.viz-ico-blue rect, .viz-ico.viz-ico-blue line { stroke: url(#blueIcoGrad); }
.viz-ico.viz-ico-gold path, .viz-ico.viz-ico-gold circle, .viz-ico.viz-ico-gold ellipse, .viz-ico.viz-ico-gold rect, .viz-ico.viz-ico-gold line { stroke: url(#goldIcoGrad); }
.viz-ico-gold { filter: drop-shadow(0 0 5px rgba(247,215,126,0.3)); animation: gold-shimmer 2.8s ease-in-out infinite; }
@keyframes gold-shimmer {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(247,215,126,0.25)) brightness(1); }
  50% { filter: drop-shadow(0 0 9px rgba(247,215,126,0.6)) brightness(1.18); } }
@media (prefers-reduced-motion: reduce) { .viz-ico-gold { animation: none; } }
.viz-time-row { display: flex; align-items: center; gap: 3px; }
.viz-plusplus { display: block; }
.viz-arrow { display: inline-flex; color: var(--ink-3); }
/* "one tool instead of five": tiles connected to the central Polaris orb */
.viz-merge { position: relative; width: 360px; height: 210px; }
.viz-merge-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.viz-merge-row { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 15px; z-index: 1; }
.viz-merge .viz-tile { width: 58px; height: 58px; border-radius: 15px; background: linear-gradient(150deg, #292b2d 0%, #16181a 50%, #0a0b0c 100%); }
.viz-merge-orb { position: absolute; left: 50%; top: 126px; transform: translateX(-50%); width: 84px; height: 84px; z-index: 1;
  background: linear-gradient(145deg, #2b2d2f 0%, #17191b 46%, #0a0b0c 100%); }
/* silver backlit rim at the top, where the five lines meet the Polaris orb */
.viz-merge-orb::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 4px rgba(222,229,238,0.55));
  background: radial-gradient(48% 64% at 50% 0%, rgba(238,241,245,0.95), rgba(180,188,200,0.3) 52%, transparent 70%); }
.viz-wave { width: 92px; height: 40px; flex: none; opacity: 0.85; }
.viz-wave path { fill: none; stroke: url(#silverGrad); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.6; }
.viz-ico { color: #cdd2da; }
.viz-ico path, .viz-ico circle, .viz-ico ellipse, .viz-ico rect, .viz-ico line { stroke: url(#silverGrad); }
/* flat 2D silver (no gradient bevel) */
.viz-flat path, .viz-flat circle, .viz-flat ellipse, .viz-flat rect, .viz-flat line { stroke: #b9bfc8; }
.viz-orb .brand .name { display: none; }
.viz-orb .brand { gap: 0; }
/* "sending stays safe": message orb ↔ blue chaotic waves ↔ Polaris orb */
.viz.viz-safe { width: 100%; max-width: 348px; gap: 4px; }
.viz-safe .viz-orb.lg { width: 84px; height: 84px; }
.viz-safe .viz-orb { background: linear-gradient(145deg, #2b2d2f 0%, #17191b 46%, #0a0b0c 100%); }
.viz-inner { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 32% 22%, #212223, #0c0d0e 82%); border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.viz-waves { flex: 1; min-width: 0; height: 108px; }
.viz-waves path { vector-effect: non-scaling-stroke; }
.viz-waves-g { filter: drop-shadow(0 0 5px rgba(86,97,190,0.7)); }
/* blue tint exactly on the orb's rim where the wave lines meet it */
.viz-safe .viz-orb { position: relative; }
.viz-safe .viz-orb::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 5px rgba(99,110,210,0.7)); }
.viz-safe .viz-orb:first-child::after { background: radial-gradient(44% 62% at 100% 50%, rgba(124,136,238,1), rgba(86,97,190,0.3) 52%, transparent 70%); }
.viz-safe .viz-orb:last-child::after { background: radial-gradient(44% 62% at 0% 50%, rgba(124,136,238,1), rgba(86,97,190,0.3) 52%, transparent 70%); }


.bi-win { width: 332px; border: 1px solid var(--hair); border-radius: 12px; background: #0f1011; overflow: hidden;
  box-shadow: 0 24px 50px -30px rgba(0,0,0,0.72), 0 0 0.75px hsl(205 20% 10% / 0.25); }
.bi-head { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--hair-2); font-size: 12px; color: var(--ink-1); }
.bi-head svg { color: var(--ink-3); }
.bi-rows { display: flex; flex-direction: column; }
.bi-row { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--hair-2); font-size: 12.5px; color: var(--ink-1); }
.bi-row:last-child { border-bottom: 0; }
.bi-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-check { width: 16px; height: 16px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-1); background: rgba(255,255,255,0.06); border: 1px solid var(--hair); }
.bi-row.dim { color: var(--ink-3); }
.bi-odot { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 1px solid var(--hair); }
.bi-auto { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--ink-3); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 7px; }
.bi-free { margin-left: auto; font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 8px; }
.bi-foot { padding: 10px 13px; border-top: 1px solid var(--hair-2); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-2); }
.bi-tilegrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; padding: 13px; }
.bi-tile { display: flex; align-items: center; gap: 6px; padding: 8px 9px; border: 1px solid var(--hair-2); border-radius: 8px; background: rgba(255,255,255,0.018); font-size: 11px; color: var(--ink-2); }
.bi-tile svg { color: var(--ink-3); flex: none; }
.bi-merge { display: flex; justify-content: center; color: var(--ink-3); padding: 1px 0 5px; }
.bi-one { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 13px 13px; padding: 10px; border: 1px solid var(--hair); border-radius: 9px; background: rgba(255,255,255,0.05); font-size: 12.5px; color: var(--ink-0); }

@media (max-width: 820px) {
  .bene-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; }
  .bene-grid:not(.bene-grid-hero) > .bene-cell { border-right: 0; border-bottom: 1px solid var(--hair); }
  .bene-grid:not(.bene-grid-hero) > .bene-cell:last-child { border-bottom: 0; }
  .bene-cell { min-height: 0; }
  .bene-hero { flex-direction: column; align-items: stretch; gap: 22px; padding: 28px; }
  .bene-hero-fig { max-width: none; }
  .bene-fig { padding: 28px 22px 18px; }
  .bene-copy { padding: 20px 28px 32px; }
  .bi-win, .bene-fig-cmp .cost-compare { width: 100%; max-width: 360px; }
}
.bento { display: grid; gap: 24px; margin-top: 68px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "money money time" "money money one" "safe safe safe"; }
.bento .b-money { grid-area: money; }
.bento .b-time { grid-area: time; }
.bento .b-one { grid-area: one; }
.bento .b-safe { grid-area: safe; }
.b-card { padding: 0; border-radius: var(--radius-lg); display: flex; flex-direction: column; background: #121314; }
/* benefit cards: flat #121314 fill + varied, softer corner glow per card (scoped; global .window untouched) */
.b-money.window::before { background:
    radial-gradient(64% 56% at 100% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%),
    radial-gradient(56% 50% at 0% 100%, rgba(255,255,255,0.026), transparent 76%); }
.b-time.window::before { background: radial-gradient(74% 60% at 100% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%); }
.b-one.window::before { background: radial-gradient(74% 60% at 0% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%); }
.b-safe.window::before { background:
    radial-gradient(30% 86% at 100% 100%, rgba(255,255,255,0.046), rgba(255,255,255,0.024) 34%, transparent 82%),
    radial-gradient(26% 74% at 0% 0%, rgba(255,255,255,0.024), transparent 78%); }
.b-fig { display: flex; align-items: center; justify-content: center; padding: 26px 26px 22px; border-bottom: 1px solid var(--hair-2); }
.b-fig svg { width: 162px; height: auto; display: block; opacity: 0.92; }
.b-text { padding: 22px 26px 26px; }
.b-card .b-title { display: block; font-size: 18px; font-weight: 560; letter-spacing: -0.01em; color: var(--ink-0); }
.b-card p { color: var(--ink-1); font-size: 15px; line-height: 1.62; margin: 12px 0 0; padding: 0; }
.b-money .b-title { font-size: 22px; }
.b-money .b-fig { padding: 26px 26px 22px; }
.b-money .b-fig svg { width: 100%; max-width: 268px; }
.b-money p { font-size: 16px; max-width: none; }
.b-money { gap: 0; }
/* wide safe card: figure beside text, vertical divider to the right of the figure */
.b-safe { flex-direction: row; align-items: stretch; }
.b-safe .b-fig { padding: 24px 28px; flex: none; border-bottom: none; border-right: 1px solid var(--hair-2); }
.b-safe .b-fig svg { width: 184px; }
.b-safe .b-text { padding: 28px 30px; max-width: 720px; align-self: center; }
@media (max-width: 700px) { .b-safe { flex-direction: column; align-items: stretch; } .b-safe .b-fig { padding: 26px 26px 22px; justify-content: center; border-right: none; border-bottom: 1px solid var(--hair-2); } .b-safe .b-text { padding: 22px 26px 26px; } }
/* cost comparison — price + what you get, Polaris short accent bar */
.cost-compare { margin: 0; padding: 22px 26px 26px; border-top: 1px solid var(--hair-2); display: flex; flex-direction: column; }
.b-money .cost-compare { margin-top: 0; }
.b-money .b-text { padding-bottom: 22px; }
.cmp-row { display: flex; flex-direction: column; gap: 9px; padding: 16px 0; border-bottom: 1px solid var(--hair-2); }
.cmp-row:last-child { border-bottom: none; }
.cmp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cmp-name { font-size: 14px; color: var(--ink-1); font-weight: 500; }
.cmp-row.win .cmp-name { color: var(--ink-0); }
.cmp-price { font-family: var(--mono); font-size: 14px; color: var(--ink-1); white-space: nowrap; }
.cmp-row.win .cmp-price { color: var(--ink-0); font-size: 15px; }
.cmp-per { color: var(--ink-3); font-size: 11px; margin-left: 3px; }
.b-card p.cmp-desc { margin: 0; padding: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 480px; }
.cmp-row.win .cmp-desc { color: var(--ink-1); }
.bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; display: block; }
.bar { height: 8px; border-radius: 6px; background: rgba(255,255,255,0.06); position: relative; }
.bar i.fill-accent { background: linear-gradient(90deg, #c9952f, #f7d77e); opacity: 1; }
.bar i.fill-dim { background: rgba(255,255,255,0.16); }

@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "money" "time" "one" "safe"; }
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-lead { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 50px; border: 1px solid var(--hair); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(157deg, #161719 0%, #101113 46%, #0c0d0f 100%); box-shadow: 0 1px 0 var(--hair-top) inset; }
.step { padding: 32px 26px 36px; background: none; border: 0; border-right: 1px solid var(--hair); box-shadow: none; position: relative; cursor: pointer; isolation: isolate; }
.step:last-child { border-right: none; }
.step > * { position: relative; z-index: 1; }
/* soft gradient glow on hover/active — light from within, no hard borders */
.step::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .4s ease;
  background:
    radial-gradient(125% 82% at 50% -16%, rgba(226,230,236,0.34), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.025) 44%, transparent 76%);
}
.step:hover::before { opacity: 0.5; }
.step.active::before { opacity: 1; }
.step .s-num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.1em; }
.step .s-ico { margin: 16px 0 16px; }
.step h4 { font-size: 16.5px; font-weight: 560; margin: 0 0 8px; letter-spacing: -0.01em; color: var(--ink-0); }
.step p { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; margin: 0; }
.step .s-conn { display: none; }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } .step:nth-child(2) { border-right: none; } .step:nth-child(1), .step:nth-child(2) { border-bottom: 1px solid var(--hair); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step { border-right: none; border-bottom: 1px solid var(--hair); } .step:last-child { border-bottom: none; } }

/* ============================================================
   THE SOLUTION — stacked steps (header left / text right / big screen)
   ============================================================ */
#how { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 120px; }
@media (max-width: 820px) { #how { padding-top: 72px; } }
.sol-list { display: flex; flex-direction: column; margin-top: 64px; }
.sol-step { position: relative; }
.sol-step:not(:first-child) { margin-top: 60px; padding-top: 60px; }
.sol-step:not(:first-child)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: var(--hair); }
.sol-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
  padding: 0 60px; } /* Linear's --frame-buffer: step copy sits inside the frame line, never left of it */
.sol-num { display: block; font-family: var(--mono); font-size: 13px; line-height: 1; letter-spacing: 0.12em; color: var(--ink-3); margin: 0 0 16px; }
.sol-title { font-size: 37px; font-weight: 580; line-height: 1.08; letter-spacing: -0.025em; color: var(--ink-0); margin: 0; max-width: 430px; }
.sol-head-r { padding-top: 29px; }
.sol-head-r p { font-size: 18px; line-height: 1.55; color: var(--ink-1); margin: 0; max-width: 470px; }

.sol-screen { position: relative; margin-top: 42px; }
.sol-window, .product.sol-window { width: 100%; pointer-events: none; background: #08090a;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 99%); }
.sol-window .win-tag { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.sol-winlabel { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
/* give the big screen a generous floor so the bottom fade reads */
.sol-window .prod-body-inner { margin: 6px; min-height: 320px; border: 1px solid transparent;
  background:
    linear-gradient(#0f1011, #0f1011) padding-box,
    radial-gradient(140% 130% at 0% 0%, #3a3d42, rgba(58,61,66,0.32) 78%) border-box; }
/* step windows: outer frame solid, no corner-highlight gradient */
.product.sol-window::before { background: none; }

@media (max-width: 860px) {
  .sol-list { margin-top: 48px; }
  .sol-step:not(:first-child) { margin-top: 44px; padding-top: 44px; }
  .sol-head { grid-template-columns: 1fr; gap: 14px; padding: 0; }
  .sol-title { font-size: 27px; max-width: none; }
  .sol-head-r { padding-top: 0; }
  .sol-head-r p { font-size: 16px; max-width: none; }
  .sol-screen { margin-top: 28px; }
}

.how-footer { margin: 60px 0 80px; display: flex; align-items: center; justify-content: flex-end; text-align: right; gap: 12px; color: #8a8f98; font-size: 15px; }

/* ============================================================
   PRODUCT MOCKUP (interactive) inside large glass panel
   ============================================================ */
.product-wrap { margin-top: 40px; }
/* How it works — scroll-pinned step progression (demo stays put, steps advance 1->4 on scroll) */
.how-scroll { position: relative; height: 320vh; }
.how-pin { position: sticky; top: 72px; padding-top: 34px; }
@media (max-width: 820px) {
  .how-scroll { height: auto; }
  .how-pin { position: static; padding-top: 40px; }
}
.product { padding: 0; overflow: hidden; position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.13);
  background: #101112;
  box-shadow:
    0 60px 100px -36px rgba(0,0,0,0.78),
    0 28px 56px -28px rgba(0,0,0,0.66),
    0 6px 16px -8px rgba(0,0,0,0.5),
    0 0 0.75px hsl(205 20% 10% / 0.25); }
/* light corner highlights on the outer frame */
.product::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(52% 44% at 0% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.026) 36%, transparent 80%); }
.product > * { position: relative; z-index: 1; }
.prod-chrome { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 13px 18px; }
.prod-chrome .lhs { display: flex; align-items: center; gap: 12px; }
.prod-tabs { display: flex; gap: 4px; background: rgba(0,0,0,0.28); border: 1px solid var(--hair-2); border-radius: 10px; padding: 4px; }
.prod-tab { font-size: 13px; color: var(--ink-2); padding: 7px 14px; border-radius: 7px; cursor: pointer; border: none; background: none; font-family: var(--font); display: flex; align-items: center; gap: 7px; transition: color .15s ease, background .15s ease; }
.prod-tab:hover { color: var(--ink-1); }
.prod-tab.active { color: var(--ink-0); background: rgba(255,255,255,0.08); box-shadow: 0 1px 0 var(--hair-top) inset; }
/* body = a 'window within the window' (Linear-style) */
.prod-body { padding: 0; overflow: hidden; transition: height .44s cubic-bezier(.4, 0, .2, 1); will-change: height; }
.prod-body-inner { position: relative; margin: 0 12px 12px; padding: 22px; min-height: 240px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.12);
  background: #121314;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 28px -16px rgba(0,0,0,0.55); }
/* subtle top-corner highlight on the inner window */
.prod-body-inner::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(56% 46% at 0% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.026) 36%, transparent 80%); }
.prod-body-inner > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .prod-body { transition: none; } }

/* Targets view */
.targets { display: grid; grid-template-columns: 260px 1fr; gap: 22px; }
.filter-block { margin-bottom: 22px; }
.filter-block .fl { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 11px; }
.fchips { display: flex; flex-wrap: wrap; gap: 7px; }
.fchip { font-size: 12.5px; color: var(--ink-1); background: rgba(255,255,255,0.04); border: 1px solid var(--hair); border-radius: 8px; padding: 7px 11px; cursor: pointer; transition: all .14s ease; user-select: none; }
.fchip:hover { border-color: var(--hair-top); color: var(--ink-0); }
.fchip.on { color: var(--ink-0); background: rgba(255,255,255,0.09); border-color: var(--hair-top); }
.match-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.match-head .mh-l { font-size: 14px; color: var(--ink-1); }
.match-head .mh-n { font-family: var(--mono); font-size: 14px; color: var(--ink-1); }
.colist { border: 1px solid var(--hair-2); border-radius: 12px; overflow: hidden; }
.coitem { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--hair-2); cursor: pointer; transition: background .14s ease; }
.coitem:last-child { border-bottom: none; }
.coitem:hover { background: rgba(255,255,255,0.03); }
.coitem.sel { background: rgba(255,255,255,0.045); }
.coitem .nm { font-size: 14px; color: var(--ink-0); font-weight: 480; }
.coitem .sub { font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-top: 3px; }
.coitem .go { color: var(--ink-3); display: flex; align-items: center; gap: 6px; font-size: 12px; }
.coitem:hover .go, .coitem.sel .go { color: var(--ink-0); }

/* Targets view — step 1, hero-window table format (tg3) */
.tg3-left { width: 212px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--l2-line); }
.tg3-left .snd3-colhead { flex: none; }
.tg3-clear { margin-left: auto; font-size: 11.5px; color: var(--l2-text4); cursor: pointer; }
.tg3-clear:hover { color: var(--l2-text2); }
.tg3-fcount { font-family: var(--mono); font-size: 10px; color: var(--l2-text3); background: rgba(255,255,255,0.07); border-radius: 5px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
/* collapsible filter tree */
.tg3-ftree { padding: 6px 10px 10px; }
.ftree-cat { border-bottom: 1px solid var(--l2-line2); padding: 4px 0; }
.ftree-cat:last-child { border-bottom: 0; }
.ftree-root { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 9px; height: 36px; padding: 0 6px; border-radius: 7px; }
.ftree-ico { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--l2-text3); background: rgba(255,255,255,0.07); }
.ftree-ico.teal { color: #2fd3c3; background: color-mix(in oklab, #2fd3c3 14%, transparent); }
.ftree-ico.indigo { color: #5E6AD2; background: color-mix(in oklab, #5E6AD2 16%, transparent); }
.ftree-ico.coral { color: #f0826d; background: color-mix(in oklab, #f0826d 14%, transparent); }
.ftree-name { font-size: 13px; font-weight: 500; color: var(--l2-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftree-count { font-size: 12px; color: var(--l2-text3); font-variant-numeric: tabular-nums; justify-self: end; padding-right: 2px; }
.ftree-chev { color: var(--l2-text3); justify-self: end; }
svg.ftree-chev.closed { transform: rotate(-90deg); }
.ftree-root.closed .ftree-name { color: var(--l2-text3); }
.ftree-kids { position: relative; margin: 0 0 6px 15px; }
.ftree-kids::before { content: ""; position: absolute; left: 0; top: -4px; bottom: 16px; width: 1px; background: rgba(255,255,255,0.10); }
.ftree-kid { position: relative; height: 32px; display: flex; align-items: center; padding-left: 13px; margin: 0; }
.ftree-kid::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 1px; background: rgba(255,255,255,0.10); }
.ftree-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--l2-text2); background: rgba(255,255,255,0.05); border: 1px solid var(--hair); border-radius: 6px; padding: 4px 8px; cursor: default; }
.ftree-x { color: var(--l2-text4); flex: none; }
.ftree-chip:hover .ftree-x { color: var(--l2-text2); }
.tg3-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 50px; padding: 0 18px; border-bottom: 1px solid var(--l2-line); flex: none; }
.tg3-search { display: flex; align-items: center; gap: 9px; flex: 0 1 230px; min-width: 0; padding: 7px 12px; border: 1px solid var(--l2-line); border-radius: 8px; background: #141516; color: var(--l2-text4); font-size: 12.5px; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
.tg3-search svg { color: var(--l2-text4); flex: none; }
.tg3-count { font-family: var(--mono); font-size: 10.5px; color: var(--l2-text3); white-space: nowrap; }
.tg3-grid { display: grid; grid-template-columns: 15px minmax(130px, 1.6fr) minmax(64px, 0.8fr) minmax(72px, 0.8fr) minmax(56px, 0.6fr) minmax(110px, 1.1fr); align-items: center; gap: 12px; padding: 0 18px; }
.tg3-thead { height: 50px; border-bottom: 1px solid var(--l2-line); }
.tg3-th-co { font-size: 14px; font-weight: 500; color: var(--l2-text2); }
.tg3-th { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l2-text3); }
.tg3-row { height: 56px; border-bottom: 1px solid var(--l2-line2); }
.tg3-co { font-size: 13.5px; font-weight: 500; color: var(--l2-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg3-cell { font-family: var(--mono); font-size: 11px; color: var(--l2-text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg2-cb { width: 13px; height: 13px; border-radius: 3.5px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hair-top); flex: none; box-sizing: border-box; }
.tg2-cb.on { background: var(--l2-text2, #D0D6E0); border-color: var(--l2-text2, #D0D6E0); color: #08090A; }
.tg2-cb-dash { width: 6px; height: 1.5px; border-radius: 1px; background: #08090A; }
.tg3-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; }
.tg3-showing { font-family: var(--mono); font-size: 11px; color: var(--l2-text4); }
/* selected row */
.tg3-row { position: relative; }
.tg3-row.sel { background: linear-gradient(90deg, rgba(202,208,219,0.09), rgba(255,255,255,0.05) 60%); }
.tg3-row.sel::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #cad0db, rgba(202,208,219,0.5)); }
/* detail side panel */
.tg3-detail { width: 264px; flex: none; border-left: 1px solid var(--l2-line); display: flex; flex-direction: column; }
.tg3-dhead { height: 50px; flex: none; padding: 0 12px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--l2-line); }
.tg3-dname { font-size: 13.5px; font-weight: 550; color: var(--l2-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg3-dcopy { flex: none; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--l2-text3); cursor: default; transition: background .14s ease, color .14s ease; }
.tg3-dcopy:hover { background: rgba(255,255,255,0.06); color: var(--l2-text2); }
/* label column sizes itself to the longest label (i18n-safe), values align via subgrid */
.tg3-dbody { padding: 14px 16px; display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; align-content: start; }
.tg3-dlabel { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l2-text3); margin-bottom: 4px; grid-column: 1 / -1; }
.tg3-dlabel-next { margin-top: 16px; }
.tg3-drow { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; padding: 7px 0; font-size: 12px; }
.tg3-dk { color: var(--l2-text4); }
.tg3-dv { color: var(--l2-text2); display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }
.tg3-dv.tg3-dmono { font-family: var(--mono); font-size: 11px; }
.tg3-wa { flex: none; font-size: 8.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--l2-green); border: 1px solid color-mix(in oklab, var(--l2-green) 28%, transparent); border-radius: 4px; padding: 1.5px 4px; }
@media (max-width: 1140px) { .tg3-detail { display: none; } }

/* Email view */
.email-view { display: grid; grid-template-columns: 1fr; max-width: none; margin: 0; }
/* Step 2 — AI drafts master-detail */
.eml2-list { width: 286px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--l2-line); }
.eml2-colhead { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l2-text3);
  height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--l2-line); flex: none; }
.eml2-colhead > svg { flex: none; }
.eml2-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; height: 64px; padding: 0 16px;
  border-bottom: 1px solid var(--l2-line2); position: relative; cursor: pointer; box-sizing: border-box; }
.eml2-row:hover { background: rgba(255,255,255,0.02); }
.eml2-row.active { background: linear-gradient(90deg, rgba(202,208,219,0.09), rgba(255,255,255,0.05) 60%); }
.eml2-row.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #cad0db, rgba(202,208,219,0.5)); }
.eml2-mid { min-width: 0; }
.eml2-nm { font-size: 13px; font-weight: 550; color: var(--l2-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eml2-sub { font-size: 11px; color: var(--l2-text4); margin-top: 3px; }
.eml2-row .snd2-chip { justify-self: end; }
.eml2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.email-srcrow { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--hair-2); flex-wrap: wrap; }
.src-chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.email-card { border: 0; border-radius: 0; overflow: hidden; background: none; flex: 1; display: flex; flex-direction: column; }
.email-card .email-foot { margin-top: auto; }
.email-top { padding: 16px 20px; border-bottom: 1px solid var(--hair-2); display: flex; flex-direction: column; gap: 9px; }
.email-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.email-meta .lab { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); min-width: 48px; flex: none; } /* min-width, not width: long localized labels push instead of overlapping */
.email-meta .val { color: var(--ink-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 5px; padding: 2px 7px; white-space: nowrap; flex: none; }
.email-meta .email-subject { font-size: 15px; }
.email-subject { font-size: 17px; font-weight: 560; color: #d0d6e0; letter-spacing: -0.01em; }
.email-body { padding: 22px 24px; font-size: 14.5px; line-height: 1.72; color: var(--ink-1); }
.email-body p { margin: 0 0 14px; }
.email-body .sig { color: var(--ink-2); }
.ai-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 9px; vertical-align: 1px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-2);
  border: 1px solid var(--hair); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ai-tag svg { color: #8e97e8; }
.ai-hl { background: rgba(124,136,238,0.13); border-radius: 4px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.email-body .wa-line { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--c-green); }
.wa-link { color: var(--c-green); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--c-green) 55%, transparent); cursor: pointer; }
.email-tools { display: flex; align-items: center; gap: 16px; }
.fmt-icons { display: inline-flex; align-items: center; gap: 13px; color: var(--ink-3); opacity: 0.7; }
.email-foot { padding: 14px 20px; border-top: 1px solid var(--hair-2); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.badge-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); }
.wa-invite { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--c-green); background: color-mix(in oklab, var(--c-green) 12%, transparent); border: 1px solid color-mix(in oklab, var(--c-green) 28%, transparent); padding: 6px 11px; border-radius: 8px; }
.email-switcher { display: flex; gap: 8px; margin: 0 auto 18px; justify-content: center; flex-wrap: wrap; }

/* edit mode */
.email-card.editing { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), 0 20px 50px -34px rgba(0,0,0,0.85); }
.email-meta { position: relative; }
.edited-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--accent-bright); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 999px; padding: 3px 9px; }
.email-meta { display: flex; align-items: center; gap: 10px; }
.email-subject-input { width: 100%; font-family: var(--font); font-size: 17px; font-weight: 560; color: var(--ink-0); letter-spacing: -0.01em; background: rgba(255,255,255,0.04); border: 1px solid var(--hair); border-radius: 8px; padding: 9px 12px; outline: none; transition: border-color .15s ease; }
.email-subject-input:focus { border-color: var(--accent-line); }
.email-body.editing { padding: 16px 18px; }
.email-textarea { width: 100%; resize: none; overflow: hidden; min-height: 240px; font-family: var(--font); font-size: 14.5px; line-height: 1.72; color: var(--ink-0); background: rgba(255,255,255,0.035); border: 1px solid var(--hair); border-radius: 10px; padding: 14px 16px; outline: none; transition: border-color .15s ease; white-space: pre-wrap; }
.email-textarea:focus { border-color: var(--accent-line); }
.email-actions { display: inline-flex; align-items: center; gap: 10px; }
.btn.btn-sm { padding: 7px 14px; font-size: 13.5px; border-radius: 9999px; }
.edit-hint { color: var(--accent-bright); }

/* Step 4 — unified inbox, two-pane, hero-window (lin) style */
.ibx2 { display: flex; margin: -22px; min-height: 470px; text-align: left;
  --l2-text: #F7F8F8; --l2-text2: #D0D6E0; --l2-text3: #8A8F98; --l2-text4: #8A8F98;
  --l2-line: rgba(255,255,255,0.07); --l2-line2: rgba(255,255,255,0.045);
  --l2-indigo: #5E6AD2; --l2-green: #4cb782; --l2-elev: #1c1d1f; }
.ibx2-list { width: 358px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--l2-line); }
.ibx2-head { display: flex; align-items: center; justify-content: space-between; height: 50px; flex: none; padding: 0 16px; border-bottom: 1px solid var(--l2-line); }
.ibx2-head-l { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #cad0db; }
.ibx2-head-l > svg { color: var(--l2-text3); }
.ibx2-new { font-size: 11.5px; color: var(--l2-text3); font-variant-numeric: tabular-nums; }
.ibx2-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; padding: 16px; border-bottom: 1px solid var(--l2-line2); align-items: start; position: relative; }
.ibx2-row.active { background: linear-gradient(90deg, rgba(202,208,219,0.09), rgba(255,255,255,0.05) 60%); }
.ibx2-row.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #cad0db, rgba(202,208,219,0.5)); }
/* channel marker — small icon to the right of the name (wa green / mail grey) */
.ibx2-ch { display: inline-flex; flex: none; color: var(--l2-text3); }
.ibx2-ch.wa { color: var(--l2-green); }
.ibx2-mid { min-width: 0; }
.ibx2-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ibx2-who { font-size: 13.5px; font-weight: 550; color: #cad0db; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibx2-co { font-size: 11.5px; color: var(--l2-text4); margin-top: 3px; }
.ibx2-prev { font-size: 12.5px; color: var(--l2-text3); margin-top: 8px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibx2-row.unread .ibx2-prev { color: var(--l2-text2); }
.ibx2-meta-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-top: 1px; }
.ibx2-when { font-size: 10.5px; color: var(--l2-text4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ibx2-dot { width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.ibx2-row.unread .ibx2-dot { background: var(--l2-indigo); }

.ibx2-conv { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* thread avatar — initials in the Why-Polaris small-circle style (.viz-inner):
   radial top-lit gradient does the lighting, one crisp hairline, no bottom arc */
.ibx2-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: #cdd2da;
  background: radial-gradient(120% 120% at 32% 22%, #212223, #0c0d0e 82%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.ibx2-id { display: flex; flex-direction: column; gap: 1px; }
.ibx2-name { font-size: 14px; font-weight: 600; color: #cad0db; }
.ibx2-sub { font-size: 10.5px; color: var(--l2-text4); }
.ibx2-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--l2-line); color: var(--l2-text3); }
.ibx2-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.ibx2-sep { text-align: center; margin: 4px 0 8px; }
.ibx2-sep > span { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--l2-text2); background: rgba(255,255,255,0.06); border-radius: 6px; padding: 4px 10px; }
.ibx2-sep span span { background: none; padding: 0; }
.ibx2-meta { font-size: 10.5px; color: var(--l2-text3); margin: 2px 2px 4px; }
.ibx2-meta.me { align-self: flex-end; }
.ibx2-meta.them { align-self: flex-start; }
.ibx2-bub { max-width: 74%; font-size: 13.5px; line-height: 1.5; padding: 10px 13px; border-radius: 12px; color: #cad0db; border: 1px solid transparent; }
.ibx2-bub.them { align-self: flex-start; border-bottom-left-radius: 4px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,0.045), transparent 55%) padding-box,
    linear-gradient(#121314, #121314) padding-box,
    radial-gradient(140% 130% at 0% 0%, #5b5b5c, rgba(91,91,92,0.1) 78%) border-box; }
.ibx2-bub.me { align-self: flex-end; border-bottom-right-radius: 4px;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,0.045), transparent 55%) padding-box,
    linear-gradient(#121314, #121314) padding-box,
    radial-gradient(140% 130% at 100% 0%, #5b5b5c, rgba(91,91,92,0.1) 78%) border-box; }
.ibx2-input { display: flex; align-items: center; gap: 10px; margin: 4px 16px 16px; padding: 10px 14px; border: 1px solid var(--l2-line); border-radius: 10px; background: #141516; flex: none; }
.ibx2-ph { flex: 1; font-size: 13.5px; color: var(--l2-text4); }
.ibx2-send { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: #08090A; background: #E5E5E6;
  box-shadow: rgba(0,0,0,0) 0px 8px 2px 0px, rgba(0,0,0,0.01) 0px 5px 2px 0px, rgba(0,0,0,0.04) 0px 3px 2px 0px, rgba(0,0,0,0.07) 0px 1px 1px 0px, rgba(0,0,0,0.08) 0px 0px 1px 0px; }

/* shared list shell (still used by the Sending step) */
.inbox { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

/* Step 3 — sending window: campaigns + premium senders (left) | recipients table (right) */
.snd3-left { width: 308px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--l2-line); }
.snd3-colhead { font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--l2-text2);
  height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--l2-line); }
.snd3-colhead > svg { color: var(--l2-text3); flex: none; }
.snd3-camp { height: 62px; padding: 12px 16px 0; border-bottom: 1px solid var(--l2-line2); position: relative; box-sizing: border-box; }
.snd3-camp.active { background: linear-gradient(90deg, rgba(202,208,219,0.09), rgba(255,255,255,0.05) 60%); }
.snd3-camp.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #cad0db, rgba(202,208,219,0.5)); }
.snd3-camp.dim { opacity: 0.55; }
.snd3-camp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.snd3-camp-name { font-size: 12.5px; font-weight: 550; color: var(--l2-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snd3-camp-bot { display: flex; justify-content: flex-start; margin-top: 8px; }
.snd3-count { font-family: var(--mono); font-size: 10.5px; color: var(--l2-text3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.snd2-chip.sending { color: #e0b301; background: color-mix(in oklab, #e0b301 12%, transparent); }
.snd2-chip.scheduled { color: var(--l2-text3); background: rgba(255,255,255,0.06); }
/* premium block */
.snd3-premium { border-top: 1px solid var(--l2-line); border-bottom: 1px solid var(--l2-line); padding-bottom: 4px; }
.snd3-prem-line { display: flex; align-items: center; gap: 8px; padding: 13px 16px 9px; font-size: 11px; color: #e8c574; }
.snd3-prem-line > svg { flex: none; color: #e8c574; }
.snd3-gold, .snd3-gold span { background: linear-gradient(100deg, #c9952f 0%, #f7d77e 38%, #fff3cf 50%, #f7d77e 62%, #c9952f 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: snd3-gold-slide 3.4s linear infinite; }
@keyframes snd3-gold-slide { from { background-position: 200% 0; } to { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .snd3-gold, .snd3-gold span { animation: none; } }
.snd3-sender { display: grid; grid-template-columns: 7px 1fr auto 38px; align-items: center; gap: 9px; padding: 8px 16px; }
.snd3-sender .snd2-health { text-align: right; }
.snd3-left .snd2-id { color: var(--l2-text2); }
/* right pane: strict table */
.snd3-grid { display: grid; grid-template-columns: 1fr 162px 92px; align-items: center; gap: 12px; padding: 0 18px; } /* per-row send icons removed 2026-06-12 (plane lives in the Campañas header now) */
.snd3-thead { height: 50px; border-bottom: 1px solid var(--l2-line); }
.snd3-th { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--l2-text3); }
.snd3-th-rec { grid-column: 1 / 2; font-family: var(--font); font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--l2-text2); display: flex; align-items: center; gap: 10px; }
.snd3-th-rec > svg { color: var(--l2-text3); flex: none; }
.snd3-th-via, .snd3-th-st { justify-self: end; }
.snd3-row { height: 62px; border-bottom: 1px solid var(--l2-line2); }
.snd3-row.snd3-sum { border-bottom: 0; opacity: 0.55; }
.snd3-sum-txt { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; color: var(--l2-text3); }
.snd3-rec { font-size: 13.5px; font-weight: 500; color: var(--l2-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snd3-city { font-weight: 400; color: var(--l2-text4); }
.snd3-row .snd2-tag, .snd3-row .snd2-chip { justify-self: end; }
/* legacy snd2 bits kept: bar, dot, id, warm, health, tag, chip, ico, foot */
.snd2-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--l2-green); flex: none;
  box-shadow: 0 0 6px color-mix(in oklab, var(--l2-green) 55%, transparent); }
.snd2-id { font-family: var(--mono); font-size: 12px; color: var(--l2-text); min-width: 0; }
.snd2-warm { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--l2-green); }
.snd2-health { font-family: var(--mono); font-size: 11.5px; color: var(--l2-text3); font-variant-numeric: tabular-nums; }
.snd2-bar { width: 96px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.07); overflow: hidden; display: inline-block; }
.snd2-bar i { display: block; height: 100%; border-radius: 3px; background: var(--l2-green); }
.snd2-ico { color: var(--l2-text3); }
.snd2-tag { font-family: var(--mono); font-size: 10px; color: var(--l2-text3); border: 1px solid var(--l2-line); border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.snd2-chip { font-size: 10px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.snd2-chip.delivered { color: var(--l2-green); background: color-mix(in oklab, var(--l2-green) 12%, transparent); }
.snd2-chip.pending { color: #e0b301; background: color-mix(in oklab, #e0b301 12%, transparent); }
.snd2-foot { margin-top: auto; display: flex; justify-content: flex-end; padding: 16px 18px; }
.thread { display: grid; grid-template-columns: 38px 1fr auto; gap: 13px; align-items: start; padding: 15px 16px; border: 1px solid var(--hair-2); border-radius: 13px; background: rgba(255,255,255,0.018); transition: border-color .15s ease; }
.thread:hover { border-color: var(--hair); }
.thread .ch { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.thread .ch.mail { color: var(--c-blue); background: color-mix(in oklab, var(--c-blue) 14%, transparent); }
.thread .ch.wa { color: var(--c-green); background: color-mix(in oklab, var(--c-green) 14%, transparent); }
.thread .who { font-size: 13.5px; color: var(--ink-0); font-weight: 500; }
.thread .co2 { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.thread .msg { font-size: 13.5px; color: var(--ink-1); margin-top: 5px; line-height: 1.5; }
.thread .when { font-family: var(--mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.thread .unread { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-top: 5px; }
@media (max-width: 820px) { .targets { grid-template-columns: 1fr; } .prod-tab span.lbl { display: none; } }

/* ============================================================
   OFFER + CTA + PRICING + SIGNUP
   ============================================================ */
.offer { text-align: center; }
.offer .offer-line { font-weight: 580; font-size: 54px; line-height: 1.12; letter-spacing: -0.03em; max-width: 920px; margin: 18px auto 0; text-wrap: balance; }
.offer .offer-line .accent-ink { color: var(--accent-bright); }

.trial-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 54px; text-align: left; }
.trial-card { padding: 30px; border-radius: var(--radius-lg); background: #121314; }
.trial-card:nth-child(1)::before { background: radial-gradient(70% 58% at 100% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%); }
.trial-card:nth-child(2)::before { background:
    radial-gradient(66% 56% at 0% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%),
    radial-gradient(58% 52% at 100% 100%, rgba(255,255,255,0.026), transparent 74%); }
.trial-card .tc-step { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.trial-card.locked .tc-step { color: var(--ink-3); }
.trial-card h3 { font-size: 21px; font-weight: 580; letter-spacing: -0.02em; margin: 16px 0 10px; }
.trial-card p { color: var(--ink-1); font-size: 15px; line-height: 1.62; margin: 0; }
.trial-card .lock-ico { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,0.05); border: 1px solid var(--hair); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
@media (max-width: 760px) { .trial-cards { grid-template-columns: 1fr; } .offer .offer-line { font-size: 30px; } }

/* "Built for Mexico" — interactive benefits strip (Linear tech-specs style) */
.bfm { margin: 38px auto 4px; padding: 22px 0 4px; max-width: 980px; border-top: 1px solid var(--hair-2); text-align: center; }
.bfm-eyebrow { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.bfm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; }
.bfm-item { display: inline-flex; align-items: center; gap: 0; background: none; border: 0; padding: 4px 0; margin: 0; cursor: pointer; font-family: var(--font); font-size: 13.5px; color: var(--ink-2); transition: color .16s ease; line-height: 1.4; }
.bfm-item:hover, .bfm-item.active { color: var(--ink-0); }
.bfm-item + .bfm-item::before { content: "·"; margin: 0 14px; color: var(--ink-3); }
.bfm-label { position: relative; }
.bfm-plus { display: inline-flex; align-items: center; justify-content: center; width: 0; overflow: hidden; opacity: 0; margin-left: 0;
  color: inherit; transition: width .18s ease, opacity .18s ease, margin-left .18s ease; }
.bfm-item:hover .bfm-plus, .bfm-item.active .bfm-plus { width: 14px; opacity: 1; margin-left: 7px; }
@media (max-width: 680px) { .bfm-item { white-space: normal; } }

/* Built for Mexico — prominent always-visible feature boxes (replaces the click-to-reveal strip) */
.bfm-section { margin-top: 54px; }
.bfm-section .bfm-eyebrow { text-align: center; margin-bottom: 22px; }
/* Built for Mexico — 2x2 table in the Why Polaris benefits style */
.bfm-grid { text-align: left; margin-top: 28px; }
.bfm-grid .bene-fig.bfm-fig { padding: 49px 40px 37px; }
.bfm-grid .spec-thumb { width: 100%; max-width: 380px; margin-top: 0; max-height: 278px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 86%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 86%); }
.bfm-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; text-align: left; }
.bfm-box { padding: 28px 28px 24px; border-radius: var(--radius-lg); background: #121314; display: flex; flex-direction: column; }
.bfm-box.window { border-color: rgba(255,255,255,0.13); }
.bfm-box-wide { grid-column: 1 / -1; }
.bfm-num { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.bfm-box h3 { font-size: 19px; font-weight: 580; letter-spacing: -0.02em; margin: 14px 0 9px; }
.bfm-box h3:first-child { margin-top: 0; }
.bfm-box p { color: var(--ink-1); font-size: 14.5px; line-height: 1.6; margin: 0; }
.bfm-box .spec-thumb { margin-top: 20px; }
.bfm-fig-divider { height: 1px; background: var(--hair-2); margin: 20px -28px 0; }
.bfm-box:nth-child(1)::before { background: radial-gradient(70% 58% at 0% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%); }
.bfm-box:nth-child(2)::before { background: radial-gradient(70% 58% at 100% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%); }
.bfm-box:nth-child(3)::before { background:
    radial-gradient(66% 56% at 100% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%),
    radial-gradient(56% 50% at 0% 100%, rgba(255,255,255,0.026), transparent 76%); }
.bfm-box:nth-child(4)::before { background:
    radial-gradient(66% 56% at 0% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.028) 34%, transparent 80%),
    radial-gradient(56% 50% at 100% 100%, rgba(255,255,255,0.026), transparent 76%); }
.bfm-box:nth-child(5)::before { background: radial-gradient(34% 84% at 100% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.026) 34%, transparent 82%); }
@media (max-width: 760px) { .bfm-boxes { grid-template-columns: 1fr; } }

/* slide-in tech-specs panel + page dim */
.spec-overlay { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: flex-end;
  background: rgba(4, 5, 7, 0); pointer-events: none; transition: background .4s ease; }
.spec-overlay.open { background: rgba(4, 5, 7, 0.66); pointer-events: auto; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.spec-panel { position: relative; width: min(480px, 92vw); height: 100%; overflow-y: auto;
  background: linear-gradient(180deg, #121419 0%, #0b0d10 100%);
  border-left: 1px solid var(--hair);
  box-shadow: -40px 0 80px -30px rgba(0,0,0,0.9);
  transform: translateX(100%); transition: transform .44s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.spec-overlay.open .spec-panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .spec-panel { transition: none; } .spec-overlay { transition: none; } }

.spec-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--hair-2);
  background: linear-gradient(180deg, rgba(18,20,25,0.96), rgba(18,20,25,0.82)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.spec-kicker { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.spec-x { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px;
  background: none; border: 1px solid transparent; color: var(--ink-2); cursor: pointer; transition: all .15s ease; }
.spec-x:hover { color: var(--ink-0); background: rgba(255,255,255,0.06); border-color: var(--hair); }

.spec-content { padding: 30px 26px 36px; text-align: left; }
.spec-num { font-family: var(--mono); font-size: 13px; color: var(--ink-3); letter-spacing: 0.06em; }
.spec-title { font-size: 27px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink-0); margin: 12px 0 0; text-align: left; text-wrap: pretty; }
.spec-overview { font-size: 15px; line-height: 1.64; color: var(--ink-1); margin: 18px 0 0; }
.spec-thumb { margin-top: 24px; border: 1px solid var(--hair); border-radius: 14px; padding: 16px; position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 50%), #0c0d0e;
  box-shadow: 0 1px 0 var(--hair-top) inset; }

/* ---- thumbnails (dark, minimal, static) ---- */
.th { font-size: 12.5px; color: var(--ink-1); }
.th-head { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding: 0 16px 10px; border-bottom: 1px solid var(--hair-2); margin: 0 -16px 12px; }
.th-registry .th-head svg path, .th-registry .th-head svg ellipse { stroke: url(#silverGrad); }
.th-rows { display: flex; flex-direction: column; }
.th-co { padding: 9px 0; border-bottom: 1px solid var(--hair-2); }
.th-co:last-child { border-bottom: none; }
.th-nm { font-size: 13px; color: var(--ink-0); font-weight: 480; }
.th-sub { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }

/* whatsapp thumb */
.th-wa .th-ch { display: inline-flex; align-items: center; justify-content: center; color: var(--c-green); }
.th-chat { display: flex; flex-direction: column; gap: 9px; padding-top: 2px; }
.th-bub { max-width: 82%; font-size: 12.5px; line-height: 1.45; padding: 9px 12px; }
.th-bub.in { align-self: flex-start; color: var(--ink-1); background: rgba(255,255,255,0.06); border: 1px solid var(--hair); border-radius: 12px 12px 12px 3px; }
.th-bub.out { align-self: flex-end; color: var(--ink-0); background: color-mix(in oklab, var(--c-green) 14%, transparent); border: 1px solid color-mix(in oklab, var(--c-green) 26%, transparent); border-radius: 12px 12px 3px 12px; }

/* checklist thumb — "your part of the job" */
.th-todo-rows { display: flex; flex-direction: column; }
.th-todo-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair-2); font-size: 13px; color: var(--ink-0); }
.th-tick { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; flex: none;
  color: var(--c-green); background: color-mix(in oklab, var(--c-green) 14%, transparent); }
.th-todo-rest { padding: 11px 0 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-3); }

/* email thumb */
.th-email-top { font-size: 11.5px; color: var(--ink-2); padding: 0 16px 10px; border-bottom: 1px solid var(--hair-2); margin: 0 -16px; }
.th-email-top .th-lab { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-right: 8px; }
.th-email-subj { font-size: 14px; font-weight: 560; color: var(--ink-0); margin: 12px 0; letter-spacing: -0.01em; }
.th-email-body { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.5; color: var(--ink-1); }

/* inbox thumb — minimalist silver monochrome */
.th-inbox-row { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--hair-2); border-radius: 10px; background: rgba(255,255,255,0.02); text-align: left; }
.th-mail { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--ink-1); background: rgba(255,255,255,0.05); border: 1px solid var(--hair); flex: none; }
.th-inbox-co { flex: 1; min-width: 0; }
.th-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-1); background: rgba(255,255,255,0.05); border: 1px solid var(--hair); border-radius: 7px; padding: 4px 8px; white-space: nowrap; }
.th-inbox-row + .th-inbox-row { margin-top: 8px; }

/* pricing */
/* full-viewport hairline divider (same recipe as .sol-step::before, section-border color) */
.full-rule { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: rgba(255,255,255,0.12); }
.pricing-head { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 80px; }
.currency-toggle { display: inline-flex; background: rgba(0,0,0,0.3); border: 1px solid var(--hair); border-radius: 10px; padding: 4px; gap: 4px; }
.currency-toggle button { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-2); background: none; border: none; padding: 7px 14px; border-radius: 7px; cursor: pointer; transition: all .15s ease; }
.currency-toggle button.on { color: var(--ink-0); background: rgba(255,255,255,0.08); }
.pricing-toggles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.billing-toggle button { display: inline-flex; align-items: center; gap: 8px; }
.save-pill { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); background: rgba(255,255,255,0.05); border: 1px solid var(--hair);
  border-radius: 999px; padding: 2px 7px; transition: color .25s ease, background .25s ease, border-color .25s ease; }
.save-pill.lit { color: var(--c-green); background: color-mix(in oklab, var(--c-green) 14%, transparent);
  border-color: color-mix(in oklab, var(--c-green) 32%, transparent); }
.lbill { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin: 6px 0 0; min-height: 14px; letter-spacing: 0.02em; }
.lnum { font-variant-numeric: tabular-nums; }

/* Linear-style pricing table — columns separated by hairlines, table rows */
.ltable { display: grid; grid-template-columns: 1fr 1fr; max-width: 920px; margin: 36px auto 0; /* 920 (was 880): Spanish feature lines fit on one row */
  border: 1px solid var(--hair); border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(157deg, #161719 0%, #101113 46%, #0c0d0f 100%);
  box-shadow: 0 1px 0 var(--hair-top) inset; }
.lcol { position: relative; display: flex; flex-direction: column; padding: 32px 30px 30px; text-align: left; }
.lcol + .lcol { border-left: 1px solid var(--hair); }
.lcol.primary { background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.01) 60%); }
.ltag { position: absolute; top: 18px; right: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: #20180a; border: 1px solid rgba(247,215,126,0.5); border-radius: 999px; padding: 4px 10px; background: linear-gradient(90deg, #c9952f, #f7d77e); box-shadow: 0 2px 10px -2px rgba(201,149,47,0.45); }
.lname { font-size: 20px; font-weight: 580; letter-spacing: -0.02em; color: var(--ink-0); }
.lprice { margin: 16px 0 6px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.lprice .lfrom { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-right: 1px; align-self: center; }
.lprice .lnum { font-size: 42px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink-0); line-height: 1; }
.lprice .lper { color: var(--ink-2); font-size: 14px; }
.lsub { color: var(--ink-1); font-size: 14px; line-height: 1.5; margin: 14px 0 22px; }
.lfeat { display: flex; flex-direction: column; margin: 0 0 24px; }
.lrow { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--ink-1); padding: 12px 0; border-bottom: 1px solid var(--hair-2); }
.lrow:first-child { border-top: 1px solid var(--hair-2); }
.lrow .lck { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: #f3f5f8; color: #08090a; margin-top: 1px; }
.lrow .lck svg { width: 12px; height: 12px; }
.lcta { margin-top: auto; }
.btn.full { width: 100%; justify-content: center; }
.mxn-note { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 18px; }
@media (max-width: 720px) { .ltable { grid-template-columns: 1fr; } .lcol + .lcol { border-left: none; border-top: 1px solid var(--hair); } }

/* signup + qualifying questions — hero-window style */
.signup-wrap { margin-top: 96px; }

/* signup — embedded inline as the page finale */
.signup-section { padding: 8px 24px 130px; }
.signup-section .signup { max-width: 640px; }

/* signup modal — form is hidden until a CTA opens it */
.signup-modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(4,5,7,0); opacity: 0; pointer-events: none; transition: opacity .3s ease, background .3s ease; }
.signup-modal-overlay.open { background: rgba(4,5,7,0.72); opacity: 1; pointer-events: auto; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.signup-modal { width: min(560px, 100%); max-width: 560px; max-height: 88vh; overflow-y: auto; margin: 0;
  transform: translateY(14px) scale(0.985); transition: transform .32s cubic-bezier(.4,0,.2,1); }
.signup-modal-overlay.open .signup-modal { transform: none; }
.signup-inner .signup-modal-close { position: absolute; top: 14px; right: 14px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 6px; background: none; border: none; color: var(--ink-3); cursor: pointer; transition: color .15s ease; }
.signup-inner .signup-modal-close:hover { color: var(--ink-0); }
@media (prefers-reduced-motion: reduce) { .signup-modal, .signup-modal-overlay { transition: none; } }

/* closing CTA under pricing */
.offer-close { text-align: center; margin-top: 64px; }
.offer-close-line { font-weight: 580; font-size: clamp(30px, 5vw, 66px); line-height: 1.12; letter-spacing: -0.03em; max-width: 1200px; margin: 0 auto 32px; text-wrap: pretty; color: var(--ink-0); }
/* free-tier reassurance box — sits under pricing, above the closing line */
.free-note { position: relative; max-width: 880px; margin: 30px auto 0; padding: 26px 30px; border-radius: var(--radius-lg); background: #121314; border: 1px solid rgba(255,255,255,0.13); overflow: hidden; box-shadow: 0 1px 0 0 var(--hair-top) inset; text-align: left; }
.free-note::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(28% 86% at 0% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.026) 36%, transparent 82%); }
.free-note > * { position: relative; }
.free-note h3 { font-size: 19px; font-weight: 580; letter-spacing: -0.02em; margin: 0 0 9px; color: var(--ink-0); }
.free-note p { color: var(--ink-1); font-size: 14.5px; line-height: 1.6; margin: 0; }
.signup { position: relative; max-width: 720px; margin: 0 auto; padding: 6px;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.13);
  background: #08090a;
  box-shadow: 0 1px 0 0 var(--hair-top) inset; }
.signup > * { position: relative; z-index: 1; }
.signup-inner { position: relative; border-radius: 10px; border: 1px solid transparent;
  background:
    linear-gradient(#0f1011, #0f1011) padding-box,
    radial-gradient(140% 130% at 100% 0%, #5b5b5c, rgba(91,91,92,0.18) 78%) border-box;
  padding: 40px 42px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 28px -16px rgba(0,0,0,0.55); }
.signup-inner::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(56% 46% at 100% 0%, rgba(255,255,255,0.05), rgba(255,255,255,0.026) 36%, transparent 80%); }
/* crisper, Linear-style border on all the text boxes */
.bad-card, .solution-glass, .b-card.window, .trial-card.window, .signup { border-color: rgba(255,255,255,0.13); }
.signup-inner > * { position: relative; z-index: 1; }
.signup .su-head { text-align: center; margin-bottom: 30px; }
.signup .su-head .su-eyebrow { display: block; margin-bottom: 12px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.signup .su-head h3 { font-size: 28px; font-weight: 580; letter-spacing: -0.025em; margin: 0; }
.signup .su-head p { color: var(--ink-1); font-size: 15px; margin: 12px 0 0; }
.q-progress { display: flex; gap: 7px; justify-content: center; margin-bottom: 26px; }
.q-progress i { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); transition: background .3s ease; }
.q-progress i.done { background: linear-gradient(90deg, #c9952f, #f7d77e); }
/* question pages locked to the tallest page (Q1, 5 options) so steps never resize the card */
.q-step { min-height: 432px; }
/* height-animated wrapper: questions <-> done screen roll smoothly (height set by JS, transition by CSS) */
.su-anim { transition: height .45s ease; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .su-anim { transition: none; } }
.q-step .q-num { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.q-step .q-title { font-size: 22px; font-weight: 560; letter-spacing: -0.02em; margin: 12px 0 22px; }
.q-options { display: flex; flex-direction: column; gap: 10px; }
.q-opt { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(255,255,255,0.02); cursor: pointer; transition: all .15s ease; font-size: 15px; color: var(--ink-1); text-align: left; font-family: var(--font); }
.q-opt:hover { border-color: var(--hair-top); color: var(--ink-0); }
.q-opt.sel { border-color: var(--hair-top); background: rgba(255,255,255,0.06); color: var(--ink-0); }
.q-opt .radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ink-3); flex: none; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; }
.q-opt.sel .radio { border-color: #f3f5f8 !important; }
.q-opt.sel .radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #f3f5f8; box-shadow: none; }
.q-input { width: 100%; padding: 15px 17px; border-radius: 12px; border: 1px solid var(--hair); background: rgba(255,255,255,0.02); color: var(--ink-0); font-family: var(--font); font-size: 15px; outline: none; transition: border-color .15s ease; }
.q-input:focus { border-color: var(--accent-line); }
.q-input::placeholder { color: var(--ink-3); }
.q-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; }
.q-done { text-align: center; padding: 10px 0; }
.q-done .check-big { width: 56px; height: 56px; border-radius: 50%; background: color-mix(in oklab, var(--c-green) 16%, transparent); border: 1px solid color-mix(in oklab, var(--c-green) 34%, transparent); color: var(--c-green); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.q-done h3 { font-size: 25px; font-weight: 580; letter-spacing: -0.02em; margin: 0 0 10px; }
.q-done p { color: var(--ink-1); font-size: 15px; margin: 0 auto 26px; max-width: 440px; line-height: 1.6; }
@media (max-width: 620px) { .signup-inner { padding: 28px 22px; } }

/* footer */
.site-footer { border-top: 1px solid var(--hair-2); margin-top: 110px; padding: 44px 0; }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.footer-inner > :first-child { justify-self: start; }
.footer-inner .footer-legal { justify-self: center; }
.footer-inner .fnote { justify-self: end; text-align: right; color: var(--ink-3); font-size: 13px; }
@media (max-width: 820px) {
  .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .footer-inner > :first-child, .footer-inner .footer-legal, .footer-inner .fnote { justify-self: center; text-align: center; }
}
.footer-links { display: flex; gap: 24px; }
.footer-links a { color: var(--ink-2); text-decoration: none; font-size: 13px; }
.footer-links a:hover { color: var(--ink-0); }
.footer-legal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.footer-legal a { color: var(--ink-3); text-decoration: none; font-size: 13px; transition: color .15s ease; }
.footer-legal a:hover { color: var(--ink-1); }
.footer-legal .sep { color: var(--ink-3); opacity: 0.5; font-size: 13px; }
.footer-legal .copyright { color: var(--ink-3); font-size: 13px; }