/* ==========================================================================
   FileTrove landing page — the Option B design layer (ported 2026-08-12
   from ui-playground/optionB/optionB.css; that file stays the sandbox).
   Custom layer over Bootstrap 5.3 — load AFTER ft_head_assets().

   Everything possible rides STOCK BS5 — grid, cards, list-group,
   accordion, forms, navbar (white links via BS5's own navbar variables).
   The custom layer below covers only what BS5 has no primitive for: the
   masonry wall, the mock frames / pile cards, the icon slider, and the
   screenshot slots. Prefix: b-. Accent = stock BS5 info family, matching
   text-info/btn-info in the retained live sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens + Bootstrap re-point
   -------------------------------------------------------------------------- */
:root{
  --b-paper:    #FFFFFF;   /* the wall */
  --b-panel:    #FFFFFF;   /* frames, cards */
  --b-panel-2:  var(--ft-panel);   /* raised / inset elements — the family's "panel" volume */
  --b-ink:      #101820;   /* navbar, code block, footer */
  --b-line:     #DDE4EC;
  --b-line-2:   #C6D0DC;
  --b-text:     #16202B;   /* headings */
  --b-body:     #46566B;   /* copy */
  --b-dim:      #7C8A9C;   /* captions, meta */
  /* brand accent: DERIVED from css/brand.css (loaded before this file on
     every page) — no color values live here anymore. Change the scheme in
     brand.css alone; these aliases and every b-* rule follow. Tint RULE:
     band → panel → active (--ft-band → --ft-panel → bg-subtle) are one
     hue at three volumes. */
  --b-accent:      var(--bs-primary);
  --b-accent-ink:  var(--bs-primary-text-emphasis);
  --b-accent-soft: var(--bs-primary-bg-subtle);
  --b-accent-line: var(--bs-primary-border-subtle);
  --b-link:     var(--bs-link-color);   /* the trove link — the brand family */
  --b-link-soft:rgba(var(--bs-primary-rgb),.09);
  --b-alarm:    #B4432A;   /* "before" frames only */

  /* Fraunces-fallback (owner report 2026-08-18: headline flashed oversized
     then settled): Georgia's metrics run larger than Fraunces', so the
     display=swap moment jolted. The size-adjusted local fallback renders at
     Fraunces' scale, making the swap imperceptible. */
  --b-display:"Fraunces","Fraunces-fallback","Georgia",serif;
  --b-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --b-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --bs-body-bg:#FFFFFF;
  --bs-body-bg-rgb:255,255,255;
  --bs-body-color:#46566B;
  --bs-body-color-rgb:70,86,107;
  --bs-body-font-family:var(--b-sans);
  --bs-body-font-size:1rem;
  --bs-body-line-height:1.6;
  --bs-emphasis-color:#16202B;
  --bs-border-color:#DDE4EC;
  --bs-border-radius:.5rem;
  /* (--bs-link-color* come from brand.css site-wide — no local copy) */
  --bs-font-monospace:var(--b-mono);
}
/* CTAs are stock .btn-info / .btn-outline-info — exactly what the live
   page uses; only the weight is nudged so CTAs read as CTAs */
.btn-info,.btn-outline-info{--bs-btn-font-weight:600;}
.btn-outline-dark{
  --bs-btn-color:var(--b-text);
  --bs-btn-border-color:var(--b-line-2);
  --bs-btn-hover-bg:var(--b-text);
  --bs-btn-hover-border-color:var(--b-text);
  --bs-btn-font-weight:600;
}
.card{
  --bs-card-bg:var(--b-panel);
  --bs-card-border-color:var(--b-line);
  --bs-card-border-radius:.75rem;
  --bs-card-color:var(--b-body);
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
body{-webkit-font-smoothing:antialiased;}
h1,h2,.b-display{
  font-family:var(--b-display);
  font-weight:600;
  font-variation-settings:"opsz" 60;
  color:var(--b-text);
  letter-spacing:-.01em;
  line-height:1.04;
}
h1{font-size:clamp(2.6rem,6vw,4.6rem);}
h2{font-size:clamp(1.9rem,4vw,3rem);}
h3{font-family:var(--b-sans);font-weight:600;font-size:1.05rem;color:var(--b-text);}

/* With the fonts self-hosted + preloaded (2026-08-19) the swap window is
   near zero; the fallback only needs a gentle size match — the earlier
   ascent/descent overrides caused their own wobble (owner report) and are
   gone. */
@font-face{
  font-family:"Fraunces-fallback";
  src:local("Georgia");
  size-adjust:94%;
}

.b-eyebrow{
  font-family:var(--b-mono);font-size:.7rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--b-accent-ink);
  margin-bottom:1rem;
}
.b-sub{color:var(--b-body);font-size:1.0625rem;max-width:52ch;}
.b-mono{font-family:var(--b-mono);}
.b-dim{color:var(--b-dim);}

