Files
2026-08-10 12:01:03 +07:00

3769 lines
276 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<style data-brand-fonts>
@font-face {
font-family: "Cormorant Garamond";
src: url("../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
font-weight: 300;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
font-weight: 400;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../fonts/cormorant-garamond-300.woff2") format("woff2");
font-weight: 300;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: "Tenor Sans";
src: url("../fonts/tenor-sans-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Malenia — Artifacts</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&amp;display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tenor+Sans&amp;display=swap" />
<style>
:root {
--brand-color-primary: #c9a84c;
--brand-color-primary-bg: #fffef0;
--brand-color-primary-bg-hover: #fcfaed;
--brand-color-primary-border: #f0eace;
--brand-color-primary-border-hover: #e3d69f;
--brand-color-primary-hover: #d6bf74;
--brand-color-primary-active: #a38336;
--brand-color-primary-text: #573e14;
--brand-color-success: #52c41a;
--brand-color-success-bg: #f6ffed;
--brand-color-success-border: #b6eb8f;
--brand-color-success-hover: #72d13d;
--brand-color-success-active: #389e0d;
--brand-color-warning: #faad14;
--brand-color-warning-bg: #fffbe6;
--brand-color-warning-border: #ffe58f;
--brand-color-warning-hover: #ffc53d;
--brand-color-warning-active: #d48806;
--brand-color-error: #ff4d4f;
--brand-color-error-bg: #fff2f0;
--brand-color-error-border: #ffccc7;
--brand-color-error-hover: #ff7875;
--brand-color-error-active: #d9363d;
--brand-color-info: #c9a84c;
--brand-color-info-bg: #fffef0;
--brand-color-info-border: #f0eace;
--brand-color-link: #c9a84c;
--brand-color-link-hover: #d6bf74;
--brand-color-link-active: #a38336;
--brand-color-text: #35312b;
--brand-color-text-secondary: #68655f;
--brand-color-text-tertiary: #95928c;
--brand-color-text-quaternary: #c2bfba;
--brand-color-fill: #d8d5d0;
--brand-color-fill-secondary: #ede9e4;
--brand-color-fill-tertiary: #f1eee9;
--brand-color-fill-quaternary: #f6f3ed;
--brand-color-bg-layout: #f1eee9;
--brand-color-bg-container: #faf7f2;
--brand-color-bg-elevated: #faf7f2;
--brand-color-border: #d8d5d0;
--brand-color-border-secondary: #ede9e4;
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--brand-font-size: 14px;
--brand-font-size-sm: 12px;
--brand-font-size-lg: 18px;
--brand-font-size-xl: 22px;
--brand-font-size-heading-1: 38px;
--brand-font-size-heading-2: 32px;
--brand-font-size-heading-3: 26px;
--brand-font-size-heading-4: 22px;
--brand-font-size-heading-5: 18px;
--brand-line-height: 1.5714285714285714;
--brand-line-height-heading: 1.25;
--brand-font-weight-strong: 600;
--brand-size-xxs: 4px;
--brand-size-xs: 8px;
--brand-size-sm: 12px;
--brand-size: 16px;
--brand-size-md: 20px;
--brand-size-lg: 24px;
--brand-size-xl: 32px;
--brand-size-xxl: 48px;
--brand-border-radius-xs: 3px;
--brand-border-radius-sm: 5px;
--brand-border-radius: 8px;
--brand-border-radius-lg: 10px;
--brand-line-width: 1px;
--brand-control-height-xs: 16px;
--brand-control-height-sm: 24px;
--brand-control-height: 32px;
--brand-control-height-lg: 40px;
--brand-motion-duration-fast: 0.1s;
--brand-motion-duration-mid: 0.2s;
--brand-motion-duration-slow: 0.3s;
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--brand-primary-palette-1: #fffef0;
--brand-primary-palette-2: #fcfaed;
--brand-primary-palette-3: #f0eace;
--brand-primary-palette-4: #e3d69f;
--brand-primary-palette-5: #d6bf74;
--brand-primary-palette-6: #c9a84c;
--brand-primary-palette-7: #a38336;
--brand-primary-palette-8: #7d5f23;
--brand-primary-palette-9: #573e14;
--brand-primary-palette-10: #30210b;
--brand-presets-red-1: #fff1f0;
--brand-presets-red-2: #ffcbc7;
--brand-presets-red-3: #ffa39e;
--brand-presets-red-4: #ff7775;
--brand-presets-red-5: #ff4d50;
--brand-presets-red-6: #f5222d;
--brand-presets-red-7: #cf1323;
--brand-presets-red-8: #a8071a;
--brand-presets-red-9: #820014;
--brand-presets-red-10: #5c0011;
--brand-presets-volcano-1: #fff2e8;
--brand-presets-volcano-2: #ffd8bf;
--brand-presets-volcano-3: #ffbb96;
--brand-presets-volcano-4: #ff9c6e;
--brand-presets-volcano-5: #ff7a45;
--brand-presets-volcano-6: #fa541c;
--brand-presets-volcano-7: #d4380d;
--brand-presets-volcano-8: #ad2202;
--brand-presets-volcano-9: #871500;
--brand-presets-volcano-10: #610c00;
--brand-presets-orange-1: #fff7e6;
--brand-presets-orange-2: #ffe7ba;
--brand-presets-orange-3: #ffd591;
--brand-presets-orange-4: #ffc069;
--brand-presets-orange-5: #ffa940;
--brand-presets-orange-6: #fa8c16;
--brand-presets-orange-7: #d46b08;
--brand-presets-orange-8: #ad4e00;
--brand-presets-orange-9: #873800;
--brand-presets-orange-10: #612500;
--brand-presets-gold-1: #fffbe6;
--brand-presets-gold-2: #fff1b8;
--brand-presets-gold-3: #ffe58f;
--brand-presets-gold-4: #ffd666;
--brand-presets-gold-5: #ffc53d;
--brand-presets-gold-6: #faad14;
--brand-presets-gold-7: #d48806;
--brand-presets-gold-8: #ad6800;
--brand-presets-gold-9: #874c00;
--brand-presets-gold-10: #613400;
--brand-presets-yellow-1: #feffe6;
--brand-presets-yellow-2: #ffffb8;
--brand-presets-yellow-3: #fffb8f;
--brand-presets-yellow-4: #fff566;
--brand-presets-yellow-5: #ffeb3d;
--brand-presets-yellow-6: #fadb14;
--brand-presets-yellow-7: #d4b106;
--brand-presets-yellow-8: #ad8a00;
--brand-presets-yellow-9: #876700;
--brand-presets-yellow-10: #614700;
--brand-presets-lime-1: #fcffe6;
--brand-presets-lime-2: #f4ffb8;
--brand-presets-lime-3: #eaff8f;
--brand-presets-lime-4: #d3f261;
--brand-presets-lime-5: #bae637;
--brand-presets-lime-6: #a0d911;
--brand-presets-lime-7: #7bb305;
--brand-presets-lime-8: #5b8c00;
--brand-presets-lime-9: #3f6600;
--brand-presets-lime-10: #254000;
--brand-presets-green-1: #f6ffed;
--brand-presets-green-2: #d9f7be;
--brand-presets-green-3: #b6eb8f;
--brand-presets-green-4: #94de64;
--brand-presets-green-5: #72d13d;
--brand-presets-green-6: #52c41a;
--brand-presets-green-7: #389e0d;
--brand-presets-green-8: #227804;
--brand-presets-green-9: #135200;
--brand-presets-green-10: #092b00;
--brand-presets-cyan-1: #e6fffb;
--brand-presets-cyan-2: #b5f5ec;
--brand-presets-cyan-3: #87e8de;
--brand-presets-cyan-4: #5cdbd3;
--brand-presets-cyan-5: #36cfc9;
--brand-presets-cyan-6: #13c2c2;
--brand-presets-cyan-7: #08979c;
--brand-presets-cyan-8: #006d75;
--brand-presets-cyan-9: #00474f;
--brand-presets-cyan-10: #002329;
--brand-presets-blue-1: #e6f4ff;
--brand-presets-blue-2: #bae0ff;
--brand-presets-blue-3: #91caff;
--brand-presets-blue-4: #69b1ff;
--brand-presets-blue-5: #4096ff;
--brand-presets-blue-6: #1677ff;
--brand-presets-blue-7: #0958d9;
--brand-presets-blue-8: #003eb3;
--brand-presets-blue-9: #002c8c;
--brand-presets-blue-10: #001d66;
--brand-presets-geekblue-1: #f0f5ff;
--brand-presets-geekblue-2: #d6e4ff;
--brand-presets-geekblue-3: #adc6ff;
--brand-presets-geekblue-4: #85a5ff;
--brand-presets-geekblue-5: #597df7;
--brand-presets-geekblue-6: #2f54eb;
--brand-presets-geekblue-7: #1d39c4;
--brand-presets-geekblue-8: #10229e;
--brand-presets-geekblue-9: #061178;
--brand-presets-geekblue-10: #030852;
--brand-presets-purple-1: #f9f0ff;
--brand-presets-purple-2: #efdbff;
--brand-presets-purple-3: #d4adf7;
--brand-presets-purple-4: #b37feb;
--brand-presets-purple-5: #9254de;
--brand-presets-purple-6: #722ed1;
--brand-presets-purple-7: #531dab;
--brand-presets-purple-8: #391085;
--brand-presets-purple-9: #22075e;
--brand-presets-purple-10: #120338;
--brand-presets-magenta-1: #fff0f6;
--brand-presets-magenta-2: #ffd6e7;
--brand-presets-magenta-3: #ffadd2;
--brand-presets-magenta-4: #ff85bf;
--brand-presets-magenta-5: #f759aa;
--brand-presets-magenta-6: #eb2f96;
--brand-presets-magenta-7: #c41d7e;
--brand-presets-magenta-8: #9e1067;
--brand-presets-magenta-9: #780650;
--brand-presets-magenta-10: #520339;
--brand-presets-grey-1: #a6a6a6;
--brand-presets-grey-2: #999999;
--brand-presets-grey-3: #8c8c8c;
--brand-presets-grey-4: #808080;
--brand-presets-grey-5: #737373;
--brand-presets-grey-6: #666666;
--brand-presets-grey-7: #404040;
--brand-presets-grey-8: #1a1a1a;
--brand-presets-grey-9: #000000;
--brand-presets-grey-10: #000000;
}
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--brand-font-family);
font-size: var(--brand-font-size);
line-height: var(--brand-line-height);
color: var(--brand-color-text);
background: var(--brand-color-bg-layout);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--brand-color-link); text-decoration: none; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--display-family);
line-height: var(--brand-line-height-heading);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-text);
overflow-wrap: break-word;
}
p { margin: 0; overflow-wrap: break-word; }
img, svg { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.kicker {
display: block;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: var(--brand-font-size-sm);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-primary);
margin-bottom: var(--brand-size-sm);
}
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
a[role="button"]{transition:filter .15s ease,transform .15s ease}
a[role="button"]:hover{filter:brightness(1.07)}
a[role="button"]:active{filter:brightness(.95);transform:translateY(0.5px)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
details.kit-acc>summary{list-style:none;cursor:pointer}
details.kit-acc>summary::-webkit-details-marker{display:none}
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
</style>
</head>
<body>
<section style="max-width:1120px;margin:0 auto;padding:0 var(--brand-size-xl) var(--brand-size-xl);">
<h2 style="font-size:var(--brand-font-size-heading-3);margin-bottom:var(--brand-size-sm);color:var(--brand-color-text);">Files in this brand system</h2>
<ul style="columns:2;gap:var(--brand-size-xl);font-size:var(--brand-font-size);line-height:1.9;list-style:none;padding:0;margin:0;">
<li><a href="kit.html" style="color:var(--brand-color-link);text-decoration:none;">Component kit (light)</a></li>
<li><a href="kit.dark.html" style="color:var(--brand-color-link);text-decoration:none;">Component kit (dark)</a></li>
<li><a href="artifacts/landing.html" style="color:var(--brand-color-link);text-decoration:none;">Landing page</a></li>
<li><a href="artifacts/email.html" style="color:var(--brand-color-link);text-decoration:none;">Email</a></li>
<li><a href="artifacts/poster.html" style="color:var(--brand-color-link);text-decoration:none;">Poster</a></li>
<li><a href="tokens.default.json" style="color:var(--brand-color-link);text-decoration:none;">tokens.default.json</a></li>
<li><a href="tokens.dark.json" style="color:var(--brand-color-link);text-decoration:none;">tokens.dark.json</a></li>
<li><a href="tokens.compact.json" style="color:var(--brand-color-link);text-decoration:none;">tokens.compact.json</a></li>
<li><a href="variables.css" style="color:var(--brand-color-link);text-decoration:none;">variables.css</a></li>
<li><a href="theme.json" style="color:var(--brand-color-link);text-decoration:none;">theme.json (antd)</a></li>
<li><a href="seed.json" style="color:var(--brand-color-link);text-decoration:none;">seed.json</a></li>
<li><a href="BRAND-SYSTEM.md" style="color:var(--brand-color-link);text-decoration:none;">BRAND-SYSTEM.md</a></li>
</ul>
<p style="margin-top:var(--brand-size-lg);color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size-sm);">slug: <code>malenia</code> · everything derived from <code>seed.json</code></p>
</section>
<header style="max-width:1120px;margin:0 auto;padding:var(--brand-size-xxl) var(--brand-size-xl) var(--brand-size-lg);">
<h1 style="font-size:var(--brand-font-size-heading-1);margin-bottom:var(--brand-size-sm);">Malenia</h1>
<p style="color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);">Свобода. Практика. Простота.</p>
</header>
<section style="max-width:1120px;margin:0 auto;padding:0 var(--brand-size-xl) var(--brand-size-xxl);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--brand-size-lg);">
<figure style="margin:0;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;">
<figcaption style="padding:var(--brand-size-sm) var(--brand-size-md);font-weight:var(--brand-font-weight-strong);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);text-transform:capitalize;">landing</figcaption>
<div style="height:420px;overflow:hidden;background:var(--brand-color-bg-layout);">
<iframe
srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;style data-brand-fonts&gt;
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-600.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 600;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Tenor Sans&quot;;
src: url(&quot;../fonts/tenor-sans-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
&lt;/style&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
&lt;title&gt;Malenia — Свобода. Практика. Простота.&lt;/title&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&amp;amp;display=swap&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Tenor+Sans&amp;amp;display=swap&quot; /&gt;
&lt;style&gt;
:root {
--brand-color-primary: #c9a84c;
--brand-color-primary-bg: #fffef0;
--brand-color-primary-bg-hover: #fcfaed;
--brand-color-primary-border: #f0eace;
--brand-color-primary-border-hover: #e3d69f;
--brand-color-primary-hover: #d6bf74;
--brand-color-primary-active: #a38336;
--brand-color-primary-text: #573e14;
--brand-color-success: #52c41a;
--brand-color-success-bg: #f6ffed;
--brand-color-success-border: #b6eb8f;
--brand-color-success-hover: #72d13d;
--brand-color-success-active: #389e0d;
--brand-color-warning: #faad14;
--brand-color-warning-bg: #fffbe6;
--brand-color-warning-border: #ffe58f;
--brand-color-warning-hover: #ffc53d;
--brand-color-warning-active: #d48806;
--brand-color-error: #ff4d4f;
--brand-color-error-bg: #fff2f0;
--brand-color-error-border: #ffccc7;
--brand-color-error-hover: #ff7875;
--brand-color-error-active: #d9363d;
--brand-color-info: #c9a84c;
--brand-color-info-bg: #fffef0;
--brand-color-info-border: #f0eace;
--brand-color-link: #c9a84c;
--brand-color-link-hover: #d6bf74;
--brand-color-link-active: #a38336;
--brand-color-text: #35312b;
--brand-color-text-secondary: #68655f;
--brand-color-text-tertiary: #95928c;
--brand-color-text-quaternary: #c2bfba;
--brand-color-fill: #d8d5d0;
--brand-color-fill-secondary: #ede9e4;
--brand-color-fill-tertiary: #f1eee9;
--brand-color-fill-quaternary: #f6f3ed;
--brand-color-bg-layout: #f1eee9;
--brand-color-bg-container: #faf7f2;
--brand-color-bg-elevated: #faf7f2;
--brand-color-border: #d8d5d0;
--brand-color-border-secondary: #ede9e4;
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--brand-font-size: 14px;
--brand-font-size-sm: 12px;
--brand-font-size-lg: 18px;
--brand-font-size-xl: 22px;
--brand-font-size-heading-1: 38px;
--brand-font-size-heading-2: 32px;
--brand-font-size-heading-3: 26px;
--brand-font-size-heading-4: 22px;
--brand-font-size-heading-5: 18px;
--brand-line-height: 1.5714285714285714;
--brand-line-height-heading: 1.25;
--brand-font-weight-strong: 600;
--brand-size-xxs: 4px;
--brand-size-xs: 8px;
--brand-size-sm: 12px;
--brand-size: 16px;
--brand-size-md: 20px;
--brand-size-lg: 24px;
--brand-size-xl: 32px;
--brand-size-xxl: 48px;
--brand-border-radius-xs: 3px;
--brand-border-radius-sm: 5px;
--brand-border-radius: 8px;
--brand-border-radius-lg: 10px;
--brand-line-width: 1px;
--brand-control-height-xs: 16px;
--brand-control-height-sm: 24px;
--brand-control-height: 32px;
--brand-control-height-lg: 40px;
--brand-motion-duration-fast: 0.1s;
--brand-motion-duration-mid: 0.2s;
--brand-motion-duration-slow: 0.3s;
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--brand-primary-palette-1: #fffef0;
--brand-primary-palette-2: #fcfaed;
--brand-primary-palette-3: #f0eace;
--brand-primary-palette-4: #e3d69f;
--brand-primary-palette-5: #d6bf74;
--brand-primary-palette-6: #c9a84c;
--brand-primary-palette-7: #a38336;
--brand-primary-palette-8: #7d5f23;
--brand-primary-palette-9: #573e14;
--brand-primary-palette-10: #30210b;
--brand-presets-red-1: #fff1f0;
--brand-presets-red-2: #ffcbc7;
--brand-presets-red-3: #ffa39e;
--brand-presets-red-4: #ff7775;
--brand-presets-red-5: #ff4d50;
--brand-presets-red-6: #f5222d;
--brand-presets-red-7: #cf1323;
--brand-presets-red-8: #a8071a;
--brand-presets-red-9: #820014;
--brand-presets-red-10: #5c0011;
--brand-presets-volcano-1: #fff2e8;
--brand-presets-volcano-2: #ffd8bf;
--brand-presets-volcano-3: #ffbb96;
--brand-presets-volcano-4: #ff9c6e;
--brand-presets-volcano-5: #ff7a45;
--brand-presets-volcano-6: #fa541c;
--brand-presets-volcano-7: #d4380d;
--brand-presets-volcano-8: #ad2202;
--brand-presets-volcano-9: #871500;
--brand-presets-volcano-10: #610c00;
--brand-presets-orange-1: #fff7e6;
--brand-presets-orange-2: #ffe7ba;
--brand-presets-orange-3: #ffd591;
--brand-presets-orange-4: #ffc069;
--brand-presets-orange-5: #ffa940;
--brand-presets-orange-6: #fa8c16;
--brand-presets-orange-7: #d46b08;
--brand-presets-orange-8: #ad4e00;
--brand-presets-orange-9: #873800;
--brand-presets-orange-10: #612500;
--brand-presets-gold-1: #fffbe6;
--brand-presets-gold-2: #fff1b8;
--brand-presets-gold-3: #ffe58f;
--brand-presets-gold-4: #ffd666;
--brand-presets-gold-5: #ffc53d;
--brand-presets-gold-6: #faad14;
--brand-presets-gold-7: #d48806;
--brand-presets-gold-8: #ad6800;
--brand-presets-gold-9: #874c00;
--brand-presets-gold-10: #613400;
--brand-presets-yellow-1: #feffe6;
--brand-presets-yellow-2: #ffffb8;
--brand-presets-yellow-3: #fffb8f;
--brand-presets-yellow-4: #fff566;
--brand-presets-yellow-5: #ffeb3d;
--brand-presets-yellow-6: #fadb14;
--brand-presets-yellow-7: #d4b106;
--brand-presets-yellow-8: #ad8a00;
--brand-presets-yellow-9: #876700;
--brand-presets-yellow-10: #614700;
--brand-presets-lime-1: #fcffe6;
--brand-presets-lime-2: #f4ffb8;
--brand-presets-lime-3: #eaff8f;
--brand-presets-lime-4: #d3f261;
--brand-presets-lime-5: #bae637;
--brand-presets-lime-6: #a0d911;
--brand-presets-lime-7: #7bb305;
--brand-presets-lime-8: #5b8c00;
--brand-presets-lime-9: #3f6600;
--brand-presets-lime-10: #254000;
--brand-presets-green-1: #f6ffed;
--brand-presets-green-2: #d9f7be;
--brand-presets-green-3: #b6eb8f;
--brand-presets-green-4: #94de64;
--brand-presets-green-5: #72d13d;
--brand-presets-green-6: #52c41a;
--brand-presets-green-7: #389e0d;
--brand-presets-green-8: #227804;
--brand-presets-green-9: #135200;
--brand-presets-green-10: #092b00;
--brand-presets-cyan-1: #e6fffb;
--brand-presets-cyan-2: #b5f5ec;
--brand-presets-cyan-3: #87e8de;
--brand-presets-cyan-4: #5cdbd3;
--brand-presets-cyan-5: #36cfc9;
--brand-presets-cyan-6: #13c2c2;
--brand-presets-cyan-7: #08979c;
--brand-presets-cyan-8: #006d75;
--brand-presets-cyan-9: #00474f;
--brand-presets-cyan-10: #002329;
--brand-presets-blue-1: #e6f4ff;
--brand-presets-blue-2: #bae0ff;
--brand-presets-blue-3: #91caff;
--brand-presets-blue-4: #69b1ff;
--brand-presets-blue-5: #4096ff;
--brand-presets-blue-6: #1677ff;
--brand-presets-blue-7: #0958d9;
--brand-presets-blue-8: #003eb3;
--brand-presets-blue-9: #002c8c;
--brand-presets-blue-10: #001d66;
--brand-presets-geekblue-1: #f0f5ff;
--brand-presets-geekblue-2: #d6e4ff;
--brand-presets-geekblue-3: #adc6ff;
--brand-presets-geekblue-4: #85a5ff;
--brand-presets-geekblue-5: #597df7;
--brand-presets-geekblue-6: #2f54eb;
--brand-presets-geekblue-7: #1d39c4;
--brand-presets-geekblue-8: #10229e;
--brand-presets-geekblue-9: #061178;
--brand-presets-geekblue-10: #030852;
--brand-presets-purple-1: #f9f0ff;
--brand-presets-purple-2: #efdbff;
--brand-presets-purple-3: #d4adf7;
--brand-presets-purple-4: #b37feb;
--brand-presets-purple-5: #9254de;
--brand-presets-purple-6: #722ed1;
--brand-presets-purple-7: #531dab;
--brand-presets-purple-8: #391085;
--brand-presets-purple-9: #22075e;
--brand-presets-purple-10: #120338;
--brand-presets-magenta-1: #fff0f6;
--brand-presets-magenta-2: #ffd6e7;
--brand-presets-magenta-3: #ffadd2;
--brand-presets-magenta-4: #ff85bf;
--brand-presets-magenta-5: #f759aa;
--brand-presets-magenta-6: #eb2f96;
--brand-presets-magenta-7: #c41d7e;
--brand-presets-magenta-8: #9e1067;
--brand-presets-magenta-9: #780650;
--brand-presets-magenta-10: #520339;
--brand-presets-grey-1: #a6a6a6;
--brand-presets-grey-2: #999999;
--brand-presets-grey-3: #8c8c8c;
--brand-presets-grey-4: #808080;
--brand-presets-grey-5: #737373;
--brand-presets-grey-6: #666666;
--brand-presets-grey-7: #404040;
--brand-presets-grey-8: #1a1a1a;
--brand-presets-grey-9: #000000;
--brand-presets-grey-10: #000000;
}
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--brand-font-family);
font-size: var(--brand-font-size);
line-height: var(--brand-line-height);
color: var(--brand-color-text);
background: var(--brand-color-bg-layout);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--brand-color-link); text-decoration: none; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--display-family);
line-height: var(--brand-line-height-heading);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-text);
overflow-wrap: break-word;
}
p { margin: 0; overflow-wrap: break-word; }
img, svg { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.kicker {
display: block;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: var(--brand-font-size-sm);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-primary);
margin-bottom: var(--brand-size-sm);
}
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
a[role=&quot;button&quot;]{transition:filter .15s ease,transform .15s ease}
a[role=&quot;button&quot;]:hover{filter:brightness(1.07)}
a[role=&quot;button&quot;]:active{filter:brightness(.95);transform:translateY(0.5px)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
details.kit-acc&gt;summary{list-style:none;cursor:pointer}
details.kit-acc&gt;summary::-webkit-details-marker{display:none}
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
.nav-links { display: flex; gap: 28px; align-items: center; color: var(--brand-color-text-secondary); }
.nav-links a { color: var(--brand-color-text-secondary); transition: color .15s ease; }
.nav-links a:hover { color: var(--brand-color-text); }
@media (max-width: 820px) { .nav-links { display: none; } }
.section { padding: clamp(64px, 9vw, 104px) 0; }
.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.8vw, 20px); }
@media (max-width: 880px) { .problem-grid { grid-template-columns: 1fr; } }
.zig { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.zig + .zig { margin-top: clamp(48px, 7vw, 96px); }
@media (max-width: 880px) { .zig { grid-template-columns: 1fr; gap: 28px; } .zig .zig-visual { order: -1; } }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
.mock-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 300px; }
@media (max-width: 720px) { .mock-grid { grid-template-columns: minmax(0, 1fr); } .mock-side { display: none; } }
.hero-trust { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header style=&quot;position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--brand-color-bg-container) 86%, transparent);backdrop-filter:blur(12px);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);&quot;&gt;
&lt;div class=&quot;wrap&quot; style=&quot;display:flex;align-items:center;justify-content:space-between;height:64px;gap:var(--brand-size-lg);&quot;&gt;
&lt;span style=&quot;font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);letter-spacing:-0.01em;color:var(--brand-color-text);white-space:nowrap;&quot;&gt;Malenia&lt;/span&gt;
&lt;nav class=&quot;nav-links&quot;&gt;
&lt;a href=&quot;#how&quot;&gt;How it works&lt;/a&gt;
&lt;a href=&quot;#features&quot;&gt;Features&lt;/a&gt;
&lt;a href=&quot;#pricing&quot;&gt;Pricing&lt;/a&gt;
&lt;a href=&quot;#faq&quot;&gt;FAQ&lt;/a&gt;
&lt;/nav&gt;
&lt;div style=&quot;display:flex;gap:var(--brand-size-sm);align-items:center;&quot;&gt;
&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-text);border-color:transparent&quot;&gt;Sign in&lt;/a&gt;
&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-size:var(--brand-font-size-sm);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)&quot;&gt;Get started free&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;!-- 2 · HERO — the 5-piece value prop --&gt;
&lt;main&gt;
&lt;section class=&quot;wrap&quot; style=&quot;padding-top:clamp(56px, 9vw, 108px);text-align:center;&quot;&gt;
&lt;div style=&quot;max-width:860px;margin:0 auto;&quot;&gt;
&lt;span style=&quot;display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)&quot;&gt;Sophisticated · Quiet · Essential&lt;/span&gt;
&lt;h1 style=&quot;font-size:clamp(36px, 5.6vw, 64px);letter-spacing:-0.025em;line-height:1.06;margin:var(--brand-size-lg) auto var(--brand-size-md);max-width:18ch;&quot;&gt;Свобода. Практика. Простота.&lt;/h1&gt;
&lt;p style=&quot;font-size:var(--brand-font-size-xl);color:var(--brand-color-text-secondary);max-width:62ch;margin:0 auto var(--brand-size-xl);line-height:1.5;&quot;&gt;A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.&lt;/p&gt;
&lt;div style=&quot;display:flex;gap:var(--brand-size-sm);justify-content:center;flex-wrap:wrap;&quot;&gt;
&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)&quot;&gt;Get started free&lt;/a&gt;
&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-bg-container);color:var(--brand-color-text);border-color:var(--brand-color-border)&quot;&gt;See how it works&lt;/a&gt;
&lt;/div&gt;
&lt;p style=&quot;margin-top:var(--brand-size-md);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);&quot;&gt;Free plan · No credit card · 2-minute setup&lt;/p&gt;
&lt;/div&gt;
&lt;div style=&quot;max-width:980px;margin:clamp(40px, 6vw, 68px) auto 0;&quot;&gt;
&lt;div style=&quot;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:14px;overflow:hidden;background:var(--brand-color-bg-container);box-shadow:0 32px 80px -24px var(--brand-color-fill-secondary);&quot;&gt;
&lt;div style=&quot;display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);background:var(--brand-color-fill-quaternary);&quot;&gt;
&lt;span style=&quot;width:10px;height:10px;border-radius:50%;background:var(--brand-color-error);opacity:.55;&quot;&gt;&lt;/span&gt;
&lt;span style=&quot;width:10px;height:10px;border-radius:50%;background:var(--brand-color-warning);opacity:.55;&quot;&gt;&lt;/span&gt;
&lt;span style=&quot;width:10px;height:10px;border-radius:50%;background:var(--brand-color-success);opacity:.55;&quot;&gt;&lt;/span&gt;
&lt;span style=&quot;flex:1;max-width:380px;margin-left:12px;height:22px;border-radius:11px;background:var(--brand-color-fill-tertiary);display:flex;align-items:center;padding:0 12px;font-size:11px;color:var(--brand-color-text-quaternary);overflow:hidden;white-space:nowrap;&quot;&gt;malenia.space&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;mock-grid&quot;&gt;
&lt;div class=&quot;mock-side&quot; style=&quot;border-right:var(--brand-line-width) solid var(--brand-color-border-secondary);padding:16px 12px;display:flex;flex-direction:column;gap:4px;&quot;&gt;
&lt;div style=&quot;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--brand-border-radius-sm);background:var(--brand-color-primary-bg);&quot;&gt;
&lt;div style=&quot;width:14px;height:14px;border-radius:4px;background:var(--brand-color-primary);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;width:64%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;
&lt;/div&gt;&lt;div style=&quot;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--brand-border-radius-sm);&quot;&gt;
&lt;div style=&quot;width:14px;height:14px;border-radius:4px;background:var(--brand-color-fill);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;width:52%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;
&lt;/div&gt;&lt;div style=&quot;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--brand-border-radius-sm);&quot;&gt;
&lt;div style=&quot;width:14px;height:14px;border-radius:4px;background:var(--brand-color-fill);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;width:52%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;
&lt;/div&gt;&lt;div style=&quot;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--brand-border-radius-sm);&quot;&gt;
&lt;div style=&quot;width:14px;height:14px;border-radius:4px;background:var(--brand-color-fill);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;width:52%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;padding:20px;display:flex;flex-direction:column;gap:16px;min-width:0;&quot;&gt;
&lt;div style=&quot;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;&quot;&gt;
&lt;div style=&quot;width:180px;height:14px;border-radius:5px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;width:96px;height:28px;border-radius:var(--brand-border-radius);background:var(--brand-color-primary);&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;display:grid;grid-template-columns:1.4fr 1fr;gap:16px;flex:1;&quot;&gt;
&lt;div style=&quot;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:16px;display:flex;align-items:flex-end;gap:8px;min-height:160px;&quot;&gt;&lt;div style=&quot;flex:1;height:42%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-4);&quot;&gt;&lt;/div&gt;&lt;div style=&quot;flex:1;height:68%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-5);&quot;&gt;&lt;/div&gt;&lt;div style=&quot;flex:1;height:54%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-6);&quot;&gt;&lt;/div&gt;&lt;div style=&quot;flex:1;height:82%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-7);&quot;&gt;&lt;/div&gt;&lt;div style=&quot;flex:1;height:64%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-4);&quot;&gt;&lt;/div&gt;&lt;div style=&quot;flex:1;height:96%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-5);&quot;&gt;&lt;/div&gt;&lt;div style=&quot;flex:1;height:72%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-6);&quot;&gt;&lt;/div&gt;&lt;div style=&quot;flex:1;height:58%;border-radius:4px 4px 0 0;background:var(--brand-primary-palette-7);&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;gap:12px;&quot;&gt;
&lt;div style=&quot;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:14px;display:flex;flex-direction:column;gap:8px;&quot;&gt;&lt;div style=&quot;width:40%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;&lt;div style=&quot;width:70%;height:14px;border-radius:5px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div style=&quot;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:14px;display:flex;flex-direction:column;gap:8px;&quot;&gt;&lt;div style=&quot;width:46%;height:8px;border-radius:5px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;&lt;div style=&quot;width:60%;height:14px;border-radius:5px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- 3 · SOCIAL PROOF — hugs the hero --&gt;
&lt;section class=&quot;wrap&quot; style=&quot;padding:clamp(40px,6vw,64px) 0 8px;&quot;&gt;
&lt;div class=&quot;hero-trust&quot; style=&quot;margin-bottom:var(--brand-size-lg);&quot;&gt;
&lt;span style=&quot;color:var(--brand-color-warning);letter-spacing:2px;&quot;&gt;★★★★★&lt;/span&gt;
&lt;span style=&quot;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-secondary);&quot;&gt;Rated 4.9/5 by 12,000+ teams&lt;/span&gt;
&lt;/div&gt;
&lt;p style=&quot;text-align:center;text-transform:uppercase;letter-spacing:0.16em;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-quaternary);margin-bottom:var(--brand-size-lg);&quot;&gt;Trusted by teams at&lt;/p&gt;
&lt;div style=&quot;display:flex;justify-content:center;align-items:center;gap:clamp(24px,5vw,56px);flex-wrap:wrap;opacity:0.9;&quot;&gt;
&lt;span style=&quot;font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text-quaternary);letter-spacing:0.02em;white-space:nowrap;&quot;&gt;Northwind&lt;/span&gt;
&lt;span style=&quot;font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text-quaternary);letter-spacing:0.02em;white-space:nowrap;&quot;&gt;Lumen Labs&lt;/span&gt;
&lt;span style=&quot;font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text-quaternary);letter-spacing:0.02em;white-space:nowrap;&quot;&gt;Fieldnote&lt;/span&gt;
&lt;span style=&quot;font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text-quaternary);letter-spacing:0.02em;white-space:nowrap;&quot;&gt;Arcadia&lt;/span&gt;
&lt;span style=&quot;font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text-quaternary);letter-spacing:0.02em;white-space:nowrap;&quot;&gt;Helios&lt;/span&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- 4 · PROBLEM — PAS (P + A) --&gt;
&lt;section class=&quot;section&quot;&gt;
&lt;div class=&quot;wrap&quot;&gt;
&lt;div class=&quot;section-head&quot;&gt;
&lt;span class=&quot;kicker&quot;&gt;The problem&lt;/span&gt;
&lt;h2 style=&quot;font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);&quot;&gt;You're not slow. Your setup is.&lt;/h2&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);&quot;&gt;Sound familiar? The longer it goes unfixed, the more it quietly taxes everything Malenia is supposed to make easy.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;problem-grid&quot;&gt;
&lt;div style=&quot;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);&quot;&gt;
&lt;div style=&quot;display:flex;align-items:flex-start;gap:var(--brand-size-sm);&quot;&gt;
&lt;span style=&quot;flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--brand-color-error);&quot;&gt;&lt;/span&gt;
&lt;div&gt;
&lt;h3 style=&quot;font-size:var(--brand-font-size-lg);margin-bottom:var(--brand-size-xxs);&quot;&gt;Every deliverable starts from scratch&lt;/h3&gt;
&lt;p class=&quot;clamp-3&quot; style=&quot;color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size);&quot;&gt;So the same work gets redone, the backlog grows, and shipping slips by days.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);&quot;&gt;
&lt;div style=&quot;display:flex;align-items:flex-start;gap:var(--brand-size-sm);&quot;&gt;
&lt;span style=&quot;flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--brand-color-error);&quot;&gt;&lt;/span&gt;
&lt;div&gt;
&lt;h3 style=&quot;font-size:var(--brand-font-size-lg);margin-bottom:var(--brand-size-xxs);&quot;&gt;The tools don't talk to each other&lt;/h3&gt;
&lt;p class=&quot;clamp-3&quot; style=&quot;color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size);&quot;&gt;Context lives in five tabs, hand-offs break, and nobody trusts the source of truth.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);&quot;&gt;
&lt;div style=&quot;display:flex;align-items:flex-start;gap:var(--brand-size-sm);&quot;&gt;
&lt;span style=&quot;flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:9px;background:var(--brand-color-error);&quot;&gt;&lt;/span&gt;
&lt;div&gt;
&lt;h3 style=&quot;font-size:var(--brand-font-size-lg);margin-bottom:var(--brand-size-xxs);&quot;&gt;Quality drifts as you scale&lt;/h3&gt;
&lt;p class=&quot;clamp-3&quot; style=&quot;color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size);&quot;&gt;What looked sharp at ten people looks inconsistent at fifty — and customers notice.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- 5 · VALUE PILLARS — PAS (S), FAB so each shows the benefit --&gt;
&lt;section id=&quot;value&quot; class=&quot;section&quot; style=&quot;background:var(--brand-color-bg-container);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);&quot;&gt;
&lt;div class=&quot;wrap&quot;&gt;
&lt;div class=&quot;section-head&quot;&gt;
&lt;span class=&quot;kicker&quot;&gt;Why Malenia&lt;/span&gt;
&lt;h2 style=&quot;font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);&quot;&gt;Here's how that changes&lt;/h2&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);&quot;&gt;Three ways Malenia turns the daily grind into something you actually look forward to.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;pillars&quot;&gt;
&lt;div style=&quot;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);box-shadow:0 1px 2px var(--brand-color-fill-quaternary);display:flex;flex-direction:column;&quot;&gt;
&lt;div style=&quot;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);margin-bottom:var(--brand-size-md);&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; style=&quot;display:block;&quot;&gt;&lt;path d=&quot;M5 12l4 4 10-10&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;
&lt;h3 class=&quot;clamp-2&quot; style=&quot;font-size:var(--brand-font-size-heading-4);margin-bottom:var(--brand-size-xs);&quot;&gt;Network freedom&lt;/h3&gt;
&lt;p class=&quot;clamp-3&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Sophisticated by design — and built into every surface Malenia ships.&lt;/p&gt;
&lt;/div&gt;
&lt;div style=&quot;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);box-shadow:0 1px 2px var(--brand-color-fill-quaternary);display:flex;flex-direction:column;&quot;&gt;
&lt;div style=&quot;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);margin-bottom:var(--brand-size-md);&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; style=&quot;display:block;&quot;&gt;&lt;path d=&quot;M12 3v18M3 12h18&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;
&lt;h3 class=&quot;clamp-2&quot; style=&quot;font-size:var(--brand-font-size-heading-4);margin-bottom:var(--brand-size-xs);&quot;&gt;Practical simplicity&lt;/h3&gt;
&lt;p class=&quot;clamp-3&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Quiet by design — and built into every surface Malenia ships.&lt;/p&gt;
&lt;/div&gt;
&lt;div style=&quot;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);box-shadow:0 1px 2px var(--brand-color-fill-quaternary);display:flex;flex-direction:column;&quot;&gt;
&lt;div style=&quot;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);margin-bottom:var(--brand-size-md);&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; style=&quot;display:block;&quot;&gt;&lt;circle cx=&quot;11&quot; cy=&quot;11&quot; r=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;path d=&quot;M20 20l-4-4&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;
&lt;h3 class=&quot;clamp-2&quot; style=&quot;font-size:var(--brand-font-size-heading-4);margin-bottom:var(--brand-size-xs);&quot;&gt;Aesthetic restraint&lt;/h3&gt;
&lt;p class=&quot;clamp-3&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Essential by design — and built into every surface Malenia ships.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- 6 · HOW IT WORKS — 3 steps --&gt;
&lt;section id=&quot;how&quot; class=&quot;section&quot;&gt;
&lt;div class=&quot;wrap&quot;&gt;
&lt;div class=&quot;section-head&quot;&gt;
&lt;span class=&quot;kicker&quot;&gt;How it works&lt;/span&gt;
&lt;h2 style=&quot;font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);&quot;&gt;Up and running in three steps&lt;/h2&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);&quot;&gt;No migration project. No six-week rollout.&lt;/p&gt;
&lt;/div&gt;
&lt;div style=&quot;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(24px,4vw,48px);&quot;&gt;
&lt;div style=&quot;display:flex;flex-direction:column;gap:var(--brand-size-md);&quot;&gt;
&lt;div style=&quot;aspect-ratio:124/108;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-layout);padding:var(--brand-size-lg);&quot;&gt;&lt;svg viewBox=&quot;0 0 124 108&quot; width=&quot;100%&quot; height=&quot;100%&quot; preserveAspectRatio=&quot;xMidYMid meet&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;14&quot; y=&quot;40&quot; width=&quot;92&quot; height=&quot;9&quot; rx=&quot;4.5&quot; fill=&quot;var(--brand-color-border-secondary)&quot;/&gt;&lt;rect x=&quot;14&quot; y=&quot;58&quot; width=&quot;58&quot; height=&quot;9&quot; rx=&quot;4.5&quot; fill=&quot;var(--brand-color-border-secondary)&quot;/&gt;&lt;rect x=&quot;14&quot; y=&quot;80&quot; width=&quot;40&quot; height=&quot;14&quot; rx=&quot;7&quot; fill=&quot;var(--brand-color-primary)&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div style=&quot;display:flex;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);&quot;&gt;
&lt;span style=&quot;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--brand-color-primary);color:#fff;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);&quot;&gt;1&lt;/span&gt;
&lt;h3 style=&quot;font-size:var(--brand-font-size-heading-4);&quot;&gt;Connect&lt;/h3&gt;
&lt;/div&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);max-width:34ch;&quot;&gt;Point Malenia at what you already have — no rebuild required.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;gap:var(--brand-size-md);&quot;&gt;
&lt;div style=&quot;aspect-ratio:124/108;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-layout);padding:var(--brand-size-lg);&quot;&gt;&lt;svg viewBox=&quot;0 0 124 108&quot; width=&quot;100%&quot; height=&quot;100%&quot; preserveAspectRatio=&quot;xMidYMid meet&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;14&quot; y=&quot;38&quot; width=&quot;44&quot; height=&quot;38&quot; rx=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;var(--brand-color-border-secondary)&quot; stroke-width=&quot;2&quot;/&gt;&lt;rect x=&quot;66&quot; y=&quot;38&quot; width=&quot;44&quot; height=&quot;38&quot; rx=&quot;6&quot; fill=&quot;none&quot; stroke=&quot;var(--brand-color-primary)&quot; stroke-width=&quot;2&quot;/&gt;&lt;rect x=&quot;14&quot; y=&quot;84&quot; width=&quot;96&quot; height=&quot;9&quot; rx=&quot;4.5&quot; fill=&quot;var(--brand-color-border-secondary)&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div style=&quot;display:flex;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);&quot;&gt;
&lt;span style=&quot;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--brand-color-primary);color:#fff;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);&quot;&gt;2&lt;/span&gt;
&lt;h3 style=&quot;font-size:var(--brand-font-size-heading-4);&quot;&gt;Make it yours&lt;/h3&gt;
&lt;/div&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);max-width:34ch;&quot;&gt;Adjust the defaults until they fit the way your team works.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;gap:var(--brand-size-md);&quot;&gt;
&lt;div style=&quot;aspect-ratio:124/108;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-layout);padding:var(--brand-size-lg);&quot;&gt;&lt;svg viewBox=&quot;0 0 124 108&quot; width=&quot;100%&quot; height=&quot;100%&quot; preserveAspectRatio=&quot;xMidYMid meet&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M16 70l20 16 28-44&quot; fill=&quot;none&quot; stroke=&quot;var(--brand-color-primary)&quot; stroke-width=&quot;3&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;rect x=&quot;72&quot; y=&quot;44&quot; width=&quot;38&quot; height=&quot;9&quot; rx=&quot;4.5&quot; fill=&quot;var(--brand-color-border-secondary)&quot;/&gt;&lt;rect x=&quot;72&quot; y=&quot;64&quot; width=&quot;26&quot; height=&quot;9&quot; rx=&quot;4.5&quot; fill=&quot;var(--brand-color-border-secondary)&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;
&lt;div&gt;
&lt;div style=&quot;display:flex;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);&quot;&gt;
&lt;span style=&quot;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--brand-color-primary);color:#fff;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);&quot;&gt;3&lt;/span&gt;
&lt;h3 style=&quot;font-size:var(--brand-font-size-heading-4);&quot;&gt;Launch&lt;/h3&gt;
&lt;/div&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);max-width:34ch;&quot;&gt;Go live with confidence, then iterate from real feedback.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- recurring CTA (~every 1.5 screens) — calm, the loud one is reserved for module 11 --&gt;
&lt;section class=&quot;wrap&quot; style=&quot;padding:0 0 clamp(56px,8vw,88px);&quot;&gt;
&lt;div style=&quot;border:var(--brand-line-width) solid var(--brand-color-primary-border);background:var(--brand-color-primary-bg);border-radius:clamp(14px,2vw,20px);padding:clamp(24px,4vw,36px) clamp(24px,5vw,48px);display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-lg);flex-wrap:wrap;&quot;&gt;
&lt;div style=&quot;min-width:0;&quot;&gt;
&lt;h3 style=&quot;font-size:clamp(20px,2.4vw,26px);letter-spacing:-0.01em;&quot;&gt;See it on your own work in minutes&lt;/h3&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);margin-top:var(--brand-size-xxs);&quot;&gt;Free plan · No credit card · 2-minute setup&lt;/p&gt;
&lt;/div&gt;
&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)&quot;&gt;Get started free&lt;/a&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- 7 · FEATURES — zig-zag deep dive --&gt;
&lt;section id=&quot;features&quot; class=&quot;section&quot; style=&quot;background:var(--brand-color-bg-container);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);&quot;&gt;
&lt;div class=&quot;wrap&quot;&gt;
&lt;div class=&quot;section-head&quot;&gt;
&lt;span class=&quot;kicker&quot;&gt;A closer look&lt;/span&gt;
&lt;h2 style=&quot;font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);&quot;&gt;Built for the way real teams work&lt;/h2&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);&quot;&gt;Every capability earns its place — and translates to something you can feel.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;zig&quot;&gt;&lt;div&gt;
&lt;span class=&quot;kicker&quot;&gt;Capability 01&lt;/span&gt;
&lt;h3 style=&quot;font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);&quot;&gt;Secure from day one&lt;/h3&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);max-width:46ch;&quot;&gt;SSO, audit logs and granular permissions are built in, not bolted on.&lt;/p&gt;
&lt;div style=&quot;margin-top:var(--brand-size-lg);&quot;&gt;
&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent&quot;&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class=&quot;zig-visual&quot; style=&quot;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-container);box-shadow:0 8px 28px -16px var(--brand-color-fill-secondary);padding:var(--brand-size-xl);min-height:240px;display:flex;flex-direction:column;gap:var(--brand-size-md);&quot;&gt;
&lt;div style=&quot;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; style=&quot;display:block;&quot;&gt;&lt;path d=&quot;M4 13l5 5L20 6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;path d=&quot;M4 7l3 3&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;
&lt;div style=&quot;height:12px;width:70%;border-radius:6px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;height:12px;width:52%;border-radius:6px;background:var(--brand-color-fill-tertiary);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;margin-top:auto;display:flex;gap:var(--brand-size-sm);&quot;&gt;
&lt;div style=&quot;flex:1;height:64px;border-radius:var(--brand-border-radius);background:var(--brand-color-primary-bg);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;flex:1;height:64px;border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid var(--brand-color-border-secondary);&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;zig&quot;&gt;&lt;div class=&quot;zig-visual&quot; style=&quot;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-container);box-shadow:0 8px 28px -16px var(--brand-color-fill-secondary);padding:var(--brand-size-xl);min-height:240px;display:flex;flex-direction:column;gap:var(--brand-size-md);&quot;&gt;
&lt;div style=&quot;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; style=&quot;display:block;&quot;&gt;&lt;rect x=&quot;4&quot; y=&quot;4&quot; width=&quot;16&quot; height=&quot;16&quot; rx=&quot;3&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;path d=&quot;M9 12h6M12 9v6&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;
&lt;div style=&quot;height:12px;width:70%;border-radius:6px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;height:12px;width:52%;border-radius:6px;background:var(--brand-color-fill-tertiary);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;margin-top:auto;display:flex;gap:var(--brand-size-sm);&quot;&gt;
&lt;div style=&quot;flex:1;height:64px;border-radius:var(--brand-border-radius);background:var(--brand-color-primary-bg);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;flex:1;height:64px;border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid var(--brand-color-border-secondary);&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div&gt;
&lt;span class=&quot;kicker&quot;&gt;Capability 02&lt;/span&gt;
&lt;h3 style=&quot;font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);&quot;&gt;Works where you work&lt;/h3&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);max-width:46ch;&quot;&gt;Integrates with the tools your team already relies on every day.&lt;/p&gt;
&lt;div style=&quot;margin-top:var(--brand-size-lg);&quot;&gt;
&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent&quot;&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;zig&quot;&gt;&lt;div&gt;
&lt;span class=&quot;kicker&quot;&gt;Capability 03&lt;/span&gt;
&lt;h3 style=&quot;font-size:clamp(22px,2.6vw,30px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);&quot;&gt;Insight you can act on&lt;/h3&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);max-width:46ch;&quot;&gt;Reporting that reads like a story, not a spreadsheet.&lt;/p&gt;
&lt;div style=&quot;margin-top:var(--brand-size-lg);&quot;&gt;
&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:transparent;color:var(--brand-color-link);border-color:transparent&quot;&gt;Learn more&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class=&quot;zig-visual&quot; style=&quot;border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);background:var(--brand-color-bg-container);box-shadow:0 8px 28px -16px var(--brand-color-fill-secondary);padding:var(--brand-size-xl);min-height:240px;display:flex;flex-direction:column;gap:var(--brand-size-md);&quot;&gt;
&lt;div style=&quot;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--brand-color-primary-bg);color:var(--brand-color-primary);&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot; aria-hidden=&quot;true&quot; style=&quot;display:block;&quot;&gt;&lt;path d=&quot;M12 2l3 6 7 .9-5 4.7 1.3 6.9L12 18l-6.3 3.5L7 14.6 2 9.9 9 9z&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;
&lt;div style=&quot;height:12px;width:70%;border-radius:6px;background:var(--brand-color-fill-secondary);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;height:12px;width:52%;border-radius:6px;background:var(--brand-color-fill-tertiary);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;margin-top:auto;display:flex;gap:var(--brand-size-sm);&quot;&gt;
&lt;div style=&quot;flex:1;height:64px;border-radius:var(--brand-border-radius);background:var(--brand-color-primary-bg);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;flex:1;height:64px;border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid var(--brand-color-border-secondary);&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- 8 · PROOF — stat band + testimonials --&gt;
&lt;section style=&quot;background:var(--brand-color-primary);padding:clamp(48px,6vw,64px) 0;&quot;&gt;
&lt;div class=&quot;wrap&quot; style=&quot;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--brand-size-xl);&quot;&gt;
&lt;div style=&quot;text-align:center;&quot;&gt;
&lt;div style=&quot;font-family:var(--display-family);font-size:clamp(30px,3.6vw,46px);font-weight:var(--brand-font-weight-strong);line-height:1.05;color:#fff;letter-spacing:-0.02em;&quot;&gt;10k+&lt;/div&gt;
&lt;div style=&quot;margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:rgba(255,255,255,0.78);&quot;&gt;Teams onboard&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align:center;&quot;&gt;
&lt;div style=&quot;font-family:var(--display-family);font-size:clamp(30px,3.6vw,46px);font-weight:var(--brand-font-weight-strong);line-height:1.05;color:#fff;letter-spacing:-0.02em;&quot;&gt;99.9%&lt;/div&gt;
&lt;div style=&quot;margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:rgba(255,255,255,0.78);&quot;&gt;Uptime SLA&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align:center;&quot;&gt;
&lt;div style=&quot;font-family:var(--display-family);font-size:clamp(30px,3.6vw,46px);font-weight:var(--brand-font-weight-strong);line-height:1.05;color:#fff;letter-spacing:-0.02em;&quot;&gt;4.9/5&lt;/div&gt;
&lt;div style=&quot;margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:rgba(255,255,255,0.78);&quot;&gt;Average rating&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;text-align:center;&quot;&gt;
&lt;div style=&quot;font-family:var(--display-family);font-size:clamp(30px,3.6vw,46px);font-weight:var(--brand-font-weight-strong);line-height:1.05;color:#fff;letter-spacing:-0.02em;&quot;&gt;120+&lt;/div&gt;
&lt;div style=&quot;margin-top:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);color:rgba(255,255,255,0.78);&quot;&gt;Integrations&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;section&quot;&gt;
&lt;div class=&quot;wrap&quot;&gt;
&lt;div class=&quot;section-head&quot;&gt;
&lt;span class=&quot;kicker&quot;&gt;Proof&lt;/span&gt;
&lt;h2 style=&quot;font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);&quot;&gt;Loved by the teams who use it daily&lt;/h2&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);&quot;&gt;Real results, in their words — not ours.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;grid-3&quot;&gt;
&lt;div style=&quot;display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)&quot;&gt;&lt;div style=&quot;padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1&quot;&gt;&lt;p style=&quot;margin:0 0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);line-height:1.6;color:var(--brand-color-text)&quot;&gt;&amp;ldquo;Malenia is the first tool in this space that actually feels Sophisticated. It became part of our daily flow within a week.&amp;rdquo;&lt;/p&gt;
&lt;div style=&quot;display:flex;align-items:center;gap:var(--brand-size-sm);&quot;&gt;
&lt;span style=&quot;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height);height:var(--brand-control-height);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none&quot;&gt;MC&lt;/span&gt;
&lt;div style=&quot;min-width:0;&quot;&gt;
&lt;div style=&quot;font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);font-size:var(--brand-font-size);&quot;&gt;Maya Chen&lt;/div&gt;
&lt;div style=&quot;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);&quot;&gt;Head of Design, Northwind&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)&quot;&gt;&lt;div style=&quot;padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1&quot;&gt;&lt;p style=&quot;margin:0 0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);line-height:1.6;color:var(--brand-color-text)&quot;&gt;&amp;ldquo;We were skeptical, then we shipped our first project — genuinely Quiet — in a single afternoon. The team never looked back.&amp;rdquo;&lt;/p&gt;
&lt;div style=&quot;display:flex;align-items:center;gap:var(--brand-size-sm);&quot;&gt;
&lt;span style=&quot;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height);height:var(--brand-control-height);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none&quot;&gt;JW&lt;/span&gt;
&lt;div style=&quot;min-width:0;&quot;&gt;
&lt;div style=&quot;font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);font-size:var(--brand-font-size);&quot;&gt;Jonas Weber&lt;/div&gt;
&lt;div style=&quot;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);&quot;&gt;Engineering Lead, Lumen Labs&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;font-family:var(--brand-font-family);color:var(--brand-color-text);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)&quot;&gt;&lt;div style=&quot;padding:var(--brand-size-lg);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);flex:1&quot;&gt;&lt;p style=&quot;margin:0 0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);line-height:1.6;color:var(--brand-color-text)&quot;&gt;&amp;ldquo;The quality bar out of the box is what sold us. Свобода. Практика. Простота is not just a slogan here.&amp;rdquo;&lt;/p&gt;
&lt;div style=&quot;display:flex;align-items:center;gap:var(--brand-size-sm);&quot;&gt;
&lt;span style=&quot;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--brand-control-height);height:var(--brand-control-height);border-radius:50%;background:var(--brand-color-primary-bg);color:var(--brand-color-primary-text);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);letter-spacing:0.02em;user-select:none&quot;&gt;PN&lt;/span&gt;
&lt;div style=&quot;min-width:0;&quot;&gt;
&lt;div style=&quot;font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);font-size:var(--brand-font-size);&quot;&gt;Priya Natarajan&lt;/div&gt;
&lt;div style=&quot;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);&quot;&gt;Founder, Fieldnote&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- 9 · OBJECTION — FAQ --&gt;
&lt;section id=&quot;faq&quot; class=&quot;section&quot; style=&quot;background:var(--brand-color-bg-container);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);&quot;&gt;
&lt;div class=&quot;wrap&quot; style=&quot;max-width:780px;&quot;&gt;
&lt;div class=&quot;section-head&quot;&gt;
&lt;span class=&quot;kicker&quot;&gt;Before you ask&lt;/span&gt;
&lt;h2 style=&quot;font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);&quot;&gt;Your questions, answered&lt;/h2&gt;
&lt;/div&gt;
&lt;div&gt;&lt;details class=&quot;kit-acc&quot; open style=&quot;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)&quot;&gt;
&lt;summary style=&quot;display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)&quot;&gt;&lt;span style=&quot;min-width:0;&quot;&gt;What is Malenia?&lt;/span&gt;&lt;span class=&quot;kit-acc-icon&quot; style=&quot;flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400&quot;&gt;+&lt;/span&gt;&lt;/summary&gt;
&lt;div style=&quot;padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch&quot;&gt;A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.&lt;/div&gt;
&lt;/details&gt;
&lt;details class=&quot;kit-acc&quot; style=&quot;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)&quot;&gt;
&lt;summary style=&quot;display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)&quot;&gt;&lt;span style=&quot;min-width:0;&quot;&gt;How long does it take to get started?&lt;/span&gt;&lt;span class=&quot;kit-acc-icon&quot; style=&quot;flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400&quot;&gt;+&lt;/span&gt;&lt;/summary&gt;
&lt;div style=&quot;padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch&quot;&gt;Most teams are up and running in under an hour. There is nothing to install and no migration to plan — connect, customize, launch.&lt;/div&gt;
&lt;/details&gt;
&lt;details class=&quot;kit-acc&quot; style=&quot;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)&quot;&gt;
&lt;summary style=&quot;display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)&quot;&gt;&lt;span style=&quot;min-width:0;&quot;&gt;Can I try it before committing?&lt;/span&gt;&lt;span class=&quot;kit-acc-icon&quot; style=&quot;flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400&quot;&gt;+&lt;/span&gt;&lt;/summary&gt;
&lt;div style=&quot;padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch&quot;&gt;Yes. Start on the free plan, invite your team, and upgrade only when you need more. No credit card required.&lt;/div&gt;
&lt;/details&gt;
&lt;details class=&quot;kit-acc&quot; style=&quot;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)&quot;&gt;
&lt;summary style=&quot;display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)&quot;&gt;&lt;span style=&quot;min-width:0;&quot;&gt;How does pricing work?&lt;/span&gt;&lt;span class=&quot;kit-acc-icon&quot; style=&quot;flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400&quot;&gt;+&lt;/span&gt;&lt;/summary&gt;
&lt;div style=&quot;padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch&quot;&gt;Plans scale with your team. Start free, move to Pro when you need unlimited usage, and talk to us about Enterprise for custom needs.&lt;/div&gt;
&lt;/details&gt;
&lt;details class=&quot;kit-acc&quot; style=&quot;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary)&quot;&gt;
&lt;summary style=&quot;display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-md);padding:var(--brand-size-md) 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text)&quot;&gt;&lt;span style=&quot;min-width:0;&quot;&gt;What about security and privacy?&lt;/span&gt;&lt;span class=&quot;kit-acc-icon&quot; style=&quot;flex:0 0 auto;color:var(--brand-color-primary);font-size:var(--brand-font-size-xl);line-height:1;font-weight:400&quot;&gt;+&lt;/span&gt;&lt;/summary&gt;
&lt;div style=&quot;padding:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);max-width:70ch&quot;&gt;Your data stays yours. Access is encrypted in transit and at rest, and granular permissions keep the right things with the right people.&lt;/div&gt;
&lt;/details&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- 10 · PRICING — middle tier highlighted --&gt;
&lt;section id=&quot;pricing&quot; class=&quot;section&quot;&gt;
&lt;div class=&quot;wrap&quot;&gt;
&lt;div class=&quot;section-head&quot;&gt;
&lt;span class=&quot;kicker&quot;&gt;Pricing&lt;/span&gt;
&lt;h2 style=&quot;font-size:clamp(26px, 3.2vw, 38px);letter-spacing:-0.015em;margin-bottom:var(--brand-size-sm);&quot;&gt;Plans that scale with you&lt;/h2&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);&quot;&gt;Start free. Upgrade only when it earns it.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;grid-3&quot; style=&quot;max-width:1000px;margin:0 auto;&quot;&gt;
&lt;div style=&quot;display:flex;flex-direction:column;position:relative;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);font-family:var(--brand-font-family);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)&quot;&gt;
&lt;div style=&quot;display:flex;justify-content:space-between;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);&quot;&gt;
&lt;span style=&quot;font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text);&quot;&gt;Starter&lt;/span&gt;
&lt;/div&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-md);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);&quot;&gt;For trying things out.&lt;/p&gt;
&lt;div style=&quot;display:flex;align-items:baseline;gap:var(--brand-size-xxs);margin-bottom:var(--brand-size-lg);&quot;&gt;
&lt;span style=&quot;font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1;letter-spacing:-0.01em;&quot;&gt;$0&lt;/span&gt;
&lt;span style=&quot;color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size-sm);&quot;&gt;/ mo&lt;/span&gt;
&lt;/div&gt;
&lt;ul style=&quot;list-style:none;margin:0 0 var(--brand-size-xl);padding:0;flex:1;&quot;&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)&quot;&gt;&lt;span style=&quot;color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;&quot;&gt;&amp;#10003;&lt;/span&gt;&lt;span&gt;Up to 3 projects&lt;/span&gt;&lt;/li&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)&quot;&gt;&lt;span style=&quot;color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;&quot;&gt;&amp;#10003;&lt;/span&gt;&lt;span&gt;Network freedom&lt;/span&gt;&lt;/li&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)&quot;&gt;&lt;span style=&quot;color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;&quot;&gt;&amp;#10003;&lt;/span&gt;&lt;span&gt;Community support&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;div style=&quot;display:flex;flex-direction:column;&quot;&gt;&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-bg-container);color:var(--brand-color-text);border-color:var(--brand-color-border)&quot;&gt;Start for free&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;position:relative;background:var(--brand-color-bg-container);border:2px solid var(--brand-color-primary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);font-family:var(--brand-font-family);box-shadow:0 12px 32px var(--brand-color-primary-bg)&quot;&gt;
&lt;div style=&quot;display:flex;justify-content:space-between;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);&quot;&gt;
&lt;span style=&quot;font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text);&quot;&gt;Pro&lt;/span&gt;
&lt;span style=&quot;display:inline-flex;align-items:center;height:var(--brand-control-height-sm);padding:0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);line-height:1;color:var(--brand-color-primary);background:var(--brand-color-primary-bg);border:var(--brand-line-width) solid var(--brand-color-primary-border);border-radius:var(--brand-border-radius-sm)&quot;&gt;Most popular&lt;/span&gt;
&lt;/div&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-md);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);&quot;&gt;For growing teams.&lt;/p&gt;
&lt;div style=&quot;display:flex;align-items:baseline;gap:var(--brand-size-xxs);margin-bottom:var(--brand-size-lg);&quot;&gt;
&lt;span style=&quot;font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1;letter-spacing:-0.01em;&quot;&gt;$29&lt;/span&gt;
&lt;span style=&quot;color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size-sm);&quot;&gt;/ mo&lt;/span&gt;
&lt;/div&gt;
&lt;ul style=&quot;list-style:none;margin:0 0 var(--brand-size-xl);padding:0;flex:1;&quot;&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)&quot;&gt;&lt;span style=&quot;color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;&quot;&gt;&amp;#10003;&lt;/span&gt;&lt;span&gt;Unlimited projects&lt;/span&gt;&lt;/li&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)&quot;&gt;&lt;span style=&quot;color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;&quot;&gt;&amp;#10003;&lt;/span&gt;&lt;span&gt;Practical simplicity&lt;/span&gt;&lt;/li&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)&quot;&gt;&lt;span style=&quot;color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;&quot;&gt;&amp;#10003;&lt;/span&gt;&lt;span&gt;Aesthetic restraint&lt;/span&gt;&lt;/li&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)&quot;&gt;&lt;span style=&quot;color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;&quot;&gt;&amp;#10003;&lt;/span&gt;&lt;span&gt;Priority support&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;div style=&quot;display:flex;flex-direction:column;&quot;&gt;&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)&quot;&gt;Start free trial&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;position:relative;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:var(--brand-size-xl);font-family:var(--brand-font-family);box-shadow:0 1px 2px var(--brand-color-fill-quaternary)&quot;&gt;
&lt;div style=&quot;display:flex;justify-content:space-between;align-items:center;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xs);&quot;&gt;
&lt;span style=&quot;font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);color:var(--brand-color-text);&quot;&gt;Enterprise&lt;/span&gt;
&lt;/div&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-md);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);&quot;&gt;For organizations at scale.&lt;/p&gt;
&lt;div style=&quot;display:flex;align-items:baseline;gap:var(--brand-size-xxs);margin-bottom:var(--brand-size-lg);&quot;&gt;
&lt;span style=&quot;font-size:var(--brand-font-size-heading-2);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1;letter-spacing:-0.01em;&quot;&gt;Custom&lt;/span&gt;
&lt;/div&gt;
&lt;ul style=&quot;list-style:none;margin:0 0 var(--brand-size-xl);padding:0;flex:1;&quot;&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)&quot;&gt;&lt;span style=&quot;color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;&quot;&gt;&amp;#10003;&lt;/span&gt;&lt;span&gt;SSO &amp;amp; audit logs&lt;/span&gt;&lt;/li&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)&quot;&gt;&lt;span style=&quot;color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;&quot;&gt;&amp;#10003;&lt;/span&gt;&lt;span&gt;Dedicated success manager&lt;/span&gt;&lt;/li&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-xs);align-items:flex-start;padding:var(--brand-size-xxs) 0;font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary)&quot;&gt;&lt;span style=&quot;color:var(--brand-color-success);font-weight:var(--brand-font-weight-strong);flex:0 0 auto;&quot;&gt;&amp;#10003;&lt;/span&gt;&lt;span&gt;Custom contracts &amp;amp; SLA&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;
&lt;div style=&quot;display:flex;flex-direction:column;&quot;&gt;&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height);padding:0 var(--brand-size);font-size:var(--brand-font-size);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-bg-container);color:var(--brand-color-text);border-color:var(--brand-color-border)&quot;&gt;Talk to sales&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p style=&quot;text-align:center;margin-top:var(--brand-size-lg);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);&quot;&gt;All prices in USD · Cancel anytime · No credit card to start.&lt;/p&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/main&gt;
&lt;!-- 11 · FINAL CTA — the page's strongest accent --&gt;
&lt;section class=&quot;wrap&quot; style=&quot;padding-bottom:clamp(64px,9vw,104px);&quot;&gt;
&lt;div style=&quot;background:var(--brand-color-primary);border-radius:clamp(18px,2.4vw,28px);padding:clamp(48px,7vw,84px) clamp(24px,5vw,64px);text-align:center;position:relative;overflow:hidden;&quot;&gt;
&lt;div style=&quot;position:absolute;top:-100px;right:-90px;width:320px;height:320px;border-radius:50%;background:var(--brand-color-primary-hover);opacity:0.5;&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;position:absolute;bottom:-120px;left:-80px;width:260px;height:260px;border-radius:50%;background:var(--brand-color-primary-active);opacity:0.45;&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;position:relative;&quot;&gt;
&lt;h2 style=&quot;color:#fff;font-size:clamp(28px,4vw,46px);letter-spacing:-0.02em;line-height:1.08;margin-bottom:var(--brand-size-md);max-width:20ch;margin-left:auto;margin-right:auto;&quot;&gt;Start building with Malenia today&lt;/h2&gt;
&lt;p class=&quot;clamp-2&quot; style=&quot;color:rgba(255,255,255,0.88);font-size:var(--brand-font-size-lg);max-width:540px;margin:0 auto var(--brand-size-xl);&quot;&gt;Свобода. Практика. Простота.&lt;/p&gt;
&lt;div style=&quot;display:flex;gap:var(--brand-size-sm);justify-content:center;flex-wrap:wrap;&quot;&gt;
&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);background:#fff;color:var(--brand-color-primary);border:none;&quot;&gt;Get started free&lt;/a&gt;
&lt;a href=&quot;#&quot; style=&quot;display:inline-flex;align-items:center;height:var(--brand-control-height-lg);color:rgba(255,255,255,0.92);font-weight:var(--brand-font-weight-strong);padding:0 var(--brand-size-md);&quot;&gt;Talk to us &amp;rarr;&lt;/a&gt;
&lt;/div&gt;
&lt;p style=&quot;margin-top:var(--brand-size-md);font-size:var(--brand-font-size-sm);color:rgba(255,255,255,0.72);&quot;&gt;2-minute setup · Cancel anytime&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- 12 · FOOTER — grey, small, restrained --&gt;
&lt;footer style=&quot;background:var(--brand-color-bg-container);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);padding:clamp(48px,6vw,64px) 0 32px;&quot;&gt;
&lt;div class=&quot;wrap&quot;&gt;
&lt;div class=&quot;footer-cols&quot;&gt;
&lt;div&gt;
&lt;span style=&quot;font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);letter-spacing:-0.01em;color:var(--brand-color-text);white-space:nowrap;&quot;&gt;Malenia&lt;/span&gt;
&lt;p class=&quot;clamp-2&quot; style=&quot;color:var(--brand-color-text-tertiary);max-width:36ch;margin-top:var(--brand-size-sm);font-size:var(--brand-font-size-sm);&quot;&gt;A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div style=&quot;font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-sm);text-transform:uppercase;letter-spacing:0.08em;color:var(--brand-color-text-tertiary);margin-bottom:var(--brand-size-md);&quot;&gt;Product&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;gap:var(--brand-size-xs);&quot;&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;How it works&lt;/a&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Features&lt;/a&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Pricing&lt;/a&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Changelog&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div style=&quot;font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-sm);text-transform:uppercase;letter-spacing:0.08em;color:var(--brand-color-text-tertiary);margin-bottom:var(--brand-size-md);&quot;&gt;Company&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;gap:var(--brand-size-xs);&quot;&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Blog&lt;/a&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Careers&lt;/a&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Contact&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div style=&quot;font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-sm);text-transform:uppercase;letter-spacing:0.08em;color:var(--brand-color-text-tertiary);margin-bottom:var(--brand-size-md);&quot;&gt;Resources&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;gap:var(--brand-size-xs);&quot;&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Docs&lt;/a&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Support&lt;/a&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Status&lt;/a&gt;
&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-secondary);&quot;&gt;Privacy&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;display:flex;justify-content:space-between;align-items:center;gap:var(--brand-size-lg);flex-wrap:wrap;margin-top:48px;padding-top:var(--brand-size-lg);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);&quot;&gt;
&lt;span&gt;&amp;copy; Malenia &amp;middot; malenia.space&lt;/span&gt;
&lt;span&gt;Sophisticated · Quiet · Essential&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;"
sandbox=""
loading="lazy"
title="Malenia landing preview"
style="width:200%;height:840px;border:0;transform:scale(0.5);transform-origin:top left;"
></iframe>
</div>
</figure>
<figure style="margin:0;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;">
<figcaption style="padding:var(--brand-size-sm) var(--brand-size-md);font-weight:var(--brand-font-weight-strong);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);text-transform:capitalize;">deck</figcaption>
<div style="height:420px;overflow:hidden;background:var(--brand-color-bg-layout);">
<iframe
srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;style data-brand-fonts&gt;
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-600.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 600;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Tenor Sans&quot;;
src: url(&quot;../fonts/tenor-sans-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
&lt;/style&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
&lt;title&gt;Malenia — Pitch deck&lt;/title&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&amp;amp;display=swap&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Tenor+Sans&amp;amp;display=swap&quot; /&gt;
&lt;style&gt;
:root {
--brand-color-primary: #c9a84c;
--brand-color-primary-bg: #fffef0;
--brand-color-primary-bg-hover: #fcfaed;
--brand-color-primary-border: #f0eace;
--brand-color-primary-border-hover: #e3d69f;
--brand-color-primary-hover: #d6bf74;
--brand-color-primary-active: #a38336;
--brand-color-primary-text: #573e14;
--brand-color-success: #52c41a;
--brand-color-success-bg: #f6ffed;
--brand-color-success-border: #b6eb8f;
--brand-color-success-hover: #72d13d;
--brand-color-success-active: #389e0d;
--brand-color-warning: #faad14;
--brand-color-warning-bg: #fffbe6;
--brand-color-warning-border: #ffe58f;
--brand-color-warning-hover: #ffc53d;
--brand-color-warning-active: #d48806;
--brand-color-error: #ff4d4f;
--brand-color-error-bg: #fff2f0;
--brand-color-error-border: #ffccc7;
--brand-color-error-hover: #ff7875;
--brand-color-error-active: #d9363d;
--brand-color-info: #c9a84c;
--brand-color-info-bg: #fffef0;
--brand-color-info-border: #f0eace;
--brand-color-link: #c9a84c;
--brand-color-link-hover: #d6bf74;
--brand-color-link-active: #a38336;
--brand-color-text: #35312b;
--brand-color-text-secondary: #68655f;
--brand-color-text-tertiary: #95928c;
--brand-color-text-quaternary: #c2bfba;
--brand-color-fill: #d8d5d0;
--brand-color-fill-secondary: #ede9e4;
--brand-color-fill-tertiary: #f1eee9;
--brand-color-fill-quaternary: #f6f3ed;
--brand-color-bg-layout: #f1eee9;
--brand-color-bg-container: #faf7f2;
--brand-color-bg-elevated: #faf7f2;
--brand-color-border: #d8d5d0;
--brand-color-border-secondary: #ede9e4;
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--brand-font-size: 14px;
--brand-font-size-sm: 12px;
--brand-font-size-lg: 18px;
--brand-font-size-xl: 22px;
--brand-font-size-heading-1: 38px;
--brand-font-size-heading-2: 32px;
--brand-font-size-heading-3: 26px;
--brand-font-size-heading-4: 22px;
--brand-font-size-heading-5: 18px;
--brand-line-height: 1.5714285714285714;
--brand-line-height-heading: 1.25;
--brand-font-weight-strong: 600;
--brand-size-xxs: 4px;
--brand-size-xs: 8px;
--brand-size-sm: 12px;
--brand-size: 16px;
--brand-size-md: 20px;
--brand-size-lg: 24px;
--brand-size-xl: 32px;
--brand-size-xxl: 48px;
--brand-border-radius-xs: 3px;
--brand-border-radius-sm: 5px;
--brand-border-radius: 8px;
--brand-border-radius-lg: 10px;
--brand-line-width: 1px;
--brand-control-height-xs: 16px;
--brand-control-height-sm: 24px;
--brand-control-height: 32px;
--brand-control-height-lg: 40px;
--brand-motion-duration-fast: 0.1s;
--brand-motion-duration-mid: 0.2s;
--brand-motion-duration-slow: 0.3s;
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--brand-primary-palette-1: #fffef0;
--brand-primary-palette-2: #fcfaed;
--brand-primary-palette-3: #f0eace;
--brand-primary-palette-4: #e3d69f;
--brand-primary-palette-5: #d6bf74;
--brand-primary-palette-6: #c9a84c;
--brand-primary-palette-7: #a38336;
--brand-primary-palette-8: #7d5f23;
--brand-primary-palette-9: #573e14;
--brand-primary-palette-10: #30210b;
--brand-presets-red-1: #fff1f0;
--brand-presets-red-2: #ffcbc7;
--brand-presets-red-3: #ffa39e;
--brand-presets-red-4: #ff7775;
--brand-presets-red-5: #ff4d50;
--brand-presets-red-6: #f5222d;
--brand-presets-red-7: #cf1323;
--brand-presets-red-8: #a8071a;
--brand-presets-red-9: #820014;
--brand-presets-red-10: #5c0011;
--brand-presets-volcano-1: #fff2e8;
--brand-presets-volcano-2: #ffd8bf;
--brand-presets-volcano-3: #ffbb96;
--brand-presets-volcano-4: #ff9c6e;
--brand-presets-volcano-5: #ff7a45;
--brand-presets-volcano-6: #fa541c;
--brand-presets-volcano-7: #d4380d;
--brand-presets-volcano-8: #ad2202;
--brand-presets-volcano-9: #871500;
--brand-presets-volcano-10: #610c00;
--brand-presets-orange-1: #fff7e6;
--brand-presets-orange-2: #ffe7ba;
--brand-presets-orange-3: #ffd591;
--brand-presets-orange-4: #ffc069;
--brand-presets-orange-5: #ffa940;
--brand-presets-orange-6: #fa8c16;
--brand-presets-orange-7: #d46b08;
--brand-presets-orange-8: #ad4e00;
--brand-presets-orange-9: #873800;
--brand-presets-orange-10: #612500;
--brand-presets-gold-1: #fffbe6;
--brand-presets-gold-2: #fff1b8;
--brand-presets-gold-3: #ffe58f;
--brand-presets-gold-4: #ffd666;
--brand-presets-gold-5: #ffc53d;
--brand-presets-gold-6: #faad14;
--brand-presets-gold-7: #d48806;
--brand-presets-gold-8: #ad6800;
--brand-presets-gold-9: #874c00;
--brand-presets-gold-10: #613400;
--brand-presets-yellow-1: #feffe6;
--brand-presets-yellow-2: #ffffb8;
--brand-presets-yellow-3: #fffb8f;
--brand-presets-yellow-4: #fff566;
--brand-presets-yellow-5: #ffeb3d;
--brand-presets-yellow-6: #fadb14;
--brand-presets-yellow-7: #d4b106;
--brand-presets-yellow-8: #ad8a00;
--brand-presets-yellow-9: #876700;
--brand-presets-yellow-10: #614700;
--brand-presets-lime-1: #fcffe6;
--brand-presets-lime-2: #f4ffb8;
--brand-presets-lime-3: #eaff8f;
--brand-presets-lime-4: #d3f261;
--brand-presets-lime-5: #bae637;
--brand-presets-lime-6: #a0d911;
--brand-presets-lime-7: #7bb305;
--brand-presets-lime-8: #5b8c00;
--brand-presets-lime-9: #3f6600;
--brand-presets-lime-10: #254000;
--brand-presets-green-1: #f6ffed;
--brand-presets-green-2: #d9f7be;
--brand-presets-green-3: #b6eb8f;
--brand-presets-green-4: #94de64;
--brand-presets-green-5: #72d13d;
--brand-presets-green-6: #52c41a;
--brand-presets-green-7: #389e0d;
--brand-presets-green-8: #227804;
--brand-presets-green-9: #135200;
--brand-presets-green-10: #092b00;
--brand-presets-cyan-1: #e6fffb;
--brand-presets-cyan-2: #b5f5ec;
--brand-presets-cyan-3: #87e8de;
--brand-presets-cyan-4: #5cdbd3;
--brand-presets-cyan-5: #36cfc9;
--brand-presets-cyan-6: #13c2c2;
--brand-presets-cyan-7: #08979c;
--brand-presets-cyan-8: #006d75;
--brand-presets-cyan-9: #00474f;
--brand-presets-cyan-10: #002329;
--brand-presets-blue-1: #e6f4ff;
--brand-presets-blue-2: #bae0ff;
--brand-presets-blue-3: #91caff;
--brand-presets-blue-4: #69b1ff;
--brand-presets-blue-5: #4096ff;
--brand-presets-blue-6: #1677ff;
--brand-presets-blue-7: #0958d9;
--brand-presets-blue-8: #003eb3;
--brand-presets-blue-9: #002c8c;
--brand-presets-blue-10: #001d66;
--brand-presets-geekblue-1: #f0f5ff;
--brand-presets-geekblue-2: #d6e4ff;
--brand-presets-geekblue-3: #adc6ff;
--brand-presets-geekblue-4: #85a5ff;
--brand-presets-geekblue-5: #597df7;
--brand-presets-geekblue-6: #2f54eb;
--brand-presets-geekblue-7: #1d39c4;
--brand-presets-geekblue-8: #10229e;
--brand-presets-geekblue-9: #061178;
--brand-presets-geekblue-10: #030852;
--brand-presets-purple-1: #f9f0ff;
--brand-presets-purple-2: #efdbff;
--brand-presets-purple-3: #d4adf7;
--brand-presets-purple-4: #b37feb;
--brand-presets-purple-5: #9254de;
--brand-presets-purple-6: #722ed1;
--brand-presets-purple-7: #531dab;
--brand-presets-purple-8: #391085;
--brand-presets-purple-9: #22075e;
--brand-presets-purple-10: #120338;
--brand-presets-magenta-1: #fff0f6;
--brand-presets-magenta-2: #ffd6e7;
--brand-presets-magenta-3: #ffadd2;
--brand-presets-magenta-4: #ff85bf;
--brand-presets-magenta-5: #f759aa;
--brand-presets-magenta-6: #eb2f96;
--brand-presets-magenta-7: #c41d7e;
--brand-presets-magenta-8: #9e1067;
--brand-presets-magenta-9: #780650;
--brand-presets-magenta-10: #520339;
--brand-presets-grey-1: #a6a6a6;
--brand-presets-grey-2: #999999;
--brand-presets-grey-3: #8c8c8c;
--brand-presets-grey-4: #808080;
--brand-presets-grey-5: #737373;
--brand-presets-grey-6: #666666;
--brand-presets-grey-7: #404040;
--brand-presets-grey-8: #1a1a1a;
--brand-presets-grey-9: #000000;
--brand-presets-grey-10: #000000;
}
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--brand-font-family);
font-size: var(--brand-font-size);
line-height: var(--brand-line-height);
color: var(--brand-color-text);
background: var(--brand-color-bg-layout);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--brand-color-link); text-decoration: none; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--display-family);
line-height: var(--brand-line-height-heading);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-text);
overflow-wrap: break-word;
}
p { margin: 0; overflow-wrap: break-word; }
img, svg { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.kicker {
display: block;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: var(--brand-font-size-sm);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-primary);
margin-bottom: var(--brand-size-sm);
}
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
a[role=&quot;button&quot;]{transition:filter .15s ease,transform .15s ease}
a[role=&quot;button&quot;]:hover{filter:brightness(1.07)}
a[role=&quot;button&quot;]:active{filter:brightness(.95);transform:translateY(0.5px)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
details.kit-acc&gt;summary{list-style:none;cursor:pointer}
details.kit-acc&gt;summary::-webkit-details-marker{display:none}
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
html, body { height: 100%; overflow: hidden; }
.deck { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scroll-behavior: smooth; }
.slide { height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; padding: 24px; }
.frame {
position: relative; aspect-ratio: 16 / 9;
width: min(1280px, 94vw, calc((100vh - 48px) * 16 / 9));
container-type: size;
background: var(--brand-color-bg-container);
border: var(--brand-line-width) solid var(--brand-color-border-secondary);
border-radius: var(--brand-border-radius-lg);
box-shadow: 0 24px 64px -24px var(--brand-color-fill-secondary), 0 2px 8px var(--brand-color-fill-quaternary);
overflow: hidden; display: flex; flex-direction: column;
}
/* solid-accent slides (cover + traction + ask): restrained 3-page accent budget */
.frame--accent { background: var(--brand-color-primary); border-color: transparent; }
.frame--accent .s-kicker { color: rgba(255,255,255,0.72); }
.frame--accent .s-kicker::before { background: rgba(255,255,255,0.85); }
.frame--accent .s-title, .frame--accent .s-mega, .frame--accent .s-num { color: #fff; }
.frame--accent .s-lede, .frame--accent .s-eyebrow { color: rgba(255,255,255,0.85); }
.frame--accent .f-head, .frame--accent .f-foot { color: rgba(255,255,255,0.62); }
.frame--accent .f-head .rule, .frame--accent .f-foot .rule { background: rgba(255,255,255,0.2); }
/* surface slides (alternate bg per §3 视觉一致) */
.frame--surface { background: var(--brand-color-bg-layout); }
.f-head { display: flex; justify-content: space-between; align-items: center; gap: 2cqi; padding: 3cqi 5cqi 0; color: var(--brand-color-text-quaternary); font-size: 1.35cqi; }
.f-head .wm { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 1.7cqi; letter-spacing: -0.01em; color: inherit; }
.f-head .rule { flex: 1; height: var(--brand-line-width); background: var(--brand-color-border-secondary); }
.f-head .ix { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; }
.f-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 5cqi; min-height: 0; overflow: hidden; }
/* shrink-to-fit layer: the runtime scales this down about its centre when
a slide's content would otherwise exceed the fixed frame (no-clip).
flex:none keeps its natural (unshrunk) height so the runtime can
measure the true overflow instead of a flex-shrunk box. */
.f-fit { flex: none; width: 100%; transform-origin: center center; will-change: transform; }
.f-foot { display: flex; justify-content: space-between; align-items: center; gap: 2cqi; padding: 0 5cqi 3cqi; color: var(--brand-color-text-quaternary); font-size: 1.25cqi; }
.f-foot .rule { flex: 1; height: var(--brand-line-width); background: var(--brand-color-border-secondary); }
.s-kicker { display: inline-flex; align-items: center; gap: 1.1cqi; text-transform: uppercase; letter-spacing: 0.18em; font-size: 1.3cqi; color: var(--brand-color-primary); font-weight: var(--brand-font-weight-strong); margin-bottom: 2cqi; }
.s-kicker::before { content: &quot;&quot;; width: 2.6cqi; height: 0.32cqi; border-radius: 1cqi; background: var(--brand-color-primary); }
.s-eyebrow { font-size: 1.7cqi; color: var(--brand-color-text-tertiary); margin: 0 0 1.6cqi; max-width: 70cqi; }
.s-title { font-family: var(--display-family); font-size: 4.6cqi; line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: var(--brand-color-text); max-width: 82cqi; }
.s-mega { font-family: var(--display-family); font-size: 8cqi; line-height: 1.02; letter-spacing: -0.025em; margin: 0; color: var(--brand-color-text); }
.s-lede { font-size: 1.95cqi; line-height: 1.5; color: var(--brand-color-text-secondary); max-width: 66cqi; margin: 2.4cqi 0 0; }
.s-accent { color: var(--brand-color-primary); }
.frame--accent .s-accent { color: #fff; }
.s-grid { display: grid; gap: 2cqi; margin-top: 4cqi; }
.s-card { position: relative; background: var(--brand-color-bg-container); border: var(--brand-line-width) solid var(--brand-color-border-secondary); border-radius: 1.4cqi; padding: 2.6cqi; min-width: 0; }
.frame--surface .s-card { background: var(--brand-color-bg-container); }
.s-card h3 { font-size: 2cqi; line-height: 1.22; margin: 0 0 1cqi; letter-spacing: -0.01em; }
.s-card p { font-size: 1.55cqi; line-height: 1.5; color: var(--brand-color-text-secondary); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.s-card .tick { display: inline-flex; align-items: center; justify-content: center; width: 3.4cqi; height: 3.4cqi; border-radius: 1cqi; background: var(--brand-color-primary-bg); color: var(--brand-color-primary); margin-bottom: 1.6cqi; }
.s-card .tick svg { width: 1.9cqi; height: 1.9cqi; }
.s-num { font-family: var(--display-family); font-size: 3.4cqi; font-weight: var(--brand-font-weight-strong); line-height: 1; color: var(--brand-color-primary); margin-bottom: 1.4cqi; letter-spacing: -0.02em; }
/* metric tiles (market / traction) */
.s-metric { min-width: 0; }
.s-metric .v { font-family: var(--display-family); font-size: 5cqi; font-weight: var(--brand-font-weight-strong); line-height: 1; letter-spacing: -0.03em; color: var(--brand-color-text); }
.frame--accent .s-metric .v { color: #fff; }
.s-metric .l { margin-top: 1.2cqi; font-size: 1.5cqi; line-height: 1.35; color: var(--brand-color-text-tertiary); }
.frame--accent .s-metric .l { color: rgba(255,255,255,0.78); }
/* market funnel bars — value labels live OUTSIDE the proportional track in
their own auto column, so a long label can never wrap/clip the bar. */
.s-bars { display: flex; flex-direction: column; gap: 1.8cqi; margin-top: 3.4cqi; max-width: 82cqi; }
.s-bar { display: grid; grid-template-columns: 12cqi 1fr auto; align-items: center; gap: 2cqi; }
.s-bar .tag { font-size: 1.5cqi; font-weight: var(--brand-font-weight-strong); color: var(--brand-color-text-secondary); letter-spacing: 0.04em; }
.s-bar .lane { min-width: 0; }
.s-bar .track { height: 4.2cqi; border-radius: 0.8cqi; }
.s-bar .val { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 1.9cqi; color: var(--brand-color-text); white-space: nowrap; }
.frame--accent .s-bar .val { color: #fff; }
/* competition matrix */
.s-matrix { display: grid; gap: 1.6cqi; margin-top: 3.4cqi; }
.s-matrix .row { display: grid; align-items: center; gap: 1.6cqi; padding: 1.8cqi 2.4cqi; border-radius: 1.2cqi; }
.s-matrix .row.head { color: var(--brand-color-text-tertiary); font-size: 1.4cqi; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 0; padding-bottom: 0; }
.s-matrix .row.them { background: var(--brand-color-bg-container); border: var(--brand-line-width) solid var(--brand-color-border-secondary); }
.s-matrix .row.us { background: var(--brand-color-primary-bg); border: 1.5px solid var(--brand-color-primary-border); }
.s-matrix .cell { font-size: 1.6cqi; min-width: 0; }
.s-matrix .who { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 1.85cqi; letter-spacing: -0.01em; }
.s-matrix .us .who { color: var(--brand-color-primary); }
.s-matrix .mk { display: inline-flex; align-items: center; justify-content: center; width: 3cqi; height: 3cqi; border-radius: 50%; }
.s-matrix .mk svg { width: 1.7cqi; height: 1.7cqi; }
.s-matrix .yes { background: var(--brand-color-primary); color: #fff; }
.s-matrix .no { background: var(--brand-color-fill-tertiary); color: var(--brand-color-text-quaternary); }
/* team initials */
.s-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqi; margin-top: 4cqi; }
.s-avatar { display: inline-flex; align-items: center; justify-content: center; width: 7cqi; height: 7cqi; border-radius: 50%; font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 2.6cqi; background: var(--brand-color-primary-bg); color: var(--brand-color-primary); margin-bottom: 1.6cqi; letter-spacing: 0.02em; }
/* quote / why-now */
.s-quote { font-family: var(--display-family); font-size: 3.4cqi; line-height: 1.32; letter-spacing: -0.015em; color: var(--brand-color-text); max-width: 80cqi; margin: 0; }
.s-byline { display: flex; align-items: center; gap: 1.8cqi; margin-top: 3.6cqi; }
.s-byline .av { display: inline-flex; align-items: center; justify-content: center; width: 4.6cqi; height: 4.6cqi; border-radius: 50%; background: var(--brand-color-primary-bg); color: var(--brand-color-primary); font-weight: var(--brand-font-weight-strong); font-size: 1.7cqi; }
.s-byline .n { font-weight: var(--brand-font-weight-strong); font-size: 1.75cqi; color: var(--brand-color-text); }
.s-byline .r { font-size: 1.45cqi; color: var(--brand-color-text-tertiary); }
/* ask checklist */
.s-ask { display: flex; flex-direction: column; gap: 1.8cqi; margin-top: 3.6cqi; max-width: 70cqi; }
.s-ask .item { display: flex; align-items: flex-start; gap: 1.8cqi; font-size: 2cqi; line-height: 1.4; color: #fff; }
.s-ask .item .b { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3.4cqi; height: 3.4cqi; border-radius: 0.9cqi; background: rgba(255,255,255,0.16); margin-top: 0.2cqi; }
.s-ask .item .b svg { width: 1.9cqi; height: 1.9cqi; }
.s-ask .item .k { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); }
.s-cta { display: inline-flex; align-items: center; gap: 1.4cqi; margin-top: 4cqi; height: 6cqi; padding: 0 3.4cqi; border-radius: 1.2cqi; background: #fff; color: var(--brand-color-primary); font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 2.1cqi; letter-spacing: -0.01em; }
.s-cta svg { width: 2cqi; height: 2cqi; }
/* product wireframe motif (div/SVG, no screenshots) */
.s-screen { margin-top: 3.6cqi; border-radius: 1.6cqi; border: var(--brand-line-width) solid var(--brand-color-border-secondary); background: var(--brand-color-bg-container); overflow: hidden; box-shadow: 0 12px 32px -16px var(--brand-color-fill-secondary); }
.s-screen .bar { display: flex; align-items: center; gap: 1cqi; padding: 1.4cqi 1.8cqi; border-bottom: var(--brand-line-width) solid var(--brand-color-border-secondary); }
.s-screen .bar i { width: 1.2cqi; height: 1.2cqi; border-radius: 50%; background: var(--brand-color-fill-tertiary); }
.s-screen .bar .url { margin-left: 1cqi; height: 2.4cqi; flex: 1; max-width: 36cqi; border-radius: 1cqi; background: var(--brand-color-fill-quaternary); }
.s-screen .canvas { display: grid; grid-template-columns: 16cqi 1fr; min-height: 22cqi; }
.s-screen .nav { border-right: var(--brand-line-width) solid var(--brand-color-border-secondary); padding: 2cqi 1.6cqi; display: flex; flex-direction: column; gap: 1.4cqi; }
.s-screen .nav span { height: 1.5cqi; border-radius: 1cqi; background: var(--brand-color-fill-quaternary); }
.s-screen .nav span:first-child { background: var(--brand-color-primary); width: 70%; }
.s-screen .main { padding: 2.4cqi; display: flex; flex-direction: column; gap: 1.6cqi; }
.s-screen .main .h { height: 3cqi; width: 44%; border-radius: 0.8cqi; background: var(--brand-color-fill-tertiary); }
.s-screen .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqi; }
.s-screen .tiles i { height: 9cqi; border-radius: 1.2cqi; background: var(--brand-color-fill-quaternary); border: var(--brand-line-width) solid var(--brand-color-border-secondary); }
.s-screen .tiles i:first-child { background: var(--brand-color-primary-bg); border-color: var(--brand-color-primary-border); }
/* solution: oversized signature line */
.s-pillars { display: flex; flex-wrap: wrap; gap: 1.2cqi; margin-top: 3.6cqi; }
.s-pill { display: inline-flex; align-items: center; gap: 1cqi; padding: 1.2cqi 2cqi; border-radius: 6cqi; border: var(--brand-line-width) solid var(--brand-color-border); font-size: 1.6cqi; font-weight: var(--brand-font-weight-strong); color: var(--brand-color-text-secondary); }
.s-pill .dot { width: 1cqi; height: 1cqi; border-radius: 50%; background: var(--brand-color-primary); }
/* pager UI */
.deck-ui { position: fixed; right: 24px; bottom: 20px; z-index: 30; display: flex; align-items: center; gap: 10px; }
.deck-ui button {
width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
border: var(--brand-line-width) solid var(--brand-color-border);
background: var(--brand-color-bg-container); color: var(--brand-color-text-secondary);
font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
transition: border-color .15s ease, color .15s ease;
}
.deck-ui button:hover { border-color: var(--brand-color-primary); color: var(--brand-color-primary); }
.deck-counter { font-size: 12px; color: var(--brand-color-text-tertiary); font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; letter-spacing: 0.04em; }
.deck-dots { position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 30; display: flex; gap: 8px; }
.deck-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-color-fill); cursor: pointer; transition: all .2s ease; }
.deck-dot.on { background: var(--brand-color-primary); transform: scale(1.3); }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;main class=&quot;deck&quot;&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame frame--accent&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;SOPHISTICATED · QUIET · ESSENTIAL&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;Sophisticated · Quiet · Essential&lt;/span&gt;
&lt;h1 class=&quot;s-mega&quot;&gt;Malenia&lt;/h1&gt;
&lt;p class=&quot;s-lede&quot; style=&quot;font-size:2.6cqi;color:rgba(255,255,255,0.92);&quot;&gt;Свобода. Практика. Простота.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;01 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame frame--surface&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;THE PROBLEM&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;The problem&lt;/span&gt;
&lt;h2 class=&quot;s-title&quot;&gt;Getting this category right is still painfully hard.&lt;/h2&gt;
&lt;p class=&quot;s-lede&quot;&gt;A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.&lt;/p&gt;
&lt;div class=&quot;s-grid&quot; style=&quot;grid-template-columns:repeat(3,1fr);&quot;&gt;
&lt;div class=&quot;s-card&quot;&gt;&lt;span class=&quot;tick&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6 6 18&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;h3&gt;Tools don't talk&lt;/h3&gt;&lt;p&gt;Work scatters across apps that never share a source of truth, so context is lost on every handoff.&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;s-card&quot;&gt;&lt;span class=&quot;tick&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6 6 18&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;h3&gt;Every loop costs a day&lt;/h3&gt;&lt;p&gt;Iteration stalls in coordination — approvals, exports, re-dos — long before anything ships.&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;s-card&quot;&gt;&lt;span class=&quot;tick&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6 6 18&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;h3&gt;Quality is a coin flip&lt;/h3&gt;&lt;p&gt;Output depends on whoever happened to do the work, not on a standard you can rely on.&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;02 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;THE SOLUTION&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;The solution&lt;/span&gt;
&lt;h2 class=&quot;s-title&quot;&gt;&lt;span class=&quot;s-accent&quot;&gt;Malenia&lt;/span&gt; is how teams get свобода. Практика. Простота&lt;/h2&gt;
&lt;div class=&quot;s-pillars&quot;&gt;
&lt;span class=&quot;s-pill&quot;&gt;&lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;Network freedom&lt;/span&gt;
&lt;span class=&quot;s-pill&quot;&gt;&lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;Practical simplicity&lt;/span&gt;
&lt;span class=&quot;s-pill&quot;&gt;&lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;Aesthetic restraint&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;03 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;WHY NOW&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;Why now&lt;/span&gt;
&lt;p class=&quot;s-quote&quot;&gt;The shift toward &lt;span class=&quot;s-accent&quot;&gt;sophisticated&lt;/span&gt;, accountable this category is happening now — and the teams that move first set the standard.&lt;/p&gt;
&lt;div class=&quot;s-byline&quot;&gt;
&lt;span class=&quot;av&quot;&gt;M&lt;/span&gt;
&lt;div&gt;&lt;div class=&quot;n&quot;&gt;Malenia&lt;/div&gt;&lt;div class=&quot;r&quot;&gt;malenia.space&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;04 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame frame--surface&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;MARKET&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;Market&lt;/span&gt;
&lt;h2 class=&quot;s-title&quot;&gt;The opportunity is large and still wide open.&lt;/h2&gt;
&lt;div class=&quot;s-bars&quot;&gt;
&lt;div class=&quot;s-bar&quot;&gt;&lt;span class=&quot;tag&quot;&gt;TAM&lt;/span&gt;
&lt;div class=&quot;lane&quot;&gt;&lt;div class=&quot;track&quot; style=&quot;width:100%;background:var(--brand-color-primary);&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;span class=&quot;val&quot;&gt;$48B total market&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;s-bar&quot;&gt;&lt;span class=&quot;tag&quot;&gt;SAM&lt;/span&gt;
&lt;div class=&quot;lane&quot;&gt;&lt;div class=&quot;track&quot; style=&quot;width:64%;background:var(--brand-color-primary-hover);&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;span class=&quot;val&quot;&gt;$12B reachable today&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;s-bar&quot;&gt;&lt;span class=&quot;tag&quot;&gt;SOM&lt;/span&gt;
&lt;div class=&quot;lane&quot;&gt;&lt;div class=&quot;track&quot; style=&quot;width:30%;background:var(--brand-color-primary-active);&quot;&gt;&lt;/div&gt;&lt;/div&gt;
&lt;span class=&quot;val&quot;&gt;$1.4B near-term wedge&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;05 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;PRODUCT&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;Product&lt;/span&gt;
&lt;h2 class=&quot;s-title&quot;&gt;Malenia is real, shipping, and good to use today.&lt;/h2&gt;
&lt;div class=&quot;s-screen&quot;&gt;
&lt;div class=&quot;bar&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;span class=&quot;url&quot;&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;canvas&quot;&gt;
&lt;div class=&quot;nav&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;main&quot;&gt;&lt;div class=&quot;h&quot;&gt;&lt;/div&gt;&lt;div class=&quot;tiles&quot;&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;i&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;06 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame frame--surface&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;BUSINESS MODEL&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;Business model&lt;/span&gt;
&lt;h2 class=&quot;s-title&quot;&gt;We make money the moment we create value.&lt;/h2&gt;
&lt;div class=&quot;s-grid&quot; style=&quot;grid-template-columns:repeat(3,1fr);&quot;&gt;
&lt;div class=&quot;s-card&quot;&gt;
&lt;h3&gt;Starter&lt;/h3&gt;
&lt;div style=&quot;font-family:var(--display-family);font-size:3.4cqi;font-weight:var(--brand-font-weight-strong);letter-spacing:-0.02em;color:var(--brand-color-text);margin:0.6cqi 0 1.4cqi;&quot;&gt;$0&lt;span style=&quot;font-size:1.3cqi;color:var(--brand-color-text-tertiary);font-weight:400;&quot;&gt; / mo&lt;/span&gt;&lt;/div&gt;
&lt;p style=&quot;-webkit-line-clamp:3;&quot;&gt;Up to 3 projects · Network freedom · Community support&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;s-card&quot; style=&quot;border-color:var(--brand-color-primary);border-width:1.5px;&quot;&gt;
&lt;h3&gt;Pro&lt;/h3&gt;
&lt;div style=&quot;font-family:var(--display-family);font-size:3.4cqi;font-weight:var(--brand-font-weight-strong);letter-spacing:-0.02em;color:var(--brand-color-text);margin:0.6cqi 0 1.4cqi;&quot;&gt;$29&lt;span style=&quot;font-size:1.3cqi;color:var(--brand-color-text-tertiary);font-weight:400;&quot;&gt; / mo&lt;/span&gt;&lt;/div&gt;
&lt;p style=&quot;-webkit-line-clamp:3;&quot;&gt;Unlimited projects · Practical simplicity · Aesthetic restraint&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;s-card&quot;&gt;
&lt;h3&gt;Enterprise&lt;/h3&gt;
&lt;div style=&quot;font-family:var(--display-family);font-size:3.4cqi;font-weight:var(--brand-font-weight-strong);letter-spacing:-0.02em;color:var(--brand-color-text);margin:0.6cqi 0 1.4cqi;&quot;&gt;Custom&lt;span style=&quot;font-size:1.3cqi;color:var(--brand-color-text-tertiary);font-weight:400;&quot;&gt; &lt;/span&gt;&lt;/div&gt;
&lt;p style=&quot;-webkit-line-clamp:3;&quot;&gt;SSO &amp;amp; audit logs · Dedicated success manager · Custom contracts &amp;amp; SLA&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;07 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;COMPETITION &amp;amp; MOAT&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;Competition &amp;amp; moat&lt;/span&gt;
&lt;h2 class=&quot;s-title&quot;&gt;Only Malenia is built sophisticated from the ground up.&lt;/h2&gt;
&lt;div class=&quot;s-matrix&quot; style=&quot;grid-template-columns:1fr;&quot;&gt;
&lt;div class=&quot;row head&quot; style=&quot;grid-template-columns:18cqi repeat(3,1fr);&quot;&gt;
&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;cell&quot;&gt;Built for teams&lt;/span&gt;&lt;span class=&quot;cell&quot;&gt;Fast to value&lt;/span&gt;&lt;span class=&quot;cell&quot;&gt;On-brand by default&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;row them&quot; style=&quot;grid-template-columns:18cqi repeat(3,1fr);&quot;&gt;
&lt;span class=&quot;cell who&quot; style=&quot;color:var(--brand-color-text);&quot;&gt;Fieldnote&lt;/span&gt;
&lt;span class=&quot;cell&quot;&gt;&lt;span class=&quot;mk no&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6 6 18&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;cell&quot;&gt;&lt;span class=&quot;mk no&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6 6 18&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;cell&quot;&gt;&lt;span class=&quot;mk yes&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;row them&quot; style=&quot;grid-template-columns:18cqi repeat(3,1fr);&quot;&gt;
&lt;span class=&quot;cell who&quot; style=&quot;color:var(--brand-color-text);&quot;&gt;Arcadia&lt;/span&gt;
&lt;span class=&quot;cell&quot;&gt;&lt;span class=&quot;mk yes&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;cell&quot;&gt;&lt;span class=&quot;mk no&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6 6 18&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;cell&quot;&gt;&lt;span class=&quot;mk no&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M6 6l12 12M18 6 6 18&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;row us&quot; style=&quot;grid-template-columns:18cqi repeat(3,1fr);&quot;&gt;
&lt;span class=&quot;cell who&quot;&gt;Malenia&lt;/span&gt;
&lt;span class=&quot;cell&quot;&gt;&lt;span class=&quot;mk yes&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;cell&quot;&gt;&lt;span class=&quot;mk yes&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;cell&quot;&gt;&lt;span class=&quot;mk yes&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;08 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame frame--accent&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;TRACTION&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;Traction&lt;/span&gt;
&lt;h2 class=&quot;s-title&quot; style=&quot;font-size:5cqi;&quot;&gt;People already want this — and the line is going up.&lt;/h2&gt;
&lt;div class=&quot;s-grid&quot; style=&quot;grid-template-columns:repeat(4,1fr);margin-top:5cqi;&quot;&gt;
&lt;div class=&quot;s-metric&quot;&gt;&lt;div class=&quot;v&quot;&gt;10k+&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Teams onboard&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;s-metric&quot;&gt;&lt;div class=&quot;v&quot;&gt;99.9%&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Uptime SLA&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;s-metric&quot;&gt;&lt;div class=&quot;v&quot;&gt;4.9/5&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Average rating&lt;/div&gt;&lt;/div&gt;
&lt;div class=&quot;s-metric&quot;&gt;&lt;div class=&quot;v&quot;&gt;120+&lt;/div&gt;&lt;div class=&quot;l&quot;&gt;Integrations&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p class=&quot;s-lede&quot; style=&quot;color:rgba(255,255,255,0.78);font-size:1.5cqi;max-width:64cqi;margin-top:3.4cqi;&quot;&gt;Illustrative figures — replace with your live numbers before pitching.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;09 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame frame--surface&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;TEAM&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;Team&lt;/span&gt;
&lt;h2 class=&quot;s-title&quot;&gt;The people behind Malenia have done this before.&lt;/h2&gt;
&lt;div class=&quot;s-team&quot;&gt;
&lt;div class=&quot;s-card&quot; style=&quot;background:transparent;border:none;padding:0;&quot;&gt;
&lt;span class=&quot;s-avatar&quot;&gt;MC&lt;/span&gt;
&lt;h3 style=&quot;font-size:1.9cqi;margin:0 0 0.4cqi;&quot;&gt;Maya Chen&lt;/h3&gt;
&lt;p style=&quot;-webkit-line-clamp:2;&quot;&gt;Head of Design, Northwind&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;s-card&quot; style=&quot;background:transparent;border:none;padding:0;&quot;&gt;
&lt;span class=&quot;s-avatar&quot;&gt;JW&lt;/span&gt;
&lt;h3 style=&quot;font-size:1.9cqi;margin:0 0 0.4cqi;&quot;&gt;Jonas Weber&lt;/h3&gt;
&lt;p style=&quot;-webkit-line-clamp:2;&quot;&gt;Engineering Lead, Lumen Labs&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;s-card&quot; style=&quot;background:transparent;border:none;padding:0;&quot;&gt;
&lt;span class=&quot;s-avatar&quot;&gt;PN&lt;/span&gt;
&lt;h3 style=&quot;font-size:1.9cqi;margin:0 0 0.4cqi;&quot;&gt;Priya Natarajan&lt;/h3&gt;
&lt;p style=&quot;-webkit-line-clamp:2;&quot;&gt;Founder, Fieldnote&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;10 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section class=&quot;slide&quot;&gt;
&lt;div class=&quot;frame frame--accent&quot;&gt;
&lt;div class=&quot;f-head&quot;&gt;&lt;span class=&quot;wm&quot;&gt;Malenia&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;THE ASK&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;f-body&quot;&gt;
&lt;div class=&quot;f-fit&quot;&gt;
&lt;span class=&quot;s-kicker&quot;&gt;The ask&lt;/span&gt;
&lt;h2 class=&quot;s-mega&quot; style=&quot;font-size:6.4cqi;&quot;&gt;Let's build the future of this category together.&lt;/h2&gt;
&lt;div class=&quot;s-ask&quot;&gt;
&lt;div class=&quot;item&quot;&gt;&lt;span class=&quot;b&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span&gt;&lt;span class=&quot;k&quot;&gt;Partner with us&lt;/span&gt; — back the team building the sophisticated standard for this market.&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;item&quot;&gt;&lt;span class=&quot;b&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span&gt;&lt;span class=&quot;k&quot;&gt;Fuel the next phase&lt;/span&gt; — scale the product, the go-to-market motion, and the team.&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;item&quot;&gt;&lt;span class=&quot;b&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M20 6 9 17l-5-5&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span&gt;&lt;span class=&quot;k&quot;&gt;Hit the milestone&lt;/span&gt; — reach the next tier of customers and revenue within 12 months.&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;a class=&quot;s-cta&quot;&gt;Talk to us &amp;middot; malenia.space &lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2.4&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;M5 12h14M13 6l6 6-6 6&quot;/&gt;&lt;/svg&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;f-foot&quot;&gt;&lt;span&gt;malenia.space&lt;/span&gt;&lt;span class=&quot;rule&quot;&gt;&lt;/span&gt;&lt;span class=&quot;ix&quot;&gt;11 / 11&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/main&gt;
&lt;div class=&quot;deck-dots&quot;&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;span class=&quot;deck-dot&quot;&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;deck-ui&quot;&gt;
&lt;button class=&quot;deck-prev&quot; aria-label=&quot;Previous slide&quot;&gt;&amp;larr;&lt;/button&gt;
&lt;span class=&quot;deck-counter&quot;&gt;1 / 11&lt;/span&gt;
&lt;button class=&quot;deck-next&quot; aria-label=&quot;Next slide&quot;&gt;&amp;rarr;&lt;/button&gt;
&lt;/div&gt;
&lt;script&gt;
(function () {
/* od-deck-fit: shrink-to-fit guarantee — keep every slide's content inside
the fixed 16:9 frame so brand copy of any length never clips. */
function fitFrame(body) {
var fit = body.querySelector('.f-fit');
if (!fit) return;
fit.style.transform = 'none';
var availH = body.clientHeight;
var availW = fit.clientWidth;
if (availH &lt;= 0 || availW &lt;= 0) return;
var naturalH = fit.offsetHeight;
var naturalW = fit.scrollWidth;
var scale = Math.min(1, availH / naturalH, availW / naturalW);
if (scale &lt; 1) {
// small safety margin so descenders never touch the clip edge
fit.style.transform = 'scale(' + (scale * 0.98) + ')';
}
}
function fitAll() {
[].forEach.call(document.querySelectorAll('.f-body'), fitFrame);
}
// Fit synchronously rather than via requestAnimationFrame: rAF callbacks are
// throttled while the deck is offscreen/occluded, which would leave a slide
// unscaled (and clipped) until first paint. A trailing settle pass catches
// late reflow (web-font swap, image load).
var fitTimer;
function scheduleFit() {
fitAll();
if (fitTimer) clearTimeout(fitTimer);
fitTimer = setTimeout(fitAll, 150);
}
window.addEventListener('resize', scheduleFit);
if (document.fonts &amp;&amp; document.fonts.ready) {
document.fonts.ready.then(fitAll).catch(function () {});
}
window.addEventListener('load', fitAll);
scheduleFit();
var deck = document.querySelector('.deck');
var slides = [].slice.call(document.querySelectorAll('.slide'));
var dots = [].slice.call(document.querySelectorAll('.deck-dot'));
var counter = document.querySelector('.deck-counter');
var idx = 0;
function render() {
if (counter) counter.textContent = (idx + 1) + ' / ' + slides.length;
dots.forEach(function (d, n) { d.classList.toggle('on', n === idx); });
}
function go(i) {
idx = Math.max(0, Math.min(slides.length - 1, i));
slides[idx].scrollIntoView({ behavior: 'smooth' });
render();
}
deck.addEventListener('scroll', function () {
requestAnimationFrame(function () {
var i = Math.round(deck.scrollTop / deck.clientHeight);
if (i !== idx &amp;&amp; i &gt;= 0 &amp;&amp; i &lt; slides.length) { idx = i; render(); }
});
});
window.addEventListener('keydown', function (e) {
if (['ArrowDown', 'ArrowRight', 'PageDown', ' '].indexOf(e.key) &gt; -1) { e.preventDefault(); go(idx + 1); }
else if (['ArrowUp', 'ArrowLeft', 'PageUp'].indexOf(e.key) &gt; -1) { e.preventDefault(); go(idx - 1); }
else if (e.key === 'Home') { e.preventDefault(); go(0); }
else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
});
dots.forEach(function (d, n) { d.addEventListener('click', function () { go(n); }); });
document.querySelector('.deck-prev').addEventListener('click', function () { go(idx - 1); });
document.querySelector('.deck-next').addEventListener('click', function () { go(idx + 1); });
render();
})();
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;"
sandbox=""
loading="lazy"
title="Malenia deck preview"
style="width:200%;height:840px;border:0;transform:scale(0.5);transform-origin:top left;"
></iframe>
</div>
</figure>
<figure style="margin:0;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;">
<figcaption style="padding:var(--brand-size-sm) var(--brand-size-md);font-weight:var(--brand-font-weight-strong);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);text-transform:capitalize;">poster</figcaption>
<div style="height:420px;overflow:hidden;background:var(--brand-color-bg-layout);">
<iframe
srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;style data-brand-fonts&gt;
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-600.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 600;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Tenor Sans&quot;;
src: url(&quot;../fonts/tenor-sans-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
&lt;/style&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
&lt;title&gt;Malenia — Poster&lt;/title&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&amp;amp;display=swap&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Tenor+Sans&amp;amp;display=swap&quot; /&gt;
&lt;style&gt;
:root {
--brand-color-primary: #c9a84c;
--brand-color-primary-bg: #fffef0;
--brand-color-primary-bg-hover: #fcfaed;
--brand-color-primary-border: #f0eace;
--brand-color-primary-border-hover: #e3d69f;
--brand-color-primary-hover: #d6bf74;
--brand-color-primary-active: #a38336;
--brand-color-primary-text: #573e14;
--brand-color-success: #52c41a;
--brand-color-success-bg: #f6ffed;
--brand-color-success-border: #b6eb8f;
--brand-color-success-hover: #72d13d;
--brand-color-success-active: #389e0d;
--brand-color-warning: #faad14;
--brand-color-warning-bg: #fffbe6;
--brand-color-warning-border: #ffe58f;
--brand-color-warning-hover: #ffc53d;
--brand-color-warning-active: #d48806;
--brand-color-error: #ff4d4f;
--brand-color-error-bg: #fff2f0;
--brand-color-error-border: #ffccc7;
--brand-color-error-hover: #ff7875;
--brand-color-error-active: #d9363d;
--brand-color-info: #c9a84c;
--brand-color-info-bg: #fffef0;
--brand-color-info-border: #f0eace;
--brand-color-link: #c9a84c;
--brand-color-link-hover: #d6bf74;
--brand-color-link-active: #a38336;
--brand-color-text: #35312b;
--brand-color-text-secondary: #68655f;
--brand-color-text-tertiary: #95928c;
--brand-color-text-quaternary: #c2bfba;
--brand-color-fill: #d8d5d0;
--brand-color-fill-secondary: #ede9e4;
--brand-color-fill-tertiary: #f1eee9;
--brand-color-fill-quaternary: #f6f3ed;
--brand-color-bg-layout: #f1eee9;
--brand-color-bg-container: #faf7f2;
--brand-color-bg-elevated: #faf7f2;
--brand-color-border: #d8d5d0;
--brand-color-border-secondary: #ede9e4;
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--brand-font-size: 14px;
--brand-font-size-sm: 12px;
--brand-font-size-lg: 18px;
--brand-font-size-xl: 22px;
--brand-font-size-heading-1: 38px;
--brand-font-size-heading-2: 32px;
--brand-font-size-heading-3: 26px;
--brand-font-size-heading-4: 22px;
--brand-font-size-heading-5: 18px;
--brand-line-height: 1.5714285714285714;
--brand-line-height-heading: 1.25;
--brand-font-weight-strong: 600;
--brand-size-xxs: 4px;
--brand-size-xs: 8px;
--brand-size-sm: 12px;
--brand-size: 16px;
--brand-size-md: 20px;
--brand-size-lg: 24px;
--brand-size-xl: 32px;
--brand-size-xxl: 48px;
--brand-border-radius-xs: 3px;
--brand-border-radius-sm: 5px;
--brand-border-radius: 8px;
--brand-border-radius-lg: 10px;
--brand-line-width: 1px;
--brand-control-height-xs: 16px;
--brand-control-height-sm: 24px;
--brand-control-height: 32px;
--brand-control-height-lg: 40px;
--brand-motion-duration-fast: 0.1s;
--brand-motion-duration-mid: 0.2s;
--brand-motion-duration-slow: 0.3s;
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--brand-primary-palette-1: #fffef0;
--brand-primary-palette-2: #fcfaed;
--brand-primary-palette-3: #f0eace;
--brand-primary-palette-4: #e3d69f;
--brand-primary-palette-5: #d6bf74;
--brand-primary-palette-6: #c9a84c;
--brand-primary-palette-7: #a38336;
--brand-primary-palette-8: #7d5f23;
--brand-primary-palette-9: #573e14;
--brand-primary-palette-10: #30210b;
--brand-presets-red-1: #fff1f0;
--brand-presets-red-2: #ffcbc7;
--brand-presets-red-3: #ffa39e;
--brand-presets-red-4: #ff7775;
--brand-presets-red-5: #ff4d50;
--brand-presets-red-6: #f5222d;
--brand-presets-red-7: #cf1323;
--brand-presets-red-8: #a8071a;
--brand-presets-red-9: #820014;
--brand-presets-red-10: #5c0011;
--brand-presets-volcano-1: #fff2e8;
--brand-presets-volcano-2: #ffd8bf;
--brand-presets-volcano-3: #ffbb96;
--brand-presets-volcano-4: #ff9c6e;
--brand-presets-volcano-5: #ff7a45;
--brand-presets-volcano-6: #fa541c;
--brand-presets-volcano-7: #d4380d;
--brand-presets-volcano-8: #ad2202;
--brand-presets-volcano-9: #871500;
--brand-presets-volcano-10: #610c00;
--brand-presets-orange-1: #fff7e6;
--brand-presets-orange-2: #ffe7ba;
--brand-presets-orange-3: #ffd591;
--brand-presets-orange-4: #ffc069;
--brand-presets-orange-5: #ffa940;
--brand-presets-orange-6: #fa8c16;
--brand-presets-orange-7: #d46b08;
--brand-presets-orange-8: #ad4e00;
--brand-presets-orange-9: #873800;
--brand-presets-orange-10: #612500;
--brand-presets-gold-1: #fffbe6;
--brand-presets-gold-2: #fff1b8;
--brand-presets-gold-3: #ffe58f;
--brand-presets-gold-4: #ffd666;
--brand-presets-gold-5: #ffc53d;
--brand-presets-gold-6: #faad14;
--brand-presets-gold-7: #d48806;
--brand-presets-gold-8: #ad6800;
--brand-presets-gold-9: #874c00;
--brand-presets-gold-10: #613400;
--brand-presets-yellow-1: #feffe6;
--brand-presets-yellow-2: #ffffb8;
--brand-presets-yellow-3: #fffb8f;
--brand-presets-yellow-4: #fff566;
--brand-presets-yellow-5: #ffeb3d;
--brand-presets-yellow-6: #fadb14;
--brand-presets-yellow-7: #d4b106;
--brand-presets-yellow-8: #ad8a00;
--brand-presets-yellow-9: #876700;
--brand-presets-yellow-10: #614700;
--brand-presets-lime-1: #fcffe6;
--brand-presets-lime-2: #f4ffb8;
--brand-presets-lime-3: #eaff8f;
--brand-presets-lime-4: #d3f261;
--brand-presets-lime-5: #bae637;
--brand-presets-lime-6: #a0d911;
--brand-presets-lime-7: #7bb305;
--brand-presets-lime-8: #5b8c00;
--brand-presets-lime-9: #3f6600;
--brand-presets-lime-10: #254000;
--brand-presets-green-1: #f6ffed;
--brand-presets-green-2: #d9f7be;
--brand-presets-green-3: #b6eb8f;
--brand-presets-green-4: #94de64;
--brand-presets-green-5: #72d13d;
--brand-presets-green-6: #52c41a;
--brand-presets-green-7: #389e0d;
--brand-presets-green-8: #227804;
--brand-presets-green-9: #135200;
--brand-presets-green-10: #092b00;
--brand-presets-cyan-1: #e6fffb;
--brand-presets-cyan-2: #b5f5ec;
--brand-presets-cyan-3: #87e8de;
--brand-presets-cyan-4: #5cdbd3;
--brand-presets-cyan-5: #36cfc9;
--brand-presets-cyan-6: #13c2c2;
--brand-presets-cyan-7: #08979c;
--brand-presets-cyan-8: #006d75;
--brand-presets-cyan-9: #00474f;
--brand-presets-cyan-10: #002329;
--brand-presets-blue-1: #e6f4ff;
--brand-presets-blue-2: #bae0ff;
--brand-presets-blue-3: #91caff;
--brand-presets-blue-4: #69b1ff;
--brand-presets-blue-5: #4096ff;
--brand-presets-blue-6: #1677ff;
--brand-presets-blue-7: #0958d9;
--brand-presets-blue-8: #003eb3;
--brand-presets-blue-9: #002c8c;
--brand-presets-blue-10: #001d66;
--brand-presets-geekblue-1: #f0f5ff;
--brand-presets-geekblue-2: #d6e4ff;
--brand-presets-geekblue-3: #adc6ff;
--brand-presets-geekblue-4: #85a5ff;
--brand-presets-geekblue-5: #597df7;
--brand-presets-geekblue-6: #2f54eb;
--brand-presets-geekblue-7: #1d39c4;
--brand-presets-geekblue-8: #10229e;
--brand-presets-geekblue-9: #061178;
--brand-presets-geekblue-10: #030852;
--brand-presets-purple-1: #f9f0ff;
--brand-presets-purple-2: #efdbff;
--brand-presets-purple-3: #d4adf7;
--brand-presets-purple-4: #b37feb;
--brand-presets-purple-5: #9254de;
--brand-presets-purple-6: #722ed1;
--brand-presets-purple-7: #531dab;
--brand-presets-purple-8: #391085;
--brand-presets-purple-9: #22075e;
--brand-presets-purple-10: #120338;
--brand-presets-magenta-1: #fff0f6;
--brand-presets-magenta-2: #ffd6e7;
--brand-presets-magenta-3: #ffadd2;
--brand-presets-magenta-4: #ff85bf;
--brand-presets-magenta-5: #f759aa;
--brand-presets-magenta-6: #eb2f96;
--brand-presets-magenta-7: #c41d7e;
--brand-presets-magenta-8: #9e1067;
--brand-presets-magenta-9: #780650;
--brand-presets-magenta-10: #520339;
--brand-presets-grey-1: #a6a6a6;
--brand-presets-grey-2: #999999;
--brand-presets-grey-3: #8c8c8c;
--brand-presets-grey-4: #808080;
--brand-presets-grey-5: #737373;
--brand-presets-grey-6: #666666;
--brand-presets-grey-7: #404040;
--brand-presets-grey-8: #1a1a1a;
--brand-presets-grey-9: #000000;
--brand-presets-grey-10: #000000;
}
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--brand-font-family);
font-size: var(--brand-font-size);
line-height: var(--brand-line-height);
color: var(--brand-color-text);
background: var(--brand-color-bg-layout);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--brand-color-link); text-decoration: none; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--display-family);
line-height: var(--brand-line-height-heading);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-text);
overflow-wrap: break-word;
}
p { margin: 0; overflow-wrap: break-word; }
img, svg { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.kicker {
display: block;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: var(--brand-font-size-sm);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-primary);
margin-bottom: var(--brand-size-sm);
}
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
a[role=&quot;button&quot;]{transition:filter .15s ease,transform .15s ease}
a[role=&quot;button&quot;]:hover{filter:brightness(1.07)}
a[role=&quot;button&quot;]:active{filter:brightness(.95);transform:translateY(0.5px)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
details.kit-acc&gt;summary{list-style:none;cursor:pointer}
details.kit-acc&gt;summary::-webkit-details-marker{display:none}
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
.poster-stage { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 48px); background: var(--brand-color-bg-layout); }
.poster {
position: relative;
aspect-ratio: 3 / 4;
width: min(720px, 92vw, calc((100vh - 96px) * 3 / 4));
container-type: inline-size;
background: var(--brand-color-bg-elevated);
color: var(--brand-color-text);
border: var(--brand-line-width) solid var(--brand-color-border-secondary);
border-radius: 1.4cqi;
overflow: hidden;
box-shadow: 0 36px 90px var(--brand-color-fill-secondary), 0 4px 12px var(--brand-color-fill-quaternary);
display: grid;
grid-template-rows: auto 1fr auto;
padding: 9cqi;
}
/* hairline frame inset — quiet print-mark, not a banner */
.poster::after {
content: &quot;&quot;;
position: absolute; inset: 4cqi;
border: var(--brand-line-width) solid var(--brand-color-border-secondary);
border-radius: 0.8cqi;
pointer-events: none;
}
.poster &gt; * { position: relative; z-index: 1; }
/* ── three type-size roles ────────────────────────────────────────── */
.p-focal {
font-family: var(--display-family);
font-weight: var(--brand-font-weight-strong);
line-height: 1.02;
letter-spacing: -0.025em;
margin: 0;
text-wrap: balance;
color: var(--brand-color-text);
}
.p-focal .accent { color: var(--brand-color-primary); }
.p-sub {
font-size: 3cqi; line-height: 1.42; margin: 0;
color: var(--brand-color-text-secondary); max-width: 56cqi;
}
.p-meta {
font-size: 1.9cqi; line-height: 1.4; letter-spacing: 0.02em;
color: var(--brand-color-text-tertiary);
}
.p-kicker {
text-transform: uppercase; letter-spacing: 0.28em;
font-size: 1.8cqi; font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-text-tertiary); margin: 0;
}
/* the single accent mark that sits on the focal */
.p-rule { width: 12cqi; height: 0.7cqi; background: var(--brand-color-primary); border-radius: 0.4cqi; }
/* header band: tiny wordmark + edition tag, like a print masthead */
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 3cqi; }
.p-wordmark { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 2.4cqi; letter-spacing: -0.01em; color: var(--brand-color-text); }
/* signature footer: logo small &amp; confident, like a signature */
.p-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqi; }
.p-sign-mark { display: flex; align-items: center; gap: 1.6cqi; }
.p-sign-dot { width: 2.6cqi; height: 2.6cqi; border-radius: 50%; background: var(--brand-color-primary); flex: 0 0 auto; }
.p-sign-name { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 2.8cqi; letter-spacing: -0.01em; color: var(--brand-color-text); }
/* ── Event 5W grid ────────────────────────────────────────────────── */
.p-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqi 5cqi; margin: 0; }
.p-fact { display: flex; flex-direction: column; gap: 1cqi; min-width: 0; }
.p-fact-k { text-transform: uppercase; letter-spacing: 0.2em; font-size: 1.6cqi; font-weight: var(--brand-font-weight-strong); color: var(--brand-color-text-tertiary); }
.p-fact-v { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 3.4cqi; line-height: 1.12; color: var(--brand-color-text); letter-spacing: -0.01em; }
/* When + Where are the most-looked-up facts → give them more weight */
.p-fact--lead .p-fact-v { font-size: 4cqi; }
/* CTA block — one action, scan / short link, with a line-drawn code mark */
.p-cta { display: flex; align-items: center; gap: 3.4cqi; padding-top: 4cqi; border-top: var(--brand-line-width) solid var(--brand-color-border-secondary); }
.p-cta-copy { min-width: 0; }
.p-cta-action { font-family: var(--display-family); font-weight: var(--brand-font-weight-strong); font-size: 3cqi; color: var(--brand-color-text); margin: 0 0 0.6cqi; letter-spacing: -0.01em; }
.p-cta-link { font-size: 2cqi; color: var(--brand-color-primary); font-weight: var(--brand-font-weight-strong); letter-spacing: 0.01em; }
.p-code { flex: 0 0 auto; width: 17cqi; height: 17cqi; border: var(--brand-line-width) solid var(--brand-color-border); border-radius: 1cqi; padding: 1.8cqi; background: var(--brand-color-bg-container); }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;poster-stage&quot;&gt;
&lt;div class=&quot;poster&quot;&gt;
&lt;header class=&quot;p-head&quot;&gt;
&lt;span class=&quot;p-wordmark&quot;&gt;Malenia&lt;/span&gt;
&lt;span class=&quot;p-meta&quot;&gt;malenia.space&lt;/span&gt;
&lt;/header&gt;
&lt;div style=&quot;display:flex;flex-direction:column;justify-content:center;gap:4cqi;padding:2cqi 0;&quot;&gt;
&lt;p class=&quot;p-kicker&quot;&gt;SOPHISTICATED · QUIET · ESSENTIAL&lt;/p&gt;
&lt;h1 class=&quot;p-focal&quot; style=&quot;font-size:12.5cqi;&quot;&gt;&lt;span class=&quot;accent&quot;&gt;Свобода.&lt;/span&gt; Практика. Простота.&lt;/h1&gt;
&lt;div class=&quot;p-rule&quot;&gt;&lt;/div&gt;
&lt;p class=&quot;p-sub&quot;&gt;A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.&lt;/p&gt;
&lt;/div&gt;
&lt;footer class=&quot;p-sign&quot;&gt;
&lt;span class=&quot;p-sign-mark&quot;&gt;
&lt;span class=&quot;p-sign-dot&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;p-sign-name&quot;&gt;Malenia&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;p-meta&quot; style=&quot;text-align:right;max-width:40cqi;&quot;&gt;Sophisticated · Quiet&lt;/span&gt;
&lt;/footer&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;"
sandbox=""
loading="lazy"
title="Malenia poster preview"
style="width:200%;height:840px;border:0;transform:scale(0.5);transform-origin:top left;"
></iframe>
</div>
</figure>
<figure style="margin:0;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;">
<figcaption style="padding:var(--brand-size-sm) var(--brand-size-md);font-weight:var(--brand-font-weight-strong);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);text-transform:capitalize;">email</figcaption>
<div style="height:420px;overflow:hidden;background:var(--brand-color-bg-layout);">
<iframe
srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;style data-brand-fonts&gt;
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-600.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 600;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Tenor Sans&quot;;
src: url(&quot;../fonts/tenor-sans-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
&lt;/style&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
&lt;title&gt;Свобода. Практика. Простота — from Malenia&lt;/title&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&amp;amp;display=swap&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Tenor+Sans&amp;amp;display=swap&quot; /&gt;
&lt;style&gt;
:root {
--brand-color-primary: #c9a84c;
--brand-color-primary-bg: #fffef0;
--brand-color-primary-bg-hover: #fcfaed;
--brand-color-primary-border: #f0eace;
--brand-color-primary-border-hover: #e3d69f;
--brand-color-primary-hover: #d6bf74;
--brand-color-primary-active: #a38336;
--brand-color-primary-text: #573e14;
--brand-color-success: #52c41a;
--brand-color-success-bg: #f6ffed;
--brand-color-success-border: #b6eb8f;
--brand-color-success-hover: #72d13d;
--brand-color-success-active: #389e0d;
--brand-color-warning: #faad14;
--brand-color-warning-bg: #fffbe6;
--brand-color-warning-border: #ffe58f;
--brand-color-warning-hover: #ffc53d;
--brand-color-warning-active: #d48806;
--brand-color-error: #ff4d4f;
--brand-color-error-bg: #fff2f0;
--brand-color-error-border: #ffccc7;
--brand-color-error-hover: #ff7875;
--brand-color-error-active: #d9363d;
--brand-color-info: #c9a84c;
--brand-color-info-bg: #fffef0;
--brand-color-info-border: #f0eace;
--brand-color-link: #c9a84c;
--brand-color-link-hover: #d6bf74;
--brand-color-link-active: #a38336;
--brand-color-text: #35312b;
--brand-color-text-secondary: #68655f;
--brand-color-text-tertiary: #95928c;
--brand-color-text-quaternary: #c2bfba;
--brand-color-fill: #d8d5d0;
--brand-color-fill-secondary: #ede9e4;
--brand-color-fill-tertiary: #f1eee9;
--brand-color-fill-quaternary: #f6f3ed;
--brand-color-bg-layout: #f1eee9;
--brand-color-bg-container: #faf7f2;
--brand-color-bg-elevated: #faf7f2;
--brand-color-border: #d8d5d0;
--brand-color-border-secondary: #ede9e4;
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--brand-font-size: 14px;
--brand-font-size-sm: 12px;
--brand-font-size-lg: 18px;
--brand-font-size-xl: 22px;
--brand-font-size-heading-1: 38px;
--brand-font-size-heading-2: 32px;
--brand-font-size-heading-3: 26px;
--brand-font-size-heading-4: 22px;
--brand-font-size-heading-5: 18px;
--brand-line-height: 1.5714285714285714;
--brand-line-height-heading: 1.25;
--brand-font-weight-strong: 600;
--brand-size-xxs: 4px;
--brand-size-xs: 8px;
--brand-size-sm: 12px;
--brand-size: 16px;
--brand-size-md: 20px;
--brand-size-lg: 24px;
--brand-size-xl: 32px;
--brand-size-xxl: 48px;
--brand-border-radius-xs: 3px;
--brand-border-radius-sm: 5px;
--brand-border-radius: 8px;
--brand-border-radius-lg: 10px;
--brand-line-width: 1px;
--brand-control-height-xs: 16px;
--brand-control-height-sm: 24px;
--brand-control-height: 32px;
--brand-control-height-lg: 40px;
--brand-motion-duration-fast: 0.1s;
--brand-motion-duration-mid: 0.2s;
--brand-motion-duration-slow: 0.3s;
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--brand-primary-palette-1: #fffef0;
--brand-primary-palette-2: #fcfaed;
--brand-primary-palette-3: #f0eace;
--brand-primary-palette-4: #e3d69f;
--brand-primary-palette-5: #d6bf74;
--brand-primary-palette-6: #c9a84c;
--brand-primary-palette-7: #a38336;
--brand-primary-palette-8: #7d5f23;
--brand-primary-palette-9: #573e14;
--brand-primary-palette-10: #30210b;
--brand-presets-red-1: #fff1f0;
--brand-presets-red-2: #ffcbc7;
--brand-presets-red-3: #ffa39e;
--brand-presets-red-4: #ff7775;
--brand-presets-red-5: #ff4d50;
--brand-presets-red-6: #f5222d;
--brand-presets-red-7: #cf1323;
--brand-presets-red-8: #a8071a;
--brand-presets-red-9: #820014;
--brand-presets-red-10: #5c0011;
--brand-presets-volcano-1: #fff2e8;
--brand-presets-volcano-2: #ffd8bf;
--brand-presets-volcano-3: #ffbb96;
--brand-presets-volcano-4: #ff9c6e;
--brand-presets-volcano-5: #ff7a45;
--brand-presets-volcano-6: #fa541c;
--brand-presets-volcano-7: #d4380d;
--brand-presets-volcano-8: #ad2202;
--brand-presets-volcano-9: #871500;
--brand-presets-volcano-10: #610c00;
--brand-presets-orange-1: #fff7e6;
--brand-presets-orange-2: #ffe7ba;
--brand-presets-orange-3: #ffd591;
--brand-presets-orange-4: #ffc069;
--brand-presets-orange-5: #ffa940;
--brand-presets-orange-6: #fa8c16;
--brand-presets-orange-7: #d46b08;
--brand-presets-orange-8: #ad4e00;
--brand-presets-orange-9: #873800;
--brand-presets-orange-10: #612500;
--brand-presets-gold-1: #fffbe6;
--brand-presets-gold-2: #fff1b8;
--brand-presets-gold-3: #ffe58f;
--brand-presets-gold-4: #ffd666;
--brand-presets-gold-5: #ffc53d;
--brand-presets-gold-6: #faad14;
--brand-presets-gold-7: #d48806;
--brand-presets-gold-8: #ad6800;
--brand-presets-gold-9: #874c00;
--brand-presets-gold-10: #613400;
--brand-presets-yellow-1: #feffe6;
--brand-presets-yellow-2: #ffffb8;
--brand-presets-yellow-3: #fffb8f;
--brand-presets-yellow-4: #fff566;
--brand-presets-yellow-5: #ffeb3d;
--brand-presets-yellow-6: #fadb14;
--brand-presets-yellow-7: #d4b106;
--brand-presets-yellow-8: #ad8a00;
--brand-presets-yellow-9: #876700;
--brand-presets-yellow-10: #614700;
--brand-presets-lime-1: #fcffe6;
--brand-presets-lime-2: #f4ffb8;
--brand-presets-lime-3: #eaff8f;
--brand-presets-lime-4: #d3f261;
--brand-presets-lime-5: #bae637;
--brand-presets-lime-6: #a0d911;
--brand-presets-lime-7: #7bb305;
--brand-presets-lime-8: #5b8c00;
--brand-presets-lime-9: #3f6600;
--brand-presets-lime-10: #254000;
--brand-presets-green-1: #f6ffed;
--brand-presets-green-2: #d9f7be;
--brand-presets-green-3: #b6eb8f;
--brand-presets-green-4: #94de64;
--brand-presets-green-5: #72d13d;
--brand-presets-green-6: #52c41a;
--brand-presets-green-7: #389e0d;
--brand-presets-green-8: #227804;
--brand-presets-green-9: #135200;
--brand-presets-green-10: #092b00;
--brand-presets-cyan-1: #e6fffb;
--brand-presets-cyan-2: #b5f5ec;
--brand-presets-cyan-3: #87e8de;
--brand-presets-cyan-4: #5cdbd3;
--brand-presets-cyan-5: #36cfc9;
--brand-presets-cyan-6: #13c2c2;
--brand-presets-cyan-7: #08979c;
--brand-presets-cyan-8: #006d75;
--brand-presets-cyan-9: #00474f;
--brand-presets-cyan-10: #002329;
--brand-presets-blue-1: #e6f4ff;
--brand-presets-blue-2: #bae0ff;
--brand-presets-blue-3: #91caff;
--brand-presets-blue-4: #69b1ff;
--brand-presets-blue-5: #4096ff;
--brand-presets-blue-6: #1677ff;
--brand-presets-blue-7: #0958d9;
--brand-presets-blue-8: #003eb3;
--brand-presets-blue-9: #002c8c;
--brand-presets-blue-10: #001d66;
--brand-presets-geekblue-1: #f0f5ff;
--brand-presets-geekblue-2: #d6e4ff;
--brand-presets-geekblue-3: #adc6ff;
--brand-presets-geekblue-4: #85a5ff;
--brand-presets-geekblue-5: #597df7;
--brand-presets-geekblue-6: #2f54eb;
--brand-presets-geekblue-7: #1d39c4;
--brand-presets-geekblue-8: #10229e;
--brand-presets-geekblue-9: #061178;
--brand-presets-geekblue-10: #030852;
--brand-presets-purple-1: #f9f0ff;
--brand-presets-purple-2: #efdbff;
--brand-presets-purple-3: #d4adf7;
--brand-presets-purple-4: #b37feb;
--brand-presets-purple-5: #9254de;
--brand-presets-purple-6: #722ed1;
--brand-presets-purple-7: #531dab;
--brand-presets-purple-8: #391085;
--brand-presets-purple-9: #22075e;
--brand-presets-purple-10: #120338;
--brand-presets-magenta-1: #fff0f6;
--brand-presets-magenta-2: #ffd6e7;
--brand-presets-magenta-3: #ffadd2;
--brand-presets-magenta-4: #ff85bf;
--brand-presets-magenta-5: #f759aa;
--brand-presets-magenta-6: #eb2f96;
--brand-presets-magenta-7: #c41d7e;
--brand-presets-magenta-8: #9e1067;
--brand-presets-magenta-9: #780650;
--brand-presets-magenta-10: #520339;
--brand-presets-grey-1: #a6a6a6;
--brand-presets-grey-2: #999999;
--brand-presets-grey-3: #8c8c8c;
--brand-presets-grey-4: #808080;
--brand-presets-grey-5: #737373;
--brand-presets-grey-6: #666666;
--brand-presets-grey-7: #404040;
--brand-presets-grey-8: #1a1a1a;
--brand-presets-grey-9: #000000;
--brand-presets-grey-10: #000000;
}
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--brand-font-family);
font-size: var(--brand-font-size);
line-height: var(--brand-line-height);
color: var(--brand-color-text);
background: var(--brand-color-bg-layout);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--brand-color-link); text-decoration: none; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--display-family);
line-height: var(--brand-line-height-heading);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-text);
overflow-wrap: break-word;
}
p { margin: 0; overflow-wrap: break-word; }
img, svg { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.kicker {
display: block;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: var(--brand-font-size-sm);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-primary);
margin-bottom: var(--brand-size-sm);
}
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
a[role=&quot;button&quot;]{transition:filter .15s ease,transform .15s ease}
a[role=&quot;button&quot;]:hover{filter:brightness(1.07)}
a[role=&quot;button&quot;]:active{filter:brightness(.95);transform:translateY(0.5px)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
details.kit-acc&gt;summary{list-style:none;cursor:pointer}
details.kit-acc&gt;summary::-webkit-details-marker{display:none}
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
img{border:0;outline:none;text-decoration:none;}table{border-spacing:0;}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- hidden preheader: earns the open, complements the subject, never repeats it --&gt;
&lt;div style=&quot;display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:var(--brand-color-bg-layout);opacity:0;&quot;&gt;A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.&lt;/div&gt;
&lt;!-- whitespace eater so the body copy does not leak into the inbox preview --&gt;
&lt;div style=&quot;display:none;max-height:0;overflow:hidden;&quot;&gt;&amp;#847;&amp;#8204;&amp;#160;&amp;#847;&amp;#8204;&amp;#160;&amp;#847;&amp;#8204;&amp;#160;&amp;#847;&amp;#8204;&amp;#160;&amp;#847;&amp;#8204;&amp;#160;&amp;#847;&amp;#8204;&amp;#160;&amp;#847;&amp;#8204;&amp;#160;&lt;/div&gt;
&lt;table role=&quot;presentation&quot; width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;background:var(--brand-color-bg-layout);margin:0;padding:0;&quot;&gt;
&lt;tr&gt;
&lt;td align=&quot;center&quot; style=&quot;padding:var(--brand-size-xl) var(--brand-size-md);&quot;&gt;
&lt;table role=&quot;presentation&quot; width=&quot;600&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;width:600px;max-width:600px;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;&quot;&gt;
&lt;!-- Header: logo only, generous whitespace, no nav --&gt;
&lt;tr&gt;
&lt;td style=&quot;padding:var(--brand-size-lg) var(--brand-size-xl);text-align:center;border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);&quot;&gt;
&lt;span style=&quot;font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);letter-spacing:-0.01em;color:var(--brand-color-text);white-space:nowrap;&quot;&gt;Malenia&lt;/span&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- Hero: inverted pyramid — conclusion first, then why it matters, then the one CTA --&gt;
&lt;tr&gt;
&lt;td style=&quot;padding:var(--brand-size-xxl) var(--brand-size-xl) var(--brand-size-lg);text-align:center;background:var(--brand-color-primary-bg);&quot;&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-sm);font-family:var(--brand-font-family);text-transform:uppercase;letter-spacing:0.16em;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-primary);&quot;&gt;Sophisticated&lt;/p&gt;
&lt;h1 style=&quot;margin:0 0 var(--brand-size-md);font-family:var(--display-family);font-size:var(--brand-font-size-heading-2);line-height:1.15;letter-spacing:-0.015em;color:var(--brand-color-text);&quot;&gt;Свобода. Практика. Простота.&lt;/h1&gt;
&lt;p style=&quot;margin:0 auto var(--brand-size-xl);max-width:46ch;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);line-height:1.55;color:var(--brand-color-text-secondary);&quot;&gt;A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.&lt;/p&gt;
&lt;!-- the one primary CTA, above the fold --&gt;
&lt;table role=&quot;presentation&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;margin:0 auto;border-collapse:separate;line-height:100%;&quot;&gt;
&lt;tr&gt;
&lt;td align=&quot;center&quot; bgcolor=&quot;var(--brand-color-primary)&quot; style=&quot;border-radius:var(--brand-border-radius-lg);&quot;&gt;
&lt;a href=&quot;#&quot; target=&quot;_blank&quot; style=&quot;display:inline-block;min-width:200px;padding:16px var(--brand-size-xl);font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);line-height:1.1;color:#ffffff;text-decoration:none;text-align:center;border-radius:var(--brand-border-radius-lg);border:2px solid var(--brand-color-primary);&quot;&gt;Get started with Malenia&lt;/a&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- Body: scannable, human, one idea per block --&gt;
&lt;tr&gt;
&lt;td style=&quot;padding:var(--brand-size-xl) var(--brand-size-xl) var(--brand-size-sm);&quot;&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-md);font-family:var(--brand-font-family);font-size:16px;line-height:1.6;color:var(--brand-color-text);&quot;&gt;Hi there,&lt;/p&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-lg);font-family:var(--brand-font-family);font-size:16px;line-height:1.6;color:var(--brand-color-text-secondary);&quot;&gt;Here is what Malenia gives your team from the first day — no migration project, no setup tax:&lt;/p&gt;
&lt;table role=&quot;presentation&quot; width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;border-collapse:collapse;&quot;&gt;
&lt;tr&gt;
&lt;td valign=&quot;top&quot; style=&quot;width:40px;padding:var(--brand-size-sm) var(--brand-size-sm) var(--brand-size-sm) 0;&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; style=&quot;display:block;&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;9&quot; stroke=&quot;var(--brand-color-primary)&quot; stroke-width=&quot;1.5&quot; opacity=&quot;0.45&quot;/&gt;&lt;path d=&quot;M6 10.2l2.6 2.6L14.2 7.4&quot; stroke=&quot;var(--brand-color-primary)&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot; style=&quot;padding:var(--brand-size-sm) 0;&quot;&gt;
&lt;p style=&quot;margin:0 0 4px;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1.3;&quot;&gt;Network freedom&lt;/p&gt;
&lt;p style=&quot;margin:0;font-family:var(--brand-font-family);font-size:16px;color:var(--brand-color-text-secondary);line-height:1.55;&quot;&gt;Network freedom is built into Malenia from day one — not bolted on later.&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td valign=&quot;top&quot; style=&quot;width:40px;padding:var(--brand-size-sm) var(--brand-size-sm) var(--brand-size-sm) 0;&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; style=&quot;display:block;&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;9&quot; stroke=&quot;var(--brand-color-primary)&quot; stroke-width=&quot;1.5&quot; opacity=&quot;0.45&quot;/&gt;&lt;path d=&quot;M6 10.2l2.6 2.6L14.2 7.4&quot; stroke=&quot;var(--brand-color-primary)&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot; style=&quot;padding:var(--brand-size-sm) 0;&quot;&gt;
&lt;p style=&quot;margin:0 0 4px;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1.3;&quot;&gt;Practical simplicity&lt;/p&gt;
&lt;p style=&quot;margin:0;font-family:var(--brand-font-family);font-size:16px;color:var(--brand-color-text-secondary);line-height:1.55;&quot;&gt;Practical simplicity is built into Malenia from day one — not bolted on later.&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td valign=&quot;top&quot; style=&quot;width:40px;padding:var(--brand-size-sm) var(--brand-size-sm) var(--brand-size-sm) 0;&quot;&gt;&lt;svg width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; style=&quot;display:block;&quot; aria-hidden=&quot;true&quot;&gt;&lt;circle cx=&quot;10&quot; cy=&quot;10&quot; r=&quot;9&quot; stroke=&quot;var(--brand-color-primary)&quot; stroke-width=&quot;1.5&quot; opacity=&quot;0.45&quot;/&gt;&lt;path d=&quot;M6 10.2l2.6 2.6L14.2 7.4&quot; stroke=&quot;var(--brand-color-primary)&quot; stroke-width=&quot;1.6&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;&lt;/td&gt;
&lt;td valign=&quot;top&quot; style=&quot;padding:var(--brand-size-sm) 0;&quot;&gt;
&lt;p style=&quot;margin:0 0 4px;font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);line-height:1.3;&quot;&gt;Aesthetic restraint&lt;/p&gt;
&lt;p style=&quot;margin:0;font-family:var(--brand-font-family);font-size:16px;color:var(--brand-color-text-secondary);line-height:1.55;&quot;&gt;Aesthetic restraint is built into Malenia from day one — not bolted on later.&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- One named proof point: a person beats a paragraph of adjectives --&gt;
&lt;tr&gt;
&lt;td style=&quot;padding:0 var(--brand-size-xl) var(--brand-size-lg);&quot;&gt;
&lt;table role=&quot;presentation&quot; width=&quot;100%&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot;&gt;
&lt;tr&gt;
&lt;td style=&quot;padding:var(--brand-size-lg);background:var(--brand-color-fill-quaternary);border-left:3px solid var(--brand-color-primary);border-radius:var(--brand-border-radius);&quot;&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-sm);font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);line-height:1.55;color:var(--brand-color-text);&quot;&gt;&amp;ldquo;Malenia is the first tool here that actually feels Sophisticated. It was part of our daily flow inside a week.&amp;rdquo;&lt;/p&gt;
&lt;p style=&quot;margin:0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);&quot;&gt;&lt;strong style=&quot;color:var(--brand-color-text);font-weight:var(--brand-font-weight-strong);&quot;&gt;Maya Chen&lt;/strong&gt; &amp;middot; Head of Design, Northwind&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- CTA repeated once near the end — same single action --&gt;
&lt;tr&gt;
&lt;td style=&quot;padding:var(--brand-size-sm) var(--brand-size-xl) var(--brand-size-xl);text-align:center;&quot;&gt;
&lt;table role=&quot;presentation&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;margin:0 auto;border-collapse:separate;line-height:100%;&quot;&gt;
&lt;tr&gt;
&lt;td align=&quot;center&quot; bgcolor=&quot;var(--brand-color-primary)&quot; style=&quot;border-radius:var(--brand-border-radius-lg);&quot;&gt;
&lt;a href=&quot;#&quot; target=&quot;_blank&quot; style=&quot;display:inline-block;min-width:200px;padding:16px var(--brand-size-xl);font-family:var(--brand-font-family);font-size:var(--brand-font-size-lg);font-weight:var(--brand-font-weight-strong);line-height:1.1;color:#ffffff;text-decoration:none;text-align:center;border-radius:var(--brand-border-radius-lg);border:2px solid var(--brand-color-primary);&quot;&gt;Get started with Malenia&lt;/a&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;p style=&quot;margin:var(--brand-size-md) 0 0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:1.5;&quot;&gt;Questions? Just reply to this email — a real person reads every message.&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;!-- Footer: working unsubscribe + physical address placeholder + brand --&gt;
&lt;tr&gt;
&lt;td style=&quot;padding:var(--brand-size-xl) var(--brand-size-xl);background:var(--brand-color-fill-quaternary);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);text-align:center;&quot;&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:1.5;&quot;&gt;You are receiving this because you signed up to hear from Malenia.&lt;/p&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-xs);font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:1.5;&quot;&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; style=&quot;color:var(--brand-color-text-tertiary);text-decoration:underline;&quot;&gt;Update preferences&lt;/a&gt; &amp;nbsp;&amp;middot;&amp;nbsp; &lt;a href=&quot;#&quot; target=&quot;_blank&quot; style=&quot;color:var(--brand-color-text-tertiary);text-decoration:underline;&quot;&gt;Unsubscribe&lt;/a&gt;&lt;/p&gt;
&lt;p style=&quot;margin:0;font-family:var(--brand-font-family);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-quaternary);line-height:1.5;&quot;&gt;Malenia &amp;middot; 100 Market Street, Suite 200 &amp;middot; malenia.space&lt;/p&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;"
sandbox=""
loading="lazy"
title="Malenia email preview"
style="width:200%;height:840px;border:0;transform:scale(0.5);transform-origin:top left;"
></iframe>
</div>
</figure>
<figure style="margin:0;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;">
<figcaption style="padding:var(--brand-size-sm) var(--brand-size-md);font-weight:var(--brand-font-weight-strong);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);text-transform:capitalize;">newsletter</figcaption>
<div style="height:420px;overflow:hidden;background:var(--brand-color-bg-layout);">
<iframe
srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;style data-brand-fonts&gt;
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-600.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 600;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Tenor Sans&quot;;
src: url(&quot;../fonts/tenor-sans-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
&lt;/style&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
&lt;title&gt;Malenia — Newsletter&lt;/title&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&amp;amp;display=swap&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Tenor+Sans&amp;amp;display=swap&quot; /&gt;
&lt;style&gt;
:root {
--brand-color-primary: #c9a84c;
--brand-color-primary-bg: #fffef0;
--brand-color-primary-bg-hover: #fcfaed;
--brand-color-primary-border: #f0eace;
--brand-color-primary-border-hover: #e3d69f;
--brand-color-primary-hover: #d6bf74;
--brand-color-primary-active: #a38336;
--brand-color-primary-text: #573e14;
--brand-color-success: #52c41a;
--brand-color-success-bg: #f6ffed;
--brand-color-success-border: #b6eb8f;
--brand-color-success-hover: #72d13d;
--brand-color-success-active: #389e0d;
--brand-color-warning: #faad14;
--brand-color-warning-bg: #fffbe6;
--brand-color-warning-border: #ffe58f;
--brand-color-warning-hover: #ffc53d;
--brand-color-warning-active: #d48806;
--brand-color-error: #ff4d4f;
--brand-color-error-bg: #fff2f0;
--brand-color-error-border: #ffccc7;
--brand-color-error-hover: #ff7875;
--brand-color-error-active: #d9363d;
--brand-color-info: #c9a84c;
--brand-color-info-bg: #fffef0;
--brand-color-info-border: #f0eace;
--brand-color-link: #c9a84c;
--brand-color-link-hover: #d6bf74;
--brand-color-link-active: #a38336;
--brand-color-text: #35312b;
--brand-color-text-secondary: #68655f;
--brand-color-text-tertiary: #95928c;
--brand-color-text-quaternary: #c2bfba;
--brand-color-fill: #d8d5d0;
--brand-color-fill-secondary: #ede9e4;
--brand-color-fill-tertiary: #f1eee9;
--brand-color-fill-quaternary: #f6f3ed;
--brand-color-bg-layout: #f1eee9;
--brand-color-bg-container: #faf7f2;
--brand-color-bg-elevated: #faf7f2;
--brand-color-border: #d8d5d0;
--brand-color-border-secondary: #ede9e4;
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--brand-font-size: 14px;
--brand-font-size-sm: 12px;
--brand-font-size-lg: 18px;
--brand-font-size-xl: 22px;
--brand-font-size-heading-1: 38px;
--brand-font-size-heading-2: 32px;
--brand-font-size-heading-3: 26px;
--brand-font-size-heading-4: 22px;
--brand-font-size-heading-5: 18px;
--brand-line-height: 1.5714285714285714;
--brand-line-height-heading: 1.25;
--brand-font-weight-strong: 600;
--brand-size-xxs: 4px;
--brand-size-xs: 8px;
--brand-size-sm: 12px;
--brand-size: 16px;
--brand-size-md: 20px;
--brand-size-lg: 24px;
--brand-size-xl: 32px;
--brand-size-xxl: 48px;
--brand-border-radius-xs: 3px;
--brand-border-radius-sm: 5px;
--brand-border-radius: 8px;
--brand-border-radius-lg: 10px;
--brand-line-width: 1px;
--brand-control-height-xs: 16px;
--brand-control-height-sm: 24px;
--brand-control-height: 32px;
--brand-control-height-lg: 40px;
--brand-motion-duration-fast: 0.1s;
--brand-motion-duration-mid: 0.2s;
--brand-motion-duration-slow: 0.3s;
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--brand-primary-palette-1: #fffef0;
--brand-primary-palette-2: #fcfaed;
--brand-primary-palette-3: #f0eace;
--brand-primary-palette-4: #e3d69f;
--brand-primary-palette-5: #d6bf74;
--brand-primary-palette-6: #c9a84c;
--brand-primary-palette-7: #a38336;
--brand-primary-palette-8: #7d5f23;
--brand-primary-palette-9: #573e14;
--brand-primary-palette-10: #30210b;
--brand-presets-red-1: #fff1f0;
--brand-presets-red-2: #ffcbc7;
--brand-presets-red-3: #ffa39e;
--brand-presets-red-4: #ff7775;
--brand-presets-red-5: #ff4d50;
--brand-presets-red-6: #f5222d;
--brand-presets-red-7: #cf1323;
--brand-presets-red-8: #a8071a;
--brand-presets-red-9: #820014;
--brand-presets-red-10: #5c0011;
--brand-presets-volcano-1: #fff2e8;
--brand-presets-volcano-2: #ffd8bf;
--brand-presets-volcano-3: #ffbb96;
--brand-presets-volcano-4: #ff9c6e;
--brand-presets-volcano-5: #ff7a45;
--brand-presets-volcano-6: #fa541c;
--brand-presets-volcano-7: #d4380d;
--brand-presets-volcano-8: #ad2202;
--brand-presets-volcano-9: #871500;
--brand-presets-volcano-10: #610c00;
--brand-presets-orange-1: #fff7e6;
--brand-presets-orange-2: #ffe7ba;
--brand-presets-orange-3: #ffd591;
--brand-presets-orange-4: #ffc069;
--brand-presets-orange-5: #ffa940;
--brand-presets-orange-6: #fa8c16;
--brand-presets-orange-7: #d46b08;
--brand-presets-orange-8: #ad4e00;
--brand-presets-orange-9: #873800;
--brand-presets-orange-10: #612500;
--brand-presets-gold-1: #fffbe6;
--brand-presets-gold-2: #fff1b8;
--brand-presets-gold-3: #ffe58f;
--brand-presets-gold-4: #ffd666;
--brand-presets-gold-5: #ffc53d;
--brand-presets-gold-6: #faad14;
--brand-presets-gold-7: #d48806;
--brand-presets-gold-8: #ad6800;
--brand-presets-gold-9: #874c00;
--brand-presets-gold-10: #613400;
--brand-presets-yellow-1: #feffe6;
--brand-presets-yellow-2: #ffffb8;
--brand-presets-yellow-3: #fffb8f;
--brand-presets-yellow-4: #fff566;
--brand-presets-yellow-5: #ffeb3d;
--brand-presets-yellow-6: #fadb14;
--brand-presets-yellow-7: #d4b106;
--brand-presets-yellow-8: #ad8a00;
--brand-presets-yellow-9: #876700;
--brand-presets-yellow-10: #614700;
--brand-presets-lime-1: #fcffe6;
--brand-presets-lime-2: #f4ffb8;
--brand-presets-lime-3: #eaff8f;
--brand-presets-lime-4: #d3f261;
--brand-presets-lime-5: #bae637;
--brand-presets-lime-6: #a0d911;
--brand-presets-lime-7: #7bb305;
--brand-presets-lime-8: #5b8c00;
--brand-presets-lime-9: #3f6600;
--brand-presets-lime-10: #254000;
--brand-presets-green-1: #f6ffed;
--brand-presets-green-2: #d9f7be;
--brand-presets-green-3: #b6eb8f;
--brand-presets-green-4: #94de64;
--brand-presets-green-5: #72d13d;
--brand-presets-green-6: #52c41a;
--brand-presets-green-7: #389e0d;
--brand-presets-green-8: #227804;
--brand-presets-green-9: #135200;
--brand-presets-green-10: #092b00;
--brand-presets-cyan-1: #e6fffb;
--brand-presets-cyan-2: #b5f5ec;
--brand-presets-cyan-3: #87e8de;
--brand-presets-cyan-4: #5cdbd3;
--brand-presets-cyan-5: #36cfc9;
--brand-presets-cyan-6: #13c2c2;
--brand-presets-cyan-7: #08979c;
--brand-presets-cyan-8: #006d75;
--brand-presets-cyan-9: #00474f;
--brand-presets-cyan-10: #002329;
--brand-presets-blue-1: #e6f4ff;
--brand-presets-blue-2: #bae0ff;
--brand-presets-blue-3: #91caff;
--brand-presets-blue-4: #69b1ff;
--brand-presets-blue-5: #4096ff;
--brand-presets-blue-6: #1677ff;
--brand-presets-blue-7: #0958d9;
--brand-presets-blue-8: #003eb3;
--brand-presets-blue-9: #002c8c;
--brand-presets-blue-10: #001d66;
--brand-presets-geekblue-1: #f0f5ff;
--brand-presets-geekblue-2: #d6e4ff;
--brand-presets-geekblue-3: #adc6ff;
--brand-presets-geekblue-4: #85a5ff;
--brand-presets-geekblue-5: #597df7;
--brand-presets-geekblue-6: #2f54eb;
--brand-presets-geekblue-7: #1d39c4;
--brand-presets-geekblue-8: #10229e;
--brand-presets-geekblue-9: #061178;
--brand-presets-geekblue-10: #030852;
--brand-presets-purple-1: #f9f0ff;
--brand-presets-purple-2: #efdbff;
--brand-presets-purple-3: #d4adf7;
--brand-presets-purple-4: #b37feb;
--brand-presets-purple-5: #9254de;
--brand-presets-purple-6: #722ed1;
--brand-presets-purple-7: #531dab;
--brand-presets-purple-8: #391085;
--brand-presets-purple-9: #22075e;
--brand-presets-purple-10: #120338;
--brand-presets-magenta-1: #fff0f6;
--brand-presets-magenta-2: #ffd6e7;
--brand-presets-magenta-3: #ffadd2;
--brand-presets-magenta-4: #ff85bf;
--brand-presets-magenta-5: #f759aa;
--brand-presets-magenta-6: #eb2f96;
--brand-presets-magenta-7: #c41d7e;
--brand-presets-magenta-8: #9e1067;
--brand-presets-magenta-9: #780650;
--brand-presets-magenta-10: #520339;
--brand-presets-grey-1: #a6a6a6;
--brand-presets-grey-2: #999999;
--brand-presets-grey-3: #8c8c8c;
--brand-presets-grey-4: #808080;
--brand-presets-grey-5: #737373;
--brand-presets-grey-6: #666666;
--brand-presets-grey-7: #404040;
--brand-presets-grey-8: #1a1a1a;
--brand-presets-grey-9: #000000;
--brand-presets-grey-10: #000000;
}
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--brand-font-family);
font-size: var(--brand-font-size);
line-height: var(--brand-line-height);
color: var(--brand-color-text);
background: var(--brand-color-bg-layout);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--brand-color-link); text-decoration: none; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--display-family);
line-height: var(--brand-line-height-heading);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-text);
overflow-wrap: break-word;
}
p { margin: 0; overflow-wrap: break-word; }
img, svg { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.kicker {
display: block;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: var(--brand-font-size-sm);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-primary);
margin-bottom: var(--brand-size-sm);
}
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
a[role=&quot;button&quot;]{transition:filter .15s ease,transform .15s ease}
a[role=&quot;button&quot;]:hover{filter:brightness(1.07)}
a[role=&quot;button&quot;]:active{filter:brightness(.95);transform:translateY(0.5px)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
details.kit-acc&gt;summary{list-style:none;cursor:pointer}
details.kit-acc&gt;summary::-webkit-details-marker{display:none}
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div style=&quot;padding:var(--brand-size-xl) var(--brand-size-md);&quot;&gt;
&lt;div style=&quot;max-width:600px;margin:0 auto;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;&quot;&gt;
&lt;!-- preheader: shown in the inbox preview, hidden in body --&gt;
&lt;div style=&quot;display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:var(--brand-color-bg-container);&quot;&gt;Свобода. Практика. Простота.&lt;/div&gt;
&lt;table role=&quot;presentation&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;width:100%;border-collapse:collapse;&quot;&gt;
&lt;!-- masthead --&gt;
&lt;tr&gt;&lt;td style=&quot;padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-lg);text-align:center;border-bottom:var(--brand-line-width) solid var(--brand-color-border);&quot;&gt;
&lt;div style=&quot;display:inline-block;width:32px;height:var(--brand-line-width);background:var(--brand-color-primary);margin-bottom:var(--brand-size-md);&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-heading-3);letter-spacing:-0.02em;color:var(--brand-color-text);&quot;&gt;Malenia&lt;/div&gt;
&lt;div style=&quot;margin-top:var(--brand-size-xs);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);text-transform:uppercase;letter-spacing:0.2em;&quot;&gt;Sophisticated reads · Issue 01&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;!-- lede: inverted pyramid — core line + why-relevant, above the fold --&gt;
&lt;tr&gt;&lt;td style=&quot;padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-md);&quot;&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-xs);text-transform:uppercase;letter-spacing:0.16em;font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-primary);&quot;&gt;In this issue&lt;/p&gt;
&lt;h1 style=&quot;font-size:var(--brand-font-size-heading-2);line-height:1.18;letter-spacing:-0.015em;margin:0 0 var(--brand-size-sm);color:var(--brand-color-text);&quot;&gt;Network freedom&lt;/h1&gt;
&lt;p style=&quot;margin:0;color:var(--brand-color-text-secondary);font-size:var(--brand-font-size-lg);line-height:1.6;&quot;&gt;A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.&lt;/p&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;!-- primary CTA, surfaced above the fold (one job) --&gt;
&lt;tr&gt;&lt;td style=&quot;padding:0 var(--brand-size-xxl) var(--brand-size-xl);text-align:center;&quot;&gt;
&lt;table role=&quot;presentation&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;margin:0 auto;&quot;&gt;
&lt;tr&gt;&lt;td style=&quot;border-radius:var(--brand-border-radius);&quot;&gt;&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)&quot;&gt;Read this issue&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;div style=&quot;height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin:0 var(--brand-size-xxl);&quot;&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;!-- numbered stories --&gt;
&lt;tr&gt;&lt;td style=&quot;padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-lg);&quot;&gt;
&lt;table role=&quot;presentation&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;width:100%;&quot;&gt;
&lt;tr&gt;
&lt;td valign=&quot;top&quot; style=&quot;width:54px;padding-right:var(--brand-size-md);&quot;&gt;
&lt;div style=&quot;font-family:var(--display-family);font-size:var(--brand-font-size-heading-3);font-weight:var(--brand-font-weight-strong);line-height:1;color:var(--brand-color-primary);letter-spacing:-0.02em;&quot;&gt;01&lt;/div&gt;
&lt;div style=&quot;margin-top:var(--brand-size-xs);width:24px;height:var(--brand-line-width);background:var(--brand-color-primary-border);&quot;&gt;&lt;/div&gt;
&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;h2 style=&quot;font-size:var(--brand-font-size-heading-4);line-height:1.25;letter-spacing:-0.01em;margin:0 0 var(--brand-size-xs);color:var(--brand-color-text);&quot;&gt;Network freedom&lt;/h2&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-md);color:var(--brand-color-text-secondary);font-size:var(--brand-font-size);line-height:var(--brand-line-height);&quot;&gt;Sophisticated by design — and built into every surface Malenia ships.&lt;/p&gt;
&lt;a href=&quot;#&quot; style=&quot;font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-link);text-decoration:none;&quot;&gt;Read the full story &amp;rarr;&lt;/a&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;div style=&quot;height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin:0 var(--brand-size-xxl);&quot;&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td style=&quot;padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-lg);&quot;&gt;
&lt;table role=&quot;presentation&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;width:100%;&quot;&gt;
&lt;tr&gt;
&lt;td valign=&quot;top&quot; style=&quot;width:54px;padding-right:var(--brand-size-md);&quot;&gt;
&lt;div style=&quot;font-family:var(--display-family);font-size:var(--brand-font-size-heading-3);font-weight:var(--brand-font-weight-strong);line-height:1;color:var(--brand-color-primary);letter-spacing:-0.02em;&quot;&gt;02&lt;/div&gt;
&lt;div style=&quot;margin-top:var(--brand-size-xs);width:24px;height:var(--brand-line-width);background:var(--brand-color-primary-border);&quot;&gt;&lt;/div&gt;
&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;h2 style=&quot;font-size:var(--brand-font-size-heading-4);line-height:1.25;letter-spacing:-0.01em;margin:0 0 var(--brand-size-xs);color:var(--brand-color-text);&quot;&gt;Practical simplicity&lt;/h2&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-md);color:var(--brand-color-text-secondary);font-size:var(--brand-font-size);line-height:var(--brand-line-height);&quot;&gt;Quiet by design — and built into every surface Malenia ships.&lt;/p&gt;
&lt;a href=&quot;#&quot; style=&quot;font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-link);text-decoration:none;&quot;&gt;See how it works &amp;rarr;&lt;/a&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;div style=&quot;height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin:0 var(--brand-size-xxl);&quot;&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td style=&quot;padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-lg);&quot;&gt;
&lt;table role=&quot;presentation&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;width:100%;&quot;&gt;
&lt;tr&gt;
&lt;td valign=&quot;top&quot; style=&quot;width:54px;padding-right:var(--brand-size-md);&quot;&gt;
&lt;div style=&quot;font-family:var(--display-family);font-size:var(--brand-font-size-heading-3);font-weight:var(--brand-font-weight-strong);line-height:1;color:var(--brand-color-primary);letter-spacing:-0.02em;&quot;&gt;03&lt;/div&gt;
&lt;div style=&quot;margin-top:var(--brand-size-xs);width:24px;height:var(--brand-line-width);background:var(--brand-color-primary-border);&quot;&gt;&lt;/div&gt;
&lt;/td&gt;
&lt;td valign=&quot;top&quot;&gt;
&lt;h2 style=&quot;font-size:var(--brand-font-size-heading-4);line-height:1.25;letter-spacing:-0.01em;margin:0 0 var(--brand-size-xs);color:var(--brand-color-text);&quot;&gt;Aesthetic restraint&lt;/h2&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-md);color:var(--brand-color-text-secondary);font-size:var(--brand-font-size);line-height:var(--brand-line-height);&quot;&gt;Essential by design — and built into every surface Malenia ships.&lt;/p&gt;
&lt;a href=&quot;#&quot; style=&quot;font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size);color:var(--brand-color-link);text-decoration:none;&quot;&gt;Get the details &amp;rarr;&lt;/a&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;div style=&quot;height:var(--brand-line-width);background:var(--brand-color-border-secondary);margin:0 var(--brand-size-xxl);&quot;&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;!-- closing CTA: same action, echoed once (email.md) --&gt;
&lt;tr&gt;&lt;td style=&quot;padding:var(--brand-size-xl) var(--brand-size-xxl) var(--brand-size-xxl);text-align:center;&quot;&gt;
&lt;p style=&quot;margin:0 0 var(--brand-size-md);color:var(--brand-color-text-secondary);font-size:var(--brand-font-size);&quot;&gt;That's the issue. Malenia lands in your inbox next week.&lt;/p&gt;
&lt;table role=&quot;presentation&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;margin:0 auto;&quot;&gt;
&lt;tr&gt;&lt;td style=&quot;border-radius:var(--brand-border-radius);&quot;&gt;&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)&quot;&gt;Read this issue&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
&lt;div style=&quot;padding:var(--brand-size-lg) var(--brand-size-xl);background:var(--brand-color-fill-quaternary);color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size-sm);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);text-align:center;&quot;&gt;
&lt;p style=&quot;margin-bottom:var(--brand-size-xs);&quot;&gt;You're receiving this because you follow Malenia.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-tertiary);text-decoration:underline;&quot;&gt;View in browser&lt;/a&gt; &amp;nbsp;&amp;middot;&amp;nbsp; &lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-tertiary);text-decoration:underline;&quot;&gt;Preferences&lt;/a&gt; &amp;nbsp;&amp;middot;&amp;nbsp; &lt;a href=&quot;#&quot; style=&quot;color:var(--brand-color-text-tertiary);text-decoration:underline;&quot;&gt;Unsubscribe&lt;/a&gt;&lt;/p&gt;
&lt;p style=&quot;margin-top:var(--brand-size-xs);&quot;&gt;&amp;copy; Malenia &amp;middot; malenia.space&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;"
sandbox=""
loading="lazy"
title="Malenia newsletter preview"
style="width:200%;height:840px;border:0;transform:scale(0.5);transform-origin:top left;"
></iframe>
</div>
</figure>
<figure style="margin:0;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);overflow:hidden;">
<figcaption style="padding:var(--brand-size-sm) var(--brand-size-md);font-weight:var(--brand-font-weight-strong);border-bottom:var(--brand-line-width) solid var(--brand-color-border-secondary);text-transform:capitalize;">form</figcaption>
<div style="height:420px;overflow:hidden;background:var(--brand-color-bg-layout);">
<iframe
srcdoc="&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;style data-brand-fonts&gt;
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400-italic.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: italic;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-300.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 300;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Cormorant Garamond&quot;;
src: url(&quot;../fonts/cormorant-garamond-600.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 600;
font-style: normal;
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
font-display: swap;
}
@font-face {
font-family: &quot;Tenor Sans&quot;;
src: url(&quot;../fonts/tenor-sans-400.woff2&quot;) format(&quot;woff2&quot;);
font-weight: 400;
font-style: normal;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
font-display: swap;
}
&lt;/style&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
&lt;title&gt;Malenia — Get started&lt;/title&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot; /&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&amp;amp;display=swap&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://fonts.googleapis.com/css2?family=Tenor+Sans&amp;amp;display=swap&quot; /&gt;
&lt;style&gt;
:root {
--brand-color-primary: #c9a84c;
--brand-color-primary-bg: #fffef0;
--brand-color-primary-bg-hover: #fcfaed;
--brand-color-primary-border: #f0eace;
--brand-color-primary-border-hover: #e3d69f;
--brand-color-primary-hover: #d6bf74;
--brand-color-primary-active: #a38336;
--brand-color-primary-text: #573e14;
--brand-color-success: #52c41a;
--brand-color-success-bg: #f6ffed;
--brand-color-success-border: #b6eb8f;
--brand-color-success-hover: #72d13d;
--brand-color-success-active: #389e0d;
--brand-color-warning: #faad14;
--brand-color-warning-bg: #fffbe6;
--brand-color-warning-border: #ffe58f;
--brand-color-warning-hover: #ffc53d;
--brand-color-warning-active: #d48806;
--brand-color-error: #ff4d4f;
--brand-color-error-bg: #fff2f0;
--brand-color-error-border: #ffccc7;
--brand-color-error-hover: #ff7875;
--brand-color-error-active: #d9363d;
--brand-color-info: #c9a84c;
--brand-color-info-bg: #fffef0;
--brand-color-info-border: #f0eace;
--brand-color-link: #c9a84c;
--brand-color-link-hover: #d6bf74;
--brand-color-link-active: #a38336;
--brand-color-text: #35312b;
--brand-color-text-secondary: #68655f;
--brand-color-text-tertiary: #95928c;
--brand-color-text-quaternary: #c2bfba;
--brand-color-fill: #d8d5d0;
--brand-color-fill-secondary: #ede9e4;
--brand-color-fill-tertiary: #f1eee9;
--brand-color-fill-quaternary: #f6f3ed;
--brand-color-bg-layout: #f1eee9;
--brand-color-bg-container: #faf7f2;
--brand-color-bg-elevated: #faf7f2;
--brand-color-border: #d8d5d0;
--brand-color-border-secondary: #ede9e4;
--brand-font-family: 'Tenor Sans', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--brand-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--brand-font-size: 14px;
--brand-font-size-sm: 12px;
--brand-font-size-lg: 18px;
--brand-font-size-xl: 22px;
--brand-font-size-heading-1: 38px;
--brand-font-size-heading-2: 32px;
--brand-font-size-heading-3: 26px;
--brand-font-size-heading-4: 22px;
--brand-font-size-heading-5: 18px;
--brand-line-height: 1.5714285714285714;
--brand-line-height-heading: 1.25;
--brand-font-weight-strong: 600;
--brand-size-xxs: 4px;
--brand-size-xs: 8px;
--brand-size-sm: 12px;
--brand-size: 16px;
--brand-size-md: 20px;
--brand-size-lg: 24px;
--brand-size-xl: 32px;
--brand-size-xxl: 48px;
--brand-border-radius-xs: 3px;
--brand-border-radius-sm: 5px;
--brand-border-radius: 8px;
--brand-border-radius-lg: 10px;
--brand-line-width: 1px;
--brand-control-height-xs: 16px;
--brand-control-height-sm: 24px;
--brand-control-height: 32px;
--brand-control-height-lg: 40px;
--brand-motion-duration-fast: 0.1s;
--brand-motion-duration-mid: 0.2s;
--brand-motion-duration-slow: 0.3s;
--brand-motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
--brand-motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--brand-primary-palette-1: #fffef0;
--brand-primary-palette-2: #fcfaed;
--brand-primary-palette-3: #f0eace;
--brand-primary-palette-4: #e3d69f;
--brand-primary-palette-5: #d6bf74;
--brand-primary-palette-6: #c9a84c;
--brand-primary-palette-7: #a38336;
--brand-primary-palette-8: #7d5f23;
--brand-primary-palette-9: #573e14;
--brand-primary-palette-10: #30210b;
--brand-presets-red-1: #fff1f0;
--brand-presets-red-2: #ffcbc7;
--brand-presets-red-3: #ffa39e;
--brand-presets-red-4: #ff7775;
--brand-presets-red-5: #ff4d50;
--brand-presets-red-6: #f5222d;
--brand-presets-red-7: #cf1323;
--brand-presets-red-8: #a8071a;
--brand-presets-red-9: #820014;
--brand-presets-red-10: #5c0011;
--brand-presets-volcano-1: #fff2e8;
--brand-presets-volcano-2: #ffd8bf;
--brand-presets-volcano-3: #ffbb96;
--brand-presets-volcano-4: #ff9c6e;
--brand-presets-volcano-5: #ff7a45;
--brand-presets-volcano-6: #fa541c;
--brand-presets-volcano-7: #d4380d;
--brand-presets-volcano-8: #ad2202;
--brand-presets-volcano-9: #871500;
--brand-presets-volcano-10: #610c00;
--brand-presets-orange-1: #fff7e6;
--brand-presets-orange-2: #ffe7ba;
--brand-presets-orange-3: #ffd591;
--brand-presets-orange-4: #ffc069;
--brand-presets-orange-5: #ffa940;
--brand-presets-orange-6: #fa8c16;
--brand-presets-orange-7: #d46b08;
--brand-presets-orange-8: #ad4e00;
--brand-presets-orange-9: #873800;
--brand-presets-orange-10: #612500;
--brand-presets-gold-1: #fffbe6;
--brand-presets-gold-2: #fff1b8;
--brand-presets-gold-3: #ffe58f;
--brand-presets-gold-4: #ffd666;
--brand-presets-gold-5: #ffc53d;
--brand-presets-gold-6: #faad14;
--brand-presets-gold-7: #d48806;
--brand-presets-gold-8: #ad6800;
--brand-presets-gold-9: #874c00;
--brand-presets-gold-10: #613400;
--brand-presets-yellow-1: #feffe6;
--brand-presets-yellow-2: #ffffb8;
--brand-presets-yellow-3: #fffb8f;
--brand-presets-yellow-4: #fff566;
--brand-presets-yellow-5: #ffeb3d;
--brand-presets-yellow-6: #fadb14;
--brand-presets-yellow-7: #d4b106;
--brand-presets-yellow-8: #ad8a00;
--brand-presets-yellow-9: #876700;
--brand-presets-yellow-10: #614700;
--brand-presets-lime-1: #fcffe6;
--brand-presets-lime-2: #f4ffb8;
--brand-presets-lime-3: #eaff8f;
--brand-presets-lime-4: #d3f261;
--brand-presets-lime-5: #bae637;
--brand-presets-lime-6: #a0d911;
--brand-presets-lime-7: #7bb305;
--brand-presets-lime-8: #5b8c00;
--brand-presets-lime-9: #3f6600;
--brand-presets-lime-10: #254000;
--brand-presets-green-1: #f6ffed;
--brand-presets-green-2: #d9f7be;
--brand-presets-green-3: #b6eb8f;
--brand-presets-green-4: #94de64;
--brand-presets-green-5: #72d13d;
--brand-presets-green-6: #52c41a;
--brand-presets-green-7: #389e0d;
--brand-presets-green-8: #227804;
--brand-presets-green-9: #135200;
--brand-presets-green-10: #092b00;
--brand-presets-cyan-1: #e6fffb;
--brand-presets-cyan-2: #b5f5ec;
--brand-presets-cyan-3: #87e8de;
--brand-presets-cyan-4: #5cdbd3;
--brand-presets-cyan-5: #36cfc9;
--brand-presets-cyan-6: #13c2c2;
--brand-presets-cyan-7: #08979c;
--brand-presets-cyan-8: #006d75;
--brand-presets-cyan-9: #00474f;
--brand-presets-cyan-10: #002329;
--brand-presets-blue-1: #e6f4ff;
--brand-presets-blue-2: #bae0ff;
--brand-presets-blue-3: #91caff;
--brand-presets-blue-4: #69b1ff;
--brand-presets-blue-5: #4096ff;
--brand-presets-blue-6: #1677ff;
--brand-presets-blue-7: #0958d9;
--brand-presets-blue-8: #003eb3;
--brand-presets-blue-9: #002c8c;
--brand-presets-blue-10: #001d66;
--brand-presets-geekblue-1: #f0f5ff;
--brand-presets-geekblue-2: #d6e4ff;
--brand-presets-geekblue-3: #adc6ff;
--brand-presets-geekblue-4: #85a5ff;
--brand-presets-geekblue-5: #597df7;
--brand-presets-geekblue-6: #2f54eb;
--brand-presets-geekblue-7: #1d39c4;
--brand-presets-geekblue-8: #10229e;
--brand-presets-geekblue-9: #061178;
--brand-presets-geekblue-10: #030852;
--brand-presets-purple-1: #f9f0ff;
--brand-presets-purple-2: #efdbff;
--brand-presets-purple-3: #d4adf7;
--brand-presets-purple-4: #b37feb;
--brand-presets-purple-5: #9254de;
--brand-presets-purple-6: #722ed1;
--brand-presets-purple-7: #531dab;
--brand-presets-purple-8: #391085;
--brand-presets-purple-9: #22075e;
--brand-presets-purple-10: #120338;
--brand-presets-magenta-1: #fff0f6;
--brand-presets-magenta-2: #ffd6e7;
--brand-presets-magenta-3: #ffadd2;
--brand-presets-magenta-4: #ff85bf;
--brand-presets-magenta-5: #f759aa;
--brand-presets-magenta-6: #eb2f96;
--brand-presets-magenta-7: #c41d7e;
--brand-presets-magenta-8: #9e1067;
--brand-presets-magenta-9: #780650;
--brand-presets-magenta-10: #520339;
--brand-presets-grey-1: #a6a6a6;
--brand-presets-grey-2: #999999;
--brand-presets-grey-3: #8c8c8c;
--brand-presets-grey-4: #808080;
--brand-presets-grey-5: #737373;
--brand-presets-grey-6: #666666;
--brand-presets-grey-7: #404040;
--brand-presets-grey-8: #1a1a1a;
--brand-presets-grey-9: #000000;
--brand-presets-grey-10: #000000;
}
:root { --display-family: 'Cormorant Garamond', serif, var(--brand-font-family); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--brand-font-family);
font-size: var(--brand-font-size);
line-height: var(--brand-line-height);
color: var(--brand-color-text);
background: var(--brand-color-bg-layout);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: var(--brand-color-link); text-decoration: none; }
h1, h2, h3, h4 {
margin: 0;
font-family: var(--display-family);
line-height: var(--brand-line-height-heading);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-text);
overflow-wrap: break-word;
}
p { margin: 0; overflow-wrap: break-word; }
img, svg { max-width: 100%; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
.kicker {
display: block;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: var(--brand-font-size-sm);
font-weight: var(--brand-font-weight-strong);
color: var(--brand-color-primary);
margin-bottom: var(--brand-size-sm);
}
.clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
a[role=&quot;button&quot;]{transition:filter .15s ease,transform .15s ease}
a[role=&quot;button&quot;]:hover{filter:brightness(1.07)}
a[role=&quot;button&quot;]:active{filter:brightness(.95);transform:translateY(0.5px)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-color-primary)!important;box-shadow:0 0 0 3px var(--brand-color-primary-bg);outline:none}
details.kit-acc&gt;summary{list-style:none;cursor:pointer}
details.kit-acc&gt;summary::-webkit-details-marker{display:none}
details.kit-acc .kit-acc-icon{transition:transform .18s ease}
details.kit-acc[open] .kit-acc-icon{transform:rotate(45deg)}
.form-split { display: grid; grid-template-columns: minmax(320px, 4.6fr) minmax(380px, 5.4fr); min-height: 100vh; }
@media (max-width: 900px) { .form-split { grid-template-columns: 1fr; } .form-brand { min-height: 340px; } }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--brand-size); }
@media (max-width: 540px) { .form-grid-2 { grid-template-columns: 1fr; } }
.fld input:focus, .fld textarea:focus, .fld select:focus { border-color: var(--brand-color-primary) !important; box-shadow: 0 0 0 3px var(--brand-color-primary-bg); }
.fld input:invalid:not(:placeholder-shown) { border-color: var(--brand-color-error); }
.fld input:invalid:not(:placeholder-shown) ~ .fld-err { display: block; }
.fld-err { display: none; margin: var(--brand-size-xxs) 0 0; font-size: var(--brand-font-size-sm); color: var(--brand-color-error); }
.form-card { transition: box-shadow var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out); }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;form-split&quot;&gt;
&lt;div class=&quot;form-brand&quot; style=&quot;background:var(--brand-color-primary);color:#fff;padding:clamp(32px,5vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:var(--brand-size-xl);position:relative;overflow:hidden;&quot;&gt;
&lt;svg width=&quot;220&quot; height=&quot;220&quot; viewBox=&quot;0 0 220 220&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; style=&quot;position:absolute;top:-40px;right:-40px;opacity:0.18;color:#fff;&quot;&gt;&lt;defs&gt;&lt;pattern id=&quot;fdot&quot; width=&quot;22&quot; height=&quot;22&quot; patternUnits=&quot;userSpaceOnUse&quot;&gt;&lt;circle cx=&quot;2&quot; cy=&quot;2&quot; r=&quot;1.6&quot; fill=&quot;currentColor&quot;/&gt;&lt;/pattern&gt;&lt;/defs&gt;&lt;rect width=&quot;220&quot; height=&quot;220&quot; fill=&quot;url(#fdot)&quot;/&gt;&lt;/svg&gt;
&lt;div style=&quot;position:absolute;bottom:-140px;left:-100px;width:320px;height:320px;border-radius:50%;background:var(--brand-color-primary-active);opacity:0.45;&quot;&gt;&lt;/div&gt;
&lt;div style=&quot;position:relative;display:flex;align-items:center;gap:var(--brand-size-sm);&quot;&gt;
&lt;span style=&quot;display:inline-flex;width:30px;height:30px;border-radius:var(--brand-border-radius);background:rgba(255,255,255,0.16);align-items:center;justify-content:center;&quot;&gt;
&lt;svg width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 14 14&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 7l3.5 3.5L12.5 3&quot; stroke=&quot;#fff&quot; stroke-width=&quot;1.8&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;span style=&quot;font-family:var(--display-family);font-weight:var(--brand-font-weight-strong);font-size:var(--brand-font-size-lg);letter-spacing:-0.01em;color:#fff;white-space:nowrap;&quot;&gt;Malenia&lt;/span&gt;
&lt;/div&gt;
&lt;div style=&quot;position:relative;max-width:42ch;&quot;&gt;
&lt;h1 style=&quot;color:#fff;font-size:clamp(28px,3.4vw,42px);letter-spacing:-0.02em;line-height:1.08;margin-bottom:var(--brand-size-md);&quot;&gt;Свобода. Практика. Простота.&lt;/h1&gt;
&lt;p class=&quot;clamp-3&quot; style=&quot;color:rgba(255,255,255,0.82);font-size:var(--brand-font-size-lg);line-height:1.55;margin-bottom:var(--brand-size-lg);&quot;&gt;A minimalist, high-aesthetic brand focused on network freedom and simplicity, characterized by a luxury-leaning, archival visual language.&lt;/p&gt;
&lt;ul style=&quot;list-style:none;margin:0;padding:0;&quot;&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-xs) 0;color:rgba(255,255,255,0.92);font-size:var(--brand-font-size-lg);line-height:1.45;&quot;&gt;
&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 18 18&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; style=&quot;flex:0 0 auto;margin-top:3px;&quot;&gt;&lt;path d=&quot;M3.5 9.5L7 13l7.5-8&quot; stroke=&quot;#fff&quot; stroke-width=&quot;1.8&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;
&lt;span&gt;Network freedom&lt;/span&gt;
&lt;/li&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-xs) 0;color:rgba(255,255,255,0.92);font-size:var(--brand-font-size-lg);line-height:1.45;&quot;&gt;
&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 18 18&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; style=&quot;flex:0 0 auto;margin-top:3px;&quot;&gt;&lt;path d=&quot;M3.5 9.5L7 13l7.5-8&quot; stroke=&quot;#fff&quot; stroke-width=&quot;1.8&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;
&lt;span&gt;Practical simplicity&lt;/span&gt;
&lt;/li&gt;&lt;li style=&quot;display:flex;gap:var(--brand-size-sm);align-items:flex-start;padding:var(--brand-size-xs) 0;color:rgba(255,255,255,0.92);font-size:var(--brand-font-size-lg);line-height:1.45;&quot;&gt;
&lt;svg width=&quot;18&quot; height=&quot;18&quot; viewBox=&quot;0 0 18 18&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; style=&quot;flex:0 0 auto;margin-top:3px;&quot;&gt;&lt;path d=&quot;M3.5 9.5L7 13l7.5-8&quot; stroke=&quot;#fff&quot; stroke-width=&quot;1.8&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;
&lt;span&gt;Aesthetic restraint&lt;/span&gt;
&lt;/li&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;div style=&quot;position:relative;display:flex;align-items:center;gap:var(--brand-size-sm);color:rgba(255,255,255,0.7);font-size:var(--brand-font-size-sm);&quot;&gt;
&lt;span style=&quot;display:inline-flex;width:8px;height:8px;border-radius:50%;background:var(--brand-color-success);box-shadow:0 0 0 4px rgba(255,255,255,0.12);&quot;&gt;&lt;/span&gt;
&lt;span&gt;Restrained, archival, sophisticated, and minimal.&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div style=&quot;display:flex;align-items:center;justify-content:center;padding:clamp(24px,4vw,64px);background:var(--brand-color-bg-layout);&quot;&gt;
&lt;div class=&quot;form-card&quot; style=&quot;width:100%;max-width:520px;background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border-secondary);border-radius:var(--brand-border-radius-lg);padding:clamp(28px,4vw,44px);box-shadow:0 24px 60px var(--brand-color-fill-quaternary), 0 2px 8px var(--brand-color-fill-quaternary);&quot;&gt;
&lt;header style=&quot;margin-bottom:var(--brand-size-lg);&quot;&gt;
&lt;h2 style=&quot;font-size:var(--brand-font-size-heading-3);letter-spacing:-0.015em;margin-bottom:var(--brand-size-xs);&quot;&gt;Tell us where to start&lt;/h2&gt;
&lt;p style=&quot;color:var(--brand-color-text-tertiary);font-size:var(--brand-font-size);&quot;&gt;A couple of details and Malenia takes it from there — no account needed yet.&lt;/p&gt;
&lt;/header&gt;
&lt;form novalidate onsubmit=&quot;this.querySelector('.form-body').style.display='none';var s=this.querySelector('.form-success');s.hidden=false;s.style.display='flex';return false;&quot;&gt;
&lt;div class=&quot;form-body&quot; style=&quot;display:flex;flex-direction:column;gap:var(--brand-size-lg);&quot;&gt;
&lt;div style=&quot;display:flex;flex-direction:column;gap:var(--brand-size-lg);&quot;&gt;
&lt;div class=&quot;form-grid-2&quot;&gt;
&lt;div class=&quot;fld&quot;&gt;
&lt;label style=&quot;display:flex;align-items:baseline;justify-content:space-between;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);&quot;&gt;&lt;span&gt;First name&lt;/span&gt;&lt;/label&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Ada&quot; autocomplete=&quot;given-name&quot; style=&quot;box-sizing:border-box;width:100%;font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;height:var(--brand-control-height-lg);padding:0 var(--brand-size);&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;fld&quot;&gt;
&lt;label style=&quot;display:flex;align-items:baseline;justify-content:space-between;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);&quot;&gt;&lt;span&gt;Last name&lt;/span&gt;&lt;/label&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;Lovelace&quot; autocomplete=&quot;family-name&quot; style=&quot;box-sizing:border-box;width:100%;font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;height:var(--brand-control-height-lg);padding:0 var(--brand-size);&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;fld&quot;&gt;
&lt;label style=&quot;display:flex;align-items:baseline;justify-content:space-between;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);&quot;&gt;&lt;span&gt;Work email&lt;/span&gt;&lt;/label&gt;
&lt;input type=&quot;email&quot; placeholder=&quot;you@company.com&quot; inputmode=&quot;email&quot; autocomplete=&quot;email&quot; style=&quot;box-sizing:border-box;width:100%;font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;height:var(--brand-control-height-lg);padding:0 var(--brand-size);&quot;&gt;
&lt;p class=&quot;fld-err&quot;&gt;That doesn't look like an email yet — try name@company.com.&lt;/p&gt;
&lt;p style=&quot;margin:var(--brand-size-xxs) 0 0;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:1.4;&quot;&gt;We'll send your next steps here.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;fld&quot;&gt;
&lt;label style=&quot;display:flex;align-items:baseline;justify-content:space-between;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);&quot;&gt;&lt;span&gt;What can we help with?&lt;/span&gt;&lt;/label&gt;
&lt;select style=&quot;box-sizing:border-box;width:100%;font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;height:var(--brand-control-height-lg);padding:0 var(--brand-size);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:var(--brand-size-xxl);background-image:url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E&quot;);background-repeat:no-repeat;background-position:right var(--brand-size) center;&quot;&gt;&lt;option value=&quot;&quot; disabled selected&gt;Choose one…&lt;/option&gt;&lt;option&gt;Network freedom&lt;/option&gt;&lt;option&gt;Practical simplicity&lt;/option&gt;&lt;option&gt;Aesthetic restraint&lt;/option&gt;&lt;/select&gt;
&lt;p style=&quot;margin:var(--brand-size-xxs) 0 0;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);line-height:1.4;&quot;&gt;Pick the closest — you can change direction later.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;fld&quot;&gt;
&lt;label style=&quot;display:flex;align-items:baseline;justify-content:space-between;gap:var(--brand-size-sm);margin-bottom:var(--brand-size-xxs);font-size:var(--brand-font-size-sm);font-weight:var(--brand-font-weight-strong);color:var(--brand-color-text);&quot;&gt;&lt;span&gt;Anything we should know?&lt;/span&gt;&lt;span style=&quot;font-weight:400;font-size:var(--brand-font-size-sm);color:var(--brand-color-text-quaternary);&quot;&gt;Optional&lt;/span&gt;&lt;/label&gt;
&lt;textarea rows=&quot;4&quot; placeholder=&quot;A sentence or two about what you're trying to do with Malenia…&quot; style=&quot;box-sizing:border-box;width:100%;font-family:var(--brand-font-family);font-size:var(--brand-font-size);color:var(--brand-color-text);background:var(--brand-color-bg-container);border:var(--brand-line-width) solid var(--brand-color-border);border-radius:var(--brand-border-radius);outline:none;display:block;min-height:var(--brand-control-height-lg);padding:var(--brand-size-sm) var(--brand-size);line-height:var(--brand-line-height);resize:vertical;&quot;&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;label class=&quot;cbx&quot; style=&quot;display:flex;align-items:flex-start;gap:var(--brand-size-sm);font-size:var(--brand-font-size);line-height:var(--brand-line-height);color:var(--brand-color-text-secondary);cursor:pointer;&quot;&gt;
&lt;input type=&quot;checkbox&quot; style=&quot;accent-color:var(--brand-color-primary);width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;cursor:pointer;&quot;&gt;
&lt;span&gt;Keep me posted on what's new at Malenia. No noise, easy to turn off.&lt;/span&gt;
&lt;/label&gt;
&lt;/div&gt;
&lt;div style=&quot;display:flex;flex-direction:column;gap:var(--brand-size-sm);margin-top:var(--brand-size);&quot;&gt;
&lt;div style=&quot;display:flex;flex-direction:column;&quot;&gt;
&lt;a role=&quot;button&quot; tabindex=&quot;0&quot; style=&quot;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer;white-space:nowrap;user-select:none;font-family:var(--brand-font-family);font-weight:var(--brand-font-weight-strong);line-height:1;text-decoration:none;transition:all var(--brand-motion-duration-mid) var(--brand-motion-ease-in-out);height:var(--brand-control-height-lg);padding:0 var(--brand-size-lg);font-size:var(--brand-font-size-lg);border-radius:var(--brand-border-radius);border:var(--brand-line-width) solid transparent;background:var(--brand-color-primary);color:#fff;border-color:var(--brand-color-primary);box-shadow:0 2px 0 var(--brand-color-primary-bg)&quot;&gt;Get started with Malenia&lt;/a&gt;
&lt;/div&gt;
&lt;p style=&quot;display:flex;align-items:center;justify-content:center;gap:var(--brand-size-xs);font-size:var(--brand-font-size-sm);color:var(--brand-color-text-tertiary);text-align:center;&quot;&gt;
&lt;svg width=&quot;13&quot; height=&quot;14&quot; viewBox=&quot;0 0 13 14&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; style=&quot;flex:0 0 auto;&quot;&gt;&lt;path d=&quot;M2 6V4.5a4.5 4.5 0 019 0V6m-10 0h11v7H1.5z&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;
&lt;span&gt;No spam, ever. Unsubscribe in one click — your data stays yours.&lt;/span&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;form-success&quot; hidden style=&quot;display:none;flex-direction:column;align-items:center;text-align:center;gap:var(--brand-size-md);padding:var(--brand-size-xl) 0;&quot;&gt;
&lt;span style=&quot;display:inline-flex;width:56px;height:56px;border-radius:50%;background:var(--brand-color-success-bg);align-items:center;justify-content:center;&quot;&gt;
&lt;svg width=&quot;26&quot; height=&quot;26&quot; viewBox=&quot;0 0 26 26&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M6 13.5l4.5 4.5L20 7&quot; stroke=&quot;var(--brand-color-success)&quot; stroke-width=&quot;2.2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;
&lt;/span&gt;
&lt;h2 style=&quot;font-size:var(--brand-font-size-heading-4);&quot;&gt;You're in.&lt;/h2&gt;
&lt;p style=&quot;color:var(--brand-color-text-secondary);max-width:34ch;&quot;&gt;Check your inbox for a note from Malenia — your next step is waiting there. We usually reply within one business day.&lt;/p&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;div style=&quot;margin-top:var(--brand-size-lg);padding-top:var(--brand-size-lg);border-top:var(--brand-line-width) solid var(--brand-color-border-secondary);display:flex;align-items:center;justify-content:space-between;gap:var(--brand-size-sm);color:var(--brand-color-text-quaternary);font-size:var(--brand-font-size-sm);&quot;&gt;
&lt;span style=&quot;display:inline-flex;align-items:center;gap:var(--brand-size-xs);&quot;&gt;&lt;span style=&quot;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:var(--brand-border-radius-sm);background:var(--brand-color-primary-bg);&quot;&gt;&lt;svg width=&quot;10&quot; height=&quot;10&quot; viewBox=&quot;0 0 12 12&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M2.5 6h7M6 2.5L9.5 6 6 9.5&quot; stroke=&quot;var(--brand-color-primary)&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;/&gt;&lt;/svg&gt;&lt;/span&gt;&lt;span style=&quot;color:var(--brand-color-text-tertiary);&quot;&gt;Свобода. Практика. Простота&lt;/span&gt;&lt;/span&gt;
&lt;span&gt;malenia.space&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;"
sandbox=""
loading="lazy"
title="Malenia form preview"
style="width:200%;height:840px;border:0;transform:scale(0.5);transform-origin:top left;"
></iframe>
</div>
</figure>
</section>
</body>
</html>