/* formock.css — profession-true, self-contained HTML mockups for /for/<vertical> pages.
   Replaces the old shared /shots/portal2 + /shots/booking2 raster screenshots
   (which were coaching-baked and lazy-loaded, causing a blank-card entrance).
   Content is inline in the page for instant render (no lazy image, no CLS).
   Animations are CSS-only infinite loops so any screenshot catches them mid-motion;
   all motion is disabled under prefers-reduced-motion (final state is shown). */

.fmk-fig{margin:34px 0 10px}
.fmk-fig.shotwrap-band{margin:0 auto;max-width:1000px}
.fmk-frame{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--sh-paper);background:var(--paper-2)}
.fmk-cap{font-size:.88rem;color:var(--muted,#5E5848);margin:12px 2px 0;line-height:1.5;text-align:center;max-width:60ch;margin-left:auto;margin-right:auto}

/* ---- shared bits ---------------------------------------------------------- */
.fmk-eyebrow{display:block;font:700 11px/1.3 var(--font-sans,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--amber,#E1991C)}
.fmk-badge{position:absolute;top:14px;right:14px;font:600 10.5px/1 var(--font-sans,inherit);letter-spacing:.04em;color:#F7F1E6;background:rgba(247,241,230,.14);border:1px solid rgba(247,241,230,.22);padding:5px 9px;border-radius:999px}
.fmk-link{display:inline-block;margin-top:8px;font:600 12.5px/1 var(--font-sans,inherit);color:var(--honey,#8A4710)}
.fmk-frame *{box-sizing:border-box}

/* ============================ PORTAL MOCK ============================ */
.fmk-portal{position:relative;background:var(--paper-2,#FCF8EF);font-family:var(--font-sans,inherit);color:var(--ink,#0E2419)}
.fmk-top{position:relative;background:var(--ink,#0E2419);background-image:radial-gradient(120% 140% at 12% -20%,#1C4332 0%,#143527 46%,#0E2419 100%);color:#F7F1E6;padding:22px clamp(20px,4vw,34px) 26px}
.fmk-welcome{font-family:var(--font-display,Fraunces,serif);font-weight:600;font-size:clamp(22px,3.2vw,30px);line-height:1.05;letter-spacing:-.01em;margin:8px 0 0}
.fmk-sub{margin:8px 0 0;font-size:13px;line-height:1.5;color:rgba(247,241,230,.9);max-width:52ch}
.fmk-body{padding:clamp(16px,3vw,22px);background:var(--paper,#F7F1E6)}
.fmk-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fmk-c{position:relative;background:var(--white,#fff);border:1px solid var(--line,#E2D7BF);border-radius:10px;padding:14px 15px}
.fmk-c h4{margin:0 0 5px;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink,#0E2419);line-height:1.2}
.fmk-c p{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted,#5E5848)}
.fmk-new{position:absolute;top:12px;right:12px;font:600 10px/1 var(--font-sans,inherit);color:var(--honey,#8A4710);background:rgba(225,153,28,.16);border:1px solid rgba(225,153,28,.34);padding:4px 8px;border-radius:999px}
.fmk-between{margin-top:12px;background:var(--white,#fff);border:1px solid var(--line,#E2D7BF);border-radius:10px;padding:14px 15px}
.fmk-between h4{margin:0 0 9px;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.fmk-todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fmk-todo li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-muted,#5E5848)}
.fmk-box{flex:none;width:15px;height:15px;border-radius:4px;border:1.5px solid var(--line-2,#D4C6A6);position:relative;background:var(--white,#fff)}
.fmk-box::after{content:"";position:absolute;left:3px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transform-origin:center;transition:transform .2s var(--ease,ease)}
.fmk-todo li.done .fmk-box{background:var(--forest-2,#1C4332);border-color:var(--forest-2,#1C4332)}
.fmk-todo li.done .fmk-box::after{transform:rotate(45deg) scale(1)}
.fmk-past{margin-top:14px}
.fmk-k{display:block;font:700 10.5px/1 var(--font-sans,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint,#635C4B);margin:0 0 8px}
.fmk-prow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 14px;background:var(--white,#fff);border:1px solid var(--line,#E2D7BF);border-radius:9px;margin-bottom:7px;font-size:12px;color:var(--ink,#0E2419)}
.fmk-prow .fmk-meta{color:var(--text-faint,#635C4B);font-size:11.5px;text-align:right;flex:none}

/* mini rising-bars (goal progress) inside the goals card */
.fmk-bars{display:flex;align-items:flex-end;gap:5px;height:34px;margin-top:9px}
.fmk-bars i{flex:1;background:rgba(20,53,39,.16);border-radius:3px 3px 0 0;height:var(--h,30%);position:relative;overflow:hidden}
.fmk-bars i::after{content:"";position:absolute;inset:auto 0 0 0;height:100%;background:linear-gradient(180deg,var(--amber,#E1991C),#c8811a);transform:scaleY(var(--f,1));transform-origin:bottom}
.fmk-bars i.cur::after{background:linear-gradient(180deg,#1C4332,#143527)}

/* recap "writing" line (the demo animation) */
.fmk-write{display:block;height:9px;border-radius:5px;margin-top:7px;
  background:linear-gradient(90deg,rgba(20,53,39,.14) 0 40%,rgba(225,153,28,.30) 50%,rgba(20,53,39,.14) 60% 100%);
  background-size:260% 100%}

/* ============================ BOOKING MOCK ============================ */
.fmk-book{position:relative;background:var(--paper,#F7F1E6);font-family:var(--font-sans,inherit);color:var(--ink,#0E2419)}
.fmk-book-top{position:relative;background:var(--ink,#0E2419);background-image:radial-gradient(120% 150% at 88% -25%,#1C4332 0%,#143527 46%,#0E2419 100%);color:#F7F1E6;padding:20px clamp(20px,4vw,34px) 24px}
.fmk-book-head{display:flex;align-items:center;gap:14px;margin-top:10px}
.fmk-ava{flex:none;width:52px;height:52px;border-radius:13px;background:#0A1C14;border:1px solid rgba(247,241,230,.16);display:grid;place-items:center;font-family:var(--font-display,Fraunces,serif);font-weight:600;font-size:18px;color:#F7F1E6}
.fmk-role{display:block;font:700 10.5px/1.2 var(--font-sans,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--amber,#E1991C)}
.fmk-name{font-family:var(--font-display,Fraunces,serif);font-weight:600;font-size:clamp(20px,2.8vw,26px);line-height:1.05;margin-top:3px}
.fmk-blurb{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:rgba(247,241,230,.86);max-width:62ch}
.fmk-book-body{padding:clamp(16px,3vw,22px)}
.fmk-sec{margin-bottom:16px}
.fmk-sec:last-child{margin-bottom:0}
.fmk-sec h4{margin:0 0 9px;font-size:13px;font-weight:700;letter-spacing:-.005em}
.fmk-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fmk-rate{position:relative;background:var(--white,#fff);border:1px solid var(--line,#E2D7BF);border-radius:10px;padding:12px 13px}
.fmk-rate.on{border-color:var(--forest-2,#1C4332);box-shadow:0 0 0 1px var(--forest-2,#1C4332) inset}
.fmk-rate.on::after{content:"";position:absolute;top:10px;right:10px;width:16px;height:16px;border-radius:5px;background:var(--forest-2,#1C4332)}
.fmk-rate span{display:block;font-size:12px;font-weight:600;color:var(--text-muted,#5E5848)}
.fmk-rate b{display:block;font-family:var(--font-display,Fraunces,serif);font-weight:600;font-size:22px;line-height:1.1;margin:4px 0 2px}
.fmk-rate small{display:block;font-size:10.5px;line-height:1.35;color:var(--text-faint,#635C4B)}
.fmk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.fmk-day{background:var(--white,#fff);border:1px solid var(--line,#E2D7BF);border-radius:9px;padding:9px 4px;text-align:center}
.fmk-day small{display:block;font-size:10px;color:var(--text-faint,#635C4B);margin-bottom:3px}
.fmk-day b{font-family:var(--font-display,Fraunces,serif);font-weight:600;font-size:16px}
.fmk-day.off{opacity:.4}
.fmk-day.on{background:var(--forest-2,#1C4332);border-color:var(--forest-2,#1C4332);color:#F7F1E6}
.fmk-day.on small{color:rgba(247,241,230,.7)}
.fmk-times{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.fmk-time{background:var(--white,#fff);border:1px solid var(--line,#E2D7BF);border-radius:8px;padding:10px 4px;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink,#0E2419)}
.fmk-time.off{opacity:.4;text-decoration:line-through}
.fmk-time.on{background:var(--forest-2,#1C4332);border-color:var(--forest-2,#1C4332);color:#F7F1E6}
.fmk-book-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line,#E2D7BF)}
.fmk-cta{background:var(--amber,#E1991C);color:#2A1A05;font-weight:700;font-size:13px;padding:12px 18px;border-radius:9px;flex:none}
.fmk-note{font-size:11.5px;line-height:1.45;color:var(--text-faint,#635C4B);flex:1;min-width:200px}
.fmk-book-foot::after{content:"Powered by Slide Practice · this provider sets their own rates";flex-basis:100%;text-align:center;font-size:10.5px;color:var(--text-faint,#635C4B);margin-top:4px}

@media(max-width:560px){
  .fmk-grid{grid-template-columns:1fr}
  .fmk-rates{grid-template-columns:1fr}
  .fmk-times{grid-template-columns:repeat(3,1fr)}
}

/* ---- animations (CSS-only, always mid-loop; disabled for reduced motion) --- */
@keyframes fmkWrite{0%{background-position:130% 0}100%{background-position:-130% 0}}
@keyframes fmkTick{0%,18%{transform:rotate(45deg) scale(0)}30%,72%{transform:rotate(45deg) scale(1)}86%,100%{transform:rotate(45deg) scale(0)}}
@keyframes fmkTickState{0%,18%{background:var(--white,#fff);border-color:var(--line-2,#D4C6A6)}30%,72%{background:var(--forest-2,#1C4332);border-color:var(--forest-2,#1C4332)}86%,100%{background:var(--white,#fff);border-color:var(--line-2,#D4C6A6)}}
@keyframes fmkRise{0%,10%{transform:scaleY(.12)}55%,100%{transform:scaleY(1)}}
@keyframes fmkSlot{0%,40%{background:var(--white,#fff);border-color:var(--line,#E2D7BF);color:var(--ink,#0E2419)}55%,100%{background:var(--forest-2,#1C4332);border-color:var(--forest-2,#1C4332);color:#F7F1E6}}

@media (prefers-reduced-motion:no-preference){
  .fmk-write{animation:fmkWrite 2.6s linear infinite}
  .fmk-anim .fmk-box::after{animation:fmkTick 4.2s var(--ease,ease) infinite}
  .fmk-anim .fmk-box{animation:fmkTickState 4.2s var(--ease,ease) infinite}
  .fmk-anim .fmk-todo li:nth-child(2) .fmk-box::after{animation-delay:.5s}
  .fmk-anim .fmk-todo li:nth-child(2) .fmk-box{animation-delay:.5s}
  .fmk-bars i::after{animation:fmkRise 3.8s var(--ease,ease) infinite}
  .fmk-bars i:nth-child(2)::after{animation-delay:.12s}
  .fmk-bars i:nth-child(3)::after{animation-delay:.24s}
  .fmk-bars i:nth-child(4)::after{animation-delay:.36s}
  .fmk-book .fmk-time.pulse{animation:fmkSlot 3.4s var(--ease,ease) infinite}
}
/* reduced motion: show the finished state, no movement */
@media (prefers-reduced-motion:reduce){
  .fmk-write{background:rgba(20,53,39,.14)}
  .fmk-anim .fmk-todo li .fmk-box{background:var(--forest-2,#1C4332);border-color:var(--forest-2,#1C4332)}
  .fmk-anim .fmk-todo li .fmk-box::after{transform:rotate(45deg) scale(1)}
}