/* Qaza Tracker, public website
   Palette: indigo night, brass, warm sand, soft teal.
   Kept entirely separate from app.css so the signed in app is untouched. */

:root{
  --ink:#141B3D;
  --ink2:#0C1230;
  --ink3:#2A3566;
  --indigo:#232E5C;
  --paper:#F6F1E7;
  --paper2:#FFFFFF;
  --paper3:#EDE5D6;
  --brass:#B8873A;
  --brass-deep:#9C6C26;
  --brass-deeper:#7A5216;
  --brass2:#D8AC5C;
  --brass3:#F0DBAC;
  --teal:#2F8A7A;
  --teal2:#4FB9A5;
  --body:#3A4166;
  --soft:#6A7196;
  --line:#E2D9C8;
  --line2:#D2C6AF;
  --rad:16px;
  --maxw:1080px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body.site{
  font-family:"SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--body);
  line-height:1.62;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

.site h1,.site h2,.site h3,.site h4{
  color:var(--ink);
  margin:0 0 12px;
  line-height:1.18;
  letter-spacing:-.018em;
  font-weight:680;
}
.site h1{font-size:44px}
.site h2{font-size:30px}
.site h3{font-size:19px}
.site p{margin:0 0 16px}
.site a{color:var(--teal);text-decoration:none}
.site a:hover{text-decoration:underline}

.shell{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
/* The reading column keeps the shell's own centring, and narrows its children
   instead. That way body copy starts on exactly the same line as the heading
   above it rather than at the edge of the window. */
.shell.narrow{max-width:var(--maxw)}
.shell.narrow > *{max-width:768px}

/* ---------- header ---------- */

.sitebar{
  position:sticky;top:0;z-index:40;
  background:rgba(246,241,231,.92);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
  /* Clear of the notch and speaker on a phone, and still a little off the top
     edge on a browser where there is no inset to allow for. */
  padding-top:calc(env(safe-area-inset-top, 0px) + 10px);
}
.sitebar_in{
  display:flex;align-items:center;gap:16px;
  height:66px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;font-size:18px;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand_mark{
  width:32px;height:32px;border-radius:9px;flex:0 0 auto;
  background:url("icon-512.png?v=3") center/cover no-repeat;
  box-shadow:0 2px 6px rgba(20,27,61,.24);
}
.sitenav{margin-left:auto;display:flex;align-items:center;gap:6px}
.sitenav a{
  color:var(--body);font-size:15px;font-weight:550;
  padding:8px 12px;border-radius:9px;
}
.sitenav a:hover{background:var(--paper3);text-decoration:none;color:var(--ink)}
.sitenav a.cta{
  background:var(--ink);color:#fff;padding:9px 18px;
  box-shadow:0 2px 8px rgba(20,27,61,.22);
}
.sitenav a.cta:hover{background:var(--ink3)}
.cta_arrow{margin-left:7px;opacity:.72;font-weight:400}

/* ---------- small screen menu ---------- */

.mobmenu{display:none}
.mobmenu > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:9px;
  padding:9px 14px;border-radius:10px;
  border:1px solid var(--line2);background:var(--paper2);
  color:var(--ink);font-size:15px;font-weight:600;
  -webkit-tap-highlight-color:transparent;
}
.mobmenu > summary::-webkit-details-marker{display:none}
.mobmenu > summary::marker{content:""}
.mobmenu > summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.bars{display:inline-flex;flex-direction:column;gap:4px;width:17px}
.bars i{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .16s ease,opacity .16s ease}
.mobmenu[open] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobmenu[open] .bars i:nth-child(2){opacity:0}
.mobmenu[open] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobpanel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--paper2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 18px 38px rgba(20,27,61,.14);
  padding:8px 20px 20px;
}
.mobpanel a{
  display:block;padding:14px 4px;font-size:17px;font-weight:550;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobpanel a:hover{text-decoration:none;color:var(--teal)}
.mobpanel_foot{display:grid;gap:10px;margin-top:18px}
.mobpanel_foot a{
  display:block;text-align:center;border-bottom:0;padding:14px 18px;
  border-radius:11px;font-weight:620;font-size:16px;
}
.mobpanel_foot a.b_dark{background:var(--ink);color:#fff}
.mobpanel_foot a.b_line{border:1px solid var(--line2);color:var(--ink);background:var(--paper)}

/* The one crossing point between the website and the app */
.appband{
  background:linear-gradient(160deg,var(--indigo),var(--ink2));
  border-radius:20px;padding:34px 36px;color:#BFC5E0;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
}
.appband h3{color:#fff;font-size:22px;margin-bottom:6px}
.appband p{margin:0;font-size:16.5px;color:#9AA2C6;max-width:58ch}
.appband .btnrow{flex-wrap:nowrap}
@media (max-width:760px){
  .appband{grid-template-columns:1fr;padding:26px 22px}
  .appband .btnrow{flex-wrap:wrap}
}

/* ---------- hero ---------- */

.hero{
  background:
    radial-gradient(900px 520px at 78% -10%, rgba(184,135,58,.20) 0%, transparent 62%),
    radial-gradient(760px 460px at 4% 8%, rgba(47,138,122,.16) 0%, transparent 60%),
    linear-gradient(168deg,var(--ink) 0%,var(--ink2) 100%);
  color:#E7E9F5;
  padding:82px 0 88px;
}
.hero h1{color:#fff;font-size:50px;max-width:16ch}
.hero .lede{font-size:20px;color:#BFC5E0;max-width:54ch;margin-bottom:28px}
.hero_grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass3);
  border:1px solid rgba(240,219,172,.34);
  padding:5px 12px;border-radius:99px;margin-bottom:20px;
}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.b{
  display:inline-block;font-weight:620;font-size:16px;
  padding:14px 26px;border-radius:12px;border:1px solid transparent;
  cursor:pointer;
}
.b:hover{text-decoration:none}
/* These carry .site a as well, which would otherwise win on specificity and
   paint the label teal, so each button states its own colour at that weight. */
.site a.b_gold{
  background:linear-gradient(160deg,var(--brass-deep),var(--brass-deeper));
  color:#FFFFFF;
  box-shadow:0 6px 18px rgba(124,83,24,.34);
}
.site a.b_gold:hover{filter:brightness(1.10)}
.site a.b_ghost{border-color:rgba(255,255,255,.34);color:#FFFFFF}
.site a.b_ghost:hover{background:rgba(255,255,255,.10)}
.site a.b_dark{background:var(--ink);color:#FFFFFF}
.site a.b_dark:hover{background:var(--ink3)}
.site a.b_line{border-color:var(--line2);color:var(--ink);background:var(--paper2)}
.site button.b_gold{
  background:linear-gradient(160deg,var(--brass-deep),var(--brass-deeper));
  color:#FFFFFF;border:0;cursor:pointer;
  box-shadow:0 6px 18px rgba(124,83,24,.34);
}
.site button.b_gold:hover{filter:brightness(1.10)}
.hero_note{margin-top:18px;font-size:14.5px;color:#B3BBDC}

/* phone mock */
.phone{
  width:100%;max-width:290px;margin:0 auto;
  background:#0A0F26;border:8px solid #060A1B;border-radius:34px;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
  overflow:hidden;
}
.phone_top{height:22px;background:#060A1B}
.phone_in{padding:16px 14px 18px;background:linear-gradient(170deg,#182248,#0C1230)}
.pm_label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8E97C2;margin-bottom:4px}
.pm_big{font-size:38px;font-weight:700;color:#fff;line-height:1.1;letter-spacing:-.02em}
.pm_sub{font-size:12.5px;color:#9AA2C6;margin-bottom:14px}
.pm_bar{height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin-bottom:16px}
.pm_bar i{display:block;height:100%;width:18%;background:linear-gradient(90deg,var(--teal2),var(--brass2))}
.pm_row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.055);
  margin-bottom:7px;font-size:13px;color:#D6DAEE;
}
.pm_row b{color:#fff;font-weight:650}
.pm_row.on{background:rgba(79,185,165,.18);border:1px solid rgba(79,185,165,.32)}

/* ---------- artwork ---------- */

.art{display:block;width:100%;height:auto}

.hero{position:relative;overflow:hidden}
.hero > .shell{position:relative;z-index:2}
.art_dawn{
  position:absolute;inset:auto 0 -8% 0;height:86%;width:100%;
  z-index:1;pointer-events:none;opacity:.95;
}

.pagehead{position:relative;overflow:hidden}
.pagehead > .shell{position:relative;z-index:2}
.art_arches{
  position:absolute;right:0;bottom:-10%;width:min(58%,640px);height:auto;
  z-index:1;pointer-events:none;opacity:.55;
}
@media (max-width:860px){ .art_arches{width:100%;opacity:.42} }

.tilefield{position:relative;overflow:hidden}
.tilefield > .shell{position:relative;z-index:2}
.art_tiles{
  position:absolute;top:0;right:0;width:min(46%,420px);height:auto;
  z-index:1;pointer-events:none;
}
@media (max-width:860px){ .art_tiles{width:80%;opacity:.55} }

.artcol{display:grid;place-items:center;padding:8px}
.art_spread{max-width:380px}
.art_sealed{max-width:320px}
.art_count{max-width:320px}
.art_u2k{max-width:400px}
.art_six{max-width:360px}
.art_journey{max-width:380px}
.art_home{max-width:240px}
.art_day{max-width:380px}
.art_on_light{max-width:280px}

.figband{
  display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:center;
}
.figband.flip{grid-template-columns:340px 1fr}
@media (max-width:860px){
  .figband,.figband.flip{grid-template-columns:1fr;gap:26px}
  .figband .artcol{order:-1}
}

/* ---------- sections ---------- */

.sec{padding:74px 0}
.sec_tight{padding:52px 0}
.sec_paper{background:var(--paper2)}
.sec_sand{background:var(--paper3)}
.sec_ink{background:var(--ink);color:#C8CDE6}
.sec_ink h2,.sec_ink h3{color:#fff}

.sechead{max-width:640px;margin-bottom:38px}
.sechead p{font-size:18px;color:var(--soft);margin:0}
.sec_ink .sechead p{color:#9AA2C6}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards4{grid-template-columns:repeat(2,1fr)}
.pray.small span{font-size:13.5px;padding:6px 12px}
.cards2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{
  background:var(--paper2);border:1px solid var(--line);
  border-radius:var(--rad);padding:26px 24px;
}
.sec_paper .card{background:var(--paper);border-color:var(--line)}
.sec_ink .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.12)}
.card p:last-child{margin-bottom:0}
.card p{font-size:16px}
.num{
  width:34px;height:34px;border-radius:10px;
  background:var(--ink);color:var(--brass3);
  display:grid;place-items:center;font-weight:700;font-size:15px;
  margin-bottom:14px;
}
.sec_ink .num{background:var(--brass2);color:#201604}

.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.stat{text-align:center;padding:20px 12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:var(--rad)}
.stat b{display:block;font-size:27px;color:#fff;font-weight:700;letter-spacing:-.02em}
.stat span{font-size:13.5px;color:#9AA2C6}

.pray{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.pray span{
  background:var(--paper2);border:1px solid var(--line2);
  padding:8px 16px;border-radius:99px;font-size:15px;font-weight:550;color:var(--ink);
}
.sec_sand .pray span{background:var(--paper2)}

.quote{
  border-left:3px solid var(--brass2);
  padding:2px 0 2px 22px;margin:0 0 20px;
  font-size:19px;color:var(--ink);line-height:1.55;
}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{
  cursor:pointer;font-weight:620;color:var(--ink);font-size:17.5px;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass);font-weight:700;font-size:21px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:12px 0 0;color:var(--body);font-size:16.5px}

.cta_band{
  background:linear-gradient(160deg,var(--indigo),var(--ink2));
  border-radius:22px;padding:52px 44px;text-align:center;color:#C8CDE6;
}
.cta_band h2{color:#fff;font-size:33px}
.cta_band p{max-width:52ch;margin:0 auto 26px;font-size:17.5px;color:#9AA2C6}

.sitefoot{background:var(--ink2);color:#8E97C2;padding:46px 0 38px;font-size:15px}
.sitefoot a{color:#BFC5E0}
.foot_grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.foot_links{display:flex;flex-wrap:wrap;gap:18px}
.foot_note{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.10);font-size:13.5px;color:#737BA4}

/* ---------- forms ---------- */

.siteform label{
  display:block;font-weight:620;color:var(--ink);font-size:15.5px;margin:16px 0 6px;
}
.siteform label:first-of-type{margin-top:0}
.siteform input[type=text],
.siteform input[type=email],
.siteform textarea,
.siteform select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--paper2);border:1px solid var(--line2);border-radius:10px;
  padding:12px 14px;appearance:none;
}
.sec_paper .siteform input[type=text],
.sec_paper .siteform input[type=email],
.sec_paper .siteform textarea,
.sec_paper .siteform select{background:var(--paper)}
.siteform textarea{resize:vertical;line-height:1.55}
.siteform input:focus,.siteform textarea:focus,.siteform select:focus{
  outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(184,135,58,.18);
}
.siteform input::placeholder,.siteform textarea::placeholder{color:var(--ink3);opacity:.85}
.siteform select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236A7196' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;
}
.fhint{color:var(--soft);font-size:14px;margin:6px 0 0}
.nope{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sitealert{
  border-radius:12px;padding:14px 18px;margin-bottom:22px;font-size:16px;
  border:1px solid var(--line2);background:var(--paper2);
}
.sitealert.good{border-color:#9CCFC2;background:#E8F5F1;color:#12483C}
.sitealert.bad{border-color:#E3B0A0;background:#FBEDE8;color:#7A3520}

.ticklist{list-style:none;margin:0;padding:0}
.ticklist li{position:relative;padding:0 0 12px 30px;font-size:16.5px}
.ticklist li:before{
  content:"";position:absolute;left:0;top:8px;
  width:16px;height:16px;border-radius:5px;
  background:var(--teal);
}
.ticklist li:after{
  content:"";position:absolute;left:5px;top:12px;
  width:5px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(42deg);
}
.sec_ink .ticklist li{color:#C8CDE6}

.pagehead{
  background:linear-gradient(168deg,var(--ink) 0%,var(--ink2) 100%);
  color:#BFC5E0;padding:58px 0 54px;
}
.pagehead h1{color:#fff;font-size:40px;max-width:20ch}
.pagehead p{font-size:19px;color:#9AA2C6;max-width:58ch;margin:0}

.prose h2{margin-top:42px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:17px}
.prose ul{padding-left:22px}
.prose li{margin-bottom:8px}

@media (max-width:860px){
  .hero_grid{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:36px}
  .hero .lede{font-size:18px}
  .site h1{font-size:34px}
  .site h2{font-size:25px}
  .cards,.cards2{grid-template-columns:1fr}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .sec{padding:54px 0}
  .cta_band{padding:40px 24px}
  .cta_band h2{font-size:27px}
  /* The nav links move into the menu, but Login stays on the bar so the way
     into the app is never more than one tap away. */
  .sitenav a:not(.cta){display:none}
  .sitenav{gap:8px}
  .sitenav a.cta{padding:9px 15px}
  .mobmenu{display:block}
  .mobmenu_word{display:none}
  .mobmenu > summary{padding:10px 12px}
  .pagehead h1{font-size:31px}
}