:root {
     --blue: #2250F4;
     --blue-ink: #ffffff;
     --panel: #EAEBEB;
     --card: #ffffff;
     --ink: #0B0B0B;
     --ink-soft: #6B6B6B;
     --ink-faint: #B8B8B8;
     --link: #2250F4;
     --row-bg: #ffffff;
     --row-bd: #EDEDED;
     --radius-card: 16px;
     --radius-row: 999px;
     --font: "Inter", "Inter Variable", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
 }

 * {
     box-sizing: border-box
 }

 html,
 body {
     margin: 0;
     padding: 0;
     height: 100%
 }

 body {
     font-family: var(--font);
     font-variation-settings: "opsz" 20;
     color: var(--ink);
     background: var(--panel);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     overflow-x: hidden;
 }

 .wrap {
     display: grid;
     grid-template-columns: 510px 1fr;
     min-height: 100vh;
 }

 .left {
     position: relative;
     background: var(--blue);
     color: var(--blue-ink);
     padding: 80px 60px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
 }

 .headline {
     font-size: 40px;
     line-height: 1.12;
     letter-spacing: -0.01em;
     font-weight: 700;
     margin: 0 0 20px 0;
     max-width: 100%;
 }

 .lede {
     font-size: 18px;
     line-height: 1.5;
     font-weight: 400;
     max-width: 100%;
     opacity: .98;
     margin: 0 0 28px 0;
 }

 .lede b {
     font-weight: 700
 }

 .back {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: #fff;
     text-decoration: none;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: .1px;
 }

 .back:hover {
     opacity: .88
 }

 .back .arrow {
     display: inline-block;
     width: 14px;
     height: 14px;
     position: relative;
     top: 1px;
 }

 .plane {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 40%;
     pointer-events: none;
     opacity: .55;
 }

 .right {
     position: relative;
     background: var(--panel);
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 48px 24px;
 }

 .stack {
     width: 100%;
     max-width: 340px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .logo-slot {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 56px;
     margin-bottom: 28px;
     /* intentionally empty — user adds logo here */
 }

 .logo-slot img,
 .logo-slot svg {
     max-height: 40px;
     width: auto;
     display: block;
 }

 .card {
     width: 100%;
     background: var(--card);
     border-radius: var(--radius-card);
     padding: 18px 18px 20px 18px;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 10px 30px rgba(0, 0, 0, .04);
 }

 .card .label {
     font-size: 12.5px;
     color: var(--ink-soft);
     text-align: center;
     margin: 4px 0 14px 0;
     font-weight: 400;
 }

 .card .label a {
     color: var(--link);
     text-decoration: underline;
     text-underline-offset: 2px;
 }

 .rows {
     display: flex;
     flex-direction: column;
     gap: 10px
 }

 .row {
     display: flex;
     align-items: center;
     gap: 12px;
     background: var(--row-bg);
     border: 1px solid var(--row-bd);
     border-radius: var(--radius-row);
     padding: 10px 16px 10px 10px;
     cursor: pointer;
     transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
     font-weight: 600;
     font-size: 14.5px;
     color: var(--ink);
     width: 100%;
     text-align: left;
     font-family: inherit;
 }

 .row:hover {
     border-color: #DADADA;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
     transform: translateY(-1px);
 }

 .row:active {
     transform: translateY(0)
 }

 .ico {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: 0 0 30px;
 }

 .ico svg {
     display: block
 }

 .ico.browser {
     background: #0B0B0B;
     color: #fff
 }

 .ico.wc {
     color: #fff
 }

 .ico.cb {
     background: #1652F0;
     color: #fff
 }

 .ico.bn {
     background: #F0B90B;
     color: #1A1A1A
 }

 .footer {
     margin-top: 22px;
     font-size: 11.5px;
     color: black;
     text-align: center;
     letter-spacing: .1px;
 }


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

     .left {
         display: none;
     }

     .plane {
         height: 160px
     }

     .right {
         padding: 48px 20px 64px
     }

     .wm {
         display: none
     }

     .headline {
         font-size: 30px
     }
 }