/* Detail pages share the main site's type, colours, rules, and buttons. */
.option-hero { padding-block: 48px 44px; border-bottom: 1px solid var(--line); }
.option-back { display: inline-block; margin-bottom: 36px; font-size: .85rem; }
.option-hero h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
.option-hero .lede { max-width: 660px; margin-top: 20px; }
.option-details { padding-top: 48px; }
.option-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); gap: 80px; align-items: start; }
.option-copy { max-width: 65ch; }
.option-block + .option-block { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 32px; }
.option-block h2, .domain-tool h2 { font-size: 1.45rem; letter-spacing: -.025em; margin-bottom: 16px; }
.option-block p + p { margin-top: 14px; }
.option-list { padding-left: 20px; margin: 20px 0 0; }
.option-list li { padding-left: 4px; margin-top: 10px; }
.option-list li::marker { color: var(--em); }
.option-price { background: var(--soft); border: 1px solid var(--line); padding: 28px; position: sticky; top: 110px; }
.option-price dl { margin: 20px 0; }
.option-cost { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-block-end: 1px solid var(--line); }
.option-cost dt { font-size: .85rem; }
.option-cost dt span { display: block; color: var(--muted); font-size: .75rem; }
.option-cost dd { margin: 0; font-size: 1.12rem; letter-spacing: -.03em; text-align: right; }
.option-price .button { display: flex; width: 100%; margin-block: 24px 12px; text-align: center; }
.domain-tool { border-top: 1px solid var(--line); padding-top: 36px; margin-top: 40px; max-width: 720px; }
.domain-tool label { display: block; margin-top: 20px; font-size: .85rem; }
.domain-tool__form { display: flex; gap: 8px; margin-top: 8px; }
.domain-tool__form input { min-width: 0; flex: 1; border: 1px solid var(--field-line); background: var(--surface); color: var(--ink); padding: 13px 14px; }
.domain-tool__status { color: var(--muted); font-size: .85rem; margin-top: 12px; }
.domain-tool ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.domain-tool li { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); font-size: .9rem; overflow-wrap: anywhere; }
.domain-tool li span, .domain-tool li small { color: var(--muted); font-size: .8rem; }
.option-next { margin-block: 56px; padding-block: 28px; border-block: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.option-next h2 { font-size: 1.5rem; margin-bottom: 8px; }
.option-next p:not(.eyebrow) { font-size: .9rem; color: var(--muted); }
.option-next .button { flex-shrink: 0; }
.estimate-link { display: inline-block; margin-top: 18px; }
.est-resize { min-width: 0; overflow: clip; }
.est-resize__content { display: flow-root; }
@media (max-width: 900px) {
  .option-layout { gap: 36px; }
  .option-price { padding: 22px; }
}
@media (max-width: 760px) {
  .option-hero { padding-block: 32px; }
  .option-back { margin-bottom: 28px; }
  .option-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .option-price { position: static; grid-row: 1; }
  .option-details { padding-top: 28px; }
  .domain-tool ul { grid-template-columns: minmax(0, 1fr); }
  .domain-tool__form { flex-direction: column; }
  .option-next { display: block; margin-block: 40px; }
  .option-next .button { margin-top: 20px; }
}