.b-section{padding:5.5rem 0;}
.b-rule{height:1px;background:var(--b-line);border:0;opacity:1;margin:0;}

/* the URL pill — the one product motif, always blue */
.b-url{
  display:inline-block;font-family:var(--b-mono);font-size:.78rem;
  color:var(--b-link);background:var(--b-link-soft);
  border:1px solid rgba(29,95,191,.28);border-radius:999px;
  padding:5px 14px;white-space:nowrap;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
}

/* LIVE marker */
.b-live{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--b-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--b-dim);
}
.b-live i{
  width:7px;height:7px;border-radius:50%;background:#2E9E58;display:block;
  box-shadow:0 0 0 3px rgba(46,158,88,.16);
}

/* --------------------------------------------------------------------------
   3. Site chrome concordance (owner 2026-08-12): the navbar is
   ft_nav_bar() — THE navbar, identical on every page — and the footer is
   the site's too. Neither may inherit the landing faces or metrics this
   stylesheet re-points on :root, so both are pinned to the site-wide
   Nunito Sans (what every other page's body sets). No color/padding
   overrides here at all.
   -------------------------------------------------------------------------- */
.navbar,footer.navbar{
  font-family:'Nunito Sans',sans-serif;
  line-height:1.5;
}

/* --------------------------------------------------------------------------
   4. The wall (hero masonry) — real thumbnails, live from the gallery
   -------------------------------------------------------------------------- */
.b-wall{columns:5 170px;column-gap:10px;}
.b-wall a{display:block;margin-bottom:10px;border-radius:8px;overflow:hidden;
          background:var(--b-panel);border:1px solid var(--b-line);
          box-shadow:0 10px 22px -16px rgba(22,32,43,.35);
          break-inside:avoid;-webkit-column-break-inside:avoid;}   /* never slice a tile across columns */
.b-wall img{width:100%;height:auto;display:block;transition:transform .25s ease;}
.b-wall a:hover img{transform:scale(1.02);}
.b-wall-fade{position:relative;}
.b-wall-fade::after{
  content:"";position:absolute;inset:auto 0 0 0;height:130px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--b-paper));
}

/* film slates (case headers) */
/* (the checkered film-slate icon was retired 2026-08-12 — a storyboard
   motif that appeared nowhere else on the site) */
.b-slate{
  font-family:var(--b-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--b-accent-ink);
  display:flex;align-items:center;gap:10px;margin-bottom:.8rem;
}

.b-frame{
  background:var(--b-panel);border:1px solid var(--b-line);border-radius:12px;
  padding:16px;box-shadow:0 3px 8px -4px rgba(22,32,43,.14),0 22px 44px -26px rgba(22,32,43,.42);
  position:relative;overflow:hidden;
}
.b-frame--tall{aspect-ratio:4/3;}
.b-frame-cap{
  font-family:var(--b-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--b-dim);margin:.6rem 0 0;
  display:flex;align-items:center;gap:8px;
}
.b-frame-cap::after{content:"";flex:1;height:1px;background:var(--b-line);}
.b-frame-cap--alarm{color:var(--b-alarm);}

