/*
Theme Name: peek4tech
Theme URI: https://peek4tech.com/
Author: peek4tech
Author URI: https://peek4tech.com/
Description: Bento and terminal theme for peek4tech. Software house site covering AI, ERP, POS, websites, mobile apps and SEO.
Version: 1.9.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peek4tech
*/

/* ==========================================================================
   peek4tech - direction: BENTO (lead) × TERMINAL (accent)
   Warm product surface built from tiles; the machine shows through in the
   dark console tiles, mono labels and status readouts.

   COLOR
     canvas  #F4F3F1  warm gray ground        tile    #FFFFFF
     sand    #EDE9E2  second tile tone        ink     #14161A
     console #0B0E11  terminal tile ground    edge    #E3E1DD
     teal    #0E6E63  the accent (light)      amber   #FFB000  (console only)
     mint    #3FD0C9  console status          dim     #676C74
     data    #008E78 · #C97A16 · #A63D8F      (sample report series only)
   TYPE
     system sans     - headings + body
     ui-monospace    - labels, flags, status, figures  (the terminal voice)
   LAYOUT
     12-column bento. Tiles vary in both span and height; every third or
     fourth tile is a console, so the page alternates product and machine.
   ========================================================================== */

:root{
  --canvas:#F4F3F1;
  --tile:#FFFFFF;
  --sand:#EDE9E2;
  --ink:#14161A;
  --ink-2:#2A2E35;
  --dim:#676C74;
  --dim-2:#8E939B;
  --edge:#E3E1DD;
  --edge-2:#D3D0CA;
  --teal:#0E6E63;
  --teal-deep:#0A554C;
  --teal-soft:#E3F0EE;

  --console:#0B0E11;
  --console-2:#141A20;
  --console-edge:#232C35;
  --on-console:#DFE7EE;
  --on-console-dim:#7E8B98;
  --amber:#FFB000;
  --mint:#3FD0C9;

  --d1:#008E78; --d2:#C97A16; --d3:#A63D8F;

  --r:16px;
  --r-sm:10px;
  --gap:14px;
  --maxw:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;letter-spacing:-.03em;text-wrap:balance;font-weight:650}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
      font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.tnum{font-variant-numeric:tabular-nums}
section{padding:46px 0;scroll-margin-top:78px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 21px;border-radius:11px;
     font-size:14px;font-weight:600;border:1.5px solid transparent;
     transition:background .16s,color .16s,border-color .16s,transform .16s}
