/* 45 Days Ranking Challenge -page visual CSS
   Structurally identical to the site's proven pattern
   (see assets/css/google-ranking-service.css / local-seo-service.css),
   renamed to the rc45- namespace. Same values, same behavior -this
   page must look and feel like every other redesigned service page. */

/* ---- shared keyframes ---- */
@keyframes rc45FloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes rc45FloatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes rc45CountBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rc45Blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rc45Rise{0%{transform:translateY(16px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes rc45Pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes rc45Draw{to{stroke-dashoffset:0}}
@keyframes rc45DotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.35}}

/* ---- generic browser-chrome frame (light) ---- */
.rc45-frame{width:100%;max-width:560px;max-height:100%;border-radius:1.1rem;background:#fff;border:1px solid #E6ECF5;
  box-shadow:0 12px 30px -14px rgba(17,24,39,.12);overflow:hidden;animation:rc45FloatA 6s ease-in-out infinite;}
.rc45-frame-bar{display:flex;align-items:center;gap:.5rem;padding:.85rem 1.1rem;background:#F7F8FC;border-bottom:1px solid #ECEFF6;min-width:0;}
.rc45-dot{width:10px;height:10px;border-radius:9999px;flex-shrink:0;}
.rc45-frame-url{flex:1;min-width:0;margin-left:.5rem;height:24px;border-radius:9999px;background:#EEF1F8;display:flex;align-items:center;
  padding:0 .75rem;font:600 11px/1 'Inter',monospace;color:#475569;gap:.35rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.rc45-frame-tag{margin-left:auto;display:flex;align-items:center;gap:.35rem;font:800 10px/1 'Inter',monospace;color:#6A58E4;letter-spacing:.05em;}
.rc45-frame-tag .rc45-live-dot{width:7px;height:7px;border-radius:9999px;background:#6A58E4;animation:rc45Blink 1.4s ease-in-out infinite;}
.rc45-frame-body{padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,1.9rem) clamp(1.5rem,3.5vw,2.1rem);}

/* ---- before / after comparison block ---- */
.rc45-ab-compare{display:flex;align-items:center;justify-content:center;gap:1.1rem;padding:.9rem;border-radius:.9rem;background:#FAFBFF;border:1px solid #ECEFF6;margin-bottom:1.1rem;}
.rc45-ab-col{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:1;}
.rc45-ab-num{font:800 26px/1 'Inter',sans-serif;}
.rc45-ab-num.is-before{color:#94A3B8;text-decoration:line-through;}
.rc45-ab-num.is-after{color:#059669;}
.rc45-ab-tag{font:700 10px/1 'Inter',monospace;color:#475569;text-transform:uppercase;letter-spacing:.03em;}

/* ---- ranking bar row (light frame dashboard) ---- */
.rc45-frame-bar-row{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;min-width:0;}
.rc45-bar-label{flex-shrink:0;width:110px;font:700 12px/1.2 'Inter',monospace;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rc45-frame-bar-track{flex:1;min-width:0;height:6px;border-radius:9999px;background:#EEF1F8;overflow:hidden;position:relative;}
.rc45-frame-bar-fill{position:absolute;inset:0;border-radius:9999px;background:linear-gradient(90deg,#6A58E4,#4A86F5);transform-origin:left;
  animation:rc45CountBar 1.3s cubic-bezier(.2,.8,.2,1) both;}
.rc45-frame-bar-val{flex-shrink:0;width:40px;text-align:right;font:800 13px/1 'Inter',monospace;color:#6A58E4;}
.rc45-frame-footer{margin-top:1.2rem;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.1rem;
  border-radius:.95rem;background:rgba(106,88,228,.06);border:1px solid rgba(106,88,228,.18);}
.rc45-frame-footer b{font:700 13px/1 'Inter',sans-serif;color:#111827;}
.rc45-pill-violet{padding:.4rem .85rem;border-radius:9999px;background:linear-gradient(135deg,#6A58E4,#4A86F5);color:#fff;font:800 11px/1 'Inter',monospace;}

/* ---- SERP result card list (hero + first-rank section) ---- */
.rc45-result-card{border-radius:1rem;border:1.5px solid transparent;padding:1rem 1.15rem;margin-bottom:.7rem;animation:rc45Rise .5s ease-out both;}
.rc45-result-card.is-top{border-color:#6A58E4;background:linear-gradient(135deg,rgba(106,88,228,.06),rgba(74,134,245,.04));}
.rc45-result-card:not(.is-top){background:#FAFBFF;border-color:#F1F3F9;}
.rc45-result-top-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem;}
.rc45-result-title{font:700 15px/1.2 'Inter',sans-serif;color:#111827;}
.rc45-result-title.dim{color:#5B6475;font-weight:600;font-size:14px;}
.rc45-stars{color:#F59E0B;font-size:12px;letter-spacing:1px;}
.rc45-result-meta{font:600 12px/1.3 'Inter',sans-serif;color:#475569;margin-top:.2rem;}
.rc45-rank-chip{flex-shrink:0;width:28px;height:28px;border-radius:.6rem;display:flex;align-items:center;justify-content:center;
  font:800 13px/1 'Inter',monospace;background:#EEF1F8;color:#475569;}
.rc45-result-card.is-top .rc45-rank-chip{background:linear-gradient(135deg,#6A58E4,#4A86F5);color:#fff;}

/* ---- checklist rows ---- */
.rc45-check-row{display:flex;align-items:center;gap:.7rem;animation:rc45Rise .5s ease-out both;}
.rc45-check-row span:last-child{font:600 13px/1.3 'Inter',sans-serif;color:#1E293B;}
.rc45-check-ic{flex-shrink:0;width:24px;height:24px;border-radius:.55rem;background:rgba(16,185,129,.12);color:#059669;display:flex;align-items:center;justify-content:center;}

/* ---- stat ring dashboard ---- */
.rc45-ring-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;width:100%;max-width:480px;}
.rc45-ring-card{background:#FAFBFF;border:1px solid #ECEFF6;border-radius:1rem;padding:1rem .8rem;text-align:center;
  animation:rc45Rise .55s ease-out both;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;}
.rc45-ring-svg{transform:rotate(-90deg);width:clamp(48px,7vw,60px);height:clamp(48px,7vw,60px);flex-shrink:0;}
.rc45-ring-card-num{font:800 20px/1 'Inter',sans-serif;color:#111827;}
.rc45-ring-card-label{font:700 11px/1 'Inter',monospace;color:#475569;text-transform:uppercase;letter-spacing:.03em;}
.rc45-ring-svg .track{fill:none;stroke:#EDEFF6;stroke-width:6;}
/* Ring fill: driven by JS (see page script) setting stroke-dashoffset directly,
   the same approach main.js already uses for the homepage's proven hud-score-ring.
   A plain CSS transition is the fallback path if JS is unavailable. */
.rc45-ring-svg .fill{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;
  transition:stroke-dashoffset 1.3s cubic-bezier(.2,.8,.2,1);}

/* ==========================================================
   SEO MASTERY FAST-TRACKED -radar visual + checklist grid
   Node positions are precomputed on a fixed 400x400 viewBox
   (7 points evenly spaced on a circle) and reused as both SVG
   line endpoints and HTML label percentages, so placement is
   exact at every viewport -no transform math that can collapse.
   ========================================================== */

@keyframes rc45SpinCW{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes rc45SpinCCW{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes rc45SweepSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes rc45CorePulse{0%,100%{box-shadow:0 16px 34px -10px rgba(106,88,228,.45),0 0 0 0 rgba(106,88,228,.35)}50%{box-shadow:0 16px 34px -10px rgba(106,88,228,.45),0 0 0 14px rgba(106,88,228,0)}}
@keyframes rc45DrawSpoke{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
@keyframes rc45NodeBob{0%,100%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-6px)}}

.rc45-radar-wrap{
  position:relative;width:100%;height:100%;min-height:480px;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
}
.rc45-radar-svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(100%,460px);height:auto;aspect-ratio:1/1;overflow:visible;}

.rc45-radar-ring{fill:none;stroke:rgba(106,88,228,.16);stroke-width:1.5;}
.rc45-radar-ring--mid{stroke:rgba(106,88,228,.13);}
.rc45-radar-ring--in{stroke:rgba(106,88,228,.1);}

.rc45-radar-spoke{stroke:rgba(106,88,228,.3);stroke-width:1.5;stroke-dasharray:160;
  animation:rc45DrawSpoke 1s cubic-bezier(.3,.7,.2,1) both;}

.rc45-radar-sweep-group{transform-origin:200px 200px;animation:rc45SweepSpin 9s linear infinite;}
.rc45-radar-sweep{fill:rgba(106,88,228,.10);}

.rc45-radar-core{
  position:relative;z-index:3;width:clamp(96px,15vw,124px);aspect-ratio:1/1;border-radius:50%;
  background:linear-gradient(135deg,#6A58E4,#4A86F5);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;text-align:center;
  animation:rc45Pop .6s ease-out both, rc45CorePulse 3.2s ease-in-out infinite 1s;
}
.rc45-radar-core span{font:800 13px/1 'Inter',sans-serif;letter-spacing:-.01em;}
.rc45-radar-core small{font:700 12px/1 'Inter',monospace;text-transform:uppercase;letter-spacing:.04em;opacity:.85;}

.rc45-radar-node{
  position:absolute;z-index:2;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.4rem;white-space:nowrap;width:max-content;
  padding:.5rem .85rem;border-radius:9999px;background:#fff;border:1px solid #E6ECF5;
  box-shadow:0 10px 22px -10px rgba(17,24,39,.18);
  animation:rc45Pop .5s ease-out both, rc45NodeBob 5s ease-in-out infinite;
}
.rc45-radar-node i{flex-shrink:0;color:#6A58E4;}
.rc45-radar-node span{font:700 11.5px/1 'Inter',sans-serif;color:#374151;}

.rc45-radar-badge{
  position:absolute;z-index:2;display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem .75rem;border-radius:9999px;background:rgba(106,88,228,.08);
  border:1px solid rgba(106,88,228,.2);color:#6A58E4;font:700 10px/1 'Inter',monospace;
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;
  animation:rc45Rise .6s ease-out both .3s;
}
.rc45-radar-badge--tl{left:0;top:0;}
.rc45-radar-badge--br{right:0;bottom:0;}

/* ---- checklist grid (SEO mastery fast-tracked, right column) ---- */
.rc45-mastery-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;
  list-style:none;margin:0;padding:0;
}
.rc45-mastery-item{
  display:flex;align-items:flex-start;gap:.65rem;
  background:#fff;border:1px solid #E6ECF5;border-radius:1rem;
  padding:.85rem .9rem;box-shadow:0 6px 16px -10px rgba(17,24,39,.1);
  animation:rc45Rise .5s ease-out both;
  transition:transform var(--vf-duration-base,300ms) ease, box-shadow var(--vf-duration-base,300ms) ease, border-color var(--vf-duration-base,300ms) ease;
}
.rc45-mastery-item:hover{
  transform:translateY(-3px);
  border-color:rgba(106,88,228,.35);
  box-shadow:0 16px 30px -14px rgba(106,88,228,.28);
}
.rc45-mastery-check{
  flex-shrink:0;width:26px;height:26px;border-radius:9999px;margin-top:.05rem;
  background:linear-gradient(135deg,#6A58E4,#4A86F5);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 14px -6px rgba(106,88,228,.55);
}
.rc45-mastery-text{display:flex;flex-direction:column;gap:.15rem;min-width:0;}
.rc45-mastery-text strong{font:700 16px/1.25 'Inter',sans-serif;color:#111827;}
.rc45-mastery-text small{font:600 14px/1.35 'Inter',sans-serif;color:#5B6475;}

/* ---- process steps ---- */
.rc45-steps{display:flex;flex-direction:column;gap:1.1rem;width:100%;max-width:560px;}
.rc45-step{display:flex;align-items:center;gap:1.1rem;background:#fff;border:1px solid #E6ECF5;border-radius:1.1rem;
  padding:clamp(1.1rem,2.5vw,1.5rem) clamp(1.2rem,3vw,1.6rem);box-shadow:0 14px 34px -18px rgba(106,88,228,.18);animation:rc45Rise .55s ease-out both;}
.rc45-step-icon{flex-shrink:0;width:50px;height:50px;border-radius:.9rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#6A58E4,#4A86F5);color:#fff;}
.rc45-step-title{font:800 16px/1.2 'Inter',sans-serif;color:#111827;}
.rc45-step-desc{font:600 12px/1.4 'Inter',sans-serif;color:#475569;margin-top:.3rem;}
.rc45-step-bar{height:5px;border-radius:9999px;background:#EEF1F8;overflow:hidden;margin-top:.45rem;}
.rc45-step-bar span{display:block;height:100%;background:linear-gradient(90deg,#6A58E4,#4A86F5);transform-origin:left;animation:rc45CountBar 1.1s ease-out both;}

/* ---- ranking-climb chart (hero) ---- */
.rc45-linegraph{position:relative;flex:0 0 auto;width:100%;border-radius:1rem;padding:1rem 1.05rem .9rem;
  background:linear-gradient(180deg,rgba(106,88,228,.045),rgba(74,134,245,.02));border:1px solid #ECEFF6;overflow:hidden;}
.rc45-linegraph-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;}
.rc45-lg-label{display:inline-flex;align-items:center;gap:.4rem;font:700 11px/1 'Inter',sans-serif;color:#374151;}
.rc45-lg-label .dot{width:7px;height:7px;border-radius:9999px;background:#6A58E4;flex-shrink:0;}
.rc45-linegraph-peak{display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .6rem;border-radius:9999px;
  background:rgba(106,88,228,.1);color:#6A58E4;font:800 10px/1 'Inter',monospace;white-space:nowrap;}
.rc45-linegraph svg{display:block;width:100%;height:auto;overflow:visible;}
.rc45-lg-grid line{stroke:#E6ECF5;stroke-width:1;stroke-dasharray:3 4;}
.rc45-lg-area{opacity:0;animation:rc45Pop .7s ease-out both .9s;}
.rc45-lg-path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 6px rgba(106,88,228,.35));
  stroke-dasharray:400;stroke-dashoffset:400;animation:rc45Draw 1.7s cubic-bezier(.3,.7,.2,1) forwards .15s;}
.rc45-lg-dot{opacity:0;animation:rc45Pop .45s ease-out both;}
.rc45-lg-dot-ring{animation:rc45DotPulse 1.8s ease-in-out infinite;transform-origin:center;transform-box:fill-box;}
.rc45-lg-xlabels{display:flex;justify-content:space-between;margin-top:.5rem;}
.rc45-lg-xlabels span{font:700 10px/1 'Inter',monospace;color:#8E97A8;text-transform:uppercase;letter-spacing:.03em;}
.rc45-day-row{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.1rem;}
.rc45-day-pill{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem 1.1rem;border-radius:.9rem;background:#FAFBFF;border:1px solid #ECEFF6;min-width:76px;}
.rc45-day-pill.is-final{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25);}
.rc45-day-num{font:800 20px/1 'Inter',sans-serif;color:#94A3B8;}
.rc45-day-pill.is-final .rc45-day-num{color:#059669;}
.rc45-day-label{font:700 12px/1 'Inter',monospace;color:#475569;text-transform:uppercase;letter-spacing:.04em;}

/* ---- shared visual outer wrapper: NO box, NO background -just a full-height flex container ---- */
.rc45-visual{position:relative;width:100%;max-width:100%;height:100%;min-height:280px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;}
.rc45-glow{position:absolute;border-radius:9999px;filter:blur(60px);pointer-events:none;z-index:0;}

/* ---- responsive ---- */
@media (max-width:480px){
  .rc45-visual{min-height:240px;padding:.85rem;}
  .rc45-frame-body{padding:.9rem 1rem 1.1rem;}
  .rc45-bar-label{width:84px;font-size:10px;}
}
@media (prefers-reduced-motion: reduce){
  .rc45-visual *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
  .rc45-radar-ring,.rc45-radar-node,.rc45-radar-core,.rc45-radar-sweep-group,.rc45-radar-spoke{animation:none !important;}
}

/* ---- radar + mastery-grid responsive ---- */
@media (min-width:1024px){
  .rc45-radar-wrap{min-height:100%;}
}
@media (max-width:1023.98px){
  .rc45-radar-wrap{min-height:420px;}
}
@media (max-width:640px){
  .rc45-radar-wrap{min-height:360px;}
  .rc45-radar-core{width:82px;}
  .rc45-radar-core span{font-size:11px;}
  .rc45-radar-core small{font-size:10px;}
  .rc45-radar-node{padding:.4rem .65rem;gap:.3rem;}
  .rc45-radar-node span{font-size:10px;}
  .rc45-radar-node i{width:13px;height:13px;}
  .rc45-radar-badge{font-size:10px;padding:.36rem .65rem;}

  .rc45-mastery-grid{grid-template-columns:1fr;}
}
@media (max-width:400px){
  .rc45-radar-wrap{min-height:320px;}
  .rc45-radar-node span{display:none;}
  .rc45-radar-node{padding:.5rem;border-radius:9999px;}
  .rc45-radar-badge{display:none;}
}

/* ---- overflow safety net ---- */
.grid > *{min-width:0;}
.rc45-frame{min-width:0;box-sizing:border-box;}
.rc45-frame *{box-sizing:border-box;}