/* ==========================================================================
   Frasus Business Support — landing page
   Loaded only on the public landing page, so the signed-in app does not pay
   for marketing styles it never uses.
   ========================================================================== */

.hero--split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 56px 0 40px;
}
.hero-copy { min-width: 0; }
.hero-visual { min-width: 0; }
.hero-art { width: 100%; height: auto; max-width: 520px; margin-left: auto; display: block; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 14px; border-radius: var(--md-shape-full);
    background: var(--md-primary-container); color: var(--md-on-primary-container);
    font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-cta { margin-top: 28px; }

.hero-points {
    list-style: none; margin: 28px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 12px 28px;
}
.hero-points li {
    display: flex; align-items: center; gap: 8px;
    font-size: .875rem; color: var(--md-on-surface-variant);
}
.hero-points svg { color: var(--md-success); flex: none; }

@media (max-width: 900px) {
    .hero--split { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 0 24px; }
    .hero-visual { order: -1; }
    .hero-art { max-width: 340px; margin: 0 auto; }
}

/* ---- Trust strip ----------------------------------------------------- */
.trust-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    background: var(--md-surface); border-radius: var(--md-shape-lg);
    border: 1px solid var(--md-outline-variant); box-shadow: var(--md-elev-soft);
    padding: 24px; margin-top: 8px;
}
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-icon {
    width: 44px; height: 44px; border-radius: var(--md-shape-md); flex: none;
    display: grid; place-items: center;
}
.trust-icon--blue { background: var(--md-primary-container); color: var(--md-primary); }
.trust-icon--red  { background: var(--md-secondary-container); color: var(--md-secondary); }
.trust-item strong { display: block; font-size: .9375rem; font-weight: 500; margin-bottom: 2px; }
.trust-item span { font-size: .8125rem; color: var(--md-on-surface-variant); line-height: 1.5; }

@media (max-width: 860px) { .trust-strip { grid-template-columns: minmax(0, 1fr); } }

/* ---- Sections -------------------------------------------------------- */
.section { margin-top: 64px; }
.section-head { margin-bottom: 28px; max-width: 60ch; }
.section-head h2 { margin-bottom: 6px; }
.section-head p { margin: 0; font-size: .9375rem; }

/* ---- How it works ---------------------------------------------------- */
.steps-flow {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.steps-flow li {
    position: relative; background: var(--md-surface);
    border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-md);
    padding: 24px 20px 20px; box-shadow: var(--md-elev-soft);
}
.steps-flow li::after {
    content: ''; position: absolute; top: 46px; right: -16px; width: 16px; height: 2px;
    background: var(--md-outline-variant);
}
.steps-flow li:last-child::after { display: none; }
.step-num {
    position: absolute; top: -12px; left: 20px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--md-secondary); color: #fff;
    display: grid; place-items: center; font-size: .75rem; font-weight: 700;
}
.step-icon {
    display: grid; place-items: center; width: 48px; height: 48px;
    border-radius: var(--md-shape-md); background: var(--md-primary-container);
    color: var(--md-primary); margin-bottom: 16px;
}
.steps-flow h3 { font-size: .9375rem; margin-bottom: 6px; }
.steps-flow p { font-size: .8125rem; color: var(--md-on-surface-variant); margin: 0; line-height: 1.55; }

@media (max-width: 1000px) {
    .steps-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps-flow li::after { display: none; }
}
@media (max-width: 560px) { .steps-flow { grid-template-columns: minmax(0, 1fr); } }

/* ---- Coming soon ----------------------------------------------------- */
.coming-soon { display: flex; gap: 24px; align-items: center; }
.coming-soon-art {
    width: 80px; height: 80px; flex: none; border-radius: var(--md-shape-lg);
    background: var(--md-primary-container); color: var(--md-primary);
    display: grid; place-items: center;
}
@media (max-width: 560px) { .coming-soon { flex-direction: column; text-align: center; } }

