*{
  margin:0;
  padding:0;
}
a{
  text-decoration: none;
  color: inherit;
}
body{
  background-color:#2e3136;
}
#body{
  background-color:#56555f;
}

#header{
  background-color:#2e3136;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
#header a{
  font-family: 'Roboto', sans-serif;
  font-size:2em;
  color:#f5f7ff;
  margin:1em;
}

#navbar{
  display:flex;
  align-items:center;
}


#logoContainer>*{
  height:3.3em;
}


.centerpiece{
  display:flex;
  justify-content:center;
  align-items:center;
}


/* DISCORD MESSAGES */
.dot {
  height: 50px;
  width: 50px;
  background-color:#fcd072;
  border-radius: 50%;
  font-weight:bold;
  color:#f9f9f9;
  font-size:1.6em; 
  display:flex;
  align-items:center;
  justify-content:center;
}

#Greg{
  display:grid;
  grid-template-columns:1fr 4fr;
  grid-gap:0.3em;
  font-size:1.2em;
  padding-left:350px;
}

#Greg>div>b{
  color:#fcd072;
}
#Greg>div>p{
  color:#dbdcdd;
}



/* modal */
.modal.hidden { display: none; }
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; z-index: 999;
}
.modal__dialog {
  background: #111; color: #eee;
  border-radius: 12px; max-width: 980px; width: 100%;
  padding: 1.25rem 1.5rem; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.modal__close {
  position: absolute; right: 12px; top: 10px;
  background: transparent; color: #bbb; border: 0; font-size: 22px; cursor: pointer;
}
.pricing-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: .5rem;
}
.pricing-card {
  background: #181818; border: 1px solid #2a2a2a; border-radius: 10px;
  padding: 1rem; display: flex; flex-direction: column; gap: .5rem;
}
.pricing-card h4 { margin: .25rem 0 .5rem; }
.icon-placeholder {
  width: 64px; height: 64px; display: grid; place-items: center;
  background: #202020; border-radius: 8px; margin-bottom: .5rem;
}
.pricing-card ul { margin: 0 0 .5rem 1rem; }
.buy-actions .btn { width: 100%; margin-bottom: .5rem; }
.btn { padding: .5rem .75rem; border-radius: 8px; border: 1px solid #333; background: #222; color: #eee; cursor: pointer; }
.btn.primary { background: #5b7cff; border-color: #5b7cff; color: #fff; }
.btn.outline { background: transparent; }
.btn.sm { padding: .35rem .6rem; font-size: .9rem; }
.minutes-row { display: flex; align-items: center; gap: .5rem; }







/* ===== Dashboard polish ===== */
:root{
  --bg:#0d1020;
  --card:#121635;
  --ink:#e7ebff;
  --muted:#a7b0d0;
  --brand:#5e6ab1;
  --brand-2:#7f8cff;
  --ok:#29cf8a;
  --warn:#ffcc66;
  --bad:#ff6b6b;
  --ring: rgba(127,140,255,.35);
}

.dash-body{
  background: radial-gradient(1200px 600px at 20% -10%, #1a1f4d 0%, transparent 60%),
              radial-gradient(1000px 500px at 120% 10%, #2b2f64 0%, transparent 60%),
              var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;  text-rendering: optimizeLegibility;
}

.container{ max-width: 1100px; margin: 0 auto; padding: 1.25rem; }

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 1.25rem; position: sticky; top:0; backdrop-filter: blur(6px);
  background: linear-gradient(to bottom, rgba(13,16,32,.85), rgba(13,16,32,.3));
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.site-header__brand{ display:flex; align-items:center; gap:.6rem; }
.brand-dot{ width:.65rem; height:.65rem; border-radius:50%; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:0 0 0 .25rem var(--ring); }
.site-header h1{ margin:0; font-size:1.1rem; letter-spacing:.02em; }
.site-nav{ display:flex; gap:.75rem; align-items:center; }
.site-nav a{ color:var(--ink); opacity:.85; text-decoration:none; }
.site-nav a:hover{ opacity:1; }
.btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,.15); color:var(--ink); padding:.45rem .75rem; border-radius:.6rem; cursor:pointer; }
.btn{ border:0; border-radius:.7rem; padding:.55rem .9rem; cursor:pointer; }
.btn.lg{ padding:.75rem 1.1rem; font-weight:600; }
.btn.primary{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:white; box-shadow: 0 10px 30px -10px var(--ring); }
.btn.primary:hover{ filter: brightness(1.05); }
.btn.outline{ background:transparent; border:1px solid rgba(255,255,255,.18); color:var(--ink); }
.btn.outline:hover{ border-color: rgba(255,255,255,.35); }

.hero{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:1.25rem; align-items:stretch; margin-block: 1rem 1.25rem;
}
@media (max-width: 860px){ .hero{ grid-template-columns: 1fr; } }

.eyebrow{ color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; margin:0 0 .25rem; }
.hero h2{ margin:.1rem 0 .5rem; font-size: clamp(1.3rem, 1.2rem + 1vw, 2rem); }
.meta{ color:var(--muted); margin:0; }
.divider{ opacity:.4; margin: 0 .4rem; }

.minutes-card{
  position: relative;
  background: radial-gradient(160% 160% at 0% 0%, rgba(127,140,255,.15), transparent 40%),
              linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1rem 1rem 1.1rem;
  box-shadow: 0 10px 30px -10px var(--ring), inset 0 0 0 1px rgba(255,255,255,.02);
}
.minutes-card__label{ color:var(--muted); font-weight:600; letter-spacing:.06em; margin:0; }
.minutes-card__value{
  margin:.15rem 0 .8rem;
  font-size: clamp(3rem, 2.3rem + 4vw, 5.4rem);
  line-height: .9;
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(180deg, #fff, #c8d0ff 55%, #96a6ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 10px 35px rgba(127,140,255,.15);
}
.minutes-card__actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.12);
  border-radius: 1rem; padding: 1rem;
}
.section-title{ margin:.25rem 0 1rem; font-size:1.1rem; letter-spacing:.02em; }
.empty{
  border:1px dashed rgba(255,255,255,.15); border-radius:.8rem; padding:1rem;
  color:var(--muted); text-align:center;
}

.call-grid{
  display:grid; grid-template-columns: 1fr; gap:.8rem; /* one column thick */
}
.call-item{
  border:1px solid rgba(255,255,255,.12);
  border-radius:.9rem; padding:.85rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.call-item__top{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem;
}
.badge{
  display:inline-block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); border:1px solid rgba(255,255,255,.16); padding:.1rem .35rem; border-radius:.4rem; margin-right:.35rem;
}
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.muted{ color:var(--muted); font-size:.85rem; display:block; }

.call-item__to{ display:flex; align-items:center; gap:.35rem; }
.status{ font-size:.85rem; padding:.15rem .5rem; border-radius:.5rem; border:1px solid rgba(255,255,255,.16); text-transform:capitalize; }
.status.answered{ border-color: rgba(41,207,138,.4); background: rgba(41,207,138,.08); }
.status.completed{ border-color: rgba(41,207,138,.4); background: rgba(41,207,138,.08); }
.status.ringing{ border-color: rgba(255,204,102,.45); background: rgba(255,204,102,.08); }
.status.failed, .status.busy, .status["no-answer"]{ border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.08); }

