/* Landing page for visitors who are not signed in. Everything is scoped to #landing. */
#landing{--lp-max:1120px;--lp-pad:clamp(16px,4vw,32px);font-size:17px;line-height:1.55;color:var(--ink)}
#landing[hidden],#landing [hidden]{display:none!important}
#landing *{box-sizing:border-box}
/* :where() keeps these resets at zero specificity so the class rules below can set their own spacing */
:where(#landing) :is(h1,h2,h3){font-family:var(--font);margin:0;color:var(--ink);text-wrap:balance}
:where(#landing) p{margin:0;text-wrap:pretty}
body.is-landing{margin:0;padding:0}
#landing a{color:inherit}
#landing a:focus-visible,#landing button:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
.lp-in{max-width:var(--lp-max);margin:0 auto;padding-inline:var(--lp-pad)}

/* buttons */
#landing .lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:10px;border:1.5px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:inherit;font-size:16px;font-weight:650;text-decoration:none;cursor:pointer}
#landing .lp-btn:hover{filter:brightness(1.08)}
#landing .lp-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
#landing .lp-btn.ghost:hover{background:var(--surface);filter:none}
#landing .lp-btn.sm{min-height:38px;padding:0 16px;font-size:15px}
#landing .lp-link{font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* top bar */
.lp-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.lp-top .lp-logo{height:40px;width:auto;display:block}
.lp-logo-dark{display:none!important}
:root[data-theme="dark"] .lp-logo-light{display:none!important}
:root[data-theme="dark"] .lp-logo-dark{display:block!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lp-logo-light{display:none!important}:root:not([data-theme="light"]) .lp-logo-dark{display:block!important}}

/* hero */
.lp-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:clamp(28px,6vw,72px) clamp(40px,7vw,96px)}
.lp-hero h1{font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-.038em;font-weight:700;max-width:15ch}
.lp-hero .lp-sub{margin-top:22px;font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--ink-2);max-width:34em}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;margin-top:32px}
.lp-err{margin:0 0 22px;max-width:34em;background:var(--warn-bg);color:var(--warn-ink);border-radius:10px;padding:12px 14px;font-size:15px}

/* the lens: the brand mark, used as a window onto the product. Everything inside is sized in cqw (a share of the lens width),
   so the chart keeps the same proportions at every screen size and always stays inside the circle. */
.lens-wrap{margin:0 auto;width:min(100%,500px)}
.lens{position:relative;width:100%;aspect-ratio:1;container-type:inline-size}
.lens-face{position:absolute;left:4%;top:3%;width:80%;aspect-ratio:1;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;justify-content:center;padding:0 12.5%;overflow:hidden}
.lf-panel[hidden]{display:none}
.lens-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lf-head{display:flex;justify-content:space-between;align-items:baseline;gap:1.6cqw;margin-bottom:2.4cqw;font-size:max(10px,2.6cqw);color:var(--ink-3);white-space:nowrap}
.lf-head b{color:var(--ink);font-size:max(12px,3.2cqw);font-weight:700}
.lf-rows{list-style:none;margin:0;padding:0;display:grid;gap:max(6px,2cqw)}
.lf-rows li{display:grid;grid-template-columns:11cqw minmax(0,1fr) auto auto;align-items:center;gap:max(5px,1.6cqw);font-size:max(10.5px,2.7cqw);white-space:nowrap}
.lf-rows .lf-n{font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.lf-rows .lf-bar{height:max(7px,2.2cqw);border-radius:99px;background:var(--line-2);overflow:hidden}
.lf-rows .lf-bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--brand-blue);transform-origin:left;animation:lfgrow .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.lf-rows .lf-v{font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.lf-rows .lf-d{font-variant-numeric:tabular-nums;font-weight:650;min-width:3.2em;text-align:right}
.lf-rows .lf-up{color:var(--good)}.lf-rows .lf-dn{color:var(--bad)}
.lf-note{margin-top:max(8px,2.6cqw);font-size:max(10px,2.5cqw);background:var(--warn-bg);color:var(--warn-ink);border-radius:8px;padding:.45em .8em;width:max-content;max-width:100%;white-space:nowrap}

@keyframes lfgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* what you get */
.lp-get{background:var(--surface);border-block:1px solid var(--line)}
.lp-get .lp-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,6vw,88px);padding-block:clamp(48px,8vw,104px)}
.lp-get h2{font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:700}
.lp-list{list-style:none;margin:0;padding:0}
.lp-list li{padding-block:24px;border-top:1px solid var(--line)}
.lp-list li:first-child{border-top:0;padding-top:4px}
.lp-list h3{font-size:clamp(19px,2.2vw,22px);line-height:1.25;letter-spacing:-.015em;font-weight:650}
.lp-list p{margin-top:8px;color:var(--ink-2);max-width:36em}

