/* Example page layouts. Components, colors, type, and controls come from Curbcut. */
.tpl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; padding: .75rem max(1.5rem, calc((100% - 72rem) / 2 + 1.5rem)); border-bottom: 1px solid var(--cc-line); background: var(--cc-panel); font-size: var(--cc-text-sm); }
.tpl-toolbar > a { display: inline-flex; align-items: center; min-height: var(--cc-target); }
.tpl-toolbar > span { color: var(--cc-ink-soft); }
.tpl-switchers { display: flex; gap: .5rem; margin-left: auto; }
.tpl-switchers .cc-select { font-size: var(--cc-text-sm); }
.tpl-welcome { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 5rem; align-items: center; padding-block: 4.5rem; }
.tpl-welcome h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.08; letter-spacing: -.045em; margin: 0 0 1.5rem; max-width: 11em; }
.tpl-welcome .cc-paragraph--lead { color: var(--cc-ink-soft); }
.tpl-visit { background: var(--cc-brand-wash); }
.tpl-visit > .cc-icon { width: 2rem; height: 2rem; color: var(--cc-brand); margin-bottom: 1rem; }
.tpl-visit .cc-heading { margin-top: 0; }
.tpl-facts { font-size: var(--cc-text-sm); margin: 0 0 1.5rem; }
.tpl-facts > div { margin-bottom: .75rem; }
.tpl-facts dt { font-weight: 600; }
.tpl-facts dd { margin: 0; color: var(--cc-ink-soft); }
.tpl-section { padding-block: 0 3rem; scroll-margin-top: 2rem; }
.tpl-home-columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; align-items: start; border-top: 1px solid var(--cc-line); padding-top: 3rem; }
.tpl-home-columns .cc-section--panel { margin: 0; }
.tpl-update { border-top: 1px solid var(--cc-line); padding-block: 1.5rem; }
.tpl-update .cc-heading { margin-top: 0; }
.tpl-service-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; padding-block: 2.5rem 1.5rem; align-items: start; }
.tpl-service-layout > .cc-subnav { position: sticky; top: 2rem; }
.tpl-service-content > section:not(:first-child) { border-top: 1px solid var(--cc-line); padding-top: 2rem; }
.tpl-service-content > section > :first-child { margin-top: 0; }
.tpl-form-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 4rem; align-items: start; padding-block: 2.5rem 4rem; }
.tpl-form-layout > *, .tpl-service-layout > *, .tpl-home-columns > *, .tpl-welcome > * { min-width: 0; }
.tpl-form-layout .cc-fieldset, .tpl-form-layout .cc-field { max-width: none; }
.tpl-form-layout .cc-fieldset > .cc-field:last-child { margin-bottom: 0; }
.tpl-field-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.tpl-steps { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0 0 1rem; margin: 0 0 1.5rem; border-bottom: 1px solid var(--cc-line); font-size: var(--cc-text-sm); color: var(--cc-ink-soft); }
.tpl-steps [aria-current] { color: var(--cc-ink); font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
.tpl-form-help .cc-list { padding-left: 1.25rem; }
.tpl-form-help .cc-list li { margin-bottom: .75rem; }
.tpl-review { margin: 0 0 2rem; }
.tpl-review > div { padding: 1rem 0; border-bottom: 1px solid var(--cc-line); }
.tpl-review dt { font-weight: 600; }
.tpl-review dd { margin: .25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tpl-source { padding-block: 3rem; }
.tpl-source-code { max-width: none; }
.tpl-source-code pre { margin: 0; padding: 1.5rem; font-size: var(--cc-text-sm); background: var(--cc-code-bg); color: var(--cc-code-ink); border-radius: 0 0 var(--cc-radius-md) var(--cc-radius-md); }
@media (max-width: 60rem) {
  .tpl-welcome, .tpl-home-columns, .tpl-form-layout { gap: 2rem; }
  .tpl-service-layout { grid-template-columns: 12rem minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 48rem) {
  .tpl-welcome, .tpl-home-columns, .tpl-form-layout, .tpl-service-layout { grid-template-columns: minmax(0, 1fr); }
  .tpl-welcome { padding-block: 3rem; }
  .tpl-service-layout > .cc-subnav { position: static; }
  .tpl-switchers { margin-left: 0; }
  .tpl-toolbar > span { flex-basis: 100%; }
}
@media (max-width: 30rem) { .tpl-field-pair { grid-template-columns: minmax(0, 1fr); gap: 0; } }
