/* ToolKit for Training — page sections (Instant Studio look) */

.tk-page{overflow-x:hidden}

.tk-head{display:flex;flex-direction:column;gap:16px;max-width:680px;margin-bottom:56px}
.tk-head .lead{max-width:600px}

/* ---------- production-label thumbs ---------- */
.prodcard{display:flex;flex-direction:column;align-items:flex-start;width:100%}
.prodcard__label{font-family:var(--font-label);font-size:11px;font-weight:var(--fw-medium);letter-spacing:.5px;text-transform:lowercase;color:#fff;background:var(--accent-primary-100);border-radius:var(--radius-sm) var(--radius-sm) 0 0;padding:6px 12px 12px;margin-bottom:-8px;position:relative;z-index:1}
.prodcard__content{width:100%;border:1px solid var(--border-primary);border-radius:var(--radius-md);overflow:hidden;background:#fff}
.prodcard__content img,.prodcard__content video{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- HERO ---------- */
.tk-hero{padding:88px 0 112px}
.tk-hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;max-width:1112px;margin:0 auto}
.tk-hero h1{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:68px;line-height:1.08;margin:20px 0 0;color:var(--text-primary);text-wrap:balance}
.tk-hero .lead{margin:24px 0 0;max-width:42ch}
.tk-hero__aud{margin:16px 0 0;font-family:var(--font-body);font-size:15.5px;line-height:1.5;color:var(--text-secondary);max-width:46ch}

/* offer card — flat, hairline, quiet */
.tk-offer{max-width:460px;text-align:left;border:1px solid var(--border-primary);border-radius:var(--radius-lg);background:var(--bg-secondary);padding:32px}
.tk-offer__h{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:22px;color:var(--text-primary);margin:0 0 18px}
.tk-offer__list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px}
.tk-offer__list li{display:flex;align-items:flex-start;gap:12px;font-family:var(--font-body);font-size:15.5px;line-height:1.45;color:var(--text-primary)}
.tk-check{flex:0 0 auto;width:20px;height:20px;border-radius:var(--radius-pill);background:var(--accent-primary-100);display:flex;align-items:center;justify-content:center;margin-top:1px}
.tk-check svg{width:11px;height:11px;stroke:#fff;stroke-width:2.8;fill:none}
.tk-offer__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--border-primary);padding-top:20px}
.tk-offer__price{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:20px;color:var(--text-primary);line-height:1.1}
.tk-offer__price small{display:block;font-family:var(--font-label);font-size:11px;font-weight:400;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);margin-top:5px}

