/* ==========================================================================
   Manairge — Performance Placement Marketplace

   Visual system: Dieter Rams industrial (Braun catalogue / Vitsœ lineage).
   Chosen 2026-08-14 over Swiss Editorial and risograph.

   The rules this system imposes, and why each one is here:
   - ONE functional accent (--c-fn) and it only appears where it MEANS
     something: money, and the rentable surface of a placement. Nowhere else.
     Everything else is a grey scale.
   - Hairline rules instead of shadows. Braun catalogues separate things with
     1px lines, not with elevation.
   - Near-square corners. 2px, not 16px.
   - No gradients anywhere. The old build had a full-bleed 135° gradient hero;
     that is the single most recognisable "AI made this" tell.
   - Placement imagery is an isometric line DIAGRAM, drawn honestly and
     labelled "Diagram — not a photo". The previous build drew fake bar charts
     and captioned them "Owner photo", which was simply a lie.

   Every colour is a token; no hard-coded hex outside :root.
   ========================================================================== */

:root{
  /* ground — Braun catalogue paper, not screen-white */
  --bg:#E9E8E4;
  --bg-card:#FFFFFF;
  /* These were #F6F5F2 / #F1F0EC against a #E9E8E4 page — under 13 apart, so
     eight stacked sections read as one undifferentiated wash. Pulled to either
     side of the page colour so the page has a rhythm instead of a haze. */
  --bg-stage:#F5F4F0;
  --bg-mist:#DEDDD6;
  --bg-soft:#F5F4F0;

  /* ink — a grey scale, never pure black */
  --c-ink:#1D1D1B;
  --c-navy:#1D1D1B;
  --c-charcoal:#4A4844;
  /* Measured against every ground this actually lands on, not against white.
     #77756F reached only 3.76:1 on paper; #66645E then reached only 4.34:1
     once --bg-mist was darkened to give the page some rhythm. This clears
     4.5:1 on all of them — paper, mist, stage and the tag washes. */
  --c-mute:#615F59;
  --c-slate:#615F59;
  --c-line:#CFCDC7;
  --c-line-soft:#DEDCD6;
  --c-white:#FFFFFF;

  /* THE functional accent. Money, and the rentable surface of a placement. */
  --c-fn:#0B5FD9;
  --c-fn-ink:#0A4EAF;
  --c-fn-wash:#E7EEFB;

  /* Placement-category palette. Not decoration — the colour IS the category,
     so a card is identifiable before you read a word of it. Braun catalogues
     are restrained, not colourless; the first pass here read as bloodless.
     Every ink below measures >=4.9:1 on the #E9E8E4 paper ground, so these are
     safe for label text, not only for strokes. */
  --cat-storefront:#0A4EAF;  --cat-storefront-wash:#DCE7F9;
  --cat-vehicle:#A8410F;     --cat-vehicle-wash:#F6E4DA;
  --cat-packaging:#0A6E4B;   --cat-packaging-wash:#DCEDE5;
  --cat-counter:#6146C6;     --cat-counter-wash:#E5E0F6;
  --cat-social:#A82565;      --cat-social-wash:#F5DFE9;
  /* Fallback when nothing sets a category */
  --cat:var(--c-fn);
  --cat-wash:var(--c-fn-wash);

  /* legacy aliases so the 8 HTML files need no edits */
  --c-primary:var(--c-fn);
  --c-primary-2:var(--c-fn);
  --c-blue:var(--c-fn);
  --c-green:var(--c-ink);
  --c-purple:var(--c-ink);
  --c-amber:var(--c-charcoal);
  --c-red:#A3231B;

  /* status — stated in type, not in colour. Rams does not shout. */
  --st-draft-bg:#EDECE8;    --st-draft-fg:#66645E;
  --st-pending-bg:#EDECE8;  --st-pending-fg:#4A4844;
  --st-accepted-bg:var(--c-fn-wash); --st-accepted-fg:var(--c-fn-ink);
  --st-live-bg:#E4E3DE;     --st-live-fg:#1D1D1B;
  --st-completed-bg:#EDECE8;--st-completed-fg:#66645E;
  --st-reject-bg:#F4E7E5;   --st-reject-fg:#A3231B;
  --st-live-soft:#F1F0EC;

  /* diagram */
  --c-diagram-bg:#F6F5F2;
  --c-diagram-line:#1D1D1B;
  --c-diagram-ghost:#C9C7C1;
  --c-stamp:#1D1D1B;
  --c-scrim:rgba(29,29,27,.45);

  /* shape — near-square. Rams does not round things for decoration. */
  --r-card:2px;
  --r-btn:2px;
  --r-input:2px;
  --gap:16px;
  --max:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--c-ink);
  /* Helvetica is the Braun/Vitsœ typeface. Arial is its metric-compatible
     stand-in on Windows/Android; Liberation Sans on Linux. */
  font-family:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  font-size:16px;
  line-height:1.58;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
  /* Owner-supplied names and URL parameters end up in headings. A single
     unbroken 60-character string burst the layout on a phone; this only
     applies when a word genuinely cannot fit, so normal copy is untouched. */
  overflow-wrap:break-word;
}
h1,h2,h3,h4{margin:0;color:var(--c-ink);text-wrap:balance;line-height:1.16;font-weight:500}
h1{font-size:clamp(29px,4.1vw,43px);letter-spacing:-.022em}
h2{font-size:clamp(22px,2.7vw,29px);letter-spacing:-.016em}
h3{font-size:18px;letter-spacing:-.008em}
p{margin:0}
img{max-width:100%;height:auto}
a{color:var(--c-fn-ink);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c-fn);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The [hidden] attribute is only a UA-stylesheet display:none, so ANY author
   rule that sets display beats it. .callout{display:flex} was doing exactly
   that — the browse page printed "No sample matches that combination" under a
   grid full of results. One !important here is cheaper than remembering this
   every time an element gets both a display rule and a hidden state. */
