/* Kennedy version of the landing page. Loads after site.css and reuses its tokens and type. */

/* Headline block: flag, headline, extended-headline lede */
.k-head{padding-block:44px 8px;text-align:center}
.k-head h1{max-width:900px;margin-inline:auto}
.k-head .lede{max-width:760px;margin-inline:auto}
.k-flag{display:inline-block;font-style:italic;font-size:27px;color:var(--accent);border-bottom:1px solid var(--accent);margin:0 0 18px;padding-bottom:2px}

/* The offer: book + form card */
.k-offer{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;padding-block:20px 60px}
.k-book{margin:0}
.k-book img{display:block;width:100%;height:auto}
.k-book figcaption{font-size:17px;line-height:1.4;color:var(--muted);text-align:center;max-width:380px;margin:-6px auto 0}
.k-book figcaption strong{color:var(--ink);font-weight:400;font-style:italic}

.k-card{background:#fffdf9;border:1px solid var(--line);border-top:3px solid var(--green);border-radius:4px;padding:30px 30px 24px;box-shadow:0 1px 3px rgba(38,51,46,.07)}
.k-card h2{font-size:34px}
.k-gets{list-style:none;padding:0;margin:16px 0 4px;font-size:19px;line-height:1.45}
.k-gets li{padding-left:28px;position:relative;margin-bottom:4px}
.k-gets li::before{content:"✓";position:absolute;left:2px;color:var(--green);font-family:Arial,sans-serif;font-size:16px;top:2px}
.k-card form{margin-top:18px}
.k-addr-label{font:12px Arial,sans-serif;margin:14px 0 8px}

.k-submit{display:flex;align-items:center;gap:14px;margin-top:6px}
.k-note{display:flex;align-items:center;gap:6px;margin:0;font-style:italic;font-size:21px;line-height:1.1;color:var(--accent);transform:rotate(-4deg);transform-origin:left center}
.k-note svg{flex:none;margin-top:-14px}

/* The letter */
.k-letter{max-width:700px;padding-block:58px 30px;border-top:1px solid var(--line)}
.k-letter sup a{color:var(--green);text-decoration:none;font-size:.75em}
.k-q{font-style:italic;font-size:23px;margin:0 0 1em;padding-left:1.4em}
.k-q li{margin-bottom:4px}

/* Fascinations */
.k-inside{max-width:820px;padding-block:40px 50px}
.k-inside .eyebrow{margin-bottom:15px}
.k-bullets{list-style:none;padding:0;margin:28px 0 0}
.k-bullets li{position:relative;padding:0 0 0 34px;margin-bottom:18px;line-height:1.45}
.k-bullets li::before{content:"";position:absolute;left:4px;top:.55em;width:12px;height:12px;border:1.5px solid var(--green);transform:rotate(45deg)}
.k-bullets strong,.k-letter strong,.k-gets strong{font-weight:600}

/* Bonus, set off like a coupon */
.k-bonus{max-width:820px;border:2px dashed var(--accent);border-radius:4px;padding:30px 34px;margin-block:10px 60px;background:#fbf6f2}
.k-bonus h2{font-size:36px;margin-bottom:14px}
.k-bonus p:last-child{margin:0}
.k-tag{font:10px/1.6 Arial,sans-serif;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}

/* Who it's for */
.k-fit{border-top:1px solid var(--line);padding-block:56px}
.k-fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:30px}
.k-fit h3{font-size:25px;margin-bottom:12px}
.k-fit ul{margin:0;padding-left:1.1em}
.k-fit li{margin-bottom:8px;font-size:19px}
.k-fit-grid>div+div h3{color:var(--muted)}
.k-fit-grid>div+div li{color:var(--muted)}

.k-ps{max-width:620px;margin:30px auto 0;text-align:left;font-size:19px}
.k-sources{padding-block:26px 6px;font:12px/1.55 Arial,sans-serif;color:var(--muted)}
.k-sources p{margin-bottom:8px}

@media(max-width:850px){.k-offer{grid-template-columns:1fr;gap:20px}.k-book{max-width:420px;margin-inline:auto}.k-fit-grid{gap:28px}}
@media(max-width:640px){.k-head{padding-block:30px 0}.k-flag{font-size:23px}.k-card{padding:22px 18px}.k-submit{flex-direction:column;align-items:stretch}.k-note{align-self:center;transform:rotate(-3deg)}.k-note svg{display:none}.k-bonus{padding:24px 20px}.k-fit-grid{grid-template-columns:1fr}}

/* Letter greeting, qualifier note, selects */
.k-from-letter{font:13px/1.5 Arial,sans-serif;color:var(--green);background:#e9ede5;border-radius:3px;display:block;width:fit-content;padding:7px 14px;margin:0 auto 22px}
.k-who{font-size:16px;line-height:1.4;color:var(--muted);font-style:italic;margin:10px 0 0}
select{width:100%;background:#fffdf9;border:1px solid #929c92;border-radius:3px;padding:14px 12px;font:16px Arial,sans-serif;color:var(--ink);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
select:invalid{color:#757b75}
select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
