:root{--blue:#5393CF;--blue-dark:#4582BD;--blue-soft:#EEF7FD;--navy:#172A5E;--text:#1E293B;--muted:#64748B;--border:#E2E8F0;--bg:#F5F8FB;--white:#fff;--green:#2E7D32;--green-soft:#EEF8F0;--shadow:0 16px 42px rgba(29,59,91,.08)}
*{box-sizing:border-box;margin:0;padding:0}body{font-family:'Satoshi',sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}a{text-decoration:none;color:inherit}.container{width:min(1180px,calc(100% - 44px));margin:0 auto}
.nav{height:78px;background:rgba(255,255,255,.95);border-bottom:1px solid var(--border);display:flex;align-items:center;position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)}.nav-inner{width:min(1220px,calc(100% - 44px));margin:auto;display:flex;align-items:center;gap:28px}.logo{width:188px;height:auto;display:block}.divider{width:1px;height:30px;background:var(--border)}.exam-wrap{position:relative}.exam-select{appearance:none;height:40px;min-width:150px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--navy);padding:0 36px 0 13px;font:700 12px 'Satoshi',sans-serif;cursor:pointer;outline:none}.exam-wrap:after{content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;border-right:1.5px solid #64748B;border-bottom:1.5px solid #64748B;transform:translateY(-70%) rotate(45deg);pointer-events:none}.nav-spacer{flex:1}.plans-link{color:var(--blue-dark);font-size:12px;font-weight:800}.login-btn{height:40px;padding:0 17px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--blue),var(--blue-dark));color:#fff;font-size:12px;font-weight:800;box-shadow:0 7px 17px rgba(83,147,207,.18)}
.hero{position:relative;overflow:hidden;padding:76px 0 60px;background:radial-gradient(circle at 8% 18%,rgba(83,147,207,.13),transparent 26%),radial-gradient(circle at 91% 16%,rgba(83,147,207,.11),transparent 24%),linear-gradient(135deg,#F7FBFE 0%,#FFFFFF 58%,#F5FAFD 100%);border-bottom:1px solid var(--border)}.hero:after{content:"";position:absolute;width:520px;height:520px;right:-220px;top:-270px;border:1px solid rgba(83,147,207,.12);border-radius:50%}.kicker{display:inline-flex;align-items:center;gap:7px;color:var(--blue-dark);background:var(--blue-soft);border:1px solid rgba(83,147,207,.14);border-radius:999px;padding:7px 11px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;margin-bottom:16px}.kicker-dot{width:6px;height:6px;border-radius:50%;background:var(--blue)}.hero h1{max-width:750px;color:var(--navy);font-size:54px;line-height:1.08;letter-spacing:-2px;margin-bottom:15px}.hero h1 span{color:var(--blue)}.hero p{max-width:650px;font-size:15px;line-height:1.8;color:var(--muted)}
.plan-toggle{margin:0 auto;padding:22px 0 40px;display:flex;justify-content:center}.toggle{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(29,59,91,.05)}.toggle button{min-width:120px;height:37px;border:none;border-radius:9px;background:transparent;color:var(--muted);font:700 11px 'Satoshi',sans-serif;cursor:pointer}.toggle button.active{color:var(--blue-dark);background:var(--blue-soft)}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;padding-bottom:76px}.card{position:relative;background:#fff;border:1px solid var(--border);border-radius:20px;padding:29px 25px 24px;box-shadow:var(--shadow);overflow:hidden}.card.popular{border:1.5px solid var(--blue);background:linear-gradient(180deg,#F2F9FE 0%,#FFFFFF 100%)}.offer{position:absolute;top:15px;right:-39px;width:138px;transform:rotate(45deg);text-align:center;padding:8px 0;background:linear-gradient(90deg,#4C92CB,#65A9DC);color:#fff;font-size:9px;font-weight:800;letter-spacing:.6px;box-shadow:0 6px 12px rgba(53,103,149,.16)}.card-label{display:inline-flex;min-height:27px;align-items:center;padding:0 10px;border-radius:999px;font-size:10px;font-weight:800;margin-bottom:10px}.label-free{background:var(--green-soft);color:#4D7A5D}.label-popular{background:var(--blue-soft);color:var(--blue-dark)}.label-long{background:#F0F2F7;color:#58657A}.card h2{color:var(--navy);font-size:26px;letter-spacing:-.5px;margin-bottom:6px}.card-desc{min-height:47px;font-size:12px;line-height:1.6;color:var(--muted);margin-bottom:18px}.price{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}.original{position:relative;color:#9AA5B2;font-size:16px;font-weight:600;display:inline-block}.original:after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:1.8px;background:#8D98A5;transform:rotate(-10deg)}.sale{color:var(--blue-dark);font-size:31px;font-weight:800;letter-spacing:-.8px}.period{font-size:12px;color:var(--muted)}.free-price{color:var(--blue-dark);font-size:31px;font-weight:800}.save{display:inline-flex;margin-bottom:20px;padding:4px 7px;border-radius:6px;background:var(--green-soft);color:#3C9664;font-size:9.5px;font-weight:800}.line{height:1px;background:var(--border);margin-bottom:20px}.features{display:grid;gap:11px;margin-bottom:23px}.feature{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;color:var(--text);line-height:1.45}.check{width:18px;height:18px;flex-shrink:0;border:1.6px solid #4DBA7D;border-radius:50%;position:relative;margin-top:1px}.check:after{content:"";position:absolute;width:6px;height:3px;border-left:1.5px solid #4DBA7D;border-bottom:1.5px solid #4DBA7D;transform:rotate(-45deg);left:5px;top:5px}.card-btn{width:100%;height:47px;border-radius:11px;border:1px solid var(--border);background:#fff;color:var(--navy);font:800 11.5px 'Satoshi',sans-serif;cursor:pointer;transition:.2s}.card-btn:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-dark)}.card-btn.primary{border-color:transparent;background:linear-gradient(90deg,var(--blue),var(--blue-dark));color:#fff;box-shadow:0 8px 18px rgba(83,147,207,.18)}
.section{padding:78px 0}.section.alt{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.section-head{text-align:center;max-width:720px;margin:0 auto 38px}.section-head h2{color:var(--navy);font-size:34px;line-height:1.18;letter-spacing:-1px;margin-bottom:10px}.section-head p{font-size:13px;color:var(--muted);line-height:1.75}.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.benefit{padding:19px;border:1px solid var(--border);border-radius:15px;background:#fff}.benefit-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--blue-soft);color:var(--blue-dark);font-weight:800;font-size:12px;margin-bottom:12px}.benefit h3{font-size:12px;color:var(--navy);margin-bottom:5px}.benefit p{font-size:10.5px;color:var(--muted);line-height:1.6}
.table-wrap{border:1px solid var(--border);border-radius:16px;overflow:auto;background:#fff}table{width:100%;border-collapse:collapse;min-width:680px}th,td{padding:15px 17px;border-bottom:1px solid var(--border);font-size:11px;text-align:center}th{background:#F8FAFC;color:var(--navy);font-weight:800}th:first-child,td:first-child{text-align:left}td{color:var(--muted)}td strong{color:var(--navy)}tr:last-child td{border-bottom:0}.yes{color:#319465;font-weight:800}.no{color:#A3ACB8}
.faq{max-width:820px;margin:0 auto}.faq-item{border:1px solid var(--border);border-radius:12px;margin-bottom:9px;background:#fff;overflow:hidden}.faq-q{width:100%;border:none;background:#fff;display:flex;justify-content:space-between;align-items:center;text-align:left;padding:16px 18px;color:var(--navy);font:700 11.5px 'Satoshi',sans-serif;cursor:pointer}.plus{font-size:18px;color:var(--blue-dark);font-weight:400}.faq-a{display:none;padding:0 18px 17px;font-size:10.5px;color:var(--muted);line-height:1.7}.faq-item.open .faq-a{display:block}.faq-item.open .plus{transform:rotate(45deg)}
.cta{padding:74px 0;background:linear-gradient(135deg,#1B3769,#275082)}.cta-inner{display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center}.cta h2{color:#fff;font-size:35px;line-height:1.15;letter-spacing:-1px;margin-bottom:10px}.cta p{color:rgba(255,255,255,.72);font-size:12px;line-height:1.7;max-width:600px}.cta-btn{min-width:170px;height:46px;border-radius:10px;border:none;background:#fff;color:var(--navy);font:800 11.5px 'Satoshi',sans-serif;cursor:pointer}
footer{background:#0F1F3D;color:#fff;padding:48px 0 24px}.footer-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr 1.1fr;gap:36px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1)}.footer-logo{width:182px;height:auto;display:block;margin-bottom:13px}.footer-copy{font-size:10.5px;line-height:1.7;color:rgba(255,255,255,.55);max-width:290px}.footer h4{font-size:11px;margin-bottom:12px}.footer a{display:block;color:rgba(255,255,255,.57);font-size:10px;margin:7px 0}.footer a:hover{color:#fff}.store-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}.store{border:1px solid rgba(255,255,255,.2);border-radius:8px;min-width:116px;padding:7px 9px;color:#fff;font-size:9px;line-height:1.2;background:rgba(255,255,255,.04)}.store strong{display:block;font-size:11px}.footer-bottom{display:flex;justify-content:space-between;gap:15px;padding-top:19px;color:rgba(255,255,255,.4);font-size:9px}
@media(max-width:950px){.plans-grid{grid-template-columns:1fr 1fr}.benefits{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1.3fr 1fr 1fr}.footer-grid>div:last-child{grid-column:1/-1}}@media(max-width:700px){.nav-inner{width:calc(100% - 30px);gap:11px}.logo{width:148px}.divider,.exam-wrap,.plans-link{display:none}.hero{padding:52px 0 43px}.hero h1{font-size:40px;letter-spacing:-1.4px}.hero p{font-size:13px}.container{width:calc(100% - 30px)}.plans-grid{grid-template-columns:1fr}.toggle button{min-width:90px}.benefits{grid-template-columns:1fr}.cta-inner{grid-template-columns:1fr}.cta-btn{justify-self:start}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-bottom{flex-direction:column}}


/* =====================================================================
   MYTESTCART PLANS — project overrides on top of the approved mockup
   ---------------------------------------------------------------------
   The mockup hardcoded three tiers (Free / Pro / Premium) and a
   Monthly–Yearly switch. The real page renders whatever the admin has
   created for this exam: any number of plans, any durations. So the
   grid has to survive 1, 2, 4+ cards, and the switch is built from the
   durations that actually exist.
   ===================================================================== */

:root{
  --font:'Satoshi',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body,button,input,select,textarea{font-family:var(--font)}

/* ---------- Brand lockup + nav actions (shared with the landing page) ---------- */
.brand-link{display:flex;align-items:center;gap:9px;flex-shrink:0}
.brand-mark{width:38px;height:38px;border-radius:10px;display:block;flex-shrink:0}
.brand-word{width:135px;height:auto;display:block}
.nav-actions{display:flex;align-items:center;gap:8px}
.nav-btn{height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--border);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:var(--navy)}
.signin-btn:hover{background:var(--blue-soft);border-color:#CFE3F3}
.signup-btn{background:linear-gradient(90deg,var(--blue),var(--blue-dark));color:#fff;border-color:transparent;box-shadow:0 7px 17px rgba(83,147,207,.18)}
.nav-toggle{display:none;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.nav-toggle span{display:block;width:16px;height:2px;border-radius:2px;background:var(--navy)}

/* Slide-in drawer, from the right, over the page. */
body.mobile-nav-locked{overflow:hidden}
.mobile-nav-backdrop{
  position:fixed;inset:0;z-index:98;
  background:rgba(9,20,36,.45);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.mobile-nav-backdrop.open{opacity:1;pointer-events:auto}
.mobile-nav{
  display:block;position:fixed;top:0;right:0;bottom:0;z-index:99;
  width:min(320px,84vw);
  background:#fff;
  border-left:1px solid var(--border);
  box-shadow:-18px 0 45px rgba(8,28,56,.16);
  padding:0 0 18px;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);margin-bottom:16px}
.mobile-nav-title{font-size:14px;font-weight:800;color:var(--navy)}
.mobile-nav-close{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:#fff;color:var(--navy);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mobile-nav-close:hover{background:var(--blue-soft)}
.mobile-nav .container{width:auto;margin:0;padding:0 20px;display:grid;gap:9px}
.mobile-nav .nav-btn{width:100%;height:44px}
.mobile-nav .exam-select{width:100%}

/* ---------- A grid that works for any number of plans ---------- */
.plans-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));max-width:1180px;margin:0 auto}
.plans-grid.count-1{max-width:420px}
.plans-grid.count-2{max-width:790px}
.plans-grid.count-4 .card h2,.plans-grid.count-5 .card h2{font-size:23px}

/* Plan durations are data, not a fixed monthly/yearly pair. */
.toggle button[data-duration]{padding:0 18px}
.plan-period{font-size:12px;color:var(--muted)}
.card-desc:empty{min-height:0;margin-bottom:10px}
.card-note{margin-top:10px;text-align:center;font-size:9.5px;color:#9AA6B4;line-height:1.6}

/* An exam with no published plans must still render a sane page. */
.plans-empty{max-width:560px;margin:0 auto 76px;padding:38px 30px;text-align:center;background:#fff;border:1px dashed #CBD9E6;border-radius:20px}
.plans-empty h3{color:var(--navy);font-size:19px;margin-bottom:8px}
.plans-empty p{font-size:12px;color:var(--muted);line-height:1.7;margin-bottom:18px}

/* Access banner — free exams and trials are real states the plans page must
   explain, otherwise a visitor sees prices for something already free. */
.access-note{max-width:840px;margin:0 auto 26px;display:flex;gap:11px;align-items:flex-start;padding:15px 18px;border-radius:14px;background:var(--blue-soft);border:1px solid rgba(83,147,207,.18)}
.access-note .dot{width:8px;height:8px;border-radius:50%;background:var(--blue);margin-top:5px;flex-shrink:0}
.access-note strong{display:block;color:var(--navy);font-size:12px;margin-bottom:3px}
.access-note span{font-size:11px;color:#41648C;line-height:1.65}

.fa,[class^="fa-"],[class*=" fa-"]{font-family:FontAwesome!important}

@media(max-width:900px){
  .nav-toggle{display:flex}
  .nav .exam-picker-wrap,.nav .nav-divider,.nav-actions .plans-btn,.nav-actions .signin-btn,.nav-actions .signup-btn{display:none}
}
@media(max-width:560px){
  .brand-word{width:112px}
  .brand-mark{width:32px;height:32px}
  .hero h1{font-size:33px}
}


/* ---------- Shared header markup ----------
   The landing page and this page render the same header partial, so the
   nav classes it uses (.container.nav-inner, .exam-picker, .plans-btn,
   .nav-divider) are defined here too. The mockup's plans nav used its own
   names for the same parts; one partial beats two near-identical ones. */
.nav-inner{width:min(1220px,calc(100% - 44px));margin-left:auto;margin-right:auto;gap:22px}
.nav-divider{width:1px;height:34px;background:#D8E1E9;margin-left:10px;margin-right:6px;flex-shrink:0}
.nav-spacer{flex:1}
.exam-picker-wrap{position:relative;flex-shrink:0}
.exam-picker{height:40px;min-width:142px;border:1px solid var(--border);border-radius:11px;background:#fff;color:var(--navy);font-size:12px;font-weight:700;padding:0 38px 0 14px;appearance:none;-webkit-appearance:none;cursor:pointer;outline:none;box-shadow:0 4px 12px rgba(27,55,92,.035)}
.exam-picker:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(83,147,207,.1)}
.exam-picker-wrap:after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:1.5px solid #6B7A8D;border-bottom:1.5px solid #6B7A8D;transform:translateY(-65%) rotate(45deg);pointer-events:none}
.plans-btn{gap:7px;background:#fff;color:var(--navy)}
.plans-btn:hover{background:var(--blue-soft);border-color:#CFE3F3}
.plans-btn.is-current{background:var(--blue-soft);border-color:#CFE3F3;color:var(--blue-dark)}
.sparkle{width:15px;height:15px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:12px;z-index:99;background:#fff;color:var(--navy);padding:8px 12px;border-radius:8px}
@media(max-width:900px){.nav-inner{gap:12px}}
@media(max-width:700px){.nav-inner{width:calc(100% - 30px)}}


/* ---------- Footer brand lockup ----------
   MTCLOGO is a blue wordmark; on the dark footer it is knocked out to white
   rather than shipping a second logo file. */
.footer .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer .brand-mark{width:34px;height:34px;border-radius:9px}
.footer .footer-word{width:140px;filter:brightness(0) invert(1);opacity:.95}
.footer .footer-copy{margin-top:0}


/* =====================================================================
   REVISION — type scale raised to match the landing page
   ===================================================================== */

.nav{height:86px}
.nav-btn{height:44px;padding:0 18px;font-size:14px;border-radius:11px}
.exam-picker{height:44px;min-width:158px;font-size:14px;padding:0 40px 0 15px}
.brand-word{width:150px}
.brand-mark{width:42px;height:42px}
.sparkle{width:16px;height:16px}

.kicker{font-size:12px;padding:8px 13px}
.hero p{font-size:17px;line-height:1.8;max-width:700px}
.section-head p{font-size:15.5px;line-height:1.8}

/* Plan cards */
.toggle button{min-width:132px;height:42px;font-size:13.5px}
.card{padding:30px 27px 26px}
.card-desc{font-size:14px;line-height:1.65;min-height:52px;margin-bottom:20px}
.price .period,.plan-period{font-size:14px}
.original{font-size:18px}
.sale,.free-price{font-size:34px}
.save{font-size:11.5px;padding:5px 9px}
.card-label{font-size:11px;min-height:29px;padding:0 12px}
.feature{font-size:13.5px;line-height:1.55}
.features{gap:13px;margin-bottom:26px}
.check{width:20px;height:20px}
.check:after{left:5.5px;top:6px}
.card-btn{height:50px;font-size:14px;border-radius:12px}
.card-note{font-size:11px}
.offer{font-size:10px}

/* Benefits, table, FAQ, CTA, footer */
.benefit{padding:22px}
.benefit-icon{width:38px;height:38px;font-size:13px}
.benefit h3{font-size:16px;margin-bottom:7px}
.benefit p{font-size:13px;line-height:1.7}
th,td{font-size:13.5px;padding:16px 18px}
.faq-q{font-size:15px;padding:19px 20px}
.faq-a{font-size:14px;line-height:1.75;padding:0 20px 19px}
.plus{font-size:21px}
.cta p{font-size:15px}
.cta-btn{height:50px;font-size:14px;min-width:190px}
.access-note strong{font-size:14px}
.access-note span{font-size:13px}
.plans-empty h3{font-size:21px}
.plans-empty p{font-size:14px}
.footer h4{font-size:13.5px;margin-bottom:14px}
.footer a{font-size:12.5px;margin:9px 0}
.footer-copy{font-size:12.5px;line-height:1.75}
.footer-bottom{font-size:11px}

@media(max-width:900px){
  .hero p{font-size:15.5px}
  .section-head p{font-size:14.5px}
}
@media(max-width:560px){
  .nav{height:78px}
}


/* =====================================================================
   PLANS PAGE — revision (dark hero, trial card, inline checkout)
   ===================================================================== */

/* ---------- Darker hero ----------
   Deep-navy gradient (#0F2C5C -> #1B4A82 -> #2E6DAB) with white text,
   replacing the old near-white wash. */
.plans-hero{
  position:relative;overflow:hidden;
  padding:76px 0 62px;
  background:linear-gradient(135deg,#0F2C5C 0%,#1B4A82 52%,#2E6DAB 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.plans-hero-aura{position:absolute;border-radius:50%;pointer-events:none}
.plans-hero-aura.one{width:520px;height:520px;right:-200px;top:-260px;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 62%)}
.plans-hero-aura.two{width:460px;height:460px;left:-190px;bottom:-240px;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 62%)}
.plans-hero .container{position:relative;z-index:1}
.plans-hero .kicker{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;margin-bottom:16px}
.plans-hero .kicker-dot{background:#BFE0FA}
.plans-hero h1{color:#fff;font-size:44px;line-height:1.12;letter-spacing:-1.4px;max-width:16ch;margin-bottom:14px;font-weight:750}
.plans-hero p{color:rgba(255,255,255,.86);font-size:17px;line-height:1.75;max-width:62ch}

/* ---------- Trial / free card ---------- */
.trial-card{border:1.5px dashed #79B36F;background:linear-gradient(180deg,#F1FBF4 0%,#FFFFFF 60%)}
.trial-card .free-price{color:#2E7D46}
.trial-card .card-btn.primary{background:linear-gradient(90deg,#3FA35C,#2E7D46);box-shadow:0 8px 18px rgba(46,125,70,.2)}

/* ---------- Current / blocked plan states ---------- */
.card.is-current{border:1.5px solid #2E6DAB;background:linear-gradient(180deg,#F2F9FE 0%,#FFFFFF 100%)}
.card-btn.is-current-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#EAF4FC;color:#2E6DAB;border:1px solid #CFE3F3;cursor:default}
.card-btn.is-blocked-btn{display:flex;align-items:center;justify-content:center;background:#F1F4F8;color:#94A3B8;border:1px solid var(--border);cursor:not-allowed}

/* ---------- Bigger "Why MyTestCart" (benefits) ---------- */
.section-head h2{font-size:36px}
.section-head p{font-size:16px;line-height:1.8}
.benefit{padding:26px}
.benefit-icon{width:40px;height:40px;font-size:14px;border-radius:12px;margin-bottom:15px}
.benefit h3{font-size:17px;margin-bottom:8px}
.benefit p{font-size:13.5px;line-height:1.7}
@media(max-width:768px){.section-head h2{font-size:28px}}

/* ---------- Footer Google Play badge (same as landing) ---------- */
.footer .store-btn{
  height:48px;width:fit-content;margin-top:16px;
  border:1px solid rgba(255,255,255,.2);border-radius:10px;
  background:rgba(255,255,255,.06);
  display:inline-flex;align-items:center;gap:11px;padding:0 15px;
  color:#fff;text-decoration:none;transition:background .2s ease,border-color .2s ease;
}
.footer .store-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34)}
.footer .store-icon{width:22px;height:22px;flex-shrink:0}
.footer .store-small{font-size:8px;letter-spacing:.06em;color:rgba(255,255,255,.6);display:block;line-height:1;text-transform:uppercase}
.footer .store-big{font-size:14px;font-weight:700;color:#fff;display:block;line-height:1.15;margin-top:2px}

/* ---------- Inline checkout overlay ---------- */
.mtc-pay-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(9,20,36,.55);backdrop-filter:blur(4px)}
.mtc-pay-overlay.open{display:flex}
.mtc-pay-modal{position:relative;width:min(430px,100%);background:#fff;border-radius:20px;padding:28px 26px;box-shadow:0 30px 80px rgba(4,16,32,.3)}
.mtc-pay-close{position:absolute;top:14px;right:16px;border:0;background:none;font-size:26px;line-height:1;color:#94A3B8;cursor:pointer}
.mtc-pay-modal h3{font-size:20px;color:var(--navy);font-weight:700;margin-bottom:18px}
.mtc-pay-plan{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border:1px solid var(--border);border-radius:12px;margin-bottom:18px}
.mtc-pay-plan span{font-size:14px;color:var(--muted);font-weight:600}
.mtc-pay-plan strong{font-size:20px;color:var(--navy)}
.mtc-coupon label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px}
.mtc-coupon-row{display:flex;gap:8px}
.mtc-coupon-row input{flex:1;height:44px;border:1px solid var(--border);border-radius:10px;padding:0 13px;font:600 13px 'Satoshi',sans-serif;outline:none;text-transform:uppercase}
.mtc-coupon-row input:focus{border-color:var(--blue)}
.mtc-coupon-row button{height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--blue-soft);color:var(--blue-dark);font-weight:800;font-size:13px;cursor:pointer}
.mtc-coupon-feedback{font-size:12px;margin-top:8px;min-height:16px}
.mtc-coupon-feedback.error{color:#C4526E}.mtc-coupon-feedback.info{color:var(--muted)}.mtc-coupon-feedback.success{color:#2E7D46}
.mtc-coupon-applied{border:1px solid #D1E8D6;background:#F3FBF5;border-radius:12px;padding:14px;margin-bottom:4px}
.mtc-coupon-applied .row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:6px}
.mtc-coupon-applied .row.total{font-size:15px;color:var(--navy);font-weight:800;border-top:1px dashed #CBD9E6;padding-top:8px;margin-top:4px}
.mtc-link{border:0;background:none;color:var(--blue-dark);font-size:12px;font-weight:700;cursor:pointer;padding:0;margin-top:2px}
.mtc-pay-btn{width:100%;height:50px;margin-top:18px;border:0;border-radius:12px;background:linear-gradient(90deg,var(--blue),var(--blue-dark));color:#fff;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 10px 22px rgba(83,147,207,.22)}
body.loading{cursor:progress}

@media(max-width:768px){.plans-hero{padding:52px 0 44px}.plans-hero h1{font-size:31px}}


/* =====================================================================
   PLANS PAGE — revision 3 (sky-blue page, centered heading, blue trial)
   ===================================================================== */

/* #BEDDED across the whole plans page. landing-plans.css only loads on this
   page, so scoping to body is safe. */
body { background:#BEDDED; }

/* Hero: no dark band, no kicker, no paragraph — just the centered heading
   sitting on the sky-blue page. */
.plans-hero{
  background:transparent;
  border-bottom:0;
  padding:56px 0 26px;
  text-align:center;
}
.plans-hero .container{position:relative;z-index:1}
.plans-hero h1{
  color:#0F2C5C;
  font-size:44px;line-height:1.14;letter-spacing:-1.4px;font-weight:800;
  max-width:20ch;margin:0 auto;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* Cards read as white panels lifted off the sky-blue ground. */
.plans-grid .card{box-shadow:0 16px 40px rgba(16,44,80,.14)}

/* The two neutral sections (benefits) get a soft translucent panel instead of
   a hard white band, so the blue page shows through. */
.section.alt{background:rgba(255,255,255,.55);border-top:0;border-bottom:0}

/* Trial card: a distinct BLUE (lighter/cyan-leaning) rather than green, so it
   still stands apart from the paid plans while staying in the palette. */
.trial-card{
  border:1.5px dashed #3B93C9;
  background:linear-gradient(180deg,#EAF6FC 0%,#FFFFFF 62%);
}
.trial-card .free-price{color:#1E6C97}
.trial-card .card-label.label-free{background:#E1F1FA;color:#1E6C97}
.trial-card .card-btn.primary{
  background:linear-gradient(90deg,#38AEE0,#1E7FB2);
  box-shadow:0 8px 18px rgba(30,127,178,.24);
}

@media(max-width:768px){
  .plans-hero{padding:40px 0 18px}
  .plans-hero h1{font-size:31px}
}