/* Referral Loop component · base styles. Mobile-first, no framework, no external requests.
   Theme ONLY through the --rl-* custom properties below (override them in a theme file, e.g. themes/welding-shopfloor.css).
   Everything is scoped under .rl / .rl-* so it can sit inside an existing site without leaking. */
:root{
  /* color */
  --rl-bg:#ffffff; --rl-surface:#f5f5f4; --rl-surface-2:#ffffff; --rl-text:#18181b; --rl-muted:#52525b; --rl-line:#d4d4d8;
  --rl-accent:#1d4ed8; --rl-link:#1d4ed8; --rl-focus:#1d4ed8; --rl-focus-ring:#ffffff;
  --rl-hero-bg:#18181b; --rl-hero-text:#fafafa; --rl-hero-muted:#d4d4d8; --rl-hero-accent:#93c5fd;
  --rl-offer-bg:#ffffff; --rl-offer-text:#18181b; --rl-offer-accent:#1d4ed8; --rl-offer-border:transparent;
  --rl-cta-bg:#1d4ed8; --rl-cta-text:#ffffff; --rl-cta-hover:#1e40af; --rl-cta-border:transparent; --rl-cta-shadow:none;
  --rl-cta2-bg:transparent; --rl-cta2-text:currentColor; --rl-cta2-border:currentColor;
  --rl-notice-bg:#fef3c7; --rl-notice-text:#422006; --rl-danger:#b91c1c; --rl-danger-bg:#fef2f2; --rl-success:#15803d;
  --rl-step-n-bg:var(--rl-accent); --rl-step-n-text:#ffffff;
  --rl-dock-bg:#18181b; --rl-dock-text:#fafafa;
  /* type */
  --rl-font-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --rl-font-display:var(--rl-font-body);
  --rl-display-weight:700; --rl-display-transform:none; --rl-display-tracking:-.02em; --rl-display-leading:1.08; --rl-display-style:normal;
  --rl-h1:clamp(2.1rem,7vw,3.6rem); --rl-h2:clamp(1.6rem,4.2vw,2.3rem); --rl-h3:1.2rem; --rl-body:1.0625rem;
  --rl-kicker-transform:uppercase; --rl-kicker-tracking:.14em;
  /* shape */
  --rl-radius:12px; --rl-radius-sm:8px; --rl-cta-radius:10px; --rl-cta-transform:none; --rl-cta-weight:700; --rl-cta-tracking:0; --rl-cta-font:var(--rl-font-body); --rl-cta-size:1rem;
  /* imagery: CSS-only art (gradients/patterns); no image request */
  --rl-hero-art:none; --rl-hero-art-size:auto; --rl-hero-art-pos:center; --rl-section-art:none; --rl-rule:1px solid var(--rl-line);
  /* layout */
  --rl-max:1160px; --rl-gutter:20px; --rl-pad:56px; --rl-dock-h:64px;
}
.rl-body{margin:0;background:var(--rl-bg);color:var(--rl-text);font:400 var(--rl-body)/1.6 var(--rl-font-body);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;padding-bottom:calc(var(--rl-dock-h) + env(safe-area-inset-bottom,0px))}
.rl,.rl *,.rl *::before,.rl *::after{box-sizing:border-box}
.rl{color:var(--rl-text);font-family:var(--rl-font-body)}
.rl [hidden]{display:none!important}
.rl img{max-width:100%;height:auto;display:block}
.rl p{margin:0 0 1em}
.rl a{color:var(--rl-link);text-underline-offset:.18em}
.rl h1,.rl h2,.rl h3{font-family:var(--rl-font-display);font-weight:var(--rl-display-weight);text-transform:var(--rl-display-transform);letter-spacing:var(--rl-display-tracking);line-height:var(--rl-display-leading);font-style:var(--rl-display-style);margin:0 0 .5em;text-wrap:balance}
.rl h1{font-size:var(--rl-h1)} .rl h2{font-size:var(--rl-h2)} .rl h3,.rl .rl-h3{font-size:var(--rl-h3);line-height:1.25}
.rl :focus-visible{outline:3px solid var(--rl-focus);outline-offset:2px;box-shadow:0 0 0 5px var(--rl-focus-ring)}
.rl-skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--rl-cta-bg);color:var(--rl-cta-text);padding:10px 14px;font-weight:700}
.rl-skip:focus{left:8px}
.rl main:focus{outline:none}
.rl-wrap{width:min(var(--rl-max),100% - 2*var(--rl-gutter));margin-inline:auto}
.rl-narrow{max-width:820px}
.rl-muted{color:var(--rl-muted)} .rl-small{font-size:.92rem}
.rl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rl-i{width:1.15em;height:1.15em;flex:none}
.rl-num{white-space:nowrap}
.rl section{padding:var(--rl-pad) 0}