[hidden]{display:none!important}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 20px}
.stack{display:flex;flex-direction:column;gap:var(--gap)}
.row{display:flex;gap:var(--gap);align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:var(--gap);align-items:center;justify-content:space-between;flex-wrap:wrap}
.sec{padding:clamp(40px,6vw,74px) 0}
.sec-mist{background:var(--bg-mist)}
.sec-soft{background:var(--bg-stage)}
/* One inverted block per page. A Braun catalogue is mostly paper with a single
   dark spread — that one break is what stops the paper reading as blank. */
.sec-ink{background:var(--c-ink);color:var(--bg)}
.sec-ink h1,.sec-ink h2,.sec-ink h3,.sec-ink h4{color:var(--bg)}
.sec-ink .lede,.sec-ink p{color:rgba(233,232,228,.84)}
.sec-ink .mute{color:rgba(233,232,228,.66)}
.sec-ink .eyebrow{color:rgba(233,232,228,.6)}
.sec-ink .card{background:transparent;border-color:rgba(233,232,228,.22)}
.sec-ink .card h3{color:var(--bg)}
.sec-ink .tag{background:rgba(233,232,228,.14);color:var(--bg)}
.sec-ink .btn-ghost{border-color:var(--bg);color:var(--bg)}
.sec-ink .btn-ghost:hover{background:var(--bg);color:var(--c-ink)}
.sec-ink a{color:var(--bg)}
.sec-ink .steps-flow,.sec-ink .step-card{border-color:rgba(233,232,228,.22)}
.sec-ink .step-card::before{color:rgba(233,232,228,.6)}
/* .callout rules are ink-coloured, which is invisible on an ink ground. */
.sec-ink .callout{border-top-color:rgba(233,232,228,.42);border-bottom-color:rgba(233,232,228,.16)}
.sec-ink .callout strong{color:var(--bg)}
.sec-ink .tablewrap,.sec-ink td,.sec-ink th{border-color:rgba(233,232,228,.22);color:rgba(233,232,228,.84)}
.sec-ink tbody tr:hover{background:rgba(233,232,228,.06)}
.sec-ink .price{color:var(--bg)}
.sec-head{max-width:660px;margin-bottom:30px;display:flex;flex-direction:column;gap:10px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
/* min(Npx, 100%) is load-bearing. A bare minmax(300px,1fr) forces a 300px
   column even when the container only has 228px — which is exactly what
   happens inside .band on a 320px screen, and it burst the page. The min()
   lets the column collapse to the container instead. */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(258px,100%),1fr));gap:var(--gap)}
.lede{font-size:clamp(15.5px,1.5vw,18px);color:var(--c-charcoal);max-width:60ch}
.mute{color:var(--c-mute);font-size:14px}
/* Section labels are set like Braun catalogue captions: small, spaced, quiet. */
.eyebrow{
  font-size:10.5px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--c-mute);
}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--c-line)}
.site-head-in{max-width:var(--max);margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:500;font-size:17px;color:var(--c-ink);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
/* A flat square, not a rounded gradient chip. */
.brand-mark{
  width:26px;height:26px;border-radius:1px;background:var(--c-ink);
  display:grid;place-items:center;color:var(--bg);font-size:13px;font-weight:500;flex:none;
}
.site-nav{display:flex;gap:0;margin-left:auto;align-items:center}
.site-nav a{
  padding:9px 13px;color:var(--c-charcoal);
  font-size:14px;font-weight:400;
}
.site-nav a:hover{color:var(--c-ink);text-decoration:none}
.site-nav a[aria-current="page"]{color:var(--c-ink);box-shadow:inset 0 -1px 0 var(--c-ink)}
/* `.site-nav a` outranks `.btn-primary`, so the CTA in the nav was rendering
   charcoal-on-blue at 1.59:1. The old gradient hid this from contrast checks. */
.site-nav a.btn-primary{color:var(--c-white)}
.site-nav a.btn-primary:hover{color:var(--c-white)}
/* ---------- market picker ----------
   Currency codes, not country names or flags. The currency is what tells
   somebody at a glance whether a page is priced for them, and it is what the
   footer's "Also in: Malaysia" line failed to say.

   Plain links, so it works with scripts off, and it sits before the hamburger
   so it stays reachable on a phone without opening the menu — switching
   country is not a navigation item, it is a statement about who you are. */
.market-pick{display:flex;align-items:center;gap:1px;margin-left:auto;
             border:1px solid var(--c-line);border-radius:var(--r-btn);overflow:hidden}
.market-pick a,.market-pick span{
  padding:6px 9px;font-size:11px;font-weight:500;letter-spacing:.08em;
  color:var(--c-mute);line-height:1;
}
.market-pick a:hover{color:var(--c-ink);background:var(--bg-mist);text-decoration:none}
.market-pick [aria-current="true"]{background:var(--c-ink);color:var(--bg)}
/* The nav owns the auto margin once a picker is present, or both push right
   and the nav loses its separation from the brand. */
.market-pick ~ .site-nav{margin-left:14px}

.nav-toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--c-line);
  border-radius:var(--r-btn);padding:11px 13px;cursor:pointer;
}
.market-pick ~ .nav-toggle{margin-left:10px}
.nav-toggle svg{display:block;width:20px;height:20px;stroke:var(--c-ink);stroke-width:1.5;fill:none;stroke-linecap:round}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--r-btn);padding:12px 20px;
  font-size:14.5px;font-weight:500;cursor:pointer;white-space:nowrap;text-align:center;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{text-decoration:none}
