/* =========================================================================
   Responsive rules. The complete experience remains available across desktop,
   tablet and phone layouts; smaller screens reorganise controls without removing core actions.
   ========================================================================= */

@media (max-width: 1100px) {
	.ft-hero-grid { grid-template-columns: minmax(0, 1fr); }
	.ft-hero-visual { max-width: 720px; }
	.ft-features-grid, .ft-owned-grid, .ft-faq-grid { grid-template-columns: 1fr; }
	.ft-features-intro { position: static; }
	.ft-plans { grid-template-columns: 1fr; }
	.ft-buy { grid-template-columns: 1fr; }
	.ft-footer-grid { grid-template-columns: 1fr 1fr; }
	.ft-voices-grid { grid-template-columns: 1fr; }
	.ft-voice--lead { grid-row: auto; }
}

@media (max-width: 900px) {
	:root { --ft-header-h: 68px; }
	body { font-size: 16px; }

	/* Header / nav */
	.ft-nav-toggle { display: inline-grid; }
	.ft-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 8px;
		background: var(--ft-paper); padding: 8px 24px 24px;
		border-bottom: 1px solid var(--ft-line); box-shadow: var(--ft-shadow-md);
		display: none;
	}
	.ft-header.is-open .ft-nav { display: flex; }
	.ft-nav-list { flex-direction: column; margin: 0; }
	.ft-nav-list a { padding: 14px 12px; font-size: 1.0625rem; }
	.ft-nav-actions { flex-direction: column; align-items: stretch; }
	.ft-nav-actions .ft-btn { width: 100%; }
	.ft-nav-actions .ft-link-quiet { text-align: center; padding: 14px; }
	.ft-usermenu-panel { position: static; box-shadow: none; margin-top: 8px; }

	/* Home */
	.ft-steps { grid-template-columns: 1fr; gap: 40px; }
	.ft-steps::before { left: 27px; right: auto; top: 28px; bottom: 60px; width: 3px; height: auto; background: repeating-linear-gradient(180deg, var(--ft-thread) 0 10px, transparent 10px 18px); }
	.ft-step { padding-left: 84px; }
	.ft-step-node { position: absolute; left: 0; top: 0; margin: 0; }
	.ft-checklist--two { grid-template-columns: 1fr; }
	.ft-cta-inner::before, .ft-cta-inner::after { opacity: 0.35; }

	/* Login */
	.ft-login { grid-template-columns: 1fr; }
	.ft-login-aside { display: none; }

	/* Dashboard */
	.ft-status-strip { grid-template-columns: 1fr; }
	.ft-status-item + .ft-status-item { border-left: 0; border-top: 1px solid var(--ft-line); }
	.ft-dl > div { grid-template-columns: 1fr; gap: 4px; }

	/* Editor */
	.ft-hide-sm { display: none !important; }
	.ft-gen-select { display: none !important; }
	.ft-ed-menus { gap: 0; }
	.ft-menu-btn { padding: 8px 7px; font-size: 0.8125rem; }
	.ft-ed-right { gap: 4px; }
	.ft-editor { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "canvas" "bottom"; }
	.ft-editor.side-collapsed { grid-template-columns: minmax(0, 1fr); }
	.ft-editor.side-collapsed .ft-ed-side { visibility: visible; }
	.ft-ed-side {
		position: fixed; left: 0; top: 60px; bottom: 54px; width: min(86vw, 320px); z-index: 40;
		transform: translateX(-104%); transition: transform 0.25s ease; box-shadow: none;
	}
	.ft-editor.side-open .ft-ed-side { transform: none; box-shadow: 8px 0 40px rgba(23, 15, 42, 0.3); }
	.ft-ed-top { gap: 8px; padding: 0 8px; }
	.ft-ed-name { display: none; }
	.ft-ed-name { width: auto; flex: 1 1 90px; }
	.ft-ed-top > .ft-ed-right .ft-status { display: none; }
	.ft-status--bottom { display: inline-flex; }
	.ft-floatbar button span { display: none; }
	.ft-floatbar button { padding: 10px 12px; }
	.ft-floatbar button .ft-icon { width: 20px; height: 20px; }
	.ft-ed-bottom { gap: 4px; padding: 0 8px; }
	.ft-search { flex: 1 1 120px; margin-left: 4px; }
	.ft-bottom-btn span { display: none; }
	.ft-viewer-title { font-size: 1.2rem; max-width: 40vw; text-overflow: ellipsis; }
}

