is a normal
inline element, not a replaced form control like the checkbox below. */
body .brief-form .privacy-consent a {
position: relative;
display: inline-block;
}
body .brief-form .privacy-consent a::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
}
/* Consent checkbox: visual size 24x24 (was 18x18), tap cell widened to
44px via the label's own grid column so the whole first column is
tappable, not just the 24px box. !important is required only because
the base sheet locks grid-template-columns with !important itself on
.privacy-consent — this is the one override that needs it. */
body .brief-form .privacy-consent {
grid-template-columns: 44px 1fr !important;
min-height: 44px;
}
body .brief-form .privacy-consent input {
width: 24px;
height: 24px;
}
/* .form-honeypot is the anti-spam field (left:-9982px, intentionally
off-screen) — explicitly excluded, untouched by the rules above since
none of them target .brief-form label generically. */
}
/* ==========================================================================
E. MOBILE MIN-HEIGHT + SECTION PADDING RESET
Synaptica Consulting — overlay loaded AFTER assets/index-BW7Gjltz5.css
Do not edit the base sheet. Every rule below lives inside a max-width
media query and carries +1 specificity step (body/parent-class prefix)
over the base selector, because React re-injects a second copy of the
base stylesheet into at runtime and we cannot rely on link order.
No !important used anywhere in this file.
Census method: extracted every `min-height:` declaration from
assets/index-BW7Gjltz5.css with its selector + enclosing @media via a
brace-depth parser, then simulated the real cascade (source-order +
specificity) for widths 1400/800/500/430/360 to get the CURRENT final
computed value per breakpoint — not just the raw declared numbers.
Values quoted in each comment are those simulated finals.
========================================================================== */
/* --------------------------------------------------------------------
GROUP 1 — .ugc-feature card (category B: has absolute children)
Markup: .ugc-feature > .ugc-badge (position:absolute, top:28/left:28,
real text "UGC OS · AI CREATOR ENGINE / 03" — not decorative) ,
.ugc-copy (h3, p, .check-grid — normal flow),
.ugc-machine (own sub-component, handled in Group 2).
Current final min-height: 700px (>560px), 1120px (≤560px), forced even
though the card is already single-column from ≤820px.
Fix: bring .ugc-badge into flow as the first stacked element (matches
DOM/reading order), drop the min-height, trim the top padding that
existed only to clear the old absolute badge.
-------------------------------------------------------------------- */
@media (max-width: 820px) {
body .ugc-feature {
min-height: auto;
padding-top: 40px; /* was 80px, reserved for the now-static badge */
}
body .ugc-feature .ugc-badge {
position: static;
display: inline-flex;
margin-bottom: 20px;
}
}
/* --------------------------------------------------------------------
GROUP 2 — .ugc-machine (category B: 5 absolute step tiles)
Markup: .ugc-machine > .machine-step.step-1..step-5 (each position:
absolute, fixed 132x132px, real content "01 FEED" … "05 QA"),
+ .machine-line (position:absolute, decorative dashed
connector with no text — left absolute, see note below).
Current final min-height: 390px constant, PLUS at ≤560px the base
sheet applies `transform:scale(.82); margin-inline:-30px` which
shrinks the visual but keeps the pre-transform box reserved in flow
(the exact "18% empty gap" bug described in the brief).
Fix: turn the 5 step tiles into a static, wrapping flex row (they
already have a fixed 132px size, so 2 fit per row on any phone width
after the card's 2*24px padding). Drop min-height. At ≤560px remove
the scale/negative-margin hack entirely instead of compensating it,
per the brief's own recommended option — content already resizes
naturally via the flex-wrap.
.machine-line stays position:absolute and is hidden below ≤820px:
it's a purely decorative dashed line hand-tuned to the desktop
diagonal float layout: once the tiles reflow into a static grid its
coordinates cross the tiles at random angles, which reads as a
visual bug rather than a design element. No text, no information
lost.
-------------------------------------------------------------------- */
@media (max-width: 820px) {
body .ugc-machine {
min-height: auto;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
gap: 16px;
padding: 4px 0 8px;
}
body .ugc-machine .machine-step {
position: static; /* top/left/right/bottom from .step-N become inert */
}
body .ugc-machine .machine-line {
display: none; /* decorative connector only, see note above */
}
}
@media (max-width: 560px) {
body .ugc-machine {
transform: none; /* was scale(.82) — reserved box stayed full size */
margin-inline: 0; /* was -30px, compensating for the scale above */
}
}
/* --------------------------------------------------------------------
GROUP 3 — .fibonacci-stage (category B: 5 absolute chip labels)
Lives inside .founder-section. Note: `.founder-mark` referenced in the
base CSS does not exist anywhere in index.html — the real visual child
of .founder-section is .fibonacci-stage (confirmed via markup query).
Markup: .fibonacci-stage > svg.fibonacci-mark (normal flow, sized via
width:min(100%,560px), real intrinsic height) +
5x .fib-chip.fib-chip-one..five (position:absolute, text
labels STRATEGY/CREATIVE/DATA/AI/SECURITY — real content).
Current final min-height: 470px (>820px) / 390px (≤820px) /
310px (≤560px) — this is NOT .service-spiral or .spiral-*, so it is
in scope per the brief.
Fix: bring the 5 chips into flow as a centered, wrapping row below
the diagram (flex-wrap on the parent instead of grid+place-items),
drop the min-height.
-------------------------------------------------------------------- */
@media (max-width: 820px) {
body .fibonacci-stage {
min-height: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
gap: 14px 10px;
}
body .fibonacci-stage .fib-chip {
position: static;
}
}
/* --------------------------------------------------------------------
GROUP 4 — plain content cards (category A: neutralizable)
Verified via markup query: every selector below has ONLY normal-flow
children (span/strong/h3/p/ul/svg-icon/div wrappers laid out with
flex/grid `display`, no `position:absolute` descendants). Their
min-height is pure legacy desktop sizing that never relaxes on
mobile in the base sheet. Safe to drop straight to auto.
Current final values (>820px → ≤820px), all forced even in the
single-column mobile layout:
.automation-card 680px → 620px (constant down to 360px)
.cyber-item 360px → 390px (grows on mobile!)
.cyber-inner 1100px constant at EVERY width — this is a
real bug: an unguarded late-file override
(no @media) clobbers the original 760px
rule for all viewports, desktop included
.performance-card 560px constant
.sequence-card 330px constant
.apps-grid article 440px constant
.ugc-modes article 420px constant
.ugc-spec-grid article 210px → 180px @560
.ugc-evidence>div 255px constant
.ugc-fit article 310px constant
.sector-detail-panel 600px constant
.sector-detail-panel .sector-metric 230px constant (bonus, same card)
.sector-card-tabs button 126px constant
.social-stage 540px constant
.metric-card 125px constant
.social-sales-steps article 178px constant
.pain-card 270px → 245px @560
.ugc-value-strip>div 130px constant
.brief-form 580px constant (form fields stack fine)
.founder-section 660px constant (only after Group 3 fix)
.engine-stat 235px → 175px @560, via a compound
selector `.engine-stat,.engine-stat:
nth-child(3),.engine-stat:nth-child(2n)`
(specificity 0,2,0) — needs the extra
`.engine-stats` ancestor class below to
out-rank it, a plain `body .engine-stat`
would lose to it for 3 of 5 cards.
-------------------------------------------------------------------- */
@media (max-width: 820px) {
body .automation-card,
body .cyber-item,
body .cyber-inner,
body .performance-card,
body .sequence-card,
body .apps-grid article,
body .ugc-modes article,
body .ugc-spec-grid article,
body .ugc-evidence > div,
body .ugc-fit article,
body .sector-detail-panel,
body .sector-card-tabs button,
body .social-stage,
body .metric-card,
body .social-sales-steps article,
body .pain-card,
body .ugc-value-strip > div,
body .brief-form,
body .founder-section {
min-height: auto;
}
body .sector-detail-panel .sector-metric {
min-height: auto;
}
body .engine-stats .engine-stat {
min-height: auto; /* beats the .engine-stat:nth-child(2n)/(3) rule */
}
}
/* --------------------------------------------------------------------
GROUP 5 — section vertical padding rationalization (brief item 4)
The 5 sections named in the brief already step down 150px → 105px at
≤820px; .engine-section/.performance-section already step 145px →
105px at ≤820px. Both groups get one more step to ~72px at ≤560px.
Additional sections found with their own fixed vertical padding that
NEVER relaxes on mobile in the base sheet (checked via grep for
padding-top/padding-bottom on *-section / *-grid wrappers):
.cyber-inner 100px/100px constant
.contact-grid 110px/110px constant
.apps-section 120px/140px constant
.fibonacci-map-section 110px/110px → 90px/90px @820 only
.founder-section 150px bottom (no top) → 100px @820 only
These are aligned to the same two-step rhythm as the rest of the
page instead of being left alone.
-------------------------------------------------------------------- */
@media (max-width: 820px) {
body .cyber-inner {
padding-top: 90px;
padding-bottom: 90px;
}
body .contact-grid {
padding-top: 90px;
padding-bottom: 90px;
}
body .apps-section {
padding-top: 90px;
padding-bottom: 110px;
}
}
@media (max-width: 560px) {
body .social-section,
body .capabilities-section,
body .automation-section,
body .sector-section,
body .process-section,
body .engine-section,
body .performance-section {
padding-top: 72px;
padding-bottom: 72px;
}
body .cyber-inner,
body .contact-grid,
body .fibonacci-map-section {
padding-top: 72px;
padding-bottom: 72px;
}
body .apps-section {
padding-top: 64px;
padding-bottom: 80px;
}
body .founder-section {
padding-bottom: 72px;
}
}
/* --------------------------------------------------------------------
GROUP 6 — verified, no rule needed
.hero — base sheet already sets min-height:auto at ≤820px
and nothing after it re-overrides that. Confirmed
via cascade simulation at 800/500/430/360px = auto.
.core-card — category C, intoccabile: absolute, decorative
floating hero visual with its own explicit height
chain (.hero-visual), and .hero-visual is set to
display:none!important at ≤620px in the base
sheet, so it is not part of the mobile document
flow at all at the two tested viewports (430/360).
.contact-grid min-height — base sheet already sets min-height:auto at
≤820px (only its padding needed trimming, see
Group 5). Confirmed via cascade simulation.
.brief-form textarea — category C, intoccabile: min-height:110px is
the field's own usable typing area, not a layout
artifact. Left untouched.
-------------------------------------------------------------------- */
/* ============================================================
Synaptica Consulting — overlay mobile (assets/mobile-2026-08.css)
Blocco G — overflow orizzontale residuo
Blocco H — unità di viewport iOS (100vh -> 100svh)
Ambito di questo file: SOLO i selettori elencati sotto.
Non tocca .service-spiral/.spiral-*, .pillar-rail/.six-pillars,
né alcun min-height in pixel (di competenza di un altro agente).
Ogni selettore ha +1 scalino di specificità (classe raddoppiata
o elemento+elemento) per vincere anche se React re-inietta una
seconda copia del foglio base DOPO questo overlay.
============================================================ */
/* === G.1 .social-stage — grid blowout + parola lunga senza wrap ===
Markup: .social-stage è display:grid (1.15fr .85fr -> 1fr a <=820px).
.social-statement è il primo grid item, figlio diretto di .social-stage,
e contiene tre senza spazi interni: "CREATE.", "DISTRIBUTE.", "LEARN.".
Causa: .social-statement non ha overflow impostato, quindi la sua
"automatic minimum size" nel grid item resta il min-content del figlio
più largo — la parola "DISTRIBUTE." (11 caratteri, font-weight:950).
A <=560px .social-statement>p passa a font-size:52px fisso (nessun
ulteriore restringimento) e la parola, priva di punti di rottura,
costringe il grid item — e quindi lo scrollWidth di .social-stage,
che ha overflow:hidden — oltre il clientWidth reale (misurato: 326 vs
343px a 360px, +17px). È lo stesso bug pattern ("grid blowout") già
risolto altrove in questo foglio per .hero-copy/.hero-visual con
min-width:0 (vedi foglio base, regola non in media query) — qui lo
applichiamo allo stesso modo sul grid item colpito, più un fallback
di word-wrap sul testo perché non torni a spingere in futuro. */
@media (max-width: 820px) {
.social-statement.social-statement {
min-width: 0;
}
}
@media (max-width: 560px) {
.social-statement.social-statement > p {
overflow-wrap: break-word;
word-break: break-word;
}
}
/* === G.2 .ugc-feature — NESSUNA CORREZIONE APPLICATA (verificato, non è un bug) ===
Misurato: overflow costante di 20px a 360/430/768px (328/348, 398/418,
736/756) — lo stesso valore fisso a tre viewport diversi è la firma di
un offset in px indipendente dal contenitore, non di overflow di
contenuto reale.
Causa trovata nel CSS: .ugc-feature:before{content:"UGC";...;
position:absolute;bottom:-95px;right:-20px} — corrisponde esattamente
ai 20px misurati. È il watermark decorativo "UGC" (colore
#ffffff29, ~16% opacità), non testo informativo. .ugc-feature ha già
overflow:hidden su se stesso: il watermark è già tagliato/invisibile
oltre il bordo, la stessa situazione di .contact-glow e .hero-glow-one
segnalata come "non è un bug, lasciali stare". Verificato anche
.ugc-machine (steps assoluti 132x132): a 430/768px stanno comodamente
dentro il contenitore; a 360px il trucco già presente nel foglio base
(margin-inline:-30px + transform:scale(.82) su .ugc-machine) si
annulla quasi esattamente (332px * .82 = 272.2px ≈ 272px disponibili).
Nessun figlio di contenuto reale eccede il contenitore: nessuna
regola aggiunta qui. */
/* === G.3 .hero-visual — NESSUNA CORREZIONE APPLICATA (contenuto entro i limiti dell'antenato) ===
Misurato solo a 768px (650 vs 698, +48px) perché a <=620px .hero-visual
è già display:none!important nel foglio base — a 360/430px non esiste
nel DOM, coerente con l'assenza di righe nella tabella per quei viewport.
A 768px .hero-visual eredita width:min(650px,100%) dalla regola
<=1100px (mai sovrascritta nel breakpoint <=820px, che tocca solo
height/transform/margin-bottom). Figli assoluti verificati uno a uno
(centro a 325,295 su box 650x590 pre-transform, transform:scale(.88)
non altera lo scrollWidth proprio dell'elemento):
.card-ugc e .card-ai hanno right:-5px → sconfinano di 5px per design
(stessa logica "collage" dei float-card ruotati); .card-reels ha
left:-32px ma lo sconfinamento a sinistra non incrementa scrollWidth
nei browser (convenzione standard); l'svg .hero-fibonacci (width:660px
fisso, max-width:none, rotate(-3deg)) resta comunque sotto i 650px di
bordo destro anche dopo la rotazione. .hero (l'antenato con
overflow:hidden reale) a questo breakpoint ha padding:130px 24px 70px,
quindi 720px di contenuto disponibile: 650+48=698px resta sotto i 720px,
quindi anche l'overflow misurato non arriva mai al bordo che taglia —
nessun bug visivo, nessuna regola aggiunta qui. */
/* === G.4 .contact-section — NESSUNA CORREZIONE APPLICATA (decorativo, come da nota) ===
Overflow dovuto a .contact-glow (inset:-40% -10%, blur), coerente con
quanto indicato: elemento decorativo sfocato fatto apposta per
sbordare, già tagliato correttamente da .contact-section{overflow:hidden}.
Nessuna regola aggiunta qui. */
/* === G.5 .comparison-table — affordance di scroll orizzontale ===
A <=820px il foglio base imposta già .comparison-table{overflow-x:auto}
e .comparison-row{min-width:760px}: la tabella scrolla ma nulla lo
segnala all'utente. Aggiungiamo solo l'affordance visiva/tattile,
nessuna modifica al markup.
scroll-snap-align è messo sulle celle (.comparison-row span), non sulla
riga: ogni .comparison-row condivide lo stesso offset orizzontale
(x=0, sono impilate in verticale, scrollano tutte insieme), quindi uno
snap-align sulla riga produrrebbe un solo punto di aggancio utile;
le celle invece hanno x diversi per colonna (MODEL / COST/VIDEO /
DELIVERY / SCALING) e sono i punti in cui ha senso far "scattare" lo
scroll. */
@media (max-width: 820px) {
.comparison-table.comparison-table {
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 40px), transparent 100%);
}
.comparison-row.comparison-row span {
scroll-snap-align: start;
}
}
/* === G.6 Guardia finale — img/svg/video non devono mai superare il contenitore ===
Verificato in /tmp/synaptica-custom.css: le SVG decorative che sbordano
di proposito (.hero-grid, .cyber-grid, .hero-glow-one/.hero-glow-two,
.contact-glow) sono tutte
con background/mask, non tag svg — non
vengono selezionate da questa regola. L'unica vera