/* Flat fill, no gradient, no lift. The accent earns its place here because
   this button is the one that leads to money changing hands. */
.btn-primary{background:var(--c-fn);color:var(--c-white)}
.btn-primary:hover{background:var(--c-fn-ink);color:var(--c-white)}
.btn-ghost{background:transparent;color:var(--c-ink);border:1px solid var(--c-ink)}
.btn-ghost:hover{background:var(--c-ink);color:var(--bg)}
.btn-quiet{background:transparent;color:var(--c-charcoal);border:1px solid var(--c-line)}
.btn-quiet:hover{border-color:var(--c-ink);color:var(--c-ink)}
.btn-green{background:var(--c-ink);color:var(--bg)}
.btn-green:hover{background:var(--c-charcoal);color:var(--bg)}
/* These two keep their old names so the 8 HTML files need no edits, but the
   hero is now paper-coloured, so they are the hero's primary/secondary pair. */
.btn-white{background:var(--c-fn);color:var(--c-white)}
.btn-white:hover{background:var(--c-fn-ink);color:var(--c-white)}
.btn-outline-white{background:transparent;border:1px solid var(--c-ink);color:var(--c-ink)}
.btn-outline-white:hover{background:var(--c-ink);color:var(--bg)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- chips / tags ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-btn);
  font-size:13px;font-weight:400;background:transparent;color:var(--c-charcoal);
  border:1px solid var(--c-line);cursor:pointer;
}
.chip:hover{border-color:var(--c-ink);color:var(--c-ink)}
.chip.on{background:var(--c-ink);color:var(--bg);border-color:var(--c-ink)}
.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--r-btn);
     font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.st-draft{background:var(--st-draft-bg);color:var(--st-draft-fg)}
.st-pending{background:var(--st-pending-bg);color:var(--st-pending-fg)}
.st-accepted{background:var(--st-accepted-bg);color:var(--st-accepted-fg)}
.st-live{background:var(--st-live-bg);color:var(--st-live-fg)}
.st-completed{background:var(--st-completed-bg);color:var(--st-completed-fg)}
.st-reject{background:var(--st-reject-bg);color:var(--st-reject-fg)}
/* Verification is a fact, so it is stated in type — not a coloured pill. */
.verified{
  color:var(--c-ink);border:1px solid var(--c-ink);padding:2px 7px;border-radius:var(--r-btn);
  font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  display:inline-flex;gap:4px;align-items:center;
}

