/* AnnounceMe landing page — page-specific layout on top of broadsheet.css.
   Lifted from the "AnnounceMe Landing.dc.html" design canvas (helmet styles). */

:root { --leading: 28px; --half: 14px; --edge: clamp(20px, 5vw, 72px); --measure: 58ch; }
html { scroll-behavior: smooth; }
body { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.nav-logo-icon { display: block; height: 40px; width: auto; }
.nav-logo-word { display: block; height: 19px; width: auto; }
@media (max-width: 480px) { .nav a { display: none; } }
.kicker { display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.08em;
  text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent);
  font-feature-settings: "tnum" 1; margin: 0 0 calc(var(--leading) - var(--half)); }
.hero { padding: calc(4 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.display { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6vw, 78px); line-height: clamp(45.5px, 6.5vw, 84.5px);
  letter-spacing: -0.02em; margin: 0 0 0 -0.035em; text-box: trim-both cap alphabetic; }
.display .line { display: block; }
.display .aside { display: inline-block; font-size: 11px; font-style: italic; font-weight: 400;
  letter-spacing: 0; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-left: 10px; vertical-align: baseline; }
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic; }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
.frontpage { padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.rule-head { height: 5px; border: 0; margin: 0; border-top: 2px solid var(--color-text); border-bottom: 1px solid var(--color-text); }
.rule-cut { height: 0; border: 0; border-top: 1px solid var(--color-text); margin: 0; }
.dateline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--half) var(--leading);
  margin: 0; padding: var(--half) 0; font-size: 13px; line-height: var(--half); letter-spacing: 0.08em;
  text-transform: uppercase; font-feature-settings: "pnum" 1;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.index { display: grid; grid-template-columns: 1fr 1fr; gap: var(--half) calc(2.5 * var(--leading));
  padding: calc(var(--leading) - var(--half)) 0 var(--leading); }
.ix { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 15.5px; line-height: var(--leading); }
.ix-leader { flex: 1; min-width: 28px; align-self: flex-end; margin-bottom: 0.34em;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-text) 45%, transparent); }
.ix-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px;
  font-feature-settings: "pnum" 1; white-space: nowrap; }
.ix > span:first-child { white-space: nowrap; }
.btn { white-space: nowrap; }
.ix-num.spot { color: var(--color-accent-700); }
.pricing { padding: calc(2.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.pricing .lede { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 28px; line-height: calc(1.4 * var(--leading)); letter-spacing: -0.015em; margin: 0;
  max-width: 46ch; text-box: trim-both cap alphabetic; }
.pricing .note { font-size: 15.5px; line-height: var(--leading); max-width: var(--measure);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; text-box: trim-both cap alphabetic; }
.plan-card { margin-top: var(--leading); display: grid; grid-template-columns: minmax(200px, 320px) 1fr;
  align-items: center; gap: calc(2 * var(--leading)); }
.plan-left { display: flex; flex-direction: column; gap: var(--half); }
.plan-price { display: flex; flex-direction: column; gap: 4px; }
.plan-price .amount { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 56px; line-height: 1; letter-spacing: -0.02em; color: var(--color-accent-700); }
.plan-price .unit { font-size: 15.5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.plan-free { font-size: 15.5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 0; }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plan-list li { font-size: 16px; line-height: var(--half); padding-left: 24px; position: relative; }
.plan-list li::before { content: "+"; position: absolute; left: 0; color: var(--color-accent-700);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
@media (max-width: 640px) {
  .plan-card { grid-template-columns: 1fr; gap: var(--leading); }
}
.pricing .caveat { font-size: 13px; line-height: var(--half); letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  margin: var(--half) 0 0; font-style: italic; }
.close { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); scroll-margin-top: 24px; }
.close h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: calc(1.3 * var(--leading)); margin: 0; max-width: 32ch;
  letter-spacing: -0.01em; text-box: trim-both cap alphabetic; }
.close .sub { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.signup { display: flex; gap: var(--space-3); align-items: stretch; max-width: 480px; margin-top: var(--leading); }
.signup .input { flex: 1; }
.signup .input, .signup .btn { min-height: 36px; }
.confirm { font-size: 15.5px; line-height: var(--leading); margin-top: var(--leading);
  color: var(--color-accent-700); }
footer.pagefoot { padding: calc(1.5 * var(--leading)) 0 calc(2 * var(--leading)); font-size: 13px;
  line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 70%, transparent); }
@media (max-width: 720px) {
  .index { grid-template-columns: 1fr; }
}