/* /workshop: desktop above 1100px, phone at 1100px and below. */
@keyframes rowin{0%,6%{opacity:0;transform:translateX(-10px)}14%,88%{opacity:1;transform:none}100%{opacity:0}}
.w1{animation:rowin 9s ease-in-out infinite .4s}.w2{animation:rowin 9s ease-in-out infinite .8s}.w3{animation:rowin 9s ease-in-out infinite 1.2s}.w4{animation:rowin 9s ease-in-out infinite 1.6s}
.eyebrow img{flex-shrink:0}

.in-hero{padding:80px var(--gutter) 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.in-copy{grid-column:span 7;display:flex;flex-direction:column;gap:22px}
.in-hero h1{font-size:clamp(48px,5vw,72px);line-height:1.02}
.in-hero .line{display:block}
.in-hero .ul{display:inline-block}
.in-hero .lede{max-width:620px}
.in-hero .btn{align-self:flex-start;padding:16px 26px}
.in-visual{--x:clamp(-42px,calc(100% - 391px),30px);grid-column:9/span 4;position:relative;height:460px}
.paper{position:absolute;left:var(--x);top:10px;width:330px;height:400px;transform:rotate(3deg);border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px rgba(16,25,46,.2);padding:28px;display:flex;flex-direction:column;gap:12px}
.paper-logo{height:30px;width:auto;align-self:flex-start}
.paper-bar{height:3px;width:48px;background:var(--orange)}
.paper-title{font-family:Montserrat,sans-serif;font-size:28px;font-weight:800;line-height:1.05}
.paper-rows{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.paper-rows>div{padding:10px 12px;border-radius:6px;background:var(--mist);font-size:14px;display:flex;justify-content:space-between}
.paper-rows b{font-family:Montserrat,sans-serif}
.paper-rows .free{color:var(--blue)}
.in-visual .lock{left:calc(var(--x) - 30px);top:350px;width:72px;height:72px;border-radius:36px}
.in-visual .lock img{width:42px;height:42px}

.answer{padding-top:56px}
.stack{display:flex;flex-direction:column;gap:16px}
.t3{margin-top:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.t3 .tcard{padding:22px}
.panel{border:1px solid var(--line);border-radius:12px;padding:48px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.panel-l{grid-column:span 6;display:flex;flex-direction:column;gap:18px}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.split-l{grid-column:span 5;display:flex;flex-direction:column;gap:18px}
.split-r{grid-column:7/span 6;padding-top:34px}
.dots{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.dots li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.55}
.dots li::before{content:"";width:9px;height:9px;border-radius:5px;background:var(--orange);margin-top:9px;flex-shrink:0}

#notify{scroll-margin-top:20px}
.talk{align-items:center}
.talk .form-card{grid-column:8/span 5;border:0;border-radius:0;padding:0;background:none;box-shadow:none}
.talk .form-card button.btn{padding:16px}

.qa{grid-template-columns:repeat(12,minmax(0,1fr))}
.qa-head{grid-column:span 4}
.qa-list{grid-column:6/span 7}
.qa p{margin-top:10px}

@media (max-width:1100px){
  .in-hero{padding-top:32px;display:flex;flex-direction:column;align-items:stretch}
  .in-copy{gap:14px}
  .in-hero h1{font-size:min(40px,10.26vw);line-height:1.04}
  .in-hero .btn{align-self:stretch;padding:15px;font-size:18px;animation:none}
  .answer{padding-top:32px}
  .answer p{font-size:17px}
  .stack{gap:14px}
  .t3{margin-top:0;grid-template-columns:1fr;gap:12px}
  .t3 .tcard{padding:16px;gap:8px}
  .panel{padding:20px;display:flex;flex-direction:column;gap:14px}
  .panel-l{gap:14px}
  .split{display:flex;flex-direction:column;gap:14px}
  .split-l{gap:14px}
  .split-r{padding-top:0}
  .dots li{font-size:16px}
  .talk .form-card button.btn{font-size:18px}
  .qa p{font-size:15px;line-height:1.6}
}