/* =====================================================================
INSTITUTO DE TERAPIA INTEGRATIVA ROBSON M. NONATO
Design System "Porto Seguro" — components.css
Requer tokens.css (carregue-o ANTES deste arquivo).
Componentes: botoes, links, formulario de triagem, selos de
credibilidade (IPEBH/O.S.U), cards, timeline do metodo, prova social,
FAQ, navbar, WhatsApp flutuante, section header e rodape.
===================================================================== */
/* ---------------------------------------------------------------------
Botão Primário
Ação principal de marca (ex.: 'Conheça o Método'). Pílula sólida verde. Anatomia: inline-flex, ícone/seta opcional à direita que desliza no hover. Estados: default (primary-600), hover (primary-700 + translateY(-2px) + shadow-md), active (translateY(0)), focus-visible (anel tingido), disabled (primary-300, sem sombra). Altura mín. de toque 44px.
--------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans);font-size:.9375rem;font-weight:600;line-height:1;letter-spacing:.01em;padding:16px 30px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:var(--transition)}
.btn--primary{background:var(--color-primary-600);color:var(--color-text-on-primary);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--color-primary-700);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn--primary:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.btn[disabled]{background:var(--color-primary-300);color:#fff;cursor:not-allowed;box-shadow:none;transform:none}
.btn .arrow{transition:transform .3s var(--ease-out-expo)}
.btn:hover .arrow{transform:translateX(4px)}
/* ---------------------------------------------------------------------
Botão CTA (Conversão)
Botão de captação do funil ('Aplique para uma Avaliação' / 'Fale com a Triagem'). Terracota acolhedora para saltar de forma convidativa. Único uso da cor de ação. Glow terracota suave apenas no hover.
--------------------------------------------------------------------- */
.btn--cta{background:var(--color-highlight-500);color:var(--color-highlight-ink);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);font-weight:700}
.btn--cta:hover{background:var(--color-highlight-400);transform:translateY(-2px);box-shadow:var(--shadow-highlight)}
.btn--cta:active{transform:translateY(0);background:var(--color-highlight-600)}
.btn--lg{padding:19px 38px;font-size:1rem}
/* ---------------------------------------------------------------------
Botão Destaque (amarelo ácido) — v1.2
CTA de energia da hero e do topo (par do mockup: pílula larga + botão-ícone). Retângulo suavemente arredondado (não pílula), amarelo ácido sólido, texto near-black para contraste AAA. Glow amarelo apenas no hover. Único uso da cor de destaque em superfícies escuras.
--------------------------------------------------------------------- */
.btn--highlight{background:var(--color-highlight-500);color:var(--color-highlight-ink);border:1px solid transparent;border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);font-weight:700}
.btn--highlight:hover{background:var(--color-highlight-400);transform:translateY(-2px);box-shadow:var(--shadow-highlight)}
.btn--highlight:active{transform:translateY(0);background:var(--color-highlight-600)}
.btn--highlight:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(228,233,12,.45)}
/* Botão-ícone quadrado — companheiro do botão de destaque (ícone centralizado, sem rótulo). */
.btn--icon{padding:0;width:52px;height:52px;flex:none;border-radius:var(--radius-sm)}
.btn--icon svg{width:22px;height:22px}
.btn--icon.btn--sm{width:44px;height:44px}
/* ---------------------------------------------------------------------
Botão Secundário (Outline)
Ação secundária. Pílula outline sobre fundo claro. Hover preenche com sálvia névoa. Em seção escura, inverter para borda clara.
--------------------------------------------------------------------- */
.btn--outline{background:transparent;color:var(--color-text-strong);border:1px solid var(--color-border)}
.btn--outline:hover{background:rgba(18,17,63,.05);border-color:rgba(18,17,63,.22);transform:translateY(-2px)}
.btn--outline.on-dark{color:var(--color-text-on-dark);border-color:rgba(234,243,243,.35)}
.btn--outline.on-dark:hover{background:rgba(234,243,243,.08);border-color:rgba(234,243,243,.6)}
/* ---------------------------------------------------------------------
Botão Ghost
Ação terciária/discreta (ex.: 'Voltar', filtros de blog). Sem borda; underline ou fundo tênue no hover. Usado em barras densas.
--------------------------------------------------------------------- */
.btn--ghost{background:transparent;color:var(--color-primary-700);border:1px solid transparent;padding:12px 18px}
.btn--ghost:hover{background:rgba(3,152,158,.12);color:var(--color-primary-800)}
.btn--ghost:focus-visible{box-shadow:var(--shadow-focus)}
/* ---------------------------------------------------------------------
Link
Links inline e de navegação com underline verde animado (scaleX da esquerda). Links de ação com seta que desliza. Foco sempre visível.
--------------------------------------------------------------------- */
.link{color:var(--color-primary-700);text-decoration:none;position:relative;font-weight:500;transition:color .25s var(--ease)}
.link::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out-expo)}
.link:hover{color:var(--color-primary-600)}
.link:hover::after{transform:scaleX(1)}
.link--arrow{display:inline-flex;align-items:center;gap:6px}
.link--arrow svg{transition:transform .3s var(--ease-out-expo)}
.link--arrow:hover svg{transform:translateX(3px)}
.link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:3px;border-radius:2px}
/* ---------------------------------------------------------------------
Input / Select / Textarea (Formulário de Triagem)
Campos do formulário de candidatura. Fundo off-white, borda hairline, radius-sm, label uppercase micro acima. Focus: borda verde + anel de foco tingido + fundo branco. Hover: borda terracota-clara. Select com chevron SVG via data-URI. Textarea min 120px, resize vertical. Estados de erro (borda/fundo error) e sucesso centralizado. Alvo de toque >=44px.
--------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:8px}
.field__label{font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.input,.select,.textarea{width:100%;font-family:var(--font-sans);font-size:.95rem;color:var(--color-text);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:14px 16px;transition:var(--transition-fast)}
.textarea{min-height:120px;resize:vertical;line-height:1.6}
.input::placeholder,.textarea::placeholder{color:var(--color-text-subtle)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--color-primary-400)}
.input:focus,.select:focus,.textarea:focus{outline:none;background:var(--color-surface);border-color:var(--color-primary-500);box-shadow:var(--shadow-focus)}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.field--error .input,.field--error .select,.field--error .textarea{border-color:var(--color-error);background:var(--color-error-bg)}
.field__error{font-size:.8125rem;color:var(--color-error)}
.form__success{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:var(--space-10);color:var(--color-success)}
.form__success[hidden]{display:none} /* respeita o atributo hidden (mostra só após envio) */
/* ---------------------------------------------------------------------
Selo / Badge de Credibilidade (IPEBH / O.S.U)
Selo institucional sóbrio de respaldo clínico (não mercadológico). Duas variantes: (a) pill de credencial com filete dourado discreto e ícone; (b) badge de eyebrow. Comunica seriedade/ética. Evitar estrelas de rating exceto prova social genuína.
--------------------------------------------------------------------- */
.seal{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;background:var(--color-surface);border:1px solid var(--color-accent-500);border-radius:var(--radius-pill);box-shadow:var(--shadow-xs)}
.seal__mark{width:22px;height:22px;flex:none;color:var(--color-accent-600)}
.seal__text{font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--color-text)}
.seal__text small{display:block;font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:.625rem;color:var(--color-text-muted)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--radius-pill)}
.badge--sage{background:rgba(3,152,158,.14);color:var(--color-primary-700)}
.badge--gold{background:rgba(176,138,62,.16);color:var(--color-accent-700)}
/* ---------------------------------------------------------------------
Card
Card genérico (artigos do blog, blocos de conteúdo). Fundo branco, borda hairline, radius-lg, sombra difusa. Hover: translateY(-4px) + shadow-lg + borda sálvia. Imagem com zoom scale(1.04). Um card 'destaque' por grid pode inverter para verde profundo (texto claro) para hierarquia.
--------------------------------------------------------------------- */
.card{display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--color-primary-200)}
.card__media{aspect-ratio:16/10;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out-expo)}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.card__title{font-family:var(--font-serif);font-size:var(--text-h4);color:var(--color-text-strong)}
.card__meta{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent-700)}
/* ---------------------------------------------------------------------
Card de Tratamento / Indicação
Apresenta uma indicação clínica (depressão, dependência química, ansiedade) ou pilar do tratamento. Ícone-chip sálvia no topo, título, descrição e link. Variante --flagship (verde profundo) para o programa boutique de destaque. Lista de inclusões com check dourado.
--------------------------------------------------------------------- */
.treatment-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4);box-shadow:var(--shadow-sm);transition:var(--transition)}
.treatment-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.treatment-card__icon{width:52px;height:52px;display:grid;place-items:center;border-radius:var(--radius-sm);background:rgba(3,152,158,.12);color:var(--color-primary-600)}
.treatment-card__title{font-family:var(--font-serif);font-size:var(--text-h3);color:var(--color-text-strong)}
.treatment-card__desc{color:var(--color-text-muted);font-size:.95rem;line-height:1.65}
.treatment-card__list{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.treatment-card__list li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--color-text)}
.treatment-card__list svg{flex:none;margin-top:2px;color:var(--color-accent-600)}
.treatment-card--flagship{background:var(--color-primary-700);border-color:transparent;color:var(--color-text-on-dark)}
.treatment-card--flagship .treatment-card__title{color:#fff}
.treatment-card--flagship .treatment-card__desc{color:rgba(234,243,243,.82)}
.treatment-card--flagship .treatment-card__icon{background:rgba(234,243,243,.12);color:var(--color-accent-300)}
.treatment-card--flagship .treatment-card__list li{color:var(--color-text-on-dark)}
.treatment-card--flagship .treatment-card__list svg{color:var(--color-accent-300)}
/* ---------------------------------------------------------------------
Método (12 sessões / 6 meses)
Componente reestruturado: aside sticky + jornada em cards de fase.
Estilos em css/site.css (.metodo / .mcard). Comunica ORDEM e método —
o coração do 'porto seguro'. Reveal escalonado suave no scroll.
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
Depoimento / Prova Social
Card de depoimento sóbrio, priorizando credibilidade humana sobre métricas de marketing. Citação em Fraunces itálico, avatar circular, nome + contexto (sigilo respeitado: iniciais/primeiro nome). Sem contadores agressivos nem estrelas exceto se genuínas e discretas. Carrossel com scroll-snap no mobile.
--------------------------------------------------------------------- */
.tcard{position:relative;display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);
border-radius:var(--radius-xl);padding:clamp(1.75rem,3vw,2.5rem);overflow:hidden;box-shadow:var(--shadow-sm);
transition:transform .4s var(--ease-out-expo),box-shadow .4s var(--ease-out-expo),border-color .4s var(--ease-out-expo)}
.tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--color-primary-200)}
.tcard__mark{font-family:Georgia,'Times New Roman',serif;font-weight:700;line-height:.8;color:var(--color-accent-500);
font-size:3.4rem;display:block;margin-bottom:.25rem;opacity:.9}
.tcard__quote{position:relative;z-index:1;font-size:1.08rem;line-height:1.62;color:var(--color-text-strong);margin-bottom:1.5rem;text-wrap:pretty}
.tcard__foot{display:flex;align-items:center;margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--color-border-light)}
.tcard__who{display:flex;flex-direction:column;gap:3px}
.tcard__name{font-weight:600;font-size:.98rem;color:var(--color-text-strong)}
.tcard__role{font-size:.78rem;letter-spacing:.04em;color:var(--color-text-muted)}
.tcard--featured .tcard__mark{font-size:4.6rem}
.tcard--featured .tcard__quote{font-size:clamp(1.3rem,2.1vw,1.7rem);line-height:1.4;letter-spacing:-.01em}
.tcard--featured .tcard__name{font-size:1.05rem}
/* ---------------------------------------------------------------------
Acordeão de FAQ
Perguntas frequentes com / nativo (acessível, funciona sem JS). Ícone '+' que rotaciona 45° e vira verde/dourado quando aberto. Bordas hairline entre itens; hover suave. Ideal para dúvidas sobre sigilo, segurança, legalidade e o método.
--------------------------------------------------------------------- */
.faq{border-top:1px solid var(--color-border)}
.faq__item{border-bottom:1px solid var(--color-border)}
.faq__summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-6) 0;font-family:var(--font-serif);font-size:var(--text-h4);color:var(--color-text-strong);transition:color .25s var(--ease)}
.faq__summary::-webkit-details-marker{display:none}
.faq__summary:hover{color:var(--color-primary-600)}
.faq__icon{flex:none;width:28px;height:28px;position:relative;transition:transform .35s var(--ease-out-expo)}
.faq__icon::before,.faq__icon::after{content:'';position:absolute;top:50%;left:50%;width:14px;height:2px;background:var(--color-primary-500);transform:translate(-50%,-50%)}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__item[open] .faq__icon{transform:rotate(45deg)}
.faq__item[open] .faq__icon::before,.faq__item[open] .faq__icon::after{background:var(--color-accent-600)}
.faq__answer{padding:0 0 var(--space-6);color:var(--color-text-muted);line-height:1.7;max-width:68ch}
/* ---------------------------------------------------------------------
Navbar
Header fixo, transparente sobre o hero e sólido ao rolar (.is-scrolled): fundo areia translúcido + backdrop-blur + hairline inferior. Logo à esquerda, navegação central, CTA de triagem à direita. Menu mobile fullscreen deslizante. Sem marquees.
--------------------------------------------------------------------- */
.navbar{position:fixed;inset:0 0 auto;z-index:var(--z-header);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:16px var(--container-px);transition:var(--transition)}
.navbar.is-scrolled{background:rgba(242,245,245,.9);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-bottom:1px solid var(--color-border-light);box-shadow:var(--shadow-xs)}
.navbar__links{display:flex;gap:var(--space-6);align-items:center}
.navbar__link{font-size:.9rem;font-weight:500;color:var(--color-text);text-decoration:none;position:relative;padding:6px 0;transition:color .25s var(--ease)}
.navbar__link::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--color-primary-500);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease-out-expo)}
.navbar__link:hover{color:var(--color-primary-600)}
.navbar__link:hover::after,.navbar__link[aria-current='page']::after{transform:scaleX(1)}
@media(max-width:860px){.navbar__links{position:fixed;inset:0;flex-direction:column;justify-content:center;background:var(--color-bg);transform:translateX(100%);transition:transform .45s var(--ease-out-expo)}.navbar__links.is-open{transform:translateX(0)}}
/* ---------------------------------------------------------------------
Botão Flutuante de WhatsApp
Presença de contato reconfortante e discreta (NÃO chamativa). Pílula/círculo fixo no canto inferior direito, verde WhatsApp harmonizado com a marca, com rótulo opcional 'Fale com a Triagem'. Micro-elevação no hover; SEM anéis de pulso insistentes (respeita público fragilizado). Respeita reduced-motion.
--------------------------------------------------------------------- */
.whatsapp-fab{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:var(--z-float);display:inline-flex;align-items:center;gap:10px;padding:14px 20px 14px 16px;background:var(--color-primary-600);color:#fff;border-radius:var(--radius-pill);box-shadow:var(--shadow-lg);text-decoration:none;font-size:.9rem;font-weight:600;transition:var(--transition)}
.whatsapp-fab:hover{background:var(--color-primary-700);transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.whatsapp-fab__icon{width:24px;height:24px;flex:none}
.whatsapp-fab__status{width:9px;height:9px;border-radius:50%;background:var(--color-success);box-shadow:0 0 0 3px rgba(46,125,91,.25)}
@media(max-width:600px){.whatsapp-fab__label{display:none}.whatsapp-fab{padding:16px}}
/* ---------------------------------------------------------------------
Section Header (Eyebrow + Título)
Abertura padrão de toda seção, herdada das 3 referências: eyebrow uppercase espaçado (sem colchetes, tom calmo) + título H2 em Fraunces com itálico opcional + descrição curta (text-wrap:balance). Alinhado à esquerda ou centrado. Espaçamento inferior generoso.
--------------------------------------------------------------------- */
.section-header{display:flex;flex-direction:column;gap:var(--space-4);max-width:62ch;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.section-header--center{align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.section-header__eyebrow{font-size:var(--text-eyebrow);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent-700);display:inline-flex;align-items:center;gap:8px}
.section-header__eyebrow::before{content:'';width:24px;height:1px;background:var(--color-accent-500)}
.section-header__title{font-family:var(--font-serif);font-weight:400;font-size:var(--text-h2);line-height:1.12;letter-spacing:-.015em;color:var(--color-text-strong);text-wrap:balance}
.section-header__title em{font-style:italic;color:var(--color-primary-600)}
.section-header__desc{font-size:var(--text-lead);color:var(--color-text-muted);line-height:1.6;text-wrap:balance}
/* ---------------------------------------------------------------------
Rodapé
Único bloco profundo do site — verde floresta terroso (não preto duro nem corporativo-frio). Grid multi-coluna: identidade + missão à esquerda, colunas de links, credenciais/selos (IPEBH/O.S.U) e canais de contato (WhatsApp/e-mail). Newsletter opcional inline. Faixa legal com o disclaimer de conformidade (não é aconselhamento médico/jurídico).
--------------------------------------------------------------------- */
.ft{background:var(--color-surface);border-top:1px solid var(--color-border);padding-block:clamp(3.5rem,7vw,7rem) clamp(2rem,3vw,2.5rem)}
.ft-top{display:grid;grid-template-columns:1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.ft-top__title{font-family:var(--font-serif);font-weight:500;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.05;letter-spacing:-.025em;color:var(--color-text-strong);text-wrap:balance;max-width:16ch}
.ft-top__title em{font-style:italic;color:var(--color-primary-600)}
.ft-top__sub{margin-top:.9rem;font-size:1rem;line-height:1.6;color:var(--color-text-muted);max-width:42ch}
.ft-top__actions{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.ft-wa{display:inline-flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--color-text-muted);font-weight:500;transition:color .25s var(--ease-out-expo)}
.ft-wa:hover{color:var(--color-text-strong)}
.ft-wa svg{width:16px;height:16px;color:var(--color-primary-600);flex:none}
.ft-divider{height:1px;background:var(--color-border);margin:clamp(2.5rem,5vw,4rem) 0}
.ft-mid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,2fr);gap:clamp(2rem,5vw,4.5rem)}
.ft-brand__logo{height:34px;width:auto;margin-bottom:1.1rem}
.ft-brand__desc{font-size:.92rem;line-height:1.7;color:var(--color-text-muted);max-width:40ch}
.ft-seals{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.4rem}
.ft-seal{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700);background:rgba(176,138,62,.1);border:1px solid rgba(176,138,62,.3);padding:.4rem .8rem;border-radius:var(--radius-pill)}
.ft-social{display:flex;gap:.7rem;margin-top:1.8rem}
.ft-social a{width:46px;height:46px;border-radius:var(--radius-full);display:grid;place-items:center;color:var(--color-text-strong);border:1px solid var(--color-border);transition:all .25s var(--ease-out-expo)}
.ft-social a:hover{background:var(--color-text-strong);color:#fff;border-color:var(--color-text-strong);transform:translateY(-2px)}
.ft-social svg{width:18px;height:18px}
.ft-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.ft-col__label{font-size:.7rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--color-accent-700);margin-bottom:1.1rem}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem;padding:0;margin:0}
.ft-col a{font-size:.95rem;color:var(--color-text-muted);text-decoration:none;transition:color .22s,padding-left .22s;overflow-wrap:break-word}
.ft-col a:hover{color:var(--color-primary-700);padding-left:3px}
.ft-col--cta a[data-cta]{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;color:var(--color-primary-700);font-weight:600}
.ft-col--cta a[data-cta]:hover{padding-left:0;color:var(--color-primary-600)}
.ft-bottom{margin-top:clamp(3rem,6vw,5.5rem);padding-top:clamp(1.25rem,2.5vw,1.75rem);border-top:1px solid var(--color-border-light)}
.ft-bottom__inner{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem}
.ft-copy{font-size:.8rem;color:var(--color-text-muted);line-height:1.6;max-width:34ch}
.ft-disc{font-size:.78rem;color:var(--color-text-muted);line-height:1.6;max-width:52ch;text-align:right}
@media(max-width:860px){.ft-top{grid-template-columns:1fr;gap:2rem}.ft-top__title{max-width:none}.ft-mid{grid-template-columns:minmax(0,1fr);gap:3rem}}
@media(max-width:720px){.ft-bottom__inner{flex-direction:column;gap:1rem}.ft-disc{text-align:left}}
@media(max-width:640px){.ft-links{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem}}
@media(max-width:430px){.ft-links{grid-template-columns:minmax(0,1fr)}}