/* Post-purchase offers and the friend gift form (integrated/pages/assets/funnel.css). */
.funnel-wrap{display:grid;gap:12px}
.funnel-card .fn-inc{margin:0;padding-left:20px;color:#46544d;display:grid;gap:4px}
.funnel-card .fn-msg{min-height:1.2em;color:#f2b3b8;font-size:15px}
.funnel-card .fn-gift{margin-top:4px}
.funnel-card .fn-gift legend{font:600 13px "Figtree",system-ui,sans-serif;color:#46544d;margin-bottom:6px;padding:0}
.funnel-card .fn-pk{border:0;padding:0;margin:0;display:grid;gap:8px}
.funnel-card .check{display:flex;gap:10px;align-items:flex-start;font:500 15px "Figtree",system-ui,sans-serif;color:#16231d}
.funnel-card .check input{min-height:auto;width:20px;height:20px;flex:none;margin-top:2px}
.funnel-card .btn[disabled]{opacity:.6;cursor:default}
.funnel-card .paper input:not([type=radio]):not([type=checkbox]),.funnel-card .paper textarea{width:100%}
.funnel-wrap,.funnel-card,.funnel-card .fn-pk,.funnel-card .paper{min-width:0;max-width:100%}
.funnel-card .fn-pk{min-inline-size:0}
.funnel-card,.funnel-card p,.funnel-card label,.funnel-card h3{overflow-wrap:anywhere}
.funnel-card .paper input,.funnel-card .paper textarea{box-sizing:border-box;max-width:100%}

/* Radio and checkbox stay small next to their text (fix 27 Oct 2026: the gift choice radio was stretched full width). */
.funnel-card .paper label.check{display:flex!important;flex-direction:row;align-items:flex-start;gap:10px}
.funnel-card .paper label.check input[type=radio],.funnel-card .paper label.check input[type=checkbox]{width:20px!important;height:20px!important;min-height:0!important;padding:0!important;flex:0 0 20px!important;margin-top:2px}

/* Audit fixes, 27 Oct 2026. */
/* The pages use color-scheme dark, so native radios, checkboxes, selects and date pickers on the
   ivory forms rendered as black boxes. The forms are light: give them light controls. */
.paper{color-scheme:light}
.paper input[type=radio],.paper input[type=checkbox],label.check input[type=radio],label.check input[type=checkbox]{accent-color:#b3202b}
/* Text on an ivory form inside a dark offer card kept the card's light text color (unreadable). */
.offer .paper p,.offer .paper .note,.offer .paper legend{color:#46544d}
.offer .paper label.check{color:#16231d}
/* Secondary (ghost) buttons on the dark cards had a border the same color as the card, so they
   read as plain text instead of buttons. */
.offer .btn.ghost,.screen .btn.ghost{border:1px solid rgba(29,91,61,0.30);background:transparent;color:#16231d}
.offer .btn.ghost:hover,.screen .btn.ghost:hover{background:rgba(29,91,61,0.08)}
.offer .btn.ghost[disabled]{opacity:.6}
/* Long button labels ("Complete the set for $29.95, best value") wrap cleanly inside the pill. */
.offer .acts .btn{white-space:normal;line-height:1.25;text-align:center;padding-block:10px;max-width:100%}
.coreopt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;max-width:100%}

/* Free letter page: the offers after signup sit inside the ivory "Check your email" card, and
   the free page does not carry the thanks page's .btn, .tag and .link styles (the buttons showed
   grey, "No thanks" as a grey box and the tag on top of the heading). Self contained here. */
#freeoffers{display:grid;gap:12px}
#freeoffers .funnel-card{position:relative;display:grid;gap:10px;border:1px solid rgba(29,91,61,0.30);border-radius:12px;background:#ffffff;padding:18px;color:#16231d;margin:0}
#freeoffers .funnel-card .tag{position:static;justify-self:start;display:inline-block;background:#e7f2eb;color:#16231d;font:600 11px/1 "Figtree",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:999px}
#freeoffers .funnel-card .row{display:flex;justify-content:space-between;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
#freeoffers .funnel-card h3{margin:0;font:500 22px/1.2 "Young Serif",Georgia,serif;color:#16231d}
#freeoffers .funnel-card .amt{font:500 22px "Young Serif",Georgia,serif;color:#16231d;font-variant-numeric:tabular-nums}
#freeoffers .funnel-card p{margin:0;color:#3d372e}
#freeoffers .funnel-card .fn-inc{color:#16231d}
#freeoffers .funnel-card .acts{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center}
#freeoffers .funnel-card .btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:10px 1.4em;border:0;border-radius:999px;background:#b3202b;color:#fff;font:600 16px/1.25 "Figtree",system-ui,sans-serif;text-align:center;white-space:normal;cursor:pointer;max-width:100%}
#freeoffers .funnel-card .btn:hover{background:#931821}
#freeoffers .funnel-card .link{min-height:44px;padding:0 4px;background:none;border:0;color:#46544d;font:500 15px "Figtree",system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#freeoffers .funnel-card .note,#freeoffers .funnel-card .note.light{font-size:14px;color:#46544d}
#freeoffers .funnel-card .fn-msg{color:#b3202b}
#freeoffers .eyebrow{margin:6px 0 0}
/* The free letter sample picture was stretched to 720 px tall (height attribute, no height:auto). */
.sample img{display:block;width:100%;height:auto}
/* Phones: the form came three screens below the headline with no button to it (the header link
   is hidden under 860 px). The form goes right under the headline; what you get follows it. */
@media (max-width:820px){#free .free-grid>#freeform,#free .free-grid>#freedone{order:-1}}
/* Upsell V2: one offer card with a short sample, the regular price struck through, and the bundle as one secondary button. */
.fn-pv{position:relative;margin:10px 0 8px;border-radius:12px;overflow:hidden;background:#ffffff;aspect-ratio:4/3}
.fn-pv video{display:block;width:100%;height:100%;object-fit:cover}
.fn-pv-label{position:absolute;top:8px;left:8px;background:rgba(255,255,255,0.92);color:#fff8ea;font:600 11px/1 "Figtree",sans-serif;letter-spacing:.04em;padding:6px 8px;border-radius:999px}
.fn-pv-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 12px 10px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font:600 16px/1.25 "Figtree",sans-serif;text-align:center}
.fn-was{color:#7a6f60;font-weight:400;margin-left:2px}
.fn-v2 .q-btn,.fn-v2 .acts .btn:first-child{width:100%}
.fn-v2 .fn-anchor{width:100%;margin-top:8px;white-space:normal}
.fn-v2 h3 b{color:#8b1d24}
.fn-v2 .acts .btn.fn-anchor{background:#fff;color:#16231d;border:1px solid #dde3df;box-shadow:none;font-weight:600}
.fn-v2 .acts{display:flex;flex-direction:column;align-items:stretch;gap:8px}