/* 1030US-A unslop polish pass: look only, for /, /join/ and /account/. Linked last by those three
   pages and by nothing else. Every rule is scoped to .homepage-sales / .join-sales / .account-page /
   #retentionModal, so the shared header, footer, footer capture and login modal are untouched.
   No word, order or behaviour changes here; the rule-7 cuts are in the page HTML. */
:root {
  --us-ease: cubic-bezier(.22, 1, .36, 1);
  --us-sky: #00b6ef;
  --us-gold: #fcb040;
  --us-surface: #101c2b;
  --us-line: rgba(148, 170, 196, .16);
  --us-line-2: rgba(148, 170, 196, .28);
  --us-r: 14px;
  --us-r-in: 10px;
  --us-depth: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 48px -28px rgba(0, 0, 0, .8);
}

/* 1 Spacing: off-grid values back onto the 4px grid */
.homepage-sales .home-hero-copy h1 { margin-top: 16px; }
.homepage-sales #shipping-title { margin-top: 4px; }
.homepage-sales .shipping-links a { padding-block: 12px; }
:is(.homepage-sales, .join-sales) p.quiet { margin-block: 12px; }
body :is(.homepage-sales, .join-sales) .site-faq summary { padding-block: 16px; }
.join-sales .member-time { margin-top: 4px; }
.join-sales .join-tool-proof .tool-tier { padding-left: 8px; }
.account-page .page-header { margin-bottom: 40px; }
.account-page .account-tools { margin-bottom: 40px; }
.account-page .account-tools > p { margin-bottom: 24px; }
.account-page .account-helper-links { gap: 8px 24px; margin-top: 16px; }
.account-page .card { padding: 32px; margin-bottom: 24px; }
.account-page .account-faq { margin: 48px 0 32px; }
.account-page .account-faq h2 { margin-bottom: 24px; }

