/* ==========================================================================
   Legal pages (/privacy-policy, /terms-and-conditions, /cookie-policy) — header with
   switcher, sticky contents + numbered sections, cookie tables, questions band.
   Also /thank-you (next steps, case and post cards). Prefix: lg- (legal), ty- (thank you)
   ========================================================================== */

/* ---------- header ---------- */
.lg-hero { padding-bottom: clamp(44px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.lg-hero__in { position: relative; }
.lg-hero__h { font-size: clamp(2.7rem, 10vw, 6.4rem); }
.lg-hero .ph__lead { max-width: 60ch; }
.lg-hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: clamp(36px, 4vw, 56px); }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 11px; color: var(--mut); }
.lg-meta span { display: inline-flex; align-items: center; gap: 8px; }
.lg-meta time { color: var(--fg); }
.lg-sw ul { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: var(--card); }
.lg-sw a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--mut); transition: background .3s, color .3s; }
.lg-sw a:hover { color: var(--fg); background: #fff; }
.lg-sw a[aria-current] { color: #fff; background: #111; }

/* ---------- contents + sections ---------- */
.lg-body { padding-top: clamp(56px, 6vw, 96px); }
.lg-grid { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 760px); justify-content: space-between; align-items: start; gap: 48px clamp(40px, 6vw, 120px); }
.lg-side { position: sticky; top: calc(var(--hd-h) + 28px); }
.lg-toc { max-height: calc(100vh - var(--hd-h) - 56px); overflow-y: auto; overscroll-behavior: contain; padding: 20px 14px 14px; border-radius: 24px; background: var(--card); }
.lg-toc__h { margin: 0 10px 10px; font-size: 10.5px; color: var(--mut); }
.lg-toc ol { display: grid; gap: 2px; }
.lg-toc a { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; gap: 6px; padding: 8px 10px; border-radius: 12px; font-size: 14.5px; line-height: 1.35; color: var(--mut); transition: background .25s, color .25s; }
.lg-toc a .mono { font-size: 10.5px; }
.lg-toc a:hover { color: var(--fg); }
.lg-toc a.is-on { color: var(--fg); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.lg-toc a.is-on .mono { color: var(--pink); }

.lg-doc { min-width: 0; }
.lg-sec { scroll-margin-top: calc(var(--hd-h) + 32px); }
.lg-sec + .lg-sec { margin-top: clamp(44px, 5vw, 64px); padding-top: clamp(44px, 5vw, 64px); border-top: 1px solid var(--line); }
.lg-sec__h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; font-size: clamp(1.55rem, 2.4vw, 2.15rem); font-weight: 600; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.lg-sec__h .mono { flex: none; font-size: 11px; letter-spacing: .04em; color: var(--mut); translate: 0 -.2em; }

.lg-prose { font-size: 16.5px; line-height: 1.75; color: #3d3d45; }
.lg-prose > * + * { margin-top: 16px; }
.lg-prose h3 { margin-top: 32px; font-size: 1.15rem; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: var(--fg); }
.lg-prose h3 + * { margin-top: 10px; }
.lg-prose strong { font-weight: 600; color: var(--fg); }
.lg-prose a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--pink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; transition: color .2s; }
.lg-prose a:hover { color: var(--pink); }
.lg-prose code { padding: 1px 6px; border-radius: 6px; font-family: var(--mono); font-size: .82em; color: var(--fg); background: var(--card); overflow-wrap: anywhere; }
.lg-prose ul { display: grid; gap: 10px; }
.lg-prose li { position: relative; padding-left: 24px; }
.lg-prose li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--grad-warm); }