/* ---- Feature split --------------------------------------------------- */
.feature-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; }
.feature-row { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--md-outline-variant); }
.feature-row:first-of-type { border-top: none; padding-top: 0; }
.feature-icon {
    width: 44px; height: 44px; flex: none; border-radius: var(--md-shape-md);
    display: grid; place-items: center;
}
.feature-icon--blue { background: var(--md-primary-container); color: var(--md-primary); }
.feature-icon--red  { background: var(--md-secondary-container); color: var(--md-secondary); }
.feature-row h4 { margin-bottom: 4px; font-size: .9375rem; }
.feature-row p { margin: 0; font-size: .875rem; color: var(--md-on-surface-variant); line-height: 1.6; }

.feature-aside { display: flex; flex-direction: column; gap: 16px; }
.quote-card {
    position: relative; background: var(--md-primary); color: #fff;
    border-radius: var(--md-shape-lg); padding: 32px 28px 24px;
    box-shadow: var(--md-elev-2); overflow: hidden;
}
.quote-card::after {
    content: ''; position: absolute; right: -40px; bottom: -40px;
    width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.07);
}
.quote-mark { font-size: 3rem; line-height: .6; opacity: .35; margin-bottom: 12px; }
.quote-card p { font-size: .9375rem; line-height: 1.65; margin: 0 0 16px; position: relative; }
.quote-by { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }

.mini-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    background: var(--md-surface); border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-md); padding: 20px 16px; text-align: center;
}
.mini-stat-value { display: block; font-size: 1.375rem; font-weight: 500; color: var(--md-primary); }
.mini-stat-label { display: block; font-size: .688rem; color: var(--md-on-surface-variant); margin-top: 2px; line-height: 1.3; }

@media (max-width: 900px) { .feature-split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---- CTA band -------------------------------------------------------- */
.cta-band {
    margin-top: 64px;
    background: linear-gradient(135deg, var(--md-primary) 0%, #0d47a1 100%);
    border-radius: var(--md-shape-lg); color: #fff;
    padding: 40px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
    box-shadow: var(--md-elev-2);
}
.cta-band h2 { color: #fff; margin-bottom: 4px; }
.cta-band p { margin: 0; opacity: .88; font-size: .9375rem; }
.cta-band .inline { margin-left: auto; }
.cta-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.cta-ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

@media (max-width: 720px) {
    .cta-band { padding: 28px; text-align: center; flex-direction: column; }
    .cta-band .inline { margin-left: 0; justify-content: center; }
}

/* ==========================================================================
   Photography
   Images are self-hosted rather than hotlinked: no third-party request from a
   visitor's browser, nothing to leak their IP to, and no CSP exception.

   Every frame's shape follows the photo it holds. The market and shop photos
   are tall portraits, so they sit in portrait frames beside the copy rather
   than being stretched into wide bands — a wide crop of a portrait photo cuts
   through the person, which is the one thing the photo is there to show.
   ========================================================================== */

.photo-frame {
    position: relative;
    border-radius: var(--md-shape-xl, 28px);
    overflow: hidden;
    background: var(--md-surface-variant);
    box-shadow: var(--md-elev-3, var(--md-elev-2));
    isolation: isolate;
}
.photo-frame img {
    display: block; width: 100%; height: 100%;
    object-fit: cover;
}

/* A faint brand wash so photos from different sources read as one set. */
.photo-frame::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(170deg, rgba(21,101,192,.10) 0%, rgba(21,101,192,0) 45%, rgba(211,47,47,.06) 100%);
    pointer-events: none;
}

/* Parallax moves the photo inside its frame, never the frame itself, so the
   edges stay put. The image is oversized so movement cannot expose a gap. */
.photo-frame--parallax img {
    position: absolute; left: 0; top: -8%;
    width: 100%; height: 116%;
}

.photo-frame--portrait { aspect-ratio: 4 / 5; }

/* Where each photo's subject sits, so every crop keeps the face in frame. */
.photo-frame--trader img { object-position: 50% 42%; }
.photo-frame--shop img   { object-position: 50% 44%; }

/* ---- Hero photo ------------------------------------------------------- */
.hero-photo { position: relative; margin: 0; padding: 28px 28px 36px 0; }
.hero-photo-frame { aspect-ratio: 7 / 5; }
.hero-photo-frame img { object-position: 52% 22%; }

.hero-chip,
.frame-badge {
    position: absolute; z-index: 2;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px 12px 12px;
    background: var(--md-surface);
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elev-2);
    max-width: 260px;
}
.hero-chip--top    { top: 0; right: 0; }
.hero-chip--bottom { bottom: 0; left: -24px; }

.hero-chip-icon {
    width: 40px; height: 40px; flex: none;
    border-radius: var(--md-shape-md);
    display: grid; place-items: center;
}
.hero-chip-icon--blue { background: var(--md-primary-container); color: var(--md-primary); }
.hero-chip-icon--red  { background: var(--md-secondary-container); color: var(--md-secondary); }

.hero-chip-text { display: flex; flex-direction: column; min-width: 0; }
.hero-chip-text small {
    font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--md-on-surface-variant);
}
.hero-chip-text strong { font-size: .875rem; font-weight: 500; line-height: 1.3; }

