/* Home blocks 02–07 from the Figma concept, on the site grid of the header, first screen and production block:
   a centred column min(1120px, 100% − 80px), like the first screen and production; 20 px gutters on phones. Desktop scales the frames' 1712 px content
   width onto that column (--u = one Figma px) with readable floors; ≤1100 px stacks the layout; ≤700 px follows the 390 mobile frames.
   style.css keeps its site-wide 14 px Light copy rules off these blocks (:not(:is(.fg, .fg-dialog) *)). */
.fg, .fg-dialog {
  --u: calc(min(1120px, 100vw - 80px) / 1712);
  --night: #050c0d; --ink: #111718; --cream: #f7f4ee; --paper: #fcfaf6; --gold: #c1a27a; --brown: #8d6c43;
  --muted: #716a60; --soft: #c9c9c3; --line: #d6ccbd; --deep: #192021; --stone: #59615e;
  font-family: var(--sans);
}
.structure-preview main > section.fg { padding: calc(80 * var(--u)) 0; border-radius: 0; }
.fg .fg-wrap { width: min(1120px, calc(100% - 80px)); max-width: none; margin: 0 auto; padding-inline: 0; box-sizing: border-box; }
.fg p, .fg h2, .fg h3, .fg ul, .fg ol, .fg dl, .fg dd, .fg figure { margin: 0; }
.fg ul, .fg ol { padding: 0; list-style: none; }
.fg .fg-m, .fg br.m { display: none; }
.fg .fg-gap { display: none; }

