/* ==========================================================================
   Sayless Logistics — design system
   White-dominant surface · navy structure · gold as the single accent.
   Contrast verified: blue #1E5AE8 on white 5.74:1 · gold #E4B93F on navy 9.4:1
   · gold-text #8A6D0B on white 4.91:1 · ink-2 #3D4A5C on white 9.0:1
   ========================================================================== */

:root{
  /* surface */
  --white:#ffffff;
  --surface:#f7f9fc;
  --surface-2:#eef3fa;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;

  /* ink */
  --ink:#0a1b33;
  --ink-2:#3d4a5c;
  --ink-3:#64748b;

  /* navy */
  --navy:#071a3d;
  --navy-2:#0c2555;
  --navy-3:#12336f;

  /* blue */
  --blue:#1e5ae8;
  --blue-dark:#1543b8;
  --blue-soft:#eaf0fe;

  /* gold */
  --gold:#e4b93f;
  --gold-deep:#c9a227;
  --gold-soft:#fdf6e3;
  --gold-text:#8a6d0b;

  /* system */
  /* 14px floor for every rendered label — see tools/sweep.mjs rule 3. */
  --fs-meta:.875rem;
  --nav-h:72px;

  /* viewport-fit=cover means the layout viewport runs edge to edge, UNDER the
     status bar and the home indicator. Every fixed element therefore has to pay
     the inset itself. Routed through variables (not raw env()) so tools/sweep
     can force an inset profile and prove the padding actually moves. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);
  /* What every anchor offset, sticky top and hero pad must clear: the bar plus
     the status-bar inset it now paints into. Using --nav-h alone would let the
     nav sit on top of the first line of the hero on a notched phone. */
  --nav-total:calc(var(--nav-h) + var(--sat));
  --wrap:1200px;
  --r-sm:6px;
  --r:10px;
  --r-lg:16px;
  --shadow-sm:0 1px 2px rgba(7,26,61,.06),0 2px 8px rgba(7,26,61,.05);
  --shadow:0 10px 30px rgba(7,26,61,.10);
  --shadow-lg:0 24px 60px rgba(7,26,61,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Sora',var(--sans);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--white);color:var(--ink-2);
  font:400 1rem/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* Deliberately NO overflow-x:hidden/clip here. It hides the scrollbar but not
     the damage — the right-hand side of a too-wide card is still cut off, and it
     blinds the layout sweep to the very defect it exists to catch. Anything that
     overflows gets fixed at the source instead. */
}
img,svg,video{max-width:100%}
img{display:block;height:auto}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.14}
p{margin:0}
a{color:var(--blue);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--gold);color:var(--navy)}

