/*
 * SG content pages (task SG-10, 17 Oct 2026): FAQ, contact and wholesale forms (Contact Form 7), affiliate, the "coming
 * soon" layouts of pages that wait for an SG account (rewards, reviews, store locator, exclusive discounts, register,
 * sale pages) and the special-1 / Be$os landings. Loaded on pages only (inc/look.php). Values from the live
 * stundenglass.com snippets (t3-contact, t3-become-retailer, become-affiliate, special-1, page.besos) and the shots in
 * gpen-ops/out/sg-qa/sg10/live (390, 1440, 820). Phone first; 768px and up for tablet and desktop.
 */

/* ---------------------------------------------------------------- wider columns for designed pages */
.page-narrow:has(.sg-retailer, .sg-soon, .sg-affiliate) { max-width: 1100px; }
.page-content .rte > :is(.sg-contact, .sg-retailer, .sg-soon, .sg-affiliate) { margin-left: 0; margin-right: 0; }

/* ---------------------------------------------------------------- FAQ (Expanse faq sections) */
.sg-faq { padding-top: 10px; }
.sg-faq .section-header { margin: 0; }
.sg-faq__body.faq-accordion { max-width: 700px; margin: 0 auto; padding: 0 13px; background: none; border-radius: 0; } /* phone: text 30px from the edge, as stundenglass.com */
.sg-faq__body .faq-section { margin: 0; padding: 32px 0 28px; border-bottom: 1px solid var(--gpen-border); }
.sg-faq__body .faq-section:last-child { border-bottom: 0; }
.sg-faq__body .faq-section > h2 { font-family: var(--sg-font-montserrat); font-weight: 400; font-style: normal; text-transform: none; text-align: left; letter-spacing: 0.025em; font-size: 24px; line-height: 1.2; margin: 0 0 14px; }
.sg-faq__body details { border-bottom: 1px solid var(--gpen-border); }
.sg-faq__body details summary { font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 15px; line-height: 1.5; letter-spacing: 0.025em; padding: 13px 0; }
.sg-faq__body details summary::after { content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin: 0 4px 4px 12px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; font-size: 0; }
.sg-faq__body details[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.sg-faq__body .faq-answer { padding: 0 0 18px; font-size: 15px; }
.sg-faq__body .faq-answer p { margin: 0 0 12px; }
.sg-faq__body .faq-answer a { text-decoration: underline; }
@media only screen and (min-width: 768px) {
  .sg-faq { padding-top: 30px; }
  .sg-faq__body.faq-accordion { padding: 0; }
  .sg-faq__body .faq-section { padding: 48px 0 40px; }
  .sg-faq__body .faq-section > h2 { font-size: 28px; margin-bottom: 18px; }
  .sg-faq__body details summary { font-size: 16px; }
}

/* ---------------------------------------------------------------- forms (Contact Form 7, t3 form look) */
.sg-cf7 .form-row { margin-bottom: 18px; }
.sg-cf7 label { font-family: var(--sg-font-montserrat); font-size: 12px; letter-spacing: 0.08em; }
.sg-cf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea) { background: #f5f5f5; border: 1px solid #f5f5f5; border-radius: 4px; min-height: 50px; padding: 12px 16px; font-size: 16px; }
.sg-cf7 :is(input, select, textarea):focus { border-color: #000; outline: none; background: #fff; }
.sg-cf7 textarea { min-height: 140px; }
.sg-cf7 input[type="file"] { font-size: 14px; max-width: 100%; }
.sg-cf7 .form-optins { background: #fff; border: 1px solid var(--gpen-border); padding: 16px 16px 8px; }
.sg-cf7 .wpcf7-acceptance label, .sg-cf7 .wpcf7-checkbox label { font-family: var(--sg-font-inter); font-size: 14px; }
.sg-cf7 .wpcf7-submit { width: 100%; letter-spacing: 0.2em; text-transform: uppercase; border-radius: 50px; }
@media only screen and (min-width: 768px) { .sg-cf7 .wpcf7-submit { width: auto; min-width: 220px; } }
/* Grid cells may shrink below their content: the file input's long intrinsic width pushed the 1fr column (and the
   licence field beside it) wider than the form box on phones (wholesale form, 390 px). Same breakpoint as main.css. */
.sg-cf7 .form-grid { grid-template-columns: minmax(0, 1fr); }
.sg-cf7 :is(input, select, textarea) { max-width: 100%; }
@media only screen and (min-width: 769px) { .sg-cf7 .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Forms, design pass (Oct 2026). The fields sit inside their <label>, and with font: inherit they took the label's bold,
   tracked Montserrat, so typed text and placeholders looked bold; they now use the body font. The file field gets an
   outline pill button (the site's secondary button) instead of the browser's grey one. */
.sg-cf7 :is(input:not([type="submit"]), select, textarea) { font-family: var(--sg-font-inter); font-weight: 400; letter-spacing: normal; text-transform: none; }
.sg-cf7 input[type="file"] { padding: 0; font-size: 14px; color: #555; }
.sg-cf7 input[type="file"]::file-selector-button { min-height: 44px; margin-right: 12px; padding: 0 20px; border: 1px solid #000; border-radius: 50px; background: #fff; color: #000; font-family: var(--sg-font-montserrat); font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; }
.sg-cf7 input[type="file"]::file-selector-button:hover { background: #000; color: #fff; }
/* Form look, design pass (Oct 2026): lighter forms (Contact, Become a Retailer, Register Your Product).
   - fields white with the thin grey outline the site uses for controls (sort menu, quantity), black on focus (were solid
     grey boxes); labels a step quieter (11px semibold, were 12px bold); hints grey 12px under their field
   - a menu still on "Please choose an option" shows that text in grey, like a placeholder (it looked like an answer)
   - SG checkboxes: 18px square, black when ticked with a white tick (were the browser's default)
   - the privacy note is plain grey text (it sat in a bordered box inside the form box)
   - Contact Form 7 messages: error text and outline in the site red, the response box outlined, not CF7's orange/green
   - one 22px gap between rows */
.sg-cf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], input[type="url"], select, textarea) { background: #fff; border: 1px solid var(--sg-rule); color: #000; }
.sg-cf7 label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.sg-cf7 .form-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: #6b6b6b; }
.sg-cf7 .form-row { margin-bottom: 22px; }
.sg-cf7 .form-row > p { margin: 0; } /* one rhythm: the paragraphs added 15px on some rows only (gaps were 18 to 33px) */
.sg-cf7 select:has(option[value=""]:checked) { color: #757575; }
.sg-cf7 select option { color: #000; }
.sg-cf7 .form-optins { padding: 4px 0 0; border: 0; background: none; }
.sg-cf7 input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; border: 1px solid #000; border-radius: 3px; background: #fff center / 12px 12px no-repeat; cursor: pointer; }
.sg-cf7 input[type="checkbox"]:checked { background-color: #000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.8 9 10 3' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E"); }
.sg-cf7 input[type="checkbox"]:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.sg-cf7 .wpcf7-list-item { margin: 0; }
.sg-cf7 .wpcf7-list-item-label { font-family: var(--sg-font-inter); font-size: 14px; font-weight: 400; letter-spacing: normal; text-transform: none; }
.sg-cf7 .wpcf7-not-valid { border-color: var(--gpen-sale, #ba4444); }
.sg-cf7 .wpcf7-not-valid-tip { margin-top: 6px; font-family: var(--sg-font-inter); font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--gpen-sale, #ba4444); }
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; padding: 14px 16px; border: 1px solid var(--sg-rule); border-radius: 4px; background: #fff; font-family: var(--sg-font-inter); font-size: 14px; text-align: left; }
.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output { background: #fff; border-color: var(--gpen-sale, #ba4444); color: var(--gpen-sale, #ba4444); }
/* text pages on phones (Privacy, Terms of Use, Return Policy, Warranty, Shipping, About): the title left-aligned, on the
   same edge as the paragraphs, instead of centred over left-aligned text. Only pages that use the theme's page title
   (header.section-header); the SG pages with their own layout (Rewards, Contact, Coming soon, forms) put their title in
   the content and stay centred. */
@media only screen and (max-width: 767px) { .page-narrow > .section-header { text-align: left; } }
.wpcf7 form.sent .wpcf7-response-output { background: #fff; border-color: #000; color: #000; }
/* Become a Retailer on phones: the form card stays inside the page margins (the parent pulls it 15px past each side) */
@media only screen and (max-width: 767px) { body .sg-retailer .t3-retailer-form { margin-left: 0; margin-right: 0; } }
/* Register Your Product: the title centred, like the other pages' titles */
.sg-register > h1 { text-align: center; }

/* ---------------------------------------------------------------- contact (snippets/t3-contact.liquid) */
.sg-contact .t3-page-banner { position: relative; margin: 0 0 20px; text-align: center; }
.sg-contact .t3-page-banner__img { display: none; }
.sg-contact .t3-page-banner h1 { font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 28px; letter-spacing: -1px; margin: 10px 0 0; color: #000; }
.sg-contact__info { display: grid; gap: 22px; text-align: center; margin: 0 0 30px; }
.sg-contact__info .faq-register { margin: 0; font-size: 16px; }
.sg-contact__info .faq-register a, .sg-contact__info .phone-number { text-decoration: underline; }
.sg-contact__info h4, .sg-contact__info h2 { font-family: var(--sg-font-montserrat); font-size: 16px; font-weight: 400; letter-spacing: 0.025em; margin: 10px 0; }
.sg-contact__info p { margin: 0; font-size: 16px; }
.sg-contact__icon { width: 60px; height: 60px; margin: 0 auto; display: block; }
.sg-form-box { border: 1px solid #d0d0d0; border-radius: 20px; padding: 30px 8%; margin: 0 0 40px; }
@media only screen and (min-width: 768px) {
  .sg-contact .t3-page-banner { margin: 0 0 50px; overflow: hidden; }
  .sg-contact .t3-page-banner__img { display: block; width: 100%; height: auto; aspect-ratio: 1450 / 300; object-fit: cover; }
  /* black, not white: the left of the banner photo is a pale wall, so white text was hard to read (contrast) */
  .sg-contact .t3-page-banner h1 { position: absolute; left: 4%; top: 50%; transform: translateY(-50%); margin: 0; color: #000; font-size: 40px; letter-spacing: -2px; }
  .sg-contact__info { grid-template-columns: 1fr 1fr; align-items: center; margin-bottom: 40px; }
  .sg-contact__info .faq-register { grid-column: 1 / -1; }
  .sg-contact__call { display: flex; align-items: center; justify-content: center; gap: 16px; }
  .sg-contact__call .sg-contact__icon { width: 32px; height: 32px; margin: 0; }
  .sg-contact__call h4, .sg-contact__call h2 { margin: 0; }
  .sg-form-box { padding: 40px 12%; margin-bottom: 60px; }
}
@media only screen and (min-width: 1025px) {
  .sg-form-box { padding: 50px 20%; }
  .sg-contact__info { grid-template-columns: repeat(3, 1fr); }
  .sg-contact__info .faq-register { grid-column: auto; }
}
/* Contact form box, tablet and desktop: as wide as the form plus its padding and centred (it spanned the page, the
   form held in by 12 to 20% side padding), like the Become a Retailer box */
@media only screen and (min-width: 768px) { .sg-contact .sg-form-box { max-width: 800px; margin-left: auto; margin-right: auto; padding: 44px 50px; } }
/* Contact info row: three matching columns, each a small tracked label over its value ("Help" for the FAQ and
   registration links, "Call us" and the number, the hours). It mixed three styles: underlined links, an icon with
   "Call Us", and a heading over the hours. The call icon is left out (the number is the link). */
.sg-contact .sg-contact__info { gap: 26px; }
.sg-contact .sg-contact__info h4, .sg-contact .sg-contact__info h2, .sg-contact .sg-contact__info .faq-register::before { display: block; margin: 0 0 8px; font-family: var(--sg-font-montserrat); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: #000; }
.sg-contact .sg-contact__info .faq-register::before { content: "Help"; content: "Help" / ""; }
.sg-contact .sg-contact__call { display: flex; flex-direction: column; align-items: center; gap: 0; }
.sg-contact .sg-contact__call > a:first-child { display: none; }
.sg-contact .sg-contact__info :is(.faq-register, .phone-number, .operating-hours p) { font-family: var(--sg-font-inter); font-size: 15px; }
@media only screen and (min-width: 768px) {
  .sg-contact .sg-contact__info { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0; max-width: 960px; margin-left: auto; margin-right: auto; }
  .sg-contact .sg-contact__info .faq-register { grid-column: auto; }
  .sg-contact .sg-contact__info > * + * { border-left: 1px solid var(--sg-rule); }
  .sg-contact .sg-contact__info > * { padding: 4px 16px; }
}

/* ---------------------------------------------------------------- become a retailer (snippets/t3-become-retailer.liquid) */
.sg-retailer { text-align: center; margin: 0 auto 40px; }
.sg-retailer > h1 { font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 40px; line-height: 1.15; margin: 10px 0 24px; }
.sg-retailer > h3 { font-size: 22px; line-height: 1.35; margin: 0 auto 30px; max-width: 700px; text-wrap: balance; } /* as wide as the form card, two even lines (was 1000px with "opportunities" alone on line 2) */
.t3-retailer-form { border: 1px solid #d0d0d0; border-radius: 20px; padding: 28px 20px; margin: 0 auto; max-width: 700px; text-align: left; }
.t3-retailer-form .sg-form-title { font-family: var(--sg-font-montserrat); font-weight: 700; font-size: 24px; line-height: 1.25; text-align: center; margin: 0 0 12px; }
.t3-retailer-form .sg-form-intro { text-align: center; margin: 0 0 24px; }
@media only screen and (min-width: 768px) {
  .sg-retailer > h1 { font-size: 48px; margin-top: 20px; }
  .sg-retailer > h3 { font-size: 24px; }
  .t3-retailer-form { padding: 40px 50px; }
}

/* ---------------------------------------------------------------- coming soon (pages waiting for an SG account or key) */
.sg-soon { text-align: center; margin: 0 auto 40px; }
.sg-soon > h1 { font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 36px; line-height: 1.15; margin: 10px 0 20px; }
.sg-soon__lead { max-width: 820px; margin: 0 auto 16px; font-size: 16px; line-height: 1.6; text-wrap: balance; }
.sg-soon__card { max-width: 620px; margin: 30px auto; padding: 28px 20px; border: 1px solid #d0d0d0; border-radius: 20px; }
.sg-soon__card p { margin: 0 0 18px; }
.sg-soon__badge { display: inline-block; margin: 0 0 14px !important; padding: 6px 16px; border-radius: 50px; background: var(--sg-bronze); font-family: var(--sg-font-montserrat); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.sg-soon__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sg-soon__actions .t3-btn { font-size: 13px; padding: 12px 28px; letter-spacing: 2px; }
/* Coming soon card text: from tablet up each sentence starts its own line (the second sentence wrapped mid-way, e.g.
   "Create an / account now so you are ready."); phones flow normally. The spans are in the page content. */
@media only screen and (min-width: 768px) { .sg-soon__card .sg-soon__line { display: block; text-wrap: balance; } }
.sg-soon h2 { font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 24px; margin: 40px 0 16px; text-transform: uppercase; letter-spacing: 0.05em; }
.sg-discount-grid, .sg-points, .sg-tiers, .sg-steps { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1060px; }
.sg-discount-grid li, .sg-points li, .sg-tiers li { border: 1px solid var(--gpen-border); border-radius: 8px; padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; }
.sg-discount-grid h3 { font-family: var(--sg-font-inter); font-size: 14px; font-weight: 500; margin: 0; }
.sg-discount-grid p { font-size: 12px; color: #6b6b6b; margin: 0; }
.sg-discount-steps { max-width: 720px; margin: 10px auto 0; text-align: left; }
.sg-discount-steps h2 { font-size: 14px; letter-spacing: 0.1em; color: #6b6b6b; }
.sg-discount-steps ol { padding-left: 1.2em; }
.sg-points strong, .sg-tiers strong { font-family: var(--sg-font-montserrat); font-size: 16px; }
.sg-points span, .sg-tiers span { font-size: 13px; }
.sg-steps { grid-template-columns: 1fr; max-width: 720px; text-align: left; }
.sg-steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; counter-increment: sgstep; }
.sg-steps { counter-reset: sgstep; }
.sg-steps li::before { content: "0" counter(sgstep); grid-row: span 2; font-family: var(--sg-font-montserrat); font-weight: 700; font-size: 36px; line-height: 1; }
.sg-steps strong { font-family: var(--sg-font-montserrat); font-size: 17px; }
.sg-rewards > p { max-width: 720px; margin: 0 auto 16px; }
@media only screen and (min-width: 768px) {
  .sg-soon > h1 { font-size: 48px; margin-top: 20px; }
  .sg-soon__lead { font-size: 18px; }
  .sg-soon__card { padding: 36px 40px; }
  .sg-discount-grid, .sg-points { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .sg-tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; }
}

/* Rewards page, design pass (Oct 2026). The page was four blocks of identical outlined boxes under same-weight headings.
   Each section now has its own form, so they read apart without heavy boxes:
   steps (number in an outline circle beside the text), ways to earn (grey tiles), how to use your points (a compact
   two-column list: the second points list), VIP tiers (outlined cards, tier name as a tracked label). */
.sg-rewards h2 { font-size: 20px; letter-spacing: 0.08em; margin: 64px 0 24px; }
.sg-rewards h2:first-child { margin-top: 48px; }
.sg-rewards > p { max-width: 560px; margin: -8px auto 20px; color: #6b6b6b; }
.sg-rewards .sg-steps { gap: 20px 32px; }
.sg-rewards .sg-steps li { grid-template-columns: 44px 1fr; column-gap: 16px; align-items: start; }
.sg-rewards .sg-steps li::before { content: counter(sgstep); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #000; border-radius: 50%; font-size: 16px; font-weight: 500; line-height: 1; }
.sg-rewards .sg-steps strong { padding-top: 2px; font-size: 16px; font-weight: 600; }
.sg-rewards .sg-steps span { font-size: 14px; color: #6b6b6b; }
.sg-rewards .sg-points li { padding: 18px 14px; border: 0; border-radius: 15px; background: var(--sg-panel, #f5f4f2); gap: 4px; }
.sg-rewards .sg-points strong { font-size: 18px; font-weight: 600; }
.sg-rewards .sg-points span { font-size: 13px; color: #555; }
.sg-rewards .sg-points ~ .sg-points { display: block; max-width: 560px; margin-left: auto; margin-right: auto; }
.sg-rewards .sg-points ~ .sg-points li { flex-direction: row; justify-content: space-between; align-items: baseline; padding: 14px 4px; background: none; border-radius: 0; border-bottom: 1px solid #e8e8e1; }
.sg-rewards .sg-points ~ .sg-points li:first-child { border-top: 1px solid #e8e8e1; }
.sg-rewards .sg-points ~ .sg-points strong { font-size: 17px; text-transform: uppercase; } /* "$20 OFF" */
.sg-rewards .sg-points ~ .sg-points span { font-size: 14px; color: #6b6b6b; }
.sg-rewards .sg-tiers li { padding: 20px 16px; border: 1px solid var(--sg-rule); border-radius: 15px; gap: 4px; }
.sg-rewards .sg-tiers strong { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.sg-rewards .sg-tiers span { font-size: 13px; }
/* Bronze on the Rewards page (27 Oct): the three steps are solid bronze circles (black numbers), and the points in the
   redeem list sit in bronze outline pills of one width, so the column lines up. Text stays black (bronze text on white
   is too light to read). */
.sg-rewards .sg-steps li::before { border: 0; background: var(--sg-bronze); font-weight: 600; }
.sg-rewards .sg-points ~ .sg-points li { align-items: center; }
.sg-rewards .sg-points ~ .sg-points span { min-width: 104px; padding: 5px 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--sg-bronze); color: #000; font-size: 13px; font-weight: 500; text-align: center; }
/* Rewards page photos (27 Oct), from the asset portal (assets/img/rewards, page content in pages-sg-us/rewards.html):
   - top hero: Olive Green Gravity Infuser by the pool (_STZ2232). Tablet and desktop: 1060px wide, the edges of the
     points tiles and the pill below (wider than the page column), with 15px corners, 24px under the header. Phones: edge to edge, flush with the header,
     like the home feature photos.
   - Refer a friend: black Gravity Infuser on the red sofa (_STZ2827) in the long pill of the product page "Gravity
     Evolved" banner and the blog hero (1170 x 418 with round ends; 2:1 on phones).
   ".rte img" selectors: the parent's .rte img (4px corners) and .rte > :first-child (no top margin) outrank one class. */
.rte > img.sg-page-hero { position: relative; left: 50%; display: block; width: min(1060px, 100vw - 80px); max-width: none; height: auto; aspect-ratio: 1060 / 420; margin: -36px 0 36px; object-fit: cover; object-position: 50% 70%; border-radius: 15px; transform: translateX(-50%); }
.rte img.sg-rewards__photo { display: block; width: 100%; max-width: 1060px; height: auto; aspect-ratio: 1170 / 418; margin: 32px auto 0; object-fit: cover; object-position: 50% 25%; border-radius: 250px; }
@media only screen and (max-width: 767px) {
  .rte > img.sg-page-hero { width: 100vw; aspect-ratio: 4 / 3; margin: -40px 0 28px; border-radius: 0; }
  .rte img.sg-rewards__photo { aspect-ratio: 2 / 1; margin-top: 24px; }
}

/* ---------------------------------------------------------------- affiliate (snippets/become-affiliate.liquid) */
.sg-affiliate { text-align: center; margin: 0 auto 40px; }
.sg-affiliate > h1 { font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 36px; line-height: 1.15; margin: 10px 0 20px; }
.sg-affiliate > h3 { font-size: 22px; line-height: 1.35; max-width: 900px; margin: 0 auto 30px; text-wrap: balance; }
.sg-affiliate__steps { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; max-width: 1000px; }
.sg-affiliate__steps p { margin: 12px 0 0; font-size: 16px; }
.sg-step-num { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #000; color: #fff; font-family: var(--sg-font-montserrat); font-size: 24px; }
.sg-affiliate__cta { margin: 36px 0 0; }
@media only screen and (min-width: 768px) {
  .sg-affiliate > h1 { font-size: 44px; }
  .sg-affiliate > h3 { font-size: 24px; }
  .sg-affiliate__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- landing template (page-templates/sg-landing.php) */
.sg-landing-page { overflow-x: clip; }
.sg-landing img { max-width: 100%; height: auto; display: block; }

/* special-1 (templates/page.special-1.json) */
.sg-special__hero img { width: 100%; }
.sg-special__wrap { max-width: 1200px; margin: 0 auto; padding: 30px 15px 50px; }
.sg-special__headline { text-align: center; }
.sg-special__headline h1 { font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 32px; letter-spacing: -2px; line-height: 1.15; margin: 0 0 16px; }
.sg-special__headline p { max-width: 750px; margin: 0 auto; font-size: 16px; }
.sg-special hr { border: 0; border-top: 1px solid var(--gpen-border); margin: 30px 0; }
.sg-special__cards { display: grid; gap: 20px; }
.sg-card { position: relative; display: block; padding: 20px; border-radius: 15px; text-decoration: none !important; color: #fff; }
.sg-card h3 { color: #fff; font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 32px; letter-spacing: -2px; line-height: 1.1; margin: 0; }
.sg-card h3 b { font-weight: 700; }
.sg-card--1 { background: linear-gradient(to bottom, #464646, #000); }
.sg-card--3 { background: #aec5a3; }
.sg-card__plus { position: absolute; right: 15px; bottom: 15px; width: 33px; }
.sg-card__img { margin: 10px auto 0; max-height: 360px; width: auto; }
.sg-flip { display: grid; gap: 14px; align-items: center; text-align: center; margin: 0 0 30px; }
.sg-flip__img { order: -1; }
.sg-flip__img img { margin: 0 auto; }
.sg-flip h3 { font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 30px; letter-spacing: -2px; margin: 0 0 10px; }
.sg-flip p { font-size: 16px; margin: 0; }
.sg-special__quotes-title { text-align: center; font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 26px; letter-spacing: -1px; margin: 40px 0 20px; }
.sg-quotes { list-style: none; margin: 0 -15px; padding: 0 15px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; }
.sg-quote { scroll-snap-align: center; text-align: center; padding: 24px 18px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); background: #fff; }
.sg-quote__stars { letter-spacing: 3px; }
.sg-quote h4 { font-family: var(--sg-font-montserrat); font-weight: 700; font-size: 16px; margin: 10px 0; }
.sg-quote p { font-size: 14px; margin: 0 0 10px; }
.sg-quote__author { font-weight: 600; margin: 0 !important; }
.sg-special__support { text-align: center; margin: 40px auto 0; max-width: 520px; }
.sg-special__support img { max-width: 330px; margin: 0 auto; border-radius: 50%; }
.sg-special__support h3 { font-family: var(--sg-font-montserrat); font-weight: 400; font-size: 32px; letter-spacing: -2px; margin: 24px 0 10px; }
.sg-special__support p { font-size: 16px; margin: 0 0 24px; }
@media only screen and (min-width: 768px) {
  .sg-special__wrap { padding: 40px 30px 60px; }
  .sg-special__headline h1 { font-size: 40px; }
  .sg-special hr { margin: 50px 0; }
  .sg-special__cards { grid-template-columns: 1fr 1fr; margin-bottom: 100px; }
  .sg-card__img { margin: 10px auto -110px; max-height: 420px; }
  .sg-flip { grid-template-columns: 5fr 7fr; text-align: left; gap: 30px; margin-bottom: 0; }
  .sg-flip__img { order: 0; }
  .sg-flip--rev { grid-template-columns: 7fr 5fr; }
  .sg-flip--rev .sg-flip__img { order: -1; }
  .sg-quotes { margin: 0; padding: 10px 0 20px; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) { .sg-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Be$os (templates/page.besos.liquid) */
.sg-besos { background: #000; color: #fff; }
.sg-besos .besos-container { max-width: 1200px; margin: 0 auto; padding: 40px 15px; }
.besos-logos { text-align: center; margin-bottom: 40px; }
.besos-logos__pair { display: flex; align-items: center; justify-content: center; gap: 12px; }
.besos-logos__pair img { width: 40%; max-width: 450px; }
.besos-logos__pair p { margin: 0; font-family: var(--sg-font-montserrat); font-weight: 700; font-size: 16px; color: #fff; }
.besos-logo-1 { width: 100%; max-width: min(160px, 100%) !important; margin: 24px auto; }
.besos-logo-2 { width: 100%; max-width: min(500px, 100%) !important; margin: 0 auto; }
.besos-unit { text-align: center; }
.besos-unit__img { width: 100%; max-width: min(500px, 100%) !important; margin: 0 auto 30px; }
.besos-btn { display: inline-block; background: red; color: #fff !important; padding: 5px 15px; border-radius: 25px; text-transform: uppercase; font-style: italic; font-weight: 800; font-family: var(--sg-font-montserrat); text-decoration: none !important; }
.besos-kit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 40px 0; background: radial-gradient(ellipse, #4a4a4a 0%, #000 60%); }
.besos-mission { display: grid; gap: 20px; align-items: center; }
.besos-mission__text { order: -1; text-align: center; }
.besos-script { margin: 0 auto 20px; max-width: min(420px, 100%) !important; width: 100%; }
.besos-mission__text p { color: #fff; font-size: 20px; line-height: 1.5; margin: 0; }
.besos-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 15px 16px; }
.besos-foot a { color: #fff; text-transform: uppercase; font-weight: 700; font-size: 13px; text-decoration: none; }
.besos-foot a:hover { color: red; }
.besos-foot img { max-width: 140px; }
@media only screen and (min-width: 768px) {
  .sg-besos .besos-container { padding: 60px 15px; }
  .besos-logos { margin-bottom: 60px; }
  .besos-logos__pair p { font-size: 48px; }
  .besos-logo-1 { max-width: min(200px, 100%) !important; margin: 30px auto; }
  .besos-kit { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 60px 0; }
  .besos-mission { grid-template-columns: 1fr 1fr; }
  .besos-mission__text { order: 0; }
  .besos-mission__text p { font-size: 26px; }
  .besos-foot img { max-width: 200px; }
}
@media only screen and (min-width: 1025px) { .besos-mission__text p { font-size: 32px; } }

/* SG 17 Oct: the HubSpot copy (wholesale) and the registration form */
.sg-cf7 .form-hint { display: block; margin-top: 6px; font-size: 13px; color: #6b6b6b; }
.sg-cf7 .form-optins p { font-size: 13px; line-height: 1.55; }
.sg-cf7 .register-offer { font-family: var(--sg-font-montserrat); font-size: 15px; letter-spacing: 0.04em; background: var(--sg-panel); padding: 12px 16px; margin: 0 0 16px; }
.sg-cf7 .register-offer strong { font-style: normal; } /* the parent sets this italic (G Pen) */
.sg-cf7 .form-optins__title { font-family: var(--sg-font-montserrat); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; }