/* ==========================================================================
   Experience Life | Subscription order pages (CDS / buysub.com)
   app.css  v2.0  (Sept 2026 redesign)
   Replaces the previous Foundation-based app.css. Standalone, no framework.
   Fonts: LTSans / LTSerif are loaded from fonts.css on experiencelife.lifetime.life
   ========================================================================== */

:root {
  --el-tan: #f1ede7;
  --el-black: #000;
  --el-gray: #707070;
  --el-gray-light: #e6e4e4;
  --el-white: #fff;
  --el-red: #c8102e;
  --el-radius: 6px;
  --el-radius-lg: 14px;
  --el-container: 1140px;
  --el-font: "LTSans", "LT Sans", Helvetica, Arial, sans-serif;
  --el-font-serif: "LTSerif", "LT Serif", Georgia, serif;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--el-white);
  color: var(--el-gray);
  font-family: var(--el-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--el-black); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { color: var(--el-black); font-family: var(--el-font); font-weight: 700; margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 25px; }
h2 { font-size: 25px; }
h3 { font-size: 15px; margin-bottom: 14px; }
em { font-style: italic; }
strong, b { font-weight: 700; color: var(--el-black); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.is-hidden, .visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--el-container); margin: 0 auto; padding: 0 24px; }
.section { padding: 48px 0; }
.section--tan { background: var(--el-tan); }
.section--white { background: var(--el-white); }
.section--tight { padding-top: 32px; padding-bottom: 32px; }
.narrow { max-width: 460px; margin-left: auto; margin-right: auto; }
.narrow-2col { max-width: 972px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.cols { display: flex; flex-wrap: wrap; gap: 32px 72px; }
.cols > .col { flex: 1 1 400px; min-width: 0; max-width: 450px; }
.cols--split > .col { flex: 1 1 300px; max-width: none; }

/* --------------------------------------------------------------------------
   Top bar (logo + nav)
   -------------------------------------------------------------------------- */
#header { background: var(--el-tan); }
#header .container {
  display: flex; align-items: center; justify-content: flex-start; gap: 24px;
  min-height: 84px; padding: 0 57px;
}
#header #nav { flex: 1 1 auto; display: flex; justify-content: center; }
#header .brand { display: block; width: 122px; flex: 0 0 auto; }
#header .brand img { width: 100%; }
#nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 48px; }
#nav a {
  display: block; padding: 8px 0; text-decoration: none;
  font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--el-gray);
}
#nav a:hover, #nav li.active a { color: var(--el-black); }

/* --------------------------------------------------------------------------
   Hero (desktop) and mobile masthead
   -------------------------------------------------------------------------- */
.hero { background: var(--el-tan); line-height: 0; }
.hero img { width: 100%; }
.masthead { display: none; text-align: center; padding: 28px 24px 8px; }
.masthead .brand { display: block; width: 100%; max-width: 395px; margin: 0 auto 22px; }
.masthead h1 { font-size: 20px; line-height: 1.25; margin: 0; }
.covers-mobile { display: none; padding: 8px 24px 0; }
.covers-mobile img { width: 100%; }
.covers-mobile--single img { max-width: 260px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Intro block: covers + "includes" + offer cards
   -------------------------------------------------------------------------- */
.intro { display: flex; gap: 34px; align-items: flex-start; padding: 24px 24px 48px; }
.intro__covers { flex: 0 0 408px; max-width: 408px; margin-left: 34px; }
.intro__body { flex: 1 1 auto; min-width: 0; max-width: 560px; padding-top: 30px; }
.intro__body h2 { margin-bottom: 8px; }
.intro__body p { margin: 0 0 12px; }
.intro__body .callout { font-weight: 700; color: var(--el-gray); margin: 0 0 40px; }
.intro__body .callout--last { margin-bottom: 12px; }
.bullets { list-style: none; margin: 0 0 20px 12px; padding: 0; }
.bullets li { position: relative; padding-left: 16px; margin: 0 0 10px; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--el-gray); }
.intro__body .fine { margin: 22px 0 0; }
.intro__body .fine p { margin: 0 0 6px; }
.intro__body .fine a { color: var(--el-black); }

/* --------------------------------------------------------------------------
   Offer cards (built by JS from the CDS <&TERMS_VALUES> radios)
   -------------------------------------------------------------------------- */
