/* ============================================================================
   LOKAL — "Market Terminal", the layer that carries the art direction.
   Loaded after styles.css and deliberately overriding it.

   The idea in one line: LOKAL sells a market terminal, so the page IS one. Real
   prices run across it on a tape, the search field is a command line, and money is
   set in a ruled rate card the way the people buying this read numbers all day.

   What it is built to avoid, on purpose:
     - eyebrow labels in small caps above a heading  -> the heading carries itself
     - rounded soft cards in a grid                  -> hairlines, rules, rows
     - a centered hero with two twin buttons         -> asymmetric, one instrument
     - the same fade-up on everything                -> motion reserved for moments
   Every animation has a visible final state without JS and is gated behind
   prefers-reduced-motion.
   ========================================================================== */

:root{
  --tape-h: 46px;
  --rule: rgba(236,234,224,.14);
  --rule-strong: rgba(236,234,224,.30);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------- the tape */
.tape{
  position:relative;
  height:var(--tape-h);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
  background:
    linear-gradient(90deg, var(--ink) 0%, transparent 6%, transparent 94%, var(--ink) 100%),
    var(--ink-2);
  z-index:3;
}
.tape--top{ border-top:0 }
.tape__run{
  display:flex; align-items:center; gap:0;
  height:100%;
  width:max-content;
  will-change:transform;
  animation:tape-run var(--tape-dur, 90s) linear infinite;
  animation-play-state:var(--tape-state, running);
}
.tape--bottom .tape__run{ animation-direction:reverse }
@keyframes tape-run{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }

.tick{
  display:inline-flex; align-items:baseline; gap:.5em;
  padding:0 1.15rem;
  font-family:var(--fm);
  font-size:.72rem;
  letter-spacing:.06em;
  white-space:nowrap;
  border-right:1px solid var(--rule);
  color:var(--bone-2);
}
.tick__z{ color:var(--bone-deco); font-size:.66rem }
.tick__n{ color:var(--bone); text-transform:uppercase; letter-spacing:.1em }
.tick__p{ color:var(--bone) }
.tick__y{ font-size:.68rem }
.tick__y.is-up{ color:var(--volt) }
.tick__y.is-down{ color:var(--down) }
.tick__y.is-flat{ color:var(--bone-deco) }

/* ---------------------------------------------------------------- the hero */
.hero{
  position:relative;
  padding:0;
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(203,247,74,.05) 0%, transparent 55%),
    var(--ink);
}
.hero__inner{
  position:relative;
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(2.5rem,4.5vw,4.5rem) var(--gutter) clamp(2.5rem,4vw,4rem);
  display:grid;
  /* Asymmetric on purpose: the text column is wider than the proof, and the console
     sits under the words rather than beside them. Nothing is centered. */
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  grid-template-areas:
    "lede  proof"
    "cons  proof";
  column-gap:clamp(2rem,5vw,5rem);
  row-gap:clamp(2rem,4vw,3.25rem);
  align-items:start;
}
.hero__lede{ grid-area:lede }
.console{ grid-area:cons; align-self:end }
.proof{ grid-area:proof; align-self:center }

.hero__title{
  font-family:var(--fd);
  font-weight:700;
  /* The one place the type is allowed to be enormous. Tight tracking, tight leading:
     it should read as a slab, not as three sentences. */
  font-size:clamp(2.6rem,6.6vw,5.4rem);
  line-height:.94;
  letter-spacing:-.035em;
  margin:0 0 clamp(1.25rem,2.2vw,1.75rem);
  text-wrap:balance;
}
.hero__line{ display:block; overflow:hidden }
.hero__line > span{ display:block }
.hero__line--key > span{ color:var(--volt) }

.hero__aside{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2rem);
  max-width:56ch;
}
.hero__lead{
  margin:0;
  font-size:clamp(1rem,1.25vw,1.12rem);
  line-height:1.6;
  color:var(--bone-2);
}

