/* storefront.css: the visual storefront (store index + product pages), both brands.
   Source of truth: skills-global/technical/cloudflare-deploy/storefront/storefront.css.
   build-storefront.js writes <site>/assets/storefront.css from this file, replacing the
   token block below with the brand's tokens. Do not edit the site copy.
   Facet corner cut on cards, mosaic canvases for features, no gold bars beside text. */

:root{
  --sf-ink: #1e2a42;
  --sf-line: #e8dece;
  --sf-muted: #5d6572;
  --sf-label: #2a5fa8;
  --sf-focus: #2a5fa8;
  --sf-soft: #f5f0e8;
  --sf-navy: #1e2a42;
  --sf-navy-dark: #172236;
  --sf-radius: 6px;
  --sf-label-on-dark: #a3c8f2;
  --sf-on-dark-soft: #d8d0c2;
}

.sf-main{ max-width:1200px; margin:0 auto; padding:56px 32px 24px; }
.sf-band{ width:100%; height:56px; display:block; margin:0 0 24px; }
.sf-head{ max-width:none; margin:0 0 24px; text-align:center; }   /* intro spans the full content width (Travis 2026-10-09) */
.sf-head h1{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(30px,4vw,42px); line-height:1.1; letter-spacing:-0.02em; color:var(--sf-ink); margin:0 0 14px; text-wrap:balance; }
.sf-intro{ font-size:17px; line-height:1.6; color:var(--sf-muted); margin:0; text-align:left; }
.sf-intro a{ color:inherit; }

