/* New sections of the reordered page: fact strip, told-first, apps, how. */

/* --- fact strip under the hero ---------------------------------- */
.facts{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--ground)}
.facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.facts-in li{
  position:relative;
  padding:1.15rem var(--pad) 1.2rem calc(var(--pad) + 1.15rem);letter-spacing:-.01em;
  display:grid;gap:.18rem;align-content:start;border-left:1px solid var(--line-soft);
}
.facts-in li:first-child{border-left:0}
.facts-in li::before{
  content:"";position:absolute;left:var(--pad);top:1.62rem;
  width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}
.facts-in li b{font-size:.98rem;font-weight:600;color:var(--ink)}
.facts-in li span{font-size:.86rem;line-height:1.4;color:var(--muted)}
@media (max-width:900px){
  .facts-in{grid-template-columns:1fr 1fr}
  .facts-in li{border-left:0;border-top:1px solid var(--line-soft);padding-block:.9rem}
  .facts-in li:nth-child(-n+2){border-top:0}
}
@media (max-width:520px){.facts-in{grid-template-columns:1fr}.facts-in li:nth-child(2){border-top:1px solid var(--line-soft)}}

/* --- scroll reveal (shared) ------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* --- told first ------------------------------------------------- */
.told-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.told-text .lede{margin-top:1.1rem}
.told-points{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2rem;margin-top:2.4rem}
.told-points h4{margin-bottom:.35rem}
.told-points p{color:var(--ink-2);font-size:.98rem;line-height:1.5}
/* The phone shows the app's own notification list; the push banners that
   arrived before it float in front of the device. */
.told-visual{position:relative;min-height:600px;display:flex;align-items:center;justify-content:center}
.told-visual .phone{--phone-w:258px}
.told-visual::before{
  content:"";position:absolute;inset:6% 2%;z-index:0;border-radius:50%;
  background:radial-gradient(closest-side, var(--accent-soft), transparent 72%);filter:blur(12px);
}
/* Centred on the device with an even overhang on both sides, so the banners
   read as sitting on the phone rather than sliding off it. The width is set
   so the card at the back of the stack, scaled to .91, comes out as wide as
   the 258px device. */
