/* ==========================================================================
   CHRIS ONLINE CYBER SERVICES — pricing.css
   Digital rate card 2026.
   A navy hero, then light content where people compare and decide. Prices
   are set in a mono face with a dashed rule, like lines on a printed card.
   Class names unchanged. Works with or without style.css loaded first.
   ========================================================================== */

/* Tokens: keep in sync with style.css */
:root{
  --navy:#0B1220;--navy-2:#111B2E;--navy-3:#18243A;
  --navy-line:rgba(148,163,184,.2);
  --on-navy:#E6EDF6;--on-navy-2:#9FB0C6;--on-navy-3:#8496AD;

  --paper:#F4F7FA;--paper-2:#E9EFF5;--card:#FFFFFF;
  --line:#DAE2EA;--line-strong:#BFCBD8;
  --ink:#0F172A;--ink-2:#334155;--ink-3:#556378;

  --cyan:#22D3EE;--cyan-soft:#67E8F9;
  --accent:#0E7490;--accent-press:#155E75;
  --accent-tint:#E0F4F8;--accent-edge:#A5DDE9;

  --sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:26px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t:180ms var(--ease);
  --page-image:linear-gradient(180deg,var(--navy) 100px,var(--paper) 100px);

  /* names this file used before */
  --price-primary:var(--accent);
  --price-secondary:var(--cyan);
  --price-dark:var(--navy);
  --price-card:var(--card);
  --price-border:var(--line);
  --price-text:var(--ink);
  --price-muted:var(--ink-3);
}

/* ==========================================================================
   PAGE
   ========================================================================== */

.pricing-page{
  background-color:var(--paper);
  background-image:var(--page-image);   /* navy strip behind the fixed navbar */
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--sans);
}

.pricing-container{
  width:min(1180px,92%);
  margin:auto;
}

/* each category is a section; the tabs switch which one is showing */
.pricing-section{
  display:none;
  padding:72px 0;
}

.active-section{
  display:block;
  animation:cxSwap .35s var(--ease);
}

