/* The Kent Applied Insights pages: /subscribe/ (sign-up, sample issue, questions), /subscribe/confirm/ and
   /subscribe/unsubscribe/ (one card with states). Layout only; tokens from ka.css. Script: subscribe.js. */

/* ---------- hero: the pitch beside the form ---------- */
.sub-hero{padding-bottom:clamp(48px,7vw,88px)}
.sub-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);grid-template-areas:"head card" "pts card";grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,72px);align-items:start}
.sub-head{grid-area:head}
.sub-pts{grid-area:pts}
.sub-card{grid-area:card}
.sub-head h1{max-width:15ch}
.sub-head .sub{margin-bottom:24px}
.sub-points{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:12px;max-width:52ch}
.sub-points li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;font-size:var(--fs-base);color:var(--body)}
.sub-points svg{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--tint-2);fill:none;stroke:var(--blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:-2px}
.sub-see{margin:0;font:600 var(--fs-ui)/1.4 var(--sans)}

/* the form card */
.sub-card{padding:clamp(20px,3vw,30px);scroll-margin-top:12px}
.sub-card-h{font-size:var(--fs-xl);letter-spacing:-.02em;margin-bottom:16px}
.sub-form{gap:14px}
.sub-form .fld{min-width:0}
.sub-form input:not([type=checkbox]),.sub-form select{min-height:52px}
.sub-form .opt-l{margin-left:6px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--mut)}
.fld-err{margin:6px 0 0;max-width:none;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.fld-err::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--error);vertical-align:1px}
.sub-form [aria-invalid=true]{border-color:var(--error)}

.sub-more{border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.sub-more summary{display:flex;align-items:center;gap:4px;min-height:46px;padding:10px 14px;cursor:pointer;list-style:none;font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);border-radius:12px}
.sub-more summary::-webkit-details-marker{display:none}
.sub-more summary::after{content:"";margin-left:auto;width:8px;height:14px;background:var(--blue);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;rotate:90deg;transition:rotate var(--dur-ui) var(--ease-out)}
.sub-more[open] summary::after{rotate:-90deg}
.sub-more summary:hover{color:var(--ink)}
.sub-more .opts-set{border:0;padding:2px 14px 14px;margin:0;min-width:0}
.sub-err{border:1px solid var(--line-2);border-left:4px solid var(--error);border-radius:12px;padding:12px 14px;font-size:var(--fs-sm);color:var(--body);background:var(--surface)}
.sub-err b{color:var(--ink)}
.sub-send{margin-top:4px}
.sub-fine{margin:2px 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--mut);max-width:none}
.sub-done{text-align:left}
.sub-done:focus,.sub-st-h:focus{outline:none}
.sub-done p{font-size:var(--fs-ui);margin-bottom:10px}
.sub-done-ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--tint-2);margin-bottom:16px}
.sub-done-ico svg{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sub-done-ico.is-ok svg{stroke-width:2.6}
.sub-done-acts{margin-top:18px}

/* ---------- the sample issue ---------- */
.sub-sample{background:linear-gradient(var(--surface),var(--bg));border-top:1px solid var(--line)}
.sub-sample-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:start}
.sub-sample-side{position:sticky;top:calc(var(--hdr-h) + 32px)}
.sub-parts{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:14px}
.sub-parts li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;font-size:var(--fs-ui);color:var(--body)}
.sub-parts b{color:var(--ink)}
.sub-pn,.si-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--blue);color:#fff;font:700 13px/1 var(--sans)}
.sub-again{margin:0}