/* ---------- type scale ---------- */
h1,.h1{font-size:clamp(2.05rem,4.4vw + .7rem,3.6rem)}
h2,.h2{font-size:clamp(1.6rem,1.7vw + .95rem,2.4rem)}
h3,.h3{font-size:clamp(1.16rem,.7vw + .95rem,1.5rem);line-height:1.25}
h4,.h4{font-size:1.03rem;line-height:1.35}
.lede{font-size:clamp(1rem,.3vw + .95rem,1.14rem);line-height:1.62;color:var(--ink-2);max-width:60ch}
.body-max{max-width:65ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font:700 var(--fs-meta)/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:.5rem;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold-deep);border-radius:2px;flex:none}
.on-dark .eyebrow{color:var(--gold)}
.on-dark .eyebrow::before{background:var(--gold)}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark p,.on-dark li,.on-dark .lede{color:#c9d6ee}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:1.5rem}
@media (min-width:1024px){.wrap{padding-inline:2rem}}
.section{padding-block:3rem}
@media (min-width:768px){.section{padding-block:4rem}}
@media (min-width:1024px){.section{padding-block:5rem}}
/* Andy reviews on a laptop. Short viewports get a tighter rhythm so a section
   is a screenful rather than a scroll. */
@media (min-width:1024px) and (max-height:900px){
  .section{padding-block:3.5rem}
  .head{margin-bottom:2rem}
  .split{gap:2.5rem}
}
.section--tight{padding-block:2.5rem}
@media (min-width:1024px){.section--tight{padding-block:4rem}}
.section--surface{background:var(--surface)}
.section--navy{background:var(--navy);color:#c9d6ee}
.head{max-width:62ch;margin-bottom:2rem}
@media (min-width:768px){.head{margin-bottom:2.4rem}}
.head--center{margin-inline:auto;text-align:center}
.head h2 + p{margin-top:.85rem}
.grid{display:grid;gap:1rem}
@media (min-width:768px){.grid{gap:1.5rem}}
.g-2{grid-template-columns:minmax(0,1fr)}
.g-3{grid-template-columns:minmax(0,1fr)}
.g-4{grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){
  .g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.split{display:grid;gap:2rem;align-items:center}
@media (min-width:960px){.split{grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem}}
.split__text{max-width:600px;min-width:0}
.split--flip .split__media{order:-1}
/* A split with a tall form on one side must align to the top. Centring left the
   Apply heading floating 248px down beside a 1059px form. */
.split--top{align-items:start}
/* Beside a long form the short column becomes sticky rather than leaving 400px
   of dead space under it — it stays with the reader as they work down the form. */
@media (min-width:960px){
  .split--top .split__text{position:sticky;top:calc(var(--nav-total) + 1.5rem)}
}
@media (max-width:959px){.split--flip .split__media{order:0}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.85rem 1.6rem;border:2px solid transparent;border-radius:var(--r-sm);
  font:700 .96rem/1 var(--sans);letter-spacing:.005em;cursor:pointer;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(30,90,232,.28)}
.btn--primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);box-shadow:0 10px 26px rgba(30,90,232,.34)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--navy);box-shadow:0 6px 18px rgba(228,185,63,.3)}
.btn--gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--navy)}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn--ghost-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--wide{width:100%}
.btn--sm{min-height:44px;padding:.65rem 1.15rem;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
@media (max-width:479px){.btn-row .btn{width:100%}}
.arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* text link with arrow — inline-flex so a global img/svg block reset cannot orphan it */
.tlink{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.94rem;color:var(--blue)}
.tlink:hover{color:var(--blue-dark)}
.tlink:hover .arrow{transform:translateX(3px)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:200;
  /* Height carries the inset and padding-top pushes the content clear, so the
     bar's colour reaches the physical top of the screen instead of leaving the
     status bar showing the white page behind it. */
  height:calc(var(--nav-h) + var(--sat));padding-top:var(--sat);
  background:linear-gradient(180deg,rgba(7,26,61,.98),rgba(7,26,61,.94));
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  transition:height .28s var(--ease),background-color .28s var(--ease),box-shadow .28s var(--ease);
}
/* A hairline with a warm centre rather than a flat border — reads as a finished
   edge instead of a rule someone forgot to remove. */
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(228,185,63,.42),rgba(255,255,255,.06));
}
.nav.scrolled{
  height:calc(64px + var(--sat));
  background:linear-gradient(180deg,rgba(7,26,61,.97),rgba(7,26,61,.92));
  box-shadow:0 10px 30px rgba(3,12,30,.34);
}
.nav__in{
  height:100%;max-width:var(--wrap);margin-inline:auto;
  padding-left:calc(1.5rem + var(--sal));padding-right:calc(1.5rem + var(--sar));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
@media (min-width:1024px){.nav__in{padding-left:calc(2rem + var(--sal));padding-right:calc(2rem + var(--sar))}}

/* scroll progress — a thin gold thread across the very top */
.nav__progress{
  position:absolute;left:0;top:0;height:2px;width:100%;transform:scaleX(0);
  transform-origin:0 50%;background:linear-gradient(90deg,var(--gold),#f2d17a);
  pointer-events:none;
}

.brand{
  display:inline-flex;align-items:center;gap:.65rem;color:#fff;min-height:44px;
  font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;white-space:nowrap;
}
.brand:hover{color:#fff}
.brand__mark{flex:none;transition:transform .3s var(--ease)}
.brand:hover .brand__mark{transform:translateY(-1px) rotate(-3deg)}
.brand em{font-style:normal;color:var(--gold)}

.nav__links{display:none}
@media (min-width:1024px){
  .nav__links{display:flex;align-items:center;gap:.15rem;margin-left:auto;margin-right:.75rem}
  .nav__links a{
    position:relative;display:inline-flex;align-items:center;height:40px;padding:0 .85rem;
    color:#c9d6ee;font-weight:600;font-size:.93rem;transition:color .2s var(--ease);
  }
  /* a hairline that grows from the centre, rather than a background block */
  .nav__links a::after{
    content:"";position:absolute;left:.85rem;right:.85rem;bottom:6px;height:2px;border-radius:2px;
    background:var(--gold);transform:scaleX(0);transform-origin:50% 50%;
    transition:transform .26s var(--ease);
  }
  .nav__links a:hover{color:#fff}
  .nav__links a:hover::after{transform:scaleX(1)}
  .nav__links a[aria-current="page"]{color:#fff}
  .nav__links a[aria-current="page"]::after{transform:scaleX(1)}
}
.nav__cta{display:none}
@media (min-width:1024px){
  .nav__cta{
    display:inline-flex;
    box-shadow:0 6px 18px rgba(228,185,63,.26),inset 0 1px 0 rgba(255,255,255,.45);
  }
  .nav__cta:hover{box-shadow:0 10px 26px rgba(228,185,63,.34),inset 0 1px 0 rgba(255,255,255,.5)}
}
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;margin-left:auto;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:10px;cursor:pointer;
  transition:background-color .2s,border-color .2s;
}
.burger:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
@media (min-width:1024px){.burger{display:none}}
.burger span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;position:relative;transition:background-color .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:#fff;border-radius:2px;transition:transform .25s var(--ease),top .2s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;top:calc(var(--nav-h) + var(--sat));left:0;right:0;
  /* NOT bottom:0 — on iOS a fixed bottom:0 resolves against the large viewport,
     i.e. underneath Safari's bottom toolbar, which is what buried the footer and
     the phone number. dvh shrinks while the toolbar is showing. */
  height:calc(100dvh - var(--nav-h) - var(--sat));
  z-index:199;background:var(--navy);
  display:flex;flex-direction:column;gap:.15rem;
  padding:1rem calc(1.5rem + var(--sar)) calc(1.75rem + var(--sab)) calc(1.5rem + var(--sal));
  transform:translateY(-8px);opacity:0;visibility:hidden;overflow-y:auto;
  transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
}
.drawer[data-open="true"]{opacity:1;transform:none;visibility:visible}
/* Specificity 0,2,1 — beats .nav.scrolled at 0,2,0. */
body.nav-open .nav{
  height:calc(var(--nav-h) + var(--sat));
  /* The bar is a frosted 94-98% navy, which is right over a scrolling page and
     wrong under an open menu: page text ghosted through the header while the
     menu below it was solid, so the two read as separate broken panels. Opaque
     while open makes the header and the menu one sheet. */
  background:var(--navy);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;
}
body.nav-open .nav::after{opacity:0}
@media (min-width:1024px){.drawer{display:none}}
.drawer a{
  display:flex;align-items:center;min-height:46px;padding:.3rem .25rem;
  color:#fff;font-family:var(--display);font-weight:700;font-size:1.06rem;
  border-bottom:1px solid rgba(255,255,255,.09);
}
/* The nav rows SHARE the leftover height instead of leaving it in a heap at the
   bottom. Pinning the footer down put the void mid-panel; letting the block sit
   at the top just moved the same void below the phone number — ~108px of empty
   navy on a 390x844. Rows are the right place for it: a menu whose list fills
   the panel is what a native one looks like, and the rows get bigger targets.
   min-height keeps them legal when the content overflows instead (a 320 or 375
   phone), where there is no free space to share and flex-grow does nothing. */
.drawer > a:not(.btn){flex:1 1 auto;min-height:46px;max-height:80px}
.drawer a[aria-current="page"]{color:var(--gold)}
.drawer .btn{margin-top:.7rem}
/* NOT margin-top:auto. In a flex column that hands every spare pixel to one
   seam — on a tall phone it left ~200px of empty navy between the buttons and
   the footer, which reads as a broken layout rather than as spacing. The block
   stays together and the slack falls below it, where it looks deliberate. */
.drawer__foot{margin-top:1.25rem;padding-top:1rem;color:#8fa6cd;font-size:var(--fs-meta)}
/* The phone number is a tel: link and, on a phone, one of the two things this
   drawer exists for — so it gets a real 44px target rather than the inline
   exemption. It sits on its own line, not inside a sentence. */
.drawer__foot a{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;
  font-family:var(--sans);font-size:var(--fs-meta);font-weight:600;color:var(--gold)}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;background:var(--navy);color:#fff;
  padding-top:calc(var(--nav-total) + 2rem);padding-bottom:2.5rem;overflow:hidden;
}
@media (min-width:768px){.hero{padding-top:calc(var(--nav-total) + 2.5rem);padding-bottom:3rem}}
@media (min-width:1024px){
  .hero{min-height:100svh;display:flex;align-items:center;
    padding-top:calc(var(--nav-total) + 2rem);padding-bottom:2.5rem}
}
/* short laptops: compress rather than overflow */
@media (min-width:1024px) and (max-height:860px){
  .hero{min-height:0;padding-top:calc(var(--nav-total) + 2rem);padding-bottom:2.5rem}
  .hero__grid{gap:2rem}
}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(135deg,rgba(7,26,61,.94) 0%,rgba(7,26,61,.80) 46%,rgba(12,37,85,.74) 100%);
}
.hero__veil::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 88% 18%,rgba(228,185,63,.16),transparent 62%);
}
.hero__grid{display:grid;gap:2.5rem;align-items:center;width:100%}
@media (min-width:1024px){.hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:2.75rem}}
.hero h1{color:#fff;margin-bottom:.85rem}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line > span{display:block}
.hero h1 mark{background:none;color:var(--gold)}
.hero__lede{color:#c9d6ee;max-width:52ch;margin-bottom:1.4rem}
/* Three actions must sit on one line on desktop; a lone third button wrapping
   underneath reads as an afterthought. Trimming the inline padding is enough. */
.hero .btn-row{margin-bottom:1.4rem;gap:.6rem}
@media (min-width:1024px){
  .hero .btn-row{flex-wrap:nowrap}
  .hero .btn-row .btn{padding-inline:1.2rem;white-space:nowrap}
}
@media (min-width:1024px) and (max-width:1180px){
  .hero .btn-row{flex-wrap:wrap}
}

.trustrow{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14)}
.trustrow__item{display:flex;align-items:center;gap:.5rem;min-width:0;font-size:var(--fs-meta);color:#c9d6ee;font-weight:600}
.trustrow__item svg{flex:none;color:var(--gold)}
.stars{display:inline-flex;gap:2px;color:var(--gold);flex:none}

/* hero media collage */
.hero__media{position:relative;min-width:0}
@media (max-width:1023px){.hero__media{display:none}}
.hero__panel{position:absolute;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.16)}
.hero__panel img{width:100%;height:100%;object-fit:cover}
.hero__panel--a{position:relative;width:78%;aspect-ratio:4/5;margin-left:auto;z-index:2}
.hero__panel--b{width:52%;aspect-ratio:1/1;left:0;bottom:12%;z-index:3}
.hero__panel--c{width:40%;aspect-ratio:3/4;left:14%;top:-4%;z-index:1;opacity:.92}
@media (min-width:1024px) and (max-height:860px){
  .hero__panel--a{width:70%}
  .hero__panel--b{width:46%}
  .hero__panel--c{width:34%}
}

/* the animated route line — the transport signature */
.routeline{position:absolute;left:0;right:0;bottom:-1px;height:52px;z-index:-1;pointer-events:none;opacity:.42}
.routeline svg{width:100%;height:100%;display:block}
.routeline .track{fill:none;stroke:rgba(255,255,255,.10);stroke-width:1.2;stroke-linecap:round}
.routeline .draw{fill:none;stroke:var(--gold);stroke-width:1.3;stroke-linecap:round;
  stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
html:not(.gsap-ready) .routeline .draw{stroke-dashoffset:0}
.routeline .pip{fill:var(--gold);opacity:.75}

.scrollhint{display:none}
@media (min-width:1024px) and (min-height:760px){
  .scrollhint{
    display:flex;align-items:center;gap:.55rem;position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
    color:#8fa6cd;font-size:var(--fs-meta);font-weight:700;letter-spacing:.16em;text-transform:uppercase;z-index:3;
  }
  .scrollhint svg{animation:bob 1.9s ease-in-out infinite}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.scrollhint svg{animation:none}}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;isolation:isolate;background:var(--navy);color:#fff;
  padding-top:calc(var(--nav-total) + 2.5rem);padding-bottom:2.75rem;overflow:hidden}
@media (min-width:768px){.phero{padding-top:calc(var(--nav-total) + 4rem);padding-bottom:4rem}}
.phero__bg{position:absolute;inset:0;z-index:-2}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.3}
.phero__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(7,26,61,.93),rgba(12,37,85,.82))}
.phero h1{color:#fff;max-width:19ch}
.phero .lede{color:#c9d6ee;margin-top:1rem;max-width:56ch}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:var(--fs-meta);color:#8fa6cd;margin-bottom:1rem}
.crumbs a{color:#c9d6ee;font-weight:600}
.crumbs a:hover{color:var(--gold)}
.crumbs span[aria-hidden]{color:#5d739b}

/* ---------- trust bar ---------- */
.trustbar{background:var(--surface);border-block:1px solid var(--line)}
.trustbar__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem;padding-block:2rem}
@media (min-width:768px){.trustbar__grid{grid-template-columns:repeat(4,minmax(0,1fr));padding-block:2.5rem}}
.stat{min-width:0}
.stat__n{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.03em;color:var(--navy);
  font-size:clamp(1.7rem,3.6vw,2.6rem);line-height:1.05;font-variant-numeric:tabular-nums}
.stat__n em{font-style:normal;color:var(--gold-deep)}
.stat__l{display:block;margin-top:.3rem;font-size:var(--fs-meta);font-weight:600;color:var(--ink-3);line-height:1.4}

/* ---------- cards ---------- */
.card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.grid > .card{height:100%}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.card h3{margin-bottom:.6rem}
.card p{font-size:.95rem}
.card .tlink{margin-top:auto;padding-top:1rem}
.card__icon{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;
  border-radius:var(--r-sm);background:var(--blue-soft);color:var(--blue);margin-bottom:1rem;
}
.card__icon--gold{background:var(--gold-soft);color:var(--gold-text)}
.card--media{padding:0;overflow:hidden}
.card--media .card__body{padding:1.5rem;display:flex;flex-direction:column;flex:1;min-width:0}
.card__shot{position:relative;overflow:hidden;height:210px;background:var(--surface-2)}
@media (min-width:768px){.card__shot{height:240px}}
.card__shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card--media:hover .card__shot img{transform:scale(1.05)}
.tag{
  position:absolute;left:.85rem;top:.85rem;z-index:2;
  display:inline-flex;align-items:center;height:26px;padding:0 .6rem;border-radius:4px;
  background:rgba(7,26,61,.86);color:#fff;font-size:var(--fs-meta);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.card--navy{background:var(--navy-2);border-color:rgba(255,255,255,.12)}
.card--navy h3{color:#fff}
.card--navy p,.card--navy li{color:#c9d6ee}

/* checklist */
.checks{display:grid;gap:.7rem;margin-top:1.25rem}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.7rem;align-items:start;font-size:.96rem}
.checks svg{margin-top:.28em;color:var(--blue);flex:none}
.on-dark .checks svg,.card--navy .checks svg{color:var(--gold)}

/* ---------- media frame ---------- */
.frame{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--surface-2)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--tall{aspect-ratio:4/5}
.frame--wide{aspect-ratio:16/10}
.frame--square{aspect-ratio:1/1}
@media (max-width:599px){.frame--tall{aspect-ratio:4/3}}
/* On desktop a frame is capped by HEIGHT and fills its column width. Capping a
   ratio box with max-height shrinks its width to keep the ratio, which left the
   frame floating narrow inside a wider column. */
@media (min-width:960px){
  .frame--tall{aspect-ratio:auto;height:min(70vh,600px)}
  .frame--wide{aspect-ratio:auto;height:min(52vh,420px)}
  .frame--square{aspect-ratio:auto;height:min(44vh,340px)}
}
.frame__badge{
  position:absolute;left:1rem;bottom:1rem;right:1rem;
  display:flex;align-items:center;gap:.75rem;min-width:0;
  padding:.75rem .9rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.95);backdrop-filter:blur(6px);box-shadow:var(--shadow-sm);
}
.frame__badge svg{flex:none;color:var(--blue)}
.frame__badge b{display:block;color:var(--ink);font-size:.88rem;font-family:var(--display)}
.frame__badge span{display:block;color:var(--ink-3);font-size:var(--fs-meta);line-height:1.4}

/* ---------- the route (how it works) ---------- */
.route{position:relative;padding-left:2.5rem}
@media (min-width:768px){.route{padding-left:3.25rem}}
.route__rail{position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px}
@media (min-width:768px){.route__rail{left:15px}}
.route__fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--blue),var(--gold));border-radius:2px}
html:not(.gsap-ready) .route__fill{height:100%}
.stop{position:relative;padding-bottom:2.25rem}
.stop:last-child{padding-bottom:0}
.stop__dot{
  position:absolute;left:-2.5rem;top:0;width:24px;height:24px;border-radius:50%;
  background:var(--white);border:2px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font:800 .72rem/1 var(--sans);color:var(--ink-3);transition:all .35s var(--ease);
}
@media (min-width:768px){.stop__dot{left:-3.25rem;width:32px;height:32px;font-size:var(--fs-meta)}}
.stop.is-on .stop__dot{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 0 5px var(--blue-soft)}
.stop h3{margin-bottom:.4rem}
.stop p{font-size:.96rem;max-width:56ch}
.route--dark .route__rail{background:rgba(255,255,255,.16)}
.route--dark .stop__dot{background:var(--navy-2);border-color:rgba(255,255,255,.28);color:#8fa6cd}
.route--dark .stop.is-on .stop__dot{background:var(--gold);border-color:var(--gold);color:var(--navy);box-shadow:0 0 0 5px rgba(228,185,63,.18)}

/* ---------- pricing ---------- */
.plans{display:grid;gap:1.25rem;align-items:start}
@media (min-width:860px){.plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}}
.plan{
  position:relative;display:flex;flex-direction:column;min-width:0;height:100%;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.75rem;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
@media (min-width:768px){.plan{padding:2rem}}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.plan--featured{background:var(--navy);border-color:var(--navy);color:#c9d6ee;box-shadow:var(--shadow-lg)}
.plan--featured h3,.plan--featured .plan__price{color:#fff}
.plan__flag{
  position:absolute;right:1.25rem;top:-13px;
  display:inline-flex;align-items:center;height:26px;padding:0 .75rem;border-radius:13px;
  background:var(--gold);color:var(--navy);font-size:var(--fs-meta);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.plan__dir{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:.5rem 0 1rem;font-size:var(--fs-meta);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.plan--featured .plan__dir{color:var(--gold)}
.plan__dir svg{flex:none}
.plan__price{display:flex;align-items:baseline;gap:.35rem;flex-wrap:wrap;font-family:var(--display);font-weight:800;
  letter-spacing:-.03em;color:var(--navy);font-size:clamp(2.1rem,4.4vw,2.9rem);line-height:1}
.plan__price small{font-family:var(--sans);font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--ink-3)}
.plan--featured .plan__price small{color:#8fa6cd}
.plan__sub{margin-top:.5rem;font-size:.92rem}
.plan .checks{margin:1.25rem 0 1.5rem}
.plan .btn{margin-top:auto}

/* ---------- calculator ---------- */
.calc{
  display:grid;gap:0;min-width:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)
}
@media (min-width:900px){.calc{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}}
.calc__in{padding:1.5rem;min-width:0}
/* The methodology note sits with the inputs, not the results: it explains how
   the figures are derived, and it closes the height gap that left ~160px of
   void at the foot of the white column. */
.calc__method{
  margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);
  font-size:var(--fs-meta);line-height:1.6;color:var(--ink-3);
}
@media (min-width:900px){.calc__in{display:flex;flex-direction:column}}
@media (min-width:768px){.calc__in{padding:2rem}}
.calc__out{padding:1.5rem;min-width:0;background:var(--navy);color:#c9d6ee;display:flex;flex-direction:column}
@media (min-width:768px){.calc__out{padding:2rem}}
.field{margin-bottom:1.15rem;min-width:0}
.field > label,.field > .field__label{display:block;margin-bottom:.45rem;font-size:var(--fs-meta);font-weight:700;color:var(--ink)}
.field__hint{margin-top:.4rem;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.5}
.input,select.input,textarea.input{
  width:100%;min-width:0;min-height:48px;padding:.7rem .85rem;
  background:var(--white);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font:400 1rem/1.5 var(--sans);transition:border-color .18s,box-shadow .18s;
}
textarea.input{min-height:120px;resize:vertical}
select.input{
  appearance:none;padding-right:2.4rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;
}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);outline:none}
.input::placeholder{color:#94a3b8}
.input-money{position:relative;min-width:0}
.input-money > span{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--ink-3);font-weight:700;font-size:.95rem;pointer-events:none}
.input-money .input{padding-left:2.1rem}

/* segmented control — wraps rather than forcing min-content width */
.seg{display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{
  flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:.55rem .7rem;text-align:center;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-size:.88rem;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:all .18s var(--ease);
}
.seg label:hover{border-color:var(--ink-3)}
.seg input:checked + label{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700}
.seg input:focus-visible + label{outline:3px solid var(--gold);outline-offset:2px}

.calc__verdict{padding:1rem 1.15rem;border-radius:var(--r);margin-bottom:1.25rem;border:1px solid transparent}
.calc__verdict--win{background:rgba(228,185,63,.13);border-color:rgba(228,185,63,.4)}
.calc__verdict--even{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
.calc__verdict b{display:block;font-family:var(--display);font-size:1.02rem;color:#fff;margin-bottom:.2rem}
.calc__verdict span{display:block;font-size:.88rem;line-height:1.55;color:#c9d6ee}
.calc__hero{margin-bottom:1.25rem}
.calc__hero .lbl{display:block;font-size:var(--fs-meta);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.calc__hero .amt{display:block;font-family:var(--display);font-weight:800;letter-spacing:-.03em;color:#fff;
  font-size:clamp(2.2rem,6vw,3.1rem);line-height:1.05;font-variant-numeric:tabular-nums}
.calc__hero .per{display:block;margin-top:.25rem;font-size:var(--fs-meta);color:#8fa6cd}
.calc__rows{display:grid;gap:0;margin-bottom:1.25rem;border-top:1px solid rgba(255,255,255,.14)}
.calc__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.1);min-width:0}
.calc__row dt{font-size:.88rem;color:#8fa6cd;min-width:0;flex:1 1 auto}
.calc__row dd{margin:0;flex:none;font-weight:700;font-size:.96rem;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc__row--accent dd{color:var(--gold)}
.calc__note{font-size:var(--fs-meta);line-height:1.6;color:#8fa6cd;margin-top:auto;padding-top:1rem}
.calc__out .btn{margin-top:1.25rem}

/* ---------- reviews ---------- */
.review{display:flex;flex-direction:column;min-width:0;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;height:100%}
.review__q{font-size:.98rem;font-style:italic;color:var(--ink-2);margin:.85rem 0 1.25rem}
.review__by{display:flex;align-items:center;gap:.75rem;margin-top:auto;min-width:0}
.avatar{width:42px;height:42px;flex:none;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:.95rem}
.review__by b{display:block;font-size:.9rem;color:var(--ink);font-family:var(--display)}
.review__by span{display:block;font-size:var(--fs-meta);color:var(--ink-3)}

/* ---------- logos / areas ---------- */
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{display:inline-flex;align-items:center;min-height:36px;padding:.35rem .8rem;border-radius:18px;
  background:var(--white);border:1px solid var(--line);font-size:var(--fs-meta);font-weight:600;color:var(--ink-2)}
.section--navy .pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#c9d6ee}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.15rem 0;min-height:56px;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:700;font-size:1.02rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-top:.42em;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .22s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--blue)}
.faq__a{padding:0 0 1.25rem;font-size:.96rem;max-width:70ch}

/* ---------- cta band ---------- */
.ctaband{position:relative;isolation:isolate;background:var(--navy);color:#fff;overflow:hidden}
.ctaband__bg{position:absolute;inset:0;z-index:-2}
.ctaband__bg img{width:100%;height:100%;object-fit:cover;opacity:.26}
.ctaband__veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(7,26,61,.93),rgba(12,37,85,.86))}
.ctaband__in{padding-block:3.25rem;text-align:center;display:flex;flex-direction:column;align-items:center}
@media (min-width:768px){.ctaband__in{padding-block:4.5rem}}
.ctaband h2{color:#fff;max-width:20ch;margin-inline:auto}
.ctaband p{color:#c9d6ee;max-width:52ch;margin:.9rem auto 1.75rem}
.ctaband .btn-row{justify-content:center}

/* ---------- forms ---------- */
.formcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem;min-width:0}
@media (min-width:768px){.formcard{padding:2rem}}
.formgrid{display:grid;gap:0 1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){.formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.formgrid .field--full{grid-column:1/-1}
.formnote{margin-top:1rem;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.6}
.formmsg{margin-top:1rem;padding:.9rem 1rem;border-radius:var(--r-sm);font-size:.92rem;display:none}
.formmsg[data-state="ok"]{display:block;background:var(--blue-soft);border:1px solid #b9cdfb;color:#12377f}
.formmsg[data-state="err"]{display:block;background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.field__err{display:none;margin-top:.35rem;font-size:var(--fs-meta);font-weight:600;color:#b91c1c}
.field.is-bad .input{border-color:#dc2626}
.field.is-bad .field__err{display:block}
fieldset{margin:0 0 1.15rem;padding:0;border:0;min-width:0}
legend{padding:0;margin-bottom:.45rem;font-size:var(--fs-meta);font-weight:700;color:var(--ink)}
.check-row{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.65rem;align-items:start;margin-bottom:.6rem;font-size:.9rem}
.check-row input{width:20px;height:20px;margin:.15rem 0 0;accent-color:var(--blue);flex:none}

/* contact panel */
.cpanel{background:var(--navy);color:#c9d6ee;border-radius:var(--r-lg);padding:1.5rem;min-width:0}
@media (min-width:768px){.cpanel{padding:2rem}}
.cpanel h3{color:#fff}
.cpanel__list{display:grid;gap:1rem;margin:1.25rem 0}
.cpanel__item{display:grid;grid-template-columns:38px minmax(0,1fr);gap:.85rem;align-items:start;min-width:0}
.cpanel__item .ico{width:38px;height:38px;border-radius:var(--r-sm);background:rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;color:var(--gold);flex:none}
.cpanel__item b{display:block;font-size:var(--fs-meta);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8fa6cd}
.cpanel__item a,.cpanel__item span{display:block;color:#fff;font-weight:600;font-size:.98rem;word-break:break-word}
.cpanel__item a:hover{color:var(--gold)}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#8fa6cd;padding-block:3rem 1.5rem}
@media (min-width:768px){.foot{padding-block:4rem 2rem}}
.foot__grid{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.foot__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.5rem}}
.foot h4{color:#fff;font-size:var(--fs-meta);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.foot ul{display:grid;gap:.6rem}
.foot a{color:#c9d6ee;font-size:.92rem}
.foot a:hover{color:var(--gold)}
.foot__about{font-size:.92rem;line-height:1.7;margin:1rem 0;max-width:38ch}
.foot__bar{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;font-size:var(--fs-meta)}
.foot__bar a{font-size:var(--fs-meta)}
.foot__legal{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}

/* ---------- whatsapp float ---------- */
.wa{
  position:fixed;right:calc(1rem + var(--sar));bottom:calc(1rem + var(--sab));z-index:150;
  display:inline-flex;align-items:center;gap:.6rem;
  min-height:56px;padding:.7rem 1.15rem .7rem .8rem;border-radius:28px;
  background:#25d366;color:#052e16;font-weight:800;font-size:.92rem;
  box-shadow:0 8px 26px rgba(0,0,0,.24);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.wa:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.3);color:#052e16}
.wa svg{flex:none}
.wa span{display:none}
@media (min-width:600px){.wa{right:calc(1.5rem + var(--sar));bottom:calc(1.5rem + var(--sab))}.wa span{display:inline}}
@media (max-width:599px){.wa{width:56px;padding:0;justify-content:center;border-radius:50%}}

/* ---------- reveal (fail-open: only active once JS boots) ---------- */
html.gsap-ready [data-reveal]{opacity:0}
html.gsap-ready [data-reveal="up"]{transform:translateY(26px)}
html.gsap-ready [data-reveal="fade"]{transform:none}
html.gsap-ready [data-reveal="left"]{transform:translateX(-24px)}
html.gsap-ready [data-reveal="right"]{transform:translateX(24px)}
html.gsap-ready [data-reveal="scale"]{transform:scale(.965)}
@media (prefers-reduced-motion:reduce){
  html.gsap-ready [data-reveal]{opacity:1!important;transform:none!important}
}

/* ---------- utility ---------- */
/* top stays 0: translateY(-110%) is 110% of the element's OWN height, so an
   offset top leaves it partly on screen — it was hanging 42px into the page.
   The inset is paid with padding instead, which the transform carries. */
.skip{position:fixed;left:0;top:0;z-index:400;background:var(--gold);color:var(--navy);
  padding:calc(.75rem + var(--sat)) 1.25rem .75rem calc(1.25rem + var(--sal));
  font-weight:700;border-radius:0 0 var(--r-sm) 0;
  transform:translateY(-110%);transition:transform .18s var(--ease)}
.skip:focus{transform:translateY(0)}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.center{text-align:center}

/* Small links in the footer bar and breadcrumbs measured 36x22 — under the
   24x24 pointer-target minimum. Padding rather than font-size keeps the visual
   weight while making the hit area legal. */
.foot__bar a,
.foot__legal a,
.crumbs a{display:inline-flex;align-items:center;min-height:26px;padding-block:.15rem}

/* ---------- touch targets ----------
   Measured at 360/390/430: the brand link rendered 166x30, breadcrumb "Home"
   36x27, arrow links 26px and contact-panel links 27px — all under the 44x44
   touch minimum. Height is added with padding and min-height so the visual
   weight of the type is untouched; the site stays small and light on mobile
   while the hit areas become legal. */
.brand{min-height:44px}
@media (max-width:1023px){
  .tlink{min-height:44px}
  .crumbs a{min-height:44px;padding-inline:.15rem}
  .cpanel__item a{min-height:44px}
  .foot ul a{min-height:44px}
  .foot ul{gap:.15rem}
  .foot__bar a,.foot__legal a{min-height:44px}
  .card .tlink{padding-top:1rem;min-height:44px}
}

/* "Safety" in the footer legal row measured 43x44 — one pixel short on width. */
.foot__legal a{min-width:44px;justify-content:center}

/* Uppercase eyebrows at 14px with .14em tracking wrap to two lines on a 360px
   phone, which strands the leading rule on line one. Ease the tracking and let
   the rule sit with the first line. */
@media (max-width:479px){
  .eyebrow{letter-spacing:.1em}
}

/* [hidden] must actually hide.
   The UA sheet's [hidden]{display:none} is specificity 0,1,0 — the same as
   .formgrid{display:grid} — so the later-declared class rule won and the
   calculator showed its petrol/wear fields in e-hailing mode and its
   waiting-time fields while the box was unchecked. Screenshots caught this;
   no assertion did. */
[hidden]{display:none!important}

/* Anchor jumps must clear the fixed nav, or #calculator lands under it. */
[id]{scroll-margin-top:calc(var(--nav-total) + 1rem)}

/* A required checkbox group shows its error the same way a required field does. */
fieldset.is-bad .field__err{display:block}

/* "View the Mobile App" — a distinct third action that must not compete with
   the primary CTA, so it reads as a quiet outlined pill rather than a button. */
.btn--applink{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.34);color:#fff;
}
.btn--applink:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.nav__app{display:none}
@media (min-width:1180px){
  .nav__app{display:inline-flex;margin-right:.5rem}
}