/* okno-p1-pages.css — reusable modern page system for Stage 1 P1 residence pages (hub/route/problem).
   OKNO UI: TildaSans sans-serif, teal primary #0d7c6b, navy headings #0c1e3c, neutral cards, subtle
   borders/shadows, strong mobile layout. No serif legacy, no empty blocks. Shared by all 4 P1 pages. */
:root{--teal:#0d7c6b;--teal-d:#0a6558;--navy:#0c1e3c;--muted:#5b6472;--line:#e7ecf3;--bg:#fff;--bg2:#f6f8fb;--radius:16px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.okno-p1{margin:0;font-family:'TildaSans','Segoe UI',system-ui,Arial,sans-serif;color:var(--navy);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
.okno-p1 img{max-width:100%;height:auto}
.op1-wrap{max-width:960px;margin:0 auto;padding:0 20px}
/* header */
.op1-hd{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.op1-hd__in{max-width:1160px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.op1-logo{font-weight:800;font-size:19px;color:var(--navy);text-decoration:none;letter-spacing:-.01em;flex:0 0 auto}
.op1-logo span{color:var(--teal)}
.op1-nav{flex:1 1 auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:14.5px;font-weight:600}
.op1-nav a{color:var(--navy);text-decoration:none}.op1-nav a:hover{color:var(--teal)}
.op1-lang{flex:0 0 auto;display:flex;gap:8px;font-size:13.5px;font-weight:700;color:var(--muted)}
.op1-lang a{color:var(--muted);text-decoration:none}.op1-lang a.on,.op1-lang a:hover{color:var(--teal)}
@media(max-width:820px){.op1-nav{display:none}.op1-hd__in{padding:11px 16px}}
/* breadcrumb */
.op1-bc{font-size:13px;color:var(--muted);padding:14px 0 0}
.op1-bc a{color:var(--muted);text-decoration:none}.op1-bc a:hover{color:var(--teal)}
/* hero */
.op1-hero{padding:26px 0 8px}
.op1-hero h1{font-size:34px;line-height:1.18;font-weight:800;letter-spacing:-.015em;margin:8px 0 14px}
.op1-hero p{font-size:17.5px;color:#33404f;max-width:760px;margin:0 0 14px}
.op1-upd{font-size:12.5px;color:var(--muted);margin:2px 0 0}
.op1-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 6px}
@media(max-width:560px){.op1-hero h1{font-size:26px}.op1-hero p{font-size:16px}}
/* buttons */
.op1-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:14px 26px;border-radius:12px;font-size:15.5px;font-weight:700;text-decoration:none;cursor:pointer;border:none;line-height:1.2;transition:background .15s,box-shadow .15s;text-align:center}
.op1-btn--primary{background:var(--teal);color:#fff}.op1-btn--primary:hover{background:var(--teal-d)}
.op1-btn--ghost{background:#fff;color:var(--navy);border:1.5px solid #c8d2de}.op1-btn--ghost:hover{border-color:var(--navy)}
@media(max-width:560px){.op1-btn{width:100%}}
/* sections */
.op1-sec{padding:30px 0;border-top:1px solid var(--line)}
.op1-sec:first-of-type{border-top:none}
.op1-sec h2{font-size:25px;line-height:1.25;font-weight:800;letter-spacing:-.01em;margin:0 0 14px}
.op1-sec h3{font-size:18px;font-weight:700;margin:20px 0 8px;color:var(--navy)}
.op1-sec p{margin:0 0 12px;color:#33404f}
.op1-sec ul{margin:0 0 14px;padding-left:0;list-style:none}
.op1-sec ul li{position:relative;padding:6px 0 6px 26px;color:#33404f}
.op1-sec ul li::before{content:"";position:absolute;left:4px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.op1-sec ol{margin:0 0 14px;padding-left:22px}.op1-sec ol li{padding:6px 0;color:#33404f}
/* numbered process steps */
.op1-steps{display:grid;gap:14px;margin:8px 0 6px}
.op1-step{display:flex;gap:14px;align-items:flex-start;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.op1-step__n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.op1-step__b h3{margin:0 0 4px;font-size:16.5px}.op1-step__b p{margin:0;font-size:15px;color:var(--muted)}
/* route selector cards (hub) */
.op1-routes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:8px 0}
@media(max-width:680px){.op1-routes{grid-template-columns:1fr}}
.op1-route{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s,border-color .15s}
.op1-route:hover{border-color:var(--teal);box-shadow:0 6px 20px rgba(13,124,107,.10);transform:translateY(-2px)}
.op1-route h3{margin:0 0 6px;font-size:17px;color:var(--navy)}
.op1-route p{margin:0 0 10px;font-size:14.5px;color:var(--muted)}
.op1-route__go{font-size:14px;font-weight:700;color:var(--teal)}
/* price / service cards */
.op1-prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:10px 0}
.op1-price{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.op1-price__t{font-size:16.5px;font-weight:700;margin:0 0 4px}
.op1-price__p{font-size:20px;font-weight:800;color:var(--teal);margin:0 0 8px}
.op1-price__d{font-size:14.5px;color:var(--muted);margin:0 0 12px}
.op1-price ul{margin:0 0 12px}
/* table */
.op1-tablewrap{overflow-x:auto;margin:8px 0 6px}
.op1-table{border-collapse:collapse;width:100%;min-width:420px;font-size:15px}
.op1-table th,.op1-table td{border:1px solid var(--line);padding:11px 14px;text-align:left}
.op1-table th{background:var(--bg2);font-weight:700}
.op1-table td.num,.op1-table th.num{text-align:right;white-space:nowrap}
/* note / inline link block */
.op1-note{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:10px 0}
.op1-note a{color:var(--teal);font-weight:700;text-decoration:none}.op1-note a:hover{text-decoration:underline}
/* FAQ */
.op1-faq details{border:1px solid var(--line);border-radius:12px;padding:0;margin:0 0 10px;background:#fff}
.op1-faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:700;font-size:16px;color:var(--navy);display:flex;justify-content:space-between;gap:12px}
.op1-faq summary::-webkit-details-marker{display:none}
.op1-faq summary::after{content:"+";color:var(--teal);font-weight:800;font-size:20px;flex:0 0 auto}
.op1-faq details[open] summary::after{content:"\2013"}
.op1-faq .op1-faq__a{padding:0 18px 16px;color:#33404f}
.op1-faq .op1-faq__a p{margin:0}
/* final CTA band */
.op1-final{background:linear-gradient(180deg,#f6f8fb,#eef3f8);border-top:1px solid var(--line);margin-top:8px}
.op1-final__in{max-width:760px;margin:0 auto;padding:40px 20px;text-align:center}
.op1-final h2{font-size:26px;font-weight:800;margin:0 0 10px}
.op1-final p{font-size:16.5px;color:var(--muted);margin:0 0 20px}
/* footer */
.op1-ft{background:var(--navy);color:#c7d0dd;font-size:14.5px}
.op1-ft__in{max-width:1160px;margin:0 auto;padding:34px 20px 22px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
@media(max-width:820px){.op1-ft__in{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.op1-ft__in{grid-template-columns:1fr}}
.op1-ft h4{color:#fff;font-size:14px;font-weight:700;margin:0 0 12px;letter-spacing:.02em}
.op1-ft a{color:#c7d0dd;text-decoration:none;display:block;padding:4px 0}.op1-ft a:hover{color:#fff}
.op1-ft__brand{font-weight:800;font-size:18px;color:#fff}
.op1-ft__brand span{color:#5fd0bd}
.op1-ft__bottom{border-top:1px solid rgba(255,255,255,.12);text-align:center;padding:16px 20px;font-size:13px;color:#8b97a8}

/* NAVC-05: force the modern OKNO sans system inside the injected TP sections so the two-card block matches the
   RU hub even on legacy Tilda pages whose <body> lacks .okno-p1 (Tilda serif base). Strictly scoped to the two
   injected IDs — no leakage to the surrounding legacy page. Metrics (scale/weight/border/radius/spacing) already
   come from the class-based .op1-* rules; only the inherited font-family was serif on UA. */
#okno-tp-hub,#okno-tp-ctx,#okno-tp-hub *,#okno-tp-ctx *{font-family:'TildaSans','Segoe UI',system-ui,Arial,sans-serif!important}