@font-face {
    font-family: 'KodeMono';
    src: url(KodeMono.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}

:root{
    /* Brand palette */
    --snow:#ffffff;          /* snow white */
    --ice:#E6F4FB;           /* ice blue */
    --icy: #c3e9fd;         /* bluer ice */
    --coal:#111827;          /* coal black */
    --honey:#F5B700;         /* honey gold */
    --honey-amber:#FFC94D;   /* lighter honey */
    --honey-deep:#DFA000;    /* deeper honey */
    --muted:#6b7280;
    --card:#ffffffE6;
    --ring:#fef3c7;          /* warm focus ring */
    --maxw:1120px;
    --radius:18px;
    --shadow:0 10px 30px rgba(0,0,0,.08);
}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
    margin:0; font-family: 'KodeMono', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--coal);
    background:
    radial-gradient(1100px 520px at 85% -10%, rgba(245,183,0,.16) 0%, transparent 60%),
    radial-gradient(1100px 520px at 0% -20%, #f8fbff 0%, transparent 60%),
    linear-gradient(180deg, var(--snow), var(--ice));
    padding-bottom:96px; /* room for sticky CTA on mobile */
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* Anchor offset for sticky header */
section[id]{scroll-margin-top:84px}

.scroll-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;

  background: url("images/background.webp") no-repeat center top;
  background-size: cover;       /* stretches across width */
  background-attachment: scroll; /* scrolls with page */
  opacity: 0.1;                /* extra subtle */
}


/* Header & Nav */
header{position:sticky; top:0; backdrop-filter:saturate(1.2) blur(8px); background:rgba(255,255,255,.78); border-bottom:1px solid rgba(0,0,0,.08); z-index:50}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--coal)}
.brand h1{font-size:16px; margin:0; letter-spacing:.2px}
.logo{width:34px; height:34px}
nav a{color:var(--coal); text-decoration:none; padding:12px 10px; line-height:1; display:inline-block}
nav a:hover{color:var(--honey-deep)}
.menu-btn{display:none; border:none; background:var(--snow); border:1px solid #e5e7eb; width:44px; height:44px; border-radius:12px}
.menu-btn .bar{display:block; width:22px; height:2px; background:var(--coal); margin:4px auto}

/* Typography with fluid sizes */
h2.title{font-size:clamp(26px, 5vw, 40px); line-height:1.08; margin:12px 0 10px}
.section-title{font-size:clamp(20px, 3.2vw, 28px); margin:0 0 14px}
p.lead{font-size:clamp(16px, 2.6vw, 18px); color:var(--muted); margin:0 0 16px}

/* Hero */
.hero{padding:84px 0 86px}
.badge{display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid rgba(17,24,39,.08); border-radius:999px; padding:8px 22px; box-shadow:var(--shadow)}
.badge i{width:8px; height:8px; background:var(--honey); border-radius:999px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 18px; border-radius:12px; text-decoration:none; font-weight:700; border:1px solid transparent; min-height:48px}
.btn.primary{background:var(--honey); color:black; box-shadow:0 6px 16px rgba(245,183,0,.28)}
.btn.secondary{background:var(--snow); color:var(--coal); border-color:#e5e7eb}
.btn:focus{outline:none; box-shadow:0 0 0 4px var(--ring)}
.btn:active{transform:translateY(1px)}
.mock{background:linear-gradient(180deg, #fff, #f1f5f9); border:1px solid #e5e7eb; border-radius:var(--radius); min-height:260px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; padding:12px}

/* Sections */
section{padding:52px 0}
.section-sub{color:var(--muted); margin:0 0 20px}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); border:1px solid rgba(17,24,39,.08); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.price{font-size:26px; font-weight:800; color:var(--coal); margin:6px 0 8px}
.inc{font-size:13px; color:var(--muted); margin-bottom:10px}
ul.list{margin:0; padding:0; list-style:none}
.list li{padding:8px 0; display:flex; gap:10px; align-items:flex-start}
.tick{width:18px; height:18px; border-radius:5px; background:var(--ice); border:1px solid #cfe8f6; display:inline-grid; place-items:center; flex:0 0 18px}
.tick svg{width:12px; height:12px; fill:var(--honey)}

/* Process */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.step{background:var(--snow); border:1px solid #e5e7eb; border-radius:14px; padding:14px}
.step b{display:block; margin-bottom:6px}

/* Work grid */
.work-carousel {
  position: relative;
  overflow: hidden; /* hide anything outside */
  width: 100%;
}

.work-track {
  display: flex;
  transition: transform 0.4s ease;
}
.work-track::-webkit-scrollbar { display: none; }

.work-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--snow);
  border: 1px solid #ddd;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 24px;
  font-weight: bold;
  color: var(--coal);
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
.work-arrow.left {
  left: 8px;
}
.work-arrow.right {
  right: 8px;
}
.work-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.shot {
  flex: 0 0 50%;         /* each image = half of carousel width */
  padding: 0 10px;       /* space on left & right (so 20px total gap) */
  box-sizing: border-box;
}
.shot img {
  width: 100%;
  aspect-ratio: 16 / 10; /* consistent ratio */
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  background: #fff;
  display: block;
  transition: transform 180ms ease, box-shadow 200ms ease;
}
/* Hover effect to make them feel interactive */
.shot:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

.shot:hover img {
  transform: scale(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}


/* FAQ */
details{background:var(--snow); border:1px solid #e5e7eb; border-radius:12px; padding:14px 16px}
details+details{margin-top:10px}
summary{cursor:pointer; font-weight:700}

/* Forms & inputs (touch friendly) */
form{display:grid; gap:12px}
.row{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.row-3{display:grid; gap:12px; grid-template-columns:1fr 1fr 1fr}
label{font-weight:600}
input, textarea, select{width:100%; padding:12px 14px; border:1px solid #d1d5db; border-radius:12px; background:#fff; color:var(--coal); font-size:16px}
input[type="file"]{padding:10px}
textarea{min-height:120px; resize:vertical}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--honey); box-shadow:0 0 0 4px var(--ring)}
.form-section {
  margin-top: 30px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  border-bottom: 1px solid #ddd;
  padding-bottom: 4px;
}

/* Form container */
.form-card {
  padding: 28px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  border: 1px solid #e5e7eb;
}

/* Section headers */
.form-card .form-section {
  margin-top: 36px;
  margin-bottom: 14px;
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid var(--honey);
  padding-bottom: 6px;
  color: var(--coal);
}

/* Inputs */
.form-card input,
.form-card textarea,
.form-card select {
  border: 1px solid #d1d5db;
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus {
  border-color: var(--honey);
  box-shadow: 0 0 0 3px var(--ring);
}

/* Disclaimer text */
.form-disclaimer {
  margin-top: 22px;
  padding: 14px;
  background: var(--ice);
  border-left: 4px solid var(--honey);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}


.selling-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.selling-header label {
  font-size: 18px;
  font-weight: 700;
  margin: 0; /* remove any left padding */
}

.selling-header input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0; /* removes left padding/offset */
}


.selling-table {
  margin-top: 14px;
}

.selling-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.selling-table th, .selling-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.selling-table th {
  background: var(--ice);
}

.btn.secondary.small.selected {
  border-color: var(--honey);
  background: #fffef5;
  font-weight: 700;
}

/* Center the "Hosting Options" header (only inside hosting block) */
#hostingBlock > h4.form-section {
  text-align: center;
}

#hostingBlock > p { text-align: center; }

/* Payment summary */
.summary{display:grid; gap:12px}
.line{display:flex; align-items:center; justify-content:space-between}
.opt{display:flex; gap:10px; align-items:center}
.radio{width:18px; height:18px}

/* Sticky bottom CTA for mobile */
.sticky-cta{position:fixed; left:16px; right:16px; bottom:14px; background:var(--card); border:1px solid rgba(17,24,39,.1); border-radius:16px; padding:10px; display:flex; gap:10px; box-shadow:var(--shadow); backdrop-filter:blur(6px)}
.sticky-cta .btn{flex:1}

/* Utilities */
.hidden{display:none}
.note{color:var(--muted); font-size:13px}

/* === HERO — clean, non-overlapping layout === */
.hero > .container.wrap {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "panel";
  gap: clamp(12px, 2vw, 24px);

  justify-items: center;   /* ⬅️ centers children horizontally */
  text-align: center;      /* ⬅️ centers text */
}

/* One-line, fluid title */
.hero-title{
    grid-area: title;
    transform: translateX(-50px);
    line-height: 1.05;
    white-space: nowrap;
    font-size: clamp(20px, 4.8vw, 44px);
}

/* Panel: left = copy, right = logo */
.hero-panel{
    grid-area: panel;
    position: relative;
    margin-left: -100px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto; /* copy can shrink/wrap */
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    padding: clamp(56px, 3.2vw, 12px);
    border-radius: 16px;
    transition: transform 160ms ease,
              box-shadow 200ms ease,
              border-color 160ms ease;

    /* same “package button” depth */
    background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(0,0,0,.06)),
    linear-gradient(180deg, #fff, #fff);
    border: 1px solid rgba(255,255,255,.78);
    box-shadow:
    0 10px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.78);
}

.hero-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.16);
  border-color: var(--honey);
}

/* Make text wrap nicely; prevent pushing under the logo */
.hero-copy{ min-width: 0; }

/* Constrain logo so it never intrudes into the copy column */
.hero-panel .hero-img{
    display: block;
    width: clamp(160px, 28vw, 360px);
    max-width: 100%;
    height: auto;
}
.hero-subtitle {
  font-size: clamp(20px, 4vw, 28px);
  margin: 12px 0;
  font-weight: 700;
  color: var(--coal);
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: 16px 0 20px;
  text-align: left;   /* keeps bullets neat */
  font-size: clamp(15px, 2.6vw, 18px);
  line-height: 1.5;
}
.hero-points li {
  margin-bottom: 8px;
}

/* === Floating Ambient Logo === */
.hero-img {
  animation: floatAround 24s ease-in-out infinite alternate;
  animation-delay: 2.5s;
  opacity: 0.95;
  will-change: transform;
  transform-origin: center;
  display: inline-block;
}

/* Keyframes for gentle floating + drifting */
@keyframes floatAround {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  20% {
    transform: translate(-5px, 3px) rotate(-1deg) scale(1.01);
  }
  40% {
    transform: translate(4px, -6px) rotate(1deg) scale(1.02);
  }
  60% {
    transform: translate(2px, 5px) rotate(-0.5deg) scale(1);
  }
  80% {
    transform: translate(-4px, -3px) rotate(0.8deg) scale(0.99);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* Make hosting cards wider consistently */
.grid.cols-3 > .card {
  min-width: 300px;     /* wider than before */
  flex: 1 1 320px;      /* allows them to grow if in flex */
}
/* Hosting: make cards narrower & centered */
.hosting-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 19px;
  justify-content: center;
}
.hosting-grid .hosting-option {
  width: 320px;         /* base width */
  max-width: 360px;     /* don’t let them get too wide */
}

/* Domain input area: narrow & centered */
.domain-wrap{
  max-width: 520px;          /* narrower block */
  margin: 20px auto 0;       /* center it */
}
.domain-wrap .stack{
  display: grid;
  gap: 10px;                 /* spacing between inputs */
}

/* Small button helper */
.btn.small{
  min-height: 40px;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 10px;
}

/* Mobile: cards can go full width if needed */
@media (max-width: 520px){
  .hosting-grid .hosting-option{ width: 100%; }
  .domain-wrap{ max-width: 100%; }
}

/* Responsive */
@media (max-width: 950px){

    /* scale the logo so it fits on small screens */
    .hero-img{ max-width: clamp(90px, 38vw, 220px); }

    /* keep your existing mobile tweaks */
    .grid.cols-3{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr 1fr}
    .work{grid-template-columns:1fr 1fr}
    .nav nav{display:none}
    .menu-btn{display:inline-block}
    footer .footer{grid-template-columns:1fr 1fr}
    .row, .row-3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
}

/* ===========================
   GLOBAL HOVER/FOCUS ENHANCERS
   =========================== */

/* Smooth transitions for interactive things */
a, button, .btn, .card, .badge, .work-arrow, input, select, textarea, details, summary, .step {
  transition:
    transform 160ms ease,
    box-shadow 200ms ease,
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
  will-change: transform;
}

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce){
  a, button, .btn, .card, .badge, .work-arrow, input, select, textarea, details, summary, .step {
    transition: none;
  }
}

/* Only apply hover effects on devices that actually hover */
@media (hover: hover) {

  /* ---------- Buttons ---------- */
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.14);
  }

  .btn.primary:hover {
    background: linear-gradient(180deg, var(--honey-amber), var(--honey));
    box-shadow: 0 10px 28px rgba(245,183,0,.32);
  }

  .btn.secondary:hover {
    background: #fffef8;
    border-color: var(--honey);
    box-shadow: 0 8px 20px rgba(0,0,0,0.10);
  }

  /* Keep “selected” small secondary from losing its state on hover */
  .btn.secondary.small.selected:hover {
    background: #fffef5;
    border-color: var(--honey);
    box-shadow: 0 8px 20px rgba(245,183,0,.22);
  }

  /* ---------- Cards (package/hosting/payment/etc.) ---------- */
  .card { border-color: rgba(17,24,39,.08); }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.16);
    border-color: #e9eef6;
  }

  /* Don’t override explicitly selected hosting tiles */
  .hosting-option:hover:not(.selected) {
    border-color: var(--honey);
    box-shadow: 0 12px 28px rgba(245,183,0,.22);
    background: linear-gradient(180deg, #fffefb, #fff);
  }

  /* ---------- Badges & steps ---------- */
  .badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  }
  .step:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.10);
    border-color: #e7edf5;
  }

  /* ---------- Nav links ---------- */
  nav a:hover {
    color: var(--honey-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ---------- Carousel arrows ---------- */
  .work-arrow:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 8px 18px rgba(0,0,0,0.16);
    border-color: var(--honey);
  }

  /* ---------- Form fields ---------- */
  input:hover, textarea:hover, select:hover {
    border-color: #cbd5e1; /* subtle hint; focus still goes full honey ring */
  }

  /* ---------- Payment summary lines (tiny nudge) ---------- */
  .summary .line:hover {
    color: #0f172a;
  }
}

/* Visible keyboard focus (more obvious) */
.btn:focus-visible,
.card:focus-within,
.work-arrow:focus-visible,
.badge:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), 0 6px 18px rgba(0,0,0,0.10);
  border-color: var(--honey);
  border-radius: 12px;
}

/* Slightly sturdier pressed state for everything */
.btn:active,
.card:active,
.work-arrow:active {
  transform: translateY(0); /* cancels the hover lift for a “press” feel */
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* ===== Brand corners on cards ===== */
.card { position: relative; overflow: hidden; }

/* Base corner icon */
.card .corner {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  color: var(--honey-deep);    /* controls icon tint */
  opacity: 0.16;               /* subtle by default */
  transition: transform .18s ease, opacity .18s ease, color .18s ease;
  pointer-events: none;
}

/* Lift & brighten on hover */
.card:hover .corner {
  opacity: 0.26;
  transform: rotate(-6deg) scale(1.05);
}

/* Alternate placements */
.corner.tl { left: 10px; right: auto; }
.corner.bl { left: 10px; right: auto; top: auto; bottom: 10px; }
.corner.br { top: auto; bottom: 10px; }

/* Theming helpers (change tint per card) */
.card--bee      .corner { color: var(--honey); }
.card--snow     .corner { color: #9cc9ff; }
.card--comb     .corner { color: #f2b700; }
.card--jar      .corner { color: #d3960a; }

/* Optional: ultra-light pattern sheen */
.card.brand-sheen::before {
  content: "";
  position: absolute; inset: -1px;
  background:
    radial-gradient(600px 280px at 120% -20%, rgba(245,183,0,.10) 0%, transparent 60%),
    radial-gradient(500px 240px at -10% -20%, rgba(156,201,255,.16) 0%, transparent 60%);
  mix-blend-mode: multiply;
  opacity: .06;
  transition: opacity .18s ease;
  pointer-events: none;
}
.card.brand-sheen:hover::before { opacity: .10; }

@keyframes honey-wiggle {
  0% { transform: rotate(-6deg) scale(1.05); }
  50% { transform: rotate(-3deg) scale(1.08); }
  100% { transform: rotate(-6deg) scale(1.05); }
}
@media (hover: hover){
  .card:hover .corner { animation: honey-wiggle 700ms ease-in-out; }
}

/* Pixel-ish icon tuning */
.corner.pixel { shape-rendering: crispEdges; }
.corner.sm { width: 22px; height: 22px; }
.corner.lg { width: 36px; height: 36px; }

/* Extra brand tints if you want variety */
.card--honey  .corner { color: var(--honey); }
.card--ice    .corner { color: #9cc9ff; }
.card--amber  .corner { color: var(--honey-amber); }

/* Cards already have position/overflow from earlier steps; ensure: */
.card { position: relative; overflow: hidden; }

/* Keep main content above background decorations */
.card-body { position: relative; z-index: 2; }

/* PNG decorations */
.dec{
  position: absolute;
  z-index: 1;                     /* under .card-body but above background */
  width: var(--w, 36px);          /* default size; override via size classes or inline */
  opacity: var(--o, .18);
  pointer-events: none;           /* don’t block clicks */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.06));
  transform: rotate(var(--r, -4deg)) scale(var(--s, 1));
  transition: opacity .18s ease, transform .18s ease;
}

/* Corner anchors (tweak the 10px gutters as you like) */
.dec-tl { top: 50px; right: 600px; transform: rotate(var(--r, 8deg)) scale(var(--s, 1.1));}
.dec-tr { top: 30px; right: 30px; transform: rotate(var(--r, -4deg)) scale(var(--s, 0.9));}
.dec-bl { bottom: 10px; left: 30px; }
.dec-br { bottom: 60px; right: 10px; }
.dec-tc { top: 10px; left: 50%; transform: translateX(-50%) rotate(var(--r, -4deg)) scale(var(--s, 1)); }
.dec-bc { bottom: 10px; left: 50%; transform: translateX(-50%) rotate(var(--r, -4deg)) scale(var(--s, 1)); }
.dec-cl { top: 2%; left: 800px; transform: translateX(-20%) rotate(var(--r, 0deg)) scale(var(--s, 1)); }
.dec-cr { top: 10%; right: 130px; transform: translateY(-10%) rotate(var(--r, 0deg)) scale(var(--s, 0.9)); }
.dec-c { top: 30%; left: 45%; transform: rotate(var(--r, 0deg)) scale(var(--s, 0.7)); }

/* Quick size helpers */
.dec-xs { --w: 22px; }
.dec-sm { --w: 88px; }
.dec-md { --w: 160px; }
.dec-lg { --w: 200px; }
.dec-xl { --w: 236px; }
.dec-flag { --w: 200px; }

/* Hover brighten + tiny lift */
@media (hover: hover){
  .card:hover .dec{
    opacity: .30;
    transform: rotate(var(--r, 4deg)) scale(calc(var(--s, 1) * 1.05));
  }
}

/* Put a decoration *behind* everything (rare) */
.dec.back { z-index: 0; opacity: .52; }

/* Mobile: gently reduce sticker sizes */
@media (max-width: 520px){
  .dec-lg { --w: 48px; }
  .dec-md { --w: 34px; }
}

/* Sale price styling */
.old-price {
  text-decoration: line-through;
  color: var(--muted);
  margin-right: 6px;
  font-weight: 500;
}

.new-price {
  color: var(--honey-amber);
  font-weight: 800;
  text-shadow:
    -0.5px -0.5px 0 #111,
     0.5px -0.5px 0 #111,
    -0.5px  0.5px 0 #111,
     0.5px  0.5px 0 #111,
     0 0 6px rgba(255, 201, 77, 0.6),
     0 0 12px rgba(245,183,0,0.5);
}

/* Grand Opening Sale Banner */
.grand-sale-banner {
  display: block;
  position: relative;
  background: var(--honey);
  color: var(--honey-amber);
  overflow: hidden;
  -webkit-text-stroke: 2px #111;   /* dark outline (works in Chrome/Safari) */
  text-shadow:                    /* fallback + glow */
    -1px -1px 0 #111,
     1px -1px 0 #111,
    -1px  1px 0 #111,
     1px  1px 0 #111,
     0 0 8px rgba(255, 201, 77, 0.7),
     0 0 16px rgba(245,183,0,0.8);
  text-align: center;
  padding: 22px 16px;
  font-size: clamp(22px, 4.5vw, 42px);
  font-weight: 900;
  text-decoration: none;
  letter-spacing: 1px;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  position: relative;
  z-index: 20;
  will-change: transform, opacity;
}

@keyframes bannerFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

.grand-sale-banner:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}

.grand-sale-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('images/Honeycomb.webp') repeat;
  background-size: 20px;
  opacity: 0.1;   /* 👈 independent control */
  z-index: 0;
}

.grand-sale-banner span {
  position: relative;
  z-index: 1; /* keep text above icons */
}

/* Reviews Section */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.review-card {
  background: var(--card);
  border: 1px solid rgba(17,24,39,.08);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

.review-text {
  font-size: 15px;
  color: var(--coal);
  margin-bottom: 14px;
  line-height: 1.5;
}

.review-author {
  font-size: 14px;
  font-weight: 700;
  color: var(--honey-deep);
}

.steps .step {
  text-align: center;
  padding: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.steps .step:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  border-color: var(--honey);
}
.steps .badge {
  margin-bottom: 10px;
  font-weight: 700;
}

/* Disable hover effects for form cards */
form.card:hover,
.card form:hover,
#brief .card:hover,
#payment .card:hover,
#contact .card:hover {
  transform: none !important;
  box-shadow: var(--shadow) !important;  /* keep default */
  border-color: rgba(17,24,39,.08) !important; /* normal border */
}

/* ======================
   Modal Styles
   ====================== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17,24,39,0.6);
  z-index: 1000;
  padding: 20px;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.modal.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.modal.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
}

.modal::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: -1;
}
.modal.show::before {
  opacity: 1;
}

.modal.show .modal-content {
  transform: translateY(0);
  opacity: 1;
}

.modal-content {
  background: var(--snow);
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
  padding: 28px 32px;
  line-height: 1.6;
  font-size: 16px;
  transform: translateY(15px);
  transition: transform 0.3s ease;
  opacity: 0;
}

.modal-content h3 {
  margin-top: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--coal);
}

.modal-content h4 {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--honey-deep);
}

.modal-content ul {
  padding-left: 20px;
  margin: 12px 0 20px;
}

.modal-content li {
  margin-bottom: 10px;
}

.modal-close {
  position: absolute;
  top: 5px;
  right: 5px;
  background: transparent;
  border: none;
  font-size: 26px;
  font-weight: bold;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: var(--coal);
}

.modal-note {
  margin-top: 20px;
  padding: 12px 16px;
  background: #f9fafb; /* light gray */
  border-left: 4px solid var(--honey); /* accent color */
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #374151; /* softer gray text */
}

.modal-note em {
  font-weight: 600;
  color: var(--honey-deep);
}

/* Dashboard Modal */
#dashboardModal {
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#dashboardModal.hidden {
  display: none;
}

.dashboard-card {
  max-width: 640px;
  width: 100%;
  background: var(--card);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(0,0,0,.2);
  padding: 28px;
  animation: fadeInScale 0.22s ease;
}

#dashboardModal h2 {
  margin-top: 0;
  font-size: 24px;
  color: var(--coal);
}

#dashboardModal .modal-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--muted);
  cursor: pointer;
}

@keyframes fadeInScale {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.dashboard-choices {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
}

.dashboard-choices .btn {
  font-size: 16px;
  padding: 14px;
  border-radius: 10px;
  font-weight: 600;
}

#subscriberForm.hidden {
  display: none;
}

#subscriberForm h3 {
  margin-bottom: 12px;
  color: var(--honey-deep);
}


/* Subscription Tools Section */
.subscription-tools {
  text-align: center;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}

.subscription-tools h3 {
  margin-bottom: 10px;
}

.nav-links li:last-child a {
  background: var(--coal);
  color: var(--snow);
  padding: 6px 12px;
  border-radius: 6px;
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
  align-items: center;
}

.nav-links .nav-right {
  margin-left: auto; /* pushes it to far right */
}

#subscriberDashboardLink {
  background: var(--honey);
  color: white;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.2s ease;
}

#subscriberDashboardLink:hover {
  background: var(--honey-deep);
}

/* Subscriber Modal */
.subscriber-card {
  background: linear-gradient(160deg, #1f2937, #111827);
  border: 2px solid var(--honey);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  font-family: "KodeMono", monospace;
  color: #f9fafb;
  text-align: center;
}

.subscriber-title {
  font-size: 28px;
  margin-bottom: 6px;
  color: var(--honey);
}

.subscriber-subtitle {
  font-size: 14px;
  color: #9ca3af;
  margin-bottom: 24px;
}

/* Buttons */
.sub-btn {
  background: linear-gradient(135deg, var(--honey), #facc15);
  color: #111;
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-family: "KodeMono", monospace;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sub-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(250,204,21,0.5);
}

.cancel-btn {
  background: linear-gradient(135deg, #fff, #eee);
  color: #111;
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-family: "KodeMono", monospace;
  text-transform: uppercase;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cancel-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(239,68,68,0.5);
}

.back-btn {
  background: #374151;
  color: #f3f4f6;
  padding: 12px 18px;
  border-radius: 8px;
  font-family: "KodeMono", monospace;
}
.back-btn:hover {
  background: #4b5563;
}

/* Form fields */
.subscriber-form label {
  display: block;
  text-align: left;
  margin: 12px 0 4px;
  font-size: 14px;
  color: #f9fafb;
}
.subscriber-form input,
.subscriber-form select,
.subscriber-form textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-family: "KodeMono", monospace;
  font-size: 14px;
  margin-bottom: 12px;
  background: #111827;
  color: #f9fafb;
}
.subscriber-form textarea {
  resize: vertical;
}

.modal.hidden {
  display: none;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  position: relative;
  z-index: 101;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.modal.show .modal-content {
  transform: scale(1);
  opacity: 1;
}

.escape-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 32px;
  font-weight: bold;
  color: #aaa;
  text-decoration: none;
  z-index: 1000;
  transition: color 0.2s ease;
}

.escape-btn:hover {
  color: #000;
}

.wizard-step.hidden { display: none; }

body.modal-open {
  overflow: hidden;
  height: 100vh; /* prevent background scroll on mobile */
}

#wizard-step-brief,
#wizard-step-hosting,
#wizard-step-payment {
  overflow-y: auto;
  max-height: 70vh;  /* leaves room for buttons/header */
  padding-right: 6px; /* prevent scrollbar overlap */
}

/* Hosting section polish */
.hosting-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.hosting-option.selected {
  border: 2px solid var(--honey);
  box-shadow: 0 0 8px rgba(245,183,0,0.4);
}

.self-host-wrap p {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.domain-wrap h4 {
  margin-top: 0;
  font-size: 18px;
}

.domain-wrap input {
  display: block;
  margin: 8px 0;
  padding: 8px 10px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.domain-wrap .opt {
  margin-top: 8px;
}

.stack {
  margin-top: 12px;
}

.stack label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

#orderWizard .modal-content {
  max-width: 1000px; /* wider for hosting step */
}

.hosting-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
  align-content: center;
}

.hosting-option {
  flex: 1 1 240px;
  max-width: 280px;
  padding: 16px;
  cursor: pointer;
  border: 2px solid transparent;   /* ✅ define a base border */
  border-radius: 10px;              /* optional polish */
  background: white;                /* ensure glow contrast */
  transition: 
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.3s ease;
}

.hosting-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.hosting-option.selected,
.self-host-wrap .btn.selected {
  border: 2px solid var(--honey);
  box-shadow: 0 0 8px rgba(245,183,0,0.4);
}

/* ✅ Glow for selected hosting card */
.hosting-option.selected,
#hostOnlyForm .card.selected {
  border: 3px solid var(--honey);
  box-shadow: 0 0 12px 3px rgba(245, 183, 0, 0.5);
  transition: box-shadow 0.3s ease, border 0.3s ease;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px 6px rgba(245, 183, 0, 0.6); }
  50% { box-shadow: 0 0 25px 10px rgba(245, 183, 0, 0.8); }
}
.hosting-option.selected {
  animation: pulseGlow 2s ease-in-out infinite;
}

