.ydb-landing{
    --navy:#00034D;
    --cobalt:#253E9A;
    --sky:#6183D8;
    --aqua:#6CB4E4;
    --quartz:#8B8ED6;
    --fog:#E2E2E2;
    --ink:#0B0E2E;
    --paper:#FAFAF7;
    --paper-2:#F2F1EC;
    --rule:#D9D8D2;
    --hi:#6CB4E4;        /* highlighter — FieldPulse Sky */
    --hi-2:#4a6dc7;
  }
  .ydb-landing *{box-sizing:border-box}
  
  .ydb-landing{
    font-family:'Montserrat',system-ui,sans-serif;
    color:var(--ink);
    background:var(--paper);
    font-weight:500;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .ydb-landing .mono{font-family:'JetBrains Mono',ui-monospace,monospace}
  .ydb-landing .script{font-family:'Caveat',cursive;font-weight:600}

  .ydb-landing a{color:inherit;text-decoration:none}

  /* ---------- section chrome ---------- */
  .ydb-landing .section{ position:relative; }
  .ydb-landing .container{max-width:1120px; margin:0 auto; padding:0 32px}

  /* ---------- Buttons ---------- */
  .ydb-landing .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px; border-radius:999px;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:14px;
    letter-spacing:.01em; cursor:pointer; border:1px solid transparent;
    transition:transform .15s ease, background .2s, color .2s, box-shadow .2s;
  }
  .ydb-landing .btn-primary{background:var(--navy); color:#fff}
  .ydb-landing .btn-primary,
  .ydb-landing .btn-primary:link,
  .ydb-landing .btn-primary:visited,
  .ydb-landing .btn-primary:hover,
  .ydb-landing .btn-primary:active,
  .ydb-landing .btn-primary:focus{color:#fff}
  .ydb-landing .btn-primary:hover{background:#080b63; transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(0,3,77,.55)}
  .ydb-landing .btn-outline{background:transparent; color:var(--ink); border-color:#1a1d3d}
  .ydb-landing .btn-outline:hover{background:#8bb7ff; color:var(--navy); border-color:#8bb7ff}
  .ydb-landing .btn-blue{background:var(--cobalt); color:#fff}
  .ydb-landing .btn-blue:hover{background:#1b318a}
  .ydb-landing .btn-ghost{background:transparent; color:var(--navy); padding:10px 14px; font-size:13px}
  .ydb-landing .btn-ghost:hover{color:var(--cobalt)}

  /* ---------- HERO ---------- */
  .ydb-landing .hero{ padding:32px 32px 110px; text-align:center; position:relative; overflow:hidden }
  .ydb-landing .hero .eyebrow{
    display:inline-block; padding:7px 14px; border-radius:999px;
    border:1px solid var(--rule); background:#fff;
    font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; color:#53596e;
    text-transform:uppercase;
  }
  .ydb-landing .hero h1{
    font-size:clamp(44px, 7.5vw, 96px);
    line-height:1.02;
    letter-spacing:-.025em;
    font-weight:800;
    margin:24px 0 22px;
    color:var(--navy);
  }
  .ydb-landing .hero h1 .period{color:var(--cobalt)}
  .ydb-landing .hi-mark{
    position:relative; display:inline-block; padding:0 .08em;
    background:linear-gradient(120deg, var(--hi) 0%, var(--hi) 96%, var(--hi-2) 100%);
    background-size:100% 52%; background-repeat:no-repeat; background-position:0 78%;
    transform:rotate(-.4deg);
  }
  .ydb-landing .hero p.sub{
    max-width:640px; margin:0 auto; color:#3a3e5a;
    font-size:18px; line-height:1.6;
  }
  .ydb-landing .hero-ctas{margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
  .ydb-landing .hero-trust{
    margin-top:28px; display:flex; gap:28px; justify-content:center; flex-wrap:wrap;
    font-family:'Montserrat',sans-serif; font-size:13px; font-weight:500; color:#53596e;
  }
  .ydb-landing .hero-trust span{display:inline-flex; align-items:center; gap:8px}
  .ydb-landing .dot{width:6px;height:6px;border-radius:50%; background:var(--cobalt)}

  /* subtle hero grid backdrop */
  .ydb-landing .hero::before{
    content:""; position:absolute; inset:0;
    background-image:
      linear-gradient(var(--rule) 1px, transparent 1px),
      linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    opacity:.35; pointer-events:none;
  }
  .ydb-landing .hero > *{position:relative}

  /* ---------- COST SECTION ---------- */
  .ydb-landing .cost{padding:70px 0 100px; background:var(--paper)}
  .ydb-landing .cost h2, .ydb-landing .scenes h2, .ydb-landing .testimonials h2, .ydb-landing .offer h2, .ydb-landing .wrap h2{
    font-weight:800; letter-spacing:-.02em; color:var(--navy);
    font-size:clamp(34px, 4.8vw, 56px);
    text-align:center; line-height:1.08; margin:8px 0 10px;
    text-wrap:balance;
  }
  .ydb-landing .section-kicker{
    display:block; text-align:center; color:var(--cobalt);
    font-family:'Caveat',cursive; font-size:22px; font-weight:600;
  }
  .ydb-landing .section-sub{
    text-align:center; color:#4a4f6b; max-width:620px; margin:0 auto 40px;
    font-size:16px;
  }
  .ydb-landing .cost-grid{
    display:grid; grid-template-columns: 1.15fr 1fr; gap:22px;
    max-width:1040px; margin:0 auto;
  }
  .ydb-landing .pain-list{display:flex; flex-direction:column; gap:14px}
  .ydb-landing .pain{
    background:#FDECEC; border:1px solid #F4C9C9;
    border-radius:14px; padding:20px 22px;
    position:relative;
  }
  .ydb-landing .pain h4{margin:0 0 6px; font-size:16px; color:#7A1C1C; letter-spacing:-.01em; font-weight:700}
  .ydb-landing .pain p{margin:0; font-size:14px; color:#5E2828; line-height:1.55}

  .ydb-landing .better-card{
    background:linear-gradient(180deg,#F2F6FF 0%, #E6EEFF 100%);
    border:1px solid #C8D4F2;
    border-radius:18px; padding:28px; position:relative;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 20px 40px -24px rgba(37,62,154,.3);
  }
  .ydb-landing .better-tag{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    background:var(--hi); color:var(--navy); font-weight:700; font-size:12px;
    padding:6px 14px; border-radius:999px; letter-spacing:.04em;
    border:1px solid #E4B93C;
  }
  .ydb-landing .better-card h3{
    text-align:center; margin:6px 0 18px; color:var(--navy); font-weight:700; font-size:22px;
  }
  .ydb-landing .stat-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 2px; border-bottom:1px dashed #AFC0EA;
    font-size:14px;
  }
  .ydb-landing .stat-row:last-of-type{border-bottom:none}
  .ydb-landing .stat-row .label{color:#2a365e}
  .ydb-landing .stat-row .value{font-weight:700; color:var(--cobalt); font-variant-numeric:tabular-nums}
  .ydb-landing .stat-row .value.green{color:#118A4C}
  .ydb-landing .better-card .btn{width:100%; justify-content:center; margin-top:18px}

  /* ---------- SCENES ---------- */
  .ydb-landing .scenes{padding:100px 0 110px; background:var(--paper-2)}
  .ydb-landing .scene{
    display:grid; grid-template-columns: 1fr 1fr; gap:56px;
    align-items:center; padding:36px 0;
  }
  .ydb-landing .scene:nth-child(even){direction:rtl}
  .ydb-landing .scene:nth-child(even) > *{direction:ltr}
  .ydb-landing .scene-visual{
    border:1px solid var(--rule); border-radius:18px;
    background:#fff; padding:14px;
    box-shadow: 0 20px 40px -28px rgba(0,3,77,.25);
  }
  .ydb-landing .scene-visual .head{
    display:flex; justify-content:space-between; align-items:center;
    font-family:'JetBrains Mono',monospace; font-size:11px; color:#6b708a;
    padding:4px 6px 10px;
  }
  .ydb-landing .scene-visual .head .dots{display:flex; gap:6px}
  .ydb-landing .scene-visual .head .dots span{width:10px; height:10px; border-radius:50%; background:#E5E4DE}
.ydb-landing .scene-art{
    aspect-ratio: 4/3; border-radius:12px; position:relative; overflow:hidden;
    background:linear-gradient(160deg, #F6F7FB 0%, #ECEFF8 100%);
    display:grid; place-items:center; padding:16px;
  }
  /* When scene-art contains a real image, drop the fixed aspect ratio
     so the image's native proportions are preserved */
  .ydb-landing .scene-art.has-image{
    aspect-ratio:auto;
    padding:0;
    background:transparent;
  }
  .ydb-landing .scene-art .scene-img{
    width:100%; height:auto; display:block;
    border-radius:8px;
  }
  .ydb-landing .scene-text .time{
    font-family:'JetBrains Mono',monospace; color:var(--cobalt);
    font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  }
  .ydb-landing .scene-text h3{
    font-size:clamp(22px, 2.6vw, 32px); font-weight:700; letter-spacing:-.015em;
    margin:8px 0 14px; color:var(--navy); line-height:1.15;
  }
  .ydb-landing .scene-text p{color:#3a3e5a; font-size:15px; max-width:460px}

  /* ---------- Product UI mockups inside scene frames ---------- */
  /* Shared UI chrome */
  .ydb-landing .ui{
    background:#fff; border:1px solid #E4E6EF; border-radius:10px;
    width:100%; height:100%; display:flex; flex-direction:column;
    box-shadow:0 2px 6px -2px rgba(0,3,77,.08), 0 12px 24px -16px rgba(0,3,77,.15);
    overflow:hidden; font-family:'Montserrat',sans-serif;
  }
  .ydb-landing .ui-topbar{
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-bottom:1px solid #EEF0F6;
    background:linear-gradient(180deg, #FDFDFE 0%, #F8F9FC 100%);
  }
  .ydb-landing .ui-topbar .brand{
    display:flex; align-items:center; gap:7px;
    font-weight:800; color:var(--navy); font-size:11px; letter-spacing:-.01em;
  }
  .ydb-landing .ui-topbar .brand .logo-dot{
    width:14px;height:14px;border-radius:4px;
    background:linear-gradient(135deg, var(--cobalt) 0%, var(--navy) 100%);
  }
  .ydb-landing .ui-topbar .tabs{display:flex; gap:14px; margin-left:6px}
  .ydb-landing .ui-topbar .tabs span{
    font-size:10px; color:#7a7f95; font-weight:600; letter-spacing:.02em;
  }
  .ydb-landing .ui-topbar .tabs span.on{color:var(--cobalt); position:relative}
  .ydb-landing .ui-topbar .tabs span.on::after{
    content:""; position:absolute; left:0; right:0; bottom:-11px; height:2px;
    background:var(--cobalt); border-radius:1px;
  }
  .ydb-landing .ui-topbar .spacer{flex:1}
  .ydb-landing .ui-topbar .avatar{
    width:18px; height:18px; border-radius:50%;
    background:linear-gradient(135deg, var(--sky), var(--cobalt));
    border:1.5px solid #fff;
  }

  /* Scene 1 — Schedule board */
  .ydb-landing .ui-schedule{padding:12px 14px; gap:8px; display:flex; flex-direction:column; flex:1}
  .ydb-landing .ui-schedule .sched-head{
    display:flex; justify-content:space-between; align-items:center;
    font-size:11px; font-weight:700; color:var(--navy); margin-bottom:2px;
  }
  .ydb-landing .ui-schedule .sched-head .date{
    font-family:'JetBrains Mono',monospace; color:#6b708a; font-weight:500;
  }
  .ydb-landing .ui-schedule .sched-head .count{
    background:#E8F3FF; color:var(--cobalt); padding:2px 8px; border-radius:999px;
    font-size:10px; font-weight:700;
  }
  .ydb-landing .ui-schedule .grid{
    display:grid; grid-template-columns:44px 1fr; gap:6px 10px; flex:1;
    align-content:start;
  }
  .ydb-landing .ui-schedule .slot{
    font-family:'JetBrains Mono',monospace; font-size:9px; color:#8a8fa5;
    display:flex; align-items:center;
  }
  .ydb-landing .ui-schedule .jobrow{
    display:flex; gap:4px; align-items:center;
    height:18px;
  }
  .ydb-landing .ui-schedule .chip{
    height:18px; border-radius:4px;
    display:flex; align-items:center; padding:0 7px;
    font-size:9px; font-weight:600; color:#fff; letter-spacing:-.01em;
    white-space:nowrap; overflow:hidden;
  }
  .ydb-landing .ui-schedule .chip.c1{background:linear-gradient(90deg, var(--cobalt), #3651b3); width:55%}
  .ydb-landing .ui-schedule .chip.c2{background:linear-gradient(90deg, var(--sky), var(--cobalt)); width:38%}
  .ydb-landing .ui-schedule .chip.c3{background:linear-gradient(90deg, var(--aqua), var(--sky)); color:var(--navy); width:72%}
  .ydb-landing .ui-schedule .chip.c4{background:linear-gradient(90deg, var(--quartz), var(--cobalt)); width:48%}
  .ydb-landing .ui-schedule .chip.c5{background:linear-gradient(90deg, var(--navy), var(--cobalt)); width:62%}

  /* Scene 2 — Operator AI call */
  .ydb-landing .ui-call{padding:12px 14px; gap:8px; display:flex; flex-direction:column; flex:1}
  .ydb-landing .ui-call .call-head{
    display:flex; align-items:center; gap:8px;
    padding-bottom:8px; border-bottom:1px solid #EEF0F6;
  }
  .ydb-landing .ui-call .pulse{
    width:8px; height:8px; border-radius:50%;
    background:#16A34A; box-shadow:0 0 0 3px rgba(22,163,74,.2);
    animation: pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,.2)}
    50%{box-shadow:0 0 0 5px rgba(22,163,74,.35)}
  }
  .ydb-landing .ui-call .call-head .title{
    font-size:11px; font-weight:700; color:var(--navy);
  }
  .ydb-landing .ui-call .call-head .duration{
    margin-left:auto; font-family:'JetBrains Mono',monospace;
    font-size:10px; color:#6b708a;
  }
  .ydb-landing .ui-call .transcript{
    display:flex; flex-direction:column; gap:6px; flex:1;
    overflow:hidden;
  }
  .ydb-landing .ui-call .msg{
    font-size:10px; line-height:1.4; padding:7px 10px; border-radius:10px;
    max-width:82%;
  }
  .ydb-landing .ui-call .msg.them{background:#F4F6FB; color:#3a3e5a; border-bottom-left-radius:3px}
  .ydb-landing .ui-call .msg.ai{
    background:linear-gradient(135deg, var(--cobalt), var(--navy)); color:#fff;
    align-self:flex-end; border-bottom-right-radius:3px;
  }
  .ydb-landing .ui-call .booked{
    background:#F0FDF4; border:1px solid #BBF7D0; border-radius:8px;
    padding:8px 10px; display:flex; justify-content:space-between; align-items:center;
    margin-top:4px;
  }
  .ydb-landing .ui-call .booked .label{
    font-size:10px; font-weight:700; color:#166534;
    display:flex; align-items:center; gap:5px;
  }
  .ydb-landing .ui-call .booked .when{
    font-family:'JetBrains Mono',monospace; font-size:9.5px; color:#166534;
  }
  .ydb-landing .ui-call .check{
    width:12px; height:12px; border-radius:50%; background:#16A34A;
    display:inline-grid; place-items:center;
    color:#fff; font-size:8px; font-weight:900;
  }

  /* Scene 3 — Invoice paid */
  .ydb-landing .ui-invoice{padding:14px 16px; gap:8px; display:flex; flex-direction:column; flex:1}
  .ydb-landing .ui-invoice .inv-head{
    display:flex; justify-content:space-between; align-items:flex-start;
  }
  .ydb-landing .ui-invoice .inv-head .label{
    font-family:'JetBrains Mono',monospace; font-size:9px;
    color:#8a8fa5; letter-spacing:.06em; text-transform:uppercase;
  }
  .ydb-landing .ui-invoice .inv-head .num{
    font-size:11px; font-weight:700; color:var(--navy); margin-top:2px;
  }
  .ydb-landing .ui-invoice .inv-head .status{
    background:#DCFCE7; color:#166534;
    font-size:9px; font-weight:800; letter-spacing:.04em;
    padding:3px 8px; border-radius:999px;
    display:inline-flex; align-items:center; gap:4px;
  }
  .ydb-landing .ui-invoice .amount{
    font-size:34px; font-weight:800; color:var(--navy); letter-spacing:-.03em;
    line-height:1; margin:4px 0 2px;
  }
  .ydb-landing .ui-invoice .amount .cents{font-size:18px; color:#7a7f95}
  .ydb-landing .ui-invoice .customer{
    font-size:10px; color:#6b708a; margin-bottom:4px;
  }
  .ydb-landing .ui-invoice .lines{display:flex; flex-direction:column; gap:4px; margin-top:2px}
  .ydb-landing .ui-invoice .line{
    display:flex; justify-content:space-between;
    font-size:10px; color:#3a3e5a; padding:5px 0;
    border-bottom:1px dashed #E4E6EF;
  }
  .ydb-landing .ui-invoice .line:last-child{border-bottom:none}
  .ydb-landing .ui-invoice .line .v{font-variant-numeric:tabular-nums; font-weight:600}
  .ydb-landing .ui-invoice .paidstamp{
    margin-top:auto; display:flex; align-items:center; justify-content:center; gap:6px;
    background:linear-gradient(90deg, #F0FDF4, #DCFCE7);
    color:#166534; font-size:10px; font-weight:700;
    padding:8px; border-radius:8px;
    border:1px solid #BBF7D0;
  }

  /* Scene 4 — Golden hour home */
  .ydb-landing .ui-home{
    width:100%; height:100%; border-radius:10px; position:relative; overflow:hidden;
    background:
      radial-gradient(ellipse at 68% 32%, #FFDE99 0%, #FFBF6B 25%, transparent 55%),
      linear-gradient(180deg, #F9C77C 0%, #E89758 40%, #8B5A3C 75%, #3E2817 100%);
  }
  /* sun */
  .ydb-landing .ui-home::before{
    content:""; position:absolute; top:22%; right:18%;
    width:58px; height:58px; border-radius:50%;
    background:radial-gradient(circle, #FFF5D1 0%, #FFE08A 55%, transparent 75%);
    filter:blur(1px);
  }
  /* horizon / distant trees */
  .ydb-landing .ui-home::after{
    content:""; position:absolute; left:0; right:0; bottom:42%; height:1px;
    background:linear-gradient(90deg, transparent, rgba(62,40,23,.35), transparent);
  }
  .ydb-landing .ui-home .scene-frame{
    position:absolute; inset:0;
    display:flex; align-items:flex-end; justify-content:center;
    padding:0 8% 6%;
  }
  .ydb-landing .ui-home .house{
    position:relative;
    width:56%; aspect-ratio: 2.4/1;
    background:linear-gradient(180deg, #1F1611 0%, #0E0905 100%);
    clip-path:polygon(0 100%, 0 38%, 50% 0, 100% 38%, 100% 100%);
    filter:drop-shadow(0 6px 8px rgba(0,0,0,.35));
  }
  /* windows with warm glow */
  .ydb-landing .ui-home .window{
    position:absolute;
    background:radial-gradient(ellipse, #FFE08A 0%, #F5A623 70%, #C47515 100%);
    border-radius:2px;
    box-shadow:0 0 10px rgba(255,200,100,.6), 0 0 20px rgba(255,180,80,.3);
  }
  .ydb-landing .ui-home .w1{left:14%; top:55%; width:16%; height:22%}
  .ydb-landing .ui-home .w2{right:14%; top:55%; width:16%; height:22%}
  .ydb-landing .ui-home .door{
    position:absolute; left:44%; bottom:0; width:12%; height:36%;
    background:radial-gradient(ellipse at center top, #FFE08A 0%, #F5A623 60%, #8B5A3C 100%);
    border-radius:3px 3px 0 0;
    box-shadow:0 0 14px rgba(255,200,100,.55);
  }
  /* truck silhouette on road */
  .ydb-landing .ui-home .truck{
    position:absolute; left:12%; bottom:8%;
    width:22%; aspect-ratio:2/1;
    background:#0E0905;
    clip-path:polygon(0 60%, 22% 60%, 28% 25%, 62% 25%, 68% 60%, 100% 60%, 100% 100%, 0 100%);
    filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));
  }
  .ydb-landing .ui-home .truck::before,
  .ydb-landing .ui-home .truck::after{
    content:""; position:absolute; bottom:-8%;
    width:18%; aspect-ratio:1; border-radius:50%;
    background:#0a0604;
  }
  .ydb-landing .ui-home .truck::before{left:12%}
  .ydb-landing .ui-home .truck::after{right:12%}
  /* warm glow overlay */
  .ydb-landing .ui-home .glow{
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 50% 110%, rgba(255,200,120,.3) 0%, transparent 50%);
    pointer-events:none;
  }

  /* Scene 1 spec tweak — give the schedule extra chrome */
  .ydb-landing .scene-visual .head{
    display:flex; justify-content:space-between; align-items:center;
    font-family:'JetBrains Mono',monospace; font-size:11px; color:#6b708a;
    padding:4px 6px 10px;
  }
  .ydb-landing .scene-visual .head .dots{display:flex; gap:6px}
  .ydb-landing .scene-visual .head .dots span{width:10px; height:10px; border-radius:50%; background:#E5E4DE}
  .ydb-landing .scene-visual .head .dots span:nth-child(1){background:#FF5F57}
  .ydb-landing .scene-visual .head .dots span:nth-child(2){background:#FEBC2E}
  .ydb-landing .scene-visual .head .dots span:nth-child(3){background:#28C840}

  /* ---------- TESTIMONIALS ---------- */
  .ydb-landing .testimonials{padding:100px 0 110px; background:var(--paper)}
  .ydb-landing .tcards{
    display:flex; gap:14px;
    max-width:1120px; margin:32px auto 0;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-padding:0;
    padding:4px 0 8px;
  }
  .ydb-landing .tcards::-webkit-scrollbar{display:none}
  .ydb-landing .tcard{
    flex:0 0 calc((100% - 56px) / 5);
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
.ydb-landing .tcard{
    position:relative; border-radius:14px; overflow:hidden;
    aspect-ratio:9/16;
    cursor:pointer;
    border:1px solid rgba(0,3,77,.12);
    background:#0b0e2e;
    transition:flex-basis .4s ease, aspect-ratio .4s ease, transform .25s ease, box-shadow .25s ease;
  }
  .ydb-landing .tcard:hover{transform:translateY(-4px); box-shadow:0 30px 40px -24px rgba(0,3,77,.45)}

  /* Expand playing card to wider 3:4 aspect on desktop + tablet */
@media (min-width: 901px){
    .ydb-landing .tcard.is-playing{
      flex:0 0 calc(((100% - 56px) / 5) * 1.85);
      aspect-ratio:3/4;
      z-index:2;
    }
    .ydb-landing .tcards{
      transition:gap .4s ease;
    }
  }

  /* Mobile: slight expansion of tapped card so the crop feels right */
  @media (max-width: 900px){
    .ydb-landing .tcard.is-playing{
      flex:0 0 106%;
      aspect-ratio:4/5;
      z-index:2;
    }
  }

  /* poster image and video layered inside the card */
  .ydb-landing .tcard .tcard-media{
    position:absolute; inset:0; z-index:0;
    background:#0b0e2e;
  }
  .ydb-landing .tcard .tcard-poster,
  .ydb-landing .tcard .tcard-video{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center;
  }
  .ydb-landing .tcard .tcard-video{
    opacity:0; transition:opacity .25s ease;
    pointer-events:none;
  }
  .ydb-landing .tcard.is-playing .tcard-video{opacity:1}
  .ydb-landing .tcard.is-playing .tcard-poster{opacity:0; transition:opacity .25s ease}

  /* dark gradient so text reads regardless of poster image */
  .ydb-landing .tcard::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg, rgba(11,14,46,0) 0%, rgba(11,14,46,0) 40%, rgba(11,14,46,.92) 78%, rgba(11,14,46,1) 100%);
    pointer-events:none;
    transition:opacity .25s ease;
  }
  .ydb-landing .tcard.is-playing::after{opacity:.55}

  /* content layers on top */
  .ydb-landing .tcard .tcard-content{
    position:relative; z-index:2;
    height:100%; padding:16px 14px;
    display:flex; flex-direction:column; justify-content:space-between;
    color:#fff;
  }
  .ydb-landing .tcard .tcard-logo{
    align-self:flex-start;
    background:rgba(255,255,255,.95); padding:6px 8px; border-radius:6px;
    max-width:80%; height:28px;
    display:flex; align-items:center;
  }
  .ydb-landing .tcard .tcard-logo img{
    max-height:100%; max-width:100%; object-fit:contain;
    display:block;
  }
  .ydb-landing .tcard .play{
    position:absolute; top:14px; right:14px; z-index:3;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.92); color:var(--navy);
    display:grid; place-items:center;
    transition:opacity .2s ease;
  }
  .ydb-landing .tcard .play svg{width:14px; height:14px; fill:currentColor}
  .ydb-landing .tcard.is-playing .play{opacity:0}
  .ydb-landing .tcard .tcard-bottom{display:flex; flex-direction:column; gap:8px}
  .ydb-landing .tcard .quote{
    font-size:12px; line-height:1.4; font-weight:600;
    text-wrap:balance; margin:0;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  .ydb-landing .tcard .who{font-family:'JetBrains Mono',monospace; font-size:9.5px; opacity:.92; text-shadow:0 1px 2px rgba(0,0,0,.35)}
  .ydb-landing .tcard .who b{display:block; font-weight:700; font-family:'Montserrat',sans-serif; font-size:11px; letter-spacing:.02em}

  .ydb-landing .carousel-nav{
    display:flex; justify-content:center; gap:10px; margin-top:26px;
    font-family:'JetBrains Mono',monospace; font-size:12px; color:#6b708a;
    align-items:center;
  }
  .ydb-landing .carousel-nav button{
    width:34px; height:34px; border-radius:50%; border:1px solid var(--rule);
    background:#fff; cursor:pointer; color:var(--navy); display:grid; place-items:center;
  }
  .ydb-landing .carousel-nav button:hover{background:var(--navy); color:#fff; border-color:var(--navy)}

  /* Mobile carousel dots — only visible on mobile */
  .ydb-landing .tcards-dots{
    display:none;
    justify-content:center; align-items:center; gap:8px;
    margin-top:18px;
  }
  .ydb-landing .tcards-dots .dot{
    width:7px; height:7px; border-radius:50%;
    background:#D1D3E0; border:none; padding:0; cursor:pointer;
    transition:background .2s ease, transform .2s ease, width .2s ease;
  }
  .ydb-landing .tcards-dots .dot.active{background:var(--cobalt); width:22px; border-radius:999px}

  /* ---------- OFFER ---------- */
  .ydb-landing .offer{padding:100px 0 110px; background:linear-gradient(180deg, var(--paper) 0%, #EEF3FF 100%)}
  .ydb-landing .offer h2 .big-blue{color:var(--cobalt)}
  .ydb-landing .offer-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap:44px;
    max-width:1060px; margin:44px auto 0;
  }
.ydb-landing .form-card{
    background:#fff; border:1px solid var(--rule); border-radius:16px; padding:40px 36px 32px;
    box-shadow: 0 30px 50px -34px rgba(0,3,77,.25);
  }
  .ydb-landing .form-card h3{margin:0 0 4px; font-size:22px; color:var(--navy); letter-spacing:-.015em}
  .ydb-landing .form-card .lede{font-size:13px; color:#4a4f6b; margin:0 0 18px}
  .ydb-landing .form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
  .ydb-landing .form-row.single{grid-template-columns:1fr}
  .ydb-landing label.lbl{
    display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    color:#53596e; margin-bottom:6px; font-weight:600;
  }
  .ydb-landing .form-card input, .ydb-landing .form-card select{
    width:100%; padding:11px 13px; border-radius:8px;
    border:1px solid var(--rule); background:#FAFAF7;
    font-family:inherit; font-size:14px; color:var(--ink);
    transition:border-color .15s, background .15s;
  }
  .ydb-landing .form-card input:focus, .ydb-landing .form-card select:focus{
    outline:none; border-color:var(--cobalt); background:#fff;
    box-shadow:0 0 0 3px rgba(37,62,154,.12);
  }
  .ydb-landing .form-card .submit{
    width:100%; justify-content:center; margin-top:10px; padding:14px;
    font-size:15px;
  }
  .ydb-landing .form-fine{
    text-align:center; font-size:11px; color:#6b708a; margin-top:10px;
  }

  /* ---------- HubSpot form overrides ---------- */
  /* HubSpot injects its own structure inside the form card. These rules
     apply our design language to the auto-generated form markup. */
.ydb-landing .form-card .hs-form,
  .ydb-landing .form-card .hs-form > div,
  .ydb-landing .form-card .hs-form-private,
  .ydb-landing .form-card .hs-richtext,
  .ydb-landing .form-card .hs-richtext p{
    margin:0 !important;
    padding:0 !important;
  }
  .ydb-landing .form-card .hs-form fieldset{
    max-width:none !important; padding:0 !important; border:none !important; margin:0 0 0 0 !important;
  }
  .ydb-landing .form-card form.hs-form{
    margin-top:0 !important;
  }
  /* Collapse any empty fieldsets HubSpot injects */
  .ydb-landing .form-card .hs-form fieldset:empty{
    display:none !important;
  }
  .ydb-landing .form-card .hs-form-field{
    margin-bottom:18px;
  }
  .ydb-landing .form-card .hs-form-field > label{
    display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    color:#53596e; margin-bottom:8px; font-weight:600;
  }
  .ydb-landing .form-card .hs-form-field > label .hs-form-required{
    color:#C53030; margin-left:2px;
  }
  .ydb-landing .form-card .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]){
    width:100% !important; padding:11px 13px; border-radius:8px;
    border:1px solid var(--rule); background:#FAFAF7;
    font-family:inherit; font-size:14px; color:var(--ink);
    transition:border-color .15s, background .15s;
  }
  .ydb-landing .form-card textarea.hs-input{
    min-height:90px; resize:vertical;
  }
  .ydb-landing .form-card .hs-input:focus{
    outline:none; border-color:var(--cobalt); background:#fff;
    box-shadow:0 0 0 3px rgba(37,62,154,.12);
  }
  .ydb-landing .form-card .hs-error-msg,
  .ydb-landing .form-card .hs-error-msgs label{
    color:#C53030; font-size:11px; margin-top:4px; display:block;
  }
.ydb-landing .form-card .hs-submit,
  .ydb-landing .form-card .hs_submit,
  .ydb-landing .form-card form .hs-submit{
    margin-top:28px !important;
    padding-top:4px !important;
  }
  .ydb-landing .form-card .hs-button.primary,
  .ydb-landing .form-card input[type="submit"].hs-button{
    margin-top:8px !important;
  }
  .ydb-landing .form-card .hs_recaptcha{
    margin-bottom:20px !important;
  }
  .ydb-landing .form-card .hs-button.primary,
  .ydb-landing .form-card input[type="submit"].hs-button{
    width:100%; padding:14px 22px; border-radius:999px;
    background:var(--cobalt); color:#fff; border:none;
    font-family:'Montserrat',sans-serif; font-weight:700; font-size:15px;
    letter-spacing:.01em; cursor:pointer;
    transition:background .2s, transform .15s;
  }
  .ydb-landing .form-card .hs-button.primary:hover,
  .ydb-landing .form-card input[type="submit"].hs-button:hover{
    background:#1b318a; transform:translateY(-1px);
  }
  /* Two-column rows for form fields that HubSpot marks with .form-columns-2 */
.ydb-landing .form-card .form-columns-2 .hs-form-field{
    width:calc(50% - 6px) !important;
    float:left; margin-right:12px;
  }
  .ydb-landing .form-card .form-columns-2 .hs-form-field:last-child{
    margin-right:0;
  }
  .ydb-landing .form-card .form-columns-2::after{
    content:""; display:table; clear:both;
  }

  /* Mobile: force 2-col rows to stay 2-col, and 1-col fields to go full-width */
  @media (max-width: 600px){
    .ydb-landing .form-card .form-columns-2 .hs-form-field{
      width:calc(50% - 6px) !important;
      float:left !important;
      margin-right:12px !important;
    }
    .ydb-landing .form-card .form-columns-2 .hs-form-field:last-child{
      margin-right:0 !important;
    }
    .ydb-landing .form-card .form-columns-1 .hs-form-field,
    .ydb-landing .form-card .form-columns-1 .hs-input{
      width:100% !important;
      max-width:none !important;
    }
  }
  .ydb-landing .form-card .form-success{
    text-align:center; padding:24px 12px;
    color:#166534; font-weight:700; background:#F0FDF4;
    border:1px solid #BBF7D0; border-radius:10px;
  }

  .ydb-landing .steps h3{margin:0 0 14px; font-size:22px; color:var(--navy); letter-spacing:-.015em}
  .ydb-landing .step{
    display:grid; grid-template-columns: 48px 1fr; gap:14px;
    background:#fff; border:1px solid var(--rule); border-radius:12px;
    padding:16px 18px; margin-bottom:12px;
    transition:border-color .2s, transform .2s;
  }
  .ydb-landing .step:hover{border-color:var(--cobalt); transform:translateY(-1px)}
  .ydb-landing .step .num{
    width:40px; height:40px; border-radius:10px;
    background:#EEF3FF; color:var(--cobalt);
    display:grid; place-items:center; font-weight:800; font-size:18px;
    border:1px solid #D3DDF5;
  }
  .ydb-landing .step h4{margin:0 0 4px; font-size:15px; font-weight:700; color:var(--navy)}
  .ydb-landing .step p{margin:0; font-size:13px; color:#4a4f6b; line-height:1.5}

  .ydb-landing .fineprint{
    max-width:820px; margin:44px auto 0; text-align:center;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#868a9c;
    line-height:1.8; padding:22px 0; border-top:1px solid var(--rule);
  }
  .ydb-landing .card-fineprint{
    text-align:center; margin:22px 0 0;
    font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#868a9c;
    line-height:1.6;
  }

  /* ---------- WRAP / SOCIAL PROOF ---------- */
  .ydb-landing .wrap{padding:100px 0 120px; background:var(--paper)}
  .ydb-landing .wrap h2 .blue{color:var(--cobalt)}
  .ydb-landing .badges{
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
    max-width:960px; margin:40px auto 36px;
  }
  .ydb-landing .badge-card{
    background:#fff; border:1px solid var(--rule); border-radius:12px;
    padding:16px; display:flex; gap:14px; align-items:center;
    transition:transform .2s, box-shadow .2s;
  }
  .ydb-landing .badge-card:hover{transform:translateY(-2px); box-shadow:0 18px 30px -24px rgba(0,3,77,.35)}
 .ydb-landing .badge-icon{
    width:48px; height:48px; border-radius:10px;
    background:var(--paper-2); display:grid; place-items:center;
    font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--navy); font-weight:700;
    border:1px solid var(--rule);
    flex-shrink:0;
  }
  .ydb-landing .badge-icon.has-logo{
    background:#fff;
    padding:6px;
  }
  .ydb-landing .badge-icon.has-logo img{
    max-width:100%; max-height:100%;
    object-fit:contain; display:block;
  }
  .ydb-landing .badge-card h5{margin:0 0 2px; font-size:12px; color:var(--navy); font-weight:700; letter-spacing:-.01em; white-space:nowrap}
  .ydb-landing .stars{color:#F5A623; font-size:11px; letter-spacing:.12em; margin:2px 0}

  /* Partial-fill stars for ratings like 4.7/5 */
  .ydb-landing .stars-partial{
    position:relative; display:inline-block;
    font-size:11px; letter-spacing:.12em; margin:2px 0;
    line-height:1;
  }
  .ydb-landing .stars-partial .bg{
    color:#D9D8D2;
  }
  .ydb-landing .stars-partial .fg{
    position:absolute; top:0; left:0; overflow:hidden;
    color:#F5A623; white-space:nowrap;
    pointer-events:none;
  }
  .ydb-landing .badge-card .sub{font-size:10px; color:#6b708a; font-family:'JetBrains Mono',monospace; white-space:nowrap}

  .ydb-landing .final-cta{text-align:center; margin-top:8px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap}

  

  
  .ydb-landing #tweaks input[type="color"]{padding:0; width:44px; height:24px}

  /* responsive */
  @media (max-width: 900px){
    .ydb-landing .cost-grid, .ydb-landing .offer-grid, .ydb-landing .scene{grid-template-columns:1fr; gap:32px}
    .ydb-landing .scene:nth-child(even){direction:ltr}
    .ydb-landing .badges{grid-template-columns:repeat(2,1fr); gap:12px; padding:0 4px}
    .ydb-landing .badge-card{padding:12px; gap:10px; align-items:center}
    .ydb-landing .badge-icon{width:40px; height:40px; flex-shrink:0}
    .ydb-landing .badge-card h5{
      font-size:11px !important;
      white-space:normal !important;
      line-height:1.2;
    }
    .ydb-landing .badge-card .badge-sub{
      font-size:9.5px !important;
      white-space:normal !important;
      line-height:1.3;
    }
    .ydb-landing .badge-card .stars,
    .ydb-landing .badge-card .stars-partial{
      font-size:9px;
      margin:1px 0;
    }</parameter>

**What changed:**
- **Reduced grid gap** from default `16px` to `12px` — gives each card a hair more width
- **Badges container padding** of `4px` keeps cards from touching the screen edges
- **Smaller badge card padding** (12px vs 16px) and icon size (40px vs 48px) — more room for text
- **Override h5 to allow wrapping** — "QuickBooks Partner" and "4.8 / 5 rating" can wrap to 2 lines if needed without breaking layout
- **Override badge-sub to allow wrapping** — "2-Way Sync", "Top-rated FSM", "2.5k+ Reviews" can wrap naturally
- **Smaller font sizes across the board** on mobile only — desktop stays as-is
- `align-items:center` on the badge-card flex ensures the icon stays vertically centered against text that may be 1 or 2 lines

---

**What this fixes:**

- "QuickBooks Partner" / "2-Way Sync" card won't expand larger than its neighbor
- All 4 cards will have roughly matching heights since they can all wrap naturally
- Icons stay proportional to the text scale

**One thing I didn't touch:** the `padding:0 4px` on `.badges` applies padding inside the container, which might slightly reduce the row width. If cards still feel crushed, we can bump that to `0 8px` or just drop it. Try the current version first and see.
    .ydb-landing .nav-links{display:none}

    /* Testimonials: single-card swipeable carousel */
    .ydb-landing .tcards{
      display:flex;
      grid-template-columns:none;
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      /* edge padding so first/last card can center with peek */
      padding:4px 12% 8px;
      margin:32px -32px 0;
      scroll-padding:0 12%;
    }
    .ydb-landing .tcards::-webkit-scrollbar{display:none}
    .ydb-landing .tcard{
      flex:0 0 76%;
      scroll-snap-align:center;
      scroll-snap-stop:always;
    }
    .ydb-landing .tcard:hover{transform:none}

    .ydb-landing .tcards-dots{display:flex}
    .ydb-landing .carousel-nav .mono{display:none}

    /* Hero trust badges: tighter stack when they wrap */
    .ydb-landing .hero-trust{gap:8px 28px}
    /* Hide Test Drive CTA on mobile */
    .ydb-landing .btn-outline{display:none !important}
  }