/* ============================================================
   Dogamiya Calculator Stylesheet v3 — matches calculator HTML
   Every class used in dog-calorie-calculator.html has a rule.
   Breakpoints: 1024 / 768 / 480 / 360 px
   © 2026 Dogamiya.com
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}
body{font-family:'DM Sans',system-ui,-apple-system,sans-serif;background:#FDF6EE;color:#2C1A0E;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
ul,ol{list-style:none}
input,select,textarea{font-family:inherit}
h1,h2,h3,h4,h5,h6{font-family:'Fraunces',Georgia,serif;letter-spacing:-.02em}

:root{
  --amber:#E8793A;--amber-light:#F5A56E;--amber-dark:#C05E22;--amber-pale:rgba(232,121,58,.10);
  --cream:#FDF6EE;--cream-dark:#F4EAD8;--cream-mid:#EFE0C8;
  --bark:#2C1A0E;--bark-mid:#5C3D23;--bark-light:#8B6349;
  --sage:#6B8F6E;--sage-light:#A8C5AA;--sky:#5B8DB8;
  --white:#FFFFFF;--red:#D94040;
  --shadow-xs:0 1px 4px rgba(44,26,14,.06);
  --shadow-sm:0 2px 8px rgba(44,26,14,.08);
  --shadow-md:0 6px 24px rgba(44,26,14,.12);
  --shadow-lg:0 16px 48px rgba(44,26,14,.18);
  --radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:36px;
  --transition:.25s cubic-bezier(.4,0,.2,1);
  --max-w:1200px
}

/* ─── HEADER & NAV ─── */
.site-header{position:sticky;top:0;z-index:100;background:rgba(253,246,238,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(44,26,14,.07);transition:box-shadow var(--transition)}
.site-header.scrolled{box-shadow:var(--shadow-sm)}
.nav-inner{max-width:var(--max-w);margin:0 auto;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;gap:1rem}
.logo{font-family:'Fraunces',Georgia,serif;font-size:1.4rem;font-weight:700;color:var(--bark);letter-spacing:-.02em}
.logo span{color:var(--amber)}
.nav-links{display:flex;align-items:center;gap:.15rem}
.nav-links li{list-style:none}
.nav-links a{display:flex;align-items:center;gap:.25rem;padding:.5rem .9rem;font-size:.875rem;font-weight:500;color:var(--bark-mid);border-radius:50px;transition:all var(--transition)}
.nav-links a:hover,.nav-links a.active{background:var(--cream-dark);color:var(--bark)}
.nav-cta{background:var(--amber);color:var(--white);padding:.58rem 1.3rem;border-radius:50px;font-size:.875rem;font-weight:700;box-shadow:0 3px 12px rgba(232,121,58,.32);transition:all var(--transition);white-space:nowrap}
.nav-cta:hover{background:var(--amber-dark);transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,121,58,.42)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:6px;border-radius:8px;transition:background var(--transition)}
.hamburger:hover{background:var(--cream-dark)}
.hamburger span{display:block;width:22px;height:2px;background:var(--bark);border-radius:2px}

/* ─── MOBILE NAV ─── */
.mobile-nav{display:none;position:fixed;inset:0;background:rgba(44,26,14,.97);z-index:500;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;padding:2rem}
.mobile-nav.open{display:flex}
.mobile-nav a{color:rgba(255,255,255,.88);font-size:1.25rem;font-weight:600;font-family:'Fraunces',Georgia,serif;padding:.5rem 1.5rem;border-radius:50px;transition:all var(--transition)}
.mobile-nav a:hover{background:rgba(255,255,255,.1);color:var(--white)}
.mobile-nav-close{position:absolute;top:1.25rem;right:1.5rem;color:rgba(255,255,255,.7);font-size:1.5rem;background:none;border:none;cursor:pointer;line-height:1;transition:color var(--transition)}
.mobile-nav-close:hover{color:var(--white)}

