/* The free tools (/free-tools and /free-tools/*): intro, the tool sheet, drop zone, results, FAQ, closing band. */
[hidden]{display:none!important}
.intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(24px,4vw,64px);padding-top:clamp(28px,5vw,72px)}
.intro h1{font-family:var(--display);font-size:clamp(3rem,7vw,5.6rem);line-height:.95;letter-spacing:-.005em}
.intro .lede{max-width:40ch;margin-top:18px}
.intro > div{padding-bottom:clamp(28px,3.4vw,48px)}
.intro .pose{width:clamp(180px,20vw,290px);margin-bottom:-22px;position:relative;z-index:1;filter:drop-shadow(0 20px 16px rgba(40,30,10,.2))}
.sheet{margin:clamp(8px,1vw,14px) clamp(8px,1.4vw,22px) 0;padding:clamp(32px,5vw,80px) 0;border-radius:clamp(28px,4vw,56px);background:var(--paper);box-shadow:var(--clay),0 30px 60px -40px rgba(60,40,15,.35)}
.tool{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.6vw,32px)}
.tool h2{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.05}

.drop{position:relative;display:grid;place-items:center;gap:14px;min-height:240px;padding:36px 24px;border:2.5px dashed var(--line);border-radius:28px;background:var(--putty);text-align:center;transition:border-color .2s,background .2s}
.drop.over{border-color:var(--green);background:color-mix(in srgb,var(--mint) 30%,var(--putty))}
.drop img{width:110px;height:auto}
.drop strong{font-size:1.25rem}
.drop p{color:var(--ink-2)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.btn.quiet{background:var(--paper);color:var(--ink);box-shadow:inset 0 -4px 0 rgba(60,40,15,.12),0 0 0 1.5px var(--line)}
.file{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-weight:600}
.file span{font-weight:400;color:var(--ink-2)}
.file button{margin-left:auto;border:0;background:none;color:var(--green-deep);font:600 1rem var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.fields{display:grid;gap:22px}
.file + .fields{margin-top:24px}
.fields label,.fields legend{display:block;font-weight:600;margin-bottom:8px}
.fields input[type=text]{width:100%;height:54px;padding:0 18px;border:1.5px solid var(--line);border-radius:16px;background:var(--paper);font:inherit;color:var(--ink)}
.fields input[type=text]:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.fields fieldset{border:0;margin:0;padding:0}
.choices{display:grid;gap:10px}
.choices label{display:flex;gap:12px;align-items:flex-start;margin:0;padding:16px 18px;border-radius:18px;background:var(--putty);font-weight:500;cursor:pointer}
.choices input{margin-top:5px;accent-color:var(--green-deep)}
.choices small{display:block;color:var(--ink-2);font-weight:400;margin-top:2px}

.results{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.results li{display:flex;gap:12px;align-items:baseline;padding:14px 18px;border-radius:16px;background:var(--putty);line-height:1.5}
.results li::before{flex:0 0 26px;height:26px;border-radius:9px;display:grid;place-items:center;font-weight:700;transform:translateY(5px)}
.results li.ok::before{content:"\2713";background:var(--mint)}
.results li.no::before{content:"\2715";background:var(--tomato);color:#fff}
.verdict{font-size:1.2rem;font-weight:600}
.error{padding:14px 18px;border-radius:16px;background:color-mix(in srgb,var(--tomato) 18%,var(--paper));font-weight:500}

.play{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:18px;align-items:start}
.play iframe{display:block;width:100%;aspect-ratio:16/10;border:0;border-radius:20px;background:#fff;box-shadow:0 0 0 1.5px var(--line)}
.log{display:grid;gap:12px;align-content:start}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.chips div{padding:10px 12px;border-radius:14px;background:var(--putty)}
.chips span{display:block;font-size:.82rem;color:var(--ink-2)}
.chips b{font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.log .chips div:first-child{grid-column:1/-1}
.more-log summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.more-log .calls{margin-top:10px}
.next{margin-top:14px;font-weight:600}
.error a{color:inherit;text-decoration:underline}
.calls{list-style:none;margin:0;padding:10px 0;max-height:420px;overflow:auto;border-radius:16px;background:var(--ink);color:var(--paper);font:500 .84rem/1.45 ui-monospace,Menlo,monospace}
.calls li{padding:3px 14px;overflow-wrap:anywhere}
.calls li.bad{color:var(--peach)}
.calls li:empty::before{content:"Waiting for the package to call the LMS";color:color-mix(in srgb,var(--paper) 60%,transparent)}

.stage{position:relative;width:fit-content;max-width:100%;margin:0 auto;border-radius:24px;overflow:hidden;background:var(--putty-2);box-shadow:var(--lift)}
.stage canvas{display:block;width:100%;height:auto;cursor:grab;touch-action:none}
.stage canvas:active{cursor:grabbing}
.stage .wait[hidden]{display:none}
.stage .wait{position:absolute;inset:0;display:grid;place-items:center;padding:24px;color:var(--paper);text-align:center;background:color-mix(in srgb,var(--ink) 70%,transparent)}
.controls{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.controls label{display:flex;gap:10px;align-items:center;font-weight:600}
.controls input[type=range]{width:180px;accent-color:var(--green-deep)}
.controls .btn{margin-left:auto}
.hint{color:var(--ink-2)}

.cards{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cards a{display:grid;gap:10px;align-content:start;padding:28px;border-radius:28px;background:var(--putty);text-decoration:none;box-shadow:inset 0 -5px 0 rgba(60,40,15,.08);transition:transform .35s var(--spring)}
.cards a:hover{transform:translateY(-3px)}
.cards img{width:auto;height:96px}
.cards .pict{display:block;width:100%;max-width:260px;height:auto;margin-bottom:6px}
.cards h2{font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.05}
.cards p{color:var(--ink-2)}

.more{max-width:1080px;margin:clamp(48px,6vw,80px) auto 0}
.more .faq{margin-top:20px}
.close{margin-top:clamp(70px,8vw,120px)}
.close .grid{display:grid;grid-template-columns:minmax(0,7fr) auto;gap:clamp(24px,4vw,64px);align-items:center}
.close h2{font-size:clamp(2.1rem,4.4vw,3.6rem)}
.close .lede{max-width:46ch}
@media (min-width:901px){footer .foot{padding-right:clamp(120px,12vw,190px)}}
@media (max-width:900px){.play{grid-template-columns:1fr}.play iframe{aspect-ratio:auto;height:70vh;min-height:420px}.cards{grid-template-columns:1fr}.close .grid{grid-template-columns:1fr}}
@media (max-width:640px){.intro{grid-template-columns:1fr;align-items:start}.intro > div{padding-bottom:24px}.intro .pose{order:-1;width:150px;margin:0 0 -6px}.controls .btn{margin-left:0;width:100%}.drop{min-height:200px}}

.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:step}
.steps li{counter-increment:step;padding:24px 26px;border-radius:24px;background:var(--paper);box-shadow:inset 0 -4px 0 rgba(60,40,15,.07)}
.steps h3::before{content:counter(step);display:inline-grid;place-items:center;width:34px;height:34px;margin-right:12px;border-radius:12px;background:var(--mint);font-size:1.05rem}
.steps p{margin-top:8px;color:var(--ink-2)}
.more .cards{margin-top:24px}
.cards h3{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2vw,1.7rem);line-height:1.05;letter-spacing:0}
.all{margin-top:18px}
@media (max-width:860px){.steps{grid-template-columns:minmax(0,1fr)}}
.more .cards a{background:var(--paper)}

/* After a result: the way into Leap. On the photo tool it waits for the 3D photo (body[data-ready]). */
.win{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;margin-top:24px;padding:26px 28px;border-radius:24px;background:var(--green);color:var(--ink);box-shadow:var(--clay)}
.win div{flex:1 1 320px}
.win h3{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,2.2vw,1.8rem);line-height:1.05}
.win p{margin-top:8px;max-width:58ch}
body:not([data-ready]) #view .win{display:none}

/* The free tools' mark (Sid, 30 Oct): askleap.ai on every output; Leap removes it. */
.mark-note{margin-top:14px;color:var(--ink-2);font-size:.95rem}
.mark-note a{color:var(--green-deep);font-weight:600}
.stage .wm{position:absolute;right:12px;bottom:10px;font:700 .9rem var(--body);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none}
#view{scroll-margin-top:96px}
.cards:has(> a:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}