/* Page composition for the pricing example (Harbour Lights subscriptions). Plans are cut-out coupons;
   the billing switch swaps monthly and yearly prices with :has(), no script. */
@layer page {
  .hl-head { display: grid; gap: 1.6rem; padding-block: 7rem 3rem; }
  .hl-head h1 { font-family: var(--font-display, var(--font)); font-size: 6.4rem; line-height: 1.02; font-weight: 600; max-inline-size: 90rem; }
  .hl-order { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); grid-template-rows: 2.4rem auto; gap: 3rem 4rem; padding-block: 2rem 6rem; }
  .hl-cutline { grid-column: 1 / -1; position: relative; }
  .hl-cutline::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: 1.2rem; border-block-start: .25rem dashed var(--ink); }
  .hl-cutline span { position: absolute; inset-block-start: 0; inset-inline-start: 2rem; padding-inline: .6rem; background: var(--paper); font-size: 2.4rem; line-height: 1; }
  .hl-coupon { display: grid; gap: 2.4rem; padding: 3.2rem 3.6rem 3.6rem; border: .15rem solid var(--ink); }
  .hl-coupon-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 3rem; padding-block-end: 1.2rem; border-block-end: .4rem double var(--ink); }
  .hl-coupon-head h2 { font-family: var(--font-display, var(--font)); font-size: 3.4rem; font-weight: 600; }
  .hl-coupon-head p { font-size: var(--small-size); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
  .hl-billing { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 2rem; margin: 0; padding: 0; border: 0; }
  .hl-billing legend { float: inline-start; margin-inline-end: 1.6rem; font-weight: 700; }
  .hl-billing input, .hl-plan-list input { position: absolute; opacity: 0; inline-size: .1rem; block-size: .1rem; }
  .hl-billing label, .hl-plan-list label { cursor: pointer; }
  .hl-billing label::before, .hl-plan-list label::before { content: ''; display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; margin-inline-end: .8rem; border: .15rem solid var(--ink); vertical-align: -.3rem; font-size: 1.6rem; line-height: 1; }
  .hl-billing input:checked + label::before, .hl-plan-list input:checked + label::before { content: '✓'; color: var(--accent); }
  .hl-billing input:focus-visible + label, .hl-plan-list input:focus-visible + label { outline: .25rem solid var(--accent); outline-offset: .3rem; }
  .hl-billing label span { color: var(--accent); }
  .hl-plan-list legend { margin-block-end: 1.2rem; font-weight: 700; }
  .hl-plan-list label { display: grid; grid-template-columns: auto auto minmax(2rem, 1fr) auto; align-items: baseline; gap: .4rem .8rem; min-block-size: 0; padding: 1.4rem 0; border: 0; border-block-end: .1rem solid var(--line); border-radius: 0; background: none; box-shadow: none; }
  .hl-plan-list label::before { grid-row: 1; }
  .hl-plan-list input:checked + label { box-shadow: none; }
  .hl-name { font-family: var(--font-display, var(--font)); font-size: 2.4rem; font-weight: 600; }
  .hl-dots { align-self: end; margin-block-end: .7rem; border-block-end: .25rem dotted var(--muted); }
  .hl-plan-list b { grid-column: 4; font-family: var(--font-display, var(--font)); font-size: 2.4rem; font-weight: 600; }
  .hl-plan-list small { grid-column: 2 / -1; color: var(--muted); font-size: var(--small-size); }
  .hl-y, .hl-coupon:has(#b-year:checked) .hl-m { display: none; }
  .hl-coupon:has(#b-year:checked) .hl-y { display: inline; }
  .hl-lines { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem; }
  .hl-lines input { border: 0; border-block-end: .15rem solid var(--ink); border-radius: 0; background: transparent; padding-inline: 0; }
  .hl-note { font-style: italic; color: var(--muted); }
  .hl-post { justify-self: start; }
  .hl-hang { grid-column: 2; grid-row: 2; display: grid; gap: 1.6rem; justify-items: center; align-content: start; margin: -6rem 0 0; position: relative; z-index: 1; }
  .hl-hang svg { inline-size: 18rem; block-size: auto; }
  .hl-hang figcaption { max-inline-size: 22rem; text-align: center; font-style: italic; color: var(--muted); font-size: var(--small-size); }
  .hl-table th, .hl-table td { text-align: center; }
  .hl-table tbody th { text-align: start; font-weight: 400; }
  .hl-table td:nth-child(3) { background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .hl-table .no { color: var(--muted); }
  .hl-gift { display: grid; padding-block: 8rem; }
  .hl-gift-card { position: relative; display: grid; gap: 1.4rem; justify-self: center; max-inline-size: 76rem; padding: 4rem 4.4rem; border: .25rem dashed var(--accent); text-align: center; justify-items: center; }
  .hl-gift-card h2 { font-family: var(--font-display, var(--font)); font-size: 3.6rem; font-weight: 600; line-height: 1.15; }
  .hl-gift-price { font-family: var(--font-display, var(--font)); font-size: 2.8rem; }
  .hl-letters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem; margin-block-start: 1.6rem; }
  .hl-letter { display: grid; align-content: start; gap: 1.2rem; padding-block-start: 1.6rem; border-block-start: .3rem solid var(--ink); }
  .hl-letter h3 { font-family: var(--font-display, var(--font)); font-size: 2.2rem; font-weight: 600; line-height: 1.2; }
  .hl-letter-courier { position: relative; }
  .hl-courier { position: absolute; inset-block-start: -6.3rem; inset-inline-end: 0; display: flex; align-items: end; gap: 1rem; margin: 0; pointer-events: none; }
  .hl-courier svg { inline-size: 9rem; block-size: auto; }
  .hl-courier span { margin-block-end: .6rem; font-size: 1.2rem; font-style: italic; color: var(--muted); }
  .hl-sign { font-style: italic; color: var(--muted); }
  .hl-reply { padding-inline-start: 1.6rem; border-inline-start: .3rem solid var(--accent); }
  .hl-reply span { font-weight: 700; }
  @media (width <= 50em) {
    .hl-head { padding-block: 4rem 2rem; }
    .hl-head h1 { font-size: 4.6rem; }
    .hl-letters { grid-template-columns: minmax(0, 1fr); }
    .hl-letter-courier { margin-block-start: 3rem; }
    .hl-courier { inset-block-start: -5.1rem; }
    .hl-courier svg { inline-size: 7.4rem; }
    .hl-courier span { font-size: 1.5rem; }
    .hl-order { grid-template-columns: minmax(0, 1fr) 10rem; gap: 3rem 1.2rem; }
    .hl-coupon { grid-column: 1 / -1; grid-row: 3; padding: 2.4rem 2rem; }
    .hl-hang { grid-column: 2; grid-row: 2; margin-block-start: -5.6rem; }
    .hl-hang svg { inline-size: 10rem; }
    .hl-hang figcaption { display: none; }
    .hl-lines { grid-template-columns: minmax(0, 1fr); }
    .hl-plan-list label { grid-template-columns: auto minmax(0, 1fr); }
    .hl-dots { display: none; }
    .hl-name { grid-column: 2; grid-row: 1; }
    .hl-plan-list b { grid-column: 2; grid-row: 2; }
    .hl-plan-list small { grid-column: 2; grid-row: 3; font-size: 1.8rem; }
    .hl-hang svg { inline-size: 12rem; }
    .hl-gift { padding-block: 5rem; }
    .hl-gift-card { padding: 3rem 2.4rem; }
  }
  @media (height <= 30em) {
    .hl-head h1 { font-size: min(6.4rem, 11vh); }
    .hl-head { padding-block-start: 2.4rem; }
  }
}