@media (max-width: 640px) {
	.ft-wrap, .ft-wrap--narrow { width: min(100% - 36px, var(--ft-wrap)); }
	.ft-hide-xs { display: none !important; }
	.ft-hero-actions .ft-btn { width: 100%; }
	.ft-hero-visual { padding: 0 0 22px 12px; max-width: 100%; }
	.ft-hero-note { font-size: 0.75rem; }
	.ft-window-saved { display: none; }
	.ft-footer-grid { grid-template-columns: 1fr; }
	.ft-footer-base { flex-direction: column; align-items: flex-start; gap: 14px; }
	.ft-footer-slim-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
	.ft-ledger-row { grid-template-columns: 44px 1fr; gap: 14px; }
	.ft-ledger-icon { width: 44px; height: 44px; }
	.ft-field-row { grid-template-columns: 1fr; }
	.ft-person-grid { grid-template-columns: 1fr; justify-items: center; }
	.ft-person-grid .ft-fields { width: 100%; }
	.ft-dialog-actions .ft-btn { flex: 1 1 auto; }
	.ft-compare-row { grid-template-columns: 1.4fr 0.8fr 0.8fr; font-size: 0.875rem; }
	.ft-compare-row > span:first-child { padding-left: 16px; }
	.ft-upsell { flex-direction: column; align-items: flex-start; }
	.ft-profile .ft-btn { margin-left: 0; }
	.ft-empty-canvas > div { padding: 24px 20px; }
	.ft-zoom-label { min-width: 44px; }
	.ft-toasts { left: 12px; right: 12px; }
}

@media (hover: none) {
	.ft-tree-card:hover { transform: none; box-shadow: none; }
}

/* =========================================================================
   Mobile hardening
   Keep the complete editor usable on phones instead of removing core actions.
   ========================================================================= */
html, body {
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}
img, video, iframe, svg { max-width: 100%; }

@supports (height: 100dvh) {
	.ft-editor { height: 100dvh; }
	.ft-dialog { max-height: min(calc(100dvh - 24px), 860px); }
}

