/* Free tool page only (/tools/<slug>/). Uses the site tokens from site.css. */
/* A class that sets display (.eyebrow, .row-note) beats the hidden attribute, so both offer eyebrows showed at once
   (CoS e-77828423 #1). On this page hidden always wins. */
[hidden]{display:none!important}
:root{--ok:#067647;--ok-wash:#ECFDF3;--warn:#B54708;--warn-wash:#FFFAEB}
.tool-closed{margin:0;padding:14px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-alt);color:var(--navy)}

/* The landing (Ty via CoS e-d568f4a2, "zero resistance"): a short headline, what they get, the free conditions, and
   the form card beside it (computers) or right under it (phones), so the form starts in the first phone screen. */
.tool-top{padding:clamp(14px,3vw,48px) 0 clamp(36px,5vw,72px);border-bottom:1px solid var(--line)}
.tool-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:start}
.tool-pitch .crumbs{margin-bottom:16px}
.tool-pitch .eyebrow{margin-bottom:10px}
.tool-h1{font-size:clamp(30px,3.8vw,48px);line-height:1.1;margin:0 0 16px}
.tool-sub{margin:0 0 14px;font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--text)}
.tool-gets{list-style:none;display:grid;gap:10px;margin:0 0 16px}
.tool-gets li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--navy)}
.tool-tick{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--ok-wash);color:var(--ok)}
.tool-tick svg{width:14px;height:14px}
.tool-free{margin:0;font:600 16px/1.45 var(--font-body);color:var(--navy)}
.tool-side{display:grid;gap:14px}
.tool-card{padding:clamp(18px,2.4vw,28px);background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.tool-card:focus{outline:none}
.tool-close{margin:0;text-align:center;font:600 15.5px/1.45 var(--font-body);color:var(--text)}
@media (min-width:981px){.tool-side{position:sticky;top:96px}}
@media (max-width:980px){.tool-grid{grid-template-columns:1fr;gap:22px}}
/* The real sample draft (CoS e-9372c04f (c)): under the pitch on computers, after the form on phones (the grid's
   source order), so the form stays in the first phone screen. The record's words as made, in the results' look. */
@media (min-width:981px){.tool-grid:has(.tool-sample){grid-template-areas:"pitch side" "sample side"}.tool-grid:has(.tool-sample) .tool-pitch{grid-area:pitch}.tool-grid:has(.tool-sample) .tool-side{grid-area:side}.tool-sample{grid-area:sample}}
.tool-sample{padding:clamp(18px,2.4vw,28px);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius)}
.tool-sample-h{margin:0 0 6px;font:700 21px/1.3 var(--font-head);color:var(--navy)}
.tool-sample-label{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.tool-sample .r-sub{margin-top:18px;padding-top:14px}
.tool-sample-titles{margin:0;padding-left:22px;display:grid;gap:6px;font:700 16.5px/1.4 var(--font-head);color:var(--navy);overflow-wrap:anywhere}
.tool-sample .r-text{margin:0;background:var(--white);font-size:15px}
.tool-sample .tool-short{padding:0;border:0}
.tool-sample-hook{margin:0 0 4px;font:700 17px/1.35 var(--font-head);color:var(--navy)}
.tool-sample .tool-short blockquote{margin:0}
/* The homepage's example Kit (partial kit-example, labeled Example), compact on this page: no picture, so the link box
   stays in the first phone screen (round 2, Oct 25). Phones also leave out the chapters. */
.tool-example{margin-top:18px}
.tool-example .kit-example{max-width:none;padding:18px 20px}
.tool-example picture{display:none}
.tool-details{margin:0}
.tool-details .tool-sub{margin:10px 0 8px}
.tool-details .hint{margin:0}
/* Phones: the whole pitch in about 470 px, so the card, its 1-2-3 and the link box are in the first 844 px screen, the
   link box starting by 700 px on a 390x844 phone (CoS e-9372c04f (b): GS order, benefits before the form). */
@media (max-width:520px){
  .tool-top{padding-top:8px}
  .tool-top .container{padding-left:16px;padding-right:16px}
  .tool-pitch .crumbs{display:none}
  .tool-pitch .eyebrow{font-size:13px;letter-spacing:0;text-transform:none;margin-bottom:4px}
  .tool-h1{font-size:26px;line-height:1.12;margin-bottom:6px}
  .tool-sub{font-size:14.5px;line-height:1.4;margin-bottom:6px}
  .tool-gets{gap:3px;margin-bottom:6px}
  .tool-gets li{gap:6px;font-size:14px;line-height:1.32}
  .tool-tick{width:16px;height:16px;margin-top:1px}
  .tool-tick svg{width:11px;height:11px}
  .tool-free{font-size:14px}
  .tool-grid{gap:12px}
  .tool-card{padding:14px 16px}
  .tool-example{margin-top:10px}
  .tool-example .kit-example{padding:10px 14px}
  .tool-example .kit-example-head{padding-bottom:6px}
  .tool-example .kit-example-title{font-size:16px}
  .tool-example .kit-tag{margin:8px 0 2px;font-size:11.5px}
  .tool-example .kit-title{font-size:15.5px}
  .tool-example .kit-count{font-size:12.5px;margin-top:2px}
  .tool-example .kit-link{font-size:13.5px}
  .tool-example .kit-tag:has(+ .kit-chapters),.tool-example .kit-chapters{display:none}
  .tool-example .kit-example-src{margin-top:8px;font-size:12px;line-height:1.35}
}
/* While the draft is made, phones show the progress first. Once the results show, the page's one action is in them. */
@media (max-width:980px){.tool-working .tool-pitch,.tool-working .tool-sample{display:none}}
.tool-has-result .header-cta{display:none}

/* The 3 steps (GS LR-S): a 1-2-3 bar, then one step at a time. */
.tool-progress{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 18px}
.tool-progress li{display:flex;gap:7px;align-items:flex-start;padding-top:9px;border-top:3px solid var(--line);font:600 13.5px/1.3 var(--font-body);color:var(--muted)}
.tool-progress .n{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:-2px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--white);color:var(--text);font:700 12px/1 var(--font-body)}
.tool-progress .is-now{border-top-color:var(--red);color:var(--navy)}
.tool-progress .is-now .n{background:var(--red);border-color:var(--red);color:#FFFFFF}
.tool-progress .is-done{border-top-color:var(--navy);color:var(--navy)}
.tool-progress .is-done .n{background:var(--navy);border-color:var(--navy);color:#FFFFFF}
.tool-form{display:block}
.tool-step{display:grid;gap:18px}
.tool-step-h{margin:0;font:700 21px/1.3 var(--font-head);color:var(--navy)}
.tool-step-h:focus{outline:none}
.step-of{font:600 14.5px/1.3 var(--font-body);color:var(--muted)}
.tool-step .microcopy{margin:-8px 0 0}
.tool-step #p-ai{margin-top:-14px}
.tool-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.tool-go{width:100%}
.tool-link{min-height:44px;padding:0;border:0;background:none;font:600 15.5px/1.3 var(--font-body);color:var(--red-deep);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tool-link:hover{color:var(--red)}
.tool-back{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:36px;margin:-6px 0 -10px;padding:0;border:0;background:none;font:600 15px/1 var(--font-body);color:var(--text);cursor:pointer}
.tool-back::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.tool-back:hover{color:var(--navy)}
.tool-btns .btn:focus-visible,.tool-link:focus-visible,.tool-back:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
/* Phones (after the rules they change, so they win): a tighter 1-2-3 and step heading (CoS e-9372c04f (b)). */
@media (max-width:520px){
  .tool-btns .btn{width:100%}
  .tool-progress{margin-bottom:8px}
  .tool-progress li{gap:5px;padding-top:6px;font-size:12px}
  .tool-progress .n{width:20px;height:20px}
  .tool-step{gap:12px}
  .tool-step .microcopy{margin-top:-2px}
  .tool-step #p-ai{margin-top:-8px}
  .tool-step-h{font-size:17px}
  .step-of{font-size:13.5px}
}

/* The phone paths (Ty via CoS e-cd92079c; GS b375e50 v1.1): step 2's choice box, the return screen with the video filled
   in (MP-B6), the transcript box (on a computer it moves into the basics' card, MP-A6) and its own button. */
.tool-tx,.tool-attach{display:grid;gap:18px}
.tool-attach{gap:12px}
.tool-attach .microcopy{margin:-4px 0 0}
.tool-attach .tool-status{margin-top:0}
.tool-alt,.tool-return{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg)}
.tool-alt p,.tool-return p{margin:0;font-size:15.5px;line-height:1.5;color:var(--text)}
.tool-alt-h{margin:0;font:700 17px/1.3 var(--font-head);color:var(--navy)}
.tool-alt .tool-alt-lead,.tool-return .tool-return-ok{font-weight:600;color:var(--navy)}
.tool-return .hint{font-size:14px}
/* One consent line and one AI line show, by the path (LR-C1 + P-29b, or MP-A14c + MP-A12), and one AI line at the end of
   the results (R-2b, or MP-A8 for the basics). */
.tool-form.mode-basics #tool-consent,.tool-form.mode-basics #p-ai,.tool-form:not(.mode-basics) #tool-consent-b,.tool-form:not(.mode-basics) #p-ai-b{display:none}
.tool-basics #r-ai,body:not(.tool-basics) #r-ai-b{display:none}
.r-add-pc{display:none}
@media (hover:hover) and (pointer:fine){.r-add-pc{display:grid;gap:18px;margin-top:16px}}
@media (max-width:520px){.tool-tx{gap:12px}.tool-alt,.tool-return{padding:12px;gap:8px}}

/* Step 1's "Is this your video?": the video's own title and thumbnail from the API, the thumbnail as YouTube serves it
   (16:9 in a 16:9 box: no crop, cover, filter or overlay), with the source note under it. */
.tool-video{display:grid;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg)}
.tool-video-q{margin:0;font:700 17px/1.3 var(--font-head);color:var(--navy)}
.tool-video-link{display:flex;gap:12px;align-items:flex-start;color:var(--navy);text-decoration:none}
.tool-video-link:hover .tool-video-title{text-decoration:underline}
.tool-video-thumb{flex:none;display:block;width:128px;aspect-ratio:16/9;background:linear-gradient(135deg,#1D2939,#0B1220)}
.tool-video-thumb img{display:block;width:100%;height:auto}
.tool-video-title{font:600 15.5px/1.4 var(--font-body);overflow-wrap:anywhere}
.tool-video .hint{font-size:14px}

/* After the click: "Check your email", then the progress lines while the draft is made. */
.tool-sent,.tool-wait{display:grid;gap:12px}
.tool-sent p,.tool-wait p{margin:0;font-size:16.5px;line-height:1.55;color:var(--navy)}
.tool-sent-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--red-wash);color:var(--red-deep)}
.tool-sent-ico svg{width:24px;height:24px}
.tool-sent .tool-again{font-weight:600;color:var(--ok)}
.tool-dev a{color:var(--red-deep);font-weight:600;word-break:break-all}
.tool-stages{list-style:none;display:grid;gap:10px;margin:4px 0 0}
.tool-stages li{display:flex;gap:10px;align-items:center;font-size:16px;line-height:1.4;color:var(--navy)}
.tool-stages .is-ok .r-ico{background:var(--ok-wash);color:var(--ok)}
.tool-stages .is-now{font-weight:600}
.tool-spin{flex:none;width:26px;height:26px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--red);animation:tool-spin .9s linear infinite}
@keyframes tool-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tool-spin{animation:none;border-color:var(--red)}}