.rl-reward-line{font-weight:700;color:var(--rl-hero-text);max-width:44ch}
/* buttons */
.rl-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.7em 1.2em;border-radius:var(--rl-cta-radius);font:var(--rl-cta-weight) var(--rl-cta-size)/1.2 var(--rl-cta-font);letter-spacing:var(--rl-cta-tracking);text-transform:var(--rl-cta-transform);text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background-color .15s,transform .15s}
.rl-btn-cta,.rl a.rl-btn-cta{background:var(--rl-cta-bg);color:var(--rl-cta-text);border-color:var(--rl-cta-border);box-shadow:var(--rl-cta-shadow)}
.rl-btn-cta:hover,.rl a.rl-btn-cta:hover{background:var(--rl-cta-hover)}
.rl-btn-2,.rl a.rl-btn-2{background:var(--rl-cta2-bg);color:var(--rl-cta2-text);border-color:var(--rl-cta2-border)}
.rl-btn-lg{min-height:54px;font-size:calc(var(--rl-cta-size) * 1.05);padding:.8em 1.4em}
.rl-btn-block{width:100%}
.rl-btn[disabled]{opacity:.7;cursor:progress}
@media (prefers-reduced-motion:no-preference){.rl-btn-cta:active{transform:translateY(1px)}}

/* top bar */
.rl-top{background:var(--rl-hero-bg);color:var(--rl-hero-text);border-bottom:1px solid color-mix(in srgb,var(--rl-hero-text) 14%,transparent)}
.rl-top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.rl-brand{display:flex;align-items:center;gap:10px;color:inherit!important;text-decoration:none;font:var(--rl-display-weight) 1.15rem/1.1 var(--rl-font-display);text-transform:var(--rl-display-transform);letter-spacing:var(--rl-display-tracking)}
.rl-top-call{display:inline-flex;align-items:center;gap:.5em;min-height:44px;padding:0 .9em;border-radius:var(--rl-cta-radius);color:inherit!important;text-decoration:none;font-weight:700;border:2px solid color-mix(in srgb,var(--rl-hero-text) 40%,transparent)}
.rl-top-num{display:none}
@media (min-width:640px){.rl-top-num{display:inline}}

