/* Plate Cutting Solutions - shared styles.
   Layout: a shop-floor document. Ruled sections like a drawing sheet, mono spec labels,
   one dark "cutting bed" panel per page. */
:root{
  --paper:#F4F5F2; --paper-2:#E9ECE8; --card:#FFFFFF;
  --ink:#141B23; --ink-2:#46525E; --rule:#C9CFCB;
  --accent:#1F5FD6; --accent-ink:#FFFFFF; --kerf:#C9701E;
  --bed:#161E28; --bed-ink:#E8EDF2; --bed-dim:#9DAEC0; --bed-rule:#33414F;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --max:1180px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F141A; --paper-2:#151C24; --card:#18212B;
  --ink:#E8EDF2; --ink-2:#A3B1BF; --rule:#2B3743;
  --accent:#6E9CF0; --accent-ink:#0B1220; --kerf:#E59A4B; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0F141A; --paper-2:#151C24; --card:#18212B;
  --ink:#E8EDF2; --ink-2:#A3B1BF; --rule:#2B3743;
  --accent:#6E9CF0; --accent-ink:#0B1220; --kerf:#E59A4B; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:3px solid var(--kerf);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);font-stretch:88%;line-height:1.05;letter-spacing:-.005em;text-wrap:balance;margin:0}
h1{font-size:clamp(28px,3.4vw,44px);font-weight:750;line-height:1.1}
h2{font-size:clamp(22px,2.3vw,30px);font-weight:700;line-height:1.15}
h3{font-size:17.5px;font-weight:700;font-stretch:95%;line-height:1.25}
p{margin:0;max-width:62ch}
.label{font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:6px;font:600 15px var(--body);text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:hover{filter:brightness(1.08)}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--rule)}
.nav .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{min-width:0;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 17px var(--display);font-stretch:90%}
.brand svg{flex:none}
.links{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.links a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap;padding-block:6px;border-bottom:2px solid transparent}
.links a:hover{color:var(--ink)}
.links a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--kerf)}
.nav-cta{display:flex;gap:10px;flex:none}
.nav-cta .btn{min-height:40px;padding:0 14px;font-size:14px}
.links-row{display:none}
@media (max-width:1020px){
  .bar .links{display:none}
  .links-row{display:block;border-top:1px solid var(--rule);overflow-x:auto}
  .links-row .links{padding-block:8px}
}
@media (max-width:520px){.nav-cta .btn:not(.primary){display:none}.brand{font-size:16px}}

/* page head */
.page-head{padding-block:clamp(40px,5vw,72px) clamp(24px,3vw,40px)}
.page-head .lede{font-size:17.5px;color:var(--ink-2);margin-top:20px}
.page-head .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.page-head h1 em{font-style:normal;color:var(--accent)}

/* dark bed panel */
.bed{background:var(--bed);color:var(--bed-ink);border-radius:10px;padding:clamp(14px,2.4vw,26px)}
.bed-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font:500 12.5px/1.4 var(--mono);color:var(--bed-dim);letter-spacing:.05em;margin-bottom:14px}
.bed-head b{color:var(--bed-ink);font-weight:500}
.bed figure{margin:0;overflow:hidden;border-radius:4px}
.bed figcaption{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font:400 13px var(--mono);color:var(--bed-dim)}
.sw{display:inline-flex;align-items:center;gap:7px}
.sw i{width:11px;height:11px;border-radius:2px;display:inline-block}

/* proof strip */
.proof{border-block:1px solid var(--rule);margin-top:clamp(44px,6vw,76px)}
.proof .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.proof .wrap>div{padding:22px 18px;border-left:1px solid var(--rule)}
.proof .wrap>div:first-child{border-left:0;padding-left:0}
.proof strong{display:block;font:700 16px var(--display);font-stretch:92%}
.proof span{font-size:14px;color:var(--ink-2)}
@media (max-width:820px){.proof .wrap{grid-template-columns:1fr 1fr}.proof .wrap>div:nth-child(3){border-left:0;padding-left:0}.proof .wrap>div:nth-child(n+3){border-top:1px solid var(--rule)}}

section.block{padding-block:clamp(52px,7vw,88px)}
.head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,46px)}
.head p{color:var(--ink-2);font-size:16.5px}

/* workflow */
.flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--rule);border-radius:8px;background:var(--card);overflow:hidden;padding:0;margin:0}
.flow li{list-style:none;padding:22px 18px;border-left:1px solid var(--rule);display:grid;gap:8px;align-content:start}
.flow li:first-child{border-left:0}
.flow .n{font:500 12px var(--mono);color:var(--kerf);letter-spacing:.1em}
.flow b{font:700 16px var(--display);font-stretch:92%}
.flow span{font-size:14px;color:var(--ink-2);line-height:1.5}
@media (max-width:980px){.flow{grid-template-columns:repeat(3,minmax(0,1fr))}.flow li:nth-child(4){border-left:0}.flow li:nth-child(n+4){border-top:1px solid var(--rule)}}
@media (max-width:560px){.flow{grid-template-columns:1fr}.flow li{border-left:0;border-top:1px solid var(--rule)}.flow li:first-child{border-top:0}}