/* Figures set as a ledger entry, not as a three-column stat strip. */
.figs{ margin:0; display:grid; gap:1.35rem }
.fig{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"v k" "v n";
  column-gap:1rem;
  align-items:baseline;
  padding-top:1.1rem;
  border-top:1px solid var(--rule);
}
.fig__k{
  grid-area:k;
  font-family:var(--fm); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-mute);
}
.fig__v{
  grid-area:v; margin:0;
  font-family:var(--fd); font-weight:700;
  font-size:clamp(2rem,3.6vw,2.9rem);
  line-height:1; letter-spacing:-.02em;
  color:var(--volt);
  font-variant-numeric:tabular-nums;
}
.fig__n{ grid-area:n; margin:.3rem 0 0; font-size:.86rem; color:var(--bone-mute); line-height:1.45 }

/* ------------------------------------------------------------- the console */
.console{
  border-top:2px solid var(--volt);
  padding-top:1rem;
  max-width:34rem;
  /* Vu le 18/09/2026 : la liste de suggestions (absolue, z-index 40) passait SOUS les
     compteurs qui suivent — chaque bloc révélé au scroll garde une animation « both »,
     donc son propre contexte d'empilement, peint dans l'ordre du DOM. Le contexte de la
     console doit être au-dessus de ses frères. */
  position:relative; z-index:5;
}
.console__head{ display:flex; align-items:center; gap:.55rem; margin-bottom:.6rem }
.console__prompt{ font-family:var(--fm); color:var(--volt); font-size:.9rem; line-height:1 }
.console__label{
  font-family:var(--fm); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bone-mute);
}
.console__search{ position:relative }
.console .search__field{
  display:flex; align-items:center;
  border:0; border-bottom:1px solid var(--rule-strong);
  border-radius:0;
  background:none;
  padding:0 0 .7rem;
  transition:border-color .25s var(--ease-out);
}
.console .search__field:focus-within{ border-bottom-color:var(--volt) }
.console .search__input{
  flex:1; min-width:0;
  background:none; border:0; outline:none;
  color:var(--bone);
  font-family:var(--fd); font-weight:500;
  font-size:clamp(1.15rem,2.1vw,1.6rem);
  letter-spacing:-.01em;
  padding:0;
}
.console .search__input::placeholder{ color:var(--bone-deco); font-weight:400 }
.search__caret{
  width:9px; height:1.25em; flex:none;
  background:var(--volt);
  animation:caret 1.15s steps(1) infinite;
}
.console .search__field:focus-within .search__caret{ animation-duration:.85s }
@keyframes caret{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
.console__sub{
  margin:.85rem 0 0;
  font-family:var(--fm); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-mute);
}

/* Results read as terminal rows. */
.console .search__results{
  position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:40;
  margin:0; padding:.3rem 0; list-style:none;
  background:var(--ink-2);
  border:1px solid var(--rule-strong);
  border-radius:0;
  max-height:20rem; overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.console .result{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.6rem 1rem; cursor:pointer;
  border-left:2px solid transparent;
}
.console .result:hover,
.console .result.is-active{ background:rgba(203,247,74,.07); border-left-color:var(--volt) }
.console .result__name{ font-family:var(--ft); font-size:.95rem; color:var(--bone) }
.console .result__zip{ font-family:var(--fm); font-size:.78rem; color:var(--volt); margin-left:.45rem }
.console .result__meta{ font-family:var(--fm); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-mute) }
.console .result--metro .result__meta{ color:var(--volt) }
.console .result--empty{ cursor:default; color:var(--bone-mute); font-size:.9rem; padding:.75rem 1rem }

/* ---------------------------------------------------------------- the proof */
.proof{ margin:0; position:relative }
.proof .sample-card{
  /* Bled and tilted: a product shot, not a screenshot parked in a rounded box. */
  transform:rotate(-1.4deg);
  transform-origin:80% 30%;
  border:1px solid var(--rule-strong);
  border-radius:2px;
  box-shadow:0 40px 90px rgba(0,0,0,.6);
}
.proof__cap{
  margin:1.15rem 0 0;
  font-family:var(--fm); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone-mute);
  padding-left:1.15rem; border-left:2px solid var(--volt);
}
.sample-card__badge{
  display:inline-block;
  margin-top:.55rem;
  font-family:var(--fm); font-size:.68rem; letter-spacing:.1em;
  background:var(--volt); color:var(--ink);
  padding:.2rem .5rem;
}