.hosting-option:hover,
#hostOnlyForm .card:hover {
  box-shadow: 0 0 8px 2px rgba(245, 183, 0, 0.25);
}

.self-host-wrap {
  margin: 16px 0 24px;
  text-align: center;
}

.domain-wrap {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fafafa;
}

.domain-inline {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.domain-inline input {
  flex: 1;
}

.domain-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

/* Simple loading spinner */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}

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

/* Cancel flow input styles */
.cancel-email-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #374151;
  background: #1f2937;      /* dark gray to match modal */
  color: #f9fafb;
  font-family: "KodeMono", monospace;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cancel-email-input::placeholder {
  color: #9ca3af;
}

.cancel-email-input:focus {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(245,183,0,0.4);
}

.notice-bubble {
  background: var(--ice);
  border-left: 4px solid var(--honey);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 14px 0 24px;
  font-size: 14px;
  color: var(--coal);
  line-height: 1.5;
  max-width: 720px;
}
.notice-bubble::before {
  content: "💡 ";
  font-size: 16px;
}

.counter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.counter button {
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: var(--snow);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.counter button:hover {
  background: var(--honey);
  color: #000;
}

/* Hosting card font fix */
#wizard-step-hosting .badge,
#wizard-step-hosting .price,
#wizard-step-hosting .inc,
#wizard-step-hosting button {
  font-family: 'KodeMono', monospace !important;
}

.show {
  display: flex !important;
}

.hidden {
  display: none !important;
}

/* Force card content in hosting step to use KodeMono */
#wizard-step-hosting .card,
#wizard-step-hosting .card * {
  font-family: "KodeMono", monospace;
}

#stickWithBasicWrap {
  flex-basis: 100%;     /* takes full row */
  text-align: center;   /* center the button nicely */
  margin-top: 12px;     /* add a bit of breathing room */
}

footer a {
  color: #111;
  background: rgba(255,255,255,0.05);
  padding: 4px 10px;
  border-radius: 6px;
  margin: 0 3px;
  font-size: 0.85rem;
  transition: background 0.2s ease, color 0.2s ease;
}

footer a:hover {
  background: var(--honey);
  color: #111;
}

#faq summary {
  cursor: pointer;
  padding: 8px 0;
  transition: text-shadow 0.25s ease;
}

#faq summary:hover {
  text-shadow: 0 0 6px var(--honey), 0 0 12px rgba(245,183,0,0.5);
}

.error-msg {
  color: #dc2626; /* red-600 */
  font-size: 14px;
  margin-top: 6px;
  text-align: center;
}

/* Test button style */
.btn.test {
  background: linear-gradient(135deg, var(--icy), var(--ice));
  border: 2px dashed var(--honey);
  color: var(--coal);
  font-weight: 700;
}

.btn.test:hover {
  background: var(--snow);
  border-color: var(--honey-deep);
  color: var(--honey-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245,183,0,.25);
}

.trial-price {
  color: #3bb5f2; /* stronger, medium ice blue */
  font-weight: 900;
  font-size: 22px;
  margin-left: 6px;
  text-shadow:
    0 0 6px rgba(59, 181, 242, 0.85),
    0 0 14px rgba(59, 181, 242, 0.7);
}

/* Crossed-out new price for trial upgrades */
.mid-price {
  text-decoration: line-through;
  color: var(--honey-amber);
  font-weight: 700;
  margin-right: 6px;
  opacity: 0.8;
}

/* Smaller disclaimers inside payment summary */
#payment .note,
#payment .notice-bubble {
  font-size: 12px;   /* was 14px */
  line-height: 1.3;
  padding: 8px 12px; /* tighten */
  margin-top: 8px;
}

/* Floating wizard nav (next/back) */
.wizard-nav {
  position: sticky;    /* sticks to bottom of modal content */
  bottom: 0;
  background: #fff;    /* matches form card */
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #e5e7eb;
  z-index: 50;         /* sit above other content */
}

/* Keep price line stable */
.price {
  display: flex;
  align-items: baseline; /* numbers align at baseline */
  gap: 6px;              /* consistent spacing */
  min-height: 36px;      /* reserve height */
}
.price span {
  line-height: 1;        /* no extra vertical jump */
}

