/* Workbook landing pages (V3): one template for the six free workbooks. Hero with the real cover over a pastel photo, who it is for, the pages you fill in, previews, related, next step, bottom opt-in. */

/* Hero */
.fl3-hero{position:relative;padding:clamp(16px,2vw,32px) 0 clamp(96px,9vw,150px)}
.fl3-grid{display:grid;grid-template-columns:minmax(0,5.5fr) minmax(0,6.5fr);grid-template-areas:"copy stage" "form stage";grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,90px);align-items:start}
.fl3-grid>.hero-copy{grid-area:copy;max-width:600px;padding-top:clamp(12px,3vw,44px)}
.fl3-grid>.fl3-stage{grid-area:stage;align-self:start;margin-top:clamp(0px,1.5vw,20px)}
.fl3-grid>.fl3-formwrap{grid-area:form;max-width:600px}
.fl3-hero h1{margin-bottom:30px;font-size:clamp(44px,4.6vw,72px)}
.fl3-hero h1 .fl3-sub{display:block;margin-top:.45em;font-size:max(22px,.44em);line-height:1.2;letter-spacing:-.025em}
.fl3-hero .lead{max-width:540px}
.fl3-facts{list-style:none;margin-top:28px}
.fl3-form{position:relative;margin-top:clamp(34px,3.4vw,46px);padding:clamp(24px,2.6vw,34px);border-radius:26px;background:var(--white);box-shadow:var(--shadow-l)}
.fl3-form-kicker{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:11.5px;font-weight:600;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.fl3-form-kicker .icon{width:20px;height:20px}
.fl3-peek{margin-top:24px}

/* Hero stage: pastel photo in an arch, the real cover tilted in a frame */
.fl3-stage{height:clamp(520px,46vw,680px)}
.fl3-stage .blob{inset:14% 0 3% 6%}
.fl3-stage .phero-arch{right:0;top:0;width:64%;height:80%}
.fl3-stage .hero-dots{left:7%;top:5%}
.fl3-cover{position:absolute;left:3%;bottom:4%;z-index:3;width:41%}
.fl3-cover .frame{padding:9px;border-radius:3px;rotate:-6deg}
.fl3-cover .frame::before{z-index:2}
.fl3-cover img{width:100%;aspect-ratio:990/1400;object-fit:cover}
.fl3-stage .note{right:-1%;bottom:4%;--r:4deg;max-width:240px}
.fl3-stage .doodle{left:12%;top:20%;width:110px;height:96px;z-index:4}

/* Who it is for */
.fl3-for-title{display:block;margin-top:34px;font-size:clamp(30px,2.6vw,38px)}
.moment-copy .ticks{margin-top:16px}
.fl3-promise{margin-top:44px;padding:28px 30px 26px;background:var(--butter);border:1px solid #f0ead6;box-shadow:0 10px 26px -14px rgba(70,80,60,.3)}
.fl3-promise b{display:block;margin-bottom:10px;font:400 31px/1 var(--hand);color:var(--green)}
.fl3-promise p{font-size:15.5px;line-height:1.7;color:var(--ink)}

/* The pages you fill in */
.fl3-fill{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(48px,6vw,110px);align-items:start}
.fl3-fill-head h2{font-size:clamp(34px,3.8vw,56px)}
.fl3-fill-intro{max-width:470px;font-size:17px;color:var(--muted)}
.head>p.eyebrow{max-width:none;font-size:11.5px;color:var(--green)}
.fl3-sheets{margin-top:clamp(40px,4vw,60px);max-width:520px}
.fl3-sheets-stack{position:relative;aspect-ratio:1/.92}
.fl3-sheets-stack img{position:absolute;top:2%;width:56%;aspect-ratio:990/1400;border-radius:3px;background:#fff;box-shadow:var(--shadow-l)}
.fl3-sheets-stack .is-back{left:38%;top:6%;rotate:6deg}
.fl3-sheets-stack .is-front{left:4%;z-index:1;rotate:-4deg}
.fl3-sheets figcaption{margin-top:22px;padding-left:4%}
.fl3-pages{list-style:none;border-top:1px solid var(--line-2)}
.fl3-pages li{display:grid;grid-template-columns:76px minmax(0,1fr);column-gap:22px;padding:26px 0 28px;border-bottom:1px solid var(--line-2)}
.fl3-pages li>span{grid-row:span 2;font:italic 400 40px/1 var(--serif);letter-spacing:-.03em;color:#667c62}
.fl3-pages h3{font-size:clamp(21px,1.75vw,25px);line-height:1.25}
.fl3-pages p{margin-top:8px;font-size:15.5px;line-height:1.65;color:var(--muted)}
.fl3-quote{position:relative;max-width:920px;margin:clamp(100px,10vw,160px) auto 0;padding-top:64px;text-align:center}
.fl3-quote>.doodle{left:calc(50% - 60px);top:14px;width:120px;height:24px}
.fl3-quote blockquote{margin:0}
.fl3-quote blockquote p{font:italic 350 clamp(26px,2.5vw,37px)/1.36 var(--serif);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.fl3-quote figcaption{margin-top:26px;font-size:32px}

/* Previews */
.fl3-big{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,38px)}
.fl3-thumbs{list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);max-width:1080px;margin:clamp(48px,5vw,72px) auto 0}
.fl3-page{display:block;color:inherit;text-decoration:none}
a.fl3-page{cursor:zoom-in}
.fl3-page img{width:100%;aspect-ratio:990/1400;border-radius:3px;background:#fff;box-shadow:var(--shadow-m);rotate:var(--r,0deg);transition:rotate .6s var(--ease),translate .6s var(--ease),box-shadow .6s var(--ease)}
.fl3-big li:nth-child(odd) .fl3-page img{--r:-1.4deg}
.fl3-big li:nth-child(even) .fl3-page img{--r:1.2deg}
a.fl3-page:hover img,a.fl3-page:focus-visible img{rotate:0deg;translate:0 -8px;box-shadow:var(--shadow-l)}
.fl3-page small{display:block;margin-top:18px;font-size:13px;line-height:1.45;text-align:center;color:var(--muted)}
.fl3-page small b{font-weight:600;color:var(--ink)}
.fl3-thumbs .fl3-page img{box-shadow:var(--shadow-s)}
.fl3-thumbs .fl3-page small{margin-top:10px;font-size:12px}
.fl3-center{justify-content:center;text-align:center}
.fl3-center .fine{flex-basis:100%}

/* Related */
.fl3-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.fl3-card{display:flex;flex-direction:column;align-items:flex-start;padding:32px 30px 28px;border:1px solid var(--line);border-radius:24px;background:var(--white);color:inherit;text-decoration:none;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.fl3-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-m);border-color:transparent}
.fl3-card-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--sage-2)}
.fl3-card-icon img{width:30px;height:30px}
.fl3-card-tag{margin-top:24px;padding:5px 12px;border-radius:999px;background:var(--sage);font-size:11.5px;font-weight:600;line-height:1.35;color:var(--green)}
.fl3-card h3{margin:16px 0 10px;font-size:clamp(24px,2vw,28px)}
.fl3-card p{font-size:14.5px;line-height:1.68;color:var(--muted)}
.fl3-card-go{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:24px;font-size:14px;font-weight:600;color:var(--green)}
.fl3-card-go::after{content:'→';transition:transform .4s var(--ease)}
.fl3-card:hover .fl3-card-go::after{transform:translateX(6px)}

/* Next step */
.fl3-route{max-width:1060px;margin:0 auto;padding:clamp(34px,4vw,56px) clamp(24px,4vw,60px);border-radius:30px;background:rgba(255,254,250,.72);box-shadow:var(--shadow-s)}
.fl3-route .sequence{margin-top:0;gap:clamp(16px,3vw,40px)}
.fl3-route .seq small{max-width:250px;margin-inline:auto}
.fl3-route .seq.is-here i{background:var(--butter);border-color:#e6dcc0}
.fl3-route .seq.is-main i{background:var(--green);border-color:var(--green);color:#fff}
.fl3-here{display:block;margin-top:10px;font:23px/1 var(--hand);color:var(--green)}
.fl3-alt{margin-top:26px;text-align:center;font-size:14.5px;color:var(--body)}
.fl3-alt a{color:var(--green)}

/* Bottom opt-in */
.fl3-end{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,110px);align-items:center}
.fl3-end-art{position:relative;max-width:560px;aspect-ratio:1/.8;margin-top:clamp(36px,4vw,56px)}
.fl3-end-art .sticker{position:absolute;right:0;top:0;z-index:2;width:62%}
.fl3-end-art .polaroid{position:absolute;left:0;bottom:0;z-index:1;width:52%;--r:-4deg}
.fl3-end-art .polaroid img{aspect-ratio:4/3}
.fl3-optin{padding:clamp(28px,3.4vw,46px);border-radius:28px;background:var(--white);box-shadow:var(--shadow-l)}
.fl3-optin-top{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:24px;margin-bottom:28px}
.fl3-optin-top img{width:86px;border-radius:2px;box-shadow:var(--shadow-m);rotate:-5deg}
.fl3-optin-top .fl3-form-kicker{margin-bottom:8px}
.fl3-optin-top h3{font-size:clamp(25px,2.2vw,32px)}

/* Scope note */
.fl3-bound strong{display:block;margin-bottom:8px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}

@media (min-width:1021px) and (min-height:640px){
  .fl3-grid>.fl3-stage{position:sticky;top:calc(var(--header) + 24px);max-height:calc(100vh - var(--header) - 48px)}
  .fl3-fill-head{position:sticky;top:calc(var(--header) + 32px)}
  .fl3-fill-head .fl3-sheets{max-width:min(520px,max(240px,calc((100vh - var(--header) - 440px) / .92)))}
}
@media (max-width:1180px){
  .fl3-thumbs{grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px}
}
@media (max-width:1020px){
  .fl3-grid{grid-template-columns:1fr;grid-template-areas:"copy" "stage" "form";grid-template-rows:auto}
  .fl3-grid>.hero-copy{max-width:680px}
  .fl3-grid>.fl3-stage{width:100%;max-width:640px;height:clamp(420px,84vw,600px);margin:56px 0 0}
  .fl3-grid>.fl3-formwrap{width:100%;max-width:680px;margin-top:20px}
  .fl3-fill,.fl3-end{grid-template-columns:1fr}
  .fl3-sheets{max-width:460px}
  .fl3-big{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px;margin-inline:auto;row-gap:40px}
  .fl3-rel{grid-template-columns:1fr;max-width:640px;margin-inline:auto}
}
@media (max-width:680px){
  .fl3-hero h1{font-size:40px}
  .fl3-cover{width:46%;left:1%}
  .fl3-stage .note{right:0;bottom:2%;max-width:160px;font-size:21px;padding:12px 15px 11px}
  .fl3-stage .doodle{display:none}
  .fl3-stage .hero-dots{display:none}
  .fl3-form{padding:22px 18px}
  .fl3-for-title{font-size:30px}
  #kinek .moment-art{height:calc(160px + min(600px, 100vw - 2 * var(--gutter)) * .62)}
  #kinek .moment-art .bubble.b3{left:16%;top:0}
  #kinek .moment-art .bubble.b1{left:0;top:50px}
  #kinek .moment-art .bubble.b2{left:auto;right:0;top:100px}
  .fl3-promise{padding:24px 22px 22px}
  .fl3-pages li{grid-template-columns:50px minmax(0,1fr);column-gap:14px;padding:22px 0 24px}
  .fl3-pages li>span{font-size:30px}
  .fl3-quote{padding-top:54px}
  .fl3-quote blockquote p{font-size:22px;line-height:1.42}
  .fl3-quote figcaption{font-size:28px}
  .fl3-big{gap:28px 16px}
  .fl3-thumbs{gap:10px}
  .fl3-thumbs .fl3-page small{margin-top:6px}
  .fl3-card{padding:26px 22px 24px}
  .fl3-route{padding:30px 22px}
  .fl3-route .seq small{max-width:none;margin-inline:0}
  .fl3-here{grid-column:2;margin-top:6px;font-size:21px}
  .fl3-end-art .polaroid{padding:7px 7px 9px}
  .fl3-optin{padding:26px 20px}
  .fl3-optin-top{grid-template-columns:64px minmax(0,1fr);gap:18px}
  .fl3-optin-top img{width:64px}
}