/* court:scout — courtscout.uk. One stylesheet for the landing page and the legal pages. */
:root{
  --royal:#2E47F2; --royal-2:#1F35D6; --navy:#0B1F8C; --ink-navy:#0A1478;
  --violet:#5B2CF0; --purple:#B026F5; --lime:#D7F205; --lime-2:#B5E61D; --peach:#F07A2A;
  --bg:#F4F5FB; --card:#FFFFFF; --text:#0B1030; --text-2:#4A5070; --line:rgba(11,16,48,.10);
  --link:#1F35D6;
  --display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif;
  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#070B2E; --card:#0F1545; --text:#EEF0FF; --text-2:#A9AFD6; --line:rgba(238,240,255,.12);
    --link:#C8E84A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#070B2E; --card:#0F1545; --text:#EEF0FF; --text-2:#A9AFD6; --line:rgba(238,240,255,.12);
  --link:#C8E84A; color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--ui);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
/* Page width and nav match the landing page, so the brand sits in the same place on every page. */
.wrap{width:min(calc(100% - 40px),1180px);margin:0 auto;padding:0 var(--gutter)}
.caps{font-family:var(--mono);text-transform:uppercase;letter-spacing:.32em;font-size:12.5px;font-weight:500}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:9;background:#fff;color:#000;padding:8px 12px;border-radius:8px}

/* ---------- the blue world: hero, nav and footer ---------- */
.blue{color:#fff;position:relative;isolation:isolate;
  background:
    radial-gradient(60% 55% at 100% 0%, rgba(240,122,42,.55) 0%, rgba(240,122,42,0) 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(176,38,245,.45) 0%, rgba(176,38,245,0) 70%),
    linear-gradient(160deg, #3551FC 0%, #2E47F2 45%, #1F35D6 75%, #0B50A4 100%);}
.blue a{color:#fff}

.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:82px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.brand img{width:36px;height:36px}
.brand b{font:800 22px/1 var(--display);letter-spacing:-.035em}
.brand img.wordmark{width:auto;height:26px}
/* The app icon, with the rounded corners the phone gives it. */
.brand img.app-icon{width:32px;height:32px;border-radius:22.5%;box-shadow:0 2px 6px rgba(6,24,120,.3)}
.nav nav{display:flex;gap:26px;font-size:14px;font-weight:650}
.nav nav a{text-decoration:none;opacity:.85}.nav nav a:hover{opacity:1;text-decoration:underline}

.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:24px;padding:28px 0 0}
.hero-copy{padding-bottom:72px}
.hero .mark{width:clamp(96px,14vw,150px)}
.word{font:800 clamp(52px,9.5vw,112px)/.95 var(--display);letter-spacing:-.045em;margin:18px 0 18px}
.hero .caps{font-size:clamp(12px,1.5vw,16px);opacity:.92}
.rule{width:44px;height:3px;background:var(--lime);border:0;margin:28px 0 26px}
.lede{font-size:clamp(17px,1.9vw,20px);line-height:1.5;max-width:30em;margin:0 0 30px;color:rgba(255,255,255,.92)}
.hero-phone{align-self:end;justify-self:center;max-width:430px;width:100%}
/* The photo has its own blue behind the phone: feather every edge into the page's gradient. */
.hero-phone img{width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 10%,#000 84%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 10%,#000 84%,transparent);
  mask-composite:intersect}

.stores{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.store{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:12px;
  background:#000;color:#fff;border:1px solid rgba(255,255,255,.35);text-decoration:none;line-height:1.15}
.store svg{width:24px;height:24px;flex:none}
.store small{display:block;font-size:11px;opacity:.85}
.store span{font:600 17px/1.1 var(--ui);letter-spacing:-.01em}
.store[aria-disabled="true"]{opacity:.9;cursor:default}
.soon{font-size:13px;opacity:.8;margin-top:12px}


section{padding:clamp(56px,8vw,96px) 0}
.eyebrow{color:var(--royal-2);margin:0 0 14px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .eyebrow{color:var(--lime-2)}}
:root[data-theme="dark"] .eyebrow{color:var(--lime-2)}
h2{font:800 clamp(34px,5vw,56px)/1.02 var(--display);letter-spacing:-.04em;margin:0 0 18px}
.sub{color:var(--text-2);font-size:18px;max-width:36em;margin:0}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}


.trust{border-radius:28px;padding:clamp(28px,5vw,56px)}
.trust h2{color:#fff}
/* The app icon, as tall as the three lines beside it: the caps line (20px + 14px gap) and the two-line heading. */
.trust-head{display:flex;align-items:flex-start;gap:clamp(16px,2.4vw,28px)}
.trust-head .app-icon{flex:none;width:calc(34px + 2.04*clamp(34px,5vw,56px));height:auto;aspect-ratio:1;border-radius:22.5%;box-shadow:0 6px 18px rgba(6,24,120,.35)}
.trust .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px}
.trust h3{font:700 19px/1.25 var(--display);margin:0 0 6px;letter-spacing:-.015em}
.trust p{margin:0;color:rgba(255,255,255,.86);font-size:15.5px}

.bigline{text-align:center}
.bigline h2{font-size:clamp(40px,7vw,84px)}
.bigline .rule{margin:24px auto}

footer.blue{padding:40px 0 34px;font-size:14.5px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;align-items:flex-start}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot p{margin:0;opacity:.8;max-width:44em}

/* ---------- legal pages ---------- */
.legal-head{padding:0 0 44px}
.legal-head h1{font:800 clamp(38px,6vw,64px)/1 var(--display);letter-spacing:-.04em;margin:28px 0 12px}
.legal-head p{margin:0;opacity:.9}
.doc{max-width:760px;margin:0 auto;padding:48px var(--gutter) 80px}
.doc h2{font:750 26px/1.2 var(--display);letter-spacing:-.02em;margin:48px 0 12px;padding-top:8px}
.doc h3{font:700 18.5px/1.3 var(--display);margin:28px 0 8px}
.doc p,.doc li{color:var(--text)}
.doc ul{padding-left:1.2em}.doc li{margin:6px 0}
.doc .summary{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 24px;margin:0 0 8px}
.doc .summary ul{margin:8px 0 0}
.doc .toc{columns:2;column-gap:28px;padding-left:1.2em;font-size:15.5px}
.table-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.doc table{border-collapse:collapse;width:100%;font-size:15px;min-width:560px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.doc tr:last-child td{border-bottom:0}
.doc th{font-weight:650;background:color-mix(in srgb,var(--royal) 7%,transparent)}
.doc code{font-family:var(--mono);font-size:.88em}
.doc .upd{color:var(--text-2);font-size:15px}

/* ---------- download page ---------- */
.get{display:flex;align-items:center;justify-content:center;gap:10px;height:58px;border-radius:14px;background:var(--royal);color:#fff;font:650 18px/1 var(--ui);text-decoration:none;margin:8px 0 0}
.get:hover{background:var(--royal-2)}
.get svg{width:22px;height:22px}
.doc .meta{color:var(--text-2);font-size:15px;text-align:center;margin:12px 0 0}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:8px}
  .hero-copy{padding-bottom:8px}
  .hero .mark{margin:0 auto}
  .rule{margin-left:auto;margin-right:auto}
  .lede{margin-left:auto;margin-right:auto}
  .stores{justify-content:center}
  .hero-phone{max-width:320px}
  .split{grid-template-columns:1fr}
  .trust .grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .doc .toc{columns:1}
  .nav nav a.hide-sm{display:none}
  .wrap{width:min(calc(100% - 28px),1180px)}
  /* Too narrow for the icon beside the text: it sits above it, in the same corner. */
  .trust-head{flex-direction:column;gap:18px}
  .trust-head .app-icon{width:72px}
  .nav{height:70px}
}
@media (max-width:420px){.brand{gap:8px}.brand img.wordmark{height:18px}.brand img.app-icon{width:24px;height:24px}}