.field{display:grid;gap:8px}
.field>label,.field>legend{font:600 16px/1.3 var(--font-body);color:var(--navy)}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
fieldset.field>legend{padding:0;margin-bottom:8px}
.field input[type=url],.field input[type=email],.field input[type=text],.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid #7D8799;border-radius:var(--radius-sm);background:var(--white);color:var(--navy);font:400 16px/1.5 var(--font-body)}
.field textarea{min-height:180px;resize:vertical;font-size:15px}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--navy);outline-offset:1px}
.field input[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:var(--red-deep)}
.field input[type=file]{font-size:15px;color:var(--text)}
.hint{margin:0;font-size:15px;color:var(--muted)}
.field-err{margin:0;font:600 15.5px/1.45 var(--font-body);color:var(--red-deep)}
.tool-how,.tool-more{border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px 14px;background:var(--bg)}
.tool-how summary,.tool-more summary{cursor:pointer;font-weight:600;color:var(--navy);min-height:40px;display:flex;align-items:center}
.tool-how-body{display:grid;gap:10px;padding:4px 0 10px}
.tool-how-pic{width:100%;max-width:300px;height:auto}
.tool-how ol{margin:0 0 0 20px;display:grid;gap:4px;font-size:16px}
.tool-how p{font-size:16px;margin:0}
.tool-more-body{display:grid;gap:16px;padding:6px 0 14px}
.tool-consent{margin:0;font-size:15px;line-height:1.55;color:var(--text)}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:16px;cursor:pointer}
.tick input{width:24px;height:24px;margin-top:2px;flex:none;accent-color:var(--red)}
.ts:empty{display:none}
.tool-status{margin-top:16px;font-size:16.5px;color:var(--navy)}
.tool-status:empty{display:none}
.tool-status.is-error{color:var(--red-deep);font-weight:600}
.tool-status a{color:var(--red-deep);font-weight:600;word-break:break-all}
.tool-status .status-title{display:block;font:700 20px/1.3 var(--font-head);margin-bottom:6px}
.tool-status p{margin:0 0 8px}
.tool-facts{list-style:none;display:grid;gap:10px;margin-top:12px}
.tool-facts li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px}
.tool-facts svg{flex:none;width:20px;height:20px;margin-top:3px;color:var(--navy)}