.ntf-stack{
  position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  bottom:9%;width:min(284px,92%);height:250px;perspective:900px;
}
.ntf{
  position:absolute;left:0;right:0;bottom:0;
  /* Opaque: the cards behind must not read through the front one. */
  background:var(--panel);
  border:1px solid var(--line);border-radius:20px;padding:.9rem 1.05rem .95rem;
  box-shadow:0 18px 40px -20px rgba(8,20,40,.55), 0 2px 6px rgba(8,20,40,.12);
  transform:translateY(var(--ntf-y,0)) scale(var(--ntf-s,1));opacity:var(--ntf-o,1);
  transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s ease;
  font-family:var(--app-sans);
}
.ntf p{font-size:.94rem;line-height:1.4;color:var(--ink);margin-top:.35rem}
.ntf__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.ntf__app{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted);font-weight:600}
.ntf__icon{width:18px;height:18px;border-radius:5px;flex:none;display:block}
.ntf__tag{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .5rem;border-radius:999px;color:#fff}
.ntf--crit .ntf__tag{background:var(--crit)}
.ntf--warn .ntf__tag{background:var(--warn)}
.ntf--info .ntf__tag{background:var(--accent)}
.ntf[data-pos="0"]{--ntf-y:0;--ntf-s:1;--ntf-o:1;z-index:3}
.ntf[data-pos="1"]{--ntf-y:-58px;--ntf-s:.955;--ntf-o:.94;z-index:2}
.ntf[data-pos="2"]{--ntf-y:-110px;--ntf-s:.91;--ntf-o:.86;z-index:1}
.ntf[data-pos="out"]{--ntf-y:120px;--ntf-s:1.02;--ntf-o:0;z-index:0}
@media (max-width:900px){
  .told-grid{grid-template-columns:1fr}
  .told-visual{min-height:330px;order:-1}
  /* No room for the device beside the banners on a phone, so the banners
     carry the section on their own. */
  .told-visual .phone{display:none}
  .ntf-stack{position:relative;left:auto;transform:none;bottom:auto;width:min(380px,100%);height:250px;margin:0 auto}
  .told-points{grid-template-columns:1fr}
}

/* --- ticks and store badges ------------------------------------- */
.ticks{display:grid;gap:.55rem;margin-top:1.4rem}
.ticks li{display:flex;gap:.65rem;align-items:flex-start;color:var(--ink-2);font-size:.98rem}
/* The tick is masked, not tinted in the file, so it follows --accent
   wherever the section changes it (the night band turns it red). */
.ticks li::before{
  content:"";flex:none;width:19px;height:19px;margin-top:.1rem;
  background:var(--accent);
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px no-repeat;
}
.store-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.store{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  background:var(--ink);color:var(--ground);border-radius:12px;padding:.5rem .95rem .5rem .8rem;
  transition:transform .18s ease,opacity .18s ease;
}
.store:hover{transform:translateY(-1px);opacity:.92}
.store svg{width:24px;height:24px;fill:currentColor}
.store span{display:flex;flex-direction:column;line-height:1.1;font-weight:600;font-size:1rem;letter-spacing:-.01em}
.store small{font-size:.6rem;font-weight:500;letter-spacing:.04em;opacity:.8}
.store-row+.small{margin-top:.6rem}

/* --- apps ------------------------------------------------------- */
.apps-mobile{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5rem);align-items:center;margin-top:1rem}
.apps-mobile__text h3,.apps-web__text h3{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.025em}
.apps-mobile__text .lede,.apps-web__text .lede{margin-top:.8rem}
.apps-mobile__phones{
  position:relative;min-height:680px;
  display:flex;justify-content:center;align-items:center;
  padding-block:2rem;
}
.apps-mobile__phones::before{
  content:"";position:absolute;inset:0;border-radius:var(--r-lg);
  background:var(--plate);
}
.phone-slot{position:relative;z-index:1}
.apps-mobile__phones .phone{--phone-w:244px}
.phone-slot--a{z-index:2;transform:translate(10%,-22px) scale(1.02)}
.phone-slot--b{z-index:1;transform:translate(-10%,26px) scale(.97)}
.apps-web{margin-top:clamp(4rem,8vw,6rem);display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
.apps-web__text{max-width:64ch}
.apps-fleet{margin-top:clamp(2.5rem,5vw,4rem);padding:clamp(1.5rem,3vw,2.4rem);border-radius:var(--r-lg);background:var(--panel-2);border:1px solid var(--line-soft)}
.apps-fleet h3{font-size:clamp(1.3rem,2vw,1.7rem)}
.apps-fleet .lede{margin-top:.6rem}
@media (max-width:1100px){
  .apps-mobile{grid-template-columns:1fr}
  .apps-mobile__phones{min-height:0}
  .apps-mobile__phones .phone{--phone-w:256px}
}
@media (max-width:620px){
  .apps-mobile__phones .phone{--phone-w:224px}
  .phone-slot--a{transform:translate(9%,-10px)}
  .phone-slot--b{transform:translate(-9%,18px)}
}
@media (max-width:460px){
  .apps-mobile__phones{padding-block:1.2rem}
  .apps-mobile__phones .phone{--phone-w:248px}
  .phone-slot--a{transform:none}
  .phone-slot--b{display:none}
}

/* --- how it works: three quiet columns -------------------------- */
.how3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;margin:2.6rem 0 2.4rem}
.how3__cap{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.how3 p:not(.how3__cap){color:var(--ink-2);line-height:1.55}
.how-foot{max-width:70ch;margin:2rem auto 0;text-align:center}
@media (max-width:820px){.how3{grid-template-columns:1fr;gap:1.6rem}}

/* --- hero hint -------------------------------------------------- */
.hero-sea__hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:26px;height:42px;border:2px solid color-mix(in srgb, var(--ink) 40%, transparent);border-radius:14px;z-index:2}
.hero-sea__hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--ink);animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-sea__hint span{animation:none}}

/* --- page chips over the browser mockup -------------------------- */
.apptour{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;
  margin:0 0 1.5rem;
}
.apptour button{
  appearance:none;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  padding:.44rem .9rem;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-2);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.apptour button:hover{border-color:var(--accent);color:var(--accent)}
.apptour button.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (max-width:760px){
  .apptour{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  }
  .apptour::-webkit-scrollbar{display:none}
  .apptour button{flex:none}
}

/* --- night mode band: dark in both themes, the way the helm is ---- */
.night{
  --panel:#141019;
  --panel-2:#0E0A11;
  --line:#2C1E22;
  --line-soft:#1D1418;
  --ink:#F4E9EA;
  --ink-2:#D8C3C5;
  --muted:#9A8285;
  --accent:#EF4444;
  --accent-hover:#F87171;
  --accent-soft:rgba(239,68,68,.12);
  background:
    radial-gradient(90% 70% at 22% 12%, rgba(178,34,34,.16) 0%, transparent 60%),
    radial-gradient(120% 100% at 80% 100%, #150A0D 0%, #08060A 60%);
  color:var(--ink);
  border-top:1px solid #1B1216;
  border-bottom:1px solid #1B1216;
}
.night-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.night-phone{display:flex;justify-content:center}
.night-phone .phone{--phone-w:268px}
.night h2{max-width:16ch}
.night .lede{margin-top:1rem;max-width:52ch}
.night .ticks{margin-top:1.6rem}
@media (max-width:900px){
  .night-grid{grid-template-columns:1fr;gap:2.2rem}
  .night-text{order:-1}
  .night h2{max-width:none}
  .night-phone .phone{--phone-w:240px}
}

/* --- logbook band: the chart plotter across the full width -------- */
.plotter{
  position:relative;isolation:isolate;overflow:hidden;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  min-height:min(560px,76vh);
  display:flex;align-items:center;
}
.plotter__chart{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.plotter::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,
    var(--ground) 0%,
    color-mix(in srgb,var(--ground) 88%,transparent) 32%,
    color-mix(in srgb,var(--ground) 32%,transparent) 62%,
    transparent 100%);
}
.plotter__in{position:relative;z-index:2;padding-block:clamp(3rem,7vw,5rem);max-width:none}
.plotter h2{max-width:14ch}
.plotter .lede{margin-top:1rem;max-width:46ch}
@media (max-width:900px){
  .plotter{min-height:0}
  .plotter::before{
    background:linear-gradient(to bottom,
      color-mix(in srgb,var(--ground) 92%,transparent) 0%,
      color-mix(in srgb,var(--ground) 80%,transparent) 52%,
      color-mix(in srgb,var(--ground) 62%,transparent) 100%);
  }
  .plotter h2{max-width:none}
}