.btn:active{transform:translateY(1px)}
.b-dark{background:var(--ink);color:#fff}
.b-dark:hover{background:var(--teal)}
.b-teal{background:var(--teal);color:#fff}
.b-teal:hover{background:var(--teal-deep)}
.b-line{background:var(--tile);border-color:var(--edge-2);color:var(--ink)}
.b-line:hover{border-color:var(--ink)}
.b-amber{background:var(--amber);color:#0B0E11}
.b-amber:hover{background:#FFC33F}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:60;background:rgba(244,243,241,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--edge)}
.navrow{display:flex;align-items:center;gap:22px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.03em}
/* mark carried over from the long Blueprint build: outer square, solid block
   top-right, outlined block bottom-left. Recoloured to the teal accent -
   swap --teal for #0C6FBF here to get the original blue. */
.logo .mk{width:22px;height:22px;border:1.5px solid var(--teal);border-radius:3px;position:relative;flex:none}
.logo .mk::after{content:"";position:absolute;inset:3px 3px auto auto;width:7px;height:7px;background:var(--teal)}
.logo .mk::before{content:"";position:absolute;left:3px;bottom:3px;width:7px;height:7px;border:1.5px solid var(--teal)}
.navlinks{margin-left:auto;display:flex;gap:20px;font-size:14px;color:var(--dim)}
.navlinks a:hover{color:var(--ink)}
.navcta{padding:9px 16px;font-size:13.5px}

/* ---------- mobile nav ---------- */
.navtoggle{
  display:none;margin-left:auto;width:42px;height:42px;border-radius:11px;
  border:1px solid var(--edge-2);background:var(--tile);cursor:pointer;
  align-items:center;justify-content:center;padding:0;
}
.navtoggle:hover{border-color:var(--ink)}
.navtoggle .bars{position:relative;display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
                 transition:background .16s}
.navtoggle .bars::before,.navtoggle .bars::after{
  content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .18s ease,top .18s ease}
.navtoggle .bars::before{top:-6px}
.navtoggle .bars::after{top:6px}
.navtoggle[aria-expanded="true"] .bars{background:transparent}
.navtoggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}

/* The panel stays in the document and animates its height, because display
   none to block cannot be transitioned. visibility keeps the closed panel out
   of the tab order without breaking the animation. */
.navpanel{
  display:block;background:var(--canvas);
  border-top:1px solid transparent;
  max-height:0;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:max-height .34s cubic-bezier(.4,0,.2,1),
             opacity .2s ease,
             border-color .2s ease,
             visibility 0s linear .34s;
}
.navpanel.open{
  max-height:calc(100dvh - 62px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  opacity:1;visibility:visible;
  border-top-color:var(--edge);
  transition:max-height .38s cubic-bezier(.4,0,.2,1),
             opacity .24s ease .04s,
             border-color .12s ease,
             visibility 0s;
}

/* This element is <div class="wrap inner">, so only the vertical padding may be
   set here. A padding shorthand would wipe out the horizontal padding .wrap
   provides and push the whole panel flush against the screen edge. */
.navpanel .inner{
  display:flex;flex-direction:column;gap:0;
  padding-top:12px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));
}

/* each row slides down and fades in just after the panel starts opening */
.navpanel .inner > *{
  opacity:0;transform:translateY(-7px);
  transition:opacity .26s ease,transform .26s cubic-bezier(.4,0,.2,1);
}
.navpanel.open .inner > *{opacity:1;transform:none}
.navpanel.open .inner > *:nth-child(1){transition-delay:.05s}
.navpanel.open .inner > *:nth-child(2){transition-delay:.09s}
.navpanel.open .inner > *:nth-child(3){transition-delay:.13s}
.navpanel.open .inner > *:nth-child(4){transition-delay:.17s}
.navpanel.open .inner > *:nth-child(5){transition-delay:.21s}
.navpanel.open .inner > *:nth-child(6){transition-delay:.25s}
.navpanel.open .inner > *:nth-child(7){transition-delay:.29s}
.navpanel.open .inner > *:nth-child(8){transition-delay:.33s}
.navpanel.open .inner > *:nth-child(9){transition-delay:.37s}

/* room on both sides so nothing reads as stuck to the screen edge */
.navpanel a.link{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 14px;border-radius:12px;
  font-size:16.5px;font-weight:600;
  transition:background .16s ease,color .16s ease;
}
/* dividers drawn inset, so they stop short of the rounded corners and the edge */
.navpanel a.link + a.link::before{
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:var(--edge);
}
.navpanel a.link .mono{color:var(--dim-2)}
.navpanel a.link:hover{background:var(--sand)}
.navpanel a.link:active{background:var(--teal-soft);color:var(--teal)}
.navpanel a.link:active .mono{color:var(--teal)}

.navpanel .cta{margin-top:16px;justify-content:center;width:100%;padding-top:14px;padding-bottom:14px}
.navpanel .callrow{display:flex;gap:10px;margin-top:10px}
.navpanel .callrow a{flex:1;justify-content:center;padding-top:12px;padding-bottom:12px}

@media (prefers-reduced-motion:reduce){
  .navpanel,.navpanel.open,
  .navpanel .inner > *,.navpanel.open .inner > *{transition:none}
  .navpanel.open .inner > *{transition-delay:0s}
}

/* ---------- footer logo on dark ---------- */
footer .logo .mk{border-color:var(--mint)}
footer .logo .mk::after{background:var(--mint)}
footer .logo .mk::before{border-color:var(--mint)}

/* ---------- services quick strip (directly under the hero) ---------- */
.quickwrap{background:var(--tile);border:1px solid var(--edge);border-radius:var(--r);padding:18px 20px 20px}
.quickhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px}
.quickhead .t{font-size:15px;font-weight:650}
.quick{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.qcard{border:1px solid var(--edge);border-radius:12px;padding:14px 13px;display:flex;flex-direction:column;gap:9px;
       background:var(--canvas);transition:border-color .16s,background .16s,transform .16s}
.qcard:hover{border-color:var(--teal);background:var(--teal-soft);transform:translateY(-2px)}
.qcard .nm{font-size:14.5px;font-weight:650;letter-spacing:-.02em;line-height:1.25}
.qcard .ds{font-size:12.5px;color:var(--dim);line-height:1.45}
.qcard:hover .ds{color:var(--teal-deep)}

.ico{width:34px;height:34px;border-radius:10px;background:var(--teal-soft);color:var(--teal);
     display:grid;place-items:center;flex:none}
.ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico.lg{width:42px;height:42px;border-radius:12px}
.ico.lg svg{width:23px;height:23px}
.tile.ink .ico,.tile.term .ico{background:#1E242B;color:var(--mint)}

/* ---------- service cards ---------- */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.svc-card{background:var(--tile);border:1px solid var(--edge);border-radius:var(--r);padding:24px;
          display:flex;flex-direction:column;gap:12px;scroll-margin-top:88px;
          transition:transform .18s,box-shadow .18s,border-color .18s}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,22,26,.09);border-color:var(--edge-2)}
.svc-card .top{display:flex;align-items:center;gap:13px}
.svc-card h3{font-size:20px}
.svc-card .no{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--dim-2);letter-spacing:.08em}
.svc-card .lead{font-size:14.5px;line-height:1.6;color:var(--dim)}
.svc-card ul{display:flex;flex-direction:column;gap:8px}
.svc-card li{display:grid;grid-template-columns:15px 1fr;gap:10px;font-size:14px;line-height:1.5}
.svc-card li::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--teal);margin-top:6px}
.svc-card .bestfor{margin-top:auto;padding-top:15px;border-top:1px solid var(--edge);display:flex;gap:10px;align-items:baseline}
.svc-card .bestfor .mono{white-space:nowrap;flex:none}
.svc-card .bestfor .v{font-size:13.5px;color:var(--ink)}
.svc-card .go{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--teal);margin-top:2px}
.svc-card .go:hover{gap:11px}
.svc-card.wide{grid-column:span 3;flex-direction:row;gap:26px;align-items:stretch}
.svc-card.wide > div{flex:1;display:flex;flex-direction:column;gap:12px}

