/* Crewpage claim-flow pages. Work-order ticket aesthetic: canary carbon copy on concrete. */
:root{
  --concrete:#E3E5E1;
  --ticket:#FFF4B8;
  --rule:#CDBF72;
  --ink:#1C2430;
  --ink-soft:#4A5362;
  --stamp:#B8321F;
  --focus:#2457C5;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--concrete);color:var(--ink);
  font:400 1.0625rem/1.55 var(--body);
  padding:clamp(16px,4vw,48px) 14px 64px;
}
a{color:var(--ink);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--focus);outline-offset:2px;
}

.brand{max-width:640px;margin:0 auto 14px;font:700 1.35rem/1 var(--display);letter-spacing:.01em}
.brand span{font-weight:500;color:var(--ink-soft)}

/* Ticket card with a perforated top edge */
.ticket{
  position:relative;max-width:640px;margin:0 auto;
  background:var(--ticket);
  padding:36px clamp(20px,5vw,44px) 40px;
  box-shadow:0 1px 0 var(--rule),0 18px 30px -24px rgba(28,36,48,.55);
}
.ticket::before{
  content:"";position:absolute;left:0;right:0;top:-7px;height:14px;
  background:radial-gradient(circle at 7px 7px,var(--concrete) 5px,transparent 5.5px) 0 0/14px 14px repeat-x;
}
.ticket-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:26px;
  font:600 1rem/1.2 var(--display);color:var(--ink-soft)
}
.ticket-head strong{color:var(--ink);font-weight:700;font-size:1.15rem}

h1{font:700 clamp(2.1rem,7vw,3rem)/1.02 var(--display);margin:0 0 12px;max-width:14ch}
h2{font:700 1.5rem/1.15 var(--display);margin:34px 0 10px}
p{margin:0 0 14px;max-width:62ch}
.lede{font-size:1.15rem;color:var(--ink-soft)}

/* Rubber stamp: the one loud element on each page */
.stamp{
  position:absolute;right:clamp(14px,5vw,40px);top:64px;
  font:800 clamp(1.7rem,6vw,2.4rem)/1 var(--display);letter-spacing:.06em;
  color:var(--stamp);border:4px double var(--stamp);border-radius:6px;
  padding:6px 12px 4px;transform:rotate(-9deg);opacity:.86;
  mix-blend-mode:multiply;pointer-events:none;
  animation:thunk .42s cubic-bezier(.2,1.6,.4,1) .35s both;
}
@keyframes thunk{from{transform:rotate(-9deg) scale(1.7);opacity:0}to{transform:rotate(-9deg) scale(1);opacity:.86}}
@media (max-width:520px){.stamp{position:static;display:inline-block;margin:0 0 14px}}

/* Genuine sequence: what happens after payment */
.steps{list-style:none;margin:6px 0 0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.2rem 1fr;gap:4px 10px;padding:10px 0;border-top:1px solid var(--rule)}
.steps li::before{content:counter(s);font:700 1.6rem/1 var(--display);color:var(--ink-soft)}
.steps b{font-weight:600}

/* Form: write-on-the-line fields */
form{margin-top:8px}
.field{margin:0 0 22px}
.field label,.field legend{display:block;font:600 1.1rem/1.2 var(--display);margin-bottom:4px}
.hint{display:block;font-size:.93rem;color:var(--ink-soft);margin:0 0 6px}
input[type=text],input[type=email],input[type=tel],input[type=url],textarea{
  width:100%;font:inherit;color:var(--ink);
  background:transparent;border:0;border-bottom:2px solid var(--ink);
  padding:8px 2px;border-radius:0;
}
textarea{min-height:120px;border:2px solid var(--ink);padding:10px;background:rgba(255,255,255,.35);resize:vertical}
input[type=file]{font:inherit;font-size:.95rem;max-width:100%}
fieldset{border:0;margin:0 0 22px;padding:0}
.choice{display:flex;gap:10px;align-items:flex-start;padding:8px 0}
.choice input{margin-top:.3em;width:1.15rem;height:1.15rem;accent-color:var(--ink)}
.two{display:grid;gap:0 20px}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
.req{color:var(--stamp)}
.hidden{display:none}

.btn{
  display:inline-block;font:700 1.3rem/1 var(--display);letter-spacing:.02em;
  background:var(--ink);color:var(--ticket);border:0;cursor:pointer;
  padding:16px 28px;text-decoration:none;min-height:52px;
}
.btn:hover{background:#2C3748}
.fine{font-size:.9rem;color:var(--ink-soft);margin-top:14px}

/* Terms */
.terms h2{font-size:1.3rem;margin:28px 0 6px}
.terms ul{padding-left:1.2rem;margin:0 0 14px;max-width:62ch}
.terms li{margin-bottom:6px}

footer{max-width:640px;margin:22px auto 0;font-size:.9rem;color:var(--ink-soft)}

@media (prefers-reduced-motion:reduce){.stamp{animation:none}}