:root {
  color-scheme: light;
  --bg: #f5f6f9;
  --surface: #ffffff;
  --panel: #0b1d3f;
  --panel-0: rgba(11,29,63,0);
  --panel-fill: rgba(255,255,255,0.03);
  --panel-line: #35405c;
  --panel-line-2: #24365c;
  --ink: #0b1d3f;
  --ink-2: #5c6880;
  --ink-3: #687083;
  --ink-4: #6a707d;
  --icon-faint: #90959f;
  --icon-faint-2: #b6bcc9;
  --on-panel: #ffffff;
  --on-panel-2: #9aa5bd;
  --on-panel-3: #7885a3;
  --on-panel-4: #7c88a3;
  --line: #e2e5ec;
  --line-strong: #d6dae4;
  --line-soft: #c8ceda;
  --hairline: #eef0f4;
  --hairline-2: #f0f1f5;
  --amber: #ffa400;
  --on-amber: #0b1d3f;
  --amber-ink: #a06111;
  --amber-ink-hov: #8a5209;
  --amber-strong: #7a4a08;
  --amber-soft: #8a5f2a;
  --amber-badge: #8a5a00;
  --amber-tint: #fff6e6;
  --amber-tint-2: #fff3dd;
  --amber-tint-3: #fff2d9;
  --amber-line: #ffdca6;
  --teal-ink: #0f766e;
  --teal-tint: #e7f1ee;
  --red-ink: #9b2c2c;
  --red-tint: #fdeeee;
  --shadow-sm: rgba(11,29,63,0.16);
  --shadow-md: rgba(11,29,63,0.17);
  --shadow-lg: rgba(11,29,63,0.18);
  --shadow-xl: rgba(11,29,63,0.20);
  --shadow-modal: rgba(11,29,63,0.45);
  --scrim: rgba(11,29,63,0.55);
  --art-badge: rgba(11,29,63,0.86);
  --paypal-card: #ffffff;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080e1c;
  --surface: #101a30;
  --panel: #24365e;
  --panel-0: rgba(36,54,94,0);
  --panel-fill: rgba(255,255,255,0.045);
  --panel-line: #43578a;
  --panel-line-2: #43578a;
  --ink: #eaf0fb;
  --ink-2: #aab5cd;
  --ink-3: #8f9bb6;
  --ink-4: #7e8aa2;
  --icon-faint: #5a6684;
  --icon-faint-2: #5a6684;
  --on-panel: #ffffff;
  --on-panel-2: #aeb9d0;
  --on-panel-3: #96a2bc;
  --on-panel-4: #9aa6c0;
  --line: #1f2c49;
  --line-strong: #2c3b5e;
  --line-soft: #2c3b5e;
  --hairline: #1b2740;
  --hairline-2: #1b2740;
  --amber: #ffa400;
  --on-amber: #0b1d3f;
  --amber-ink: #ffbe63;
  --amber-ink-hov: #ffd08c;
  --amber-strong: #ffc978;
  --amber-soft: #dcb68c;
  --amber-badge: #ffc978;
  --amber-tint: rgba(255,164,0,0.10);
  --amber-tint-2: rgba(255,164,0,0.12);
  --amber-tint-3: rgba(255,164,0,0.12);
  --amber-line: rgba(255,164,0,0.30);
  --teal-ink: #57d3c6;
  --teal-tint: rgba(87,211,198,0.13);
  --red-ink: #f59491;
  --red-tint: rgba(245,148,145,0.13);
  --shadow-sm: rgba(0,0,0,0.52);
  --shadow-md: rgba(0,0,0,0.55);
  --shadow-lg: rgba(0,0,0,0.58);
  --shadow-xl: rgba(0,0,0,0.62);
  --shadow-modal: rgba(0,0,0,0.74);
  --scrim: rgba(2,5,12,0.72);
  --art-badge: rgba(4,9,20,0.88);
  --paypal-card: #ffffff;
}

    
    
    
    
    
    
  

    body { margin: 0; background: var(--bg); font-family: "Mars Centra", -apple-system, "Segoe UI", sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
    * { box-sizing: border-box; }
    a { color: var(--amber-ink); text-decoration: none; }
    a:hover { color: var(--amber-ink-hov); }
    h1, h2, h3 { font-family: "Mars Centra", "Helvetica Neue", Helvetica, sans-serif; margin: 0; letter-spacing: -0.024em; text-wrap: balance; }
    p { margin: 0; }
    img { display: block; max-width: 100%; }
  
/* Controls the artboards drew as divs and a11y.mjs promoted to <button>. This
   supplies only what their inline style is silent about — font, appearance,
   margin — because inline always beats a class where both speak. */
.ctl { appearance: none; -webkit-appearance: none; font-family: inherit; font-style: inherit;
       line-height: normal; text-align: inherit; margin: 0; }
/* Product copy. The seventeen static pages get these values as inline styles
   from descriptions.mjs, which win here and are unaffected; this is for the
   paragraphs a dynamic product's page builds at request time, which have no
   inline style to carry. Written once, in tokens, so the two cannot end up
   agreeing in light mode and disagreeing in dark. */
.ri-prose > p { font-size: 15px; line-height: 1.65; color: var(--ink-2);
                margin-top: 10px; text-wrap: pretty; }
.ri-prose > p:first-child { margin-top: 0; }
/* Identical text styling in the editor, its preview and the public product. */
.ri-rich-description, .ri-description-editor .ql-editor {
  font-family: 'Mars Centra', sans-serif; font-size: 15px; line-height: 1.65;
  color: var(--ink-2); overflow-wrap: anywhere; text-align: left;
}
.ri-rich-description p, .ri-description-editor .ql-editor p {
  margin: 10px 0 0; line-height: 1.65;
}
.ri-rich-description h2, .ri-description-editor .ql-editor h2 {
  font-size: 20px; margin: 28px 0 10px; font-weight: 600; color: var(--ink);
}
.ri-rich-description h3, .ri-description-editor .ql-editor h3 {
  font-size: 17px; margin: 28px 0 10px; font-weight: 600; color: var(--ink);
}
.ri-rich-description h4, .ri-description-editor .ql-editor h4 {
  font-size: 15px; margin: 20px 0 8px; font-weight: 600; color: var(--ink);
}
.ri-rich-description ul, .ri-rich-description ol {
  margin: 10px 0; padding-left: 24px;
}
.ri-rich-description li, .ri-description-editor .ql-editor li { margin-top: 6px; }
.ri-rich-description > :first-child, .ri-description-editor .ql-editor > :first-child { margin-top: 0; }
.ri-rich-description strong, .ri-description-editor .ql-editor strong { font-weight: 700; }
.ri-rich-description u, .ri-description-editor .ql-editor u { text-underline-offset: 3px; }

/* Responsive. Every rule below sits inside a @media block, so above 1200px not
   one of them applies and the desktop design is untouched by construction.
   The classes come from responsive() in build.mjs; the artboards know nothing
   about any of this. */
img { max-width: 100%; }

@media (max-width: 1200px) {
  /* The artboards are drawn on a 1440 canvas with a 1160 content column. Let
     both breathe, and give the column real edges so text never runs into the
     side of the screen. */
  .r-wrap { min-width: 0 !important; width: 100% !important; }
  /* :not(.r-wrap) matters. The outer shell carries BOTH classes — it is the
     1440 canvas and the 1160 column at once — and it is what paints the page
     background edge to edge. Padding it insets everything nailed to the full
     width, the nav bar above all: its white background stopped 18px short of
     both screen edges and sat in a grey frame. The gutter belongs on the inner
     rows, which is where the text that needs it actually lives. */
  .r-container:not(.r-wrap) { width: 100% !important; max-width: 1160px;
                 box-sizing: border-box; }
  .r-wrap.r-container { width: 100% !important; max-width: none; }
  /* The gutter. Width and auto margins rather than padding, so a row that
     paints a background is INSET by it instead of merely padded inside a
     full-bleed colour. Doubled class for specificity: it has to outrank
     .r-fixed's own max-width below, whichever order they end up in. */
  .r-gut.r-gut { max-width: min(1160px, calc(100% - 48px)) !important;
                 margin-left: auto !important; margin-right: auto !important; }
}

@media (max-width: 880px) {
  /* Two-column layouts — gallery beside a buy box, form beside an order summary
     — stack, to a single full-width column. */
  /* minmax(0, 1fr), never plain 1fr. Plain 1fr means minmax(AUTO, 1fr), and an
     auto minimum is min-content — so a column refuses to go narrower than the
     widest unbreakable thing in it, and quietly pushes the page wider than the
     phone. Measured, not guessed: a stacked column here computed to 474px
     inside a 234px box. */
  .r-stack { grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; }
  .r-cols-3, .r-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .r-fixed { width: 100% !important; max-width: 100% !important; }
  .r-flex { flex-wrap: wrap; }
  /* The flex analogue of minmax(0, 1fr): a flex item's default min-width is
     auto, i.e. min-content, so it will not shrink past its widest word or its
     widest fixed-size child. */
  .r-flex > * { min-width: 0; }
  /* The news-page signup is the one element that pins itself with
     flex-shrink: 0 — deliberately, so it sits beside the heading on a wide
     screen. On a phone there is no beside. */
  [data-notify] { flex-shrink: 1 !important; width: 100% !important; }
  [data-notify] [data-notify-email] { min-width: 0; }
  .r-t1 { font-size: 38px !important; line-height: 1.12 !important; }
  .r-t2 { font-size: 27px !important; line-height: 1.2 !important; }

  /* ---- the nav bar on a phone ----
     Three groups — brand, links, utilities — drawn to sit on one 1160px line.
     They cannot, so the row wraps; and because the bar is a fixed 60px with a
     painted background, whatever wrapped landed BELOW the white and on top of
     the page. Measured at 390px: the row was 75px tall inside a 60px bar and
     all three groups stacked hard left.

     So: give the bar its height back, and choose the wrap instead of leaving it
     to chance. The links group is sent to its own full-width second line; brand
     and utilities keep the first, still pushed apart. Two tidy rows. */
  .r-nav { height: auto !important; min-height: 60px; }
  .r-nav-row { flex-wrap: wrap; row-gap: 4px; padding-top: 9px; padding-bottom: 9px; }
  .r-nav-row > div:nth-child(2) { order: 3; flex-basis: 100%;
       justify-content: flex-start; gap: 24px !important; }

  /* The "What's New" popup is built after responsive() has run, so none of the
     tags above reach it. Left at 560px it is the first thing a returning
     visitor meets on a phone and it hangs 85px off both sides of the screen.
     Pinned to the viewport instead of centred on a width it cannot have. */
  .r-pop { width: auto !important; left: 15px !important; right: 15px !important;
           transform: none !important; top: 72px !important;
           /* It was taller than the screen and clipping its own dismiss row,
              because the card has overflow: hidden for its rounded corners. */
           max-height: calc(100vh - 96px) !important; overflow: auto !important; }
  /* 128px of thumbnail out of 390 leaves a text column too narrow to read. */
  .pop-thumb { width: 84px !important; }

  /* The theme switch is the one control here that costs nothing to lose: with
     no stored preference the site already follows the phone's own dark mode
     (theme.mjs reads prefers-color-scheme), so a phone in dark mode gets a dark
     site without ever touching this. Desktop keeps it. */
  .themetog, .themetog-sep { display: none !important; }
}

@media (max-width: 560px) {
  .r-gut.r-gut { max-width: calc(100% - 36px) !important; }
  .r-cols-2, .r-cols-3, .r-cols-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .r-t1 { font-size: 30px !important; }
  .r-t2 { font-size: 23px !important; }
  .r-t3 { font-size: 19px !important; }
  /* The cart rows are built by checkout.js at runtime, so the build's tagging
     pass never sees them. A 110px thumbnail leaves the product name wrapping
     after one word on a 390px screen, on the one page where hesitation costs
     money. */
  [data-cart-rows] > div { gap: 12px !important; }
  [data-cart-rows] img { width: 84px !important; }
}

/* Every <img> now carries its real pixel width and height, so the browser can
   reserve the right space before the file arrives and the page stops jumping.
   This one rule is what makes that safe.
   Without it, the height ATTRIBUTE is used as the element's height: an image
   with width:100% and height="350" renders 350px tall at every width, and the
   shop page grew from 2649px to 4357px with every card stretched. With it, the
   attributes supply only the aspect ratio and CSS decides the size, which is
   the whole intent.
   Images that set their own height inline — the galleries, which use
   height:100% with object-fit:cover — are untouched, because inline beats a
   stylesheet. */
img { height: auto; }
/* Four search and email inputs carry outline:0 inline, which beats any
   stylesheet, so the ring is drawn on the wrapper instead. */
[data-shop-search]:focus, [data-guide-search]:focus { outline: 0; }
.field-wrap:focus-within { outline: 2px solid var(--amber); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 999;
        background: var(--surface); color: var(--ink); padding: 10px 16px;
        border: 1px solid var(--line-strong); border-radius: 0 0 10px 0; text-decoration: none; }
.skip:focus { left: 0; }
.navlink { color: inherit; text-decoration: none; }
.navlink:hover { color: var(--amber-ink); }
.navlink-on { color: var(--ink); font-weight: 600; }
.navdrop { position: relative; display: flex; align-items: center; }
/* The negative margin cancels the padding, so the hit box grows to fill the
   header bar without moving anything: a 53x22 target is small for a control
   whose whole job is being clicked. */
.navdrop-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 11px 6px; margin: -11px -6px; }
.navdrop-caret { transition: transform 140ms ease; }
.navdrop[data-open="1"] .navdrop-caret { transform: rotate(180deg); }
.navdrop-menu {
  position: absolute; top: calc(100% + 14px); left: -14px; z-index: 60; min-width: 254px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 7px;
  box-shadow: 0 18px 44px var(--shadow-md); display: none; text-align: left;
}
.navdrop[data-open="1"] .navdrop-menu { display: block; }
.navdrop-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 11px; border-radius: 8px; font-size: 13.5px; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.navdrop-item:hover { background: var(--bg); color: var(--ink); }
.navdrop-item span:last-child { font-size: 12px; color: var(--ink-3); }
.navdrop-rule { height: 1px; margin: 6px 9px; background: var(--hairline); }

