/* Framlo brand components. Load after /brand/tokens.css. Documented on /brand. */

/* Base */
.fr-root { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-weight: 300; font-size: 16px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
.fr-root :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.fr-accent { font-family: var(--font-accent); font-style: italic; font-weight: 300; color: var(--accent); font-size: 1.15em; letter-spacing: -0.01em; }
.fr-eyebrow { margin: 0; font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 17px; line-height: 1.4; color: var(--accent); }
.fr-muted { color: var(--text-muted); }

/* Buttons */
.fr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 46px; padding: 0 var(--space-6); border-radius: var(--radius-pill); border: 1px solid transparent; font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1.2; letter-spacing: 0; text-decoration: none; cursor: pointer; transition: background-color var(--dur-hover) var(--ease-glide), border-color var(--dur-hover) var(--ease-glide), color var(--dur-hover) var(--ease-glide), letter-spacing var(--dur-hover) var(--ease-glide), transform var(--dur-press) var(--ease-glide); }
.fr-btn:hover { letter-spacing: 0.4px; }
.fr-btn:active { transform: scale(.98); }
.fr-btn--primary { background: var(--accent-fill); color: var(--on-accent); }
.fr-btn--primary:hover { background: var(--peach-hover); }
.fr-btn--secondary { background: transparent; color: var(--text); border-color: var(--line); }
.fr-btn--secondary:hover { border-color: var(--text-muted); background: var(--surface); }
.fr-btn--quiet { background: transparent; color: var(--text); padding: 0 var(--space-2); }
.fr-btn--quiet:hover { color: var(--accent); }
.fr-btn svg { width: 20px; height: 20px; flex: none; }

/* Links */
.fr-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--dur-hover) var(--ease-glide); }
.fr-link:hover { text-decoration-color: transparent; }

/* Navigation */
.fr-nav { display: flex; align-items: center; gap: var(--space-8); min-height: 72px; padding: 0 var(--space-12); border-bottom: 1px solid var(--line); }
.fr-nav__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 500; font-size: 22px; letter-spacing: -0.6px; }
.fr-nav__links { display: flex; gap: var(--space-6); margin: 0 auto 0 0; padding: 0; list-style: none; }
.fr-nav__links a { color: var(--text-muted); text-decoration: none; font-weight: 400; font-size: 15px; transition: color var(--dur-hover) var(--ease-glide); }
.fr-nav__links a:hover, .fr-nav__links a[aria-current="page"] { color: var(--text); }
@media (max-width: 720px) { .fr-nav { padding: 0 var(--space-4); gap: var(--space-4); } .fr-nav__links { display: none; } }

/* Cards */
.fr-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: transform var(--dur-hover) var(--ease-glide), border-color var(--dur-hover) var(--ease-glide), background-color var(--dur-hover) var(--ease-glide); }
a.fr-card:hover { transform: translateY(-2px); border-color: rgba(239, 184, 143, 0.5); }
.fr-card__title { margin: 0; font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: -0.4px; }
.fr-card__body { margin: 0; color: var(--text-muted); }
.fr-card__icon { width: 32px; height: 32px; }
.fr-band { padding: var(--space-16) var(--space-12); border-radius: var(--radius-lg); background: var(--band); color: var(--text); }

/* Form fields */
.fr-field { display: flex; flex-direction: column; gap: var(--space-2); }
.fr-field__label { font-weight: 500; font-size: 15px; line-height: 1.2; }
.fr-field__hint { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--text-muted); }
.fr-input { min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: var(--font-sans); font-size: 16px; font-weight: 400; transition: border-color var(--dur-hover) var(--ease-glide); }
textarea.fr-input { min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical; line-height: 1.6; }
.fr-input::placeholder { color: var(--text-muted); }
.fr-input:hover { border-color: var(--text-muted); }
.fr-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.fr-field--error .fr-input { border-color: var(--accent); }
.fr-field__error { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--accent); }

/* Scene marker */
.fr-scene { display: flex; align-items: center; gap: var(--space-3); }
.fr-scene__label { font-family: var(--font-accent); font-style: italic; font-weight: 400; font-size: 18px; color: var(--accent); white-space: nowrap; }
.fr-scene__rule { flex: 1; height: 1px; background: var(--line); }

/* The dot: bullets and divider */
.fr-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.fr-list li { display: flex; align-items: baseline; gap: var(--space-3); }
.fr-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill); transform: translateY(-2px); }
.fr-divider { display: flex; align-items: center; gap: var(--space-4); }
.fr-divider::before, .fr-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.fr-divider span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-fill); }

/* Keyframe steps */
.fr-steps { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; position: relative; }
.fr-steps::before { content: ""; position: absolute; left: 9px; right: 9px; top: 9px; height: 2px; background: var(--line); }
.fr-step { position: relative; display: flex; flex-direction: column; gap: var(--space-3); font-size: 14px; color: var(--text-muted); }
.fr-step::before { content: ""; width: 14px; height: 14px; margin: 2px; transform: rotate(45deg); border: 2px solid var(--text-muted); background: var(--bg); position: relative; z-index: 1; }
.fr-step--done, .fr-step--current { color: var(--text); }
.fr-step--done::before, .fr-step--current::before { background: var(--accent-fill); border-color: var(--accent-fill); }
.fr-step--done::after { content: ""; position: absolute; left: 9px; right: -9px; top: 9px; height: 2px; background: var(--accent-fill); }
.fr-step:last-child.fr-step--done::after { display: none; }

/* Frame corners (for the hero visual) */
.fr-framed { position: relative; border-radius: var(--radius-lg); }
.fr-framed::before, .fr-framed::after { content: ""; position: absolute; width: 32px; height: 32px; border: 3px solid var(--accent-fill); pointer-events: none; }
.fr-framed::before { left: -10px; top: -10px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.fr-framed::after { right: -10px; bottom: -10px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

/* FAQ */
.fr-faq { border-top: 1px solid var(--line); }
.fr-faq details { border-bottom: 1px solid var(--line); }
.fr-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 64px; cursor: pointer; list-style: none; font-weight: 400; font-size: 18px; color: var(--text); }
.fr-faq summary::-webkit-details-marker { display: none; }
.fr-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(45deg); transition: transform var(--dur-hover) var(--ease-glide); }
.fr-faq details[open] summary::after { transform: rotate(-135deg); }
.fr-faq p { margin: 0 0 var(--space-6); max-width: 640px; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }