/* ==========================================================================
   pages/brand.css: brand-area pieces shared by home, /app/, 404, the company
   pages (/about/ ... /disclaimer/) and /experts/.
   Values come from tokens.css; breakpoints mirror base.css section 16.
   ========================================================================== */

/* --- Search form (home hero, 404) ---------------------------------------- */
.site-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 34rem;
    margin: 0;
    padding: var(--space-1);
    padding-left: calc(var(--space-4) + var(--space-5));
    background: var(--c-surface);
    border: var(--border-hairline) solid var(--c-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.site-search__icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-lead);
    color: var(--c-ink-muted);
}
.site-search input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--control-h);
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--c-ink);
}
.site-search input::placeholder { color: var(--c-ink-muted); }
.site-search input:focus { outline: none; }
.site-search:focus-within { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.site-search .btn { flex: none; }

/* --- Waitlist form extras ------------------------------------------------- */
.waitlist-form__trap {
    position: absolute;
    left: -9999rem;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.waitlist-note {
    margin: var(--space-3) 0 0;
    font-size: var(--fs-caption);
    color: var(--_muted);
}
.waitlist-note strong { color: var(--_heading); }

/* --- Phone (home app band, /app/ hero) ------------------------------------
   The phone is a generated image used whole (art-src/brand/app-phone, 1:2,
   screen inside x 7.3-92.7 %, y 2.6-97.3 %, notch to 6.5 %). The padding
   (percent of the width) places the 2 x 2 thumbnail grid on its screen. */
.phone-outline {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: var(--space-2);
    width: 10rem;
    aspect-ratio: 1 / 2;
    padding: 18% 12% 10%;
    background: url("/assets/images/app/phone.webp") center / 100% 100% no-repeat;
}
.phone-outline > span {
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.phone-outline > span img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 404 ----------------------------------------------------------------- */
.notfound__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.notfound__sporo { width: min(16rem, 70vw); height: auto; margin-bottom: var(--space-3); }
.notfound__code {
    margin: 0;
    font-size: calc(var(--fs-display) * 1.5);
    line-height: 1;
}
.notfound h1 { margin: var(--space-2) 0 var(--space-3); }
.notfound__search { margin: var(--space-5) 0 var(--space-4); }
.notfound__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: var(--fw-bold);
}
.notfound__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* --- Company page hero --------------------------------------------------- */
.brand-hero h1 { margin: 0 0 var(--space-3); }
.brand-hero .t-lead { margin: 0; }
.brand-hero .brand-hero__tagline { margin-bottom: var(--space-3); }
.brand-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
}
.brand-hero__sporo { width: 11rem; height: auto; }
.expert-head { align-items: center; margin: 0; }
.expert-head h1 { margin: 0; }
.expert-head .byline__initials { width: var(--space-8); height: var(--space-8); font-size: var(--fs-lead); }
.brand-links__head { margin: var(--space-7) 0 var(--space-4); }
.brand-linklist { margin: 0; padding: 0; list-style: none; }
.brand-linklist li { padding-block: var(--space-2); border-top: var(--border-hairline) solid var(--c-line); }

/* --- Company page bodies: legacy seed classes inside .prose.brand-body ----- */
.brand-body > .t-label,
.brand-body .section-head .t-label,
.brand-body .sh-text .t-label,
.brand-body .trust-split .t-label { color: var(--c-label-on-light); }
.brand-body .section-head { margin-bottom: var(--space-5); }
.brand-body .section-head h2,
.brand-body .sh-text h2 { margin-top: 0; }
.brand-body .section-head--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
}
.brand-body .section-head--row h2 { margin-bottom: 0; }
.brand-body .grid { margin-block: var(--space-4) 0; }

.brand-body .intent-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--c-surface);
    border: var(--border-hairline) solid var(--c-line);
    border-radius: var(--radius-md);
    color: var(--c-ink);
    text-decoration: none;
}
.brand-body a.intent-card { color: var(--c-ink); }
.brand-body a.intent-card:hover h3 { text-decoration: underline; }
.brand-body .intent-card h3 {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--role-title-family);
    font-weight: var(--role-title-weight);
    font-size: var(--fs-title);
    line-height: var(--lh-title);
}
.brand-body .intent-card p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-title); }
.brand-body .ic-icon,
.brand-body .source-grid > a > i,
.home-topic__icon,
.app-feature__icon {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--space-7);
    height: var(--space-7);
    border-radius: var(--radius-md);
    background: var(--c-band-lilac);
    color: var(--c-label-on-light);
    font-size: var(--fs-h3);
}
.brand-body .ic-link { margin-top: auto; color: var(--c-link); font-weight: var(--fw-bold); font-size: var(--fs-small); }

