/* ============================================================
   Pixadox Technologies — shared design core
   Palette: Mangalore roof-tile terracotta on limewash paper,
   warm black ink. One accent. Rules, numerals, tabular figures.
   ============================================================ */
:root{
  --paper:#FFFFFF;
  --paper2:#F2F2EF;
  --card:#F7F7F4;
  --white:#FFFFFF;
  --ink:#17181A;
  --ink2:#393B3D;
  --mut:#696B6C;
  --mut2:#989A99;
  --rule:#DCDDD9;
  --rule2:#EAEAE6;
  --tile:#B23F1C;
  --tiled:#8A2D11;
  --tilel:#F0DCD1;
  --night:#131416;
  --night2:#1C1D20;
  --nrule:#333539;
  --ntx:#B9BBB9;
  --moss:#2E5A3B;
  --wrap:1200px;
  --ease:cubic-bezier(.2,.75,.25,1);
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;max-width:100%;background:var(--paper);color:var(--ink);
  font:400 16.5px/1.56 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
}
h1,h2,h3,h4,h5{margin:0;font-family:'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:700;line-height:1.06;letter-spacing:-.021em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}
.wrapn{width:min(900px,100% - 48px);margin-inline:auto}
.mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace}
.kn{font-family:'Noto Sans Kannada','Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif}
.num{font-variant-numeric:tabular-nums}
hr.r{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- motion ---------- */
[data-rv]{opacity:0;transform:translateY(16px);transition:opacity .66s var(--ease),transform .66s var(--ease);transition-delay:var(--rd,0s)}
[data-rv].in{opacity:1;transform:none}
[data-rv]:not(.in) *,[data-rv]:not(.in)::before,[data-rv]:not(.in)::after{animation-play-state:paused}
.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
.still [data-rv]{opacity:1!important;transform:none!important}
.fin,.fin *,.fin *::before,.fin *::after{animation:none!important;transition:none!important}
.fin{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}}
@keyframes pop{from{opacity:0;transform:scale(.6)}}
@keyframes slidein{from{opacity:0;transform:translateX(-12px)}}
@keyframes slideinr{from{opacity:0;transform:translateX(12px)}}
@keyframes grow{from{transform:scaleY(.03)}}
@keyframes growx{from{transform:scaleX(0)}}
@keyframes typeclip{from{clip-path:inset(0 100% 0 0)}}
@keyframes dash{from{stroke-dashoffset:var(--l,200)}}
@keyframes blink{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes stamp{0%{opacity:0;transform:rotate(-24deg) scale(2)}62%{opacity:1;transform:rotate(-9deg) scale(.95)}100%{opacity:1;transform:rotate(-9deg) scale(1)}}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
to{transform:translateX(-50%)}}
@keyframes fadein{from{opacity:0}}
@keyframes inkin{from{opacity:0;filter:blur(2px)}}

/* ---------- header ---------- */
.site{position:sticky;top:0;z-index:70;background:var(--paper);border-bottom:1px solid var(--rule)}
.site.stuck{border-bottom-color:var(--ink)}
.bar{display:flex;align-items:center;gap:30px;height:66px}
.logo{display:flex;align-items:baseline;gap:9px;font-family:'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:20.5px;letter-spacing:-.035em}
.logo em{font:500 10.5px/1 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);transform:translateY(-1px)}
.tilemark{width:22px;height:22px;flex:0 0 auto;align-self:center;background:var(--tile);display:block;position:relative;overflow:hidden}
.tilemark::before,.tilemark::after{content:'';position:absolute;left:-2px;right:-2px;height:5px;border-radius:0 0 60% 60%;border-bottom:1.6px solid var(--paper)}
.tilemark::before{top:4px}
.tilemark::after{top:12px}
.menu{display:flex;gap:24px;margin-left:auto;align-items:center}
.menu a{font-size:15px;font-weight:500;color:var(--ink2);padding:4px 0;position:relative}
.menu a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--tile);transform:scaleX(0);transform-origin:0;transition:transform .26s var(--ease)}
.menu a:hover::after,.menu a.on::after{transform:scaleX(1)}
.menu a.on{color:var(--ink);font-weight:600}
.barmail{font:500 13px 'IBM Plex Mono',monospace;color:var(--mut);border-left:1px solid var(--rule);padding-left:22px}
.barmail:hover{color:var(--tile)}
.burger{display:none;margin-left:auto;width:42px;height:36px;border:1px solid var(--ink);background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;padding:0}
.burger s{display:block;width:17px;height:1.6px;background:var(--ink)}

/* ---------- footer ---------- */
footer{background:var(--night);color:var(--ntx);padding:60px 0 26px;font-size:14.5px}
.ftop{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:28px}
.ftb .logo{color:var(--paper)}
.ftb .logo em{color:#7E7263}
.ftb p{margin-top:16px;max-width:30em;line-height:1.6;color:var(--ntx)}
.ftcol h5{font:600 11px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#8C7E6D;margin-bottom:16px}
.ftcol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftcol a:hover{color:var(--paper)}
.ftmail{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--paper);border-bottom:1px solid var(--tile);padding-bottom:2px}
.fbot{margin-top:46px;padding-top:20px;border-top:1px solid var(--nrule);display:flex;flex-wrap:wrap;gap:12px 26px;font-size:12.5px;color:#7A6E5E}
.fbot .note{max-width:52em}

/* ---------- section furniture ---------- */
section{position:relative}
.sec{padding:44px 0}
.sec-tight{padding:32px 0}
.band{background:var(--paper2)}
.night{background:var(--night);color:var(--paper)}
.night p,.night li{color:var(--ntx)}
.kick{display:flex;align-items:center;gap:10px;font:500 11.5px 'IBM Plex Mono',monospace;letter-spacing:.17em;text-transform:uppercase;color:var(--tile)}
.kick s{width:26px;height:1px;background:var(--tile);display:block}
.night .kick{color:#D8703F}
.night .kick s{background:#D8703F}
h1.big{font-size:clamp(33px,4.1vw,54px);line-height:1;letter-spacing:-.028em}
h2{font-size:clamp(29px,3.6vw,46px);letter-spacing:-.022em}
h3{font-size:clamp(22px,2.4vw,30px)}
.lede{font-size:18.5px;line-height:1.5;color:var(--ink2);max-width:34em}
.night .lede{color:var(--ntx)}
.sub{margin-top:16px;color:var(--mut);max-width:40em}
.night .sub{color:var(--ntx)}
.meas{max-width:38em}

/* ---------- links & buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;background:var(--ink);color:var(--paper);font:600 15px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;border:1.5px solid var(--ink);cursor:pointer;transition:background .22s,color .22s,transform .22s var(--ease)}
.btn:hover{background:var(--tile);border-color:var(--tile);transform:translateY(-2px)}
.btn-o{background:transparent;color:var(--ink)}
.btn-o:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.night .btn{background:var(--tile);border-color:var(--tile);color:#fff}
.night .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.night .btn-o{background:transparent;border-color:#53483A;color:var(--paper)}
.night .btn-o:hover{background:var(--paper);color:var(--ink)}
.arr{transition:transform .24s var(--ease)}
.btn:hover .arr,.tlink:hover .arr{transform:translateX(4px)}
.tlink{display:inline-flex;align-items:center;gap:8px;font:600 15px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--tile);border-bottom:1.5px solid var(--tile);padding-bottom:2px}
.tlink:hover{color:var(--tiled);border-color:var(--tiled)}
.night .tlink{color:#E08B5A;border-color:#8A4A28}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:34px}

/* ---------- index / list treatments ---------- */
.idx{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.idx li{border-bottom:1px solid var(--rule);display:grid;grid-template-columns:46px 1fr auto;gap:16px;align-items:baseline;padding:8px 0}
.idx li:hover{background:rgba(178,63,28,.045)}
.idx .n{font:500 12px 'IBM Plex Mono',monospace;color:var(--mut2);letter-spacing:.04em}
.idx .t{font-weight:500;font-size:16.5px}
.idx .d{font-size:14px;color:var(--mut);text-align:right;max-width:30em}
.night .idx{border-color:var(--nrule)}
.night .idx li{border-color:var(--nrule)}
.night .idx .d{color:var(--ntx)}

/* two-column dense index */
.idx2{columns:2;column-gap:34px;column-rule:1px solid var(--rule)}
.idx2 .ent{break-inside:avoid;display:grid;grid-template-columns:36px 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule2);align-items:baseline}
.idx2 .ent b{font-weight:600;font-size:16px;display:block}
.idx2 .ent span{display:block;font-size:13.5px;color:var(--mut);margin-top:3px;line-height:1.45}
.idx2 .ent i{font:500 12px 'IBM Plex Mono',monospace;color:var(--tile);font-style:normal}

/* featured entries */
.feat{display:grid;gap:0;border-top:1.5px solid var(--ink)}
.fe{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,.9fr);gap:22px;padding:15px 0;border-bottom:1px solid var(--rule);align-items:start}
.fe .fn{font:500 13px 'IBM Plex Mono',monospace;color:var(--tile);padding-top:6px}
.fe h4{font-size:24px;letter-spacing:-.02em}
.fe .fd{color:var(--mut);font-size:15px;margin-top:8px;line-height:1.5}
.fe .fl{font-size:13.5px;color:var(--ink2);line-height:1.6}
.fe .fl s{display:block;text-decoration:none;padding-left:14px;position:relative}
.fe .fl s::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--tile)}

/* spec table */
.tblx{width:100%;border-collapse:collapse;font-size:15px}
.tblx th{text-align:left;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);padding:0 14px 10px 0;border-bottom:1.5px solid var(--ink);white-space:nowrap}
.tblx td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tblx td.c1{font-weight:600;width:30%}
.tblx td.c2{color:var(--mut);font-size:14.5px}
.tblx td.c3{font:500 13px 'IBM Plex Mono',monospace;color:var(--tile);white-space:nowrap;width:1%}
.tblx tr:hover td{background:rgba(178,63,28,.045)}