/* hero */
.rl-hero{background:var(--rl-hero-art),var(--rl-hero-bg);background-size:var(--rl-hero-art-size),auto;background-position:var(--rl-hero-art-pos),0 0;color:var(--rl-hero-text)}
.rl .rl-hero{padding:40px 0 48px}
.rl-hero h1{color:var(--rl-hero-text)}
.rl-hero-grid{display:grid;gap:28px;align-items:center}
.rl-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px!important;padding:6px 14px 6px 6px;border-radius:999px;background:color-mix(in srgb,var(--rl-hero-text) 10%,transparent);border:1px solid color-mix(in srgb,var(--rl-hero-text) 22%,transparent);font-weight:700;font-size:.95rem;color:var(--rl-hero-text)}
.rl-eyebrow-plain{padding:6px 14px;font:700 .8rem/1.3 var(--rl-font-body);text-transform:var(--rl-kicker-transform);letter-spacing:var(--rl-kicker-tracking);color:var(--rl-hero-accent);background:none;border:0;padding-left:0}
.rl-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--rl-cta-bg);color:var(--rl-cta-text);font-weight:800}
.rl-lead{font-size:1.15rem;line-height:1.55;color:var(--rl-hero-muted);max-width:40ch}
.rl-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.rl-ctas .rl-btn{flex:1 1 220px}
.rl .rl-hero .rl-btn-2{color:var(--rl-hero-text);border-color:color-mix(in srgb,var(--rl-hero-text) 55%,transparent)}
.rl-notice{display:flex;gap:10px;align-items:flex-start;background:var(--rl-notice-bg);color:var(--rl-notice-text);border-radius:var(--rl-radius-sm);padding:12px 14px;max-width:44ch}
.rl-notice p{margin:0}
.rl-notice .rl-i{margin-top:.2em}
.rl-offer{background:var(--rl-offer-bg);color:var(--rl-offer-text);border:2px solid var(--rl-offer-border);border-radius:var(--rl-radius);padding:22px 22px 18px;box-shadow:0 18px 40px -24px rgba(0,0,0,.55)}
.rl-offer-k,.rl-sharecard-k{font:700 .78rem/1.3 var(--rl-font-body);text-transform:var(--rl-kicker-transform);letter-spacing:var(--rl-kicker-tracking);color:var(--rl-offer-accent);margin:0 0 8px!important}
.rl-offer-t{font:var(--rl-display-weight) 1.45rem/1.2 var(--rl-font-display);font-style:var(--rl-display-style);text-transform:none;letter-spacing:-.01em;margin:0 0 14px!important}
.rl-code{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px dashed color-mix(in srgb,var(--rl-offer-text) 35%,transparent);padding-top:12px;margin:0!important;font-size:.92rem}
.rl-code b{font:700 1rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.08em;background:color-mix(in srgb,var(--rl-offer-accent) 12%,transparent);padding:6px 10px;border-radius:6px;overflow-wrap:anywhere}
.rl-offer-fine{margin:12px 0 0!important;font-size:.9rem}
.rl-offer-fine a{color:inherit}
@media (min-width:960px){
  .rl .rl-hero{padding:72px 0 80px}
  .rl-offer{padding:30px 30px 24px}.rl-offer-t{font-size:1.75rem}
  .rl-hero-grid{grid-template-columns:1.25fr .75fr;gap:56px}
}

/* steps */
.rl-steps{background:var(--rl-section-art),var(--rl-bg)}
.rl-step-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:s}
.rl-step{display:flex;gap:16px;background:var(--rl-surface);border-radius:var(--rl-radius);padding:20px;border:var(--rl-rule)}
.rl-step h3{margin-bottom:.3em}
.rl-step p{margin:0;color:var(--rl-muted)}
.rl-step-n{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--rl-step-n-bg);color:var(--rl-step-n-text);font:800 1.15rem/1 var(--rl-font-display)}
@media (min-width:860px){.rl-step-list{grid-template-columns:repeat(3,1fr);gap:20px}.rl-step{flex-direction:column}}