/* scene 01 / chapter "before" — the pile */
.b-pile{position:relative;height:100%;min-height:240px;}
.b-card{
  position:absolute;background:var(--b-panel);border:1px solid var(--b-line-2);
  border-radius:8px;padding:10px 12px;box-shadow:0 10px 22px -12px rgba(22,32,43,.35);
}
.b-card-hd{
  font-family:var(--b-mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--b-dim);margin-bottom:6px;
}
.b-card .b-f{
  display:block;font-family:var(--b-mono);font-size:.68rem;color:var(--b-body);
  line-height:1.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.b-card--alarm{border-color:rgba(180,67,42,.45);background:#FBF1EE;}
.b-card--alarm .b-card-hd{color:var(--b-alarm);}
.b-card--alarm .b-x{color:var(--b-alarm);font-size:.74rem;font-weight:600;}

/* trove window with REAL thumbs */
.b-win-bar{display:flex;align-items:center;gap:6px;margin-bottom:12px;}
.b-win-bar u{width:8px;height:8px;border-radius:50%;background:var(--b-line-2);display:block;}
.b-win-bar .b-url{flex:0 1 auto;margin-left:6px;}
.b-tr-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;}
.b-tr-title{font-family:var(--b-display);font-weight:600;font-size:1.05rem;color:var(--b-text);}
.b-tr-meta{font-family:var(--b-mono);font-size:.62rem;color:var(--b-dim);margin-left:auto;white-space:nowrap;}
.b-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.b-grid a,.b-grid .b-doc{display:block;aspect-ratio:1;border-radius:6px;overflow:hidden;
          border:1px solid var(--b-line);background:var(--b-panel-2);}
.b-grid img{width:100%;height:100%;object-fit:cover;display:block;}
.b-doc{padding:8px;}
.b-doc s{display:block;height:3px;background:var(--b-line);border-radius:2px;margin-bottom:4px;text-decoration:none;}
.b-doc s:nth-child(2){width:72%;}
.b-doc s:nth-child(4){width:56%;}
.b-doc b{font-family:var(--b-mono);font-size:.52rem;font-weight:600;color:var(--b-link);}
.b-badge{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--b-mono);font-size:.62rem;color:var(--b-dim);
  background:var(--b-panel-2);border:1px solid var(--b-line);
  border-radius:5px;padding:4px 9px;max-width:100%;
}

/* sharing doors: BS list-group; only the icon square is custom (FA,
   brand slate — emoji retired 2026-08-13) */
.b-door-ic{width:34px;height:34px;border-radius:8px;flex:0 0 auto;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;color:var(--b-accent);
  background:var(--b-panel-2);border:1px solid var(--b-line);}