#landing .lp-get .lp-lede{margin-top:18px;color:var(--ink-2);font-size:18px;max-width:22em}

/* how it works: a real sequence, so it is numbered */
.lp-how{background:var(--brand-navy);color:#e8f0f9}
.lp-how .lp-in{padding-block:clamp(48px,8vw,104px)}
#landing .lp-how h2{color:#fff;font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:700}
.lp-steps{list-style:none;margin:clamp(28px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);counter-reset:s}
.lp-steps li{counter-increment:s;border-top:2px solid rgba(255,255,255,.22);padding-top:20px}
.lp-steps li::before{content:counter(s);display:block;font-size:clamp(44px,6vw,64px);line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--brand-green);margin-bottom:14px}
#landing .lp-steps h3{color:#fff;font-size:clamp(19px,2.2vw,22px);font-weight:650;letter-spacing:-.015em}
.lp-steps p{margin-top:8px;color:#b9cde2;max-width:24em}

/* brokers */
.lp-brokers .lp-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,88px);padding-block:clamp(48px,8vw,104px)}
.lp-brokers h2{font-size:clamp(30px,4vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:700}
.lp-brokers .lp-lede{margin-top:18px;color:var(--ink-2);max-width:30em;font-size:18px}
.lp-sees{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);align-content:start}
.lp-sees h3{font-size:16px;font-weight:700;padding-bottom:10px;border-bottom:2px solid var(--brand-green)}
.lp-sees .no h3{border-bottom-color:var(--line)}
.lp-sees ul{list-style:none;margin:0;padding:0}
.lp-sees li{padding:11px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2);font-size:16px}
.lp-sees .no li{color:var(--ink-3)}

