/* ELYSIAN — Referral site · brand SCREEN system (Inter) */
:root{
  --black:#000000; --ink:#111111; --graphite:#4A4A4A; --gray:#767676;
  --rule:#C9C9C7; --hair:#E7E7E4; --mist:#F3F3F1; --stone:#DEDEDC; --paper:#FFFFFF;
  --darkline:#2A2A2A; --ondark:#9A9A9A; --ondark-body:#D0D0CE;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
      background:var(--paper); color:var(--graphite); line-height:1.5; }
.wrap{ max-width:640px; margin:0 auto; padding:56px 28px 72px; }

/* running head */
.head{ display:flex; justify-content:space-between; align-items:flex-start;
       border-bottom:2px solid var(--black); padding-bottom:13px; }
.brand{ display:inline-block; line-height:0; }
.brand img{ height:32px; width:auto; display:block; }
.contact{ text-align:right; font-size:8px; letter-spacing:.2em; text-transform:uppercase;
          color:var(--gray); line-height:1.95; }

/* hero */
.hero{ margin-top:46px; }
.eyebrow{ font-size:8px; letter-spacing:.24em; text-transform:uppercase; color:var(--gray); font-weight:600; }
h1{ font-size:54px; font-weight:200; letter-spacing:-.02em; color:var(--ink); line-height:1.03; margin-top:16px; }
.lede{ font-size:15px; font-weight:400; color:var(--graphite); line-height:1.6; margin-top:18px; }

/* major block — one left edge, label above content, full width */
.block{ border-top:2px solid var(--black); padding-top:15px; margin-top:38px; }
.slabel{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); font-weight:700; }
.stext{ font-size:15px; font-weight:400; color:var(--graphite); line-height:1.6; margin-top:13px; }

/* grouped recognition quotes — one tonal block, not loose lines */
.quotes{ background:var(--mist); padding:22px 26px; margin-top:20px; }
.quotes .qh{ font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray); font-weight:600; margin-bottom:13px; }
.quotes .q{ font-size:15px; color:var(--ink); line-height:1.45; padding:5px 0; }

/* THE OFFER — black reverse panel */
.offer{ background:var(--black); color:var(--paper); padding:38px 40px 32px; margin-top:38px; }
.o-eyebrow{ font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--ondark); font-weight:600; }
.o-top{ display:flex; align-items:flex-end; gap:24px; margin-top:12px; flex-wrap:wrap; }
.o-fig{ font-size:108px; font-weight:200; letter-spacing:-.04em; color:var(--paper); line-height:.8; }
.o-cap{ font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--ondark); padding-bottom:18px; }
.o-terms{ font-size:14px; color:var(--ondark-body); line-height:1.6; margin-top:18px; }
.o-ways{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--darkline); margin-top:26px; }
.oway{ padding:18px 18px 0 0; }
.oway + .oway{ border-left:1px solid var(--darkline); padding-left:18px; }
.oway .w{ font-size:22px; font-weight:300; letter-spacing:-.01em; color:var(--paper); }
.oway .c{ font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--ondark); margin-top:9px; }

/* how it works — 1-2-3 strip */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:16px; }
.step{ padding:0 20px 0 0; }
.step + .step{ border-left:1px solid var(--hair); padding-left:20px; }
.step .sn{ font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray); font-weight:600; }
.step .st{ font-size:16px; color:var(--ink); font-weight:400; letter-spacing:-.01em; margin-top:10px; }
.step .sd{ font-size:12.5px; color:var(--graphite); line-height:1.5; margin-top:8px; }

/* FORM */
.form-intro{ font-size:15px; color:var(--graphite); line-height:1.6; margin-top:13px; }
form{ margin-top:6px; }
.fgroup{ margin-top:30px; }
.fglabel{ font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray); font-weight:700;
          border-bottom:1px solid var(--hair); padding-bottom:9px; }
.row{ display:grid; grid-template-columns:1fr 1fr; gap:0 26px; }
.field{ margin-top:18px; }
.flabel{ display:block; font-size:8px; letter-spacing:.24em; text-transform:uppercase; color:var(--gray); margin-bottom:9px; }
.flabel .opt{ color:var(--rule); letter-spacing:.14em; }
input[type=text],input[type=email],input[type=tel],input[type=url]{
  width:100%; border:none; border-bottom:1px solid var(--hair); background:transparent;
  font-family:inherit; font-size:15px; color:var(--ink); letter-spacing:-.01em; padding:9px 0; }
input::placeholder{ color:var(--rule); }
input:focus{ outline:none; border-bottom-color:var(--black); }

/* payout choices + opt-in */
.choices{ margin-top:14px; border-top:1px solid var(--hair); }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; pointer-events:none; }
.choice label{ display:grid; grid-template-columns:18px 1fr auto; gap:14px; align-items:center;
  padding:15px 4px; border-bottom:1px solid var(--hair); cursor:pointer; }
.choice .box{ width:18px; height:18px; border:1.25px solid var(--black); display:flex; align-items:center; justify-content:center; }
.choice .box::after{ content:""; width:9px; height:9px; background:var(--black); opacity:0; }
.choice input:checked + label .box::after{ opacity:1; }
.choice input:checked + label{ background:var(--mist); }
.choice input:focus-visible + label{ outline:2px solid var(--black); outline-offset:2px; }
.choice .n{ font-size:15px; color:var(--ink); letter-spacing:-.01em; }
.choice .p{ font-size:11px; color:var(--gray); letter-spacing:.02em; }

.optin{ margin-top:26px; }
.optin label{ grid-template-columns:18px 1fr; padding:0; border-bottom:none; align-items:start; gap:13px; }
.optin .n{ font-size:13.5px; color:var(--graphite); line-height:1.5; }
.optin .box{ margin-top:2px; }

.actions{ margin-top:34px; }
.btn{ appearance:none; -webkit-appearance:none; border:none; cursor:pointer; font-family:inherit;
  background:var(--black); color:var(--paper); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; padding:18px 40px; }
.btn:hover{ background:var(--ink); }
.btn:focus-visible{ outline:2px solid var(--black); outline-offset:3px; }
.finehint{ margin-top:18px; font-size:11px; color:var(--gray); line-height:1.7; }

.hp{ position:absolute; left:-9999px; }

/* running foot */
.foot{ margin-top:48px; padding-top:13px; border-top:1px solid var(--hair);
       display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
       font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray); }

/* thank-you page */
.ty{ margin-top:72px; }
.ty h1{ margin-top:18px; }
.ty p{ font-size:15px; color:var(--graphite); line-height:1.7; margin-top:20px; }
.ty .back{ display:inline-block; margin-top:34px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--black); padding-bottom:3px; }

/* responsive */
@media (max-width:560px){
  .wrap{ padding:40px 20px 60px; }
  h1{ font-size:40px; }
  .row{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .step{ padding:0; }
  .step + .step{ border-left:none; border-top:1px solid var(--hair); padding-left:0; padding-top:16px; margin-top:16px; }
  .o-fig{ font-size:74px; }
  .o-ways{ grid-template-columns:1fr; }
  .oway + .oway{ border-left:none; border-top:1px solid var(--darkline); padding-left:0; padding-top:16px; margin-top:8px; }
  .contact{ display:none; }
}