/* vloka.nl — the public site.
 *
 * Same tokens as the appliance (wifitool/static/css/wifi.css) and the portal, so the website, the
 * portal and the product a customer ends up running look like one thing. Copied rather than
 * imported, for the same reason as portal.css: there is no shared build here, and pretending
 * otherwise is how two blues appear.
 */

:root{
  --canvas:#F6F7F5; --surface:#FFFFFF;
  --line:#E7EAE7; --line-soft:#EDEFEC;
  --ink:#19241F; --muted:#6C7A74; --faint:#9AA6A0;
  --accent:#1E6FB8; --accent-bg:#E4EFF8;
  --ok:#1F9D6B; --ok-bg:#E5F3EC; --ok-tx:#0F6E4C;
  --warn:#CE921C; --warn-bg:#FBF1DA; --warn-tx:#8A5E0E;
  --bad:#C8514A; --bad-bg:#FAE8E6;
  --plan:#4F79B3; --plan-bg:#E8EFF8;
  --tile:0 1px 2px rgba(25,36,31,.05), 0 1px 1px rgba(25,36,31,.03);
  /* A button on this site is the same blue as a button in the software: wifi.css's
     --accent, #1E6FB8, which is already the value above. The blue-to-green gradient that
     used to be here is now only on the portal's sign-in screen — a customer who has just
     used Vloka should not meet a different-looking button on the website. */
}

*{box-sizing:border-box;}
body{margin:0;background:var(--surface);color:var(--ink);
     font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
     font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;letter-spacing:-0.015em;line-height:1.2;}
img{max-width:100%;}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;}

/* ------------------------------------------------------------------ header */

.sh{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);
    backdrop-filter:blur(9px);border-bottom:1px solid var(--line);}
.sh-in{max-width:1140px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:26px;}
.sh-brand{display:flex;align-items:center;gap:10px;flex:none;}
.sh-brand span{display:flex;flex-direction:column;line-height:1.1;}
.sh-brand b{font-size:19px;font-weight:700;letter-spacing:.01em;}
.sh-brand i{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:8.5px;
            letter-spacing:.14em;color:var(--faint);}
.sh-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;}
.sh-nav a{padding:7px 12px;border-radius:8px;font-size:14px;color:var(--muted);font-weight:500;}
.sh-nav a:hover{background:var(--line-soft);color:var(--ink);}
.sh-nav a.on{background:var(--accent-bg);color:var(--accent);font-weight:600;}
/* The NL/EN switch (2026-08-06). Two links, the same rectangle as the nav items, the current one
   marked the way an active nav item is — one look for "where you are", whether that is a page or
   a language. Rectangles, small radius: the house rule, no pills. */
.sh-lang{display:flex;flex:none;gap:2px;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;margin-left:10px;}
.sh-lang a{padding:6px 10px;font-family:"IBM Plex Mono",monospace;font-size:12px;
  color:var(--muted);font-weight:500;line-height:1.5;}
.sh-lang a:hover{background:var(--line-soft);color:var(--ink);}
.sh-lang a.on{background:var(--accent-bg);color:var(--accent);font-weight:600;}
.sh-portal{flex:none;padding:9px 16px;border-radius:9px;background:var(--accent);color:#fff;
           font-weight:600;font-size:14px;box-shadow:0 6px 16px rgba(30,127,194,.22);}
.sh-portal:hover{filter:brightness(1.06);}

/* ------------------------------------------------------------------ hero */

/* Three layers, bottom to top: the canvas colour, the appliance drawing, the honeycomb, the words.
 * The drawing is a LAYER, not a panel — it lives under the same mesh that runs over the rest of the
 * band, multiplied into the canvas so its paper disappears and only the pencil is left. Pasting it
 * on top as a bordered card made it a picture of the product next to the page; underneath the mesh
 * it is the page. It needs its own class: on every other hero there is nothing to draw. */
.hero{position:relative;isolation:isolate;overflow:hidden;
      background-color:var(--canvas);border-bottom:1px solid var(--line);}
.hero::before,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;}
.hero::after{z-index:1;background-image:url("/assets/honeycomb.svg");
             background-repeat:repeat;background-size:12px 7px;}
/* hero-art.webp, not intro-1.webp: the fade is baked into the pixels (bin/make-hero-art.py), so
   the sheet has no edge anywhere and this rule only has to place it. A CSS mask did the same job
   for exactly one size and one position and came undone at every other — the mask lives in the
   element's coordinates, the drawing does not.
   Sized and placed to sit where the drawing sat when it was a column of its own: about 480 px
   wide, its right edge on the right edge of the 1140 px content column. */
