/* Tekton — category mockup pages. Same design language as ../index.html
   (Montserrat, #353740 charcoal, #FCD21D yellow, blueprint marginalia). */

:root{
  --bg:#FFFFFF; --card2:#F7F7F7; --line:#ECECEE;
  --txt:#353740; --heading:#353740; --muted:#747D88; --muted2:#9AA2AD;
  --accent:#FCD21D; --dark:#353740; --dark2:#2B2C34;
  --on-dark:#FFFFFF; --on-dark-muted:#A8B0BA;
  --green:#2F9E5F; --red:#D64545;
  --mono:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--muted);font-family:'Montserrat',Helvetica,Arial,Lucida,sans-serif;line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}

/* ── Chrome shared with the main page ── */
.topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:26px 6vw;background:#fff;border-bottom:1px solid var(--line)}
.wordmark{font-size:24px;font-weight:800;letter-spacing:4px;color:var(--dark);text-decoration:none}
.back-link{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);text-decoration:none}
.back-link:hover{color:var(--dark)}

.band{background:var(--dark);padding:clamp(56px,7vw,92px) 6vw;position:relative}
.band .kicker{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:16px}
.band h1{font-family:'Montserrat',sans-serif;font-size:clamp(30px,4vw,50px);font-weight:700;line-height:1.2;color:#fff;max-width:820px}
.band p{color:var(--on-dark-muted);font-size:16px;max-width:640px;margin-top:14px}
.spec-tag{position:absolute;top:30px;right:6vw;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:2px;color:rgba(255,255,255,.38);pointer-events:none}
.spec-tag::before{content:"";width:34px;height:1px;background:currentColor}
@media(max-width:700px){.spec-tag{display:none}}

.wrap{max-width:1200px;margin:0 auto;padding:0 6vw}

/* ── Example rows: mockup one side, story the other ── */
.sys{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,4.5vw,72px);align-items:center;padding:clamp(52px,6.5vw,88px) 0;border-bottom:1px solid var(--line)}
.sys.flip .sys-mock{order:2}
@media(max-width:900px){
  .sys{grid-template-columns:1fr;gap:26px}
  .sys.flip .sys-mock{order:0}
}
.sys-copy h3{font-size:24px;font-weight:700;color:var(--heading);line-height:1.35}
.sys-copy .who{font-family:var(--mono);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);margin:6px 0 16px}
.sys-copy ul{list-style:none;margin:0 0 18px}
.sys-copy li{font-size:15px;padding-left:20px;position:relative;margin-bottom:6px}
.sys-copy li::before{content:"▸";position:absolute;left:0;color:var(--accent);font-weight:700}
.outcome-ph{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--heading);background:rgba(252,210,29,.18);padding:7px 10px;border-left:3px solid var(--accent);display:inline-block}
.mock-badge{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);border:1px dashed var(--muted2);padding:4px 9px;margin-bottom:14px}

/* ── Mockup primitives ── */
.mk{background:#fff;border:1px solid var(--line);box-shadow:0 2px 60px rgba(0,0,0,.13);font-size:12px;line-height:1.5}
.mk-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line);background:#fff}
.mk-bar span{width:9px;height:9px;border-radius:50%;background:#D5D7DC}
.mk-url{flex:1;margin-left:8px;background:var(--card2);border-radius:100px;padding:3px 12px;font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;color:var(--muted2);max-width:280px;overflow:hidden;white-space:nowrap}
/* windows-style chrome for desktop tools */
.mk-win .mk-bar{background:var(--dark);border-bottom:0}
.mk-win .mk-bar b{color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.5px;margin-right:auto;display:flex;align-items:center;gap:8px}
.mk-win .mk-bar u{margin-left:auto;display:flex;gap:10px;text-decoration:none;color:#9AA2AD;font-family:var(--mono);font-size:11px}
.mk-body{padding:16px 18px}
.mk-apphead{display:flex;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line)}
.mk-apphead b{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--heading)}
.mk-apphead .nav{display:flex;gap:4px;margin-left:auto}
.mk-apphead .nav i{font-style:normal;font-size:9.5px;font-weight:600;padding:4px 10px;color:var(--muted)}
.mk-apphead .nav i.on{background:var(--dark);color:#fff}
.mk-ava{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--dark);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700}