/* ---------- cards ---------- */
.card{
  background:var(--bg-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  overflow:hidden;
}
.card-pad{padding:22px}
/* Hairline darkens on hover. No lift, no shadow — Braun catalogues have neither. */
.card-hover{transition:border-color .18s ease;position:relative;cursor:pointer}
.card-hover:hover{border-color:var(--c-ink)}
/* The whole card is the tap target, not the small button inside it —
   which matters most on a phone. Keyboard focus stays on the real <a>. */
.card-hover .pc-foot .btn::after{content:"";position:absolute;inset:0}

/* ---------- hero ---------- */
/* Paper, not a gradient. The product is the hero, not the background. */
.hero{background:var(--bg);color:var(--c-ink);padding:clamp(44px,6.5vw,78px) 0;
      border-bottom:1px solid var(--c-line)}
.hero h1{color:var(--c-ink)}
.hero .lede{color:var(--c-charcoal)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.hero-cta{display:flex;gap:11px;margin-top:26px;flex-wrap:wrap}
.hero-proof{display:flex;gap:34px;margin-top:32px;flex-wrap:wrap;
            padding-top:20px;border-top:1px solid var(--c-line)}
.hero-proof div{display:flex;flex-direction:column}
.hero-proof b{font-size:25px;font-weight:500;line-height:1.15;letter-spacing:-.02em}
/* The first proof figure is the money one, so it takes the accent. */
.hero-proof div:first-child b{color:var(--c-fn-ink)}
.hero-proof span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
                 color:var(--c-mute);margin-top:3px}

/* ---------- category colour binding ---------- */
/* One data attribute on the card resolves the whole palette for everything
   inside it — diagram fills, strokes, the category label. No JS branching. */
[data-cat="Storefront"]{--cat:var(--cat-storefront); --cat-wash:var(--cat-storefront-wash)}
[data-cat="Vehicle"]   {--cat:var(--cat-vehicle);    --cat-wash:var(--cat-vehicle-wash)}
[data-cat="Packaging"] {--cat:var(--cat-packaging);  --cat-wash:var(--cat-packaging-wash)}
[data-cat="Counter"]   {--cat:var(--cat-counter);    --cat-wash:var(--cat-counter-wash)}
[data-cat="Social"]    {--cat:var(--cat-social);     --cat-wash:var(--cat-social-wash)}
.chip-cat{color:var(--cat);border-color:var(--cat);background:transparent}

/* ---------- placement diagram (isometric, honestly labelled) ---------- */
/* This replaces the old .photo block, which drew a fake bar chart and stamped
   "Owner photo" on it. A diagram that says it is a diagram is honest; a bad
   fake of a photograph is not. Class name kept so the HTML needs no edits. */
.photo{
  position:relative;aspect-ratio:4/3;width:100%;
  background:var(--cat-wash);border-bottom:1px solid var(--c-line);
  display:grid;place-items:center;overflow:hidden;
}
.photo[data-label]::after{
  content:attr(data-label);position:absolute;left:11px;bottom:9px;
  color:var(--c-mute);font-size:9.5px;font-weight:400;letter-spacing:.11em;
  text-transform:uppercase;
}
.photo svg{width:100%;height:100%;display:block}

/* ---------- placement card ---------- */
.pc-body{padding:15px 15px 17px;display:flex;flex-direction:column;gap:9px}
.pc-title{font-size:15px;font-weight:500;color:var(--c-ink);line-height:1.35;letter-spacing:-.008em}
.pc-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* Spec figures, read like a Braun spec table: quiet labels, aligned numerals. */
.pc-stats{display:flex;gap:18px;font-size:11px;color:var(--c-mute);
          letter-spacing:.08em;text-transform:uppercase;
          padding-top:9px;border-top:1px solid var(--c-line-soft)}
.pc-stats b{display:block;font-size:15px;font-weight:500;color:var(--c-ink);
            letter-spacing:0;text-transform:none;margin-top:1px}
.pc-scan b,.pc-lead b{color:var(--c-ink)}
/* Why a ranked result is here. Carries the category accent so the reason and
   the category chip above it read as the same statement. */
.pc-why{font-size:12px;line-height:1.45;color:var(--cat,var(--c-fn-ink));font-weight:500}
.pc-foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:4px}
/* Money is one of only two things allowed to carry the accent. */
/* Never break a price across two lines — "~₱700" over "/week" reads as two
   separate facts. */
.price{font-size:19px;font-weight:500;color:var(--c-fn-ink);letter-spacing:-.02em;white-space:nowrap}
.price small{font-size:11px;font-weight:400;color:var(--c-mute);letter-spacing:0}

/* ---------- sourceable placement formats --------------------------------
   These are deliberately CSS diagrams, not stock photos and not listings.
   A static format can be useful to request before Manairge has signed an
   owner; it must not look like it can be booked from the live inventory. */
