/* FontMaker.co - Base / reset / typography (design 1b "Ink") */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--fmco-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fmco-text);
    background: var(--fmco-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Skip to content (keyboard a11y) */
.fmco-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--fmco-primary); color: #fff;
    padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: top .15s ease; }
.fmco-skip:focus { top: 12px; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Neutralize the site's img/svg reset (line above) INSIDE the embedded app, without
   overriding the app's OWN sizing. :where() keeps this at zero specificity, so every
   .fm-* rule still wins and the app behaves exactly like the standalone textstudio build.
   (A blunt "max-width:none" here removed the app's constraint, so imported images
   rendered at full/enormous size.) */
:where(.fm-app) img,
:where(.fm-app) svg { display: revert; max-width: revert; max-height: revert; }

/* Display font (Bricolage Grotesque) for big headings */
.fmco-display { font-family: var(--fmco-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }

/* Monospace label (eyebrows, nav, section numbers) */
.fmco-mono { font-family: var(--fmco-mono); text-transform: uppercase; letter-spacing: .05em; }

.fmco-icon { stroke: currentColor; flex: 0 0 auto; vertical-align: middle; }

.fmco-link { color: var(--fmco-primary); font-weight: 600; }
.fmco-link:hover { text-decoration: underline; }

/* Prose / simple pages */
.fmco-prose { padding-block: var(--fmco-sp-2xl); }
.fmco-prose p { color: var(--fmco-text-medium); font-size: 16.5px; margin-bottom: var(--fmco-sp-md); }
.fmco-page-title { font-family: var(--fmco-display); font-weight: 800; font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.035em; margin-bottom: var(--fmco-sp-lg); }
.fmco-lead { font-size: 19px !important; color: var(--fmco-text-medium); }

/* Buttons */
.fmco-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 22px; border: 1px solid transparent; border-radius: var(--fmco-radius-sm);
    font-family: var(--fmco-body); font-size: 15px; font-weight: 600; line-height: 1;
    cursor: pointer; transition: var(--fmco-transition); white-space: nowrap;
}
.fmco-btn-sm { padding: 9px 16px; font-size: 14px; }
.fmco-btn-lg { padding: 15px 32px; font-size: 16.5px; font-weight: 700; }
.fmco-btn-primary { background: var(--fmco-primary); color: #fff; }
.fmco-btn-secondary { background: var(--fmco-bg); color: var(--fmco-text); border-color: var(--fmco-border); }
.fmco-btn-light { background: #fff; color: var(--fmco-ink); }
@media (hover: hover) {
    .fmco-btn-primary:hover { background: var(--fmco-primary-hover); }
    .fmco-btn-secondary:hover { background: var(--fmco-bg-hover); }
    .fmco-btn-light:hover { transform: translateY(-1px); box-shadow: var(--fmco-shadow-hover); }
}
.fmco-btn:active { transform: translateY(0); }

/* Containers & sections */
.fmco-container { width: 100%; max-width: var(--fmco-container); margin-inline: auto; padding-inline: 40px; }
.fmco-container-narrow { max-width: var(--fmco-narrow); }
.fmco-section { padding-block: var(--fmco-sp-3xl); }
.fmco-section-alt { background: var(--fmco-bg-alt); }

/* Section header: small accent square + title */
.fmco-shead { display: flex; align-items: center; gap: 13px; margin-bottom: var(--fmco-sp-2xl); }
.fmco-shead-sq { width: 14px; height: 14px; background: var(--fmco-primary); border-radius: 4px; flex: 0 0 auto; }
.fmco-shead h2 { font-family: var(--fmco-display); font-weight: 700; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.03em; }

/* FAQ accordion (shared: home + /faq page) */
.fmco-faq { border-top: 1px solid var(--fmco-border); }
.fmco-faq-item { border-bottom: 1px solid var(--fmco-border); }
.fmco-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 22px 4px; cursor: pointer; list-style: none; font-size: 17.5px; font-weight: 600; color: var(--fmco-ink); }
.fmco-faq-item summary::-webkit-details-marker { display: none; }
.fmco-faq-item summary::marker { content: ""; }
.fmco-faq-chevron { flex: 0 0 auto; color: var(--fmco-primary); transition: transform .25s ease; }
.fmco-faq-item[open] .fmco-faq-chevron { transform: rotate(180deg); }
.fmco-faq-answer { padding: 0 50px 24px 4px; }
.fmco-faq-answer p { font-size: 15.5px; line-height: 1.65; color: var(--fmco-text-medium); }

/* Contact form */
.fmco-form { position: relative; margin-top: var(--fmco-sp-xl); }
.fmco-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fmco-sp-md); }
@media (max-width: 600px) { .fmco-form-row { grid-template-columns: 1fr; } }
.fmco-field { margin-bottom: var(--fmco-sp-md); }
.fmco-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; color: var(--fmco-text); }
.fmco-input { width: 100%; padding: 11px 14px; font-family: var(--fmco-body); font-size: 15px; color: var(--fmco-text);
    border: 1px solid var(--fmco-border); border-radius: var(--fmco-radius-sm); background: var(--fmco-bg);
    transition: border-color .15s, box-shadow .15s; outline: none; }
