/* © 2026 Lumira Studio (lumirastudio.com). All rights reserved.
   The five free-tool pages (10 Oct 2026, Luke's approved mock messaging-2026-10/free-tools-mock):
   /free-tools/, /call-sheet-template/, /shot-list-template/, /talent-release-form/, /teleprompter/.
   One skeleton: the ink first screen (who it is for, the keyword H1, one line, one yellow button,
   the Trustpilot card, the finished document), the live tool in its own band, three steps, what's
   free, the questions, one quiet route to Pro, the other free tools.
   The tool pages also load miracue.css, tool.css and v2-tool.css, and the hub and the teleprompter
   load site-v2.css, so every class here starts with ft- and every element is set from scratch.
   Same measures as the homepage (home-v4.css); colours only from v2-tokens.css, apart from the
   Trustpilot card's own green and black. */
:root{--ft-wrap:1180px;--ft-gut:clamp(16px,4vw,40px);--ft-tp:#00B67A;--ft-tp-ink:#191919;--ft-tp-meta:#555555}

.ft{font-family:var(--sans);font-size:18px;line-height:1.5;font-weight:400;color:var(--ink);-webkit-font-smoothing:antialiased;letter-spacing:normal}
.ft p{margin:0 0 16px;max-width:none;color:inherit}
.ft ul,.ft ol{margin:0;padding:0;max-width:none}
.ft li{padding:0;color:inherit}
.ft img{display:block;max-width:100%;height:auto}
.ft a{color:inherit}
.ft h1,.ft h2,.ft h3{color:inherit;letter-spacing:normal}
.ft :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ft-wrap{max-width:var(--ft-wrap);margin:0 auto;padding-inline:var(--ft-gut)}

.ft-display{font-size:clamp(38px,5.6vw,72px);font-weight:500;line-height:1.05;letter-spacing:-.01em;margin:0 0 20px;text-wrap:balance}
/* Optical left edge: the hero H1's side bearing pushed it 3-6px right of the column. Sized for a stem
   start (every hero H1 now starts with F); a round or diagonal first letter (O, A, W) wants less. */
.ft-display:where(h1){margin-left:-.075em}
.ft-h2{font-size:clamp(28px,3.6vw,44px);font-weight:500;line-height:1.15;margin:0 0 14px;text-wrap:balance}
.ft-lead{font-size:clamp(18px,1.8vw,21px);line-height:1.45;margin:0 0 26px}
.ft .ft-label{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0 0 12px}
.ft .ft-muted{color:var(--ink-2)}
.ft .ft-small{font-size:14px;line-height:1.45}
.ft-measure{max-width:34em}

.ft-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:var(--r);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap;min-height:0;transition:opacity var(--v2-ease)}
.ft-btn:hover{opacity:.9}
.ft-btn-xl{height:64px;padding:0 34px;font-size:19px}
.ft-btn-m{height:48px;padding:0 22px;font-size:15px;font-weight:600}
.ft .ft-accent{background:var(--accent);color:var(--ink)}
.ft .ft-ink{background:var(--ink);color:var(--accent)}
@media (max-width:560px){.ft-btn-xl{width:100%;height:58px;font-size:18px;padding:0 24px}}

