/* Banner presentation of the shared login partial (sidebar-otp-form.php):
   the home hero and every page that drops in the [sr_login_form] shortcode.
   Loaded once per page by sr_banner_login_form_stylesheet() in functions.php.
   Everything is scoped to .srHomeBannerForm so the sidebar rendering elsewhere
   is untouched. The markup order is heading > field > terms > button, but the
   hero wants the button beside the field, so #mobile-section is a flex row and
   the children are re-ordered rather than the shared markup being rearranged. */
.bannerLoginForm #otp-form.srHomeBannerForm{background:none;background-image:none;border:0;box-shadow:none;padding:0;border-radius:0;max-width:660px}
.bannerLoginForm .srHomeBannerForm #mobile-section{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 14px}
/* the display:flex above outranks .hidden{display:none}, so the phone step
   stayed on screen once the script moved to the OTP step */
.bannerLoginForm .srHomeBannerForm #mobile-section.hidden,
.bannerLoginForm .srHomeBannerForm #otp-section.hidden,
.bannerLoginForm .srHomeBannerForm #email-section.hidden{display:none}
/* the empty error div + its 5px gap made the field 6px taller than the button,
   so the two never lined up; hide it until it actually has a message */
.bannerLoginForm .srHomeBannerForm .form-field #mobile-error:empty{display:none}
/* Chrome paints autofilled inputs rgb(232,240,254) and ignores background-color,
   so the field showed a blue block over the white wrapper. An inset shadow is
   the only way to cover it; the long transition stops it flashing back. */
.bannerLoginForm .srHomeBannerForm #mobile:-webkit-autofill,
.bannerLoginForm .srHomeBannerForm #mobile:-webkit-autofill:hover,
.bannerLoginForm .srHomeBannerForm #mobile:-webkit-autofill:focus,
.bannerLoginForm .srHomeBannerForm #mobile:-webkit-autofill:active{
-webkit-box-shadow:0 0 0 1000px #fff inset;box-shadow:0 0 0 1000px #fff inset;
-webkit-text-fill-color:#141413;caret-color:#141413;transition:background-color 9999s ease-in-out 0s}
.bannerLoginForm .srHomeBannerForm #mobile-section h3{order:1;flex:0 0 100%;margin:0 0 12px;font-size:20px;line-height:1.35;font-weight:400}
.bannerLoginForm .srHomeBannerForm #mobile-section .form-field{order:2;flex:1 1 300px;margin:0}
/* The field looked identical empty or filled: no placeholder colour was ever
   set, so it fell to the browser default and sat at almost the same weight as
   a real number. The placeholder is now clearly lighter, and a typed number
   takes the same near-black as the +91 beside it. */
.bannerLoginForm .srHomeBannerForm #mobile{color:#141413;font-size:16px}
/* The autofill rule's -webkit-text-fill-color beats `color` and reaches the
   placeholder, turning it near-black once Chrome has autofilled the field. */
.bannerLoginForm .srHomeBannerForm #mobile::placeholder{color:#9A9A9A;-webkit-text-fill-color:#9A9A9A;opacity:1}
/* 16px above is also what stops iOS Safari zooming the page when the field
   takes focus (it zooms for anything under 16px), and it matches the +91. */
/* focusing the field changed nothing at all, so keyboard users had no idea
   where they were; the existing border just takes the brand purple. */
