/* ============================================================
   OFFER PAGE
   One stylesheet, two contexts:
     - standalone page (mobile and desktop), e.g. /session.html
     - injected into the desktop panel on the hub
   Everything is scoped under .offer so it behaves identically in both.
   ============================================================ */

.offer{
  --o-ink:#12302C;
  --o-pine:#0B4A45;
  --o-green:#0B7A70;
  --o-body:#3C524D;
  --o-dim:#5E736E;
  --o-line:rgba(11,74,69,.14);
  --o-btn:#F67072;
  --o-btn-dark:#E85F62;
  --o-coral:#D65F52;
  --o-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --o-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  font-family:var(--o-sans);
  color:var(--o-ink);
  max-width:700px;          /* the reading column */
}

/* 1 — kicker */
.offer .o-kick{
  font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--o-coral);
}

/* 2 — the oversized headline */
.offer h1{
  font-family:var(--o-serif);
  font-size:clamp(38px,6.4vw,64px);
  line-height:1.03;
  letter-spacing:-1px;
  font-weight:600;
  color:var(--o-pine);
  margin-top:18px;
}
.offer h1 em{font-style:italic;color:var(--o-green)}

/* 3 — byline, same scale as the kicker */
.offer .o-by{
  margin-top:20px;
  font-size:12px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--o-dim);
}

/* 4 — credibility row */
.offer .o-badges{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-top:22px;padding:0;list-style:none;
}
.offer .o-badges li{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;
  border:1px solid var(--o-line);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  font-size:12.5px;font-weight:600;color:var(--o-pine);
  white-space:nowrap;
}
.offer .o-badges svg{width:15px;height:15px;flex:none;color:var(--o-green)}

/* 5 — hero image */
.offer .o-hero{
  margin-top:34px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--o-line);   /* hairline, not a shadow */
  background:#EAF3F0;
}
.offer .o-hero img,
.offer .o-hero svg{display:block;width:100%;height:auto}

/* 6 — body copy */
.offer .o-body{margin-top:40px}
.offer .o-body > p{
  font-size:18px;line-height:1.72;color:var(--o-body);
  margin-bottom:20px;
}
.offer .o-body > p:first-child{
  /* the opening line carries more weight */
  font-size:20px;line-height:1.65;color:var(--o-ink);
}
.offer h2{
  font-family:var(--o-serif);
  font-size:clamp(26px,3vw,34px);
  line-height:1.15;font-weight:600;color:var(--o-pine);
  margin-top:56px;margin-bottom:16px;
}
.offer h2 em{font-style:italic;color:var(--o-green)}

.offer .o-list{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:15px}
.offer .o-list li{
  position:relative;padding-left:32px;
  font-size:17px;line-height:1.66;color:#2B403B;
}
.offer .o-list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:15px;height:15px;border-radius:50%;
  background:var(--o-btn);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.9);
}

/* the inline callout, floated right into the text on wide screens */
.offer .o-callout{
  margin:30px 0;
  padding:24px;
  border-radius:14px;
  background:#FFF1EE;
  border:1px solid #F6D7D0;
}
.offer .o-callout .k{
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--o-coral);margin-bottom:10px;
}
.offer .o-callout p{
  font-size:15.5px;line-height:1.6;color:#5B3A34;margin-bottom:16px;
}
.offer .o-callout a{
  display:inline-flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:#A8382E;text-decoration:none;
  border-bottom:2px solid rgba(168,56,46,.3);
  padding-bottom:2px;
}
.offer .o-callout a:hover{border-bottom-color:#A8382E}
@media (min-width:760px){
  .offer .o-callout{
    float:right;
    width:290px;
    margin:8px 0 24px 32px;
  }
}

/* price line */
.offer .o-price{
  display:flex;align-items:baseline;gap:12px;
  margin-top:44px;padding-top:26px;
  border-top:1px solid var(--o-line);
  clear:both;
}
.offer .o-price b{
  font-family:var(--o-serif);font-size:44px;font-weight:600;
  color:var(--o-pine);letter-spacing:-1.2px;
}
.offer .o-price span{font-size:14px;color:var(--o-dim)}

/* 7 — question and answer */
.offer .o-qa{margin-top:18px;border-top:1px solid var(--o-line)}
.offer .o-qa details{border-bottom:1px solid var(--o-line);padding:20px 0}
.offer .o-qa summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  font-size:17.5px;font-weight:700;color:var(--o-pine);line-height:1.4;
}
.offer .o-qa summary::-webkit-details-marker{display:none}
.offer .o-qa .plus{flex:none;font-size:22px;font-weight:400;color:var(--o-btn);transition:transform .25s ease;line-height:1}
.offer .o-qa details[open] .plus{transform:rotate(45deg)}
.offer .o-qa details p{margin-top:14px;font-size:16.5px;line-height:1.7;color:var(--o-body)}
.offer .o-qa details p + p{margin-top:12px}