@media (max-width: 900px) {
	.ft-editor {
		grid-template-rows: calc(60px + env(safe-area-inset-top)) minmax(0, 1fr) calc(54px + env(safe-area-inset-bottom));
	}
	.ft-ed-top { padding-top: env(safe-area-inset-top); }
	.ft-ed-bottom { padding-bottom: env(safe-area-inset-bottom); }
	.ft-ed-side {
		top: calc(60px + env(safe-area-inset-top));
		bottom: calc(54px + env(safe-area-inset-bottom));
		overscroll-behavior: contain;
	}
	.ft-menu-btn, .ft-icon-btn, .ft-bottom-btn, .ft-floatbar button { min-height: 44px; }
	.ft-ed-top { overflow: visible; }
	.ft-ed-menus { flex: 0 0 auto; }
	.ft-menu-panel { max-height: min(70dvh, 520px); overflow-y: auto; overscroll-behavior: contain; }
	.ft-floatbar { max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
	.ft-floatbar::-webkit-scrollbar { display: none; }
	.ft-search { min-width: 0; }
	.ft-search input { min-width: 0; width: 100%; }
}

@media (max-width: 640px) {
	.ft-editor { grid-template-rows: calc(56px + env(safe-area-inset-top)) minmax(0, 1fr) calc(58px + env(safe-area-inset-bottom)); }
	.ft-ed-top { min-width: 0; gap: 3px; padding-left: max(5px, env(safe-area-inset-left)); padding-right: max(5px, env(safe-area-inset-right)); }
	.ft-ed-brand { padding: 4px; }
	.ft-ed-brand .ft-logo-mark { max-width: 28px; }
	.ft-ed-brand .ft-editor-logo { height: 30px !important; max-width: 150px; }
	.ft-ed-menus { gap: 0; min-width: 0; }
	.ft-menu-btn { min-width: 44px; padding: 7px 6px; font-size: .76rem; }
	.ft-ed-right { gap: 2px; min-width: 0; }
	.ft-ed-right .ft-btn { width: 44px; min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
	.ft-ed-right .ft-btn span { display: none; }
	.ft-ed-side { top: calc(56px + env(safe-area-inset-top)); bottom: calc(58px + env(safe-area-inset-bottom)); width: min(90vw, 340px); }
	.ft-ed-bottom { gap: 2px; padding-left: max(5px, env(safe-area-inset-left)); padding-right: max(5px, env(safe-area-inset-right)); }
	.ft-zoom { flex: 0 0 auto; }
	.ft-zoom .ft-icon-btn { width: 40px; min-width: 40px; }
	.ft-zoom-label { min-width: 38px; padding: 0 3px; font-size: .72rem; }
	.ft-bottom-btn { min-width: 42px; padding: 7px; justify-content: center; }
	.ft-search { flex: 1 1 90px; margin-left: 2px; }
	.ft-search input { height: 42px; padding-left: 34px; padding-right: 8px; font-size: 16px; }
	.ft-status--bottom { display: none !important; }
	.ft-theme-panel { top: calc(58px + env(safe-area-inset-top)) !important; max-height: calc(100dvh - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; overflow-y: auto; }
	.ft-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; }
	.ft-dialog-form { padding: 20px 16px; gap: 15px; }
	.ft-dialog-form h2 { font-size: clamp(1.45rem, 8vw, 1.8rem); }
	.ft-dialog-actions { position: sticky; bottom: 0; margin: 0 -16px -20px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--ft-line); z-index: 2; }
	.ft-dialog-actions .ft-btn { min-height: 44px; }
	.ft-empty-canvas { padding: 12px; }
	.ft-empty-canvas > div { width: min(100%, 380px); padding: 22px 16px; border-radius: 20px; }
	body.ft-editor-body .ft-toasts { left: 8px; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
	.ft-menu-btn { min-width: 40px; padding-inline: 4px; font-size: .7rem; }
	.ft-ed-right .ft-btn { width: 40px; min-width: 40px; }
	.ft-zoom-label { display: none; }
	.ft-search input { padding-left: 30px; }
}

@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
	.ft-editor { grid-template-rows: calc(50px + env(safe-area-inset-top)) minmax(0, 1fr) calc(50px + env(safe-area-inset-bottom)); }
	.ft-ed-side { top: calc(50px + env(safe-area-inset-top)); bottom: calc(50px + env(safe-area-inset-bottom)); }
	.ft-ed-top, .ft-ed-bottom { min-height: 0; }
	.ft-theme-panel { top: calc(52px + env(safe-area-inset-top)) !important; max-height: calc(100dvh - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
	.ft-side-block { padding-block: 14px; }
}


/* =========================================================================
   Final small-screen hardening
   ========================================================================= */
@media (max-width: 640px) {
	.ft-tree-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.ft-tree-card, .ft-tree-body, .ft-tree-top { min-width: 0; }
	.ft-tree-top h3 { font-size: clamp(1.45rem, 8vw, 1.9rem); overflow-wrap: anywhere; }
	.ft-table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
	.ft-table-scroll .ft-table { min-width: 620px; }
	.ft-table-scroll:focus-visible { outline: 3px solid var(--ft-thread); outline-offset: 3px; }
	.ft-compare { overflow-x: auto; overscroll-behavior-inline: contain; }
	.ft-compare-row { min-width: 420px; }
	.ft-event-photo-panel { max-height: 34dvh; overflow: auto; }
	.ft-event-photo-drop { max-height: min(170px, 26dvh); }
}

@media (max-width: 380px) {
	.ft-ed-brand .ft-editor-logo { max-width: 104px; }
	.ft-menu-btn { min-width: 36px; padding-inline: 3px; font-size: .66rem; }
	.ft-ed-right .ft-btn { width: 38px; min-width: 38px; }
	.ft-compare-row { min-width: 390px; }
}

@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
	.ft-event-form { max-height: calc(100dvh - 12px); }
	.ft-event-photo-panel { max-height: 30dvh; }
	.ft-event-photo-drop { max-height: 24dvh; }
	.ft-dialog-actions { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* Google Drive ownership section: mobile readability and fit */
@media (max-width: 640px) {
	.ft-owned {
		padding: 56px 0;
	}
	.ft-owned-grid {
		gap: 28px;
	}
	.ft-owned-copy {
		min-width: 0;
	}
	.ft-owned-copy h2 {
		font-size: clamp(2rem, 10vw, 2.65rem);
		line-height: 1.05;
		letter-spacing: -0.02em;
		max-width: 11ch;
		margin: 0 0 .7em;
		overflow-wrap: normal;
		word-break: normal;
	}
	.ft-owned-copy p {
		font-size: 1rem;
		line-height: 1.65;
		max-width: none;
		margin: 0 0 1em;
	}
	.ft-owned-copy p:last-child {
		margin-bottom: 0;
	}
	.ft-drive-panel {
		min-width: 0;
		padding: 16px;
		border-radius: 20px;
	}
	.ft-drive-file {
		min-width: 0;
		gap: 10px;
		padding: 12px;
	}
	.ft-drive-file > div {
		min-width: 0;
	}
	.ft-drive-file strong {
		overflow-wrap: anywhere;
	}
}

@media (max-width: 380px) {
	.ft-owned {
		padding: 48px 0;
	}
	.ft-owned-copy h2 {
		font-size: clamp(1.9rem, 9.5vw, 2.25rem);
		max-width: 12ch;
	}
	.ft-owned-copy p {
		font-size: .96rem;
		line-height: 1.6;
	}
	.ft-drive-file {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr);
	}
	.ft-drive-file-ok {
		grid-column: 2;
		margin-left: 0;
	}
}


/* =========================================================================
   Editor navigation + dropdown hardening
   ========================================================================= */
@media (max-width: 900px) {
	/* Keep dropdowns inside the viewport regardless of which menu opened them. */
	.ft-ed-top .ft-menu-panel {
		position: fixed;
		top: calc(62px + env(safe-area-inset-top));
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		width: min(360px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
		min-width: 0;
		max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
		max-height: calc(100dvh - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		z-index: 90;
	}
	.ft-ed-top .ft-menu--right .ft-menu-panel {
		left: 50%;
		right: auto;
	}
	.ft-ed-top .ft-theme-panel {
		width: min(720px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
		max-width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
	}
	.ft-menu-panel button,
	.ft-menu-panel a,
	.ft-theme-option {
		min-height: 44px;
	}
}

/* Phones that cannot comfortably hold logo + menus + actions in one row. */
@media (max-width: 520px) {
	.ft-editor {
		grid-template-rows: calc(104px + env(safe-area-inset-top)) minmax(0, 1fr) calc(58px + env(safe-area-inset-bottom));
	}
	.ft-ed-top {
		min-height: 0;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 4px;
		row-gap: 0;
		padding-top: env(safe-area-inset-top);
		padding-left: max(6px, env(safe-area-inset-left));
		padding-right: max(6px, env(safe-area-inset-right));
		padding-bottom: 4px;
	}
	.ft-ed-brand {
		flex: 0 1 auto;
		max-width: min(42vw, 138px);
		overflow: hidden;
	}
	.ft-ed-brand .ft-editor-logo {
		max-width: 100%;
		height: 30px !important;
	}
	.ft-ed-right {
		margin-left: auto;
		flex: 0 0 auto;
		gap: 3px;
	}
	.ft-ed-right .ft-btn {
		width: 40px;
		min-width: 40px;
		height: 40px;
		min-height: 40px;
	}
	.ft-ed-menus {
		order: 3;
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		height: 44px;
		align-items: stretch;
		justify-content: stretch;
		gap: 2px;
		border-top: 1px solid rgba(255,255,255,.08);
		padding-top: 3px;
	}
	.ft-ed-menus > .ft-menu {
		flex: 1 1 0;
		min-width: 0;
	}
	.ft-ed-menus .ft-menu-btn {
		width: 100%;
		min-width: 0;
		height: 40px;
		min-height: 40px;
		padding: 6px 4px;
		font-size: .74rem;
		white-space: nowrap;
		text-align: center;
	}
	.ft-ed-side {
		top: calc(104px + env(safe-area-inset-top));
		bottom: calc(58px + env(safe-area-inset-bottom));
	}
	.ft-ed-top .ft-menu-panel {
		top: calc(108px + env(safe-area-inset-top));
		width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
		max-height: calc(100dvh - 124px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
		border-radius: 16px;
	}
	.ft-ed-top .ft-theme-panel {
		width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
	}
	.ft-menu-panel kbd {
		font-size: .64rem;
		padding-inline: 5px;
	}
}

@media (max-width: 360px) {
	.ft-ed-brand { max-width: 96px; }
	.ft-ed-right .ft-btn { width: 38px; min-width: 38px; }
	.ft-ed-menus .ft-menu-btn { font-size: .7rem; padding-inline: 2px; }
	.ft-menu-panel kbd { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) and (max-width: 900px) {
	.ft-ed-top .ft-menu-panel {
		top: calc(52px + env(safe-area-inset-top));
		max-height: calc(100dvh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	}
}

@media (max-width: 520px) and (max-height: 520px) and (orientation: landscape) {
	.ft-editor {
		grid-template-rows: calc(88px + env(safe-area-inset-top)) minmax(0, 1fr) calc(50px + env(safe-area-inset-bottom));
	}
	.ft-ed-top { padding-bottom: 2px; }
	.ft-ed-menus { height: 36px; padding-top: 1px; }
	.ft-ed-menus .ft-menu-btn { height: 34px; min-height: 34px; }
	.ft-ed-right .ft-btn { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
	.ft-ed-side {
		top: calc(88px + env(safe-area-inset-top));
		bottom: calc(50px + env(safe-area-inset-bottom));
	}
	.ft-ed-top .ft-menu-panel {
		top: calc(90px + env(safe-area-inset-top));
		max-height: calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	}
}

/* Share dialog: mobile-safe sizing and controls */
#ft-share-dialog {
	max-width: 680px;
	overflow-x: hidden;
}
#ft-share-dialog .ft-dialog-form,
#ft-share-dialog .ft-dialog-head > div,
#ft-share-options {
	min-width: 0;
}
.ft-share-link {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.ft-share-link input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 10px 12px;
	font: 500 .9rem var(--ft-font-sans);
	color: var(--ft-ink);
	background: #fff;
	border: 1.5px solid var(--ft-line-strong);
	border-radius: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#ft-share-regenerate {
	max-width: 100%;
	white-space: normal;
	text-align: left;
	line-height: 1.4;
}

@media (max-width: 640px) {
	#ft-share-dialog {
		width: calc(100vw - 16px);
		max-width: calc(100vw - 16px);
		max-height: calc(100dvh - 16px);
		margin: auto;
	}
	#ft-share-dialog .ft-dialog-form {
		padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
		gap: 16px;
	}
	#ft-share-dialog .ft-dialog-head {
		gap: 10px;
	}
	#ft-share-dialog .ft-dialog-head h2 {
		font-size: clamp(1.45rem, 7vw, 1.8rem);
	}
	#ft-share-dialog .ft-dialog-sub {
		line-height: 1.45;
	}
	.ft-share-link {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
	.ft-share-link .ft-btn {
		width: 100%;
		min-height: 44px;
		justify-content: center;
	}
	#ft-share-dialog .ft-switch {
		align-items: flex-start;
		line-height: 1.35;
	}
	#ft-share-dialog .ft-check {
		line-height: 1.4;
	}
	#ft-share-dialog .ft-check span {
		min-width: 0;
	}
	#ft-share-dialog .ft-check small {
		display: inline-block;
		margin-top: 3px;
		line-height: 1.45;
	}
}

