/* NetSheet.org — public calculator page (try-it.html)
   The calculator itself is styled by css/netsheet-calc.css (shared with the in-app calculator).
   This file only lays out the page around it: intro, sheet actions, email panel, account upsell. */

.calc-page { padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }

.calc-intro { margin-bottom: 1.5rem; }
.calc-intro h1 { font-size: var(--step-3); margin-bottom: 0.4rem; }
.calc-intro .lede { font-size: var(--step-0); max-width: 62ch; margin: 0 0 1.5rem; color: var(--ink-2); }
/* The sheet-type switch sits with the same space above and below it */
.calc-intro #sheet-type-host { margin: 0; }

/* Sheet footer: actions and the email panel */
.sheet-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.sheet-actions .btn { min-height: 46px; }
.sheet-actions .btn-secondary { flex: 1 1 auto; }

.send-panel { padding: 1rem 0 0.25rem; margin-bottom: 1rem; border-top: 1px dashed var(--rule); }
.send-panel h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.send-panel > .hint { margin: 0 0 1rem; }
.send-panel .field { margin-bottom: 0.85rem; }
.send-panel .notice { margin-bottom: 0.85rem; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Account upsell under the form */
.account-upsell { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); max-width: 40rem; }
.account-upsell h2 { font-size: var(--step-1); font-stretch: 90%; font-variation-settings: "wdth" 90; margin-bottom: 0.75rem; }
.upsell-list { list-style: none; margin: 0 0 1.1rem; padding: 0; font-size: 0.95rem; color: var(--ink-2); }
.upsell-list li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px dashed var(--rule);
}
.plan-tag {
  font-size: 0.78rem; font-weight: 600; color: var(--green); background: var(--green-soft);
  padding: 0.15rem 0.55rem; border-radius: 999px; white-space: nowrap;
}
.account-upsell .cluster { gap: 1rem; }
.account-upsell .btn { min-height: 48px; }

@media (max-width: 560px) {
  .upsell-list li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .upsell-list .plan-tag { justify-self: start; }
}