/* ---------- section heads ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;margin-bottom:20px}
.head h2{font-size:clamp(23px,3vw,32px)}
.head .lede{margin-top:9px;color:var(--dim);font-size:15.5px;max-width:64ch}
.head .side{flex:none;text-align:right}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.tile{background:var(--tile);border:1px solid var(--edge);border-radius:var(--r);padding:22px;
      display:flex;flex-direction:column;gap:10px;
      transition:transform .18s,box-shadow .18s,border-color .18s}
.tile:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,22,26,.08)}
.tile h3{font-size:19px}
.tile p{font-size:14.5px;line-height:1.62;color:var(--dim)}
.tile.sand{background:var(--sand);border-color:#DFDAD1}
.tile.ink{background:var(--ink);border-color:var(--ink);color:#F4F3F1}
.tile.ink p{color:#A5ABB4}
.tile.ink h3{color:#fff}
.tile.term{background:var(--console);border-color:var(--console-edge);color:var(--on-console);
           font-family:ui-monospace,Menlo,Consolas,monospace}
.tile.term p{color:var(--on-console-dim);font-size:13.5px}
.tile.term h3{color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.tile.term .mono{color:var(--on-console-dim)}
.tile.pad-0{padding:0;overflow:hidden}

.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}
.c9{grid-column:span 9}.c12{grid-column:span 12}
.r2{grid-row:span 2}

.eyebrow{display:flex;align-items:center;gap:8px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.tile.term .eyebrow .dot{background:var(--mint)}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:14px}
.chip{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;letter-spacing:.04em;
      border:1px solid var(--edge-2);border-radius:6px;padding:4px 8px;color:var(--dim);background:var(--tile)}
.tile.sand .chip{background:transparent;border-color:#CFC9BE}
.tile.ink .chip{background:transparent;border-color:#343941;color:#A5ABB4}
.tile.term .chip{background:transparent;border-color:var(--console-edge);color:var(--on-console-dim)}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--teal-soft);color:var(--teal);
      border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:600;align-self:flex-start}
.pill .led{width:6px;height:6px;border-radius:50%;background:var(--teal)}

/* ---------- hero ---------- */
.hero{padding:56px 0 8px}
.hero h1{font-size:clamp(34px,5.6vw,64px);line-height:1.04;max-width:17ch;margin-top:18px}
.hero .sub{margin-top:20px;max-width:60ch;font-size:17.5px;line-height:1.6;color:var(--dim)}
.hero .acts{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap}
.hero .fine{margin-top:14px;font-size:13.5px;color:var(--dim-2)}
.herogrid{margin-top:34px}