/* --------------------------------------------------------- section rhythm */
/* Headings carry themselves. No label above them repeating what they say. */
.sec-head{ max-width:44ch; margin-bottom:clamp(2rem,4vw,3rem) }
.sec-head__title{
  font-family:var(--fd); font-weight:700;
  font-size:clamp(1.9rem,3.9vw,3.1rem);
  line-height:1.02; letter-spacing:-.028em;
  margin:0 0 .85rem;
}
.sec-head__lead{ margin:0; color:var(--bone-2); font-size:1.02rem; line-height:1.6 }

/* ------------------------------------------------------------- rate card */
.rates{ border-top:1px solid var(--rule-strong) }
.rate{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.4rem,2.6vw,2rem) 0;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.rate--key::before{
  content:""; position:absolute; left:calc(var(--gutter) * -.5); top:0; bottom:0;
  width:2px; background:var(--volt);
}
.rate__id{ display:flex; flex-direction:column; gap:.3rem; min-width:0 }
.rate__name{
  font-family:var(--fd); font-weight:700;
  font-size:clamp(1.25rem,2.1vw,1.6rem); letter-spacing:-.02em;
}
.rate__flag{
  font-family:var(--fm); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--volt);
}
.rate__desc{ color:var(--bone-mute); font-size:.92rem; line-height:1.5; max-width:46ch }
.rate__price{
  font-family:var(--fd); font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.6rem); letter-spacing:-.03em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.rate__price span{
  font-family:var(--fm); font-size:.7rem; font-weight:400;
  letter-spacing:.1em; color:var(--bone-mute); margin-left:.35rem;
}
.rate__act{ justify-self:end }

.incl{
  list-style:none; margin:clamp(1.75rem,3vw,2.5rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.55rem 2rem;
}
.incl li{
  position:relative; padding-left:1.4rem;
  font-size:.92rem; color:var(--bone-2); line-height:1.5;
}
.incl li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:1px; background:var(--volt);
}

.pricing__foot{
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:clamp(2rem,4vw,3.5rem); align-items:start;
}

/* ---------------------------------------------------------------- licence */
.licence__label{
  display:block; margin-bottom:.6rem;
  font-family:var(--fm); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bone-mute);
}
.licence__row{ display:flex; gap:.6rem; flex-wrap:wrap }
.licence__input{
  flex:1 1 13rem; min-width:0;
  background:var(--ink-2); color:var(--bone);
  border:1px solid var(--rule-strong); border-radius:0;
  padding:.7rem .85rem;
  font-family:var(--fm); font-size:.9rem; letter-spacing:.08em;
  text-transform:uppercase;
}
.licence__input:focus{ outline:none; border-color:var(--volt) }
.licence__input::placeholder{ color:var(--bone-deco); letter-spacing:.08em }
.licence__err{ margin:.6rem 0 0; color:var(--down); font-size:.85rem }
.licence__owned{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin:0; padding:.75rem .9rem;
  border:1px solid var(--volt); color:var(--volt);
  font-family:var(--fm); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
}
.licence__tier{ color:var(--bone) }

/* Buttons: one filled, the rest ruled. Never two identical twins side by side. */
.btn--line{
  background:none; color:var(--bone);
  border:1px solid var(--rule-strong);
  border-radius:0;
}
.btn--line:hover{ border-color:var(--volt); color:var(--volt) }
.pricing .btn{ border-radius:0; white-space:nowrap }
.plan__buy[data-live="0"]{ opacity:.85 }

/* ----------------------------------------------------------------- motion */
/* Reveals differ by role instead of one fade-up applied to everything. */
[data-reveal="rule"]{ opacity:1 }
[data-reveal="rule"] > *{ opacity:0; transform:translateY(12px) }
[data-reveal="rule"].is-in > *{ opacity:1; transform:none; transition:opacity .6s var(--ease-out), transform .6s var(--ease-out) }
[data-reveal="rule"].is-in > *:nth-child(2){ transition-delay:.08s }
[data-reveal="rule"].is-in > *:nth-child(3){ transition-delay:.16s }

[data-reveal="rise"]{ opacity:0; transform:translateY(26px) scale(.995) }
[data-reveal="rise"].is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease-out), transform .9s var(--ease-out) }