/* ledger with leaders */
.ledg{list-style:none;margin:0;padding:0}
.ledg li{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px dotted var(--rule)}
.ledg li b{font-weight:600;font-size:16px;flex:0 0 auto;max-width:62%}
.ledg li u{flex:1;border-bottom:1px dotted var(--rule);text-decoration:none;transform:translateY(-4px)}
.ledg li span{font:500 13px 'IBM Plex Mono',monospace;color:var(--mut);flex:0 0 auto}

/* ---------- mockup frame ---------- */
.fit{position:relative;width:100%}
.fit-in{position:absolute;top:0;left:0;width:var(--dw);height:var(--dh);transform:scale(var(--k,1));transform-origin:top left}
.win{position:absolute;inset:0;background:var(--white);border:1px solid var(--ink);box-shadow:10px 10px 0 rgba(27,22,17,.09);overflow:hidden}
.win-bar{height:26px;display:flex;align-items:center;gap:7px;padding:0 9px;background:var(--paper2);border-bottom:1px solid var(--ink);font:500 9px 'IBM Plex Mono',monospace;color:var(--mut)}
.win-bar s{width:7px;height:7px;background:var(--ink);opacity:.22;flex:0 0 auto;border-radius:50%}
.win-bar .u{flex:1;overflow:hidden;white-space:nowrap;letter-spacing:.02em}
.demo{font:600 8px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--tile);border:1px solid var(--tile);padding:2px 5px;flex:0 0 auto;background:var(--white)}
.scr{position:absolute;top:26px;left:0;right:0;bottom:0;padding:10px 11px;display:flex;flex-direction:column;overflow:hidden}
.capt{margin-top:16px;font-size:13px;line-height:1.5;color:var(--mut);max-width:32em}
.capt b{color:var(--ink2);font-weight:600}
.scrtag{display:flex;align-items:center;gap:9px;font:500 11.5px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.scrtag s{width:7px;height:7px;background:var(--tile);display:block}

/* invoice screen */
.inv-top{display:flex;align-items:flex-start;gap:10px;border-bottom:1.5px solid var(--ink);padding-bottom:7px;animation:drop .5s var(--ease) both}
.inv-top h6{margin:0;font:700 11px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.inv-top .co{font:600 9.5px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;margin-top:2px}
.inv-top .ad{font:400 7.6px/1.35 'IBM Plex Mono',monospace;color:var(--mut);margin-top:2px}
.inv-top .rt{margin-left:auto;text-align:right;font:400 7.6px/1.4 'IBM Plex Mono',monospace;color:var(--mut)}
.inv-top .rt b{color:var(--ink);font-weight:600;display:block;font-size:8.4px}
.bill2{display:flex;gap:8px;margin-top:6px;font:400 7.6px/1.35 'IBM Plex Mono',monospace;color:var(--mut);animation:rise .5s var(--ease) .18s both}
.bill2 div{flex:1;min-width:0}
.bill2 u{display:block;text-decoration:none;font-size:6.8px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.bill2 b{display:block;font:600 8.6px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--ink);margin:1px 0}
.lines{margin-top:7px;border-top:1px solid var(--ink)}
.lh,.ln{display:grid;grid-template-columns:1fr 34px 24px 46px 52px;gap:4px;align-items:center;font:400 8.2px 'IBM Plex Mono',monospace}
.lh{font-size:6.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);padding:4px 0;border-bottom:1px solid var(--rule2)}
.ln{padding:5px 0;border-bottom:1px solid #EFEAE0;animation:slidein .42s var(--ease) both;animation-delay:calc(.3s + var(--i)*.17s)}
.ln span:first-child{font-family:'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:8.6px;font-weight:500;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lh span:not(:first-child),.ln span:not(:first-child){text-align:right}
.ln b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.inv-f{display:flex;gap:9px;margin-top:auto;padding-top:8px}
.words{flex:1;min-width:0;font:400 7.2px/1.45 'IBM Plex Mono',monospace;color:var(--mut);animation:fadein .6s linear 1.6s both}
.words b{display:block;color:var(--ink);font-size:7.6px;font-weight:600;margin-top:2px}
.qr{width:46px;height:46px;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;flex:0 0 auto;align-self:flex-start;margin-top:2px}
.qr i{background:var(--ink);animation:pop .3s var(--ease) both;animation-delay:calc(1.5s + var(--i)*.022s)}
.qr i.o{background:transparent}
.sums{width:132px;flex:0 0 auto;border-left:1px solid var(--rule);padding-left:9px}
.sr{display:flex;justify-content:space-between;gap:8px;font:400 8px 'IBM Plex Mono',monospace;color:var(--mut);padding:2px 0;animation:rise .4s var(--ease) both;animation-delay:calc(1.1s + var(--i)*.13s)}
.sr b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.sr.tot{border-top:1.5px solid var(--ink);margin-top:4px;padding-top:5px;font:700 11px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--ink)}
.sr.tot b{font:700 13px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif}
.eway{display:flex;align-items:center;gap:5px;margin-top:6px;font:500 7px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--moss);animation:pop .4s var(--ease) 2.1s both}
.eway s{width:9px;height:9px;border-radius:50%;background:var(--moss);display:grid;place-items:center;flex:0 0 auto}
.eway s::after{content:'';width:4px;height:2.4px;border-left:1.3px solid #fff;border-bottom:1.3px solid #fff;transform:rotate(-45deg) translate(0,-.5px)}

/* UPI card */
.upi{position:absolute;background:var(--white);border:1px solid var(--ink);box-shadow:8px 8px 0 rgba(27,22,17,.12);padding:11px 12px;width:196px;animation:float2 9s ease-in-out infinite}
.upi-h{display:flex;align-items:center;gap:7px;font:600 9px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2)}
.upi-h .demo{margin-left:auto}
.upi-tick{width:34px;height:34px;border-radius:50%;background:var(--moss);display:grid;place-items:center;margin:10px 0 8px;animation:pop .5s var(--ease) 1.5s both}
.upi-tick::after{content:'';width:13px;height:7px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg) translate(1px,-2px)}
.upi b.amt{display:block;font:700 22px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.02em;animation:rise .5s var(--ease) 1.7s both}
.upi .who{font:400 9.6px/1.45 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--mut);margin-top:3px;animation:rise .5s var(--ease) 1.85s both}
.upi .who b{color:var(--ink);font-weight:600}
.upi .ref{margin-top:8px;padding-top:7px;border-top:1px solid var(--rule2);font:400 7.6px/1.5 'IBM Plex Mono',monospace;color:var(--mut2);animation:fadein .5s linear 2.1s both}

