/* ============================================================
   Avelle tools — Framer-language layer.
   Loads after ../framer.css and BEFORE each tool's own css,
   which has been rethemed to the light palette.
   ============================================================ */
.container{max-width:1120px;margin:0 auto;padding:0 1.5rem}
.text-center{text-align:center}
.section-label{display:inline-flex;align-items:center;gap:.55rem;padding:6px 16px;border-radius:100px;
  background-image:var(--glass);box-shadow:var(--glass-shadow);font-size:.85rem;font-weight:500;color:var(--ink)}
.section-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--purple-deep);
  box-shadow:0 0 0 4px rgba(43,24,166,.14)}

/* ===== Tool hero (shared by index + 4 calculators) ===== */
.tool-hero{padding:2.4rem 0 1.6rem !important;background:transparent !important;text-align:center}
.tool-hero__title{font-family:'Satoshi',sans-serif;font-weight:500;
  font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.1;letter-spacing:-.035em;
  color:var(--ink);margin:1.1rem 0 0}
.tool-hero__title span,.sc-grad,.ara-grad,.cs-grad{
  background:linear-gradient(120deg,var(--purple),var(--purple-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tool-hero__sub{margin:1.1rem auto 0;max-width:640px;font-size:1.02rem;line-height:1.6;
  font-weight:500;color:rgba(28,22,41,.6)}
.tool-hero__badges{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.6rem}
.tool-badge{display:inline-flex;align-items:center;gap:.45rem;padding:6px 15px;border-radius:100px;
  font-size:.82rem;font-weight:600;color:var(--ink);
  background-image:var(--glass);box-shadow:var(--glass-shadow),inset 0 0 0 1px rgba(82,78,240,.14)}
.tool-badge svg{width:15px;height:15px;fill:none;stroke:var(--purple);stroke-width:2.2}

/* ===== Tools index cards ===== */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.15rem}
.tool-card{display:flex;flex-direction:column;padding:1.8rem 1.6rem;border-radius:22px;text-decoration:none;
  background:linear-gradient(180deg,#FFFFFF,#F9FAFE);border:1px solid rgba(82,78,240,.22);
  box-shadow:0 10px 28px -14px rgba(43,24,166,.18),var(--glass-shadow);
  transition:transform .25s,box-shadow .25s}
.tool-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -14px rgba(43,24,166,.25)}
.tool-card__ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:1rem;
  color:var(--purple);background:linear-gradient(150deg,#F3EEFC,#E5DCF7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.tool-card__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tool-card h2{font-family:'Satoshi',sans-serif;font-weight:700;font-size:1.13rem;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:.5rem}
.tool-card p{font-size:.92rem;line-height:1.58;color:rgba(28,22,41,.62);margin-bottom:1rem}
.tool-card__cta{margin-top:auto;font-size:.9rem;font-weight:600;color:var(--purple-deep)}

/* ===== Shared calculator surfaces ===== */
.calc-section{background:transparent !important;padding:1rem 1.5rem 4rem !important}
.calc-grid,.cs-grid{max-width:1120px;margin:0 auto}
h1,h2,h3,h4{font-family:'Satoshi',sans-serif;color:var(--ink)}
body{background:#F4F5FB;color:var(--ink)}

/* range sliders in the Framer palette */
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:100px;
  background:rgba(43,24,166,.12);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  cursor:pointer;background:linear-gradient(150deg,var(--purple),var(--purple-deep));
  box-shadow:0 4px 12px rgba(43,24,166,.4),0 0 0 3px #fff}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;cursor:pointer;
  background:linear-gradient(150deg,var(--purple),var(--purple-deep));
  box-shadow:0 4px 12px rgba(43,24,166,.4),0 0 0 3px #fff}

/* selects / inputs */
select,input[type=text],input[type=number],input[type=email]{
  border-radius:12px;border:1px solid rgba(82,78,240,.22);background:rgba(255,255,255,.9);
  font-family:inherit;color:var(--ink)}
select:focus,input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(82,78,240,.15)}

/* primary/ghost buttons used across tools */
.ara-btn--primary,.calc-btn,.cs-btn--primary{
  background:linear-gradient(303deg,#F4F5FB -197%,var(--purple-deep) 100%) !important;
  color:#fff !important;border:none;border-radius:100px;font-weight:600;
  box-shadow:0 12px 26px -6px rgba(43,24,166,.45);transition:transform .18s}
.ara-btn--primary:hover,.calc-btn:hover,.cs-btn--primary:hover{transform:translateY(-2px)}
.ara-btn--ghost,.calc-btn-secondary{background-image:var(--glass) !important;color:var(--ink) !important;
  border-radius:100px;font-weight:600;box-shadow:var(--glass-shadow),inset 0 0 0 1px rgba(43,24,166,.14)}

/* generic card-ish panels inside tools get the glass treatment */
.calc-inputs,.calc-results,.ara-quiz-wrap,.ara-final-card,.ara-dim-card,.ara-tier-card,
.ara-for-card,.ara-next-card,.cs-card,.cs-panel{
  background:linear-gradient(180deg,#FFFFFF,#F9FAFE) !important;
  border:1px solid rgba(82,78,240,.30) !important;border-radius:22px !important;
  box-shadow:0 18px 40px -20px rgba(43,24,166,.32),0 2px 5px -2px rgba(43,24,166,.10),var(--glass-shadow) !important}

@media (max-width:820px){
  .tool-hero{padding:1.8rem 0 1.2rem !important}
}