/* OpenRecover v3
   Palette and type pulled from the "Recovery shouldn't be this hard" poster. */

:root{
  --ink:#050608;
  --ink-2:#0d1014;
  --ink-3:#161a1f;
  --bone:#f5efe3;
  --bone-dim:#cfc8bb;
  --signal:#fdcf1e;
  --azure:#0ba3f4;
  --dust:#8b8f95;
  --rule:rgba(245,239,227,.16);

  --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cond:"Barlow Condensed",var(--body);
  --marker:"Permanent Marker",var(--display);

  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--body);
  font-size:clamp(16.5px,1.05vw,18px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* film grain over the whole page, matching the poster's texture */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:60;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}

a{color:var(--signal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

:focus-visible{outline:3px solid var(--azure);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--signal);color:#000;
  padding:12px 18px;font-weight:700;z-index:100;
}
.skip:focus{left:12px;top:12px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.005em;margin:0;text-transform:uppercase}
h1{font-size:clamp(3.1rem,9.4vw,6.4rem);line-height:.86}
h2{font-size:clamp(2rem,4.4vw,3.3rem);line-height:.94}
h3{font-size:clamp(1.35rem,2.1vw,1.75rem);line-height:1.05}
p{margin:0 0 1.05em}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(5,6,8,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px}
.brand img{width:212px;height:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);font-family:var(--cond);font-size:1.14rem;font-weight:600;letter-spacing:.02em}
.nav a{color:var(--bone-dim)}
.nav a:hover{color:var(--bone);text-decoration:none}
.nav-cta{color:var(--ink) !important;background:var(--signal);padding:7px 16px 8px;white-space:nowrap}
.nav-cta:hover{background:#fff}
@media (max-width:760px){
  .nav a:not(.nav-cta){display:none}
  .brand img{width:158px}
  .nav-cta{font-size:1.02rem;padding:6px 12px 7px}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:clamp(46px,7vw,88px) 0 clamp(56px,8vw,104px);
  background:
    radial-gradient(120% 78% at 68% 42%, rgba(253,207,30,.13) 0%, rgba(253,207,30,0) 58%),
    radial-gradient(90% 60% at 12% 0%, rgba(11,163,244,.10) 0%, rgba(11,163,244,0) 60%),
    var(--ink);
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,64px);align-items:center}

.marker{
  font-family:var(--marker);
  color:var(--signal);
  font-size:clamp(1.05rem,2.1vw,1.5rem);
  transform:rotate(-1.6deg);
  transform-origin:left center;
  margin:0 0 .55em;
}
h1{text-shadow:0 0 60px rgba(253,207,30,.16)}
h1 em{
  font-family:var(--marker);
  font-style:normal;
  color:var(--signal);
  font-size:.82em;
  display:inline-block;
  transform:rotate(-2.2deg);
  text-shadow:none;
}
.lede{
  margin-top:clamp(20px,2.6vw,30px);
  font-size:clamp(1.06rem,1.4vw,1.24rem);
  color:var(--bone-dim);
  max-width:36em;
}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 20px}
.btn{
  display:inline-block;
  font-family:var(--cond);
  font-weight:700;
  font-size:1.16rem;
  letter-spacing:.03em;
  padding:13px 26px;
  border:2px solid transparent;
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-signal{background:var(--signal);color:#000}
.btn-signal:hover{background:#fff}
.btn-ghost{border-color:var(--bone);color:var(--bone)}
.btn-ghost:hover{background:var(--bone);color:#000}
.btn-wide{width:100%;text-align:center;cursor:pointer;font-size:1.24rem;padding:15px 26px}
.hero-note{font-size:.98rem;color:var(--dust);max-width:34em;margin:0}

/* release ticket: the hero object, built as a debris load ticket */
.hero-art{margin:0}
.ticket{
  position:relative;
  background:var(--bone);
  color:#12100c;
  padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,30px) clamp(26px,3vw,34px);
  transform:rotate(-1.1deg);
  box-shadow:0 34px 70px rgba(0,0,0,.72);
  max-width:520px;
}
.ticket::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-11px;
  height:12px;
  background:radial-gradient(circle at 6px 0, transparent 6px, var(--bone) 6.5px);
  background-size:12px 12px;
  background-position:0 -6px;
  z-index:1;
}
.ticket-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:2px solid #12100c;padding-bottom:10px;margin-bottom:6px;
}
.t-brand{font-family:var(--display);text-transform:uppercase;font-size:1.35rem;margin:0;letter-spacing:.01em}
.t-no{font-family:var(--cond);font-weight:600;font-size:1rem;color:#5b5449;margin:0}
.ticket-lines{list-style:none;margin:0;padding:0;font-family:var(--cond);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.2rem)}
.ticket-lines li{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px dotted rgba(18,16,12,.4);
}
.t-item{max-width:72%}
.t-price{font-variant-numeric:tabular-nums;white-space:nowrap}
.ticket-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.5rem,2.4vw,2rem);
  padding:14px 0 10px;border-bottom:4px double #12100c;
}
.ticket-fine{
  font-family:var(--body);font-size:.92rem;color:#5b5449;
  margin:14px 0 0;max-width:23ch;
}
.ticket-stamp{
  position:absolute;
  right:clamp(6px,1.4vw,14px);
  bottom:-20px;
  margin:0;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.15rem);
  line-height:1;
  color:#0670a9;
  border:4px solid #0670a9;
  padding:8px 14px 9px;
  transform:rotate(-8deg);
  white-space:nowrap;
  z-index:3;
  opacity:.9;
}
.hero-art figcaption{
  font-family:var(--cond);font-weight:600;font-size:1.02rem;
  color:var(--dust);margin-top:44px;max-width:34ch;
}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{order:2;margin-top:8px}
  .ticket{max-width:none;transform:rotate(-.5deg)}
  .t-no{white-space:nowrap;font-size:.92rem}
  .ticket-stamp{
    right:auto;left:50%;bottom:-18px;
    font-size:1.28rem;padding:6px 12px 7px;
    transform:translateX(-50%) rotate(-5deg);
  }
  .hero-art figcaption{margin-top:38px}
}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .7s cubic-bezier(.2,.7,.3,1) backwards}
  .hero-copy>*:nth-child(1){animation-delay:.05s}
  .hero-copy>*:nth-child(2){animation-delay:.13s}
  .hero-copy>*:nth-child(3){animation-delay:.24s}
  .hero-copy>*:nth-child(4){animation-delay:.32s}
  .hero-copy>*:nth-child(5){animation-delay:.4s}
  .hero-art{animation:fade 1s ease .3s backwards}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- ledger (paper panel) ---------- */
