/* ------------------------------------------------------------------
   CV Pilot marketing page.
   Warm paper page, near black oversized headlines, thin rules, real CV
   sheets fanned and tilted, orange used only as a marker pen highlight.
   Mobile first: everything below 768px is the base, then 768 and 1100.

   New file name on purpose. The site is uploaded one file at a time, so
   a new name means this stylesheet can never meet the old markup, and
   the old cv-pilot/styles.css can never meet this one.
   ------------------------------------------------------------------ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

/* tokens ------------------------------------------------------------ */
body{
  --orange:#FF6600;
  --orange-ink:#A33F00;      /* orange dark enough to be read as text on paper */
  --on-orange:#1B1205;       /* near black on the orange fill, 7:1 */
  --deep:#17161A;            /* the two dark panels */
  --page:#FAF6F0;
  --ink:#17161A;
  --ink2:#5d574f;
  --rule:#ded5c8;
  --shadow:0 20px 44px rgba(60,44,24,.16);
  --gut:16px;
}

body{
  background:var(--page);
  color:var(--ink);
  font-family:'DM Sans',Verdana,sans-serif;
  font-size:16px;
  line-height:1.62;
  overflow-wrap:break-word;
}
h1,h2,h3,h4{font-family:'Bricolage Grotesque','DM Sans',Verdana,sans-serif;font-weight:800;margin:0;line-height:1.0;letter-spacing:-.025em}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}

