:root{--navy:#1B2540;--navy-2:#26335A;--silver:#E8EBF1;--silver-2:#F5F6F9;--line:#C9CFDB;--ink:#1D2433;--soft:#4A5470;--wine:#8C2A55;--wine-d:#6F1F42;--gold:#C8A96A;--green:#4BBB17;--green-d:#3FA312;--green-ink:#0E1B08; --color-bg:#fff;--color-surface:#fff;--color-surface-soft:#F5F6F9;--color-text:#1D2433;--color-text-soft:#4A5470;--color-primary:#1B2540;--color-primary-dark:#10172B;--color-primary-light:#E8EBF1;--color-accent:#4BBB17;--color-secondary:#8C2A55;--color-focus:#1B6FD1;--color-ink:#1B2540;--color-border:#C9CFDB; --font-heading:Georgia,'Times New Roman',serif;--font-body:'Segoe UI',Helvetica,Arial,sans-serif; --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem; --radius-sm:.5rem;--radius-md:.875rem;--radius-lg:1.25rem;--radius-pill:999px;--shadow-sm:0 1px 3px rgba(20,30,60,.15);--shadow-md:0 4px 14px rgba(20,30,60,.18);--shadow-lg:0 10px 30px rgba(10,16,40,.28);--transition-fast:150ms ease;--transition-base:250ms ease;--container-max:68rem} *{box-sizing:border-box} html{font-size:106.25%} body{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:1rem;line-height:1.7;color:var(--ink);background:#fff} h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:1.25;margin:0 0 .6rem;color:var(--navy)} p{margin:0 0 1rem} a{color:var(--wine-d)} .wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem} .sans{font-family:"Segoe UI",Helvetica,Arial,sans-serif} .hdr{background:#DCE3F0;border-bottom:3px solid var(--gold)} .hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.7rem;padding-bottom:.7rem} .hdr img{display:block;height:auto;width:auto;max-height:3.6rem;max-width:min(22rem,70vw)} .hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:3.5rem 0 0;text-align:center} .hero .eyebrow{font:600 .85rem/1.2 "Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem} .hero h1{color:#fff;font-size:clamp(2rem,5.2vw,3.2rem);max-width:22ch;margin:0 auto 1rem} .hero .lede{font-size:1.2rem;max-width:40rem;margin:0 auto 1.8rem;color:#E3E7F1} .btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-bottom:1.2rem} .btn{display:inline-block;font:700 1.05rem/1 "Segoe UI",Helvetica,Arial,sans-serif;text-decoration:none;padding:1.05rem 1.7rem;border-radius:.5rem;border:2px solid transparent;min-height:3.2rem} .btn-main,.btn-accent{background:var(--green);color:var(--green-ink)} .btn-main:hover,.btn-accent:hover{background:var(--green-d);color:var(--green-ink)} .btn-lg{padding:1.1rem 1.8rem;font-size:1.1rem}.btn-block{display:block;width:100%;text-align:center} .btn-login{background:transparent;color:var(--navy);border-color:var(--navy);padding:.75rem 1.3rem;min-height:2.9rem} .btn-login:hover{background:var(--navy);color:#fff} .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .btn-ghost{background:transparent;color:#fff;border-color:#fff} .btn-ghost:hover{background:rgba(255,255,255,.12)} .btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px} .note{font:.95rem/1.4 "Segoe UI",Helvetica,Arial,sans-serif;color:#C9D0E4;margin-bottom:2.2rem} .photo{background-color:#B9C0CF;background-size:cover;background-position:center;border-radius:.75rem;position:relative;overflow:hidden} .photo.todo::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem;font:600 .95rem/1.4 "Segoe UI",Helvetica,Arial,sans-serif;color:#3a4260;background:repeating-linear-gradient(45deg,#D5DAE5,#D5DAE5 14px,#CBD1DE 14px,#CBD1DE 28px)} .regwrap{max-width:34rem;margin:0 auto;text-align:left;position:relative;top:2.5rem} .banner{padding:4.5rem 0 2rem}.pic{display:block;width:100%;height:auto;border-radius:.75rem} .hero{padding-bottom:0} .band{background:var(--silver);border-bottom:1px solid var(--line)} .band ul{list-style:none;margin:0;padding:1rem 0;display:flex;flex-wrap:wrap;gap:.6rem 2rem;justify-content:center;font:600 1rem/1.3 "Segoe UI",Helvetica,Arial,sans-serif;color:var(--navy)} .band li:before{content:"\2713";color:var(--wine);margin-right:.5rem;font-weight:700} section.s{padding:3.5rem 0} section.alt{background:var(--silver-2)} .s h2{font-size:clamp(1.6rem,3.6vw,2.2rem)} .lead{font-size:1.15rem;color:var(--soft);max-width:44rem} .two{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center} .two .photo{aspect-ratio:4/3} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.5rem;padding:0;list-style:none} .card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--wine);border-radius:.5rem;padding:1.4rem} .card h3{font-size:1.2rem} .card p{margin:0;color:var(--soft)} .countries{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;margin:1.5rem 0 0;padding:0;list-style:none} .countries a{display:block;text-decoration:none;background:var(--navy);color:#fff;border-radius:.5rem;padding:1.1rem 1.25rem;min-height:4.4rem;border-left:5px solid var(--gold)} .countries a:hover{background:var(--navy-2)} .countries strong{display:block;font-size:1.15rem;font-family:Georgia,serif} .countries span{font:.92rem/1.4 "Segoe UI",Helvetica,Arial,sans-serif;color:#C9D0E4} .steps{counter-reset:s;list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:.5rem;padding:1.4rem 1.4rem 1.4rem 4.2rem;position:relative} .steps li:before{content:counter(s);position:absolute;left:1.1rem;top:1.2rem;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--navy);color:#fff;font:700 1.1rem/2.3rem "Segoe UI",Arial,sans-serif;text-align:center} .steps h3{font-size:1.15rem}.steps p{margin:0;color:var(--soft)} .prose{max-width:46rem} .faq details{background:#fff;border:1px solid var(--line);border-radius:.5rem;margin-bottom:.7rem} .faq summary{cursor:pointer;padding:1.1rem 1.25rem;font-weight:700;color:var(--navy);list-style:none;position:relative;padding-right:3rem} .faq summary::-webkit-details-marker{display:none} .faq summary:after{content:"+";position:absolute;right:1.25rem;top:.9rem;font-size:1.4rem;color:var(--wine)} .faq details[open] summary:after{content:"\2212"} .faq details p{padding:0 1.25rem;margin:0 0 1.1rem;color:var(--soft)} .cta{background:var(--navy);color:#fff;text-align:center;padding:3.2rem 0} .cta h2{color:#fff}.cta p{color:#D5DBEA;max-width:36rem;margin:0 auto 1.4rem} .ftr{background:#10172B;color:#C9D0E4;padding:2rem 0;font:.95rem/1.6 "Segoe UI",Helvetica,Arial,sans-serif} .ftr a{color:#fff} .ftr nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:.8rem} @media(max-width:820px){.two,.cards,.steps{grid-template-columns:1fr}.hero{padding-top:2.5rem}.hero .photo{aspect-ratio:16/9}section.s{padding:2.5rem 0}} .hdr .wrap{position:relative;flex-direction:column;justify-content:center;text-align:center;padding-top:.9rem;padding-bottom:.9rem} .hdr .btn-login{margin-top:.6rem} @media(min-width:900px){.hdr .btn-login{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);margin-top:0}} .btn-login{background:#fff} .s,.cta,.ftr{text-align:center} .s .lead,.s .prose{margin-left:auto;margin-right:auto} .cards .card,.countries a{text-align:center} .countries a{border-left:0;border-top:5px solid var(--gold)} .steps li{padding:1.4rem;text-align:center} .steps li:before{position:static;display:block;margin:0 auto .8rem} .faq summary{text-align:center;padding-left:3rem} .faq details p{text-align:center} .ftr nav{justify-content:center} .prose{margin-left:auto;margin-right:auto} .countries{grid-auto-rows:1fr}.countries li{display:flex}.countries li>*{flex:1;display:flex;flex-direction:column;justify-content:center}.c2{grid-template-columns:repeat(2,1fr)}.c3{grid-template-columns:repeat(3,1fr)}.c4{grid-template-columns:repeat(4,1fr)}.c5{grid-template-columns:repeat(5,1fr)}.states{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}.states a{min-height:3.4rem;text-align:center}@media(max-width:1000px){.c5{grid-template-columns:repeat(3,1fr)}}@media(max-width:820px){.c2,.c3,.c4,.c5{grid-template-columns:1fr}}.crumb{font:.9rem/1.4 'Segoe UI',Helvetica,Arial,sans-serif;color:#C9D0E4;margin-bottom:1rem}.crumb a{color:#fff}.tile{background:var(--navy);color:#fff;border-radius:.5rem;padding:1.1rem 1.25rem;min-height:4.4rem;border-top:5px solid var(--gold);text-align:center}.tile strong{display:block;font-size:1.15rem}.tile span{font:.92rem/1.4 'Segoe UI',Helvetica,Arial,sans-serif;color:#C9D0E4} REGISTRATION FLOW - STYLES ========================================================================= Append to the brand's site/global.css. No tokens to replace: every colour, font, space, radius and shadow is a var() read from the brand's own :root, so this inherits whatever brand-guidelines and design-system have set. IMPORTANT - an undefined token is worse than a wrong one. A var() whose property is not defined does NOT fall back; it invalidates the whole declaration and the browser drops it. So `padding: var(--space-16) 0` on a brand whose scale stops at --space-12 renders as no padding at all, with nothing logged. It reads as a design mistake rather than a missing variable. Confirm every token below exists in the brand's :root; verify_flow.py checks it for you. If a brand has renamed a token, update the var() names here - do not hard-code a literal value. Tokens consumed: --color-bg --color-surface --color-surface-soft --color-text --color-text-soft --color-primary --color-primary-dark --color-primary-light --color-accent --color-secondary --color-focus --font-heading --font-body --space-1..12 --radius-sm/md/lg/pill --shadow-sm/md/lg --transition-fast --transition-base --container-max BREAKPOINTS - keep these in step with the flow script: 700px where the step grouping changes (SCREENS_WIDE / SCREENS_NARROW), and where the stake block and mobile running order switch 980px where the hero becomes two columns 480px where padding, chip size and the member grid step up ========================================================================= */ /* ========================================================================== HOMEPAGE — ON-PAGE REGISTRATION FLOW (.hp-reg-*) Staged signup card in the hero. Feeds the HubPeople Registration URL API. Member showcase is populated live from the Member Quicksearch API. The flow is built from "parts". A screen shows one or more parts, and the desktop and mobile sequences group them differently: desktop puts I-am and Looking-for on one screen and all interests on one screen, mobile gives each of those its own screen. See the sequences in the page script. ========================================================================== */ /* --- Hero becomes a two-column layout when the flow is present --- */ .hp-hero--reg .hp-hero-inner { box-sizing: border-box; /* base rule uses content-box; width:100% needs border-box */ max-width: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); /* not 1fr: that floors at min-content */ gap: var(--space-8); padding-right: max(var(--space-4), calc((100vw - var(--container-max)) / 2)); align-items: center; } @media (min-width: 980px) { .hp-hero--reg .hp-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: var(--space-12); } } .hp-hero--reg .hp-hero-h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); } .hp-hero--reg .hp-hero-sub { margin-bottom: var(--space-6); } .hp-hero--reg .hp-hero-trust li::before { content: "✓ "; color: var(--color-accent); } /* The hero is 92vh by default. With a form in it, that forces the card off-screen on a phone, so let the section size to its content instead. */ @media (max-width: 979px) { .hp-hero--reg { min-height: 0; } .hp-hero--reg .hp-hero-inner { padding-top: var(--space-8); padding-bottom: var(--space-8); gap: var(--space-6); } .hp-hero--reg .hp-hero-sub { display: none; } /* the card is the message here */ .hp-hero--reg .hp-hero-trust { margin-top: var(--space-4); } } /* --- Anchor / contrast band: the big number the ask is measured against --- */ .hp-hero-anchor { display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-5); flex-wrap: wrap; } .hp-hero-anchor-num { font-family: var(--font-heading); font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; line-height: 1; color: var(--color-accent); } .hp-hero-anchor-label { font-size: 0.9rem; line-height: 1.4; color: color-mix(in srgb, var(--color-bg) 78%, transparent); max-width: 24ch; } /* --- The card --- */ .hp-hero--reg .hp-hero-inner > * { min-width: 0; max-width: 100%; } .hp-reg { position: relative; min-width: 0; max-width: 100%; /* The site header is sticky, so anything scrolled to #reg — the final-CTA anchor link, or a step change — would otherwise land underneath it. 6rem clears the header on both the mobile and desktop header heights. */ scroll-margin-top: 6rem; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-5); color: var(--color-text); } @media (min-width: 480px) { .hp-reg { padding: var(--space-6); } } @media (min-width: 980px) { .hp-reg { padding: var(--space-8); } } /* --- Progress: goal-gradient. Never starts at zero. --- */ .hp-reg-progress { margin-bottom: var(--space-5); } .hp-reg-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); } .hp-reg-progress-step { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-soft); } .hp-reg-progress-pct { font-size: 0.82rem; font-weight: 700; color: var(--color-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; } .hp-reg-progress-track { height: 0.5rem; border-radius: var(--radius-pill); background: var(--color-surface-soft); overflow: hidden; } .hp-reg-progress-bar { height: 100%; width: 20%; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--color-secondary), var(--color-accent)); transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1); } /* Running tally of what is banked. Re-written on every step. */ .hp-reg-headstart { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: 0.8rem; color: var(--color-text-soft); min-height: 1.4rem; } .hp-reg-headstart-tick { flex: none; width: 1.1rem; height: 1.1rem; border-radius: var(--radius-pill); background: var(--color-secondary); color: #fff; font-size: 0.68rem; display: grid; place-items: center; font-weight: 700; } .hp-reg-headstart-text { /* nowrap + ellipsis only truncates if the box is allowed to get narrower than its text. As a flex item this defaults to min-width:auto, which refuses to shrink — so the growing tally pushed the whole card past the viewport instead of ellipsising. min-width:0 is what makes it truncate. */ min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Parts --- */ .hp-reg-part { display: none; border: 0; margin: 0; padding: 0; min-width: 0; } .hp-reg-part[data-active="true"] { display: block; animation: hp-reg-in 380ms ease both; } .hp-reg-part[data-active="true"] + .hp-reg-part[data-active="true"] { margin-top: var(--space-6); } @keyframes hp-reg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hp-reg-part[data-active="true"] { animation: none; } .hp-reg-progress-bar { transition: none; } } .hp-reg-legend { font-family: var(--font-heading); font-size: clamp(1.15rem, 4.4vw, 1.6rem); font-weight: 700; line-height: 1.22; color: var(--color-text); padding: 0; margin: 0 0 var(--space-2); } .hp-reg-hint { font-size: 0.86rem; line-height: 1.5; color: var(--color-text-soft); margin: 0 0 var(--space-4); } /* --- Choice buttons (radio-backed) --- */ .hp-reg-choices { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (min-width: 480px) { .hp-reg-choices { gap: var(--space-3); } } .hp-reg-choice { position: relative; display: block; min-width: 0; } .hp-reg-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .hp-reg-choice span { display: block; text-align: center; padding: var(--space-3) var(--space-2); border: 2px solid color-mix(in srgb, var(--color-text) 14%, transparent); border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } @media (min-width: 480px) { .hp-reg-choice span { padding: var(--space-4) var(--space-3); font-size: 0.96rem; } } .hp-reg-choice span:hover { border-color: var(--color-primary-light); background: var(--color-bg); } .hp-reg-choice input:checked + span { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-bg); } .hp-reg-choice input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 3px; } /* --- Fields --- */ .hp-reg-field { margin-bottom: var(--space-4); } .hp-reg-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); } .hp-reg-input, .hp-reg-select { width: 100%; min-width: 0; font-family: inherit; font-size: 1rem; /* 16px minimum, or iOS zooms the page on focus */ color: var(--color-text); background: var(--color-surface); padding: var(--space-3); border: 2px solid color-mix(in srgb, var(--color-text) 14%, transparent); border-radius: var(--radius-sm); transition: border-color var(--transition-fast); } @media (min-width: 480px) { .hp-reg-input, .hp-reg-select { padding: var(--space-3) var(--space-4); } } .hp-reg-input:focus, .hp-reg-select:focus { outline: none; border-color: var(--color-primary); } .hp-reg-input:focus-visible, .hp-reg-select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* The month needs more room than the day: two digits versus a word, plus a dropdown arrow. Equal thirds clipped "September" at 414px. */ .hp-reg-dob { display: grid; grid-template-columns: 0.8fr 1.2fr 1fr; gap: var(--space-2); } @media (min-width: 480px) { .hp-reg-dob { grid-template-columns: 4.5rem 1fr 6rem; } } .hp-reg-error { display: none; margin: var(--space-2) 0 0; font-size: 0.82rem; font-weight: 600; color: #A3342B; } .hp-reg-error[data-shown="true"] { display: block; } /* --- Interest chips --- */ .hp-reg-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .hp-reg-chips { min-width: 0; max-width: 100%; } .hp-reg-chip { position: relative; min-width: 0; max-width: 100%; } .hp-reg-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .hp-reg-chip span { display: block; padding: 0.4rem var(--space-3); border: 1.5px solid var(--color-secondary); border-radius: var(--radius-pill); font-size: 0.82rem; font-weight: 600; color: var(--color-ink); cursor: pointer; overflow-wrap: break-word; transition: background var(--transition-fast), color var(--transition-fast); } @media (min-width: 480px) { .hp-reg-chip span { padding: var(--space-2) var(--space-4); font-size: 0.88rem; } } .hp-reg-chip span:hover { background: color-mix(in srgb, var(--color-secondary) 12%, transparent); } .hp-reg-chip input:checked + span { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; } .hp-reg-chip input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 3px; } .hp-reg-chip input:disabled + span { opacity: 0.42; cursor: not-allowed; } .hp-reg-cap { margin: var(--space-3) 0 0; font-size: 0.76rem; font-weight: 600; color: var(--color-text-soft); } /* --- Positive feedback on a choice --- */ .hp-reg-feedback { display: none; gap: var(--space-3); align-items: flex-start; background: color-mix(in srgb, var(--color-secondary) 12%, transparent); border-left: 3px solid var(--color-secondary); border-radius: var(--radius-sm); padding: var(--space-3); margin: var(--space-4) 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--color-text); } .hp-reg-feedback[data-shown="true"] { display: flex; animation: hp-reg-in 300ms ease both; } .hp-reg-feedback-icon { flex: none; font-size: 1rem; line-height: 1.45; } .hp-reg-feedback > span:last-child { min-width: 0; overflow-wrap: break-word; } /* --- Live member reward block --- */ .hp-reg-reward { display: none; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); } .hp-reg-reward[data-shown="true"] { display: block; animation: hp-reg-in 420ms ease both; } /* One line, always. Describes the filters rather than counting profiles. */ .hp-reg-reward-title { min-width: 0; font-size: 0.8rem; font-weight: 700; color: var(--color-text); margin: 0 0 var(--space-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Fixed grid, no scrollbar: 3 across on a phone, 4 from 480px up. */ .hp-reg-members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; } @media (min-width: 480px) { .hp-reg-members { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } } .hp-reg-member { min-width: 0; text-align: center; } /* The 4th card only exists on the wider grid */ .hp-reg-member:nth-child(4) { display: none; } @media (min-width: 480px) { .hp-reg-member:nth-child(4) { display: block; } } .hp-reg-member img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: var(--radius-md); background: var(--color-surface-soft); display: block; } .hp-reg-member-name { display: block; font-size: 0.74rem; font-weight: 700; margin-top: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-reg-member-meta { display: block; font-size: 0.7rem; color: var(--color-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Loss-framed summary on the final screen --- */ .hp-reg-stake { background: var(--color-bg); border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); } .hp-reg-stake-title { font-size: 0.8rem; font-weight: 700; margin: 0 0 var(--space-2); } .hp-reg-stake-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: 0.8rem; color: var(--color-text-soft); } .hp-reg-stake-list li::before { content: "✓ "; color: var(--color-secondary); font-weight: 700; } /* The final screen is the tallest in the flow, and on a phone the stake block pushed the submit button below the fold. It is also redundant there: the tally beside the progress bar already lists the same items, and the exit prompt repeats them if the visitor tries to leave. So it earns its space on the wider layout only. Breakpoint matches the screen-grouping breakpoint in the flow script. The JS still builds it — the exit prompt reads that list. */ @media (max-width: 699px) { .hp-reg-stake { display: none; } } /* --- Mobile running order ------------------------------------------------- On a phone the member strip sat between the fields and the button, which pushed the call to action towards the fold. Flipping them puts the button directly under the last field and leaves the members below it as a reward to scroll to, rather than an obstacle to scroll past. Done with `order` rather than by moving the markup so desktop keeps its original sequence. Safe for keyboard and screen-reader users here because the member strip holds no focusable elements — nothing interactive changes position, so visual and tab order stay in step. If a link or button is ever added to a member card, move the markup instead. */ @media (max-width: 699px) { .hp-reg-form { display: flex; flex-direction: column; } .hp-reg-progress { order: 1; } .hp-reg-part { order: 2; } .hp-reg-feedback { order: 3; } .hp-reg-actions { order: 4; } .hp-reg-reward { order: 5; } .hp-reg-foot { order: 6; } } /* --- Consent --- */ .hp-reg-consent { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-4); font-size: 0.78rem; line-height: 1.5; color: var(--color-text-soft); } .hp-reg-consent input { flex: none; margin-top: 0.15rem; width: 1.15rem; height: 1.15rem; accent-color: var(--color-primary); } .hp-reg-consent a { color: var(--color-ink); font-weight: 600; } /* --- Actions --- */ .hp-reg-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); } .hp-reg-back { flex: none; background: none; border: 0; padding: var(--space-3) var(--space-2); font-family: inherit; font-size: 0.84rem; font-weight: 600; color: var(--color-text-soft); cursor: pointer; border-radius: var(--radius-sm); } .hp-reg-back:hover { color: var(--color-text); } .hp-reg-back:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .hp-reg-next { flex: 1 1 auto; min-width: 0; } .hp-reg-foot { margin: var(--space-4) 0 0; font-size: 0.74rem; line-height: 1.5; color: var(--color-text-soft); text-align: center; } .hp-reg-foot a { color: var(--color-ink); font-weight: 600; } .hp-reg-noscript { margin: var(--space-4) 0 0; font-size: 0.84rem; color: var(--color-text-soft); } .hp-final-cta-anchor { display: inline-flex; } /* --- Form ships hidden, script reveals it --------------------------------- So a visitor without JavaScript sees the