/* closing */
.lp-end{border-top:1px solid var(--line);background:var(--surface)}
.lp-end .lp-in{padding-block:clamp(44px,7vw,88px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.lp-end h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:700;max-width:16em}
.lp-end .lp-cta{margin-top:0}
.lp-foot{padding-block:28px;color:var(--ink-3);font-size:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.lp-foot a{color:var(--ink-2)}

@media (max-width:860px){
  .lp-hero,.lp-get .lp-in,.lp-brokers .lp-in{grid-template-columns:minmax(0,1fr)}
  .lp-hero h1{max-width:none}
  .lp-steps{grid-template-columns:minmax(0,1fr)}
  .lens{width:min(100%,420px)}
}
@media (max-width:480px){
  #landing{font-size:16px}
  .lp-sees{grid-template-columns:minmax(0,1fr)}
  #landing .lp-btn{flex:1 1 auto}
  .lens-face{padding:0 11.5%}
}
@media (prefers-reduced-motion:reduce){.lf-rows .lf-bar i{animation:none}}
#landing .lp-top .lp-btn{flex:0 0 auto}
@media (max-width:340px){.lens-face{padding:0 14%}}

.lens-cap{font-size:13px;color:var(--ink-3);text-align:center;margin-top:6px}

/* phones: a lighter page. The header already has Sign in, the lens is smaller, and the two sequences sit side by side. */
@media (max-width:640px){
  .lp-hero .lp-cta .lp-login{display:none!important}
  .lp-hero .lp-cta{margin-top:22px}
  .lp-hero{gap:22px;padding-block:20px 36px}

  /* Built for selling through brokers: fits one screen */
  .lp-get .lp-in{gap:16px;padding-block:32px}
  .lp-get h2{font-size:27px}
  #landing .lp-get .lp-lede{margin-top:10px;font-size:15px;line-height:1.4}
  .lp-list li{padding-block:12px}
  .lp-list li:first-child{padding-top:0}
  .lp-list h3{font-size:17px}
  .lp-list p{margin-top:4px;font-size:15px;line-height:1.4}

  /* How it works: swipe sideways, the next card peeks in */
  .lp-how .lp-in{padding-block:36px}
  .lp-steps{display:flex;gap:14px;margin:22px -16px 0;padding:0 16px 8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .lp-steps::-webkit-scrollbar{display:none}
  .lp-steps li{flex:0 0 78%;scroll-snap-align:start;padding-top:14px}
  .lp-steps li::before{font-size:38px;margin-bottom:8px}
  .lp-steps p{font-size:15px;line-height:1.4}
  .lp-steps:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}

  /* Brokers: what they can and cannot see, side by side */
  .lp-brokers .lp-in{gap:20px;padding-block:36px}
  .lp-brokers h2{font-size:27px}
  .lp-brokers .lp-lede{margin-top:10px;font-size:15px;line-height:1.4}
  .lp-sees{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
  .lp-sees h3{font-size:15px;padding-bottom:8px}
  .lp-sees li{padding:9px 0;font-size:15px;line-height:1.3}
}


/* phone mockup: replaces the magnifying glass on phones */
.ph-wrap{display:none;margin:0 auto;width:min(100%,264px)}
.ph{position:relative;padding:9px 9px 0;border-radius:38px 38px 0 0;background:var(--brand-navy);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -20px rgba(8,120,200,.55),0 10px 24px -10px rgba(0,40,80,.5)}
.ph-screen{position:relative;height:372px;overflow:hidden;border-radius:30px 30px 0 0;background:var(--surface);padding:30px 14px 0}
.ph-notch{position:absolute;top:8px;left:50%;width:70px;height:16px;margin-left:-35px;border-radius:99px;background:var(--brand-navy)}
.ph-tabs{display:flex;gap:16px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:650;color:var(--ink-3)}
.ph-tabs span{padding:6px 0 8px;margin-bottom:-1px;border-bottom:2.5px solid transparent}
.ph-tabs .on{color:var(--ink);border-bottom-color:var(--brand-blue)}
.ph-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ph-kpis div{background:var(--bg);border-radius:10px;padding:8px 9px;min-width:0}
.ph-kpis small{display:block;font-size:9.5px;color:var(--ink-3)}
.ph-kpis b{display:block;font-size:19px;line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.ph-kpis i{display:block;font-style:normal;font-size:9px;color:var(--ink-3);line-height:1.25}
.ph-kpis i.up{color:var(--good);font-weight:650}
.ph-h{margin:14px 0 8px;font-size:12px;font-weight:700;color:var(--ink)}
.ph-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ph-rows li{display:grid;grid-template-columns:44px minmax(0,1fr) 40px 30px;align-items:center;gap:5px;font-size:10px;white-space:nowrap}
.ph-rows li>span:first-child{font-weight:650;color:var(--ink)}
.ph-rows .ph-bar{height:7px;border-radius:99px;background:var(--line-2);overflow:hidden}
.ph-rows .ph-bar i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--brand-blue);transform-origin:left;animation:lfgrow .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.ph-rows em{font-style:normal;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.ph-rows strong{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.ph .up{color:var(--good)}.ph .dn{color:var(--bad)}
.ph-note{margin-top:12px;width:max-content;max-width:100%;font-size:9.5px;background:var(--warn-bg);color:var(--warn-ink);border-radius:8px;padding:.45em .8em}
@media (max-width:640px){.ph-wrap{display:block}.lens-wrap{display:none}.lp-hero .lp-sub{font-size:17px;line-height:1.45;margin-top:14px}.lp-hero .lp-cta{margin-top:14px}.lp-hero h1{font-size:38px}}
@media (prefers-reduced-motion:reduce){.ph-rows .ph-bar i{animation:none}}

/* phones: the closing call to action becomes a centered brand-blue band with one full-width button */
@media (max-width:640px){
  .lp-end{background:var(--brand-blue);border-top:0;color:#fff}
  .lp-end .lp-in{flex-direction:column;align-items:stretch;text-align:center;gap:20px;padding-block:40px}
  #landing .lp-end h2{color:#fff;font-size:28px;max-width:none}
  .lp-end .lp-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:0}
  #landing .lp-end .lp-btn{min-height:52px;background:#fff;border-color:#fff;color:var(--brand-navy);font-size:17px}
  #landing .lp-end .lp-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
  .lp-foot{flex-direction:column;align-items:center;text-align:center;gap:4px;padding-block:22px;font-size:13px}
}