/* --- core, up close: the photo with its ports called out ---------- */
.closeup{
  position:relative;margin:clamp(2rem,4vw,3rem) auto clamp(2rem,4vw,3rem);
  max-width:920px;padding:clamp(1rem,3vw,2.2rem);
  border-radius:var(--r-lg);border:1px solid var(--line-soft);background:var(--plate);
}
.closeup__frame{position:relative;max-width:700px;margin:0 auto}
.closeup img{display:block;width:100%;height:auto}
.closeup figcaption{margin-top:.8rem;text-align:center;color:var(--muted)}
.spot{
  position:absolute;left:var(--x);top:var(--y);
  display:flex;align-items:center;transform:translateY(-50%);
}
/* The dot must sit on the port, so a left-hand callout hangs its whole row
   to the left of the anchor point. */
.spot--left{flex-direction:row-reverse;transform:translate(-100%,-50%)}
.spot__dot{
  position:relative;flex:none;width:11px;height:11px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent);
}
.spot__label{
  position:relative;white-space:nowrap;
  font-size:.78rem;font-weight:600;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:.32rem .7rem;box-shadow:var(--shadow-soft);
  margin-left:52px;
}
.spot--left .spot__label{margin-left:0;margin-right:52px}
.spot__label::before{
  content:"";position:absolute;top:50%;right:100%;width:52px;height:1px;
  background:linear-gradient(to left,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent));
}
.spot--left .spot__label::before{right:auto;left:100%;background:linear-gradient(to right,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent))}
@media (prefers-reduced-motion:no-preference){
  .spot__dot::after{
    content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);
    animation:spotPing 3s cubic-bezier(.2,.7,.2,1) infinite;
  }
  .spot:nth-of-type(2) .spot__dot::after{animation-delay:.4s}
  .spot:nth-of-type(3) .spot__dot::after{animation-delay:.8s}
  .spot:nth-of-type(4) .spot__dot::after{animation-delay:1.2s}
  .spot:nth-of-type(5) .spot__dot::after{animation-delay:1.6s}
}
@keyframes spotPing{
  0%{transform:scale(1);opacity:.85}
  70%,100%{transform:scale(2.1);opacity:0}
}
/* On a narrow screen the callouts would cover the module, so they become
   a plain list under the photo. */
@media (max-width:860px){
  .closeup__frame{display:flex;flex-direction:column;gap:.5rem}
  .spot{position:static;transform:none;flex-direction:row;align-items:center;gap:.6rem}
  .spot__label{margin:0;white-space:normal;border:0;background:none;box-shadow:none;padding:0;font-weight:500;color:var(--ink-2)}
  .spot__label::before{display:none}
  .closeup figcaption{text-align:left;margin-top:.8rem}
  .closeup img{margin-bottom:.6rem}
}

/* --- "this is live, touch it" hint under the mockups ---------------- */
.try-hint{
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  margin:0 0 1rem;font-size:.86rem;font-weight:500;color:var(--muted);
}
.try-hint::before{
  content:"";width:16px;height:16px;flex:none;background:var(--accent);
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 3.5a1.6 1.6 0 0 1 3.2 0v6.2l1-.2a3 3 0 0 1 3.6 2.2l.7 3a4.6 4.6 0 0 1-3.4 5.5l-2 .5a4.6 4.6 0 0 1-5.3-2.6L5 14.2a1.6 1.6 0 0 1 2.8-1.5l1.2 2z'/></svg>") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 3.5a1.6 1.6 0 0 1 3.2 0v6.2l1-.2a3 3 0 0 1 3.6 2.2l.7 3a4.6 4.6 0 0 1-3.4 5.5l-2 .5a4.6 4.6 0 0 1-5.3-2.6L5 14.2a1.6 1.6 0 0 1 2.8-1.5l1.2 2z'/></svg>") center/contain no-repeat;
}
.apps-mobile__text .try-hint{justify-content:flex-start;margin-top:1.4rem}