.hero-drawn::before{z-index:0;background-image:url("/assets/hero-art.webp");
      background-repeat:no-repeat;background-size:min(960px,86%) auto;
      /* Nudged in towards the headline: the right edge sits 90 px INSIDE the content column
         rather than on it, so the drawing reads as belonging to the sentence next to it instead
         of drifting off towards the window edge. */
      background-position:right max(0px,calc(50% - 480px)) center;
      /* multiply because this drawing IS on paper again — a cream card with rounded corners. It
         makes the paper sink into the canvas so only the pencil is left; without it the card sits
         on the page as a lighter rectangle. bin/make-hero-art.py feathers its edges so there is no
         corner to see. */
      mix-blend-mode:multiply;opacity:1;}
.hero-in{position:relative;z-index:2;max-width:1140px;margin:0 auto;padding:64px 22px 58px;}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;
         text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.hero h1{font-size:clamp(30px,4.6vw,50px);font-weight:700;max-width:19ch;}
.hero .lead{font-size:17px;color:var(--muted);max-width:62ch;margin:18px 0 0;line-height:1.65;}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}
/* The home page: taller, so the drawing behind it has room to be a drawing and not a strip. */
.hero-drawn .hero-in{padding:88px 22px 84px;}
@media (max-width:900px){
  /* Narrow: there is no column beside the words any more, so the drawing goes underneath them and
     steps back until it is texture. The sentence wins every time — that was already the rule when
     it was a column of its own. */
  .hero-drawn::before{opacity:.4;background-size:min(420px,86%) auto;
      background-position:right -10px bottom -10px;}
  .hero-drawn .hero-in{padding:60px 22px 150px;}
}

/* ------------------------------------------------------------------ buttons */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;
     padding:0 22px;border-radius:10px;font-family:inherit;font-size:15px;font-weight:600;
     border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;
     box-shadow:var(--tile);}
.btn:hover{background:var(--line-soft);}
.btn-primary{background:var(--accent);border-color:transparent;color:#fff;
             box-shadow:0 8px 20px rgba(30,111,184,.25);}
.btn-primary:hover{filter:brightness(1.08);background:var(--accent);}
.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;}

/* ------------------------------------------------------------------ sections */

.sec{max-width:1140px;margin:0 auto;padding:58px 22px;}
.sec.tight{padding-top:34px;}
.sec > h2{font-size:clamp(22px,3vw,31px);font-weight:700;max-width:22ch;}
.sec > .sub{color:var(--muted);max-width:64ch;margin:14px 0 0;font-size:16px;}
.alt{background:var(--canvas);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;
      margin-top:34px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:22px 23px;
      box-shadow:var(--tile);}
.card .ico{width:40px;height:40px;border-radius:11px;background:var(--accent-bg);
           color:var(--accent);display:flex;align-items:center;justify-content:center;
           margin-bottom:14px;}
.card .ico svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;
               stroke-linecap:round;stroke-linejoin:round;}
.card h3{font-size:16.5px;font-weight:650;margin-bottom:7px;}
.card p{color:var(--muted);font-size:14.5px;margin:0;line-height:1.65;}
.card p + p{margin-top:10px;}

/* The two KIDJO products, side by side. Two columns and not auto-fit: they are a pair and a
   reader has to be able to compare them, so they may wrap to one column but never to three. */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));max-width:820px;}
.kcard .kmark{display:block;margin:0 0 14px;}
.kcard .kname{font-size:17px;letter-spacing:.2px;}
.kcard .ksub{color:var(--faint);font-size:13px;margin:0 0 10px;font-weight:600;}

/* A statement that is deliberately not a feature card — the honest caveats. */
.plain{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:26px 0;
       color:var(--muted);font-size:15.5px;max-width:66ch;}
.plain b{color:var(--ink);}

/* ------------------------------------------------------------------ tables */

.tbl{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
     border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--tile);
     margin-top:30px;font-size:14.5px;}
.tbl th{background:var(--line-soft);color:var(--muted);font-size:11px;font-weight:600;
        letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:12px 15px;
        border-bottom:1px solid var(--line);}
.tbl td{padding:14px 15px;border-bottom:1px solid var(--line-soft);vertical-align:top;}
.tbl tr:last-child td{border-bottom:none;}
/* A number column never wraps. "above 1000" broke over two lines against a right-aligned edge and
   read as two values — a figure that has been folded in half is not a figure any more. */