/* area cards on home */
.areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.area{display:grid;gap:12px;align-content:start;padding:26px;border:1px solid var(--rule);border-radius:8px;background:var(--card);text-decoration:none;color:var(--ink)}
.area:hover{border-color:var(--accent)}
.area p{color:var(--ink-2);font-size:15.5px}
.area .more{font:500 13px var(--mono);color:var(--accent);letter-spacing:.04em}
.area ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:15px;display:grid;gap:4px}
@media (max-width:760px){.areas{grid-template-columns:1fr}}

/* feature rows */
.feature{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--rule)}
.feature.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feature.flip .copy{order:2}
.feature.text{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.feature .copy{display:grid;gap:14px}
.feature .copy p{font-size:15.5px}
.feature .copy p{color:var(--ink-2)}
@media (max-width:880px){.feature,.feature.flip,.feature.text{grid-template-columns:1fr}.feature.flip .copy{order:0}}
.ticks{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:15px}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:14px;border-top:2px dashed var(--kerf)}
.shot{border:1px solid var(--rule);border-radius:8px;overflow:hidden;background:var(--card);box-shadow:0 18px 40px -24px rgba(20,27,35,.45)}
.shot.paper{background:#fff}
.shot-cap{font:400 12.5px var(--mono);color:var(--ink-2);padding:10px 14px;border-top:1px solid var(--rule);background:var(--card)}

/* spec list: label/value rows */
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.spec div{background:var(--card);padding:18px 20px;display:grid;gap:4px}
.spec b{font:600 15px var(--body)}
.spec span{font-size:14px;color:var(--ink-2)}
@media (max-width:620px){.spec{grid-template-columns:1fr}}

/* capability grid */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.cap{background:var(--card);padding:24px 22px;display:grid;gap:10px;align-content:start}
.cap p{font-size:15px;color:var(--ink-2)}
.cap .label{color:var(--kerf)}
@media (max-width:900px){.caps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.caps{grid-template-columns:1fr}}

/* integrations */
.ints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.int{border:1px solid var(--rule);border-radius:8px;padding:20px;background:var(--card);display:grid;gap:6px;align-content:start}
.int b{font:600 15.5px var(--body)}
.int span{font-size:14.5px;color:var(--ink-2)}
@media (max-width:900px){.ints{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ints{grid-template-columns:1fr}}

/* phone-style clock mock (workforce page) */
.phone{max-width:320px;margin-inline:auto;background:var(--bed);color:var(--bed-ink);border-radius:28px;padding:22px 20px 26px;display:grid;gap:14px;border:6px solid #2A3644}
.phone .top{display:flex;justify-content:space-between;font:400 12px var(--mono);color:var(--bed-dim)}
.phone .who{font:700 19px var(--display);font-stretch:90%}
.phone .site{font-size:14px;color:var(--bed-dim)}
.phone .state{display:flex;align-items:center;gap:8px;font:500 13px var(--mono);color:#86D6A0}
.phone .state i{width:9px;height:9px;border-radius:50%;background:#4CC37A}
.phone .big{background:#2F6FE0;color:#fff;border-radius:14px;padding:18px;text-align:center;font:700 20px var(--display)}
.phone table{width:100%;border-collapse:collapse;font:400 13px var(--mono);color:var(--bed-dim)}
.phone td{padding:6px 0;border-top:1px solid var(--bed-rule)}
.phone td:last-child{text-align:right;color:var(--bed-ink);font-variant-numeric:tabular-nums}
.mock-note{text-align:center;font:400 12px var(--mono);color:var(--ink-2);margin-top:10px}

/* band + contact */
.band{background:var(--paper-2);border-block:1px solid var(--rule)}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;padding-block:clamp(56px,7vw,92px)}
@media (max-width:820px){.band .wrap{grid-template-columns:1fr}}
.cta{background:var(--bed);color:var(--bed-ink)}
.cta .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding-block:clamp(56px,7vw,92px)}
.cta p{color:var(--bed-dim);font-size:16.5px}
.cta .label{color:var(--bed-dim)}
.mailbox{border:1px solid var(--bed-rule);border-radius:8px;padding:22px;display:grid;gap:14px}
.mail{font:500 18px var(--mono);color:var(--bed-ink);user-select:all;word-break:break-all}
.cta .btn{border-color:#5A6B7C;color:var(--bed-ink)}
.cta .btn.primary{background:#6E9CF0;border-color:#6E9CF0;color:#0B1220}
.copy-msg{font:400 13px var(--mono);color:var(--bed-dim);min-height:1em}
@media (max-width:820px){.cta .wrap{grid-template-columns:1fr}}

footer{padding-block:34px;border-top:1px solid var(--rule)}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:24px;font-size:14.5px;color:var(--ink-2)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .label{margin-bottom:8px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr 1fr}}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags span{font:500 12.5px var(--mono);padding:6px 10px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-2);background:var(--card)}
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pain{border:1px solid var(--rule);border-radius:8px;background:var(--card);padding:24px;display:grid;gap:10px;align-content:start}
.pain .q{font:600 16px/1.35 var(--body);color:var(--ink);text-decoration:line-through;text-decoration-color:var(--kerf);text-decoration-thickness:2px}
.pain .ans{color:var(--accent);margin-top:6px}
.pain p{color:var(--ink-2);font-size:15px}
@media (max-width:860px){.pains{grid-template-columns:1fr}}
.cap{color:var(--ink);text-decoration:none}
a.cap:hover h3{color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{font:500 14px var(--body);min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--ink-2);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.int .label{color:var(--kerf)}
.jump{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px}
.jump a{font:500 14px var(--mono);color:var(--accent);text-decoration:none}
.jump a:hover{text-decoration:underline}
[id]{scroll-margin-top:90px}
.mbar{display:none}
/* ---------- phone layout: swipeable rows, pictures first, dark hero, quick-contact bar ---------- */
@media (max-width:640px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .mbar{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bed);border-top:1px solid var(--bed-rule)}
  .mbar .btn{flex:1;justify-content:center;min-height:46px;padding:0 10px;font-size:14px}
  .mbar .btn.call{flex:0 0 auto;border-color:#5A6B7C;color:var(--bed-ink)}
  .page-head.hero{background:var(--bed);color:var(--bed-ink);padding-block:36px 32px;position:relative;overflow:hidden}
  .page-head.hero::before{content:"";position:absolute;inset:auto -40px 18px -40px;border-top:2px dashed var(--kerf);opacity:.55;transform:rotate(-8deg)}
  .page-head.hero .label,.page-head.hero .lede{color:var(--bed-dim)}
  .page-head.hero h1 em{color:#8DB4FF}
  .page-head.hero .tags span{background:transparent;border-color:var(--bed-rule);color:var(--bed-dim)}
  .page-head.hero .btn:not(.primary){border-color:#5A6B7C;color:var(--bed-ink)}
  .page-head.hero .btn.primary{background:#6E9CF0;border-color:#6E9CF0;color:#0B1220}
  .page-head.hero .bed{margin-inline:-6px;padding:12px;border:1px solid var(--bed-rule)}
  .page-head .lede{font-size:16px}
  .proof{margin-top:0}
  .proof .wrap{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0}
  .proof .wrap>div,.proof .wrap>div:first-child,.proof .wrap>div:nth-child(3){flex:0 0 70%;scroll-snap-align:start;border-top:0!important;border-left:1px solid var(--rule);padding:18px 16px}
  .proof .wrap{padding-inline:0}
  .proof .wrap>div:first-child{border-left:0;padding-left:16px}
  .pains,.caps,.ints,.flow{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:10px;background:none;border:0;border-radius:0}
  .pains>*,.caps>*,.ints>*,.flow>*{scroll-snap-align:start}
  .caps>.cap{border:1px solid var(--rule);border-radius:8px}
  .flow li,.flow li:first-child{border:1px solid var(--rule)!important;border-radius:8px;background:var(--card)}
  .flow .n{font-size:22px;font-family:var(--display);font-weight:800;letter-spacing:0}
  .head{margin-bottom:20px}
  section.block{padding-block:44px}
  .feature{padding-block:32px;gap:18px}
  .feature:not(.text)>div:last-child{order:-1}
  .feature.flip:not(.text) .copy{order:1}
  .shot{box-shadow:none}
  .spec{grid-template-columns:1fr 1fr}
  .spec div{padding:14px}
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}
  .chip{flex:none}
}
@media (max-width:380px){.spec{grid-template-columns:1fr}}
.phones{display:grid;gap:8px;border-top:1px solid var(--bed-rule);padding-top:14px}
.phones .label{color:var(--bed-dim)}
.phone-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;align-items:baseline}
.phone-row .country{font-size:14px;color:var(--bed-dim)}
.phone-row a{font:500 17px var(--mono);color:var(--bed-ink);text-decoration:none;font-variant-numeric:tabular-nums}
.phone-row a:hover{text-decoration:underline}