/* ═══════════════════════════════════════════════════════════════════ Буквограй — legal.css: the document pages (/privacy, later /terms). index.html inlines its tokens in because it splits critical CSS; the document pages have no such split, so the same :root block lives here. When a token changes in index.html, change it here too (grep for "clay-blue" in both). ═══════════════════════════════════════════════════════════════════ */ /* Same subsets as index.html, except Nunito latin: the landing's latin file is trimmed to the 62 code points the home page draws, and a policy is full of service names (Firebase, RevenueCat, ElevenLabs…) that would otherwise fall back to Arial glyph-by-glyph. nunito-latin-full.woff2 is the app's own full latin subset. */ @font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/nunito-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/nunito-latin-full.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/unbounded-700-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/unbounded-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/unbounded-900-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Unbounded';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/unbounded-900-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Unbounded Fallback';src:local('Arial Black'),local('Arial-BoldMT'),local('Arial Bold'),local('Arial'),local('Roboto Black'),local('Roboto-Black'),local('Roboto'),local('Noto Sans'),local('DejaVu Sans');size-adjust:112.5%;ascent-override:92%;descent-override:24%;line-gap-override:0%} @font-face{font-family:'Nunito Fallback';src:local('Arial'),local('Helvetica Neue'),local('Roboto');size-adjust:105%;ascent-override:101%;descent-override:35%;line-gap-override:0%} /* ── tokens: verbatim copy of the :root block in index.html ──────── */ :root{ color-scheme:light; /* walls */ --wall-violet:#9029d7;--wall-violet-light:#ab59e6;--violet-shadow:#9c33d4;--violet-glow:#a861dd;--violet-deep:#7a1fbf;--violet-deeper:#6b19ad; --wall-sky:#f0f9ff;--wall-white:#ffffff;--wall-slate:#f8fafc;--mat-cream:#fef3c7;--footer:#0f172a; /* clay */ --shelf-hi:#f3e7c3;--shelf-top:#eddcae;--shelf-front:#d6a459;--shelf-lip:#d19a51; --clay-blue:#6f9ad0;--clay-blue-hi:#93c0df;--clay-blue-sh:#527baa; --clay-coral:#d65d43;--clay-coral-hi:#e8836b;--clay-coral-sh:#c04b37; --clay-sage:#829b71;--clay-sage-hi:#aebd91;--clay-sage-sh:#66795a; /* glyph tones: the spec's clay shades, not black. 3.3 / 4.4 / 3.4 : 1 on the ochre tile face — the glyph is far past 18.66px bold, so 3:1 is the bar, and the hue is what makes the CSS tiles match the cube art beside them */ --glyph-blue:#527baa;--glyph-blue-hi:#93c0df;--glyph-blue-sh:#2f4a6b; --glyph-coral:#c04b37;--glyph-coral-hi:#e8836b;--glyph-coral-sh:#7a2b18; --glyph-sage:#66795a;--glyph-sage-hi:#aebd91;--glyph-sage-sh:#37452c; --frame-teal:#9cc0c0;--frame-terracotta:#bf5a26;--frame-terracotta-sh:#983e1c;--frame-olive:#648b63;--frame-olive-sh:#526d3f; --sparkle-gold:#f5cd52;--sparkle-cyan:#5eb7df;--sparkle-pale:#c5e9fb; /* ink */ --ink:#0f172a;--ink-2:#1e293b;--muted:#64748b;--card-edge:#c9d6e5;--on-violet:#f3e8ff;--on-footer:#cbd5e1; --mascot-violet:#8B5CF6;--amber:#F59E0B;--blush:#FDA4AF;--success:#10b981;--focus-light:#0369a1; --brand-grad:linear-gradient(90deg,#a855f7,#ec4899,#0ea5e9);--brand-grad-solid:linear-gradient(90deg,#7e22ce,#be185d,#0369a1); --cta-grad:linear-gradient(90deg,#4f46e5,#a21caf,#be185d); --hero-spot:radial-gradient(60vw 60vw at 18% 12%,rgba(171,89,230,.55),transparent 70%); /* radii + edges */ --r-tile:18%;--r-block:24px;--r-panel:32px;--r-chip:12px;--r-phone:44px;--r-pill:999px; --edge-block:8px;--edge-block-lift:12px;--edge-tile:8px;--shelf-h:18px;--bezel:14px; /* shadows (always tinted) */ --sh-violet:0 12px 32px rgba(156,51,212,.25);--sh-violet-lift:0 20px 44px rgba(156,51,212,.32); --sh-light:0 12px 28px rgba(56,189,248,.12);--sh-light-lift:0 20px 40px rgba(56,189,248,.18); /* the last term is the contact shadow: without it a tile floats over its plank */ --sh-tile:0 var(--edge-tile) 0 var(--shelf-lip),0 12px 18px rgba(156,51,212,.22),0 calc(var(--edge-tile) + 3px) 7px -3px rgba(61,20,94,.45); --sh-tile-light:0 var(--edge-tile) 0 var(--shelf-lip),0 12px 18px rgba(56,189,248,.14),0 calc(var(--edge-tile) + 3px) 7px -3px rgba(30,41,59,.38); --sh-header:0 8px 24px rgba(144,41,215,.12); --extrude-wordmark:0 .03em 0 var(--violet-deep),0 .06em 0 var(--violet-deep),0 .09em 0 var(--violet-deeper),0 .12em 0 var(--violet-deeper),0 .2em .28em rgba(107,25,173,.5); --extrude-blue:0 -.022em 0 var(--glyph-blue-hi),0 .022em 0 var(--glyph-blue-hi),0 .045em 0 var(--glyph-blue-sh),0 .075em 0 var(--glyph-blue-sh),0 .1em .13em rgba(47,74,107,.34); --extrude-coral:0 -.022em 0 var(--glyph-coral-hi),0 .022em 0 var(--glyph-coral-hi),0 .045em 0 var(--glyph-coral-sh),0 .075em 0 var(--glyph-coral-sh),0 .1em .13em rgba(122,43,24,.34); --extrude-sage:0 -.022em 0 var(--glyph-sage-hi),0 .022em 0 var(--glyph-sage-hi),0 .045em 0 var(--glyph-sage-sh),0 .075em 0 var(--glyph-sage-sh),0 .1em .13em rgba(55,69,44,.34); /* type */ --font-display:'Unbounded','Unbounded Fallback',system-ui,sans-serif; --font-body:'Nunito','Nunito Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-emoji:'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'; --fs-wordmark:clamp(2.25rem,1.4rem + 4.1vw,4.375rem);--fs-h1:clamp(1.375rem,1rem + 1.6vw,2.25rem);--fs-h2:clamp(1.5rem,1.05rem + 2vw,2.75rem); --fs-h3:clamp(1.0625rem,1rem + .4vw,1.25rem);--fs-lead:clamp(1.125rem,1rem + .6vw,1.375rem);--fs-body:clamp(1.0625rem,1rem + .35vw,1.1875rem); --fs-small:.9375rem;--fs-caption:.875rem;--fs-eyebrow:.8125rem;--fs-legal:.8125rem;--fs-stat:clamp(3rem,2rem + 5vw,6rem); --tile-glyph:56%;--lh-tight:.95;--lh-heading:1.15;--lh-body:1.55;--lh-glyph:1.22;--track-tight:-.02em; /* spacing */ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px; --section-y:clamp(64px,6vw + 32px,128px);--container:1200px;--gutter:clamp(20px,4vw,48px); --header-h:56px;--anchor-offset:72px;--tap-min:48px;--badge-h:48px;--badge-gap:12px;--phone-h:260px; /* motion */ --ease-out:cubic-bezier(.22,1,.36,1);--ease-back:cubic-bezier(.34,1.56,.64,1);--ease-land:cubic-bezier(.22,1.2,.36,1);--ease-std:cubic-bezier(.2,.7,.2,1); --d-press:160ms;--d-pop:260ms;--d-reveal:400ms;--d-wobble:500ms;--d-tumble:520ms;--d-drop:620ms;--d-bar:800ms;--d-glow:3000ms;--d-bubble:1500ms; --stagger:60ms;--stagger-tile:25ms;--marquee-dur:48s;--idle-max:5s; --z-path:1;--z-content:2;--z-header:100;--z-sheet:110;--z-bubble:120; } @media (min-width:1024px){:root{--header-h:68px;--anchor-offset:84px;--badge-h:52px;--phone-h:340px;--edge-tile:10px}} @media (max-width:719px){:root{--marquee-dur:64s}} /* ── base ─────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* 500, not the home page's 600: a 2 000-word document at semibold reads as shouting */ body{margin:0;background:var(--wall-sky);color:var(--ink);font-family:var(--font-body);font-weight:500;font-size:var(--fs-body);line-height:var(--lh-body);font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden} img,svg,picture{max-width:100%} img{display:block;border-style:none} a{color:inherit} h1,h2,h3,p,ul,ol,figure{margin:0} ul,ol{padding:0} :focus-visible{outline:3px solid var(--focus-light);outline-offset:3px;border-radius:4px;box-shadow:0 0 0 6px rgba(255,255,255,.9)} a[href],button,[tabindex]{scroll-margin-top:calc(var(--header-h) + env(safe-area-inset-top) + 12px)} h1,h2{text-wrap:balance} p,li{text-wrap:pretty} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .skip{position:fixed;top:8px;left:8px;z-index:200;transform:translateY(-160%);background:var(--sparkle-gold);color:var(--ink);font-weight:800;font-size:var(--fs-small);padding:12px 18px;border-radius:var(--r-chip);box-shadow:0 4px 0 var(--shelf-front);text-decoration:none;transition:transform 160ms var(--ease-out)} .skip:focus{transform:none} .wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .u-display{font-family:var(--font-display);letter-spacing:var(--track-tight)} .ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .chip{display:inline-flex;align-items:center;gap:8px;background:var(--sparkle-gold);color:var(--ink);font-weight:800;font-size:var(--fs-eyebrow);line-height:1.2;letter-spacing:.01em;padding:9px 14px;border-radius:var(--r-chip);box-shadow:0 4px 0 var(--shelf-front);text-align:left} /* ── header: the home page's bar is fixed and JS-driven; here it is static and always solid, drawn like index.html's .hdr.is-solid state ─────── */ .lhdr{position:sticky;top:0;z-index:var(--z-header);background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--sh-header);padding-top:env(safe-area-inset-top)} .lhdr::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;background:linear-gradient(var(--shelf-front) 50%,var(--shelf-lip) 50%)} .lhdr__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);height:var(--header-h)} .lhdr__brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto;padding:4px;margin:-4px;border-radius:14px} .lhdr__logo{width:40px;height:40px;border-radius:12px;box-shadow:0 3px 0 rgba(122,31,191,.35);flex:0 0 auto} .lhdr__mark{font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:var(--track-tight);line-height:1.22;padding-top:.06em;color:transparent;background:var(--brand-grad-solid);-webkit-background-clip:text;background-clip:text} .lhdr__back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-chip);background:var(--shelf-top);color:var(--ink);font-weight:800;font-size:var(--fs-small);text-decoration:none;box-shadow:0 4px 0 var(--shelf-lip);transition:transform var(--d-press) var(--ease-out),box-shadow var(--d-press) var(--ease-out)} .lhdr__back:hover{transform:translateY(-1px)} .lhdr__back:active{transform:translateY(3px);box-shadow:0 1px 0 var(--shelf-lip)} .lhdr__back .ic{width:18px;height:18px} @media (max-width:399px){.lhdr__back span{display:none}.lhdr__back{padding:0 12px}} /* ── document ─────────────────────────────────────────────────────── */ .doc{padding-block:clamp(28px,4vw,56px) clamp(64px,8vw,128px)} /* .plank (styles.css) draws the shelf under the panel */ .doc__plank{max-width:800px;margin-inline:auto} .doc__panel{background:var(--wall-white);border-radius:var(--r-panel);padding:clamp(24px,5vw,64px) clamp(20px,5vw,72px);box-shadow:0 var(--edge-block) 0 var(--card-edge),var(--sh-light)} .doc__eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:var(--sp-5)} .doc__scope{font-weight:700;font-size:var(--fs-small);color:var(--muted)} /* «конфіденційності» is 16 Unbounded-900 glyphs: wider than a 320–375px column at any sane size, so the markup carries a soft hyphen and the browser breaks there only when it has to; hyphens:manual keeps it from inventing other break points */ .doc h1{font-family:var(--font-display);font-weight:900;font-size:clamp(1.625rem,1.1rem + 2.4vw,2.75rem);line-height:1.1;letter-spacing:var(--track-tight);color:var(--ink-2);padding-top:.06em;max-width:16ch;hyphens:manual;-webkit-hyphens:manual} .doc__lead{margin-top:var(--sp-5);font-weight:600;font-size:var(--fs-lead);line-height:1.5;color:var(--ink);max-width:60ch} /* ~66 characters at 17–19px: the measure a long document is read at */ .doc__body{max-width:66ch} .doc h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.125rem,1rem + .6vw,1.375rem);line-height:1.25;letter-spacing:-.015em;color:var(--ink-2);margin-top:clamp(40px,5vw,56px);padding-top:.05em;scroll-margin-top:calc(var(--header-h) + env(safe-area-inset-top) + 20px)} .doc p{margin-top:var(--sp-4)} .doc h2 + p{margin-top:var(--sp-3)} .doc p,.doc li{font-size:var(--fs-body);line-height:1.6;color:var(--ink)} .doc ul{margin-top:var(--sp-4);list-style:none;display:grid;gap:10px} .doc li{position:relative;padding-left:1.6em} /* the bullets are the three clay tones of the tile glyphs, in the same rotation */ .doc li::before{content:"";position:absolute;left:.15em;top:.6em;width:.62em;height:.62em;border-radius:50%;background:var(--clay-blue);box-shadow:0 2px 0 var(--clay-blue-sh)} .doc li:nth-child(3n+2)::before{background:var(--clay-coral);box-shadow:0 2px 0 var(--clay-coral-sh)} .doc li:nth-child(3n+3)::before{background:var(--clay-sage);box-shadow:0 2px 0 var(--clay-sage-sh)} .doc a{color:var(--violet-deep);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em;text-decoration-color:rgba(122,31,191,.35)} .doc a:hover,.doc a:focus-visible{text-decoration-color:currentColor} .doc strong{font-weight:800;color:var(--ink-2)} /* the five-line summary on the cream mat — the part a parent actually reads */ .doc__summary{margin-top:clamp(28px,4vw,40px);background:var(--mat-cream);border-radius:var(--r-block);padding:clamp(18px,3vw,28px);box-shadow:0 6px 0 var(--shelf-front)} .doc__summary h2{margin-top:0;font-size:var(--fs-h3)} .doc__summary ul{margin-top:var(--sp-3)} .toc{margin-top:clamp(28px,4vw,40px)} .toc__label{font-weight:800;font-size:var(--fs-eyebrow);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .toc ol{margin-top:var(--sp-3);list-style:none;display:grid;gap:4px 24px} /* two columns read down, then across: the numbering of a contents list is its order */ @media (min-width:640px){.toc ol{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(6,auto)}} .toc a{display:inline-flex;align-items:center;min-height:36px;font-weight:700;font-size:var(--fs-small);color:var(--ink-2);text-decoration:none;border-bottom:2px solid transparent} .toc a:hover,.toc a:focus-visible{border-bottom-color:var(--sparkle-gold)} /* the processors, one card each, so a reader can scan names before roles */ .parties{margin-top:var(--sp-4)} .parties li{padding:14px 16px;border-radius:var(--r-chip);background:var(--wall-slate);border:1px solid var(--card-edge)} .parties li::before{display:none} .parties b{display:block;font-weight:800;color:var(--ink-2)} .parties span{display:block;margin-top:2px;font-size:var(--fs-small)} .parties a{font-size:var(--fs-caption)} .doc__contact{margin-top:clamp(40px,5vw,56px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:clamp(18px,3vw,24px) clamp(18px,3vw,28px);border-radius:var(--r-block);background:var(--wall-violet);box-shadow:0 var(--edge-block) 0 var(--violet-deep)} .doc__contact p{margin:0;color:#fff;font-weight:700} /* Nunito, not Unbounded: the display latin subset has no lowercase */ .doc__contact a{color:#fff;font-weight:800;font-size:clamp(1rem,.9rem + .5vw,1.25rem);text-decoration-color:rgba(255,255,255,.5);word-break:break-all} .doc__contact a:hover,.doc__contact a:focus-visible{text-decoration-color:#fff} .doc__contact :focus-visible{outline-color:var(--sparkle-gold);box-shadow:0 0 0 6px rgba(107,25,173,.85)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lhdr__back,.skip{transition:none}} @media print{ .skip,.lhdr,.ftr,.toc{display:none !important} body{background:#fff} .doc{padding:0} .doc__panel{box-shadow:none;padding:0;border-radius:0} .doc__plank{padding-bottom:0} .doc__plank::after{display:none} .doc__summary,.parties li{box-shadow:none;border:1px solid #ccc;background:#fff} .doc__contact{background:#fff;box-shadow:none;border:1px solid #ccc} .doc__contact p,.doc__contact a{color:#000} .chip{box-shadow:none;border:1px solid #ccc;background:#fff} }