.source-format-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--gap)}
.source-format{min-width:0;overflow:hidden;border:1px solid var(--c-line);background:var(--bg-card)}
.source-copy{padding:16px 16px 18px}
.source-copy .eyebrow{margin-bottom:8px}
.source-copy h3{font-size:17px;font-weight:500;letter-spacing:-.012em;margin-bottom:7px}
.source-copy p:not(.eyebrow){font-size:13.5px;line-height:1.55;color:var(--c-charcoal)}
.source-scene{height:164px;position:relative;overflow:hidden;background:var(--cat-wash);border-bottom:1px solid var(--c-line)}
.source-scene-table{--cat:var(--cat-counter);--cat-wash:var(--cat-counter-wash)}
.source-scene-waiting{--cat:var(--cat-storefront);--cat-wash:var(--cat-storefront-wash)}
.source-scene-home{--cat:var(--cat-storefront);--cat-wash:var(--cat-storefront-wash)}
.source-scene-condo{--cat:var(--cat-packaging);--cat-wash:var(--cat-packaging-wash)}
.source-scene-care{--cat:var(--cat-social);--cat-wash:var(--cat-social-wash)}
.source-scene-pickup{--cat:var(--cat-counter);--cat-wash:var(--cat-counter-wash)}
.source-scene::before{content:"";position:absolute;left:0;right:0;bottom:25px;border-top:1px solid var(--c-diagram-ghost)}
.source-scene span{position:absolute;display:block;box-sizing:border-box}
.source-format-action{margin-top:var(--gap);border-top:1px solid var(--c-ink);border-bottom:1px solid var(--c-line);padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.source-format-action .eyebrow{margin-bottom:7px}
.source-format-action h3{font-size:19px;font-weight:500;margin-bottom:4px}

/* A seated choice: the rentable plane is the pale rectangle on the table. */
.scene-table{left:50%;bottom:39px;width:104px;height:32px;transform:translateX(-50%);background:var(--c-white);border:1px solid var(--c-diagram-line);box-shadow:0 20px 0 -15px var(--c-diagram-line),0 20px 0 -14px var(--c-diagram-line)}
.scene-table::before,.scene-table::after{content:"";position:absolute;width:1px;height:26px;top:31px;background:var(--c-diagram-line)}
.scene-table::before{left:14px}.scene-table::after{right:14px}
.scene-menu{left:50%;bottom:82px;width:27px;height:40px;transform:translateX(-50%);background:var(--c-white);border:1px solid var(--c-diagram-line)}
.scene-menu::after{content:"";position:absolute;left:6px;right:6px;top:10px;height:1px;background:var(--c-diagram-ghost);box-shadow:0 7px 0 var(--c-diagram-ghost),0 14px 0 var(--c-diagram-ghost)}
.scene-chair{bottom:29px;width:26px;height:38px;border:1px solid var(--c-diagram-line);background:var(--c-white)}
.scene-chair::before{content:"";position:absolute;left:4px;right:4px;bottom:8px;border-top:1px solid var(--c-diagram-ghost)}
.chair-left{left:calc(50% - 88px)}.chair-right{right:calc(50% - 88px)}
.scene-qr{right:calc(50% - 67px);bottom:55px;width:25px;height:25px;display:grid!important;place-items:center;background:var(--c-ink);color:var(--bg);font-size:8px;font-weight:500;letter-spacing:.04em}

/* A service wait: not the exterior wall, but the moment with spare time. */
.scene-car{left:32px;bottom:45px;width:108px;height:40px;border:1px solid var(--c-diagram-line);background:var(--c-white);border-radius:3px 12px 2px 2px}
.scene-car::before{content:"";position:absolute;left:25px;top:-20px;width:55px;height:20px;border:1px solid var(--c-diagram-line);border-bottom:0;background:var(--c-white);transform:skewX(-20deg)}
.scene-car::after{content:"";position:absolute;left:12px;bottom:-8px;width:15px;height:15px;border:1px solid var(--c-diagram-line);border-radius:50%;background:var(--cat-wash);box-shadow:65px 0 0 -1px var(--cat-wash),65px 0 0 0 var(--c-diagram-line)}
.scene-seat{bottom:37px;width:30px;height:35px;border:1px solid var(--c-diagram-line);background:var(--c-white);border-radius:1px 1px 4px 4px}
.scene-seat::before{content:"";position:absolute;left:-1px;top:-13px;width:30px;height:14px;border:1px solid var(--c-diagram-line);background:var(--c-white)}
.source-scene-waiting .seat-one,.source-scene-care .seat-one{right:76px}.source-scene-waiting .seat-two,.source-scene-care .seat-two{right:38px}
.scene-board{right:31px;top:26px;border:1px solid var(--c-diagram-line);background:var(--c-white);padding:7px 8px;font-size:9px;font-weight:500;letter-spacing:.08em;color:var(--c-ink)}

/* Home exterior banner: it reads as an approved, modest surface rather than
   a giant roadside billboard. Permission remains a requirement in the copy. */
.scene-house{left:50%;bottom:37px;width:116px;height:60px;transform:translateX(-50%);background:var(--c-white);border:1px solid var(--c-diagram-line)}
.scene-roof{left:50%;bottom:97px;width:0;height:0;transform:translateX(-50%);border-left:69px solid transparent;border-right:69px solid transparent;border-bottom:42px solid var(--c-diagram-line)}
.scene-roof::after{content:"";position:absolute;left:-61px;top:7px;width:0;height:0;border-left:61px solid transparent;border-right:61px solid transparent;border-bottom:37px solid var(--c-white)}
.scene-window{bottom:57px;width:20px;height:21px;border:1px solid var(--c-diagram-line);background:var(--cat-wash)}
.window-one{left:calc(50% - 43px)}.window-two{right:calc(50% - 43px)}
.scene-fence{left:22px;right:22px;bottom:25px;height:24px;border-top:1px solid var(--c-diagram-line);background:repeating-linear-gradient(90deg,transparent 0 14px,var(--c-diagram-line) 14px 15px)}
.scene-banner{left:50%;bottom:47px;width:76px;padding:8px 3px;transform:translateX(-50%);background:var(--c-ink);color:var(--bg);font-size:8px;font-weight:500;letter-spacing:.08em;text-align:center}

/* Building, noticeboard and parcel locker: the action is beside the lobby. */
.scene-building{left:34px;bottom:26px;width:96px;height:111px;border:1px solid var(--c-diagram-line);background:repeating-linear-gradient(90deg,var(--c-white) 0 15px,var(--cat-wash) 15px 24px)}
.scene-building::after{content:"";position:absolute;left:0;right:0;top:25px;border-top:1px solid var(--c-diagram-ghost);box-shadow:0 26px 0 var(--c-diagram-ghost),0 52px 0 var(--c-diagram-ghost)}
.scene-lobby{left:65px;bottom:26px;width:34px;height:39px;border:1px solid var(--c-diagram-line);background:var(--c-ink)}
.scene-locker{right:36px;width:31px;height:54px;border:1px solid var(--c-diagram-line);background:var(--c-white)}
.scene-locker::after{content:"";position:absolute;left:0;right:0;top:17px;border-top:1px solid var(--c-diagram-ghost);box-shadow:0 17px 0 var(--c-diagram-ghost)}
.locker-one{bottom:27px}.locker-two{right:69px;bottom:27px}
.scene-notice{right:28px;top:27px;background:var(--c-ink);color:var(--bg);padding:7px;font-size:8px;font-weight:500;letter-spacing:.08em}

/* Care waiting room: copied needs a review gate, so the drawing stays neutral. */
.scene-cross{left:38px;top:26px;width:34px;height:34px;display:grid!important;place-items:center;background:var(--c-white);border:1px solid var(--c-diagram-line);font-size:28px;line-height:1;color:var(--c-ink);font-weight:400}
.source-scene-care .scene-seat{bottom:31px}.source-scene-care .seat-one{right:68px}.source-scene-care .seat-two{right:30px}
.scene-poster{left:34px;bottom:38px;width:43px;border:1px solid var(--c-diagram-line);background:var(--c-white);padding:8px 2px;text-align:center;font-size:8px;font-weight:500;letter-spacing:.07em;color:var(--c-ink)}

/* Counter and parcels: QR remains conditional on the person having a hand
   free; the card's label makes the short-code alternative visible. */
.scene-counter{left:25px;right:25px;bottom:32px;height:43px;border:1px solid var(--c-diagram-line);background:var(--c-white)}
.scene-counter::after{content:"";position:absolute;left:0;right:0;top:14px;border-top:1px solid var(--c-diagram-ghost)}
.scene-box{bottom:75px;width:35px;height:30px;border:1px solid var(--c-diagram-line);background:var(--c-white)}
.scene-box::after{content:"";position:absolute;left:0;right:0;top:8px;border-top:1px solid var(--c-diagram-ghost)}
.box-one{left:50px}.box-two{left:89px}
.scene-sign{left:50%;top:31px;transform:translateX(-50%);background:var(--c-ink);color:var(--bg);padding:7px 8px;font-size:8px;font-weight:500;letter-spacing:.08em;white-space:nowrap}
.source-scene-pickup .scene-qr{right:45px;bottom:43px}

/* ---------- suggested-format picker (advertiser side) ---------- */
/* Pre-ticked to save the person from deciding out of nothing, but visibly
   un-tickable — the suggestion must never read as a locked-in choice. */
.fmt-pick{cursor:pointer;border-color:var(--c-line)}
.fmt-pick:has(input:checked){border-color:var(--c-ink)}
.fmt-pick:not(:has(input:checked)){opacity:.62}
.fmt-tick{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--c-charcoal)}
.fmt-tick input{accent-color:var(--c-ink);width:17px;height:17px;margin:0}
.fmt-pick:has(input:checked) .fmt-tick{color:var(--c-ink)}