.tbl th.num,.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.tbl td b{font-weight:650;}
.tbl .note{color:var(--muted);font-size:13px;margin-top:5px;line-height:1.55;}

/* A block meant to be selected and pasted into somebody else's terminal. It scrolls inside itself
   rather than widening the page — a signed download URL is long, and a command that has been
   wrapped by a stylesheet is a command that gets pasted wrong. */
.cmd{background:var(--ink);color:#E8EDEA;border-radius:12px;padding:18px 20px;margin:22px 0;
     overflow-x:auto;font-size:13px;line-height:1.75;box-shadow:var(--tile);}
.cmd code{font-family:"IBM Plex Mono",ui-monospace,monospace;white-space:pre;}

.lbl{display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;border-radius:6px;
     padding:2px 9px;border:1px solid transparent;white-space:nowrap;}
.lbl-ok{background:var(--ok-bg);color:var(--ok-tx);border-color:#cfe7da;}
.lbl-neutral{background:var(--line-soft);color:var(--muted);border-color:var(--line);}
.lbl-plan{background:var(--plan-bg);color:var(--plan);border-color:#d3e0f0;}

/* ------------------------------------------------------------------ prose & forms */

.prose{max-width:74ch;}
.prose h2{font-size:22px;margin:34px 0 10px;}
.prose h3{font-size:17px;margin:26px 0 8px;}
.prose p{color:var(--muted);margin:0 0 14px;}
.prose li{color:var(--muted);margin-bottom:7px;}
.prose b{color:var(--ink);}
.prose a{color:var(--accent);font-weight:600;}
.prose a:hover{text-decoration:underline;}

.fld{margin:0 0 15px;max-width:560px;}
.fld label{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin:0 0 6px;}
.fld .req{color:var(--bad);margin-left:2px;}
.fld input,.fld select,.fld textarea{width:100%;min-height:44px;border:1px solid var(--line);
    border-radius:10px;padding:11px 13px;font-size:15px;font-family:inherit;
    background:var(--canvas);color:var(--ink);}
.fld textarea{min-height:140px;line-height:1.6;resize:vertical;}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-bg);background:var(--surface);}
.fld .hint{font-size:12.5px;color:var(--faint);margin-top:6px;}
/* A checkbox is not a text field. Without this it inherits `width:100%; min-height:44px` from the
   rule above and renders as a grey slab with a tick lost somewhere in it. */
.fld-check label{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;
                 font-size:14.5px;font-weight:500;color:var(--ink);text-transform:none;}
.fld-check input{width:17px;height:17px;min-height:0;flex:none;accent-color:var(--accent);}
.msg{border-radius:11px;padding:13px 16px;font-size:14.5px;margin:0 0 20px;max-width:640px;
     line-height:1.6;}
.msg-ok{background:var(--ok-bg);color:var(--ok-tx);border:1px solid #cfe7da;}
.msg-bad{background:var(--bad-bg);color:#8E2E27;border:1px solid #f0cbc6;}

/* ------------------------------------------------------------------ footer */

.sf{background:var(--canvas);border-top:1px solid var(--line);margin-top:20px;}
.sf-in{max-width:1140px;margin:0 auto;padding:44px 22px 30px;display:grid;
       grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;}
.sf-col h4{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.15em;
           text-transform:uppercase;color:var(--muted);margin-bottom:13px;font-weight:600;}
.sf-col a{display:block;color:var(--muted);font-size:14px;padding:3px 0;}
.sf-col a:hover{color:var(--accent);}
.sf-col > p{color:var(--muted);font-size:13.5px;margin:13px 0 0;max-width:38ch;line-height:1.6;}
.sf-col .sh-brand a{padding:0;}
.sf-bar{border-top:1px solid var(--line);padding:16px 22px;text-align:center;
        font-size:12.5px;color:var(--faint);
        font-family:"IBM Plex Mono",monospace;letter-spacing:.03em;}

@media (max-width:880px){
  .sf-in{grid-template-columns:1fr 1fr;}
  .sh-in{flex-wrap:wrap;gap:12px;}
  .sh-nav{order:3;width:100%;margin-left:0;}
  .sh-portal{margin-left:auto;}
}
@media (max-width:560px){
  .sf-in{grid-template-columns:1fr;}
  .hero-in{padding:44px 18px 40px;}
  .sec{padding:42px 18px;}
}