/* ===========================
   Rinzer Wizard Style Kit
   Mirrors Ceramic page vibe
   =========================== */

/* ---- Fonts (verified from your Framer HTML) ---- */
@font-face{font-family:"Clash Grotesk";src:url("https://framerusercontent.com/third-party-assets/fontshare/wf/4LBWQBEAT7WMBLPYHDTSGFMVYM7YP52X/7KPUND2QF7YEOZXDNBOHQRJKQWHIG2TW/O7I6PUTWFICZ67CVKIGGMX2EF3RHEAKS.woff2");font-display:swap;font-style:normal;font-weight:200}
@font-face{font-family:"Clash Grotesk";src:url("https://framerusercontent.com/third-party-assets/fontshare/wf/O462VY6O6FTQCS72XVMTQHXAM4NN5CY3/TWF57ITZORMJ3MEWLQQIVO6BMXIB6FUR/MJQFMMOTEGNXDVM7HBBDTQHTVB2M7Y6G.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Clash Grotesk";src:url("https://framerusercontent.com/third-party-assets/fontshare/wf/2SAK53YLUN7RMYJU4MYLSBV6SSSJEJZB/RXS4DPGJRKOUFZMF5X5BVUGNNKJT65XZ/DJS4RYGIUYUXJQOHY5VCZPKSTXUSHTSP.woff2");font-display:swap;font-style:normal;font-weight:500}
@font-face{font-family:"Clash Grotesk";src:url("https://framerusercontent.com/third-party-assets/fontshare/wf/MKEEQN57GWBZOSYWCRODNJOOZNPLMAKN/5SPTSZGHEACWWLF34DQ4WAA4OGU6PQIF/KN7DX4F6PXB74R6L2K2Y4NH3CB7FC53Q.woff2");font-display:swap;font-style:normal;font-weight:600}
@font-face{font-family:"Clash Grotesk";src:url("https://framerusercontent.com/third-party-assets/fontshare/wf/P6VJ47S3OYMUC7HYSJLTK7PEIK5O2NPQ/TK62VLUWA76PMTK2XWBNDZB7QVXJGYE3/I5W5NEJGYVFUC5I4XOXVET63OE5PSVHJ.woff2");font-display:swap;font-style:normal;font-weight:700}

/* ---- Design Tokens (verified colors) ---- */
:root{
  --rw-white:#ffffff;
  --rw-surface:#f6f9f6;
  --rw-border:#e3e9e3;
  --rw-muted:#bfc8bf;
  --rw-gray:#727b72;
  --rw-text:#242c24;
  --rw-text-2:#4e574e;

  --rw-green:#47bb66;
  --rw-blue:#0047bb;   /* primary CTA */
  --rw-blue-2:#007cfb; /* accent */

  --rw-radius-card:16px;
  --rw-radius-pill:9999px;

  --rw-shadow-1:0 4px 10px rgba(0,0,0,.10);
  --rw-shadow-2:0 8px 20px rgba(0,0,0,.15);
  --rw-shadow-btn:0 4px 12px rgba(0,0,0,.18);

  --rw-max:1120px;
  --rw-pad:24px;
}

/* ---- Base ---- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--rw-text);
  background:var(--rw-white);
  font-family:"Clash Grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.rw-container{
  max-width:var(--rw-max);
  margin:0 auto;
  padding:0 var(--rw-pad);
}

.rw-section{padding:56px 0}
@media (max-width:640px){ .rw-section{padding:40px 0} }

/* ---- Typography (matches your “tight headline” vibe) ---- */
.rw-h1{
  font-size:clamp(34px,5vw,64px);
  line-height:1.05;
  letter-spacing:-0.04em;
  font-weight:700;
}
.rw-h2{
  font-size:clamp(26px,3.2vw,40px);
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:700;
}
.rw-p{
  font-size:20px;
  line-height:1.7;
  color:var(--rw-text-2);
}
.rw-small{
  font-size:14px;
  line-height:1.5;
  color:var(--rw-gray);
}

/* ---- Hero ---- */
.rw-hero{
  color:var(--rw-white);
  background:
    linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.35)),
    radial-gradient(1000px 600px at 20% 10%, rgba(0,124,251,.18), transparent 60%),
    #0b1220;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.rw-hero .rw-p{color:rgba(255,255,255,.78)}
.rw-hero-inner{padding:72px 0}
@media (max-width:640px){ .rw-hero-inner{padding:52px 0} }

/* ---- Buttons (pill, shadow, lift) ---- */
.rw-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 18px;
  border-radius:var(--rw-radius-pill);
  font-weight:800;
  font-size:16px;
  border:0;
  cursor:pointer;
  text-decoration:none;
  user-select:none;
  transition:transform .08s ease, box-shadow .2s ease, opacity .2s ease, background-color .2s ease;
}
.rw-btn:active{transform:translateY(0)}
.rw-btn-primary{
  background:var(--rw-blue);
  color:var(--rw-white);
  box-shadow:var(--rw-shadow-btn);
}
.rw-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.20)}
.rw-btn-secondary{
  background:transparent;
  color:var(--rw-white);
  border:1px solid rgba(255,255,255,.55);
}
.rw-btn-secondary:hover{opacity:.9;transform:translateY(-1px)}

/* ---- Cards (same as your pricing cards) ---- */
.rw-card{
  background:linear-gradient(to bottom,#f9f9f9,#fff);
  border:1px solid #eee;
  border-radius:var(--rw-radius-card);
  box-shadow:var(--rw-shadow-1);
  padding:24px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.rw-card:hover{transform:translateY(-4px);box-shadow:var(--rw-shadow-2)}
.rw-card-title{font-size:20px;font-weight:700;margin:0 0 8px}
.rw-card-meta{font-size:14px;color:var(--rw-gray);margin:0}

/* ---- Badge (your “popular” pill) ---- */
.rw-badge{
  display:inline-block;
  background:var(--rw-blue);
  color:var(--rw-white);
  font-size:12px;
  font-weight:700;
  padding:4px 12px;
  border-radius:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
}

/* ---- Form Inputs (clean, neutral) ---- */
.rw-input, .rw-select, .rw-textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--rw-border);
  background:var(--rw-white);
  font:inherit;
  color:var(--rw-text);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.rw-input:focus, .rw-select:focus, .rw-textarea:focus{
  border-color:rgba(0,71,187,.55);
  box-shadow:0 0 0 4px rgba(0,71,187,.12);
}
.rw-label{display:block;font-weight:700;margin:0 0 8px}

/* ---- Layout helpers ---- */
.rw-row{display:flex;gap:14px;flex-wrap:wrap}
.rw-row > *{flex:1 1 260px}
.rw-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:900px){ .rw-grid{grid-template-columns:1fr} }

/* ---- Progress / steps ---- */
.rw-steps{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.rw-step{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.86);
  font-weight:700;
  font-size:13px;
}
.rw-step.is-active{border-color:rgba(71,187,102,.55);box-shadow:0 0 0 4px rgba(71,187,102,.14)}
.rw-step-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)}
.rw-step.is-active .rw-step-dot{background:var(--rw-green)}