/* ---------- steps / numbered ---------- */
.steps-flow{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;
            border-top:1px solid var(--c-line)}
.step-card{position:relative;padding:22px 22px 20px;border-bottom:1px solid var(--c-line);
           border-right:1px solid var(--c-line);background:transparent}
.step-card:last-child{border-right:0}
/* A folio numeral, not a gradient bubble. */
.step-card::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  display:block;font-size:10.5px;letter-spacing:.14em;color:var(--c-mute);margin-bottom:9px;
}
.step-card h3{margin-bottom:6px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
       border-top:1px solid var(--c-line);border-left:1px solid var(--c-line)}
.stat{border-right:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
      padding:16px 18px;background:transparent}
.stat .k{font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--c-mute)}
.stat .v{font-size:28px;font-weight:500;line-height:1.15;margin-top:6px;letter-spacing:-.025em}
/* Only money gets the accent. Scans and leads are facts, not calls to action. */
.v-scan,.v-lead,.v-brand{color:var(--c-ink)}
.v-sale,.v-money{color:var(--c-fn-ink)}

/* ---------- progress ---------- */
.pbar{position:relative;height:7px;background:var(--c-line);overflow:hidden;border-radius:0}
.pbar span{position:absolute;inset:0 auto 0 0;background:var(--c-ink);transition:width .5s ease}
.pbar b{position:absolute;right:0;top:-17px;color:var(--c-ink);font-size:10.5px;font-weight:500;line-height:1}
.pbar-green span{background:var(--c-fn)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--c-mute)}
.field input,.field select,.field textarea{
  border:1px solid var(--c-line);border-radius:var(--r-input);
  padding:11px 13px;font-size:15px;background:var(--bg-card);color:var(--c-ink);width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-ink);outline:none}

