/* ═══ Flat structure, shared by hosting.html and the homepage (moved out of hosting.css, 2026-10-30) (owner, 2026-10-30: "I like compactness, flat, sleek and page structure in flynode").
   Mockup for hosting-flat.html, on top of hosting.css. One light tone (#F8F9FC, FlyNode paper) for every light section, hairline rules
   between sections and on the frame edges, no drop shadows, alternating two-column feature rows with dark product
   windows. Dark only inside windows, the closing block and the footer. ═══ */
.flat{ --pg:#F8F9FC; --hl:#E5E8EB; } /* FlyNode “paper” and its hairline (owner, 2026-10-31); was stone #F6F6F4 / #E4E4E0 */
.flat .sec.light, .flat .hs, .flat .pq-sec, .flat .tone, .flat .fq-sec{ background:var(--pg) !important; }
.flat .sec.light + .sec.light{ border-top:1px solid var(--hl); }
.flat .sec.light .rails .in{ border-color:var(--hl); } .flat .sec.light .rails i{ display:none; }
.flat .hs .rails{ display:block; } .flat .hs-dark{ background:#ECE9FF; border-left:1px solid var(--hl); }

/* Flat: hairlines instead of shadows */
.flat .ht-pill, .flat .b2-g, .flat .hs-feats li, .flat .px-seg, .flat .px-gt, .flat .fo, .flat .rs3, .flat .rv-card, .flat .fq-more, .flat .wp-panel{ box-shadow:0 0 0 1px var(--hl) !important; }
.flat .px-cd{ box-shadow:0 0 0 1.5px var(--brand) !important; }
.flat .fo[aria-checked="true"]{ box-shadow:0 0 0 1.5px var(--brand) !important; }
.flat .b2-p, .flat .btn-primary{ box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important; }
.flat .rw, .flat .tour{ box-shadow:none; }
.flat .px-gt dl div{ background:var(--pg); }

/* Hero left · L1 (checks + stat row) */
.st5{ display:flex; gap:2px; } .st5 i{ width:13px; height:13px; display:block; background:#FBBC05; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8l1.6 3.4 3.7.4-2.8 2.5.8 3.7L6 9 2.7 10.8l.8-3.7L.7 4.6l3.7-.4z'/%3E%3C/svg%3E") center/13px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8l1.6 3.4 3.7.4-2.8 2.5.8 3.7L6 9 2.7 10.8l.8-3.7L.7 4.6l3.7-.4z'/%3E%3C/svg%3E") center/13px no-repeat; }
.st5.t i{ -webkit-mask:none; mask:none; border-radius:2px; background:#00B67A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.6l1.25 2.7 2.95.33-2.2 2 .62 2.9L6 8.05 3.38 9.53 4 6.63l-2.2-2 2.95-.33z' fill='%23fff'/%3E%3C/svg%3E") center/10px no-repeat; }

/* L1 · checks + stat row */
.flat .hs-copy .l1-chk{ list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; max-width:30em; }
.flat .hs-copy .l1-chk li{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; color:#2A2A2E; }
.flat .hs-copy .l1-chk li span{ width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:#fff; color:var(--brand); box-shadow:inset 0 0 0 1px #E5E8EB; flex:none; } .flat .hs-copy .l1-chk svg{ width:13px; height:13px; }
.flat .hs-copy .cta2{ margin-top:28px; }
.flat .hs-copy .l1-stats{ margin-top:32px; padding-top:22px; border-top:1px solid #E5E8EB; width:100%; display:grid; grid-template-columns:repeat(3, auto); justify-content:start; gap:0; }
.flat .hs-copy .l1-stats > div{ display:flex; flex-direction:column; gap:5px; padding:0 28px; } .flat .hs-copy .l1-stats > div:first-child{ padding-left:0; } .flat .hs-copy .l1-stats > div + div{ border-left:1px solid #E5E8EB; }
.flat .hs-copy .l1-b{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:#66666D; } .flat .hs-copy .l1-b svg{ width:14px; height:14px; }
.flat .hs-copy .l1-stats b{ font-size:26px; font-weight:550; letter-spacing:-0.035em; line-height:1; color:#0A0A0A; }
.flat .hs-copy .l1-s{ font-size:12.5px; color:#8F8F96; }


.flat .hs-copy .l1-chk li span{ box-shadow:inset 0 0 0 1px var(--hl); }

/* Section header, FlyNode-style: icon tag, two-tone title, one line */
.fl-h{ position:relative; z-index:1; padding:104px 24px 48px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.fr-tag{ display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 10px; border-radius:7px; background:var(--brand-soft); color:var(--brand); font-size:12.5px; font-weight:500; }
.fr-tag svg{ width:13px; height:13px; }
.fl-t{ margin:18px 0 0; font-weight:550; }
.fl-t span{ display:block; font-size:clamp(28px, 3vw, 42px); line-height:1.08; letter-spacing:-0.04em; color:#0A0A0A; }
.light .fl-t span + span{ color:#9A9AA2; }
.fl-h p{ margin:14px 0 0; max-width:34em; font-size:16.5px; line-height:1.55; color:#55555C; }

/* Eight facts as one hairline grid, cells touching (no gaps, no shadows) */
.fg{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--hl); margin-bottom:0; }
.fg-c{ padding:28px 24px 32px; border-bottom:1px solid var(--hl); }
.fg-c:not(:nth-child(4n+1)){ border-left:1px solid var(--hl); }
.fg-c:nth-last-child(-n+4){ border-bottom:0; }
.fg-c svg{ width:34px; height:34px; padding:8px; border-radius:8px; background:#fff; color:var(--brand); box-shadow:inset 0 0 0 1px var(--hl); margin-bottom:18px; }
.fg-c h3{ margin:0; font-size:15.5px; font-weight:550; letter-spacing:-0.01em; color:#0A0A0A; }
.fg-c p{ margin:6px 0 0; font-size:14px; line-height:1.5; color:#66666D; }

/* Feature rows: text and a dark product window, alternating sides, split by hairlines */
.fr{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; border-top:1px solid var(--hl); }
.fl-rows .fr:first-child{ border-top:0; }
.fr-t{ padding:80px 56px 80px 56px; }
.fr-w{ padding:56px; align-self:stretch; display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--hl); background:#F1F1EE; }
.fr.rev .fr-t{ order:2; } .fr.rev .fr-w{ order:1; border-left:0; border-right:1px solid var(--hl); }
.fr-h{ margin:18px 0 0; font-weight:550; }
.fr-h span{ display:block; font-size:clamp(24px, 2.4vw, 32px); line-height:1.12; letter-spacing:-0.035em; color:#0A0A0A; }
.fr-h span + span{ color:#9A9AA2; }
.fr-t p{ margin:14px 0 0; max-width:30em; font-size:15.5px; line-height:1.6; color:#55555C; }
.fr-t ul{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.fr-t li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:#2A2A2E; }
.fr-t li svg{ width:18px; height:18px; color:var(--brand); flex:none; }

/* Dark product windows */
.fw{ width:100%; max-width:480px; margin:0 auto; }
.fw > .fw-bar, .fw > .fw-g, .fw > .fw-inst{ background:#141416; color:#EDEDED; }
.fw-bar{ height:40px; display:flex; align-items:center; gap:6px; padding:0 16px; border-radius:14px 14px 0 0; border-bottom:1px solid rgba(255,255,255,.07); }
.fw-bar > i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.16); }
.fw-bar span{ margin-left:10px; font:11.5px var(--mono); color:#8F8F8F; } .fw-bar em{ margin-left:auto; font-style:normal; font:11px var(--mono); color:#6E6E6E; }
.fw-g{ display:grid; grid-template-columns:120px 1fr; border-radius:0 0 14px 14px; overflow:hidden; }
.fw-side{ display:flex; flex-direction:column; gap:2px; padding:14px 10px; border-right:1px solid rgba(255,255,255,.07); font-size:12.5px; color:#8F8F8F; }
.fw-side b{ font-size:13px; color:#EDEDED; font-weight:550; padding:0 8px 10px; } .fw-side span{ padding:6px 8px; border-radius:6px; } .fw-side span.on{ background:#232327; color:#fff; }
.fw-main{ padding:14px; display:grid; gap:10px; align-content:start; }
.fw-site{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px; border-radius:10px; background:#1B1B1E; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.fw-site b{ display:block; font-size:13.5px; font-weight:550; color:#EDEDED; } .fw-site small{ font-size:11.5px; color:#8F8F8F; }
.fw-site em, .fw-done em{ font-style:normal; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:#5BD18B; } .fw-site em i{ width:6px; height:6px; border-radius:50%; background:#5BD18B; }
.fw-acts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .fw-acts span{ font-size:11.5px; padding:5px 9px; border-radius:7px; color:#C9C2FF; background:rgba(110,93,242,.14); box-shadow:inset 0 0 0 1px rgba(167,156,255,.2); }
.fw-in{ border-radius:14px; overflow:hidden; background:#141416; color:#EDEDED; --line:rgba(255,255,255,.08); --text:#EDEDED; --muted:#A1A1A1; --faint:#6E6E6E; --line-2:rgba(255,255,255,.16); }
.fw-in .win-h{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px; }
.fw-in .win-h b{ font-weight:550; } .fw-in .win-h span{ font:11.5px var(--mono); color:#6E6E6E; }
.fw-in .restore div{ border-color:rgba(255,255,255,.07); color:#A1A1A1; } .fw-in .restore b{ color:#EDEDED; }
.fw-in .restore button{ color:#EDEDED; border-color:rgba(255,255,255,.18); border-radius:6px; }
.fw-cap{ margin:10px 0 0; font:11.5px var(--mono); color:#8F8F96; }
.fw-inst{ padding:16px; border-radius:0 0 14px 14px; display:grid; gap:12px; }
.fw-app{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:10px; background:#1B1B1E; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.fw-wp{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#141416; font:700 16px Georgia, serif; flex:none; }
.fw-app b{ display:block; font-size:13.5px; font-weight:550; } .fw-app small{ font-size:11.5px; color:#8F8F8F; }
.fw-go{ margin-left:auto; font-size:12.5px; font-weight:550; padding:7px 14px; border-radius:8px; background:var(--brand-btn-dark); color:#fff; }
.fw-steps{ display:grid; gap:8px; padding:4px 4px 0; } .fw-steps div{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:#C9C9C9; }
.fw-steps i{ width:16px; height:16px; border-radius:50%; flex:none; background:rgba(47,180,99,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.5l2.2 2.2L10.5 5' fill='none' stroke='%235BD18B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.fw-done{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:12px; border-radius:10px; background:rgba(47,180,99,.1); box-shadow:inset 0 0 0 1px rgba(91,209,139,.25); font-size:13px; color:#EDEDED; } .fw-done span{ font-size:11.5px; color:#8F8F8F; }

/* Pricing and size picker sit on the same tone; their headers stay as they are */
.flat .px-in{ padding-top:104px; padding-bottom:104px; }
.flat .tone > .frame{ padding-top:104px !important; }

@media (max-width:1023px){
  .fg{ grid-template-columns:1fr 1fr; } .fg-c{ border-left:0 !important; border-bottom:1px solid var(--hl) !important; } .fg-c:nth-child(even){ border-left:1px solid var(--hl) !important; } .fg-c:nth-last-child(-n+2){ border-bottom:0 !important; }
  .fr{ grid-template-columns:1fr; } .fr.rev .fr-t, .fr.rev .fr-w{ order:0; } .fr-w{ border-left:0 !important; border-right:0 !important; border-top:1px solid var(--hl); }
  .fr-t{ padding:56px 32px 48px; } .fr-w{ padding:40px 32px; }
}
@media (max-width:719px){
  .fl-h{ padding:72px 16px 36px; }
  .fg{ grid-template-columns:1fr; } .fg-c{ border-left:0 !important; padding:22px 16px 24px; } .fg-c:nth-last-child(2){ border-bottom:1px solid var(--hl) !important; }
  .fr-t{ padding:44px 16px 36px; } .fr-w{ padding:28px 16px; }
  .fw-g{ grid-template-columns:1fr; } .fw-side{ display:none; }
  .flat .hs-copy .l1-chk, .flat .hs-copy .l2-chk{ grid-template-columns:1fr; }
  .flat .hs-copy .l1-stats{ grid-template-columns:repeat(3, 1fr); } .flat .hs-copy .l1-stats > div{ padding:0 10px; } .flat .hs-copy .l1-stats b{ font-size:20px; }
}
.fw-done p{ margin:0; }

/* ── Owner round (2026-10-30): tour and statement sections back (black), hero left trimmed, FlyNode-style hero buttons ── */
.flat .hs-copy .lede{ margin-top:20px; }
.fn-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.fn-b{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; padding:0 22px; border-radius:12px; font-size:15.5px; font-weight:550; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap; transition:background .15s, box-shadow .15s, transform .15s; }
.fn-p{ background:var(--brand); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px #4A3BD6; }
.fn-p:hover{ background:var(--brand-hover); }
.fn-i{ width:17px; height:17px; }
.fn-a{ width:14px; height:14px; transition:transform .2s; } .fn-p:hover .fn-a{ transform:translateX(3px); }
.fn-g{ background:#fff; color:#0A0A0A; box-shadow:0 0 0 1px var(--hl); }
.fn-g:hover{ box-shadow:0 0 0 1px #BDBDC4; }
.fn-b:active{ transform:translateY(1px); }
.fn-b:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.flat .hs-copy .l1-stats{ margin-top:36px; }
@media (max-width:719px){ .fn-b{ width:100%; } }
@media (prefers-reduced-motion:reduce){ .fn-a{ transition:none; } }

/* ── Homepage, flat (owner: "Homepage", 2026-10-30) ── */
.flat .hb .fn-cta{ justify-content:center; }
.flat .sc-card, .flat .sc-pill{ box-shadow:0 0 0 1px var(--hl) !important; }
.flat .sc-card:hover{ box-shadow:0 0 0 1px #CFCFCA !important; }
.flat .sc-dk, .flat .sc-dk:hover{ box-shadow:0 0 0 1px #1E1E22; }
.flat .sc-art{ background:#F1F1EE; border-bottom-color:var(--hl); }
.flat .sc-sec .rails .in{ border-color:var(--hl); }
.flat .stage .cx{ box-shadow:0 0 0 1px rgba(16,16,20,.12); }
.flat #support .split.rule{ border-top:0; }


/* Customer stories ratings panel, shared by the homepage and Web Hosting (moved from hosting.css, 2026-10-30) */
.rs3{ margin-top:28px; width:100%; max-width:420px; background:#fff; border-radius:16px; box-shadow:0 0 0 1px #E5E8EB, 0 1px 2px rgba(16,16,20,.04), 0 24px 48px -28px rgba(16,16,20,.3); overflow:hidden; }
.rs3-k{ display:flex; align-items:center; gap:8px; padding:12px 18px; border-bottom:1px solid #EEEEEA; background:#FAFAF8; font:500 11px var(--mono); letter-spacing:.09em; text-transform:uppercase; color:#6E6E75; }
.rs3-k i{ width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px #E2F5EA; }
.rs3-g{ display:grid; grid-template-columns:1fr 1fr; }
.rs3-c{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; }
.rs3-c + .rs3-c{ border-left:1px solid #EEEEEA; }
.rs3-b{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:550; color:#0A0A0A; letter-spacing:-0.01em; }
.rs3-b svg{ width:18px; height:18px; flex:none; }
.rs3-c > b{ display:flex; align-items:baseline; gap:2px; font-size:40px; font-weight:550; letter-spacing:-0.045em; line-height:1; color:#0A0A0A; }
.rs3-c > b small{ font-size:15px; font-weight:500; letter-spacing:0; color:#A1A1A8; }
.rs3-st{ display:flex; gap:3px; }
.rs3-st i{ width:16px; height:16px; display:block; }
.rs3-st.g i{ background:#FBBC05; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8l1.6 3.4 3.7.4-2.8 2.5.8 3.7L6 9 2.7 10.8l.8-3.7L.7 4.6l3.7-.4z'/%3E%3C/svg%3E") center/16px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 .8l1.6 3.4 3.7.4-2.8 2.5.8 3.7L6 9 2.7 10.8l.8-3.7L.7 4.6l3.7-.4z'/%3E%3C/svg%3E") center/16px no-repeat; }
.rs3-st.t i{ border-radius:2px; background:#00B67A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.6l1.25 2.7 2.95.33-2.2 2 .62 2.9L6 8.05 3.38 9.53 4 6.63l-2.2-2 2.95-.33z' fill='%23fff'/%3E%3C/svg%3E") center/12px no-repeat; }
/* 4.8 on Trustpilot: the last box mostly green, a sliver grey */
.rs3-st.t i:last-child{ background:#00B67A; box-shadow:inset -3px 0 0 #DCDCE0; }

/* ── Homepage support title · T2·B "On shift" card (owner pick, step 13c, 2026-10-30): two-tone title, then a small
   status card with Chat, Phone and Tickets marked Open. The rest of the support section is unchanged. ── */
.split .th{ grid-column:1 / span 2; padding:0 24px; display:flex; flex-direction:column; align-items:flex-start; }
.split .th .th-t{ margin:0; padding:0; max-width:none; font-weight:550; }
.th-t span{ display:block; font-size:clamp(30px, 3.6vw, 50px); line-height:1.06; letter-spacing:-0.04em; color:#0A0A0A; }
.light .th-t span + span{ color:#9A9AA2; }
.rb-i{ width:30px; height:30px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); } .rb-i svg{ width:15px; height:15px; }
.rl-d{ position:relative; width:10px; height:10px; display:grid; place-items:center; flex:none; }
.rl-d i{ width:8px; height:8px; border-radius:50%; background:var(--green); }
.rl-d::before{ content:""; position:absolute; inset:-3px; border-radius:50%; background:rgba(47,180,99,.25); animation:rlp 2.2s ease-out infinite; }
@keyframes rlp{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1.9); opacity:0; } }
.rbx .sh2{ margin-top:24px; width:100%; max-width:380px; background:#fff; border-radius:14px; box-shadow:0 0 0 1px var(--hl, #E5E8EB); overflow:hidden; }
.sh2-h{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--hl, #E5E8EB); background:#FAFAF8; }
.sh2-h b{ font-size:13.5px; font-weight:550; } .sh2-h em{ margin-left:auto; font-style:normal; font:11px var(--mono); color:#8F8F96; }
.sh2-r{ display:flex; align-items:center; gap:12px; padding:10px 16px; font-size:14px; font-weight:500; color:#0A0A0A; }
.sh2-r + .sh2-r{ border-top:1px solid #F0F0EC; } .sh2-r small{ margin-left:6px; font-size:12.5px; font-weight:400; color:#8F8F96; }
.sh2-r .ok{ margin-left:auto; font-style:normal; font:500 11px var(--mono); color:#0E8A57; background:#E2F5EA; padding:3px 8px; border-radius:6px; }
a.sh2-r{ text-decoration:none; transition:background .15s; } a.sh2-r:hover{ background:#FAFAF8; }
@media (max-width:719px){ .split .th{ padding:0 16px; } }
@media (prefers-reduced-motion:reduce){ .rl-d::before{ animation:none; opacity:0; } }