.fmco-input::placeholder { color: var(--fmco-text-light); }
.fmco-input:focus { border-color: var(--fmco-primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.fmco-select { appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.fmco-textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.fmco-form-btn { width: 100%; margin-top: 4px; }
.fmco-feedback { margin-top: var(--fmco-sp-md); padding: 12px 16px; border-radius: var(--fmco-radius-sm); font-size: 14.5px; display: none; }
.fmco-feedback.is-success { display: block; background: rgba(16, 163, 127, .1); color: #0a7f63; }
.fmco-feedback.is-error { display: block; background: rgba(220, 38, 38, .1); color: #c02626; }
.fmco-form-alt { margin-top: var(--fmco-sp-lg); font-size: 14px; color: var(--fmco-text-medium); text-align: center; }

/* About / founder story */
.fmco-about { display: flex; gap: 44px; align-items: flex-start; margin-top: var(--fmco-sp-xl); }
.fmco-about-media { flex: 0 0 300px; position: sticky; top: 100px; }
.fmco-about-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
    border-radius: var(--fmco-radius-lg); background: var(--fmco-bg-alt); }
.fmco-about-cap { margin-top: 14px; }
.fmco-about-cap-name { display: block; font-family: var(--fmco-display); font-weight: 700; font-size: 17px; color: var(--fmco-ink); }
.fmco-about-cap-role { display: block; font-family: var(--fmco-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fmco-text-medium); margin-top: 3px; }
.fmco-about-story { flex: 1; min-width: 0; }
.fmco-about-kicker { display: inline-block; font-family: var(--fmco-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--fmco-primary); margin-bottom: 14px; }
.fmco-about-story p { font-size: 17px; line-height: 1.72; color: var(--fmco-text); margin-bottom: 18px; }
.fmco-about-story p:first-of-type { font-size: 20px; line-height: 1.6; color: var(--fmco-ink); }
.fmco-about-sign { font-size: 26px !important; color: var(--fmco-ink) !important; margin-top: 4px; margin-bottom: 0 !important; }
@media (max-width: 760px) {
    .fmco-about { flex-direction: column; gap: 26px; }
    .fmco-about-media { position: static; flex-basis: auto; max-width: 240px; }
}

/* Empty state */
.fmco-empty { margin-top: var(--fmco-sp-xl); padding: var(--fmco-sp-2xl); border: 1px dashed var(--fmco-border); border-radius: var(--fmco-radius-lg); text-align: center; color: var(--fmco-text-light); }
.fmco-empty .fmco-icon { margin: 0 auto var(--fmco-sp-md); color: var(--fmco-text-light); }

/* 404 */
.fmco-404 { text-align: center; }
.fmco-404 h1 { font-family: var(--fmco-display); font-weight: 800; font-size: 96px; color: var(--fmco-primary); }
.fmco-404 p { margin-bottom: var(--fmco-sp-lg); }

/* Embedded tool page (/app) */
.fmco-app-shell { min-height: 60vh; display: grid; place-items: center; padding: var(--fmco-sp-3xl) var(--fmco-sp-lg); }
.fmco-app-placeholder { text-align: center; color: var(--fmco-text-light); }
.fmco-app-placeholder .fmco-icon { margin: 0 auto var(--fmco-sp-md); color: var(--fmco-primary); }
.fmco-app-placeholder h1 { font-family: var(--fmco-display); font-size: 32px; color: var(--fmco-text); margin-bottom: 6px; }
.fmco-app-shell.fmco-app-live { min-height: 0; padding: 0; display: block; }
.fmco-app-live .fm-app { width: 100%; }

/* Recolor the embedded app to the brand violet.
   The app sets --fm-primary-* on :root (#0089ff); redeclaring on .fm-app overrides it. */
.fm-app {
    /* brand accent (violet) only; the app keeps its default light theme */
    --fm-primary-color:   #7c3aed;
    --fm-primary-hover:   #6d28d9;
    --fm-primary-light:   #f3eefd;
    --fm-primary-lighter: #faf8ff;
}
.fm-app .fm-premium-upgrade {
    background: linear-gradient(135deg, #7c3aed 0, #6d28d9 100%);
    box-shadow: 0 4px 12px rgba(124, 58, 237, .3);
}
@media (hover: hover) {
    .fm-app .fm-premium-upgrade:hover { box-shadow: 0 6px 16px rgba(124, 58, 237, .4); }
}
/* App "FONT MAKER" wordmark: fixed neutral black, no violet tint and no color change on hover.
   Beats the synced app filter (higher specificity + !important), survives rebuilds. */
.fm-app .fm-empty-logo,
.fm-app .fm-drop-zone:hover .fm-empty-logo { filter: brightness(0) !important; }