/* The headline is the one big move on the page: each line is unmasked upward. */
.js-anim .hero__line > span{ transform:translateY(102%) }
.js-anim .hero__title.is-in .hero__line > span{
  transform:none;
  transition:transform .9s var(--ease-out);
}
.js-anim .hero__title.is-in .hero__line:nth-child(2) > span{ transition-delay:.1s }
.js-anim .hero__title.is-in .hero__line:nth-child(3) > span{ transition-delay:.2s }

@media (prefers-reduced-motion: reduce){
  .tape__run{ animation:none }
  .search__caret{ animation:none; opacity:1 }
  .js-anim .hero__line > span,
  .js-anim .hero__title.is-in .hero__line > span{ transform:none; transition:none }
  [data-reveal="rule"] > *,
  [data-reveal="rise"]{ opacity:1; transform:none; transition:none }
  .proof .sample-card{ transform:none }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1020px){
  .hero__inner{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"lede" "cons" "proof";
  }
  .console{ align-self:start; max-width:none }
  .proof .sample-card{ transform:none; max-width:26rem }
  .rate{ grid-template-columns:minmax(0,1fr) auto; row-gap:1rem }
  .rate__act{ grid-column:1 / -1; justify-self:start }
  .rate--key::before{ left:0; width:2px }
}
@media (max-width: 640px){
  .hero__title{ font-size:clamp(2.4rem,11vw,3.4rem) }
  .fig{ grid-template-columns:1fr; grid-template-areas:"k" "v" "n" }
  .tick{ font-size:.66rem; padding:0 .85rem }
  :root{ --tape-h:38px }
}

/* ------------------------------------------------------------- figure band */
/* The three numbers that matter, on a rule across the full width, rather than a
   three-column stat strip floating in the middle of the page. */
.figband{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--gutter) clamp(2.5rem,5vw,4rem);
}
.figband .figs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.5rem,3vw,3rem);
}
@media (max-width: 640px){
  .figband .figs{ grid-template-columns:1fr }
}

/* --------------------------------------------------------- section rhythm */
/* The old spacing let 120px of nothing sit between blocks, which reads as the page
   having run out of things to say. Tighter, and each section announced by a rule
   rather than by a gap. */
.generator, .compare, .pricing, .cities, .about{
  padding:clamp(3rem,5.5vw,5rem) 0;
  border-top:1px solid var(--rule);
}
.compare__grid{ margin-top:clamp(1.75rem,3vw,2.5rem) }
.about__grid{ margin-top:clamp(1.5rem,2.5vw,2.25rem) }

/* The comparison stops being two soft cards facing off and becomes two ruled
   columns, the losing one greyed and the winning one carrying the volt edge. */
.cmp{
  border:0; border-radius:0; background:none;
  border-top:2px solid var(--rule-strong);
  padding-top:1.25rem;
}
.cmp--us{ border-top-color:var(--volt) }
.cmp__label{
  font-family:var(--fm); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-mute);
}
.cmp--us .cmp__label{ color:var(--volt) }

/* The workshop panels keep their surface (they are the product's own UI) but lose
   the pillowy corners that make everything look generated. */
.preview__stage, .metrics-panel, .caption-box, .export-panel, .editor__block{
  border-radius:2px;
}

/* --------------------------------------------------- grid overflow guard */
/* A grid item defaults to min-width:auto, so an item holding a 1080px canvas refuses
   to shrink and drags its whole track past the viewport. On a 390px phone the stage
   was laying out at 440px and clipping the copy. min-width:0 lets the track shrink;
   the canvas then honours its own max-width:100%. */
.stage > *, .preview, .editor{ min-width:0 }
.preview__stage{ overflow:hidden }
.preview__stage canvas{ min-width:0; width:100%; height:auto; max-width:100% }


/* ------------------------------------------------------------ thin market */
/* 4 753 des marches servis ont moins de 20 ventes sur 90 jours. Les chiffres sont
   vrais, mais ils bougent fortement sur de petits nombres. On le dit a l'agent
   plutot que de le laisser engager sa credibilite sans le savoir. */
.thin-notice{
  display:flex; align-items:flex-start; gap:.55rem;
  margin:0 0 .85rem; padding:.6rem .75rem;
  border-left:2px solid var(--gold, #E8B33A);
  background:rgba(232,179,58,.07);
  color:var(--bone-2);
  font-size:.86rem; line-height:1.45;
}
.thin-notice svg{ flex:none; margin-top:.15rem; color:var(--gold, #E8B33A) }