/* Movemetric — shared stylesheet
   Colors, type and the wordmark are the ones already in use on the PETE 345
   course, so the front of the site and the course read as one thing. Dark
   sections and paper sections alternate the way they do on that course too,
   and each product carries one accent color instead of the whole site
   sharing a single green. No glass cards, no glow, no gradients. */

:root{
  --navy:#080E1A;
  --navy2:#0D1628;
  --card:#0F1B30;
  --card-2:#122040;
  --green:#22C55E;
  --teal:#06B6D4;
  --orange:#F97316;
  --purple:#A78BFA;
  --gold:#E6B84B;
  --white:#F1F7FF;
  --muted:#8297B6;
  --muted-2:#5C7196;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.18);

  /* paper: the light sections, matched to PETE 345's orientation/course-map bands */
  --paper:#F2EFE7;
  --paper-2:#E9E4D8;
  --ink:#17283B;
  --ink-muted:#6B6A62;
  --ink-line:rgba(23,40,59,.13);

  --font:"DM Sans",system-ui,-apple-system,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1180px;
  --gutter:clamp(20px,5vw,56px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--navy);color:var(--white);
  font-family:var(--font);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
::selection{background:rgba(34,197,94,.22);color:var(--white)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- wordmark, as used on the course ---------- */
.mm-brand{display:inline-flex;align-items:center;gap:9px;font-size:18px;letter-spacing:-.04em;font-weight:500}
.mm-brand b{color:var(--green);font-weight:500}
.mm-dot{width:22px;height:22px;border:5px solid var(--green);border-radius:50%;position:relative;flex:none}
.mm-dot::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--teal);right:-8px;top:-6px}
.page-tag{border-left:1px solid var(--line);padding-left:20px;margin-left:8px;display:flex;flex-direction:column}
.page-tag span{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--green);font-weight:500}
.page-tag strong{font-size:12px;font-weight:500;letter-spacing:.01em}