/* ─── HERO ─── */
.hero{background:linear-gradient(135deg,#2C1A0E 0%,#5C3D23 55%,#7A4A2A 100%);color:#fff;padding:4rem 1.5rem 3.5rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 110%,rgba(232,121,58,.18),transparent);pointer-events:none}
.hero-paw{font-size:3rem;margin-bottom:.75rem;opacity:.9;position:relative;z-index:1}
.hero h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.85rem,5vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1.12;margin-bottom:.85rem;position:relative;z-index:1}
.hero h1 em{font-style:italic;color:var(--amber-light)}
.hero p{color:rgba(255,255,255,.82);max-width:620px;margin:0 auto 1.5rem;font-size:clamp(.95rem,2vw,1.08rem);line-height:1.7;position:relative;z-index:1}
.hero-badges{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.badge{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.92);padding:.35rem .85rem;border-radius:50px;font-size:.78rem;font-weight:600}
.badge-icon{font-size:.9rem}

/* ─── LAYOUT ─── */
main{background:var(--cream)}
.main-wrap{max-width:var(--max-w);margin:0 auto;padding:3rem 1.5rem 5rem;display:grid;grid-template-columns:1fr 320px;gap:2.5rem;align-items:start}

/* ─── CALCULATOR CARD ─── */
.calculator-card{background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden;border:1px solid rgba(44,26,14,.04)}
.calc-header{background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#fff;padding:1.75rem}
.calc-header h2{font-size:1.45rem;font-weight:700;margin-bottom:.3rem;letter-spacing:-.02em}
.calc-header p{font-size:.9rem;color:rgba(255,255,255,.88);line-height:1.5}
.calc-body{padding:1.75rem}

/* ─── PROGRESS STEPS ─── */
.progress-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:2rem;background:var(--cream-dark);padding:.35rem;border-radius:50px}
.step-btn{padding:.6rem .5rem;background:transparent;border:none;border-radius:50px;font-size:.78rem;font-weight:600;color:var(--bark-light);cursor:pointer;transition:all var(--transition);font-family:inherit;white-space:nowrap;text-align:center}
.step-btn.active{background:var(--white);color:var(--amber-dark);box-shadow:0 2px 6px rgba(44,26,14,.08)}
.step-btn.done{color:var(--sage)}
.step-btn:hover:not(.active){color:var(--bark)}

/* ─── FORM ─── */
.form-section{display:none;animation:fadeUp .4s ease}
.form-section.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.field-group{margin-bottom:1.5rem}
.field-label{display:flex;align-items:center;gap:.4rem;font-weight:700;font-size:.9rem;color:var(--bark);margin-bottom:.55rem}
.field-hint{font-size:.78rem;color:var(--bark-light);margin-top:.4rem;line-height:1.55}
.info-btn{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--cream-dark);color:var(--bark-light);font-size:.7rem;font-weight:700;cursor:help;transition:all var(--transition)}
.info-btn:hover{background:var(--amber);color:#fff}
.calc-input,.calc-select{width:100%;padding:.85rem 1rem;border:2px solid var(--cream-dark);border-radius:var(--radius-md);font-size:1rem;color:var(--bark);background:var(--cream);outline:none;transition:all var(--transition);font-family:inherit}
.calc-input:focus,.calc-select:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,121,58,.12);background:#fff}

/* ─── WEIGHT INPUT ─── */
.weight-input-wrap{display:flex;gap:.5rem;align-items:stretch}
.weight-input-wrap input{flex:1;min-width:0;padding:.85rem 1rem;border:2px solid var(--cream-dark);border-radius:var(--radius-md);font-size:1rem;color:var(--bark);background:var(--cream);outline:none;transition:all var(--transition);font-family:inherit}
.weight-input-wrap input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,121,58,.12);background:#fff}
.unit-toggle{display:flex;background:var(--cream-dark);border-radius:var(--radius-md);padding:3px;flex-shrink:0}
.unit-btn{padding:.4rem .95rem;background:transparent;border:none;border-radius:calc(var(--radius-md) - 3px);font-size:.85rem;font-weight:700;color:var(--bark-light);cursor:pointer;transition:all var(--transition);font-family:inherit}
.unit-btn.active{background:var(--white);color:var(--amber-dark);box-shadow:0 1px 4px rgba(44,26,14,.08)}

