/* Lineup — marker style. Self-contained; no external requests. */

@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/permanent-marker.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/instrument-sans.woff2') format('woff2');
}

:root{
  --g:#FCF8F0; --g2:#FFFFFF; --t:#1A1A18; --m:#6E6A61;
  --a:#E23E2C; --aInk:#FFFFFF; --bd:#1A1A18; --hair:#D9D2C4;
  --iBlue:#0A84FF; --iGrey:#26262A;
  --fB:'Instrument Sans',ui-sans-serif,-apple-system,"Segoe UI",system-ui,sans-serif;
  --fD:'Permanent Marker',"Comic Sans MS",cursive;
  --fM:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--g);color:var(--t);font-family:var(--fB);
  -webkit-font-smoothing:antialiased;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background-image:radial-gradient(circle at 18% 26%,rgba(226,62,44,.055) 0,transparent 44%),
                   radial-gradient(circle at 84% 72%,rgba(43,108,176,.05) 0,transparent 44%)}
.site{position:relative;z-index:1;max-width:1180px;margin:0 auto}
img,svg{max-width:100%}

/* masthead */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 46px;border-bottom:2px solid var(--bd)}
.logo{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--t)}
.logoMark{width:64px;height:23px;display:block;flex:none}
.logoType{font-family:var(--fD);font-size:27px;line-height:1;letter-spacing:.01em}
.topCta{font-family:var(--fB);font-weight:700;font-size:13.5px;color:var(--t);
  background:transparent;border:2px solid var(--bd);border-radius:999px;
  padding:9px 18px;cursor:pointer;box-shadow:2px 2px 0 var(--bd);
  text-decoration:none;display:inline-block;white-space:nowrap}
.topCta:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--bd)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--a);outline-offset:3px}

/* hero */
.hero{padding:54px 46px 52px;display:grid;overflow:hidden;grid-template-columns:1fr .92fr;gap:44px;align-items:center}
.hd{font-family:var(--fD);font-weight:400;line-height:1.04;
  font-size:clamp(44px,6vw,78px);margin:0;text-wrap:balance}
.hd em{font-style:normal;color:var(--a);white-space:nowrap}
.hdUnder{display:block;margin:2px 0 0;width:min(340px,86%);height:14px;overflow:visible}
.sb{margin:20px 0 0;font-size:16.5px;line-height:1.6;color:var(--m);max-width:38ch}
.cta{display:inline-flex;background:var(--a);color:var(--aInk);font-family:var(--fB);
  font-weight:700;font-size:15px;padding:14px 26px;border:2px solid var(--bd);
  border-radius:999px;cursor:pointer;box-shadow:3px 3px 0 var(--bd);text-decoration:none}
.cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--bd)}
.ctaRow{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.ctaRow.tight{margin-top:8px}
.pane{position:relative;min-height:606px;display:flex;align-items:center;justify-content:center}
.phoneCol{display:flex;flex-direction:column;align-items:center}
.tickWrap{display:flex;align-items:baseline;gap:10px;margin-top:20px;
  justify-content:center;position:relative;z-index:8}
.tickNum{font-family:var(--fD);font-size:40px;line-height:1;
  color:var(--a);font-variant-numeric:tabular-nums;transition:color .7s ease}
.tickNum.ok{color:#1F7A46}
.tickLab{font-family:var(--fM);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--m)}

/* iPhone */
.device{position:relative;width:286px;height:580px;background:#000;
  border:7px solid #191b1d;border-radius:48px;z-index:2;overflow:hidden;
  box-shadow:0 34px 70px -34px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.16);
  transition:transform .6s cubic-bezier(.2,.9,.3,1),filter .6s ease;
  font-family:-apple-system,"SF Pro Text","Segoe UI",var(--fB)}
.device.back{transform:scale(.955);filter:brightness(.55) saturate(.75)}
.island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:90px;height:26px;
  background:#000;border-radius:999px;z-index:30;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sbar{position:absolute;top:0;left:0;right:0;height:46px;display:flex;align-items:center;
  justify-content:space-between;padding:12px 24px 0;z-index:20;color:#fff}
