/* ticket.webrandca.com - platform landing page.
   Its own dark palette, independent of the per-client theme variables, because
   this page belongs to WE Brand CA rather than to any client. */

.lp{
  --ink:#07090D;--ink2:#0E1218;--line:#1E2530;--text:#EEF1F6;--muted:#9AA5B4;
  --brand:#E6187F;--brand2:#FF5FA8;
  background:var(--ink);color:var(--text);min-height:100vh;
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.lp *,.lp *::before,.lp *::after{box-sizing:border-box}
.lp a{color:inherit;text-decoration:none}
.lp h1,.lp h2,.lp h3{margin:0;letter-spacing:-.03em;line-height:1.1}
.lp-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}

/* ------------------------------------------------------------------- nav */
.lp-nav{position:sticky;top:0;z-index:20;background:rgba(7,9,13,.82);
  backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.lp-nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:70px}
.lp-mark{font-weight:800;font-size:17px;letter-spacing:-.02em}
.lp-nav nav{display:flex;align-items:center;gap:24px;font-size:14.5px;color:var(--muted)}
.lp-nav nav a:hover{color:var(--text)}
@media (max-width:620px){.lp-nav nav a:not(.lp-btn){display:none}}

/* ------------------------------------------------------------------ hero */
.lp-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.lp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 90% at 78% 8%, rgba(230,24,127,.24), transparent 62%),
    radial-gradient(60% 80% at 6% 96%, rgba(230,24,127,.12), transparent 60%)}
.lp-hero-in{position:relative;display:grid;grid-template-columns:1.08fr .92fr;
  grid-template-rows:auto auto;gap:26px 48px;align-items:center;padding:92px 24px 96px}
.lp-hero-copy{grid-column:1;grid-row:1;align-self:end}
.lp-points{grid-column:1;grid-row:2;align-self:start}
.lp-hero-art{grid-column:2;grid-row:1 / span 2;align-self:center}





.lp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:750;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brand2);margin-bottom:20px}
.lp-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor}
.lp-hero h1{font-size:clamp(36px,5.6vw,60px);font-weight:830;max-width:15ch}
.lp-lede{margin:20px 0 0;font-size:18.5px;line-height:1.62;color:var(--muted);max-width:52ch}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.lp-points{display:flex;flex-wrap:wrap;gap:10px 24px;margin:30px 0 0;padding:0;list-style:none;
  font-size:14px;color:var(--muted)}
.lp-points li{display:flex;align-items:center;gap:9px}
.lp-points li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none}

.lp-hero-art{display:grid;place-items:center}

/* One stage holds both the logo animation and the photo banner that replaces
   it, at a fixed 16:9 so the swap does not move anything on the page. */
.lp-stage{position:relative;width:100%;max-width:560px;aspect-ratio:16/9}
.lp-lottie{position:absolute;inset:0;display:grid;place-items:center;
  filter:drop-shadow(0 18px 50px rgba(230,24,127,.28));
  transition:opacity .5s ease,transform .5s ease}
.lp-lottie svg{display:block;width:auto;height:100%;max-width:100%}
.lp-stage.lp-shown .lp-lottie{opacity:0;transform:scale(.94);pointer-events:none}

.lp-banner{position:absolute;inset:0;border-radius:18px;overflow:hidden;
  background:var(--ink2);border:1px solid var(--line);
  opacity:0;transform:scale(.985);pointer-events:none;
  transition:opacity .6s ease,transform .6s ease;
  box-shadow:0 26px 70px rgba(0,0,0,.5)}
.lp-stage.lp-shown .lp-banner{opacity:1;transform:none;pointer-events:auto}

.lp-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.lp-slide.on{opacity:1}
.lp-slide img{width:100%;height:100%;object-fit:cover;display:block}
.lp-slide figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:34px 16px 13px;font-size:13.5px;font-weight:600;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.7);
  background:linear-gradient(to top,rgba(5,7,10,.86),rgba(5,7,10,.42) 55%,transparent)}