@media (max-width: 380px) {
	#ft-share-dialog {
		width: calc(100vw - 10px);
		max-width: calc(100vw - 10px);
		max-height: calc(100dvh - 10px);
		border-radius: 16px;
	}
	#ft-share-dialog .ft-dialog-form {
		padding: 16px 13px calc(16px + env(safe-area-inset-bottom));
		gap: 14px;
	}
	.ft-share-link input {
		font-size: .84rem;
	}
}


/* Timeline mode: preserve the responsive editor header instead of reverting to desktop grid sizes. */
@media (max-width: 900px) {
	.ft-editor.is-timeline-mode {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "top" "canvas" "bottom";
		grid-template-rows: calc(60px + env(safe-area-inset-top)) minmax(0, 1fr) 0;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}
	.ft-editor.is-timeline-mode .ft-ed-canvas,
	.ft-editor.is-timeline-mode .ft-timeline-workspace,
	.ft-editor.is-timeline-mode .ft-timeline-workspace-body,
	.ft-editor.is-timeline-mode .ft-timeline-list,
	.ft-editor.is-timeline-mode .ft-timeline-track,
	.ft-editor.is-timeline-mode .ft-timeline-card,
	.ft-editor.is-timeline-mode .ft-timeline-card-wrap {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}
	.ft-editor.is-timeline-mode .ft-ed-side {
		display: none !important;
	}
}