/* the first screen */
.ft-hero{background:var(--ink);color:var(--on-ink);padding-block:clamp(40px,6vw,84px);overflow:hidden}
.ft-hero .ft-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.ft-hero .ft-copy,.ft-hero .ft-stage{min-width:0}
.ft-hero .ft-label{color:var(--accent)}
.ft-hero .ft-lead{color:#E9E1EC}
.ft-hero .ft-fine{font-size:14px;color:#CBBFCF;margin:14px 0 0}
.ft-hero :focus-visible{outline-color:var(--accent)}
.ft-sheet{border-radius:12px;overflow:hidden;background:var(--white);box-shadow:0 30px 70px rgba(0,0,0,.45);transform:rotate(1.2deg)}
.ft-sheet.ft-portrait{max-width:440px;margin-inline:auto}
@media (max-width:860px){.ft-hero .ft-grid{grid-template-columns:1fr}.ft-sheet{transform:none}}

/* the Trustpilot card: plain markup and plain links, nothing loaded from Trustpilot */
.ft-tp{margin:22px 0 0;max-width:430px;background:var(--white);color:var(--ft-tp-ink);border-radius:12px;padding:14px 16px 12px;display:grid;gap:8px;font-size:15px}
.ft-tp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ft-tp-logo{display:flex;align-items:center;gap:5px;font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ft-tp-ink)}
.ft-tp-logo svg{width:19px;height:19px;fill:var(--ft-tp)}
.ft-tp-stars{display:flex;gap:2px}
.ft-tp-stars span{width:20px;height:20px;background:var(--ft-tp);display:grid;place-items:center}
.ft-tp-stars svg{width:14px;height:14px;fill:var(--white)}
.ft-tp blockquote{margin:0;font-size:15.5px;line-height:1.45;color:var(--ft-tp-ink);text-indent:-.475em}   /* the opening quote hangs, so the words line up with the stars (design review, 11 Oct 2026) */
.ft-tp-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ft-tp-meta)}
.ft .ft-tp-foot a{color:var(--ft-tp-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ft-hero .ft-tp :focus-visible{outline-color:var(--ft-tp-ink)}

/* the live tool, in its own band; the tool's markup sits inside unchanged */
.ft-toolband{background:var(--calm-2);padding-block:clamp(28px,4vw,48px)}
.ft-toolband > .ft-wrap > .ft-label{font-family:var(--sans);font-size:13px;line-height:1.5;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0 0 12px;max-width:none;color:var(--ink-3)}
.ft-frame{border-radius:var(--r);background:var(--page,var(--white));box-shadow:0 10px 40px rgba(42,23,51,.12);border:1px solid var(--line);padding:clamp(4px,1.2vw,14px) 0 clamp(12px,2vw,24px)}
/* The call sheet's desk (v2-desk.css) is wider than the page column and centres itself on the
   screen at up to 1360px, so its frame is as wide as the desk plus a margin. */
.ft-toolband.ft-wide > .ft-wrap{max-width:calc(1360px + 2 * var(--ft-gut));padding-inline:8px}
.ft-toolband.ft-wide > .ft-wrap > .ft-label{max-width:1392px;margin-inline:auto}
.ft-toolband.ft-wide .ft-frame{max-width:1392px;margin-inline:auto}
/* Signed in, the page is a tool, not a shop window (tool.css): the band steps aside. */
html.in-account .ft-hero{display:none}
html.in-account .ft-toolband{background:none;padding-block:0}
html.in-account .ft-toolband .ft-label{display:none}
html.in-account .ft-frame{background:none;border:0;box-shadow:none;padding:0}
/* Inside a shoot the page is the app's tool (html.has-sbar): none of the landing page's sections
   (how to, what's free, questions, Pro, the other free tools) under it (design review, 12 Oct 2026). */
html.in-shoot .ft-sec,html.in-shoot .ft-strip{display:none !important}

/* the teleprompter's tool sits in the first screen */
.ft-tptool{background:var(--calm-1);border-radius:var(--r);padding:clamp(8px,1.4vw,14px)}
.ft-tptool .ft-in{background:var(--white);border-radius:12px;color:var(--ink);padding:16px}
.ft-tptool .ft-lab{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--ink-2);margin-bottom:10px;flex-wrap:wrap}
.ft-tptool .ft-lab strong{color:var(--ink);font-weight:700}
.ft-tptool .ft-lab button{font:inherit;font-size:13px;font-weight:600;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;color:var(--ink);cursor:pointer}
.ft-tptool textarea{display:block;width:100%;min-height:210px;resize:vertical;border:1.5px solid var(--field-edge);border-radius:10px;padding:14px 16px;font:inherit;font-size:17px;line-height:1.55;color:var(--ink);background:var(--white)}
.ft-tptool textarea:focus{outline:2px solid var(--ink);outline-offset:0}
.ft-tptool .ft-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.ft-tptool .ft-bar span{font-size:13.5px;color:var(--ink-2)}
.ft-tptool :focus-visible{outline-color:var(--ink)}
@media (max-width:560px){.ft-tptool textarea{min-height:170px;font-size:16px}.ft-tptool .ft-bar .ft-btn{width:100%}}
/* teleprompter: the review sits under the intro, the script box takes the wider column (Luke, 10 Oct 2026) */
.ft-hero-tp .ft-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.ft-hero-tp .ft-tptool textarea{min-height:340px}
.ft-hero-tp .ft-display{font-size:clamp(38px,4.8vw,64px)}
@media (max-width:860px){.ft-hero-tp .ft-grid{grid-template-columns:1fr}.ft-hero-tp .ft-tptool textarea{min-height:260px}}
@media (max-width:560px){.ft-hero-tp .ft-tptool textarea{min-height:200px}}

/* the hub's four tools */
.ft-hubhead{max-width:46em;margin-bottom:clamp(24px,3vw,36px)}
.ft-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:8px}
.ft .ft-card{background:var(--white);color:var(--ink);border-radius:var(--r);overflow:hidden;text-decoration:none;display:flex;flex-direction:column;min-width:0}
.ft-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.ft-card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.ft-card h2{font-size:20px;font-weight:700;line-height:1.25;margin:0}
.ft .ft-card p{font-size:15px;color:var(--ink-2);margin:0;flex:1}
.ft-go{font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.ft-card:hover .ft-go{text-decoration:underline;text-underline-offset:4px}
.ft-arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1000px){.ft-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* One column on a phone, the picture whole above the words: beside them it was cut to a 136px sliver (design review, 12 Oct 2026). */
@media (max-width:560px){.ft-cards{grid-template-columns:1fr}.ft-card-body{padding:14px}.ft-card h2{font-size:18px}.ft .ft-card p{font-size:14px}}

/* sections */
.ft-sec{background:var(--white);padding-block:clamp(52px,7vw,96px)}
.ft-sec.ft-sand{background:var(--calm-2)}
.ft-sec.ft-flush{padding-top:0}

/* three steps */
.ft-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(24px,3vw,40px);counter-reset:ft-step}
.ft-step{min-width:0}
.ft-pic{border-radius:12px;overflow:hidden;background:var(--calm-2);border:1px solid var(--line);aspect-ratio:3/2}
.ft .ft-pic img{width:100%;height:100%;object-fit:cover;object-position:top left}
.ft-pic.ft-dark{background:#111}
.ft .ft-pic.ft-dark img{object-fit:contain;object-position:center}
.ft .ft-pic.ft-tr img{object-position:top right}
.ft .ft-pic.ft-contain img{object-fit:contain;object-position:center;background:var(--white)}
.ft-step h3{font-size:20px;font-weight:700;line-height:1.3;margin:16px 0 6px;display:flex;gap:10px;align-items:baseline}
.ft-step h3::before{counter-increment:ft-step;content:counter(ft-step);font-size:14px;font-weight:700;color:var(--ink);background:var(--accent);border-radius:50%;width:26px;height:26px;display:inline-grid;place-items:center;flex:none}
.ft .ft-step p{font-size:16px;color:var(--ink-2);margin:0}
@media (max-width:820px){.ft-steps{grid-template-columns:1fr;gap:32px}}
.ft .ft-film{display:flex;gap:18px;align-items:center;margin-top:clamp(28px,4vw,44px);padding:14px;border:1px solid var(--line);border-radius:var(--r);max-width:640px;text-decoration:none}
.ft-film img{width:180px;border-radius:10px;flex:none}
.ft-film b{display:block;font-size:17px}
.ft-film span{font-size:14px;color:var(--ink-2)}
@media (max-width:480px){.ft-film img{width:110px}}

/* what's free */
.ft-free .ft-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,72px);align-items:start}
.ft-ticks{list-style:none;display:grid;gap:12px}
.ft .ft-ticks li{display:flex;gap:12px;font-size:17px}
.ft-ticks li::before{content:"";flex:none;width:20px;height:20px;margin-top:3px;border-radius:50%;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232A1733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.ft-free .ft-small{margin-top:18px}
.ft-free a{text-underline-offset:3px}
@media (max-width:820px){.ft-free .ft-wrap{grid-template-columns:1fr}}

/* the questions */
.ft-faq{max-width:820px;margin-top:clamp(20px,3vw,32px);border-top:1px solid var(--line)}
.ft-faq details{border-bottom:1px solid var(--line)}
.ft-faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-size:19px;font-weight:600;line-height:1.4;position:relative}
.ft-faq summary::-webkit-details-marker{display:none}
.ft-faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:26px;font-weight:400;color:var(--ink-2)}
.ft-faq details[open] summary::after{content:"\2212"}
.ft .ft-faq details p,.ft .ft-faq details ol{font-size:16.5px;color:var(--ink-2);margin:0 0 20px;max-width:44em}
.ft .ft-faq details ol{padding-left:22px;display:grid;gap:6px}

