:root{
  --ink:#122e2e;
  --petrol:#01484c;
  --petrol-2:#0a5a5e;
  --teal:#41a7a5;
  --sage:#6db5b1;
  --coral:#fe8769;
  --canvas:#f4f6f6;
  --surface:#ffffff;
  --line:#e3e9e9;
  --line-2:#eff3f3;
  --muted:#6c8281;
  --soft:#e2f3f2;
  --soft-2:#f0f9f8;
  --coral-soft:#fff5f1;
  --shadow-1:0 8px 24px rgba(1,72,76,.09);
  --shadow-2:0 20px 52px rgba(1,72,76,.15);
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-pill:999px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:"The Year of The Camel","IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{max-width:100%}
.priceWrap{width:min(1180px,92vw);margin-inline:auto}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Navigation */
.priceNav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(1,72,76,.97);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(14px);
}
.priceNavInner{min-height:72px;display:flex;align-items:center;gap:14px}
.priceBrand{display:flex;align-items:center;gap:10px;margin-inline-end:auto;min-width:0}
.pricePaw{width:38px;height:38px;border-radius:12px;background:var(--coral);display:grid;place-items:center;font-size:21px;flex:0 0 auto}
.priceBrand b{letter-spacing:.17em;font-size:18px}
.priceBrand small{display:block;color:#9bd0cb;font-size:10px;white-space:nowrap}
.priceNavLinks{display:flex;align-items:center;gap:4px}
.priceNavLinks a{padding:9px 11px;border-radius:var(--radius-pill);font-size:14px;color:#e9f5f3}
.priceNavLinks a:hover,.priceNavLinks a:focus-visible,.priceNavLinks a[aria-current="page"]{background:rgba(255,255,255,.1)}
.priceNavActions{display:flex;align-items:center;gap:8px}
.priceLang,.priceLogin,.priceBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 17px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  font-weight:600;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.priceLang,.priceLogin{border-color:rgba(255,255,255,.34);color:#fff}
.priceLang{min-width:52px}
.priceLogin small{font-size:10px;background:rgba(255,255,255,.13);padding:2px 7px;border-radius:var(--radius-pill)}
.priceBtn{background:var(--petrol);color:#fff}
.priceBtn.coral{background:var(--coral);color:var(--petrol)}
.priceBtn.outline{background:#fff;border-color:#b8cfcc;color:var(--petrol)}
.priceBtn:hover,.priceBtn:focus-visible,.priceLang:hover,.priceLang:focus-visible,.priceLogin:hover,.priceLogin:focus-visible{transform:translateY(-1px)}
:focus-visible{outline:3px solid rgba(65,167,165,.45);outline-offset:3px}

/* Hero */
.pricingHero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 20%,rgba(65,167,165,.28),transparent 34%),
    linear-gradient(135deg,#013f43,#075b5e 62%,#0a6b6d);
  color:#fff;
  padding:76px 0 72px;
}
.pricingHero:after{
  content:"";
  position:absolute;
  inset:auto -80px -160px auto;
  width:400px;
  height:400px;
  border:80px solid rgba(255,255,255,.025);
  border-radius:50%;
}
.heroGrid{position:relative;z-index:1;display:grid;grid-template-columns:1.18fr .82fr;gap:48px;align-items:center}
.heroEyebrow{display:inline-flex;align-items:center;gap:8px;color:#bde2dc;font-size:12px;font-weight:600;letter-spacing:.09em}
.heroEyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral)}
.pricingHero h1{font-size:clamp(38px,5.3vw,66px);line-height:1.1;letter-spacing:-.035em;margin:14px 0 18px;font-weight:600}
.pricingHero p{font-size:17px;color:#d7eae7;max-width:720px;margin:0}
.heroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.heroActions .priceBtn.outline{background:transparent;border-color:rgba(255,255,255,.36);color:#fff}
.heroFacts{display:grid;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.16)}
.heroFact{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.heroFact:last-child{border-bottom:0}
.heroFact i{font-style:normal;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.heroFact b{display:block;font-size:14px}
.heroFact span{display:block;color:#bcd7d3;font-size:12px;margin-top:2px}

/* General sections */
.priceSection{padding:78px 0}
.priceSection.white{background:#fff}
.sectionHead{text-align:center;max-width:840px;margin:0 auto 36px}
.sectionHead .kick{color:var(--petrol-2);font-size:12px;font-weight:700;letter-spacing:.1em}
.sectionHead h2{font-size:clamp(30px,4vw,44px);line-height:1.2;margin:8px 0 10px;font-weight:600;letter-spacing:-.025em}
.sectionHead p{color:var(--muted);margin:0}
.microNote{font-size:12px;color:var(--muted);margin-top:12px}

/* Plan cards */
.pricingCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.pricingCard{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--surface);
  border:1px solid #d8e3e2;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.pricingCard.recommended{border:2px solid var(--teal);transform:translateY(-14px);box-shadow:var(--shadow-2)}
.recommendedBadge{
  position:absolute;
  top:14px;
  inset-inline-end:14px;
  z-index:2;
  background:var(--coral);
  color:var(--petrol);
  border-radius:var(--radius-pill);
  padding:5px 11px;
  font-size:11px;
  font-weight:700;
}
.cardHead{background:linear-gradient(135deg,var(--petrol),var(--petrol-2));color:#fff;padding:27px 24px 23px;min-height:150px}
.cardHead h3{font-size:27px;line-height:1.16;margin:0 0 8px;font-weight:600}
.cardHead p{font-size:14px;color:#c3dfdb;margin:0}
.cardBody{display:flex;flex-direction:column;flex:1;padding:24px}
.priceValue{font-size:52px;line-height:1;font-weight:700;color:var(--petrol);font-variant-numeric:tabular-nums}
.priceValue small{font-size:13px;font-weight:500;color:var(--muted)}
.cardFeatures{list-style:none;margin:24px 0 20px;padding:0;display:grid;gap:0}
.cardFeatures li{position:relative;padding:10px 25px 10px 0;border-bottom:1px solid var(--line-2);font-size:14px}
html[dir="ltr"] .cardFeatures li{padding:10px 0 10px 25px}
.cardFeatures li:before{content:"✓";position:absolute;inset-inline-start:0;color:#168f88;font-weight:700}
.cardLimits{margin-top:auto;background:#f7faf9;border:1px solid var(--line);border-radius:var(--radius-md);padding:15px}
.cardLimits b{display:block;color:var(--petrol);font-size:12px;letter-spacing:.06em;margin-bottom:5px}
.cardLimits span{display:block;color:var(--muted);font-size:13px}
.zatcaPath{margin:14px 0;background:var(--soft-2);border:1px solid #d0e8e4;color:#0d6b66;border-radius:var(--radius-md);padding:12px;text-align:center;font-weight:600;font-size:13px}
.pricingCard .priceBtn{width:100%;border-radius:var(--radius-md);margin-top:2px}

/* Comparison */
.compareShell{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-1)}
.compareTable{width:100%;border-collapse:collapse;table-layout:fixed}
.compareTable th,.compareTable td{padding:15px 16px;border-bottom:1px solid var(--line);text-align:center;font-size:13px;vertical-align:middle}
.compareTable thead th{background:var(--petrol);color:#fff;font-size:14px}
.compareTable th:first-child,.compareTable td:first-child{text-align:start;width:31%}
.compareTable tbody tr:nth-child(even){background:#fafcfc}
.compareTable .yes{color:#0d7d76;font-weight:700}
.compareTable .mutedCell{color:#9aa9a8}
.mobileCompare{display:none}
.mobileCompare details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden}
.mobileCompare summary{list-style:none;cursor:pointer;padding:16px 18px;color:var(--petrol);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.mobileCompare summary::-webkit-details-marker{display:none}
.mobileCompare summary:after{content:"+";font-size:22px}
.mobileCompare details[open] summary:after{content:"−"}
.mobileCompareGrid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);font-size:12px;border-top:1px solid var(--line)}
.mobileCompareGrid>*{padding:11px 9px;border-bottom:1px solid var(--line-2);text-align:center}
.mobileCompareGrid>*:nth-child(4n+1){text-align:start;background:#fafcfc}

/* Add-ons */
.addonGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.addonCard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-1);display:flex;flex-direction:column}
.addonCard .addonTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.addonCard h3{font-size:21px;color:var(--petrol);margin:0}
.addonPrice{font-size:31px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.addonPrice small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.addonCard p{color:var(--muted);font-size:14px;margin:13px 0 0}
.addonFoot{border-top:1px solid var(--line);margin-top:auto;padding-top:14px;color:var(--petrol-2);font-size:12px}

/* Rates */
.rateTableShell{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-1)}
.rateTable{width:100%;border-collapse:collapse}
.rateTable th,.rateTable td{padding:15px 17px;border-bottom:1px solid var(--line);text-align:start;font-size:13px;vertical-align:top}
.rateTable th{background:#eaf2f1;color:var(--petrol);font-size:12px;letter-spacing:.04em}
.rateTable td:nth-last-child(-n+2),.rateTable th:nth-last-child(-n+2){white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums}
.rateCards{display:none}
.rateCard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:17px;margin-bottom:10px}
.rateCard b{display:block;color:var(--petrol)}
.rateCard p{margin:7px 0;color:var(--muted);font-size:13px}
.rateNumbers{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:10px;font-size:13px}
.rateChange{margin-top:16px;padding:14px 17px;background:var(--coral-soft);border:1px solid #ffd7cb;border-radius:var(--radius-md);color:#7f493b;font-size:12px}

/* Examples */
.exampleGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.exampleCard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-1)}
.exampleCard h3{font-size:18px;margin:0 0 15px;color:var(--petrol)}
.invoiceLine{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.invoiceLine span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.invoiceTotal{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:2px solid var(--petrol);font-weight:700;color:var(--petrol);font-variant-numeric:tabular-nums}

/* FAQ and CTA */
.faqGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.faqGrid details{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:0 18px}
.faqGrid summary{cursor:pointer;list-style:none;color:var(--petrol);font-weight:600;padding:17px 0;display:flex;justify-content:space-between;gap:10px}
.faqGrid summary::-webkit-details-marker{display:none}
.faqGrid summary:after{content:"+";font-size:21px}
.faqGrid details[open] summary:after{content:"−"}
.faqGrid p{margin:0 0 17px;color:var(--muted);font-size:14px}
.pricingCta{background:linear-gradient(135deg,#fff0ea,#fff7f3);border:1px solid #ffd7cc;border-radius:22px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.pricingCta h2{margin:0 0 7px;font-size:30px;color:var(--petrol)}
.pricingCta p{margin:0;color:var(--muted)}

/* Footer */
.priceFooter{background:#032f31;color:#fff;padding:46px 0 22px}
.footerGrid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:30px}
.footerGrid p,.footerGrid a{color:#bad6d1;font-size:13px}
.footerGrid a:hover,.footerGrid a:focus-visible{color:#fff;text-decoration:underline}
.footerLegal{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;color:#91b8b2;font-size:12px}

/* Responsive */
@media(max-width:980px){
  .priceNavLinks{display:none}
  .heroGrid{grid-template-columns:1fr}
  .heroFacts{grid-template-columns:repeat(3,1fr)}
  .heroFact{display:block;border-bottom:0;border-inline-start:1px solid rgba(255,255,255,.1);padding:8px 13px}
  .heroFact:first-child{border-inline-start:0}
  .heroFact i{margin-bottom:8px}
  .pricingCards{grid-template-columns:1fr}
  .pricingCard.recommended{transform:none}
  .compareTable{display:none}
  .compareShell{background:transparent;border:0;box-shadow:none;overflow:visible}
  .mobileCompare{display:block}
  .exampleGrid{grid-template-columns:1fr}
}
@media(max-width:720px){
  body{font-size:15px}
  .priceWrap{width:min(94vw,100%)}
  .priceNavInner{min-height:64px;gap:7px}
  .priceBrand b{font-size:15px}
  .priceBrand small{display:none}
  .pricePaw{width:32px;height:32px;font-size:18px}
  .priceLogin{font-size:12px;padding:8px 11px}
  .priceLogin small{display:none}
  .priceLang{min-width:44px;padding:8px 10px}
  .pricingHero{padding:50px 0 48px}
  .pricingHero h1{font-size:38px}
  .pricingHero p{font-size:15px}
  .heroFacts{grid-template-columns:1fr}
  .heroFact{display:grid;border-inline-start:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .priceSection{padding:58px 0}
  .sectionHead{text-align:start;margin-bottom:28px}
  .sectionHead h2{font-size:31px}
  .cardHead{min-height:0;padding:23px 20px}
  .cardBody{padding:20px}
  .priceValue{font-size:46px}
  .addonGrid,.faqGrid{grid-template-columns:1fr}
  .addonCard{padding:20px}
  .addonCard .addonTop{display:block}
  .addonPrice{margin-top:10px}
  .rateTableShell{display:none}
  .rateCards{display:block}
  .pricingCta{display:block;padding:24px}
  .pricingCta .priceBtn{margin-top:18px;width:100%}
  .footerGrid{grid-template-columns:1fr 1fr;gap:20px}
  .footerBrand{grid-column:1/-1}
}
@media(max-width:440px){
  .priceLogin{display:none}
  .pricingHero h1{font-size:34px}
  .heroActions .priceBtn{width:100%}
  .mobileCompareGrid{grid-template-columns:1.25fr repeat(3,.9fr);font-size:11px}
  .footerGrid{grid-template-columns:1fr}
  .footerBrand{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}