.call-item__meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.6rem .9rem;
}
@media (min-width: 780px){
  .call-item__meta{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.call-item__error{
  margin-top:.5rem; color:#ff9a9a; font-size:.9rem;
  border-top:1px dashed rgba(255,255,255,.15); padding-top:.4rem;
}

.hide-sm{ display:none; }
@media (min-width: 780px){ .hide-sm{ display:block; } }

/* ===== Modal polish (uses your existing classes) ===== */
.modal.hidden{ display:none; }
.modal{ position:fixed; inset:0; background: rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal__dialog{
  width:min(860px, 95vw); background: var(--card); color: var(--ink); border-radius:1rem; padding:1rem;
  border:1px solid rgba(255,255,255,.12); box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal__close{
  position:absolute; right:calc(2.5% + .5rem); top:calc(5% + .5rem);
  background:transparent; color:var(--ink); border:1px solid rgba(255,255,255,.2);
  padding:.2rem .5rem; border-radius:.5rem; cursor:pointer;
}
.pricing-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem; margin-top:.6rem; }
@media (max-width: 920px){ .pricing-grid{ grid-template-columns: 1fr; } }
.pricing-card{
  border:1px solid rgba(255,255,255,.12); border-radius:.9rem; padding:.9rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.pricing-card h4{ margin:.25rem 0 .5rem; }
.buy-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.icon-placeholder{ opacity:.85; }








/* ===== Info grid (Pricing / How-to / Commands) ===== */
.info-grid{
  width: min(1100px, 92%);
  margin: 1.5rem auto 2rem;
  margin-top:0;
  display: grid;
  grid-template-columns: 3fr 5fr 4fr;
  gap: 1rem;
  align-items: stretch;        /* <- makes all three equal height */
}

.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  color: var(--ink, #f5f7ff);
}

.panel h3{
  font-size: 1.15rem;
  letter-spacing: .02em;
  margin-bottom: .7rem;
}

/* Pricing column */
.pricing .tier{
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  background: #2a2d3e; /* dark bluish card to pop on #56555f */
  border: 1px solid rgba(255,255,255,.08);
  + .tier{ margin-top: .6rem; }
}
.tier-price{
  font-weight: 800; font-size: 1.6rem; line-height: 1;
  color: #BDE038; /* friendly gold price */
  min-width: 3.5ch;
}
.tier-time{ color:#e8ebff; }
.tier-time span{ color: rgba(232,235,255,.75); font-size: .95rem; margin-left: .25rem; }

/* How it works with big Discord-colored counters */
.howto-list{
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; gap: .7rem;
}
.howto-list li{
  counter-increment: step;
  display: flex; align-items: flex-start; gap: .7rem;
  color:#eef1ff;
}
.howto-list li::before{
  content: counter(step);
  flex: 0 0 38px; height: 38px; display: grid; place-items: center;
  background: var(--brand, #5e6ab1); color: #fff; font-weight: 800;
  border-radius: 999px; box-shadow: 0 4px 16px rgba(94,106,177,.35);
}

/* Commands list */
.cmd-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.cmd-list li{ display: flex; align-items: baseline; gap: .4rem; }
.cmd-list code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: .15rem .4rem; border-radius: .4rem; font-size: .95rem;
}
.cmd-list span{ color: rgba(232,235,255,.8); }

/* Responsive */
@media (max-width: 980px){
  .info-grid{ grid-template-columns: 1fr; }
}















/* ---- Modal shell ---- */
.modal { position: fixed; inset: 0; display: grid; place-items: center; z-index: 1000; }
.modal__sheet {
  position: relative;
  width: min(1200px, 94vw);
  border-radius: 16px;
  padding: 24px 64px 28px 24px;   /* extra right padding so the X never overlaps */
  background: #161a2b;            /* whatever you use now is fine */
}

/* Close (X) button pinned to the shell, not the grid */
.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  z-index: 2;
}

/* ---- Plans grid ---- */
.plans-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;            /* <-- equal card heights */
}

/* A single plan card */
.plan-card{
  display: flex;                   /* or: display:grid; grid-template-rows:auto 1fr auto; */
  flex-direction: column;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
}

/* The content above the buttons */
.plan-body{ display: grid; gap: 10px; }

/* The buttons area pinned to the bottom across all cards */
.plan-actions{
  margin-top: 2em;                /* pushes buttons to the bottom */
  display: grid;
  gap: 12px;
}

/* Make both buttons same width & height */
.plan-actions .btn{
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
}

/* Responsive stack */
@media (max-width: 960px){
  .plans-grid{ grid-template-columns: 1fr; }
  .modal__sheet{ padding-right: 24px; }  /* reduce the extra space on small screens */
}








/* ===== Vertical Q/A FAQ ===== */
.faq-stack{
  width: min(900px, 92vw);
  margin: .3rem auto 2rem;
  display: grid;
  gap: .8rem;
}
.qa{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.q{
  color:white;
  margin: 0 0 .35rem 0;
  font-size: 1.05rem;
  letter-spacing: .01em;
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
}
.a{
  margin: 0;
  color: rgba(232,235,255,.9);
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
}
.qa-label{
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1ch;
  padding: .05rem .35rem;
  border-radius: .4rem;
  color: #fff;
}
.qa code{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  padding: .1rem .35rem;
  border-radius: .35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
}









/* 1) Make sizing predictable site-wide */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Ensure labels behave as block containers */
form label { display: block; width: 100%; }

/* 3) Make form controls fill the panel without bleeding */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; /* redundant with #1, but explicit here */
}

/* 4) (Optional) clip any tiny antialiased edges to the card radius */
.panel { overflow: hidden; }



/* keep sentence grouped as one flex item */
.howto-text { flex: 1 1 auto; }

/* plain link: bold + underline, no background */
.inline-cta{
  display: inline;                 /* ensure it doesn't become a flex box */
  font-weight: 800;
  color: #f5f7ff;                  /* or inherit */
  text-decoration: underline;
  text-underline-offset: .12em;
  text-decoration-thickness: 2px;
  white-space: nowrap;             /* keeps “Add CallCord” on one line */
  background: none; border: 0; padding: 0;
}
.inline-cta:hover{ opacity: .9; }
.inline-cta:focus-visible{
  outline: 2px solid #5e6ab1; outline-offset: 2px; border-radius: 4px;
}

/* in case any global rule made links block-level inside .howto-list */
.howto-list a { display: inline; }











#spacer{
  background-color:#56545f;
}

@media (max-width: 1291px){
  #body{ background-color:#4b4b55; }
  #spacer{ background-color:#4b4b55;}
}