/* Results (CoS e-77828423, Ty via CoS e-d0974e0d): the value first, one card per part, one action per card. */
.tool-has-result .tool-landing{display:none}
html:has(.tool-has-result){scroll-padding-bottom:96px}
.tool-result.section{padding-top:clamp(36px,6vw,64px)}
.r-head{display:grid;gap:10px;margin-bottom:28px}
.r-mark{width:66px;height:28px}
.r-head h1{margin:4px 0 0}
#tool-result-title:focus{outline:none}
.r-meta{margin:0;font-size:16.5px;color:var(--text)}
.r-meta strong{display:block;margin-top:2px;font:600 17px/1.4 var(--font-body);color:var(--navy);overflow-wrap:anywhere}
.r-meta .r-vlink{color:var(--navy);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.r-meta .r-vlink:hover{text-decoration-color:currentColor}
.r-card{margin:0 0 20px;padding:24px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs)}
.r-card>:last-child{margin-bottom:0}
.r-h{font:700 21px/1.3 var(--font-head);color:var(--navy);margin:0 0 14px}
.r-note{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}
.r-card .r-h+.r-note{margin:-6px 0 14px}
.r-tag{margin:0 0 6px;font:650 12.5px/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tool-copy{min-height:44px;padding:0 18px;font-size:15px}

.r-checks{list-style:none;display:grid}
.r-checks li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);font-size:16.5px;line-height:1.5;color:var(--navy)}
.r-checks li:first-child{border-top:0;padding-top:0}
.r-ico{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;margin-top:-1px}
.r-ico svg{width:14px;height:14px}
.is-bad .r-ico{background:var(--warn-wash);color:var(--warn)}
.is-warn .r-ico{background:var(--warn-wash);color:var(--warn)}
.is-ok .r-ico{background:var(--ok-wash);color:var(--ok)}
/* The summary (R-5s) and, under it, the facts it comes from. */
.r-fixes li{font-weight:600}
.r-lead{margin:14px 0 0;font-size:16px;line-height:1.55;color:var(--navy)}
.r-fixes[hidden]+.r-lead{margin-top:0}
.r-sub{margin:22px 0 10px;padding-top:18px;border-top:1px solid var(--line);font:700 16px/1.3 var(--font-head);color:var(--navy)}