/* devices */
.b-stage{display:flex;align-items:center;justify-content:center;padding:10px 0;height:100%;}
.b-phone{
  width:min(62%,240px);border-radius:22px;border:1.5px solid var(--b-text);
  background:var(--b-panel);padding:12px 10px 10px;
  box-shadow:0 22px 44px -26px rgba(22,32,43,.6);
}
.b-phone::before{
  content:"";display:block;width:34%;height:4px;border-radius:4px;
  background:var(--b-line-2);margin:0 auto 10px;
}
.b-phone .b-grid{grid-template-columns:repeat(2,1fr);gap:6px;}
.b-tablet{
  width:min(88%,340px);border-radius:14px;border:1.5px solid var(--b-text);
  background:var(--b-panel);padding:12px;
  box-shadow:0 22px 44px -26px rgba(22,32,43,.6);
}
.b-phone-title{
  font-family:var(--b-display);font-weight:600;font-size:.86rem;color:var(--b-text);
  margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.b-phone-cta{
  margin-top:9px;background:var(--b-accent);color:#fff;border-radius:7px;
  text-align:center;font-size:.68rem;font-weight:600;padding:8px 4px;
}

/* the trovesheet page */
.b-sheet{
  background:#FDFCF8;border:1px solid #E8E2D2;border-radius:8px;
  padding:18px 20px;color:#2A2A26;
  min-height:240px;display:flex;flex-direction:column;gap:9px;height:100%;
}
.b-sheet-h{font-family:var(--b-display);font-weight:600;font-size:1.1rem;color:#1C1B18;}
.b-sheet s{display:block;height:4px;border-radius:4px;background:#E7E1D2;text-decoration:none;}
.b-sheet-embed{
  border:1.5px dashed var(--b-link);border-radius:8px;background:var(--b-link-soft);
  padding:9px;margin:2px 0;
}
.b-sheet-embed .b-grid{grid-template-columns:repeat(4,1fr);gap:6px;}
.b-sheet-tag{
  font-family:var(--b-mono);font-size:.56rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--b-link);display:block;margin-bottom:6px;
}

/* --------------------------------------------------------------------------
   6. Chapters — jobs 02–05, one full row of three frames each
   -------------------------------------------------------------------------- */
.b-chapter{padding:3.6rem 0;}
.b-chapter + .b-chapter{border-top:1px solid var(--b-line);}
.b-chapter h2{font-size:clamp(1.5rem,2.8vw,2.1rem);}
.b-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1rem;}
.b-chips span{
  font-family:var(--b-mono);font-size:.66rem;letter-spacing:.06em;
  color:var(--b-text);background:var(--b-panel);border:1px solid var(--b-line-2);
  border-radius:999px;padding:5px 12px;
}
.b-chips span::before{content:"✓ ";color:var(--b-accent-ink);font-weight:600;}

/* --------------------------------------------------------------------------
   7. Embed
   -------------------------------------------------------------------------- */
.b-code{
  background:var(--b-ink);border:1px solid var(--b-ink);color:#C9D6EA;border-radius:10px;
  padding:1.1rem 1.25rem;font-family:var(--b-mono);font-size:.8rem;line-height:1.7;
  overflow-x:auto;margin:0;
}
.b-code .a{color:#9FB6D4;}
.b-code .v{color:#C3D0DE;}
/* (the strip mock is gone — the REAL strip widget runs here now, which
   carries the trove title/@handle itself; owner 2026-08-12) */

/* --------------------------------------------------------------------------
   8. Pricing / join / footer
   -------------------------------------------------------------------------- */
.b-price{font-family:var(--b-display);font-size:2.2rem;font-weight:600;color:var(--b-text);}
.b-plan{list-style:none;padding:0;margin:0;}
.b-plan li{padding:.42rem 0;border-bottom:1px solid var(--b-line);font-size:.9rem;}
.b-plan li:last-child{border-bottom:0;}
.card.b-feature{border-color:var(--b-accent);box-shadow:0 20px 44px -30px rgba(var(--bs-primary-rgb),.45);}
.b-flag{
  font-family:var(--b-mono);font-size:.6rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--b-accent);
  border-radius:999px;padding:3px 10px;
}
/* alternating bands: the family's "band" volume — same hue as panels and
   active tints, never a second pale blue (owner 2026-08-12) */
.b-band{background:var(--ft-band);border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line);}

/* accordion follows the brand family (brand.css re-points the primary
   subtle vars too; this keeps the landing tokens authoritative here) */
.accordion{
  --bs-accordion-active-bg:var(--b-accent-soft);
  --bs-accordion-active-color:var(--b-accent-ink);
  --bs-accordion-btn-focus-box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
}
.b-footer{background:var(--b-ink);}
.b-footer .nav-link{color:rgba(255,255,255,.6)!important;}
.b-footer img{height:26px;width:auto;}

/* --------------------------------------------------------------------------
   9. Motion — reveal on scroll; killed for reduced-motion
   -------------------------------------------------------------------------- */
.b-reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);}
.b-reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .b-reveal{opacity:1;transform:none;transition:none;}
  .b-strip-track{animation:none;}
  .b-wall img{transition:none;}
}

/* --------------------------------------------------------------------------
   10. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:991.98px){
  .b-section{padding:3.75rem 0;}
  .b-railcol{display:none;}
  .b-wall{columns:3 120px;}
}
@media (max-width:575.98px){
  .b-grid{grid-template-columns:repeat(3,1fr);}
  .b-wall{columns:2 110px;}
}

/* --------------------------------------------------------------------------
   11. v3 — icon tab switcher for the use cases (owner: no mile of scroll)
   -------------------------------------------------------------------------- */
/* wrap, never side-scroll (owner 2026-08-13: hidden overflow made the
   last tabs undiscoverable on phones — all five must be visible).
   flex-wrap only breaks rows when the width demands it, so desktop keeps
   its single centered row; the 10px row-gap clears the slid indicator,
   which the JS now places under the ACTIVE tab's own row. */
.b-icontabs{position:relative;display:flex;gap:10px 6px;flex-wrap:wrap;
            justify-content:center;padding-bottom:14px;margin-bottom:2rem;}
.b-itab{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:7px;
  min-width:118px;padding:14px 10px 12px;border-radius:12px;cursor:pointer;
  background:transparent;border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease;
}
.b-itab:hover{background:#F6F8FA;}
/* monochrome brand-slate FA icons, a size up from the old emoji (owner
   2026-08-13: one icon language, consistent on every OS) */
.b-itab i{
  font-style:normal;font-size:1.35rem;line-height:1;width:60px;height:60px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:var(--b-accent);
  background:var(--b-panel-2);border:1px solid var(--b-line);
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.b-itab span{font-size:.8rem;font-weight:600;color:var(--b-body);white-space:nowrap;}
.b-itab[aria-selected="true"] i{background:var(--b-accent-soft);border-color:var(--b-accent);color:var(--b-accent-ink);transform:translateY(-2px);}
.b-itab[aria-selected="true"] span{color:var(--b-text);}
.b-itab:focus-visible{outline:2px solid var(--b-text);outline-offset:2px;}
.b-ind{
  position:absolute;height:3px;border-radius:3px;background:var(--b-accent);
  transition:left .28s cubic-bezier(.2,.7,.3,1),width .28s cubic-bezier(.2,.7,.3,1),
             top .28s cubic-bezier(.2,.7,.3,1);   /* rides between wrapped rows too */
}
.b-case{display:none;}
.b-case.on{display:block;animation:b-case-in .38s cubic-bezier(.2,.7,.3,1) both;}
@keyframes b-case-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .b-case.on{animation:none;}
  .b-ind{transition:none;}
}

/* screenshot slots — real captures dropped into shots/ take over */
.b-shot{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--b-line);
        background:var(--b-panel-2);min-height:120px;}
/* --fit: center the capture at its NATURAL size, never upscale (owner
   2026-08-12: the re-cropped gallery capture was being stretched to the
   column width) */
.b-shot--fit{display:flex;justify-content:center;align-items:flex-start;padding:10px;}
.b-shot--fit img{width:auto;max-width:100%;height:auto;max-height:560px;object-fit:contain;}
/* default: the WHOLE capture at natural height (owner 2026-08-11: cover-
   cropping mangled the custom screenshots); aspect-locked slots crop
   from the top like a browser peek */
.b-shot img{width:100%;height:auto;display:block;}
.b-shot--tall{aspect-ratio:2/3;}
.b-shot--wide{aspect-ratio:16/10;}
.b-shot--tall img,.b-shot--wide img,.b-phone .b-shot img{height:100%;object-fit:cover;object-position:top center;}
.b-shot.b-shot--empty img{display:none;}
.b-shot.b-shot--empty::after{
  content:"screenshot slot — drop in shots/" attr(data-want) " (see shots/README.txt)";
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1rem;font-family:var(--b-mono);font-size:.68rem;
  line-height:1.8;color:var(--b-dim);
  background:repeating-linear-gradient(45deg,#F3F5F8 0 12px,#EDF0F4 12px 24px);
}

/* subscribe teaser (planned feature) — wraps on narrow screens so it can
   never push the page wider than the viewport (2026-08-12) */
.b-sub-tease{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px;background:var(--b-panel);
  border:1px solid var(--b-line-2);border-radius:999px;padding:8px 16px 8px 10px;
  box-shadow:0 10px 22px -16px rgba(22,32,43,.4);max-width:100%;
}
.b-sub-tease i{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--b-accent-ink);
  background:var(--b-accent-soft);border:1px solid var(--b-accent);font-size:.85rem;
}
.b-sub-tease b{font-size:.86rem;color:var(--b-text);font-weight:600;}
.b-sub-tease em{font-family:var(--b-mono);font-style:normal;font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--b-accent-ink);
  border:1px solid var(--b-accent-line);border-radius:4px;padding:2px 6px;margin-left:4px;}