/* ─── BCS (Body Condition Score) GRID ─── */
.bcs-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:.4rem;margin-bottom:.85rem}
.bcs-btn{aspect-ratio:1/1;border-radius:var(--radius-sm);border:2px solid var(--cream-dark);background:var(--cream);font-size:1rem;font-weight:700;color:var(--bark-mid);cursor:pointer;transition:all var(--transition);font-family:'Fraunces',Georgia,serif;display:flex;align-items:center;justify-content:center;min-height:42px}
.bcs-btn:hover{border-color:rgba(232,121,58,.35);background:#fff}
.bcs-btn.selected{color:#fff;transform:scale(1.08);border-color:transparent;box-shadow:0 4px 12px rgba(44,26,14,.18)}
.bcs-btn.bcs-underweight.selected{background:var(--sky)}
.bcs-btn.bcs-ideal.selected{background:var(--sage)}
.bcs-btn.bcs-overweight.selected{background:var(--amber)}
.bcs-btn.bcs-obese.selected{background:var(--amber-dark)}
.bcs-legend{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin-bottom:.75rem;font-size:.74rem;color:var(--bark-mid)}
.bcs-legend-item{display:flex;align-items:center;gap:.35rem}
.bcs-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.bcs-desc{padding:.85rem 1rem;background:var(--cream);border-left:4px solid var(--amber);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.85rem;color:var(--bark-mid);line-height:1.6;min-height:68px;transition:border-color var(--transition)}

/* ─── TOGGLE PILLS ─── */
.toggle-pills{display:flex;gap:.5rem;flex-wrap:wrap}
.pill-btn{flex:1;min-width:max-content;padding:.7rem 1rem;background:var(--cream);border:2px solid var(--cream-dark);border-radius:50px;font-size:.85rem;font-weight:600;color:var(--bark-mid);cursor:pointer;transition:all var(--transition);font-family:inherit;white-space:nowrap}
.pill-btn:hover{border-color:rgba(232,121,58,.4)}
.pill-btn.selected{background:var(--amber-pale);border-color:var(--amber);color:var(--amber-dark)}

/* ─── LIFESTYLE GRID ─── */
.lifestyle-grid{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:.65rem}
.lifestyle-btn{background:var(--cream);border:2px solid var(--cream-dark);border-radius:var(--radius-md);padding:1rem .85rem;cursor:pointer;transition:all var(--transition);text-align:center;display:flex;flex-direction:column;align-items:center;gap:.35rem}
.lifestyle-btn:hover{border-color:rgba(232,121,58,.4);background:#fff}
.lifestyle-btn.selected{border-color:var(--amber);background:var(--amber-pale);box-shadow:0 0 0 2px rgba(232,121,58,.15)}
.lifestyle-icon{font-size:1.5rem;line-height:1}
.lifestyle-label{font-size:.82rem;font-weight:700;color:var(--bark);line-height:1.2}
.lifestyle-factor{font-size:.72rem;color:var(--bark-light);font-weight:600}
.lifestyle-btn.selected .lifestyle-factor{color:var(--amber-dark)}

/* ─── FOOD ROW ─── */
.food-row{display:grid;grid-template-columns:1.2fr 1fr;gap:.55rem}
.input-wrap,.select-wrap{position:relative}
.select-wrap::after{content:'▾';position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--bark-light);pointer-events:none;font-size:.8rem}

/* ─── FORM NAV ─── */
.form-nav{display:flex;gap:.75rem;margin-top:2rem;align-items:center}
.btn-back,.btn-next,.btn-calculate{padding:.9rem 1.5rem;border-radius:50px;font-size:.92rem;font-weight:700;cursor:pointer;transition:all var(--transition);font-family:inherit;border:none;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap}
.btn-back{background:var(--cream-dark);color:var(--bark-mid);flex-shrink:0}
.btn-back:hover{background:var(--cream-mid);color:var(--bark)}
.btn-next{background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#fff;margin-left:auto;box-shadow:0 3px 12px rgba(232,121,58,.32)}
.btn-next:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(232,121,58,.42)}
.btn-calculate{background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#fff;margin-left:auto;box-shadow:0 4px 16px rgba(232,121,58,.38);padding:1rem 1.75rem;font-size:1rem}
.btn-calculate:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(232,121,58,.5)}

/* ─── RESULTS PANEL ─── */
.results-panel{display:none}
.results-panel.visible{display:block;animation:fadeUp .5s ease}
.result-hero-card{background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#fff;border-radius:var(--radius-xl);padding:2rem 1.75rem;text-align:center;box-shadow:var(--shadow-md);margin-bottom:1.25rem}
.result-dog-name{font-size:.95rem;opacity:.9;margin-bottom:.5rem;font-weight:600}
.result-kcal-big{font-family:'Fraunces',Georgia,serif;font-size:clamp(3.5rem,10vw,5rem);font-weight:700;line-height:1;letter-spacing:-.03em;margin-bottom:.2rem}
.result-kcal-label{font-size:.88rem;opacity:.88}
.result-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:1.25rem}
.result-card{background:var(--white);border-radius:var(--radius-md);padding:1rem .75rem;text-align:center;box-shadow:var(--shadow-xs);border:1px solid var(--cream-dark)}
.result-card-icon{font-size:1.4rem;margin-bottom:.3rem}
.result-card-value{font-family:'Fraunces',Georgia,serif;font-size:1.05rem;font-weight:700;color:var(--bark);line-height:1.15;margin-bottom:.15rem}
.result-card-label{font-size:.68rem;color:var(--bark-light);font-weight:600;text-transform:uppercase;letter-spacing:.04em}

/* ─── WEIGHT VISUAL ─── */
.weight-visual{background:var(--white);border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--shadow-xs);margin-bottom:1.25rem;border:1px solid var(--cream-dark)}
.weight-visual h3{font-size:1rem;font-weight:700;color:var(--bark);margin-bottom:1rem}
.weight-bar-wrap{margin-bottom:.85rem}
.weight-bar-label{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--bark-mid);margin-bottom:.35rem;font-weight:600}
.weight-bar-track{height:10px;background:var(--cream-dark);border-radius:50px;overflow:hidden}
.weight-bar-fill{height:100%;border-radius:50px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.bcs-status-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem 1rem;border-radius:50px;font-size:.8rem;font-weight:700;margin-top:.75rem}