/* ---------- terminal bits ---------- */
.term-line{display:flex;gap:9px;font-size:13px;line-height:1.7}
.term-line .p{color:var(--mint);flex:none}
.term-line .c{color:#fff}
.term-out{color:var(--on-console-dim);font-size:13px;line-height:1.7;padding-left:20px}
.term-out b{color:var(--amber);font-weight:400}
.caret{display:inline-block;width:.55em;height:1.05em;background:var(--amber);vertical-align:-.16em;
       margin-left:.15em;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.statusbar{display:flex;flex-wrap:wrap;gap:18px;background:var(--console-2);border-top:1px solid var(--console-edge);
           padding:11px 18px;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--on-console-dim)}
.statusbar .ok{color:var(--mint)}
.statusbar .warn{color:var(--amber)}

/* ---------- stats ---------- */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.statgrid > div{display:flex;flex-direction:column;gap:3px}
.statgrid .v{font-size:23px;font-weight:650;letter-spacing:-.03em}
.tile.term .statgrid .v{color:var(--amber);font-family:ui-monospace,Menlo,monospace;font-size:20px}

/* ---------- dashboard mock ---------- */
.mock{background:var(--console);border-radius:var(--r-sm);padding:15px;display:flex;flex-direction:column;gap:11px}
.mock .mh{display:flex;justify-content:space-between;align-items:center;padding-bottom:9px;border-bottom:1px solid var(--console-edge)}
.mock .mh .t{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-console-dim)}
.mock .mh .s{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--mint)}
.mrow{display:flex;align-items:center;gap:10px}
.mrow .k{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--on-console-dim);width:78px;flex:none}
.mrow .track{flex:1;height:8px;border-radius:5px;background:#1F2831;overflow:hidden}
.mrow .fill{display:block;height:100%;border-radius:5px}
.mrow .v{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#E6EDF3;width:56px;text-align:right;flex:none;font-variant-numeric:tabular-nums}

/* ---------- receipt mock ---------- */
.receipt{background:var(--tile);border:1px solid var(--edge-2);border-radius:var(--r-sm);padding:14px;
         font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink)}
.receipt .tag{display:inline-block;margin-bottom:10px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
              color:#8A5A00;background:#FFF1D6;border-radius:5px;padding:3px 8px}
.receipt .ln{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--edge-2)}
.receipt .ln.tot{border-bottom:none;border-top:1.5px solid var(--ink);margin-top:6px;padding-top:9px;font-weight:700}

/* ---------- chat mock ---------- */
.chat{display:flex;flex-direction:column;gap:9px}
.bub{max-width:88%;padding:10px 13px;border-radius:12px;font-size:13.5px;line-height:1.5}
.bub.you{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:4px}
.bub.bot{align-self:flex-start;background:var(--canvas);border:1px solid var(--edge);color:var(--ink);border-bottom-left-radius:4px}
.bub.bot .src{display:block;margin-top:7px;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--dim-2)}

