/* ===== Daycare List USA - design tokens ===== */
:root{
  --teal: #00A6AC;
  --teal-dark: #00787D;
  --teal-light: #E3F6F6;
  --navy: #16305C;
  --slate: #3B4A60;
  --slate-light: #6B7A8F;
  --orange: #F7941D;
  --orange-dark: #D97B06;
  --bg: #FFFFFF;
  --bg-tint: #F5FAFA;
  --border: #E2E8ED;
  --text: #1C2733;
  --radius: 16px;
  --shadow: 0 12px 32px rgba(22,48,92,0.10);
  --shadow-sm: 0 4px 14px rgba(22,48,92,0.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Lato', sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Montserrat', sans-serif;
  margin:0 0 .5em;
  line-height:1.15;
  color:var(--navy);
}
p{line-height:1.65; margin:0 0 1em; color:var(--slate);}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{margin:0; padding:0; list-style:none;}

.section{padding:96px 24px;}
.section-inner{max-width:1180px; margin:0 auto;}
.section-head{max-width:640px; margin:0 auto 56px; text-align:center;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace;
  font-size:13px; letter-spacing:.04em;
  color:var(--teal-dark); background:var(--teal-light);
  padding:6px 14px; border-radius:999px; margin-bottom:16px;
}
.eyebrow-dark{ color:var(--navy); background:var(--bg-tint); }
.lead{font-size:18px;}
.light{color:#fff;}
p.light{color:#C9D6E3;}

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; border-radius:12px;
  font-weight:700; font-size:15px; font-family:'Lato',sans-serif;
  cursor:pointer; border:2px solid transparent; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 8px 20px rgba(247,148,29,.35); }
.btn-primary:hover{ background:var(--orange-dark); }
.btn-secondary{ background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(0,166,172,.3); }
.btn-secondary:hover{ background:var(--teal-dark); }
.btn-ghost{ background:transparent; border-color:var(--border); color:var(--navy); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal-dark); }
.btn-lg{ padding:16px 32px; font-size:16px; }

/* ===== NAV ===== */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo img{ height:34px; width:auto; }
.nav-links{ display:flex; gap:28px; flex:1; justify-content:center; }
.nav-links a{ font-size:14px; font-weight:600; color:var(--slate); }
.nav-links a:hover{ color:var(--teal-dark); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-cta .btn{ padding:10px 18px; font-size:14px; }
.cart-link{ font-size:18px; color:var(--navy); padding:6px; }
.cart-link:hover{ color:var(--orange); }
.nav-burger{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; font-size:20px; color:var(--slate);
  background:none; border:none; border-radius:10px; cursor:pointer;
}
.nav-burger:hover{ background:var(--bg-tint); }
.nav-mobile{ display:none; flex-direction:column; gap:4px; padding:12px 24px 20px; border-top:1px solid var(--border); }
.nav-mobile a{ padding:12px 4px; font-weight:600; color:var(--slate); border-bottom:1px solid var(--border); }
.nav-mobile .btn{ margin-top:10px; justify-content:center; }
.nav-mobile.open{ display:flex; }

@media(max-width:900px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}

/* ===== HERO ===== */
.hero{ position:relative; overflow:hidden; padding:72px 24px 90px; }
.hero-blobs{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.35; }
.blob-a{ width:460px; height:460px; background:var(--teal); top:-160px; right:-120px; }
.blob-b{ width:360px; height:360px; background:var(--orange); bottom:-140px; left:-100px; opacity:.2; }
.node-grid{
  position:absolute; inset:0;
  background-image:radial-gradient(var(--border) 1px, transparent 1px);
  background-size:28px 28px; opacity:.5;
  mask-image:radial-gradient(ellipse at 60% 20%, black, transparent 70%);
}
.hero-inner{
  position:relative; z-index:1; max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero-copy h1{ font-size:48px; margin-bottom:20px; }
.text-gradient{ background:linear-gradient(90deg, var(--teal), var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-sub{ font-size:17px; max-width:540px; }
.hero-actions{ display:flex; gap:14px; margin:28px 0 20px; flex-wrap:wrap; }
.hero-trustline{ font-size:14px; color:var(--slate-light); }
.hero-trustline i{ color:var(--teal); margin-right:4px; }

.hero-visual{ position:relative; }
.browser-window{ background:#fff; border-radius:14px; box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--border); }
.browser-bar{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg-tint); border-bottom:1px solid var(--border); }
.browser-dots{ display:flex; gap:6px; }
.browser-dots span{ width:9px; height:9px; border-radius:50%; background:#D4DCE3; }
.browser-url{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--slate-light); display:flex; align-items:center; gap:6px; }
.sheet{ padding:14px; }
.sheet-toolbar{ display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--slate-light); margin-bottom:8px; font-weight:700; }
.sheet-count{ font-family:'JetBrains Mono',monospace; color:var(--teal-dark); }
.sheet-grid{ display:flex; flex-direction:column; gap:2px; }
.sheet-row{ display:grid; grid-template-columns:22px 1.4fr 1.3fr .9fr .5fr .9fr; gap:6px; font-size:11.5px; padding:7px 6px; border-radius:6px; color:var(--slate); }
.sheet-row span:first-child{ color:var(--slate-light); }
.sheet-head{ font-weight:700; color:var(--navy); background:var(--bg-tint); }
.sheet-row.highlight{ background:var(--teal-light); }
.sheet-row.ghost{ color:var(--border); text-align:center; }
.float-card{
  position:absolute; background:#fff; border-radius:12px; box-shadow:var(--shadow-sm);
  padding:12px 16px; display:flex; align-items:center; gap:10px; border:1px solid var(--border);
}
.float-card i{ font-size:20px; color:var(--orange); }
.float-card strong{ display:block; font-family:'Montserrat',sans-serif; font-size:18px; color:var(--navy); }
.float-card span{ font-size:11px; color:var(--slate-light); }
.float-card-a{ top:-18px; left:-18px; }
.float-card-b{ bottom:-18px; right:-18px; }

@media(max-width:980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-copy h1{ font-size:36px; }
  .float-card{ display:none; }
}

/* ===== TRUST BAR ===== */
.trustbar{ background:var(--navy); padding:40px 24px; }
.trustbar-inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:20px; text-align:center; }
.trust-stat .counter, .trust-stat .counter-static{
  display:block; font-family:'Montserrat',sans-serif; font-weight:800; font-size:30px; color:#fff;
}
.trust-stat label{ font-size:12px; color:#9FB2C7; text-transform:uppercase; letter-spacing:.05em; }
@media(max-width:900px){ .trustbar-inner{ grid-template-columns:repeat(2,1fr); } }

/* ===== WHY ===== */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.why-copy h2{ font-size:34px; }
.why-timeline{ display:flex; flex-direction:column; gap:26px; }
.timeline-item{ display:flex; gap:16px; }
.timeline-icon{
  width:44px; height:44px; flex:none; border-radius:12px;
  background:var(--teal-light); color:var(--teal-dark);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.timeline-tag{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--orange-dark); font-weight:700; }
.timeline-item h4{ font-size:17px; margin:2px 0 4px; }
.timeline-item p{ font-size:14.5px; margin:0; }
@media(max-width:900px){ .why-grid{ grid-template-columns:1fr; } }

/* ===== COMPARE ===== */
.compare{ background:var(--bg-tint); }
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.compare-card{ background:#fff; border-radius:var(--radius); padding:32px; border:1px solid var(--border); }
.compare-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.compare-card-head i{ font-size:20px; }
.compare-bad .compare-card-head i{ color:#D15B4A; }
.compare-good{ border-color:var(--teal); box-shadow:var(--shadow-sm); }
.compare-good .compare-card-head i{ color:var(--teal); }
.compare-card ul li{ display:flex; align-items:center; gap:10px; padding:9px 0; font-size:14.5px; color:var(--slate); border-bottom:1px solid var(--border); }
.compare-card ul li:last-child{ border-bottom:none; }
.compare-bad ul li i{ color:#D15B4A; }
.compare-good ul li i{ color:var(--teal); }
@media(max-width:800px){ .compare-grid{ grid-template-columns:1fr; } }

/* ===== INCLUDED ===== */
.field-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.field-card{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:22px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.field-card i{ font-size:22px; color:var(--teal); }
.field-card span{ font-size:13.5px; font-weight:700; color:var(--navy); }
.field-card-more{ background:var(--teal-light); border-style:dashed; border-color:var(--teal); }
.field-card-more i, .field-card-more span{ color:var(--teal-dark); }
@media(max-width:800px){ .field-grid{ grid-template-columns:repeat(2,1fr); } }

/* ===== QUALITY ===== */
.quality{ background:linear-gradient(160deg, var(--navy), #0D1F3C); }
.dash-grid{ display:grid; grid-template-columns:1.2fr 1.2fr .9fr; gap:22px; }
.dash-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); padding:26px; }
.dash-card h4{ color:#fff; font-size:15px; margin-bottom:18px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label{ width:72px; font-size:12px; color:#AEC0D4; flex:none; }
.bar{ flex:1; background:rgba(255,255,255,.08); border-radius:8px; height:26px; overflow:hidden; }
.bar-fill{
  width:var(--w); height:100%; border-radius:8px;
  background:linear-gradient(90deg, var(--teal), var(--orange));
  display:flex; align-items:center; justify-content:flex-end; padding:0 8px;
  font-size:11px; font-weight:700; color:#fff; white-space:nowrap;
}
.ring-wrap{ position:relative; display:flex; align-items:center; justify-content:center; margin:6px 0 12px; }
.ring{ width:140px; height:140px; transform:rotate(-90deg); }
.ring-track{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:10; }
.ring-fill{
  fill:none; stroke:var(--orange); stroke-width:10; stroke-linecap:round;
  stroke-dasharray:326.7; stroke-dashoffset:calc(326.7 - (326.7 * var(--pct) / 100));
}
.ring-label{ position:absolute; text-align:center; }
.ring-label strong{ display:block; font-size:26px; color:#fff; font-family:'Montserrat',sans-serif; }
.ring-label span{ font-size:11px; color:#AEC0D4; }
.ring-note{ font-size:12.5px; color:#AEC0D4; margin:0; }
@media(max-width:980px){ .dash-grid{ grid-template-columns:1fr; } }

/* ===== SAMPLE ===== */
.sample{ padding:80px 24px; }
.sample-card{
  position:relative; max-width:720px; margin:0 auto; text-align:center;
  background:linear-gradient(135deg, var(--teal), var(--teal-dark));
  border-radius:24px; padding:56px 40px; color:#fff; overflow:hidden;
}
.sample-icon{ font-size:38px; margin-bottom:16px; opacity:.9; }
.sample-card h2{ color:#fff; font-size:28px; }
.sample-card p{ color:rgba(255,255,255,.85); }
.sample-card .btn-primary{ margin-top:10px; }
.sample-note{ display:block; margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.7); }
.node-bg{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.15) 1px, transparent 1px); background-size:22px 22px; opacity:.5; pointer-events: none;}

/* ===== PRICING ===== */
.pricing-tax-note{
  text-align:center; font-size:13px; color:var(--slate-light);
  background:var(--bg-tint); border:1px solid var(--border); border-radius:999px;
  display:inline-flex; align-items:center; gap:6px; padding:8px 18px;
  margin:0 auto 32px; max-width:100%;
}
.pricing-tax-note i{ color:var(--teal); }
.pricing-tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
.pricing-tab{
  padding:11px 20px; border-radius:999px; border:2px solid var(--border); background:#fff;
  font-weight:700; font-size:13.5px; color:var(--slate); cursor:pointer;
}
.pricing-tab.active{ border-color:var(--teal); color:var(--teal-dark); background:var(--teal-light); }
.pricing-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.pricing-grid[hidden]{ display:none; }
.sku-card{
  position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 20px; text-align:center; display:flex; flex-direction:column; gap:10px;
}
.sku-featured{ border-color:var(--orange); box-shadow:0 12px 30px rgba(247,148,29,.18); }
.sku-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--orange); color:#fff; font-size:11px; font-weight:700;
  padding:4px 12px; border-radius:999px;
}
.sku-card h3{ font-size:18px; margin-bottom:0; }
.sku-meta{ font-size:12px; color:var(--slate-light); min-height:32px; }
.sku-price{ font-family:'Montserrat',sans-serif; font-weight:800; font-size:30px; color:var(--navy); }
.sku-card .btn{ justify-content:center; width:100%; font-size:14px; padding:11px 16px; }
.pricing-footnote{ text-align:center; margin-top:28px; font-size:13.5px; color:var(--slate-light); }
.pricing-footnote i{ color:var(--teal); margin-right:4px; }
@media(max-width:980px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .pricing-grid{ grid-template-columns:1fr; } }

/* ===== FAQ ===== */
.faq-inner{ max-width:800px; }
.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:none; padding:20px 4px; font-size:16px; font-weight:700;
  color:var(--navy); cursor:pointer; text-align:left; font-family:'Lato',sans-serif;
}
.accordion-trigger i{ color:var(--teal); transition:transform .2s ease; }
.accordion-item.open .accordion-trigger i{ transform:rotate(180deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.accordion-item.open .accordion-panel{ max-height:240px; }
.accordion-panel p{ padding:0 4px 20px; font-size:14.5px; }

/* ===== FOOTER ===== */
.footer{ background:var(--navy); padding:48px 24px 32px; }
.footer-inner{ max-width:1180px; margin:0 auto; text-align:center; }
.footer-logo img{ height:30px; margin:0 auto 18px; filter:brightness(0) invert(1); }
.footer-crosssell{ color:#AEC0D4; font-size:13.5px; max-width:520px; margin:0 auto 20px; }
.footer-crosssell a{ color:var(--orange); font-weight:700; }
.footer-links{ display:flex; justify-content:center; gap:22px; margin-bottom:18px; }
.footer-links a{ color:#C9D6E3; font-size:13.5px; font-weight:600; }
.footer-links a:hover{ color:#fff; }
.footer-copy{ font-size:12px; color:#8095AE; }

/* ===== animation ===== */
.fade-up{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.in-view{ opacity:1; transform:translateY(0); }
.delay-1{ transition-delay:.08s; }
.delay-2{ transition-delay:.16s; }
.delay-3{ transition-delay:.24s; }
.delay-4{ transition-delay:.32s; }







/* ================= CUSTOM CART ================= */

.custom-cart-button {
    position: relative;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.cart-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 20px;
    background: #111;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 19px;
    text-align: center;
}

.cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 9998;
}

.cart-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: min(420px, 92vw);
    height: 100vh;
    background: #fff;
    box-shadow: -10px 0 40px rgba(0,0,0,.15);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.cart-drawer.active {
    transform: translateX(0);
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 18px;
    border-bottom: 1px solid #e8e8e8;
}

.cart-header h3 {
    margin: 0 0 4px;
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    font-weight: 800;
}

.cart-header span {
    font-size: 13px;
    color: #777;
}

.cart-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #f3f3f3;
    cursor: pointer;
    font-size: 17px;
}

.cart-close:hover {
    background: #e8e8e8;
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 10px 24px;
}

.cart-empty {
    text-align: center;
    padding: 70px 20px;
    color: #777;
}

.cart-empty i {
    font-size: 34px;
    margin-bottom: 15px;
    opacity: .35;
}

.cart-empty p {
    margin: 0 0 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #333;
}

.cart-empty span {
    font-size: 13px;
    line-height: 1.5;
}

.cart-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 17px 0;
    border-bottom: 1px solid #ededed;
}

.cart-item-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.cart-item-price {
    margin-top: 5px;
    font-size: 13px;
    color: #777;
}

.cart-remove {
    flex-shrink: 0;
    border: 0;
    background: none;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
}

.cart-remove:hover {
    color: #d33;
}

.cart-footer {
    padding: 20px 24px 24px;
    border-top: 1px solid #e8e8e8;
    background: #fff;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
}

.cart-total span {
    font-size: 15px;
    font-weight: 600;
}

.cart-total strong {
    font-size: 22px;
    font-weight: 800;
}

.cart-checkout {
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: 8px;
    background: #111;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.cart-checkout:hover:not(:disabled) {
    opacity: .88;
}

.cart-checkout:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.cart-continue {
    width: 100%;
    margin-top: 9px;
    padding: 12px 18px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #333;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cart-continue:hover {
    background: #f7f7f7;
}

.cart-secure {
    margin: 13px 0 0;
    text-align: center;
    color: #888;
    font-size: 11px;
}

.cart-secure i {
    margin-right: 4px;
}






/* ================= CART NAV ICON ================= */

.custom-cart-button {
    position: relative;
    border: 0;
    cursor: pointer;
    font: inherit;
    color: var(--teal);
    transition: color 0.2s ease, transform 0.2s ease;
}

.custom-cart-button:hover {
    color: var(--teal-dark);
    transform: translateY(-1px);
}

.cart-count {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 20px;
    background: var(--orange);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 19px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(247, 148, 29, 0.3);
}