/* Reset + base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#1c2330;background:#f5f5f4;line-height:1.55}
h1,h2,h3,h4{color:#1A1A2E;line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(1.6rem,3vw,2.2rem)}
h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-top:2rem}
h3{font-size:1.1rem;margin-top:1.5rem}
p{margin:.5em 0}
a{color:#1A1A2E}
hr{border:none;border-top:1px solid #d6d3d1;margin:2rem 0}

/* Layout */
.container{max-width:1180px;margin:0 auto;padding:0 16px}
header.site{background:#1A1A2E;color:#fff;padding:14px 0}
header.site .container{display:flex;align-items:center;justify-content:space-between;gap:12px}
header.site .brand{font-weight:700;font-size:1.05rem;color:#fff;text-decoration:none;letter-spacing:.2px}
header.site .brand .accent{color:#E8A000}
header.site nav a{color:#cfcfdc;text-decoration:none;margin-left:18px;font-size:.92rem}
header.site nav a:hover{color:#fff}

main{padding:18px 0 40px}
.intro{margin:8px 0 14px}
.intro p{max-width:760px;color:#3f4451}
.meta-line{color:#6b7280;font-size:.85rem;margin-top:-2px}
.meta-line time{font-weight:600;color:#3f4451}
@media(max-width:600px){
  main{padding:10px 0 32px}
  h1{margin-bottom:.2em}
  .intro{margin:4px 0 10px}
  .intro-lead{display:none}
  .meta-line{font-size:.78rem}
  .calc-card{padding:14px}
}

footer.site{background:#1A1A2E;color:#cfcfdc;padding:22px 0;margin-top:40px;font-size:.9rem}
footer.site a{color:#fff}

/* Ad slots (placeholder visual) */
.ad-slot{position:relative;display:flex;align-items:center;justify-content:center;background:#ecebe7;border:1px dashed #c4c1bb;color:#8a8678;font-size:.78rem;letter-spacing:.5px;text-transform:uppercase;margin:18px 0;border-radius:8px;overflow:hidden}
.ad-slot::before{content:"Advertisement"}
.ad-slot.ad-leaderboard{height:90px}
.ad-slot.ad-rectangle{height:280px}
@media(max-width:600px){
  .ad-slot.ad-leaderboard{height:100px}
  .ad-slot.ad-rectangle{height:250px}
}

/* Calculator card */
.calc-card{background:#fff;border:1px solid #e2e0db;border-radius:14px;box-shadow:0 1px 0 rgba(26,26,46,.04),0 8px 24px rgba(26,26,46,.07);padding:18px;margin:8px 0 18px}
.calc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.unit-toggle{display:inline-flex;background:#ECEAE5;border-radius:999px;padding:3px;gap:2px}
.unit-toggle button{background:transparent;border:0;padding:7px 14px;border-radius:999px;font-weight:600;font-size:.85rem;color:#1A1A2E;cursor:pointer;min-height:36px}
.unit-toggle button[aria-pressed="true"]{background:#1A1A2E;color:#fff}

/* Shape tabs */
.shape-tabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px -4px 14px;padding:4px;scrollbar-width:none}
.shape-tabs::-webkit-scrollbar{display:none}
.shape-tabs button{flex:0 0 auto;background:#fff;border:1.5px solid #d6d3d1;color:#1A1A2E;padding:9px 16px;border-radius:10px;font-weight:600;font-size:.92rem;cursor:pointer;min-height:42px;white-space:nowrap;transition:all .15s ease}
.shape-tabs button:hover{border-color:#1A1A2E}
.shape-tabs button[aria-selected="true"]{background:#1A1A2E;color:#fff;border-color:#1A1A2E}

/* Calc grid */
.calc-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:18px}
@media(max-width:760px){.calc-grid{grid-template-columns:1fr}}

.input-block{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-weight:600;font-size:.92rem;color:#1A1A2E}
.field .hint{color:#6b7280;font-size:.8rem;font-weight:400}
.field input[type="number"], .field input[type="text"]{
  appearance:none;-webkit-appearance:none;
  border:1.5px solid #d6d3d1;background:#fff;color:#1c2330;
  border-radius:9px;padding:10px 12px;font-size:1rem;min-height:44px;width:100%;
}
.field input[type="number"]:focus,.field input[type="text"]:focus{outline:0;border-color:#1A1A2E;box-shadow:0 0 0 3px rgba(232,160,0,.18)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Thickness presets */
.preset-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:6px}
@media(max-width:480px){.preset-row{grid-template-columns:repeat(3,1fr)}}
.preset-row button{background:#fff;border:1.5px solid #d6d3d1;color:#1A1A2E;padding:8px 4px;border-radius:8px;font-weight:600;font-size:.88rem;cursor:pointer;min-height:42px}
.preset-row button:hover{border-color:#1A1A2E}
.preset-row button[aria-pressed="true"]{background:#E8A000;border-color:#E8A000;color:#1A1A2E}

input[type="range"]{width:100%;accent-color:#1A1A2E}

/* Waste toggle */
.waste-toggle{display:inline-flex;background:#ECEAE5;border-radius:999px;padding:3px;gap:2px}
.waste-toggle button{background:transparent;border:0;padding:6px 12px;border-radius:999px;font-weight:600;font-size:.82rem;color:#1A1A2E;cursor:pointer;min-height:34px}
.waste-toggle button[aria-pressed="true"]{background:#1A1A2E;color:#fff}

/* Tooltip */
.tooltip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;background:#1A1A2E;color:#fff;border-radius:50%;font-size:.72rem;font-weight:700;cursor:help;margin-left:4px}

/* Results panel */
.results{background:linear-gradient(180deg,#1A1A2E 0,#252540 100%);color:#fff;border-radius:12px;padding:22px 18px;display:flex;flex-direction:column;gap:14px;min-height:340px}
.headline{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 4px}
.headline .label{font-size:.82rem;color:#cfcfdc;text-transform:uppercase;letter-spacing:1px;font-weight:600}
.headline .number{font-size:clamp(2.6rem,7vw,3.6rem);font-weight:800;color:#E8A000;line-height:1;margin:6px 0 4px}
.headline .sub{font-size:.85rem;color:#b8b8c8}

.result-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.1)}
.result-row .k{color:#b8b8c8;font-size:.88rem}
.result-row .v{font-weight:700;color:#fff;font-size:1.05rem;text-align:right}
.result-row .v small{color:#b8b8c8;font-weight:400;font-size:.8rem}

.cost-block{background:rgba(255,255,255,.05);border-radius:9px;padding:12px;margin-top:6px}
.cost-block .ck{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;color:#cfcfdc;text-transform:uppercase;letter-spacing:.6px;font-weight:600;margin-bottom:4px}
.cost-block .cv{font-size:1.15rem;font-weight:700;color:#fff}
.cost-block .cv .range-sep{color:#b8b8c8;margin:0 4px;font-weight:400}
.cost-block + .cost-block{margin-top:8px}
.cost-edit{background:transparent;border:0;color:#E8A000;cursor:pointer;font-size:.78rem;font-weight:600;text-decoration:underline;padding:0}
.cost-inputs{margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:.85rem}
.cost-inputs label{color:#cfcfdc;display:flex;align-items:center;gap:8px}
.cost-inputs input{background:#fff;color:#1c2330;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:5px 8px;width:80px;font-size:.9rem}
.hidden{display:none}

/* Action row */
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn{background:#1A1A2E;color:#fff;border:1.5px solid #1A1A2E;padding:9px 14px;border-radius:9px;font-weight:600;font-size:.9rem;cursor:pointer;min-height:42px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:#252540}
.btn-secondary{background:#fff;color:#1A1A2E}
.btn-secondary:hover{background:#f5f5f4}
.btn-amber{background:#E8A000;color:#1A1A2E;border-color:#E8A000}
.btn-amber:hover{background:#cf8e00;border-color:#cf8e00}

/* Definition card */
.definition-card{background:#fff8e6;border:1px solid #f3d97a;border-left:4px solid #E8A000;border-radius:10px;padding:14px 18px;margin:18px 0;font-size:.97rem}
.definition-card strong{color:#1A1A2E}

/* Tables */
.tbl-wrap{overflow-x:auto;margin:14px 0}
table{border-collapse:collapse;width:100%;background:#fff;border:1px solid #e2e0db;border-radius:10px;overflow:hidden;font-size:.93rem}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid #e2e0db}
th{background:#1A1A2E;color:#fff;font-weight:600;font-size:.88rem}
tr:last-child td{border-bottom:none}
tr:nth-child(even) td{background:#faf9f7}

/* Accordion */
details.accordion{background:#fff;border:1px solid #e2e0db;border-radius:10px;padding:14px 18px;margin:10px 0}
details.accordion summary{font-weight:700;color:#1A1A2E;cursor:pointer;font-size:1.05rem;list-style:none}
details.accordion summary::-webkit-details-marker{display:none}
details.accordion summary::after{content:"+";float:right;font-weight:400;font-size:1.3rem;color:#E8A000}
details.accordion[open] summary::after{content:"−"}
details.accordion[open] summary{margin-bottom:10px}

/* FAQ */
.faq details{background:#fff;border:1px solid #e2e0db;border-radius:10px;padding:12px 16px;margin:8px 0}
.faq summary{font-weight:600;color:#1A1A2E;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:#E8A000;font-size:1.2rem}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{margin-bottom:8px}
.faq details p{color:#3f4451}

/* Verdict box */
.verdict{background:#1A1A2E;color:#fff;border-radius:10px;padding:14px 18px;margin:14px 0;font-weight:600}
.verdict .lead{color:#E8A000;display:block;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}

/* Print styles */
@media print{
  header.site, footer.site, .ad-slot, .actions, nav{display:none!important}
  .calc-card{box-shadow:none;border:1px solid #999}
  .results{background:#fff!important;color:#000!important;border:1px solid #999}
  .headline .number{color:#000!important}
  .result-row .k,.result-row .v,.cost-block .ck,.cost-block .cv{color:#000!important}
  body{background:#fff}
}


/* ----- Embed snippet card (homepage section #embed) ----- */
.embed-snippet-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin:16px 0;}
.embed-snippet-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:#334155;}
.embed-snippet-text{width:100%;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;line-height:1.5;padding:10px;border:1px solid #cbd5e1;border-radius:4px;background:#fff;resize:vertical;box-sizing:border-box;color:#0f172a;}
.btn-copy{margin-top:8px;padding:8px 14px;background:#1A1A2E;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;}
.btn-copy:hover{filter:brightness(1.15);}
.btn-copy:active{filter:brightness(0.9);}