:root{--ink:#372f22;--muted:#777387;--accent:#dca654;--line:#efeae2;--paper:#fcfaf7;--gradient:linear-gradient(120deg,#edb765,#dca656);font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:100px}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img,svg{max-width:100%;display:block}p{line-height:1.8;color:var(--muted)}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.045em}h1{font-size:clamp(42px,5.2vw,72px);line-height:1.1;font-weight:800;margin-bottom:24px}h2{font-size:clamp(30px,3.1vw,44px);line-height:1.2;margin-bottom:18px}h3{font-size:21px;line-height:1.4}::selection{background:#ffedd2}:focus-visible{outline:3px solid #d7a151;outline-offset:5px}.wrap{width:min(1180px,calc(100% - 64px));margin-inline:auto}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:white;padding:15px}.skip:focus{top:12px}.header{height:96px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:24px;font-weight:800;letter-spacing:-1px;white-space:nowrap}.brand b{color:var(--accent)}.brand-icon{display:grid;place-items:center;background:var(--gradient);width:36px;height:36px;border-radius:12px;color:white;font-size:25px;box-shadow:0 6px 15px #dfac6030}.nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:600}.nav a:hover,.footer a:hover{color:var(--accent)}.nav a[aria-current=page]{color:var(--accent)}.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:17px 25px;border-radius:12px;border:1px solid transparent;background:var(--gradient);box-shadow:0 9px 22px #d5a15422;color:#fff;font-weight:700;font-size:13px;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-2px);box-shadow:0 12px 25px #d5a15440}.button.small{padding:12px 20px}.button.secondary{background:#ffffff99;color:var(--ink);border-color:var(--line);box-shadow:none}.menu-toggle{display:none;border:1px solid var(--line);background:white;border-radius:10px;padding:10px}.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:34px;padding-top:62px;padding-bottom:66px;min-height:650px}.hero:before{content:'';position:absolute;inset:-40px -25px;z-index:-1;background:radial-gradient(ellipse at 75% 40%,#fbefdc 0,transparent 60%)}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:800;text-transform:uppercase;color:var(--accent);margin-bottom:22px}.pill{display:inline-flex;align-items:center;gap:9px;border:1px solid #faeedc;background:#fbf4ea;padding:9px 12px;border-radius:100px;font-size:10px;letter-spacing:1.1px}.pill:before{content:'';width:6px;height:6px;border-radius:50%;background:#e9b970}.gradient-text{background:var(--gradient);background-clip:text;-webkit-text-fill-color:transparent}.lead{font-size:15px;max-width:440px;line-height:1.9;margin-bottom:28px}.actions{display:flex;flex-wrap:wrap;gap:12px}.tiny{font-size:11px;color:#898394;margin-top:18px}.tiny span{color:var(--accent);padding-right:5px}.hero-art{height:470px;position:relative;isolation:isolate}.orb{position:absolute;inset:35px;border-radius:50%;border:1px solid #f2e5d1;background:radial-gradient(circle,#fff5e6,#fcf8f300 72%)}.orb:after{content:'';position:absolute;inset:-25px;border:1px dashed #efe5d6;border-radius:50%}.portrait-card{position:absolute;overflow:hidden;border:7px solid #fff;border-radius:23px;box-shadow:0 18px 48px #65523622;background:#f0e3d0}.portrait-card img{width:100%;height:100%;object-fit:cover}.portrait-card.main{width:245px;height:334px;top:54px;left:128px;transform:rotate(7deg);z-index:3}.portrait-card.left{width:173px;height:242px;top:13px;left:10px;transform:rotate(-12deg);z-index:2}.portrait-card.right{width:171px;height:235px;right:-2px;bottom:29px;transform:rotate(14deg);z-index:4}.portrait-label{position:absolute;bottom:12px;left:12px;background:#ffffffc9;backdrop-filter:blur(12px);padding:6px 11px;border-radius:8px;font-size:10px;font-weight:700}.float-note{position:absolute;z-index:5;bottom:30px;left:30px;display:flex;gap:12px;align-items:center;padding:15px 20px;border:1px solid #fff;background:#ffffffc9;backdrop-filter:blur(16px);border-radius:15px;box-shadow:0 10px 35px #806f5515;font-size:12px}.float-note strong{display:block;margin-bottom:3px}.float-note small{color:var(--muted)}.spark{font-size:27px;color:var(--accent)}.art-star{position:absolute;top:15px;right:48px;font-size:48px;color:#e3c69a}.ribbon{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 35px;border-block:1px solid var(--line);font-size:11px;color:var(--muted)}.ribbon span{display:flex;align-items:center;gap:9px}.ribbon i{font-style:normal;font-size:18px;color:#bfab8c}.section{padding-block:88px}.heading{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:34px}.heading p{max-width:330px;font-size:13px;margin-bottom:5px}.heading h2{margin:0}.heading .eyebrow{margin-bottom:12px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid #fff;background:linear-gradient(145deg,#ffffffda,#ffffff60);border-radius:20px;padding:30px;box-shadow:0 8px 36px #69573b10}.card p{font-size:13px;margin-bottom:0}.icon{width:44px;height:44px;background:#fbf3e7;color:var(--accent);border-radius:13px;display:grid;place-items:center;font-size:22px;margin-bottom:24px}.card h3{font-size:18px;margin-bottom:10px}.section-tint{background:#f6f2eba1;border-block:1px solid #f2ece3}.center{text-align:center}.center p{margin-inline:auto;max-width:540px;font-size:14px}.styles-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:34px}.style-card{border:1px solid var(--line);padding:6px 6px 14px;background:#fff9;border-radius:17px;transition:transform .2s,border-color .2s;min-width:0;color:var(--ink)}.style-card:hover{transform:translateY(-5px)}.style-card[aria-pressed=true]{border:2px solid var(--accent);padding:5px 5px 13px;box-shadow:0 8px 24px #d5a1541a}.style-card img{aspect-ratio:3/4;object-fit:cover;border-radius:11px;width:100%;margin-bottom:12px}.style-card strong{font-size:12px}.style-status{font-size:12px;min-height:24px;margin:22px 0 0}.steps{list-style:none;padding:0;margin:40px 0 0;counter-reset:steps}.step{position:relative;padding-top:10px}.step-num{display:grid;place-items:center;width:45px;height:45px;border:1px solid #efe0c9;color:var(--accent);background:#fcf4e8;border-radius:50%;font-weight:700;font-size:13px;margin-bottom:24px}.step h3{font-size:18px}.step p{font-size:13px;max-width:290px}.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;border:1px solid var(--line);background:#fff9;border-radius:20px;padding:32px;margin-top:30px}.stat+.stat{border-left:1px solid var(--line)}.stat strong{font-size:40px;font-weight:800;color:var(--accent);letter-spacing:-2px}.stat p{font-size:12px;margin:5px 0 0}.blog-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.blog-card{border:1px solid var(--line);border-radius:17px;overflow:hidden;background:#fff;transition:transform .2s}.blog-card:hover{transform:translateY(-4px)}.blog-card img{width:100%;height:176px;object-fit:cover;object-position:center 36%}.blog-copy{padding:20px}.blog-meta{font-size:10px;color:var(--accent);margin-bottom:12px;display:block}.blog-card h3{font-size:16px;line-height:1.6;margin-bottom:16px}.read-link{font-size:11px;font-weight:700;color:var(--muted)}.text-link{font-size:12px;font-weight:700;color:var(--accent);white-space:nowrap}.cta{padding:50px;border-radius:25px;background:radial-gradient(circle at 90% 30%,#f4e2c680,transparent 45%),linear-gradient(120deg,#faf2e5,#fbf6ee);border:1px solid #f5eada;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{font-size:34px;margin-bottom:12px}.cta p{font-size:13px;margin:0;max-width:560px}.cta .eyebrow{margin-bottom:12px}.footer{padding-top:65px;padding-bottom:30px}.footer-top{display:flex;justify-content:space-between;gap:30px}.footer p{font-size:12px;max-width:280px;margin-top:14px}.footer nav{display:flex;gap:30px;font-size:12px;padding-top:10px}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:22px;margin-top:25px;font-size:10px;color:var(--muted)}.cookie{position:fixed;bottom:18px;left:18px;z-index:30;max-width:440px;padding:22px;background:#fffffff0;backdrop-filter:blur(20px);border:1px solid var(--line);box-shadow:0 10px 50px #503e2420;border-radius:18px}.cookie[hidden]{display:none}.cookie p{font-size:12px;margin-bottom:16px}.cookie a{text-decoration:underline}.cookie .actions{gap:8px}.cookie button{font-size:11px;padding:10px 15px}.top{position:fixed;bottom:24px;right:24px;z-index:20;border:1px solid var(--line);border-radius:50%;width:44px;height:44px;background:#fff;color:var(--accent);box-shadow:0 5px 15px #90785420}.top[hidden]{display:none}.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--muted);padding-top:26px}.page-hero{padding:60px 0 42px;max-width:860px}.page-hero h1{font-size:clamp(36px,5vw,60px)}.page-hero p{font-size:16px;max-width:720px}.prose{max-width:780px;padding-bottom:60px}.prose h2{font-size:27px;margin-top:40px}.prose p,.prose li{font-size:15px;line-height:1.9;color:#686375}.prose li{margin-bottom:10px}.prose a{color:var(--accent);text-decoration:underline}.article-cover{max-height:400px;width:100%;object-fit:cover;object-position:center 36%;border-radius:20px;margin-bottom:35px}.notice{background:#fbf3e7;border-left:3px solid var(--accent);padding:20px;border-radius:0 12px 12px 0;font-size:13px}.faq-list{max-width:840px;padding-bottom:70px}details{border-bottom:1px solid var(--line);padding:22px 0}summary{cursor:pointer;font-weight:700;font-size:16px;line-height:1.6}details p{font-size:14px;margin:16px 0 0;max-width:740px}.about-grid{margin-bottom:60px}.demo-note{font-size:11px;text-align:center;margin-top:20px}.article-info{font-size:12px;color:var(--muted);margin-top:25px}.related{padding-bottom:40px}.no-js-note{padding:10px;text-align:center;font-size:12px;background:#fbf3e7}
img{height:auto}.hero h1{font-size:clamp(40px,4.45vw,64px)}h1,h2,h3,.prose{overflow-wrap:anywhere}
@media(min-width:1440px){.hero{gap:70px}.portrait-card.right{right:10px}}
@media(max-width:1050px){.nav{gap:18px}.hero-art{transform:scale(.88);transform-origin:center}.portrait-card.main{left:80px}.portrait-card.left{left:-20px}.portrait-card.right{right:-20px}.hero{gap:10px}.styles-grid{gap:10px}.blog-grid{grid-template-columns:repeat(2,1fr)}.footer nav{gap:18px}.cta{padding:35px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{height:78px;gap:12px}.brand{font-size:21px}.header>.button{margin-left:auto;font-size:11px;padding:10px 13px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:72px;left:20px;right:20px;padding:22px;background:#fffc;backdrop-filter:blur(24px);border:1px solid var(--line);border-radius:15px;z-index:15;box-shadow:0 12px 35px #63513615;flex-direction:column;align-items:stretch;gap:22px}.nav.open{display:flex}.hero{grid-template-columns:1fr;padding-top:35px;padding-bottom:28px;gap:25px}.hero-copy{text-align:center}.hero-copy .lead{margin-inline:auto}.hero .actions{justify-content:center}h1{font-size:48px}.hero-art{width:min(480px,100%);height:420px;margin-inline:auto;transform:scale(.94)}.portrait-card.main{left:calc(50% - 105px);top:46px;width:224px;height:300px}.portrait-card.left{left:0;width:150px;height:209px}.portrait-card.right{right:0;width:146px;height:202px;bottom:28px}.float-note{left:0;bottom:6px}.art-star{right:15px}.ribbon{justify-content:center;padding:22px 0;gap:16px 26px;font-size:10px}.section{padding-block:58px}.heading{align-items:start;flex-direction:column;gap:18px}.heading p{max-width:100%}.grid3{grid-template-columns:1fr;gap:16px}.card{padding:25px}.icon{margin-bottom:16px}.styles-grid{grid-template-columns:repeat(3,1fr);gap:12px}.steps{gap:26px}.step{padding-left:65px}.step-num{position:absolute;left:0;top:10px}.step h3{margin-bottom:8px}.step p{max-width:100%;margin:0}.stats{padding:24px 8px;margin-top:38px}.stat strong{font-size:32px}.stat p{font-size:10px;padding-inline:5px}.cta{flex-direction:column;align-items:start;padding:30px}.cta h2{font-size:29px}.footer-top{flex-direction:column;gap:15px}.footer nav{flex-wrap:wrap;gap:20px}.footer-bottom{flex-direction:column;gap:10px}.page-hero{padding-top:40px}.cookie{left:12px;right:12px;bottom:12px;max-width:400px}.blog-copy{padding:16px}.blog-card h3{font-size:14px}.blog-card img{height:150px}.section-tint .section{padding-block:50px}.prose h2{font-size:24px}}
@media(max-width:380px){.wrap{width:calc(100% - 32px)}h1{font-size:40px}.header>.button{display:none}.menu-toggle{margin-left:auto}.hero-art{transform:scale(.92);height:375px}.portrait-card.main{width:195px;height:267px;left:calc(50% - 95px)}.portrait-card.left{width:122px;height:175px}.portrait-card.right{width:122px;height:175px}.float-note{font-size:10px;padding:12px}.blog-grid{grid-template-columns:1fr}.blog-card img{height:210px}.styles-grid{gap:8px}.style-card strong{font-size:10px}.art-star{font-size:35px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.reveal.waiting{opacity:1;transform:none}}

/* Midnight glass: shared across the landing, journal and information pages. */
:root {
  color-scheme: dark;
  --paper: #080c15;
  --ink: #fffaed;
  --muted: #c7bea6;
  --accent: #ffdaa2;
  --line: #ffe8aa26;
  --gradient: linear-gradient(115deg, #ebb360, #e0ba53);
  --glass: linear-gradient(135deg, #ffefc412, #c9b98c05 65%);
}
body {
  background: radial-gradient(ellipse at 85% 7%, #bb8a4024, transparent 28%),
    radial-gradient(ellipse at 5% 40%, #92711614, transparent 28%), #080c15;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image: linear-gradient(#ffe9ab05 1px, transparent 1px), linear-gradient(90deg, #ffe9ab05 1px, transparent 1px);
  background-size: 64px 64px;
}
::selection { background: #d9aa63; color: white; }
:focus-visible { outline-color: #edd289; }
.header {
  position: relative; z-index: 16; height: 80px; margin-top: 18px; padding-inline: 22px;
  border: 1px solid var(--line); border-top-color: #fff4d738; border-radius: 18px;
  background: linear-gradient(120deg, #ffedbb10, #ead59b06);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: inset 0 1px 0 #ffffff06, 0 18px 50px #00000024;
}
.brand-icon { border: 1px solid #ffe2b666; box-shadow: inset 0 1px 0 #ffffff40, 0 0 24px #ffc16538; }
.nav { color: #e0d8c2; }
.button { border-color: #ffe2b745; box-shadow: inset 0 1px 0 #ffffff28, 0 6px 28px #ffc0612b; }
.button:hover { box-shadow: inset 0 1px 0 #ffffff40, 0 8px 36px #ffc16450; }
.button.secondary { background: #ffedbc0a; border-color: #ffeebe2e; box-shadow: inset 0 1px 0 #ffffff08; }
.button.secondary:hover { background: #ffedbc16; border-color: #edd9a266; }
.gradient-text { background-image: linear-gradient(110deg, #ffddab 10%, #ffe498 55%, #e6cc83); }
.hero { isolation: isolate; }
.hero::before { background: radial-gradient(ellipse at 77% 48%, #dfa7542b, transparent 62%); }
.hero::after {
  content: ''; position: absolute; inset: 35px 0 45px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#ffeec107 1px, transparent 1px), linear-gradient(90deg, #ffeec107 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(90deg, transparent 30%, #000 85%);
}
.pill { color: #ffecb8; background: #ffcd820c; border-color: #ffd89d30; box-shadow: inset 0 1px 0 #ffffff07; }
.pill::before { background: #e0c783; box-shadow: 0 0 12px #e0c783a0; }
.tiny { color: #bcb296; }
.orb { border-color: #f0c78940; background: radial-gradient(circle, #c79a572e, #594c2710 65%, transparent); box-shadow: 0 0 90px #cfa4630d; }
.orb::after { border-color: #e6c66f2e; }
.art-star { color: #e6ce8b; text-shadow: 0 0 25px #edc96570; }
.portrait-card {
  border: 6px solid #ffeebe20; background: #171c32; box-shadow: inset 0 1px 0 #ffffff40, 0 25px 65px #0008, 0 0 25px #e9b76c1a;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.portrait-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 16px; background: linear-gradient(135deg, #ffffff25, transparent 35%, transparent 70%, #ffe8a90d); border: 1px solid #ffffff25; }
.portrait-card img { filter: saturate(.75) brightness(.84); }
.portrait-label { color: #fffaed; background: #0e1628ad; border: 1px solid #fff3d130; }
.float-note { background: linear-gradient(135deg, #4b4430c9, #14192cbd); border-color: #ffefc338; border-top-color: #fff7e059; box-shadow: inset 0 1px 0 #ffffff08, 0 15px 50px #0005; }
.spark { color: #e9d49b; text-shadow: 0 0 22px #e2c26970; }
.ribbon { background: linear-gradient(90deg, transparent, #ffebb405, transparent); }
.ribbon i { color: #c9ba8f; }
.card, .stats, .blog-card, .style-card {
  background: var(--glass); border-color: var(--line); border-top-color: #fff2cf38;
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: inset 0 1px 0 #ffffff06, 0 18px 45px #00000024;
}
.card { position: relative; overflow: hidden; }
.card::after { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 1px; background: linear-gradient(90deg, transparent, #ffecb970, transparent); }
.card:hover { border-color: #ffd79a55; background: linear-gradient(135deg, #ffd79a18, #f0d38308); }
.icon, .step-num { background: linear-gradient(140deg, #ffd69922, #eed38709); border: 1px solid #ffdfb030; color: #ffecb9; box-shadow: inset 0 1px 0 #ffffff12; }
.section-tint { background: radial-gradient(ellipse at 50% 0, #ce9c5117, transparent 68%), #13182a48; border-color: #ffebb519; }
.style-card img, .blog-card img { filter: saturate(.72) brightness(.85); transition: filter .2s; }
.style-card:hover img, .style-card[aria-pressed=true] img, .blog-card:hover img { filter: saturate(.95) brightness(.97); }
.style-card[aria-pressed=true] { border-color: #ffd494; background: linear-gradient(145deg, #eebd7328, #dfbe640d); box-shadow: 0 0 25px #efb7641f, inset 0 0 18px #efbf780e; }
.stat strong { color: #ffdfb0; text-shadow: 0 0 35px #ffc06233; }
.cta { background: radial-gradient(ellipse at 95% 10%, #dcbb5f14, transparent 45%), linear-gradient(120deg, #ffd08a1a, #ffe59d06); border-color: #ffdca740; border-top-color: #ffeaca59; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: inset 0 1px 0 #ffffff08, 0 20px 70px #0003; }
.cookie { background: linear-gradient(135deg, #423a25f2, #111827ed); border-color: #ffecb740; box-shadow: inset 0 1px 0 #ffffff10, 0 20px 70px #0008; }
.top, .menu-toggle, .skip { color: #ffeacb; background: #172035ec; border-color: #ffeec033; box-shadow: inset 0 1px 0 #ffffff0d, 0 8px 30px #0004; }
.prose p, .prose li { color: #d0c7b0; }
.notice, .no-js-note { background: #edc48612; color: #e1d9c4; }
.article-cover { border: 1px solid var(--line); filter: saturate(.75) brightness(.87); }
details[open] summary { color: #ffe2b6; }
.footer-bottom { color: #bbb093; }
@media(max-width:1050px) { .header { gap: 18px; padding-inline: 16px; } .nav { gap: 16px; } }
@media(max-width:760px) {
  .header { height: 70px; margin-top: 12px; padding-inline: 12px; gap: 10px; border-radius: 14px; }
  .header .brand { gap: 7px; font-size: 19px; }
  .header .brand-icon { width: 31px; height: 31px; font-size: 19px; border-radius: 10px; }
  .header > .button { padding: 10px; font-size: 10px; gap: 7px; }
  .nav { top: 78px; left: 0; right: 0; gap: 22px; background: linear-gradient(140deg, #403822fa, #111726fa); border-color: #ffeec033; box-shadow: 0 20px 50px #0008; }
  .hero::before { inset: 0; }
  .hero::after { inset: 45% 0 0; mask-image: linear-gradient(transparent, #000 50%, transparent); }
  .card, .stats, .blog-card, .style-card { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
@media(prefers-reduced-transparency:reduce) { .card, .stats, .blog-card, .style-card, .header, .nav, .cookie, .float-note, .cta { background: #192133; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* Dark labels preserve contrast on the bright amber controls. */
.button:not(.secondary), .brand-icon { color: #201408; text-decoration: none;}
:root { --accent: #ffc45a; --gradient: linear-gradient(115deg, #ffd452, #ff962e); }
::selection { background: #ffbb45; color: #201408; }

/* Four portrait directions in the first screen. */
.hero-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 20px 26px; padding: 12px 44px 68px; height: 560px; transform: none; }
.hero-art .portrait-card { position: relative; width: 100%; height: 100%; max-width: 205px; top: auto; right: auto; bottom: auto; left: auto; justify-self: center; }
.hero-art .portrait-card.left { order: 1; transform: rotate(-7deg); }
.hero-art .portrait-card.main { order: 2; transform: rotate(6deg); }
.hero-art .portrait-card.fourth { order: 3; transform: rotate(-5deg); }
.hero-art .portrait-card.right { order: 4; transform: rotate(7deg); }
.hero-art .float-note { bottom: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.hero-art .art-star { right: 0; top: -12px; }
.button-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; flex-shrink: 0; }
.hero-actions .button { gap: 10px; padding-inline: 20px; }
.hero-actions [aria-disabled="true"], .cta-actions [aria-disabled="true"] { cursor: default; }
.cta-actions { flex: 0 0 240px; flex-direction: column; }
.cta-actions .button { gap: 10px; width: 100%; }
.button.secondary[data-destination="website"] {
  background: transparent;
  color: #ffc45a;
  border-color: #e9ae48;
  box-shadow: inset 0 0 12px #ffc45a05;
}
.button.secondary[data-destination="website"]:hover {
  background: #ffc45a12;
  color: #ffda94;
  border-color: #ffc45a;
  box-shadow: inset 0 0 16px #ffc45a08, 0 0 24px #ffc45a26;
}
@media (max-width:760px) { .cta-actions { flex-basis: auto; width: min(100%, 280px); } }
@media (min-width:761px) and (max-width:1050px) { .hero-art { height: 490px; padding-inline: 20px; gap: 18px; } }
@media (max-width:760px) { .hero-art { height: 525px; width: min(430px, 100%); padding: 15px 25px 68px; gap: 18px; } }
@media (max-width:380px) { .hero-art { height: 430px; padding: 12px 15px 62px; gap: 15px; } .hero-art .portrait-label { left: 5px; bottom: 8px; padding: 5px 7px; font-size: 9px; } }

/* Product priorities and animated demonstration metrics. */
.benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.benefit-card { padding: 27px 24px; transition: border-color .25s, transform .25s; }
.benefit-card:hover { transform: translateY(-5px); }
.benefit-card .icon { width: 48px; height: 48px; }
.icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.benefit-index { position: absolute; top: 30px; right: 24px; font-size: 11px; letter-spacing: .1em; color: #c9b79a; opacity: .65; }
.benefit-card h3 { font-size: 17px; letter-spacing: -.025em; }
.metrics { margin-top: 48px; }
.metrics-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.metrics-heading h3 { font-size: 20px; margin: 0; }
.metrics-badge { font-size: 10px; padding: 7px 11px; border: 1px solid #ffc45a35; border-radius: 30px; color: #ffd58c; background: #ffc45a09; }
.metrics .stats { margin-top: 20px; padding: 34px 16px; }
.stat-icon { margin: 0 auto 18px; width: 46px; height: 46px; }
.metrics .stat { min-width: 0; padding-inline: 10px; }
.metrics .stat strong { display: block; font-size: clamp(28px, 3.4vw, 46px); font-variant-numeric: tabular-nums; letter-spacing: -.04em; white-space: nowrap; }
.metrics .stat p { margin-top: 10px; }
.metrics-note { font-size: 11px; color: var(--muted); margin: 14px 0 0; max-width: 780px; }
@media(max-width:1050px) { .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:600px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .metrics-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .metrics .stats { grid-template-columns: 1fr; padding: 8px 24px; }
  .metrics .stat { padding: 26px 0; }
  .metrics .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
  .metrics .stat strong { font-size: 40px; }
  .metrics .stat p { font-size: 12px; }
}

/* Virtual fitting: introduction, Telegram guide and project statistics. */
.feature-description { font-size: 14px; line-height: 1.9; margin-bottom: 34px; }
.fitting-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 64px; align-items: start; }
.fitting-intro > h2 { margin-bottom: 0; }
.fitting-copy { max-width: 800px; }
.fitting-copy > p:not(.eyebrow), .fitting-description { font-size: 14px; line-height: 1.9; }
.fitting-copy > p:last-child { margin-bottom: 0; }
.fitting-description { max-width: 840px; margin-bottom: 0; }
.fitting-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.fitting-steps .step { grid-column: span 2; padding: 28px; }
.fitting-steps .step:nth-child(n+4) { grid-column: span 3; }
.fitting-steps .step-num { position: static; margin-bottom: 22px; }
.fitting-steps h3 { font-size: 18px; margin-bottom: 10px; }
.fitting-steps p { max-width: none; font-size: 13px; margin: 0; }
.fitting-steps .fitting-step-copy { font-size: 15px; line-height: 1.7; color: var(--ink); }
.fitting-tip { display: flex; align-items: center; gap: 16px; padding: 20px 24px; margin-top: 24px; border: 1px solid var(--line); border-radius: 16px; background: #ffc45a08; }
.fitting-tip .icon { flex-shrink: 0; margin: 0; }
.fitting-tip p { font-size: 13px; margin: 0; }
.fitting-tip strong { color: var(--ink); }
.fitting-actions { justify-content: center; margin-top: 30px; }
.fitting-actions .button { gap: 10px; padding-inline: 30px; }
.fitting-actions [aria-disabled="true"] { cursor: default; }
.fitting-about { padding-bottom: 30px; }
.fitting-about .metrics { margin-top: 48px; }
.landing-blog .blog-card > a { display: flex; flex-direction: column; height: 100%; }
.landing-blog .blog-copy { padding: 24px; flex: 1; }
.landing-blog .blog-card h3 { font-size: 16px; line-height: 1.55; margin-bottom: 16px; }
.landing-blog .blog-copy p { font-size: 12px; line-height: 1.85; margin: 0; }
.faq-cover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 840px; margin: 0 0 28px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); }
.faq-cover img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: center 40%; border-radius: 12px; filter: saturate(.75) brightness(.87); }
.faq-actions { max-width: 840px; justify-content: center; margin-bottom: 32px; }
.faq-page [aria-disabled="true"] { cursor: default; }
.faq-page details p a { color: var(--accent); text-decoration: underline; font-size: inherit; font-weight: inherit; }
.faq-support p { max-width: 840px; }
@media(max-width:1050px) {
  .fitting-intro { gap: 32px; }
}
@media(max-width:760px) {
  .fitting-intro { grid-template-columns: 1fr; gap: 28px; }
  .feature-description, .fitting-copy > p:not(.eyebrow), .fitting-description { font-size: 13px; }
  .fitting-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
  .fitting-steps .step, .fitting-steps .step:nth-child(n+4) { grid-column: auto; padding: 24px; }
  .fitting-steps .step:last-child { grid-column: 1 / -1; }
  .fitting-tip { align-items: flex-start; padding: 18px; gap: 12px; }
  .fitting-about { padding-bottom: 20px; }
}
@media(max-width:600px) {
  .landing-blog .blog-grid { grid-template-columns: 1fr; }
  .landing-blog .blog-card img { height: 200px; }
}
@media(max-width:520px) {
  .faq-cover { gap: 10px; padding: 12px; border-radius: 16px; }
  .faq-cover img { aspect-ratio: 3 / 4; }
  .faq-actions .button { width: 100%; }
  .fitting-steps { grid-template-columns: 1fr; }
  .fitting-steps .step { padding: 22px; }
  .fitting-steps .step-num { margin-bottom: 16px; }
  .fitting-actions .button { width: 100%; padding-inline: 16px; }
}