@keyframes cxSwap{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* ==========================================================================
   HERO (navy)
   ========================================================================== */

.pricing-hero{
  position:relative;
  isolation:isolate;
  padding:56px 0 88px;
  background:var(--navy);
  overflow:hidden;
}

/* a faint engineering grid, fading out from the top left */
.pricing-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(148,163,184,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(148,163,184,.09) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 25% 60%,#000 5%,transparent 70%);
  mask-image:radial-gradient(ellipse 90% 90% at 25% 60%,#000 5%,transparent 70%);
}

/* decorative blurred blobs are retired */
.pricing-glow,
.glow-one,
.glow-two{display:none}

.pricing-hero :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.pricing-intro{
  text-align:center;
  max-width:760px;
  margin:auto;
}

.pricing-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:1px solid rgba(34,211,238,.4);
  border-radius:999px;
  background:var(--navy-3);
  color:var(--cyan-soft);
  font-size:.92rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.pricing-intro h1{
  margin:26px 0 20px;
  color:var(--on-navy);
  font-family:var(--sans);
  font-size:clamp(2.5rem,5.8vw,4.4rem);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.035em;
  text-wrap:balance;
}

/* no more gradient word; the headline is one colour */
.pricing-intro h1 span{
  background:none;
  color:inherit;
  -webkit-text-fill-color:currentColor;
}

.pricing-intro p{
  max-width:34em;
  margin:0 auto;
  color:var(--on-navy-2);
  font-size:1.15rem;
  line-height:1.7;
  text-wrap:pretty;
}

/* ==========================================================================
   HIGHLIGHTS — open figures, no boxes
   ========================================================================== */

.pricing-highlights{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px 40px;
  margin-top:64px;
  text-align:left;
}

.highlight-card{
  padding:18px 0 0;
  border:0;
  border-top:1px solid rgba(148,163,184,.4);
  border-radius:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  text-align:left;
}

.highlight-card strong{
  display:block;
  margin-bottom:4px;
  color:var(--on-navy);
  font-size:1.2rem;
  font-weight:600;
  letter-spacing:-.015em;
}

.highlight-card span{
  color:var(--on-navy-2);
  font-size:.98rem;
}

/* ==========================================================================
   CATEGORY TABS (light bar under the navy hero)
   ========================================================================== */

.pricing-tabs{
  position:sticky;
  top:88px;
  z-index:50;
  background:rgba(244,247,250,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

.pricing-tabs .pricing-container{
  display:flex;
  gap:8px;
  padding:14px 0;
  overflow:auto;
  scrollbar-width:none;
}

.pricing-tabs .pricing-container::-webkit-scrollbar{display:none}

.tab{
  flex:0 0 auto;
  padding:10px 18px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:transparent;
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}

.tab:hover{
  background:var(--paper-2);
  color:var(--ink);
}

.tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.pricing-page :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */

.section-heading{
  max-width:40rem;
  margin-bottom:44px;
  text-align:left;
}

.section-heading span{
  display:block;
  color:var(--accent);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.section-heading h2{
  margin:8px 0 0;
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1.9rem,3.8vw,2.9rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
}

/* ==========================================================================
   PRICE CARDS
   ========================================================================== */

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

.price-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:26px 26px 24px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);

  /* the existing script adds .reveal; a plain fade is all it needs */
  opacity:0;
  transition:opacity .45s var(--ease),border-color var(--t);
}

.price-card.reveal{opacity:1}

/* if scripting is unavailable, never leave the prices hidden */
@media(scripting:none){
  .price-card{opacity:1}
}

.price-card:hover{border-color:var(--accent)}

.price-card h3{
  margin:0 0 14px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.015em;
}

/* the price: mono figures with a dashed rule under it, like a printed rate card */
.price-card strong{
  display:block;
  margin:0 0 16px;
  padding-bottom:16px;
  border-bottom:1px dashed var(--line-strong);
  color:var(--ink);
  font-family:var(--mono);
  font-size:1.9rem;
  font-weight:500;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}

.price-card p{
  margin:0;
  color:var(--ink-3);
  font-size:.98rem;
  line-height:1.65;
}

/* featured */
.price-card.featured{
  background:var(--accent-tint);
  border-color:var(--accent-edge);
}

.price-card.featured strong{border-bottom-color:#7FC4D5}

.price-card.featured p{color:var(--ink-2)}

.popular-tag{
  position:absolute;
  top:-12px;
  right:22px;
  padding:5px 12px;
  border-radius:999px;
  background:var(--navy);
  color:var(--cyan);
  font-size:.78rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */

.pricing-cta{padding:88px 0 120px}

.cta-box{
  position:relative;
  padding:68px 40px;
  border:1px solid var(--accent-edge);
  border-radius:var(--r-xl);
  background:var(--accent-tint);
  text-align:center;
  overflow:hidden;
}

.cta-box span{
  color:var(--accent);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.cta-box h2{
  max-width:16em;
  margin:14px auto 16px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1.9rem,3.8vw,2.9rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.cta-box p{
  max-width:34em;
  margin:0 auto;
  color:var(--ink-2);
  line-height:1.7;
}

.pricing-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  margin-top:32px;
  padding:0 30px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:var(--accent);
  color:#fff;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--t);
}

.pricing-btn:hover{
  background:var(--accent-press);
  color:#fff;
}

/* ==========================================================================
   LIVE QUOTE BUILDER
   ========================================================================== */

.quote-builder{
  padding:96px 0;
  background:var(--paper-2);
  border-block:1px solid var(--line);
}

.quote-wrapper{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:64px;
  align-items:start;
}

.quote-kicker{
  display:inline-block;
  color:var(--accent);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}

.quote-left{
  position:sticky;
  top:168px;
}

.quote-left h2{
  margin:14px 0 18px;
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1.9rem,3.8vw,3.1rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.quote-left h2 span{
  background:none;
  color:inherit;
  -webkit-text-fill-color:currentColor;
}

.quote-left p{
  max-width:32em;
  color:var(--ink-2);
  line-height:1.75;
}

.quote-right{
  padding:28px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}

/* options read as ledger rows; a ticked row turns accent-tint */
.quote-options{display:grid}

.quote-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 12px;
  border-bottom:1px solid var(--line);
  border-radius:var(--r-xs);
  background:transparent;
  cursor:pointer;
  transition:background var(--t);
}

.quote-item:last-child{border-bottom-color:transparent}

.quote-item:hover{background:var(--paper)}

.quote-item:has(input:checked){background:var(--accent-tint)}

.quote-item input{
  width:18px;
  height:18px;
  flex:0 0 auto;
  accent-color:var(--accent);
}

.quote-item span{
  flex:1;
  color:var(--ink);
}

.quote-item strong{
  color:var(--ink);
  font-family:var(--mono);
  font-size:.95rem;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.quote-summary{
  margin-top:24px;
  padding-top:22px;
  border-top:2px solid var(--ink);
}

.summary-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:20px;
}

.summary-top span{
  color:var(--ink-3);
  font-size:1rem;
}

.summary-top strong{
  color:var(--ink);
  font-family:var(--mono);
  font-size:2rem;
  font-weight:500;
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}

.full-width{width:100%}

.quote-summary .pricing-btn{margin-top:0}

.quote-note{
  margin:16px 0 0;
  color:var(--ink-3);
  font-size:.88rem;
  line-height:1.6;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:960px){

  .pricing-highlights{grid-template-columns:1fr;gap:24px}

}

@media(max-width:900px){

  .quote-wrapper{
    grid-template-columns:1fr;
    gap:40px;
  }

  .quote-left{position:static}

}

@media(max-width:640px){

  .pricing-hero{padding:40px 0 56px}

  .pricing-section{padding:56px 0}

  .price-card{padding:22px}

  .pricing-tabs{top:78px}

  .cta-box{padding:52px 24px}

  .quote-builder{padding:64px 0}

  .quote-right{padding:20px 16px}

}

@media(prefers-reduced-motion:reduce){

  .active-section{animation:none}

  .price-card{transition:none}

}

@media(prefers-reduced-transparency:reduce){

  .pricing-tabs{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}

}