/* Highlight Snowhoney column */
.snowhoney-highlight {
  border: 3px solid var(--honey);
  box-shadow: 0 0 20px rgba(245, 183, 0, 0.4);
  background: linear-gradient(180deg, #fffdf5, #fffaf0);
  transform: scale(1.02);
  z-index: 1;
}

.bonus {
  margin-top: 8px;
  padding: 6px 10px;
  background: #fff7d6;
  border: 1px solid #f5b700;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-align: center;
  box-shadow: 0 2px 6px rgba(245,183,0,0.2);
}

/* --- Wix card: frozen completely --- */
#compare .card:not(.snowhoney-highlight) {
  border: 1px solid var(--border, #ddd) !important;
  transform: none !important;
  transition: none !important;
}
#compare .card:not(.snowhoney-highlight):hover {
  border-color: var(--border, #ddd) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Snowhoney card: stronger gold highlight + gentle scale --- */
#compare .card.snowhoney-highlight {
  border: 2px solid var(--honey) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
#compare .card.snowhoney-highlight:hover {
  border: 2px solid var(--honey) !important;
  box-shadow: 0 0 16px rgba(245,183,0,0.75) !important;
  transform: scale(1.06); /* gentle upscale */
}

/* === Unified Hosting Card Graphics (across site + wizard) === */

.hosting-graphic {
  position: absolute;
  z-index: 5;                     /* above sheen and background */
  pointer-events: none;
  background: transparent;
  transition: transform 0.4s ease, filter 0.4s ease;
  transform-origin: center center;
  will-change: transform;
}

/* Resting state */
.hosting-graphic[src*="Honeypot"] {
  top: 0px;
  left: 240px;
  width: 80px;
  transform: rotate(-8deg);
  transition: transform 0.6s ease;
}

/* Default resting state */
.hosting-graphic[src*="bee_topright"] {
  top: 90px;
  left: 130px;
  width: 150px;
  transform: rotate(4deg);
  transition: transform 0.6s ease; /* smooth reset when unhovered */
}

.hosting-graphic[src*="snowman_throw"] {
  top: 110px;
  left: 140px;
  width: 180px;
  transform: rotate(0deg);
  transition: transform 0.6s ease;
}

/* Hover animation — scale and rotate slightly */
.card:hover .hosting-graphic {
  transform: scale(1.1) rotate(3deg);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));
}

/* ========== Honeypot Rock Hover Animation ========== */
@keyframes honeypotRock {
  0%   { transform: rotate(-6deg) scale(1); }
  100% { transform: rotate(6deg) scale(1); }
}

/* Hover state — gentle rocking loop */
.card:hover .hosting-graphic[src*="Honeypot"] {
  animation: honeypotRock 1s ease-in-out infinite alternate;
  transform-origin: center bottom; /* pivot from bottom, like a jar tipping */
}

/* ========== Bee Zigzag Hover Animation ========== */
@keyframes beeZigzagUp {
  0%   { transform: translate(0, 0) rotate(4deg); }
  100% { transform: translate(30px, -25px) rotate(8deg); }
}

/* Hover state — starts infinite zigzag loop */
.card:hover .hosting-graphic[src*="bee_topright"] {
  animation: beeZigzagUp 1s ease-in-out infinite alternate;
  transform: scale(1.1); /* optional: make it grow while buzzing */
}

/* ========== Snowman Throw Hover Animation ========== */
@keyframes snowmanThrow {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(-60px, -6px) rotate(-6deg) scale(1.08); } /* peak of motion */
  52%  { transform: translate(-55px, -5.7px) rotate(-4.8deg) scale(1.065); }
  54%  { transform: translate(-52px, -5.5px) rotate(-4.5deg) scale(1.06); }
  55%  { transform: translate(-50px, -5.2px) rotate(-4deg) scale(1.06); }
  57%  { transform: translate(-46px, -5.0px) rotate(-3.8deg) scale(1.055); }
  59%  { transform: translate(-43px, -4.8px) rotate(-3.5deg) scale(1.05); }
  60%  { transform: translate(-40px, -4.6px) rotate(-3deg) scale(1.05); }
  62%  { transform: translate(-38px, -4.4px) rotate(-2.8deg) scale(1.045); }
  64%  { transform: translate(-36px, -4.3px) rotate(-2.6deg) scale(1.043); }
  65%  { transform: translate(-35px, -4.1px) rotate(-2.5deg) scale(1.04); }
  67%  { transform: translate(-33px, -3.9px) rotate(-2.3deg) scale(1.037); }
  69%  { transform: translate(-31px, -3.7px) rotate(-2.1deg) scale(1.035); }
  70%  { transform: translate(-30px, -3.5px) rotate(-2deg) scale(1.033); }
  72%  { transform: translate(-28px, -3.3px) rotate(-1.9deg) scale(1.03); }
  74%  { transform: translate(-26px, -3.1px) rotate(-1.7deg) scale(1.028); }
  75%  { transform: translate(-25px, -2.9px) rotate(-1.5deg) scale(1.025); }
  77%  { transform: translate(-23px, -2.7px) rotate(-1.3deg) scale(1.023); }
  79%  { transform: translate(-21px, -2.5px) rotate(-1.1deg) scale(1.021); }
  80%  { transform: translate(-20px, -2.3px) rotate(-1deg) scale(1.02); }
  82%  { transform: translate(-18px, -2.0px) rotate(-0.9deg) scale(1.018); }
  84%  { transform: translate(-16px, -1.8px) rotate(-0.85deg) scale(1.017); }
  85%  { transform: translate(-15px, -1.6px) rotate(-0.8deg) scale(1.015); }
  87%  { transform: translate(-13px, -1.4px) rotate(-0.6deg) scale(1.013); }
  89%  { transform: translate(-11px, -1.2px) rotate(-0.55deg) scale(1.012); }
  90%  { transform: translate(-10px, -1.0px) rotate(-0.5deg) scale(1.01); }
  92%  { transform: translate(-8px, -0.8px) rotate(-0.35deg) scale(1.008); }
  94%  { transform: translate(-6px, -0.6px) rotate(-0.25deg) scale(1.006); }
  95%  { transform: translate(-5px, -0.4px) rotate(-0.2deg) scale(1.005); }
  97%  { transform: translate(-3px, -0.2px) rotate(-0.1deg) scale(1.003); }
  99%  { transform: translate(-1px, -0.1px) rotate(-0.05deg) scale(1.002); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

/* Hover state — throw motion loop */
.card:hover .hosting-graphic[src*="snowman_throw"] {
  animation: snowmanThrow 2.2s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  transform-origin: center center;
}

/* Hosting cards inside the wizard modal */
#wizard-step-hosting .hosting-option {
  position: relative;            /* allows absolute centering of images */
  width: 220px;
  max-width: 320px;
  padding: 24px;
  border-radius: 14px;
  font-size: 15px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  overflow: hidden;              /* hides image overflow */
  text-align: center;            /* centers text nicely */
}

/* Make hosting graphics subtle, centered, and non-blocking */
#wizard-step-hosting .hosting-graphic {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.1;                 /* faint transparency so text stays legible */
  width: 80%;                    /* scales to card size */
  max-width: 180px;
  z-index: 1;                    /* behind text */
  pointer-events: none;          /* no interaction */
  filter: none;
}

/* Keep text above the background image */
#wizard-step-hosting .hosting-option > *:not(.hosting-graphic) {
  position: relative;
  z-index: 2;
}

/* Typography inside modal cards */
#wizard-step-hosting .badge {
  font-size: 16px;
  font-weight: 700;
  color: var(--coal);
  margin-bottom: 8px;
}