/* ---------- type ---------- */
.label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
h1{font-family:var(--serif);font-size:clamp(2.4rem,5.4vw,4rem);font-weight:400;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
h1 em{font-style:normal;color:var(--green)}
h2{font-family:var(--serif);font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:400;line-height:1.15;letter-spacing:-.015em}
h3{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
p{color:var(--muted);max-width:68ch}
strong{color:var(--white);font-weight:700}
.lead{font-size:clamp(1rem,1.5vw,1.14rem);color:var(--muted);max-width:56ch}
code{font-family:var(--mono);font-size:.86em;color:var(--white)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:100;background:rgba(8,14,26,.96);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:70px}
.head-left{display:flex;align-items:center}
.nav-links{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.nav-links a{font-size:12px;font-weight:700;color:var(--muted);padding-block:6px;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a.here{color:var(--white);border-bottom-color:var(--green)}
@media(max-width:700px){
  .site-head .wrap{flex-direction:column;align-items:flex-start;gap:10px;padding-block:14px}
  .nav-links{gap:18px}
}

/* ---------- sections ---------- */
.band{border-bottom:1px solid var(--line)}
.band > .wrap{padding-block:clamp(46px,7vw,82px)}
.band-head{padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:32px}
.band-head .label{display:block;margin-bottom:10px}
hr{border:0;border-top:1px solid var(--line);margin-block:40px}

/* paper (light) section variant, matched to PETE 345's own light bands */
.band-paper{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--ink-line)}
.band-paper h2,.band-paper h3{color:var(--ink)}
.band-paper p{color:#4b4a44}
.band-paper .label{color:var(--ink-muted)}
.band-paper .band-head{border-bottom-color:var(--ink-line)}
.band-paper .lead{color:#4b4a44}

/* a single strong statement, full-bleed, no border anywhere near it */
.strip{background:var(--green);color:#06210F}
.strip .wrap{padding-block:clamp(34px,5vw,52px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.strip p{color:#06210F;max-width:none;font-size:1.02rem}
.strip strong{color:#06210F}
.strip a{font-weight:700;border-bottom:2px solid rgba(6,33,15,.4);white-space:nowrap}
.strip a:hover{border-bottom-color:#06210F}

/* ---------- hero ---------- */
.hero > .wrap{
  padding-block:clamp(48px,8vw,92px);
  max-width:760px;
}
.hero .label{display:block;margin-bottom:20px}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:700;letter-spacing:.01em;
  padding:12px 20px;border:1px solid var(--line-2);color:var(--white);
  transition:border-color .15s,background .15s,color .15s;
}
.btn:hover{border-color:var(--green);color:var(--green)}
.btn-primary{background:var(--green);border-color:var(--green);color:#06210F}
.btn-primary:hover{background:#1FB356;border-color:#1FB356;color:#06210F}

/* ---------- product rows (on paper) ---------- */
.row{
  display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,2.1fr) 160px 40px;
  gap:24px;align-items:start;padding-block:28px;border-bottom:1px solid var(--ink-line);
  border-left:3px solid transparent;padding-left:22px;margin-left:-22px;
  transition:border-color .15s,background .15s;
}
.row:hover{background:rgba(23,40,59,.035)}
.row.acc-teal{border-left-color:var(--teal)}
.row.acc-orange{border-left-color:var(--orange)}
.row.acc-green{border-left-color:var(--green)}
.row.acc-purple{border-left-color:var(--purple)}
.row .rname{display:flex;flex-direction:column;gap:5px}
.row .rname h3{color:var(--ink)}
.row .plat{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.row p{font-size:.95rem;margin-bottom:10px;color:#4b4a44}
.row ul{list-style:none;display:flex;flex-wrap:wrap;gap:5px 14px}
.row li{font-family:var(--mono);font-size:.68rem;color:var(--ink-muted);letter-spacing:.03em}
.row li::before{content:"+ ";color:#b9b5a8}
.row .arrow{justify-self:end;align-self:center;color:var(--ink-muted);font-size:1.05rem}
.row:hover .arrow{color:var(--ink)}
.status{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap}
.status.live{color:#1E8A47}
.status.soon{color:#9A6B1E}
@media(max-width:820px){
  .row{grid-template-columns:1fr;gap:12px;padding-block:22px}
  .row .arrow{display:none}
}

/* ---------- numbered approach list (no boxes, colored numerals) ---------- */
.numbered{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(28px,4vw,44px)}
.numbered > div{border-top:2px solid var(--line-2);padding-top:18px}
.numbered .num{font-family:var(--serif);font-size:1.4rem;color:var(--muted-2);display:block;margin-bottom:12px}
.numbered h3{margin-bottom:10px}
.numbered p{font-size:.94rem}
.numbered > div:nth-child(1){border-top-color:var(--teal)}
.numbered > div:nth-child(2){border-top-color:var(--orange)}
.numbered > div:nth-child(3){border-top-color:var(--purple)}

/* ---------- screenshots (used on document pages only now) ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.shot{border:1px solid var(--line);background:var(--card)}
.shot img{width:100%;height:auto;border-bottom:1px solid var(--line)}
.shot figcaption{padding:13px 16px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.shot figcaption b{display:block;font-family:var(--font);font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--white);margin-bottom:4px;font-weight:700}

/* ---------- column grid (tools.html) ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cols > div{background:var(--navy);padding:26px 24px}
.cols h3{margin-bottom:10px}
.cols p{font-size:.94rem}
.cols .label{display:block;margin-bottom:14px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,48px)}
.contact-box{padding-top:20px;border-top:2px solid var(--ink-line)}
.contact-box a.mail{font-family:var(--mono);font-size:1rem;color:#1E8A47;word-break:break-all}
.contact-box ul{list-style:none;margin-top:16px;display:grid;gap:9px}
.contact-box li{font-size:.92rem;color:#4b4a44;padding-left:17px;position:relative}
.contact-box li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:#b9b5a8}
@media(max-width:720px){.contact{grid-template-columns:1fr}}

/* ---------- document pages ---------- */
.page{max-width:840px;margin:0 auto;padding-inline:var(--gutter);padding-block:clamp(42px,6vw,70px) 80px}
.hero-eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green);display:inline-block;margin-bottom:16px}
.page .hero{margin-bottom:44px}
.page .hero > .wrap{padding-block:0;max-width:none}
.page .hero h1{font-size:clamp(2rem,3.8vw,2.7rem);margin-bottom:14px}
.updated{font-family:var(--mono);font-size:.72rem;color:var(--muted-2);margin-bottom:16px}
.toc{border:1px solid var(--line);background:var(--card);padding:22px 24px;margin-bottom:46px}
.toc h2{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:7px}
.toc li{counter-increment:toc;font-size:.94rem}
.toc li::before{content:counter(toc,decimal-leading-zero);font-family:var(--mono);font-size:.7rem;color:var(--muted-2);margin-right:12px}
.toc a{color:var(--muted)}
.toc a:hover{color:var(--green)}

.section{margin-bottom:44px;scroll-margin-top:90px}
.section-header{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.section-num{font-family:var(--mono);font-size:.7rem;color:var(--muted-2);letter-spacing:.08em}
.section h2{font-size:1.4rem}
.section p{margin-bottom:14px}
.section ul{list-style:none;display:grid;gap:9px;margin-bottom:16px}
.section ul li{font-size:.95rem;color:var(--muted);padding-left:18px;position:relative}
.section ul li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--line-2)}
.section a{color:var(--green);border-bottom:1px solid rgba(34,197,94,.32)}
.section a:hover{border-bottom-color:var(--green)}

.tool-grid{display:grid;gap:20px;margin-block:8px 20px}
.tool-card{border:1px solid var(--line);background:var(--card);padding:24px}
.tool-card-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.tool-dot{width:7px;height:7px;border-radius:50%;flex:none}
.tool-tag{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.tool-card p{font-size:.93rem}

.callout{border-left:2px solid var(--green);background:rgba(34,197,94,.08);padding:16px 20px;margin-block:18px}
.callout p{color:var(--white);font-size:.93rem;margin:0}
.callout-blue{border-left-color:var(--teal);background:rgba(6,182,212,.08)}
.contact-card{border:1px solid var(--line);background:var(--card);padding:24px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--navy2)}
.site-foot .wrap{padding-block:46px 38px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;margin-bottom:38px}
.foot-grid h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:14px}
.foot-grid a{display:block;font-size:.9rem;color:var(--muted);margin-bottom:9px}
.foot-grid a:hover{color:var(--white)}
.foot-grid .about p{font-size:.9rem;max-width:32ch;margin-top:14px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px}
.foot-bottom span,.foot-bottom a{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted-2)}
.foot-bottom a:hover{color:var(--white)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}