.ledger{
  background:var(--bone);
  color:#12100c;
  padding:clamp(50px,7vw,92px) 0;
  border-top:8px solid var(--signal);
}
.ledger h2,.ledger h3{color:#12100c}
.ledger-head{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(20px,4vw,54px);
  align-items:start;
}
.ledger-head h2{max-width:12ch}
.ask{
  font-family:var(--cond);
  font-weight:600;
  font-size:clamp(1.4rem,2.7vw,1.95rem);
  line-height:1.16;
  color:#12100c;
  margin:0 0 1em;
  max-width:26ch;
  border-left:6px solid var(--azure);
  padding-left:18px;
}
.ledger-body{max-width:58ch;color:#3a352c;font-size:1.06rem}
.ledger-body p{margin-bottom:1.05em}
.ledger-body p:last-child{margin-bottom:0}

.compare{
  margin-top:clamp(34px,4.5vw,54px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:2px solid #12100c;
}
.col{padding:clamp(22px,3vw,34px)}
.col-new{border-left:2px solid #12100c;background:rgba(11,163,244,.07)}
.col h3{font-size:clamp(1.2rem,2vw,1.55rem);margin-bottom:.7em}
.marks{list-style:none;margin:0;padding:0;font-family:var(--cond);font-weight:600;font-size:clamp(1.08rem,1.6vw,1.28rem);line-height:1.35}
.marks li{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid rgba(18,16,12,.16)}
.marks li:first-child{border-top:0}
.marks li::before{
  font-family:var(--marker);
  font-size:1.02em;
  line-height:1;
  flex:none;
  width:1.1em;
}
.marks li[data-mark="x"]::before{content:"\00d7";color:#12100c}
.marks li[data-mark="check"]::before{content:"\2713";color:#0670a9}
@media (max-width:760px){
  .ledger-head{grid-template-columns:1fr}
  .compare{grid-template-columns:1fr}
  .col-new{border-left:0;border-top:2px solid #12100c}
}

/* ---------- tools ---------- */
.tools{padding:clamp(56px,8vw,104px) 0;background:var(--ink)}
.tools-head{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(20px,4vw,54px);align-items:end;margin-bottom:clamp(30px,4vw,50px)}
.tools-head p{color:var(--bone-dim);max-width:52ch;margin:0}
.specs{list-style:none;margin:0;padding:0;border-top:2px solid var(--bone)}
.spec{
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(18px,4vw,54px);
  padding:clamp(24px,3vw,38px) 0;
  border-bottom:1px solid var(--rule);
}
.spec:last-child{border-bottom:2px solid var(--bone)}
.spec-id h3{color:var(--bone)}
.status{
  font-family:var(--cond);
  font-weight:700;
  font-size:1rem;
  letter-spacing:.06em;
  margin:.75em 0 0;
  display:inline-block;
  padding:3px 11px 4px;
}
.status-live{background:var(--azure);color:#02121c}
.status-ready{background:var(--signal);color:#1a1500}
.status-build{border:1px solid var(--dust);color:var(--dust)}
.spec-text p{margin-bottom:.8em;max-width:58ch}
.spec-text p:last-child{margin-bottom:0}
.spec-sub{color:var(--dust);font-size:.98rem}
@media (max-width:760px){
  .tools-head{grid-template-columns:1fr}
  .spec{grid-template-columns:1fr;gap:14px}
}

/* ---------- why free ---------- */
.why{padding:clamp(56px,8vw,100px) 0;background:var(--ink-2)}
.why-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,60px);align-items:start}
.why-lead h2{margin-bottom:.6em;max-width:11ch}
.why-statement{
  font-family:var(--cond);font-weight:600;
  font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.2;
  color:var(--bone);margin:0;max-width:22ch;
  border-left:6px solid var(--signal);padding-left:18px;
}
.why-body p{color:var(--bone-dim);max-width:56ch}
.why-note{font-family:var(--marker);color:var(--signal);font-size:1.08rem;transform:rotate(-1deg);transform-origin:left;margin-top:1.4em}
@media (max-width:820px){.why-in{grid-template-columns:1fr}}

/* ---------- azure band ---------- */
.band{background:var(--azure);color:#03151f;padding:clamp(48px,6.5vw,84px) 0}
.band h2{color:#03151f;max-width:18ch}
.band-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,54px);align-items:center}
.band p{margin:0;font-size:1.08rem;max-width:52ch;color:#052738}
.chips{grid-column:1/-1;list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;font-family:var(--cond);font-weight:600;font-size:1.08rem}
.chips li{border:2px solid #03151f;padding:5px 14px 6px}
@media (max-width:760px){.band-in{grid-template-columns:1fr}}

/* ---------- who ---------- */
.who{padding:clamp(56px,8vw,100px) 0;background:var(--ink-2)}
.who h2{margin-bottom:clamp(26px,3.5vw,44px)}
.who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.who-grid article{border-top:3px solid var(--signal);padding-top:18px}
.who-grid h3{margin-bottom:.55em}
.who-grid p{color:var(--bone-dim);margin:0;font-size:1.02rem}
@media (max-width:820px){.who-grid{grid-template-columns:1fr}}

/* ---------- elapsed time cards ---------- */
.cards{padding:clamp(56px,8vw,100px) 0;background:var(--ink)}
.cards-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.card-pair{display:grid;gap:16px}
.title-card{
  background:#000;
  border:3px solid var(--bone);
  outline:1px solid var(--bone);
  outline-offset:6px;
  padding:clamp(22px,3.4vw,34px);
  text-align:center;
}
.tc-label{font-family:var(--cond);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);margin:0 0 .35em;font-size:1rem}
.tc-time{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;margin:0;color:var(--bone)}
.cards-copy p{color:var(--bone-dim);max-width:50ch}
.cards-copy h2{margin-bottom:.5em}
.cards-note{font-family:var(--marker);color:var(--signal);font-size:1.05rem;transform:rotate(-1deg);transform-origin:left}
@media (max-width:820px){.cards-in{grid-template-columns:1fr}}

/* ---------- contact ---------- */
.contact{padding:clamp(56px,8vw,104px) 0;background:var(--ink-3);border-top:8px solid var(--signal)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:start}
.contact-copy h2{margin-bottom:.5em}
.contact-copy p{color:var(--bone-dim);max-width:46ch}
.contact-cred{font-size:.96rem;color:var(--dust);border-left:3px solid var(--azure);padding-left:16px;margin-top:26px}

.form{background:var(--ink);border:1px solid var(--rule);padding:clamp(22px,3vw,32px)}
.hp{position:absolute;left:-9999px}
.field{margin-bottom:16px}
.field label{
  display:block;font-family:var(--cond);font-weight:600;font-size:1.05rem;
  letter-spacing:.03em;color:var(--bone-dim);margin-bottom:6px;
}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--bone);
  color:#12100c;
  border:2px solid var(--bone);
  padding:11px 13px;
  font-family:var(--body);
  font-size:1rem;
  border-radius:0;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--azure);outline:none}
.field input::placeholder,.field textarea::placeholder{color:#7d766a}
.form-fine{font-size:.92rem;color:var(--dust);margin:14px 0 0;text-align:center}

@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.foot{background:#000;padding:clamp(38px,5vw,60px) 0;border-top:1px solid var(--rule)}
.foot-in{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(24px,4vw,54px);align-items:start}
.foot-brand img{width:78px}
.foot-tag{font-family:var(--cond);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--signal);margin:14px 0 0;font-size:1.02rem}
.foot-note p{color:var(--dust);max-width:58ch;font-size:.98rem}
.foot-legal{color:#5f636a;font-size:.9rem;margin:0}
@media (max-width:760px){.foot-in{grid-template-columns:1fr}}

/* ---------- thanks page ---------- */
.thanks{min-height:72vh;display:flex;align-items:center;padding:clamp(50px,8vw,100px) 0}
.thanks .marker{margin-bottom:.7em}
.thanks-copy{max-width:44ch}
.thanks-copy p{color:var(--bone-dim)}