/* The Three-Day Yes: the floating header (site.js) and the ambient light, shared by every page.
   After the Offer Studio's pill bar. Light glass by default; data-tone="dark" on the dark pages. */
/* light / dark: follows the system; the header toggle pins the opposite in <meta name="color-scheme"> */
:root{color-scheme:light dark}
:root:has(> head > meta[name="color-scheme"][content="dark"]){color-scheme:dark}
:root:has(> head > meta[name="color-scheme"][content="light"]){color-scheme:light}
@media print{:root{color-scheme:light!important}}
.sx{
  --sx-bg:light-dark(rgba(255,255,255,.74),rgba(16,16,20,.72));--sx-bg-2:light-dark(rgba(255,255,255,.86),rgba(16,16,20,.86));
  --sx-fg:light-dark(#17171B,#EDEDF0);--sx-muted:light-dark(#5B5B64,#A3A4AE);--sx-border:light-dark(rgba(23,23,27,.09),rgba(255,255,255,.09));--sx-hover:light-dark(rgba(23,23,27,.055),rgba(255,255,255,.07));
  --sx-pop:light-dark(rgba(255,255,255,.96),rgba(20,20,25,.97));
  --sx-shadow:0 20px 44px -22px light-dark(rgba(23,23,27,.24),rgba(0,0,0,.7)),0 6px 16px -10px light-dark(rgba(23,23,27,.12),rgba(0,0,0,.4)),inset 0 1px 0 light-dark(rgba(255,255,255,.7),rgba(255,255,255,.06));
  --sx-red:#F01621;--sx-red2:#C8101B;--sx-glow:light-dark(rgba(240,22,33,.3),rgba(240,22,33,.45));--sx-green:light-dark(#15803D,#3DDC84);--sx-amber:light-dark(#B45309,#F7C948);--sx-track:light-dark(rgba(23,23,27,.1),rgba(255,255,255,.14));
  --sx-ease:cubic-bezier(.16,1,.3,1);
  position:sticky;top:0;z-index:60;padding:12px 16px 6px;font-family:"Rethink Sans",system-ui,sans-serif;color:var(--sx-fg);pointer-events:none}
.sx[data-tone="dark"]{color-scheme:dark;--sx-bg:rgba(16,16,20,.72);--sx-bg-2:rgba(16,16,20,.86);--sx-fg:#EDEDF0;--sx-muted:#A3A4AE;--sx-border:rgba(255,255,255,.09);--sx-hover:rgba(255,255,255,.07);
  --sx-pop:rgba(20,20,25,.97);--sx-shadow:0 18px 48px -16px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);--sx-glow:rgba(240,22,33,.45);--sx-green:#3DDC84;--sx-amber:#F7C948;--sx-track:rgba(255,255,255,.14)}
.sx > *{pointer-events:auto}
.sx [hidden]{display:none!important}
.sx[data-tone="dark"]{position:fixed;left:0;right:0}
html:has(.sx){scroll-padding-top:120px}
.sx-pill{max-width:1180px;margin:0 auto;height:58px;display:flex;align-items:center;gap:4px;padding:0 8px 0 10px;border-radius:99px;
  background:var(--sx-bg);border:1px solid var(--sx-border);box-shadow:var(--sx-shadow);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);transition:box-shadow .3s var(--sx-ease),background .3s}