/* ─── FEEDING RECOMMENDATION ─── */
.feeding-recommendation{background:linear-gradient(135deg,#f9fbf9,var(--white));border:2px solid rgba(107,143,110,.25);border-radius:var(--radius-lg);padding:1.4rem;margin-bottom:1.25rem}
.feeding-recommendation h3{font-size:1rem;font-weight:700;color:var(--bark);margin-bottom:.6rem}
.feeding-amount{font-family:'Fraunces',Georgia,serif;font-size:2.2rem;font-weight:700;color:var(--sage);line-height:1.1;letter-spacing:-.02em}
.feeding-amount-label{font-size:.82rem;color:var(--bark-mid);margin-top:.2rem}
.treat-row{display:flex;align-items:center;gap:.85rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--cream-dark)}
.treat-icon{font-size:1.5rem;width:42px;height:42px;background:var(--amber-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.treat-info{flex:1;min-width:0}
.treat-kcal{font-family:'Fraunces',Georgia,serif;font-size:1.15rem;font-weight:700;color:var(--amber-dark)}
.treat-label{font-size:.76rem;color:var(--bark-light);margin-top:.1rem}

/* ─── DISCLAIMER + RESULT BUTTONS ─── */
.disclaimer-box{background:rgba(91,141,184,.07);border:1.5px solid rgba(91,141,184,.22);border-radius:var(--radius-md);padding:1rem 1.25rem;font-size:.83rem;color:var(--bark-mid);line-height:1.65;margin-bottom:1rem}
.disclaimer-box strong{color:var(--sky)}
.btn-print,.btn-recalculate{width:100%;padding:.85rem;border-radius:50px;font-size:.9rem;font-weight:700;cursor:pointer;transition:all var(--transition);font-family:inherit;border:2px solid var(--cream-dark);background:var(--white);color:var(--bark-mid);margin-bottom:.55rem;display:flex;align-items:center;justify-content:center;gap:.4rem}
.btn-print:hover,.btn-recalculate:hover{border-color:var(--amber);color:var(--amber);background:var(--amber-pale)}

/* ─── SIDEBAR ─── */
.sidebar{display:flex;flex-direction:column;gap:1.1rem;position:sticky;top:88px}
.sidebar-card{background:var(--white);border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--shadow-sm);border:1px solid rgba(44,26,14,.04)}
.sidebar-card h3{font-size:1rem;font-weight:700;color:var(--bark);margin-bottom:.95rem;letter-spacing:-.01em}

/* ─── BCS VISUAL GUIDE (sidebar) ─── */
.bcs-visual-guide{display:flex;flex-direction:column;gap:.65rem}
.bcs-row{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .75rem;background:var(--cream);border-radius:var(--radius-sm)}
.bcs-score-badge{flex-shrink:0;min-width:48px;padding:.35rem .5rem;border-radius:var(--radius-sm);color:#fff;font-size:.76rem;font-weight:700;text-align:center;line-height:1.2}
.bcs-row-info{flex:1;min-width:0}
.bcs-row-title{font-size:.85rem;font-weight:700;color:var(--bark);margin-bottom:.15rem}
.bcs-row-desc{font-size:.72rem;color:var(--bark-light);line-height:1.45}

/* ─── FORMULA BOX ─── */
.formula-box{background:var(--cream);border-radius:var(--radius-md);padding:1rem 1.1rem}
.formula{font-family:'DM Sans',monospace;font-size:.92rem;font-weight:700;color:var(--bark);background:var(--white);padding:.65rem .85rem;border-radius:var(--radius-sm);border:1px solid var(--cream-dark);text-align:center;letter-spacing:-.01em}
.formula-note{font-size:.75rem;color:var(--bark-light);line-height:1.55;margin-top:.65rem}

/* ─── TIP LIST ─── */
.tip-list{display:flex;flex-direction:column;gap:.85rem}
.tip-item{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;color:var(--bark-mid);line-height:1.55}
.tip-item strong{color:var(--bark);font-weight:700}
.tip-icon{font-size:1.05rem;flex-shrink:0;width:30px;height:30px;background:var(--amber-pale);border-radius:50%;display:flex;align-items:center;justify-content:center}
.tip-text{flex:1;min-width:0}

/* ─── STATS STRIP ─── */
.stats-strip{background:var(--bark);color:#fff;padding:2.5rem 1.5rem;border-radius:var(--radius-xl);max-width:calc(var(--max-w) - 3rem);margin:0 auto}
.stats-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stat-num{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:700;color:var(--amber-light);letter-spacing:-.02em;line-height:1.1;margin-bottom:.4rem}
.stat-label{font-size:.8rem;color:rgba(255,255,255,.68);line-height:1.5}

/* ─── CONTENT SECTIONS ─── */
.content-section{max-width:var(--max-w);margin:0 auto;padding:3rem 1.5rem}
.section-title{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.55rem,3.5vw,2.3rem);font-weight:700;color:var(--bark);letter-spacing:-.03em;line-height:1.2;margin-bottom:.6rem}
.section-title em{font-style:italic;color:var(--amber)}
.section-lead{font-size:.98rem;color:var(--bark-mid);line-height:1.78;max-width:780px;margin-bottom:2rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.content-card{background:var(--white);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-xs);border:1px solid var(--cream-dark)}
.content-card h3{font-family:'Fraunces',Georgia,serif;font-size:1.05rem;font-weight:700;color:var(--bark);margin-bottom:.5rem}
.content-card p{font-size:.88rem;color:var(--bark-mid);line-height:1.72}

/* ─── LIFESTYLE TABLE ─── */
.lifestyle-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:var(--white);margin:1.5rem 0}
.lifestyle-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:540px}
.lifestyle-table th{background:var(--bark);color:#fff;padding:.95rem 1.1rem;font-size:.78rem;font-weight:700;text-align:left;letter-spacing:.04em;text-transform:uppercase}
.lifestyle-table td{padding:.85rem 1.1rem;color:var(--bark-mid);border-bottom:1px solid var(--cream-dark)}
.lifestyle-table tr:last-child td{border-bottom:none}
.lifestyle-table tr:hover td{background:var(--cream)}
.factor-chip{display:inline-block;background:var(--amber-pale);color:var(--amber-dark);padding:.22rem .65rem;border-radius:50px;font-weight:700;font-size:.82rem}

/* ─── FAQ ─── */
.faq-list{display:flex;flex-direction:column;gap:.6rem;max-width:860px}
.faq-item{background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);overflow:hidden;border:1px solid var(--cream-dark)}
.faq-question{width:100%;padding:1.1rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;font-weight:700;font-size:.94rem;color:var(--bark);cursor:pointer;background:none;border:none;font-family:inherit;transition:background var(--transition)}
.faq-question:hover{background:var(--cream)}
.faq-arrow{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--cream-dark);display:flex;align-items:center;justify-content:center;font-size:.78rem;color:var(--bark-light);transition:transform var(--transition),background var(--transition)}
.faq-item.open .faq-arrow{transform:rotate(180deg);background:var(--amber);color:#fff}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1)}
.faq-item.open .faq-answer{max-height:800px}
.faq-answer-inner{padding:.15rem 1.4rem 1.2rem;font-size:.88rem;color:var(--bark-mid);line-height:1.78}

/* ─── CTA BANNER ─── */
.cta-banner{background:linear-gradient(135deg,var(--amber) 0%,var(--amber-dark) 100%);border-radius:var(--radius-xl);padding:3.5rem 2rem;text-align:center;color:#fff}
.cta-banner h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.45rem,3vw,2rem);font-weight:700;margin-bottom:.75rem;letter-spacing:-.02em}
.cta-banner p{opacity:.92;max-width:520px;margin:0 auto 1.75rem;font-size:.95rem;line-height:1.6}
.btn-cta-white{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--white);color:var(--amber-dark);padding:.95rem 2rem;border-radius:50px;font-size:.95rem;font-weight:700;transition:all var(--transition);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.btn-cta-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* ─── TOOLTIP ─── */
.tooltip{position:fixed;background:var(--bark);color:#fff;padding:.55rem .85rem;border-radius:var(--radius-sm);font-size:.78rem;line-height:1.5;max-width:260px;pointer-events:none;opacity:0;transition:opacity var(--transition);z-index:1000;box-shadow:var(--shadow-md)}
.tooltip.visible{opacity:1}

/* ─── FOOTER ─── */
.site-footer{background:var(--bark);color:rgba(255,255,255,.65);padding:4rem 1.5rem 0;margin-top:3rem}
.footer-inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-brand p{font-size:.82rem;line-height:1.7;margin-top:.75rem;color:rgba(255,255,255,.5)}
.footer-col h4{color:#fff;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.footer-col ul{display:flex;flex-direction:column;gap:.4rem}
.footer-col a{font-size:.82rem;color:rgba(255,255,255,.5);transition:color var(--transition)}
.footer-col a:hover{color:var(--amber-light)}
.footer-bottom{max-width:var(--max-w);margin:0 auto;padding:1.5rem 0 2rem;display:flex;justify-content:space-between;align-items:center;font-size:.74rem;flex-wrap:wrap;gap:.5rem;color:rgba(255,255,255,.32)}

/* ─── SCROLL TOP ─── */
.scroll-top{position:fixed;bottom:1.75rem;right:1.75rem;width:46px;height:46px;background:var(--amber);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.15rem;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;z-index:50;border:none;cursor:pointer;transition:all var(--transition)}
.scroll-top.visible{opacity:1;pointer-events:all}
.scroll-top:hover{transform:translateY(-3px);background:var(--amber-dark)}

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

/* ≤1024px — tablet & small laptops */
@media (max-width:1024px){
  .main-wrap{grid-template-columns:1fr;gap:1.75rem;padding:2.5rem 1.25rem 4rem}
  .sidebar{position:static}
  .result-cards-grid{grid-template-columns:repeat(4,1fr)}
  .stats-inner{grid-template-columns:repeat(4,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .stats-strip{max-width:calc(100% - 2rem)}
}

/* ≤768px — mobile landscape & large phones */
@media (max-width:768px){
  .nav-links,.nav-cta{display:none!important}
  .hamburger{display:flex!important}
  .hero{padding:2.75rem 1.25rem 2.5rem}
  .hero-paw{font-size:2.4rem}
  .main-wrap{padding:1.75rem 1rem 3rem;gap:1.5rem}
  .calc-header{padding:1.4rem}
  .calc-header h2{font-size:1.22rem}
  .calc-body{padding:1.3rem}
  .progress-steps{gap:.22rem;padding:.28rem}
  .step-btn{font-size:.7rem;padding:.5rem .25rem}
  .bcs-grid{gap:.3rem}
  .bcs-btn{font-size:.9rem;min-height:38px}
  .bcs-legend{font-size:.72rem;gap:.5rem .85rem}
  .result-kcal-big{font-size:clamp(2.75rem,12vw,3.5rem)}
  .result-cards-grid{grid-template-columns:1fr 1fr;gap:.55rem}
  .feeding-amount{font-size:1.75rem}
  .lifestyle-grid{grid-template-columns:1fr 1fr}
  .stats-strip{padding:2rem 1.25rem;max-width:calc(100% - 1.5rem)}
  .stats-inner{grid-template-columns:1fr 1fr;gap:1.4rem}
  .content-section{padding:2.5rem 1.25rem}
  .footer-inner{grid-template-columns:1fr 1fr}
  .form-nav{flex-direction:column-reverse;gap:.55rem}
  .btn-back,.btn-next,.btn-calculate{width:100%;margin-left:0}
  .food-row{grid-template-columns:1fr}
  .faq-question{font-size:.86rem;padding:1rem 1.2rem}
  .faq-answer-inner{font-size:.84rem;padding:.1rem 1.2rem 1.1rem}
  .lifestyle-table{min-width:480px}
}

/* ≤480px — standard phones */
@media (max-width:480px){
  .nav-inner{padding:0 1rem;height:60px;gap:.5rem}
  .logo{font-size:1.2rem}
  .hero{padding:2.25rem 1rem 2rem}
  .hero h1{font-size:1.55rem;line-height:1.15}
  .hero p{font-size:.87rem}
  .hero-badges{gap:.4rem}
  .badge{font-size:.72rem;padding:.3rem .7rem}
  .main-wrap{padding:1.25rem .85rem 2.5rem}
  .calc-header{padding:1.15rem}
  .calc-header h2{font-size:1.08rem}
  .calc-header p{font-size:.82rem}
  .calc-body{padding:1.1rem}
  .progress-steps{grid-template-columns:repeat(4,1fr);gap:.18rem;padding:.22rem}
  .step-btn{font-size:.62rem;padding:.42rem .18rem}
  .bcs-grid{gap:.22rem}
  .bcs-btn{font-size:.8rem;min-height:32px;border-width:1.5px}
  .bcs-legend{font-size:.68rem;gap:.4rem .7rem}
  .bcs-desc{font-size:.8rem;padding:.7rem .85rem;min-height:60px}
  .lifestyle-grid{grid-template-columns:1fr 1fr;gap:.45rem}
  .lifestyle-btn{padding:.72rem .45rem}
  .lifestyle-icon{font-size:1.3rem}
  .lifestyle-label{font-size:.72rem}
  .lifestyle-factor{font-size:.66rem}
  .calc-input,.calc-select{font-size:.92rem;padding:.75rem .85rem}
  .weight-input-wrap{flex-wrap:wrap;gap:.45rem}
  .weight-input-wrap input{flex:1 1 100%}
  .unit-toggle{align-self:stretch;width:100%;justify-content:center}
  .unit-btn{flex:1}
  .pill-btn{flex:1 1 100%;padding:.65rem .8rem;font-size:.82rem}
  .result-hero-card{padding:1.5rem 1.15rem;border-radius:var(--radius-lg)}
  .result-kcal-big{font-size:2.5rem}
  .result-dog-name{font-size:.85rem}
  .result-cards-grid{grid-template-columns:1fr 1fr;gap:.45rem}
  .result-card{padding:.85rem .55rem}
  .result-card-value{font-size:.95rem}
  .result-card-icon{font-size:1.2rem}
  .feeding-amount{font-size:1.5rem}
  .weight-visual{padding:1.1rem}
  .feeding-recommendation{padding:1.15rem}
  .stats-strip{padding:1.75rem 1rem;border-radius:var(--radius-lg);max-width:calc(100% - 1rem)}
  .stats-inner{grid-template-columns:1fr 1fr;gap:1.1rem}
  .stat-num{font-size:1.55rem}
  .stat-label{font-size:.74rem}
  .content-section{padding:2rem 1rem}
  .section-title{font-size:1.4rem}
  .section-lead{font-size:.9rem}
  .content-card{padding:1.2rem}
  .content-card h3{font-size:.98rem}
  .content-card p{font-size:.84rem}
  .cta-banner{padding:2.25rem 1.1rem;border-radius:var(--radius-lg)}
  .footer-inner{grid-template-columns:1fr 1fr;gap:1.5rem}
  .footer-bottom{flex-direction:column;text-align:center;font-size:.7rem}
  .sidebar-card{padding:1.15rem}
  .btn-back,.btn-next,.btn-calculate{padding:.82rem 1.1rem;font-size:.88rem}
  .btn-calculate{font-size:.95rem;padding:.95rem 1.2rem}
  .tooltip{max-width:220px;font-size:.72rem}
}

/* ≤360px — small phones */
@media (max-width:360px){
  .nav-inner{padding:0 .85rem}
  .hero{padding:1.85rem .85rem 1.65rem}
  .hero h1{font-size:1.32rem}
  .hero p{font-size:.82rem}
  .main-wrap{padding:1rem .7rem 2rem}
  .calc-body{padding:.9rem}
  .progress-steps{padding:.18rem}
  .step-btn{font-size:.56rem;padding:.4rem .12rem}
  .bcs-grid{gap:.18rem}
  .bcs-btn{font-size:.72rem;min-height:28px}
  .lifestyle-grid{grid-template-columns:1fr 1fr;gap:.35rem}
  .lifestyle-btn{padding:.6rem .35rem}
  .stats-inner{grid-template-columns:1fr 1fr;gap:.85rem}
  .stat-num{font-size:1.4rem}
  .footer-inner{grid-template-columns:1fr}
  .result-kcal-big{font-size:2.15rem}
  .feeding-amount{font-size:1.35rem}
  .section-title{font-size:1.25rem}
}

/* ─── TOUCH: disable hover transforms ─── */
@media (hover:none){
  .btn-next:hover,.btn-calculate:hover,.btn-cta-white:hover,.nav-cta:hover,.scroll-top:hover,.result-card:hover{transform:none}
  .lifestyle-btn:hover,.pill-btn:hover,.bcs-btn:hover{transform:none;background:var(--cream)}
  .bcs-btn.selected:hover{transform:scale(1.08)}
}

/* ─── PRINT ─── */
@media print{
  .site-header,.site-footer,.scroll-top,.mobile-nav,.hero,.sidebar,.stats-strip,.content-section,.cta-banner,.btn-print,.btn-recalculate,.form-nav,.progress-steps{display:none!important}
  body{background:#fff;color:#000}
  .main-wrap{display:block;padding:0}
  .results-panel{display:block!important;padding:1rem}
  .result-hero-card{background:#f4f4f4!important;color:#000!important;box-shadow:none;border:2px solid #333;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .result-hero-card *{color:#000!important}
}