/* hers 11/2/26 11:17a · "it should follow my baude site formatting". THE SHARED LOOK for share-host customer pages
   (Partners Portal sign-in + their page, and the friends / gift / join pages as they adopt it). Read from the live
   storefront (theme 186941145376, read-only): Franklin Gothic ATF display + News Gothic BT body (the same Shopify CDN
   faces tokens.css loads), black on white, the Baude wordmark image, plain black square buttons, wide spacing.
   No boxes, no heavy rules. Mobile first. Platform sign-in buttons (Shop Pay, Google) wear their OWN brand styles. */
.sf-body { margin: 0; background: #fff; color: #000; font-family: 'NewsGoth Dm BT', 'NewsGoth BT', 'News Gothic', Arial, sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.sf { max-width: 440px; margin: 0 auto; padding: 32px 20px 56px; box-sizing: border-box; }
.sf-logo { display: block; width: 110px; height: auto; margin: 0 auto 48px; }
.sf-h1 { font: 900 30px/1.05 'Franklin Gothic ATF', 'franklin-gothic-atf', 'Arial Black', sans-serif; text-transform: uppercase;
  letter-spacing: .01em; text-align: center; margin: 0 0 36px; text-wrap: balance; }
.sf-h2 { font: 700 13px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em;
  margin: 40px 0 14px; }
.sf-sm { font-size: 13px; margin: 0 0 12px; text-align: center; }
.sf-p { font-size: 14px; margin: 0 0 16px; }
.sf-soft { color: #6b6b6b; }
.sf-note { font-size: 13px; color: #6b6b6b; text-align: center; margin: 18px 0 0; }
.sf-err { font-size: 14px; border-left: 3px solid #D0331F; padding: 6px 10px; margin: 0 0 20px; }
.sf-prev { font-size: 12px; background: #F1EFB7; padding: 6px 10px; margin: 0 0 24px; text-align: center; }
/* Baude's own button: the storefront's black square */
.sf-btn { display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 48px;
  padding: 12px 16px; margin: 0 0 12px; border: 1px solid #000; border-radius: 0; background: #000; color: #fff; text-decoration: none;
  font: 700 14px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.sf-btn--line { background: #fff; color: #000; }
.sf-btn:hover { font-style: italic; }
/* Shop Pay: Shop's purple, the official Shop Pay mark (static/img/brand/shop-pay.svg, Shopify's payment icon) */
.sf-shop { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; box-sizing: border-box;
  margin: 0 0 12px; border: 0; border-radius: 6px; background: #5A31F4; color: #fff; text-decoration: none;
  font: 600 16px -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
.sf-shop img { height: 26px; width: auto; display: block; }
.sf-shop:hover { background: #4524c8; }
/* Google: Google's light button (white, #747775 border, the official G, Roboto-style label) */
.sf-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; box-sizing: border-box;
  margin: 0 0 12px; border: 1px solid #747775; border-radius: 4px; background: #fff; color: #1f1f1f; text-decoration: none;
  font: 500 15px Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif; letter-spacing: .25px; }
.sf-google img { width: 20px; height: 20px; display: block; }
.sf-google:hover { background: #f8f8f8; }
/* the portal page */
.sf-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; font-size: 15px; margin: 0 0 8px; }
.sf-kv .k { font-size: 12px; color: #6b6b6b; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.sf-kv .v { min-width: 0; overflow-wrap: anywhere; }
.sf-code { font: 900 20px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif; letter-spacing: .04em; }
.sf-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 8px; text-align: center; }
.sf-tiles b { display: block; font: 900 24px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif; }
.sf-tiles span { font-size: 12px; color: #6b6b6b; }
.sf-opt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e5e5e5;
  font-size: 16px; cursor: pointer; list-style: none; background: none; width: 100%; text-align: left; color: #000; font-family: inherit; border-top: 0; border-left: 0; border-right: 0; }
.sf-opt::-webkit-details-marker { display: none; }
.sf-opt small { display: block; font-size: 13px; color: #6b6b6b; }
.sf-opt .ch { font-size: 13px; color: #000; text-decoration: underline; }
.sf-trust { display: block; font-size: 14px; color: #000; margin-top: 6px; }
.sf-form { padding: 10px 0 16px; }
.sf-in { display: block; width: 100%; box-sizing: border-box; font: 16px 'NewsGoth Dm BT', Arial, sans-serif; border: 1px solid #000; border-radius: 0;
  padding: 12px; margin: 0 0 12px; background: #fff; color: #000; -webkit-appearance: none; appearance: none; }
.sf-tg { display: flex; gap: 20px; margin: 0 0 12px; font-size: 15px; }
.sf-tg input { width: 18px; height: 18px; accent-color: #000; vertical-align: -3px; }
.sf-link { color: #000; }
/* hers 11/2/26 12:16p · the Partner Portal sign-in (mock images/29) */
.sf--left .sf-logo { margin-bottom: 72px; }
.sf-h1--left { text-align: left; font-size: 24px; margin: 0 0 16px; }
.sf-intro { font-size: 16px; line-height: 1.45; margin: 0 0 32px; }
.sf-slot { background: #F1EFB7; padding: 0 2px; }
.sf-note--left, .sf-sm--left { text-align: left; }
.sf-lab { display: block; font: 700 11px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 6px; }
.sf-row { display: flex; align-items: stretch; margin: 0 0 12px; }
.sf-in--row { margin: 0; flex: 1; min-width: 0; }
.sf-go { flex: none; width: 52px; border: 1px solid #000; border-left: 0; background: #000; color: #fff; font-size: 22px; cursor: pointer; border-radius: 0; }
.sf-go:hover { font-style: italic; }
.sf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.sf-two--one { grid-template-columns: 1fr; }
.sf-two .sf-shop, .sf-two .sf-google { margin: 0; font-size: 14px; min-height: 44px; gap: 6px; }
.sf-two .sf-shop img { height: 20px; }
.sf-two .sf-google img { width: 16px; height: 16px; }
.sf-note--left { margin: 0 0 24px; } .sf-sm--left .sf-link { text-decoration: underline; }
/* hers 11/2/26 12:17p · the join pages (friends_join.html) in the Partner Portal look. Every field + behaviour kept. */
.sf-join { background: #fff; }
.sf-join .fj { max-width: 440px; padding: 32px 20px 56px; gap: 12px; }
.sf-join .sf-logo { margin-bottom: 48px; }
.sf-join .fj-card { gap: 12px; }
.sf-join .fj-h1 { font: 900 24px/1.05 'Franklin Gothic ATF', 'franklin-gothic-atf', 'Arial Black', sans-serif; text-transform: uppercase; text-align: left; margin: 0 0 4px; }
.sf-join .fj-p, .sf-join .fj-note { font-size: 14px; }
.sf-join .fj-pair { grid-template-columns: minmax(0, 1fr); gap: 6px; border-bottom: 0; padding: 4px 0; }
.sf-join .fj-pair--ro { grid-template-columns: 110px minmax(0, 1fr); border-bottom: 1px solid #e5e5e5; padding: 10px 0; }
.sf-join .fj-k { font: 700 11px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif; letter-spacing: .06em; }
.sf-join .fj-in { border: 1px solid #000; min-height: 48px; padding: 12px; font-size: 16px; }
.sf-join .fj-btn { background: #000; color: #fff; border: 1px solid #000; min-height: 48px; font-size: 14px; }
.sf-join .fj-btn--line { background: #fff; color: #000; }
.sf-join .sf-two { margin: 4px 0 0; }
/* hers 11/2/26 12:58p · portal home / almost there / footer (mocks 31–35) */
.sf-hp { position: absolute; left: -9999px; }
.sf-sec { margin: 32px 0 8px; }
.sf-sec--big { font-size: 13px; }
.sf-small { font-size: 13px; line-height: 1.45; margin: 8px 0 0; }
.sf-tiny { font-size: 11px; }
.sf-go--txt { width: auto; min-width: 120px; padding: 0 14px; display: flex; align-items: center; justify-content: center; font: 700 12px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .08em; color: #fff; text-decoration: none; white-space: nowrap; }
.sf-tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 0; }
.sf-tiles3 div { border: 1px solid #e5e5e5; padding: 12px 6px; text-align: center; }
.sf-tiles3 b { display: block; font: 900 22px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif; }
.sf-tiles3 span { font-size: 11px; color: #6b6b6b; }
.sf-foot { margin-top: 64px; }
.sf-soc { display: flex; gap: 20px; margin: 0 0 18px; }
.sf-soc a { color: #000; }
.sf-foot-p { font-size: 13px; margin: 0; }
.sf-toast { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: #000; color: #fff;
  font-size: 15px; padding: 8px 16px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.sf-toast.on { opacity: 1; }
.sf .sf-btn { margin-top: 8px; }
/* hers 12:58p · JUST FOR YOU (mock 33): labels inside the boxes */
.sf-jform { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
.sf-box { display: flex; flex-direction: column; border: 1px solid #000; padding: 6px 10px 4px; }
.sf-box span { font-size: 10px; color: #000; }
.sf-box input { border: 0; outline: none; padding: 2px 0 4px; font: 16px 'NewsGoth Dm BT', Arial, sans-serif; background: transparent; color: #000; }
.sf-join .fj-hp { position: absolute; left: -9999px; }
.sf-join .fj { max-width: 440px; padding: 32px 20px 56px; }
.sf-join .sf-logo { margin-bottom: 72px; }
.sf-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; margin: 4px 0 0; }
.sf-consent input { width: 18px; height: 18px; margin: 0; accent-color: #000; flex: none; }
.sf a.sf-btn { margin-top: 24px; }
/* hers 1:18p · payment versions (mocks 36/37) */
.sf-pays { display: flex; flex-direction: column; gap: 8px; }
.sf-pay { border: 1px solid #e5e5e5; }
.sf-pay.on { border-color: #000; }
.sf-payh { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; font-size: 15px; }
.sf-payh small, .sf-paybox small { display: block; font-size: 12px; color: #6b6b6b; }
.sf-sel, .sf-ch { border: 0; background: none; font: 14px 'NewsGoth Dm BT', Arial, sans-serif; color: #000; cursor: pointer; text-decoration: none; padding: 4px 0; }
.sf-sel:hover, .sf-ch:hover { font-style: italic; }
.sf-payb { padding: 0 12px 12px; }
.sf-payb .sf-in { margin: 0 0 8px; }
.sf-payb .sf-btn { margin-top: 8px; }
.sf-paybox { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid #e5e5e5; padding: 12px; font-size: 15px; }
.sf-sech { display: flex; justify-content: space-between; align-items: baseline; margin: 32px 0 8px; }
.sf-sech .sf-lab { margin: 0; }
.sf-in[hidden], .sf-payb[hidden] { display: none; }
/* #1243 · THE STORE'S HEADER + FOOTER on every portal page (hers 11/2/26 1:58p "so it feels like the website").
   Live theme (186941145376, read-only): menu left, wordmark centre, account + cart right, a drawer under 990px,
   footer inverse (black). The page's own wordmark hides under it: one logo, the store's. */
.sn { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 14px 20px; background: #fff;
  border-bottom: 1px solid #e5e5e5; position: relative; z-index: 20;
  font: 700 13px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.sn a { color: #000; text-decoration: none; }
.sn a:hover { font-style: italic; }
.sn-left, .sn-right { display: flex; gap: 22px; align-items: center; }
.sn-right { justify-content: flex-end; }
.sn-logo { grid-column: 2; display: block; line-height: 0; }
.sn-logo img { width: 90px; height: auto; }
.sn-drawer { display: none; }
.sn-drawer summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; }
.sn-drawer summary::-webkit-details-marker { display: none; }
.sn-burger { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.sn-burger i { display: block; height: 2px; background: #000; }
.sn-dnav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid #000; display: flex; flex-direction: column;
  padding: 8px 20px 16px; }
.sn-dnav a { padding: 12px 0; border-bottom: 1px solid #eee; font-size: 16px; }
.sn-dnav a.sn-sub { padding-left: 16px; font-size: 14px; }
@media (max-width: 989px) {
  .sn { grid-template-columns: 44px 1fr 44px; padding: 8px 12px; }
  .sn-drawer { display: block; grid-column: 1; grid-row: 1; }
  .sn-left, .sn-wide { display: none; }
  .sn-logo { grid-column: 2; justify-self: center; }
  .sn-right { grid-column: 3; }
}
.sn ~ * .sf-logo, .sn ~ .sf-logo { display: none; }
.sn ~ .sf, .sn ~ * > .sf { padding-top: 40px; }
.snf { background: #000; color: #fff; padding: 36px 20px 40px; margin-top: 40px; }
.snf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; max-width: 760px; margin: 0 auto 32px; }
.snf-col { display: flex; flex-direction: column; gap: 10px; }
.snf-col b { font: 700 12px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.snf a { color: #fff; text-decoration: none; font-size: 14px; }
.snf a:hover { font-style: italic; }
.snf-mark { display: block; text-align: center; font: 700 12px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .1em; }
@media (min-width: 750px) { .snf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* hers 11/2/26 2:25p ("looking good"): titles SMALLER · body SMALLER, in the storefront body face (NewsGoth Dm BT, the
   live theme's body; Franklin stays for titles/labels only) · Shop / Google buttons SMALLER (still their own styles) ·
   100px between the store header and the page title. Form fields stay 16px (iOS zooms below that). */
.sf-body { font-size: 14px; }
.sf-body p, .sf-intro, .sf-p, .sf-note, .sf-sm, .sf-body li { font-family: 'NewsGoth Dm BT', 'NewsGoth BT', 'News Gothic', Arial, sans-serif; }
.sf-intro { font-size: 14px; line-height: 1.5; }
.sf-p { font-size: 13px; }
.sf-h1 { font-size: 22px; margin-bottom: 24px; }
.sf-h1--left, .sf-join .fj-h1 { font-size: 20px; }
.sf-body input, .sf-body select, .sf-body textarea { font-size: 16px; }
.sf-shop, .sf-google { min-height: 40px; font-size: 14px; gap: 6px; }
.sf-shop img { height: 20px; }
.sf-google img { width: 16px; height: 16px; }
.sf-two .sf-shop, .sf-two .sf-google { min-height: 40px; font-size: 13px; }
.sf-two .sf-shop img { height: 18px; }
.sn ~ .sf, .sn ~ * > .sf, .sn ~ main .sf { padding-top: 100px; }
/* hers 2:28p · sign-in: the "no account" line under the field, and an OR rule between the email row and Shop / Google */
.sf-fe { font-size: 13px; margin: 8px 0 0; color: #D0331F; }
.sf-fe .sf-link { color: inherit; }
.sf-or { display: flex; align-items: center; gap: 12px; margin: 24px 0 16px; font: 700 11px 'Franklin Gothic ATF', 'franklin-gothic-atf', Arial, sans-serif;
  text-transform: uppercase; letter-spacing: .1em; color: #6b6b6b; }
.sf-or::before, .sf-or::after { content: ""; flex: 1; border-top: 1px solid #d9d9d9; }
.sf-two + .sf-sm { margin-top: 20px; }
/* #1243 Phase B (hers 2:37p) · sign-up pages: "Here's what you get" (her program description + the perk lines), the
   About-you box that grows, the program dropdown, State + ZIP side by side. Same boxed-field look as the join page. */
.sf-get { margin: 0 0 28px; }
.sf-get .sf-h2 { margin: 0 0 10px; }
.sf-perks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.sf-perks li { padding-left: 16px; position: relative; }
.sf-perks li::before { content: "—"; position: absolute; left: 0; }
.sf-box textarea, .sf-box select { border: 0; outline: none; padding: 2px 0 4px; font: 16px 'NewsGoth Dm BT', Arial, sans-serif;
  background: transparent; color: #000; resize: none; border-radius: 0; -webkit-appearance: none; appearance: none; }
.sf-box--sel select { background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 2px center; padding-right: 18px; }
.sf-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }