/* ==========================================================================
   assets/css/page-first-reel.css — first-reel.php, the "Post your first reel"
   onboarding guide. Brutal Lite v3.1 strict: tokens/shadows/radii come only
   from assets/css/brutal-lite.css. Reuses .help-step__n/.help-support/.list/
   .faq-row/.kicker/.section/.plan-bar from the shared stylesheets; this file
   only adds the page's own mini mockups of the real Add-a-pin wizard screens
   (visual recipe borrowed from assets/css/lite-addpin.css's .wiz2-pincard /
   .wiz2-dropzone / .place-chosen / .wiz2-catchip / .combo-card — new class
   names here since these copies are static illustrations, not the live,
   JS-wired wizard, and must never collide with its ids/classes) plus the
   do/don't comparison rows and the reassurance strip.

   One-hard-shadow-per-screen rule (rules §1 MUST 4): the single hard-shadow
   element on this page is the sticky .plan-bar .btn-brand at the bottom.
   Every mock element below is deliberately shadow-free. */

.fr-hero{text-align:center;padding:4px 10px 0;}
.fr-hero .kicker{display:block;}
.fr-hero .h1{font-size:28px;}

/* ---------------------------------------------------------------------------
   Hero "finished pin" example — same visual recipe as the wizard's own
   review-step preview (.wiz2-pincard), own class so it stays a static
   illustration. Framed in a calm card so it doesn't look like a dangling
   screenshot. */
.fr-example{margin-top:18px;background:var(--card-2);border-radius:var(--r-card);padding:18px 16px 16px;}
.fr-mockpin{position:relative;width:168px;aspect-ratio:9/16;margin:0 auto;border-radius:20px;overflow:hidden;border:var(--bd);background:var(--yellow-soft);}
.fr-mockpin__media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:38px;opacity:.55;}
.fr-mockpin__fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.72) 100%);}
.fr-mockpin__cat{position:absolute;top:9px;left:9px;z-index:2;display:inline-flex;align-items:center;gap:4px;font:800 10.5px/1 var(--font-ui);padding:4px 8px;border-radius:999px;background:#fff;color:var(--ink);border:1px solid var(--line);}
.fr-mockpin__cat i{font-size:11px;}
.fr-mockpin__reel{position:absolute;top:9px;right:9px;z-index:2;display:inline-flex;align-items:center;gap:4px;font:800 10px/1 var(--font-ui);padding:4px 8px;border-radius:999px;background:#fff;color:var(--ink);}
.fr-mockpin__body{position:absolute;left:10px;right:10px;bottom:10px;color:#fff;z-index:2;}
.fr-mockpin__title{font:800 13.5px/1.25 var(--font-display);margin:0 0 3px;text-shadow:0 1px 3px rgba(0,0,0,.4);}
.fr-mockpin__sub{font:700 10.5px/1 var(--font-ui);opacity:.92;display:block;}
.fr-example__cap{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-soft);text-align:left;}
.fr-example__cap i{color:var(--muted-2);font-size:15px;flex:0 0 auto;margin-top:1px;}

/* small variant used inside step 4's mock */
.fr-mockpin--sm{width:84px;margin:0;}
.fr-mockpin--sm .fr-mockpin__media{font-size:20px;}
.fr-mockpin--sm .fr-mockpin__reel{padding:3px 6px;font-size:9px;}
.fr-mockpin--sm .fr-mockpin__reel i{font-size:10px;}
.fr-mockpin--sm .fr-mockpin__body{left:7px;right:7px;bottom:7px;}
.fr-mockpin--sm .fr-mockpin__title{font-size:10.5px;margin:0;}

/* ---------------------------------------------------------------------------
   4 steps — each card now carries a real mini mockup above the copy instead
   of an abstract icon tile. */
.fr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.fr-step{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:16px;}
.fr-step__mock{display:flex;flex-direction:column;align-items:center;gap:8px;}
.fr-step__body{width:100%;}
.fr-step__h{display:flex;align-items:center;gap:8px;font:800 14.5px/1.3 var(--font-display);color:var(--ink);margin-bottom:6px;}
.fr-step__body p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
.fr-step__body p b{color:var(--ink);}

/* step 1 mock: mini search pill + a chosen-place chip (recipe: .input-icon + .place-chosen) */
.fr-mock-search{display:flex;align-items:center;gap:8px;width:100%;max-width:280px;height:40px;padding:0 12px;
  border-radius:var(--r-ctl);background:#fff;border:1.5px solid var(--line);color:var(--muted-2);font:600 13px/1 var(--font-ui);}
.fr-mock-search i{font-size:15px;color:var(--muted);flex:0 0 auto;}
.fr-mock-search span{color:var(--ink-soft);}
.fr-mock-place{display:flex;align-items:center;gap:8px;width:100%;max-width:280px;padding:9px 12px;border-radius:var(--r-ctl);background:var(--card-2);}
.fr-mock-place__ico{color:var(--blue);font-size:16px;flex:0 0 auto;display:flex;}
.fr-mock-place__text{font:700 12.5px/1.3 var(--font-ui);color:var(--ink);}
.fr-mock-place__text em{font-style:normal;font-weight:500;color:var(--muted);}

/* step 2 mock: mini dropzone (recipe: .wiz2-dropzone, scaled down) */
.fr-mock-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:120px;
  aspect-ratio:9/16;border-radius:var(--r-card);border:1.5px dashed var(--line);background:var(--card-2);color:var(--muted-2);}
.fr-mock-drop i{font-size:26px;color:var(--muted);}
.fr-mock-drop span{font:700 11.5px/1.2 var(--font-ui);color:var(--ink-soft);}
.fr-mock-note{margin:0;font-size:11.5px;color:var(--muted);text-align:center;max-width:260px;}

/* step 3 mock: mini combo-card fields (recipe: .combo-card + .wiz2-catchip) */
.fr-mock-combo{width:100%;max-width:280px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;}
.fr-mock-combo__row{padding:10px 12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:5px;}
.fr-mock-combo__row:last-child{border-bottom:0;}
.fr-mock-combo__label{font:800 10px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.fr-mock-combo__val{font:600 13px/1.3 var(--font-ui);color:var(--ink);}
.fr-mock-chips{display:flex;gap:6px;flex-wrap:wrap;}
.fr-mock-chip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font:700 11px/1 var(--font-ui);color:var(--ink);}
.fr-mock-chip i{font-size:11px;}
.fr-mock-chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}

/* step 4 mock: small pin preview + a calm "Publish pin" pill (no 2nd hard shadow —
   the page's one hard-shadow element is the sticky CTA at the bottom) */
.fr-step__mock:has(.fr-mockpin--sm){flex-direction:row;justify-content:center;gap:14px;}
.fr-mock-publish{display:inline-flex;align-items:center;gap:6px;align-self:center;height:36px;padding:0 14px;
  border-radius:var(--r-ctl);background:var(--ink);color:#fff;font:800 12.5px/1 var(--font-ui);}
.fr-mock-publish i{font-size:13px;}

/* ---------------------------------------------------------------------------
   Do / don't comparison rows */
.fr-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.fr-pair__item{display:flex;align-items:flex-start;gap:8px;padding:11px 10px;border-radius:12px;font-size:11.5px;line-height:1.35;}
.fr-pair__item i{font-size:16px;flex:0 0 auto;margin-top:1px;}
.fr-pair__item div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fr-pair__item b{font:800 12px/1.2 var(--font-ui);color:var(--ink);}
.fr-pair__item span{color:var(--ink-soft);}
.fr-pair__item.good{background:rgba(18,179,154,.08);}
.fr-pair__item.good i{color:var(--teal);}
.fr-pair__item.bad{background:#fff0ee;}
.fr-pair__item.bad i{color:var(--red);}

/* ---------------------------------------------------------------------------
   Reassurance strip */
.fr-reassure{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fr-reassure__item{display:flex;flex-direction:column;gap:8px;background:var(--card-2);border-radius:var(--r-card);padding:13px 12px;}
.fr-reassure__item i{font-size:19px;color:var(--ink);}
.fr-reassure__item span{font:600 12px/1.4 var(--font-ui);color:var(--ink-soft);}

@media (max-width:360px){
  .fr-reassure{grid-template-columns:1fr;}
  .fr-pair{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------------
   first-reel.php has no bottom tab bar for guests (footer_audience() is
   "members" on most installs, so mobilenav_shown() is false here — body gets
   "no-mobilenav"). The shared .plan-bar/.page.has-plan-bar rules assume a
   90px tab bar is always present and reserve space for it; without one the
   sticky CTA floats with a dead gap under it and the page over-pads. Sit the
   bar straight on the bottom (like .sticky-bottom) and trim the page padding
   to match when there's no tab bar — on a page WITH the tab bar (logged-in
   nav configs), the shared rule above still applies untouched. */
body.no-mobilenav.lite-v31 .plan-bar{bottom:0;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));}
body.no-mobilenav .page.has-plan-bar{padding-bottom:130px;}