/* the email itself: a mail window in the site's cards */
.si-mail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-hover);overflow:hidden}
.si-head{display:flex;align-items:center;gap:12px;padding:16px clamp(16px,3vw,26px);border-bottom:1px solid var(--line);background:var(--bg)}
.si-logo{flex:0 0 auto;display:block;line-height:0}
.si-head-t{min-width:0}
.si-from{margin:0;font-size:var(--fs-sm);color:var(--body);max-width:none}
.si-from b{color:var(--ink)}
.si-addr{color:var(--mut)}
.si-subj{margin:2px 0 0;font:600 var(--fs-ui)/1.35 var(--disp);color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.si-subj p{display:inline;margin:0;font:inherit;color:inherit;max-width:none}
.si-body{padding:clamp(18px,3vw,30px)}
.si-tag{margin:0 0 6px;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);max-width:none}
.si-part{padding:20px 0 0;margin-top:20px;border-top:1px solid var(--line)}
.si-tag+.si-part{border-top:0;margin-top:0;padding-top:12px}
.si-k{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.si-n{width:22px;height:22px;border-radius:7px;font-size:12px;letter-spacing:0}
.si-h{font-size:var(--fs-xl);line-height:1.25;letter-spacing:-.02em;margin:0 0 8px}
.si-h a{color:var(--ink);text-decoration:none}
.si-h a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:.2em}
.si-p{font-size:var(--fs-ui);line-height:1.55;margin:0;color:var(--body)}
.si-by{margin:8px 0 0;font-size:var(--fs-sm);color:var(--mut)}
.si-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.si-cell{min-width:0;display:flex;flex-direction:column}
.si-lib.lib-grid{grid-template-columns:minmax(0,1fr);flex:1}
.si-lib .lib-item{display:flex}
.si-lib .lib-item>a{flex:1}
.si-news{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.si-news-i{padding-left:14px;border-left:3px solid var(--tint-line)}
.si-news-h{font-size:var(--fs-base);line-height:1.35;letter-spacing:-.01em;margin:0 0 4px}
.si-news-h a{color:var(--ink);text-decoration:none}
.si-news-h a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:.2em}
.si-src{margin:0 0 6px;font-size:13.5px;color:var(--mut)}
.si-why{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.si-why b{color:var(--ink)}
.si-foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--mut);text-align:center}
.si-foot p{margin:0 auto;max-width:none}
.si-foot p+p{margin-top:4px}
.si-unsub{color:var(--blue);text-decoration:underline;text-underline-offset:.2em}

/* ---------- questions ---------- */
.sub-faq{padding-top:clamp(48px,7vw,88px)}
.sub-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}
.sub-end{margin:28px 0 0}
.sub-q{padding:24px}
.sub-q h3{font-size:var(--fs-xl);margin-bottom:10px}
.sub-q p{font-size:var(--fs-ui);margin:0}

/* ---------- confirm and unsubscribe: one card with states ---------- */
.sub-state-hero{min-height:60svh}
.sub-state{max-width:620px;padding:clamp(24px,4vw,40px)}
.sub-st>p{font-size:var(--fs-base);margin-bottom:12px}
.sub-st .sub-fine{font-size:var(--fs-sm)}
.sub-st-h{font-size:var(--fs-3xl);letter-spacing:-.03em;line-height:1.15;margin-bottom:14px;max-width:none}
.sub-st-acts{margin-top:20px}
.sub-spin{display:block;width:30px;height:30px;margin-bottom:18px;border-radius:50%;border:3px solid var(--tint-2);border-top-color:var(--blue2);animation:sub-spin .9s linear infinite}
@keyframes sub-spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.sub-spin{animation-duration:2.4s}}
.sub-newest{max-width:620px;margin-top:32px}
.sub-newest .kicker{margin-bottom:12px}
.sub-all{margin-top:14px}

/* ---------- phones and tablets ---------- */
@media (max-width:980px){
  .sub-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "card" "pts";grid-template-rows:auto}
  .sub-pts{margin-top:32px}
  .sub-head .sub{margin-bottom:28px}
  .sub-sample-grid{grid-template-columns:minmax(0,1fr)}
  .sub-card{max-width:620px}
  .sub-sample-side{position:static}
  .sub-faq-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .si-pair{grid-template-columns:minmax(0,1fr)}
  /* the sample's chart card keeps the picture on top: the library's side-by-side row is too narrow inside the mail card */
  .si-lib a.lib-card{flex-direction:column;align-items:stretch;gap:0;padding:12px 12px 16px}
  .si-lib .lib-card .lib-thumb{flex:none;margin:0 0 12px;padding:10px 12px}
  .si-lib .lib-card .lib-body{padding:0 4px}
  .sub-parts{margin:20px 0 24px}
  .sub-q{padding:20px}
}
.sub-hi{font:600 var(--fs-lg)/1.4 var(--sans);color:var(--ink);margin:-4px 0 10px}
#sub-to{overflow-wrap:anywhere}