/* claim / form */
.rl-claim{background:var(--rl-surface)}
.rl[data-state=done] .rl-claim{padding-top:32px}
.rl-claim-grid{display:grid;gap:28px;align-items:start}
@media (min-width:960px){.rl-claim-grid{grid-template-columns:1.35fr .65fr;gap:48px}}
.rl-card{background:var(--rl-surface-2);border:var(--rl-rule);border-radius:var(--rl-radius);padding:24px 20px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
@media (min-width:640px){.rl-card{padding:32px}}
.rl-ref-line{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--rl-success);background:color-mix(in srgb,var(--rl-success) 9%,var(--rl-surface-2));border-radius:var(--rl-radius-sm);padding:10px 12px}
.rl-fields{display:grid;gap:16px;margin-bottom:16px}
@media (min-width:640px){.rl-fields{grid-template-columns:1fr 1fr}.rl-field{grid-column:1/-1}.rl-field.rl-half{grid-column:auto}}
.rl-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.rl-field label{font-weight:700;font-size:.98rem}
.rl-opt,.rl-hint{font-weight:400;color:var(--rl-muted);font-size:.9rem}
.rl-hint{margin-top:-2px}
.rl-form input:not([type=checkbox]):not([type=hidden]),.rl-form select,.rl-form textarea{width:100%;min-height:48px;padding:11px 12px;font:400 16px/1.4 var(--rl-font-body);color:var(--rl-text);background:var(--rl-bg);border:1.5px solid color-mix(in srgb,var(--rl-text) 45%,transparent);border-radius:var(--rl-radius-sm)}
.rl-form textarea{resize:vertical;min-height:96px}
.rl-form [aria-invalid=true]{border-color:var(--rl-danger)!important;box-shadow:0 0 0 1px var(--rl-danger)}
.rl-err{color:var(--rl-danger);font-size:.92rem;font-weight:700}
.rl-check{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start}
.rl-check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--rl-cta-bg)}
.rl-check label{font-weight:400!important}
.rl-consent{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;margin:4px 0 18px;font-size:.95rem}
.rl-consent input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--rl-cta-bg)}
.rl-consent .rl-err{grid-column:2}
.rl-hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.rl-form .rl-small{margin:14px 0 0;text-align:center}
.rl-alert{display:flex;gap:12px;align-items:flex-start;background:var(--rl-danger-bg);color:var(--rl-text);border:2px solid var(--rl-danger);border-radius:var(--rl-radius-sm);padding:14px 16px;margin:0 0 18px}
.rl-alert:focus{outline:3px solid var(--rl-focus);outline-offset:2px}
.rl-alert>.rl-i{color:var(--rl-danger);margin-top:.15em}
.rl-alert p{margin:0 0 .5em}
.rl-alert .rl-btn{margin-top:4px;width:100%;padding-inline:.7em}
/* thank-you */
.rl .rl-thanks-h{font-size:var(--rl-h2)}
.rl-thanks h1:focus{outline:none}
.rl-done-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--rl-success);color:#fff;margin-bottom:16px}
.rl-done-mark .rl-i{width:30px;height:30px}
.rl-share-box{margin-top:22px;padding-top:22px;border-top:var(--rl-rule)}
.rl-linkbox{display:block;background:var(--rl-surface);color:var(--rl-text);border:1.5px dashed color-mix(in srgb,var(--rl-text) 40%,transparent);border-radius:var(--rl-radius-sm);padding:12px 14px;margin:0 0 14px;font:600 .98rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
.rl-share-actions{display:flex;flex-wrap:wrap;gap:10px}
.rl-share-actions .rl-btn{flex:1 1 130px;padding-inline:.8em}
.rl-share-actions [data-rl-share=native]{flex-basis:100%}
.rl-share-actions .rl-live{flex-basis:100%;margin:0;font-weight:700;color:var(--rl-success)}
.rl-share-actions .rl-live:empty{height:0;margin-top:-10px}
.rl .rl-thanks .rl-btn-2,.rl .rl-sharecard .rl-btn-2{color:var(--rl-text);border-color:color-mix(in srgb,var(--rl-text) 35%,transparent);background:var(--rl-surface-2)}
/* trust aside */
.rl-checks{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.rl-checks li{display:flex;gap:10px;align-items:flex-start}
.rl-checks .rl-i{color:var(--rl-success);margin-top:.25em}
.rl-media{margin:0;border-radius:var(--rl-radius);overflow:hidden;background:var(--rl-line);aspect-ratio:4/3}
.rl-media img{width:100%;height:100%;object-fit:cover}
.rl-media figcaption{font-size:.85rem;color:var(--rl-muted);padding:8px 0 0}

.rl-about{border-top:var(--rl-rule);padding-top:16px;margin-bottom:20px}
.rl .rl-about-h{font:700 .95rem/1.3 var(--rl-font-body);text-transform:none;letter-spacing:0;margin:0 0 .4em}
.rl-about-list{margin:0 0 14px;padding-left:1.1em;color:var(--rl-muted)}
.rl-about p{color:var(--rl-muted)}
.rl-terms{margin:0;padding-left:1.1em}
/* referrer share card view */
.rl-referrer{background:var(--rl-hero-art),var(--rl-hero-bg);background-size:var(--rl-hero-art-size),auto;background-position:var(--rl-hero-art-pos),0 0;color:var(--rl-hero-text)}
.rl-referrer h1{color:var(--rl-hero-text)}
.rl-referrer-grid{display:grid;gap:28px;align-items:center}
@media (min-width:960px){.rl-referrer-grid{grid-template-columns:1fr 1fr;gap:56px}}
.rl-mini-steps{margin:0;padding-left:1.3em;color:var(--rl-hero-muted);display:grid;gap:6px}
.rl-sharecard{background:var(--rl-offer-bg);color:var(--rl-offer-text);border:2px solid var(--rl-offer-border);border-radius:var(--rl-radius);padding:24px;box-shadow:0 24px 50px -28px rgba(0,0,0,.6)}
.rl-sharecard-t{font:var(--rl-display-weight) 1.5rem/1.2 var(--rl-font-display);font-style:var(--rl-display-style);margin:0 0 16px!important}
.rl-sharecard-foot{margin:14px 0 0!important;font-size:.9rem;color:var(--rl-offer-text);opacity:.85}
.rl-sharecard-foot a{color:inherit}

/* fine print + faq */
.rl-fine{background:var(--rl-bg);border-top:var(--rl-rule)}
.rl .rl-fine{padding:40px 0}
.rl-fine-grid{display:grid;gap:18px;font-size:.92rem;color:var(--rl-muted)}
@media (min-width:860px){.rl-fine-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}}
.rl-fine-block h3{font:700 .95rem/1.3 var(--rl-font-body);text-transform:none;letter-spacing:0;color:var(--rl-text);margin:0 0 .4em}
.rl-fine-block p{margin:0}
.rl-faq{background:var(--rl-surface)}
.rl-q{border-bottom:var(--rl-rule)}
.rl-q:first-of-type{border-top:var(--rl-rule)}
.rl-q summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;padding:12px 0;font-weight:700;font-size:1.05rem}
.rl-q summary::-webkit-details-marker{display:none}
.rl-q summary::after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid currentColor;font-weight:700;line-height:1}
.rl-q[open] summary::after{content:"\2212"}
.rl-q div{padding:0 0 16px;color:var(--rl-muted)}

