:root{
      --bg-light:#E3E0D7;
      --bg-dark:#cfcabf;
      --card:#f6f4ef;
      --brd:#ddd7cc;
      --chip:#f1eee6;
      --text:#2A2A25;
      --muted:#6a695f;
      --accent:#64704A;
      --brown:#463e34;
      --shadow:0 14px 34px rgba(0,0,0,.08);
    }

    .estimator{
      position:relative;
      overflow:hidden;
      border-radius:24px;
      padding:clamp(38px,5vw,64px);
      background:
        radial-gradient(900px 420px at 50% 30%, rgba(255,255,255,.28), transparent 68%),
        linear-gradient(160deg, #f4f1ea 0%, #c8c2b4 100%);
      color:var(--text);
    }

    .estimator__wrap{
      position:relative;
      z-index:1;
      max-width:1040px;
      margin:0 auto;
      color:var(--text);
    }

    .estimator__intro{
      max-width:860px;
      margin:0 auto clamp(28px,4vw,42px);
      text-align:center;
    }

    .estimator__eyebrow{
      margin:0 0 12px;
      color:var(--accent);
      font-family:"Quicksand", sans-serif;
      font-size:16px;
      line-height:1.5;
      font-weight:400;
    }

    .estimator__intro h2{
      max-width:900px;
      margin:0 auto 18px;
      color:var(--accent);
      font-family:"Playfair Display", serif;
      font-size:clamp(42px,6vw,84px);
      line-height:1.08;
      font-weight:600;
      letter-spacing:.01em;
      text-transform:capitalize;
    }

    .estimator__intro p{
      max-width:760px;
      margin:0 auto;
      color:var(--muted);
      font-family:"Quicksand", sans-serif;
      font-size:clamp(16px,1.35vw,18px);
      line-height:1.6;
      font-weight:400;
    }

    .estimator__discord{
      display:inline-flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:center;
      gap:10px;
      margin-top:22px;
      padding:10px 14px;
      border-radius:999px;
      background:rgba(241,238,230,.72);
      border:1px solid rgba(200,195,180,.75);
      color:var(--muted);
      font-family:"Quicksand", sans-serif;
      font-size:15px;
      line-height:1.4;
    }

    .estimator__discord a{
      color:var(--brown) !important;
      text-decoration:underline;
      text-underline-offset:4px;
    }

    .estimator__head{
      margin-top:clamp(26px,4vw,40px);
    }

    .estimator__head h3{
      margin:0 0 .35rem;
      color:var(--text);
      font-family:"Playfair Display", serif;
      font-size:clamp(28px,3.4vw,44px);
      line-height:1.1;
      font-weight:600;
      letter-spacing:.01em;
    }

    .muted{color:var(--muted);}

    .estimator__grid{
      display:grid;
      gap:16px;
      margin-top:20px;
      grid-template-columns:repeat(3,minmax(0,1fr));
    }

    @media (max-width:900px){.estimator__grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:580px){.estimator__grid{grid-template-columns:1fr}}

    .field{
      display:flex;
      flex-direction:column;
      gap:12px;
      background:rgba(246,244,239,.88);
      border:1px solid rgba(221,215,204,.9);
      border-radius:16px;
      padding:16px 14px;
      box-shadow:none;
      transition:border-color .18s ease, background-color .18s ease;
    }

    .field:hover{
      border-color:rgba(100,112,74,.34);
      background:rgba(246,244,239,.96);
    }

    .field:focus-within{
      border-color:rgba(100,112,74,.48);
      background:rgba(246,244,239,.98);
    }

    .field--full{grid-column:1/-1;}
    .field__label{font-weight:600}
    .field__header{display:flex;align-items:center;justify-content:space-between;gap:10px}
    .field__header .field__label{font-size:15px}
    .muted small{font-size:12px;color:inherit}

    textarea{
      width:100%;
      min-height:150px;
      resize:vertical;
      border:1px solid var(--brd);
      border-radius:14px;
      padding:12px 14px;
      font:inherit;
      color:var(--text);
      background:var(--chip);
      transition:border-color .18s ease, box-shadow .18s ease;
    }

    textarea:focus-visible{
      outline:none;
      border-color:color-mix(in oklab, var(--brown), var(--accent) 20%);
      box-shadow:0 0 0 3px rgba(100,112,74,.14);
    }

    .seg{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
      gap:8px;
    }

    .seg input{display:none}

    .seg label{
      background:var(--chip);
      border:1px solid var(--brd);
      border-radius:12px;
      padding:10px 12px;
      text-align:center;
      cursor:pointer;
      transition:border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .seg input:checked + label{
      background:#ece8e0;
      border-color:#cfc9bd;
      color:var(--accent);
      font-weight:600;
      box-shadow:inset 0 0 0 1px rgba(100,112,74,.08);
    }

    .seg label:hover{
      border-color:rgba(70,62,52,.34);
      background:#f6f4ef;
    }

    .seg input:focus-visible + label{
      outline:none;
      border-color:rgba(100,112,74,.55);
      box-shadow:0 0 0 3px rgba(100,112,74,.14);
    }

    .pillset{display:flex;flex-wrap:wrap;gap:10px}
    .pill{position:relative;display:inline-flex;align-items:center}
    .pill input{position:absolute;opacity:0;inset:0}

    .pill span{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:var(--chip);
      border:1px solid var(--brd);
      border-radius:12px;
      padding:10px 14px;
      cursor:pointer;
      transition:border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .pill input:checked + span{
      background:#ece8e0;
      border-color:#cfc9bd;
      color:var(--accent);
      font-weight:600;
      box-shadow:inset 0 0 0 1px rgba(100,112,74,.08);
    }

    .pill:hover span{
      border-color:rgba(70,62,52,.34);
      background:#f6f4ef;
    }

    .pill input:focus-visible + span{
      outline:none;
      border-color:rgba(100,112,74,.55);
      box-shadow:0 0 0 3px rgba(100,112,74,.14);
    }

    .pill--ghost span{
      background:transparent;
      border-style:dashed;
    }

    .hint,
    .hint:hover,
    .hint:focus,
    .hint:active,
    .hint:visited,
    .hint:focus-visible,
    .hint.is-open{
      text-decoration:none !important;
      outline:none !important;
      -webkit-tap-highlight-color:transparent;
    }

    .hint{
      position:relative;
      flex:0 0 auto;
      width:26px;
      height:26px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(100,112,74,.28) !important;
      border-radius:999px;
      background:rgba(241,238,230,.72) !important;
      color:var(--accent) !important;
      font-family:"Quicksand", sans-serif;
      font-size:13px;
      line-height:1;
      font-weight:700;
      cursor:help;
      box-shadow:none !important;
      appearance:none;
      -webkit-appearance:none;
      transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .hint:hover,
    .hint:focus-visible,
    .hint.is-open{
      background:var(--accent) !important;
      border-color:var(--accent) !important;
      color:#E3E0D7 !important;
      box-shadow:0 0 0 3px rgba(100,112,74,.14) !important;
    }

    .hint::after{
      content:attr(data-hint);
      position:absolute;
      right:-8px;
      top:calc(100% + 12px);
      width:min(300px, calc(100vw - 40px));
      padding:12px 14px;
      border-radius:14px;
      background:#f6f4ef;
      color:var(--text);
      border:1px solid rgba(200,195,180,.9);
      box-shadow:0 14px 34px rgba(20,27,19,.14);
      opacity:0;
      visibility:hidden;
      transform:translateY(-4px);
      pointer-events:none;
      transition:opacity .16s ease, visibility .16s ease, transform .16s ease;
      font-family:"Quicksand", sans-serif;
      font-size:13px;
      line-height:1.45;
      font-weight:400;
      text-align:left;
      white-space:pre-line;
      z-index:999;
    }

    .hint::before{
      content:"";
      position:absolute;
      right:3px;
      top:calc(100% + 6px);
      width:12px;
      height:12px;
      background:#f6f4ef;
      border-left:1px solid rgba(200,195,180,.9);
      border-top:1px solid rgba(200,195,180,.9);
      transform:rotate(45deg) !important;
      transform-origin:center;
      opacity:0;
      visibility:hidden;
      transition:opacity .16s ease, visibility .16s ease;
      z-index:1000;
    }

    .hint:hover::after,
    .hint:focus-visible::after,
    .hint.is-open::after{
      opacity:1;
      visibility:visible;
      transform:translateY(0);
    }

    .hint:hover::before,
    .hint:focus-visible::before,
    .hint.is-open::before{
      opacity:1;
      visibility:visible;
      transform:rotate(45deg) !important;
    }

    .estimator__grid .field:nth-child(3n) .hint::after {
      right:auto;
      left:-8px;
    }

    .estimator__grid .field:nth-child(3n) .hint::before {
      right:auto;
      left:3px;
    }

    .field--full .hint::after{
      right:0;
      left:auto;
    }

    .field--full .hint::before{
      right:9px;
      left:auto;
    }

    .estimator__result{
      margin-top:22px;
      display:flex;
      gap:18px;
      align-items:center;
      flex-wrap:wrap;
      background:rgba(246,244,239,.92);
      border:1px solid rgba(221,215,204,.95);
      border-radius:18px;
      padding:18px;
      box-shadow:none;
    }

    .price__label{font-weight:600;margin-bottom:2px}
    .price__value{
      font-size:clamp(24px,3.4vw,34px);
      font-weight:700;
      color:var(--accent);
    }

    .price__note{font-size:14px;margin-top:4px}
    .estimate__note{font-size:12px;margin-top:8px;line-height:1.45}

    .cta{
      --cta-bg:var(--accent);
      --cta-bg-end:color-mix(in oklab, var(--accent), black 12%);
      --cta-ring:color-mix(in oklab, var(--accent), white 55%);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      margin-left:auto;
      padding:12px 18px;
      min-height:50px;
      border-radius:14px;
      text-decoration:none;
      font-weight:700;
      letter-spacing:.2px;
      color:#fff !important;
      background:linear-gradient(145deg, var(--cta-bg), var(--cta-bg-end));
      box-shadow:0 10px 16px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.18);
      transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
      position:relative;
      isolation:isolate;
    }

    .cta::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      background:radial-gradient(120% 120% at 20% -20%, rgba(255,255,255,.25), transparent 40%);
      pointer-events:none;
    }

    .cta::after{
      content:"";
      display:inline-block;
      width:1.05em;
      height:1.05em;
      margin-left:8px;
      background:currentColor;
      -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>') center/contain no-repeat;
              mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5l7 7-7 7"/></svg>') center/contain no-repeat;
      transition:transform .18s cubic-bezier(.4,0,.2,1);
    }

    .cta:hover{
      transform:translateY(-1px);
      filter:brightness(1.03);
      box-shadow:0 14px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22);
    }

    .cta:hover::after{transform:translateX(6px)}
    .cta:active{transform:translateY(0);filter:brightness(.98)}
    .cta:focus-visible{
      outline:none;
      box-shadow:0 0 0 3px var(--cta-ring), 0 12px 20px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.2);
    }

    .cta[aria-disabled="true"]{
      cursor:default;
      opacity:.92;
      pointer-events:none;
    }

    section.estimator .estimator__result a.cta.cta--green,
    section.estimator .estimator__result a.cta.cta--green:link,
    section.estimator .estimator__result a.cta.cta--green:visited{
      background-color:#64704A !important;
      background-image:linear-gradient(145deg, #64704A, #4a5435) !important;
      color:#fff !important;
      border:none !important;
      text-decoration:none !important;
    }

    section.estimator .estimator__result a.cta.cta--green[aria-disabled="true"]::after{
      -webkit-mask:none;
      mask:none;
      background:none;
      width:1.1em;
      height:1.1em;
      border:2px solid rgba(255,255,255,.35);
      border-right-color:transparent;
      border-radius:50%;
      animation:mlspin .8s linear infinite;
    }

    section.estimator .estimator__result a.cta.cta--green[aria-disabled="true"]::before{
      content:none !important;
    }

    .estimator .estimator__grid .field.field--needs .hint::after {
      left: auto !important;
      right: -8px !important;
    }

    .estimator .estimator__grid .field.field--needs .hint::before {
      left: auto !important;
      right: 3px !important;
    }

    @keyframes mlspin { to { transform:rotate(360deg); } }

    @media (max-width:640px){
      .estimator{padding:32px 16px;border-radius:20px}
      .estimator__result{gap:12px}
      .estimator__result .cta{
        margin-left:0;
        width:100%;
        justify-content:center;
      }

      .hint::after{
        position:fixed;
        left:16px;
        right:16px;
        top:auto;
        bottom:24px;
        width:auto;
        max-width:none;
        z-index:9999;
      }

      .hint::before{
        display:none;
      }
    }

    @media (prefers-reduced-motion: reduce){
      .cta,
      .cta::after,
      .field,
      .seg label,
      .pill span,
      .hint,
      .hint::after,
      .hint::before{
        transition:none !important;
        animation:none !important;
      }
    }
