/* TDEE Calculator landing — scoped under .tdee */
/* sticky site header clearance for in-page anchors */
.tdee { scroll-margin-top: 96px; }
.tdee{
  --indigo:#4A55C8; --night:#181B45; --coral:#FF6B66; --mist:#EEF0FB; --mint:#2FB487;
  --ink:#232648; --muted:#5E6288; --line:#DADDF3; --paper:#fff;
  --display:'Sora','Lato',system-ui,sans-serif; --body:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.tdee,.tdee *,.tdee *::before,.tdee *::after{box-sizing:border-box}
.tdee{margin:0;font:400 17px/1.6 var(--body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
.tdee img{max-width:100%;display:block}
.tdee a{color:var(--indigo)}
.tdee h1,.tdee h2,.tdee h3{font-family:var(--display);line-height:1.12;margin:0;color:var(--night);letter-spacing:-.02em}
.tdee h1{font-size:clamp(2.3rem,5.2vw,3.9rem);font-weight:800}
.tdee h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700}
.tdee h3{font-size:1.25rem;font-weight:700}
.tdee p{margin:0}
.tdee .wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.tdee .narrow{width:min(760px,100% - 40px)}
.tdee .skip{position:absolute;left:-999px}.tdee .skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99}
.tdee :focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}

