/* gfs-lp.css — the shared visual + motion layer for the vertical landing pages
   (/restaurants /trades /barbers /clinics /shops).
   Loaded AFTER each page's inline <style>, so it layers on top of the tokens
   each page already declares. It introduces no new colours — everything here is
   derived from --accent / --ink / --bone so each page keeps its own identity. */

/* ---- 1. scroll progress -------------------------------------------------- */
.gfs-prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;
  transform:scaleX(0);transform-origin:0 50%;background:var(--accent);
  will-change:transform;pointer-events:none}

/* ---- 2. reveal ----------------------------------------------------------- */
/* .gfs-pre is applied by JS ONLY to elements below the fold at load, so the
   at-rest page is always complete. Never author opacity:0 into the HTML. */
.gfs-pre{opacity:0;transform:translate3d(0,20px,0)}
.gfs-in{opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}

/* ---- 3. hero atmosphere -------------------------------------------------- */
/* A ground, not a decoration: three low-alpha radials give the headline
   something to sit on so the top of the page is not flat #0B0D10. */
.hero{position:relative;isolation:isolate;overflow:hidden;
  border-bottom:1px solid rgba(217,242,76,.16);
  /* The ground lives on .hero's own background rather than a ::before. Two
     reasons: percentages then resolve against a box whose geometry is obvious
     (an earlier ::before sat 30% above the hero, so its first radial centred
     off-screen and only a faded tail showed), and it removes the negative
     z-index / stacking-context dance for the layer that actually has to be
     seen. The grid below stays on ::after — if a renderer ever skips it, all
     that is lost is a 5%-alpha hairline. */
  background:
    radial-gradient(62% 52% at 14% 22%,rgba(217,242,76,.17),transparent 66%),
    radial-gradient(54% 46% at 88% 12%,rgba(194,102,58,.15),transparent 68%),
    radial-gradient(80% 46% at 46% 104%,rgba(31,74,58,.30),transparent 72%),
    var(--ink)}
/* Hairline grid — reads as drafting paper, not as a pattern you notice. */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(86% 76% at 34% 34%,#000,transparent 80%);
          mask-image:radial-gradient(86% 76% at 34% 34%,#000,transparent 80%)}

/* ---- 4. type, lifted ----------------------------------------------------- */
.hero h1{font-size:clamp(42px,7.6vw,92px);line-height:.99;letter-spacing:-.034em}
h2{font-size:clamp(30px,5vw,54px);letter-spacing:-.026em}
.hero .lede{font-size:clamp(17px,2.05vw,21px)}
.eyebrow{position:relative;padding-left:20px;display:inline-block}
.eyebrow::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:1px;background:var(--accent)}

/* ---- 5. the section spine ------------------------------------------------ */
/* A rule down the content column that fills as the section passes. It marks
   real structure — where one argument ends and the next begins. */
@media(min-width:1080px){
  section{position:relative}
  section::before{content:"";position:absolute;left:max(24px,calc(50% - 570px - 26px));
    top:0;bottom:0;width:1px;background:rgba(255,255,255,.07)}
  section::after{content:"";position:absolute;left:max(24px,calc(50% - 570px - 26px));
    top:0;width:1px;height:var(--spine,0%);background:var(--accent);opacity:.55}
}

/* ---- 6. the calculator, as the page's hero visual ------------------------ */
.calc{position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-2),rgba(11,13,16,.6))}
.calc::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,var(--accent),transparent 62%)}

.field input[type=number]{font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  transition:box-shadow .18s ease}
.field input[type=number]:hover{box-shadow:0 0 0 3px rgba(217,242,76,.12)}

/* Styled range track — the default grey slider is the single strongest
   "unfinished" tell on an otherwise considered page. */
/* 44px tall, not the 34px the base pages had: on a phone the sliders are the
   most-dragged control here and the thumb is only 20px. */
.field input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;
  min-height:44px;height:44px;margin:0;cursor:pointer}
.field input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:rgba(255,255,255,.15)}
.field input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.15)}
.field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:20px;height:20px;margin-top:-8.5px;border-radius:50%;border:0;cursor:grab;
  background:var(--accent);box-shadow:0 0 0 5px rgba(217,242,76,.14)}
.field input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:0;
  cursor:grab;background:var(--accent);box-shadow:0 0 0 5px rgba(217,242,76,.14)}
.field input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;box-shadow:0 0 0 8px rgba(217,242,76,.2)}

.rrow:not(:last-child){border-bottom:1px solid var(--line-dark)}
.rrow .v{font-variant-numeric:tabular-nums}

/* gfs-restaurants.html predates the .rrow.big/.v pattern — it uses .result/.big.
   Lifting only the four newer pages would leave the oldest one looking unfinished
   next to them, which is the exact tell this pass exists to remove. */
.result{position:relative}
.result .big{font-size:clamp(44px,8.4vw,84px);letter-spacing:-.035em;line-height:.94;
  font-variant-numeric:tabular-nums}
.result .big.sm{font-size:clamp(26px,3.8vw,36px);letter-spacing:-.02em;line-height:1.05}
.price .p{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.rrow.big{border-bottom:0;align-items:flex-end}
.rrow.big .v{font-size:clamp(46px,9.6vw,92px);letter-spacing:-.035em;line-height:.92;
  font-variant-numeric:tabular-nums}

/* ---- 7. cards get a real state ------------------------------------------ */
.card{position:relative;transition:border-color .22s ease,transform .22s ease}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.card:hover{border-color:rgba(255,255,255,.18);transform:translateY(-2px)}
.card:hover::before{transform:scaleX(1)}

/* ---- 8. the sticky ask --------------------------------------------------- */
/* Appears once the hero is gone, hides again over the form so it never covers
   the thing it is pointing at. */
.gfs-stick{position:fixed;left:0;right:0;bottom:0;z-index:55;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px max(16px,calc(50% - 570px));
  background:rgba(11,13,16,.93);backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(102%);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.gfs-stick[data-on="1"]{transform:none}
.gfs-stick .t{font-size:14.5px;color:var(--text-dim);flex:1 1 200px;min-width:0}
.gfs-stick .t b{color:var(--bone);font-weight:600}
.gfs-stick .btn{padding:10px 18px;min-height:42px;flex:0 0 auto}
@media(max-width:560px){.gfs-stick .t{flex-basis:100%;font-size:13.5px}}

/* ---- 9. honest reduced-motion ------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .gfs-pre{opacity:1;transform:none}
  .gfs-in{transition:none}
  .gfs-stick{transition:none}
}