/* Adapted from the DredgeLog sample page. The hero shows the logging terminal, then plain ruled sections like a daily dredge log. */
:root{
  --navy:#0B2D5B; --blue:#0A6CC0; --btn:#0A6CC0; --cyan:#00AEEF; --sky:#6CC4F3; --sand:#A6A19A; --ink:#13202F; --muted:#56677B;
  --paper:#EEF2F7; --surface:#FFFFFF; --line:#D3DCE7; --soft:#F5F8FB;
  --run:#1D7F55; --run-bg:#E4F3EC; --stop:#C0272D; --stop-bg:#FBE9E9;
  --amber:#A86D00; --amber-bg:#FFF4D6; --focus:#2F6FE0; --onnavy:#FFFFFF; --navy-soft:#ffffff1f;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",Arial,sans-serif;
  --body:"Barlow","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --navy:#0A1A2E; --blue:#7FA2EE; --ink:#E5ECF4; --muted:#9AAABD;
  --paper:#0C1522; --surface:#142133; --line:#2B3C53; --soft:#1A2A3F;
  --run:#4CC28C; --run-bg:#123326; --stop:#FF6B6B; --stop-bg:#3A1717;
  --amber:#F2B636; --amber-bg:#352708; --focus:#8DB3FF; --onnavy:#FFFFFF; --navy-soft:#ffffff14; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --navy:#0A1A2E; --blue:#7FA2EE; --ink:#E5ECF4; --muted:#9AAABD;
  --paper:#0C1522; --surface:#142133; --line:#2B3C53; --soft:#1A2A3F;
  --run:#4CC28C; --run-bg:#123326; --stop:#FF6B6B; --stop-bg:#3A1717;
  --amber:#F2B636; --amber-bg:#352708; --focus:#8DB3FF; --onnavy:#FFFFFF; --navy-soft:#ffffff14; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 var(--body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1;text-wrap:balance}
h1{font-size:clamp(46px,7.4vw,88px);font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(34px,4.6vw,54px);font-weight:600}
h3{font-size:24px;font-weight:600}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.eyebrow{font:500 12.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:21px;max-width:54ch;color:var(--ink)}
.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 17px/1 var(--body);min-height:50px;padding:0 22px;border-radius:10px;border:1px solid var(--btn);background:var(--btn);color:#fff;text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.onnavy{background:#fff;color:#0B2D5B;border-color:#fff}
.btn.onnavy.ghost{background:transparent;color:#fff;border-color:#ffffff60}

/* Top bar: white in both themes, because the logo artwork has a white background */
header.top{background:#fff;border-bottom:1px solid #D3DCE7;position:sticky;top:0;z-index:5}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.mark{display:block;line-height:0}
.mark img{width:137px;height:48px;display:block}
nav.links{display:flex;gap:22px;font-size:15px}
nav.links a{color:#40526A;text-decoration:none}
nav.links a:hover{color:#0B2D5B}
@media (max-width:820px){nav.links{display:none}}
html{scroll-padding-top:72px}

/* Hero */
.hero{background:var(--navy);color:#fff;padding-block:40px 0;overflow:hidden}
.hero-grid{display:grid;gap:40px;align-items:end}
.hero .eyebrow{color:#ffffffaa}
.hero h1{margin-top:14px}
.hero .lede{color:#ffffffe0;margin-top:20px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;padding-bottom:40px;font-size:15px;color:#ffffffcc}
.facts span{display:inline-flex;align-items:center;gap:8px}
.facts i{width:8px;height:8px;border-radius:50%;background:var(--cyan);display:inline-block}
.devices{position:relative;display:flex;justify-content:center;align-items:flex-end;min-width:0}
@media (min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr}}

/* Sections */
section{padding-block:72px;border-bottom:1px solid var(--line)}
section.band{background:var(--surface)}
.head{display:grid;gap:14px;margin-bottom:36px;max-width:760px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:10px;align-content:start;min-width:0}
.band .steps li{background:var(--paper)}
.steps .n{font:700 15px/1 var(--mono);color:var(--muted)}
.steps .vis{border-radius:10px;padding:14px;font:700 24px/1 var(--display);text-align:center}
.vis.stop{background:var(--stop);color:#fff}
.vis.run{background:var(--run);color:#fff}
.vis.code{background:var(--soft);color:var(--ink);border:1px solid var(--line);font-size:17px;text-align:left;display:flex;gap:8px;align-items:center}
.vis.code b{font-family:var(--display)}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}

/* Head-office dashboard mock */
.dash{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;min-width:0}
.d-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--soft)}
.d-top b{font:600 20px/1 var(--display)}
.d-body{display:grid;gap:16px;padding:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:4px}
.kpi b{font:700 34px/1 var(--display);font-variant-numeric:tabular-nums}
.kpi span{font-size:14px;color:var(--muted)}
.kpi.hot b{color:var(--amber)}
.d-cols{display:grid;gap:16px}
@media (min-width:900px){.d-cols{grid-template-columns:1.2fr 1fr}}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--soft)}
tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:1px}
.dot.run{background:var(--run)} .dot.stop{background:var(--stop)}
.bars{display:grid;gap:10px;border:1px solid var(--line);border-radius:12px;padding:14px}
.bar{display:grid;grid-template-columns:120px 1fr 54px;gap:10px;align-items:center;font-size:14.5px}
.bar .tr{height:12px;background:var(--soft);border-radius:6px;overflow:hidden}
.bar .fl{display:block;height:100%;background:var(--blue)}
.bar .fl.ext{background:var(--amber)}
.bar .v{text-align:right;font-variant-numeric:tabular-nums}

/* Value calculator */
.calc{display:grid;gap:24px}
@media (min-width:880px){.calc{grid-template-columns:1fr 1fr;align-items:stretch}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;gap:20px;min-width:0}
.band .panel{background:var(--paper)}
.field{display:grid;gap:8px}
.field label{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.field output{font:600 20px/1 var(--display);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--blue);min-height:32px}
.result{background:var(--navy);color:#fff;border-radius:16px;padding:24px;display:grid;gap:16px;align-content:start}
.result .eyebrow{color:#ffffffaa}
.result .big{font:700 clamp(54px,8vw,84px)/1 var(--display);font-variant-numeric:tabular-nums}
.result .row{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ffffff2a;padding-top:10px;font-size:16px}
.result .row b{font-variant-numeric:tabular-nums}
.result .x{font:700 28px/1 var(--display);color:#4CC28C}
.fine{font-size:14px;color:var(--muted)}
.result .fine{color:#ffffffaa}

/* Time bar */
.tl{display:grid;gap:14px}
.track{position:relative;height:56px;border-radius:12px;background:var(--soft);border:1px solid var(--line);overflow:hidden}
.track .seg{position:absolute;top:0;bottom:0}
.track .ev{left:0;width:3%;background:var(--stop)}
.track .win{left:3%;width:72%;background:repeating-linear-gradient(135deg,var(--amber-bg) 0 10px,transparent 10px 20px)}
.track .lt{left:75%;right:0;background:var(--stop-bg)}
.track .lbl{position:absolute;top:50%;transform:translateY(-50%);font:600 14px/1.1 var(--body);padding:0 12px;white-space:nowrap}
.marks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;font-size:15px}
.marks div{display:grid;gap:4px;min-width:0}
.marks b{font:600 19px/1.1 var(--display)}
.marks .k{font:500 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.k.stop{color:var(--stop)} .k.amber{color:var(--amber)} .k.run{color:var(--run)}
@media (max-width:620px){.marks{grid-template-columns:1fr}.track .lbl.hide-sm{display:none}}

/* Lists */
.grid2{display:grid;gap:16px}
@media (min-width:760px){.grid2{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.grid3{grid-template-columns:repeat(3,1fr)}}
.item{border-top:2px solid var(--ink);padding-top:16px;display:grid;gap:8px;align-content:start;min-width:0}
.item p{color:var(--muted);font-size:16.5px}
.config{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.config div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;padding:14px 18px;border-top:1px solid var(--line);font-size:16px}
.config div:first-child{border-top:0}
.config dt{font-weight:600;margin:0}
.config dd{margin:0;color:var(--muted)}
@media (max-width:560px){.config div{grid-template-columns:1fr;gap:4px}}

/* DMS upgrade */
.up{display:grid;gap:24px;align-items:center}
@media (min-width:880px){.up{grid-template-columns:1fr 1fr}}
.feed{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:12px;min-width:0}
.feed .line{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;font-size:15px;border-top:1px solid var(--line);padding-top:10px}
.feed .line:first-of-type{border-top:0;padding-top:0}
.feed .line .tm{font:500 13px/1 var(--mono);color:var(--muted)}
.chip{font:600 12px/1 var(--body);padding:5px 9px;border-radius:6px;white-space:nowrap}
.chip.stop{background:var(--stop-bg);color:var(--stop)} .chip.run{background:var(--run-bg);color:var(--run)} .chip.amber{background:var(--amber-bg);color:var(--amber)}
.soon{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:6px;background:var(--amber-bg);color:var(--amber);justify-self:start}

/* Pricing */
.price{display:grid;gap:28px;align-items:end}
@media (min-width:860px){.price{grid-template-columns:1fr 1fr}}
.amount{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.amount b{font:700 clamp(70px,11vw,120px)/1 var(--display);color:var(--blue);font-variant-numeric:tabular-nums}
.amount span{font:500 13px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.inc{list-style:none;margin:0;padding:0}
.inc li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line);font-size:18px}
.inc li svg{flex:0 0 22px;width:22px;height:22px;margin-top:3px;color:var(--run)}

/* Contact */
.contact{background:var(--navy);color:#fff;border-bottom:0}
.contact .eyebrow{color:#ffffffaa}
.contact .lede{color:#ffffffe0;margin-top:16px}
.c-grid{display:grid;gap:28px;align-items:end}
@media (min-width:860px){.c-grid{grid-template-columns:1.2fr 1fr}}
.email{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.email code{font:500 17px/1 var(--mono);padding:14px 16px;border-radius:10px;background:var(--navy-soft);border:1px solid #ffffff40;color:#fff;user-select:all;overflow-wrap:anywhere}
.copied{font:13px var(--mono);color:#ffffffaa;min-width:8ch}
footer{background:var(--navy);color:#ffffff99;font-size:14px;padding-block:0 36px}
footer .wrap{border-top:1px solid #ffffff22;padding-top:20px}
@media (prefers-reduced-motion:no-preference){.bar .fl{transition:width .4s ease}}

/* Logging terminal mock: an 800x1280 portrait screen, drawn at 5:8 */
.terminal{margin:0;width:310px;max-width:100%;background:#05101d;border-radius:22px 22px 0 0;padding:14px 14px 0;box-shadow:0 30px 60px #00000055}
.terminal .screen{aspect-ratio:5/8;display:flex;flex-direction:column;background:#EEF2F7;color:#13202F;border-radius:8px 8px 0 0;overflow:hidden;font:12px/1.3 var(--body)}
.t-status{display:flex;justify-content:space-between;align-items:center;gap:6px;background:#0A3260;color:#fff;padding:9px 10px;font-size:10.5px}
.t-status b{font-size:12px}
.t-sync::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#4CC28C;margin-right:5px;vertical-align:1px}
.t-main{flex:1;display:flex;flex-direction:column;gap:7px;padding:8px}
.t-stopped{flex:1.9;background:#BC2C2A;color:#fff;border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4px}
.t-word{font:700 22px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.t-clock{font:700 50px/1 var(--display);font-variant-numeric:tabular-nums}
.t-since{font-size:11.5px;opacity:.95}
.t-resume{flex:.75;background:#0B7A0B;color:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;font:700 22px/1 var(--display);text-transform:uppercase}
.t-details{border:1px solid #1A6FD6;color:#1A6FD6;background:#fff;border-radius:6px;text-align:center;padding:7px 0}
.t-sum{display:flex;justify-content:space-between;background:#fff;border-radius:6px;padding:7px 8px;font-size:10.5px}
.t-flag{color:#A86D00;font-weight:600}
.t-nav{display:grid;grid-template-columns:repeat(5,1fr);background:#0A3260;color:#fff;font-size:10px;text-align:center}
.t-nav span{padding:11px 0}
.t-nav .on{background:#1A6FD6}

/* Replacements for the sample's inline styles, so the page needs no inline CSS */
.w100{width:100%}.w61{width:61%}.w37{width:37%}.w18{width:18%}
.l-win{left:4%}.l-lt{left:76%;color:var(--stop)}
.grid2.top{align-items:start}
.head.flush{margin-bottom:0}
.mt14{margin-top:14px}.mt10{margin-top:10px}
.amount{margin-top:22px}
.cta.tight{margin-top:6px}
.contact a{color:#fff}
.skip{position:absolute;left:-9999px;top:8px;z-index:10;background:#fff;color:#0B2D5B;padding:10px 14px;border-radius:8px}
.skip:focus{left:8px}