/* ---------- list rows ---------- */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:150px 1fr 92px;gap:18px;align-items:center;
     padding:15px 20px;border-bottom:1px solid var(--edge);transition:background .16s}
.row:last-child{border-bottom:none}
.row:hover{background:var(--canvas)}
.row .flag{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;color:var(--teal);font-weight:600}
.row .d{font-size:14px;color:var(--dim);line-height:1.55}
.row .st{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
         color:var(--teal);text-align:right}
.rows.on-ink .row{border-color:#262B33}
.rows.on-ink .row:hover{background:#1B1F26}
.rows.on-ink .flag{color:var(--amber)}
.rows.on-ink .d{color:#A5ABB4}
.rows.on-ink .st{color:var(--mint)}

/* ---------- ticks ---------- */
.ticks{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.ticks li{display:grid;grid-template-columns:16px 1fr;gap:11px;font-size:14.5px;line-height:1.55}
.ticks li::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--teal);margin-top:6px}
.ticks li b,.ticks li strong{font-weight:650}
.ticks li span{display:block;color:var(--dim);font-size:13.5px}
.tile.ink .ticks li::before{background:var(--mint)}
.tile.ink .ticks li span{color:#A5ABB4}

/* ---------- spec table ---------- */
.tablewrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--edge);background:var(--tile)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14.5px}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--edge);vertical-align:top}
thead th{background:var(--canvas);font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.11em;
         text-transform:uppercase;color:var(--dim);font-weight:400}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--canvas)}
td.k{font-weight:650;white-space:nowrap}
td.d{color:var(--dim)}
td.n{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- sample report chart ---------- */
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 18px}
.legend span{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim)}
.legend i{width:11px;height:11px;border-radius:3px;display:block}
.plot{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:end;height:180px;
      border-bottom:1px solid var(--edge-2);
      background:repeating-linear-gradient(0deg,transparent 0 35px,var(--edge) 35px 36px)}
.grp{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%}
.bar{width:15px;border-radius:4px 4px 0 0;box-shadow:0 0 0 2px var(--tile);transition:filter .15s}
.bar:hover{filter:brightness(1.12)}
.xaxis{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:9px}
.xaxis span{text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.readout{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--edge)}
.readout div{display:flex;flex-direction:column;gap:2px}
.readout .v{font-size:18px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---------- process ---------- */
.stepnum{width:26px;height:26px;border-radius:9px;background:var(--teal-soft);color:var(--teal);
         display:grid;place-items:center;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.tile.ink .stepnum{background:#22272F;color:var(--mint)}
.deliv{margin-top:auto;padding-top:14px;border-top:1px solid var(--edge)}
.tile.ink .deliv{border-color:#2A2F37}

/* ---------- plans ---------- */
.plan .tag{align-self:flex-start;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.09em;
           text-transform:uppercase;background:var(--teal-soft);color:var(--teal);border-radius:6px;padding:4px 9px}
.plan.ink .tag{background:#22272F;color:var(--mint)}
.plan ul{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.plan li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:14.5px}
.plan li::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--teal);margin-top:6px}
.plan.ink li::before{background:var(--mint)}
.plan .foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--edge)}
.plan.ink .foot{border-color:#2A2F37}

/* ---------- sectors ---------- */
.inds{display:flex;flex-wrap:wrap;gap:10px}
.ind{background:var(--tile);border:1px solid var(--edge);border-radius:11px;padding:12px 16px;font-size:14.5px;
     display:flex;align-items:center;gap:10px;transition:border-color .16s,color .16s,transform .16s}
.ind:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px)}
.ind .mono{color:var(--dim-2)}

/* ---------- faq ---------- */
.faq{background:var(--tile);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.faq details{border-bottom:1px solid var(--edge)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;padding:17px 22px;font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:14px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--teal);font-size:20px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"-"}
.faq summary:hover{background:var(--canvas)}
.faq .a{padding:0 22px 19px 58px;color:var(--dim);font-size:14.5px;line-height:1.65;max-width:80ch}
.faq .qn{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--dim-2);flex:none}

/* ---------- contact ---------- */
.cfields{display:flex;flex-direction:column;gap:14px;margin-top:22px}
.cfield{border-bottom:1px solid #2A2F37;padding-bottom:10px}
.cfield .v{display:block;font-size:17px;color:#fff;margin-top:5px}
.form{background:#1B1F26;border-radius:var(--r-sm);padding:20px;display:flex;flex-direction:column;gap:13px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8E959E}
.field input,.field select,.field textarea{background:#0F1318;border:1px solid #2E343C;border-radius:8px;color:#fff;
  padding:11px 12px;font:inherit;font-size:14px;width:100%}
.field input::placeholder,.field textarea::placeholder{color:#606871}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--mint);outline:none}
.field textarea{resize:vertical;min-height:84px}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#9AA0A9;margin-top:44px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding:42px 0 28px}
.fgrid h3{color:#fff;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:13px;font-weight:600}
.fgrid a{display:block;font-size:14px;padding:5px 0}
.fgrid a:hover{color:#fff}
.fabout{font-size:14px;line-height:1.65;max-width:38ch;margin-top:14px}
.fbar{border-top:1px solid #262B33;padding:0}

/* ===== laptop / small desktop ===== */
@media(max-width:1120px){
  .navlinks{gap:16px;font-size:13.5px}
  .svc{grid-template-columns:repeat(2,1fr)}
}

/* ===== tablet landscape - hamburger takes over ===== */
@media(max-width:940px){
  .navlinks,.navrow > .navcta{display:none}
  .navtoggle{display:flex}
  .c3,.c4,.c5,.c7,.c8,.c9{grid-column:span 6}
  .r2{grid-row:auto}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .quick{grid-template-columns:repeat(3,1fr)}
  .svc-card.wide{grid-column:span 2;flex-direction:column}
  section{padding:38px 0}
}

/* ===== tablet portrait ===== */
@media(max-width:820px){
  .head{flex-direction:column;align-items:flex-start;gap:10px}
  .head .side{text-align:left}
  .hero{padding:38px 0 8px}
  .hero .sub{font-size:16.5px}
}

/* ===== phone ===== */
@media(max-width:680px){
  .wrap{padding:0 16px}
  .c3,.c4,.c5,.c6,.c7,.c8,.c9,.c12{grid-column:span 12}
  .svc,.svc-card.wide{grid-template-columns:1fr;grid-column:span 1}
  .quick{grid-template-columns:repeat(2,1fr)}
  .statgrid{grid-template-columns:repeat(2,1fr);gap:18px 14px}
  .row{grid-template-columns:1fr;gap:5px;padding:14px 16px}
  .row .st{text-align:left}
  .fgrid{grid-template-columns:1fr;gap:26px}
  .plot,.xaxis{gap:7px}
  .bar{width:9px}
  .faq .a{padding-left:22px}
  .faq summary{padding:15px 16px;font-size:15px}
  .tile,.svc-card{padding:19px}
  .quickwrap{padding:16px}
  .contact,.form{padding:16px}
  .readout{gap:18px}
  .bub{max-width:94%}
  /* full-width tap targets for the two hero buttons */
  .hero .acts{gap:9px}
  .hero .acts .btn{flex:1;justify-content:center;min-width:150px}
}

/* ===== small phone ===== */
@media(max-width:430px){
  :root{--gap:11px}
  .wrap{padding:0 14px}
  .hero h1{font-size:31px;line-height:1.08}
  .hero .sub{font-size:15.5px}
  .head h2{font-size:23px}
  .quick{grid-template-columns:1fr}
  .qcard{flex-direction:row;align-items:center;gap:12px;padding:12px}
  .qcard .ico{margin:0}
  .qcard .nm{flex:none}
  .qcard .ds{display:none}
  .statgrid{grid-template-columns:1fr 1fr}
  .statgrid .v{font-size:20px}
  .svc-card .top{gap:11px}
  .svc-card h3{font-size:18px}
  .svc-card .no{font-size:10.5px}
  .plot{height:150px}
  .plot,.xaxis{gap:5px}
  .bar{width:7px}
  .xaxis span{font-size:10px}
  .term-line,.term-out{font-size:12px}
  .mrow .k{width:64px}
  .mrow .v{width:50px}
  .statusbar{gap:10px;font-size:10px}
  .logo{font-size:16px}
  .btn{padding:12px 18px}
  .pill{line-height:1.35}
  .pill .led{align-self:flex-start;margin-top:.42em}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   WordPress additions: skip link, form states, honeypot, editor content.
   ========================================================================== */

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
      padding:10px 16px;border-radius:0 0 10px 0;font-size:14px;font-weight:600}
.skip:focus{left:0}

/* honeypot: present for bots, never shown to or focusable by people */
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
    clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

.formnote{margin:14px 20px 0;padding:11px 13px;border-radius:10px;font-size:13.5px;line-height:1.5;
          border:1px solid var(--console-edge);background:var(--console-2);color:var(--on-console)}
.formnote.ok{border-color:#1F5E4E;color:var(--mint)}
.formnote.warn{border-color:#6B5216;color:var(--amber)}

/* generic content pages (privacy policy, posts, anything not the front page) */
.page-body{background:var(--tile);border:1px solid var(--edge);border-radius:var(--r);padding:30px}
.page-body h1{font-size:clamp(26px,4vw,38px);margin-bottom:14px}
.page-body h2{font-size:23px;margin:26px 0 10px}
.page-body h3{font-size:19px;margin:22px 0 8px}
.page-body p,.page-body li{font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.page-body p{margin:0 0 14px}
.page-body ul,.page-body ol{margin:0 0 14px;padding-left:20px;list-style:disc}
.page-body ol{list-style:decimal}
.page-body li{margin-bottom:6px}
.page-body a{color:var(--teal);text-decoration:underline}
.page-body img{max-width:100%;height:auto;border-radius:var(--r-sm)}
.page-body table{width:100%;border-collapse:collapse}
.page-body blockquote{margin:0 0 14px;padding-left:16px;border-left:3px solid var(--teal);color:var(--dim)}
.page-list{display:flex;flex-direction:column;gap:var(--gap)}
.page-list article{background:var(--tile);border:1px solid var(--edge);border-radius:var(--r);padding:22px}
.page-list h2{font-size:21px;margin-bottom:6px}
.page-list .meta{font-size:13px;color:var(--dim)}
.pager{display:flex;gap:10px;margin-top:18px}

/* ==========================================================================
   Hero: two columns. The copy keeps the left, and the right carries the offer
   panel so the top of the page is not half empty on a wide screen.
   ========================================================================== */

.herotop{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center}
.herotop .copy{min-width:0}
.herotop .copy .sub{max-width:52ch}

.hook{background:var(--console);border:1px solid var(--console-edge);border-radius:var(--r);
      color:var(--on-console);display:flex;flex-direction:column;overflow:hidden;
      box-shadow:0 18px 44px rgba(11,14,17,.16)}
.hook .body{padding:24px 24px 22px;display:flex;flex-direction:column;gap:13px}
.hook .eyebrow{display:flex;align-items:center;gap:9px}
.hook .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);flex:none;
                    box-shadow:0 0 0 3px rgba(255,176,0,.16)}
.hook .eyebrow .mono{color:var(--amber)}
.hook h2{font-size:clamp(20px,2.2vw,25px);line-height:1.18;color:#fff;letter-spacing:-.03em}
.hook .said{font-size:14.5px;line-height:1.6;color:#A8B2BC}
.hook .ticks li{font-size:14px}
.hook .ticks li::before{background:var(--mint)}
.hook .ticks li b,.ticks li strong{color:#fff;font-weight:650}
.hook .ticks li span{color:#8E99A4;font-size:13px}
.hook .btn{justify-content:center;margin-top:3px}
.hook .keep{font-size:12.5px;line-height:1.55;color:#8E99A4;
            border-top:1px solid var(--console-edge);padding-top:13px;margin-top:2px}
.hook .keep b,.hook .keep strong{color:var(--mint);font-weight:650}

@media (max-width:1040px){
  .herotop{grid-template-columns:1fr;gap:26px}
  .herotop .copy .sub{max-width:60ch}
  .hook{max-width:560px}
}
@media (max-width:520px){
  .hook .body{padding:20px 18px 18px}
  .hook .statusbar{gap:12px;padding:10px 18px}
}

/* ==========================================================================
   Footer logo fix.
   .fgrid a sets display:block and font-size:14px, and it outranks .logo, so the
   footer mark lost its flex row and shrank. This puts it back.
   ========================================================================== */

.fgrid .logo{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:700;
             letter-spacing:-.03em;color:#fff;padding:0;margin-bottom:2px}
.fgrid .logo .mk{width:23px;height:23px;flex:none}
.fgrid .logo:hover{color:#fff}

/* ---------- WhatsApp ---------- */

/* footer and contact links that carry the mark inline */
.wa-link{display:inline-flex!important;align-items:center;gap:8px}
.wa-link svg{width:16px;height:16px;flex:none;fill:currentColor}
.fgrid .wa-link{padding:5px 0}

/* floating button, bottom right on every page */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#0B2E19;
  padding:13px 18px;border-radius:999px;font-size:14.5px;font-weight:650;
  box-shadow:0 10px 26px rgba(11,14,17,.22);
  transition:transform .16s,box-shadow .16s,background .16s;
}
.wa-float svg{width:22px;height:22px;flex:none;fill:currentColor}
.wa-float:hover{background:#1FBE5A;transform:translateY(-2px);box-shadow:0 14px 32px rgba(11,14,17,.28)}
.wa-float:active{transform:translateY(0)}

@media (max-width:640px){
  /* on a phone the label costs more than it gives, so it becomes a round button */
  .wa-float{padding:0;width:54px;height:54px;justify-content:center;right:16px;bottom:16px}
  .wa-float .lbl{display:none}
}

@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none}
  .wa-float:hover{transform:none}
}

/* ---------- footer social row (hidden until an account has a url) ---------- */
.fgrid .social{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:14px 0 0;padding:0}
.fgrid .social li{margin:0}
.fgrid .social a{display:grid;place-items:center;width:36px;height:36px;padding:0;
                 border:1px solid #2C323B;border-radius:10px;color:#9AA0A9;
                 transition:color .16s,border-color .16s,background .16s}
.fgrid .social a:hover{color:#fff;border-color:var(--mint);background:#1A2027}
.fgrid .social svg{width:17px;height:17px;fill:currentColor}

/* ---------- service and market pages ---------- */
.subhero{padding:34px 0 8px}
.subhero h1{font-size:clamp(29px,4.4vw,48px);max-width:20ch}
.subhero .sub{max-width:66ch}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-family:ui-monospace,Menlo,monospace;
        font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim-2);margin-bottom:14px}
.crumbs a{color:var(--dim)}
.crumbs a:hover{color:var(--teal)}
.crumbs .here{color:var(--ink)}
.ticks li a{color:var(--teal)}
.ticks li a:hover{text-decoration:underline}
/* problem lists have no bold lead-in, so the marker should still line up */
.ticks li > div > span:only-child{color:var(--ink-2)}