/* --------------------------------------------------------------- reference/plan-select.html Six full-bleed horizontal surface bands stacked flush (NOT a single cream surface with discrete cards). Architecture per pixel-evidence pass on evidence/manual-screenshots/plan-select/mobile/01-plan-suggestion.png (414 × 3992 mobile capture — Reference's actual funnel width). Band A — page surface white (#ffffff) back chrome + RYAN'S RECOMMENDED ... eyebrow Band B — plan-card hero: vertical gradient surface-mint (#b4e0d8) -> surface (#f6f4ee) rounded TOP corners only (rounded-md 16px), square bottom, edge-to-edge navy-deep chip with the headline price (e.g. "$169 TODAY"), with a body-sm sub-line directly below disclosing recurring cost, plan-name headline (display-md serif), teal eyebrow with coral dot punctuation, hero photo (5/3 aspect, plan-relevant composition) Band C — surface cream (#f6f4ee), edge-to-edge, no rounding "What's included" eyebrow, 3 WHITE included-feature-cards (surface-card-white, NOT surface-mint-pale), coral refund strip, Coral CTA #1 Band D — page surface white (#ffffff) doctor blockquote + avatar + attribution Band E — surface-mint-pale (#dcf5f0), edge-to-edge "What comes next?" title, 5-step stepper with multi-state markers step 1: -complete (success-green + white check) step 2: -active (accent-coral + white "2") step 3-5: -upcoming (primary teal + white n) thin mint-teal rail connecting successive markers, Coral CTA #2 Band F — page surface white (#ffffff) "What to expect from the reference" title, 3 cards with DIFFERENT FILLS: card 1 (Lose 20%) -> surface cream card 2 (Beyond medication) -> surface-mint card 3 (Keep it off) -> surface-mint-pale Coral CTA #3, plain footnote on white (no warm-tan band) Band transitions are sharp horizontal slabs — no rounded bottoms, no centered gutters. Only the plan-card top of band B is rounded. Token discipline: every styling value resolves to var(--wag-*) except the documented body fallback color used for the reference-page background (a soft slate that is intentionally outside the Reference palette so it reads as scaffolding). --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--wag-color-surface-card-white); color: var(--wag-color-ink); font-family: var(--wag-typography-body-md-font-family); font-size: var(--wag-typography-body-md-font-size); line-height: var(--wag-typography-body-md-line-height); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Funnel column ---------- Mobile width is canonical (Reference renders at ~414px). Desktop just centers the column with white gutters. Bands are edge-to-edge within the column. */ .wag-page { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; } /* ---------- wag-photo-placeholder primitive ---------- */ .wag-photo-placeholder { background: var(--wag-component-photo-placeholder-background-color); color: var(--wag-component-photo-placeholder-text-color); border: 1px dashed var(--wag-color-outline); border-radius: var(--wag-component-photo-placeholder-rounded); display: grid; place-items: center; padding: var(--wag-spacing-md); text-align: center; overflow: hidden; } .wag-photo-placeholder__label { font-family: var(--wag-component-photo-placeholder-font-family); font-size: var(--wag-component-photo-placeholder-font-size); font-weight: var(--wag-component-photo-placeholder-font-weight); line-height: var(--wag-component-photo-placeholder-line-height); letter-spacing: 0.02em; max-width: 28ch; } .wag-photo-placeholder[data-aspect="16/9"] { aspect-ratio: 16 / 9; } .wag-photo-placeholder[data-aspect="5/3"] { aspect-ratio: 5 / 3; } .wag-photo-placeholder[data-aspect="4/3"] { aspect-ratio: 4 / 3; } .wag-photo-placeholder[data-aspect="1/1"] { aspect-ratio: 1 / 1; } .wag-photo-placeholder[data-aspect="3/4"] { aspect-ratio: 3 / 4; } /* ---------- Coral CTA (shared, used 3x) ---------- */ .wag-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; cursor: pointer; border: 0; background: var(--wag-component-button-primary-background-color); color: var(--wag-component-button-primary-text-color); border-radius: var(--wag-component-button-primary-rounded); padding: var(--wag-component-button-primary-padding); font-family: var(--wag-component-button-primary-font-family); font-size: var(--wag-component-button-primary-font-size); font-weight: var(--wag-component-button-primary-font-weight); line-height: var(--wag-component-button-primary-line-height); transition: background-color 120ms ease-out, transform 60ms ease-out; } .wag-cta:hover, .wag-cta:focus-visible { background: var(--wag-component-button-primary-hover-background-color); outline: none; } .wag-cta:active { transform: translateY(1px); } /* ============================================================ Band A — white page surface, chrome + eyebrow ============================================================ */ .band-a { background: var(--wag-color-surface-card-white); padding: var(--wag-spacing-md) var(--wag-spacing-gutter) var(--wag-spacing-md); } .wag-chrome { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: var(--wag-spacing-sm); min-height: 24px; } .wag-back { grid-column: 1; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--wag-color-ink); display: inline-flex; align-items: center; justify-content: center; } .wag-back svg { width: 18px; height: 16px; display: block; } .plan-eyebrow { margin: var(--wag-spacing-md) 0 0; text-align: center; color: var(--wag-color-ink); font-family: var(--wag-typography-eyebrow-font-family); font-size: var(--wag-typography-eyebrow-font-size); font-weight: var(--wag-typography-eyebrow-font-weight); letter-spacing: var(--wag-typography-eyebrow-letter-spacing); line-height: var(--wag-typography-eyebrow-line-height); text-transform: uppercase; } /* ============================================================ Band B — plan-card hero (mint -> cream gradient, rounded top) ============================================================ */ .band-b { background: linear-gradient( to bottom, var(--wag-color-surface-mint) 0%, var(--wag-color-surface) 100% ); /* Bottom padding driven to zero so the hero image sits flush against band-c's top edge. The image's own transparent bottom margin (and band-c's top padding) provide breathing room. This matches Reference's tight cadence between the photo and the "What's included" eyebrow per side-by-side pixel comparison. */ padding: var(--wag-spacing-xl) var(--wag-spacing-gutter) 0; border-top-left-radius: var(--wag-rounded-md); border-top-right-radius: var(--wag-rounded-md); animation: plan-card-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes plan-card-enter { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Navy starts-at chip, sits BELOW the sub-eyebrow, left-aligned. Per pixel evidence (x=35..110, y=210) the chip fill is rgb(29,58,68) which is exactly --wag-color-navy-deep. Read-as-greenish on mint. */ .plan-chip { display: inline-block; /* Tightened from spacing-lg (32px) to spacing-md (16px) per pixel comparison against Reference's plan-suggestion reference (chip-to-photo gap reads ~24px in Reference; with the chip-sub line absent on ESA Plus, the chip sits directly above the photo and the gap should match Reference's rhythm). */ margin-bottom: var(--wag-spacing-md); background: var(--wag-color-navy-deep); color: var(--wag-color-on-dark); border-radius: var(--wag-rounded-full); padding: 8px 16px; font-family: var(--wag-typography-eyebrow-font-family); font-size: var(--wag-typography-eyebrow-font-size); font-weight: var(--wag-typography-eyebrow-font-weight); letter-spacing: var(--wag-typography-eyebrow-letter-spacing); line-height: var(--wag-typography-eyebrow-line-height); text-transform: uppercase; } /* Plan title is the FIRST element in band B (above the sub-eyebrow and above the chip — order is title → sub-eyebrow → chip → photo). */ .plan-title { margin: 0 0 var(--wag-spacing-sm); text-align: center; font-family: var(--wag-typography-display-md-font-family); font-size: var(--wag-typography-display-md-font-size); font-weight: var(--wag-typography-display-md-font-weight); line-height: var(--wag-typography-display-md-line-height); letter-spacing: var(--wag-typography-display-md-letter-spacing); color: var(--wag-color-ink); } .plan-title sup { font-size: 0.6em; vertical-align: super; } .plan-sub-eyebrow { /* Bottom margin sets the gap from sub-eyebrow to chip. Bumped from spacing-md (16px) to spacing-lg (32px) per pixel comparison against Reference's plan-suggestion reference where the chip sits visibly lower below the sub-eyebrow. */ margin: 0 0 var(--wag-spacing-lg); display: flex; align-items: center; justify-content: center; gap: var(--wag-spacing-sm); color: var(--wag-color-primary); font-family: var(--wag-typography-eyebrow-font-family); font-size: var(--wag-typography-eyebrow-font-size); font-weight: var(--wag-typography-eyebrow-font-weight); letter-spacing: var(--wag-typography-eyebrow-letter-spacing); line-height: var(--wag-typography-eyebrow-line-height); text-transform: uppercase; } .plan-sub-eyebrow__dot { width: 5px; height: 5px; border-radius: var(--wag-rounded-full); background: var(--wag-color-accent-coral); flex-shrink: 0; } .plan-hero-photo { width: 100%; } /* Real-image mode — Reference approach. When the plan-render wrapper has a real hero image, the image is a TRANSPARENT PNG (cut-out) that floats on top of band-b's existing CSS gradient. No baked-in backdrop, no compositing — the band's own gradient is the only backdrop, and the objects appear to live in the page rather than be pasted onto it. Image extends edge-to-edge of the column (no horizontal padding) so the objects have the maximum room. Negative bottom margin is removed — it was causing band-c content to overlap the image's lowest object footprint. The PNG's internal bottom transparency (~24px at rendered size) provides natural breathing room between the image and band-c, which is fine. Tighter cadence comes from band-b's 0 bottom padding and band-c's spacing-md top padding instead. */ .plan-render[data-has-hero-image="true"] .plan-hero-photo { margin: 0 calc(var(--wag-spacing-gutter) * -1); width: calc(100% + var(--wag-spacing-gutter) * 2); display: block; } .plan-render[data-has-hero-image="true"] .plan-hero-photo img { display: block; width: 100%; height: auto; } .plan-render[data-has-hero-image="true"] .plan-hero-photo .wag-photo-placeholder__label { display: none; } /* Suppress the dashed placeholder chrome when a real image is in. */ .plan-render[data-has-hero-image="true"] .plan-hero-photo.wag-photo-placeholder { background: transparent; border: 0; padding: 0; aspect-ratio: auto; } /* Micro-line directly under the chip — discloses recurring price without competing with the chip's $-headline. Body-sm, slate ink, left-aligned to track with the chip above it. When empty (some plans omit it intentionally), collapses to zero height so the chip sits flush against the photo. */ .plan-chip-sub { display: block; margin: 6px 0 var(--wag-spacing-md); font-family: var(--wag-typography-body-sm-font-family); font-size: var(--wag-typography-body-sm-font-size); line-height: var(--wag-typography-body-sm-line-height); color: var(--wag-color-ink-slate); } .plan-chip-sub:empty { display: none; } /* ============================================================ Band C — cream surface (continues plan card visually) "What's included" + refund strip + CTA #1 ============================================================ */ .band-c { background: var(--wag-color-surface); /* Top padding tightened from spacing-lg (32px) to spacing-md (16px) per Reference comparison — keeps "What's included" close to the image bottom. */ padding: var(--wag-spacing-md) var(--wag-spacing-gutter) var(--wag-spacing-xl); } .included-eyebrow { margin: 0 0 var(--wag-spacing-md); font-family: var(--wag-typography-eyebrow-font-family); font-size: var(--wag-typography-eyebrow-font-size); font-weight: var(--wag-typography-eyebrow-font-weight); letter-spacing: var(--wag-typography-eyebrow-letter-spacing); line-height: var(--wag-typography-eyebrow-line-height); color: var(--wag-color-ink); text-transform: uppercase; } /* Aggregate $-value accent. Sits above the included-eyebrow as a small coral-toned line. Sells the value-stack without crowding the eyebrow's own typography. */ .included-value-accent { margin: 0 0 4px; font-family: var(--wag-typography-body-sm-font-family); font-size: var(--wag-typography-body-sm-font-size); line-height: var(--wag-typography-body-sm-line-height); color: var(--wag-color-accent-coral-deep); font-weight: 600; } .included-value-accent:empty { display: none; } .included-stack { display: flex; flex-direction: column; gap: var(--wag-spacing-sm); margin: 0 0 var(--wag-spacing-lg); } /* White feature cards on the cream band. Each card has: • subtle hairline outline (var(--wag-color-outline)), • a D-shaped (left-edge-flat / right-edge-rounded) FULL-HEIGHT tinted region on the right that holds the product photo, • tinted region color varies per card (peach / mint / peach), • optional underlined emphasis in the body text, color-matched to the right-region tint. Override of the legacy `included-feature-card` token which was surface-mint-pale — plan-select uses surface-card-white per pixel evidence. */ .feature-card { display: grid; /* Single-column text-first layout. The right-side media region was removed in favor of full-width body copy so the value props can breathe and the cards read as a cohesive Reference- style "what's included" stack rather than a product grid. The media markup (`.feature-card__media`) is hidden via the rule below; the JSON `mediaImage`/`mediaTint` fields are still emitted to `#plan-data` so the right column can be reinstated in one rule swap if needed. */ grid-template-columns: 1fr; align-items: stretch; background: var(--wag-color-surface-card-white); color: var(--wag-color-ink); border-radius: var(--wag-rounded-md); border: 1px solid var(--wag-color-outline); overflow: hidden; min-height: 0; /* Anchor for `.feature-card__wedge`, the corner badge that marks Plus-tier inclusions (PSD, Verify.Dog, Free Renewals). Absolute-positioned children would otherwise climb to the `.included-stack` ancestor and land in the wrong corner. */ position: relative; } .feature-card__text { display: flex; flex-direction: column; justify-content: center; padding: var(--wag-spacing-md); text-align: left; } .feature-card__text strong { display: block; margin-bottom: 4px; font-family: var(--wag-typography-label-lg-font-family); font-size: var(--wag-typography-label-lg-font-size); font-weight: var(--wag-typography-label-lg-font-weight); line-height: var(--wag-typography-label-lg-line-height); color: var(--wag-color-ink); } .feature-card__text p { margin: 0; font-family: var(--wag-typography-body-md-font-family); font-size: var(--wag-typography-body-md-font-size); line-height: var(--wag-typography-body-md-line-height); color: var(--wag-color-ink); } .feature-card__text sup { font-size: 0.75em; vertical-align: super; } /* Underlined keyword inside body — color-matched to the tinted right region for visual rhyme. Two variants per evidence: coral underline on cards with a peach tint; mint-deep underline on cards with a mint tint. */ .feature-card__text .u-coral { text-decoration: underline; text-decoration-color: var(--wag-color-accent-coral); text-decoration-thickness: 2px; text-underline-offset: 2px; } .feature-card__text .u-green { text-decoration: underline; text-decoration-color: var(--wag-color-success-green); text-decoration-thickness: 2px; text-underline-offset: 2px; } /* The right-side D-region. Full-height, flush right. Card's own rounded-md (16px) applied to the right corners so the region meets the card edge cleanly. LEFT side gets a large 100px border-radius — produces a generous capsule arc that reads as the tan D bulging out from the right edge of the card. Width of this region is governed by the parent's grid-template-columns (currently 32%) — kept tight so the tan region hugs the image rather than extending well past it. Background tint varies via modifier class. */ .feature-card__media { position: relative; align-self: stretch; display: grid; place-items: center; /* No padding — the absolutely-positioned image is sized as a percentage of the media region's full box. Padding would shrink the image's reference box and leave an unwanted gap between the image and the right edge / D curve. */ padding: 0; overflow: hidden; border-top-right-radius: var(--wag-rounded-md); border-bottom-right-radius: var(--wag-rounded-md); /* Elliptical radius: 24px horizontal / 60px vertical. The horizontal value controls how far LEFT the curve extends (smaller = tan region hugs closer to the card's right edge). The vertical value controls how MUCH OF the edge is curved (larger = the curve spans more of the top/bottom). This produces a tall, gentle arc instead of a tight semicircle that bulges leftward at its midpoint. */ border-top-left-radius: 24px 60px; border-bottom-left-radius: 24px 60px; } /* Right-region tints. Three variants: • cream — warm cream, same as band-c page background. Use only when the photo subject has its own distinct color so the subject pops against the cream (matches Reference's pen-on-peach when the pen is blue). • mint — saturated mint. Best behind photos with a phone or other neutral-tone subject. • warm-tan — peach-leaning warm tan. Use when the photo subject is itself cream-toned (an ESA letter, a paper document) — the cream-on-cream issue disappears against the deeper tan ground. This is the closest token-native equivalent of Reference's pen-card peach tint. */ .feature-card__media--cream { background: var(--wag-color-surface); } .feature-card__media--mint { background: var(--wag-color-surface-mint); } .feature-card__media--warm-tan { background: var(--wag-color-surface-warm-tan); } .feature-card__media .wag-photo-placeholder { width: 100%; height: 100%; background: transparent; border: 0; padding: 0; aspect-ratio: auto; } .feature-card__media .wag-photo-placeholder__label { font-size: 10px; max-width: 14ch; color: var(--wag-component-body-text-secondary-text-color); } /* Real product image inside the D-region. Absolutely positioned so it CANNOT push the card taller — the card's height is driven by the text column, not by the image's natural dimensions. Image fills the media region's height with object-fit: contain so its full content stays visible (no cropping), and is right-aligned so portrait-aspect images (like a letter) hug the card's outer edge — matching Reference's pen-card composition where the product sits to the right of the D, with the tan region peeking out to the left. PNG should be tightly cropped to its content bbox so right- alignment puts the object actually against the card edge. */ .feature-card__media img.feature-card__media-image { position: absolute; /* Image fills 62% × 66% of the now-padding-free D-region, vertically centered, anchored to the right edge with a small inset. Breathing room on all four sides keeps the image from touching the tan D's curve. */ width: 62%; height: 66%; right: 6%; top: 50%; transform: translateY(-50%); object-fit: contain; object-position: right center; display: block; } /* ---------- Right-side media column: hidden ------------- * The right-side image + tinted D-region was removed from every feature-card across all three plans in favor of a text-first, full-width body layout. Hiding `.feature-card__media` here (after the production rule above sets `display: grid`) lets us reinstate the image column in one line by deleting this block — the underlying production grid, tint, image- sizing, and slot-specific overrides remain intact and ready. JSON `mediaImage` / `mediaTint` / `mediaImageAlt` fields are still emitted to `#plan-data` for the same reason. */ .feature-card__media { display: none; } /* Per-card image size overrides. The shared 62% × 66% baseline above is tuned for a small portrait object inside the D-region; some images need to read larger to feel balanced. Keep these overrides scoped to a single slot so other cards stay untouched. NOTE: These rules are dead code while `.feature-card__media` is hidden above. Kept intact so a future revert is a single-line change instead of a full restore. */ .feature-card[data-feature-slot="included-feature-1"] .feature-card__media img.feature-card__media-image { width: 78%; height: 78%; } .feature-card[data-feature-slot="included-feature-2"] .feature-card__media img.feature-card__media-image { width: 92%; height: 92%; right: 4%; } /* Basic ESA card 2 holds the 4-Hour Delivery illustration, which reads more proportionally to its sibling cards at a slightly smaller scale than the Multi-Pet Verify.Dog composition. The illustration has equal padding on both sides and is meant to feel centered (unlike the right-anchored product photos used by the other cards), so override the inherited right-anchor and horizontally center it within the D-region. Scoped to Basic ESA so it doesn't affect the Multi-Pet image. */ .plan-render[data-plan-id="basic-esa-letter"] .feature-card[data-feature-slot="included-feature-2"] .feature-card__media img.feature-card__media-image { width: 78%; height: 78%; right: auto; left: 56%; transform: translate(-50%, -50%); object-position: center center; } /* ESA Plus / Multi-Pet ship a 4-card included-stack (Letter, PSD Eligibility, Verify.Dog, Free Renewals). The renumbering shifted the Verify.Dog and Renewals slots by +1, so these scoped rules restore their visual mass at their new slots and tune the newly-inserted PSD card (slot 2) for its landscape hero photo. */ /* Card 2 on ESA Plus / Multi-Pet (PSD Eligibility) holds a landscape airport-gate hero photo. The generic slot-2 rule above (92% × 92%, right-anchored) is tuned for portrait product shots; for a landscape photo it would over-crop. Center it and give it more headroom so the scene reads clearly. */ .plan-render[data-plan-id="esa-plus"] .feature-card[data-feature-slot="included-feature-2"] .feature-card__media img.feature-card__media-image, .plan-render[data-plan-id="esa-plus-multipet"] .feature-card[data-feature-slot="included-feature-2"] .feature-card__media img.feature-card__media-image { width: 96%; height: 96%; right: auto; left: 50%; transform: translate(-50%, -50%); object-fit: cover; object-position: center center; } /* Card 3 on ESA Plus / Multi-Pet (Verify.Dog Membership) — was slot 2 before the PSD insertion. Same portrait product-shot sizing as the original slot-2 rule above so it still reads as the same anchored composition, just one slot lower. */ .plan-render[data-plan-id="esa-plus"] .feature-card[data-feature-slot="included-feature-3"] .feature-card__media img.feature-card__media-image, .plan-render[data-plan-id="esa-plus-multipet"] .feature-card[data-feature-slot="included-feature-3"] .feature-card__media img.feature-card__media-image { width: 92%; height: 92%; right: 4%; } /* Card 4 on ESA Plus / Multi-Pet (Free ESA Renewals) is a portrait stack of three spiral-bound calendars with a coral FREE rubber stamp on the front tile. Sized to match the visual mass of Cards 1 (ESA letter) and 3 (Verify.Dog phone + tag) so the lineup reads as a coherent set rather than tapering off at Card 4. The art is vertically centered (not bottom-anchored like the prior headshot) because the calendar stack has its own composition with no clear "ground" to sit on. Scoped to ESA Plus plans so it doesn't appear on Basic ESA (which only has 3 cards). */ .plan-render[data-plan-id="esa-plus"] .feature-card[data-feature-slot="included-feature-4"] .feature-card__media img.feature-card__media-image, .plan-render[data-plan-id="esa-plus-multipet"] .feature-card[data-feature-slot="included-feature-4"] .feature-card__media img.feature-card__media-image { width: 92%; height: 92%; right: 4%; } /* Card 3 on Basic ESA holds a landscape Handler ID card (aspect ~1.55), which would read tiny at the baseline portrait-tuned 62% × 66%. Bump it up so the card actually reads as a card. */ .plan-render[data-plan-id="basic-esa-letter"] .feature-card[data-feature-slot="included-feature-3"] .feature-card__media img.feature-card__media-image { width: 78%; height: 78%; right: 4%; } /* ---------- Feature-card corner wedge ------------------- * Mint corner badge that marks Plus-tier inclusions (PSD Eligibility, Verify.Dog Membership, Free ESA Renewals). Bleeds into the card's top-left corner with a single bottom-right radius so it reads as a "tucked tab" rather than a floating pill. Color is mint (#b4e0d8) — same family as the band-b hero and the Verify.Dog media-tint, so the wedge feels like an established part of the Plus visual identity instead of a new accent. Eyebrow text stays in primary teal so it inherits the page's existing label vocabulary. Rendered by `applyFeatureEyebrows()` on every plan swap for any feature that declares `eyebrow` in `#plan-data`. Cards without an `eyebrow` field never receive the wedge and look identical to before, so the base ESA Letter card (and all 3 Basic ESA cards) are unaffected. */ .feature-card__wedge { position: absolute; top: 0; left: 0; padding: 8px 14px 8px 12px; border-radius: 0 0 12px 0; background: var(--wag-color-surface-mint); color: var(--wag-color-primary); font-family: var(--wag-typography-eyebrow-font-family); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; pointer-events: none; z-index: 1; /* float above the right-region media tint */ } /* Bump the text column's top padding ONLY when a wedge is present, so the title doesn't collide with the badge. The `.has-wedge` modifier is added by `applyFeatureEyebrows()`. */ .feature-card.has-wedge .feature-card__text { padding-top: 38px; } /* Tiny circular avatar inset bottom-right of card 3 — overlays the D-region. Pinned to the bottom-right corner. */ .feature-card__media-avatar { position: absolute; right: var(--wag-spacing-sm); bottom: var(--wag-spacing-sm); width: 36px; height: 36px; border-radius: var(--wag-rounded-full); background: var(--wag-color-surface-card-white); border: 2px solid var(--wag-color-surface-card-white); display: grid; place-items: center; overflow: hidden; font-size: 9px; color: var(--wag-component-body-text-secondary-text-color); } /* Coral refund strip — white pill with hairline border, coral diamonds OUTSIDE the pill (flanking it). Mirrors the included- feature-card vocabulary: white surface + hairline + coral emphasis. The pill has a coral underline on the keyword. */ .refund-strip { display: flex; align-items: center; justify-content: center; gap: var(--wag-spacing-md); padding: 0; background: transparent; margin: 0 0 var(--wag-spacing-lg); } .refund-strip__pill { flex: 1; /* Inline-block (not flex) so the literal whitespace between the inner spans collapses to a normal word-space — flex layout adds its own gap on top of the HTML space, which visually reads as "two spaces" between the underlined "Full refund" and the rest of the line. */ display: inline-block; text-align: center; padding: var(--wag-spacing-md); background: var(--wag-color-surface-card-white); border: 1px solid var(--wag-color-outline); border-radius: var(--wag-rounded-md); font-family: var(--wag-typography-body-md-font-family); /* Fluid font-size: scales with the band-e container's inline- size so the "Full refund if you're not approved" text stays on one line even in narrow card columns. At ~440px container width and above we sit at the body-md ceiling (16px); below that the text shrinks fluidly down to an 11px floor. */ font-size: clamp(11px, 3.6cqi, var(--wag-typography-body-md-font-size)); line-height: var(--wag-typography-body-md-line-height); color: var(--wag-color-ink); text-align: center; white-space: nowrap; } .refund-strip__pill .u-coral { text-decoration: underline; text-decoration-color: var(--wag-color-accent-coral); text-decoration-thickness: 2px; text-underline-offset: 2px; font-weight: 700; } .coral-diamond { flex-shrink: 0; width: 14px; height: 14px; color: var(--wag-color-accent-coral); } /* ============================================================ Band C2 — Other plans available (multi-plan picker) ============================================================ Two compressed selectable plan cards in the same vocabulary as Reference's package-selector screen (Reference/Plan Select/Mobile/02-package-selector.png), inverted into a band that sits below the recommended-plan body. The compressed card is structurally a `feature-card` with the D-region mirrored to the LEFT instead of the right. */ .band-c2 { background: var(--wag-color-surface); padding: var(--wag-spacing-lg) var(--wag-spacing-gutter) var(--wag-spacing-xl); } .other-plans-eyebrow { margin: 0 0 var(--wag-spacing-md); font-family: var(--wag-typography-eyebrow-font-family); font-size: var(--wag-typography-eyebrow-font-size); font-weight: var(--wag-typography-eyebrow-font-weight); letter-spacing: var(--wag-typography-eyebrow-letter-spacing); line-height: var(--wag-typography-eyebrow-line-height); color: var(--wag-color-ink); text-transform: uppercase; } .other-plans-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--wag-spacing-sm); } .other-plans-list li { margin: 0; } .other-plan-card { display: grid; grid-template-columns: 38% 1fr; align-items: stretch; width: 100%; min-height: 132px; background: var(--wag-color-surface-card-white); color: var(--wag-color-ink); border-radius: var(--wag-rounded-md); border: 1px solid var(--wag-color-outline); overflow: hidden; padding: 0; cursor: pointer; text-align: left; font: inherit; transition: border-color 160ms ease-out, box-shadow 160ms ease-out; } .other-plan-card:hover { border-color: var(--wag-color-outline-strong); } .other-plan-card:focus-visible { outline: none; border-color: var(--wag-color-primary); box-shadow: 0 0 0 2px var(--wag-color-primary); } .other-plan-card[aria-pressed="true"] { border-color: var(--wag-color-primary); box-shadow: inset 0 0 0 1px var(--wag-color-primary); } .other-plan-card__media { align-self: stretch; display: grid; place-items: center; padding: var(--wag-spacing-xs); overflow: hidden; border-top-left-radius: var(--wag-rounded-md); border-bottom-left-radius: var(--wag-rounded-md); } .other-plan-card__media--cream { background: var(--wag-color-surface); } .other-plan-card__media--mint { background: var(--wag-color-surface-mint); } .other-plan-card__media .wag-photo-placeholder { width: 100%; height: 100%; background: transparent; border: 0; padding: 0; aspect-ratio: auto; } .other-plan-card__media .wag-photo-placeholder__label { font-size: 10px; max-width: 14ch; color: var(--wag-component-body-text-secondary-text-color); } /* Real-image mode for the compressed-card thumbnails. The plan's hero PNG (designed for the band-b slot at ~500px wide) gets reused here at thumbnail size. Setting width: 100% + height: auto fills the column horizontally and lets the image's natural aspect ratio set the height — landscape heroes will read at maximum size inside the narrow thumbnail column. */ .other-plan-card__media-image { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: center; } .other-plan-card__text { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--wag-spacing-md); } .other-plan-card__title { margin: 0; font-family: var(--wag-typography-display-md-font-family); font-size: 20px; font-weight: 500; line-height: 1.2; letter-spacing: var(--wag-typography-display-md-letter-spacing); color: var(--wag-color-ink); } .other-plan-card__title sup { font-size: 0.6em; vertical-align: super; } .other-plan-card__chip { align-self: flex-start; background: var(--wag-color-navy-deep); color: var(--wag-color-on-dark); border-radius: var(--wag-rounded-full); padding: 4px 10px; font-family: var(--wag-typography-eyebrow-font-family); font-size: 10px; font-weight: var(--wag-typography-eyebrow-font-weight); letter-spacing: var(--wag-typography-eyebrow-letter-spacing); line-height: var(--wag-typography-eyebrow-line-height); text-transform: uppercase; margin: 2px 0 4px; } .other-plan-card__body { margin: 0; font-family: var(--wag-typography-body-sm-font-family); font-size: var(--wag-typography-body-sm-font-size); line-height: var(--wag-typography-body-sm-line-height); color: var(--wag-color-ink); } .other-plan-card__check { position: absolute; top: var(--wag-spacing-sm); right: var(--wag-spacing-sm); width: 20px; height: 20px; border-radius: var(--wag-rounded-full); background: var(--wag-color-primary); color: var(--wag-color-surface-card-white); display: none; place-items: center; } .other-plan-card__check svg { width: 12px; height: 12px; display: block; } .other-plan-card[aria-pressed="true"] .other-plan-card__check { display: grid; } /* Cross-fade on the swappable wrapper during a plan swap. */ .plan-render { transition: opacity 120ms ease-out; } .plan-render[data-swapping="true"] { opacity: 0; } @media (prefers-reduced-motion: reduce) { .plan-render, .plan-render[data-swapping="true"] { transition: none; opacity: 1; } } /* ============================================================ Band D — white surface, doctor quote ============================================================ */ .band-d { background: var(--wag-color-surface-card-white); padding: var(--wag-spacing-xl) var(--wag-spacing-gutter); text-align: center; } /* Doctor quote — pixel evidence shows a smaller, lighter serif than the display-md plan title. We use the display-md font-family but drop to body-lg-ish size and a regular (non-bold) weight. */ .doc-quote { margin: 0 auto var(--wag-spacing-lg); max-width: 36ch; font-family: var(--wag-typography-display-md-font-family); font-size: var(--wag-typography-body-lg-font-size); font-weight: 400; line-height: 1.4; letter-spacing: var(--wag-typography-display-md-letter-spacing); color: var(--wag-color-ink); } .doc-attribution { margin: 0; display: inline-flex; align-items: center; gap: var(--wag-spacing-sm); text-align: left; font-family: var(--wag-typography-body-sm-font-family); font-size: var(--wag-typography-body-sm-font-size); color: var(--wag-color-ink); } .doc-attribution__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; } .doc-attribution__name { font-weight: 700; color: var(--wag-color-ink); } .doc-attribution__title { color: var(--wag-component-body-text-secondary-text-color); } /* Doctor avatar — applied directly to the placeholder span so the aspect-ratio rule from the base `.wag-photo-placeholder [data-aspect="1/1"]` selector is overridden by an explicit 40× 40px footprint. The avatar lives inline inside the attribution

, so the element must be `inline-flex` to participate in inline flow without becoming a block. */ .doc-avatar.wag-photo-placeholder[data-aspect="1/1"] { width: 40px; height: 40px; padding: 0; aspect-ratio: auto; display: inline-flex; flex-shrink: 0; border-radius: var(--wag-rounded-full); vertical-align: middle; overflow: hidden; } .doc-avatar .wag-photo-placeholder__label { font-size: 8px; max-width: 6ch; } /* When a real image is present, hide the dashed border and the "Dr" fallback label, and have the photo fill the circle without distortion. object-fit: cover crops to fill; object-position is centered so the face stays in frame. */ .doc-avatar.wag-photo-placeholder[data-aspect="1/1"]:has(img) { border: 0; background: transparent; } .doc-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .doc-avatar:has(img) .wag-photo-placeholder__label { display: none; } /* ============================================================ Band E — surface-mint-pale, "What comes next?" stepper ============================================================ */ .band-e { background: var(--wag-color-surface-mint-pale); padding: var(--wag-spacing-xl) var(--wag-spacing-gutter); /* Promote band-e to a CSS container so the refund-strip pill can size its text relative to the band's actual inline-size, not the viewport. This is what makes the pill text scale smoothly inside narrow card columns even when the viewport itself is wider. */ container-type: inline-size; container-name: band-e; } /* Section titles ("What comes next?", "What to expect from the reference", and the per-card titles in band F) all use the SAME on-page scale: display-md font-family + 22px size + 500 weight. This is lighter than the plan-card hero title (display-md @ 600), which keeps the hero title as the rhetorical peak. Pixel evidence shows these lower-section titles render visibly lighter than the hero title. */ .next-steps-title, .expect-title, .expect-card h3 { font-family: var(--wag-typography-display-md-font-family); font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: var(--wag-typography-display-md-letter-spacing); color: var(--wag-color-ink); } .next-steps-title { margin: 0 0 var(--wag-spacing-lg); } .next-steps { margin: 0 0 var(--wag-spacing-lg); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--wag-spacing-md); } /* Each step is a 2-column grid with the marker pinned in column 1 and a vertical rail descending out of the marker into the next step. The rail is drawn as a 2px-wide vertical line via a ::after pseudo on the marker container, except on the last step (which uses :last-child to suppress it). Critical: `align-items: stretch` so the marker column inherits the LI's full height — that's what lets the rail reach down to the next marker even when the body text is multi-line. */ .next-steps li { display: grid; grid-template-columns: 24px 1fr; /* `align-items: start` so the disc itself doesn't get stretched. The vertical rail is drawn separately on the LI itself (see below) so it spans the full LI height regardless of how many lines of body text are present. */ align-items: start; gap: var(--wag-spacing-md); position: relative; } /* Vertical rail — drawn on the LI (not the marker col) so it can stretch the LI's full height regardless of the marker being a 24px non-stretching element. Width 2px, centered on the 24px marker column (left: 11px = (24 - 2) / 2). Starts just below the marker disc (top: 24px) and extends through the bottom of the LI plus the grid gap so it reaches the next LI's disc top. Suppressed on the last step. */ .next-steps li:not(:last-child)::after { content: ""; position: absolute; top: 24px; bottom: calc(var(--wag-spacing-md) * -1); left: 11px; width: 2px; background: var(--wag-color-surface-mint); z-index: 0; } .step-marker-col { position: relative; width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; /* The title is label-lg (16px / 1.4 = 22.4px line-height) with cap-height ~11px. To put the disc's vertical center on the title's optical center, we offset the disc up by half the gap between line-box and cap-height. In practice this is a ~1px negative margin-top — small but it's the visible nudge that makes the row feel aligned. */ margin-top: -1px; } .step-marker { position: relative; z-index: 1; width: 24px; height: 24px; display: grid; place-items: center; flex-shrink: 0; /* Override the component token's font-size so the digit fits the smaller disc. Token default is label-lg (16px), which was sized for a 32px disc. The digit should read as a label glyph, not a chunky badge number. */ font-size: 13px; line-height: 1; } .step-marker[data-state="complete"] { background: var(--wag-component-numbered-step-marker-complete-background-color); color: var(--wag-component-numbered-step-marker-complete-text-color); border-radius: var(--wag-component-numbered-step-marker-complete-rounded); font-family: var(--wag-component-numbered-step-marker-complete-font-family); font-size: var(--wag-component-numbered-step-marker-complete-font-size); font-weight: var(--wag-component-numbered-step-marker-complete-font-weight); line-height: var(--wag-component-numbered-step-marker-complete-line-height); } .step-marker[data-state="active"] { background: var(--wag-component-numbered-step-marker-active-background-color); color: var(--wag-component-numbered-step-marker-active-text-color); border-radius: var(--wag-component-numbered-step-marker-active-rounded); font-family: var(--wag-component-numbered-step-marker-active-font-family); font-size: var(--wag-component-numbered-step-marker-active-font-size); font-weight: var(--wag-component-numbered-step-marker-active-font-weight); line-height: var(--wag-component-numbered-step-marker-active-line-height); } .step-marker[data-state="upcoming"] { background: var(--wag-component-numbered-step-marker-upcoming-background-color); color: var(--wag-component-numbered-step-marker-upcoming-text-color); border-radius: var(--wag-component-numbered-step-marker-upcoming-rounded); font-family: var(--wag-component-numbered-step-marker-upcoming-font-family); font-size: var(--wag-component-numbered-step-marker-upcoming-font-size); font-weight: var(--wag-component-numbered-step-marker-upcoming-font-weight); line-height: var(--wag-component-numbered-step-marker-upcoming-line-height); } .step-marker svg { width: 12px; height: 12px; display: block; } .next-steps li .body strong { display: block; margin-bottom: 2px; font-family: var(--wag-typography-label-lg-font-family); font-size: var(--wag-typography-label-lg-font-size); font-weight: var(--wag-typography-label-lg-font-weight); line-height: var(--wag-typography-label-lg-line-height); color: var(--wag-color-ink); } .next-steps li .body p { margin: 0; font-family: var(--wag-typography-body-sm-font-family); font-size: var(--wag-typography-body-sm-font-size); line-height: var(--wag-typography-body-sm-line-height); color: var(--wag-component-body-text-secondary-text-color); } /* ============================================================ Band F — white surface, "What to expect" + footnote ============================================================ */ .band-f { background: var(--wag-color-surface-card-white); padding: var(--wag-spacing-xl) var(--wag-spacing-gutter) var(--wag-spacing-xxl); } .expect-title { margin: 0 0 var(--wag-spacing-lg); text-align: center; } .expect-cards { display: flex; flex-direction: column; gap: var(--wag-spacing-md); margin: 0 0 var(--wag-spacing-lg); } .expect-card { border-radius: var(--wag-rounded-md); padding: var(--wag-spacing-lg); display: flex; flex-direction: column; gap: var(--wag-spacing-md); color: var(--wag-color-ink); } /* Title centered above the body; body left-aligned below. Mirrors the screenshot — title is the rhetorical peak per card, body is supporting copy. */ .expect-card h3 { text-align: center; } /* Three card fills per pixel evidence — one per card, ascending in lightness from cream to pale-mint. */ .expect-card--cream { background: var(--wag-color-surface); } .expect-card--mint { background: var(--wag-color-surface-mint); } .expect-card--mint-pale { background: var(--wag-color-surface-mint-pale); } .expect-card h3 { margin: 0; } .expect-card p { margin: 0; text-align: left; font-family: var(--wag-typography-body-md-font-family); font-size: var(--wag-typography-body-md-font-size); line-height: var(--wag-typography-body-md-line-height); color: var(--wag-color-ink); } .expect-card p sup { font-size: 0.75em; vertical-align: super; } /* Real-image media region inside an expect-card. Mirrors the band-b hero approach: the PNG is transparent, sits on the card's own tint (no compositing artifacts), and is sized to fit the slot gracefully regardless of portrait/landscape source aspect. 4:3 aspect keeps the card heights aligned across the three cards even while the actual image inside is portrait. */ .expect-card__media { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; } .expect-card__media img { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; object-position: center; display: block; } .wag-footnote { margin-top: var(--wag-spacing-lg); } .wag-footnote p { margin: 0 0 var(--wag-spacing-sm); font-family: var(--wag-typography-caption-font-family); font-size: var(--wag-typography-caption-font-size); font-weight: var(--wag-typography-caption-font-weight); line-height: var(--wag-typography-caption-line-height); color: var(--wag-color-ink-slate); } .wag-footnote p:last-child { margin-bottom: 0; } .wag-footnote p sup { font-size: 0.75em; vertical-align: super; } /* ---------- Mobile tightening (≤ 767px) ---------- At mobile widths the default 24px gutters, 16px feature-card titles, and 20px other-plan-card titles force unwanted line-wraps. We use TWO tiers so larger phones get a more confident title size: • Tier 1 (≤ 767px, all phones): shrink page gutters to 16px, slim the feature-card media column to 24% to preserve photo size, tighten the refund pill and the other-plan-card. • Tier 2 (≤ 374px, only ultra-narrow): additionally drop the feature-card title to 15.5px and trim its text-column padding to 10px so "Verify.Dog Membership" — the longest title — fits on one line. • Tier 3 (375–767px, modern phones): hold the title at 17.5px (BIGGER than the 16px desktop default — phones benefit from larger touch-surface type) with normal padding. Mirrors Reference's small-mobile treatment of 16px gutters and a tighter refund pill while keeping titles readable. Desktop (≥ 768px) keeps all original sizing. */ @media (max-width: 767px) { .wag-page { --wag-spacing-gutter: 16px; } /* Mobile feature-card layout follows the desktop single-column rule above (`grid-template-columns: 1fr`). The legacy 24% media-column override was removed when the right-side image region was hidden — no need to reserve space the media column no longer occupies. */ .refund-strip { gap: var(--wag-spacing-sm); } .refund-strip__pill { /* font-size handled by clamp() in the base rule — no override needed here. Just trim the pill padding so the pill doesn't take excess vertical space in narrow viewports. */ padding: 12px var(--wag-spacing-md); } .coral-diamond { width: 10px; height: 10px; } .other-plan-card { grid-template-columns: 28% 1fr; } .other-plan-card__text { padding: var(--wag-spacing-md) 12px var(--wag-spacing-md) var(--wag-spacing-md); } .other-plan-card__title { font-size: 17px; } } /* Tier 2: 375–767px (modern phones) — push feature-card title UP to 17.5px. We have ~38px of headroom for "Verify.Dog Membership" at this size, so the bump is safe across the entire range. */ @media (min-width: 375px) and (max-width: 767px) { .feature-card__text strong { font-size: 17.5px; } } /* Tier 3: ≤ 374px (ultra-narrow / old phones) — drop the title to 15.5px and trim the text-column padding to 10px so the longest title ("Verify.Dog Membership", 173px wide at 15.5px) fits in the ~178px text column with ~5px of headroom. The 6px-per-side padding trim is invisible in practice because (a) the D-region's concave left curve already creates visual whitespace on the right edge and (b) the card's 1px border + outer gutter visually replace the left padding. */ @media (max-width: 374px) { .feature-card__text { padding: var(--wag-spacing-md) 10px; } .feature-card__text strong { font-size: 15.5px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .band-b { animation: none !important; transform: none; opacity: 1; } }