/* Type */
.fg .fg-eyebrow { font: 400 max(11px, calc(13 * var(--u)))/1.54 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.fg .fg-h2 { font: 400 max(34px, calc(64 * var(--u)))/1.156 'Cormorant SC', Georgia, serif; letter-spacing: 0; text-transform: none; text-wrap: initial; }
.fg .fg-h2-xl { font-size: max(40px, calc(80 * var(--u))); line-height: 1.05; }
.fg .fg-lead { font: 400 max(16px, calc(22 * var(--u)))/1.455 var(--sans); letter-spacing: 0; }
.fg .fg-body { font: 400 max(15px, calc(18 * var(--u)))/1.6 var(--sans); letter-spacing: 0; }
.fg .fg-note { font: 400 max(12px, calc(13 * var(--u)))/1.54 var(--sans); letter-spacing: 0; color: var(--muted); }
.fg .fg-muted { color: var(--muted); }
.fg .fg-soft { color: var(--soft); }

/* Buttons: sand primary, dark primary, outlined secondary (owner's 18 px rounding, as on the first screen). */
.fg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: max(48px, calc(64 * var(--u))); padding: 0 max(20px, calc(28 * var(--u))); border-radius: 18px; border: 1px solid transparent; font: 500 max(14px, calc(18 * var(--u)))/1.44 var(--sans); letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.fg-btn-gold { background: var(--gold); color: var(--ink); }
.fg-btn-gold:hover { background: #d2b58e; }
.fg-btn-strong { font-weight: 600; }
.fg-btn-dark { background: var(--ink); color: var(--cream); }
.fg-btn-dark:hover { background: #283234; }
.fg-btn-line { background: transparent; color: var(--ink); border-color: var(--line); min-height: max(44px, calc(48 * var(--u))); }
.fg-btn-line:hover { border-color: var(--brown); }
.fg-link { padding: 0; border: 0; background: none; font: 400 max(14px, calc(16 * var(--u)))/1.5 var(--sans); color: var(--brown); cursor: pointer; text-decoration: none; min-height: 44px; }
.fg-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.fg-round { display: grid; place-items: center; width: max(48px, calc(64 * var(--u))); height: max(48px, calc(64 * var(--u))); padding: 0; border: 1px solid var(--gold); border-radius: 50%; background: transparent; color: var(--gold); cursor: pointer; transition: background-color .2s ease; }
.fg-round:hover { background: rgba(193,162,122,.14); }
.fg :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 02 — Знакомая ситуация */
.structure-preview main > section.fg-situation { background: var(--night); color: var(--cream); padding-block: calc(80 * var(--u)); }
.fg-situation .fg-wrap { display: grid; grid-template-columns: minmax(0,1000fr) minmax(0,632fr); grid-template-rows: auto 1fr; column-gap: calc(80 * var(--u)); align-items: start; }
.fg-situation .fg-slider { grid-column: 1; grid-row: 1 / 3; padding-top: calc(32 * var(--u)); }
.fg-situation-copy { grid-column: 2; grid-row: 1; padding-top: calc(50 * var(--u)); display: grid; gap: calc(24 * var(--u)); }
.fg-situation .fg-h2 { color: var(--cream); }
.fg-situation .fg-lead { color: var(--soft); }
.fg-situations { grid-column: 2; grid-row: 2; margin-top: calc(40 * var(--u)) !important; }
.fg-situations li { padding-block: calc(24 * var(--u)); border-top: 1px solid var(--gold); display: grid; gap: calc(8 * var(--u)); }
.fg-situations li:first-child { border-top: 0; padding-top: 0; }
.fg-situations li:last-child { padding-bottom: 0; }
.fg-situations h3 { font: 500 max(17px, calc(24 * var(--u)))/1.42 var(--sans); color: var(--cream); letter-spacing: 0; text-transform: none; }
.fg-situations p { font: 400 max(15px, calc(18 * var(--u)))/1.6 var(--sans); color: var(--soft); }
.fg-arch { border: 1px solid var(--gold); border-radius: 50% 50% 0 0 / 65.79% 65.79% 0 0; padding: calc(6 * var(--u)); aspect-ratio: 1000 / 760; box-sizing: border-box; }
.fg-arch-stage { position: relative; width: 100%; height: 100%; border-radius: 50% 50% 0 0 / 66.04% 66.04% 0 0; overflow: hidden; background: #0d1516; }
.fg-slide { position: absolute; inset: 0; }
.fg-slide[hidden] { display: none; }
.fg-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-slider-nav { display: flex; align-items: center; justify-content: space-between; gap: calc(32 * var(--u)); margin-top: calc(32 * var(--u)); }
.fg-count { flex: none; width: calc(104 * var(--u)); min-width: 60px; font: 400 max(14px, calc(18 * var(--u)))/1.6 var(--sans); color: var(--cream); font-variant-numeric: tabular-nums; }
.fg-progress { display: flex; flex: 0 1 calc(560 * var(--u)); }
.fg-progress button { flex: 1; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.fg-progress button::after { content: ''; display: block; height: 2px; background: var(--deep); transition: background-color .3s ease; }
.fg-progress button[aria-current='true']::after { background: var(--gold); }
.fg-arrows { display: flex; gap: calc(32 * var(--u)); }

/* 03 — Причина */
.structure-preview main > section.fg-cause { background: var(--cream); color: var(--ink); padding-block: calc(64 * var(--u)); }
.fg-cause-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(40 * var(--u)); }
.fg-cause-head > div { display: grid; gap: calc(16 * var(--u)); }
.fg-cause .fg-eyebrow { color: var(--brown); }
.fg-cause .fg-h2 { color: var(--ink); }
.fg-cause-head > .fg-lead { flex: 0 0 calc(400 * var(--u)); min-width: 260px; padding-top: calc(23 * var(--u)); }
.fg-explorer { display: grid; grid-template-columns: minmax(0,1120fr) minmax(0,528fr); column-gap: calc(64 * var(--u)); margin-top: calc(32 * var(--u)); align-items: start; }
.fg-drawing { grid-column: 1; grid-row: 1 / 3; }
.fg-drawing-box { position: relative; aspect-ratio: 1120 / 744; }
.fg-drawing-label { position: absolute; top: 1.08%; transform: translateX(-50%); white-space: nowrap; font: 400 max(10px, calc(13 * var(--u)))/1.54 var(--sans); letter-spacing: .12em; color: var(--muted); }
.fg-feet { position: absolute; left: 0; top: 5.914%; width: 100%; height: 94.086%; object-fit: contain; }
.fg-zones { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fg-zone-fill { fill: var(--brown); opacity: .12; }
.fg-zone-line { fill: none; stroke: var(--brown); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: .72; }
.fg-zone-link { stroke: var(--brown); stroke-width: 1.2; }
.fg-dot { position: absolute; transform: translate(-50%,-50%); width: max(32px, calc(48 * var(--u))); height: max(32px, calc(48 * var(--u))); padding: 0; border: 1px solid var(--brown); border-radius: 50%; background: var(--cream); color: var(--brown); font: 500 max(12px, calc(18 * var(--u)))/1 var(--sans); cursor: pointer; display: grid; place-items: center; transition: background-color .2s ease, color .2s ease; }
.fg-dot::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.fg-dot:hover { background: #efe6d7; }
.fg-dot[aria-pressed='true'] { background: var(--night); color: var(--cream); border-width: 2px; }
.fg-hint { margin-top: calc(32 * var(--u)) !important; font: 400 max(14px, calc(18 * var(--u)))/1.6 var(--sans); color: var(--muted); }
.fg-tabs { display: none; }
.fg-zone-card { grid-column: 2; grid-row: 1; background: var(--paper); border-radius: 25px; padding: calc(32 * var(--u)); display: grid; gap: calc(24 * var(--u)); min-height: calc(744 * var(--u)); box-sizing: border-box; align-content: start; }
.fg-zone-cause { display: grid; gap: calc(16 * var(--u)); min-height: calc(300 * var(--u)); align-content: start; }
.fg-zone-card .fg-eyebrow { color: var(--brown); }
.fg-zone-card h3 { font: 400 max(28px, calc(42 * var(--u)))/1.1 'Cormorant SC', Georgia, serif; color: var(--ink); letter-spacing: 0; text-transform: none; }
.fg-zone-text { font: 400 max(15px, calc(18 * var(--u)))/1.6 var(--sans); color: var(--muted); }
.fg-zone-feature { display: grid; gap: calc(8 * var(--u)); }
.fg-zone-feature p:last-child { font: 400 max(15px, calc(18 * var(--u)))/1.5 var(--sans); color: var(--ink); }
.fg-zone-list { display: grid; gap: 4px; }
.fg-zone-list button { width: 100%; min-height: max(40px, calc(44 * var(--u))); display: flex; align-items: center; gap: 16px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: 500 max(14px, calc(18 * var(--u)))/1.44 var(--sans); text-align: left; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.fg-zone-list button span { flex: 0 0 32px; font: 400 max(13px, calc(16 * var(--u)))/1.5 var(--sans); color: var(--brown); }
.fg-zone-list button:hover { background: #f1ebe0; }
.fg-zone-list button[aria-pressed='true'] { background: var(--night); color: var(--cream); }
.fg-zone-list button[aria-pressed='true'] span { color: var(--cream); }

/* Доработка */
.structure-preview main > section.fg-alteration { background: var(--night); color: var(--cream); padding: 0; display: grid; grid-template-columns: minmax(0,1200fr) minmax(0,720fr); container-type: inline-size; }
.fg-alteration-copy { padding: calc(87 * var(--u)) calc(80 * var(--u)) calc(48 * var(--u)) calc((100cqw - min(1120px, 100cqw - 80px)) / 2); display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--u)); justify-content: center; }
.fg-alteration .fg-h2 { color: var(--cream); line-height: 1.156; }
.fg-alteration .fg-lead { color: var(--soft); }
.fg-alteration .fg-btn { width: max(260px, calc(360 * var(--u))); min-height: max(54px, calc(74 * var(--u))); }
.fg-alteration-photo { display: block; min-height: 100%; }
.fg-alteration-photo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 720 / 540; }

/* 04 — Каталоги */
.structure-preview main > section.fg-catalogs { background: var(--night); color: var(--cream); border-top: 2px solid var(--gold); padding-block: calc(80 * var(--u)); }
.fg-catalogs-head { display: flex; align-items: flex-end; gap: calc(104 * var(--u)); }
.fg-catalogs-head > div { flex: 0 0 calc(880 * var(--u)); display: grid; gap: calc(24 * var(--u)); }
.fg-catalogs .fg-h2 { color: var(--cream); }
.fg-catalogs-head > .fg-lead { color: var(--soft); padding-bottom: 8px; }
.fg-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: calc(32 * var(--u)); margin-top: calc(40 * var(--u)); }
.fg-card { display: flex; flex-direction: column; color: var(--cream); text-decoration: none; }
.fg-card-photo { display: block; aspect-ratio: 404 / 500; border-radius: 25px; overflow: hidden; outline: 1px solid transparent; outline-offset: 0; transition: outline-color .25s ease; }
.fg-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.fg-card-name { margin-top: calc(24 * var(--u)); font: 400 max(26px, calc(38 * var(--u)))/1.21 'Cormorant SC', Georgia, serif; transition: color .25s ease; }
.fg-card-purpose { margin-top: 8px; font: 400 max(13px, calc(16 * var(--u)))/1.5 var(--sans); color: var(--soft); }
.fg-card-go { margin-top: calc(16 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 max(14px, calc(18 * var(--u)))/1.44 var(--sans); }
.fg-card-arrow { display: grid; place-items: center; width: max(40px, calc(48 * var(--u))); height: max(40px, calc(48 * var(--u))); border-radius: 50%; background: var(--deep); border: 1px solid var(--stone); color: var(--cream); transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.fg-card:hover .fg-card-photo, .fg-card:focus-visible .fg-card-photo { outline-color: var(--gold); }
.fg-card:hover .fg-card-photo img { transform: scale(1.02); }
.fg-card:hover .fg-card-name, .fg-card:focus-visible .fg-card-name { color: var(--gold); }
.fg-card:hover .fg-card-arrow, .fg-card:focus-visible .fg-card-arrow { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.fg-full { margin-top: calc(40 * var(--u)); padding-top: calc(32 * var(--u)); border-top: 1px solid var(--stone); display: flex; align-items: center; justify-content: space-between; gap: calc(80 * var(--u)); }
.fg-full > div:first-child { display: grid; gap: 8px; }
.fg-full-title { font: 400 max(26px, calc(42 * var(--u)))/1.1 var(--sans); color: var(--cream); }
.fg-full-action { flex: 0 0 calc(360 * var(--u)); min-width: 260px; display: grid; gap: 12px; }
.fg-full-action .fg-btn { width: 100%; }
.fg-full-action p { font: 400 max(12px, calc(13 * var(--u)))/1.54 var(--sans); color: var(--soft); text-align: center; }

/* 05 — Личная встреча */
.structure-preview main > section.fg-meeting { background: var(--paper); color: var(--ink); padding-block: calc(80 * var(--u)); }
.fg-meeting .fg-eyebrow { color: var(--brown); letter-spacing: 0; }
.fg-meeting-head { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(80 * var(--u)); }
.fg-meeting-head > div:first-child { display: grid; gap: calc(16 * var(--u)); }
.fg-duration { flex: 0 0 calc(616 * var(--u)); min-width: 280px; display: grid; gap: calc(12 * var(--u)); }
.fg-duration-time { font: 500 max(28px, calc(42 * var(--u)))/1.1 var(--sans); letter-spacing: -.01em; }
.fg-stages { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: calc(40 * var(--u)); margin-top: calc(48 * var(--u)) !important; }
.fg-stages li { display: grid; gap: calc(24 * var(--u)); align-content: start; }
.fg-stages img { width: 100%; height: auto; aspect-ratio: 544 / 260; align-self: start; object-fit: cover; border-radius: 25px; display: block; }
.fg-stages li > div { display: grid; gap: calc(12 * var(--u)); }
.fg-stages h3 { font: 400 max(24px, calc(34 * var(--u)))/1.235 'Cormorant SC', Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--ink); }
.fg-stages .fg-body { line-height: 1.5; }
.fg-profile { margin-top: calc(48 * var(--u)); border: 1px solid var(--line); border-radius: 25px; padding: calc(48 * var(--u)); display: grid; grid-template-columns: calc(432 * var(--u)) minmax(0,1fr); gap: calc(80 * var(--u)); align-items: center; }
.fg-profile-phone { display: grid; justify-items: center; gap: calc(16 * var(--u)); }
.fg-phone-open { padding: 0; border: 0; background: none; cursor: zoom-in; width: calc(336 * var(--u)); min-width: 160px; }
.fg-phone { width: 100%; height: auto; display: block; border-radius: 15%/8%; box-shadow: 0 24px 48px rgba(17,23,24,.18), 0 4px 12px rgba(17,23,24,.08); }
.fg-profile-copy { display: grid; gap: calc(16 * var(--u)); align-content: center; }
.fg-profile-copy .fg-h2 { margin-bottom: 0; }
.fg-profile-list { margin-top: calc(8 * var(--u)) !important; }
.fg-profile-list li { font: 400 max(15px, calc(18 * var(--u)))/1.89 var(--sans); color: var(--ink); }
.fg-next { margin-top: calc(48 * var(--u)); padding-top: calc(32 * var(--u)); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,560fr) minmax(0,480fr) minmax(0,560fr); gap: calc(56 * var(--u)); scroll-margin-top: calc(var(--header-h) + 24px); }
.fg-next > div { display: grid; gap: calc(12 * var(--u)); align-content: start; justify-items: start; }
.fg-next-title { font: 400 max(24px, calc(34 * var(--u)))/1.235 'Cormorant SC', Georgia, serif; }
.fg-next-book .fg-btn { width: max(260px, calc(360 * var(--u))); }
.fg-next-address .fg-btn { min-width: max(220px, calc(280 * var(--u))); }
.fg-next-call { justify-items: stretch !important; }
.fg-next-phone { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fg-next-phone a { font: 500 max(17px, calc(21 * var(--u)))/1.33 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; }
.fg-next-phone .fg-btn { min-width: max(200px, calc(264 * var(--u))); }
.fg-next-status { display: flex; align-items: center; gap: 16px; font: 400 max(14px, calc(16 * var(--u)))/1.5 var(--sans); color: var(--muted); }
.fg-availability { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 20px 0 26px; border-radius: 32px; background: #e8ece5; color: var(--brown); font: 400 max(12px, calc(13 * var(--u)))/1.54 var(--sans); }
.fg-availability i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fg-availability.is-closed { background: #efe9e1; color: var(--muted); }

/* 06 — Варианты пошива */
.structure-preview main > section.fg-sewing { background: var(--ink); color: var(--cream); padding: calc(80 * var(--u)) 0 calc(40 * var(--u)); }
.fg-sewing-head { display: grid; gap: calc(16 * var(--u)); }
.fg-sewing .fg-eyebrow { letter-spacing: 0; font-size: max(12px, calc(15 * var(--u))); }
.fg-sewing .fg-h2 { color: var(--cream); }
.fg-sewing-head .fg-lead { color: var(--soft); }
.fg-offers { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: calc(32 * var(--u)); margin-top: calc(40 * var(--u)); }
.fg-offer { border-radius: 25px; padding: calc(40 * var(--u)); color: var(--ink); background: var(--paper); display: flex; flex-direction: column; }
.fg-offer.is-bespoke { background: #e5d8c4; }
.fg-offer-tag { font: 400 max(12px, calc(15 * var(--u)))/1.6 var(--sans); color: var(--brown); }
.fg-offer h3 { margin-top: calc(16 * var(--u)) !important; font: 400 max(28px, calc(42 * var(--u)))/1.095 'Cormorant SC', Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--ink); min-height: 2.19em; }
.fg-offer-label { margin-top: calc(16 * var(--u)) !important; font: 400 max(13px, calc(16 * var(--u)))/1.5 var(--sans); color: var(--muted); }
.fg-offer-when { margin-top: 8px !important; font: 400 max(15px, calc(18 * var(--u)))/1.5 var(--sans); color: var(--ink); }
.fg-offer-rows { margin-top: calc(18 * var(--u)) !important; }
.fg-offer-rows > div { display: grid; grid-template-columns: calc(140 * var(--u)) minmax(0,1fr); min-width: 0; gap: calc(24 * var(--u)); align-items: center; min-height: calc(52 * var(--u)); padding-block: 8px; border-bottom: 1px solid var(--ink); box-sizing: border-box; }
.fg-offer-rows > div.is-warranty { border-bottom: 0; }
.fg-offer-rows dt { font: 400 max(13px, calc(16 * var(--u)))/1.5 var(--sans); color: var(--muted); min-width: 84px; }
.fg-offer-rows dd { font: 500 max(14px, calc(18 * var(--u)))/1.44 var(--sans); color: var(--ink); }
.fg-offer-rows .is-warranty dd { font-size: max(24px, calc(32 * var(--u))); letter-spacing: -.0125em; }
.fg-offer-cost { margin-top: calc(18 * var(--u)); display: grid; gap: 8px; }
.fg-offer-label-soft { font: 400 max(13px, calc(16 * var(--u)))/1.5 var(--sans); color: var(--muted); }
.fg-offer-price { font: 500 max(26px, calc(32 * var(--u)))/1.44 var(--sans); letter-spacing: -.0125em; color: #000; }
.fg-offer-extra { font: 500 max(14px, calc(18 * var(--u)))/1.44 var(--sans); }
.fg-offer-cost > p:last-child { font: 400 max(14px, calc(18 * var(--u)))/1.5 var(--sans); color: #000; }
.fg-offer-cost strong { font-weight: 500; }
.fg-offer-btn { margin-top: auto; align-self: flex-end; width: auto; min-width: max(260px, calc(380 * var(--u))); white-space: nowrap; }
.fg-offer .fg-offer-btn { margin-top: max(24px, calc(36 * var(--u))); }
.fg-help { margin-top: calc(40 * var(--u)); background: var(--deep); border-radius: 25px; padding: calc(16 * var(--u)) calc(40 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(40 * var(--u)); }
.fg-help > div { display: grid; gap: 8px; padding-block: 6px; }
.fg-help-title { font: 500 max(17px, calc(24 * var(--u)))/1.42 var(--sans); color: #fff; }
.fg-help .fg-body { color: #fff; line-height: 1.5; }
.fg-help .fg-btn { flex: 0 0 auto; min-width: max(260px, calc(380 * var(--u))); white-space: nowrap; }

/* Dialogs: profile example and the mobile address sheet */
.fg-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 24px; border: 0; border-radius: 25px; background: var(--paper, #fcfaf6); color: #111718; overflow: auto; box-sizing: border-box; font-family: var(--sans); }
.fg-dialog::backdrop { background: rgba(5,12,13,.6); }
.fg-dialog p { margin: 0; }
.fg-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.fg-dialog-head h2 { margin: 0; font: 500 14px/20px var(--sans); letter-spacing: 0; text-transform: none; color: #111718; }
.fg-dialog-head h2.fg-dialog-h { font: 400 32px/36px 'Cormorant SC', Georgia, serif; }
.fg-dialog-head h2:focus { outline: none; }
.fg-close { flex: none; width: 48px; height: 48px; padding: 0; border: 1px solid #d6ccbd; border-radius: 25px; background: transparent; font: 500 16px/1 var(--sans); color: #111718; cursor: pointer; }
.fg-dialog-profile { width: min(560px, calc(100% - 32px)); }
.fg-profile-page { width: 100%; height: auto; display: block; border-radius: 4px; border: 1px solid #ece6dc; }
.fg-dialog-profile .fg-note { margin-top: 16px; font: 400 13px/20px var(--sans); color: #716a60; }
.fg-dialog-group { display: grid; gap: 8px; }
.fg-dialog-group + .fg-dialog-group { margin-top: 24px; }
.fg-dialog .fg-eyebrow { font: 400 13px/20px var(--sans); color: #8d6c43; letter-spacing: 0; }
.fg-dialog .fg-body { font: 400 16px/24px var(--sans); }
.fg-dialog .fg-note { font: 400 13px/20px var(--sans); color: #716a60; }
.fg-dialog .fg-btn { width: 100%; min-height: 48px; font-size: 14px; padding: 0 16px; }
.fg-dialog .fg-btn-dark { min-height: 56px; }
.fg-dialog[open] { animation: fg-sheet .3s ease; }
@keyframes fg-sheet { from { opacity: 0; transform: translateY(24px); } }

/* ≤1100 px: stacked layouts */
@media (max-width: 1100px) {
  .fg, .fg-dialog { --u: .6px; }
  .fg .fg-wrap { width: calc(100% - 80px); }
  .structure-preview main > section.fg { padding-block: 72px; }
  .fg .fg-h2 { font-size: 44px; }
  .fg .fg-h2-xl { font-size: 52px; }
  .fg-situation .fg-wrap { grid-template-columns: minmax(0,1fr); grid-template-rows: none; row-gap: 32px; }
  .fg-situation .fg-slider, .fg-situations { max-width: 760px; }
  .fg-situation-copy, .fg-situation .fg-slider, .fg-situations { grid-column: 1; grid-row: auto; padding-top: 0; margin-top: 0 !important; }
  .fg-situations li:first-child { padding-top: 16px; }
  .fg-situations li { border-top: 0; border-bottom: 1px solid var(--stone); padding-block: 16px; }
  .fg-cause-head { flex-direction: column; gap: 16px; }
  .fg-cause-head > .fg-lead { flex: none; padding-top: 0; }
  .fg-explorer { grid-template-columns: minmax(0,1fr); row-gap: 24px; max-width: 760px; }
  .fg-drawing { grid-row: auto; }
  .fg-zone-card { grid-column: 1; grid-row: auto; min-height: 0; padding: 24px; }
  .fg-zone-cause { min-height: 0; }
  .fg-hint { margin-top: 12px !important; text-align: center; }
  .structure-preview main > section.fg-alteration { grid-template-columns: minmax(0,1fr) minmax(0,.8fr); }
  .fg-alteration-copy { padding: 56px 32px 56px 40px; }
  .fg-catalogs-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fg-catalogs-head > div { flex: none; }
  .fg-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 32px 16px; }
  .fg-full { flex-direction: column; align-items: stretch; gap: 24px; }
  .fg-full-action { flex: none; }
  .fg-meeting-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .fg-duration { flex: none; }
  .fg-stages { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .fg-stages li { grid-template-columns: 40% minmax(0,1fr); align-items: center; }
  .fg-profile { grid-template-columns: 220px minmax(0,1fr); gap: 32px; padding: 32px; }
  .fg-phone-open { width: 200px; min-width: 0; }
  .fg-next { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; }
  .fg-next-call { grid-column: 1 / -1; }
  .fg-offers { grid-template-columns: minmax(0,1fr); }
  .fg-offer h3 { min-height: 0; }
  .fg-help { flex-direction: column; align-items: stretch; padding: 24px; }
  .fg-help .fg-btn { flex: none; }
}

/* ≤700 px: the 390 mobile frames */
@media (max-width: 700px) {
  .fg, .fg-dialog { --u: .5px; }
  .fg .fg-wrap { width: calc(100% - 40px); }
  .fg .fg-d, .fg br.d { display: none; }
  .fg .fg-m { display: revert; }
  .fg br.m { display: inline; }
  .fg .fg-gap { display: block; height: 22px; }
  .fg .fg-eyebrow { font-size: 10px; line-height: 16px; letter-spacing: .12em; }
  .fg .fg-h2 { font-size: 40px; line-height: 44px; }
  .fg .fg-h2-xl { font-size: 48px; line-height: 48px; }
  .fg .fg-lead { font-size: 16px; line-height: 24px; }
  .fg .fg-body { font-size: 16px; line-height: 24px; }
  .fg .fg-note { font-size: 13px; line-height: 20px; }
  .fg-btn { min-height: 54px; padding: 0 16px; font-size: 14px; line-height: 20px; }
  .fg-btn-line { min-height: 48px; }
  .fg-round { width: 48px; height: 48px; }

  .structure-preview main > section.fg-situation { padding-block: 48px; }
  .fg-situation .fg-wrap { row-gap: 32px; }
  .fg-situation-copy { gap: 24px; }
  .fg-situation-copy .fg-eyebrow { margin-bottom: -8px; }
  .fg-arch { aspect-ratio: 342 / 300; padding: 4px; border-radius: 50% 50% 0 0 / 57% 57% 0 0; }
  .fg-arch-stage { border-radius: 50% 50% 0 0 / 57.2% 57.2% 0 0; }
  .fg-slider-nav { margin-top: 16px; gap: 16px; }
  .fg-count { width: auto; min-width: 0; font: 500 14px/20px var(--sans); color: var(--soft); }
  .fg-progress { flex: 0 0 136px; gap: 8px; }
  .fg-progress button { flex: 0 0 40px; height: 48px; }
  .fg-arrows { gap: 16px; }
  .fg-situations li, .fg-situations li:first-child { padding-block: 16px; border-bottom: 1px solid var(--stone); }
  .fg-situations h3 { font-size: 18px; line-height: 25px; }
  .fg-situations p { font-size: 16px; line-height: 24px; }

  .structure-preview main > section.fg-cause { padding-block: 32px; }
  .fg-cause .fg-eyebrow { font-size: 9px; line-height: 14px; letter-spacing: .11em; }
  .fg-cause .fg-h2 { font-size: 36px; line-height: 38px; }
  .fg-cause-head { gap: 12px; }
  .fg-cause-head > .fg-lead { min-width: 0; font-size: 14px; line-height: 21px; }
  .fg-explorer { margin-top: 24px; row-gap: 16px; }
  .fg-drawing { overflow: hidden; }
  .fg-drawing-box { width: 147.37%; margin-left: -21.93%; }
  .fg-drawing-label { font-size: 9px; letter-spacing: .12em; }
  .fg-dot { width: 28px; height: 28px; font-size: 11px; border-width: 1px; }
  .fg-dot[aria-pressed='true'] { border-width: 1px; }
  .fg-dot::before { inset: -8px; }
  .fg-zone-line, .fg-zone-link { stroke-width: 1.2; }
  .fg-hint { margin-top: 8px !important; font-size: 10px; line-height: 16px; }
  .fg-tabs { display: grid; grid-template-columns: repeat(15, minmax(0,1fr)); gap: 8px; }
  .fg-tabs button { grid-column: span 5; min-height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); font: 500 12px/18px var(--sans); cursor: pointer; }
  .fg-tabs button:nth-child(1) { grid-column: span 6; }
  .fg-tabs button:nth-child(2) { grid-column: span 9; }
  .fg-tabs button[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
  .fg-zone-card { padding: 16px; gap: 16px; border-radius: 25px; }
  .fg-zone-cause { gap: 8px; }
  .fg-zone-card .fg-eyebrow { font-size: 9px; line-height: 14px; letter-spacing: .11em; }
  .fg-zone-card h3 { font-size: 28px; line-height: 32px; }
  .fg-zone-card h3 br { display: none; }
  .fg-zone-text { margin-top: 4px !important; font-size: 14px; line-height: 21px; }
  .fg-zone-feature { gap: 4px; padding-top: 32px; }
  .fg-zone-feature p:last-child { font-size: 13px; line-height: 20px; }
  .fg-zone-list { display: none; }

  .structure-preview main > section.fg-alteration { grid-template-columns: minmax(0,1fr); }
  .fg-alteration-copy { padding: 32px 20px; gap: 16px; }
  .fg-alteration .fg-lead { font-size: 14px; line-height: 22px; }
  .fg-alteration .fg-btn { width: 100%; min-height: 54px; margin-top: 8px; }
  .fg-alteration-photo img { aspect-ratio: 390 / 292; }

  .structure-preview main > section.fg-catalogs { padding-block: 48px; }
  .fg-catalogs-head > div { gap: 16px; }
  .fg-cards { gap: 32px 12px; margin-top: 32px; }
  .fg-card-photo { border-radius: 18px; }
  .fg-card-name { margin-top: 12px; font-size: 24px; line-height: 28px; }
  .fg-card-purpose { font-size: 12px; line-height: 18px; }
  .fg-card-go { margin-top: 10px; gap: 6px; font-size: 12px; line-height: 16px; white-space: nowrap; }
  .fg-card-arrow { width: 32px; height: 32px; flex: none; }
  .fg-card-arrow svg { width: 18px; height: 18px; }
  .fg-full { margin-top: 32px; padding-top: 24px; gap: 20px; }
  .fg-full-title { font-size: 26px; line-height: 30px; }
  .fg-full-action { min-width: 0; }

  .structure-preview main > section.fg-meeting { padding-block: 40px; }
  .fg-meeting .fg-eyebrow { font-size: 13px; line-height: 20px; letter-spacing: 0; }
  .fg-meeting-head { gap: 16px; }
  .fg-meeting-head > div:first-child { gap: 16px; }
  .fg-duration { min-width: 0; gap: 8px; }
  .fg-duration-time { font-size: 18px; line-height: 25px; letter-spacing: 0; }
  .fg-stages { margin-top: 32px !important; gap: 16px; }
  .fg-stages li { grid-template-columns: 104px minmax(0,1fr); gap: 16px; }
  .fg-stages img { width: 104px; height: 104px; aspect-ratio: 1; }
  .fg-stages li > div { gap: 8px; }
  .fg-stages h3.fg-m { font: 500 14px/20px var(--sans); color: var(--ink); }
  .fg-stages p.fg-m { font: 400 16px/24px var(--sans); color: var(--muted); }
  .fg-profile { margin-top: 32px; border: 0; background: #ede5d8; padding: 24px; grid-template-columns: 96px minmax(0,1fr); gap: 16px; align-items: start; }
  .fg-profile-copy { display: contents; }
  .fg-profile-copy .fg-h2 { grid-column: 1 / -1; grid-row: 1; font-size: 32px; line-height: 36px; }
  .fg-profile-phone { grid-column: 1; grid-row: 2; }
  .fg-phone-open { width: 96px; }
  .fg-phone { box-shadow: 0 8px 18px rgba(17,23,24,.18); }
  .fg-profile-short, .fg-profile-copy .fg-link { grid-column: 2; }
  .fg-profile-short { grid-row: 2; align-self: start; padding-top: 15px; font: 400 16px/24px var(--sans); color: var(--ink); }
  .fg-profile-copy .fg-link { grid-row: 2; align-self: end; justify-self: start; margin-bottom: 15px; font: 500 14px/20px var(--sans); }
  .fg-profile-copy .fg-note { grid-column: 1 / -1; grid-row: 3; }
  .fg-next { margin-top: 32px; padding-top: 0; border-top: 0; grid-template-columns: minmax(0,1fr); }
  .fg-next-book { gap: 8px !important; justify-items: stretch !important; }
  .fg-next-book .fg-btn { width: 100%; }
  .fg-next-book .fg-btn-dark { min-height: 56px; }
  .fg-next-book .fg-note { text-align: center; }

  .structure-preview main > section.fg-sewing { padding-block: 48px; }
  .fg-sewing .fg-eyebrow { font-size: 12px; line-height: 18px; }
  .fg-sewing-head .fg-lead { font-size: 15px; line-height: 23px; }
  .fg-offers { margin-top: 32px; gap: 16px; }
  .fg-offer { padding: 24px 20px; border-radius: 22px; }
  .fg-offer-tag { font-size: 12px; line-height: 18px; }
  .fg-offer h3 { font-size: 30px; line-height: 33px; }
  .fg-offer h3 br { display: none; }
  .fg-offer-rows > div { grid-template-columns: 1fr; gap: 2px; padding-block: 10px; }
  .fg-offer-rows dt { font-size: 13px; line-height: 18px; }
  .fg-offer-rows dd { font-size: 15px; line-height: 21px; }
  .fg-offer-rows .is-warranty dd { font-size: 26px; line-height: 32px; }
  .fg-offer-price { font-size: 28px; line-height: 36px; }
  .fg-offer-extra, .fg-offer-cost > p:last-child { font-size: 14px; line-height: 21px; }
  .fg-offer .fg-offer-btn { width: 100%; margin-top: 24px; align-self: stretch; }
  .fg-help { margin-top: 16px; padding: 20px; gap: 16px; border-radius: 22px; }
  .fg-help-title { font-size: 17px; line-height: 24px; }
  .fg-help .fg-body { font-size: 14px; line-height: 21px; }
  .fg-help .fg-btn { width: 100%; }

  .fg-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 25px 25px 0 0; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); max-height: 92svh; }
}
@media (prefers-reduced-motion: reduce) { .fg *, .fg-dialog[open] { transition: none !important; animation: none !important; } }

/* Mobile readability correction (2026-11-03).
   The earlier site-wide Regular override skipped .fg children. Those Figma
   blocks were already 400 and still looked thin on iPhone. Strengthen only
   mobile copy and actions BELOW the approved first screen. Keep serif display
   headings, layout and desktop typography unchanged. */
@media (max-width: 700px) {
  body.structure-preview main > section.fg:not(#home)
    :is(.fg-lead, .fg-body, .fg-note, .fg-card-purpose, .fg-situations p,
        .fg-zone-text, .fg-hint, .fg-offer-when, .fg-offer-label,
        .fg-offer-rows dt, .fg-offer-cost > p, .fg-full-action p,
        .fg-profile-short, .fg-next-status) {
    font-weight: 500 !important;
  }
  body.structure-preview main > section.fg:not(#home)
    :is(.fg-btn, .fg-card-go, .fg-link) {
    font-weight: 600 !important;
  }
  body.structure-preview main > section.fg:not(#home) .fg-btn-gold {
    color: #111718 !important;
  }
}

/* Mobile contrast fix following the actual iPhone screenshots (2026-11-03).
   Stronger weights alone did not fix the washed-out type. Preserve the
   approved first screen and desktop, but force readable text colors in the
   two dark mobile sales sections and solid ink on their gold CTAs. */
@media (max-width: 700px) {
  body.structure-preview main > section.fg-alteration::after {
    /* Do not paint the stacking overlay over the offer text and button. */
    opacity: 0 !important;
  }
  body.structure-preview main > section.fg-alteration .fg-alteration-copy {
    opacity: 1 !important;
    filter: none !important;
  }
  body.structure-preview main > section.fg-alteration .fg-lead {
    color: #f7f4ee !important;
    -webkit-text-fill-color: #f7f4ee !important;
    opacity: 1 !important;
    font-weight: 500 !important;
  }
  body.structure-preview main > section.fg:not(#home) .fg-btn.fg-btn-gold {
    color: #111718 !important;
    -webkit-text-fill-color: #111718 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
  }
  body.structure-preview main > section.fg-catalogs
    :is(.fg-lead, .fg-card-purpose, .fg-card-go, .fg-body.fg-soft, .fg-full-action > p) {
    color: #e8e4de !important;
    -webkit-text-fill-color: #e8e4de !important;
    opacity: 1 !important;
  }
}

/* iPhone WebKit: the font strokes in Figma sections appear visibly thinner
   than Chrome at the same computed weights and colors. Add a small stroke
   to the glyph contours instead of increasing the text size or changing
   the agreed layout. Desktop browsers and the approved first screen stay as-is.
   Scope to iOS WebKit and to content below the first screen only. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 700px) {
    body.structure-preview main > section.fg:not(#home)
      :is(.fg-lead, .fg-body, .fg-note, .fg-card-purpose, .fg-card-go,
          .fg-zone-text, .fg-hint, .fg-offer-when, .fg-offer-label,
          .fg-offer-rows dt, .fg-full-action p, .fg-profile-short) {
      -webkit-text-stroke: 0.35px currentColor;
    }
    body.structure-preview main > section.fg:not(#home)
      :is(.fg-btn, .fg-link) {
      -webkit-text-stroke: 0.45px currentColor;
    }
    body.structure-preview main > section.fg-alteration .fg-lead {
      color: #f7f4ee !important;
      -webkit-text-fill-color: #f7f4ee !important;
      -webkit-text-stroke-color: #f7f4ee;
    }
    body.structure-preview main > section.fg:not(#home) .fg-btn-gold {
      color: #111718 !important;
      -webkit-text-fill-color: #111718 !important;
      -webkit-text-stroke-color: #111718;
    }
  }
}