/* "How many toilets do I need?" page. Loaded after site.css, premium.css and products.css. */

.gc-hero { padding-bottom: clamp(32px, 4.5vw, 56px); }
.gc-kicker { margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-text); }

/* ---------- Calculator ---------- */
.gc-sec { padding-block: 0 clamp(48px, 6vw, 88px); background: var(--bg-soft); }
.gc-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 28px; background: #fff; box-shadow: 0 1px 0 rgba(21, 26, 46, .04), 0 16px 40px rgba(21, 26, 46, .07); }
.gc-panel { padding: clamp(24px, 3vw, 44px); }

.gc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 26px; padding: 4px; border-radius: 999px; background: var(--bg-soft); }
.gc-tab { padding: 12px 16px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: .98rem; font-weight: 600; color: var(--grey); cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s; }
.gc-tab:hover { color: var(--ink); }
.gc-tab.is-on { background: #fff; color: var(--navy); box-shadow: 0 1px 6px rgba(21, 26, 46, .12); }
.gc-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
[data-g][hidden] { display: none; }

.gc-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.gc-field label { font-size: .9rem; font-weight: 600; color: var(--ink); }
.gc-field input, .gc-field select { width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); font: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink); transition: border-color .2s, background-color .2s; }
.gc-field input:focus, .gc-field select:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 3px rgba(42, 55, 141, .12); }

.gc-check { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.gc-check label { display: flex; align-items: center; gap: 12px; font-size: 1rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.gc-check input { width: 24px; height: 24px; accent-color: var(--navy); cursor: pointer; }

/* result */
.gc-out { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 44px); background: var(--navy); color: #fff; }
.gc-out-h { margin-bottom: 18px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FF9A6E; }
.gc-list { margin: 0; padding: 0; list-style: none; }
.gc-list li { display: flex; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.gc-list li:first-child { padding-top: 0; }
.gc-q { flex: none; min-width: 64px; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.gc-n { display: flex; flex-direction: column; gap: 3px; font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }
.gc-n a { color: #fff; }
.gc-n a:hover { color: #FF9A6E; }
.gc-n small { font-size: .88rem; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, .72); }
.gc-note { margin: 18px 0 0; font-size: .98rem; font-weight: 600; color: #fff; }
.gc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gc-btn { display: inline-flex; align-items: center; padding: 13px 22px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; font-size: .95rem; font-weight: 600; color: #fff; transition: background-color .25s, border-color .25s, color .25s; }
.gc-btn:hover { border-color: #fff; color: #fff; }
.gc-btn-p { border-color: #F05A28; background: #F05A28; }
.gc-btn-p:hover { border-color: #FF7A45; background: #FF7A45; }
.gc-fine { margin: auto 0 0; padding-top: 22px; font-size: .85rem; line-height: 1.55; color: rgba(255, 255, 255, .7); }

/* ---------- Ratios ---------- */
.gc-ratios { background: #fff; }
.gc-ratios .pd-h2 { margin-bottom: 16px; }
.gc-ratios-lead { max-width: 64ch; margin: 0; font-size: clamp(1.02rem, 1.3vw, 1.12rem); line-height: 1.6; color: var(--grey); }
.gc-ratio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); margin: clamp(28px, 3.4vw, 44px) 0 0; padding: 0; list-style: none; }
.gc-ratio-grid li { padding: clamp(22px, 2.4vw, 30px); border-radius: 22px; background: var(--bg-soft); }
.gc-ratio-grid h3 { margin: 0 0 10px; font-size: 1.12rem; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; color: var(--ink); }
.gc-ratio-grid p { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--grey); }

@media (max-width: 1000px) {
  .gc-ratio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .gc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gc-ratio-grid { grid-template-columns: 1fr; }
}