/* ---------- natural-language search ----------
   One line, one button. min(100%) on the input column so a long placeholder
   cannot burst the row on a 320px screen — a bare 1fr would let the text
   input's default intrinsic width set the floor. */
.nlsearch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:stretch}
.nlsearch input{
  border:1px solid var(--c-line);border-radius:var(--r-input);
  padding:12px 14px;font-size:15px;background:var(--bg-card);color:var(--c-ink);
  width:100%;min-width:0;
}
.nlsearch input:focus{border-color:var(--c-ink);outline:none}
.nlsearch .btn{white-space:nowrap}
@media (max-width:430px){ .nlsearch{grid-template-columns:1fr} }
/* The sentence the search answers with. Sits between the box and the grid. */
.nlsearch-note{font-size:13.5px;line-height:1.5;color:var(--c-ink);
               border-left:2px solid var(--c-fn);padding-left:11px;margin-top:12px}
.nlsearch-reset{background:none;border:0;padding:0;margin-top:8px;cursor:pointer;
                font:inherit;font-size:12.5px;color:var(--c-mute);text-decoration:underline}
.nlsearch-reset:hover{color:var(--c-ink)}

/* ---------- table ---------- */
/* min-width:0 is required, not cosmetic: a grid/flex child defaults to
   min-width:auto, so the 560px table pushed the whole page wide instead of
   scrolling inside its own box. Only visible at 320px — i.e. on exactly the
   cheap Android handsets this market runs on. */
.tablewrap{overflow-x:auto;min-width:0;max-width:100%;border-top:1px solid var(--c-line);background:transparent}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
th{
  text-align:left;padding:11px 15px 11px 0;background:transparent;color:var(--c-mute);
  font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border-bottom:1px solid var(--c-line);
}
td{padding:13px 15px 13px 0;border-bottom:1px solid var(--c-line-soft);vertical-align:top}
tbody tr:hover{background:var(--bg-stage)}

/* ---------- FAQ (GEO: answer-first, crawlable) ---------- */
.faq-item{border-bottom:1px solid var(--c-line);background:transparent;border-radius:0}
.faq-item:first-of-type{border-top:1px solid var(--c-line)}
.faq-item+.faq-item{margin-top:0}
.faq-item summary{
  padding:17px 2px;cursor:pointer;font-weight:500;color:var(--c-ink);font-size:16px;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--c-mute);font-size:19px;line-height:1.1;flex:none;font-weight:400}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-body{padding:0 2px 18px;color:var(--c-charcoal);max-width:74ch}
.faq-item .faq-body p+p{margin-top:10px}

/* ---------- callout ---------- */
/* No left accent stripe — that pattern is the second-clearest "AI made this"
   tell after the gradient hero. Hairlines top and bottom instead. */
.callout{
  display:flex;gap:13px;align-items:flex-start;
  border:0;border-top:1px solid var(--c-ink);border-bottom:1px solid var(--c-line);
  border-radius:0;background:transparent;padding:15px 0;
}
.callout.green{border-top-color:var(--c-fn)}
.callout.amber{border-top-color:var(--c-charcoal)}
.callout svg{width:17px;height:17px;flex:none;margin-top:4px;stroke-width:1.5;fill:none;stroke:currentColor}

/* ---------- earnings estimator (marketing widget) ---------- */
.estimator{
  border:1px solid var(--c-ink);border-radius:var(--r-card);
  background:var(--bg-card);color:var(--c-ink);overflow:hidden;
}
.estimator-head{background:transparent;color:var(--c-ink);padding:17px 22px;
                border-bottom:1px solid var(--c-line)}
.estimator-head h3{color:var(--c-ink);margin-bottom:3px}
.estimator-head p{font-size:13px;color:var(--c-mute)}
.estimator-body{padding:22px;display:flex;flex-direction:column;gap:17px}
.estimator-out{
  background:var(--bg-stage);border-radius:0;padding:18px;
  display:flex;flex-direction:column;gap:4px;text-align:left;
  border-top:1px solid var(--c-line);
}
.estimator-out .k{font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--c-mute)}
.estimator-out .v{font-size:clamp(30px,5.5vw,39px);font-weight:500;color:var(--c-fn-ink);
                  line-height:1.08;letter-spacing:-.03em}
.estimator-out .sub{font-size:12.5px;color:var(--c-charcoal);margin-top:3px}
.range-row{display:flex;flex-direction:column;gap:7px}
.range-row .rl{display:flex;justify-content:space-between;font-size:13px;color:var(--c-charcoal)}
.range-row .rl b{color:var(--c-ink);font-weight:500}
input[type=range]{width:100%;accent-color:var(--c-ink);margin:0}