/* POS screen */
.pos{display:grid;grid-template-columns:1.18fr .82fr;gap:9px;height:100%;min-height:0}
.pos-l{border:1px solid var(--rule);display:flex;flex-direction:column;min-height:0;background:var(--white)}
.pos-hd{background:var(--paper2);border-bottom:1px solid var(--rule);padding:5px 7px;font:600 8.6px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;display:flex;align-items:center;gap:6px}
.pos-hd em{margin-left:auto;font:400 7.4px 'IBM Plex Mono',monospace;font-style:normal;color:var(--mut)}
.pos-rows{flex:1;min-height:0;overflow:hidden}
.prow{display:grid;grid-template-columns:1fr 26px 44px;gap:6px;padding:4.5px 7px;align-items:center;font:500 8.6px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;border-bottom:1px solid #F0ECE3;animation:slidein .4s var(--ease) both;animation-delay:calc(.25s + var(--i)*.15s)}
.prow i{font-style:normal;font:400 7.4px 'IBM Plex Mono',monospace;color:var(--mut2);text-align:right}
.prow b{font:600 8.6px 'IBM Plex Mono',monospace;text-align:right;font-variant-numeric:tabular-nums}
.pos-ft{border-top:1px solid var(--rule);padding:5px 7px;font:400 7.4px 'IBM Plex Mono',monospace;color:var(--mut2);display:flex;align-items:center;gap:5px}
.caret{width:4px;height:8px;background:var(--tile);display:inline-block;animation:blink 1s steps(1) infinite}
.pos-r{display:flex;flex-direction:column;gap:8px;position:relative;min-height:0}
.tot{border:1px solid var(--rule);background:var(--white);padding:8px;flex:1;display:flex;flex-direction:column;gap:3px;min-height:0}
.payb{background:var(--moss);color:#fff;text-align:center;font:600 9.5px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;padding:8px;animation:pop .4s var(--ease) 2s both}
.stamp{position:absolute;font:700 12px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;letter-spacing:.14em;color:var(--moss);border:2.5px solid var(--moss);padding:3px 8px;background:rgba(255,255,255,.9);animation:stamp .6s var(--ease) 2.3s both;transform:rotate(-9deg);z-index:3}

/* chat screen */
.chat{background:#EDE6DA;flex:1;display:flex;flex-direction:column;gap:6px;padding:9px;min-height:0;overflow:hidden}
.chat-h{position:absolute;top:26px;left:0;right:0;height:30px;background:var(--night);color:var(--paper);display:flex;align-items:center;gap:8px;padding:0 10px;z-index:2}
.chat-h s{width:19px;height:19px;border-radius:50%;background:var(--tile);flex:0 0 auto}
.chat-h b{font:600 9.4px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;line-height:1.15}
.chat-h b em{display:block;font-style:normal;font-weight:400;font-size:7.4px;color:#9C8F7E}
.chat-h .demo{margin-left:auto;background:transparent;color:#D8703F;border-color:#5A4733}
.chat-wrap{position:absolute;top:56px;left:0;right:0;bottom:0;display:flex;flex-direction:column}
.bub{max-width:76%;font:400 9px/1.42 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;padding:6px 8px;position:relative;animation:rise .45s var(--ease) both;animation-delay:calc(.5s + var(--i)*.65s);box-shadow:1px 1px 0 rgba(27,22,17,.08)}
.bub.kn{font-size:9.4px;line-height:1.55}
.bub.i{background:var(--white);align-self:flex-start}
.bub.o{background:#D9E8C8;align-self:flex-end}
.bub u{display:block;text-decoration:none;text-align:right;font:400 6.6px 'IBM Plex Mono',monospace;color:var(--mut2);margin-top:2px}
.bub.o u{color:#4C7A3C}
.bub.card{padding:0;overflow:hidden;background:var(--white);width:62%;max-width:62%}
.bub.card .ch{background:var(--paper2);padding:5px 7px;font:600 8.4px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;border-bottom:1px solid var(--rule2)}
.bub.card .cb{padding:6px 7px;font:400 8.2px/1.4 'IBM Plex Mono',monospace;color:var(--mut)}
.bub.card .cb b{display:block;font:700 13px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--ink);margin-bottom:2px}
.bub.card .cf{border-top:1px solid var(--rule2);padding:5px 7px;text-align:center;font:600 8px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--tile)}
.daychip{align-self:center;font:500 6.8px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:rgba(255,255,255,.75);padding:2px 7px;animation:pop .35s var(--ease) .3s both}
.chat-f{height:22px;margin:6px 0 0;background:var(--white);display:flex;align-items:center;padding:0 8px;font:400 7.4px 'IBM Plex Mono',monospace;color:var(--mut2);border:1px solid var(--rule2)}
.typing{align-self:flex-start;background:var(--white);padding:6px 9px;display:flex;gap:3px;animation:fadein .3s linear 1.8s both}
.typing s{width:4px;height:4px;border-radius:50%;background:var(--mut2);animation:tdot 1.1s ease-in-out infinite;animation-delay:calc(var(--i)*.15s)}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}

/* console / build screen */
.cons{background:var(--night);padding:9px 10px;font:400 8.4px/2 'IBM Plex Mono',monospace;color:#9C8F7E;overflow:hidden;flex:1;min-height:0}
.cons p{white-space:nowrap;animation:typeclip .4s steps(22) both;animation-delay:calc(.2s + var(--i)*.19s)}
.cons em{font-style:normal;color:#E0A273}
.cons u{text-decoration:none;color:#7FA87A}
.cons b{color:var(--paper);font-weight:500}
.cons .c{color:#5E5345}
.ccar{display:inline-block;width:5px;height:9px;background:var(--tile);vertical-align:-1px;animation:blink 1s steps(1) infinite}

/* stock / ERP screen */
.stk-h{display:flex;align-items:center;gap:7px;font:600 9.4px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;border-bottom:1.5px solid var(--ink);padding-bottom:6px;animation:drop .45s var(--ease) both}
.stk-h em{margin-left:auto;font:400 7.4px 'IBM Plex Mono',monospace;font-style:normal;color:var(--mut)}
.srow{display:grid;grid-template-columns:38px 1fr 32px 32px 32px 44px;gap:5px;align-items:center;font:400 8.2px 'IBM Plex Mono',monospace;padding:5px 0;border-bottom:1px solid #F0ECE3;animation:slidein .4s var(--ease) both;animation-delay:calc(.3s + var(--i)*.14s)}
.srow.hd{font-size:6.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);border-bottom:1px solid var(--rule);animation:none;padding-bottom:4px}
.srow span.nm{font-family:'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;font-size:8.6px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.srow i{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.srow .flag{font:600 6.6px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-align:center;padding:2px 0;color:var(--tile);border:1px solid var(--tile)}
.srow .flag.ok{color:var(--moss);border-color:#BCCFC0}
.stk-f{margin-top:auto;padding-top:7px;display:flex;gap:7px;align-items:center}
.pill{font:500 7.4px 'IBM Plex Mono',monospace;color:var(--mut);border:1px solid var(--rule);padding:3px 6px}
.pill.on{color:var(--white);background:var(--ink);border-color:var(--ink)}

/* wireframe / layout screen */
.wfm{border:1px solid var(--rule);padding:7px;display:flex;flex-direction:column;gap:5px;background:var(--white);flex:1;min-height:0}
.wf{background:var(--paper2);animation:inkin .5s var(--ease) both;animation-delay:calc(.2s + var(--i)*.16s)}
.wf-nav{height:13px;background:var(--ink);display:flex;align-items:center;gap:4px;padding:0 6px}
.wf-nav s{height:3px;width:13px;background:rgba(241,236,226,.42);display:block}
.wf-nav s.lg{width:20px;height:5px;background:var(--tile)}
.wf-hero{height:56px;background:var(--tilel);padding:8px 9px;position:relative}
.wf-hero u{display:block;text-decoration:none;height:7px;width:62%;background:var(--ink)}
.wf-hero u+u{margin-top:5px;width:40%;height:5px;background:rgba(27,22,17,.3)}
.wf-hero em{position:absolute;right:9px;bottom:8px;width:38px;height:13px;background:var(--tile);display:block}
.wf-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.wf-c{height:36px;background:var(--paper2);padding:5px;animation:inkin .5s var(--ease) both;animation-delay:calc(.75s + var(--i)*.13s)}
.wf-c s{display:block;height:9px;width:9px;background:var(--tile)}
.wf-c u{display:block;text-decoration:none;height:3px;width:78%;background:var(--rule);margin-top:5px}
.wf-c u+u{width:52%;margin-top:3px}
.wf-txt{display:grid;gap:4px}
.wf-txt s{display:block;height:4px;background:var(--rule2);animation:inkin .45s var(--ease) both;animation-delay:calc(1.1s + var(--i)*.1s)}
.wf-txt s:nth-child(2){width:86%}
.wf-txt s:nth-child(3){width:62%}
.wf-ft{height:20px;background:var(--rule2);margin-top:auto}
.rsp{width:84px;flex:0 0 auto;border:1px solid var(--rule);background:var(--white);padding:6px;display:flex;flex-direction:column;gap:5px;animation:rise .5s var(--ease) 1.5s both}
.rsp-l{font:500 6.8px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-align:center;color:var(--mut2)}
.mini{border:1.5px solid var(--ink);flex:1;padding:4px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.mini s{display:block;background:var(--rule2)}
.mini s.n{height:6px;background:var(--ink)}
.mini s.h{height:26px;background:var(--tilel)}
.mini s.c{flex:1;min-height:11px;animation:rise .45s var(--ease) both;animation-delay:calc(1.9s + var(--i)*.12s)}
.mini s.f{height:9px;background:var(--rule)}

/* vitals / ops screen */
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.rg{border:1px solid var(--rule);padding:7px 5px;text-align:center;background:var(--white);animation:rise .45s var(--ease) both;animation-delay:calc(.2s + var(--i)*.13s)}
.rg svg{width:40px;height:40px;display:block;margin:0 auto}
.rg circle{fill:none;stroke-width:5;stroke-linecap:butt}
.rg .tk{stroke:var(--rule2)}
.rg .vl{stroke:var(--rc,var(--tile));stroke-dasharray:100;stroke-dashoffset:var(--o,24);transform:rotate(-90deg);transform-origin:center;animation:ringin 1.2s var(--ease) both;animation-delay:calc(.45s + var(--i)*.15s)}
@keyframes ringin{from{stroke-dashoffset:100}}
.rg b{display:block;font:700 11px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;margin-top:4px}
.rg span{display:block;font:500 6.8px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--mut2)}
.pipe{border:1px solid var(--rule);padding:7px 8px;background:var(--white);animation:rise .45s var(--ease) .7s both}
.pipe-h{font:600 8.6px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;display:flex;align-items:center;gap:6px;margin-bottom:7px}
.pipe-h em{margin-left:auto;font:500 6.8px 'IBM Plex Mono',monospace;letter-spacing:.08em;color:var(--moss);font-style:normal;border:1px solid #BCCFC0;padding:2px 5px;animation:pop .35s var(--ease) 2.3s both}
.steps{display:flex;align-items:center;gap:4px}
.st{flex:1;display:flex;align-items:center;gap:4px}
.st s{width:12px;height:12px;border-radius:50%;background:var(--moss);display:grid;place-items:center;flex:0 0 auto;animation:pop .35s var(--ease) both;animation-delay:calc(1.1s + var(--i)*.28s)}
.st s::after{content:'';width:4px;height:2.4px;border-left:1.4px solid #fff;border-bottom:1.4px solid #fff;transform:rotate(-45deg) translate(0,-.5px)}
.st i{font-style:normal;font:500 7.4px 'IBM Plex Mono',monospace;color:var(--mut)}
.st u{flex:1;height:1.4px;background:var(--moss);transform-origin:0;animation:growx .28s linear both;animation-delay:calc(1.25s + var(--i)*.28s)}
.upt{border:1px solid var(--rule);padding:7px 8px;background:var(--white);flex:1;display:flex;flex-direction:column;min-height:0;animation:rise .45s var(--ease) .9s both}
.upt-h{display:flex;align-items:center;font:600 8.6px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif}
.upt-h em{margin-left:auto;font:400 7.4px 'IBM Plex Mono',monospace;font-style:normal;color:var(--mut2)}
.upt svg{flex:1;width:100%;margin-top:5px;min-height:0}
.upt path.ln2{fill:none;stroke:var(--tile);stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:var(--l,320);animation:dash 1.5s var(--ease) 1.3s both}
.upt path.ar2{fill:rgba(178,63,28,.14);stroke:none;animation:fadein .6s linear 2.3s both}

/* order / shop screen */
.ord-h{display:flex;align-items:baseline;gap:8px;border-bottom:1.5px solid var(--ink);padding-bottom:6px;animation:drop .45s var(--ease) both}
.ord-h b{font:700 12px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif}
.ord-h em{font:400 7.6px 'IBM Plex Mono',monospace;font-style:normal;color:var(--mut)}
.ord-h .tagok{margin-left:auto;font:600 6.8px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--moss);border:1px solid #BCCFC0;padding:2px 5px;animation:pop .4s var(--ease) 1.9s both}
.ord-g{display:grid;grid-template-columns:1fr 124px;gap:9px;flex:1;min-height:0;margin-top:7px}
.oit{display:grid;grid-template-columns:26px 1fr 42px;gap:6px;align-items:center;padding:5px 0;border-bottom:1px solid #F0ECE3;animation:slidein .4s var(--ease) both;animation-delay:calc(.3s + var(--i)*.16s)}
.oit s{width:26px;height:26px;background:var(--paper2);display:block;border:1px solid var(--rule2)}
.oit span{font:500 8.6px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.oit span u{display:block;text-decoration:none;font:400 7.2px 'IBM Plex Mono',monospace;color:var(--mut2);margin-top:1px}
.oit b{font:600 8.6px 'IBM Plex Mono',monospace;text-align:right;font-variant-numeric:tabular-nums}
.oside{border-left:1px solid var(--rule);padding-left:9px;display:flex;flex-direction:column;gap:4px}
.oside .lbl{font:500 6.6px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-top:4px}
.oside .val{font:400 8.2px/1.4 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;color:var(--ink2);animation:rise .4s var(--ease) both;animation-delay:calc(.9s + var(--i)*.12s)}
.oside .val b{font-weight:600}

/* map (about) */
.mapw{border:1px solid var(--ink);background:var(--card);padding:20px;position:relative}
.mapw svg{display:block;width:100%;height:auto}
.mapw .mn{font:500 11px 'IBM Plex Mono',monospace;fill:var(--ink)}
.mapw .mnm{font:500 9px 'IBM Plex Mono',monospace;fill:var(--mut)}
.mapw .coast{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:var(--l,900);animation:dash 2.4s var(--ease) .3s both}
.mapw .sea{fill:rgba(178,63,28,.05)}
.mapw .dot{fill:var(--tile);animation:pop .4s var(--ease) both;animation-delay:calc(1.4s + var(--i)*.18s)}
.mapw .note{position:absolute;right:16px;bottom:12px;font:400 10.5px 'IBM Plex Mono',monospace;color:var(--mut2)}

/* marquee strip */

/* form */
.form{display:grid;gap:14px}
.fld label{display:block;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
.fld input,.fld textarea,.fld select{width:100%;background:var(--white);border:1px solid var(--rule);padding:12px 13px;color:var(--ink);font:400 15.5px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;outline:none;border-radius:0;transition:border-color .2s,box-shadow .2s}
.fld textarea{resize:vertical;min-height:120px}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--tile);box-shadow:0 0 0 2px rgba(178,63,28,.16)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--mut2)}
.fld select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.night .fld label{color:#8C7E6D}
.night .fld input,.night .fld textarea,.night .fld select{background:rgba(255,255,255,.05);border-color:var(--nrule);color:var(--paper)}
.night .fld select option{background:var(--night2);color:var(--paper)}

/* misc blocks */
.note-box{border-left:2px solid var(--tile);padding:4px 0 4px 18px;color:var(--mut);font-size:15px;line-height:1.6}
.slab{border:1px solid var(--ink);background:var(--card);padding:18px 20px}
.night .slab{background:var(--night2);border-color:var(--nrule)}
.marker{border:1.5px dashed var(--rule);background:transparent;padding:20px 20px;text-align:left}
.marker .mk{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--tile)}
.marker h3{margin-top:12px}
.marker p{margin-top:12px;color:var(--mut);max-width:40em}
.night .marker{border-color:var(--nrule)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.cols-a{display:grid;grid-template-columns:.72fr 1.28fr;gap:36px;align-items:start}
.cols-b{display:grid;grid-template-columns:1.3fr .7fr;gap:36px;align-items:start}
.offset{padding-left:9%}
.stackblk{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.stackblk h5{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--tile);margin:0}
.stackblk p{font-size:15.5px;color:var(--ink2);line-height:1.55}
.night .stackblk{border-color:var(--nrule)}
.night .stackblk p{color:var(--ntx)}
.steps-list{list-style:none;margin:0;padding:0;counter-reset:s}
.steps-list li{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:13px 0;border-top:1px solid var(--rule);align-items:start}
.steps-list li:last-child{border-bottom:1px solid var(--rule)}
.steps-list .sn{font:500 13px 'IBM Plex Mono',monospace;color:var(--tile);padding-top:5px}
.steps-list h4{font-size:21px}
.steps-list p{margin-top:8px;color:var(--mut);font-size:15.5px;max-width:42em}
.night .steps-list li{border-color:var(--nrule)}
.night .steps-list p{color:var(--ntx)}
.pagehead{padding:32px 0 24px;border-bottom:1px solid var(--rule)}
.crumb{font:500 11.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}
.crumb a:hover{color:var(--tile)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tags s{font:500 12.5px 'IBM Plex Mono',monospace;color:var(--ink2);border:1px solid var(--rule);padding:5px 10px;background:var(--card);text-decoration:none}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .cols-a,.cols-b,.cols2{grid-template-columns:1fr;gap:34px}
  .offset{padding-left:0}
  .ftop{grid-template-columns:1fr 1fr;gap:34px}
  .idx2{columns:1;column-rule:0}
  .fe{grid-template-columns:52px 1fr;gap:18px}
  .fe .fl{grid-column:2}
}
@media (max-width:860px){
  .menu{display:none}
  .barmail{display:none}
  .burger{display:flex}
  .site.open .menu{display:flex;position:absolute;top:66px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--ink);flex-direction:column;gap:0;padding:6px 24px 18px;align-items:stretch}
  .site.open .menu a{padding:13px 0;border-bottom:1px solid var(--rule2);font-size:17px}
  .site.open .menu a::after{display:none}
  .site.open .menu a.on{color:var(--tile)}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap,.wrapn{width:min(100%,100% - 32px)}
  .sec{padding:34px 0}
  .sec-tight{padding:26px 0}
  .pagehead{padding:24px 0 20px}
  .lede{font-size:17px}
  .idx li{grid-template-columns:40px 1fr;gap:12px;padding:12px 0}
  .idx .d{grid-column:2;text-align:left;margin-top:4px}
  .ledg li{flex-wrap:wrap}
  .ledg li b{max-width:100%}
  .ledg li u{display:none}
  .ledg li span{width:100%;margin-top:2px}
  .tblx,.tblx tbody,.tblx tr,.tblx td{display:block;width:100%}
  .tblx thead{display:none}
  .tblx tr{border-bottom:1px solid var(--rule);padding:12px 0}
  .tblx td{border:0;padding:0}
  .tblx td.c1{width:auto;font-size:16.5px}
  .tblx td.c2{margin-top:3px}
  .tblx td.c3{margin-top:5px}
  .stackblk{grid-template-columns:1fr;gap:6px}
  .steps-list li{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .steps-list .sn{padding-top:0}
  .slab{padding:16px}
  .marker{padding:16px 14px}
  .fbot{font-size:12px}
}
@media (max-width:420px){
  .ftop{grid-template-columns:1fr}
}

/* ============================================================
   page level blocks
   ============================================================ */

/* ---------- hero ---------- */
.hero{padding:38px 0 46px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,rgba(27,22,17,.045) 0 1px,transparent 1px 30px);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%)}
.hero-in{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:36px;align-items:center}
.eyebrow{font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.17em;text-transform:uppercase;color:var(--tile)}
.hero h1{margin-top:20px}
.hero .lede{margin-top:22px}
.facts{list-style:none;margin:38px 0 0;padding:0;border-top:1px solid var(--rule);max-width:34em}
.facts li{border-bottom:1px solid var(--rule);padding:9px 0;font-size:14.5px;color:var(--mut);display:grid;grid-template-columns:116px 1fr;gap:14px;align-items:baseline}
.facts b{font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.hero-stage{position:relative}

/* ---------- column rhythms ---------- */
.cols-c{display:grid;grid-template-columns:1fr 1.06fr;gap:36px;align-items:start}
.sticky-col{position:sticky;top:92px}

/* ---------- single service page ---------- */
.svc-head{display:grid;grid-template-columns:118px 1fr;gap:30px;align-items:start;margin-top:26px}
.svc-no{font:500 14px 'IBM Plex Mono',monospace;color:var(--tile);border-top:2px solid var(--tile);padding-top:10px}
.svc-no em{display:block;font-style:normal;font-size:11.5px;color:var(--mut2);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.intro{font-size:19px;line-height:1.52;color:var(--ink2);max-width:36em}
.pagernav{display:flex;justify-content:space-between;gap:26px;margin-top:28px;border-top:1px solid var(--rule);padding-top:16px}
.pagernav a{font-weight:600;font-size:16px;max-width:22em}
.pagernav a:hover{color:var(--tile)}
.pagernav span{display:block;font:500 10.5px 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--mut2);margin-bottom:5px}
.pagernav .nx{text-align:right;margin-left:auto}

/* jump list on the services page */
.idx .t em{display:block;font-style:normal;font-size:13.5px;color:var(--mut);margin-top:3px}
.idx.jump .t a{border-bottom:1.5px solid var(--tile)}

/* what we will not do */
.ledg.nope li b{padding-left:22px;position:relative;font-weight:500}
.ledg.nope li b::before{content:'\00d7';position:absolute;left:0;top:-1px;color:var(--tile);font-size:17px;line-height:1}

/* ---------- form extras ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--mut2);font-size:11px}
.formerr{border-left:2px solid var(--tile);background:rgba(178,63,28,.08);padding:13px 16px;font-size:15px;margin-bottom:24px}
.err{color:var(--tiled);font-size:13.5px;margin-top:6px}
.fld input.bad,.fld textarea.bad{border-color:var(--tile);background:rgba(178,63,28,.04)}
.form .capt{margin-top:4px}

/* ============================================================
   screen internals that belong to one mockup only
   ============================================================ */
.win-hero{right:auto;bottom:auto;width:470px;height:396px}
.fit.narrow .win-hero{width:100%;height:404px;right:auto;bottom:auto}
.upi{left:462px;top:196px;width:156px}
.fit.narrow .upi{left:auto;right:0;top:422px;width:206px}
.win-chat{background:#EDE6DA}
.words .irn{display:block;margin-top:3px;color:var(--mut2);font-size:6.8px;letter-spacing:.02em}

/* build console + preview */
.scr.s-build{display:grid;grid-template-columns:1.06fr .94fr;gap:9px}
.prev{border:1px solid var(--rule);background:var(--card);padding:8px;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden}
.prev-h{display:flex;align-items:center;gap:6px;font:600 8.6px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif}
.ok{margin-left:auto;font:500 6.8px 'IBM Plex Mono',monospace;letter-spacing:.06em;color:var(--moss);border:1px solid #BCCFC0;padding:2px 5px;animation:pop .4s var(--ease) 1.9s both}
.pc{border:1px solid var(--rule2);padding:6px 7px;background:var(--white);animation:slidein .5s var(--ease) both;animation-delay:calc(.9s + var(--i)*.2s)}
.pc .pt{display:flex;align-items:center;gap:5px;font:600 8px 'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;margin-bottom:5px}
.pc .pt s{width:11px;height:11px;background:var(--tile);display:block}
.pc u{display:block;text-decoration:none;height:4px;width:var(--w,60%);background:var(--rule)}
.pc u+u{margin-top:4px;width:38%;background:var(--rule2)}
.pbar{height:5px;background:var(--rule2);margin-top:auto;overflow:hidden}
.pbar i{display:block;height:100%;width:74%;background:var(--tile);transform-origin:0;animation:growx 1.1s var(--ease) 1.5s both}
.pfoot{display:flex;font:500 7.4px 'IBM Plex Mono',monospace;color:var(--mut2);animation:rise .5s var(--ease) 1.9s both}
.pfv{margin-left:auto;color:var(--tile)}

/* wireframe */
.scr.s-layout{display:grid;grid-template-columns:1fr 92px;gap:9px}
.s-layout .rsp{width:auto}

/* chat sits under its own header bar */
.win-chat .chat-wrap{top:56px}

/* ---------- narrow mockup adjustments ---------- */
.fit.narrow .qr{display:none}
.fit.narrow .sums{width:116px;padding-left:7px}
.fit.narrow .scr.s-build{grid-template-columns:1fr .86fr;gap:7px}
.fit.narrow .ord-g{grid-template-columns:1fr 104px;gap:7px}
.fit.narrow .srow{grid-template-columns:30px 1fr 24px 24px 24px 36px;gap:4px}
.fit.narrow .scr.s-layout{grid-template-columns:1fr 74px}
.fit.narrow .bub{max-width:84%}
.fit.narrow .bub.card{width:74%;max-width:74%}

@media (max-width:1040px){
  .hero-in{grid-template-columns:1fr;gap:26px}
  .cols-c{grid-template-columns:1fr;gap:34px}
  .sticky-col{position:static}
  .svc-head{grid-template-columns:1fr;gap:12px}
  .svc-no{display:inline-block;border-top:0;border-left:2px solid var(--tile);padding:0 0 0 12px}
  .svc-no em{display:inline;margin-left:8px}
}
@media (max-width:620px){
  .hero{padding:28px 0 34px}
  .pagernav{flex-direction:column;gap:18px}
  .pagernav .nx{text-align:left;margin-left:0}
  .facts b{display:block;margin-bottom:2px}
}

/* ---------- contact details ---------- */
.callbox{border-left:2px solid var(--tile);padding-left:22px}
.bignum{margin-top:14px;font-family:'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;line-height:1.1}
.bignum a:hover{color:var(--tile)}
.callrow{margin-top:10px}
.addr{margin-top:18px;font-style:normal;font:400 14.5px/1.55 'IBM Plex Mono',monospace;color:var(--mut)}
.addr span{display:block}
.orwa{display:block;margin-top:10px;font-size:14.5px;color:var(--ntx)}
.orwa a{border-bottom:1px solid var(--nrule)}
.orwa a:hover{color:#E08B5A}

/* two groups, unequal columns, second one dropped down the page */
.cols-stag{display:grid;grid-template-columns:1.12fr .88fr;gap:38px;align-items:start}
.cols-stag > div:last-child{margin-top:18px}
@media (max-width:1040px){.cols-stag{grid-template-columns:1fr;gap:26px}.cols-stag > div:last-child{margin-top:0}}

/* one service: text and screen share the width more evenly */
.cols-svc{display:grid;grid-template-columns:1.02fr .98fr;gap:36px;align-items:start}
@media (max-width:1040px){.cols-svc{grid-template-columns:1fr;gap:34px}}

/* ============================================================
   Services mega menu, FAQ blocks, Insights
   ============================================================ */

/* --- the services panel under the nav ------------------------------- */
.menu .has-sub{position:static;display:flex;align-items:center}
.subwrap{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--ink);opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .17s var(--ease),transform .17s var(--ease),visibility .17s;z-index:60}
.menu .has-sub:hover .subwrap,.menu .has-sub:focus-within .subwrap{opacity:1;visibility:visible;transform:none}
.subgrid{display:grid;grid-template-columns:repeat(4,1fr);padding:20px 0 22px}
.subcol{padding:0 20px;border-left:1px solid var(--rule2)}
.subcol:first-child{border-left:0;padding-left:0}
.subcol:last-child{padding-right:0}
.subcol h5{font:600 10.5px 'IBM Plex Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--tile);margin:0 0 9px}
.subcol h5 i{font-style:normal;color:var(--mut2);margin-right:7px}
.menu .subcol a{display:block;font-size:13.2px;font-weight:400;color:var(--ink2);padding:5px 0;border-bottom:1px solid var(--rule2);line-height:1.32}
.menu .subcol a:last-of-type{border-bottom:0}
.menu .subcol a:hover{color:var(--tile)}
.menu .subcol a::after{display:none}
.subfoot{border-top:1px solid var(--rule);padding:11px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.menu .subfoot a{font:600 12px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--tile);border:0;padding:0}
.subfoot p{font-size:12.6px;color:var(--mut)}

/* --- questions ------------------------------------------------------- */
.qa{margin:0}
.qa-i{border-top:1px solid var(--rule);padding:12px 0}
.qa-i:last-child{border-bottom:1px solid var(--rule)}
.qa dt{display:grid;grid-template-columns:32px 1fr;gap:11px;font-family:'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:16.2px;letter-spacing:-.012em;line-height:1.32;align-items:baseline;color:var(--ink)}
.qa .qn{font:500 11px 'IBM Plex Mono',monospace;color:var(--tile)}
.qa dd{margin:5px 0 0 43px;color:var(--mut);font-size:14.8px;line-height:1.6;max-width:60ch}
.night .qa dt{color:#fff}
.night .qa dd{color:var(--ntx)}
.night .qa-i{border-color:var(--nrule)}

/* --- insights -------------------------------------------------------- */
.posts{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.posts li{border-bottom:1px solid var(--rule)}
.posts a{display:grid;grid-template-columns:54px 1.45fr .95fr auto;gap:20px;align-items:baseline;padding:14px 0}
.posts a:hover .pt{color:var(--tile)}
.posts .pn{font:500 11px 'IBM Plex Mono',monospace;color:var(--mut2)}
.posts .pt{font-family:'Segoe UI','Segoe UI Variable Text',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:17px;letter-spacing:-.015em;line-height:1.26;transition:color .18s}
.posts .pd{font-size:13.8px;color:var(--mut);line-height:1.5}
.posts .pm{font:400 11.5px 'IBM Plex Mono',monospace;color:var(--mut2);white-space:nowrap}
.artbody{max-width:68ch}
.artbody h2{font-size:clamp(21px,2.2vw,27px);margin-top:30px;letter-spacing:-.02em}
.artbody h3{font-size:18.5px;margin-top:22px}
.artbody p{margin-top:13px;color:var(--ink2);line-height:1.66}
.artbody ul{margin:13px 0 0;padding-left:0;list-style:none}
.artbody ul li{position:relative;padding-left:20px;margin-top:7px;color:var(--ink2);line-height:1.6}
.artbody ul li::before{content:'';position:absolute;left:3px;top:.62em;width:7px;height:1.5px;background:var(--tile)}
.artmeta{display:flex;gap:18px;flex-wrap:wrap;font:400 12px 'IBM Plex Mono',monospace;color:var(--mut2);letter-spacing:.04em}

@media (max-width:980px){
  .subgrid{grid-template-columns:repeat(2,1fr);gap:14px 0}
  .posts a{grid-template-columns:40px 1fr;gap:12px}
  .posts .pd,.posts .pm{display:none}
}
@media (max-width:860px){
  /* the panel becomes part of the burger list, always open, no hover needed */
  .menu .has-sub{display:block}
  .subwrap{position:static;opacity:1;visibility:visible;transform:none;border:0;background:transparent}
  .subgrid{grid-template-columns:1fr;padding:2px 0 8px}
  .subcol{padding:0;border-left:0;border-top:1px solid var(--rule2);padding-top:9px;margin-top:9px}
  .subcol:first-child{border-top:0;margin-top:2px;padding-top:0}
  .site.open .menu .subcol a{font-size:14.6px;padding:6px 0;border-bottom:0}
  .subfoot{display:none}
  .qa dd{margin-left:0}
  .qa dt{grid-template-columns:26px 1fr;gap:9px;font-size:15.4px}
}

/* --- services submenu toggle: phones only --------------------------- */
.subtog{display:none}
@media (max-width:860px){
  /* the panel is collapsed until tapped, so Work, Studio and Contact stay
     reachable without scrolling past 33 service links */
  .site.open .menu .has-sub{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--rule2)}
  .site.open .menu .has-sub > a{flex:1;border-bottom:0}
  .subtog{display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border:1px solid var(--rule);background:transparent;cursor:pointer;padding:0;position:relative}
  .subtog s{position:absolute;display:block;background:var(--ink);transition:transform .2s var(--ease),opacity .2s}
  .subtog s:first-child{width:13px;height:1.6px}
  .subtog s:last-child{width:1.6px;height:13px}
  .has-sub.open .subtog{border-color:var(--tile);background:var(--tilel)}
  .has-sub.open .subtog s{background:var(--tile)}
  .has-sub.open .subtog s:last-child{transform:scaleY(0);opacity:0}
  .subwrap{display:none;flex-basis:100%}
  .has-sub.open .subwrap{display:block}
  .subcol{max-width:none}
}

/* --- the open menu must scroll on a phone ---------------------------
   It is absolutely positioned inside a sticky header, so it does not move
   when the page scrolls. With the services panel expanded it is taller than
   the viewport, which put the lower nav items out of reach. Cap it to the
   space below the bar and let it scroll on its own. */
@media (max-width:860px){
  .site.open .menu{
    max-height:calc(100vh - 66px);
    max-height:calc(100dvh - 66px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:26px;
  }
}

/* --- the lockup: wordmark with TECHNOLOGIES centred beneath it --- */
.logo{display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
.logo .wm{font-weight:700;font-size:23px;letter-spacing:-.037em;color:var(--ink);line-height:1}
.logo .wm b{color:var(--tile);font-weight:700;margin-right:1px}
.logo em{font:600 8.1px/1 'IBM Plex Mono',monospace;font-style:normal;letter-spacing:.235em;text-transform:uppercase;color:var(--mut);text-indent:.235em}
.night .logo .wm,.logo--f .wm{color:#fff}
.logo--f em{color:var(--ntx)}
@media (max-width:860px){ .logo .wm{font-size:20px} .logo em{font-size:7.2px;letter-spacing:.2em;text-indent:.2em} }

/* ============================================================
   Hero motion, header weight, mobile menu rhythm
   ============================================================ */

/* --- headline rises line by line, each masked so it lifts into view --- */
.hero-h1 .hl{display:block;overflow:hidden;padding-bottom:.06em}
.hero-h1 .hl i{display:block;font-style:normal;transform:translateY(108%);transition:transform .82s cubic-bezier(.16,.84,.26,1)}
.hero-h1 .hl:nth-child(2) i{transition-delay:.1s}
[data-rv].in .hero-h1 .hl i,.still .hero-h1 .hl i{transform:none}
.hero-lede{max-width:30ch}

/* --- one line that cycles through what actually gets built --- */
.hero-roll{margin-top:12px;font-size:15px;color:var(--mut);font-family:'IBM Plex Mono',monospace;letter-spacing:.01em;display:flex;gap:7px;align-items:baseline}
.roll{position:relative;display:inline-block;height:1.5em;overflow:hidden;flex:1;min-width:0}
.roll span{display:block;height:1.5em;line-height:1.5em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tile)}
.roll{--n:5}
@media (prefers-reduced-motion:no-preference){
  .roll span:first-child{animation:rollup 13s steps(1,end) infinite}
}
@keyframes rollup{
  0%,16%   {transform:translateY(0)}
  20%,36%  {transform:translateY(-100%)}
  40%,56%  {transform:translateY(-200%)}
  60%,76%  {transform:translateY(-300%)}
  80%,96%  {transform:translateY(-400%)}
  100%     {transform:translateY(0)}
}
.still .roll span:first-child{animation:none}
.facts--tight li{padding:9px 0}

/* --- header: give the bar something to hold on to --- */
.site::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:var(--sp,0%);background:var(--tile);transition:width .1s linear}
.site.stuck{box-shadow:0 1px 0 rgba(23,24,26,.06),0 10px 28px -22px rgba(23,24,26,.5)}
.barcta{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--sysfont,inherit);background:var(--ink);color:#fff;padding:10px 15px;letter-spacing:-.005em;transition:background .2s,transform .12s}
.barcta:hover{background:var(--tile)}
.barcta:active{transform:translateY(1px)}
.barcta s{width:5px;height:5px;border-radius:50%;background:#49B06B;display:block;text-decoration:none}
.bar .barmail{margin-left:0}
@media (max-width:980px){ .barcta{display:none} }

/* --- mobile menu: numbers, rules and a staggered entrance --- */
@media (max-width:860px){
  .site.open .menu{padding-bottom:0}
  .site.open .menu > a,.site.open .menu .has-sub{opacity:0;transform:translateY(-7px);animation:menuin .34s cubic-bezier(.2,.75,.25,1) forwards}
  .site.open .menu > *:nth-child(1){animation-delay:.02s}
  .site.open .menu > *:nth-child(2){animation-delay:.06s}
  .site.open .menu > *:nth-child(3){animation-delay:.10s}
  .site.open .menu > *:nth-child(4){animation-delay:.14s}
  .site.open .menu > *:nth-child(5){animation-delay:.18s}
  .site.open .menu > *:nth-child(6){animation-delay:.22s}
  .site.open .menu > a,.site.open .menu .has-sub > a{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
  .site.open .menu > a.on,.site.open .menu .has-sub > a.on{color:var(--tile)}

  /* the catalogue reads as a numbered index, not a grey wall */
  .subcol{border-top:0;margin-top:0;padding-top:0}
  .subcol h5{display:flex;align-items:baseline;gap:9px;margin:16px 0 4px;font-size:10.5px;letter-spacing:.17em;color:var(--tile)}
  .subcol h5 i{color:var(--mut2)}
  .subcol h5::after{content:'';flex:1;height:1px;background:var(--rule2)}
  .site.open .menu .subcol a{display:flex;align-items:baseline;gap:11px;font-size:14.4px;color:var(--ink2);padding:8px 0;border-bottom:1px solid rgba(199,200,196,.5);counter-increment:svc}
  .site.open .menu .subcol a::before{content:counter(svc,decimal-leading-zero);font:500 10px 'IBM Plex Mono',monospace;color:var(--mut2);flex:none;width:19px}
  .site.open .menu .subcol a:active{color:var(--tile)}
  .subgrid{counter-reset:svc}
  .subfoot{display:flex;padding:14px 0 4px;border-top:1px solid var(--rule)}
  .site.open .menu .subfoot a{font-size:12px;border:0;padding:0}
  .subfoot p{display:none}

  /* a way to call without scrolling the whole menu */
  .menufoot{display:flex;gap:9px;padding:14px 0 18px;border-top:1px solid var(--ink);margin-top:10px}
  .menufoot a{flex:1;text-align:center;padding:12px 8px;font:600 13.5px/1 inherit;border:1px solid var(--ink)}
  .menufoot a.p{background:var(--ink);color:#fff}
  .site.open .menu .menufoot a{border-bottom:1px solid var(--ink);font-size:13.5px}
}
@keyframes menuin{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .site.open .menu > a,.site.open .menu .has-sub{opacity:1;transform:none;animation:none}
  .hero-h1 .hl i{transform:none}
}

/* --- footer legal links --- */
.flegal{display:flex;gap:20px;flex-wrap:wrap}
.flegal a{color:var(--ntx);opacity:.72;transition:opacity .18s,color .18s}
.flegal a:hover{opacity:1;color:var(--tile)}

/* --- WhatsApp bubble, every page --- */
.wabub{position:fixed;right:18px;bottom:18px;z-index:80;display:inline-flex;align-items:center;gap:9px;
  background:#1F7A4D;color:#fff;padding:12px 16px 12px 13px;border-radius:999px;
  box-shadow:0 10px 26px -10px rgba(23,24,26,.55),0 2px 6px rgba(23,24,26,.18);
  font:600 14px/1 inherit;letter-spacing:-.005em;
  transition:transform .18s cubic-bezier(.2,.75,.25,1),background .18s,box-shadow .18s}
.wabub svg{width:21px;height:21px;flex:none;display:block}
.wabub:hover{background:#176139;transform:translateY(-2px);box-shadow:0 16px 32px -12px rgba(23,24,26,.6)}
.wabub:active{transform:translateY(0)}
.wabub span{white-space:nowrap}
@media (max-width:620px){
  .wabub{right:14px;bottom:14px;padding:13px;gap:0}
  .wabub span{display:none}
  .wabub svg{width:23px;height:23px}
}
@media print{ .wabub{display:none} }

/* --- contact form: the number sits right beside the form --- */
.fcap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 18px;padding:13px 15px;
  border:1px solid var(--rule);background:var(--card)}
.fcap b{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.fcap b a{color:inherit}
.fcap b a:hover{color:var(--tile)}
.fcap span{font:400 13.2px/1.45 'IBM Plex Mono',monospace;color:var(--mut)}
.fcap i{font-style:normal;color:var(--tile)}

/* --- article thumbnails --- */
.posts a{align-items:center}
.posts .th{display:block;width:118px;height:66px;object-fit:cover;background:var(--paper2);flex:none;border:1px solid var(--rule2)}
.posts a{grid-template-columns:118px 1.4fr .9fr auto;gap:18px}
.artthumb{display:block;width:100%;height:auto;border:1px solid var(--rule);margin-bottom:22px}
@media (max-width:980px){
  .posts a{grid-template-columns:92px 1fr;gap:13px}
  .posts .th{width:92px;height:52px}
}

/* ============================================================
   App-window treatment for every demo screen on the site.
   Coloured chrome, layered depth and a rounded frame, so the
   mockups read as real application windows rather than diagrams.
   ============================================================ */
.win{
  border-radius:9px;
  border:1px solid rgba(23,24,26,.14);
  box-shadow:
    0 1px 2px rgba(23,24,26,.06),
    0 6px 14px -6px rgba(23,24,26,.18),
    0 26px 50px -24px rgba(23,24,26,.42);
}
.win-bar{
  height:30px;gap:6px;padding:0 11px;
  background:linear-gradient(to bottom,#FCFCFB,#F2F2EF);
  border-bottom:1px solid rgba(23,24,26,.11);
  border-radius:8px 8px 0 0;
}
/* traffic lights, the thing that makes a frame read as a window */
.win-bar s{width:9px;height:9px;border-radius:50%;opacity:1;background:#E5564A;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.win-bar s:nth-of-type(2){background:#E9B13C}
.win-bar s:nth-of-type(3){background:#4CB263}
.win-bar .u{margin-left:5px;color:#8A8C8A;font-size:9.2px}
.win-bar .demo{border-radius:3px}

/* the stage gets a little air under it so the shadow has somewhere to fall */
.fit-in{padding-bottom:2px}

/* avatars: initials in a tinted disc. Nobody's face is invented. */
.av{display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%;
  font:600 8.4px 'Segoe UI',system-ui,sans-serif;color:#fff;letter-spacing:.01em}
.av-a{background:#B23F1C}.av-b{background:#2E5A3B}.av-c{background:#2F4A78}
.av-d{background:#7A4A86}.av-e{background:#8A6A20}

/* the chat screen gets a sender strip, like a real thread */
.bub{position:relative}
.bub .who{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.bub .who .av{width:16px;height:16px;font-size:7.6px}
.bub .who b{font:600 8.6px 'Segoe UI',system-ui,sans-serif;color:var(--ink)}
.bub .who i{font-style:normal;font:400 7.4px 'IBM Plex Mono',monospace;color:var(--mut2);margin-left:auto}

/* --- coloured app rail, so a screen reads as software with navigation --- */
.scr.has-rail{padding-left:46px}
.rail{position:absolute;left:0;top:30px;bottom:0;width:46px;background:#231B2E;
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:9px 0 10px;z-index:3}
.rail .logo-dot{width:17px;height:17px;border-radius:5px;background:var(--tile);flex:none;margin-bottom:3px}
.rail a{display:flex;flex-direction:column;align-items:center;gap:2.5px;width:36px;padding:4px 0;border-radius:5px;cursor:default}
.rail a i{width:13px;height:13px;border-radius:3px;background:rgba(255,255,255,.3);display:block}
.rail a u{text-decoration:none;font:500 6.2px 'Segoe UI',system-ui,sans-serif;color:rgba(255,255,255,.55);letter-spacing:.02em}
.rail a.on{background:rgba(255,255,255,.12)}
.rail a.on i{background:var(--tile)}
.rail a.on u{color:#fff}
.rail .me{width:19px;height:19px;font-size:7.6px;margin-top:auto}
.stk-h,.srow,.stk-f{position:relative;z-index:1}

/* the chat avatar disc carries initials now */
.chat-h s.av{width:19px;height:19px;font-size:8px;border-radius:50%}

/* ============================================================
   Contrast pass. The page had become one long ruled list on
   white, which reads as a reference page. Give it blocks,
   weight and colour instead.
   ============================================================ */

/* BUG: the mobile menu's call buttons were visible in the desktop bar */
.menufoot{display:none}

/* --- bands carry real tone now, not a 2% tint --- */
.sec.band{background:#F0EFEB;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* --- the process block goes dark: a solid anchor mid page --- */
.sec.band.band--dark{background:var(--night);border-color:var(--nrule)}
.band--dark h2,.band--dark h3,.band--dark h4{color:#fff}
.band--dark p,.band--dark .lede{color:var(--ntx)}
.band--dark .steps-list li{border-top-color:var(--nrule)}
.band--dark .steps-list .sn{color:var(--tile)}
.band--dark .ledg li{border-bottom-color:var(--nrule)}
.band--dark .ledg b{color:#fff}
.band--dark .ledg span{color:var(--mut2)}
.band--dark .note-box{border-left-color:var(--tile);color:var(--ntx)}

/* --- "what is in it" stops being another grey hairline list --- */
.idx--strong{border-top:2px solid var(--ink)}
.idx--strong li{border-bottom:1px solid var(--rule);padding:14px 0;grid-template-columns:40px 1fr;gap:16px;align-items:start}
.idx--strong li .n{font:600 12px 'IBM Plex Mono',monospace;color:#fff;background:var(--tile);
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:4px;margin-top:-2px}
.idx--strong li .t{font-size:16px;font-weight:500;color:var(--ink);line-height:1.45}

/* --- the demo screen gets more of the page, it is the most interesting thing --- */
@media (min-width:981px){
  .cols-svc{grid-template-columns:.88fr 1.12fr;gap:42px}
}

/* --- questions sit in a panel instead of floating on white --- */
.faqs{background:#F0EFEB;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.faqs .qa-i{border-top-color:var(--rule)}
.faqs .qa dt{font-size:16.6px}

/* --- headings get more weight against the body text --- */
h2{letter-spacing:-.026em}
.sec h2,.sec-tight h2{font-size:clamp(26px,2.9vw,38px);line-height:1.1}
.intro{font-size:18px;line-height:1.62;color:var(--ink2)}
.idx .d{color:var(--mut)}

/* --- a terracotta rule under every section heading, for rhythm --- */
.sec > .wrap > h2::after,.sec-tight > .wrap > h2::after{
  content:'';display:block;width:54px;height:4px;background:var(--tile);margin-top:14px}

/* ============================================================
   Grid children must be allowed to shrink.
   A grid item defaults to min-width:auto, so a fixed-width mockup
   inside one sizes the whole track to its min-content. On a phone
   that pushed the hero track to 428px inside a 358px column, and
   the fit script then measured the inflated width and scaled UP
   to match, clipping the headline and the rolling line.
   ============================================================ */
.hero-in > *,
.cols-a > *, .cols-b > *, .cols-c > *, .cols2 > *,
.cols-svc > *, .cols-stag > *, .lgrid > *, .bandgrid > *,
.grid > *, .prow > *{min-width:0}
.hero-stage,.sticky-col,.fit{min-width:0;max-width:100%}


/* --- the definition line: what an answer engine quotes --- */
.sdef{font-size:17px;line-height:1.6;color:var(--ink2);padding:14px 0 14px 16px;
  border-left:3px solid var(--tile);background:var(--card);margin-bottom:20px}
.sdef b{color:var(--ink);font-weight:700}
@media (max-width:620px){ .sdef{font-size:16px;padding:12px 0 12px 13px} }

/* --- the arithmetic check on the contact form --- */
.sumfld{max-width:22em}
.sumfld input{max-width:7em;text-align:center;font-family:'IBM Plex Mono',monospace;letter-spacing:.06em}
.sumhint{margin-top:6px;font-size:12.6px;color:var(--mut);line-height:1.5}

/* ============================================================
   Footer: two columns, with the mark as a watermark behind it
   ============================================================ */
footer{position:relative;overflow:hidden}

/* the dot, blown up and held back so it reads as a watermark, not a logo */
.footmark{position:absolute;right:-70px;bottom:-110px;width:420px;height:420px;
  border-radius:50%;background:var(--tile);opacity:.07;pointer-events:none;z-index:0}
footer > .wrap{position:relative;z-index:1}

.ftop{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.ftb p{max-width:40ch}
.ftcontact{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.ftcontact a{font:500 14.5px/1 'IBM Plex Mono',monospace;letter-spacing:.01em;
  border-bottom:1px solid rgba(185,187,185,.3);padding-bottom:3px;display:inline-block}
.ftcontact a:hover{color:var(--tile);border-bottom-color:var(--tile)}
footer address{font-style:normal;margin-top:20px;display:grid;gap:3px;
  font-size:13.6px;color:var(--ntx);opacity:.8}

/* the two link lists sit side by side inside the second column */
.ftlinks{display:grid;grid-template-columns:1fr 1fr;gap:34px}

@media (max-width:860px){
  .ftop{grid-template-columns:1fr;gap:34px}
  .ftlinks{gap:26px}
  .footmark{right:-110px;bottom:-150px;width:320px;height:320px;opacity:.06}
}
@media (max-width:460px){
  .ftlinks{grid-template-columns:1fr;gap:22px}
}

/* ============================================================
   Ask Pixadox: the on-site assistant
   ============================================================ */
.pb-launch{position:fixed;right:18px;bottom:84px;z-index:81;display:inline-flex;align-items:center;gap:9px;
  background:var(--ink);color:#fff;padding:12px 16px 12px 13px;border:0;border-radius:999px;cursor:pointer;
  font:600 14px/1 inherit;letter-spacing:-.005em;
  box-shadow:0 10px 26px -10px rgba(23,24,26,.55),0 2px 6px rgba(23,24,26,.18);
  transition:transform .18s cubic-bezier(.2,.75,.25,1),background .18s}
.pb-launch svg{width:20px;height:20px;flex:none;display:block}
.pb-launch:hover{background:var(--tile);transform:translateY(-2px)}
.pb-launch:active{transform:translateY(0)}

.pb-panel{position:fixed;right:18px;bottom:84px;z-index:82;width:min(380px,calc(100vw - 36px));
  max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(23,24,26,.5),0 2px 8px rgba(23,24,26,.1)}
.pb-panel[hidden]{display:none}

.pb-head{display:flex;align-items:baseline;gap:9px;padding:14px 46px 13px 16px;position:relative;
  background:var(--ink);color:#fff}
.pb-head b{font-size:15.5px;letter-spacing:-.015em}
.pb-head span{font:400 11.6px/1 'IBM Plex Mono',monospace;color:var(--ntx);letter-spacing:.03em}
.pb-x{position:absolute;right:8px;top:8px;width:30px;height:30px;border:0;background:transparent;
  color:#fff;font-size:21px;line-height:1;cursor:pointer;opacity:.75}
.pb-x:hover{opacity:1}

.pb-log{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:11px;
  background:var(--card)}
.pb-msg p{margin:0;font-size:14.4px;line-height:1.55}
.pb-bot p{background:#fff;border:1px solid var(--rule2);padding:10px 12px;border-radius:2px 10px 10px 10px;color:var(--ink2)}
.pb-you{align-self:flex-end;max-width:85%}
.pb-you p{background:var(--ink);color:#fff;padding:9px 12px;border-radius:10px 2px 10px 10px}
.pb-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.pb-links a{font:600 12.2px/1 'IBM Plex Mono',monospace;letter-spacing:.02em;color:var(--tile);
  border:1px solid var(--tile);padding:6px 9px;border-radius:3px}
.pb-links a:hover{background:var(--tile);color:#fff}
.pb-chips{display:flex;flex-wrap:wrap;gap:6px}
.pb-chips button{font:500 12.6px/1.3 inherit;text-align:left;background:#fff;color:var(--ink2);
  border:1px solid var(--rule);padding:8px 10px;border-radius:14px;cursor:pointer}
.pb-chips button:hover{border-color:var(--tile);color:var(--tile)}

.pb-form{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--rule);background:#fff}
.pb-form input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--rule);border-radius:4px;
  font:400 14.4px inherit;background:var(--card)}
.pb-form input:focus{outline:2px solid var(--tile);outline-offset:-1px;background:#fff}
.pb-form button{border:0;background:var(--ink);color:#fff;padding:10px 15px;border-radius:4px;
  font:600 13.6px/1 inherit;cursor:pointer}
.pb-form button:hover{background:var(--tile)}

@media (max-width:620px){
  .pb-launch{right:14px;bottom:76px;padding:12px 14px 12px 12px;font-size:13.4px}
  .pb-panel{right:10px;left:10px;width:auto;bottom:76px;max-height:calc(100vh - 150px)}
}
@media print{ .pb-launch,.pb-panel{display:none} }

/* ============================================================
   The two floating actions: WhatsApp left, Ask right.
   One shared size so neither looks like the afterthought.
   ============================================================ */
.wabub,
.pb-launch{
  position:fixed;bottom:18px;z-index:81;
  display:inline-flex;align-items:center;gap:9px;
  height:46px;padding:0 17px 0 14px;border:0;border-radius:999px;cursor:pointer;
  font:600 14px/1 var(--sysfont,inherit);letter-spacing:-.005em;
  box-shadow:0 10px 26px -10px rgba(23,24,26,.55),0 2px 6px rgba(23,24,26,.18);
  transition:transform .18s cubic-bezier(.2,.75,.25,1),background .18s,box-shadow .18s;
}
.wabub{left:18px;right:auto;background:#1F7A4D;color:#fff}
.pb-launch{right:18px;left:auto;background:var(--ink);color:#fff}
.wabub:hover{background:#176139;transform:translateY(-2px)}
.pb-launch:hover{background:var(--tile);transform:translateY(-2px)}
.wabub:active,.pb-launch:active{transform:translateY(0)}

.wabub svg,
.pb-launch svg{width:21px;height:21px;flex:none;display:block}
.wabub span,
.pb-launch span{white-space:nowrap;display:inline}

/* the panel sits above its own launcher */
.pb-panel{right:18px;left:auto;bottom:76px}

@media (max-width:620px){
  .wabub,.pb-launch{height:44px;padding:0 14px 0 12px;font-size:13.2px;gap:8px;bottom:14px}
  .wabub{left:14px}
  .pb-launch{right:14px}
  .wabub svg,.pb-launch svg{width:20px;height:20px}
  /* both keep their label: an unlabelled pair of circles is a guessing game */
  .wabub span,.pb-launch span{display:inline}
  .pb-panel{right:10px;left:10px;bottom:70px;max-height:calc(100vh - 140px)}
}
@media (max-width:380px){
  .wabub span,.pb-launch span{display:none}
  .wabub,.pb-launch{padding:0 13px;gap:0}
}