#wizard-step-hosting .price {
  font-size: 20px;
  font-weight: 800;
  color: var(--coal);
  margin: 6px 0 4px;
}

#wizard-step-hosting .inc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
  font-weight: 600;
}

/* Hover depth (subtle, not animated) */
#wizard-step-hosting .hosting-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}

/* Layout for modal hosting grid */
#wizard-step-hosting .hosting-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/* === Specialized grid layout only for upload rows === */
.upload-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* left: label+input, right: file list */
  gap: 32px;
  margin-top: 10px;
  align-items: start;
}

.upload-row label {
  grid-column: 1;
  grid-row: 1;
  font-weight: 600;
  margin-bottom: 4px;
}

.upload-row input[type="file"] {
  grid-column: 1;
  grid-row: 2;
  padding: 10px;
  width: 100%;
}

.upload-row .file-list {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin-top: 0;
  font-size: 11px;
  color: #475569;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1.4;
  min-height: 42px;
  overflow-y: auto;
}

.upload-row .file-list div {
  margin: 2px 0;
}

.upload-row .file-list .warn {
  color: #b45309;
}

/* =======================
   MOBILE REFINEMENTS
   ======================= */
@media (max-width: 820px) {
  /* General section spacing */
  section { padding: 18px 0; }

  /* Hero */
  .hero-title {
    transform: none;
    white-space: normal;
    font-size: clamp(14px, 5vw, 20px);
    text-align: center;
  }
  .hero-subtitle { font-size: clamp(12px, 4vw, 16px); }
  .hero-points { font-size: 12px; }
  .hero-panel {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    padding: 16px;
    grid-template-columns: 1fr; /* stack text + logo vertically */
    text-align: center;
  }
  .hero-panel .hero-img {
    margin: 0 auto;
    max-width: 140px;
  }

  .hero-panel .dec-flag {
    max-width: 120px;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--r, 10deg)) scale(var(--s, 1));
  }

  /* Comparison section (Wix vs Snowhoney) */
  #compare .grid {
    grid-template-columns: 1fr !important;
  }
  #compare .list li {
    font-size: 12px;
    line-height: 1.4;
    padding: 4px 0;
  }
  #compare p.small {
    font-size: 8px;
    line-height: 1.3;
  }

  /* Subtitles */
  .section-sub {
    font-size: 12px;
    line-height: 1.4;
  }

  /* Cards (packages, hosting, etc.) */
  .grid.cols-3 {
    grid-template-columns: 1fr; /* single column everywhere */
    gap: 14px;
  }
  .card {
    min-width: auto;
    flex: 1 1 auto;
    padding: 12px;
    font-size: 12px;
  }
  .price { font-size: 16px; }
  .inc { font-size: 11px; }
  .btn {
    min-height: 36px;
    padding: 8px 10px;
    font-size: 12px;
  }

  /* Footer */
  footer, footer .small, footer a {
    font-size: 12px;
    line-height: 1.4;
  }

  /* Mobile nav dropdown */
  .mobile-menu {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    margin: 10px;
    padding: 10px 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  }
  .mobile-menu a {
    display: block;
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    color: var(--honey);
    text-decoration: none;
    text-shadow: 0 0 6px rgba(245,183,0,0.7), 0 0 12px rgba(245,183,0,0.5);
  }
  .mobile-menu a:hover {
    color: var(--honey-deep);
    text-shadow: 0 0 8px rgba(245,183,0,0.9), 0 0 14px rgba(245,183,0,0.6);
  }
  .mobile-menu a:last-child {
    border-bottom: none;
  }

  /* ========== PACKAGE CARDS ========== */

/* Reset */
#packages .card img.dec {
  position: absolute !important;
  left: auto !important;
  bottom: auto !important;
  opacity: 0.35;
  height: auto;
}

/* One-Page */
#packages .card img.dec.dec-sm {
  top: 30px !important;
  right: 50px !important;
  width: 70px;
  transform: rotate(-5deg);
}

/* Two-Page */
#packages .card img.dec.dec-md[src*="twopage"] {
  top: 20px !important;
  right: 25px !important;
  width: 110px;
}

/* Three-Page */
#packages .card img.dec.dec-lg[src*="threepage"] {
  top: 10px !important;
  right: 10px !important;
  width: 140px;
}

/* ========= MOCKUP CARD ========= */
#packages .card img.dec.dec-cl.dec-xl[src*="bee_at_desk"] {
  position: absolute !important;
  top: 5px !important;
  right: 35px !important;
  width: 90px;
  transform: rotate(5deg) !important; /* tilt the bee */
}

/* ========== HOSTING CARDS ========== */

#packages .card img.dec.dec-c.dec-md[src*="Honeypot"] {
  top: 10px !important;
  left: 220px !important;
  width: 70px;
  transform: rotate(5deg) !important;
}