.offers { display: block; }
.offer-cards { display: flex; flex-wrap: wrap; gap: 24px; margin: 0 0 8px; }
.offer-card {
  position: relative; flex: 0 1 233px; min-width: 190px; min-height: 145px;
  padding: 22px 20px 18px; margin: 0; cursor: pointer;
  background: var(--el-tan); border: 1px solid var(--el-black); border-radius: var(--el-radius-lg);
  display: flex; flex-direction: column;
  transition: background .15s ease, box-shadow .15s ease;
}
.offer-card input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.offer-card__title { display: block; font-size: 30px; line-height: 1.05; font-weight: 700; color: var(--el-black); }
.offer-card__sub { display: block; font-size: 17px; line-height: 1.2; font-weight: 700; color: var(--el-black); margin: 6px 0 16px; }
.offer-card__sub span { color: inherit !important; }
.offer-card__select {
  margin-top: auto; align-self: center;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--el-gray);
  border: 1px solid var(--el-black); border-radius: var(--el-radius); padding: 5px 14px; background: var(--el-tan);
  transition: all .15s ease;
}
.offer-card:hover { box-shadow: 0 0 0 1px var(--el-black); }
.offer-card:has(input:checked), .offer-card.is-checked { background: var(--el-white); box-shadow: 0 0 0 1px var(--el-black); }
.offer-card:has(input:checked) .offer-card__select, .offer-card.is-checked .offer-card__select { background: var(--el-black); color: var(--el-white); }
.offer-card:has(input:focus-visible) { outline: 2px solid var(--el-black); outline-offset: 3px; }
/* fallback if the JS did not run: plain radios */
.offers > input[type="radio"] { margin: 0 6px 0 0; }
/* small inline offer list (e.g. "Would you also like your own subscription?") */
.offers--inline .offer-cards { flex-direction: column; gap: 8px; }
.offers--inline .offer-card { flex-basis: auto; min-height: 0; padding: 12px 16px; flex-direction: row; align-items: center; gap: 12px; }
.offers--inline .offer-card__title { font-size: 15px; }
.offers--inline .offer-card__sub { font-size: 15px; margin: 0; font-weight: 500; flex: 1 1 auto; }
.offers--inline .offer-card__select { margin: 0 0 0 auto; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-block h3 { margin: 0 0 14px; }
.field { margin: 0 0 12px; }
.field--row { display: flex; gap: 15px; }
.field--row > .field { flex: 1 1 0; margin: 0; min-width: 0; }
.input-control, .main-form select, .main-form textarea, .main-form input[type="text"], .main-form input[type="email"], .main-form input[type="tel"] {
  display: block; width: 100%; height: 33px; margin: 0;
  padding: 0 14px; background: var(--el-tan); color: var(--el-black);
  border: 1px solid var(--el-black); border-radius: var(--el-radius);
  font-size: 15px; font-weight: 500; line-height: 31px; outline: none;
  -webkit-appearance: none; appearance: none;
}
.main-form textarea { height: 121px; padding: 8px 14px; line-height: 1.4; resize: vertical; }
.main-form input:focus, .main-form select:focus, .main-form textarea:focus { box-shadow: 0 0 0 1px var(--el-black); }
.main-form ::placeholder { color: var(--el-gray); opacity: 1; }
.main-form select {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23707070' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.main-form select:invalid, .main-form select.is-placeholder, .main-form select option[value=""] { color: var(--el-gray); }
.main-form select option { color: var(--el-black); }
.section--white .input-control, .section--white .main-form select, .section--white .main-form textarea { background: var(--el-tan); }

/* checkbox / radio */
.check { display: flex; align-items: flex-start; gap: 12px; margin: 14px 0 0; cursor: pointer; }
.check input[type="checkbox"], .check input[type="radio"] {
  flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0;
  -webkit-appearance: none; appearance: none; background: var(--el-tan);
  border: 1px solid var(--el-black); border-radius: 5px; cursor: pointer; display: inline-grid; place-content: center;
}
.check input[type="radio"] { border-radius: 50%; }
.check input::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--el-black); transform: scale(0); transition: transform .1s; }
.check input[type="radio"]::before { border-radius: 50%; }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { outline: 2px solid var(--el-black); outline-offset: 2px; }
.check span, .check label { flex: 1 1 auto; line-height: 1.35; }
.radio-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 14px 0 0; }
.radio-row .radio-row__label { flex: 1 1 100%; }
.radio-row .check { margin: 0; align-items: center; }