/* footer */
.rl-foot{background:var(--rl-hero-bg);color:var(--rl-hero-muted);padding:28px 0;font-size:.95rem}
.rl-foot a{color:var(--rl-hero-text)}
.rl-foot strong{color:var(--rl-hero-text)}
.rl-foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.rl-foot p{margin:0}

/* sticky mobile CTA (thumb zone) */
.rl-dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--rl-dock-bg);box-shadow:0 -6px 20px rgba(0,0,0,.18);transition:transform .2s}
.rl-dock a{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;border-radius:var(--rl-cta-radius);font:var(--rl-cta-weight) var(--rl-cta-size)/1 var(--rl-cta-font);text-transform:var(--rl-cta-transform);letter-spacing:var(--rl-cta-tracking);text-decoration:none}
.rl-dock-call{color:var(--rl-dock-text)!important;border:2px solid color-mix(in srgb,var(--rl-dock-text) 45%,transparent)}
.rl-dock-form{background:var(--rl-cta-bg);color:var(--rl-cta-text)!important}
.rl-dock.rl-dock-off{transform:translateY(110%)}
@media (min-width:900px){.rl-dock{display:none}.rl-body{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.rl *{transition:none!important;scroll-behavior:auto!important}}
@media print{.rl-dock,.rl-top-call{display:none}}