/* ==========================================================================
   COE Software — coesoftware.com
   One stylesheet. No framework, no build step, no external requests.
   Colours and type come from the COE brand kit — change them here first,
   then everywhere else follows.
   ========================================================================== */

@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat.ttf') format('truetype');
  font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight:600 700 800;font-display:swap;font-style:normal}

:root{
  /* brand — these do not change between themes */
  --blue:#0143A3; --blue-l:#1B6BD6; --blue-d:#00306F;
  --amber:#FFA51F; --cyan:#0093A6; --night:#0E1218;

  /* themed surfaces */
  --page:#fff;            /* page background */
  --surface:#fff;         /* cards, spec cells, boxes on the page */
  --cloud:#F7F9FC;        /* subtle fill inside those boxes */
  --line:#E4E9F0;         /* every hairline */
  --hdr-bg:rgba(255,255,255,.94);
  --footer-bg:var(--night);
  --tint:#E8EFFA;

  /* themed text */
  --ink:#1D2226; --slate:#5A646E; --faint:#6B7785;
  --link:#0143A3;         /* link and accent text */
  --on-brand:#fff;        /* text sitting on --blue */

  /* semantic */
  --ok:#0E8A4F; --warn:#B4231B;
  /* type */
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --body:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  /* shape */
  --r:12px; --r-sm:8px;
  --wrap:1100px;
  --pad:60px;
}

/* ----------------------------------------------------------------- dark
   Flipped by the header toggle. These tokens are the only things that change;
   every rule below reads from them. */
html[data-theme="dark"]{
  --page:#0F1318;
  --surface:#171C23;
  --cloud:#1C222A;
  --line:#2B333D;
  --hdr-bg:rgba(15,19,24,.9);
  --footer-bg:#0A0D11;
  --tint:#16202E;

  --ink:#E7ECF2;
  --slate:#A2AEBA;
  --faint:#8694A3;
  --link:#7FB0F7;

  --ok:#4CC38A; --warn:#F0736A; --cyan:#35D6E6;
  color-scheme:dark;
}
html{color-scheme:light}
html[data-theme="dark"] img{border-color:var(--line)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);
  font-size:15.5px;line-height:1.62;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;
  line-height:1.18;margin:0}
p{margin:0}
code{font-family:var(--mono);font-size:.9em;background:var(--cloud);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}
:focus-visible{outline:2px solid var(--blue-l);outline-offset:2px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em}

/* ---------------------------------------------------------------- header */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
.hdr .in{display:flex;align-items:center;gap:28px;height:62px}
.hdr .logo img{height:28px;width:auto}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{font-family:var(--sans);font-weight:600;font-size:13.5px;color:var(--ink);
  letter-spacing:.005em}
.nav a:hover,.nav a.on{color:var(--link);text-decoration:none}
.burger{display:none;width:38px;height:38px;border-radius:7px;
  place-items:center}
.burger svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;
  stroke-linecap:round}
.mnav{display:none;border-top:1px solid var(--line)}
.mnav.on{display:block}
.mnav a{display:block;padding:13px 24px;font-family:var(--sans);font-weight:600;
  font-size:14.5px;color:var(--ink);border-bottom:1px solid var(--line)}
@media(max-width:760px){.nav{display:none}.burger{display:grid}
  .themebtn{margin-left:auto}}

/* -------------------------------------------------------- theme toggle */
.themebtn{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border-radius:8px;border:1px solid var(--line);background:var(--surface);
  color:var(--slate);transition:color .15s,border-color .15s,background-color .15s}
.themebtn:hover{color:var(--ink);border-color:var(--slate)}
.themebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.themebtn .i-moon{display:none}
html[data-theme="dark"] .themebtn .i-moon{display:block}
html[data-theme="dark"] .themebtn .i-sun{display:none}
@media(max-width:760px){.hdr .in{gap:12px}}

