/* Sign in (S-02, S-03) and checkout (S-04), design package 13f8266: SignIn.dc.html,
   SignIn-code.dc.html and Checkout.dc.html. Loaded after design.css, tokens-a11y.css and product.css.
   Values are the design's inline values, moved here because the pages are static HTML. The page
   scripts are unchanged and keep every id they read; elements they create (code cells, plan
   features, the busy spinner) are styled by id. Deviations (D-C22 onward) are recorded in
   docs/ui-revamp/design-13f8266/DEVIATIONS.md under "Public site (C)". */

.rw-auth-page{min-height:100vh;background:#F4F4F6;padding:24px 16px 48px}
.rw-auth-top,.rw-auth-card{max-width:1180px;margin:0 auto}
.rw-auth-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 8px;margin-bottom:28px}
.rw-auth-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0B0B0D}
.rw-auth-brand img{width:32px;height:32px;border-radius:9px;display:block}
.rw-auth-brand span{font-size:17px;font-weight:600;letter-spacing:-0.03em}
.rw-auth-toplink{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500}

.rw-auth-card{border-radius:32px;background:#FFFFFF;border:1px solid #ECECF0;box-shadow:0 60px 120px -60px rgba(11,11,13,0.4);overflow:hidden}

/* Orange side. Contrast: the supplied highlight sat behind the lead text; same treatment as the
   public site's orange card (D-C10): base stops 1 step darker, highlight softer. */
.rw-auth .rw-orangecard{background:radial-gradient(70% 80% at 88% 8%,rgba(255,152,98,0.55) 0%,rgba(255,152,98,0) 70%),radial-gradient(60% 70% at 0% 100%,rgba(168,44,4,0.7) 0%,rgba(168,44,4,0) 70%),linear-gradient(140deg,#D5410B 0%,#C93C0A 60%,#C23B0A 100%)}
.rw-auth-side{flex:1 1 420px;padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;min-height:560px}
/* Without the logo (maintenance drops the img), the intro and facts sit together in the middle, not at
   the 2 ends of an empty card. */
.rw-auth-side:not(:has(.rw-auth-logo)){justify-content:center}
.rw-auth-dots{position:absolute;inset:0}
/* The supplied glow is white at 28% and sat under the fact rows; 5% keeps a trace of it. */
.rw-auth-glow{position:absolute;right:-80px;bottom:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,0.05),rgba(255,255,255,0))}
.rw-auth-logo{position:relative;width:64px;height:64px;border-radius:18px;display:block;box-shadow:0 0 0 2px rgba(255,255,255,0.85),0 24px 40px -14px rgba(80,20,0,0.6)}
.rw-auth-intro{position:relative;display:flex;flex-direction:column;gap:16px}
.rw-auth-h1{margin:0;font-size:44px;line-height:1.04;letter-spacing:-0.04em;font-weight:600}
.rw-auth-h1 span{display:block}
.rw-auth-lead{margin:0;max-width:380px;font-size:16.5px;line-height:1.55}
.rw-auth-facts{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.rw-auth-facts li{display:flex;align-items:center;gap:12px;font-size:15.5px}
/* The supplied icon tiles are white at 16% glass; darker glass keeps the row text above 4.5:1. */
.rw-auth-facticon{flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:rgba(70,16,0,0.2);border:1px solid rgba(255,255,255,0.28);display:flex;align-items:center;justify-content:center}

/* Form side. */
.rw-auth-main{flex:1 1 440px;padding:56px 56px 48px;display:flex;flex-direction:column;justify-content:center;gap:24px;min-width:0}
.rw-auth-step{display:flex;flex-direction:column;gap:22px;max-width:440px;width:100%}
.rw-auth-step[hidden]{display:none}
.rw-auth-head{display:flex;flex-direction:column;gap:8px}
.rw-auth-head h1,.rw-auth-head h2{margin:0;font-size:28px;line-height:1.15;letter-spacing:-0.03em;font-weight:500}
.rw-auth-sub{margin:0;font-size:15.5px;line-height:1.5;color:#5B5B66}
.rw-auth-sub strong{font-weight:600;color:#0B0B0D;overflow-wrap:anywhere}
.rw-auth-form{display:flex;flex-direction:column;gap:22px}
.rw-auth-field{display:flex;flex-direction:column;gap:8px}
.rw-auth-field label,.rw-auth-code legend{font-size:14px;font-weight:500;color:#0B0B0D}
.rw-auth-submit{display:flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border:0;border-radius:999px;background:#0B0B0D;color:#FFFFFF;font-family:inherit;font-size:16px;font-weight:500;cursor:pointer;text-decoration:none}
.rw-auth-submit:disabled{cursor:not-allowed}
.rw-auth-small{margin:0;font-size:13.5px;line-height:1.5;color:#6B6B76}
.rw-auth-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px}
.rw-auth-links .rw-linkbtn{font-weight:500;min-height:32px}
.rw-auth-quiet{color:#5B5B66}
.rw-auth-legal{margin:0;font-size:13px;line-height:1.5;color:#6B6B76;max-width:440px}
.rw-auth-foot{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px}
.rw-auth-foot[hidden]{display:none}
.rw-auth-foot a{color:#45454F}

/* Messages written by the scripts (role alert or status). */
.rw-auth .msg{margin:0;display:flex;align-items:flex-start;gap:6px;font-size:13.5px;line-height:1.45}
.rw-auth .msg[hidden]{display:none}
.rw-auth .msg.err{color:#A50E26}
.rw-auth .msg.ok{color:#146C43}
.rw-auth .msg::before{content:"";flex:0 0 14px;width:14px;height:14px;margin-top:2px;background:currentColor;-webkit-mask:var(--rw-msg-icon) center/contain no-repeat;mask:var(--rw-msg-icon) center/contain no-repeat}
.rw-auth .msg.err{--rw-msg-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.01'/%3E%3C/svg%3E")}
.rw-auth .msg.ok{--rw-msg-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
/* The partial sign-out note: the design's attention notice. */
.rw-auth-note{margin:0;padding:14px 16px;border-radius:16px;background:#FFF8E5;border:1px solid #F5DFA0;color:#7A5600;font-size:14px;line-height:1.5}
.rw-auth-note[hidden]{display:none}

/* Busy state the scripts insert into buttons. */
.rw-auth .spinner{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,0.35);border-top-color:#FFFFFF;animation:rw-auth-spin 1s linear infinite;vertical-align:-3px}
@keyframes rw-auth-spin{to{transform:rotate(360deg)}}

/* Code cells: created by the script with no class, so styled by id with the design's OTP values. */
.rw-auth-code{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.rw-auth-code legend{padding:0;margin-bottom:10px}
#codeBoxes{display:flex;flex-wrap:wrap;gap:8px}
#codeBoxes input{width:56px;height:64px;border-radius:16px;border:1.5px solid #E2E2E7;text-align:center;font-family:inherit;font-size:26px;font-weight:500;color:#0B0B0D;outline:none;background:#FFFFFF;transition:border-color .15s,box-shadow .15s;padding:0}
#codeBoxes input:focus{border-color:#FF5A1F;box-shadow:0 0 0 4px rgba(255,90,31,.14)}
#codeBoxes input[aria-invalid="true"]{border-color:#C8102E;box-shadow:0 0 0 4px rgba(200,16,46,.10)}

/* Checkout. */
.rw-co-side{gap:28px;justify-content:flex-start}
.rw-co-pill{position:relative;align-self:flex-start;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:rgba(70,16,0,0.3);border:1px solid rgba(255,255,255,0.3);font-size:13.5px;font-weight:500}
.rw-co-plan{position:relative;display:flex;flex-direction:column;gap:10px}
.rw-co-plan h2{margin:0;font-size:40px;line-height:1.05;letter-spacing:-0.04em;font-weight:600}
.rw-co-desc{margin:0;font-size:16px;line-height:1.5}
.rw-co-feats{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:16px}
.rw-co-feats li{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.rw-co-feats img{flex:0 0 17px;width:17px;height:17px;margin-top:3px;filter:brightness(0) invert(1)}
.rw-co-tax{position:relative;margin:auto 0 0;font-size:14px;line-height:1.5;color:#FFFFFF}
.rw-co-main{justify-content:flex-start;padding:48px}
.rw-co-mode{align-self:flex-start;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:#F3F3F5;color:#45454F;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px #D9D9DF}
.rw-co-mode[hidden]{display:none}
.rw-co-mode[data-mode="live"]{background:#E6F6EE;color:#146C43;box-shadow:inset 0 0 0 1px #BFE6D2}
.rw-co-mode[data-mode="test"]{background:#FFF4D6;color:#7A5600;box-shadow:inset 0 0 0 1px #F5DFA0}
.rw-co-notice{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 14px;padding:14px 16px;border-radius:16px;font-size:14px;line-height:1.5;color:#45454F}
.rw-co-notice[hidden]{display:none}
.rw-co-noticeicon{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:#FFFFFF;display:flex;align-items:center;justify-content:center}
.rw-co-noticetext{flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:3px}
.rw-co-noticetext strong{font-size:14.5px;font-weight:600}
/* Shown only when the script has named the mode disabled (data-mode on #coMode), never before. */
.rw-co-off{display:none;background:#FDECEF;border:1px solid #F6C9D1}
.rw-co-off .rw-co-noticeicon{color:#A50E26;box-shadow:inset 0 0 0 1px #F6C9D1}
.rw-co-off strong{color:#A50E26}
#coMode[data-mode="disabled"]~.rw-co-off{display:flex}
.rw-co-banner{background:#FFF8E5;border:1px solid #F5DFA0;color:#7A5600}
.rw-co-kv{margin:0;display:flex;flex-direction:column;border:1px solid #ECECF0;border-radius:18px;overflow:hidden;font-size:15px}
.rw-co-kv>div{display:flex;justify-content:space-between;gap:12px;padding:14px 18px}
.rw-co-kv>div+div{border-top:1px solid #F0F0F3}
.rw-co-kv dt{color:#6B6B76}
.rw-co-kv dd{margin:0;font-weight:500;text-align:right;overflow-wrap:anywhere}
.rw-co-actions{display:flex;flex-direction:column;gap:10px;margin:0}
.rw-co-actions[hidden]{display:none}
.rw-co-buttons{display:flex;flex-wrap:wrap;gap:10px}
.rw-co-back{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 22px;border-radius:999px;background:#FFFFFF;border:1px solid #E2E2E7;color:#0B0B0D;font-size:15px;font-weight:500}
.rw-co-done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;border-radius:18px;background:#FAFAFB;border:1px solid #ECECF0}
.rw-co-done[hidden]{display:none}
.rw-co-done h2{margin:0;font-size:22px;letter-spacing:-0.02em;font-weight:500}
.rw-co-done p{margin:0;font-size:14.5px;color:#45454F}
.rw-co-donechip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#F3F3F5;color:#45454F;font-size:12.5px;font-weight:500}
.rw-co-link{color:#0B0B0D;font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* Phones (design: stacked, orange panel on top; cells 44 by 54). */
@container rw (max-width: 760px){
  .rw-auth-side,.rw-auth-main,.rw-co-main{padding:28px 22px}
  .rw-auth-side{min-height:0;gap:24px}
  .rw-auth-h1{font-size:36px}
  .rw-co-plan h2{font-size:32px}
  #codeBoxes input{width:44px;height:54px;font-size:22px}
  .rw-auth-card{border-radius:26px}
  .rw-auth .rw-orangecard{background:radial-gradient(70% 50% at 95% 0%,rgba(255,152,98,0.35) 0%,rgba(255,152,98,0) 70%),radial-gradient(60% 70% at 0% 100%,rgba(168,44,4,0.7) 0%,rgba(168,44,4,0) 70%),linear-gradient(140deg,#D5410B 0%,#C93C0A 60%,#C23B0A 100%)}
}

@media (prefers-reduced-motion: reduce){
  .rw-auth .spinner{animation:none;border-top-color:rgba(255,255,255,0.35)}
  #codeBoxes input{transition:none}
}

/* Checkout panel purchase details (C4, 19 Oct): price, renewal or 1-off, and the cancellation and
   returned-audit rules that exist today. Text set by the page script from the catalogue. */
.rw-co-big{margin:0;font-size:44px;line-height:1;font-weight:500;letter-spacing:-0.045em}
.rw-co-big:empty{display:none}
.rw-co-terms{position:relative;list-style:none;margin:0;padding:16px 0 0;border-top:1px solid rgba(255,255,255,0.28);display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.5}
.rw-co-terms:empty{display:none}
.rw-auth-legal a{color:#0B0B0D;font-weight:500;text-decoration:underline;text-underline-offset:3px}
@container rw (max-width: 760px){.rw-co-big{font-size:36px}}

/* Withdrawal consent (checkout): the whole row is the target, at least 44px tall. */
.rw-co-consent{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start}
.rw-co-consent[hidden]{display:none}
.rw-co-consent input{width:22px;height:22px;margin:2px 0 0;accent-color:#0B0B0D;cursor:pointer}
.rw-co-consent label{display:block;min-height:24px;padding:1px 0;font-size:15px;line-height:1.5;color:#18181B;cursor:pointer}
.rw-co-consent p{grid-column:2;margin:0}
.rw-co-consentlinks{font-size:13.5px;line-height:1.5;color:#6B6B76}
.rw-co-consentlinks a{display:inline-block;padding:4px 0}
.rw-co-consent input:focus-visible{outline:2px solid #0B0B0D;outline-offset:2px}

/* Withdrawal page (/withdraw): 1 column, 48px fields and buttons, errors beside their field. */
.rw-wd-page{max-width:760px;margin:0 auto}
.rw-wd-main{display:flex;flex-direction:column;gap:22px;padding:8px 16px 48px}
.rw-wd-form,.rw-wd-confirm,.rw-wd-done,.rw-wd-info{display:flex;flex-direction:column;gap:16px;padding:22px;border-radius:20px;background:#FFFFFF;border:1px solid #ECECF0}
.rw-wd-form[hidden],.rw-wd-confirm[hidden],.rw-wd-done[hidden]{display:none}
.rw-wd-field{display:flex;flex-direction:column;gap:6px}
.rw-wd-field[hidden]{display:none}
.rw-wd-field label{font-size:14.5px;font-weight:600;color:#18181B}
.rw-wd-field input,.rw-wd-field select{min-height:48px;box-sizing:border-box;width:100%;padding:0 14px;border-radius:12px;border:1px solid #A1A1AA;background:#FFFFFF;color:#18181B;font:inherit;font-size:15px}
.rw-wd-field input[aria-invalid="true"],.rw-wd-field select[aria-invalid="true"]{border-color:#A50E26;box-shadow:0 0 0 1px #A50E26}
.rw-wd-field input:focus-visible,.rw-wd-field select:focus-visible,.rw-wd-btn:focus-visible{outline:2px solid #0B0B0D;outline-offset:2px}
.rw-wd-err{margin:0;font-size:14px;color:#A50E26}
.rw-wd-err[hidden]{display:none}
.rw-wd-errors{padding:12px 14px;border-radius:14px;border:1px solid #A50E26;background:#FDECEC;color:#18181B;font-size:14px}
.rw-wd-errors[hidden]{display:none}
.rw-wd-errors p{margin:0 0 6px;font-weight:600}
.rw-wd-errors ul{margin:0;padding-left:18px}
.rw-wd-btn{min-height:48px}
.rw-wd-actions{display:flex;flex-wrap:wrap;gap:10px}
.rw-wd-dl{margin:0;display:flex;flex-direction:column;gap:10px}
.rw-wd-dl div{display:grid;grid-template-columns:minmax(120px,30%) 1fr;gap:4px 14px}
.rw-wd-dl dt{font-size:14px;color:#45454F}
.rw-wd-dl dd{margin:0;font-size:15px;font-weight:500;color:#18181B;overflow-wrap:anywhere}
.rw-wd-info h3{margin:8px 0 0;font-size:16px}
.rw-wd-info p{margin:0;font-size:15px;line-height:1.6;color:#27272A}
.rw-wd-draft{margin:0;align-self:flex-start;padding:4px 10px;border-radius:999px;background:#FFF1D6;color:#7A5600;font-size:13px;font-weight:600}
.rw-wd-draft[hidden]{display:none}
@media (max-width:560px){.rw-wd-dl div{grid-template-columns:1fr}}

/* Sign-in confirmed: 1 busy line while the next page loads (C1, 20 Oct 2026). */
.rw-auth-opening{display:flex;align-items:center;gap:14px;min-height:56px}
.rw-auth-opening h2{margin:0;font-size:22px;font-weight:500;letter-spacing:-0.02em;color:#0B0B0D}
.rw-auth-opening h2:focus{outline:none}
.rw-auth .rw-auth-opening .spinner{width:22px;height:22px;flex:0 0 auto;border-color:rgba(11,11,13,0.16);border-top-color:#0B0B0D;vertical-align:middle}