/* The logo's body is the brand navy, which is nearly invisible on a dark nav.
   The dark file is the same mark with that body lifted to the panel colour;
   swapping the whole image keeps the amber outline and inner detail exact. */
.logo-d { display: none; }
:root[data-theme="dark"] .logo-l { display: none; }
:root[data-theme="dark"] .logo-d { display: block; }

/* Theme switch. The track and knob are sized off the nav's own rhythm; the two
   icons sit in the track and the knob slides over whichever one is active. */
.themetog {
  position: relative; width: 50px; height: 27px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--bg);
  cursor: pointer; display: inline-flex; align-items: center; -webkit-appearance: none;
  transition: background 180ms ease, border-color 180ms ease;
}
.themetog:hover { border-color: var(--ink-4); }
.themetog:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.themetog-ico {
  position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  color: var(--ink-4); transition: color 180ms ease, opacity 180ms ease; z-index: 1;
}
.themetog-sun { left: 5.5px; }
.themetog-moon { right: 5.5px; }
:root:not([data-theme="dark"]) .themetog-sun { color: var(--amber); }
:root:not([data-theme="dark"]) .themetog-moon { opacity: 0.55; }
:root[data-theme="dark"] .themetog-moon { color: #cdd8f0; }
:root[data-theme="dark"] .themetog-sun { opacity: 0.5; }
.themetog-knob {
  position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 3px var(--shadow-sm); z-index: 0;
  transition: transform 200ms cubic-bezier(.31,.72,.34,1.02), background 180ms ease;
}
:root[data-theme="dark"] .themetog { background: #0c1526; }
:root[data-theme="dark"] .themetog-knob { transform: translateX(23px); background: #24314f; }
/* One frame of no-transition on load, so the theme does not visibly fade in. */
:root[data-boot] .themetog, :root[data-boot] .themetog-knob, :root[data-boot] .themetog-ico { transition: none; }

*{box-sizing:border-box}body{font-size:16px;line-height:1.65}a{color:var(--amber-ink)}button,input{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);padding:10px 18px;cursor:pointer;text-decoration:none;font-weight:600;font-size:15px;min-height:44px}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:4px}.primary{background:var(--amber);color:var(--on-amber);border-color:var(--amber)}.top{border-bottom:1px solid var(--line);background:var(--surface)}.top-inner{max-width:1160px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px}.wordmark{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;text-decoration:none}.wordmark img{height:30px;width:30px}.top nav{display:flex;gap:24px;align-items:center}.top nav a{color:var(--ink-2);font-size:15px}.guide-wrap{max-width:1100px;padding:32px 24px 70px;margin:auto}.breadcrumbs{font-size:14px;color:var(--ink-3);margin:0 0 30px}.intro{max-width:770px}.eyebrow{font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:var(--amber-ink)}h1{font-size:clamp(34px,5vw,52px);line-height:1.1;margin:14px 0 20px}h2{font-size:27px;line-height:1.25}h3{font-size:19px;line-height:1.35}.lead{font-size:18px;color:var(--ink-2);max-width:680px}.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 218px;gap:44px;margin-top:32px}.guide-body{min-width:0}.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 30px;margin-bottom:20px}.requirements{border-left:4px solid var(--amber)}.requirements ul{padding-left:20px;margin:16px 0 0}.requirements li{margin-top:8px;color:var(--ink-2)}.step-title{display:flex;align-items:flex-start;gap:16px}.number{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--amber);color:var(--on-amber);font-weight:700;flex-shrink:0}.step-title h2{padding-top:2px;font-size:24px}.card p,.card li{color:var(--ink-2)}.card p:last-child{margin-bottom:0}.card ol{padding-left:22px}.card ol li{padding-left:5px;margin-top:10px}.copy-field{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:12px}.copy-field label{display:block;color:var(--ink-3);font-size:13px;font-weight:600}.copy-line{display:flex;gap:14px;align-items:center;justify-content:space-between;margin-top:4px}.copy-line code{overflow-wrap:anywhere;font-size:14px;color:var(--ink);line-height:1.6;user-select:all}.copy-line button{font-size:13px;min-height:36px;padding:6px 12px;flex-shrink:0}.note{background:var(--amber-tint);border:1px solid var(--amber-line);border-radius:12px;padding:15px 18px;font-size:15px;color:var(--amber-strong)!important;margin-top:18px}.toc{position:sticky;top:28px;align-self:start;border-left:1px solid var(--line);padding-left:22px}.toc strong{display:block;font-size:13px;color:var(--ink-3);margin-bottom:12px}.toc a{display:block;font-size:14px;color:var(--ink-2);margin:12px 0;line-height:1.5}.modes{display:grid;gap:12px;margin-top:18px}.mode{border-top:1px solid var(--line);padding-top:15px}.mode p{margin:5px 0 0;font-size:15px}details{border-top:1px solid var(--line);padding:16px 0}summary{cursor:pointer;font-size:16px;font-weight:600}details p{font-size:15px}.support-box{background:var(--panel);color:var(--on-panel);border-radius:18px;padding:28px 30px;margin-top:24px}.support-box p{color:var(--on-panel-2)}.support-box a{color:#ffc25c}.foot{border-top:1px solid var(--line);padding:24px;color:var(--ink-3);font-size:13px}.foot-inner{max-width:1100px;margin:auto;display:flex;justify-content:space-between;gap:20px}.foot a{color:var(--ink-2);margin-left:18px}.connect-wrap{max-width:720px;margin:50px auto;padding:0 24px}.connect-wrap h1{font-size:38px}.connect-wrap input{display:block;width:100%;margin:10px 0 18px;padding:13px 15px;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg);color:var(--ink);font-family:ui-monospace,monospace;font-size:16px}.form-label{font-weight:600;font-size:15px}.muted{color:var(--ink-3);font-size:14px}.status{color:var(--amber-strong);font-size:15px;min-height:26px}.status.error{color:var(--red-ink)}[hidden]{display:none!important}@media(max-width:850px){.guide-layout{grid-template-columns:1fr;gap:16px}.toc{display:none}.top nav a{display:none}.guide-wrap{padding:26px 18px 46px}.card{padding:24px 22px}.copy-line{align-items:flex-start}.top-inner{padding:15px 18px}.step-title h2{font-size:22px}.foot-inner{display:block}.foot a{margin:0 18px 0 0}.intro h1{font-size:36px}}
.card p{margin-top:16px}.card h2+p{margin-top:18px}.connect-wrap>.lead{margin-bottom:26px}.terms-check{display:flex;gap:12px;align-items:flex-start;margin:20px 0;font-size:15px}.connect-wrap .terms-check input{width:21px;height:21px;flex:0 0 21px;appearance:auto;margin:3px 0;accent-color:var(--amber)}

.terms-check input{width:21px;height:21px;flex:0 0 21px;appearance:auto;margin:3px 0;accent-color:var(--amber)}