/* cookie tables: a table on wide screens, one card per cookie on phones */
.lg-tbl { margin-block: 22px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.lg-tbl table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.55; }
.lg-tbl caption { padding: 16px 18px 4px; text-align: left; font-size: 10.5px; color: var(--mut); }
.lg-tbl th, .lg-tbl td { padding: 14px 18px; text-align: left; vertical-align: top; }
.lg-tbl thead th { padding-block: 10px; font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.lg-tbl tbody tr { border-top: 1px solid var(--line); }
.lg-tbl tbody th { font-weight: 500; white-space: nowrap; }
.lg-tbl td:nth-child(2), .lg-tbl td:last-child, .lg-tbl thead th { white-space: nowrap; }

.lg-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: clamp(56px, 6vw, 88px); }
.lg-next a { position: relative; display: grid; gap: 6px; padding: 22px 64px 22px 22px; border-radius: 22px; background: var(--card); transition: background .3s, color .3s; }
.lg-next .mono { font-size: 10.5px; color: var(--mut); }
.lg-next b { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: -.025em; }
.lg-next .icon { position: absolute; right: 22px; top: 50%; width: 20px; height: 20px; translate: 0 -50%; transition: translate .35s var(--ease); }
.lg-next a:hover { color: #fff; background: #111; }
.lg-next a:hover .mono { color: #b4b4bd; }
.lg-next a:hover .icon { translate: 4px -50%; }

/* ---------- questions band ---------- */
.lg-band { overflow: hidden; background: radial-gradient(90% 120% at 100% 0%, rgba(123, 77, 255, .28), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(255, 122, 0, .2), transparent 60%), var(--bg); }
.lg-band__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 32px clamp(40px, 6vw, 96px); }
.lg-band__side { display: grid; justify-items: start; gap: 20px; }
.lg-band__mail { font-size: clamp(1.3rem, 2.3vw, 2rem); font-weight: 600; letter-spacing: -.03em; overflow-wrap: anywhere; }
.lg-band__btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .lg-grid { grid-template-columns: minmax(0, 1fr); }
  .lg-side { position: static; }
  .lg-toc { max-height: none; }
  .lg-band__in { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 640px) {
  .lg-hero__meta { flex-direction: column; align-items: flex-start; }
  .lg-sw { width: 100%; }
  .lg-sw ul { flex-wrap: nowrap; }
  .lg-sw li { flex: 1 1 0; }
  .lg-sw a { justify-content: center; width: 100%; padding: 0 10px; }
  .lg-prose { font-size: 16px; }
  .lg-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lg-tbl table, .lg-tbl caption, .lg-tbl tbody, .lg-tbl tr, .lg-tbl th, .lg-tbl td { display: block; }
  .lg-tbl tbody tr { display: grid; gap: 4px; padding: 16px 18px; }
  .lg-tbl th, .lg-tbl td { padding: 0; white-space: normal; }
  .lg-tbl td:nth-child(2), .lg-tbl td:last-child { white-space: normal; }
  .lg-tbl td:nth-child(2)::before { content: "Set by: "; color: var(--mut); }
  .lg-tbl td:nth-child(4)::before { content: "Lasts: "; color: var(--mut); }
  .lg-next { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   /thank-you
   ========================================================================== */
.ty-hero { padding-bottom: clamp(56px, 6vw, 96px); }
.ty-hero__h { font-size: clamp(2.6rem, 8.4vw, 6rem); }
.ty-ok { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 28px; border-radius: 50%; color: #111; background: var(--grad-warm); box-shadow: 0 18px 40px -18px rgba(255, 61, 129, .8); }
.ty-ok .icon { width: 28px; height: 28px; stroke-width: 2.4; }
.motion .ty-ok { animation: ty-pop .7s var(--spring) both; }
@keyframes ty-pop { from { opacity: 0; scale: .6; } }
.ty-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(44px, 5vw, 72px); counter-reset: ty; }
.ty-step { display: grid; align-content: start; gap: 10px; padding: 26px 24px; border-radius: 24px; background: var(--card); }
.ty-step .mono { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--mut); }
.ty-step h2 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.ty-step p:last-child { font-size: 15px; color: var(--mut); }
.ty-step:first-child { color: #fff; background: #111; }
.ty-step:first-child .mono, .ty-step:first-child p:last-child { color: #b4b4bd; }

.ty-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: clamp(56px, 6vw, 96px); }
.ty-case a { display: grid; height: 100%; padding: 8px; border-radius: 26px; background: var(--card); transition: translate .45s var(--ease), box-shadow .3s; }
.ty-case a:hover { translate: 0 -3px; box-shadow: 0 0 0 1px var(--line), 0 24px 40px -30px rgba(17, 17, 17, .45); }
.ty-case__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 20px; background: var(--grey); }
.ty-case__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease); }
.ty-case a:hover .ty-case__img img { scale: 1.05; }
.ty-case__tx { display: grid; align-content: start; gap: 10px; padding: 18px 14px 12px; }
.ty-case__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 10.5px; color: var(--mut); }
.ty-case__h { font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.ty-case__num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.ty-case__num b { font-size: 1.6rem; font-weight: 600; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.ty-case__num b + .icon { width: 16px; height: 16px; color: var(--mut); }
.ty-case__num b:last-of-type { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ty-case__num small { flex-basis: 100%; font-size: 13px; color: var(--mut); }
.ty-sub { margin-bottom: 18px; font-size: 10.5px; color: var(--mut); }

@media (max-width: 900px) {
  .ty-steps, .ty-cases { grid-template-columns: minmax(0, 1fr); }
}
.ty-ln { color: var(--fg); text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; transition: color .2s; }
.ty-ln:hover { color: var(--pink); }