/* Line Sheet funnel. Builds on assets/2lro.css. One goal per page, no nav. */

.f-top{padding:20px var(--gut);display:flex;justify-content:center}
.f-top img{height:40px;width:auto}

.f-hero{padding:56px 0 64px}
.f-hero .grid{align-items:center;gap:44px}
@media (min-width:900px){.f-hero .grid{grid-template-columns:1.25fr 1fr}}
.f-hero h1{font-size:clamp(2rem,5.6vw,3.4rem);color:var(--white)}
.f-hero .lede{color:var(--fog);margin-top:18px}

/* the opt-in box */
.f-form{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;max-width:560px}
.f-form input[type=email]{flex:1 1 240px;min-width:0;border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:15px 20px;font:var(--t-16)/1.2 var(--f-read);color:var(--navy);background:var(--white)}
.f-form input[type=email]:focus{outline:none;border-color:var(--cyan)}
.f-form .btn{flex:0 0 auto}
.f-form .btn .kw{background:var(--cyan);color:var(--navy);border-radius:var(--r-sm);padding:2px 9px;margin-left:2px}
.band-navy .f-form .btn{background:var(--white);color:var(--navy)}
@media (max-width:520px){.f-form .btn{width:100%}}
.f-note{font-size:var(--t-13);margin-top:12px;max-width:52ch}
.band-navy .f-note{color:var(--fog)}
.band-navy .f-note a{color:var(--sky)}
.f-err{display:none;color:var(--coral);font-size:var(--t-13);margin-top:10px}
.f-err.on{display:block}

/* the document cover, drawn in CSS so it never shows a stale PDF */
.f-cover{background:var(--white);color:var(--navy);border-radius:var(--r-md);padding:30px 28px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);max-width:380px;margin:0 auto;transform:rotate(1.5deg)}
.f-cover .bar{height:8px;background:var(--cyan);border-radius:var(--r-pill);width:64px;margin-bottom:18px}
.f-cover .k{font-family:var(--f-head);font-weight:700;font-size:var(--t-13);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-ink)}
.f-cover h3{font-size:var(--t-31);margin:10px 0 12px;color:var(--navy)}
.f-cover p{font-size:15px;color:var(--grey);margin:0 0 16px}
.f-cover ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.f-cover li{font-family:var(--f-head);font-weight:600;font-size:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.f-cover .logo{margin-top:18px;height:26px;width:auto}

.f-stats{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.f-stats{grid-template-columns:repeat(4,1fr)}}
.f-stats .fig{font-family:var(--f-head);font-weight:800;font-size:var(--t-25);color:var(--navy);line-height:1.15}
.f-stats .sub{font-size:var(--t-13)}

.f-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
@media (min-width:860px){.f-list{grid-template-columns:repeat(2,1fr)}}
.f-list li{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px 18px 54px;position:relative}
.f-list li::before{content:"";position:absolute;left:18px;top:20px;width:22px;height:22px;border-radius:50%;
  background:var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2A38' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.f-list b{font-family:var(--f-head);display:block;margin-bottom:4px}
.f-list span{color:var(--grey);font-size:15px}

.f-beats{display:grid;gap:18px}
@media (min-width:860px){.f-beats{grid-template-columns:repeat(2,1fr)}}
.f-beats .panel h4{margin:8px 0 10px}

.f-person{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.f-person img{width:120px;height:120px;border-radius:50%;object-fit:cover;background:var(--frost)}
.f-person div{flex:1 1 280px}

.f-foot{padding:28px 0 40px;font-size:var(--t-13);color:var(--grey);background:var(--white)}
.f-foot a{color:var(--grey)}

/* thank-you page */
.f-steps{display:grid;gap:18px;margin-top:34px}
.f-step{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px}
.f-step .n{font-family:var(--f-head);font-weight:800;font-size:var(--t-13);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-ink)}
.f-step h2{font-size:var(--t-31);margin:8px 0 10px}
.f-choice{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.f-choice button{font:600 var(--t-16)/1.3 var(--f-head);color:var(--navy);background:var(--frost);border:1.5px solid var(--frost);
  border-radius:var(--r-pill);padding:12px 20px;cursor:pointer;text-align:left}
.f-choice button[aria-pressed="true"]{background:var(--mist);border-color:var(--cyan)}
.f-ok{display:none;background:var(--mist);border-radius:var(--r-md);padding:14px 16px;margin-top:14px}
.f-ok.on{display:block}
.hidden{display:none !important}

/* cost check */
.f-calc{display:grid;gap:10px;margin-top:26px;max-width:560px}
.f-calc .row{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){.f-calc .row{grid-template-columns:1fr 1fr}}
.f-calc label{display:block;font-family:var(--f-head);font-weight:600;font-size:var(--t-13);color:var(--fog);margin-bottom:6px}
.f-calc input,.f-calc select{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;
  font:var(--t-16)/1.2 var(--f-read);color:var(--navy);background:var(--white)}
.f-calc .money{display:flex;gap:8px}
.f-calc .money select{flex:0 0 92px}
.f-calc input:focus,.f-calc select:focus{outline:none;border-color:var(--cyan)}
.f-calc .btn{margin-top:6px}
.f-calc .btn .kw{background:var(--cyan);color:var(--navy);border-radius:var(--r-sm);padding:2px 9px;margin-left:2px}
.band-navy .f-calc .btn{background:var(--white);color:var(--navy)}
.f-result{background:var(--navy);color:var(--white);border-radius:var(--r-lg);padding:30px 28px}
.f-result .k{font-family:var(--f-head);font-weight:700;font-size:var(--t-13);letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.f-result .big{font-family:var(--f-head);font-weight:800;font-size:clamp(1.9rem,6vw,2.8rem);line-height:1.1;margin:8px 0 6px;color:var(--white)}
.f-result p{color:var(--fog);margin:0}
.f-result .tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.f-result .tile{background:rgba(255,255,255,.06);border-radius:var(--r-md);padding:14px 16px}
.f-result .tile b{display:block;font-family:var(--f-head);font-size:var(--t-25);color:var(--white)}
.f-result .tile span{font-size:var(--t-13);color:var(--fog)}
.f-result .fine{font-size:var(--t-13);margin-top:16px}
/* the real Line Sheet cover, fanned over page 2 */
.f-preview{margin:0;max-width:440px;margin-inline:auto}
.f-preview img{width:100%;height:auto;display:block;transform:rotate(-1deg)}
/* example of the cost check result, on the opt-in page (DotCom Secrets #8: show what they get) */
.f-example{position:relative;background:var(--white);color:var(--navy);border-radius:var(--r-lg);padding:30px 28px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);max-width:460px;margin-inline:auto;transform:rotate(1deg)}
.f-example .tag{position:absolute;top:-13px;right:22px;background:var(--cyan);color:var(--navy);font-family:var(--f-head);font-weight:800;
  font-size:var(--t-13);letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill)}
.f-example .k{font-family:var(--f-head);font-weight:700;font-size:var(--t-13);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-ink)}
.f-example .big{font-family:var(--f-head);font-weight:800;font-size:clamp(1.7rem,4.6vw,2.4rem);line-height:1.1;margin:8px 0 6px}
.f-example p{color:var(--grey);margin:0;font-size:15px}
.f-example .tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.f-example .tile{background:var(--frost);border-radius:var(--r-md);padding:14px 16px}
.f-example .tile b{display:block;font-family:var(--f-head);font-size:var(--t-25)}
.f-example .tile span{font-size:var(--t-13);color:var(--grey)}
.f-example .fine{font-size:var(--t-13);margin-top:14px}