.r-options{display:grid;gap:12px}
.r-opt{padding:16px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg)}
.r-otext{margin:0 0 12px;font:700 19px/1.4 var(--font-head);color:var(--navy);overflow-wrap:anywhere}
.r-orow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.r-count{margin:0;font-size:15px;font-weight:600}
.r-count.is-ok{color:var(--ok)}
.r-count.is-warn{color:var(--warn)}
.r-style{margin:0 0 6px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.r-style strong{font-weight:700;color:var(--navy)}
/* Their title on the run's date (R-12n), above the options, in full. */
.r-now{margin:0 0 14px;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);font-size:15.5px;line-height:1.5;color:var(--text);overflow-wrap:anywhere}
.r-now-tag{font-weight:650;color:var(--muted)}
.r-old{font-weight:600;color:var(--navy)}
.r-options+.r-note{margin-top:14px}

.r-cat{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.r-catline{margin:0;font:600 16.5px/1.45 var(--font-body);color:var(--navy)}
.r-cat .r-note{margin-top:4px}
.r-text{margin:0 0 16px;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);font:400 15.5px/1.65 var(--font-body);color:var(--navy)}

/* The phone preview in our own look (SEO PL-3: not YouTube's type, colours or page parts): the video's own thumbnail
   (or a plain panel when there isn't one) and the first title option, 2 lines at most. No play mark (house visual
   rule). The thumbnail is a 16:9 size in a 16:9 box, at its own shape: no object-fit, crop, filter or overlay. */