/* 2 Colour: no washes, blobs or coloured glows; gold stays for the primary action, sky for focus */
body:has(.account-page) { background: #08111d; }
body:has(.account-page)::after { content: none; }
:is(.homepage-sales, .join-sales) .by-spags > img { box-shadow: var(--us-depth); }
:is(.homepage-sales, .join-sales) .plan.apex {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 38%);
  box-shadow: var(--us-depth);
}
:is(.homepage-sales, .join-sales) .button:hover,
:is(.homepage-sales, .join-sales) .plan.apex .button:hover { box-shadow: none; }
.account-page .card {
  background: var(--us-surface);
  border-color: var(--us-line);
  box-shadow: var(--us-depth);
}
.account-page .card:hover { border-color: var(--us-line); box-shadow: var(--us-depth); }
.account-page .card p { color: #b5c2d4; }
.account-page .portal-btn-primary,
#retentionModal .modal-claim { background: var(--us-gold); color: #08111d; }
.account-page .portal-btn-primary:hover:not(:disabled),
#retentionModal .modal-claim:hover:not(:disabled) { background: #fdc061; box-shadow: none; transform: none; }
.account-page .portal-btn-cancel { background: transparent; color: #f87171; border-color: rgba(248, 113, 113, .4); }
.account-page .portal-btn-cancel:hover:not(:disabled) { background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .6); }
.account-page .portal-btn-secondary { background: rgba(255, 255, 255, .04); border-color: var(--us-line-2); }
.account-page .portal-btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.account-page .portal-form input { background: #0b1522; border-color: var(--us-line-2); }
.account-page .portal-form input:focus { border-color: var(--us-sky); }
.account-page .portal-form input::placeholder { color: #6f8197; }
.account-page .account-helper-links a:not(.portal-btn),
.account-page .account-video-link,
.account-page .account-support a,
.account-page .account-login-link { text-decoration-color: rgba(252, 176, 64, .45); }
.account-page .account-helper-links a:not(.portal-btn):hover,
.account-page .account-video-link:hover,
.account-page .account-support a:hover,
.account-page .account-login-link:hover { text-decoration-color: currentColor; }
#retentionModal .modal {
  background: var(--us-surface);
  border-color: var(--us-line-2);
  box-shadow: 0 32px 64px -24px rgba(0, 0, 0, .7);
}
#retentionModal .modal h2 .discount { background: none; -webkit-text-fill-color: currentColor; color: var(--us-gold); }
#retentionModal .modal-skip { color: #93a6bf; }
#retentionModal .modal-skip:hover { color: #e8eef7; }
:is(.account-page, #retentionModal) :is(a, button, summary, input):focus-visible {
  outline: 2px solid var(--us-sky);
  outline-offset: 3px;
}

/* 3 Icons: the emoji labels are cut in the HTML; nothing here replaces them */

/* 5 Type: Oswald headings at 600 (the heaviest the skill keeps), DM Sans never faux-bold,
   caps buttons in Oswald 500 with light tracking, running text at 15px */
:is(.homepage-sales, .join-sales, .account-page) :is(h1, h2, h3),
#retentionModal h2 { font-weight: 600; }
:is(.homepage-sales, .join-sales, .account-page) p strong { font-weight: 600; }
.account-page .account-tool-grid strong { font-weight: 600; }
.account-page .page-header h1 { letter-spacing: -.02em; }
.account-page .page-header p { color: #b5c2d4; font-size: 17px; line-height: 1.55; }
.account-page .card p { font-size: 15px; line-height: 1.65; }
.account-page :is(.card p, .page-header p, .account-tools > p) { max-width: 68ch; }
:is(.homepage-sales, .join-sales) :is(p.quiet, .tour-finish p) { font-size: 14px; line-height: 1.6; }
.homepage-sales .tour-copy h3 { max-width: 8.4em; text-wrap: balance; }
#retentionModal .modal-skip { text-wrap: balance; }
.account-page .portal-btn,
#retentionModal .modal-claim { font-weight: 500; letter-spacing: .02em; }
.account-page .portal-btn { font-size: 16px; }
.account-page .account-helper-links .portal-btn { font-size: 15px; }
.account-page .account-faq summary { font-weight: 600; font-size: 15px; color: #e8eef7; }
.account-page .account-faq p { font-size: 15px; }

/* 6 Layout: the account FAQ takes the same quiet panels as home and join */
.account-page .account-faq details {
  padding: 0 20px;
  margin-bottom: 8px;
  border: 1px solid var(--us-line);
  border-radius: var(--us-r-in);
  background: rgba(255, 255, 255, .02);
}
.account-page .account-faq details:hover { border-color: var(--us-line-2); }
.account-page .account-faq details[open] { border-color: rgba(0, 182, 239, .38); background: rgba(0, 182, 239, .045); }
.account-page .account-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  list-style: none;
}
.account-page .account-faq summary::-webkit-details-marker { display: none; }
.account-page .account-faq summary::after { content: "+"; flex: none; color: var(--us-sky); }
.account-page .account-faq details[open] summary::after { transform: rotate(45deg); }
.account-page .account-faq details p { margin: 0 0 16px; max-width: 68ch; }

/* 7 Details: the open FAQ keeps its "+" so the 45deg turn reads as a close mark (sales.css swaps in a minus, which turns into a slash) */
body :is(.homepage-sales, .join-sales) .site-faq details[open] summary::after { content: "+"; }

/* 7 Details: nested radii (cards 14, controls 10), hairlines from one family, shapes that hold in High Contrast */
.account-page .card,
.account-page .account-tool-grid > a { border-radius: var(--us-r); }
.account-page .account-tool-grid > a { border-color: var(--us-line-2); box-shadow: var(--us-depth); }
.account-page .account-tool-grid > a:hover { border-color: var(--us-gold); }
.account-page .portal-btn,
.account-page .portal-form input { border-radius: var(--us-r-in); }
.account-page .portal-btn,
.account-page .account-login-link { border: 1px solid transparent; }
.account-page .portal-btn-cancel { border-color: rgba(248, 113, 113, .4); }
.account-page .portal-btn-secondary { border-color: var(--us-line-2); }
.account-page .portal-btn { min-height: 48px; padding: 12px 24px; }
#retentionModal .modal { border-radius: 20px; }
#retentionModal .modal-claim { border-radius: var(--us-r-in); border: 1px solid transparent; }

/* 8 Visuals: Chris's portrait, video card and product screens stay the moments; nothing added */

/* 9 Motion: named properties, one easing, no hover lift or scale */
:is(.homepage-sales, .join-sales) .button { transition: background-color .16s var(--us-ease), filter .16s var(--us-ease), border-color .16s var(--us-ease); }
:is(.homepage-sales, .join-sales) .button:hover { transform: none; }
:is(.homepage-sales, .join-sales) .site-faq details { transition: border-color .16s var(--us-ease), background-color .16s var(--us-ease); }
:is(.homepage-sales, .join-sales) .site-faq summary::after { transition: transform .18s var(--us-ease); }
.account-page .card { transition: none; }
.account-page .account-tool-grid > a { transition: border-color .16s var(--us-ease); }
.account-page .portal-btn,
#retentionModal .modal-claim { transition: background-color .16s var(--us-ease), border-color .16s var(--us-ease); }
.account-page .account-faq details { transition: border-color .16s var(--us-ease), background-color .16s var(--us-ease); }
.account-page .account-faq summary::after { transition: transform .18s var(--us-ease); }
#retentionModal.modal-overlay { transition: opacity .18s var(--us-ease); }
#retentionModal .modal { transform: translateY(8px); transition: transform .18s var(--us-ease); }
#retentionModal.show .modal { transform: none; }

@media (max-width: 720px) {
  .account-page .card { padding: 24px 20px; }
  .account-page .page-header p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.homepage-sales, .join-sales, .account-page, #retentionModal) * { transition: none !important; }
  #retentionModal .modal { transform: none; }
}