#packages .card img.dec.dec-c.dec-md[src*="bee_topright"] {
  top: 0px !important;
  right: 0px !important;
  width: 120px;
  transform: rotate(9deg) !important;
}
#packages .card img.dec.dec-c.dec-md[src*="snowman_throw"] {
  top: 100px !important;
  left: 160px !important;
  width: 140px;
  transform: rotate(0deg) !important;
}

  /* Hosting options */
  #wizard-step-hosting .hosting-options {
    flex-direction: column;   /* stack cards neatly */
    gap: 14px;
    align-items: center;
  }
  #wizard-step-hosting .hosting-option {
    padding: 22px;
    font-size: 10px;
  }
  #wizard-step-payment .summary .line {
    font-size: 10px;
  }
  #wizard-step-hosting .badge {
    font-size: 13px;
    border-width: 2px;
    border-color: var(--ice);
    color: var(--honey-deep);
    font-weight: 1000;
  }
  #wizard-step-hosting .badge-self {
    font-size: 16px;
    font-weight: 600;
  }
  #wizard-step-hosting .price {
    font-size: 18px;
  }
  #wizard-step-hosting .new-price-self {
    margin-top: 10px;
    font-size: 13px;
  }
  #wizard-step-hosting .inc {
    font-size: 12px;
    line-height: 1.3;
  }

  /* Domain input blocks */
  .domain-wrap {
    padding: 12px;
    margin-top: 12px;
  }
  .domain-wrap input {
    font-size: 13px;
    padding: 8px 10px;
    margin-bottom: 8px;
  }
  .domain-inline {
    flex-direction: column;   /* stack input + button */
    gap: 8px;
  }
  .domain-inline button {
    width: 100%;              /* button full width */
    font-size: 13px;
    padding: 10px;
  }
  .domain-actions {
    flex-direction: column;
    gap: 8px;
  }
  .domain-actions button {
    width: 100%;
    font-size: 13px;
    padding: 10px;
  }

  .upload-row .file-list {
    font-size: 8px;
  }

  /* Payment summary */
  #wizard-step-payment .form-card {
    padding: 16px;
  }
  #wizard-step-payment .summary .line {
    font-size: 13px;
  }
  #wizard-step-payment .summary strong {
    font-size: 13px;
  }
  #wizard-step-payment .notice-bubble,
  #wizard-step-payment .note {
    font-size: 11px;
    line-height: 1.3;
  }

  /* Payment buttons */
  #wizard-step-payment .btn {
    font-size: 13px;
    min-height: 38px;
    padding: 8px 12px;
  }

  .scroll-bg {
    background-attachment: fixed; /* pins it */
    background-position: center top;
  }

  /* ===== Extra Pages selector: stack + full width on mobile ===== */
  #wizard-step-hosting .inline-extra-pages {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;            /* allow wrapping when space is tight */
  }

  #wizard-step-hosting .inline-extra-pages label {
    flex: 1 1 100%;             /* put label on its own line */
    white-space: normal;        /* allow text to wrap, no truncation */
    font-size: 18px;
    line-height: 1.35;
  }

  #wizard-step-hosting .inline-extra-pages select,
  #extraPagesSelect {
    flex: 1 1 100%;             /* selector takes full width */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    padding: 8px 10px;
  }

  /* Make the containing card respect mobile width too */
  #additionalBlock.form-card {
    width: 100%;
    max-width: 100%;
    overflow: visible;           /* ensure dropdown isn’t clipped */
  }

  /* The hosting step can show horizontal content if needed */
  #wizard-step-hosting {
    overflow-x: visible;         /* undo any global overflow-x hidden */
  }

  /* === Brief Form Font Reduction === */
  #briefForm,
  #hostOnlyForm,
  #subscriberForm {
    font-size: 12px;
    line-height: 1.4;
  }

  #briefForm label,
  #briefForm h4.form-section {
    font-size: 12px;
  }

  #briefForm input,
  #briefForm textarea,
  #briefForm select {
    font-size: 10px;
    padding: 8px 10px;
  }

  /* Compact checkboxes and row spacing */
  #briefForm .selling-header label,
  #briefForm .selling-header input[type="checkbox"] {
    font-size: 10px;
    transform: scale(0.9);
  }

  #hostEmailsWrap .note-emails {
    font-size: 10px;
  }
  #hostEmailsWrap .email-placeholder {
    font-size: 12px;
  }

  /* Form disclaimer readability */
  .form-disclaimer {
    font-size: 10px;
    line-height: 1.3;
    padding: 10px 12px;
  }

  /* === FAQ Font Reduction === */
  #faq summary {
    font-size: 12px;
    line-height: 1.3;
  }
  #faq p,
  #faq li {
    font-size: 12px;
    line-height: 1.4;
  }

  /* === Terms Acceptance Compactness === */
  .terms-agree-wrap {
    padding: 12px;
    font-size: 6px;
    line-height: 1.4;
    margin-top: 16px;
  }
  .terms-label {
    gap: 8px;
  }
  .terms-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
  }
  .terms-text {
    font-size: 8px;
  }
  .terms-text a {
    font-size: 10px;
  }
  .terms-note {
    font-size: 8px;
    line-height: 1.3;
  }

  /* === Fix "Will you need extra pages..." Selector Width === */
  #extraPageSelect,
  #extraPageDetails select,
  #extraPageDetails textarea,
  #extraPageDetails input {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  #extraPageDetails {
    overflow-x: hidden;
    margin-right: 0;
  }

  #wizard-step-hosting select {
    width: 100%;
    max-width: 100%;
    font-size: 13px;
  }

  /* Prevent horizontal scrolling on wizard modals */
  #wizard-step-brief,
  #wizard-step-hosting,
  #wizard-step-payment {
    overflow-x: hidden;
  }

  /* === Slightly smaller modal titles === */
  .modal-content h3,
  .modal-content h4 {
    font-size: 16px;
  }

  /* Keep buttons easy to tap but visually smaller */
  .btn,
  .btn.primary,
  .btn.secondary {
    font-size: 13px;
    min-height: 38px;
    padding: 8px 12px;
  }

  /* === Consistent vertical rhythm in forms === */
  form {
    gap: 10px;
  }
  .row,
  .row-3 {
    gap: 10px;
  }

}

#orderWizard.show {
  max-height: 100vh;
  overflow-y: auto;
}

/* Disable hover animations inside modals but preserve position */
#orderWizard .hosting-graphic,
#hostOnlyModal .hosting-graphic,
.modal .hosting-graphic {
  animation: none !important;
  transition: none !important;
  filter: none !important;
}

/* === Extra Pages Section (Inline) === */
.inline-extra-pages {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  margin-bottom: 4px;
}

.inline-extra-pages .inline-label-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* ensures it doesn’t overflow on small screens */
  gap: 10px;
}

.inline-extra-pages label {
  font-weight: 600;
  font-size: 18px;
  flex: 1;
  white-space: nowrap;
}

.inline-extra-pages select {
  width: 80px;           /* controls dropdown width */
  padding: 6px 10px;
  font-size: 20px;
  border: 1px solid var(--border, #ccc);
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
}

.inline-extra-pages select:focus {
  outline: 2px solid var(--honey, #F5B700);
  border-color: var(--honey, #F5B700);
}

.inline-extra-pages .note {
  color: var(--muted, #6b7280);
  font-size: 13px;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .floating-logo,
  .grand-opening-banner {
    animation: none;
  }
}

/* Terms Agreement Section */
.terms-agree-wrap {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--ice);
  border-left: 4px solid var(--honey);
  border-radius: 10px;
  font-size: 18px;
  color: var(--coal);
  line-height: 1.5;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.terms-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  position: relative;
  font-weight: 500;
}

.terms-label input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--honey);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  margin-top: 2px;
  flex-shrink: 0;
  transition: background 0.25s ease, transform 0.15s ease;
}

.terms-label input[type="checkbox"]:checked {
  background: var(--honey);
  box-shadow: 0 0 6px rgba(245,183,0,0.5);
  transform: scale(1.05);
}

.terms-label input[type="checkbox"]:checked::after {
  content: "✔";
  color: black;
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  left: 5px;
  top: 0;
}

.terms-text a {
  color: var(--honey-deep);
  font-weight: 800;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-text a:hover {
  color: var(--honey);
  text-decoration: none;
}

.terms-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

#codeError {
  transition: opacity 0.3s ease;
  opacity: 0;
}
#codeError:not(.hidden) {
  display: block;
  opacity: 1;
}

/* Top-level modal that must always appear above the wizard */
.modal.top-modal {
  z-index: 2000 !important;
}

.modal.top-modal::before {
  z-index: -1 !important; /* keep backdrop behind the content */
}