/* Focus: near black on paper, warm orange on the two dark panels, so the
   ring always has plenty of contrast against what is behind it. */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.promise :focus-visible,.plan.lead-plan :focus-visible{outline-color:#FFB27A}

.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.sec{padding:52px 0;border-top:1px solid var(--rule)}
section[id],main[id]{scroll-margin-top:78px}
section[id]:focus{outline:none}

/* type scale --------------------------------------------------------- */
.h1{font-size:clamp(42px,11.9vw,82px);line-height:.94;letter-spacing:-.035em}
.h2{font-size:clamp(30px,8.2vw,50px);line-height:1.0;letter-spacing:-.03em}
.h3{font-size:clamp(20px,5vw,26px);line-height:1.12;letter-spacing:-.02em}
.lead{font-size:17px;line-height:1.55;color:var(--ink2)}
.body-l{font-size:16px;line-height:1.65;color:var(--ink2)}
.fine{font-size:13.5px;line-height:1.5;color:var(--ink2)}

/* the marked phrase: a marker pen stripe behind the words */
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark::after{
  content:"";position:absolute;pointer-events:none;
  inset:.22em -.09em .05em;background:var(--orange);
  mix-blend-mode:multiply;transform:rotate(-.9deg)
}

/* buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 24px;border:0;border-radius:6px;
  background:var(--orange);color:var(--on-orange);
  font-family:'DM Sans',sans-serif;font-size:17px;font-weight:700;
  text-decoration:none;text-align:center;transition:transform .12s ease
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.big{min-height:60px;font-size:19px;padding:0 30px}
.btn.block{display:flex;width:100%}
.btn.line{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.line:hover{background:var(--ink);color:var(--page)}


/* header -------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--page);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.brand{display:inline-flex;align-items:center;min-height:48px;padding-right:4px}
.brand img{width:126px;height:38px}
.hdr .spacer{flex:1}
.menu{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 4px;
  background:none;border:0;font:700 15px/1 'DM Sans',sans-serif;color:var(--ink);cursor:pointer
}
.bars{display:inline-flex;flex-direction:column;gap:3.5px;width:18px}
.bars i{display:block;height:2.5px;background:var(--ink);border-radius:2px}
.nav{display:none}
.hdr.open .nav{
  display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;
  background:var(--page);border-bottom:1px solid var(--rule);padding:6px var(--gut) 18px
}
.nav a{
  display:flex;align-items:center;min-height:50px;
  font-size:16px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--rule)
}
.nav .btn{margin-top:14px}
.hdr-cta{display:none}

/* hero ----------------------------------------------------------------- */
.hero{padding:40px 0 0;overflow:hidden}
.hero .lead{margin-top:20px;max-width:46ch;font-size:17.5px}
.hero-acts{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:26px}
.hero-acts .btn{width:100%}
.hero-price{margin:22px 0 0;font-size:18px;line-height:1.4;font-weight:600;color:var(--ink)}
.hero-price strong{font-weight:800;background:var(--orange);padding:1px 6px;white-space:nowrap}


/* Hero video: a picture with a play button until it is tapped (cv-pilot/video.js
   then loads the YouTube player); at the end the player is removed and the end
   card shows instead of YouTube's suggested videos. */
.vid-hero{margin:34px 0 46px}
.vid{position:relative;aspect-ratio:16/9;width:100%;background:var(--deep);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.vid-cover{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:var(--deep);cursor:pointer}
.vid-cover img{display:block;width:100%;height:100%;object-fit:cover}
.vid-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,22,26,0) 55%,rgba(23,22,26,.45))}
.vid-play{
  position:absolute;left:50%;top:50%;z-index:1;width:76px;height:76px;margin:-38px 0 0 -38px;
  border-radius:50%;background:var(--orange);box-shadow:0 10px 28px rgba(0,0,0,.3);transition:transform .15s ease
}
.vid-play::before{
  content:"";position:absolute;left:31px;top:24px;
  border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--on-orange)
}
.vid-cover:hover .vid-play{transform:scale(1.06)}
.vid-cover:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.vid-len{
  position:absolute;right:12px;bottom:12px;z-index:1;padding:3px 9px;border-radius:5px;
  background:rgba(23,22,26,.82);color:#fff;font-size:13px;font-weight:700;line-height:1.4
}
.vid-frame,.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2}
.vid.is-on .vid-cover{visibility:hidden}
.vid-end{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:20px;text-align:center;background:rgba(23,22,26,.94);color:#fff
}
.vid-end[hidden]{display:none}
.vid-end p{font-family:'Bricolage Grotesque','DM Sans',sans-serif;font-weight:800;font-size:clamp(20px,4.6vw,30px);line-height:1.1;letter-spacing:-.02em;max-width:18ch}
.vid-go{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:6px;
  background:var(--orange);color:var(--on-orange);font-size:17px;font-weight:700;text-decoration:none
}
.vid-again{min-height:44px;padding:0 10px;background:none;border:0;color:#fff;opacity:.8;font:500 15px/1 'DM Sans',sans-serif;text-decoration:underline;cursor:pointer}
.vid-again:hover{opacity:1}

/* product mock-ups ------------------------------------------------------ */
.ui{
  background:#fff;border:1px solid var(--rule);border-radius:12px;padding:16px;
  font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.5;color:#22242A;text-align:left
}
.ui-h{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.ui-p{font-size:14px;line-height:1.5;color:#22242A;margin-top:8px}
.ui-sub{font-size:13.5px;color:#6b7280;line-height:1.45;margin-top:6px}
.ui-f{display:block;font-size:12.5px;font-weight:700;margin:13px 0 6px}
.ui-in{
  border:1.5px solid #cfd4d8;border-radius:10px;padding:11px 12px;
  min-height:46px;font-size:14.5px;color:#22242A;background:#fff
}
.ui-in.ph{color:#8e949d}
.ui-in.tall{min-height:92px}
.ui-seg{display:flex;background:#eceff1;border-radius:10px;padding:4px;gap:4px;margin-top:8px}
.ui-seg span{
  flex:1;border-radius:8px;padding:9px 4px;text-align:center;
  font-size:13px;font-weight:700;color:#4b5563
}
.ui-seg span.on{background:#fff;color:#22242A;box-shadow:0 1px 2px rgba(0,0,0,.13)}
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 16px;border-radius:9px;
  background:var(--orange);color:var(--on-orange);font-size:14.5px;font-weight:700
}
.ui-btn.block{display:flex;width:100%;margin-top:14px}
.ui-btn.dark{background:#22242A;color:#fff}
.ui-btn.line{background:#fff;color:#22242A;border:1.5px solid rgba(34,36,42,.35)}
.ui-btn.sm{min-height:38px;font-size:13.5px;padding:0 13px;border-radius:8px}
.ui-link{font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ui-fine{font-size:12.5px;color:#6b7280;margin-top:9px;text-align:center}
.ui-step{display:flex;align-items:center;gap:9px;margin-top:16px}
.ui-step b{
  width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:#22242A;color:#fff;
  font-size:12.5px;display:flex;align-items:center;justify-content:center
}
.ui-step strong{font-size:14.5px}
.ui-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.ui-tag{
  display:inline-block;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  background:#fff1e7;color:#b34700
}
.ui-meta{font-size:13px;color:#6b7280;margin-top:4px}
.ui-meta i{font-style:normal}
.ui-meta i+i::before{content:"\00b7";margin:0 6px;color:#9aa0a8}
.ui-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.ui-pills span{
  border:1.5px solid #cfd4d8;border-radius:999px;padding:8px 13px;
  font-size:13.5px;font-weight:700;background:#fff
}
.ui-toast{
  background:#22242A;color:#fff;border-radius:10px;padding:12px 14px;
  font-size:13.5px;display:flex;justify-content:space-between;gap:14px;align-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.28)
}
.ui-toast em{font-style:normal;color:#ffb27a;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ui-acc{border:1px solid var(--rule);border-radius:12px;background:#fff;overflow:hidden;margin-top:9px}
.ui-acc>div.hd{display:flex;align-items:center;gap:10px;padding:13px 15px;min-height:54px}
.ui-acc .hd strong{flex:1;font-size:14.5px;font-weight:700;line-height:1.25}
.ui-acc .hd strong small{display:block;font-weight:400;color:#6b7280;font-size:12.5px}
.ui-acc .hd em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--orange-ink)}
.ui-acc .bd{padding:0 15px 15px;border-top:1px solid #e3e6e8}
.ui-acc.open{border-color:#c9ced3}
.ui-chg{font-size:13.5px;font-weight:700}
.ui-list{margin:9px 0 0;padding-left:17px;font-size:13.5px;color:#374151;line-height:1.45}
.ui-list li{padding:2px 0}
.ui-tpl{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}
.ui-tpl figure{margin:0;border:2px solid #e3e6e8;border-radius:10px;padding:5px 5px 7px;background:#fff;text-align:center}
.ui-tpl figure.on{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,102,0,.2)}
.ui-tpl .mini{
  display:block;aspect-ratio:3/4;border:1px solid #e3e6e8;border-radius:5px;
  background:#fff;padding:7px 6px;margin-bottom:5px;overflow:hidden
}
.ui-tpl .mini i{display:block;height:4px;border-radius:2px;background:#e9edef;margin-top:5px}
.ui-tpl .mini i:first-child{width:62%;height:5px;margin:0 auto 7px;background:#b9bfc6}
.ui-tpl figcaption{font-size:12.5px;font-weight:700}
.ui-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.ui-chips span{background:#eef1f3;border-radius:999px;padding:7px 12px;font-size:13.5px}

/* section heads --------------------------------------------------------- */
.head p{margin-top:16px;max-width:54ch}
.head p+p{margin-top:16px}

/* how it works ----------------------------------------------------------- */
.steps{margin-top:34px;display:flex;flex-direction:column;gap:38px}
.step-n{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:28px;line-height:1;letter-spacing:-.03em;color:var(--ink)
}
.step h3{margin-top:10px}
.step p{margin-top:12px;color:var(--ink2);max-width:46ch}
.step .shot{margin-top:20px}

/* you stay in control ----------------------------------------------------- */
.claims{margin-top:34px;display:flex;flex-direction:column;gap:0}
.claim{padding:22px 0;border-top:1px solid var(--rule)}
.claim:last-child{border-bottom:1px solid var(--rule)}
.claim h3{font-size:19px;letter-spacing:-.015em;line-height:1.2}
.claim p{margin-top:9px;color:var(--ink2);font-size:15.5px}
.promise{margin-top:30px;padding:26px 22px;border-radius:14px;background:var(--deep);color:#fff}
.promise .h3{color:#fff;max-width:18ch}
.promise p{margin-top:14px;color:#b7bdc8;font-size:15.5px;max-width:50ch}
.promise strong{color:#fff}

/* pricing -------------------------------------------------------------------- */
.plans{margin-top:32px;display:flex;flex-direction:column;gap:18px}
.plan{border:2px solid var(--ink);border-radius:14px;padding:24px 20px;background:var(--page)}
.plan.lead-plan{background:var(--deep);color:#fff;border-color:var(--deep)}
.plan-name{font-size:15px;font-weight:700;letter-spacing:.01em}
.plan-tag{
  display:inline-block;margin-left:10px;padding:3px 10px;border-radius:999px;
  background:var(--orange);color:var(--on-orange);font-size:12px;font-weight:700;letter-spacing:.01em
}
.plan-price{margin-top:10px}
.plan-price b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(48px,13vw,58px);font-weight:800;letter-spacing:-.04em;line-height:.9}
.plan-price i{display:block;margin-top:7px;font-style:normal;font-size:15px;font-weight:500;color:var(--ink2)}
.plan.lead-plan .plan-price i{color:#b7bdc8}
.plan-each{margin-top:10px;font-size:16px;font-weight:700}
.plan.lead-plan .plan-each{color:#fff}
.plan-each em{font-style:normal;color:var(--orange-ink)}
.plan.lead-plan .plan-each em{color:#FF8A33}
.plan-valid{margin-top:6px;font-size:14px;color:var(--ink2)}
.plan.lead-plan .plan-valid{color:#b7bdc8}
.plan .btn{margin-top:20px;width:100%}
.incl{margin-top:26px;padding-top:22px;border-top:2px solid var(--ink)}
.incl h3{font-size:18px}
.incl ul{list-style:none;margin:14px 0 0;padding:0}
.incl li{padding:11px 0;border-top:1px solid var(--rule);font-size:15.5px}
.incl li:first-child{border-top:0}
.pricing-terms{margin-top:22px;font-size:14.5px;color:var(--ink2)}

/* the panel a site without a CV Pilot price shows instead of the plans */
.no-price{margin-top:32px;border:2px solid var(--ink);border-radius:14px;padding:26px 22px}
.no-price p{font-size:17px;max-width:44ch}
.no-price .btn{margin-top:22px}

/* faq --------------------------------------------------------------------------- */
.faq{margin-top:28px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:62px;padding:12px 0;cursor:pointer;
  font-size:17px;font-weight:700;letter-spacing:-.01em;list-style:none
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 14px;width:14px;height:14px;
  border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
  transform:rotate(45deg) translate(-3px,-3px)
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq .a{padding:0 0 20px;color:var(--ink2);font-size:15.5px;max-width:62ch}

/* closing band -------------------------------------------------------------------- */
.cta{padding:58px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cta .h2{max-width:16ch}
.cta p{margin-top:18px;color:var(--ink2);font-size:17px;max-width:44ch}
.cta .btn{margin-top:26px;width:100%}
.cta .fine{margin-top:16px}

/* footer ---------------------------------------------------------------------------- */
.ft{padding:40px 0 48px;border-top:1px solid var(--rule)}
.ft img{width:126px;height:38px}
.ft nav{display:flex;flex-wrap:wrap;gap:0 26px;margin-top:10px}
.ft nav a{display:inline-flex;align-items:center;min-height:46px;font-size:15.5px;font-weight:500;text-decoration:none;border-bottom:1px solid transparent}
.ft nav a:hover{border-bottom-color:var(--ink)}
.ft h2{font-size:14px;font-weight:700;font-family:'DM Sans',sans-serif;letter-spacing:.01em;margin-top:22px;color:var(--ink2)}
.ft .fine{margin-top:16px}

/* 768 ---------------------------------------------------------------------------------- */
@media (min-width:768px){
  body{--gut:32px}
  .sec{padding:80px 0}
  .menu{display:none}
  .nav{display:flex;align-items:center;gap:28px}
  .nav a{min-height:44px;border:0;font-size:15.5px}
  .nav a:not(.btn):hover{border-bottom:2px solid var(--orange)}
  .nav .btn{display:none}
  .hdr-cta{display:inline-flex;min-height:46px;font-size:15.5px;padding:0 18px}
  .hdr .wrap{min-height:74px;gap:26px}

  .hero{padding:64px 0 0}
  .hero .h1{max-width:13ch}
  .head .h2{max-width:21ch}
  .hero-acts{flex-direction:row;align-items:center;gap:14px}
  .hero-acts .btn{width:auto}

  .vid-hero{margin:46px 0 64px}

  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .step-n{font-size:36px}
  .claims{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
  .claim{border-top:1px solid var(--rule)}
  .claim:last-child{border-bottom:0}
  .claim:nth-child(3),.claim:nth-child(4){border-bottom:1px solid var(--rule)}
  .promise{padding:40px 36px}
  .plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .plan{padding:30px 26px}
  .no-price{padding:40px 36px}
  .no-price .btn{width:auto}
  .cta{padding:88px 0}
  .cta .btn{width:auto}
  .ft{padding:52px 0 60px}
}

/* 1100 ------------------------------------------------------------------------------------ */
@media (min-width:1100px){
  .sec{padding:104px 0}
  .hero{padding:78px 0 0}
  .hero-in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:56px;align-items:start}
  .hero-copy{padding-bottom:26px}
  .vid-hero{margin:8px 0 78px}
  .hero .lead{max-width:42ch}
  .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
  .two .head .h2{max-width:14ch}
  .promise{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:start;padding:52px 48px}
  .promise .h3{font-size:34px;max-width:none}
  .promise p{margin-top:0;font-size:16.5px;max-width:none}
  .claims{gap:0 56px}
  .pricing-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:start}
  .plans{margin-top:0;gap:26px}
  .incl{margin-top:0;padding-top:0;border-top:0}
  .faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
  .faq-in .head{position:sticky;top:104px}
  .faq{margin-top:0}
  .cta-in{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
  .cta .btn{margin-top:0;flex:0 0 auto}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .btn:hover{transform:none}
}

/* product pictures ---------------------------------------------------- */
/* Everything inside .ui (and the .ui-toast beside it) is a PICTURE of CV
   Pilot, not a control. Nothing in it may look tappable: no orange or dark
   fills, no underlines, no pointer. Orange is kept for the page's own real
   buttons and links. */
.ui,.ui-toast{pointer-events:none;-webkit-user-select:none;user-select:none;cursor:default}
.ui .ui-btn,.ui .ui-btn.dark,.ui .ui-btn.line{
  background:#eef0f2;color:#7b828b;border:0;box-shadow:none;font-weight:600;min-height:38px
}
.ui .ui-btn.sm{min-height:32px}
.ui .ui-link,.ui-toast em,.ui .ui-acc .hd em{text-decoration:none;color:#9aa0a8;font-weight:600}
.ui .ui-pills span,.ui .ui-chips span{border-color:#e6e9ec;color:#7b828b;font-weight:600;background:#fafbfb}
.ui .ui-seg span{font-weight:600;color:#7b828b}
.ui .ui-seg span.on{box-shadow:none;color:#4b5563}
.ui .ui-tpl figure.on{border-color:#c9ced3;box-shadow:none}
.ui .ui-step b{background:#9aa0a8}
.ui-toast{background:#4a4e57;box-shadow:0 8px 20px rgba(0,0,0,.16)}

/* Free trial and free month (growth). Used only when the page renders its
   growth sections (site priced and growth tables in place). Ported from the
   approved sample docs/superpowers/samples/2026-09-24-cvp-growth/assets/landing-growth.css. */
/* invite banner, shown only when the visitor came in on a valid /r/CODE link */
.invite-banner{background:var(--deep);color:#fff}
.invite-banner .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:12px;padding-bottom:12px}
.invite-banner p{flex:1 1 240px;font-size:15.5px;line-height:1.45}
.invite-banner strong{color:#fff}
.invite-banner a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:6px;
  background:var(--orange);color:var(--on-orange);font-weight:700;font-size:15px;text-decoration:none
}
/* the free trial line under the H1: big, bold, marker on "free" */
.free-line{margin-top:18px;font-family:'Bricolage Grotesque','DM Sans',sans-serif;font-weight:800;font-size:clamp(22px,5.6vw,28px);line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.free-line .mark::after{inset:.18em -.08em .02em}
.hero-after{margin-top:14px;font-size:15px;color:var(--ink2)}

/* hero B: the two match outcomes instead of the CV sheet */
.outcomes{margin:34px auto 0;max-width:460px;display:flex;flex-direction:column;gap:14px;padding-bottom:36px}
.outcomes .ui{box-shadow:var(--shadow)}
.oc-score{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.oc-score b{font-family:'Bricolage Grotesque','DM Sans',sans-serif;font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1}
.oc-good b{color:#1f7a4d}
.oc-poor b{color:#8a2a1f}
.oc-foot{margin-top:12px;padding-top:10px;border-top:1px solid #e3e6e8;font-size:13px;color:#4b5563;font-weight:700}
.outcomes .ui:nth-child(2){margin-left:18px}

/* how it works: four steps */
.steps.four .shot .ui{min-height:0}

/* free month section */
.fm-steps{margin-top:28px;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule)}
.fm-step{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.fm-step .n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:28px;line-height:1;letter-spacing:-.03em;flex:0 0 30px}
.fm-step h3{font-size:19px;letter-spacing:-.015em;line-height:1.2}
.fm-step p{margin-top:6px;color:var(--ink2);font-size:15.5px}
.fm-fine{margin-top:18px;font-size:14px;color:var(--ink2);max-width:56ch}
.fm-acts{margin-top:24px;margin-bottom:32px}
.fm-acts .btn{width:100%}
.ui .ui-bar{height:9px;border-radius:999px;background:#eceff1;margin-top:8px;overflow:hidden}
.ui .ui-bar i{display:block;height:100%;background:#9aa0a8;border-radius:999px}
.ui .ui-ref{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #e3e6e8;font-size:14px}
.ui .ui-ref:first-of-type{margin-top:10px}
.ui .ui-ref em{font-style:normal;color:#6b7280;font-size:13px}

@media (min-width:768px){
  .steps.four{grid-template-columns:1fr 1fr;gap:44px 30px}
  .fm-acts .btn{width:auto}
  .outcomes{max-width:520px}
}
@media (min-width:1100px){
  .outcomes{margin:0;max-width:none;padding:10px 0 60px}
  .outcomes .ui:nth-child(2){margin-left:48px}
}
@media (min-width:1100px){.fm-acts{margin-bottom:0}}
.free-line .nc{display:block;margin-top:6px;font:500 15.5px/1.4 'DM Sans',sans-serif;letter-spacing:0;color:var(--ink2)}

/* No free trial (2026-09-25): the page sells the plans, the free month is
   the second path. Ported from the approved sample
   docs/superpowers/samples/2026-09-25-cvp-notrial/1-marketing.html. */
.hero-free{margin-top:14px;font-size:15px;color:var(--ink2)}
.hero-free a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.pay-first{margin-top:18px;font-size:15px;color:var(--ink2);max-width:62ch}
.pay-first b{color:var(--ink)}
.free-alt{margin-top:22px;font-size:15.5px;color:var(--ink2)}
.free-alt a{color:var(--ink);font-weight:700;text-underline-offset:3px}
@media (max-width:1099px){#fit .ui{margin-top:22px}}
.cta .cta-alt{display:block;margin-top:14px;font-size:15px;font-weight:700;color:inherit;text-underline-offset:3px}
/* Plan and free month buttons stay on one line (fix round 1). */
.plan .btn{padding:0 12px;font-size:16px}
@media (min-width:1100px){.plan{padding:30px 20px}}
@media (max-width:374px){.fm-acts .btn{padding:0 18px;font-size:18px}}

/* Pay before signup (2026-09-25): signed out, the plan buttons are small
   forms posting the plan to /cv-pilot/buy; the button looks like the link. */
.plan-buy{margin:0}
button.btn{cursor:pointer;-webkit-appearance:none;appearance:none}

/* Who it is for (2026-09-30): heading left, numbered rows right, between
   "How CV Pilot works" and the editor section. Approved sample
   docs/superpowers/samples/2026-09-30-cvp-who-for/index.html, layout A. */
.for-intro{margin-top:16px;font-size:17px;font-weight:700;color:var(--ink)}
.for-rows{margin-top:26px;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.for-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--rule)}
.for-row .n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:28px;line-height:1;letter-spacing:-.03em;flex:0 0 30px;color:var(--ink)}
.for-row h3{font-size:19px;letter-spacing:-.015em;line-height:1.2}
.for-row p{margin-top:6px;color:var(--ink2);font-size:15.5px}
@media (min-width:1100px){.for-rows{margin-top:0}#for .two .head .h2{max-width:20ch}}

/* Sticky "Get started" on phones (2026-09-30, approved sample
   docs/superpowers/samples/2026-09-30-cvp-who-for/sticky.html, S1). The
   script adds .on; the bar sits below the screen until then. */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--page);border-top:1px solid var(--rule);
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(60,44,24,.12);
  transform:translateY(110%);transition:transform .22s ease}
.stick.on{transform:none}
.stick .btn{width:100%;min-height:54px;font-size:18px}
body{padding-bottom:84px}
@media (min-width:768px){.stick{display:none}body{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.stick{transition:none}}

/* Comparison table (2026-10-01): CV Pilot against doing it yourself and a
   generic AI tool. Approved sample
   docs/superpowers/samples/2026-09-30-cvp-who-for/compare2.html, C3. One
   table: striped rows with an orange CV Pilot column from 768px up; on
   phones each row becomes a task heading with the three answers in boxes
   under it, and the three column names stay pinned under the site header
   while the table scrolls, so every box always sits under its name. */
.cmp-wrap{margin-top:30px}
.cmp{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:15px 16px}
.cmp thead th{font-size:14px;font-weight:700;color:var(--ink2);padding-top:0;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.cmp thead th.pilot{color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-size:19px;letter-spacing:-.02em;border-top:4px solid var(--orange);padding-top:10px}
.cmp tbody th{font-weight:700;color:var(--ink);padding-left:0}
.cmp td{color:var(--ink2)}
.cmp tbody tr:nth-child(odd){background:#fff}
.cmp td.pilot{color:var(--ink);font-weight:700;box-shadow:inset 3px 0 0 var(--orange)}
.cmp tbody tr:last-child{background:none}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-top:2px solid var(--ink);font-weight:700;color:var(--ink)}
.cmp tbody tr:last-child td.pilot{color:var(--orange-ink);font-family:'Bricolage Grotesque',sans-serif;font-size:19px;letter-spacing:-.02em}
.cmp .none{color:#9a9188}
@media (max-width:767px){
  .cmp,.cmp tbody{display:block}
  .cmp thead{display:block;position:sticky;top:64px;z-index:2;background:var(--page);border-bottom:2px solid var(--ink)}
  .cmp thead tr,.cmp tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:8px}
  .cmp thead th:first-child{display:none}
  .cmp thead th{padding:10px 0 8px;font-size:12.5px;border:0}
  .cmp thead th.pilot{font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--orange-ink);letter-spacing:.01em;border:0;padding-top:10px}
  .cmp tbody tr{background:none;padding-bottom:16px;border-bottom:1px solid var(--rule)}
  .cmp tbody tr:nth-child(odd){background:none}
  .cmp tbody th{grid-column:1/-1;padding:18px 0 8px;font-size:16.5px;letter-spacing:-.01em;line-height:1.25}
  .cmp td{padding:10px;border-radius:10px;background:#fff;border:1px solid var(--rule);font-size:13.5px;line-height:1.4}
  .cmp td.pilot{background:var(--deep);border-color:var(--deep);color:#fff;font-weight:500;box-shadow:none}
  .cmp tbody tr:last-child{border-bottom:0}
  .cmp tbody tr:last-child th{border-top:0;padding-top:22px}
  .cmp tbody tr:last-child td{border:0;background:none;padding:8px 0;font-size:15px;font-weight:700;color:var(--ink)}
  .cmp tbody tr:last-child td.pilot{background:var(--deep);padding:8px 10px;color:#FF8A33;font-family:'DM Sans',sans-serif;font-size:15px;letter-spacing:0}
}