.bannerLoginForm .srHomeBannerForm .prefixNum:focus-within{border-color:#735ae5}
.bannerLoginForm .srHomeBannerForm #mobile-error{font-size:13px}
/* the 4px bottom margin made the field wrapper 64px against the button's 60px,
   so the row's bottom edges disagreed even though the tops lined up */
/* Control sizing. Field, buttons and OTP boxes were all 60px tall -- heavy for
   a one-line form -- and on phones the boxes were 52px beside a 60px button.
   Everything is now one height: 52px on desktop, 48px on phones (still above
   the 44px touch minimum), with one radius and one border/shadow shared by the
   phone field and the OTP boxes. */
.bannerLoginForm .srHomeBannerForm .prefixNum{background:#fff;border:1px solid #D9D9E3;border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.06);padding:0 16px;height:52px;box-sizing:border-box;display:flex;align-items:center;margin-bottom:0}
.bannerLoginForm .srHomeBannerForm #feature-request-otp-btn{order:3;flex:0 0 auto;width:auto;min-width:200px;margin:0;padding:0 32px;height:52px;box-sizing:border-box;border-radius:10px;font-size:16px;font-weight:600;line-height:1.4;background:#735ae5;color:#fff;opacity:1}
/* the sidebar styling is 58% opaque in BOTH states, so disabled never reads as disabled */
.bannerLoginForm .srHomeBannerForm #feature-request-otp-btn:disabled{background:rgba(115,90,229,.45);cursor:not-allowed}
/* :enabled + !important because the enabled button was still painting the
   translucent fill; the script also writes background-color inline, which no
   plain selector can outrank */
.bannerLoginForm .srHomeBannerForm #feature-request-otp-btn:enabled,
.bannerLoginForm .srHomeBannerForm #otp-section #feature-verify-otp-btn:enabled{background:#735ae5!important;color:#fff!important;cursor:pointer}
/* Disabled was two different things, both hard to read: the script paints the
   verify button inline in #f0edfd / #b0aee0 (about 1.9:1), and the CSS fallback
   was a 45%-alpha purple that looked fine over the desktop gradient but washed
   out to lavender on the plain grey behind the form on phones. One solid style
   now, so it looks the same on any background: clearly inactive, still
   legible (#6F63C6 on #E9E5FC is about 4:1). !important to outrank the
   script's inline colours, same as the enabled rule above. */
.bannerLoginForm .srHomeBannerForm #feature-request-otp-btn:disabled,
.bannerLoginForm .srHomeBannerForm #otp-section #feature-verify-otp-btn:disabled{background:#E9E5FC!important;color:#6F63C6!important;border:1px solid #DAD3FA;opacity:1;cursor:not-allowed!important}
.bannerLoginForm .srHomeBannerForm #feature-request-otp-btn,
.bannerLoginForm .srHomeBannerForm #otp-section #feature-verify-otp-btn{transition:background-color .2s ease,color .2s ease}
.bannerLoginForm .srHomeBannerForm #mobile-section p.m0{order:5;flex:0 0 100%;margin:12px 0 0;font-size:13px;line-height:1.6;color: #7D7D7D;}
/* home stylesheets turn the partial's inline links into block elements, and
   style them at 16px/28px inside a 13px/20.8px sentence -- so the legal line
   rendered at two different sizes. Inherit both; the purple and the medium
   face stay, since that is what marks them as links. */
.bannerLoginForm .srHomeBannerForm #mobile-section p.m0 a{display:inline;font-size:inherit;line-height:inherit}
/* The API error sat at order 5, i.e. below the legal line and 85px under the
   field it was about -- it read as a footnote rather than a failure. It now
   comes straight after the input row, with the legal line pushed below it, and
   carries the weight of a message rather than fine print. */
.bannerLoginForm .srHomeBannerForm #request-message{order:4;flex:0 0 100%;margin:8px 0 0;font-size:13px;line-height:1.5;font-weight:500;color:#D93025}
.bannerLoginForm .srHomeBannerForm #request-message:empty{display:none;margin:0}
/* the send confirmation has its own slot now, so the error container is only
   ever an error. Same position and weight, the theme's existing .success green
   rather than a new colour. */
.bannerLoginForm .srHomeBannerForm #request-success{order:4;flex:0 0 100%;margin:8px 0 0;font-size:13px;line-height:1.5;font-weight:500}
.bannerLoginForm .srHomeBannerForm #request-success:empty{display:none;margin:0}
/* OTP step. Same three-row shape as the phone step -- heading, input row with
   the button beside it, one grey helper line -- so the two steps do not read
   as different forms. The markup is heading > blurb > number > digits > resend
   > button, so ordering does the rearranging and the blurb is dropped: six
   stacked rows was the text-heavy part, and the digit boxes say "enter the
   OTP" without a sentence explaining them. */
.bannerLoginForm .srHomeBannerForm #otp-section{max-width:660px;display:flex;flex-wrap:wrap;align-items:center;gap:0 14px}
.bannerLoginForm .srHomeBannerForm #otp-section h3{order:1;flex:0 0 100%;margin:0 0 12px;font-size:20px;line-height:1.35;font-weight:400}
.bannerLoginForm .srHomeBannerForm #otp-section > p:not(#resend-text){display:none}
/* same flex basis as the phone field, so the button keeps its x position when
   the step changes instead of jumping 36px left */
/* basis = the row minus the 200px button and 14px gap, so the boxes always
   take the phone field's width; with a 300px basis a short item after them
   (the number pill) could join their row and starve them of width */
.bannerLoginForm .srHomeBannerForm #otp-section .otp-input-wrapper{order:2;flex:1 1 calc(100% - 214px);min-width:0;margin:0;justify-content:flex-start;gap:10px}
.bannerLoginForm .srHomeBannerForm #otp-section #user-mobile-wrapper{order:4;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;margin:5px 0 0;font-size:13px;color:#7D7D7D}
/* OTP boxes. Six fixed 52px boxes were spread with space-between, so the gaps
   grew to 27px (half a box) and the code read as six separate fields; digits
   were a light grey at regular weight, easy to mistake for placeholder text;
   and focus was a soft glow plus a 110% zoom that jostled the neighbours. The
   boxes now share the input's width evenly with a fixed gap -- the same
   footprint as the phone field on the previous step -- digits are near-black
   and medium weight, and focus is a crisp ring with no movement. */
/* width:0, not auto: an auto-width input keeps its ~20-character intrinsic
   size, and six of those forced the row to 1500px */
.bannerLoginForm .srHomeBannerForm #otp-section .otp-digit{flex:1 1 0;min-width:0;width:0;height:52px;padding:0;box-sizing:border-box;border:1px solid #D9D9E3;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.06);color:#141413;caret-color:#735ae5;font-family:"ManropeMed",sans-serif;font-size:20px;font-variant-numeric:tabular-nums;text-align:center;-moz-appearance:textfield}
.bannerLoginForm .srHomeBannerForm #otp-section .otp-digit:hover{border-color:#BDBDCC}
.bannerLoginForm .srHomeBannerForm #otp-section .otp-digit:focus{outline:none;border-color:#735ae5;box-shadow:0 0 0 3px rgba(115,90,229,.18);transform:none}
/* spinners look wrong in a one-character box */
.bannerLoginForm .srHomeBannerForm #otp-section .otp-digit::-webkit-outer-spin-button,
.bannerLoginForm .srHomeBannerForm #otp-section .otp-digit::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bannerLoginForm .srHomeBannerForm #otp-section #resend-text{order:5;flex:0 0 auto;margin:5px 0 0;font-size:13px;line-height:1.6;color:#7D7D7D}
.bannerLoginForm .srHomeBannerForm #otp-section #feature-verify-otp-btn{order:3;flex:0 0 auto;width:auto;min-width:200px;height:52px;box-sizing:border-box;margin:0;padding:0 32px;border-radius:10px;font-size:16px;font-weight:600;background:#735ae5;color:#fff;opacity:1}
.bannerLoginForm .srHomeBannerForm #otp-section #feature-verify-otp-btn:disabled{background:rgba(115,90,229,.45);cursor:not-allowed}
.bannerLoginForm .srHomeBannerForm #otp-section #otp-error,
.bannerLoginForm .srHomeBannerForm #otp-section #otp-message{order:6;flex:0 0 100%;margin:0}
/* Messages. The five slots in this flow each had their own look: bare red text
   in two different weights, a plain green line, and an OTP error a row away
   from the boxes it was about, all losing contrast wherever the gradient
   turned blue. They now share one notice: tinted panel + icon, red for errors
   and green for confirmations, always directly under the input it concerns and
   above the grey helper line, and the faulty field (phone box or OTP boxes)
   turns the same red with one short shake. */
.bannerLoginForm .srHomeBannerForm #otp-section #otp-error,
.bannerLoginForm .srHomeBannerForm #otp-section #otp-message{order:4}
.bannerLoginForm .srHomeBannerForm #otp-section #user-mobile-wrapper{order:5}
.bannerLoginForm .srHomeBannerForm #otp-section #resend-text{order:6}
/* The helper line under the OTP boxes was one run of faint grey text with an
   emoji for a button: the number did not read as something you can change, the
   pencil renders differently on every device, and "Resend" sat mid-sentence.
   The number is now a pill with a real Change control, resend is pinned to the
   input's right edge, and the live parts (number, countdown, link) carry the
   contrast. The script's markup is untouched; the emoji is only hidden. */
.bannerLoginForm .srHomeBannerForm #otp-section #user-mobile-wrapper{gap:6px;margin:12px 0 0;padding:3px 3px 3px 12px;border:1px solid rgba(20,20,19,.08);border-radius:999px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:13px;line-height:1.4;color:#141413}
.bannerLoginForm .srHomeBannerForm #otp-section #user-mobile{font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.bannerLoginForm .srHomeBannerForm #otp-section #edit-mobile{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:rgba(115,90,229,.1);font-size:0;line-height:1;cursor:pointer;transition:background-color .15s ease}
.bannerLoginForm .srHomeBannerForm #otp-section #edit-mobile:hover{background:rgba(115,90,229,.18)}
.bannerLoginForm .srHomeBannerForm #otp-section #edit-mobile::before{content:"";width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23735ae5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 2.5l3 3L5.5 13.5H2.5v-3z'/%3E%3Cpath d='M9 4l3 3'/%3E%3C/svg%3E") no-repeat center/12px}
.bannerLoginForm .srHomeBannerForm #otp-section #edit-mobile::after{content:"Change";font-family:"ManropeMed",sans-serif;font-size:12px;font-weight:400;color:#735ae5}
.bannerLoginForm .srHomeBannerForm #otp-section #resend-text{margin:12px 0 0;font-size:13px;line-height:1.4;color:#52525B}
/* the attempts-exhausted notice is written with an inline #9a9a9a that all but
   vanishes on the gradient; give it the same grey as the rest of the line */
.bannerLoginForm .srHomeBannerForm #otp-section #resend-text > span:not(#timer):not(#resend-otp){color:#52525B!important}
/* Emphasis is ManropeMed at its own weight: the page loads only ManropeRegular
   and ManropeMed, so weight 600 had no face and the browser smeared the regular
   glyphs into a fake bold that read as a different font. */
.bannerLoginForm .srHomeBannerForm #otp-section #timer{font-family:"ManropeMed",sans-serif;font-weight:400;color:#141413;font-variant-numeric:tabular-nums}
/* !important: the script writes this link's colour inline */
/* Inline, not inline-flex: a flex box sits on the baseline by its own height,
   which lifted the link 1.6px above the text and made the line 1.6px taller the
   moment the countdown turned into this link, nudging everything below it. The
   icon sits on the text line instead. */
.bannerLoginForm .srHomeBannerForm #otp-section #resend-otp{display:inline;margin-left:2px;color:#735ae5!important;font-family:"ManropeMed",sans-serif;font-weight:400;cursor:pointer}
.bannerLoginForm .srHomeBannerForm #otp-section #resend-otp::before{content:"";display:inline-block;width:13px;height:13px;margin-right:4px;vertical-align:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23735ae5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8a5.5 5.5 0 1 1-1.6-3.9'/%3E%3Cpath d='M13.5 2.5v3h-3'/%3E%3C/svg%3E") no-repeat center/13px}
.bannerLoginForm .srHomeBannerForm #otp-section #resend-otp:hover{text-decoration:underline;text-underline-offset:2px}
/* both are keyboard-reachable now; show where focus is, for keys only */
.bannerLoginForm .srHomeBannerForm #otp-section #edit-mobile:focus-visible,
.bannerLoginForm .srHomeBannerForm #otp-section #resend-otp:focus-visible{outline:2px solid #735ae5;outline-offset:2px;border-radius:999px}
.bannerLoginForm .srHomeBannerForm #otp-section #edit-mobile:focus:not(:focus-visible),
.bannerLoginForm .srHomeBannerForm #otp-section #resend-otp:focus:not(:focus-visible){outline:none}
.bannerLoginForm .srHomeBannerForm #mobile-error:empty,
.bannerLoginForm .srHomeBannerForm #request-message:empty,
.bannerLoginForm .srHomeBannerForm #request-success:empty,
.bannerLoginForm .srHomeBannerForm #otp-section #otp-error:empty,
.bannerLoginForm .srHomeBannerForm #otp-section #otp-message:empty{display:none;margin:0}
.bannerLoginForm .srHomeBannerForm #mobile-error:not(:empty),
.bannerLoginForm .srHomeBannerForm #request-message:not(:empty),
.bannerLoginForm .srHomeBannerForm #request-success:not(:empty),
.bannerLoginForm .srHomeBannerForm #otp-section #otp-error:not(:empty),
.bannerLoginForm .srHomeBannerForm #otp-section #otp-message:not(:empty){display:flex;align-items:flex-start;gap:8px;box-sizing:border-box;margin:10px 0 2px;padding:9px 12px;border:1px solid #FECDCA;border-radius:8px;background:#FEF3F2;color:#B42318;font-size:13px;line-height:1.45;font-weight:500}
/* the phone error lives inside the field's column, which already has a 5px gap */
.bannerLoginForm .srHomeBannerForm #mobile-error:not(:empty){margin:5px 0 0}
/* ...and so is exactly as wide as the input. The other notices sit on their own
   row, so they span the button too; cap them at the input's width (row minus
   the 200px button and 14px gap) so every message lines up under its field. */
.bannerLoginForm .srHomeBannerForm #request-message:not(:empty),
.bannerLoginForm .srHomeBannerForm #request-success:not(:empty),
.bannerLoginForm .srHomeBannerForm #otp-section #otp-error:not(:empty),
.bannerLoginForm .srHomeBannerForm #otp-section #otp-message:not(:empty){flex:0 0 calc(100% - 214px);margin-right:214px}
.bannerLoginForm .srHomeBannerForm #mobile-error:not(:empty)::before,
.bannerLoginForm .srHomeBannerForm #request-message:not(:empty)::before,
.bannerLoginForm .srHomeBannerForm #otp-section #otp-error:not(:empty)::before{content:"";flex:0 0 16px;height:16px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23B42318' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4' stroke='%23B42318' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.25' r='.9' fill='%23B42318'/%3E%3C/svg%3E") no-repeat center/16px}
.bannerLoginForm .srHomeBannerForm #request-success:not(:empty),
.bannerLoginForm .srHomeBannerForm #otp-section #otp-message:not(:empty){border-color:#ABEFC6;background:#ECFDF3;color:#067647}
.bannerLoginForm .srHomeBannerForm #request-success:not(:empty)::before,
.bannerLoginForm .srHomeBannerForm #otp-section #otp-message:not(:empty)::before{content:"";flex:0 0 16px;height:16px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23067647' stroke-width='1.5'/%3E%3Cpath d='M5 8.2l2 2 4-4.2' fill='none' stroke='%23067647' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/16px}
.bannerLoginForm .srHomeBannerForm #mobile-section:has(#request-message:not(:empty)) .prefixNum,
.bannerLoginForm .srHomeBannerForm .form-field:has(#mobile-error:not(:empty)) .prefixNum,
.bannerLoginForm .srHomeBannerForm #otp-section:has(#otp-error:not(:empty)) .otp-digit:not(:focus){border-color:#F04438}
@keyframes srShake{0%,100%{transform:none}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.bannerLoginForm .srHomeBannerForm #mobile-section:has(#request-message:not(:empty)) .prefixNum,
.bannerLoginForm .srHomeBannerForm .form-field:has(#mobile-error:not(:empty)) .prefixNum,
.bannerLoginForm .srHomeBannerForm #otp-section:has(#otp-error:not(:empty)) .otp-input-wrapper{animation:srShake .32s ease-in-out}
@media (prefers-reduced-motion:reduce){
.bannerLoginForm .srHomeBannerForm #mobile-section:has(#request-message:not(:empty)) .prefixNum,
.bannerLoginForm .srHomeBannerForm .form-field:has(#mobile-error:not(:empty)) .prefixNum,
.bannerLoginForm .srHomeBannerForm #otp-section:has(#otp-error:not(:empty)) .otp-input-wrapper{animation:none}
}
/* The row needs input(300 basis) + 14 gap + button(200) = 514px. The text
   column only clears that from ~1024 up, so below it the button wraps onto its
   own line -- and with the desktop row gap of 0 it lands flush against the
   input. That is the same defect the phone had, and it was showing on tablets
   too because these rules used to start at 767. They now start where the row
   actually breaks; only the phone-specific sizes stay at 767. */
/* Working state. The label says what is happening -- the form acts on its own
   now, so a silent spinner would leave the visitor guessing. The spinner sits
   beside the text rather than replacing it, and the !important beats the inline
   colours the script writes onto the verify button. */
.bannerLoginForm .srHomeBannerForm button.is-loading{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#735ae5!important;color:#fff!important;cursor:progress!important}
.bannerLoginForm .srHomeBannerForm button.is-loading::before{content:"";flex:0 0 auto;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:srSpin .6s linear infinite}
@keyframes srSpin{to{transform:rotate(360deg)}}
/* the step used to appear instantly; it now arrives */
@keyframes srStepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bannerLoginForm .srHomeBannerForm #mobile-section:not(.hidden),
.bannerLoginForm .srHomeBannerForm #otp-section:not(.hidden){animation:srStepIn .32s cubic-bezier(.2,.7,.3,1) both}
@keyframes srMsgIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.bannerLoginForm .srHomeBannerForm #request-message:not(:empty),
.bannerLoginForm .srHomeBannerForm #request-success:not(:empty),
.bannerLoginForm .srHomeBannerForm #otp-error:not(:empty){animation:srMsgIn .22s ease both}
.bannerLoginForm .srHomeBannerForm .prefixNum{transition:border-color .18s ease}
.bannerLoginForm .srHomeBannerForm .otp-digit{transition:border-color .18s ease,box-shadow .18s ease}
/* motion is decoration here; the states all read without it */
@media (prefers-reduced-motion:reduce){
.bannerLoginForm .srHomeBannerForm #mobile-section:not(.hidden),
.bannerLoginForm .srHomeBannerForm #otp-section:not(.hidden),
.bannerLoginForm .srHomeBannerForm #request-message:not(:empty),
.bannerLoginForm .srHomeBannerForm #request-success:not(:empty),
.bannerLoginForm .srHomeBannerForm #otp-error:not(:empty){animation:none}
.bannerLoginForm .srHomeBannerForm button.is-loading::before{animation:none}
}
@media (max-width:767px){
/* phones only: the text column is too narrow for the input + button row */
.bannerLoginForm .srHomeBannerForm #mobile-section,
.bannerLoginForm .srHomeBannerForm #otp-section{gap:12px 0}
.bannerLoginForm .srHomeBannerForm #mobile-section h3,
.bannerLoginForm .srHomeBannerForm #otp-section h3{margin:0}
.bannerLoginForm .srHomeBannerForm #mobile-section .form-field,
.bannerLoginForm .srHomeBannerForm #feature-request-otp-btn{flex:0 0 100%;width:100%}
.bannerLoginForm .srHomeBannerForm #mobile-section p.m0{margin:0}
.bannerLoginForm .srHomeBannerForm #otp-section .otp-input-wrapper{flex:0 0 100%}
.bannerLoginForm .srHomeBannerForm #otp-section #feature-verify-otp-btn{flex:0 0 100%;width:100%;min-width:0}
/* stacked, the button sits under the phone field / OTP boxes, so the notice
   goes between them (same order as the input; it follows it in the markup)
   and the column gap already spaces it */
.bannerLoginForm .srHomeBannerForm #otp-section #otp-error,
.bannerLoginForm .srHomeBannerForm #otp-section #otp-message,
.bannerLoginForm .srHomeBannerForm #request-message,
.bannerLoginForm .srHomeBannerForm #request-success{order:2}
.bannerLoginForm .srHomeBannerForm #otp-section #otp-error:not(:empty),
.bannerLoginForm .srHomeBannerForm #otp-section #otp-message:not(:empty),
.bannerLoginForm .srHomeBannerForm #request-message:not(:empty),
.bannerLoginForm .srHomeBannerForm #request-success:not(:empty){margin:0;flex:0 0 100%}
/* the column gap spaces the helper line here */
.bannerLoginForm .srHomeBannerForm #otp-section #user-mobile-wrapper,
.bannerLoginForm .srHomeBannerForm #otp-section #resend-text{margin:0}
}
@media (max-width:767px){
.bannerLoginForm .srHomeBannerForm #mobile-section h3,
.bannerLoginForm .srHomeBannerForm #otp-section h3{font-size:18px;font-weight:400}
.bannerLoginForm .srHomeBannerForm #otp-section .otp-input-wrapper{gap:8px}
.bannerLoginForm .srHomeBannerForm .prefixNum,
.bannerLoginForm .srHomeBannerForm #feature-request-otp-btn,
.bannerLoginForm .srHomeBannerForm #otp-section #feature-verify-otp-btn,
.bannerLoginForm .srHomeBannerForm #otp-section .otp-digit{height:48px}
.bannerLoginForm .srHomeBannerForm #otp-section .otp-digit{font-size:18px}
/* the number and the resend timer share one line on desktop; at this width
   that line would wrap mid-sentence, so give each its own (the number pill
   keeps its own width rather than stretching into a bar) */
.bannerLoginForm .srHomeBannerForm #otp-section #user-mobile-wrapper{flex:0 0 auto;margin:0}
.bannerLoginForm .srHomeBannerForm #otp-section #resend-text{flex:0 0 100%;margin:0}
/* Under the full-width boxes and Verify button, the number pill and the resend
   line hugged the left edge and read as leftovers. Centre both on the button's
   axis; the pill is alone on its row, so auto margins centre it at its own
   width. Heading and notices stay left with the rest of the copy. */
.bannerLoginForm .srHomeBannerForm #otp-section #user-mobile-wrapper{margin:0 auto}
.bannerLoginForm .srHomeBannerForm #otp-section #resend-text{text-align:center}
}

/* SEO template heroes (sr_signup_widget() in functions.php): the form sits
   between the hero copy and the existing CTA, which carry no margins of their
   own for it, so the wrapper supplies the gap on both sides. Some heroes
   (same/next-day delivery) lay their artwork over the copy column; the
   stacking level keeps the form clickable above it. */
.srSignupWidget{position:relative;z-index:2;margin:32px 0 24px}