@font-face { font-family: "Familjen Grotesk"; src: url("fonts/FamiljenGrotesk.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root { font-family:"Familjen Grotesk",sans-serif; font-synthesis:none; color-scheme:light; --paper:#f5f3ed; --warm-white:#fbfaf6; --white:#fff; --ink:#211e20; --muted:#625b60; --line:#d8d1d1; --berry:#ad4968; --berry-dark:#8e3451; --berry-pale:#f5e8ed; --night:#191d24; --rail:#20252d; --panel:#282e38; --panel-line:#454d59; --panel-copy:#c3c9d2; --surface:#fff; --stage:#eee7e8; --ease:cubic-bezier(.19,1,.22,1); background:var(--paper); color:var(--ink); }
:root[data-theme="dark"] { color-scheme:dark; --paper:#201c20; --ink:#f5f0ed; --muted:#c0b4bc; --line:#4c4149; --surface:#2b242b; --stage:#352830; --berry-dark:#e4a7bc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:32px; scrollbar-color:#ad4968 var(--paper); }
body { margin:0; min-width:320px; }
::selection { background:#ad4968; color:white; }
a { color:inherit; text-decoration:none; text-underline-offset:5px; }
button { font:inherit; }
img { display:block; max-width:100%; }
.wrap { width:min(100%,1440px); margin-inline:auto; padding-inline:clamp(22px,5vw,72px); }
.skip { position:absolute; z-index:20; left:16px; top:-100px; padding:12px; background:var(--surface); color:var(--ink); }
.skip:focus { top:12px; }
a:focus-visible,button:focus-visible,input:focus-visible + .format-tab { outline:3px solid var(--berry); outline-offset:5px; }
.header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wordmark { display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:680; letter-spacing:-.03em; white-space:nowrap; }
.header nav { display:flex; align-items:center; gap:30px; font-size:14px; }
.header nav > a { display:inline-flex; min-height:44px; align-items:center; }
.nav-status { gap:8px; background:var(--ink); color:var(--paper); padding:0 20px; border-radius:999px; }
.status-dot { display:inline-block; height:6px; width:6px; border-radius:50%; background:var(--berry); }
.theme-toggle { width:44px; height:44px; border:1px solid var(--line); color:var(--ink); background:transparent; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
.hero { position:relative; min-height:790px; isolation:isolate; overflow:clip; }
.hero-copy { position:relative; z-index:2; width:64%; padding:38px 0 0; text-align:center; pointer-events:none; }
.hero-copy a { pointer-events:auto; }
.hero-brand { width:max-content; max-width:100%; margin:0 auto 24px; font-size:clamp(68px,7.4vw,104px); font-weight:700; line-height:.83; letter-spacing:-.04em; }
.hero-brand > span { display:block; }
.hero-brand > span:first-child { text-align:left; }
.hero-brand > span:last-child { padding-left:42px; }
.brand-period { color:var(--berry); }
.hero h1 { font-size:clamp(26px,2.6vw,38px); font-weight:450; line-height:1.16; letter-spacing:-.025em; margin:32px 0 18px; text-wrap:balance; }
.hero h1 span { font-weight:650; }
.hero-description { max-width:370px; margin:0 auto; font-size:17px; line-height:1.55; color:var(--muted); }
.hero-actions { display:flex; justify-content:center; gap:10px; margin-top:26px; flex-wrap:wrap; }
.button { min-height:48px; padding:13px 24px; display:inline-flex; align-items:center; justify-content:center; gap:24px; background:var(--ink); color:var(--paper); border-radius:999px; font-size:14px; font-weight:600; transition:transform .25s var(--ease),background-color .2s; }
.button-secondary { background:var(--stage); color:var(--ink); }
.hero-meta { color:var(--muted); font-size:12px; margin:18px 0 0; }
.artifact-orbit { position:absolute; inset:0; z-index:1; pointer-events:none; max-width:1600px; margin:auto; }
.specimen { position:absolute; display:block; pointer-events:auto; color:#29242a; transition:transform .6s var(--ease); translate:var(--dx,0px) var(--dy,0px); }
.specimen-doc { width:clamp(210px,20vw,280px); left:4%; top:125px; transform:rotate(-9deg); }
.specimen-slide { width:clamp(220px,23vw,330px); right:2.8%; top:250px; transform:rotate(9deg); }
.specimen-board { width:275px; left:20%; top:559px; transform:rotate(-3deg); }
.specimen > img { width:100%; height:auto; border-radius:9px; box-shadow:0 20px 45px #33242b24; }
.specimen-caption { display:block; margin-top:13px; text-align:center; color:var(--muted); font-size:11px; }
.hero-foot { position:absolute; bottom:22px; left:0; right:0; display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); }
.hero-foot a { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; }
.demo { background:var(--surface); border-radius:36px 36px 0 0; padding-top:85px; padding-bottom:72px; }
.demo-heading { display:grid; grid-template-columns:1fr .7fr; gap:50px; align-items:end; margin-bottom:38px; }
.demo-heading h2,.workflow h2,.formats h2 { margin:0; font-size:clamp(32px,4.3vw,58px); font-weight:500; letter-spacing:-.035em; line-height:1.02; }
.demo-heading > p { margin:0; color:var(--muted); font-size:16px; line-height:1.65; max-width:400px; }
.workspace { display:grid; grid-template-columns:repeat(5,max-content) 1fr; gap:8px; min-width:0; margin:0; padding:18px; border:0; border-radius:16px; background:var(--night); color:#f5f3ed; }
.visually-hidden,.format-input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.format-tab { display:flex; align-items:center; justify-content:center; min-height:44px; padding:10px 22px; border:1px solid #515967; border-radius:7px; font-size:13px; color:#c5cbd4; cursor:pointer; transition:color .18s,background-color .18s; }
.format-input:checked + .format-tab { background:#523340; border-color:#d8a6b5; color:#fff; }
.format-input:focus-visible + .format-tab { outline-color:#e6bdc9; }
.screenshot-stage { grid-column:1/-1; min-width:0; margin-top:8px; }
.product-shot { display:none; margin:0; }
#format-web:checked ~ .screenshot-stage .view-web,#format-doc:checked ~ .screenshot-stage .view-doc,#format-slides:checked ~ .screenshot-stage .view-slides,#format-design:checked ~ .screenshot-stage .view-design,#format-board:checked ~ .screenshot-stage .view-board { display:block; animation:preview-arrive .3s var(--ease); }
.screenshot-image { display:block; overflow:hidden; border-radius:8px; background:#f5f3ed; }
.screenshot-image img { width:100%; height:auto; }
.product-shot figcaption { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 6px 6px; }
.product-shot h3 { margin:0 0 7px; font-size:19px; font-weight:500; }
.product-shot figcaption p { margin:0; color:#c3c9d2; font-size:14px; line-height:1.6; }
.demo-note { margin:16px 0 0; color:var(--muted); font-size:13px; line-height:1.65; max-width:75ch; }
.workflow { display:grid; grid-template-columns:1fr 1fr; gap:10%; padding-block:120px; }
.workflow-copy > p { max-width:370px; margin:26px 0; font-size:17px; line-height:1.65; color:var(--muted); }
.quiet-link { display:inline-flex; gap:24px; min-height:44px; align-items:center; border-bottom:1px solid var(--ink); font-size:14px; }
.workflow-steps { list-style:none; margin:0; padding:0; }
.workflow-steps li { display:flex; align-items:start; gap:24px; padding:28px 0; border-top:1px solid var(--line); }
.workflow-steps li:first-child { padding-top:0; border:0; }
.step-index { color:var(--berry-dark); font-size:13px; font-variant-numeric:tabular-nums; padding-top:6px; }
.workflow-steps h3 { margin:0 0 10px; font-size:27px; font-weight:500; letter-spacing:-.025em; }
.workflow-steps p { margin:0; font-size:15px; line-height:1.7; color:var(--muted); }
.formats { display:grid; grid-template-columns:1fr 1fr; gap:10%; padding-block:90px 110px; background:var(--surface); border-radius:36px; }
.formats-intro { margin:24px 0; font-size:17px; color:var(--muted); }
.format-list { display:grid; }
.format-list > a { min-height:65px; display:grid; grid-template-columns:95px 1fr 20px; gap:16px; align-items:center; border-bottom:1px solid var(--line); transition:color .2s; }
.format-list b { font-size:18px; font-weight:500; }
.format-list span { font-size:13px; color:var(--muted); }
.format-list span:last-child { color:var(--berry-dark); font-size:21px; }
.closing { padding:100px 22px 0; }
.closing-inner { text-align:center; border-radius:28px; padding-block:65px; color:#fff7f9; background:#8e3451; }
.closing-inner > img { margin:0 auto 25px; filter:invert(1); }
.closing h2 { margin:0; font-size:clamp(44px,5.8vw,80px); line-height:1.02; font-weight:500; letter-spacing:-.035em; }
.closing p { font-size:17px; line-height:1.6; color:#f0d3dd; margin:24px 0; }
.closing .button { background:#fff4f7; color:#6d233b; }
.closing-source { display:block; width:max-content; max-width:100%; margin:23px auto 0; padding:8px; color:#f6e2e9; font-size:13px; text-decoration:underline; }
.footer { display:flex; justify-content:space-between; align-items:center; gap:25px; min-height:120px; }
.footer .wordmark { font-size:15px; }
.footer p { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
@keyframes preview-arrive { from { opacity:.6; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (hover:hover) and (pointer:fine) {
 .button:hover { transform:translateY(-3px); }
 .specimen-doc:hover { transform:rotate(-4deg) translateY(-7px); }
 .specimen-slide:hover { transform:rotate(4deg) translateY(-7px); }
 .specimen-board:hover { transform:rotate(0deg) translateY(-5px); }
 .format-list > a:hover b,.header nav > a:not(.nav-status):hover { color:var(--berry-dark); }
}
.button:active { transform:translateY(1px); }
@media (max-width:1100px) {
 .hero { min-height:810px; }
 .hero-copy { width:62%; }
 .specimen-doc { left:4%; top:240px; width:200px; }
 .specimen-slide { right:4%; top:340px; width:225px; }

 .specimen-board { left:26%; top:590px; }




 .workflow,.formats { gap:7%; }
 .format-tab { padding-inline:15px; }
}
@media (max-width:900px) {
 .header { min-height:76px; gap:12px; }
 .header nav { gap:8px; }
 .header nav > a:not(.nav-status) { display:none; }
 .header .wordmark { font-size:16px; gap:7px; }
 .header .wordmark img { width:22px; height:22px; }
 .nav-status { font-size:11px; padding-inline:13px; }
 .nav-status .status-dot { display:none; }
 .theme-toggle { width:38px; height:44px; border:0; }
 .hero { min-height:0; padding-bottom:60px; }
 .hero-copy { width:100%; padding:38px 22px 0; }
 .hero-brand { font-size:clamp(68px,14vw,96px); }
 .hero h1 { font-size:28px; margin-top:30px; }
 .hero-description { max-width:330px; font-size:16px; }
 .hero-actions { gap:8px; }
 .button { padding-inline:20px; font-size:13px; gap:14px; }
 .hero-meta { font-size:11px; }
 .artifact-orbit { position:relative; inset:auto; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:50px 24px 35px; max-width:560px; }
 .specimen { position:relative; inset:auto; width:auto; translate:none; }
 .specimen-doc { transform:rotate(-5deg); }
 .specimen-slide { transform:rotate(6deg); align-self:center; }
 .specimen-board { display:none; }










 .specimen-caption { font-size:11px; }
 .hero-foot { bottom:6px; font-size:11px; }
 .demo { border-radius:25px 25px 0 0; padding-top:55px; padding-bottom:48px; }
 .demo-heading { display:block; margin-bottom:27px; }
 .demo-heading h2 { font-size:38px; }
 .demo-heading > p { margin-top:22px; font-size:15px; }
 .workspace { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:10px; border-radius:12px; }
 .format-tab { min-height:44px; padding:10px 5px; font-size:12px; }




























 .workflow,.formats { grid-template-columns:1fr; gap:38px; padding-block:65px; }
 .workflow-copy h2,.formats h2 { font-size:42px; }
 .workflow-copy > p { font-size:16px; }
 .workflow-steps h3 { font-size:25px; }
 .formats { border-radius:25px; }
 .format-list > a { grid-template-columns:85px 1fr 18px; gap:10px; }
 .format-list span { font-size:12px; }
 .closing { padding:55px 12px 0; }
 .closing-inner { padding:48px 20px; border-radius:20px; }
 .closing h2 { font-size:48px; }
 .footer { flex-direction:column; justify-content:center; padding-block:35px; gap:18px; }
 .footer p { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } .specimen { translate:none!important; } }



/* Real screenshots preserve the full application chrome and original proportions. */
.specimen-doc { width:300px; left:3%; top:185px; }
.specimen-slide { width:340px; right:3%; top:290px; }
.specimen-board { width:280px; left:17%; top:530px; }
@media (max-width:1100px) and (min-width:901px) { .specimen-doc { width:230px; left:3%; top:315px; } .specimen-slide { width:250px; right:3%; top:390px; } .specimen-board { width:245px; left:22%; top:610px; } .format-tab { padding-inline:16px; } }
@media (max-width:900px) { .specimen-doc,.specimen-slide { width:auto; inset:auto; } .specimen-board { display:none; } .workspace { grid-template-columns:repeat(3,minmax(0,1fr)); padding:10px; } .format-tab { padding-inline:8px; } .product-shot figcaption { align-items:start; flex-direction:column; gap:10px; padding:18px 5px 5px; } .product-shot figcaption p { font-size:13px; } .hero { padding-bottom:60px; } .artifact-orbit { padding-block:45px 35px; } }