@media (max-width: 900px) {
    .hero-photo { padding: 0 0 28px; max-width: 560px; margin: 0 auto; }
    .hero-chip--top { top: 12px; right: 12px; }
    .hero-chip--bottom { left: 12px; bottom: 0; }
}
@media (max-width: 560px) {
    .hero-photo-frame { aspect-ratio: 4 / 3; }
    .hero-chip--top { display: none; }
    .hero-chip { max-width: calc(100% - 24px); }
}

/* ---- Persona cards ---------------------------------------------------- */
.persona-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1000px) { .persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .persona-grid { grid-template-columns: minmax(0, 1fr); } }

.persona {
    display: flex; flex-direction: column;
    background: var(--md-surface);
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--md-shape-lg);
    box-shadow: var(--md-elev-soft);
    overflow: hidden;
}
.persona-photo {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--md-surface-variant);
    overflow: hidden;
}
.persona-photo img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 32%;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.persona:hover .persona-photo img { transform: scale(1.04); }

.persona-role {
    position: absolute; left: 12px; bottom: 12px;
    height: 26px; padding: 0 10px;
    display: inline-flex; align-items: center;
    border-radius: var(--md-shape-full, 999px);
    background: rgba(255,255,255,.94); color: var(--md-primary);
    font-size: .6875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.persona:nth-child(2n) .persona-role { color: var(--md-secondary); }

.persona-body { padding: 18px 20px 22px; }
.persona h3 { font-size: 1rem; margin-bottom: 6px; }
.persona p { font-size: .8125rem; color: var(--md-on-surface-variant); margin: 0; line-height: 1.6; }

@media (max-width: 560px) { .persona-photo { aspect-ratio: 16 / 10; } }

/* ---- Photo + copy split ---------------------------------------------- */
.photo-split {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px; align-items: center;
}
.photo-split--portrait { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.photo-split--portrait .photo-frame { max-width: 460px; }
.photo-split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.photo-split--reverse > :first-child { order: 2; }
.photo-split--reverse .photo-frame { margin-left: auto; }

.split-copy { font-size: 1rem; line-height: 1.7; margin: 0; }
.split-points { margin-top: 20px; }
.split-cta { margin-top: 28px; }

.photo-frame-wrap { position: relative; }
.frame-badge { left: -28px; bottom: 36px; }

.eyebrow--red { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

@media (max-width: 900px) {
    .photo-split,
    .photo-split--portrait,
    .photo-split--reverse { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .photo-split--reverse > :first-child { order: 0; }

    /* On a phone a full portrait would fill two screens; crop to a shape
       that keeps the person and the stall, and leaves room for the words. */
    .photo-split--portrait .photo-frame { max-width: none; aspect-ratio: 3 / 2; margin: 0; }
    .frame-badge { left: 12px; bottom: 12px; }
}

@media (max-width: 560px) {
    .photo-split--portrait .photo-frame { aspect-ratio: 4 / 3; }
}