/* bipbus landing page (/). Same world as the setup site (app.css): paper, ink, one green. */
@font-face{font-family:"VB Sans";src:url(fonts/vb-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"VB Sans";src:url(fonts/vb-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"VB Condensed";src:url(fonts/vb-cond-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"VB Mono";src:url(fonts/vb-mono-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"bipbus name";src:url(fonts/bipbus-name.woff2) format("woff2");font-weight:100 900;font-display:block}

:root{
  --bg:#F7F6F2; --surface:#FFFFFF; --ink:#111111; --muted:#55524B; --line:#D9D6CE; --tabs:#E7E4DC;
  --accent:#1E6B45; --accent-dark:#14492F; --accent-soft:#E3EFE7; --accent-ring:#CFE3D6;
  --error:#A3261B; --on-ink:#F7F6F2; --on-ink-muted:#C9C5BC;
  --sans:"VB Sans",-apple-system,"Segoe UI",system-ui,sans-serif;
  --cond:"VB Condensed","VB Sans",-apple-system,system-ui,sans-serif;
  --mono:"VB Mono",ui-monospace,Menlo,monospace;
  --wrap:1320px; --gut:clamp(20px,3vw,40px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--ink) var(--tabs);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);caret-color:var(--accent)}
::selection{background:var(--accent);color:#fff}
img{max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{text-wrap:balance}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:10}
.skip:focus{top:12px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- top bar ---- */
.top{border-bottom:2px solid var(--ink)}
.top-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex}
.brand img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:26px;font-weight:600;font-size:15px}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline}
.nav-code{height:40px;padding:0 16px;border:2px solid var(--ink);border-radius:20px;display:inline-block;line-height:36px;white-space:nowrap}
.nav .nav-code:hover{background:var(--ink);color:#fff;text-decoration:none}
.lang{display:flex;border:2px solid var(--ink);border-radius:10px;overflow:hidden}
.lang button{min-width:42px;height:32px;border:0;background:transparent;font:600 14px var(--sans);color:var(--ink);cursor:pointer}
.lang button[aria-pressed=true]{background:var(--ink);color:#fff}

/* ---- first viewport: the annotated display ---- */
.fiche{max-width:var(--wrap);margin:0 auto;padding:clamp(28px,4vw,52px) var(--gut) clamp(56px,7vw,96px);
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-areas:"head device" "rest device";
  grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,64px);align-items:start}
.fiche-head{grid-area:head}
.fiche-rest{grid-area:rest}
.device{grid-area:device}
h1{font:700 clamp(2.9rem,1.5rem + 3.3vw,4.6rem)/.95 var(--cond);letter-spacing:-.01em;margin:0 0 18px}
.lede{font-size:19px;line-height:1.5;margin:0 0 26px;max-width:36ch}
.offer{border-top:2px solid var(--ink);padding-top:18px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px}
.price{margin:0;display:flex;flex-direction:column}
.amount{font:600 2.3rem/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.terms{font-size:15px;color:var(--muted);margin-top:6px}
.btn-buy{display:inline-flex;align-items:center;justify-content:center;height:56px;min-width:190px;padding:0 30px;border-radius:12px;
  background:var(--accent);color:#fff;font:600 18px var(--sans);text-decoration:none;transition:background .2s var(--ease),transform .12s}
.btn-buy:hover{background:var(--accent-dark)}
.btn-buy:active{transform:translateY(1px)}
.btn-buy[aria-busy=true]{cursor:progress;opacity:.85}

.legend{list-style:none;margin:30px 0 0;padding:0;border-top:2px solid var(--ink)}
.legend li{position:relative;padding:11px 0 12px;border-bottom:1px solid var(--line)}
/* The active tint is its own layer, so the row's hairline stays straight and flush with the column. */
.legend li::before{content:"";position:absolute;inset:3px -10px;z-index:-1;border-radius:8px;background:var(--accent-soft);opacity:0;transition:opacity .2s var(--ease)}
.legend li.on::before{opacity:1}
.legend{position:relative;z-index:0}
.key{all:unset;display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;font-size:16px}
.key:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:6px}
.k-text{display:block;margin:3px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
.legend li.on .k-title{color:var(--accent-dark)}

.device{margin:0}
@media (min-width:1081px){.device{position:sticky;top:24px}}
/* The case, drawn after the real E1001 (reference photos in brand/reference/, not shipped): flat white plastic,
   thin side bezels, a deeper bottom edge, small corners. */
.device{position:relative}
.bezel{position:relative;z-index:1;background:linear-gradient(180deg,#FFFFFF,#FCFCFB);border:1px solid #D9D9D6;border-radius:10px;
  padding:clamp(10px,1.6vw,22px) clamp(8px,1.3vw,17px) clamp(26px,4.4vw,62px);
  box-shadow:inset 0 1px 0 #fff,0 40px 60px -36px rgba(17,17,17,.45),0 4px 10px rgba(17,17,17,.08)}
.screen{position:relative;aspect-ratio:5/3;overflow:hidden;background:#E7E6E1;box-shadow:0 0 0 3px #DDDCD6,0 0 0 4px #CFCDC6}
.screen img{display:block;width:100%;height:100%;mix-blend-mode:multiply}
/* The render is 1-bit, 800×480: show it at exactly 800 CSS px (crisp, 2× on retina) when there is room;
   below that it is scaled smoothly, never pixel-doubled at a fractional size. */
@media (min-width:1400px){
  .fiche{grid-template-columns:minmax(0,1fr) 836px}
  .bezel{padding:22px 17px 62px}
  .screen img{image-rendering:pixelated}
}
.flash{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}
.screen.inv img{filter:invert(1)}
.screen.ink .flash{opacity:1}
.screen.paper .flash{opacity:1;background:#E7E6E1}
.spot{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--w,0);height:var(--h,0);border:3px solid var(--accent);border-radius:6px;
  box-shadow:0 0 0 200vmax rgba(247,246,242,.66);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.screen.spotting .spot{opacity:1}
.device figcaption{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:18px;font-size:14px;color:var(--muted)}
.cap-text{display:flex;flex-direction:column;gap:4px}
.refresh{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:10px;background:transparent;font:600 15px var(--sans);color:var(--ink);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.refresh svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.refresh:hover{background:var(--ink);color:#fff}
.refresh[aria-busy=true]{cursor:progress}
.moment{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- setup ---- */
.how,.specs,.faq{max-width:var(--wrap);margin:0 auto;padding:clamp(64px,8vw,112px) var(--gut)}
.how{border-top:2px solid var(--ink)}
h2{font:700 clamp(2.1rem,1.2rem + 2.3vw,3.4rem)/1.02 var(--cond);letter-spacing:-.005em;margin:0 0 clamp(28px,3.5vw,48px);max-width:20ch}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.step img{display:block;width:100%;border:2px solid var(--ink);border-radius:12px;background:#fff}
.step h3{font:700 1.65rem/1.1 var(--cond);margin:22px 0 8px;display:flex;align-items:center;gap:12px}
.step-n{width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;display:inline-grid;place-items:center;font:600 15px var(--mono)}
.step p{margin:0;max-width:46ch}
.steps-note{margin:20px 0 0;font-size:14px;color:var(--muted)}

/* ---- promise ---- */
.promise{background:var(--ink);color:var(--on-ink);padding:clamp(64px,8vw,112px) var(--gut)}
.vows{max-width:var(--wrap);margin:0 auto;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.vows li{border-top:1px solid #3A3936;padding-top:22px;color:var(--on-ink-muted)}
.vows strong{display:block;font:700 clamp(1.9rem,1.1rem + 1.9vw,2.8rem)/1.02 var(--cond);color:#fff;margin-bottom:14px;text-wrap:balance}

/* ---- specs & faq: heading left, content right ---- */
.specs,.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:clamp(32px,4vw,64px);align-items:start}
.faq{padding-top:0}
.spec-list{margin:0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.spec-list div{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:16px;padding:15px 0;border-top:1px solid var(--line)}
.spec-list div:first-child{border-top:0}
.spec-list dt{font-weight:600}
.spec-list dd{margin:0}
.qs{border-top:2px solid var(--ink)}
.qs details{border-bottom:1px solid var(--line)}
.qs summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;font:600 19px/1.35 var(--sans);position:relative}
.qs summary::-webkit-details-marker{display:none}
.qs summary::before,.qs summary::after{content:"";position:absolute;right:8px;top:50%;width:16px;height:2px;background:var(--ink);transition:transform .3s var(--ease)}
.qs summary::after{transform:rotate(90deg)}
.qs details[open] summary::after{transform:rotate(0)}
.qs summary:hover{color:var(--accent-dark)}
.qs details p{margin:0 0 22px;max-width:62ch}

/* ---- close ---- */
.close{max-width:calc(var(--wrap) - 2 * var(--gut));margin:0 auto clamp(64px,8vw,112px);padding:clamp(28px,4vw,56px);
  background:var(--surface);border:2px solid var(--ink);border-radius:12px;
  display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.close-mark{width:clamp(96px,10vw,150px);height:auto}
.close h2{margin-bottom:18px}
.close .price{margin-bottom:20px}
.code{border-left:1px solid var(--line);padding-left:clamp(28px,4vw,56px)}
.code label{display:block;font-weight:600;font-size:16px;margin-bottom:12px;max-width:34ch}
.code-row{display:flex;gap:8px}
.code input{flex:1;width:0;min-width:0;height:54px;padding:0 14px;border:2px solid var(--ink);border-radius:10px;background:#fff;
  font:600 20px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.code input::placeholder{color:#6B675F;letter-spacing:.1em}
.code input:focus{outline:3px solid var(--accent-ring);outline-offset:0;border-color:var(--accent)}
.code input[aria-invalid=true]{border-color:var(--error)}
.code button{height:54px;padding:0 20px;border:2px solid var(--ink);border-radius:10px;background:#fff;font:600 16px var(--sans);color:var(--ink);cursor:pointer}
.code button:hover{background:var(--ink);color:#fff}
.code-err{margin:10px 0 0;color:var(--error);font-size:14px}

/* ---- footer ---- */
.foot{background:var(--ink);color:var(--on-ink-muted);padding:40px var(--gut)}
.foot{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.foot img{height:32px;width:auto}
.foot p{margin:0;font-size:14px;max-width:72ch}

/* ---- /acheter placeholder ---- */
.soon{max-width:var(--wrap);margin:0 auto;padding:clamp(48px,8vw,112px) var(--gut)}
.soon .lede{max-width:52ch}

/* ---- narrower screens ---- */
@media (max-width:1080px){
  .fiche{grid-template-columns:1fr;grid-template-areas:"head" "device" "rest";grid-template-rows:auto}
  .device{margin:6px 0 34px}
  .lede{max-width:52ch}
  .legend{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .close{grid-template-columns:auto 1fr}
  .code{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:28px}
}
@media (max-width:820px){
  .nav a:not(.nav-code){display:none}
  .steps,.vows{grid-template-columns:1fr}
  .specs,.faq{grid-template-columns:1fr}
  .legend{grid-template-columns:1fr}
  .spec-list div{grid-template-columns:1fr;gap:2px}
}
@media (max-width:560px){
  .top-in{height:64px;gap:12px}
  .brand img{height:30px}
  .nav{gap:10px}
  .nav-code{height:36px;padding:0 12px;font-size:14px;line-height:32px}
  .offer{flex-direction:column;align-items:stretch}
  .btn-buy{width:100%}
  .close{grid-template-columns:minmax(0,1fr);text-align:left;margin-left:var(--gut);margin-right:var(--gut)}
  .close-mark{width:84px}
  .bezel{border-radius:8px}
  }

/* The name, in the wordmark's own letters (b i p u s; brand/logo/build_name_font.py) */
.bb{font-family:"bipbus name",var(--sans,"VB Sans"),sans-serif;font-weight:inherit;font-synthesis:none;letter-spacing:0}