/* ================================================================
SportsBiff — Mobile CSS
ALL rules are inside @media blocks.
Desktop styles are never modified here.
================================================================ */
/* ── 1. AUTHENTICATED LAYOUT ──────────────────────────────────── */
@media (max-width: 1024px) {
/* Main: remove 280px sidebar offset */
.app-main {
margin-left: 0 !important;
padding: 80px 16px 32px !important;
overflow-x: hidden !important;
}
/* Sidebar: becomes off-screen drawer */
.app-sidebar {
transform: translateX(-100%);
transition: transform 0.25s ease;
z-index: 100;
}
.app-sidebar.sb-open {
transform: translateX(0);
}
/* Backdrop overlay */
.sb-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 99;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.sb-backdrop.sb-open {
opacity: 1;
pointer-events: auto;
}
/* Hamburger button: show on mobile */
.sb-toggle {
display: flex !important;
}
/* Search bar: hide on mobile */
.nav-search {
display: none !important;
}
/* Top nav padding */
header.fixed {
padding-left: 12px;
padding-right: 12px;
}
/* Nav: hide emoji cluster and queries counter */
.nav-logo-emojis { display: none !important; }
.nav-queries { display: none !important; }
/* Hero tab buttons: 2-column grid so all 4 fit cleanly.
A one-row scrolling strip was tried and rejected -- it cut "UPCOMING GAMES"
mid-word and hid a tab and a half behind a swipe. Primary navigation should
not need discovering. Keep the grid. */
.hero-state-selector {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.hero-state-btn {
font-size: 12px !important;
padding: 8px 6px !important;
white-space: nowrap !important;
}
/* Reduce homepage wrapper padding so hero tabs have more room */
.homepage { padding: 16px !important; }
/* Narrow phones (iPhone SE, 320px): a grid column is only ~124px, and
"UPCOMING GAMES" at 12px with Hallmark's 1.5px tracking needs ~155px -- so
the two right-hand labels were clipped to "TOP BIF" / "LIVE GA". The emoji
are bare text nodes inside the button, so they cannot be hidden separately;
the only lever is type. Step it down here rather than reflow the grid. */
@media (max-width: 360px) {
.hero-state-btn {
font-size: 10.5px !important;
letter-spacing: 0.4px !important;
padding: 8px 2px !important;
}
}
/* Upcoming/Live fixture cards -- the TABLET range (768-1024px) keeps the
three-column crest-VS-crest card, which has ~330px per team column there and
reads fine. Phones get the stacked row layout in section 1c below. */
.matchup {
padding: 20px 16px !important;
border-left: none !important;
}
.matchup-content { gap: 16px !important; }
/* One rule BETWEEN cards, not a bottom border on each -- theme_hallmark.css
already draws `.matchup + .matchup { border-top }`, so a per-card bottom
border gave every middle card a double rule. Hallmark's more specific rule
recolours this to var(--hh-rule). */
.upcoming-games-grid .matchup + .matchup {
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.team-logo-placeholder {
width: 72px !important;
height: 72px !important;
font-size: 28px !important;
}
/* Top Biffs: compact cards so all 3 fit on screen */
.hero-biffs-grid { gap: 8px !important; margin-bottom: 16px !important; }
.hero-biff-card { padding: 14px 12px !important; }
.hero-biff-avatar { width: 48px !important; height: 48px !important; font-size: 22px !important; margin: 6px auto 8px !important; }
.hero-biff-name { font-size: 13px !important; margin-bottom: 4px !important; }
.hero-biff-specialty { font-size: 11px !important; margin-bottom: 10px !important; }
.hero-biff-stats { gap: 16px !important; margin-bottom: 8px !important; }
.hero-biff-stat-value { font-size: 16px !important; }
.hero-biff-streak { padding: 3px 10px !important; font-size: 11px !important; }
/* ── Team Dashboard ─────────────────────────────────── */
.team-tab-btn { font-size: 12px !important; padding: 8px 10px !important; }
/* Next Match: one-row [Team | Odds | Team] */
.nm-layout { flex-wrap: nowrap !important; gap: 0 !important; align-items: center !important; }
.nm-team { padding-left: 0 !important; padding-right: 0 !important; min-width: 0 !important; flex: 0 0 31% !important; width: 31% !important; }
.nm-team:first-child { order: 1 !important; padding-right: 5% !important; }
.nm-team:last-child { order: 3 !important; padding-left: 5% !important; }
.nm-odds { order: 2 !important; flex: 0 0 38% !important; width: 38% !important; max-width: 38% !important; padding: 0 3px !important; }
.nm-team img { width: 66px !important; height: 66px !important; margin: 0 auto 3px !important; display: block !important; }
/* Hide position/pts subtitle — causes misaligned logos when one team lacks data */
.nm-team .nm-team-name + div { display: none !important; }
.nm-odds-box { padding: 4px 2px !important; }
.nm-odds-value { font-size: 13px !important; }
/* "1" / "X" / "2" labels above each box */
.nm-odds > div > div > div:first-child { font-size: 10px !important; margin-bottom: 2px !important; }
/* Implied probability % inside box */
.nm-odds-box > div { font-size: 10px !important; margin-top: 1px !important; }
/* O/U and BTTS pills — more specific selector to beat inline styles */
.nm-odds > div > span,
.nm-odds span { font-size: 9px !important; padding: 2px 5px !important; }
/* Form: smaller logos so all 5 fit */
.form-logo, .form-logo img { width: 48px !important; height: 48px !important; }
/* 2-column grids → single column */
.overview-two-col { grid-template-columns: 1fr !important; }
/* League table: compact */
.league-table { font-size: 11px !important; }
.league-table th, .league-table td { padding: 6px 2px !important; }
/* ── Team Header ─────────────────────────────────── */
.team-header { padding: 10px 0 !important; margin-bottom: 6px !important; gap: 10px !important; }
.team-header-logo { width: 64px !important; height: 64px !important; }
.team-header-name { font-size: 18px !important; }
.team-header-stats { gap: 8px !important; flex-shrink: 1 !important; margin-right: 6px !important; }
.team-header-stats > div > div:first-child { font-size: 15px !important; }
/* Next Match: smaller team names, wrap gracefully for long names */
.nm-team-name { font-size: 11px !important; line-height: 1.3 !important; word-break: break-word !important; }
/* Stats tab: 4-col → 2×2 grid */
.stats-hero-grid { grid-template-columns: 1fr 1fr !important; }
/* Squad tab: 2-col → single column */
.squad-grid { grid-template-columns: 1fr !important; }
/* Betting tab: reduce 34px odds font */
.betting-1x2 > div { padding: 8px 4px !important; }
.betting-odd-value { font-size: 22px !important; }
/* Matches tab: H2H banner */
.h2h-banner { gap: 12px !important; }
.h2h-hero { padding: 12px 10px !important; }
.h2h-team { max-width: 88px !important; }
.h2h-team img,
.h2h-team > div:first-child { width: 72px !important; height: 72px !important; display: block !important; margin: 0 auto 6px !important; }
.h2h-name { font-size: 13px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* ── Biff Profile ─────────────────────────────────── */
/* Header card: tighter padding */
.biff-header-card { padding: 18px 16px !important; }
/* Header top row: avatar+name stays on one line, buttons wrap to full-width row below */
.biff-header-top { flex-wrap: wrap !important; gap: 12px !important; }
.biff-left-col { gap: 12px !important; min-width: 0 !important; flex: 1 !important; }
.biff-avatar { width: 48px !important; height: 48px !important; font-size: 22px !important; border-radius: 12px !important; flex-shrink: 0 !important; }
/* Action buttons: full-width below name */
.biff-actions { width: 100% !important; order: 10 !important; }
.biff-subscribe-btn { width: 100% !important; justify-content: center !important; padding: 14px 20px !important; font-size: 15px !important; border-radius: 12px !important; }
/* Pricing banner: stack text + button vertically */
.biff-pricing { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; padding: 14px !important; margin-top: 14px !important; }
.biff-pricing-btn { width: 100% !important; padding: 12px 16px !important; font-size: 13px !important; margin-top: 5% !important; }
/* Tabs: all 4 fit without scrolling — equal-width flex items */
.biff-tabs-row { display: flex !important; width: 100% !important; box-sizing: border-box !important; }
.biff-tabs-row button { flex: 1 !important; min-width: 0 !important; justify-content: center !important; padding: 10px 4px !important; font-size: 11px !important; white-space: nowrap !important; }
/* Stats: 3-column grid */
.biff-stats-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.biff-stats-grid > div { min-width: 0 !important; padding: 14px 8px !important; flex: unset !important; }
.biff-stats-grid > div > div:last-child { font-size: 18px !important; }
/* ── Leaderboard — 5-column: Rank | Name | ROI | Win% | Profit ── */
.lb-header,
.lb-row { grid-template-columns: 32px 1fr 48px 62px 70px !important; padding-left: 10px !important; padding-right: 10px !important; column-gap: 4px !important; }
/* Hide: Tips only — Profit now visible on mobile */
.lb-h-tips, [data-col="tips"] { display: none !important; }
/* Uniform font size across all header cells */
.lb-header, .lb-header > div, .lb-header button { font-size: 10px !important; white-space: nowrap !important; }
.lb-header button:hover { color: var(--accent-primary, var(--accent-primary)) !important; }
/* Compact rank badge */
.lb-row [data-rank] { padding: 2px 6px !important; font-size: 11px !important; }
/* Smaller avatar */
.lb-avatar { width: 28px !important; height: 28px !important; font-size: 14px !important; border-radius: 6px !important; }
/* Hide subtitle line — keeps rows compact */
.lb-biff-sub { display: none !important; }
/* Tighter biff name */
.lb-row .font-semibold { font-size: 13px !important; }
/* Prevent name column overflowing into stat columns */
.lb-biff-col { min-width: 0 !important; overflow: hidden !important; }
.lb-biff-col > div { min-width: 0 !important; }
.lb-biff-col .font-semibold { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
/* ── Biff Card (Directory) ─────────────────────────────────── */
/* Tighter card padding */
.biff-card-item { padding: 16px !important; }
/* Footer: subscriber count on own row, then equal-width button pair */
.biff-card-footer { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
.biff-card-btns { gap: 6px !important; }
.biff-card-btns > form { flex: 1 !important; }
.biff-card-btns > form > button { width: 100% !important; justify-content: center !important; }
.biff-card-btns > a { flex: 1 !important; text-align: center !important; }
/* ── Following Page ─────────────────────────────────── */
/* Header: stack title + link vertically */
.following-header { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; margin-bottom: 16px !important; }
/* Summary strip: 2×2 grid instead of 4-in-a-row */
.following-strip { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.following-strip > div { flex: unset !important; padding: 10px 12px !important; }
/* Shrink big numbers to fit 2-up cards */
.following-strip > div .font-mono { font-size: 18px !important; }
/* Match rows: badge left, teams centre, date right */
.match-row { overflow: hidden !important; }
.mr-left { width: 44px !important; flex-direction: row !important; gap: 0 !important; }
.mr-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 48px !important; flex-shrink: 0 !important; }
.mr-right > span { font-size: 11px !important; color: var(--text-secondary) !important; white-space: nowrap !important; }
.mr-right > div { display: none !important; } /* hide odds, keep date */
.mr-name { width: auto !important; flex: 1 !important; font-size: 14px !important; }
.mr-score { width: 44px !important; flex-shrink: 0 !important; }
.mr-score > span { font-size: 14px !important; }
.match-row > div:nth-child(2) { gap: 6px !important; }
}
/* ── 1b. TABLET REFINEMENTS (768px–1024px): wider than phone ───── */
@media (min-width: 768px) and (max-width: 1024px) {
/* More breathing room than the tight phone padding */
.app-main { padding: 88px 28px 40px !important; }
/* 2-column grids where phone is 1-col */
.overview-two-col { grid-template-columns: repeat(2, 1fr) !important; }
.squad-grid { grid-template-columns: repeat(2, 1fr) !important; }
/* Next Match odds: slightly larger on tablet */
.nm-odds-value { font-size: 15px !important; }
/* Directory list rows: slightly wider padding */
.dir-biff-row { padding: 13px 18px !important; }
.dir-featured-card { flex: 0 0 170px !important; }
.lb-header,
.lb-row { grid-template-columns: 32px 1fr 56px 52px 62px 56px !important; }
}
/* -- 1c. PHONE FIXTURE ROWS (<=767px) --------------------------- */
/*
* The Upcoming Games / Live hero cards on phones.
*
* THE PROBLEM: `.matchup-content` is a three-column flex row --
* [crest + name | VS | crest + name]. At 393px each team column gets ~110px, and
* `.matchup-team .team-name` carries white-space:nowrap + text-overflow:ellipsis
* (home.css), so EVERY name truncated ("Luton T...", "Chelse..."). At ~235px a
* card, barely two fitted on screen.
*
* THE FIX: one team per line with a small crest and its full name, kickoff time
* to the right, competition and venue as quiet kickers. ~130px a card.
*
* `.match-details` becomes display:contents so its three children become
* direct grid items of `.matchup` and can be placed independently. If that ever
* misbehaves the fallback is the plain stacked source order, not a broken page.
*
* 767px and not 1024px on purpose: at 768px iPad portrait the three-column card
* has ~330px per team column, does not truncate, and looks right. Stacking there
* would waste the width.
*
* The markup is SHARED with the Live tab (home/hero/_live.html.erb) -- same
* .matchup / .matchup-content / .match-details, with the live score + MM:SS clock
* inside .matchup-vs where Upcoming has the VS badge. Both get the stacked
* treatment; only the right-hand slot differs.
*/
@media (max-width: 767px) {
.upcoming-games-grid .matchup {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"league league"
"teams when"
"venue venue";
align-items: center;
column-gap: 12px;
row-gap: 6px;
padding: 14px 16px !important;
}
/* Promote the three
s to grid items of .matchup. */
.upcoming-games-grid .match-details { display: contents; }
.upcoming-games-grid .match-league { grid-area: league; text-align: left; margin: 0 !important; }
.upcoming-games-grid .match-venue { grid-area: venue; text-align: left; margin: 0 !important; font-size: 11px; }
/* Teams: a column of full-width rows instead of side-by-side columns. */
.upcoming-games-grid .matchup-content {
grid-area: teams;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 6px !important;
max-width: none;
min-width: 0;
}
.upcoming-games-grid .matchup-team {
flex: none;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
min-width: 0;
}
.upcoming-games-grid .matchup-team .team-name {
/* The actual fix for the truncation. */
white-space: normal;
overflow: visible;
text-overflow: clip;
text-align: left;
font-size: 15px;
line-height: 1.25;
margin-top: 0;
overflow-wrap: anywhere; /* 40-char club names exist -- wrap, never clip */
min-width: 0;
}
/* Crests. theme_hallmark.css is imported AFTER this file and sets
`body.hallmark .matchup-team .team-logo { width: clamp(56px,18vw,96px) !important }`,
so an equal-specificity !important here would lose on source order. Hence the
longer selector -- written twice so it survives a HALLMARK_UI = false revert. */
.upcoming-games-grid .matchup-team .team-logo,
body.hallmark .upcoming-games-grid .matchup-team .team-logo {
width: 30px !important;
height: 30px !important;
padding: 0 !important;
border-radius: 4px;
}
.upcoming-games-grid .team-logo-placeholder {
width: 30px !important;
height: 30px !important;
font-size: 13px !important;
border-width: 1px !important;
}
/* ---- Upcoming: date over time, right of the two team rows ---- */
.hero-preview .matchup-vs { display: none; } /* redundant once stacked */
.hero-preview .match-datetime {
grid-area: when;
align-self: center;
text-align: right;
margin: 0 !important;
white-space: nowrap;
}
.hero-preview .md-sep { display: none; }
.hero-preview .md-date { display: block; font-size: 11px; font-weight: 600; opacity: 0.75; }
.hero-preview .md-time { display: block; font-size: 20px; font-weight: 700; line-height: 1.15; }
/* Home team on top. Upcoming renders away-then-home in the DOM (Live renders
home-then-away), so reorder here rather than in the view -- desktop keeps its
existing left-to-right reading. */
.hero-preview .matchup-away { order: 2; }
/* ---- Live: score + clock take the right slot, LIVE pill rides the kicker ----
.matchup-vs is a child of .matchup-content, NOT of .matchup, so grid-area on it
alone does nothing -- it just floats between the two team rows. .matchup-content
therefore goes display:contents here too, promoting home / vs / away to grid
items that can each be placed. The score column spans both team rows. */
.hero-live .matchup {
grid-template-areas:
"league live"
"home score"
"away score"
"venue venue";
}
.hero-live .matchup-content { display: contents; }
.hero-live .matchup-home { grid-area: home; }
.hero-live .matchup-away { grid-area: away; }
.hero-live .matchup-vs {
grid-area: score;
align-self: center;
justify-self: end;
text-align: right;
}
.hero-live .match-datetime {
grid-area: live;
text-align: right;
margin: 0 !important;
}
/* Score + clock are inline-styled at 28px/18px for the desktop card; too big for
a phone's right-hand column. */
.hero-live .matchup-vs > span:first-child { font-size: 22px !important; letter-spacing: 1px !important; }
.hero-live .matchup-vs .live-timer { font-size: 14px !important; }
}
/* ── 2. DASHBOARD STATS GRID ──────────────────────────────────── */
@media (max-width: 1024px) {
.stats-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 480px) {
.stats-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
/* ── 3. BIFFS DIRECTORY ───────────────────────────────────────── */
@media (max-width: 640px) {
#biffs-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 767px) {
/* Search */
.dir-search-wrap input { font-size: 14px !important; }
/* Sport pills — horizontal scroll, no wrapping */
.dir-sport-pills { flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; }
.dir-sport-pills::-webkit-scrollbar { display: none !important; }
/* Featured strip */
.dir-featured-strip { -webkit-overflow-scrolling: touch !important; }
.dir-featured-strip::-webkit-scrollbar { display: none !important; }
/* List rows — compact on very small screens */
.dir-biff-row { padding: 11px 12px !important; gap: 10px !important; }
}
/* ── 4. ONBOARDING ────────────────────────────────────────────── */
@media (max-width: 600px) {
/* Viewport lock — entire onboarding fits in screen */
.ob-body {
height: 100dvh !important;
padding: 16px 16px 0 !important;
overflow: hidden !important;
}
.ob-logo { margin-bottom: 12px !important; }
/* Yield wrapper fills remaining height after logo */
.ob-step-yield {
flex: 1 !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
align-items: center !important;
overflow: hidden !important;
}
/* Step indicator: fixed height at top */
.ob-step-indicator {
flex-shrink: 0 !important;
margin-bottom: 16px !important;
width: 100% !important;
}
/* Stimulus wrapper: fills space between step indicator and buttons */
.ob-controller-wrap {
flex: 1 !important;
min-height: 0 !important;
overflow: hidden !important;
}
/* Card: flex column, never scrolls (inner list does) */
.ob-card {
flex: 1 !important;
min-height: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
padding: 24px 16px !important;
}
.ob-header { margin-bottom: 28px !important; }
.ob-emoji { font-size: 40px !important; margin-bottom: 8px !important; }
.ob-h1 { font-size: 22px !important; }
.ob-sub { font-size: 14px !important; }
.ob-sports-grid {
grid-template-columns: repeat(3, 1fr) !important;
gap: 10px !important;
}
.ob-submit {
min-width: 0 !important;
width: 100% !important;
padding: 14px 20px !important;
}
/* Nav buttons: pinned at bottom, never scrolled away */
.ob-nav-row {
flex-shrink: 0 !important;
flex-direction: column-reverse !important;
gap: 10px !important;
padding: 12px 0 max(16px, env(safe-area-inset-bottom)) !important;
width: 100% !important;
}
.ob-back-btn {
text-align: center !important;
padding: 12px 20px !important;
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
.ob-right-group {
flex-direction: column !important;
width: 100% !important;
gap: 8px !important;
align-items: stretch !important;
}
/* Skip link: pinned just below nav buttons */
.ob-skip-link {
flex-shrink: 0 !important;
padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
margin-top: 4px !important;
}
/* Players card: compact header */
.ob-player-header { margin-bottom: 12px !important; }
.ob-player-title { font-size: 20px !important; }
.ob-player-subtitle { display: none !important; }
/* Team tabs: smaller */
.ob-team-tabs { gap: 8px !important; margin-bottom: 8px !important; }
.ob-team-tab { padding: 7px 12px !important; gap: 8px !important; }
.ob-team-tab-logo { width: 22px !important; height: 22px !important; border-radius: 11px !important; }
.ob-team-tab-name { font-size: 13px !important; }
/* Search: compact */
.ob-player-search { margin-bottom: 8px !important; }
.ob-player-search input {
padding: 9px 14px 9px 38px !important;
font-size: 14px !important;
border-radius: 10px !important;
}
/* Player list: the ONLY scroller — header/tabs/search stay static */
.ob-player-list {
flex: 1 !important;
min-height: 0 !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
padding-bottom: 8px !important;
}
/* Player cards: more compact */
.ob-player-card { padding: 10px 12px !important; gap: 10px !important; border-radius: 10px !important; }
.ob-player-photo { width: 38px !important; height: 38px !important; border-radius: 50% !important; }
.ob-player-name { font-size: 14px !important; }
/* Complete page: compact internal spacing */
.ob-complete-check { width: 56px !important; height: 56px !important; border-radius: 28px !important; margin-bottom: 12px !important; }
.ob-complete-title { font-size: 24px !important; margin-bottom: 8px !important; }
.ob-complete-sub { font-size: 14px !important; margin-bottom: 16px !important; }
.ob-stat-cards { gap: 8px !important; margin-bottom: 14px !important; }
.ob-stat-card { padding: 10px 12px !important; min-width: 0 !important; flex: 1 !important; }
.ob-stat-value { font-size: 22px !important; }
.ob-preview-card { padding: 12px !important; }
.ob-preview-item { padding: 8px 10px !important; gap: 8px !important; }
.ob-team-strip { display: none !important; }
/* Dashboard welcome hero: hide feature cards + tagline on mobile */
.welcome-cards { display: none !important; }
.welcome-bottom-text { display: none !important; }
/* ── Manage Subscriptions ──────────────────────────────────── */
/* Summary strip: 2×2 grid instead of 4-in-a-row */
.sub-summary-strip { grid-template-columns: repeat(2, 1fr) !important; }
/* Card top row: stack biff info above P&L */
.sub-card-top { flex-direction: column !important; gap: 10px !important; }
/* P&L block: align left, show number + label inline */
.sub-pnl {
text-align: left !important;
min-width: 0 !important;
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
}
.sub-pnl > div:first-child { font-size: 20px !important; }
/* Stats row: responsive grid */
.sub-stats-row {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px 6px !important;
}
/* Actions row: wrap so Cancel button doesn't get squashed */
.sub-actions { flex-wrap: wrap !important; gap: 8px !important; }
.sub-actions > div:first-child { flex-wrap: wrap !important; gap: 8px !important; }
/* Cancel confirm: stack text above buttons, buttons go side-by-side */
.sub-cancel-inner { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
.sub-cancel-inner > div:first-child { margin-left: 0 !important; }
.sub-cancel-inner > div:last-child { display: flex !important; gap: 8px !important; margin-left: 0 !important; flex-shrink: 1 !important; }
.sub-cancel-inner button,
.sub-cancel-inner input[type="submit"] { flex: 1 !important; text-align: center !important; }
}
/* ── 5. HOMEPAGE — gap-fills only (homepage.css covers most) ───── */
/* homepage.css already handles: nav-links, hero-title, footer-links */
@media (max-width: 767px) {
.problem-grid {
flex-direction: column !important;
}
.ai-chat-grid {
flex-direction: column !important;
gap: 40px !important;
}
.testimonial-grid {
grid-template-columns: 1fr !important;
}
.hero-ctas {
flex-direction: column !important;
align-items: stretch !important;
}
.primary-cta, .secondary-cta {
justify-content: center !important;
}
}