/* ==========================================================================
   AFTER HOURS: Terms and Conditions (prefix lg-; this page's classes use lg-t*,
   lg-tk, lg-rail and lg-spike so they never collide with privacy-policy.css)
   The scenes of this page only. Shared pieces come from css/theme.css.

   The page's own object is the PAWN TICKET. In a pawn shop the deal is the
   ticket, and the terms are printed on its back.
   hero:    the ticket, taped to the back wall. Its rows are the 12 section
            jump links (the original contents list), its stub carries No. 0721
            (from the July 21 update date).
   terms:   the back of that ticket: one cream legal sheet (.ah-sheet +
            .ah-prose), every word of the original. Desktop: the ticket's stub
            rides beside it as a numbered index that marks where you are.
            Phones: a "Back to sections" pill sticks to the bottom left.
   closing: the short close (no booking band on a legal page): the closing line,
            the Apply button and the ticket stub No. 0721 filed on the counter spike.
   No homepage-only pieces (no lamp, no neon OPEN sign, no shop door).
   Readability first: 17px text, a 40em measure, no tilted paragraphs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO: the ticket on the wall
   -------------------------------------------------------------------------- */
.lg-thero .ah-phero__copy { position: relative; z-index: 2; }
.lg-tk { width: min(100%, 560px); margin: 14px auto 0; rotate: -0.6deg; }
.lg-tk__main { container-type: inline-size; padding-bottom: clamp(12px, 2vw, 20px); }
.lg-tk__head { margin-bottom: 4px; }
.lg-tk__brand { font-size: 1.4rem; }
.lg-tk__rows { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.lg-tk__rows a {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 6px 6px 2px;
  border-bottom: 1.5px dashed rgba(11, 20, 36, 0.28); border-radius: 4px;
  color: var(--ah-ink); font-weight: 800; font-size: 1rem; line-height: 1.2; text-decoration: none;
  transition: background-color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.lg-tk__rows li:last-child a { border-bottom: 0; }
.lg-tk__n {
  flex: none; display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 4px;
  border: 2px solid var(--ah-ink); border-radius: 6px; background: #fffdf6;
  font: 900 1rem/1 var(--ah-display); letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
  transition: background-color 0.2s;
}
.lg-tk__rows a:hover { background: rgba(27, 141, 246, 0.12); }
.lg-tk__rows a:hover .lg-tk__n { background: var(--ah-sky); }
.lg-tk__rows a:focus-visible { outline-offset: 0; }
/* two columns of six as soon as the ticket is wide enough (reading order stays 1 to 12, down then across) */
@container (min-width: 300px) {
  .lg-tk__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; column-gap: 18px; }
  .lg-tk__rows li:nth-child(6) a { border-bottom: 0; }
}
@container (max-width: 359px) { .lg-tk__no { display: none; } .lg-tk__brand { font-size: 1.22rem; } }
@container (max-width: 379px) { .lg-tk__rows { column-gap: 12px; } .lg-tk__rows a { font-size: 0.95rem; gap: 8px; } .lg-tk__n { min-width: 31px; height: 28px; font-size: 0.94rem; } }

@media (max-width: 999px) {
  .lg-thero .ah-phero__grid { gap: 30px; }
  .lg-tk { width: min(100%, 520px); }
}
/* phones: the words packed a little so the ticket's head shares the first screen */
@media (max-width: 600px) {
  .lg-thero .ah-crumbs { margin-bottom: 16px; }
  .lg-thero .ah-kicker { margin-bottom: 14px; }
  .lg-thero .ah-phero__h { margin-bottom: 16px; }
  .lg-thero .ah-phero__lead { margin-bottom: 22px; }
  .lg-thero .ah-actions { gap: 12px; }
  .lg-thero .ah-actions .btn { min-height: 48px; padding: 0 1.1em; font-size: 1rem; box-shadow: 3px 3px 0 var(--btn-shadow); }
  .lg-thero .ah-phero__grid { gap: 26px; }
  .lg-tk { rotate: -0.4deg; }
  .lg-tk__stub { height: 84px; }
}
/* 375 phones: both hero buttons still share one row, so more of the ticket shows on the first screen */
@media (max-width: 389px) {
  .lg-thero .ah-actions { gap: 10px; }
  .lg-thero .ah-actions .btn { padding: 0 0.85em; }
}

/* --------------------------------------------------------------------------
   THE FINE PRINT: the back of the ticket
   -------------------------------------------------------------------------- */
.lg-terms { --deco-at: 100% 0; --deco-size: 30% 18%; padding-top: clamp(60px, 7vw, 100px); }
.lg-tdesk { display: grid; grid-template-columns: minmax(0, 1fr); }
.lg-tcol { position: relative; min-width: 0; }

/* the stub index (desktop only): numbers in punched circles, the current section lit blue */
.lg-rail { display: none; }
@media (min-width: 1100px) {
  .lg-tdesk { grid-template-columns: 74px minmax(0, 880px); justify-content: center; column-gap: clamp(26px, 2.6vw, 40px); align-items: start; }
  .lg-rail {
    display: block; position: relative; z-index: 3; padding: 50px 9px 12px;
    border: 2px solid var(--ah-950); border-radius: 10px;
    background-color: var(--ah-cream); background-image: var(--ah-guilloche); background-position: 0 6px;
    box-shadow: 5px 5px 0 var(--ah-sky);
  }
  .lg-rail::after { content: ""; position: absolute; left: 8px; right: 8px; top: 40px; border-top: 2px dashed var(--ah-ink); }
}
@media (min-width: 1100px) and (min-height: 700px) {
  .lg-rail { position: sticky; top: calc(var(--header-h) + 24px); }
}
.lg-rail__eyelet { position: absolute; left: 50%; top: 9px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: #d6dfea; border: 2.5px solid var(--ah-sky); box-shadow: inset 0 0 0 5px #d6dfea, inset 0 0 0 12px var(--ah-950); }
.lg-rail__list { display: grid; margin: 0; padding: 0; list-style: none; }
.lg-rail__list a {
  position: relative; display: grid; place-items: center; min-height: 44px; border-radius: 6px;
  color: var(--ah-ink); text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.lg-rail__n {
  display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--ah-ink); border-radius: 50%;
  background: #fffdf6; font: 900 1.12rem/1 var(--ah-display); font-variant-numeric: tabular-nums;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.lg-rail__list a:hover .lg-rail__n { background: var(--ah-sky); }
.lg-rail__list a[aria-current] .lg-rail__n { background: var(--ah-blue); box-shadow: 2px 2px 0 var(--ah-ink); }
.lg-rail__list a:focus-visible { outline: 3px solid var(--ah-ink); outline-offset: 0; }
/* the name: always in the accessibility tree, shown as a small ink tag on hover and focus */
.lg-rail__tip {
  position: absolute; z-index: 4; left: calc(100% + 14px); top: 50%; translate: 0 -50%;
  padding: 7px 11px 6px; border: 2px solid var(--ah-950); border-radius: 4px; background: var(--ah-ink); color: var(--ah-paper);
  font: 800 0.9rem/1.1 var(--ah-body); white-space: nowrap; box-shadow: 3px 3px 0 var(--ah-blue);
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.lg-rail__list a:hover .lg-rail__tip, .lg-rail__list a:focus-visible .lg-rail__tip { opacity: 1; }

/* the sheet */
.lg-tsheet { --sx: clamp(18px, 4.6vw, 62px); --sy: clamp(28px, 4.4vw, 56px); max-width: 880px; padding: 0 var(--sx) var(--sy); rotate: none; }
.lg-tsheet__head {
  position: relative; display: flex; align-items: center; gap: 12px; margin: 0 calc(-1 * var(--sx)) var(--sy); padding: 16px var(--sx) 15px;
  border-bottom: 2.5px dashed var(--ah-ink);
}
.lg-tsheet__hole { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--band-bg, var(--ah-800)); box-shadow: 0 0 0 2px var(--ah-950), inset 2px 2px 0 rgba(0, 0, 0, 0.45); }
.lg-tsheet__brand { color: var(--ah-ink); font: 900 1.35rem/1 var(--ah-display); letter-spacing: 0.06em; text-transform: uppercase; }
.lg-tsheet__no { margin-left: auto; color: var(--ah-red-ink); font: 800 0.8rem/1.2 var(--ah-mono); letter-spacing: 0.12em; text-transform: uppercase; text-align: right; }

/* the reading column */
.lg-tprose { color: var(--ah-ink-2); font-size: 1.0625rem; line-height: 1.72; }
.lg-tprose > p, .lg-tprose > ul, .lg-tprose > h3 { max-width: 40em; }
.lg-tprose > .lg-tcont { margin-top: 0.45em; }
.lg-tprose li + li { margin-top: 0.5em; }
.lg-tprose a { text-decoration-thickness: 1.5px; overflow-wrap: anywhere; }
.lg-tprose a:hover { color: var(--ah-ink); background: rgba(27, 141, 246, 0.14); }
/* section heads: a tear line across the whole sheet, the number on an ink stub */
.lg-tprose h2 { position: relative; margin-top: 1.7em; padding-top: 1.15em; text-wrap: balance; }
.lg-tprose h2:first-child { margin-top: 0; padding-top: 0; }
.lg-tprose h2:not(:first-child)::before { content: ""; position: absolute; top: 0; left: calc(-1 * var(--sx)); right: calc(-1 * var(--sx)); border-top: 2px dashed rgba(11, 20, 36, 0.28); }
.lg-tn {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.4em; padding: 0 0.22em; margin-right: 0.1em;
  border-radius: 0.2em; background: var(--ah-ink); color: var(--ah-cream); font-size: 0.8em; letter-spacing: 0.01em;
  vertical-align: 0.1em; box-shadow: 2px 2px 0 var(--ah-blue); font-variant-numeric: tabular-nums;
}
/* the section you jumped to: its stub lights blue (a punch, once, when motion is welcome) */
.lg-tprose h2:target .lg-tn, .lg-tcard:target .lg-tn { background: var(--ah-blue); color: var(--ah-ink); box-shadow: 2px 2px 0 var(--ah-ink); }
@media (prefers-reduced-motion: no-preference) {
  .lg-tprose h2:target .lg-tn, .lg-tcard:target .lg-tn { animation: lg-punch 0.7s var(--ease-back) both; }
}
@keyframes lg-punch { 0% { scale: 1.55; } 100% { scale: 1; } }
.lg-tprose h3 { display: flex; align-items: baseline; gap: 0.55em; }
.lg-tprose h3::before { content: ""; flex: none; width: 0.55em; height: 0.55em; border: 2px solid var(--ah-ink); background: var(--ah-blue); translate: 0 -0.08em; }

/* the monthly fee line */
.lg-tprose > .lg-tfee { display: block; padding: 0.55em 0.85em 0.5em; border: 2px solid rgba(11, 20, 36, 0.55); border-radius: 4px; background: #fffdf6; color: var(--ah-ink); }

/* the rate card: a real table, a navy head, dashed rows; restacks on phones */
.lg-tprose > .lg-trates { margin-top: 1.3em; margin-bottom: 1.6em; border: 2px solid var(--ah-950); border-radius: 6px; background: #fffdf6; box-shadow: 5px 5px 0 var(--ah-blue); overflow: hidden; }
.lg-trates table { display: table; width: 100%; overflow: visible; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.lg-trates table th, .lg-trates table td { padding: 12px 16px; border: 0; text-align: left; vertical-align: top; }
.lg-trates thead th { background: var(--ah-ink); color: var(--ah-paper); font: 900 1.02rem/1.1 var(--ah-display); letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 4px solid var(--ah-blue); }
.lg-trates tbody th { width: 38%; background: none; color: var(--ah-ink); font-weight: 800; }
.lg-trates tbody td { color: var(--ah-ink); }
.lg-trates tbody tr + tr > * { border-top: 1.5px dashed rgba(11, 20, 36, 0.26); }
.lg-trates tbody tr:hover > * { background-color: rgba(27, 141, 246, 0.07); }
@media (max-width: 560px) {
  .lg-tprose > .lg-trates { margin-inline: calc(-1 * var(--sx) + 6px); box-shadow: 4px 4px 0 var(--ah-blue); }
  .lg-trates table, .lg-trates tbody, .lg-trates tr, .lg-trates table th, .lg-trates table td { display: block; }
  /* the head mirrors the rows: the usage type on top, its rate under it */
  .lg-trates thead { display: block; }
  .lg-trates thead tr { display: block; padding: 10px 14px 9px; background: var(--ah-ink); border-bottom: 4px solid var(--ah-blue); }
  .lg-trates table thead th { display: block; padding: 0; border-bottom: 0; }
  .lg-trates table thead th + th { padding-top: 3px; color: var(--ah-sky); font-size: 0.86rem; }
  .lg-trates tbody tr { padding: 11px 14px 12px; }
  .lg-trates tbody tr + tr > * { border-top: 0; }
  .lg-trates tbody tr + tr { border-top: 1.5px dashed rgba(11, 20, 36, 0.3); }
  .lg-trates table tbody th { width: auto; padding: 0 0 2px; }
  .lg-trates table tbody td { padding: 0; }
}

/* the two notes: taped to the sheet (the kit callout), nearly straight so they read easily */
.lg-tprose > .lg-tnote { max-width: 36em; margin: 1.9em 0 2em 2px; --tilt: -0.4deg; }
.lg-tnote::before { left: 26%; }
.lg-tnote p { color: var(--ah-ink); }
.lg-tnote p:first-child strong { font-size: 1.1rem; }
/* sentences of one clause sit tight; a new clause gets a little air; the body sits close under the title */
.lg-tnote p + p { margin-top: 12px; }
.lg-tnote p:first-child + p { margin-top: 6px; }
.lg-tnote p + p.lg-tcont { margin-top: 3px; }
.lg-tprose > .lg-tnote--warn { --tilt: 0.4deg; background-color: #ffe9df; }
.lg-tnote--warn::before { left: 72%; rotate: -4deg; }

.lg-trisks li + li { margin-top: 0.8em; }
/* a risk's second sentence starts its own line, so no bullet becomes a brick wall on a phone */
.lg-tsent { display: block; margin-top: 0.3em; }
@media (max-width: 480px) {
  .lg-tprose > .lg-tnote { margin-left: 0; padding: 22px 16px 18px; }
}

/* section 12: the claim stub, kept at the end of the sheet */
.lg-tprose > .lg-tcard {
  position: relative; max-width: 520px; margin: 2.8em 0 0 2px; padding: 28px 24px 22px;
  border: 2px solid var(--ah-950); border-radius: 10px;
  background-color: var(--ah-cream); background-image: var(--ah-guilloche); background-position: 0 6px;
  color: var(--ah-ink); box-shadow: 6px 6px 0 var(--ah-blue); rotate: -0.5deg;
}
.lg-tcard::before { content: ""; position: absolute; left: 10px; right: 10px; top: 10px; border-top: 2px dashed rgba(11, 20, 36, 0.4); }
.lg-tcard__eyelet { position: absolute; top: 22px; right: 20px; width: 24px; height: 24px; border-radius: 50%; background: #d6dfea; border: 2.5px solid var(--ah-sky); box-shadow: inset 0 0 0 5px #d6dfea, inset 0 0 0 12px var(--ah-950); }
.lg-tcard__code { position: absolute; top: 24px; right: 56px; width: 58px; height: 20px; background: repeating-linear-gradient(90deg, var(--ah-ink) 0 2px, transparent 2px 4px, var(--ah-ink) 4px 7px, transparent 7px 8px, var(--ah-ink) 8px 9px, transparent 9px 12px); }
.lg-tprose .lg-tcard h2 { display: block; margin: 0 0 12px; padding: 0 128px 0 0; color: var(--ah-ink); font: 900 1.6rem/1.05 var(--ah-display); letter-spacing: 0.03em; text-transform: uppercase; }
.lg-tprose .lg-tcard h2::before { display: none; }
.lg-tcard p { color: var(--ah-ink); line-height: 1.5; }
.lg-tcard p + p { margin-top: 6px; }
.lg-tcard p:nth-of-type(1) { margin-bottom: 12px; color: var(--ah-ink-2); }
@media (max-width: 480px) {
  .lg-tcard__code { display: none; }
  .lg-tprose .lg-tcard h2 { padding-right: 34px; font-size: 1.4rem; }
  .lg-tprose > .lg-tcard { padding: 28px 18px 20px; }
}

/* the way back up (phones and tablets): sticks to the bottom left while you read, hides while the ticket shows */
.lg-tback {
  position: sticky; z-index: 5; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; width: fit-content; align-items: center; gap: 8px;
  min-height: 46px; margin-top: 22px; padding: 0 16px 0 13px;
  border: 2px solid var(--ah-paper); border-radius: 999px; background: var(--ah-800); color: var(--ah-paper);
  font: 800 0.95rem/1 var(--ah-body); text-decoration: none; box-shadow: 3px 3px 0 var(--ah-blue);
  transition: opacity 0.25s, visibility 0s linear 0s, translate 0.2s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.lg-tback svg { width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lg-tback:hover { translate: -2px -2px; }
.lg-tback.is-hidden { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0s linear 0.25s; }
@media (min-width: 1100px) { .lg-tback { display: none; } }

/* small phones: a little more room for the words */
@media (max-width: 440px) {
  .lg-tsheet__brand { display: none; }
  .lg-tsheet__no { font-size: 0.74rem; letter-spacing: 0.1em; white-space: nowrap; }
}
@media (max-width: 420px) {
  .lg-tprose { font-size: 1.04rem; line-height: 1.68; }
  .lg-tprose h2 { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   THE CLOSING BAND: the short close. One quiet prop from this page's world:
   the counter spike, with ticket stub No. 0721 filed on it. Decorative
   (aria-hidden), no toy. At rest it is already filed; under html.motion the
   top stub drops onto the spike once when the band is seen.
   -------------------------------------------------------------------------- */
.lg-spike { position: relative; width: 170px; height: 150px; margin: 0 auto 30px; scale: 1.18; transform-origin: 50% 100%; }
.lg-spike__rod {
  position: absolute; z-index: 1; left: 50%; bottom: 12px; width: 6px; height: 94px; margin-left: -3px;
  border-radius: 2px; background: linear-gradient(90deg, var(--ah-steel-c), var(--ah-steel-a) 45%, var(--ah-steel-b));
  box-shadow: 0 0 0 1.5px var(--ah-950);
}
/* the part of the rod that comes out through the top stub's hole, and its point */
.lg-spike__tip {
  position: absolute; z-index: 3; left: 50%; bottom: 100px; width: 6px; height: 44px; margin-left: -3px;
  background: linear-gradient(90deg, var(--ah-steel-c), var(--ah-steel-a) 45%, var(--ah-steel-b));
  clip-path: polygon(50% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
  filter: drop-shadow(1.5px 0 0 var(--ah-950)) drop-shadow(-1.5px 0 0 var(--ah-950)) drop-shadow(0 -1.5px 0 var(--ah-950));
}
.lg-spike__stub {
  position: absolute; z-index: 2; left: 50%; width: 118px; height: 54px; margin-left: -59px;
  border: 2px solid var(--ah-950); border-left-style: dashed; border-radius: 3px 6px 6px 3px;
  background-color: var(--ah-cream);
  background-image: repeating-linear-gradient(90deg, var(--ah-ink) 0 2px, transparent 2px 4px, var(--ah-ink) 4px 7px, transparent 7px 8px, var(--ah-ink) 8px 9px, transparent 9px 12px), var(--ah-fiber);
  background-size: 58px 11px, auto; background-position: 50% calc(100% - 6px), 0 0; background-repeat: no-repeat, repeat;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
}
.lg-spike__stub i { position: absolute; left: 50%; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ah-950); box-shadow: 0 0 0 2px #d8ceb4; }
.lg-spike__stub--1 { bottom: 24px; rotate: -8deg; background-color: #e9dfc4; }
.lg-spike__stub--2 { bottom: 40px; rotate: 6deg; background-color: #f0e7cf; }
.lg-spike__stub--3 { bottom: 56px; rotate: -3deg; }
.lg-spike__stub b { position: absolute; left: 0; right: 0; top: 21px; color: var(--ah-red-ink); font: 800 0.72rem/1 var(--ah-mono); letter-spacing: 0.14em; text-align: center; }
.lg-spike__base {
  position: absolute; z-index: 4; left: 22px; right: 22px; bottom: 6px; height: 24px; border: 2px solid var(--ah-950); border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, var(--ah-steel-a), var(--ah-steel-b) 55%, var(--ah-steel-c));
  box-shadow: 0 5px 0 -1px var(--ah-steel-c), 0 5px 0 1px var(--ah-950), 5px 9px 0 1px rgba(0, 0, 0, 0.5);
}
.lg-spike__base::after { content: ""; position: absolute; left: 50%; top: 6px; width: 12px; height: 6px; margin-left: -6px; border-radius: 50%; background: var(--ah-steel-c); box-shadow: 0 0 0 1.5px var(--ah-950); }
@media (prefers-reduced-motion: no-preference) {
  html.motion .lg-tfinal:not(.is-play) .lg-spike__stub--3 { translate: 0 -46px; opacity: 0; }
  html.motion .lg-tfinal.is-play .lg-spike__stub--3 { transition: translate 0.5s var(--ease-snap) 0.35s, opacity 0.2s 0.35s; }
}
@media (max-width: 600px) {
  .lg-spike { margin-bottom: 18px; scale: 0.9; }
}