/* ---------- showcase ---------- */
.store-showcase{ display:grid; gap:18px; margin:0 0 28px; }
.sf-showcase-head{ grid-column:1 / -1; margin:0 0 -4px; }
.sf-showcase-head h2{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(21px,2.4vw,28px); letter-spacing:-0.01em; line-height:1.2; color:var(--sf-ink); margin:0 0 6px; text-wrap:balance; }
.sf-showcase-head p{ font-size:16px; line-height:1.55; color:var(--sf-muted); margin:0; max-width:72ch; text-align:left; }
.sf-feature{ position:relative; background:var(--sf-navy-dark); padding:14px; overflow:hidden; border-radius:var(--sf-radius); color:#ffffff; }
.sf-feature > canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sf-feature-inner{ position:relative; display:grid; background:var(--sf-navy); border-radius:var(--sf-radius); overflow:hidden; }
.sf-feature-media{ position:relative; min-height:220px; background:var(--sf-navy-dark); }
.sf-feature-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.sf-feature-body{ position:relative; padding:24px 24px 26px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.sf-feature-label{ font-family:'Montserrat',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; font-size:12px; color:var(--sf-label-on-dark); margin:0; }
.sf-feature-name{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(24px,3vw,34px); line-height:1.15; letter-spacing:-0.01em; margin:0; color:#ffffff; text-wrap:balance; }
.sf-feature-name a{ color:inherit; text-decoration:none; }
.sf-feature-name a:hover{ text-decoration:underline; }
.sf-feature-outcome{ font-size:16px; line-height:1.55; color:var(--sf-on-dark-soft); margin:0; max-width:52ch; text-align:left; }
.sf-feature-price{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:22px; color:#ffffff; margin:4px 0 0; }
.sf-feature-anchor{ font-size:13px; color:var(--sf-on-dark-soft); margin:0; }
.sf-feature-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; margin-top:6px; }
.sf-feature a.sf-textlink{ color:#ffffff; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.sf-feature--compact .sf-feature-body{ padding:18px 18px 20px; gap:7px; }
.sf-feature--compact .sf-feature-name{ font-size:clamp(19px,2vw,22px); }
.sf-feature--compact .sf-feature-outcome{ font-size:14px; }
.sf-feature--compact .sf-feature-price{ font-size:18px; }
.sf-feature--compact{ display:flex; flex-direction:column; }
.sf-feature--compact .sf-feature-inner{ flex:1 1 auto; }
.sf-anchorline{ font-size:14px; color:var(--sf-muted); text-align:center; margin:-8px 0 30px; }
@media (min-width:900px){
  .store-showcase.is-multi{ grid-template-columns:2fr 1fr; grid-auto-rows:auto; }
  .store-showcase.is-multi > .sf-feature--lead{ grid-row:span 2; }
  .sf-feature--lead .sf-feature-inner{ grid-template-columns:5fr 6fr; }
  .store-showcase:not(.is-multi) .sf-feature-inner{ grid-template-columns:5fr 6fr; }
  .sf-feature--lead .sf-feature-media{ min-height:340px; }
}
@media (min-width:620px) and (max-width:899px){
  .sf-feature--lead .sf-feature-inner{ grid-template-columns:1fr 1fr; }
}

/* buttons shared with site.css (.btn-gold, .btn-dark) */
.sf-btn{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; padding:11px 20px; border-radius:var(--sf-radius); text-decoration:none; cursor:pointer; min-height:44px; box-sizing:border-box; }
a.sf-btn{ display:inline-flex; align-items:center; justify-content:center; }
.sf-btn-light{ background:#ffffff; color:var(--sf-ink) !important; border:2px solid #ffffff; }
.sf-btn-light:hover{ background:var(--sf-soft); }
.sf-btn-dark{ background:var(--sf-ink); color:#ffffff !important; border:2px solid var(--sf-ink); }
.sf-btn-dark:hover{ background:var(--sf-navy-dark); border-color:var(--sf-navy-dark); }

/* ---------- chips + shelves ---------- */
.store-tags{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:0 0 36px; }
.store-tag{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:0.02em; padding:14px 16px; border-radius:999px; text-decoration:none; border:1px solid var(--sf-line); color:var(--sf-ink); background:var(--sf-soft); }
.store-tag:hover{ background:var(--sf-line); }
.sf-shelf{ margin:0 0 40px; scroll-margin-top:90px; }
.sf-shelf-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 14px; }
.sf-shelf-head h2{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(21px,2.4vw,26px); letter-spacing:-0.01em; color:var(--sf-ink); margin:0; }
.sf-seeall{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:13.5px; color:var(--sf-label); text-decoration:none; padding:12px 0; }
.sf-seeall:hover{ text-decoration:underline; }
.sf-rowwrap{ position:relative; }
.sf-row{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:2px 2px 14px; scrollbar-width:thin; }
.sf-row > .sf-card{ flex:0 0 78vw; max-width:340px; scroll-snap-align:start; }
.sf-rowarrow{ position:absolute; top:34%; width:40px; height:40px; border-radius:50%; background:rgba(23,34,54,0.72); border:1.5px solid rgba(255,255,255,0.55); display:none; align-items:center; justify-content:center; cursor:pointer; z-index:5; padding:0; }
.sf-rowarrow.is-on{ display:flex; }
.sf-rowarrow-prev{ left:4px; }
.sf-rowarrow-next{ right:4px; }
@media (min-width:768px){
  .sf-row{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; scroll-snap-type:none; padding:2px 2px 4px; }
  .sf-shelf.is-books .sf-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sf-row > .sf-card{ flex:none; max-width:none; }
  .sf-shelf[data-collapsible]:not([data-expanded]) .sf-row > .sf-card:nth-child(n+9){ display:none; }
  .sf-rowarrow{ display:none !important; }
}
@media (max-width:767px){ .sf-seeall[data-seeall]{ display:none; } }

/* ---------- card: image, name, outcome, price, action, next step ---------- */
.sf-card{ position:relative; display:flex; flex-direction:column; background:var(--sf-line); padding:1px; clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%); scroll-margin-top:90px; }
.sf-card > *{ background:#ffffff; }
.sf-media{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--sf-navy-dark); }
.sf-media img{ width:100%; height:100%; object-fit:cover; display:block; position:relative; }
.sf-media.is-portrait img{ object-fit:contain; z-index:1; }
.sf-media canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sf-badges{ position:absolute; top:10px; left:10px; z-index:2; display:flex; flex-wrap:wrap; gap:6px; }
.sf-badge{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; background:#ffffff; color:var(--sf-ink); padding:4px 9px; border-radius:var(--sf-radius); box-shadow:0 1px 4px rgba(0,0,0,0.25); }
.sf-name{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:17px; line-height:1.25; color:var(--sf-ink); margin:0; padding:14px 18px 0; }
.sf-name a{ color:inherit; text-decoration:none; }
.sf-name a::after{ content:""; position:absolute; inset:0; z-index:1; }
.sf-name a:hover{ text-decoration:underline; }
.sf-name a:focus-visible{ outline:none; }
.sf-name a:focus-visible::after{ border:3px solid var(--sf-focus); }
.sf-outcome{ font-size:14px; line-height:1.45; color:var(--sf-muted); margin:0; padding:6px 18px 0; flex:1 1 auto; text-align:left; }
.sf-price{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:18px; color:var(--sf-ink); padding:10px 18px 0; }
.sf-price .sf-reg{ font-weight:500; font-size:13px; color:var(--sf-muted); margin-left:8px; }
.sf-price .sf-suffix{ font-weight:500; font-size:14px; color:var(--sf-muted); margin-left:6px; }
.sf-price .sf-code{ font-size:14px; }
.sf-price .sf-was{ font-weight:500; font-size:14px; color:var(--sf-muted); margin-left:8px; text-decoration:line-through; }
.sf-price .sf-save{ display:block; font-weight:500; font-size:12.5px; color:var(--sf-muted); }
.sf-price .sf-note{ font-weight:500; font-size:13px; color:var(--sf-muted); display:block; }
.sf-feature-price .sf-note{ display:block; font-weight:500; font-size:14px; color:rgba(255,255,255,.82); margin-top:6px; }
.sf-action{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:44px; padding:10px 18px 14px; position:relative; z-index:2; }
.sf-action .cart-add, .sf-action a.sf-btn{ font-size:14px; }
.sf-action .cart-add{ border:1.5px solid; }
.sf-next{ font-size:12.5px; line-height:1.4; color:var(--sf-muted); margin:0; padding:0 18px 18px; text-align:left; position:relative; z-index:2; }
.sf-next a{ color:var(--sf-ink); font-weight:600; text-underline-offset:2px; }
.sf-soon{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--sf-ink); background:var(--sf-soft); border:1px solid var(--sf-line); padding:7px 12px; border-radius:999px; }
.sf-soon[hidden]{ display:none; }

/* coming soon: compact row at the end of a shelf */
.sf-soon-row{ display:flex; flex-wrap:wrap; gap:12px; margin:14px 0 0; }
.sf-card.is-soon{ flex-direction:row; align-items:center; flex:1 1 280px; max-width:420px; clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%); }
.sf-card.is-soon .sf-media{ width:72px; flex:0 0 72px; aspect-ratio:1/1; }
.sf-card.is-soon .sf-name{ flex:1 1 0; min-width:0; align-self:stretch; display:flex; align-items:center; padding:10px 12px; font-size:15px; }
.sf-card.is-soon .sf-action{ flex:0 0 auto; align-self:stretch; min-height:0; padding:10px 12px 10px 0; }
.sf-row > .sf-card.is-soon{ flex:0 0 78vw; }

/* ---------- ladder recap ---------- */
.sf-ladder{ margin:12px 0 36px; }
.sf-ladder h2{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(20px,2.2vw,24px); color:var(--sf-ink); margin:0 0 14px; text-wrap:balance; }
.sf-ladder ol{ list-style:none; margin:0; padding:0; display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:768px){ .sf-ladder ol{ grid-template-columns:repeat(4,1fr); } }
.sf-step{ position:relative; display:flex; flex-direction:column; gap:3px; padding:16px 18px; border:1px solid var(--sf-line); background:var(--sf-soft); border-radius:var(--sf-radius); text-decoration:none; color:var(--sf-ink); height:100%; box-sizing:border-box; }
.sf-step:hover{ background:var(--sf-line); }
.sf-step-n{ font-family:'Montserrat',sans-serif; font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--sf-label); }
.sf-step-name{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; line-height:1.25; }
.sf-step-price{ font-size:14px; color:var(--sf-muted); }
.sf-step.is-here{ border-color:var(--sf-ink); box-shadow:inset 0 0 0 1px var(--sf-ink); }
.sf-step-here{ font-family:'Montserrat',sans-serif; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--sf-ink); }
.sf-step.is-featured{ background:var(--sf-navy); border-color:var(--sf-navy); color:#ffffff; }
.sf-step.is-featured .sf-step-n{ color:var(--sf-label-on-dark); }
.sf-step.is-featured .sf-step-price{ color:var(--sf-on-dark-soft); }
.sf-step.is-featured .sf-step-here{ color:#ffffff; }
.sf-step.is-featured:hover{ background:var(--sf-navy-dark); }
.sf-step-wrap{ position:relative; }
.sf-support{ text-align:center; font-size:13.5px; line-height:1.6; color:var(--sf-muted); padding:8px 0 32px; margin:0; }
.sf-support a{ color:var(--sf-label); text-decoration:none; font-weight:600; }
.store-foot{ text-align:center; font-size:13px; line-height:1.6; color:var(--sf-muted); margin:0; padding-bottom:32px; }

/* ---------- gallery arrows (store-slider.js wires .store-media) and slides ---------- */
.store-media{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--sf-navy-dark); }
.store-slider{ display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; }
.store-slider::-webkit-scrollbar{ display:none; }
.store-slide{ position:relative; flex:0 0 100%; scroll-snap-align:start; height:100%; background:var(--sf-navy-dark); }
.store-slide img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.store-slide.is-portrait img{ object-fit:contain; }
.store-slide video{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
.store-slide canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.store-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(23,34,54,0.62); box-shadow:0 2px 8px rgba(0,0,0,0.35); border:1.5px solid rgba(255,255,255,0.55); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; padding:0; }
.store-arrow:hover{ background:rgba(23,34,54,0.85); }
.store-arrow-prev{ left:12px; }
.store-arrow-next{ right:12px; }
.store-slider:focus-visible{ outline:3px solid var(--sf-focus); outline-offset:-3px; }

/* ---------- product page ---------- */
.sf-pdp{ padding-top:28px; }
.sf-crumb{ font-size:13.5px; color:var(--sf-muted); margin:0 0 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf-crumb a{ color:var(--sf-muted); }
.sf-pdp-grid{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr); margin:0 0 36px; }
.sf-gallery{ min-width:0; }
.sf-gallery .store-media{ border-radius:var(--sf-radius); }
.sf-thumbs{ display:none; gap:8px; margin:10px 0 0; overflow-x:auto; padding:2px; }
.sf-thumb{ flex:0 0 auto; width:88px; aspect-ratio:4/3; padding:0; border:2px solid transparent; background:var(--sf-navy-dark); cursor:pointer; border-radius:var(--sf-radius); overflow:hidden; }
.sf-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.sf-thumb.is-portrait img{ object-fit:contain; }
.sf-thumb[aria-current="true"]{ border-color:var(--sf-ink); }
.sf-dots{ display:flex; justify-content:center; gap:4px; margin:6px 0 0; }
.sf-dot{ width:24px; height:24px; padding:0; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sf-dot::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--sf-line); }
.sf-dot[aria-current="true"]::before{ background:var(--sf-ink); }
@media (min-width:768px){ .sf-thumbs{ display:flex; } .sf-dots{ display:none; } }
@media (min-width:900px){
  .sf-pdp-grid{ grid-template-columns:58fr 42fr; gap:44px; align-items:start; }
  .sf-gallery{ position:sticky; top:96px; }
}
.sf-buybox{ min-width:0; }
.sf-buybox .sf-label{ font-family:'Montserrat',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; font-size:12px; color:var(--sf-label); margin:0 0 6px; }
.sf-buybox h1{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(26px,3vw,34px); line-height:1.15; letter-spacing:-0.01em; color:var(--sf-ink); margin:0 0 12px; text-wrap:balance; }
.sf-buybox .sf-price{ padding:0; font-size:24px; margin:0 0 6px; }
.sf-buybox .sf-anchor{ font-size:13.5px; color:var(--sf-muted); margin:0 0 12px; }
.sf-bullets{ margin:14px 0 18px; padding:0 0 0 20px; }
.sf-bullets li{ font-size:15.5px; line-height:1.5; color:var(--sf-ink); margin:0 0 7px; }
.sf-buybox .sf-action{ padding:0; margin:0 0 16px; min-height:48px; }
.sf-buybox .sf-action .cart-add, .sf-buybox .sf-action a.sf-btn{ font-size:15px; padding:13px 24px; }
.sf-buybox .sf-next, .sf-buybox .sf-start{ padding:0; margin:0 0 8px; font-size:14px; color:var(--sf-muted); }
.sf-buybox .sf-start a{ color:var(--sf-ink); font-weight:600; }
.sf-buybox .sf-story{ font-size:14px; margin:8px 0 0; }
.sf-buybox .sf-story a{ color:var(--sf-ink); font-weight:600; }
.sf-inside{ margin:0 0 36px; }
.sf-inside h2{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(21px,2.4vw,26px); color:var(--sf-ink); margin:0 0 14px; }
.sf-paths{ margin:0 0 36px; }
.sf-paths h2{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(21px,2.4vw,26px); color:var(--sf-ink); margin:0 0 14px; }
.sf-paths-grid{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:768px){ .sf-paths-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sf-paths figure{ margin:0; }
.sf-paths .sf-tile{ aspect-ratio:4/3; overflow:hidden; background:var(--sf-navy-dark); border-radius:var(--sf-radius); }
.sf-paths .sf-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.sf-paths figcaption{ display:flex; flex-direction:column; gap:2px; font-size:14.5px; line-height:1.4; color:var(--sf-muted); margin:8px 0 0; text-align:left; }
.sf-paths figcaption strong{ font-family:'Montserrat',sans-serif; font-size:16.5px; color:var(--sf-ink); }
.sf-inside-grid{ display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:768px){ .sf-inside-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } .sf-inside-grid.is-three{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sf-inside figure{ margin:0; }
.sf-inside .sf-tile{ aspect-ratio:4/3; overflow:hidden; background:var(--sf-navy-dark); border-radius:var(--sf-radius); }
.sf-inside .sf-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.sf-inside .sf-tile.is-portrait img{ object-fit:contain; }
.sf-inside figcaption{ font-size:13.5px; line-height:1.4; color:var(--sf-muted); margin:6px 0 0; text-align:left; }

@media (max-width:480px){
  .sf-main{ padding:24px 16px 16px; }
  .sf-band{ height:40px; margin-bottom:14px; }
  .sf-head{ margin-bottom:14px; }
  .store-tags{ margin-bottom:20px; }
  .sf-feature-body{ padding:20px 18px 22px; }
  .store-tag{ font-size:12px; padding:14px 12px; letter-spacing:0; text-align:center; }
}
@media (prefers-reduced-motion:reduce){ .store-slider, .sf-row{ scroll-behavior:auto; } }

/* products with no image yet: brand mosaic tile carrying the product name (never a broken img) */
.sf-media.is-placeholder, .store-slide.is-placeholder{ display:flex; align-items:center; justify-content:center; }
.sf-ph-name{ position:relative; z-index:2; font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(17px,2vw,22px); line-height:1.25; color:#ffffff; text-align:center; text-wrap:balance; padding:10px 18px; background:var(--sf-navy); max-width:90%; border-radius:var(--sf-radius); }

/* a shelf with one live card (the Lab): a plain small row, image left */
@media (min-width:768px){
  .sf-shelf.is-single .sf-row, .sf-group.is-single .sf-row{ display:block; }
  .sf-shelf.is-single .sf-card:not(.is-soon), .sf-group.is-single .sf-card:not(.is-soon){ display:grid; grid-template-columns:200px 1fr; max-width:680px; clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%); }
  .sf-shelf.is-single .sf-card:not(.is-soon) > .sf-media, .sf-group.is-single .sf-card:not(.is-soon) > .sf-media{ grid-column:1; grid-row:1 / span 6; aspect-ratio:auto; min-height:100%; }
  .sf-shelf.is-single .sf-card:not(.is-soon) > :not(.sf-media), .sf-group.is-single .sf-card:not(.is-soon) > :not(.sf-media){ grid-column:2; }
  .sf-shelf.is-single .sf-card:not(.is-soon) > .sf-outcome, .sf-group.is-single .sf-card:not(.is-soon) > .sf-outcome{ flex:none; }
}

/* ---------- gauntlet r1b: balanced wraps, quiet anchor line, breadcrumb current page ---------- */
.sf-name, .sf-feature-name, .sf-step-name, .sf-btn, .sf-soon, .sf-textlink, .sf-seeall, .store-tag, .sf-inside figcaption, .sf-buybox h1{ text-wrap:balance; }
.sf-outcome, .sf-feature-outcome, .sf-bullets li, .sf-showcase-head p, .sf-intro{ text-wrap:pretty; }
.sf-feature-anchor{ font-size:12.5px; line-height:1.4; margin:-2px 0 0; opacity:.82; text-wrap:balance; }
.sf-buybox .sf-anchor{ font-size:12.5px; margin:0 0 12px; }
.sf-crumb [aria-current="page"]{ color:var(--sf-ink); font-weight:600; }
.sf-feature-media.is-contain{ background:var(--sf-navy-dark); }
.sf-feature-media.is-contain img{ object-fit:contain; padding:8px; box-sizing:border-box; }

/* ---------- gauntlet r2: lightbox, zoom button, wrapped thumbs, secondary link, sr-only ---------- */
.sf-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.store-slide.is-zoomable img{ cursor:zoom-in; }
.sf-thumbs{ flex-wrap:wrap; overflow:visible; }
.sf-buybox .sf-story.is-secondary{ font-size:13px; margin:6px 0 0; }
.sf-buybox .sf-story.is-secondary a{ color:var(--sf-muted); font-weight:500; }
.sf-feature-anchor a, .sf-anchorline a, .sf-anchor a{ color:inherit; text-underline-offset:3px; }
/* what's-inside explorer on product pages: the six resource buttons stay visible and reachable at every width
   (the base sheet hides them above 760 px and leaves only the on-shape labels), and the two example lines sit on their own rows */
.sf-inside .wi-form.mf-ready .mf-chips{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:14px; }
.sf-inside .wi-form .mf-chips .mf-chip{ white-space:normal; padding:10px 12px; min-height:44px; text-wrap:balance; }
.sf-inside .wi-guide, .sf-inside .wi-outcomes{ display:block; }
.sf-inside .wi-guide + .wi-outcomes{ margin-top:0.7em; }
@media (max-width:759px){ .sf-inside .wi-form.mf-ready .mf-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* gauntlet r2: the spec image sits as a framed picture on the card (no separate band), the zoom button top right clear of its content */
.sf-feature-media.is-contain{ aspect-ratio:auto; min-height:0; padding:18px; display:flex; align-items:center; background:transparent; }
.sf-feature-media.is-contain img{ position:static; padding:0; width:100%; height:auto; object-fit:contain; border-radius:6px; }

/* ---------- gauntlet r4: controls never cover a picture; lightbox (desktop) and phone viewer ---------- */
/* the gallery's own in-image arrows (store-slider.js) are replaced by the row under the picture */
.sf-gallery .store-arrow{ display:none !important; }
.sf-gtools{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 0; }
.sf-gnav{ display:flex; gap:8px; }
.sf-gbtn{ width:44px; height:44px; border-radius:50%; background:var(--sf-soft); color:var(--sf-ink); border:1.5px solid var(--sf-line); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.sf-gbtn:hover{ background:var(--sf-line); }
.sf-gbtn:focus-visible, .sf-zoom:focus-visible{ outline:3px solid var(--sf-focus); outline-offset:2px; }
.sf-zoom{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; background:var(--sf-soft); color:var(--sf-ink); border:1.5px solid var(--sf-line); font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; cursor:zoom-in; }
.sf-zoom:hover{ background:var(--sf-line); }
.sf-dots{ margin-top:2px; }

.sf-lb{ position:fixed; inset:0; z-index:100000; background:#080c16; display:flex; align-items:center; justify-content:center; }
.sf-lb-top, .sf-lb-bar{ display:contents; }
.sf-lb-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:64px 12px 56px; }
.sf-lb-img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; box-shadow:0 10px 40px rgba(0,0,0,0.5); user-select:none; -webkit-user-drag:none; }
.sf-lb-btn{ position:absolute; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.14); color:#ffffff; border:1.5px solid rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; z-index:2; }
.sf-lb-btn[hidden]{ display:none; }
.sf-lb-btn:hover{ background:rgba(255,255,255,0.28); }
.sf-lb-btn:focus-visible{ outline:3px solid #ffffff; outline-offset:2px; }
.sf-lb-close{ top:10px; right:10px; }
.sf-lb-prev{ left:10px; top:50%; transform:translateY(-50%); }
.sf-lb-next{ right:10px; top:50%; transform:translateY(-50%); }
.sf-lb-count{ position:absolute; left:0; right:0; bottom:14px; margin:0; text-align:center; color:#ffffff; font:600 14px/1 'Montserrat',sans-serif; letter-spacing:0.06em; z-index:1; pointer-events:none; }
@media (min-width:900px){ .sf-lb-stage{ padding:64px 84px 56px; } .sf-lb-prev{ left:22px; } .sf-lb-next{ right:22px; } .sf-lb-close{ top:18px; right:22px; } }

/* phone viewer (below 768 px): top bar with Close, the stage at full width (pinch, drag, double tap), a bar below with the arrows and
   the counter. Nothing sits over the picture. */
.sf-lb--phone{ flex-direction:column; align-items:stretch; justify-content:flex-start; height:100%; height:100dvh; }
.sf-lb--phone .sf-lb-top{ display:flex; justify-content:flex-end; align-items:center; flex:0 0 56px; padding:4px 10px; }
.sf-lb--phone .sf-lb-stage{ position:relative; inset:auto; flex:1 1 auto; min-height:0; padding:0; display:block; overflow:hidden; touch-action:none; }
.sf-lb--phone .sf-lb-img{ position:absolute; left:0; top:0; max-width:none; max-height:none; transform-origin:0 0; touch-action:none; box-shadow:none; will-change:transform; }
.sf-lb--phone .sf-lb-bar{ display:flex; align-items:center; justify-content:space-between; flex:0 0 68px; padding:0 14px; padding-bottom:env(safe-area-inset-bottom,0px); }
.sf-lb--phone .sf-lb-btn{ position:static; transform:none; flex:0 0 auto; }
.sf-lb--phone .sf-lb-count{ position:static; flex:1 1 auto; pointer-events:none; }

/* quiet note when the availability call failed: the price stays, the button waits */
.sf-busy{ font-size:13px; line-height:1.4; color:var(--sf-muted); font-weight:500; }
.sf-busy[hidden]{ display:none; }
/* guide book page: the outcome sentence sits right under the title */
.sf-pdp-outcome{ font-size:17px; line-height:1.5; color:var(--sf-muted); margin:0 0 14px; text-align:left; text-wrap:pretty; }
/* badges on a card whose picture is a spec image sit in the card flow, never over the picture */
.sf-badges.is-inline{ position:static; padding:10px 18px 0; background:#ffffff; }
.sf-badges.is-inline + .sf-name{ padding-top:8px; }
/* five cards in a shelf: three across, the last two centered (no lone card on a row) */
@media (min-width:768px){
  .sf-shelf.is-wrap3 .sf-row, .sf-group.is-wrap3 .sf-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
  .sf-shelf.is-wrap3 .sf-row > .sf-card, .sf-group.is-wrap3 .sf-row > .sf-card{ flex:0 0 calc((100% - 32px) / 3); max-width:none; }
}

/* two showcase cards: side by side at equal height (a spanning lead would leave an empty field under its partner) */
@media (min-width:900px){
  .store-showcase.is-two > .sf-feature--lead{ grid-row:auto; }
  .store-showcase.is-two > .sf-feature--compact .sf-feature-body{ justify-content:center; }
}

/* ---------- coaching offers (bead claude-code-6cvl3, gate G-262): three showcase cards, comparison table, accordion ---------- */
.sf-offers{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .sf-offers{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sf-offer{ position:relative; display:flex; box-sizing:border-box; padding:24px 26px 26px; border-radius:14px; background:#ffffff; color:var(--sf-ink); }
.sf-offer-body{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; width:100%; }
.sf-offer-name{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(21px,2.2vw,26px); line-height:1.15; letter-spacing:-0.01em; margin:0; color:var(--sf-ink); text-wrap:balance; }
.sf-offer-outcome{ font-size:15px; line-height:1.55; color:var(--sf-muted); margin:0; text-align:left; }
.sf-offer-price{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:16px; color:var(--sf-ink); margin:auto 0 0; padding:8px 14px; background:#dce6f3; border:1.5px solid #4a6499; border-radius:6px; text-wrap:balance; }   /* softened: light-blue box like the compare button, so the card titles lead (Travis 2026-10-09) */   /* pinned to the card bottom so prices line up (Travis 2026-10-09) */
.sf-offer-sub{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; line-height:1.4; color:var(--sf-label); margin:0; text-align:left; text-wrap:balance; }
.sf-offer-example{ margin:0; font-size:14px; }
.sf-offer a.sf-textlink{ color:var(--sf-ink); font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.sf-offer-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; margin-top:auto; padding-top:8px; }
.sf-offers-actions{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px 18px; align-items:center; margin-top:22px; }
@media (min-width:900px){ .sf-offers-actions{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sf-offers-actions .sf-offers-note{ margin:0; }
.sf-offer .sf-btn{ white-space:normal; text-align:center; line-height:1.3; }
.sf-offers-note{ grid-column:1 / -1; margin:2px 0 0; font-size:14px; line-height:1.5; color:var(--sf-muted); text-align:left; }

.sf-compare{ margin:0 0 36px; }
.sf-compare h2{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(21px,2.4vw,26px); line-height:1.2; color:var(--sf-ink); margin:0 0 14px; text-wrap:balance; }
.sf-compare-card{ position:relative; padding:14px 18px; border-radius:14px; background:#ffffff; }
.sf-cmp{ width:100%; border-collapse:collapse; table-layout:fixed; }
.sf-cmp th, .sf-cmp td{ padding:13px 14px; vertical-align:top; text-align:left; border-bottom:1px solid var(--sf-line); font-size:14.5px; line-height:1.5; color:var(--sf-ink); }
.sf-cmp tbody tr:last-child th, .sf-cmp tbody tr:last-child td{ border-bottom:0; }
.sf-cmp col:first-child, .sf-cmp thead td{ width:15%; }
.sf-cmp thead th{ border-bottom:2px solid var(--sf-ink); padding-top:6px; }
.sf-cmp-name{ display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:17px; line-height:1.25; }
.sf-cmp-subtitle{ display:block; font-size:13.5px; font-weight:400; color:var(--sf-muted); margin-top:3px; }
.sf-cmp tbody th{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--sf-label); }
.sf-cmp tr.is-price td{ font-weight:600; }
.sf-cmp-price{ display:block; }
.sf-cmp-price + .sf-cmp-price{ margin-top:4px; }
@media (max-width:759px){
  .sf-compare-card{ padding:10px 12px; }
  .sf-cmp, .sf-cmp tbody, .sf-cmp tr, .sf-cmp th, .sf-cmp td{ display:block; }
  .sf-cmp thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .sf-cmp tbody tr{ border-bottom:1px solid var(--sf-line); padding:10px 0 12px; }
  .sf-cmp tbody tr:last-child{ border-bottom:0; }
  .sf-cmp tbody th{ border:0; padding:4px 4px 6px; font-size:12.5px; }
  .sf-cmp td{ border:0; padding:6px 4px; }
  .sf-cmp td::before{ content:attr(data-label); display:block; font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; color:var(--sf-ink); margin-bottom:1px; }
}

.sf-acc{ margin:0 0 36px; }
.sf-acc-card{ position:relative; padding:6px 22px; border-radius:14px; background:#ffffff; }
.sf-acc-row{ border-bottom:1px solid var(--sf-line); }
.sf-acc-row:last-child{ border-bottom:0; }
.sf-acc-sum{ display:flex; align-items:baseline; gap:6px 16px; padding:16px 4px; min-height:44px; box-sizing:border-box; cursor:pointer; list-style:none; color:var(--sf-ink); }
.sf-acc-sum::-webkit-details-marker{ display:none; }
.sf-acc-sum:focus-visible{ outline:2px solid var(--sf-ink); outline-offset:2px; border-radius:6px; }
.sf-acc-sum:hover .sf-acc-title{ text-decoration:underline; text-underline-offset:3px; }
.sf-acc-title{ flex:0 0 auto; font-family:'Montserrat',sans-serif; font-weight:700; font-size:18px; line-height:1.3; }
.sf-acc-sub{ flex:1 1 auto; min-width:0; font-size:14.5px; line-height:1.4; color:var(--sf-muted); text-align:left; }
.sf-acc-chev{ flex:none; width:10px; height:10px; margin-left:4px; align-self:center; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-3px) rotate(45deg); transition:transform .2s ease; opacity:.7; }
.sf-acc-row[open] .sf-acc-chev{ transform:translateY(1px) rotate(225deg); }
.sf-acc-detail{ padding:0 4px 20px; text-align:left; }
.sf-acc-cta{ margin:16px 0 0; }
.sf-defs{ margin:0; display:grid; gap:12px; }
.sf-defs > div{ display:grid; grid-template-columns:minmax(0,10.5em) minmax(0,1fr); gap:3px 18px; align-items:baseline; }
.sf-defs dt{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--sf-label); }
.sf-defs dd{ margin:0; font-size:15px; line-height:1.6; color:var(--sf-ink); max-width:68ch; text-wrap:pretty; }
.sf-defs dd a{ color:var(--sf-ink); font-weight:600; text-underline-offset:3px; }
.sf-terms{ margin:0 0 36px; }
.sf-terms h2{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(21px,2.4vw,26px); line-height:1.2; color:var(--sf-ink); margin:0 0 14px; text-wrap:balance; }
@media (max-width:640px){
  .sf-acc-card{ padding:4px 14px; }
  .sf-acc-sum{ flex-wrap:wrap; padding:14px 2px; }
  .sf-acc-title{ flex:1 1 calc(100% - 44px); }
  .sf-acc-sub{ flex:1 1 100%; order:3; }
  .sf-defs > div{ grid-template-columns:minmax(0,1fr); }
}

/* ---------- shelf sub-groups (BTD Creative Apps): a header block over each group's own cards ---------- */
.sf-group{ margin:0 0 30px; }
.sf-group:last-child{ margin-bottom:0; }
.sf-group-head h3{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(19px,2.1vw,24px); line-height:1.2; letter-spacing:-0.01em; color:var(--sf-ink); margin:0 0 6px; text-wrap:balance; }
.sf-group-head p{ font-size:15.5px; line-height:1.55; color:var(--sf-muted); margin:0; max-width:60ch; text-align:left; }
.sf-group-head:not(.has-image){ margin:0 0 14px; }
.sf-group-head.has-image{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:center; box-sizing:border-box; padding:22px 24px; margin:0 0 18px; border-radius:14px; background:#ffffff; }
.sf-group-media img{ display:block; width:100%; height:auto; border-radius:8px; }
@media (min-width:760px){ .sf-group-head.has-image{ grid-template-columns:minmax(0,5fr) minmax(0,4fr); gap:28px; } }
/* a coming-soon tile with no picture: the name sits small inside the 72px mosaic square (it is also written beside it) */
.sf-card.is-soon .sf-media.is-placeholder .sf-ph-name{ font-size:11px; line-height:1.2; padding:0 4px; overflow-wrap:anywhere; }
/* institutional license size picker (bead claude-code-yynpy) */
.sf-buybox .sf-action--tiers{ display:block; }
.sf-tiers{ display:grid; gap:10px; margin:0 0 10px; }
.sf-tier{ border:1px solid var(--sf-line); border-radius:var(--sf-radius); background:var(--sf-soft); padding:14px 16px; display:grid; gap:4px; }
.sf-tier-name{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:16px; line-height:1.25; color:var(--sf-ink); margin:0; text-wrap:balance; }
.sf-tier-who{ margin:0; font-size:14px; color:var(--sf-muted); }
.sf-tier-price{ margin:2px 0 8px; font-size:20px; color:var(--sf-ink); }
.sf-tier-price .sf-note{ font-size:14px; color:var(--sf-muted); }
.sf-tier .cart-add{ justify-self:start; }

/* ---------- Travis 2026-10-09 store walkthrough (BTD flags; classes only BTD emits) ---------- */
.sf-rule{ position:relative; height:1px; margin:24px 0 22px; }
.sf-rule > span{ position:absolute; left:0; right:0; top:0; height:1px; display:block; }
.store-tags.is-prominent{ gap:16px; margin:-6px 0; }
.store-tags.is-prominent .store-tag{ font-size:clamp(21px,2.4vw,26px); letter-spacing:-0.01em; padding:12px 28px; font-weight:700; }   /* same size as the shelf titles (Travis 2026-10-09) */
@media (min-width:768px){
  .sf-group.is-hero .sf-hero-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .sf-group.is-hero .sf-row4{ grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:16px; }
}
.sf-hero-row > .sf-card.is-soon{ flex-direction:column; align-items:stretch; max-width:none; clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%); }
.sf-hero-row > .sf-card.is-soon .sf-media{ width:100%; flex:none; aspect-ratio:4/3; }
.sf-hero-row > .sf-card.is-soon .sf-name{ align-self:auto; padding:14px 16px 6px; font-size:18px; }
.sf-hero-row > .sf-card.is-soon .sf-action{ align-self:auto; padding:6px 16px 16px; }
.sf-offers-actions > div{ display:flex; justify-content:center; text-align:center; }
.sf-offers-actions .sf-offers-note{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; color:var(--sf-ink); text-align:center; }
.sf-btn-light{ background:#dce6f3; color:var(--sf-ink) !important; border:2px solid #4a6499; }
.sf-btn-light:hover{ background:#4a6499; color:#ffffff !important; }
.sf-rule:has(+ .store-tags.is-prominent){ margin-bottom:22px; }   /* the strip draws 1 to 8px below the rule: 7px clear above the chips */
.store-tags.is-prominent + .sf-rule{ margin-top:10px; }   /* 7px clear below the chips, matching the top */
/* coming-soon cards: the outcome shows only when the card is a large hero card; the title sits at the top (Travis 2026-10-09) */
.sf-card.is-soon .sf-outcome{ display:none; }
.sf-hero-row > .sf-card.is-soon .sf-name{ flex:none; }
.sf-hero-row > .sf-card.is-soon .sf-outcome{ display:block; flex:1 1 auto; padding:0 16px 8px; }
.sf-hero-row > .sf-card.is-soon .sf-action{ margin-top:auto; }

/* ===== BTD Home Base store blocks (bead claude-code-vllls, Odin design call 2026-10-10; classes only the btd build emits) =====
   .sf-hb-note: store.product-note in the buy box, right under the cart action. .sf-hb-how: store.how-it-works closing the
   creative-apps shelf. Both are Mosaic Forms cards (data-mf="card"); the number chips are BTD-ramp shards, never gold bars. */
.sf-hb-note{ position:relative; margin:14px 0 4px; padding:14px 20px; background:#e6eef6; border:1px solid var(--sf-line); border-radius:var(--sf-radius); font-size:14px; line-height:1.5; color:var(--sf-ink); text-align:left; }
.sf-hb-how{ position:relative; margin:28px 0 8px; padding:28px 28px 24px; background:#ffffff; border:1px solid var(--sf-line); border-radius:10px; }
.sf-hb-how h3{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(19px,2vw,22px); line-height:1.25; letter-spacing:-0.01em; color:var(--sf-ink); margin:0 0 18px; text-wrap:balance; }
.sf-hb-how ol{ list-style:none; counter-reset:hbstep; margin:0; padding:0; display:grid; gap:14px 32px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.sf-hb-how li{ counter-increment:hbstep; position:relative; padding-left:42px; min-height:30px; font-size:15px; line-height:1.5; color:var(--sf-muted); text-align:left; }
.sf-hb-how li::before{ content:counter(hbstep); position:absolute; left:0; top:-1px; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:13px; color:#ffffff;
  background:linear-gradient(135deg,var(--sf-navy) 0%,#283752 55%,#4a6499 100%); clip-path:polygon(50% 0,100% 30%,88% 100%,10% 92%,0 26%); }
@media (max-width:640px){ .sf-hb-how{ padding:24px 20px 20px; } }