/* closing block */
.offer .o-close{
  margin-top:56px;padding:34px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  border:1px solid var(--o-line);
}
.offer .o-close h2{margin-top:0}
.offer .o-close p{font-size:17px;line-height:1.7;color:var(--o-body);margin-bottom:22px}

/* the main button, used inline */
.offer .o-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:60px;padding:0 40px;
  border-radius:999px;background:var(--o-btn);color:#fff;
  font-size:17px;font-weight:700;text-decoration:none;
  box-shadow:0 0 0 1px rgba(214,95,82,.35);
  transition:transform .18s ease,background .18s ease;
}
@media (hover:hover){.offer .o-cta:hover{background:var(--o-btn-dark);transform:translateY(-2px)}}

.offer .o-fine{margin-top:16px;font-size:13.5px;color:var(--o-dim);line-height:1.6}

/* ---- 8. the persistent CTA ------------------------------------------- */
/* Narrow screens: a bottom bar carrying a line of context plus the button. */
.offer-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:14px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(11,74,69,.12);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.offer-bar .t{flex:1;min-width:0}
.offer-bar .t b{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  font-size:clamp(13px,3.7vw,14.5px);font-weight:700;color:#0B4A45;line-height:1.25;
}
.offer-bar .t span{display:block;font-size:12.5px;color:#5E736E;margin-top:2px}
.offer-bar .go{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 26px;border-radius:999px;
  background:#F67072;color:#fff;font-size:15.5px;font-weight:700;text-decoration:none;
  transition:background .18s ease;
}
@media (hover:hover){.offer-bar .go:hover{background:#E85F62}}
/* the optional step has no room on a phone bar */
.offer-bar .alt{display:none}

/* Wide screens: nothing but the action. One oversized button, with the
   optional step as a quiet line beneath it. No heading, no price, no noise. */
@media (min-width:1080px){
  .offer-bar{
    left:auto;right:40px;bottom:40px;
    width:320px;
    display:block;
    padding:0;
    background:none;
    backdrop-filter:none;
    border:none;
  }
  .offer-bar .t{display:none}

  .offer-bar .go{
    display:flex;width:100%;
    min-height:76px;
    padding:0 28px;
    font-size:19px;
    letter-spacing:-.2px;
    border-radius:999px;
    box-shadow:0 18px 38px -16px rgba(214,95,82,.85);
  }
  @media (hover:hover){
    .offer-bar .go:hover{transform:translateY(-2px)}
  }

  .offer-bar .alt{
    display:block;
    margin-top:14px;
    text-align:center;
    font-size:13.5px;
    color:#5E736E;
    text-decoration:none;
  }
  .offer-bar .alt:hover{color:#0B4A45;text-decoration:underline}
}

/* ---- value cards, in place of a bare price line ---------------------- */
.offer .o-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:44px;
  padding-top:34px;
  border-top:1px solid var(--o-line);
  clear:both;
}
@media (min-width:620px){
  .offer .o-cards{grid-template-columns:1fr 1fr}
}

.offer .o-card{
  padding:22px;
  border-radius:14px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--o-line);
}
.offer .o-card svg{width:22px;height:22px;color:var(--o-green);display:block;margin-bottom:12px}
.offer .o-card b{
  display:block;
  font-family:var(--o-serif);
  font-size:19px;font-weight:600;line-height:1.25;color:var(--o-pine);
  margin-bottom:6px;
}
.offer .o-card span{display:block;font-size:14.5px;line-height:1.55;color:var(--o-dim)}

/* the price card carries the weight */
.offer .o-card.is-price{
  background:var(--o-pine);
  border-color:var(--o-pine);
}
.offer .o-card.is-price svg{color:rgba(255,255,255,.65)}
.offer .o-card.is-price b{
  font-size:42px;letter-spacing:-1.2px;color:#fff;margin-bottom:2px;
}
.offer .o-card.is-price span{color:rgba(255,255,255,.72)}

/* ---- secondary, optional action -------------------------------------- */
.offer .o-alt{
  margin-top:18px;
  font-size:15px;line-height:1.6;color:var(--o-dim);
}
.offer .o-alt a{
  color:var(--o-green);font-weight:700;text-decoration:none;
  border-bottom:2px solid rgba(11,122,112,.28);padding-bottom:1px;
}
.offer .o-alt a:hover{border-bottom-color:var(--o-green)}