/* --------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.2;
  padding:11px 20px;border-radius:var(--r-sm);border:1px solid transparent;
  transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{text-decoration:none}
.btn-p{background:var(--blue);color:var(--on-brand)}
.btn-p:hover{background:var(--blue-l)}
.btn-g{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-g:hover{border-color:var(--ink)}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------- sections */
section{padding:var(--pad) 0;border-bottom:1px solid var(--line)}
section.last{border-bottom:0}
.kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px}
h2.sec{font-size:clamp(21px,2.5vw,27px);margin-bottom:10px}
.lede{font-size:15.5px;color:var(--slate);max-width:62ch;margin-bottom:32px}
.lede a{text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------------ hero */
.hero{padding:56px 0 48px;border-bottom:1px solid var(--line)}
.hero .mark{width:52px;height:52px;margin-bottom:22px}
.hero h1{font-size:clamp(29px,4.2vw,43px);max-width:22ch;margin-bottom:16px}
.hero h1 em{font-style:normal;color:var(--link)}
.hero .lede{margin-bottom:26px}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px 22px;padding-top:22px;
  border-top:1px solid var(--line);color:var(--slate);font-family:var(--mono);
  font-size:12.5px}
.hero .facts span{display:flex;align-items:center;gap:7px}
.hero .facts i{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:0 0 auto}

/* ----------------------------------------------------------------- cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,320px));
  gap:18px;justify-content:start}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .15s}
.card:hover{border-color:#B7C5D8}
.card .thumb{aspect-ratio:4/3;background:var(--cloud);border-bottom:1px solid var(--line);
  overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .body{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1;gap:9px}
.card h3{font-size:16px}
.card h3 a{color:inherit}
.card .blurb{font-size:13.5px;color:var(--slate);flex:1}
.card .foot{margin-top:2px}

/* --------------------------------------------------------- status + tags */
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:0 0 auto}
.status.live i{background:var(--ok)}
.status.cert i{background:var(--amber)}
.status.queue i{background:var(--cyan)}
.status.soon i{background:var(--cyan)}

