/* =========================================================
   Ayush Agrawal · The Operator's Lab — shared stylesheet
   Base element styles are scoped to body.site so this file
   can also be loaded on the calculator page (which has its
   own styles) to style only the .capture and .back-link
   components there.
   ========================================================= */
:root{
  --bg:#0F172A; --card:#111827; --line:#334155; --text:#F8FAFC; --muted:#94A3B8;
  --accent:#FFC83D; --red:#FF5656; --green:#34D378;
  --soft:#CBD5E1; --bg-2:#0B1222;
  --head:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --r:18px; --gut:16px; --max:1120px;
}

/* ---------- base (site pages only) ---------- */
body.site{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.site *,.site *::before,.site *::after{box-sizing:border-box}
.site img{max-width:100%;display:block;height:auto}
.site a{color:inherit}
.site h1,.site h2,.site h3{font-family:var(--head);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.site p{margin:0}
.site .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.site :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--accent);color:var(--bg);padding:8px 12px;border-radius:8px;z-index:10}

/* ---------- top bar ---------- */
.top{border-bottom:1px solid var(--line);background:rgba(15,23,42,.92);position:sticky;top:0;z-index:5;backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.mark img.mark-ico{height:30px;width:41px;max-width:none;flex:0 0 41px;display:block;object-fit:contain}
.mark b{font-family:var(--head);font-weight:700;font-size:16px;white-space:nowrap}
.mark span{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top nav{display:flex;gap:6px;align-items:center}
.top nav a{text-decoration:none;font-weight:600;font-size:14px;color:var(--soft);padding:8px 10px;border-radius:10px}
.top nav a:hover{color:var(--text);background:var(--card)}
.top nav a[aria-current="page"]{color:var(--accent)}
@media (max-width:420px){.mark span{display:none}}

/* ---------- type helpers ---------- */
.kicker{font:700 12px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.t-loss{color:var(--red)} .t-profit{color:var(--green)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--body);text-decoration:none;border-radius:14px;padding:15px 20px;border:2px solid var(--line);color:var(--text);background:transparent;cursor:pointer;transition:transform .12s,background .15s,border-color .15s;min-height:50px}
.btn:hover{border-color:var(--soft)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.btn-primary:hover{background:#ffd466;border-color:#ffd466}
.btn .arr{transition:transform .15s}.btn:hover .arr{transform:translateX(3px)}

/* ---------- hero (home) ---------- */
.hero{padding:28px 0 8px}
.hero-grid{display:grid;gap:26px}
.hero-id{display:flex;gap:16px;align-items:center}
.hero-id img{width:76px;height:76px;border-radius:20px;object-fit:cover;border:2px solid var(--accent)}
.cred{display:inline-block;margin-top:6px;font-weight:700;font-size:14px;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap}
.hero h1{font-size:clamp(34px,9vw,64px);margin:22px 0 14px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{font-size:18px;color:var(--soft);max-width:34em}
.hero .ctas{display:grid;grid-template-columns:1fr;gap:10px;margin-top:22px}
.hero-photo{display:none}

/* receipt: one ₹350 order */
.receipt{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;position:relative}
.receipt::before,.receipt::after{content:"";position:absolute;left:18px;right:18px;height:0;border-top:2px dashed var(--line)}
.receipt::before{top:52px}
.receipt::after{display:none}
.receipt .rh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;height:34px}
.receipt .rh b{font-family:var(--head);font-size:16px}
.receipt .rh span{color:var(--muted);font-size:12px;text-align:right}
.receipt ul{list-style:none;margin:16px 0 0;padding:0}
.receipt li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:15px;color:var(--soft);font-variant-numeric:tabular-nums}
.receipt li b{color:var(--text);font-weight:600}
.receipt li.cut b{color:var(--soft)}
.receipt .total{margin-top:10px;padding-top:12px;border-top:2px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px}
.receipt .total span{font-weight:700;color:var(--text)}
.receipt .total b{font:800 40px/1 var(--head);color:var(--red);letter-spacing:-.02em}
.receipt .fix{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(52,211,120,.08);border:1px solid rgba(52,211,120,.35);border-radius:12px;padding:10px 12px;font-size:14px;color:var(--soft)}
.receipt .fix b{font:800 22px/1 var(--head);color:var(--green)}
.receipt .src{margin-top:10px;font-size:12px;color:var(--muted)}

/* ---------- sections ---------- */
.block{padding:44px 0 0}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:16px}
.sec-h h2{font-size:clamp(24px,6vw,34px)}
.promise{margin-top:44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.promise p{font:800 clamp(28px,8vw,56px)/1.05 var(--head);letter-spacing:-.03em}
.promise p span{display:block}
.promise p span:nth-child(2){color:var(--muted)}
.promise p span:nth-child(3){color:var(--accent)}
.promise small{display:block;margin-top:14px;color:var(--soft);font-size:16px;max-width:40em}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ep{display:grid;text-decoration:none}
.ep .thumb{position:relative;aspect-ratio:16/9;background:var(--bg-2)}
.ep .thumb img{width:100%;height:100%;object-fit:cover}
.ep .badge{position:absolute;right:12px;bottom:12px;background:var(--bg);color:var(--accent);border:1px solid var(--line);font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:7px 10px;border-radius:999px}
.ep .body{padding:16px 18px 18px;display:grid;gap:8px}
.ep h3{font-size:22px}
.ep p{color:var(--soft)}
.ep .go{margin-top:6px;font-weight:700;color:var(--accent)}

.labcard{padding:20px 18px;display:grid;gap:12px;border-color:rgba(255,200,61,.45);background:linear-gradient(180deg,rgba(255,200,61,.07),rgba(255,200,61,0) 60%),var(--card)}
.labcard h3{font-size:26px}
.labcard p{color:var(--soft)}
.labcard .url{font-weight:700;color:var(--accent);font-size:15px}

.next{display:flex;gap:14px;align-items:center;padding:16px 18px;border-style:dashed}
.next .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:0 0 10px;box-shadow:0 0 0 6px rgba(255,200,61,.15)}
.next p{color:var(--soft)} .next b{color:var(--text)}

/* ---------- Lab hub ---------- */
.lab-hero{padding:30px 0 6px}
.lab-hero h1{font-size:clamp(36px,10vw,68px);margin:10px 0 12px}
.lab-hero p{font-size:18px;color:var(--soft);max-width:36em}
.rules{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.rules span{font-size:13px;font-weight:600;color:var(--soft);border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.rules span::before{content:"✓ ";color:var(--green)}
.tools{display:grid;gap:14px;margin-top:26px}
.tool{display:grid;gap:12px;align-content:start;padding:20px 18px;text-decoration:none;transition:border-color .15s,transform .15s}
a.tool:hover{border-color:var(--accent);transform:translateY(-2px)}
.tool .no{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px;font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tool .no em{font-style:normal;color:var(--accent)}
.tool .no span{white-space:nowrap}
.tool h2{font-size:26px}
.tool p{color:var(--soft)}
.tool .mini{display:flex;align-items:baseline;gap:12px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:14px;border-top:1px dashed var(--line);padding-top:12px}
.tool .mini b{font:800 26px/1 var(--head)}
.tool .cta{font-weight:700;color:var(--accent)}
.tool.soon{border-style:dashed;background:transparent}
.tool.soon .no em{color:var(--muted)}
.tool.soon h2{color:var(--soft)}

.work{margin-top:26px;padding:18px;display:grid;gap:6px}
.work h2{font-size:20px}
.work p{color:var(--soft)}
.work a{color:var(--accent);font-weight:700;word-break:break-word}

/* ---------- capture block (also used on the calculator page) ---------- */
.capture{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 18px;font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:var(--text);box-sizing:border-box}
.capture *{box-sizing:border-box}
.capture .cap-kicker{font:700 12px/1.2 "Inter","Segoe UI",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.capture .cap-title{font:800 24px/1.12 "Poppins","Segoe UI",system-ui,sans-serif;letter-spacing:-.02em;margin:8px 0 6px;color:var(--text)}
.capture .cap-sub{color:var(--muted);font-size:15px;line-height:1.5;margin:0 0 14px}
.capture form{display:grid;gap:10px;margin:0}
.capture label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.capture label i{font-style:normal;font-weight:400}
.capture input[type=email],.capture input[type=text],.capture input[type=tel],.capture select{width:100%;background:var(--bg);border:2px solid var(--line);color:var(--text);border-radius:12px;font:600 17px/1.2 inherit;font-family:inherit;padding:13px 12px;outline:none;min-height:50px}
.capture select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#94A3B8 50%),linear-gradient(135deg,#94A3B8 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.capture select:invalid{color:var(--muted)}
.capture select[aria-invalid=true]{border-color:var(--red)}
.capture input:focus,.capture select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,200,61,.18)}
.capture input[aria-invalid=true]{border-color:var(--red)}
.capture .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.capture button.cap-btn{width:100%;font:700 16px/1 "Inter","Segoe UI",system-ui,sans-serif;border-radius:12px;padding:15px 14px;min-height:50px;border:2px solid var(--accent);background:var(--accent);color:#0F172A;cursor:pointer;transform:none;filter:none}
.capture button.cap-btn:hover{background:#ffd466}
.capture button.cap-btn[disabled]{opacity:.6;cursor:progress}
.capture .cap-status{min-height:0;font-size:15px;line-height:1.5;margin:0;color:var(--soft)}
.capture .cap-status:empty{display:none}
.capture .cap-status.is-ok{color:var(--green)}
.capture .cap-status.is-warn{background:rgba(255,200,61,.08);border:1px solid rgba(255,200,61,.4);border-radius:12px;padding:10px 12px;color:var(--text)}
.capture .cap-status.is-err{color:var(--red)}
.capture .cap-status a{color:var(--accent);font-weight:700}
.capture .cap-fine{font-size:12px;line-height:1.5;color:var(--muted);margin:2px 0 0}
.capture .cap-fine a{color:var(--soft)}
.capture .cap-wa{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);display:grid;gap:8px}
.capture .cap-wa[hidden]{display:none}
.capture .cap-wa p{margin:0;font-size:15px;color:var(--soft);line-height:1.5}
.capture .cap-wa a.wa-btn{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font:700 16px/1 "Inter","Segoe UI",system-ui,sans-serif;border-radius:12px;padding:15px 14px;min-height:50px;border:2px solid var(--green);color:var(--text)}
.capture .cap-wa a.wa-btn:hover{background:rgba(52,211,120,.1)}
.capture .cap-wa small{font-size:12px;color:var(--muted);line-height:1.5}
@media (min-width:720px){
  .capture{padding:26px 26px}
  .capture form{grid-template-columns:1.3fr 1fr auto;align-items:end}
  .capture form .cap-status,.capture form .cap-fine{grid-column:1 / -1}
  .capture button.cap-btn{width:auto;padding:15px 22px}
  .capture .cap-wa{grid-template-columns:1fr auto;align-items:center;column-gap:20px}
  .capture .cap-wa small{grid-column:1 / -1}
}

/* back link (calculator page) */
a.back-link{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;color:#94A3B8;text-decoration:none;font:600 14px/1 "Inter","Segoe UI",system-ui,sans-serif;padding:8px 0}
a.back-link:hover{color:#FFC83D}

/* ---------- prose pages ---------- */
.prose{max-width:720px;padding-top:34px}
.prose h1{font-size:clamp(32px,8vw,48px);margin:10px 0 16px}
.prose p{color:var(--soft);font-size:17px;margin-bottom:14px}
.prose a{color:var(--accent)}

/* ---------- 404 ---------- */
.nf{padding:60px 0 20px;text-align:left}
.nf .big{font:800 clamp(80px,26vw,160px)/.9 var(--head);color:var(--red);letter-spacing:-.04em}
.nf h1{font-size:clamp(26px,7vw,40px);margin:14px 0 10px}
.nf p{color:var(--soft);max-width:30em}
.nf .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- footer ---------- */
.foot{margin-top:56px;border-top:1px solid var(--line);padding:26px 0 34px;color:var(--muted);font-size:14px}
.foot .wrap{display:grid;gap:14px}
.foot .who b{color:var(--text);font-family:var(--head);font-weight:700;font-size:16px}
.foot .links{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot a{color:var(--soft);text-decoration:none;font-weight:600}
.foot a:hover{color:var(--accent)}
.foot .mail{color:var(--text);word-break:break-word}

/* ---------- larger screens ---------- */
@media (min-width:600px){
  .hero .ctas{grid-template-columns:auto auto;justify-content:start}
}
@media (min-width:960px){
  .site{font-size:17px}
  .hero{padding:56px 0 10px}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
  .hero-id img{width:88px;height:88px}
  .hero h1{margin-top:28px}
  .receipt{margin-top:8px}
  .two{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:stretch}
  .ep{grid-template-columns:1fr}
  .labcard{padding:28px 26px;align-content:start}
  .tools{grid-template-columns:1fr 1fr}
  .tool{padding:26px 24px}
  .lab-hero{padding:56px 0 8px}
  .foot .wrap{grid-template-columns:1fr auto;align-items:center}
}
@media (prefers-reduced-motion:reduce){.site *{transition:none!important;scroll-behavior:auto!important}}

.top nav a.nav-wa{background:#25D366;color:#06281a;font-weight:700;padding:8px 12px;margin-left:4px}
.top nav a.nav-wa:hover{background:#3be07a;color:#06281a}
@media (max-width:380px){.top nav a{padding:8px 7px}.mark b{font-size:15px}}
.top nav a{white-space:nowrap}
@media (max-width:480px){.top nav a[href="/#contact"]{display:none}}
@media (max-width:400px){.top nav{gap:2px}.top nav a{padding:8px 6px;font-size:13px}.top nav a.nav-wa{padding:7px 9px;margin-left:2px}.mark{gap:7px}.mark b{font-size:14px}.mark img.mark-ico{height:26px;width:36px;flex-basis:36px}}