/* ---------- BENTO (what's inside) ---------- */
.tk-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tk-tile{background:#fff;border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:13px}
.tk-tile h3{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:24px;margin:0;color:var(--text-primary)}
.tk-tile p{margin:0;font-family:var(--font-body);font-size:15.5px;line-height:1.55;color:var(--text-secondary)}
.tk-tile .prodcard{margin-top:auto}
.tile-images{grid-column:1 / span 2;grid-row:1}
.tile-video{grid-column:3;grid-row:1}
.tile-video .prodcard{flex:1;min-height:0}
.tile-video .prodcard__content{flex:1;min-height:0;width:100%}
.tile-text{grid-column:1;grid-row:2}
.tile-workflow{grid-column:2;grid-row:2}
.tile-class{grid-column:3;grid-row:2}
.tile-models{grid-column:1 / span 3;grid-row:3;flex-direction:row;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;background:var(--bg-accent-secondary);border-color:transparent}
.tk-modeltags{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.tk-tile .tk-modeltags .tag{background:var(--neutral-20);border-color:var(--neutral-30);color:var(--text-primary)}
.tile-models .tk-modeltags{margin-top:0}
.tile-models .tag{background:#fff;border-color:transparent}
.tag--model{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;font-size:13px;color:var(--text-primary)}
.tag--model img{width:16px;height:16px;object-fit:contain}
.tk-imggrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:auto}
.tk-imggrid .prodcard__content{aspect-ratio:4/3;height:auto}
.tk-waveform{margin-top:auto;display:flex;align-items:flex-end;gap:5px;height:70px;border-radius:var(--radius-md);padding:0 15px;background:var(--bg-secondary);border:1px solid var(--border-primary)}
.tk-waveform span{flex:1;min-width:3px;border-radius:3px;background:var(--accent-primary-100)}

/* ---------- COMPARISON ---------- */
.tk-cmp{width:100%;border-collapse:separate;border-spacing:0;font-family:var(--font-body)}
.tk-cmp th,.tk-cmp td{padding:18px 22px;text-align:left;font-size:16.5px;border-bottom:1px solid var(--border-primary)}
.tk-cmp thead th{font-family:var(--font-label);font-size:var(--fs-xs);font-weight:var(--fw-medium);letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--neutral-100);padding-bottom:14px}
.tk-cmp tbody td:first-child{font-weight:var(--fw-medium);color:var(--text-primary)}
.tk-cmp .c-diy{color:var(--text-secondary)}
.tk-cmp .c-us{background:var(--bg-accent-secondary);color:var(--text-primary);font-weight:var(--fw-medium)}
.tk-cmp thead .c-us{background:var(--bg-accent-secondary);color:var(--text-primary)}
.tk-cmp tr:first-child th.c-us{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}
.tk-cmp tr:last-child td.c-us{border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);border-bottom:1px solid var(--bg-accent-secondary)}
.tk-cell{display:flex;align-items:center;gap:10px}
.tk-ic{flex:0 0 auto;width:20px;height:20px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center}
.tk-ic.yes{background:var(--accent-primary-100)}
.tk-ic.no{background:var(--neutral-20)}
.tk-ic svg{width:11px;height:11px;stroke-width:2.8;fill:none}
.tk-ic.yes svg{stroke:#fff}.tk-ic.no svg{stroke:var(--neutral-60)}

/* ---------- HOW IT WORKS ---------- */
.tk-how__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tk-how__step{border-top:1px solid var(--neutral-100);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.tk-how__num{font-family:var(--font-label);font-size:var(--fs-xs);letter-spacing:.5px;color:var(--accent-primary-100)}
.tk-how__step h3{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:21px;margin:0;color:var(--text-primary)}
.tk-how__step p{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--text-secondary)}

/* ---------- SEE IT IN ACTION ---------- */
.tk-inaction{background:var(--bg-secondary)}
.tk-inaction__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px}
.tk-inaction__tab{font-family:var(--font-label);font-size:var(--fs-xs);letter-spacing:.5px;text-transform:lowercase;padding:8px 18px;border-radius:var(--radius-pill);border:1px solid var(--border-primary);background:var(--bg-primary);color:var(--text-secondary);cursor:pointer;transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand),border-color var(--dur-fast) var(--ease-brand)}
.tk-inaction__tab:hover{color:var(--text-primary)}
.tk-inaction__tab.is-active{background:var(--neutral-100);border-color:var(--neutral-100);color:#fff}
.tk-inaction__stage{position:relative;max-width:920px;margin:0 auto}
.tk-inaction__frame{width:100%;aspect-ratio:900/480;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.tk-inaction__listen{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:var(--fs-xs);letter-spacing:.5px;text-transform:lowercase;padding:10px 20px;border-radius:var(--radius-pill);border:1px solid var(--border-primary);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;box-shadow:var(--shadow-md);transition:background var(--dur-fast) var(--ease-brand),color var(--dur-fast) var(--ease-brand)}
.tk-inaction__listen:hover{background:var(--neutral-20)}
.tk-inaction__listen svg{width:12px;height:12px;fill:var(--accent-primary-100)}
.tk-inaction__cap{margin-top:20px;text-align:center;font-family:var(--font-label);font-size:var(--fs-xs);letter-spacing:.5px;text-transform:lowercase;color:var(--text-secondary)}

/* ---------- trust stat (dark inverse) ---------- */
.tk-stat{background:var(--bg-inverse)}
.tk-stat__grid{display:grid;grid-template-columns:auto 1fr;gap:64px;align-items:center}
.tk-stat__num{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:112px;line-height:.85;color:var(--accent-primary-100)}
.tk-stat__num small{display:block;font-family:var(--font-label);font-size:var(--fs-xs);letter-spacing:.5px;text-transform:uppercase;color:var(--neutral-50);margin-top:12px}
.tk-stat h2{font-size:42px;margin:0 0 14px;color:#fff}
.tk-stat p{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--neutral-40);max-width:52ch;margin:0}
.tk-stat .tk-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.tk-stat .tag{color:var(--accent-secondary-100);border-color:var(--neutral-80);background:transparent}

/* ---------- TRUSTED-BY logo strip ---------- */
.tk-logos{border-top:1px solid var(--border-primary);border-bottom:1px solid var(--border-primary);background:var(--bg-primary)}
.tk-logos__row{display:flex;align-items:center;justify-content:center;gap:40px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap}
.tk-logos__label{font-family:var(--font-label);font-size:var(--fs-xs);letter-spacing:.5px;text-transform:lowercase;color:var(--text-secondary)}
.tk-logos__marks{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.tk-logos__marks img{height:22px;width:auto}
.tk-logos__word{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:19px;letter-spacing:.06em;color:var(--text-primary)}
.tk-logos__more{font-family:var(--font-label);font-size:var(--fs-xs);color:var(--text-secondary)}

/* ---------- TESTIMONIAL — compact trust strip ---------- */
.tk-quote-section{padding:36px 0;border-bottom:1px solid var(--border-primary)}
.tk-quote{max-width:980px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:28px;text-align:left}
.tk-quote__mark{flex:0 0 auto;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:44px;line-height:.5;color:var(--accent-primary-100);transform:translateY(10px)}
.tk-quote__text{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:19px;line-height:1.4;color:var(--text-primary);margin:0;max-width:58ch}
.tk-quote__by{flex:0 0 auto;display:flex;align-items:center;gap:14px;padding-left:28px;border-left:1px solid var(--border-primary)}
.tk-quote__photo{width:48px;height:48px;border-radius:var(--radius-pill);object-fit:cover}
.tk-quote__meta{display:flex;flex-direction:column;gap:3px}
.tk-quote__name{font-family:var(--font-body);font-weight:var(--fw-medium);font-size:14px;color:var(--text-primary)}
.tk-quote__role{font-family:var(--font-label);font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary)}
.tk-quote__logo{height:20px;width:auto;margin-left:6px;opacity:.85}

/* ---------- FAQ ---------- */
.tk-faq{max-width:860px;margin:0 auto}
.tk-faq__item{border-top:1px solid var(--border-primary)}
.tk-faq__item:last-child{border-bottom:1px solid var(--border-primary)}
.tk-faq__q{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 6px;text-align:left;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:24px;color:var(--text-primary)}
.tk-faq__sign{font-family:var(--font-body);font-size:28px;font-weight:300;line-height:1;color:var(--accent-primary-100);flex:0 0 auto;transition:transform var(--dur-fast) var(--ease-brand)}
.tk-faq__item.open .tk-faq__sign{transform:rotate(45deg)}
.tk-faq__a{overflow:hidden;max-height:0;transition:max-height var(--dur-med) var(--ease-brand)}
.tk-faq__a p{margin:0;padding:0 6px 28px;max-width:700px;font-family:var(--font-body);font-size:16.5px;line-height:1.6;color:var(--text-secondary)}

/* ---------- CTA ---------- */
.tk-cta{background:var(--bg-accent-secondary);text-align:center}
.tk-cta .eyebrow{justify-content:center}
.tk-cta h2{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:56px;line-height:1.08;margin:0 auto 16px;max-width:18ch;text-wrap:balance}
.tk-cta .lead{margin:0 auto 32px;max-width:52ch}
.tk-cta__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .tk-hero{padding:56px 0 72px}
  .tk-hero__grid{grid-template-columns:1fr;gap:40px}
  .tk-hero h1{font-size:44px}
  .tk-bento{grid-template-columns:1fr 1fr}
  .tile-images{grid-column:1 / span 2;grid-row:auto}
  .tile-video{grid-column:1;grid-row:auto}
  .tile-text{grid-column:2;grid-row:auto}
  .tile-workflow{grid-column:1;grid-row:auto}
  .tile-class{grid-column:2;grid-row:auto}
  .tile-models{grid-column:1 / span 2;grid-row:auto}
  .tk-stat__grid{grid-template-columns:1fr;gap:24px}
  .tk-stat__num{font-size:84px}
  .tk-stat h2{font-size:32px}
  .tk-how__steps{grid-template-columns:1fr 1fr}
  .tk-quote{flex-direction:column;gap:14px;text-align:center;align-items:center}
  .tk-quote__mark{display:none}
  .tk-quote__by{border-left:0;padding-left:0}
  .tk-quote__text{font-size:17px}
  .tk-cta h2{font-size:38px}
}
@media (max-width:560px){
  .tk-bento{grid-template-columns:1fr}
  .tile-images,.tile-video,.tile-text,.tile-workflow,.tile-class,.tile-models{grid-column:1}
  .tk-imggrid{grid-template-columns:1fr 1fr}
  .tk-cmp th,.tk-cmp td{padding:13px 10px;font-size:14px}
  .tk-how__steps{grid-template-columns:1fr}
  /* taller frame so the screenshot stays readable next to the browser chrome */
  .tk-inaction__frame{aspect-ratio:4/3}
  .tk-inaction__stage{text-align:center}
  .tk-inaction__listen{position:static;transform:none;margin-top:14px}
}