/* the route to Pro: one quiet card, never the page's loudest thing */
.ft-sec.ft-pro-sec{padding-top:0}
.ft-pro{background:var(--calm-1);border-radius:24px;padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.ft-pro.ft-solo{grid-template-columns:1fr}
.ft-pro .ft-text{min-width:0}
.ft-pro.ft-solo .ft-text{max-width:40em}
.ft-pro .ft-label{color:var(--ink-3)}
.ft-tag{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:var(--pill);background:var(--white);font-size:13px;font-weight:700;margin-bottom:16px}
.ft-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px rgba(42,23,51,.25)}
.ft .ft-pro ul{list-style:none;margin:0 0 22px;display:grid;gap:8px}
.ft .ft-pro li{padding-left:24px;position:relative;font-size:16.5px}
.ft-pro li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--ink)}
.ft .ft-pro .ft-muted{color:var(--ink-2)}
.ft-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.ft-acts span{font-size:14px;color:var(--ink-2)}
.ft .ft-pro .ft-fine{font-size:14px;color:var(--ink-2);margin:0 0 20px}
.ft-phones{display:flex;gap:14px;justify-content:center;align-items:flex-start;min-width:0}
.ft-ph{flex:1 1 0;min-width:0;max-width:220px;border-radius:24px;background:#0d0710;padding:7px}
.ft .ft-ph img{border-radius:18px}
.ft-ph:nth-child(2){margin-top:40px}
.ft-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ft-frames figure{margin:0;background:var(--white);border-radius:10px;padding:6px;box-shadow:0 2px 10px rgba(42,23,51,.08);min-width:0}
.ft .ft-frames img{border-radius:6px;aspect-ratio:16/9;object-fit:cover;width:100%}
.ft-provis{display:grid;gap:16px;min-width:0}
.ft-provis .ft-ph{max-width:200px}
@media (max-width:860px){.ft-pro{grid-template-columns:1fr}}
@media (max-width:480px){.ft-frames{gap:6px}}

/* the other free tools */
.ft-strip{background:var(--white);border-top:1px solid var(--line);padding-block:22px}
.ft-strip .ft-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.ft-strip b{font-size:14px;margin-right:6px}
.ft .ft-strip a,.ft-strip a{font-size:14px;font-weight:600;text-decoration:none;background:var(--calm-2);border-radius:var(--pill);padding:8px 14px;color:var(--ink)}
.ft-strip a:hover{background:var(--calm-1)}
.ft-strip a.ft-all{background:none;text-decoration:underline;text-underline-offset:3px;padding-inline:4px}

/* Only the sheet prints (sheet.css): none of this, and the band around the tool lies flat. */
@media print{
  .ft-hero,.ft-sec,.ft-strip,.ft-toolband .ft-label{display:none !important}
  .ft-toolband,.ft-toolband .ft-wrap,.ft-frame{background:none !important;padding:0 !important;margin:0 !important;border:0 !important;box-shadow:none !important;max-width:none !important}
}

/* wide card: Stow, the desktop app */
.ft-cards .ft-card-wide{grid-column:1/-1;flex-direction:row}
.ft-card-wide img{width:38%;aspect-ratio:4/3;flex:none;object-fit:contain;box-sizing:border-box;padding:clamp(14px,2.4vw,28px);background:var(--calm-2)}
.ft-card-wide .ft-card-body{justify-content:center;padding:clamp(18px,3vw,40px);gap:10px}
.ft .ft-card-wide p{flex:0;max-width:52ch}
.ft .ft-card-wide .ft-card-kicker{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ft-card-wide h2{font-size:clamp(20px,2.2vw,26px)}
@media (max-width:560px){.ft-cards .ft-card-wide{flex-direction:column}.ft-card-wide img{width:100%}}