/* Offers: Family Edition vs Family Edition + 365 (2026-10-20). */
.offers2 { --cream: #fef8ec; --ink: #1a1a1a; --muted: #6e6b67; --coral: #f06858; --blue: #94b7d5; --yellow: #ffbd48; }
.offers2 p, .offers2 li { text-align: left !important; text-align-last: auto !important; hyphens: manual; }
.offers2 .name { margin: 0; font: 800 1.75rem/1.15 "Gabarito", sans-serif; color: var(--ink); }
.offers2 .line { margin: .35rem 0 0; color: var(--muted); }
.offers2 .price { margin: 1.25rem 0 1rem; font: 800 3rem/1 "Gabarito", sans-serif; color: var(--ink); }
.offers2 .price small { font: 500 1rem "Figtree"; color: var(--muted); margin-left: .3rem; }
.offers2 .list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.offers2 .list li { display: flex; gap: .6rem; font-size: 1rem; line-height: 1.4; color: var(--ink); }
.offers2 .list li::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; border-radius: 5px; background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; }
.offers2 .list li.plus { font-weight: 800; }
.offers2 .list li.plus::before { background-color: var(--blue); }
.offers2 .list b { font-weight: 800; }
.offers2 .closer { margin: 0 0 1.25rem; font-weight: 700; color: var(--ink); }
.offers2 .btn2 { display: block; text-align: center; padding: 1.05rem 1rem; border-radius: 999px; font: 700 1.125rem "Gabarito"; text-decoration: none; }
.offers2 .btn2--outline { border: 2px solid var(--ink); color: var(--ink); }
.offers2 .btn2--fill { background: var(--coral); color: #fff; box-shadow: 0 14px 28px -14px rgba(240,104,88,.7); }
.offers2 .pop { display: inline-block; padding: .35rem .85rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font: 800 .75rem "Figtree"; letter-spacing: .06em; text-transform: uppercase; }
.offers2 .shelf { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
.offers2 .prod { display: flex; flex-direction: column; background: #fff; border-radius: 24px; box-shadow: 0 30px 60px -36px rgba(26,26,26,.35); overflow: hidden; }
.offers2 .prod--two { outline: 3px solid var(--coral); }
.offers2 .prod__stage { position: relative; height: 20rem; background: var(--cream); display: flex; align-items: flex-end; justify-content: center; padding-top: 2rem; }
.offers2 .prod__stage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 1.4rem; height: 1.2rem; background: radial-gradient(closest-side, rgba(26,26,26,.22), transparent); }
.offers2 .box { position: relative; z-index: 1; height: 15.5rem; width: auto; margin-bottom: 1.9rem; border-radius: 10px; box-shadow: 0 24px 40px -18px rgba(26,26,26,.45); }
.offers2 .prod--two .box:first-child { transform: translateX(2.2rem) rotate(-5deg); }
.offers2 .prod--two .box:last-child { transform: translateX(-2.2rem) rotate(5deg); }
.offers2 .prod__pop { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.offers2 .plusmark { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-30%); width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; font: 800 1.6rem/1 "Gabarito"; box-shadow: 0 0 0 5px #fff; }
.offers2 .prod__body { flex: 1; display: flex; flex-direction: column; padding: 2rem 2.25rem 2.25rem; }
.offers2 .prod__body .btn2 { margin-top: auto; }
.offers2 .boxed { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.offers2 .boxed__art { position: relative; height: 22rem; display: flex; align-items: center; justify-content: center; perspective: 1400px; }
.offers2 .box3d { height: 19rem; width: auto; border-radius: 10px; transform: rotateY(-18deg); box-shadow: 30px 40px 50px -30px rgba(26,26,26,.5); }
.offers2 .boxed__art--two .box3d:first-child { transform: rotateY(-18deg) translateX(3.5rem) scale(.9); }
.offers2 .boxed__art--two .box3d:nth-child(2) { transform: rotateY(-18deg) translateX(-3.5rem) translateZ(40px); }
.offers2 .boxed__col { display: flex; flex-direction: column; }
.offers2 .boxed__col .btn2 { margin-top: auto; }
.offers2 .boxed__col + .boxed__col { border-left: 1px solid rgba(26,26,26,.1); padding-left: 4rem; }
.offers2 .boxed__head { display: flex; align-items: center; gap: .75rem; }
.offers2 .prod__stage.boxed__art { height: 21rem; padding-top: 0; align-items: center; }
.offers2 .prod__stage .box3d { height: 16.5rem; }
.offers2 .boxed__art--two .box3d:nth-of-type(1) { transform: rotateY(-18deg) translateX(3.5rem) scale(.9); }
.offers2 .boxed__art--two .box3d:nth-of-type(2) { transform: rotateY(-18deg) translateX(-3.5rem) translateZ(40px); }
.offers2 .prod__stage::after { display: none; }
@media (max-width: 52rem) { .offers2 .shelf { grid-template-columns: 1fr; } }
/* Section rhythm: features cream → offers white → 1600+ cream → kids' questions grey → ages white. */
body.family-page #offers.section { background: #fff; }
body.family-page #questions.section { background: var(--cream, #fef8ec) !important; }
.offers2 .prod { box-shadow: 0 1px 0 rgba(26,26,26,.06), 0 30px 60px -36px rgba(26,26,26,.35); border: 1px solid rgba(26,26,26,.06); }

/* Horizontal product covers (the client's landscape cover layout, rebuilt in
   HTML so the title and question count stay editable): white panel with the
   coral or yellow title, a question-count pill, and a brand-colour side strip
   with the white Pick One logo over a faint mark pattern. */
.offers2 .hstage { height: 19rem; display: flex; align-items: center; justify-content: center; padding: 1.5rem; perspective: 1400px; }
.offers2 .hstage::after { display: none; }
.offers2 .hcover { --c: #f06858; position: relative; display: flex; width: 21rem; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 28px 44px -24px rgba(26,26,26,.45); transform: rotateY(-14deg) rotateX(4deg); }
.offers2 .hcover--yellow { --c: #ffbd48; }
.offers2 .hcover__main { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem 1.1rem 1.2rem; }
.offers2 .hcover__title { margin: 0; font: 800 1.75rem/1 "Gabarito", sans-serif; color: var(--c); }
.offers2 .hcover--yellow .hcover__title { color: #f06858; }
.offers2 .hcover__sub { margin: .55rem 0 .7rem; font-size: .62rem; color: #3a3a3a; }
.offers2 .hcover__pill { align-self: flex-start; padding: .3rem .65rem; border-radius: 6px; background: var(--c); color: #fff; font: 700 .6rem "Figtree"; box-shadow: 0 4px 8px -4px rgba(26,26,26,.3); }
.offers2 .hcover--yellow .hcover__pill { color: #1a1a1a; }
.offers2 .hcover__side { width: 30%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1rem;
  background: var(--c) url("../assets/pick-one-mark-white.svg") 0 0 / 1.7rem 1.7rem space; background-blend-mode: soft-light; }
.offers2 .hcover__side { background-image: radial-gradient(rgba(255,255,255,.22) 22%, transparent 24%); background-size: 1.6rem 1.6rem; }
.offers2 .hcover__side img { width: 74%; height: auto; }
.offers2 .hstage--two .hcover { position: absolute; width: 18.5rem; }
.offers2 .hstage--two .hcover:nth-of-type(1) { transform: rotateY(-14deg) rotateX(4deg) translate(-3.2rem, -2.4rem); }
.offers2 .hstage--two .hcover:nth-of-type(2) { transform: rotateY(-14deg) rotateX(4deg) translate(3.2rem, 2.2rem); z-index: 2; }
@media (max-width: 30rem) { .offers2 .hcover { width: 17rem; } .offers2 .hstage--two .hcover { width: 15rem; } }

/* Covers fill the stage, flat, one colour per product (title, strip, pattern):
   Family Edition = Yellow #FFBD48, Family Edition + 365 = Blue #94B7D5.
   Question pill stays yellow with white text, as on the client's covers. */
.offers2 .hstage { height: auto; padding: 1.75rem; perspective: none; }
.offers2 .hstage .hcover, .offers2 .hstage--two .hcover { position: relative; width: 100%; transform: none !important; aspect-ratio: 16 / 10; border-radius: 16px; box-shadow: 0 2px 4px rgba(26,26,26,.06), 0 26px 44px -26px rgba(26,26,26,.45); }
.offers2 .hcover--yellow { --c: #ffbd48; }
.offers2 .hcover--blue { --c: #94b7d5; }
.offers2 .hcover__main { padding: 1.6rem 1.6rem 1.7rem; }
.offers2 .hcover__title, .offers2 .hcover--yellow .hcover__title { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: .98; color: var(--c); }
.offers2 .hcover__sub { font-size: .8rem; margin: .8rem 0 .9rem; }
.offers2 .hcover__pill, .offers2 .hcover--yellow .hcover__pill { background: #ffbd48; color: #fff; font-size: .72rem; padding: .4rem .8rem; border-radius: 7px; }
.offers2 .hcover__side { position: relative; width: 28%; background: var(--c); padding-bottom: 1.2rem; }
.offers2 .hcover__side::before { content: ""; position: absolute; inset: 0; background: url("../assets/pick-one-mark-white.svg") 0 0 / 2.1rem 2.1rem repeat; opacity: .16; }
.offers2 .hcover__side img { position: relative; width: 80%; }
.offers2 .prod__pop { z-index: 3; }

/* Bundle card: the yellow Family Edition cover behind the coral 365 cover,
   both full single-colour covers, offset so both titles read. */
.offers2 .hcover--coral { --c: #f06858; }
.offers2 .hstage--two { position: relative; display: block; height: auto; aspect-ratio: 16 / 12.4; }
.offers2 .hstage--two .hcover { position: absolute !important; width: 74% !important; }
.offers2 .hstage--two .hcover:nth-of-type(1) { left: 1.75rem; top: 1.75rem; }
.offers2 .hstage--two .hcover:nth-of-type(2) { right: 1.75rem; bottom: 1.75rem; z-index: 2; box-shadow: 0 2px 4px rgba(26,26,26,.08), 0 30px 50px -22px rgba(26,26,26,.55); }
.offers2 .hstage--two .hcover__main { padding: 1.2rem 1.2rem 1.3rem; }
.offers2 .hstage--two .hcover__title { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.offers2 .hstage--two .hcover__sub { font-size: .68rem; margin: .55rem 0 .65rem; }
/* Left card stage takes the same height so the two cards line up. */
.offers2 .shelf .prod:first-child .hstage { aspect-ratio: 16 / 12.4; display: flex; align-items: center; }
/* Keep the back cover's title readable: on the bundle's back cover the title
   block sits at the top, and the front cover starts below it. */
.offers2 .hstage--two .hcover:nth-of-type(1) .hcover__main { justify-content: flex-start; }
.offers2 .hstage--two .hcover:nth-of-type(1) .hcover__sub,
.offers2 .hstage--two .hcover:nth-of-type(1) .hcover__pill { display: none; }
.offers2 .hstage--two .hcover:nth-of-type(1) { left: 1.75rem; top: 1.5rem; }
.offers2 .hstage--two .hcover:nth-of-type(2) { right: 1.75rem; bottom: 1.5rem; width: 70% !important; }

/* Bundle: the Family Edition cover is identical to the one on the left card
   (title at the bottom, subtitle, yellow pill). Both covers are shown whole:
   Family Edition top-left, 365 bottom-right, overlapping only at a corner. */
.offers2 .hstage--two .hcover:nth-of-type(1) .hcover__main { justify-content: flex-end; }
.offers2 .hstage--two .hcover:nth-of-type(1) .hcover__sub,
.offers2 .hstage--two .hcover:nth-of-type(1) .hcover__pill { display: initial; }
.offers2 .hstage--two .hcover:nth-of-type(1) .hcover__pill { display: inline-block; align-self: flex-start; }
.offers2 .hstage--two .hcover { width: 61% !important; }
.offers2 .hstage--two .hcover:nth-of-type(1) { left: 1.5rem; top: 1.4rem; }
.offers2 .hstage--two .hcover:nth-of-type(2) { right: 1.5rem; bottom: 1.4rem; }
.offers2 .hstage--two .hcover__main { padding: .95rem 1rem 1.05rem; }
.offers2 .hstage--two .hcover__title { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.offers2 .hstage--two .hcover__sub { font-size: .6rem; margin: .45rem 0 .55rem; }
.offers2 .hstage--two .hcover__pill { font-size: .6rem; padding: .3rem .6rem; }
.offers2 .hstage--two .hcover--coral .hcover__title { font-size: clamp(2rem, 3.2vw, 2.75rem); }
/* 365 cover: everything red, including the question pill. */
.offers2 .hcover--coral .hcover__pill { background: #f06858 !important; color: #fff !important; }
.offers2 .hstage--two, .offers2 .shelf .prod:first-child .hstage { aspect-ratio: 16 / 13.6; }
.offers2 .hstage--two .hcover { width: 60% !important; }
/* Offers now sit between Works for Every Age (white) and the Q&A (cream): light grey ground. */
body.family-page #offers.section { background: #f7f7f7 !important; }