.sx.sx-scrolled .sx-pill{background:var(--sx-bg-2)}
.sx a{color:inherit;text-decoration:none}
.sx-logo{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 4px;border-radius:99px;font-weight:800;font-size:15.5px;letter-spacing:-.02em;white-space:nowrap;transition:opacity .2s}
.sx-logo:hover{opacity:.8}
.sx-lockup{height:28px;width:auto;flex:none;display:block}
.sx-glyph{height:28px;width:auto;flex:none;display:none}
.sx-bar{width:1px;height:20px;background:var(--sx-border);flex:none}
.sx-logo span{font-size:14.5px}
.sx-sep{width:1px;height:24px;background:var(--sx-border);margin:0 6px;flex:none}
.sx-nav{display:flex;gap:2px;min-width:0}
.sx-nav a{position:relative;padding:8px 14px;border-radius:99px;font-size:14px;font-weight:500;color:var(--sx-muted);white-space:nowrap;transition:color .2s,background .2s}
.sx-nav a:hover{color:var(--sx-fg);background:var(--sx-hover)}
.sx-nav a[aria-current="page"]{color:var(--sx-fg);background:var(--sx-hover);font-weight:600}
.sx-nav a[aria-current="page"]:after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--sx-red)}
.sx-right{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none}
.sx-slot{display:flex;gap:6px}
.sx-slot:empty{display:none}
.sx-note{font-size:12.5px;color:var(--sx-muted);max-width:340px;line-height:1.3}
.sx-note:empty{display:none}
.sx-note a{color:var(--sx-red);font-weight:600}
.sx-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:99px;font:600 13.5px "Rethink Sans",system-ui,sans-serif;white-space:nowrap;cursor:pointer;border:1px solid var(--sx-border);background:transparent;color:var(--sx-fg);transition:background .2s,border-color .2s,filter .2s,transform .15s}
.sx-btn:hover{background:var(--sx-hover)}
.sx-btn:active{transform:scale(.97)}
.sx-btn svg{width:15px;height:15px;transition:transform .2s var(--sx-ease)}
.sx-btn:hover svg{transform:translateX(2px)}
.sx-btn.red,.sx-cta{border:0;color:#fff;background:linear-gradient(135deg,var(--sx-red),var(--sx-red2));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 18px -8px var(--sx-glow)}
.sx-btn.red:hover,.sx-cta:hover{background:linear-gradient(135deg,var(--sx-red),var(--sx-red2));filter:brightness(1.1)}
.sx-ghost{border-color:transparent}
.sx-acct{display:flex;align-items:center;gap:4px;position:relative}
.sx-ring{display:flex;align-items:center;gap:7px;height:38px;padding:0 10px 0 5px;border:0;border-radius:99px;background:none;color:var(--sx-muted);font:500 12.5px "Space Mono",monospace;cursor:pointer;transition:background .2s}
.sx-ring:hover{background:var(--sx-hover)}
.sx-ring svg{width:28px;height:28px;transform:rotate(-90deg)}
.sx-ring circle{fill:none;stroke-width:2.6}
.sx-ring .t{stroke:var(--sx-track)}
.sx-ring .v{stroke:var(--sx-red);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .8s var(--sx-ease)}
.sx-save{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;border-radius:99px;font:400 10.5px "Space Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--sx-muted)}
.sx-save i{width:6px;height:6px;border-radius:50%;background:var(--sx-green);box-shadow:0 0 0 3px color-mix(in oklab,var(--sx-green) 18%,transparent)}
.sx-save[data-state="saving"] i{background:var(--sx-amber);animation:sx-pulse 1s ease-in-out infinite}
.sx-save[data-state="error"] i{background:var(--sx-red)}
.sx-save[data-state="error"]{color:var(--sx-red)}
@keyframes sx-pulse{50%{opacity:.35}}
.sx-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font:700 13px "Space Mono",monospace;color:var(--sx-red);
  background:color-mix(in oklab,var(--sx-red) 11%,transparent);border:1px solid color-mix(in oklab,var(--sx-red) 22%,transparent);transition:box-shadow .2s}
.sx-avatar:hover,.sx-avatar[aria-expanded="true"]{box-shadow:0 0 0 4px color-mix(in oklab,var(--sx-red) 12%,transparent)}
.sx-menu{position:absolute;right:0;top:calc(100% + 10px);width:270px;border-radius:18px;overflow:hidden;background:var(--sx-pop);border:1px solid var(--sx-border);
  box-shadow:0 2px 6px rgba(0,0,0,.06),0 30px 60px -20px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transform-origin:top right;animation:sx-pop .22s var(--sx-ease)}
@keyframes sx-pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.sx-who{padding:14px 16px;border-bottom:1px solid var(--sx-border)}
.sx-who span{display:block;font:400 10px "Space Mono",monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--sx-muted)}
.sx-who b{display:block;margin-top:4px;font-size:15px}
.sx-who b:empty{display:none}
.sx-who small{display:block;color:var(--sx-muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-items{padding:6px;display:grid}
.sx-items a,.sx-items button{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:0;border-radius:12px;background:none;font:500 14px "Rethink Sans",system-ui,sans-serif;color:var(--sx-muted);cursor:pointer;text-align:left;transition:background .2s,color .2s}
.sx-items a:hover,.sx-items button:hover{background:var(--sx-hover);color:var(--sx-fg)}
.sx-items .sx-signout:hover{background:color-mix(in oklab,var(--sx-red) 10%,transparent);color:var(--sx-red)}
.sx-items svg{width:16px;height:16px}
.sx-theme{width:38px;height:38px;border:0;border-radius:50%;background:none;color:var(--sx-muted);cursor:pointer;display:grid;place-items:center;transition:background .2s,color .2s}
.sx-theme:hover{background:var(--sx-hover);color:var(--sx-fg)}
.sx-theme svg{width:18px;height:18px;transition:transform .5s var(--sx-ease)}
.sx-theme:hover .sun{transform:rotate(45deg)}.sx-theme:hover .moon{transform:rotate(-12deg)}
/* show the icon for the scheme you'd switch to: sun when dark, moon when light */
.sx-theme .sun{display:none}
:root:has(> head > meta[name="color-scheme"][content="dark"]) .sx-theme .sun{display:block}
:root:has(> head > meta[name="color-scheme"][content="dark"]) .sx-theme .moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not(:has(> head > meta[name="color-scheme"][content="light"])) .sx-theme .sun{display:block}
  :root:not(:has(> head > meta[name="color-scheme"][content="light"])) .sx-theme .moon{display:none}
}
.sx-burger{display:none;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--sx-fg);cursor:pointer;place-items:center}
.sx-burger:hover{background:var(--sx-hover)}
.sx-burger svg{width:20px;height:20px}
.sx-sheet{max-width:1180px;margin:8px auto 0;padding:8px;border-radius:22px;background:var(--sx-pop);border:1px solid var(--sx-border);box-shadow:var(--sx-shadow);animation:sx-pop .22s var(--sx-ease);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.sx-sheet nav{display:grid}
.sx-sheet a{padding:13px 14px;border-radius:14px;font-weight:600;font-size:16px;color:var(--sx-muted)}
.sx-sheet a[aria-current="page"]{color:var(--sx-fg);background:var(--sx-hover)}
/* the ?example ribbon, docked above the pill */
.sx .sx-rib{position:static;max-width:1180px;margin:0 auto 8px;border-radius:99px;color:#fff;
  background:linear-gradient(135deg,#F01621,#C8101B);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 26px -12px rgba(240,22,33,.6);animation:sx-pop .3s var(--sx-ease)}
.sx .sx-rib .wrap{max-width:none;margin:0;padding:5px 5px 5px 18px;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;font-size:13.5px}
.sx .sx-rib .wrap > span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx .sx-rib .row{flex:none;display:flex;gap:6px;margin:0}
.sx .sx-rib .btn{height:32px;padding:0 14px;font-size:13px;font-weight:600;border-radius:99px;box-shadow:none;background:#fff;color:#F01621;display:inline-flex;align-items:center}
.sx .sx-rib .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.sx .sx-rib .btn.ghost:hover{background:rgba(255,255,255,.12)}
@media (max-width:560px){.sx .sx-rib .wrap{padding-left:14px;font-size:12.5px}.sx .sx-rib .btn:not(.ghost){display:none}}
/* the page's own section links, as a slim second row */
.sx-sub{max-width:1180px;margin:8px auto 0;display:flex;justify-content:center}
.sx-toc{display:flex;gap:2px;padding:4px;border-radius:99px;max-width:100%;overflow-x:auto;scrollbar-width:none;background:var(--sx-bg);border:1px solid var(--sx-border);
  -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 10px 30px -18px rgba(0,0,0,.4)}
.sx-toc::-webkit-scrollbar{display:none}
.sx .sx-toc a{color:var(--sx-muted);font:500 13px "Rethink Sans",system-ui,sans-serif;padding:6px 12px;border-radius:99px;white-space:nowrap;transition:background .2s,color .2s;display:block}
.sx .sx-toc a:hover{color:var(--sx-fg);background:var(--sx-hover)}
.sx .sx-toc a[aria-current="true"]{color:var(--sx-fg);background:var(--sx-hover);box-shadow:inset 0 0 0 1px var(--sx-border)}
.sx a:focus-visible,.sx button:focus-visible{outline:2px solid var(--sx-red);outline-offset:2px}

@media (max-width:1080px){.sx-note{display:none}}
@media (max-width:960px){
  .sx-nav,.sx-sep{display:none}
  .sx-burger{display:grid}
}
@media (max-width:560px){
  .sx{padding:8px 10px 4px}
  .sx-pill{height:54px;padding:0 6px 0 8px}
  .sx-logo span,.sx-bar,.sx-lockup{display:none}
  .sx-glyph{display:block}
  .sx-save span,.sx-ring span{display:none}
  .sx-ghost{display:none}
  .sx-slot .sx-btn:not(.red){display:none}
  .sx-btn{padding:0 13px}
  .sx-sub{display:none}
}

/* ---------- ambient light (light pages) ---------- */
.sx-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sx-ambient i{position:absolute;border-radius:50%;filter:blur(110px);will-change:transform}
.sx-ambient i:nth-child(1){width:46vw;height:46vw;max-width:760px;max-height:760px;top:-18vw;right:-8vw;background:light-dark(rgba(240,22,33,.09),rgba(240,22,33,.16));animation:sx-a 28s ease-in-out infinite alternate}
.sx-ambient i:nth-child(2){width:38vw;height:38vw;max-width:620px;max-height:620px;bottom:-16vw;left:-10vw;background:light-dark(rgba(255,106,61,.06),rgba(184,13,24,.14));animation:sx-b 34s ease-in-out infinite alternate}
.sx-ambient i:nth-child(3){width:26vw;height:26vw;max-width:420px;max-height:420px;top:38%;left:42%;background:light-dark(rgba(240,22,33,.035),rgba(240,22,33,.06));animation:sx-c 40s ease-in-out infinite alternate}
.sx-ambient b{position:absolute;inset:0;background-image:radial-gradient(light-dark(rgba(23,23,27,.08),rgba(255,255,255,.06)) 1px,transparent 1px);background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 30%,transparent 75%)}
@keyframes sx-a{to{transform:translate3d(-6vw,5vw,0) scale(1.08)}}
@keyframes sx-b{to{transform:translate3d(7vw,-4vw,0) scale(1.12)}}
@keyframes sx-c{to{transform:translate3d(-10vw,-6vw,0) scale(.9)}}

@media (prefers-reduced-motion:reduce){.sx *,.sx-ambient i{animation:none!important;transition:none!important}}
@media print{.sx,.sx-ambient{display:none!important}}

/* the dark pages' full-bleed covers start below the floating header */
body[data-tone="dark"] .cover{padding-top:170px}
@media (max-width:560px){body[data-tone="dark"] .cover{padding-top:96px}}