/* ============================================================
   EFEKTE — ad budget calculator
   Cream page. Five plain-language pickers at the top, then the money
   falling down a funnel one rung at a time on each channel.
   Same spacing ladder as the rest of the site: 4/8/16/24/32/48/64/80/96.
   ============================================================ */
.calcpage{background:var(--cream);color:var(--tx)}
.calc{position:relative}

.calc__top{padding:calc(var(--hdr-h) + var(--s8)) var(--gut) var(--s6)}
.calc__top h1{
  font-size:clamp(34px,5vw,60px);font-weight:200;letter-spacing:-.025em;
  line-height:1.04;color:var(--tx);max-width:17ch;
}
.calc__lede{margin-top:var(--s5);max-width:62ch;font-size:clamp(15px,1.6vw,18px);line-height:1.65;color:var(--tx-2)}

/* ============================================================
   PICKERS
   ============================================================ */
.picks{padding-bottom:var(--s7);display:flex;flex-direction:column;gap:var(--s5)}
.picks__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);max-width:640px}
@media(max-width:560px){.picks__row{grid-template-columns:1fr}}

.pick{display:flex;flex-direction:column;gap:var(--s2);border:0;padding:0;margin:0;min-width:0}
.pick__l{font-size:13px;color:var(--tx-3);letter-spacing:.01em;padding:0}
.pick select,.pick input{
  width:100%;padding:13px var(--s3);border-radius:var(--r-s);font:inherit;font-size:16px;
  color:var(--tx);background:#fff;border:1px solid rgba(7,7,7,.13);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.pick select{
  appearance:none;cursor:pointer;padding-right:var(--s6);
  background-image:linear-gradient(45deg,transparent 50%,rgba(7,7,7,.45) 50%),linear-gradient(135deg,rgba(7,7,7,.45) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.pick input:focus,.pick select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(36,87,255,.14)}
/* the euro sign belongs to the field, not to the label above it */
.pick__money{position:relative;display:block}
.pick__money i{
  position:absolute;left:var(--s3);top:50%;transform:translateY(-50%);
  font-style:normal;font-size:16px;color:var(--tx-3);pointer-events:none;
}
.pick__money input{padding-left:calc(var(--s3) + 16px);font-family:"Space Grotesk",sans-serif;font-variant-numeric:tabular-nums}

/* ── segmented choices ── */
.pick--seg{display:flex;flex-direction:column;gap:var(--s3)}
.seg{display:flex;flex-wrap:wrap;gap:var(--s2)}
.seg button{
  padding:11px var(--s4);border-radius:999px;font:inherit;font-size:15px;font-weight:300;
  color:var(--tx-2);background:rgba(255,255,255,.7);border:1px solid rgba(7,7,7,.12);
  cursor:pointer;transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.seg button:hover{border-color:rgba(7,7,7,.28);color:var(--tx)}
.seg button[aria-checked="true"]{
  color:#fff;font-weight:400;border-color:transparent;
  background:linear-gradient(120deg,var(--blue),var(--indigo));
  box-shadow:0 var(--s4) var(--s6) -30px rgba(36,87,255,1);
}
.seg button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.picks__note{font-size:13px;line-height:1.65;color:var(--tx-3);max-width:74ch}
.picks__note.is-missing{color:#a34a12}
.picks__standin{margin-top:calc(var(--s3) * -1)}
.linkbtn{
  font:inherit;font-size:14px;color:var(--blue);background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px solid rgba(36,87,255,.4);transition:border-color .25s var(--ease);
}
.linkbtn:hover{border-bottom-color:var(--blue)}

/* ── assumptions, folded away ── */
.adv{border-top:1px solid rgba(7,7,7,.1);padding-top:var(--s4)}
.adv summary{
  cursor:pointer;font-size:14px;color:var(--tx-2);list-style:none;
  display:inline-flex;align-items:center;gap:var(--s2);
}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{
  content:"";width:7px;height:7px;border-right:1.5px solid var(--tx-3);border-bottom:1.5px solid var(--tx-3);
  transform:rotate(-45deg);transition:transform .3s var(--ease);
}
.adv[open] summary::before{transform:rotate(45deg)}
.adv__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4);max-width:840px}
@media(max-width:760px){.adv__row{grid-template-columns:1fr}}
.adv__note{margin-top:var(--s3);font-size:13px;line-height:1.6;color:var(--tx-3);max-width:70ch}

/* ============================================================
   THE CASCADES
   Two channels side by side, each one a column the money falls down.
   ============================================================ */
.cascs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);padding-bottom:var(--s6)}
@media(max-width:880px){.cascs{grid-template-columns:1fr}}

.casc{
  padding:var(--s5) var(--s5) var(--s4);border-radius:var(--r-m);
  background:linear-gradient(168deg,#ffffff,#f6f7fd);
  border:1px solid rgba(7,7,7,.07);
  box-shadow:0 2px 3px -2px rgba(7,7,7,.07),0 var(--s6) var(--s8) -50px rgba(36,87,255,.9);
}
.casc__head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s5)}
.casc__head h2{font-size:19px;font-weight:500;letter-spacing:-.01em;color:var(--tx)}
.casc__sub{width:100%;font-size:13px;color:var(--tx-3);padding-left:calc(9px + var(--s2))}
.casc__dot{width:9px;height:9px;border-radius:50%;flex:none}
.casc__dot--m{background:var(--blue)}
.casc__dot--g{background:var(--indigo)}
.casc__dot--o{background:rgba(245,245,242,.5)}

.casc__flow{display:flex;flex-direction:column}
.step{display:flex;flex-direction:column;gap:3px}
.step__n{
  font-family:"Space Grotesk",sans-serif;font-size:clamp(26px,3.2vw,36px);font-weight:400;
  letter-spacing:-.02em;line-height:1.05;color:var(--tx);font-variant-numeric:tabular-nums;
}
.step--end .step__n{color:var(--blue)}
.step__rng{font-size:12px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.step__lab{font-size:14px;line-height:1.45;color:var(--tx-2);max-width:34ch}

/* the rung is the rate that got you from one step to the next */
.rung{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;margin-left:2px}
.rung i{
  width:1px;height:var(--s5);flex:none;
  background:linear-gradient(180deg,rgba(36,87,255,.15),rgba(36,87,255,.6));
}
.rung span{font-size:12.5px;color:var(--tx-3);letter-spacing:.01em;font-variant-numeric:tabular-nums}

.casc__out{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid rgba(7,7,7,.1);
}
.casc__outl{font-size:14px;color:var(--tx-2)}
.casc__outv{
  font-family:"Space Grotesk",sans-serif;font-size:clamp(24px,2.8vw,32px);font-weight:400;
  letter-spacing:-.02em;color:var(--tx);font-variant-numeric:tabular-nums;
}

/* first view only: the steps arrive one under the other so the last
   number lands as the answer rather than appearing with the rest. Gated
   on .is-ready so the whole cascade is visible with scripting off. */
.is-ready .casc .step,.is-ready .casc .rung,.is-ready .casc__out{
  opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.is-ready .casc.is-in .step,.is-ready .casc.is-in .rung,.is-ready .casc.is-in .casc__out{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .is-ready .casc .step,.is-ready .casc .rung,.is-ready .casc__out{opacity:1;transform:none;transition:none}
}

/* ============================================================
   ORGANIC — the column with nothing in it, on purpose
   ============================================================ */
.organic{padding-bottom:var(--s7)}
.organic__in{
  position:relative;padding:var(--s6);border-radius:var(--r-m);
  background:linear-gradient(150deg,#12131c,#0a0b12 62%,#141c3c);
  color:var(--tx-i);overflow:hidden;
}
.organic__in::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--noise);background-size:180px 180px;opacity:.18;
}
.organic__head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4)}
.organic__head h2{font-size:19px;font-weight:500;color:var(--tx-i)}
.organic__q{
  position:relative;z-index:1;
  font-size:clamp(22px,2.8vw,32px);font-weight:200;letter-spacing:-.02em;line-height:1.15;
  color:var(--tx-i);max-width:20ch;
}
.organic__p{position:relative;z-index:1;margin-top:var(--s4);max-width:62ch;font-size:15px;line-height:1.7;color:var(--tx-i2)}

/* ============================================================
   THE ARITHMETIC
   ============================================================ */
.fine{padding-bottom:var(--s9)}
.fine h2{font-size:clamp(20px,2.4vw,26px);font-weight:300;color:var(--tx);margin-bottom:var(--s4)}
.fine__p{
  padding:var(--s5);border-radius:var(--r-m);
  background:rgba(255,255,255,.7);border:1px solid rgba(7,7,7,.08);
  font-size:14px;line-height:1.9;color:var(--tx-2);
}
.fine__p code{font-family:"Space Grotesk",monospace;font-size:14px;color:var(--blue)}
.fine__note{margin-top:var(--s4);font-size:13px;line-height:1.7;color:var(--tx-3);max-width:74ch}

/* A text link is 21px tall on a phone, well under a comfortable 44px tap.
   The hit area grows invisibly around it instead of the link growing, so the
   underline stays where it is. */
.linkbtn{position:relative}
.linkbtn::before{content:"";position:absolute;inset:-12px -6px}