/*
 * Famaway homepage styles.
 * Everything targets core blocks inside a Group with the class "fw-home", plus the Free Plan block.
 * Class names to put on blocks (Block → Advanced → Additional CSS class):
 *   fw-wrap (centred 1120px)  fw-nav  fw-logo  fw-navlinks  fw-hero  fw-kick  fw-sub
 *   fw-section  fw-lab  fw-trio  fw-steps  fw-num  fw-small  fw-split  fw-founder  fw-body
 *   fw-team  fw-role  fw-plans  fw-plan-name  fw-price-row  fw-price  fw-per  fw-mini
 *   fw-faq  fw-foot  fw-hr
 *   Images: fw-ph + fw-tall (4:5) or fw-sq (1:1), fw-dot (coral dot). The image caption becomes the label.
 */

.fw-home, .fw-free-plan {
	--cream: #F7F5ED; --stone: #E9E6DD; --ink: #14213D; --blue: #1461FC; --blue-text: #1461FC;
	--coral: #FF7359; --mute: #5B6475; --on-blue: #fff; --field: #fff;
	--serif: Georgia, 'Times New Roman', serif;
	--sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
	.fw-home, .fw-free-plan { --cream: #101624; --stone: #1A2236; --ink: #EEF0F6; --mute: #9AA3B5; --blue-text: #6D9BFF; --field: #fff; }
}

body.fwp-landing { margin: 0; background: var(--fw-page-bg, #F7F5ED); }
@media (prefers-color-scheme: dark) { body.fwp-landing { background: #101624; } }
.fw-landing-main { display: block; }

/* ---------- base ---------- */
.fw-home { background: var(--cream); color: var(--ink); font: 400 16px/1.55 var(--sans); }
.fw-home *, .fw-home *::before, .fw-home *::after { box-sizing: border-box; }
.fw-home p, .fw-home h1, .fw-home h2, .fw-home h3, .fw-home figure, .fw-home ul, .fw-home details, .fw-home summary,
.fw-home .wp-block-columns, .fw-home .wp-block-column, .fw-home .wp-block-group { margin: 0; }
.fw-home > * + *, .fw-home .wp-block-group > * + *, .fw-home .wp-block-column > * + * { margin-block-start: 0; }
.fw-home h1, .fw-home h2, .fw-home h3 { color: inherit; text-transform: none; padding: 0; }
.fw-home a { color: inherit; }
.fw-home .fw-wrap { max-width: 1120px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
.fw-home hr.fw-hr, .fw-home .wp-block-separator.fw-hr { border: 0; border-top: 1px solid var(--stone); opacity: 1; margin: 0; width: 100%; max-width: none; height: 0; background: none; }

/* classic themes wrap Group content in an inner container: let the Group's own layout apply */
.fw-home .wp-block-group__inner-container { display: contents; }

/* columns → grids (core forces align-items:normal!important, so align the columns themselves) */
.fw-home .wp-block-columns { display: grid; gap: 20px; flex-wrap: nowrap; }
.fw-home .wp-block-columns > .wp-block-column { flex-basis: auto; min-width: 0; width: auto; }

/* ---------- nav ---------- */
.fw-home .fw-nav { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; padding-bottom: 22px; font-size: 14px; flex-wrap: wrap; gap: 8px; }
.fw-home .fw-logo { font-weight: 700; letter-spacing: -.02em; font-size: 20px; }
.fw-home .fw-logo a { text-decoration: none; }
.fw-home .fw-logo::after { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); margin-left: 3px; }
.fw-home .fw-navlinks a { text-decoration: none; color: var(--mute); display: inline-block; padding: 13px 4px; margin-left: 20px; }
.fw-home .fw-navlinks a:hover { color: var(--ink); }

/* ---------- type ---------- */
.fw-home .fw-kick, .fw-home .fw-lab, .fw-free-plan .fw-lab { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 24px; }
.fw-home h1 { font: 400 clamp(40px, 6.4vw, 76px)/1.02 var(--serif); letter-spacing: -.02em; }
.fw-home h1 em { font-style: italic; color: var(--blue-text); }
.fw-home h2 { font: 400 clamp(28px, 4vw, 44px)/1.1 var(--serif); letter-spacing: -.01em; max-width: 18ch; }
.fw-home h3 { font: 400 22px/1.25 var(--serif); }
.fw-home .fw-sub { max-width: 34ch; color: var(--mute); margin-top: 14px; }
.fw-home h1 + .fw-sub { margin-top: 28px; }
.fw-home .fw-sub + .fw-free-plan, .fw-home .fw-sub + .wp-block-famaway-free-plan { margin-top: 20px; }
.fw-home .fw-small { font-size: 14px; color: var(--mute); max-width: 30ch; }
.fw-home .fw-body { color: var(--mute); margin-top: 20px; max-width: 44ch; }
.fw-home .fw-mini, .fw-free-plan .fw-mini { font-size: 13px; color: var(--mute); margin-top: 12px; }

/* ---------- sections ---------- */
.fw-home .fw-section { padding-top: 88px; padding-bottom: 88px; }
.fw-home .fw-hero { grid-template-columns: 1.1fr 1fr; gap: 56px; padding-top: 72px; padding-bottom: 88px; }
.fw-home .fw-hero > .wp-block-column { align-self: end; }

/* images */
.fw-home .fw-ph { position: relative; overflow: hidden; background: var(--stone); }
.fw-home .wp-block-image.fw-ph { position: relative; overflow: hidden; background: var(--stone); margin: 0; width: 100%; }
.fw-home .fw-ph.fw-tall { aspect-ratio: 4 / 5; }
.fw-home .fw-ph.fw-sq { aspect-ratio: 1; }
.fw-home .wp-block-image.fw-ph img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; }
.fw-home .wp-block-image.fw-ph figcaption, .fw-home .wp-block-image.fw-ph .wp-element-caption {
	position: absolute; left: 14px; top: 14px; margin: 0; padding: 2px 8px; z-index: 1;
	font: italic 15px var(--serif); color: #14213D; background: rgba(247, 245, 237, .9); text-align: left;
}
.fw-home .fw-dot::after { content: ""; position: absolute; top: 16px; right: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); z-index: 1; }
.fw-home .fw-ph-empty { display: flex; align-items: flex-end; padding: 14px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }

.fw-home .fw-trio { grid-template-columns: repeat(3, 1fr); margin-top: 48px; }
.fw-home .fw-trio .fw-small { margin-top: 12px; max-width: 28ch; }

.fw-home .fw-steps { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; border-top: 1px solid var(--stone); }
.fw-home .fw-steps > .wp-block-column { padding: 28px 24px 8px 0; }
.fw-home .fw-steps > .wp-block-column + .wp-block-column { padding-left: 24px; border-left: 1px solid var(--stone); }
.fw-home .fw-num { font: 400 34px/1.2 var(--serif); color: var(--blue-text); margin-bottom: 6px; }

.fw-home .fw-split { grid-template-columns: 1fr 1.2fr; gap: 56px; }
.fw-home .fw-split > .wp-block-column { align-self: center; }
.fw-home .fw-join { grid-template-columns: 1fr 1.1fr; }

.fw-home .fw-team { grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.fw-home .fw-team h3 { margin-top: 14px; }
.fw-home .fw-role { font-size: 14px; color: var(--mute); letter-spacing: .04em; }
.fw-home .fw-team .fw-small { margin-top: 8px; }

.fw-home .fw-plans { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 48px; border-top: 1px solid var(--stone); }
.fw-home .fw-plans > .wp-block-column { padding: 28px 20px 28px 0; }
.fw-home .fw-plans > .wp-block-column + .wp-block-column { padding-left: 24px; border-left: 1px solid var(--stone); }
.fw-home .fw-plan-name, .fw-home .fw-plans .fw-small { font-size: 14px; color: var(--mute); max-width: none; }
.fw-home .fw-price-row { display: flex; align-items: baseline; gap: 4px; margin: 8px 0; }
.fw-home .fw-price { font: 400 34px/1.2 var(--serif); }
.fw-home .fw-per { font-size: 14px; }
.fw-home .fw-plans + .fw-mini { font-size: 14px; margin-top: 20px; }

/* FAQ (core Details blocks) */
.fw-home .fw-faq { max-width: 720px; margin-top: 40px; }
.fw-home .fw-faq .wp-block-details { border-top: 1px solid var(--stone); padding: 0; }
.fw-home .fw-faq .wp-block-details:last-child { border-bottom: 1px solid var(--stone); }
.fw-home .fw-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; cursor: pointer; list-style: none; font: 400 20px/1.3 var(--serif); padding: 10px 0; }
.fw-home .fw-faq summary::-webkit-details-marker { display: none; }
.fw-home .fw-faq summary::after { content: "+"; font: 300 28px/1 var(--sans); color: var(--blue-text); flex: none; }
.fw-home .fw-faq details[open] > summary::after { content: "\2212"; }
.fw-home .fw-faq summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.fw-home .fw-faq details > :not(summary) { max-width: 62ch; color: var(--mute); font-size: 16px; margin: 0 0 8px; }
.fw-home .fw-faq details > :last-child { padding-bottom: 18px; margin-bottom: 0; }
.fw-home .fw-faq details strong { color: var(--ink); }
.fw-home .fw-faq ul { padding-left: 40px; }
.fw-home .fw-faq li { margin: 3px 0; }

/* footer */
.fw-home .fw-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 28px; padding-bottom: 40px; font-size: 14px; color: var(--mute); position: relative; }
.fw-home .fw-foot::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; border-top: 1px solid var(--stone); }
.fw-home .fw-foot a { color: var(--mute); display: inline-block; padding: 14px 4px; margin-left: 12px; }
.fw-home .fw-foot p:first-child { padding: 14px 0; }

/* ---------- buttons (shared) ---------- */
.fw-home .fw-btn, .fw-free-plan .fw-btn, .fw-home .wp-block-button__link {
	display: inline-block; background: var(--blue); color: var(--on-blue); text-decoration: none; border: 0; cursor: pointer;
	font: 600 15px/1.2 var(--sans); padding: 13px 24px; border-radius: 999px; text-transform: none; letter-spacing: normal; box-shadow: none;
}
.fw-free-plan .fw-btn--ghost { background: transparent; color: var(--blue-text); border: 2px solid var(--blue-text); padding: 11px 22px; }

/* ---------- Free Plan block ---------- */
.fw-free-plan { color: var(--ink); font: 400 16px/1.55 var(--sans); padding: 22px; max-width: 460px; background: var(--cream); border: 1px solid var(--stone); text-align: left; }
.fw-free-plan--panel { background: var(--stone); padding: 36px; max-width: none; margin-top: 32px; }
.fw-free-plan *, .fw-free-plan *::before, .fw-free-plan *::after { box-sizing: border-box; }
.fw-free-plan p, .fw-free-plan form { margin: 0; }
.fw-free-plan .fw-fp-q { font-weight: 600; margin-bottom: 12px; }
.fw-free-plan .fw-fp-hint { display: block; font-weight: 400; font-size: 14px; color: var(--mute); margin-top: 2px; }
.fw-free-plan .fw-fp-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.fw-free-plan .fw-fp-chip { min-height: 48px; min-width: 84px; padding: 0 20px; border: 1.5px solid var(--ink); background: var(--cream); color: var(--ink); font: 600 16px var(--sans); border-radius: 999px; cursor: pointer; text-transform: none; letter-spacing: normal; box-shadow: none; }
.fw-free-plan .fw-fp-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.fw-free-plan .fw-fp-go { margin-top: 16px; }
.fw-free-plan .fw-fp-go[disabled] { opacity: .45; cursor: not-allowed; }
.fw-free-plan .fw-fp-chip:focus-visible, .fw-free-plan .fw-btn:focus-visible, .fw-free-plan .fw-fp-back:focus-visible, .fw-free-plan input:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.fw-free-plan .fw-fp-email { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--mute); background: var(--field); color: #14213D; font: inherit; border-radius: 0; margin: 0; }
.fw-free-plan .fw-sr, .fw-free-plan .fw-fp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fw-free-plan .fw-fp-chk { display: flex; gap: 10px; font-size: 12px; color: var(--mute); margin: 14px 0 6px; }
.fw-free-plan .fw-fp-chk input { margin-top: 3px; flex: none; }
.fw-free-plan .fw-fp-chk label { margin: 0; font-size: 12px; color: var(--mute); }
.fw-free-plan .fw-fp-chk a { color: inherit; }
.fw-free-plan .fw-fp-err { color: #A02810; font-size: 13px; min-height: 1.2em; margin-bottom: 8px; }
.fw-free-plan .fw-fp-back { background: none; border: 0; color: var(--mute); text-decoration: underline; font: inherit; font-size: 13px; margin-left: 14px; min-height: 44px; cursor: pointer; padding: 0; text-transform: none; box-shadow: none; }
.fw-free-plan .fw-fp-planbox { background: #fff; color: #5B6475; border: 1px dashed var(--mute); padding: 18px; margin: 12px 0 18px; font-size: 14px; }
.fw-free-plan .fw-fp-planbox strong { display: block; color: #14213D; margin-bottom: 4px; }
.fw-free-plan .fw-fp-planbox p { margin: 0 0 6px; }
.fw-free-plan .fw-fp-result .fw-btn { margin: 0 8px 8px 0; }
.fw-free-plan .fw-fp-result .fw-lab { margin-bottom: 8px; }
.fw-free-plan [hidden] { display: none !important; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
	.fw-home .fw-hero, .fw-home .fw-split, .fw-home .fw-join { grid-template-columns: 1fr; gap: 36px; padding-top: 40px; }
	.fw-home .fw-trio, .fw-home .fw-steps, .fw-home .fw-plans, .fw-home .fw-team { grid-template-columns: 1fr; }
	.fw-home .fw-steps > .wp-block-column + .wp-block-column, .fw-home .fw-plans > .wp-block-column + .wp-block-column { border-left: 0; padding-left: 0; }
	.fw-home .fw-plans > .wp-block-column + .wp-block-column { border-top: 1px solid var(--stone); }
	.fw-home .fw-navlinks a { display: none; }
	.fw-home .fw-navlinks a:first-child { display: inline-block; color: var(--blue-text); font-weight: 600; margin-left: 0; }
	.fw-home .fw-section { padding-top: 56px; padding-bottom: 56px; }
	.fw-free-plan--panel { padding: 24px; }
}
@media (min-width: 761px) {
	.fw-home .fw-navlinks a:first-child { display: none; }
}

/* team photos: same black-and-white look for everyone */
.fw-home .fw-team img { filter: grayscale(1); }
/* Jeton + Jon: a little more contrast so they match Rozafa */
.fw-home .fw-team img.wp-image-251, .fw-home .fw-team img.wp-image-290 { filter: grayscale(1) contrast(1.2); }

/* Hero slider: a Group (class fw-slider) holding fw-ph image blocks; they cross-fade (assets/home.js) */
.fw-home .fw-slider { position: relative; display: grid; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.fw-home .fw-slider .wp-block-image { grid-area: 1 / 1; height: 100%; margin: 0; opacity: 0; transition: opacity 1s ease; }
.fw-home .fw-slider:not(.is-ready) .wp-block-image:first-child,
.fw-home .fw-slider.is-ready .wp-block-image.is-active { opacity: 1; }
.fw-home .fw-slider-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.fw-home .fw-slider-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.55); cursor: pointer; }
.fw-home .fw-slider-dots button[aria-current="true"] { background: #fff; }
@media (prefers-reduced-motion: reduce) { .fw-home .fw-slider .wp-block-image { transition: none; } }
/* in the block editor, show every slide so each one can be edited */
.editor-styles-wrapper .fw-home .fw-slider, .editor-styles-wrapper .fw-slider { display: block; aspect-ratio: auto; overflow: visible; }
.editor-styles-wrapper .fw-slider .wp-block-image { opacity: 1; aspect-ratio: 4 / 5; height: auto; margin-bottom: 12px; }