/* error block from CDS (<$ERROR_ALL>) */
.error { color: var(--el-red); font-weight: 700; margin: 0 0 16px; }
.error:empty { display: none; }
.errors { color: var(--el-red); font-weight: 700; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.button, .button.primary, button.button, input[type="submit"].button {
  display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
  background: var(--el-black); color: var(--el-white); border: 1px solid var(--el-black);
  border-radius: var(--el-radius); padding: 0 28px; height: 35px; line-height: 33px;
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.button:hover, .button.primary:hover { background: var(--el-white); color: var(--el-black); }
.button:focus-visible { outline: 2px solid var(--el-black); outline-offset: 3px; }
.button[disabled] { opacity: .6; cursor: default; }
.button--lg { height: 39px; line-height: 37px; padding: 0 30px; font-size: 13px; }
.button--ghost { background: var(--el-white); color: var(--el-black); }
.button--ghost:hover { background: var(--el-black); color: var(--el-white); }
.btn-row { display: flex; justify-content: center; margin: 24px 0 0; }
/* every button row is centered (the old btn-row--right class is kept for pages CDS has not republished) */
.btn-row--right { justify-content: center; }
.helper-processing {
  display: inline-block; width: 12px; height: 12px; margin-left: 8px; vertical-align: middle;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%;
  animation: el-spin .8s linear infinite;
}
@keyframes el-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Payment card (wraps the CDS payment capture component)
   -------------------------------------------------------------------------- */
.payment-card {
  background: var(--el-white); border: 1px solid var(--el-black); border-radius: var(--el-radius);
  padding: 12px 14px 16px;
}
.payment-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.payment-card__head span:last-child { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.payment-card__head span:last-child::before {
  content: ""; display: inline-block; width: 9px; height: 11px; margin: 0 6px -1px 0;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='11' viewBox='0 0 9 11'%3E%3Crect x='.5' y='4.5' width='8' height='6' rx='1' fill='none' stroke='%23707070'/%3E%3Cpath d='M2.5 4.5V3a2 2 0 0 1 4 0v1.5' fill='none' stroke='%23707070'/%3E%3C/svg%3E") no-repeat center;
}
.payment-card #helper { min-height: 60px; }
.payment-card #helper iframe { width: 100%; border: 0; }
/* preview-only mock of the payment iframe */
.payment-mock label { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px; }
.payment-mock .field { margin-bottom: 12px; }
.payment-note { margin: 12px 0 0; }

/* --------------------------------------------------------------------------
   Guides (ebook covers)
   -------------------------------------------------------------------------- */
.guides { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.guides li { flex: 1 1 0; max-width: 150px; min-width: 100px; }
.guides a { display: block; text-decoration: none; }
.guides img { width: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.12); margin: 0 0 12px; }
.guides span { display: block; font-size: 15px; line-height: 1.3; text-align: center; }
.guides-block h3 { margin-bottom: 4px; }
.guides-block > p { margin: 0 0 16px; }
.guides-block--center { text-align: center; }
.guides-block--center .guides { justify-content: center; }

/* --------------------------------------------------------------------------
   Fine print / footer
   -------------------------------------------------------------------------- */
.fine-print { font-size: 12.5px; line-height: 1.5; max-width: 560px; margin: 36px auto 0; text-align: center; }
.fine-print p { margin: 0 0 14px; }
.fine-print a { color: var(--el-black); }
#footer { background: var(--el-white); border-top: 1px solid var(--el-gray-light); padding: 40px 0 44px; font-size: 12.5px; line-height: 1.5; }
.section--tan + #footer { border-top: 0; }
.divider { border: 0; border-top: 1px solid var(--el-black); opacity: .25; max-width: 972px; margin: 40px auto; }
#footer .container { display: flex; align-items: flex-start; gap: 16px 15px; max-width: 812px; }
#footer .logo { flex: none; width: 128px; padding-top: 6px; }
#footer .footer-content { flex: 1 1 auto; }
#footer .links { list-style: none; margin: 0 0 2px; padding: 0; display: flex; flex-wrap: wrap; }
#footer .links li { display: flex; align-items: center; }
#footer .links li + li::before { content: "|"; padding: 0 10px; }
#footer a { text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer address { font-style: normal; display: block; }
#footer .copyright { display: block; }

/* --------------------------------------------------------------------------
   Confirmation pages
   -------------------------------------------------------------------------- */
.dl { margin: 0; padding: 0; }
.dl .row { display: flex; gap: 16px; padding: 0 0 12px; }
.dl dt { flex: 0 0 200px; margin: 0; }
.dl dd { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--el-black); overflow-wrap: anywhere; }
.dl--stack dt { display: block; }
.dl--stack dd { display: block; padding: 0 0 12px; color: var(--el-black); }
.recipient-list { margin: 0 0 28px; }
.recipient-list:not(:has(.recipient)) { display: none; }
.recipient-list .recipient { margin: 0 0 8px; flex: 0 1 calc(50% - 36px); max-width: calc(50% - 36px); }
.confirmation .narrow-2col { max-width: 460px; }
.confirmation .cols--split { flex-direction: column; gap: 32px; }
.confirmation .cols--split > .col { flex-basis: auto; max-width: none; }
.confirmation .recipient-list .recipient { flex-basis: auto; max-width: none; }
.confirmation .recipient-list { margin-bottom: 32px; }
.confirmation .dl dt { flex-basis: 150px; }

/* Already-added gift recipients (CDS <@LOOPDONEES> block) */
.recipients { display: inline-block; vertical-align: top; margin: 0 24px 20px 0; padding: 16px 20px; background: var(--el-white); border: 1px solid var(--el-black); border-radius: var(--el-radius); }
.recipients b { display: block; margin: 0 0 6px; }
.recipients div { margin: 0 0 12px; color: var(--el-black); }
.recipients input[name="delete"] { height: 29px; line-height: 27px; padding: 0 14px; font-size: 11px; }
.recipients-wrap:empty { display: none; }

/* Gift ack helper text */
.help { margin: 14px 0 0; }

/* Login page */
.captcha { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto 14px; background: var(--el-gray-light); }
.login-block h3 { margin-bottom: 12px; }
.login-note { margin: 0 0 32px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .intro__covers { flex-basis: 300px; max-width: 300px; margin-left: 0; }
}
@media (max-width: 860px) {
  .container { padding: 0 36px; }
  .masthead { padding-left: 36px; padding-right: 36px; }
  .covers-mobile { padding-left: 36px; padding-right: 36px; }
  .bullets { margin-left: 20px; }
  .hero { display: none; }
  .masthead, .covers-mobile { display: block; }
  .intro { flex-direction: column; gap: 24px; padding-top: 16px; padding-bottom: 36px; }
  .intro__covers { display: none; }
  .intro__body { max-width: none; padding-top: 0; }
  .cols { gap: 32px; }
  .cols > .col { flex-basis: 100%; max-width: none; }
  #header .container { min-height: 66px; justify-content: center; padding: 0 36px; }
  #header .brand { display: none; }
  #nav ul { justify-content: center; gap: 6px 26px; }
  #nav a { font-size: 12px; padding: 6px 0; }
  .section { padding: 36px 0; }
  .dl dt { flex-basis: 120px; }
  .confirmation .dl dt { flex-basis: 120px; }
  .recipient-list .recipient { flex-basis: 100%; max-width: none; }
  #footer { text-align: center; }
  #footer .container { flex-direction: column; align-items: center; }
  #footer .logo { padding-top: 0; }
  #footer .links { flex-direction: column; align-items: center; }
  #footer .links li + li::before { display: none; }
}
@media (max-width: 480px) {
  .container { padding: 0 32px; }
  .masthead, .covers-mobile { padding-left: 32px; padding-right: 32px; }
  .offer-cards { gap: 14px; }
  .offer-card { flex: 1 1 0; min-width: 0; padding: 18px 14px 14px; }
  .offer-card__title { font-size: 24px; }
  .offer-card__sub { font-size: 15px; }
  .field--row { flex-wrap: wrap; }
  .field--row > .field { flex-basis: 100%; }
  .field--row > .field.field--half { flex-basis: calc(50% - 8px); }
  .guides { gap: 10px; }
  .guides li { flex: 1 1 0; min-width: 0; }
  .guides span { font-size: 13px; }
  .btn-row .button { width: 100%; }
}
@media print {
  #header, #nav, .hero, .masthead, .covers-mobile, .btn-row, #footer { display: none !important; }
  body { color: #000; }
}