/* ============================================================
   FieldRadar marketing site — shared styles
   Self-hosted fonts, design tokens, accessibility, components.
   Used by all pages. The homepage also keeps page-specific
   inline rules for its bespoke product mock-ups.
   ============================================================ */

/* ---- Self-hosted fonts (latin, variable, swap) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/assets/fonts/spacegrotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Tokens ---- */
:root {
  --navy:#14324A; --navy2:#0F273A; --ink:#17212B; --sub:#3F4E5C; --muted:#5A6875;
  --orange:#A24B0F; --orange-dark:#7F3608; --pin:#F0A15D; --line:#E1E7ED; --bg:#F5F8FA;
  --green:#147A42; --red:#C42A20; --amber:#B36A00;
  --sys: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --body: 'Inter', var(--sys);
  --display: 'Space Grotesk', var(--sys);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{font-family:var(--body);color:var(--ink);background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.5}
a{text-decoration:none;color:inherit}
img,svg{display:block;max-width:100%}

/* ---- Accessibility ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-48px;z-index:200;background:var(--navy);color:#fff;font-weight:600;padding:10px 16px;border-radius:10px;transition:top .15s ease}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid #2A6FB0;outline-offset:2px;border-radius:6px
}

/* ---- Layout ---- */
.wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.h-display{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.08}
/* Legacy inline campaign colours are normalised to WCAG AA computed colours. */
.page-hero [style*="color:#E2873B"],#top [style*="color:#E2873B"],#download [style*="color:#E2873B"]{color:#F0A15D!important}

/* ---- Header / nav ---- */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:13px;padding-bottom:13px}
.brand{display:flex;align-items:center;gap:11px}
.brand-name{font-family:var(--display);font-weight:600;font-size:22px;color:var(--navy);letter-spacing:-.02em}
.nav-right{display:flex;align-items:center;gap:16px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:#33475B;font-weight:600;font-size:15px}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--navy)}
.btn-nav{background:var(--navy);color:#fff;font-weight:600;font-size:15px;padding:11px 20px;border-radius:12px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.btn-nav:hover{background:var(--navy2)}
.nav-toggle{display:none}
@media(max-width:820px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px 24px 16px}
  .nav-links.open a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);cursor:pointer}
}
@media(max-width:520px){
  .nav{gap:8px}
  .nav-right{gap:8px}
  .brand{gap:8px}
  .brand-name{font-size:18px}
  .btn-nav{padding:10px 12px;font-size:13px}
}
@media(max-width:420px){
  .btn-nav{display:none}
}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;padding:13px 22px;border-radius:13px;min-height:48px;cursor:pointer;border:1.5px solid transparent;font-family:var(--body)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-dark)}
.btn:disabled{cursor:wait;opacity:.65}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:#EEF3F7}
.btn-onnavy{background:#fff;color:var(--navy)}
.btn-onnavy:hover{background:#EAF0F5}

/* Official store artwork. Apple requires the App Store badge to appear first
   when it is shown beside another platform badge. */
.store-badges{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.store-badge{display:inline-flex;height:56px;line-height:0;border-radius:8px;overflow:hidden}
.store-badge:hover{opacity:.9}
.store-badge:focus-visible{outline:3px solid #F0A15D;outline-offset:4px}
.store-badge img{display:block;width:auto;height:56px}
/* Google's official PNG has a 41px transparent inset on its 250px canvas.
   Crop only that transparent canvas so both official badges have a 56px
   visible height; the supplied artwork itself remains unchanged. */

/* honest launch-status chips (not clickable store badges) */
.status-chip{display:inline-flex;flex-direction:column;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:11px 20px;min-width:170px;text-align:left}
.status-chip .top{font-size:11px;color:#9AA9B5;letter-spacing:.05em;text-transform:uppercase;line-height:1.3}
.status-chip .bottom{font-size:17px;color:#fff;font-weight:600;font-family:var(--display);line-height:1.3;margin-top:2px}

/* ---- Lists ---- */
.tick-list{list-style:none}
.tick-list li{display:flex;gap:12px;align-items:flex-start;margin-bottom:13px}
.tick-list li:last-child{margin-bottom:0}
.tick-list .dot{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#FBE6D6;color:var(--orange);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:1px}
.tick-list span.txt{font-size:clamp(15px,1.3vw,17px);line-height:1.5;color:#3A4A59}

/* ---- Content pages (about/contact/security/terms/privacy) ---- */
.page-hero{background:linear-gradient(178deg,#163A54 0%,#0E2436 62%,#0B1C2B 100%);color:#fff}
.page-hero .wrap{padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(40px,6vw,64px)}
.page-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,5vw,48px);letter-spacing:-.03em;line-height:1.05;margin-bottom:14px;max-width:20ch}
.page-hero p.lede{font-size:clamp(16px,1.6vw,20px);line-height:1.55;color:#C3D2DE;max-width:60ch}
.prose{max-width:760px;margin:0 auto;padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(48px,7vw,80px)}
.prose h2{font-family:var(--display);font-weight:600;font-size:clamp(20px,3.2vw,26px);color:var(--navy);letter-spacing:-.02em;margin:34px 0 12px;scroll-margin-top:80px}
.prose h3{font-family:var(--display);font-weight:600;font-size:18px;color:var(--navy);margin:22px 0 8px}
.prose p{font-size:16px;color:#33424F;margin-bottom:14px;max-width:70ch}
.prose ul{margin:0 0 14px 22px;max-width:68ch}
.prose li{font-size:16px;color:#33424F;margin-bottom:8px}
.prose strong{color:var(--ink)}
.prose a{color:var(--orange);font-weight:600}
.prose a:hover{text-decoration:underline}
/* buttons inside prose keep their own colours, not the orange link colour */
.prose a.btn{text-decoration:none}
.prose a.btn-primary,.prose a.btn-primary:hover{color:#fff}
.prose a.btn-outline,.prose a.btn-outline:hover{color:var(--navy);text-decoration:none}
.note-card{background:#F5F8FA;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:12px 0 20px;font-size:15px;color:#33424F}

/* ---- Cards / grids ---- */
.cardgrid{display:flex;flex-wrap:wrap;gap:20px}
.card{flex:1 1 300px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px}
.card h3{font-family:var(--display);font-weight:600;font-size:20px;color:var(--navy);margin-bottom:8px}
.card p{font-size:15px;line-height:1.6;color:var(--sub)}

.role-row{display:grid;grid-template-columns:minmax(160px,220px) minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px solid #DDE3EA}
@media(max-width:620px){
  .role-row{grid-template-columns:1fr;gap:6px;padding:18px 0}
}

/* ---- Comparison table ---- */
.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare caption{text-align:left;font-family:var(--display);font-weight:600;font-size:20px;color:var(--navy);margin-bottom:14px}
.compare th,.compare td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.compare thead th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.compare tbody th{font-weight:600;color:var(--ink)}
.compare td{color:#33424F}
.compare .yes{color:var(--green);font-weight:600}
.compare .no{color:var(--muted)}
.compare-wrap{overflow-x:auto}

/* ---- Forms ---- */
.form{max-width:520px}
.form-field{margin-bottom:18px}
.form-field label{display:block;font-size:14px;font-weight:600;color:var(--navy);margin-bottom:6px}
.form-field .hint{font-size:13px;color:var(--muted);margin-top:5px}
.form-input,.form-select,.form-textarea{width:100%;min-height:48px;border:1px solid #C7D0DA;border-radius:12px;background:#fff;padding:0 14px;font-size:16px;color:var(--ink);font-family:var(--body)}
.form-textarea{min-height:132px;padding-top:12px;padding-bottom:12px;line-height:1.5;resize:vertical}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--navy)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.enquiry-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(420px,1.2fr);gap:clamp(36px,6vw,80px);align-items:start}
.enquiry-aside{border-left:4px solid var(--orange);padding-left:24px}
.enquiry-aside .eyebrow{color:var(--orange)!important}
.enquiry-aside ul{margin:20px 0 0;padding:0;list-style:none}
.enquiry-aside li{position:relative;margin:0 0 13px;padding-left:24px;color:var(--sub);line-height:1.5}
.enquiry-aside li::before{content:"\2713";position:absolute;left:0;color:var(--orange);font-weight:700}
.form-privacy{font-size:13px;color:var(--muted);margin:6px 0 18px;max-width:60ch}
.form-privacy a{color:var(--orange);font-weight:600}
.form-msg{border-radius:12px;padding:14px 16px;font-size:15px;margin-bottom:16px}
.form-msg.ok{background:#E7F6EE;border:1px solid #B6E2C8;color:#116A38}
.form-msg.err{background:#FDECEC;border:1px solid #F3C6C2;color:#A5231B}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:760px){.form-row,.enquiry-layout{grid-template-columns:1fr}.enquiry-aside{order:2}.enquiry-layout{gap:36px}}

/* ---- Footer ---- */
footer.site{background:#0B1C2B;color:#8FA3B4}
footer.site .wrap{padding-top:clamp(48px,6vw,72px);padding-bottom:clamp(28px,4vw,40px)}
.foot-cols{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.foot-links{display:flex;flex-wrap:wrap;gap:48px}
.foot-col h2{color:#fff;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.foot-col a{display:block;color:#8FA3B4;font-size:15px;margin-bottom:12px}
.foot-col a:hover{color:#fff}
.foot-legal{border-top:1px solid rgba(255,255,255,.09);margin-top:40px;padding-top:26px}
.foot-legal p{font-size:13px;line-height:1.6;color:#8093A2;margin:0 0 14px;max-width:80ch}
.foot-legal .row{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center}
.foot-legal .row span{font-size:13px;color:#8093A2}

/* ---- Sticky mobile download bar ---- */
/* FieldRadar is live on both stores and most visitors arrive on a phone, so the
   install action stays reachable without opening the menu. Injected by site.js
   and hidden on /download, which is already the store chooser. */
.dlbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:none;align-items:center;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -12px rgba(11,28,43,.28);
}
.dlbar .dlbar-text{flex:1 1 auto;min-width:0;overflow:hidden}
/* Never let the label wrap: squeezed between two badges it would stack into a
   tall block and cover the footer. */
.dlbar .dlbar-title{display:block;font-family:var(--display);font-weight:600;font-size:14px;color:var(--navy);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlbar .dlbar-sub{display:block;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlbar .store-badge{flex:0 1 auto;display:inline-flex;min-width:0}
.dlbar .store-badge img{height:40px;width:auto;display:block;max-width:100%}
/* Unknown platform: both badges shown, so drop the label to buy room. */
.dlbar[data-badges="2"] .dlbar-sub{display:none}
.dlbar[data-badges="2"] .store-badge img{height:34px}
@media(max-width:400px){
  .dlbar[data-badges="2"] .dlbar-text{display:none}
}
.dlbar-close{
  flex:0 0 auto;width:44px;height:44px;min-width:44px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:var(--muted);cursor:pointer;border-radius:10px;
}
.dlbar-close:hover{color:var(--navy);background:#F1F5F8}
.dlbar-close:focus-visible,.dlbar .store-badge:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media(max-width:760px){
  .dlbar.is-on{display:flex}
  /* Footer clearance is set at runtime from the bar's measured height. */
}