/* /buy and /start on the site's light paper (the design sweep, 21 Oct 2026; Michael: one brand from the home page to
   paying). They share the gift page's components (web/gift/gift.css), which are made for its dark night scene; the
   gift page stays dark (unwrapping a present at night is its own moment), so this layer re-colours them here only.
   Loaded after gift.css and start.css by web/buy.html and web/start.html. */
body[data-page] {
  --night: #FCFBF7; --ink-l: #2B2E33; --mute-l: #50545B; --hair: #ECE8DF;
  --blueL: #3873BA; --goldL: #3873BA;
  --f-body: 'Nunito', ui-rounded, system-ui, sans-serif;
  --t-body: 17.5px; --t-cap: 15px; --t-fine: 13.5px; --t-lead: 19.5px; --t-h2: 34px;
  color-scheme: light;
}
body[data-page] .sec-eyebrow { font-weight: 900; letter-spacing: .16em }
body[data-page] .h2 em { color: var(--blueL) }
body[data-page] .p { font-weight: 600 }

/* the plans */
body[data-page] .plan { background: #FFFFFF; border: 1px solid #ECE8DF; box-shadow: 0 1px 0 rgba(43, 46, 51, .03); color: var(--ink-l) }
body[data-page] .plan:hover { border-color: #D9D4C9 }
body[data-page] .plan[aria-checked="true"] { border-color: #3873BA; background: #F5F9FE; box-shadow: 0 0 0 1px #3873BA, 0 18px 36px -24px rgba(56, 115, 186, .55) }
body[data-page] .radio { border-color: #C9C5BB }
body[data-page] .plan[aria-checked="true"] .radio { border-color: #3873BA }
body[data-page] .plan[aria-checked="true"] .radio::after { background: #3873BA }
body[data-page] .plan b { font-weight: 800 }
body[data-page] .save { box-shadow: 0 2px 0 #C99A1F }

/* paying */
body[data-page] .card2 { border: 1px solid #D9D4C9; background: #FFFFFF; color: var(--ink-l); font-weight: 800 }
body[data-page] .card2:hover { border-color: var(--ink-l) }
body[data-page] .cfIn { background: #FFFFFF; border: 1px solid #ECE8DF; box-shadow: 0 18px 40px -28px rgba(43, 46, 51, .35) }
body[data-page] .cfEmail { background: #FFFFFF; border: 1px solid #D9D4C9; color: var(--ink-l) }
body[data-page] .cfEmail::placeholder { color: #A3A6AB }
body[data-page] .cfEmail:focus { outline: 2px solid #3873BA; outline-offset: 0; border-color: #3873BA }
body[data-page] .payerr { color: #B3392A; font-weight: 700 }
body[data-page] .pre a, body[data-page] .more details p a { text-decoration-color: rgba(43, 46, 51, .3) }
body[data-page] .write { border-top: 0 }

/* questions */
body[data-page] .more summary i { border-color: #D9D4C9 }
body[data-page] .more details[open] summary i { border-color: #3873BA }

/* after paying: the code */
body[data-page] .sCode { border-color: #C9DAF0; background: #F5F9FE }
body[data-page] .sCode button { border-color: #D9D4C9; color: var(--ink-l); font-weight: 800 }
body[data-page] .sSteps li::before { background: #EEF4FB; color: #2D5E99 }

/* /start's opening and what's in it */
body[data-page] .sHero { background: radial-gradient(110% 70% at 50% 20%, #FFFFFF 0%, #FCFBF7 55%, #F6F2EA 100%) }
body[data-page] .sTitle em { color: #3873BA }
body[data-page] .sHero .sheetWrap::before { display: none }
body[data-page] .paper { box-shadow: 0 1px 0 rgba(43, 46, 51, .04), 0 30px 60px -28px rgba(43, 46, 51, .35); border: 1px solid #F2EFE8; border-radius: 18px }
body[data-page] .sPoints svg { background: #EEF4FB; stroke: #3873BA }
body[data-page] .say { background: #FFFFFF; border-color: #ECE8DF }
body[data-page] .rule { background: #ECE8DF }

/* the site's header and footer (the same as every other page; /how-to-draw/howto.css) */
body[data-page] header.site { position: sticky; top: 0; z-index: 40; background: rgba(252, 251, 247, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid #F2EFE8 }
body[data-page] .site .wrap { width: min(1160px, 100% - 2 * max(20px, env(safe-area-inset-left))); margin-inline: auto }
body[data-page] .bar { display: flex; align-items: center; gap: 28px; height: 68px }
body[data-page] .site .brand { display: flex; align-items: center; gap: 10px; font: 900 19px 'Nunito', system-ui, sans-serif; color: #2B2E33; text-decoration: none; letter-spacing: -.01em }
body[data-page] .site .brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 2px 8px rgba(43, 46, 51, .16) }
body[data-page] .site .nav { display: flex; gap: 24px; margin-left: auto }
body[data-page] .site .nav a { font: 800 17px 'Nunito', system-ui, sans-serif; color: #474A51; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent }
body[data-page] .site .nav a:hover { color: #2B2E33 }
body[data-page] .site .get { font: 800 14.5px 'Nunito', system-ui, sans-serif; text-decoration: none; color: #fff; background: #2B2E33; padding: 9px 16px; border-radius: 999px; white-space: nowrap }
body[data-page] footer.site { margin-top: 72px; border-top: 1px solid #ECE8DF; background: #F6F2EA }
body[data-page] .site.foot, body[data-page] footer.site .foot { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px 32px; padding: 36px 0 max(40px, env(safe-area-inset-bottom)); justify-items: start; text-align: left }
body[data-page] footer.site .brand { font-size: 17px } body[data-page] footer.site .brand img { width: 28px; height: 28px; border-radius: 8px }
body[data-page] footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 22px }
body[data-page] footer.site nav a { font: 800 16px 'Nunito', system-ui, sans-serif; color: #474A51; text-decoration: none; border: 0; padding: 0 }
body[data-page] footer.site p { font: 600 13.5px 'Nunito', system-ui, sans-serif; color: #646972; margin: 0 }
@media (max-width: 720px) {
  body[data-page] .bar { height: 60px; gap: 16px } body[data-page] .site .nav { display: none } body[data-page] .site .get { margin-left: auto }
  body[data-page] footer.site .foot { grid-template-columns: 1fr }
}
/* the gift page's own brand mark is pinned to the corner of its night scene; here the header's sits in the header */
html { background: #FCFBF7 }
body[data-page] .site .brand { position: static; inset: auto; transform: none; z-index: auto; margin: 0; padding: 0; background: none }