/* Visual narrative pass for the long-form sales letter. */
.story-grid,
.client-story-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.86fr);
  align-items:center;
  gap:clamp(32px,6vw,82px);
}
.effort-story{grid-template-columns:minmax(360px,.86fr) minmax(0,1fr)}
.story-copy{margin:0!important}
.story-copy h2{margin-bottom:20px}
.story-copy p:last-child{margin-bottom:0}
.story-image{
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid var(--border-strong);
  border-radius:14px;
  background:#050506;
  box-shadow:0 24px 60px rgba(0,0,0,.32);
}
.story-image::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:36%;
  background:linear-gradient(transparent,rgba(5,5,6,.76));
  pointer-events:none;
}
.story-image img{width:100%;height:100%;object-fit:cover}
.story-image-portrait{max-width:460px;justify-self:end;aspect-ratio:4/5}
.story-image-square{aspect-ratio:1;max-width:500px}
.story-image-landscape{aspect-ratio:3/2}
.story-image figcaption{
  position:absolute;
  z-index:1;
  right:18px;
  bottom:15px;
  left:18px;
  color:#fff;
  font:500 11px/1.4 var(--font-mono);
  letter-spacing:.035em;
}
.story-pullquote{
  margin:28px 0;
  padding:17px 19px;
  border-left:3px solid var(--primary-400);
  border-radius:0 8px 8px 0;
  background:var(--surface);
  color:var(--text);
  font:600 clamp(18px,2vw,22px)/1.42 var(--font-display);
  letter-spacing:-.025em;
}
.story-emphasis{
  margin:25px 0!important;
  padding:0 0 0 17px;
  border-left:2px solid var(--primary-400);
  color:var(--text)!important;
  font:600 20px/1.5 var(--font-display)!important;
}

/* The process becomes a recognisable set of actions before the detail. */
.workflow-step{
  position:relative;
  padding:22px 18px 21px!important;
  border:1px solid var(--border)!important;
  border-radius:10px;
  background:var(--surface);
}
.workflow-step .workflow-icon{
  display:grid;
  width:42px;
  height:42px;
  margin:0 0 19px;
  place-items:center;
  border:1px solid rgba(255,91,46,.38);
  border-radius:10px;
  background:rgba(255,91,46,.11);
  color:var(--primary-400);
}
.workflow-icon svg{width:21px;height:21px}
.workflow-step .step-number{margin:0 0 8px!important;color:var(--text-faint)!important;font-size:11px!important}
.workflow-step h3{margin:0!important}

/* Keep the offer examples next to the actual thing a visitor will show. */
.client-story-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start;margin-bottom:42px}
.client-story-grid .use-cases{display:block}
.client-story-grid .use-cases > div{padding:3px 0 22px;border-bottom:1px solid var(--border)}
.client-story-grid .use-cases > div+div{padding-top:22px;border-bottom:0}
.client-story-grid .use-cases h3{margin:0 0 10px;color:var(--text);font-size:20px}
.client-story-grid .use-cases p{margin:0 0 13px;font-size:16px;line-height:1.65}

/* A code-native schedule makes the starter's limits visible at a glance. */
.daily-starter{padding:28px!important}
.daily-starter h3{margin:0 0 18px}
.starter-calendar{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  margin:0 0 22px;
}
.starter-calendar span{
  display:grid;
  min-height:43px;
  place-items:center;
  border:1px solid var(--border-strong);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text-muted);
  font:500 10px/1.2 var(--font-mono);
  letter-spacing:.02em;
}
.starter-calendar span::after{content:"1 sample";display:block;margin-top:3px;color:var(--primary-400);font-size:8px}
.daily-starter .included-list{margin-bottom:18px}

/* Make the guarantee feel like a concrete policy rather than a loose footer. */
.guarantee-panel{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:clamp(28px,5vw,58px);
  max-width:930px!important;
  text-align:left!important;
}
.guarantee-mark{
  position:relative;
  display:grid;
  width:138px;
  height:154px;
  place-items:center;
  color:var(--primary-400);
}
.guarantee-mark svg{position:absolute;width:138px;height:154px;stroke-width:1.25}
.guarantee-mark span{position:relative;margin-top:-7px;font:600 51px/.8 var(--font-display);letter-spacing:-.08em}
.guarantee-panel .chapter-label{margin-bottom:12px!important}
.guarantee-panel h2{max-width:630px}
.guarantee-panel p{max-width:630px!important;margin:16px 0 0!important}

@media (max-width:800px){
  .story-grid,.effort-story,.client-story-grid{grid-template-columns:1fr;gap:28px}
  .effort-story .story-image{order:2}
  .story-image-portrait,.story-image-square{max-width:560px;justify-self:start}
  .client-story-grid{margin-bottom:32px}
  .guarantee-panel{grid-template-columns:1fr;text-align:center!important;justify-items:center}
  .guarantee-panel p{margin-inline:auto!important}
}
@media (max-width:420px){
  .story-image{border-radius:10px}
  .story-pullquote{margin:23px 0;padding:15px 16px;font-size:18px}
  .starter-calendar{gap:5px}
  .starter-calendar span{min-height:39px;font-size:9px}
  .workflow-step{padding:20px 17px!important}
}