.r-phone{width:min(330px,100%);margin:0 auto;border:10px solid var(--navy-black);border-radius:34px;background:var(--bg);overflow:hidden;box-shadow:0 12px 32px rgba(16,24,40,.16)}
.r-player{aspect-ratio:16/9;background:linear-gradient(135deg,#1D2939,#0B1220)}
.r-thumb{display:block}
.r-thumb img{display:block;width:100%;height:auto}
.r-watch{padding:14px 16px 18px}
.r-ptitle{margin:0;font:700 17px/1.35 var(--font-head);color:var(--navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.r-phone-card .r-note{text-align:center}

.tool-shorts{display:grid}
.tool-short{padding:18px 0;border-top:1px solid var(--line)}
.tool-short:first-child{border-top:0;padding-top:4px}
.tool-short:last-child{padding-bottom:0}
.tool-short h3{display:flex;gap:10px;align-items:baseline;font:700 18px/1.35 var(--font-head);color:var(--navy);margin:0 0 6px}
.tool-short .n{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#FFFFFF;font:700 13.5px/1 var(--font-body);transform:translateY(-2px)}
.tool-short .when{margin:0 0 10px;font-size:14.5px;font-weight:600;color:var(--muted)}
.tool-short blockquote{margin:0 0 14px;padding:2px 0 2px 14px;border-left:3px solid var(--line-strong);font-size:16px;line-height:1.6;color:var(--text)}
.tool-short .frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;background:var(--navy-black)}
.tool-short iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tool-short>a{font-weight:600;color:var(--red-deep)}

.r-steps{list-style:none;counter-reset:step;display:grid;gap:14px}
.r-steps li{counter-increment:step;position:relative;padding-left:44px;min-height:30px;font-size:16.5px;line-height:1.55;color:var(--navy)}
.r-steps li::before{content:counter(step);position:absolute;left:0;top:-1px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red);color:#FFFFFF;font:700 15px/1 var(--font-body)}

/* Copy all stays in reach while the results scroll by, and rests under the steps at the end (sticky, not fixed). */
.r-bar{position:sticky;bottom:0;z-index:5;display:flex;justify-content:center;margin:4px calc(-1 * var(--gutter)) 0;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));background:rgba(250,250,248,.94);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.r-bar .btn{min-width:240px}
.r-foot{margin-top:20px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.r-foot p{margin:0 0 6px}

@media (max-width:520px){
  .r-card{padding:20px 18px;border-radius:12px}
  .r-h{font-size:19.5px}
  .r-opt{padding:14px}
  .r-otext{font-size:18px}
  .r-orow .tool-copy,.r-card>.tool-copy,.r-bar .btn{width:100%}
}

/* The One Video, Done offer under the results. */
.tool-offer{display:grid;gap:14px}
.tool-offer .eyebrow{margin:0}
.tool-offer .checks{list-style:none;display:grid;gap:10px}
.tool-offer .checks li{display:flex;gap:12px;align-items:flex-start}
.tool-offer .checks svg{flex:none;width:20px;height:20px;margin-top:3px}
.tool-offer .btn{justify-self:start}
.tool-terms{margin:0;font-size:15.5px;color:var(--text)}
.row-note{display:block;margin-top:4px;font-size:14.5px;color:var(--muted)}
/* Ty's one plain AI line (R-2b), the last line of the results page, under the offer. */
.r-ai{margin:22px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* The Studio captions link and the phone how-to video (CoS Oct 23, Ty) */
.tool-studio{margin:12px 0}.tool-studio .btn{width:100%;justify-content:center;text-align:center}.tool-studio .microcopy{margin-top:6px}
.tool-how-video{display:block;width:100%;max-width:300px;height:auto;margin:4px auto 10px;border-radius:12px;background:#101828}
.tool-inapp{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#FEF3F2;color:#7A271A;font-size:.95rem}
.tool-studio{padding:14px;border:1px solid #D0D5DD;border-radius:12px;background:#F9FAFB}.tool-studio-h{font-weight:700;margin:0 0 10px}.tool-studio-steps{margin:12px 0 6px;padding-left:1.3em}.tool-studio-steps li{margin:4px 0}.tool-inapp{margin:0 0 10px}
.tool-short-thumb{display:block;width:100%;max-width:420px;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0B1220;cursor:pointer;text-align:left}.tool-short-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#0B1220}.tool-short-thumb .tool-short-tag{display:block;padding:10px 12px;font:700 15px/1.3 var(--font-body);color:#FFFFFF;background:var(--navy)}.tool-short-thumb:hover .tool-short-tag,.tool-short-thumb:focus-visible .tool-short-tag{background:var(--navy)}
.tool-more{margin:10px 0 0}.tool-more .btn{width:100%}
/* Mobile fixes (Oct 24, web handbook modules 14-16): field edges at 3:1+ (#7D8799), the no-transcript options folded,
   focus and anchors kept clear of the sticky Copy all bar, calmer motion when asked. */
.tool-other{margin:14px 0;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.tool-other>summary{cursor:pointer;padding:14px 16px;font-weight:600;color:var(--navy);min-height:44px}
.tool-other[open]>summary{border-bottom:1px solid var(--line)}
.tool-other .tool-alt{margin:0;border:0;border-radius:0 0 12px 12px}
html{scroll-padding-bottom:96px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Results fold open (web handbook mod. 14: phone first, details folded): summary card up top, each section a tap away */
.tool-result .narrow{max-width:640px}
.r-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;list-style:none;cursor:pointer}
.r-sum::-webkit-details-marker{display:none}
.r-sum::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg) translate(-2px,-2px)}
details[open]>.r-sum::after{transform:rotate(-135deg) translate(-2px,-2px)}
.r-sum:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:6px}
.r-fold>.r-sum .r-h{margin:0}
.r-more>.r-sum .r-sub{margin:0;padding:0;border:0}
.r-fold[open]>.r-sum{margin-bottom:14px}
.r-more{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.r-more[open]>.r-sum{margin-bottom:10px}
.r-status{justify-self:start;margin:2px 0 0;padding:4px 12px;border-radius:999px;background:var(--ok-wash);border:1px solid #ABEFC6;font:650 14px/1.4 var(--font-body);color:var(--ok)}
.r-cue{margin:0 0 14px;font:600 17px/1.45 var(--font-body);color:var(--navy)}
.r-copyrow{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:520px){.r-copyrow .btn{width:100%}}
.tool-short .frame{min-height:200px}
.tool-short-src{margin:8px 0 4px;font-size:14px;color:var(--muted)}
.tool-short-open{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--red-deep);text-decoration:underline;text-underline-offset:3px}
.tool-tuneup{margin-top:16px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;background:#fff}
.tool-tuneup h3{margin:0 0 8px}.tool-tuneup .checks{margin:12px 0}
@media (max-width:767px){.tool-tuneup .btn{width:100%;min-height:48px}}
.tx-steps{list-style:none;margin:4px 0 16px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tx-steps li{display:flex;flex-direction:column;gap:8px;font-size:14.5px;line-height:1.4;color:var(--navy)}
.tx-steps svg{display:block;width:100%;height:auto}
.tx-steps b{font-weight:700}
@media (max-width:560px){.tx-steps{gap:8px}.tx-steps li{font-size:13px;line-height:1.35}}
.copy-fallback{display:block;width:100%;min-height:96px;margin-top:8px;padding:10px 12px;font:inherit;font-size:15px;line-height:1.45;color:var(--navy);background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius-sm)}
/* Oct 26: the no-timestamps note (step 2 and the results), the basics with no email step (step 3), "Email me my link". */
.tool-notimes{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:#EFF8FF;color:#1D2939}
.tool-now{font-weight:600;color:var(--navy);margin:0 0 14px}
.r-notimes{font-weight:600;color:var(--navy);background:#EFF8FF;border-color:#B2DDFF}
.r-mail .field{margin:0 0 12px}.r-mail .microcopy{margin:10px 0 0}

/* Ty's two paths on the Kit page (CoS e-5af000af): "Use the tool" (this page) and "Have our team do it". */
.path-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 16px;max-width:520px}
.path-tab{display:flex;flex-direction:column;justify-content:center;min-height:52px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:10px;background:var(--white);text-decoration:none;color:var(--navy)}
.path-tab b{font:700 15.5px/1.25 var(--font-body)}
.path-tab span{font-size:13px;line-height:1.3;color:var(--muted)}
.path-tab.is-on{border:2px solid var(--navy);background:var(--bg-alt)}
.path-tab:not(.is-on):hover{border-color:var(--navy)}
/* The two Kit modes, with what unlocks as you add information. State in words and an icon, not color alone. */
.kit-modes{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:8px}
.kit-modes li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white);font-size:15.5px;line-height:1.45;color:var(--text)}
.kit-modes strong{color:var(--navy)}
.km-ico{flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;border:2px solid var(--line-strong);background:var(--white)}
.kit-modes li.is-on{border-color:#067647}
.kit-modes li.is-on .km-ico{border-color:#067647;background:#067647 no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.kit-modes li.is-off .km-ico,.kit-modes li.is-part .km-ico{border-color:#B54708}
.km-state{display:block;font-weight:600;color:var(--navy)}
.km-state:empty{display:none}
.kit-modes li.is-on .km-state{color:#067647}
.kit-modes li.is-off .km-state,.kit-modes li.is-part .km-state{color:#B54708}
/* The Kit demo beside the tool: under the pitch on computers, after the form on phones. */
.tool-demo{display:grid;gap:12px;align-content:start}
.tool-demo-lead{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font:600 16px/1.4 var(--font-body);color:var(--navy)}
.tool-demo-lead .btn{min-height:44px}
.tool-demo .kit-preview{max-width:none}
@media (min-width:981px){.tool-grid:has(.tool-demo){grid-template-areas:"pitch side" "demo side";grid-template-rows:auto 1fr;row-gap:20px}.tool-grid:has(.tool-demo) .tool-pitch{grid-area:pitch}.tool-grid:has(.tool-demo) .tool-side{grid-area:side}.tool-demo{grid-area:demo}}
@media (max-width:980px){.tool-working .tool-demo{display:none}}
@media (max-width:720px){
  .path-tabs{margin-bottom:10px}
  .path-tab{min-height:48px;padding:6px 10px}
  .path-tab b{font-size:14.5px}
  .path-tab span{font-size:12.5px}
  .kit-modes{gap:6px;margin-bottom:2px}
  .kit-modes li{padding:8px 10px;font-size:14px;line-height:1.4}
  .km-ico{width:18px;height:18px}
}
/* The Example Kit in the real result UI ("Try a sample video"): labelled, with the way back to the form. */
.r-example{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:14px;padding:14px 16px;border:2px dashed var(--line-strong);border-radius:var(--radius-sm);background:var(--white)}
.r-example p{margin:0;font-size:15.5px;line-height:1.45;color:var(--navy)}
.r-example .kit-badge{margin-right:6px}
.tool-example .r-ai,.tool-example #r-ai-b{display:none}