.lp-dots{position:absolute;top:12px;right:12px;display:flex;gap:6px}
.lp-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.38);transition:background .25s,width .25s}
.lp-dot.on{background:#fff;width:18px;border-radius:99px}

/* --------------------------------------------------------------- buttons */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-size:15.5px;font-weight:700;padding:15px 30px;border-radius:999px;border:0;
  cursor:pointer;background:var(--brand);color:#fff;transition:filter .16s,transform .1s}
.lp-btn:hover{filter:brightness(1.12)}
.lp-btn:active{transform:scale(.985)}
.lp-btn-ghost{background:transparent;color:var(--text);border:1px solid #2C3542}
.lp-btn-ghost:hover{background:#141A22;filter:none;border-color:#3A4553}
.lp-btn-sm{padding:9px 18px;font-size:14px}
.lp-btn-block{width:100%}

/* ------------------------------------------------------------ how it works */
.lp-band{padding:84px 0;border-bottom:1px solid var(--line);background:var(--ink2)}
.lp-h2{font-size:clamp(25px,3.4vw,34px);font-weight:800;margin-bottom:14px}
.lp-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:38px}
.lp-step{background:#111721;border:1px solid var(--line);border-radius:18px;padding:28px 26px 26px}
.lp-num{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:rgba(230,24,127,.14);color:var(--brand2);font-weight:800;font-size:15px;margin-bottom:16px}
.lp-step h3{font-size:18.5px;font-weight:740;margin-bottom:9px}
.lp-step p{margin:0;color:var(--muted);font-size:14.8px;line-height:1.62}

/* ------------------------------------------------------------------ quote */
.lp-quote{padding:84px 0}
.lp-quote-in{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:start}
@media (max-width:900px){.lp-quote-in{grid-template-columns:1fr;gap:34px}}
.lp-quote-copy p{color:var(--muted);font-size:16.5px;max-width:46ch}
.lp-quote-meta{font-size:14.5px!important;margin-top:16px}
.lp-form{background:var(--ink2);border:1px solid var(--line);border-radius:22px;padding:30px}
.lp-f{display:grid;gap:7px;margin-bottom:16px}
.lp-lab{font-size:13.5px;font-weight:640}
.lp-lab em{font-style:normal;font-weight:400;color:var(--muted)}
.lp-form input,.lp-form select,.lp-form textarea{
  font:inherit;font-size:15px;padding:13px 15px;border:1px solid #263041;border-radius:12px;
  background:#0A0E14;color:var(--text);width:100%;font-weight:400}
.lp-form input:focus,.lp-form select:focus,.lp-form textarea:focus{
  outline:2px solid rgba(230,24,127,.45);outline-offset:1px;border-color:var(--brand)}
.lp-form textarea{resize:vertical;min-height:84px}
.lp-row2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){.lp-row2{grid-template-columns:1fr}}
.lp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lp-err{background:#2B1417;border:1px solid #5E2830;color:#FFB3BA;border-radius:12px;
  padding:11px 15px;margin-bottom:18px;font-size:14px}
.lp-fine{margin:14px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
.lp-thanks h3{font-size:21px;font-weight:770;margin-bottom:10px}
.lp-thanks p{color:var(--muted);margin:0 0 20px}

/* ----------------------------------------------------------------- footer */
.lp-foot{border-top:1px solid var(--line);padding:30px 0;font-size:13.5px;color:var(--muted)}
.lp-foot-in{display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between}
.lp-foot a{text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:rgba(154,165,180,.4)}
.lp-foot a:hover{text-decoration-color:currentColor;color:var(--text)}
.lp-foot b{color:var(--text)}

/* ------------------------------------------------------- hero, small screens
   These live at the end on purpose: they share selectors with the base rules
   above and equal specificity, so they only win by coming last. */

@media (max-width:900px){
  .lp-hero-in{grid-template-columns:1fr;grid-template-rows:none;gap:28px;padding:56px 24px 64px}
  .lp-hero-copy,.lp-points,.lp-hero-art{grid-column:1;grid-row:auto}
  /* The animation is the point of the hero, so it comes straight after the
     buttons and the bullets move below it. */
  .lp-hero-copy{order:1}
  .lp-hero-art{order:2}
  .lp-points{order:3;margin-top:0}
}

/* Phones: the point of the hero is the pitch plus the animation, and on a
   handset both have to land above the fold. Everything above the stage gives
   up a little room so the stage itself is fully visible without scrolling. */
@media (max-width:620px){
  .lp-hero-in{gap:20px;padding:22px 20px 36px}
  .lp-eyebrow{margin-bottom:10px;font-size:11px}
  .lp-hero h1{font-size:clamp(28px,7.9vw,38px);max-width:18ch}
  .lp-lede{margin-top:12px;font-size:15.5px;line-height:1.5}
  .lp-cta{margin-top:16px;gap:9px}
  .lp-cta .lp-btn{padding:12px 18px;font-size:14.5px}
  .lp-points{gap:6px 16px;font-size:13px}
  .lp-banner{border-radius:15px}
  .lp-slide figcaption{padding:26px 12px 10px;font-size:12.5px}
  .lp-dots{top:10px;right:10px}
}

@media (max-width:400px){
  .lp-hero-in{padding-top:18px;gap:18px}
  .lp-lede{font-size:15px}
  .lp-cta .lp-btn{padding:11px 16px;font-size:14px}
}

/* Short handsets, and any phone whose browser bars eat the window height.
   Give up the decoration first, then the spacing, and only trim the sentence
   itself on the shortest screens. The animation is what people came for. */
@media (max-width:620px) and (max-height:760px){
  .lp-hero-in{padding-top:16px;gap:17px}
  .lp-eyebrow{margin-bottom:9px}
  .lp-hero h1{font-size:clamp(27px,7.6vw,36px)}
  .lp-lede{margin-top:11px;font-size:15px}
  .lp-cta{margin-top:14px}
}

/* The shortest screens give up the decoration and the repeated sign-in link,
   which the sticky header already carries. */
@media (max-width:620px) and (max-height:650px){
  .lp-hero-in{padding-top:10px;gap:14px}
  .lp-eyebrow{display:none}
  .lp-lede{margin-top:9px;font-size:14.6px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .lp-cta .lp-btn-ghost{display:none}
}

@media (prefers-reduced-motion:reduce){
  .lp *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}