/* ------------------------------------------------------------------
   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);
  --sheet-shadow:0 26px 54px rgba(60,44,24,.24);
  --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 stage: a real CV render with the editor card floating over it.
   On a phone the render is cropped to its readable top and scaled up, so it
   is a CV you can actually read rather than grey texture. */
.stage{position:relative;margin:34px auto 0;max-width:420px;padding-bottom:22px}
.sheets{
  position:relative;height:292px;overflow:hidden;border-radius:4px;
  background:#fff;box-shadow:var(--sheet-shadow)
}
/* The sheets are drawn, not photographed: a plain document standing in for a
   CV, so the page never shows a real template design. */
.sheet{width:100%;aspect-ratio:537/760;background:#fff;border-radius:4px;overflow:hidden}
.sheet-back{display:none}
.doc{padding:26px 24px}
.doc-name{
  font-family:'Bricolage Grotesque','DM Sans',sans-serif;font-weight:800;
  font-size:22px;line-height:1.1;letter-spacing:-.02em;text-align:center;color:#22242A
}
.doc-contact{height:6px;width:54%;margin:12px auto 0;border-radius:3px;background:#dde2e6}
.doc-blk{margin-top:19px}
.doc-h{height:9px;width:26%;border-radius:3px;background:#aab2ba}
.doc-sub{height:7px;width:52%;border-radius:3px;background:#ccd2d8;margin-top:11px}
.doc-l{height:6px;border-radius:3px;background:#e4e9ec;margin-top:7px}
.doc-l.in{margin-left:14px}
.doc-h.w22{width:22%}
.doc-h.w30{width:30%}
.doc-h.w35{width:35%}
.doc-sub.w45{width:45%}
.doc-sub.w60{width:60%}
.doc-l.w45{width:45%}
.doc-l.w60{width:60%}
.doc-l.w75{width:75%}
.doc-l.w90{width:90%}
.stage-card{position:relative;margin:-58px 0 0;width:100%;box-shadow:var(--shadow);z-index:2}
.stage-toast{display:none}

/* 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}

  .stage{max-width:560px;margin-top:46px;padding-bottom:40px}
  .sheets{height:398px;transform:rotate(1.8deg)}
  .stage-card{width:76%;margin:-124px 0 0 -4%}
  .stage-toast{display:flex;position:absolute;right:0;bottom:0;width:60%;max-width:290px;z-index:3}

  .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}
  /* The sheet is taller than the hero on purpose: it is cut off by the
     bottom of the band, so the document reads as carrying on. */
  .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}
  .stage{position:relative;height:494px;margin:0;max-width:none;padding:0}
  .sheets{position:static;height:auto;overflow:visible;background:none;box-shadow:none;transform:none}
  .sheet{position:absolute;top:0;left:0;width:100%}
  .sheet-main{transform:rotate(2.2deg);box-shadow:var(--sheet-shadow)}
  .sheet-back{display:block;left:7%;top:6px;width:96%;transform:rotate(-6deg);z-index:0;box-shadow:var(--sheet-shadow)}
  .doc{padding:34px 30px}
  .doc-name{font-size:27px}
  .doc-contact{margin-top:15px}
  .doc-blk{margin-top:26px}
  .hero .lead{max-width:42ch}
  .stage-card{position:absolute;left:-7%;bottom:50px;width:78%;margin:0;z-index:3}
  .stage-toast{display:flex;position:absolute;right:0;bottom:22px;width:56%;max-width:280px;z-index:4}
  .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
}
/* suitability line in the hero */
.fit-line{margin-top:22px;font-size:15.5px;line-height:1.55;color:var(--ink);max-width:48ch}
.fit-line.boxed{border:1.5px solid var(--rule);border-radius:12px;padding:14px 16px;background:#fff;box-shadow:0 1px 2px rgba(60,44,24,.06)}
/* 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)}