/* buttons */
.tdee .btn{display:inline-flex;align-items:center;gap:10px;background:var(--coral);color:#fff;text-decoration:none;font:700 1rem var(--body);padding:14px 24px;border-radius:999px;border:2px solid var(--coral);transition:transform .15s,box-shadow .15s}
.tdee .btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(255,107,102,.7)}
.tdee .btn-sm{padding:9px 18px;font-size:.92rem}
.tdee .btn-ghost{background:transparent;color:var(--indigo);border-color:var(--indigo)}
.tdee .btn-ghost:hover{box-shadow:none;background:var(--mist)}
.tdee .btn-light{background:#fff;color:var(--night);border-color:#fff}

/* hero
   Override site components.css `.hero` (max-width: var(--tc-max); margin-inline: auto)
   so the indigo band is full-bleed on large screens. */
.tdee .hero{
  background:linear-gradient(160deg,#5B67DB 0%,var(--indigo) 45%,#3A3FA8 100%);
  color:#fff;
  overflow:hidden;
  position:relative;
  max-width:none;
  width:100%;
  margin-inline:0;
  padding:20px 0 0;
}
.tdee .hero::after{content:"";position:absolute;inset:auto -10% -140px -10%;height:220px;background:var(--paper);border-radius:50% 50% 0 0/100% 100% 0 0}
.tdee .hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:72px 0 150px;position:relative;z-index:1}
.tdee .hero h1{color:#fff;max-width:14ch}
.tdee .pill{display:inline-block;background:rgba(255,255,255,.16);padding:6px 14px;border-radius:999px;font-weight:700;font-size:.88rem;margin-bottom:20px}
.tdee .lead{font-size:1.2rem;max-width:46ch;margin:22px 0 32px;color:#E8EAFF}
.tdee .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.tdee .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.tdee .hero .btn-ghost:hover{background:rgba(255,255,255,.12)}
.tdee .hero-phone{position:relative;justify-self:center}

/* phone frame */
.tdee .phone{position:relative;width:260px;border:8px solid #14173A;border-radius:36px;background:#14173A;overflow:hidden;box-shadow:0 30px 60px -20px rgba(10,12,50,.55)}
.tdee .phone img{width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top;background:#fff}
.tdee #heroPhone{width:270px}
.tdee #heroPhone img{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .6s}
.tdee #heroPhone img.on{opacity:1}
.tdee #heroPhone::before{content:"";display:block;aspect-ratio:9/19}
.tdee .phone.sm{width:100%;max-width:190px;border-width:6px;border-radius:28px;margin:0 auto}
.tdee .float{position:absolute;background:#fff;color:var(--night);border-radius:16px;padding:12px 16px;box-shadow:0 18px 40px -14px rgba(10,12,50,.5);display:flex;flex-direction:column;line-height:1.2}
.tdee .float b{font:800 1.25rem var(--display)}.float span{font-size:.8rem;color:var(--muted)}
.tdee .f1{left:-70px;top:22%}.f2{right:-50px;bottom:16%}

/* calculator */
.tdee .calc{padding:30px 0 100px}
.tdee .calc-head{margin-bottom:36px;max-width:56ch}
.tdee .calc-head p{color:var(--muted);margin-top:10px}
.tdee .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.tdee .card{background:var(--mist);border-radius:28px;padding:30px;display:grid;gap:18px;align-content:start}
.tdee .row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px}
.tdee .card label{display:grid;gap:6px;font-weight:700;font-size:.9rem;color:var(--night)}
.tdee input[type=number], .tdee select{font:400 1rem var(--body);padding:13px 14px;border:1.5px solid transparent;border-radius:14px;background:#fff;color:var(--ink);width:100%}
.tdee input:focus, .tdee select:focus{outline:none;border-color:var(--indigo)}
.tdee .seg{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tdee .seg label{position:relative}
.tdee .seg input{position:absolute;opacity:0;inset:0}
.tdee .seg span{display:block;text-align:center;padding:14px;border-radius:14px;background:#fff;border:2px solid transparent;cursor:pointer;font-weight:700}
.tdee .seg input:checked+span{border-color:var(--coral);background:#FFF3F2;color:var(--coral)}
.tdee .seg input:focus-visible+span{outline:3px solid var(--coral);outline-offset:2px}
.tdee .result{background:var(--night);color:#fff;border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:14px}
.tdee .r-label{color:#AEB3EE;font-weight:700}
.tdee .r-big{font:800 clamp(3rem,7vw,4.6rem)/1 var(--display);letter-spacing:-.03em}
.tdee .r-big small{font:700 1rem var(--body);color:#AEB3EE;letter-spacing:0}
.tdee .goals{display:flex;gap:8px;flex-wrap:wrap}
.tdee .goals button{font:700 .9rem var(--body);padding:9px 16px;border-radius:999px;border:1.5px solid #4A4F9A;background:transparent;color:#fff;cursor:pointer}
.tdee .goals button.on{background:var(--coral);border-color:var(--coral)}
.tdee .target strong{font:800 1.4rem var(--display)}
.tdee .macros{display:grid;gap:10px;margin-top:4px}
.tdee .macros div{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:12px;font-size:.92rem}
.tdee .macros i{height:8px;border-radius:99px;background:#2B2F6B;position:relative;grid-column:2;grid-row:1}
.tdee .macros i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--c);border-radius:99px}
.tdee .macros span{grid-column:1;grid-row:1;color:#C5C9F5}.macros b{grid-column:3;grid-row:1}
.tdee .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 0}
.tdee .metrics div{background:#23275C;border-radius:14px;padding:12px}
.tdee .metrics dt{font-size:.78rem;color:#AEB3EE}.metrics dd{margin:2px 0 0;font:700 1.15rem var(--display)}
.tdee .note{font-size:.8rem;color:#8E94D6;margin-top:auto}

/* how */
.tdee .how{background:var(--mist);padding:90px 0}
.tdee .sub{color:var(--muted);max-width:56ch;margin:12px 0 0}
.tdee .steps{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.tdee .steps li{text-align:center}
.tdee .steps h3{margin:20px 0 6px;font-size:1.05rem}
.tdee .steps p{font-size:.92rem;color:var(--muted)}

/* features */
.tdee .features{padding:100px 0 40px}
.tdee .feat{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:90px}
.tdee .features>.wrap>.sub+.feat{margin-top:70px}
.tdee .feat.flip .feat-copy{order:2}
.tdee .feat-copy p{color:var(--muted);margin:14px 0 20px;max-width:46ch}
.tdee .ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.tdee .ticks li{padding-left:30px;position:relative;font-weight:700}
.tdee .ticks li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.tdee .defs{display:grid;gap:12px;margin:0}
.tdee .defs div{border-left:4px solid var(--coral);padding:2px 0 2px 14px}
.tdee .defs dt{font:700 1rem var(--display);color:var(--night)}.defs dd{margin:0;color:var(--muted);font-size:.95rem}
.tdee .feat-shots{display:flex;gap:24px;justify-content:center;align-items:flex-start}
.tdee .feat-shots .lift{margin-top:60px}
.tdee .feat-shots .phone{width:min(230px,44%)}
.tdee .feat-shots.single .phone{width:240px}

/* proof */
.tdee .proof{padding:70px 0}
.tdee .proof-in{background:var(--mist);border-radius:32px;padding:44px 54px}
.tdee blockquote{margin:0;font:600 1.25rem/1.5 var(--display);color:var(--night);letter-spacing:-.01em}
.tdee figcaption{margin-top:12px;color:var(--muted);font-size:.9rem}
.tdee figure{margin:0}

/* faq */
.tdee .faq{padding:60px 0 100px}
.tdee .faq h2{margin-bottom:26px}
.tdee details{border-bottom:1px solid var(--line);padding:18px 0}
.tdee summary{cursor:pointer;font:700 1.1rem var(--display);color:var(--night);list-style:none;display:flex;justify-content:space-between;gap:16px}
.tdee summary::-webkit-details-marker{display:none}
.tdee summary::after{content:"+";color:var(--coral);font-size:1.5rem;line-height:1;transition:transform .2s}
.tdee details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);margin-top:10px}

/* final + footer */
.tdee .final{background:var(--indigo);color:#fff;text-align:center;padding:80px 0}
.tdee .final-in{display:grid;justify-items:center;gap:22px}
.tdee .final h2{color:#fff;max-width:18ch}
.tdee .final img{border-radius:20px}

/* responsive */
@media (max-width:980px){
  .tdee .hero-in{grid-template-columns:1fr;padding:56px 0 130px;text-align:left}
  .tdee .hero-phone{margin-top:20px}
  .tdee .f1{left:-30px}.f2{right:-24px}
  .tdee .calc-grid, .tdee .feat{grid-template-columns:1fr;gap:36px}
  .tdee .feat.flip .feat-copy{order:0}
  .tdee .steps{grid-template-columns:repeat(3,1fr)}
  .tdee .proof-in{padding:34px}
}
@media (max-width:640px){
  .tdee{font-size:16px}
  .tdee .nav nav{display:none}
  .tdee .row{grid-auto-flow:row}
  .tdee #impRow{grid-auto-flow:column}
  .tdee .steps{grid-template-columns:repeat(2,1fr)}
  .tdee .card, .tdee .result{padding:22px}
  .tdee .feat-shots .lift{margin-top:36px}
  .tdee .f1{left:-6px}.f2{right:-6px}
  .tdee .hero-phone{max-width:300px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}
.tdee .brand, .tdee .btn-sm{white-space:nowrap}
@media (max-width:640px){.brand span{font-size:.95rem}.btn-sm{padding:8px 14px}}

.tdee .dev{display:block;height:auto;filter:drop-shadow(0 26px 30px rgba(24,27,69,.28))}
.tdee .dev.sm{width:100%;max-width:190px;margin:0 auto}
.tdee .feat-shots .dev{width:min(250px,44%)}
.tdee .feat-shots.single .dev{width:260px}
.tdee #heroPhone{width:290px;position:relative}
.tdee #heroPhone::before{aspect-ratio:656/1320}
.tdee #heroPhone img{aspect-ratio:auto;object-fit:contain;width:100%;height:100%;filter:drop-shadow(0 30px 34px rgba(10,12,50,.45))}
.tdee .badges{display:flex;gap:14px;flex-wrap:wrap}
.tdee .hero .badges{justify-content:flex-start}.final .badges{justify-content:center}
.tdee .badge{display:block;border-radius:9px;transition:transform .15s}
.tdee .badge:hover{transform:translateY(-2px)}
.tdee .badge img{height:54px;width:auto}
/* padding-top already set on .tdee .hero full-bleed rule above */
@media (max-width:640px){.feat-shots .dev{width:46%}.feat-shots.single .dev{width:62%}}
.tdee .hero::after{background:var(--mist)}