.sbTime{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.sbIcons{display:flex;align-items:center;gap:5px}
.nav{position:absolute;top:46px;left:0;right:0;height:84px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;background:rgba(17,17,19,.92);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:.5px solid #2a2a2e;z-index:19}
.navBack{position:absolute;left:12px;top:30px;color:var(--iBlue);font-size:25px;
  font-weight:300;line-height:1;font-style:normal}
.navAv{width:34px;height:34px;border-radius:50%;background:#48484d;color:#e8e8ea;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;
  font-style:normal}
.navAv.agent{background:#0c2c4d;color:var(--iBlue)}
.navName{font-size:11.5px;font-weight:400;color:#e8e8ea;display:flex;align-items:center;gap:3px;
  font-style:normal}
.navName::after{content:"\203A";color:#8a8a8f;font-size:13px;line-height:1}
.navMeta{position:absolute;right:12px;top:32px;font-size:9px;color:#5c5c61;
  font-family:var(--fM);letter-spacing:.1em;text-transform:uppercase;font-style:normal}
.layer{position:absolute;top:130px;left:0;right:0;bottom:74px;padding:12px 12px 0;overflow:hidden}
.chat{display:flex;flex-direction:column;gap:6px;justify-content:flex-end;height:100%}
.tsep{align-self:center;font-size:9.5px;color:#6a6a70;padding:2px 0 4px}
.b{position:relative;max-width:76%;padding:8px 14px;border-radius:18px;font-size:13.5px;
  line-height:1.32;letter-spacing:-.01em;animation:bIn .28s ease both}
@keyframes bIn{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}
.b.them{align-self:flex-start;background:var(--iGrey);color:#fff}
.b.you{align-self:flex-end;background:var(--iBlue);color:#fff}
.b.tail::before{content:"";position:absolute;bottom:0;width:16px;height:17px;z-index:0}
.b.tail::after{content:"";position:absolute;bottom:0;width:11px;height:17px;background:#000;z-index:1}
.b.them.tail::before{left:-7px;background:var(--iGrey);border-bottom-right-radius:16px}
.b.them.tail::after{left:-11px;border-bottom-right-radius:11px}
.b.you.tail::before{right:-7px;background:var(--iBlue);border-bottom-left-radius:16px}
.b.you.tail::after{right:-11px;border-bottom-left-radius:11px}
.receipt{align-self:flex-end;font-size:9.5px;color:#8a8a8f;padding:3px 4px 0}
.comp{position:absolute;left:12px;right:12px;bottom:30px;display:flex;align-items:center;gap:8px;
  z-index:18;transition:opacity .4s ease,transform .4s ease}
.compIn{flex:1;display:flex;align-items:center;background:#0f0f11;border:1px solid #2c2c30;
  border-radius:17px;padding:8px 12px;min-height:34px}
.compTx{flex:1;font-size:12.5px;color:#fff;line-height:1.36;font-style:normal;
  white-space:normal;overflow-wrap:break-word;max-height:58px;overflow:hidden}
.compTx.ph{color:#6a6a70}
.caret{display:inline-block;width:1.5px;height:13px;background:var(--iBlue);vertical-align:-2px;
  margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.plus{width:29px;height:29px;border-radius:50%;background:#1c1c1f;flex:none;display:flex;
  align-items:center;justify-content:center;color:#8a8a8f;font-size:17px;line-height:1;
  font-weight:300;font-style:normal}
.send{width:29px;height:29px;border-radius:50%;background:#2c2c30;flex:none;display:flex;
  align-items:center;justify-content:center;color:#6a6a70;font-size:13px;font-style:normal;
  transition:background .3s,color .3s}
.send.live{background:var(--iBlue);color:#fff}
.send.hot{animation:pop .3s ease}
@keyframes pop{50%{transform:scale(1.25)}}
.homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:118px;height:5px;
  border-radius:999px;background:rgba(255,255,255,.32);z-index:21}

/* the pile */
.card{position:absolute;width:46%;max-width:210px;background:var(--g2);
  border:2px solid var(--bd);border-radius:16px 10px 18px 9px;padding:9px 11px;z-index:6;opacity:0;
  box-shadow:3px 3px 0 rgba(26,26,24,.14);display:flex;flex-direction:column;gap:4px;
  transition:opacity .32s ease,transform .55s cubic-bezier(.2,.9,.3,1)}
.card .who{font-family:var(--fD);font-size:15px;color:var(--t);font-style:normal;
  display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card .who b{font-family:var(--fM);font-size:8px;letter-spacing:.14em;
  font-weight:500;color:var(--m);text-transform:uppercase}
.card .msg{font-size:11.5px;line-height:1.4;color:var(--m);font-style:normal}
.card.out .who b{color:var(--a)}
.card.mini{width:34%;max-width:150px;padding:6px 9px;border-radius:12px 9px 14px 8px}
.card.mini .msg{font-size:10px}
.noMark{position:absolute;z-index:12;font-family:var(--fD);
  font-size:118px;color:var(--a);opacity:0;transform:scale(.6) rotate(-8deg);
  pointer-events:none;line-height:1}

/* agent checklist inside the phone */
.listLayer{opacity:0;pointer-events:none}
.tcard{background:var(--iGrey);border-radius:18px;border-bottom-left-radius:6px;
  padding:11px 11px 12px;display:flex;flex-direction:column;gap:9px}
.tcHd{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-family:var(--fM);font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#8e8e93;font-style:normal}
.tcHd b{font-size:14px;color:var(--iBlue);font-variant-numeric:tabular-nums;font-weight:600}
.seats{display:flex;gap:4px}
.seat{flex:1;height:32px;border:1px dashed #3a3a3f;border-radius:6px;display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#5a5a60;
  transition:background .3s,color .3s,border-color .3s}
.seat.on{background:var(--iBlue);border-color:var(--iBlue);border-style:solid;color:#fff}
.roster{display:flex;flex-direction:column;gap:1px}
.rw{display:grid;grid-template-columns:15px 52px 1fr;align-items:center;gap:7px;
  padding:5px 6px;border-radius:6px;transition:background .3s,opacity .3s}
.rw.ask{background:#313136}
.rw.out{opacity:.4}
.box{width:14px;height:14px;border-radius:4px;border:1.4px solid #4d4d54;display:flex;
  align-items:center;justify-content:center;font-size:9px;color:transparent;font-style:normal;
  transition:background .3s,border-color .3s,color .3s}
.box.in{background:var(--iBlue);border-color:var(--iBlue);color:#fff}
.box.no{color:#8e8e93}
.nm{font-size:13px;font-weight:600;color:#e6e6ea;font-style:normal}
.rs{justify-self:end;display:flex;align-items:center;gap:5px;min-height:17px;font-style:normal}
.mini2{font-size:9px;line-height:1.3;padding:3px 7px;border-radius:9px;max-width:132px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:bIn .24s ease both;
  font-style:normal;display:inline-block}
.mini2.o{background:var(--iBlue);color:#fff;border-bottom-right-radius:3px}
.mini2.i{background:#3a3a40;color:#e6e6ea;border-bottom-left-radius:3px}
.rsTx{font-family:var(--fM);font-size:8.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#8e8e93;font-style:normal}
.rsTx.good{color:var(--iBlue)}
.tcNote{font-size:10.5px;line-height:1.4;color:#8e8e93;padding:0 2px;font-style:normal}
.tcNote b{color:var(--iBlue);font-weight:600}
.doneB{margin-top:7px;opacity:0;transition:opacity .5s ease;background:var(--iGrey);
  border-radius:18px;border-bottom-left-radius:6px;padding:8px 13px;font-size:12.5px;color:#fff}
.doneB.on{opacity:1}

/* sections */
.sec{padding:76px 46px 80px;border-top:2px solid var(--bd)}
.secHd{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:end;margin-bottom:48px}
.kick{font-family:var(--fM);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--a);margin:0 0 14px}
.h2{font-family:var(--fD);font-weight:400;line-height:1.12;
  font-size:clamp(30px,3.9vw,50px);margin:0;max-width:19ch;text-wrap:balance}
.h2 em{font-style:normal;color:var(--a)}
.secLede{margin:0;font-size:16px;line-height:1.62;color:var(--m);max-width:46ch}
.secLede + .secLede{margin-top:13px}
.secLede b{color:var(--t);font-weight:600}
.secLede.centre{text-align:center;max-width:52ch}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{background:var(--g2);border:2px solid var(--bd);border-radius:18px 11px 20px 10px;
  padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px;
  box-shadow:4px 4px 0 rgba(26,26,24,.1)}
.tileK{font-family:var(--fD);font-size:26px;color:var(--t);line-height:1.06;font-style:normal}
.tileB{margin:0;font-size:14.5px;line-height:1.58;color:var(--m)}
.tileB b{color:var(--t);font-weight:600}

/* the agent rules, as sticky notes */
.sGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px 34px;
  padding:10px 6px;max-width:1000px}
.sNote{min-height:184px;padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;
  border-radius:2px;color:#1A1A18;
  box-shadow:4px 8px 18px -7px rgba(26,26,24,.42),0 1px 0 rgba(26,26,24,.08);
  transition:transform .22s ease,box-shadow .22s ease}
.sNote:hover{transform:rotate(0deg) translateY(-3px);
  box-shadow:6px 12px 24px -8px rgba(26,26,24,.46)}
.sNote:nth-child(1){background:#FFE86B;transform:rotate(-2deg)}
.sNote:nth-child(2){background:#FFC4BE;transform:rotate(1.4deg)}
.sNote:nth-child(3){background:#BCE0FB;transform:rotate(-1deg)}
.sNote:nth-child(4){background:#C8EDBE;transform:rotate(2deg)}
.sNote:nth-child(5){background:#FFD59B;transform:rotate(-1.6deg)}
.sNoteK{font-family:var(--fD);font-size:20px;line-height:1.18;color:#1A1A18;font-style:normal}
.sNoteB{margin:0;font-size:14px;line-height:1.56;color:rgba(26,26,24,.74)}
.sNoteB b{color:#1A1A18;font-weight:700}

/* contact */
.formWrap{display:grid;grid-template-columns:1fr .95fr;gap:48px;align-items:start}
.frm{display:flex;flex-direction:column;gap:15px;max-width:440px}
.fRow{display:flex;flex-direction:column;gap:6px}
.fLab{font-family:var(--fM);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--m)}
.fIn{font-family:var(--fB);font-size:15px;color:var(--t);background:var(--g2);
  border:2px solid var(--bd);border-radius:11px 7px 13px 6px;padding:12px 14px;width:100%}
.fIn::placeholder{color:#A9A296}
.fIn:focus{outline:none;border-color:var(--a);box-shadow:3px 3px 0 rgba(226,62,44,.28)}
.fNote{font-size:12.5px;line-height:1.6;color:var(--m);margin:6px 0 0}
.fMsg{margin:14px 0 0;font-size:14.5px;line-height:1.55;padding:12px 15px;
  border:2px solid var(--bd);border-radius:11px 7px 13px 6px;background:var(--g2)}
.fMsg.ok{border-color:#1F7A46;color:#1F7A46}
.fMsg.bad{border-color:var(--a);color:var(--a)}
.fMsg[hidden]{display:none}

.close{padding:64px 46px 42px;border-top:2px solid var(--bd);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px}
.close .h2{max-width:20ch}
.legal{border-top:2px solid var(--bd);padding:22px 46px 30px;display:flex;
  justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--fM);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--m)}
.legal a{color:var(--m);text-underline-offset:3px}
.legal a:hover{color:var(--a)}

/* privacy page */
.wrap{padding:56px 46px 40px;max-width:70ch}
.privH{font-family:var(--fD);font-weight:400;font-size:clamp(34px,5vw,52px);
  line-height:1.08;margin:0 0 10px}
.privMeta{font-family:var(--fM);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--m);margin:0 0 36px}
.privLede{font-size:17px;line-height:1.65;color:var(--t);margin:0 0 8px}
.privLede b{font-weight:700}
.wrap h2{font-family:var(--fD);font-weight:400;font-size:22px;margin:38px 0 10px;line-height:1.25}
.wrap p{font-size:15.5px;line-height:1.7;color:var(--m);margin:0 0 13px}
.wrap p b{color:var(--t);font-weight:700}
.wrap ul{margin:0 0 13px;padding-left:21px;color:var(--m);font-size:15.5px;line-height:1.7}
.wrap li{margin:7px 0}
.wrap li b{color:var(--t);font-weight:700}
.wrap a{color:var(--a);text-underline-offset:3px}
.rule{border:0;border-top:1px dashed var(--hair);margin:34px 0}

@media (max-width:900px){
  .topbar{padding:16px 20px}
  .logoType{font-size:23px}
  .logoMark{width:54px}
  .hero{grid-template-columns:1fr;gap:28px;padding:34px 20px 40px}
  .pane{min-height:640px}
  .card{max-width:158px;width:48%}
  .card.mini{width:36%;max-width:118px}
  .sec{padding:48px 20px 52px}
  .secHd,.formWrap{grid-template-columns:1fr;gap:26px}
  .grid3,.sGrid{grid-template-columns:1fr;gap:26px}
  .close,.legal{padding-left:20px;padding-right:20px}
  .wrap{padding:38px 20px 30px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}