@media (max-width: 640px) {
	.ft-editor.is-timeline-mode {
		grid-template-rows: calc(56px + env(safe-area-inset-top)) minmax(0, 1fr) 0;
	}
}

@media (max-width: 520px) {
	.ft-editor.is-timeline-mode {
		grid-template-rows: calc(104px + env(safe-area-inset-top)) minmax(0, 1fr) 0;
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		padding-left: max(10px, env(safe-area-inset-left));
		padding-right: max(10px, env(safe-area-inset-right));
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace-head,
	.ft-editor.is-timeline-mode .ft-timeline-workspace-actions {
		min-width: 0;
		max-width: 100%;
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace-actions {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

@media (max-width: 380px) {
	.ft-editor.is-timeline-mode .ft-timeline-workspace {
		padding-left: max(8px, env(safe-area-inset-left));
		padding-right: max(8px, env(safe-area-inset-right));
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace-actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 520px) and (max-height: 520px) and (orientation: landscape) {
	.ft-editor.is-timeline-mode {
		grid-template-rows: calc(88px + env(safe-area-inset-top)) minmax(0, 1fr) 0;
	}
}

/* =========================================================================
   v1.2.7 responsive correction
   - Compact editor chrome on smaller desktop/laptop widths.
   - True single-column timeline cards on phones.
   ========================================================================= */

/* Smaller laptops: preserve every action without forcing the top bar wider
   than the editor viewport. Text labels give way to icons before controls wrap. */
@media (max-width: 1500px) and (min-width: 901px) {
	.ft-ed-top {
		gap: 8px;
		padding-inline: 10px;
		min-width: 0;
	}
	.ft-ed-brand { flex: 0 1 auto; min-width: 0; }
	.ft-ed-brand .ft-editor-logo {
		max-width: 158px;
		height: 34px !important;
	}
	.ft-ed-menus { flex: 0 0 auto; gap: 0; }
	.ft-menu-btn { padding-inline: 8px; }
	.ft-ed-right {
		gap: 5px;
		min-width: 0;
	}
	.ft-ed-right > .ft-status { display: none; }
	/* At compact-laptop widths the optional account CTA is the first control
	   allowed to leave the bar. Keeping it here causes it to collide with
	   Share on 1366–1600px class displays and when browser chrome/sidebar
	   reduces the usable viewport. */
	.ft-ed-right > .ft-hide-xs { display: none !important; }
	.ft-ed-right > .ft-btn,
	.ft-ed-right > .ft-menu > .ft-btn {
		width: 44px;
		min-width: 44px;
		padding-inline: 0;
		justify-content: center;
	}
	.ft-ed-right > .ft-btn > .ft-hide-sm,
	.ft-ed-right > .ft-menu > .ft-btn > .ft-hide-sm {
		display: none !important;
	}
	.ft-gen-select {
		width: 142px;
		max-width: 142px;
		padding-left: 10px;
	}
}

@media (max-width: 1220px) and (min-width: 901px) {
	.ft-ed-brand .ft-editor-logo { max-width: 132px; }
	.ft-menu-btn { padding-inline: 6px; font-size: .8rem; }
	.ft-gen-select { width: 126px; max-width: 126px; }
	.ft-ed-right > .ft-hide-xs { display: none !important; }
}

/* Tablet/phone timeline fallback: when the horizontal composition no longer
   has enough width, one chronological event owns one full row. This tier also
   covers iPad portrait widths such as 820px. */
@media (max-width: 1024px) {
	.ft-editor.is-timeline-mode .ft-timeline-workspace {
		grid-template-rows: auto minmax(0, 1fr);
		gap: 12px;
		overflow: hidden;
	}
	.ft-editor.is-timeline-mode .ft-timeline-empty[hidden] { display: none !important; }
	.ft-editor.is-timeline-mode .ft-timeline-workspace-head {
		min-width: 0;
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace-head > div:first-child {
		min-width: 0;
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace-actions {
		display: grid;
		grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
		gap: 8px;
		width: 100%;
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace-actions .ft-btn {
		width: 100%;
		min-width: 0;
		min-height: 44px;
		padding: 9px 8px;
		font-size: .84rem;
		justify-content: center;
		white-space: normal;
		text-align: center;
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace-body {
		display: block;
		min-width: 0;
		min-height: 0;
		overflow: hidden;
	}
	.ft-editor.is-timeline-mode .ft-timeline-list {
		width: 100%;
		height: 100%;
		min-width: 0;
		min-height: 0;
		max-height: none;
		overflow-x: hidden;
		overflow-y: auto;
		padding: 2px 2px calc(24px + env(safe-area-inset-bottom));
		scrollbar-gutter: stable;
		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;
	}
	.ft-editor.is-timeline-mode .ft-timeline-stage {
		width: 100%;
		min-width: 0;
		height: auto;
		min-height: 100%;
		padding: 0;
	}
	.ft-editor.is-timeline-mode .ft-timeline-track {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
		gap: 14px;
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 2px 0 18px !important;
	}
	.ft-editor.is-timeline-mode .ft-timeline-track::before {
		display: none !important;
	}
	.ft-editor.is-timeline-mode .ft-timeline-entry,
	.ft-editor.is-timeline-mode .ft-timeline-entry--top,
	.ft-editor.is-timeline-mode .ft-timeline-entry--bottom {
		position: relative;
		display: grid !important;
		grid-template-columns: 42px minmax(0, 1fr);
		grid-template-rows: auto;
		align-items: start;
		gap: 10px;
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		padding: 0 !important;
	}
	.ft-editor.is-timeline-mode .ft-timeline-entry::before {
		content: "";
		position: absolute;
		left: 20px;
		top: 34px;
		bottom: -18px;
		width: 2px;
		background: linear-gradient(var(--ft-line-strong), var(--ft-line));
		z-index: 0;
	}
	.ft-editor.is-timeline-mode .ft-timeline-entry:last-child::before {
		display: none;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card-wrap,
	.ft-editor.is-timeline-mode .ft-timeline-entry--top .ft-timeline-card-wrap,
	.ft-editor.is-timeline-mode .ft-timeline-entry--bottom .ft-timeline-card-wrap {
		position: relative !important;
		inset: auto !important;
		grid-column: 2;
		grid-row: 1;
		width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		padding: 0 !important;
		overflow: visible !important;
		align-content: initial !important;
		justify-items: stretch !important;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
		width: 100%;
		min-width: 0;
		padding: 13px 14px;
		border: 1px solid rgba(74,55,112,.12);
		border-radius: 16px;
		background: rgba(255,255,255,.88);
		box-shadow: 0 5px 18px rgba(36,27,59,.06);
		justify-items: start;
		text-align: left;
		transform: none !important;
		box-sizing: border-box;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media {
		grid-template-columns: 82px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
	}
	.ft-editor.is-timeline-mode .ft-timeline-media,
	.ft-editor.is-timeline-mode .ft-timeline-media.is-pair {
		width: 82px !important;
		min-width: 0;
		grid-column: 1;
		grid-row: 1;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-body {
		grid-column: 2;
		grid-row: 1;
	}
	.ft-editor.is-timeline-mode .ft-timeline-body {
		width: 100%;
		min-width: 0;
		gap: 5px;
		justify-items: start;
		text-align: left;
	}
	.ft-editor.is-timeline-mode .ft-timeline-date {
		justify-items: start;
		margin: 0 0 1px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-text,
	.ft-editor.is-timeline-mode .ft-timeline-desc,
	.ft-editor.is-timeline-mode .ft-timeline-people {
		max-width: 100%;
		text-align: left;
	}
	.ft-editor.is-timeline-mode .ft-timeline-text {
		font-size: .9rem;
		line-height: 1.3;
	}
	.ft-editor.is-timeline-mode .ft-timeline-desc {
		font-size: .76rem;
		line-height: 1.42;
		-webkit-line-clamp: 2;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card-actions {
		justify-content: flex-start;
		margin-top: 2px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-read-story {
		justify-self: start;
	}
	.ft-editor.is-timeline-mode .ft-timeline-marker,
	.ft-editor.is-timeline-mode .ft-timeline-marker.has-portrait,
	.ft-editor.is-timeline-mode .ft-timeline-marker.has-initials {
		position: relative !important;
		left: auto !important;
		top: auto !important;
		transform: none !important;
		grid-column: 1;
		grid-row: 1;
		justify-self: center;
		margin: 10px 0 0 !important;
		z-index: 2;
	}
	.ft-editor.is-timeline-mode .ft-timeline-stem,
	.ft-editor.is-timeline-mode .ft-timeline-nav {
		display: none !important;
	}
}

@media (max-width: 420px) {
	.ft-editor.is-timeline-mode .ft-timeline-workspace {
		padding: 12px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace-head h2 {
		font-size: 1.5rem;
		line-height: 1.08;
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace-head p {
		font-size: .78rem;
		line-height: 1.4;
	}
	.ft-editor.is-timeline-mode .ft-timeline-workspace-actions {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 10px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-media,
	.ft-editor.is-timeline-mode .ft-timeline-media.is-pair {
		width: 72px !important;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card {
		padding: 12px;
	}
}

/* ==========================================================================
   Adaptive horizontal timeline for wide, short viewports
   When width is available but vertical room is limited, media moves beside
   the event copy instead of above it. This preserves the horizontal story
   without forcing cards outside their upper/lower timeline zones.
   ========================================================================= */
@media (min-width: 1025px) and (max-height: 780px) {
	.ft-editor.is-timeline-mode .ft-timeline-track {
		gap: 68px;
		padding-inline: 150px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-track::before {
		left: 150px;
		right: 150px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-entry {
		flex: 0 0 300px;
		width: 300px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card {
		gap: 5px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media {
		display: grid;
		grid-template-columns: 100px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 13px;
		row-gap: 4px;
		align-items: center;
		justify-items: stretch;
		text-align: left;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-media,
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-media.is-pair {
		grid-column: 1;
		grid-row: 1 / span 2;
		width: 100px;
		max-width: 100px;
		align-self: center;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-body {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
		min-width: 0;
		justify-items: start;
		text-align: left;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-date {
		justify-items: start;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-text,
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-desc,
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-people {
		max-width: 100%;
		text-align: left;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media > .ft-timeline-card-action,
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media > .ft-timeline-card-actions {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		margin-top: 0;
	}
	.ft-editor.is-timeline-mode .ft-timeline-entry--top .ft-timeline-card-wrap,
	.ft-editor.is-timeline-mode .ft-timeline-entry--bottom .ft-timeline-card-wrap {
		overflow: hidden;
	}
}

/* Extra-short landscape/laptop screens: reduce media slightly while retaining
   the side-by-side composition and increased inter-event breathing room. */
@media (min-width: 1025px) and (max-height: 650px) {
	.ft-editor.is-timeline-mode .ft-timeline-track {
		gap: 76px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-entry {
		flex-basis: 292px;
		width: 292px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media {
		grid-template-columns: 88px minmax(0, 1fr);
		column-gap: 11px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-media,
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-media.is-pair {
		width: 88px;
		max-width: 88px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-text {
		font-size: .82rem;
		line-height: 1.22;
	}
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media .ft-timeline-desc {
		font-size: .67rem;
		line-height: 1.32;
	}
}


/* ==========================================================================
   Progressive editor responsiveness
   Layouts intentionally fall through from desktop -> compact laptop -> tablet
   -> phone. Each narrower tier is self-contained so intermediate device sizes
   never depend on a missing exact breakpoint.
   ========================================================================= */

/* Small laptop: keep a single row, but progressively surrender non-essential
   width before any primary editor action can collide. */
@media (max-width: 1100px) and (min-width: 901px) {
	.ft-ed-top { gap: 6px; padding-inline: 8px; }
	.ft-ed-brand .ft-editor-logo { max-width: 118px; }
	.ft-menu-btn { padding-inline: 5px; font-size: .77rem; }
	.ft-gen-select { width: 112px; max-width: 112px; }
	.ft-ed-right { gap: 4px; }
	.ft-ed-right > .ft-btn,
	.ft-ed-right > .ft-menu > .ft-btn { width: 42px; min-width: 42px; }
}

/* Tablet: move menus to a dedicated second row. This provides a predictable
   fallback for iPad portrait and other 521-900px layouts instead of squeezing
   desktop chrome until it overflows. */
@media (max-width: 900px) and (min-width: 521px) {
	.ft-editor {
		grid-template-rows: calc(106px + env(safe-area-inset-top)) minmax(0, 1fr) calc(54px + env(safe-area-inset-bottom));
	}
	.ft-ed-top {
		min-height: 0;
		align-content: center;
		align-items: center;
		flex-wrap: wrap;
		column-gap: 6px;
		row-gap: 0;
		padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 4px max(10px, env(safe-area-inset-left));
	}
	.ft-ed-brand { flex: 0 1 auto; max-width: min(34vw, 180px); overflow: hidden; }
	.ft-ed-brand .ft-editor-logo { max-width: 100%; height: 32px !important; }
	.ft-ed-right { margin-left: auto; gap: 5px; }
	.ft-ed-right > .ft-btn,
	.ft-ed-right > .ft-menu > .ft-btn { width: 42px; min-width: 42px; min-height: 42px; padding-inline: 0; justify-content: center; }
	.ft-ed-menus {
		order: 3;
		flex: 0 0 100%;
		width: 100%;
		height: 44px;
		align-items: stretch;
		gap: 4px;
		border-top: 1px solid rgba(255,255,255,.08);
		padding-top: 3px;
	}
	.ft-ed-menus > .ft-menu { flex: 1 1 0; min-width: 0; }
	.ft-ed-menus .ft-menu-btn {
		width: 100%; min-width: 0; height: 40px; min-height: 40px;
		justify-content: center; padding: 6px 8px; white-space: nowrap;
	}
	.ft-ed-side {
		top: calc(106px + env(safe-area-inset-top));
		bottom: calc(54px + env(safe-area-inset-bottom));
	}
	.ft-ed-top .ft-menu-panel {
		top: calc(110px + env(safe-area-inset-top));
		max-height: calc(100dvh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	}
	.ft-editor.is-timeline-mode {
		grid-template-rows: calc(106px + env(safe-area-inset-top)) minmax(0, 1fr) 0;
	}
}

/* Tablet timeline cards have more room than phones, so use a wider media rail
   and cap the readable card width while preserving the vertical chronology. */
@media (max-width: 1024px) and (min-width: 701px) {
	.ft-editor.is-timeline-mode .ft-timeline-workspace { gap: 12px; }
	.ft-editor.is-timeline-mode .ft-timeline-workspace-body { display: block; overflow: hidden; }
	.ft-editor.is-timeline-mode .ft-timeline-list {
		height: 100%; overflow-x: hidden; overflow-y: auto; padding: 4px 8px 28px;
		overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
	}
	.ft-editor.is-timeline-mode .ft-timeline-track { max-width: 820px; margin-inline: auto; }
	.ft-editor.is-timeline-mode .ft-timeline-card.has-media {
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 16px;
	}
	.ft-editor.is-timeline-mode .ft-timeline-media,
	.ft-editor.is-timeline-mode .ft-timeline-media.is-pair { width: 112px !important; }
	.ft-editor.is-timeline-mode .ft-timeline-card { padding: 15px 16px; }
	.ft-editor.is-timeline-mode .ft-timeline-text { font-size: .96rem; }
	.ft-editor.is-timeline-mode .ft-timeline-desc { font-size: .8rem; }
}

/* Editor account CTA: never compete with compact navigation below 1500px. */
@media (max-width: 1499.98px) {
	.ft-ed-top .ft-editor-account-cta {
		display: none !important;
	}
}

@media (max-width: 640px) {
	.ft-voices-controls { align-items:flex-start; flex-direction:column; gap:10px; margin-top:32px; }
}

@media (max-width: 640px) {
	.ft-login-logo { width:min(210px, 68vw); max-height:88px; }
}

/* About page responsive layout */
@media (max-width: 1100px) {
	.ft-about-hero-grid, .ft-about-google-grid, .ft-about-trust-grid { grid-template-columns: 1fr; }
	.ft-about-story-map { max-width: 760px; min-height: 460px; }
	.ft-about-feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.ft-about-feature-card:nth-child(2), .ft-about-feature-card:nth-child(4) { transform:none; }
}
@media (max-width: 760px) {
	.ft-about-hero-copy h1 { font-size:clamp(3rem,13vw,4.5rem); }
	.ft-about-story-map { min-height:420px; }
	.ft-about-story-center { width:160px; height:160px; }
	.ft-about-story-node { width:112px; min-height:96px; padding:12px; font-size:.9rem; }
	.ft-about-feature-grid { grid-template-columns:1fr; }
	.ft-about-feature-card { min-height:0; }
	.ft-about-control-flow { grid-template-columns:1fr; }
	.ft-about-control-arrow { transform:rotate(90deg); justify-self:center; }
	.ft-about-google-cards article { grid-template-columns:50px 1fr; padding:20px; }
}
@media (max-width: 520px) {
	.ft-about-hero { padding-top:42px; }
	.ft-about-story-map { min-height:520px; border-radius:26px; }
	.ft-about-story-thread { width:46%; height:46%; }
	.ft-about-story-center { width:145px; height:145px; }
	.ft-about-story-center strong { font-size:1.15rem; }
	.ft-about-story-node { width:106px; min-height:90px; }
	.ft-about-story-node--one { left:6%; top:6%; }
	.ft-about-story-node--two { right:6%; top:7%; }
	.ft-about-story-node--three { left:6%; bottom:7%; }
	.ft-about-story-node--four { right:6%; bottom:7%; }
	.ft-about-google-copy h2, .ft-about-trust-grid h2 { font-size:clamp(2.4rem,11vw,3.3rem); }
	.ft-about-google-cards article { grid-template-columns:1fr; gap:10px; }
	.ft-about-google-cards p { grid-column:1; }
	.ft-about-number { grid-row:auto; }
}