.brand-body .stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}
.brand-body .stat-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brand-body .sr { display: flex; flex-direction: column; gap: var(--space-1); text-align: center; }
.brand-body .sr b {
    font-family: var(--role-display-family);
    font-weight: var(--role-display-weight);
    font-size: var(--fs-h3);
    line-height: var(--lh-tight);
    color: var(--c-ink-heading);
}
.brand-body .sr span { font-size: var(--fs-caption); color: var(--c-ink-muted); }

.brand-body .trust-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}
.brand-body .trust-split h2 { margin-top: 0; }
.brand-body .principles li,
.brand-body .source-grid,
.brand-body .ledger ul li { padding-inline-start: 0; }
.brand-body .principles li {
    display: flex;
    gap: var(--space-3);
}
.brand-body .principles li::before { content: none; }
.brand-body .principles i { flex: none; margin-top: 0.2em; color: var(--ed-edible); font-size: var(--fs-lead); }

.brand-body .btn,
.brand-body .btn:visited { color: var(--c-bg); text-decoration: none; }

.brand-body .cta-band {
    padding: var(--space-6);
    background: var(--c-band-gold);
    border-radius: var(--radius-lg);
    text-align: center;
}
.brand-body .cta-band h2 { margin-top: 0; }

.brand-body .ledger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    margin-block: var(--space-4) var(--space-6);
}
.brand-body .ledger > div {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border-top: var(--border-edge) solid var(--ed-edible);
    background: var(--c-safe-bg);
}
.brand-body .ledger > .no { border-top-color: var(--c-danger); background: var(--c-danger-bg); }
.brand-body .ledger h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    font-family: var(--role-title-family);
    font-weight: var(--role-title-weight);
    font-size: var(--fs-title);
    color: var(--c-ink-heading);
}
.brand-body .ledger .yes h4 i { color: var(--ed-edible); }
.brand-body .ledger .no h4 i { color: var(--c-danger); }
.brand-body .ledger ul { margin: 0; }
.brand-body .ledger ul li { font-size: var(--fs-small); line-height: var(--lh-title); padding-inline-start: var(--space-5); }
.brand-body .ledger ul li::before { inset-inline-start: 0; }

.brand-body .checklist.warn li::before { border-color: var(--c-danger); }

.brand-body .steps {
    margin-block: var(--space-3) var(--space-5);
    padding-inline-start: var(--space-6);
}
.brand-body .steps li { margin-block-end: var(--space-3); padding-inline-start: var(--space-1); }
.brand-body .steps li::marker { font-weight: var(--fw-bold); color: var(--c-ink-heading); }

.brand-body .source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-block: var(--space-6) 0;
}
.brand-body .source-grid > a {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4);
    background: var(--c-surface);
    border: var(--border-hairline) solid var(--c-line);
    border-radius: var(--radius-md);
    color: var(--c-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.brand-body .source-grid > a > i { width: var(--space-6); height: var(--space-6); font-size: var(--fs-title); }
.brand-body .source-grid b { display: block; color: var(--c-ink-heading); }
.brand-body .source-grid span span { display: block; font-size: var(--fs-caption); color: var(--c-ink-muted); }
.brand-body .source-grid > a:hover b { text-decoration: underline; }

.brand-body .safety-banner-global {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-4) var(--space-5);
    background: var(--c-danger-bg);
    border-left: var(--border-edge) solid var(--c-danger);
    border-radius: var(--radius-sm);
}
.brand-body .safety-banner-global i { flex: none; color: var(--c-danger); font-size: var(--fs-h3); }
.brand-body .safety-banner-global p { margin: 0; }

.brand-body .callout { margin-block: var(--space-5); }
.brand-body .callout:first-child { margin-top: 0; }
.brand-body .callout > p { margin: 0; }

/* phone */
@media (max-width: 767px) {
    .site-search { padding-left: calc(var(--space-3) + var(--space-5)); }
    .site-search__icon { left: var(--space-3); }
    .site-search .btn { padding-inline: var(--space-4); }

    .brand-hero__grid { grid-template-columns: minmax(0, 1fr) 6.5rem; gap: var(--space-3); }
    .brand-hero__sporo { width: 6.5rem; }

    .brand-body .grid--3 { --_cols: 1; }
    .brand-body .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brand-body .stat-row--3 { grid-template-columns: minmax(0, 1fr); }
    .brand-body .trust-split,
    .brand-body .ledger,
    .brand-body .source-grid { grid-template-columns: minmax(0, 1fr); }
    .brand-body .cta-band { padding: var(--space-5) var(--space-4); }
    .brand-section .grid--3 { --_cols: 1; }
    /* The seeded legal and policy tables are three short text columns; let them wrap in the column. */
    .brand-body .compare-table { min-width: 0; }
    .brand-body .compare-table :is(th, td) { padding: var(--space-2) var(--space-3); }
}