.mini-head{font-size:11px;font-weight:700;color:var(--heading);letter-spacing:.5px;margin-bottom:12px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.mini-head .chip{margin-left:auto}

/* stat tiles */
.t-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.t-tiles div{border:1px solid var(--line);padding:10px}
.t-tiles b{display:block;font-size:15px;color:var(--heading);line-height:1.3}
.t-tiles i{font-style:normal;font-size:8.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.up{color:var(--green);font-size:9px;font-weight:700}
.dn{color:var(--red);font-size:9px;font-weight:700}

/* chips */
.chip{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:3px 8px}
.chip.ok{background:rgba(47,158,95,.14);color:var(--green)}
.chip.warn{background:rgba(252,210,29,.25);color:#8a7500}
.chip.bad{background:rgba(214,69,69,.12);color:var(--red)}
.chip.dark{background:var(--dark);color:#fff}
.chip.yel{background:var(--accent);color:var(--dark)}

/* table rows */
.mk-table{width:100%;border-collapse:collapse}
.mk-table th{font-size:8.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted2);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.mk-table td{font-size:11px;color:var(--txt);padding:8px;border-bottom:1px solid var(--line)}
.mk-table td b{color:var(--heading)}

/* slot grid (booking) */
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.slot-grid span{border:1px solid var(--line);padding:8px 4px;text-align:center;font-size:9.5px;font-weight:600;color:var(--muted)}
.slot-grid .taken{background:var(--card2);color:var(--muted2);text-decoration:line-through}
.slot-grid .sel{background:var(--accent);border-color:var(--accent);color:var(--dark);font-weight:700}

/* month calendar */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal i{font-style:normal;font-size:8px;font-weight:700;letter-spacing:.5px;color:var(--muted2);text-align:center;text-transform:uppercase;padding:2px 0}
.cal span{border:1px solid var(--line);aspect-ratio:1.15;display:flex;align-items:flex-start;justify-content:flex-end;padding:3px 5px;font-size:9px;color:var(--muted)}
.cal .bkd{background:var(--accent);border-color:var(--accent);color:var(--dark);font-weight:700}
.cal .half{background:rgba(252,210,29,.30);color:var(--heading)}
.cal .off{opacity:.35}

/* bars */
.dash-bars{display:flex;align-items:flex-end;gap:6px;height:74px;border-bottom:1px solid var(--line);padding:0 4px;margin-top:6px}
.dash-bars i{flex:1;background:var(--accent)}
.dash-bars i.pk{background:var(--dark)}

/* form rows */
.f-row{margin-bottom:10px}
.f-row label{display:block;font-size:8.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--heading);margin-bottom:4px}
.f-row .inp{border:1px solid #D5D7DC;padding:8px 10px;font-size:11px;color:var(--txt);background:#fff}
.f-row .inp.ok{border-color:var(--green)}
.f-row .inp.err{border-color:var(--red)}
.f-err{font-size:9px;color:var(--red);margin-top:3px}
.mk-btn{display:inline-block;background:var(--accent);color:var(--dark);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:9px 18px;border-radius:100px}
.mk-btn.dk{background:var(--dark);color:#fff}

/* timeline (order tracking) */
.tl{list-style:none}
.tl li{position:relative;padding:0 0 14px 24px;font-size:11px;color:var(--txt)}
.tl li::before{content:"";position:absolute;left:5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.tl li::after{content:"";position:absolute;left:9px;top:16px;bottom:-2px;width:1px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li.todo::before{background:#fff;border:2px solid var(--muted2)}
.tl li.todo{color:var(--muted2)}
.tl small{display:block;font-family:var(--mono);font-size:8.5px;color:var(--muted2)}

/* stock level bars */
.stock-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px;font-weight:600;color:var(--txt)}
.stock-row .lvl{flex:1;height:7px;background:var(--card2);position:relative;overflow:hidden}
.stock-row .lvl i{position:absolute;left:0;top:0;bottom:0;background:var(--dark)}
.stock-row.low .lvl i{background:var(--red)}
.low-chip{font-size:8.5px;font-weight:700;background:var(--accent);color:var(--dark);padding:3px 7px;white-space:nowrap}

/* POS layout */
.pos{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.pos-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pos-prods span{border:1px solid var(--line);padding:10px 6px;text-align:center;font-size:9.5px;font-weight:600;color:var(--txt)}
.pos-prods b{display:block;font-size:8.5px;color:var(--muted2);font-weight:600}
.pos-cart{border:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--txt)}
.pos-cart div{display:flex;justify-content:space-between}
.pos-cart .tot{border-top:1px solid var(--line);margin-top:auto;padding-top:6px;font-weight:700;color:var(--heading)}

/* settings / toggles */
.set-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.set-row span{font-size:11px;font-weight:600;color:var(--txt)}
.set-row small{display:block;font-size:9px;color:var(--muted2);font-weight:400}
.tgl{width:30px;height:16px;border-radius:100px;background:#D5D7DC;position:relative;flex:0 0 30px}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff}
.tgl.on{background:var(--dark)}
.tgl.on::after{left:auto;right:2px;background:var(--accent)}

/* integration flow */
.flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.flow b{border:1px solid var(--line);padding:8px 12px;font-size:10px;color:var(--heading);white-space:nowrap}
.flow em{font-style:normal;color:var(--accent);font-weight:700}
.log{font-family:var(--mono);font-size:9px;line-height:1.9;color:var(--muted);background:var(--card2);padding:10px 12px}
.log b{color:var(--green);font-weight:600}

/* chat feed */
.feed{display:flex;flex-direction:column;gap:6px}
.feed div{max-width:88%;background:var(--card2);padding:7px 10px;font-size:10.5px;color:var(--txt);border-left:3px solid var(--accent)}
.feed small{display:block;font-family:var(--mono);font-size:8px;color:var(--muted2)}

/* progress */
.prog{height:10px;background:var(--card2);position:relative;margin:8px 0 4px}
.prog i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.prog-label{font-family:var(--mono);font-size:9px;color:var(--muted)}

/* kiosk */
.kiosk{text-align:center;padding:8px 0}
.kiosk .clock{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--heading);letter-spacing:2px}
.kiosk .mk-btn{margin-top:10px;font-size:12px;padding:12px 28px}
.kiosk p{font-size:10px;color:var(--muted2);margin-top:8px}

/* ── CTA band + footer ── */
.cta-band{background:var(--accent);text-align:center;padding:clamp(56px,7vw,88px) 6vw}
.cta-band h2{font-size:clamp(26px,3.2vw,40px);font-weight:700;color:var(--dark);line-height:1.25;margin-bottom:12px}
.cta-band p{color:var(--dark);font-size:15px;max-width:560px;margin:0 auto 30px}
.cta-btn{display:inline-block;padding:18px 45px;border-radius:100px;background:var(--dark);color:#fff;font-weight:700;font-size:14px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;border:2px solid var(--dark);transition:background .2s,color .2s,transform .2s}
.cta-btn:hover{background:transparent;color:var(--dark);transform:translateY(-2px)}
footer{padding:44px 6vw;text-align:center;color:var(--on-dark-muted);background:var(--dark2);font-size:13px}
footer a{color:var(--accent)}

/* other-categories strip */
.more-cats{padding:clamp(40px,5vw,60px) 0}
.more-cats p{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);margin-bottom:14px}
.more-cats nav{display:flex;flex-wrap:wrap;gap:10px}
.more-cats a{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--heading);text-decoration:none;border:1px solid var(--line);padding:10px 16px;transition:border-color .15s,background .15s}
.more-cats a:hover{border-color:var(--accent);background:rgba(252,210,29,.12)}

/* ── Real shipped projects strip (generated by gen_work.py) ── */
.built-here{margin:56px 0 8px;border:1px solid var(--line);border-top:4px solid var(--accent);padding:34px 32px;background:#fff}
.built-here .bh-title{font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--heading);margin-bottom:18px}
.bh-links{display:flex;flex-wrap:wrap;gap:10px}
.bh-links a{font-size:13px;font-weight:600;color:var(--heading);text-decoration:none;border:1px solid var(--line);padding:10px 16px;transition:border-color .15s,background .15s}
.bh-links a:hover{border-color:var(--dark)}
.bh-links a b{color:#B08F00;font-weight:700}
.bh-all{display:inline-block;margin-top:18px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--heading);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px}