@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=Inter:wght@400;600;800;900&display=swap');

:root {
  --ink: #070707;
  --paper: #f6f4ed;
  --white: #fff;
  --muted: #686862;
  --pad: clamp(1rem, 4vw, 4rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, Arial, sans-serif; }
a { color: inherit; }
button, input, select, textarea { font: inherit; border-radius: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.utility-header {
  min-height: 72px; padding: 10px var(--pad); border-bottom: 2px solid; background: rgba(246,244,237,.96);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(12px);
}
.utility-header a { text-decoration: none; }
.utility-back, .utility-code { font: 500 .66rem DM Mono, monospace; letter-spacing: .06em; }
.utility-code { justify-self: end; }
.utility-logo { width: min(250px, 38vw); height: 42px; }
.utility-logo img { width: 100%; height: 100%; object-fit: contain; }

.policy-hero { min-height: 46svh; padding: clamp(6rem, 13vw, 11rem) var(--pad) 3rem; border-bottom: 14px solid; display: flex; flex-direction: column; justify-content: flex-end; }
.policy-kicker { margin: 0 0 .8rem; font: 500 .68rem DM Mono, monospace; letter-spacing: .08em; }
.policy-hero h1 { max-width: 1100px; margin: 0; font: 900 clamp(4.2rem, 11vw, 10rem)/.76 Arial Black, Archivo Black, sans-serif; letter-spacing: -.09em; text-transform: uppercase; }
.policy-meta { margin: 1.5rem 0 0; font: 500 .65rem DM Mono, monospace; }

.policy-layout { display: grid; grid-template-columns: minmax(230px, .42fr) minmax(0, 1.58fr); border-bottom: 2px solid; }
.policy-index { padding: 2.5rem var(--pad); border-right: 2px solid; }
.policy-index nav { position: sticky; top: 105px; display: grid; gap: .75rem; font: 500 .68rem DM Mono, monospace; }
.policy-index a { width: fit-content; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.policy-document { max-width: 940px; padding: 3rem var(--pad) 6rem; }
.policy-document section { padding: 0 0 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid; }
.policy-document h2 { margin: 0 0 1rem; font: 900 clamp(1.6rem, 3vw, 2.7rem)/.95 Arial Black, Archivo Black, sans-serif; letter-spacing: -.045em; text-transform: uppercase; }
.policy-document p, .policy-document li { font-size: clamp(.9rem, 1.15vw, 1.03rem); line-height: 1.65; }
.policy-document ul { padding-left: 1.2rem; }
.policy-document strong { font-weight: 800; }
.policy-callout { padding: 1.2rem; border: 2px solid; background: var(--white); font: 500 .76rem/1.55 DM Mono, monospace !important; }

.support-layout { display: grid; grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr); border-bottom: 2px solid; }
.support-aside { padding: 3rem var(--pad); border-right: 2px solid; background: var(--ink); color: var(--white); }
.support-aside h2 { margin: 0 0 1.2rem; font: 900 clamp(2.7rem, 6vw, 6rem)/.82 Arial Black, Archivo Black, sans-serif; letter-spacing: -.07em; }
.support-aside p, .support-aside li { font-size: .85rem; line-height: 1.6; }
.support-aside ol { padding-left: 1.2rem; }
.ticket-panel { padding: 3rem var(--pad) 6rem; }
.ticket-reference { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 8px solid; border-bottom: 2px solid; font: 500 .7rem DM Mono, monospace; }
.ticket-form { margin-top: 1.5rem; }
.ticket-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ticket-field { margin-bottom: 1rem; }
.ticket-field.full { grid-column: 1 / -1; }
.ticket-field label { display: flex; justify-content: space-between; margin-bottom: .45rem; font: 800 .66rem DM Mono, monospace; }
.ticket-field input, .ticket-field select, .ticket-field textarea { width: 100%; border: 2px solid; background: var(--white); padding: .8rem; outline: 0; }
.ticket-field input, .ticket-field select { min-height: 56px; }
.ticket-field textarea { min-height: 180px; resize: vertical; }
.ticket-submit { width: 100%; min-height: 72px; border: 0; background: var(--ink); color: var(--white); padding: 0 1.2rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 900; }
.ticket-status { min-height: 1.4rem; margin: .8rem 0 0; color: #a32d00; font: 500 .7rem/1.5 DM Mono, monospace; }
.ticket-status.success { color: #126b34; }
.privacy-consent { font-size: .73rem; line-height: 1.5; }

.store-footer { min-height: 250px; padding: 3rem var(--pad); background: var(--ink); color: var(--white); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; }
.store-footer > img { grid-column: 1 / -1; width: min(730px, 78vw); filter: invert(1); }
.store-footer p { margin: 0; font: 500 .62rem DM Mono, monospace; }
.store-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem; font: 500 .6rem DM Mono, monospace; }

@media (max-width: 760px) {
  .utility-header { min-height: 60px; grid-template-columns: 32px 1fr; }
  .utility-back span, .utility-code { display: none; }
  .utility-logo { justify-self: end; width: 150px; }
  .policy-layout, .support-layout { grid-template-columns: 1fr; }
  .policy-index, .support-aside { border-right: 0; border-bottom: 2px solid; }
  .policy-index nav { position: static; grid-template-columns: 1fr 1fr; }
  .ticket-grid { grid-template-columns: 1fr; }
  .ticket-field.full { grid-column: auto; }
  .store-footer { grid-template-columns: 1fr; }
  .store-footer > img { width: 100%; }
  .store-footer nav { justify-content: flex-start; }
}