/* brandonrutlidge.com master stylesheet. Every page uses this file.
   Change a building block here and it changes on every page.
   Building blocks: .btn (+ .btn-sm), h1 / h2 / .h3, .lede, .small, .card (+ .card-sm), .pill, .wrap, .gap,
   .tools + .tool-card (tool grid), .outputs + .output + .viz (what a tool makes), .ticks, the contact form.
   See README.md before adding anything new. */
/* ---- Tokens: colours, text sizes, shapes. Phone values first, desktop values in the media query. ---- */
:root{
--bg:#181818;--card:#212121;--raised:#303030;--line:#2c2c2c;--accent:#0173ef;--accent-2:#2a8bf7;--blue:#4da3ff;--text:#fff;--muted:#8c8c8c;--err:#ff8a80;
--field-line:#fff;--card-ring:none;--glass:rgba(24,24,24,.85);
--font:Rubik,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,'Helvetica Neue',Arial,sans-serif;
--fs-body:18px;--fs-small:15px;--fs-lede:24px;--fs-lede-2:16px;--fs-h1:32px;--fs-h2:28px;--fs-h3:22px;--fs-btn:18px;--fs-btn-sm:15px;
--btn-h:52px;--btn-h-sm:40px;--radius:16px;
--card-pad:28px 20px;--card-pad-sm:18px 20px;
--gap:48px;--pad:16px;
color-scheme:dark}
/* Light mode: the moon/sun button in the header sets data-theme='light' on <html> (remembered in localStorage). */
[data-theme=light]{--bg:#f4f4f4;--card:#fff;--raised:#e8e8e8;--line:#dcdcdc;--blue:#0062cc;--text:#141414;--muted:#5c5c5c;--err:#c62828;--field-line:#c8c8c8;--card-ring:0 0 0 1px #e2e2e2,0 1px 3px rgba(0,0,0,.05);--glass:rgba(244,244,244,.85);color-scheme:light}
/* "Screens" (card pictures, output pictures, the clip animation) stay dark in both modes, like a device screen. */
.thumb,.viz,.clipper{--bg:#181818;--card:#212121;--raised:#303030;--line:#2c2c2c;--blue:#4da3ff;--text:#fff;--muted:#8c8c8c}
.thumb,.viz{color:var(--text)}
@media(min-width:900px){:root{--fs-body:22px;--fs-small:18px;--fs-lede:40px;--fs-lede-2:24px;--fs-h1:64px;--fs-h2:40px;--fs-h3:28px;--fs-btn:22px;--fs-btn-sm:17px;--btn-h:56px;--card-pad:44px 48px;--card-pad-sm:20px 28px;--gap:64px;--pad:32px}}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/1.45 var(--font);transition:background-color .25s,color .25s}
h1,h2,h3,p,dl,dd,ol,ul,fieldset,legend{margin:0;padding:0}
fieldset{border:0;min-width:0}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
p{max-width:65ch}
.nw{white-space:nowrap}
.arrow{color:var(--blue)}

/* ---- Layout ---- */
.wrap{max-width:1000px;margin:0 auto;padding:0 var(--pad)}
.measure{max-width:780px;margin-left:auto;margin-right:auto}
.gap{margin-top:var(--gap)}

/* ---- Text: h1 = page title, h2 = section heading, h3 or .h3 = card title, .lede = intro line, .small = small print ---- */
h1,h2,h3,.h3{font-weight:700;text-transform:uppercase;line-height:1.2;text-wrap:balance}
h1,h2{text-align:center}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3,.h3{display:block;font-size:var(--fs-h3)}
.lede{max-width:none;margin-top:16px;font-size:var(--fs-lede);font-weight:700;line-height:1.3;text-wrap:balance}
.lede+.lede{margin-top:12px;font-size:var(--fs-lede-2)}
.small{font-size:var(--fs-small);line-height:1.45;color:var(--muted)}

/* ---- Button: the one button style. Full width on phones; add .btn-sm for the smaller header version. ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;justify-self:center;width:100%;min-height:var(--btn-h);padding:10px 32px;border:0;border-radius:var(--radius);background:var(--accent);color:#fff;font:500 var(--fs-btn)/1.3 var(--font);text-align:center;text-decoration:none;text-wrap:balance;cursor:pointer;transition:background-color .15s}
.btn:hover,.btn:active{background:var(--accent-2)}
.btn[disabled]{opacity:.75;cursor:progress}
@media(min-width:900px){.btn{width:auto;padding:10px 40px}}
.btn-sm{width:auto;min-height:var(--btn-h-sm);padding:0 16px;font-size:var(--fs-btn-sm);white-space:nowrap}

/* ---- Card: the one box style. Add .card-sm for tighter boxes such as the FAQ. ---- */
.card{padding:var(--card-pad);background:var(--card);border-radius:var(--radius);box-shadow:var(--card-ring)}
.card-sm{padding:var(--card-pad-sm)}

/* ---- Pill: small rounded tag, e.g. "Example" ---- */
.pill{display:inline-block;padding:4px 14px;border-radius:var(--radius);background:var(--raised);color:var(--text);font-size:15px;font-weight:500}

/* ---- Header and footer ---- */
.top{background:var(--bg);background:var(--glass);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:64px;padding-top:8px;padding-bottom:8px}
.top-l,.top-r{display:flex;align-items:center;gap:12px}
.brand{color:var(--text);font-weight:700;font-size:18px;text-decoration:none;white-space:nowrap}
/* Round icon button: the back/next arrows and the light/dark switch */
.ibtn{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:999px;background:none;color:var(--text);cursor:pointer;transition:background-color .15s}
.ibtn:hover{background:var(--raised)}
.ibtn svg{width:20px;height:20px}
.step{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px}
.theme{width:40px;height:40px;border:1px solid var(--line)}
.theme .i-sun,[data-theme=light] .theme .i-moon{display:none}
[data-theme=light] .theme .i-sun{display:block}
.l-sm{display:none}
@media(max-width:519px){.l-lg{display:none}.l-sm{display:inline}}
@media(max-width:419px){.top-l,.top-r{gap:6px}.top .wrap{column-gap:6px}.brand{font-size:15px}.step{gap:0}.ibtn{width:30px;height:30px}.ibtn svg{width:18px;height:18px}.theme{width:32px;height:32px}.btn-sm{min-height:34px;padding:0 10px;font-size:13px}}
@media(min-width:900px){html{scroll-padding-top:80px}.top{position:sticky;top:0;z-index:20}.brand{font-size:20px}}
.foot{margin-top:var(--gap);border-top:1px solid var(--line)}
.foot .wrap{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:24px;padding-bottom:24px;text-align:center}
.foot a{color:var(--muted)}

/* ---- Hero ---- */
.hero{display:grid;gap:32px;padding-top:40px;text-align:center}
.hero>div{width:100%}
@media(min-width:900px){.hero{padding-top:72px}}
.cta{margin-top:20px}
.curls{display:flex;justify-content:space-between;width:min(300px,78vw);margin:0 auto 6px;color:var(--text)}
.curls svg{width:56px;height:56px}
@media(min-width:900px){.curls{width:440px}.curls svg{width:80px;height:80px}}
.cta .small{max-width:none;margin-top:12px;font-style:italic;text-wrap:balance}

/* ---- Clip animation: a long video whose best moments fly out as clips. Default: 3 tall clips. .is-podcast: 2 YouTube clips + 1 Short.
   Sizes use cqw (1% of the animation's width) so it scales as one piece. Each clip and highlight has a --d delay so they arrive one after another. ---- */
.clipper{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:100/84;container-type:inline-size}
.clipper.is-podcast{aspect-ratio:100/76}
.cl-src{position:absolute;left:24cqw;top:0;width:52cqw;animation:cl-src 8s ease-in-out infinite both}
.cl-screen{position:relative;aspect-ratio:16/9;border:1px solid #3a3a3a;border-radius:2.4cqw;background:linear-gradient(135deg,#2a2a2a,#1c1c1c);overflow:hidden}
.cl-play{position:absolute;left:50%;top:50%;width:9cqw;height:9cqw;transform:translate(-50%,-50%)}
.cl-time{position:absolute;right:2cqw;bottom:2cqw;padding:.3em .6em;border-radius:.4em;background:rgba(0,0,0,.65);color:#fff;font:500 clamp(10px,2.6cqw,15px)/1.2 var(--font)}
.cl-bar{position:relative;height:3.6cqw;margin-top:2.5cqw;border:1px solid #3a3a3a;border-radius:1.2cqw;background:var(--card);overflow:hidden}
.cl-bar i{position:absolute;top:18%;width:10%;height:64%;border-radius:.8cqw;background:var(--accent);animation:cl-hl 8s ease-in-out var(--d,0s) infinite both}
.cl-bar b{position:absolute;inset:0;opacity:0;animation:cl-head 8s linear infinite both}
.cl-bar b::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:#fff}
.cl-clip{--fy:-26cqw;position:absolute;top:40cqw;width:22cqw;aspect-ratio:9/16;border:1px solid #3a3a3a;border-radius:2.4cqw;background:linear-gradient(160deg,#2c2c2c,#1b1b1b);overflow:hidden;animation:cl-clip 8s cubic-bezier(.2,.8,.2,1) var(--d,0s) infinite both}
.cl-clip.wide{width:30cqw;aspect-ratio:16/9}
.cl-clip.wide .cl-play{display:none}
.cl-clip .cl-play{width:7cqw;height:7cqw}
.cl-tag{position:absolute;left:1.6cqw;top:1.6cqw;padding:.2em .6em;border-radius:1em;background:rgba(0,0,0,.55);color:var(--blue);font:500 clamp(10px,2.4cqw,14px)/1.3 var(--font)}
.cl-cap{position:absolute;left:12%;right:12%;bottom:9%;display:grid;gap:1.2cqw}
.cl-cap span{display:block;height:1.3cqw;border-radius:1cqw;background:#fff;transform-origin:left;animation:cl-cap 8s ease-out var(--d,0s) infinite both}
.cl-cap span+span{width:65%}
.cl-out>:nth-child(1){--d:0s;--fx:13cqw;left:12cqw}
.cl-out>:nth-child(2){--d:.475s;--fx:0cqw;left:39cqw}
.cl-out>:nth-child(3){--d:.95s;--fx:-13cqw;left:66cqw}
.cl-bar i:nth-child(1){--d:0s;left:18%}
.cl-bar i:nth-child(2){--d:.475s;left:45%}
.cl-bar i:nth-child(3){--d:.95s;left:72%}
.is-podcast .cl-clip{--fy:-23.5cqw}
.is-podcast .cl-out>:nth-child(1){--d:0s;--fx:11.4cqw;left:8cqw;top:48.6cqw}
.is-podcast .cl-out>:nth-child(2){--d:.616s;--fx:-3.4cqw;left:41cqw;top:48.6cqw}
.is-podcast .cl-out>:nth-child(3){--d:1.206s;--fx:-13.5cqw;left:75cqw;top:42cqw;width:17cqw}
.is-podcast .cl-bar i:nth-child(1){--d:0s;left:10%;width:20%}
.is-podcast .cl-bar i:nth-child(2){--d:.616s;left:45%;width:20%}
.is-podcast .cl-bar i:nth-child(3){--d:1.206s;left:85%;width:7%}
@keyframes cl-src{0%{opacity:0;transform:translateY(-3cqw)}8%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes cl-head{0%,8%{opacity:1;transform:translateX(0)}30%{opacity:1;transform:translateX(100%)}31%,100%{opacity:0;transform:translateX(100%)}}
@keyframes cl-hl{0%,12%{opacity:.3;transform:none}14%{opacity:1;transform:scaleY(1.35)}18%,78%{opacity:1;transform:none}84%,100%{opacity:.3;transform:none}}
@keyframes cl-clip{0%,15%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.08)}27%,76%{opacity:1;transform:none}84%,100%{opacity:0;transform:translateY(2cqw)}}
@keyframes cl-cap{0%,27%{transform:scaleX(0)}35%,100%{transform:scaleX(1)}}
/* Details inside the clip animation: the scene in each screen, floating hearts on the live, the YouTube progress bar,
   and the spoken word lit up in the captions. */
.cl-scene{position:absolute;inset:0;display:block;width:100%;height:100%}
.cl-screen .cl-play,.cl-clip .cl-play{display:none}
.cl-heart{transform-box:fill-box;transform-origin:center;animation:cl-heart 2.4s ease-out var(--d,0s) infinite both}
@keyframes cl-heart{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translateY(-30px) scale(1.15)}}
.cl-prog{position:absolute;left:0;right:0;bottom:0;height:1cqw;background:rgba(255,255,255,.25)}
.cl-prog::after{content:'';position:absolute;inset:0;background:var(--accent);transform-origin:left;animation:cl-prog 8s linear var(--d,0s) infinite both}
@keyframes cl-prog{0%,27%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
.cl-cap span+span{background:linear-gradient(90deg,#fff 0 48%,#ffd400 48% 100%)}

/* ---- Intro line under a section heading: class='intro' ---- */
.intro{max-width:60ch;margin:12px auto 0;text-align:center;color:var(--muted)}

/* ---- Tool cards: the homepage grid and the related tools under each form.
   <a class='card tool-card'> holding a .thumb picture, a .h3 title, a .small line and a .more link. .is-custom is the dashed "something else" card. ---- */
.tools{display:grid;gap:16px;margin-top:32px;text-align:left}
@media(min-width:700px){.tools{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.tools{grid-template-columns:repeat(3,1fr)}}
.tool-card{display:flex;flex-direction:column;gap:10px;padding:14px 14px 22px;border:2px solid var(--raised);color:var(--text);text-decoration:none;transition:border-color .15s}
.tool-card>:not(.thumb){margin-left:6px;margin-right:6px}
.tool-card:hover{border-color:var(--accent)}
.tool-card .small{max-width:none}
.tool-card.is-custom{border-style:dashed}
.thumb{display:grid;place-items:center;aspect-ratio:16/10;margin-bottom:6px;border-radius:12px;background:var(--bg);overflow:hidden}
.thumb .clipper{width:70%}
.thumb .cl-tag{display:none}
.thumb>svg{width:34%;height:auto;color:var(--blue)}
.more{margin-top:auto;padding-top:6px;color:var(--blue);font-weight:500}
.tool-card:hover .more{text-decoration:underline}
.crumb{display:inline-block;margin-bottom:20px;color:var(--muted);font-size:var(--fs-small);text-decoration:none}
.crumb:hover{color:var(--text)}

/* ---- What it makes: one .output card per part of a tool's output, each with a .viz picture above its words.
   .output.wide spans the whole row (picture on the right on desktop). ---- */
.outputs{display:grid;gap:16px;margin-top:32px}
@media(min-width:800px){.outputs{grid-template-columns:1fr 1fr}.output.wide{grid-column:1/-1;grid-template-columns:1fr 1.2fr;align-items:center;gap:40px}.output.wide .viz{order:2}}
.output{display:grid;gap:18px;align-content:start;padding:16px 16px 26px}
.output>div:not(.viz){padding:0 6px}
@media(min-width:900px){.output{padding:22px 22px 32px}}
.output p{margin-top:8px}
.viz{position:relative;border-radius:12px;background:var(--bg);overflow:hidden}
.viz>svg{display:block;width:100%;height:auto;font-size:13px}
.viz text{font-family:var(--font)}
/* Picture parts, shared by every .viz */
.v-frame{fill:var(--card);stroke:#3a3a3a;stroke-width:1.5}
.v-line{fill:none;stroke:#3a3a3a;stroke-width:1.5}
.v-hl{fill:var(--accent)}
.v-fg{fill:#fff}
.v-dim{fill:var(--raised)}
.v-label{fill:var(--muted)}
.v-tag{fill:var(--blue);font-weight:500}
.v-arrow{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round}
/* Face tracking: the person sways and the frame follows (--a sets how far) */
.ft-move{animation:ft 6s ease-in-out infinite}
.ft-crop{animation:ft 6s ease-in-out .25s infinite}
@keyframes ft{0%,100%{transform:translateX(calc(var(--a,34px)*-1))}50%{transform:translateX(var(--a,34px))}}
/* Speaker framing: the tall frame cuts to whoever is talking */
.sp-crop{animation:sp 7s step-start infinite}
.talk-a{animation:ta 7s linear infinite}
.talk-b{animation:tb 7s linear infinite}
@keyframes sp{0%,46%{transform:none}50%,96%{transform:translateX(112px)}100%{transform:none}}
@keyframes ta{0%,44%{opacity:1}46%,98%{opacity:0}100%{opacity:1}}
@keyframes tb{0%,44%{opacity:0}46%,96%{opacity:1}98%,100%{opacity:0}}
/* Animated captions: the spoken word lights up, one word at a time */
.caps-viz{display:grid;place-items:end center;aspect-ratio:16/10;padding-bottom:9%;background:radial-gradient(120% 90% at 50% 30%,#2e2e2e,#141414);container-type:inline-size}
.caps-ui{position:absolute;inset:0;display:block;width:100%;height:100%}
.caps-like{transform-box:fill-box;transform-origin:center;animation:caps-like 1.6s ease-in-out infinite}
@keyframes caps-like{0%,100%{transform:translate(148px,31.5px) scale(.9)}50%{transform:translate(148px,31.5px) scale(1.15)}}
.caps{position:relative;max-width:none;font-weight:700;font-size:clamp(20px,6.4cqw,34px);line-height:1.15;text-align:center;text-transform:uppercase;color:#fff;text-shadow:0 0 2px #000,2px 2px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,0 3px 0 #000,3px 0 0 #000,-3px 0 0 #000,0 -3px 0 #000}
/* Caption pages: page 1 then page 2, each word lighting up in turn */
.caps{display:grid}
.caps .pg{grid-area:1/1}
.caps .pg:nth-child(1){animation:pg1 3.2s linear infinite}
.caps .pg:nth-child(2){opacity:0;animation:pg2 3.2s linear infinite}
@keyframes pg1{0%{opacity:1;transform:scale(.86)}6%,49.9%{opacity:1;transform:none}50%,100%{opacity:0;transform:none}}
@keyframes pg2{0%,49.9%{opacity:0;transform:none}50%{opacity:1;transform:scale(.86)}56%,100%{opacity:1;transform:none}}
.caps .pg>span{display:inline-block;margin:0 .1em;transform-origin:50% 80%;animation:cap 3.2s steps(1) var(--d,0s) infinite}
.caps .pg:nth-child(1)>span:nth-child(2){--d:.8s}.caps .pg:nth-child(2)>span:nth-child(1){--d:1.6s}.caps .pg:nth-child(2)>span:nth-child(2){--d:2.4s}
@keyframes cap{0%{color:#ffd400;transform:scale(1.06)}25%,100%{color:#fff;transform:none}}
/* Post-ready description */
.post{display:grid;gap:10px;align-content:center;padding:6% 8%;text-align:left}
@media(min-width:800px){.post{aspect-ratio:16/10}}
.post-who{display:flex;align-items:center;gap:10px;font-size:15px}
.post-who b{font-weight:500}
.post-ok{margin-left:auto;padding:2px 10px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;font-weight:500;animation:post-ok 6s linear infinite}
.post-who i{width:30px;height:30px;border-radius:50%;background:var(--raised)}
.post p{max-width:none;margin:0;font-size:15px;line-height:1.4}
.post-tags{display:flex;flex-wrap:wrap;gap:6px}
.post-tags span{padding:2px 10px;border-radius:999px;background:var(--raised);color:var(--blue);font-size:13px;animation:post-tag 6s linear var(--d,0s) infinite}
.post-tags span:nth-child(2){--d:.3s}.post-tags span:nth-child(3){--d:.6s}.post-tags span:nth-child(4){--d:.9s}
.post-type{animation:post-type 6s linear infinite}
.post-meta{color:var(--muted);font-size:13px!important}
@keyframes post-type{0%,4%{clip-path:inset(0 100% 0 0)}32%,88%{clip-path:inset(0)}92%,100%{clip-path:inset(0 0 0 100%)}}
@keyframes post-tag{0%,36%{opacity:0;transform:scale(.6)}40%,84%{opacity:1;transform:none}86%,100%{opacity:0;transform:none}}
@keyframes post-ok{0%,56%{opacity:0;transform:scale(.6)}60%,86%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
.post-title{font-weight:700;font-size:16px!important}
.chapters{display:grid;gap:4px;list-style:none;font-size:14px;color:var(--muted)}
.chapters li{animation:post-tag 6s linear var(--d,0s) infinite}
.chapters li:nth-child(1){--d:-.4s}.chapters li:nth-child(2){--d:-.1s}.chapters li:nth-child(3){--d:.2s}
.chapters b{display:inline-block;min-width:44px;color:var(--blue);font-weight:500}

/* ---- Demo video: a .video box inside a hidden section; it shows itself once data-src is set ---- */
.split{display:grid;gap:24px;align-items:center}
.split h2{margin-top:14px;text-align:left}
.split p{margin-top:12px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:48px}.flip .media{order:-1}}
.video{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:var(--radius);background:var(--card);overflow:hidden;color:var(--muted);font-size:15px}
.video img,.video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--card)}
.play{position:relative;display:grid;place-items:center;width:76px;height:76px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}
.play:hover{background:var(--accent-2)}

/* ---- Built around you: a .card with a .ticks list (add .two for two columns on desktop) ---- */
.ticks{display:grid;gap:16px;margin-top:28px;list-style:none;text-align:left}
.ticks li{display:grid;grid-template-columns:24px 1fr;gap:12px}
.ticks svg{margin-top:5px;color:var(--blue)}
.ticks strong{display:block}
.ticks span{color:var(--muted)}
@media(min-width:800px){.ticks.two{grid-template-columns:1fr 1fr;gap:28px 48px}}

/* ---- About ---- */
.about{display:grid;gap:20px}
.photo{width:140px;height:140px;margin:0 auto;border-radius:50%;background:var(--raised);overflow:hidden}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.about p{margin:12px auto 0}

/* ---- Contact form: the same form at the bottom of every page ---- */
@media(max-width:899px){#contact,#tools{scroll-margin-top:16px}}
.formcol{max-width:760px;margin-left:auto;margin-right:auto}
form{display:grid;gap:22px;margin-top:28px}
.row{display:grid;gap:22px}
@media(min-width:700px){.row{grid-template-columns:1fr 1fr}}
label,legend{display:block;font-weight:500}
.opt{color:var(--muted);font-weight:400}
.field>label{margin-bottom:8px}
input[type=text],input[type=email],input[type=tel],textarea{display:block;width:100%;padding:0 16px;background:#fff;border:2px solid var(--field-line);border-radius:var(--radius);color:#181818;font:400 18px var(--font)}
input[type=text],input[type=email],input[type=tel]{height:56px}
textarea{min-height:168px;padding:14px 16px;line-height:1.45;resize:vertical}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,textarea:focus{outline:3px solid var(--accent);outline-offset:2px}
.hint{margin-top:8px;font-style:italic}
.pills{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills label{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:var(--radius);background:var(--raised);font-weight:400;cursor:pointer}
.pills input:checked+label{background:var(--accent);color:#fff}
.pills input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
.err{display:flex;align-items:flex-start;gap:8px;margin-top:8px;color:var(--err);font-size:15px;line-height:1.4;text-align:left}
.err[hidden]{display:none}
.err svg{flex:none;margin-top:2px}
.bad input,.bad textarea{border-color:var(--err)}
.err a{color:inherit}
.after{display:grid;gap:12px;text-align:center}
.after .small{max-width:none}
.after .btn{margin-bottom:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.thanks{text-align:center}
.thanks svg{display:block;margin:0 auto;color:var(--blue)}
.thanks h2{margin-top:20px}
.thanks h2:focus{outline:none}
.thanks p{margin:12px auto 0}

/* ---- Related tools: under the form on every tool page, so there is always another tool to look at ---- */
.related .tools{display:flex;flex-wrap:wrap;justify-content:center;margin-top:24px}
.related .tool-card{flex:0 1 380px}
.related>.small{margin:20px auto 0;text-align:center}

/* ---- Privacy page ---- */
.doc{max-width:780px;margin:40px auto 0}
@media(min-width:900px){.doc{margin-top:72px}}
.doc .lede{margin:16px auto 0;text-align:center}
.doc h2{margin-top:36px;text-align:left}
.doc h2+p{margin-top:10px}
.doc p.small{margin-top:36px;font-style:italic}

/* ---- Sticky phone bar and scroll reveal ---- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
.mbar.on{transform:none;visibility:visible;transition:transform .25s ease}
@media(max-width:899px){body:has(.mbar) .foot .wrap{padding-bottom:104px}}
@media(min-width:900px){.mbar{display:none}}
.js .reveal{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.mbar,.mbar.on{transition:none}.clipper *,.clipper *::after,.output *{animation:none!important}.caps .pg>span:first-child{color:#ffd400}.talk-b{opacity:0}}