/* ---------- floating CTA (marketing widget) ---------- */
.float-cta{
  position:fixed;right:20px;bottom:20px;z-index:70;
  display:none;gap:12px;align-items:center;
  background:var(--bg-card);border:1px solid var(--c-ink);border-radius:var(--r-card);
  padding:10px 10px 10px 16px;max-width:calc(100vw - 40px);
}
.float-cta.on{display:flex}
.float-cta p{font-size:13.5px;color:var(--c-ink)}
.float-cta .x{background:none;border:0;color:var(--c-mute);cursor:pointer;font-size:18px;line-height:1;padding:0 4px}

/* ---------- lead form band ---------- */
/* The one dark block on the site. Braun catalogues use exactly one. */
.band{background:var(--c-ink);color:var(--bg);border-radius:var(--r-card);padding:clamp(26px,4vw,42px)}
.band h2{color:var(--bg)}
.band .lede{color:rgba(233,232,228,.82)}
.band .field label{color:rgba(233,232,228,.6)}
.band .field input,.band .field select{border-color:rgba(233,232,228,.28);background:transparent;color:var(--bg)}
.band .field input::placeholder{color:rgba(233,232,228,.45)}
.band .btn-primary{background:var(--bg);color:var(--c-ink)}
.band .btn-primary:hover{background:var(--c-white);color:var(--c-ink)}
/* Those two classes are tuned for the paper hero. Inside the one dark block
   they have to flip, or the ghost button is ink-on-ink and disappears. */
.band .btn-white{background:var(--bg);color:var(--c-ink)}
.band .btn-white:hover{background:var(--c-white);color:var(--c-ink)}
.band .btn-outline-white{border-color:var(--bg);color:var(--bg);background:transparent}
.band .btn-outline-white:hover{background:var(--bg);color:var(--c-ink)}

/* ---------- logos / trust strip ---------- */
.trust-strip{display:flex;gap:34px;flex-wrap:wrap;align-items:center;justify-content:center}
.trust-strip span{font-size:11px;font-weight:400;color:var(--c-mute);letter-spacing:.13em;text-transform:uppercase}

/* ---------- footer ---------- */
.site-foot{background:var(--c-ink);color:var(--bg);padding:46px 0 24px;margin-top:0}
.site-foot a{color:rgba(233,232,228,.72);font-size:13.5px}
.site-foot a:hover{color:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
.foot-grid h4{color:var(--bg);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
              margin-bottom:12px;opacity:.55;font-weight:400}
.foot-links{display:flex;flex-direction:column;gap:2px}
.foot-links a{padding:7px 0}
.foot-brand{display:flex;align-items:center;gap:9px;font-weight:500;font-size:17px;color:var(--bg);margin-bottom:12px}
.foot-brand .brand-mark{background:var(--bg);color:var(--c-ink)}
.foot-note{
  margin-top:34px;padding-top:20px;border-top:1px solid rgba(233,232,228,.16);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:12px;color:rgba(233,232,228,.55);
}

/* ---------- breadcrumb ---------- */
.crumbs{font-size:12.5px;color:var(--c-mute);padding:16px 0 0}
.crumbs a{color:var(--c-mute)}
.crumbs span{margin:0 6px;opacity:.6}

/* ---------- prose (article/guide pages) ---------- */
.prose{max-width:70ch}
.prose h2{margin-top:38px;margin-bottom:12px}
.prose h3{margin-top:26px;margin-bottom:8px}
.prose p{margin-bottom:14px;color:var(--c-charcoal)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:20px;color:var(--c-charcoal)}
.prose li{margin-bottom:7px}
.prose strong{color:var(--c-ink);font-weight:500}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .step-card{border-right:0}
}
@media (max-width:768px){
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--bg);border-bottom:1px solid var(--c-line);
    flex-direction:column;align-items:stretch;padding:8px 12px 14px;gap:0;
  }
  .site-nav.on{display:flex}
  .site-nav a{padding:12px 14px;border-bottom:1px solid var(--c-line-soft)}
  .nav-toggle{display:block}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .float-cta{right:12px;left:12px;bottom:12px;justify-content:space-between}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .band .row{justify-content:stretch!important}
  .band .row .btn{flex:1}
  .stats{grid-template-columns:1fr 1fr}
  .source-format-action{align-items:stretch;flex-direction:column}
  .source-format-action .btn{width:100%}
}

/* Brand + picker + hamburger is three things in one row, and on a 320px
   screen the row ran out before the third currency — clipping the one that
   was current, so a Malaysian saw "PHP IDR" and no sign they were already in
   the right place. Tighten the row rather than hide anything: the picker only
   works if all three codes are visible at once. */
@media (max-width:430px){
  .site-head-in{gap:10px;padding-left:15px;padding-right:15px}
  .market-pick a,.market-pick span{padding:6px 6px;letter-spacing:.03em}
  .market-pick ~ .nav-toggle{margin-left:0}
  .nav-toggle{padding:10px 11px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}