/* ---------------------------------------------------------------- listing */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line)}
.row img{width:64px;height:64px;border-radius:10px;object-fit:cover}
.row h3{font-size:16.5px;margin-bottom:3px}
.row p{font-size:13.5px;color:var(--slate)}
.row .meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  text-align:right}
.row .specs{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
@media(max-width:640px){
  .row{grid-template-columns:52px 1fr;gap:14px}
  .row img{width:52px;height:52px}
  .row .meta{align-items:flex-start;grid-column:2;text-align:left}
}

/* --------------------------------------------------------------- dev log */
.log{border-top:1px solid var(--line)}
.entry{display:grid;grid-template-columns:104px 1fr;gap:20px;padding:16px 0;
  border-bottom:1px solid var(--line)}
.entry time{font-family:var(--mono);font-size:12px;color:var(--faint);
  padding-top:3px}
.entry h3{font-size:15.5px;margin-bottom:4px}
.entry p{font-size:14px;color:var(--slate);max-width:70ch}
@media(max-width:600px){.entry{grid-template-columns:1fr;gap:6px}}

/* ----------------------------------------------------------------- about */
.about{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:start}
@media(max-width:820px){.about{grid-template-columns:1fr;gap:30px}}
.about p{font-size:15.5px;color:var(--slate);margin-bottom:15px;max-width:66ch}
.about p:last-child{margin-bottom:0}
.about strong{color:var(--ink);font-weight:600}
aside.facts{background:var(--cloud);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px}
aside.facts dl{margin:0;display:grid;gap:14px}
aside.facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:3px}
aside.facts dd{margin:0;font-size:14px}
aside.facts a{text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------------- faq */
.faq{max-width:760px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{padding:16px 40px 16px 0;font-family:var(--sans);font-weight:600;
  font-size:15.5px;cursor:pointer;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  margin-top:-7px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .18s}
details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
details .ans{padding:0 40px 18px 0;font-size:14.5px;color:var(--slate)}

/* ---------------------------------------------------------- product page */
.gal.empty-gal .main{aspect-ratio:16/9}
.gal.empty-gal .main img{object-fit:cover}
.crumb{padding:18px 0 0;font-family:var(--mono);font-size:12px;color:var(--faint)}
.crumb a{color:var(--faint)}
.crumb a:hover{color:var(--link)}
.crumb span{margin:0 7px}
.pd{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:start;
  padding:14px 0 44px}
@media(max-width:900px){.pd{grid-template-columns:1fr;gap:30px}}
.gal .main{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--cloud);aspect-ratio:16/9}
.gal .main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:9px}
.thumbs button{padding:0;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;aspect-ratio:16/9;background:var(--cloud);transition:border-color .15s}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button:hover{border-color:#9FC0E8}
.thumbs button[aria-current="true"]{border-color:var(--blue)}
.pdinfo h1{font-size:clamp(24px,3.2vw,33px);margin:10px 0 12px}
.pdinfo .blurb{font-size:16px;color:var(--slate);margin-bottom:20px;max-width:50ch}
.buybox{border:1px solid var(--line);border-radius:var(--r);padding:20px;
  background:var(--cloud);margin-bottom:24px}
.buybox .pricechip{font-family:var(--sans);font-weight:700;font-size:22px;
  letter-spacing:-.02em;margin-bottom:12px}
.buybox .caveat{font-size:13px;color:var(--slate);background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:0 8px 8px 0;padding:11px 14px;margin-bottom:16px;line-height:1.6}
.buybox .note{font-size:13px;color:var(--slate);margin-bottom:16px}
.buybox .cta{display:flex;gap:9px;flex-wrap:wrap}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.plist li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
.plist svg{width:16px;height:16px;flex:0 0 auto;margin-top:3px;fill:none;
  stroke:var(--ok);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pspecs{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:8px}
@media(max-width:760px){.pspecs{grid-template-columns:repeat(2,1fr)}}
.pspecs div{padding:15px 17px;border-left:1px solid var(--line);background:var(--surface)}
.pspecs div:first-child{border-left:0}
.pspecs dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.pspecs dd{margin:0;font-size:14px}
.pdtwo{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding-top:8px}
@media(max-width:820px){.pdtwo{grid-template-columns:1fr;gap:26px}}
.sec-h{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px}
.pdtwo p{font-size:14.5px;color:var(--slate)}

/* ------------------------------------------------------------ legal page */
.legal{display:grid;grid-template-columns:206px 1fr;gap:48px;padding:26px 0 72px;
  align-items:start}
@media(max-width:860px){.legal{grid-template-columns:1fr;gap:22px}}
.ltoc{position:sticky;top:80px}
@media(max-width:860px){.ltoc{position:static}}
.ltoc a{display:block;padding:4px 0;font-size:14px;color:var(--slate)}
.ltoc a:hover{color:var(--link);text-decoration:none}
.lbody section{padding:0;border:0;margin-bottom:40px;scroll-margin-top:84px}
.lbody h2{font-size:23px;margin-bottom:12px}
.lbody h3{font-family:var(--sans);font-size:15.5px;margin:20px 0 7px}
.lbody p,.lbody li{color:var(--slate);font-size:14.8px}
.lbody p{margin-bottom:12px;max-width:72ch}
.lbody ul{margin:0 0 13px;padding-left:20px;max-width:70ch}
.lbody li{margin-bottom:7px}
.lbody .notice{background:var(--tint);border-left:3px solid var(--blue);
  border-radius:0 8px 8px 0;padding:14px 17px;font-size:13.5px;color:var(--ink);
  margin-bottom:20px}
.lbody .notice b{font-family:var(--sans)}

/* ---------------------------------------------------------------- footer */
footer{background:var(--footer-bg);color:#93A6BE;padding:52px 0 30px;font-size:14px}
footer .fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:760px){footer .fgrid{grid-template-columns:1fr;gap:28px}}
footer img{height:32px;width:auto;margin-bottom:15px}
footer h4{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin-bottom:14px}
footer a{color:#93A6BE;display:block;padding:3.5px 0}
footer a:hover{color:#fff}
footer .blurb{max-width:34ch;line-height:1.7}
footer .fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-top:22px;font-size:13px}
footer .fbot a{display:inline;padding:0}

/* -------------------------------------------------------------- notes */
.foot-note{font-family:var(--mono);font-size:11.5px;color:var(--faint);
  margin-top:16px;max-width:70ch;line-height:1.7}

/* ------------------------------------------------------------- utilities */
.empty{text-align:center;padding:64px 20px;color:var(--slate)}
.empty b{display:block;font-family:var(--sans);font-size:18px;color:var(--ink);
  margin-bottom:6px}
.rv{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

@media print{
  .hdr,footer .fgrid,.thumbs{display:none!important}
  body{color:#000;font-size:11pt}
  section{padding:14px 0;border:0}
}