@font-face{
font-family:"DM Sans";
src:url("assets/fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
font-weight:100 1000;
font-display:swap;
}
:root,:root:has(#tema-chiaro:checked){
color-scheme:light;
--canvas:#f5f5f7;
--surface:#fff;
--soft:#edecf2;
--ink:#25222e;
--muted:#595563;
--line:#d5d2de;
--accent:#5b3fd6;
--shadow:#28223912;
--bezel:#25222e;
--s1:0.25rem;
--s2:0.5rem;
--s3:0.75rem;
--s4:1rem;
--s5:1.5rem;
--s6:2rem;
--s7:3rem;
--s8:4rem;
--f1:0.8125rem;
--f2:1rem;
--f3:1.3125rem;
--f4:1.6875rem;
--f5:2rem;
--fh1:clamp(2.75rem,4.3vw,3.875rem);
--fh2:clamp(1.875rem,3.2vw,2.625rem);
--r1:3px;
--r2:0.625rem;
--r3:0.875rem;
--r4:1.5rem;
}
@media (prefers-color-scheme:dark){
:root{
color-scheme:dark;
--canvas:#16151b;
--surface:#1e1c25;
--soft:#25222f;
--ink:#f3f0fa;
--muted:#bdb8cb;
--line:#45404f;
--accent:#b8a6ff;
--shadow:#00000030;
--bezel:#0a090d;
}
}
:root:has(#tema-scuro:checked){
color-scheme:dark;
--canvas:#16151b;
--surface:#1e1c25;
--soft:#25222f;
--ink:#f3f0fa;
--muted:#bdb8cb;
--line:#45404f;
--accent:#b8a6ff;
--shadow:#00000030;
--bezel:#0a090d;
}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:1.0625rem/1.6 "DM Sans",sans-serif}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{text-wrap:balance}
h1,h2{font-weight:760;letter-spacing:-.045em;line-height:1.08}
h1{font-size:var(--fh1)}
h1 span{color:var(--accent);font-style:italic}
h2{font-size:var(--fh2)}
h3{font-size:var(--f3);line-height:1.25;letter-spacing:-.02em;font-weight:650}
a{color:var(--accent);text-underline-offset:0.25rem;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:0.3125rem}
img{display:block;max-width:100%;height:auto}
.container{width:min(67.5rem,calc(100% - 3rem));margin-inline:auto}
.section{padding-block:4.5rem}
.section-heading{max-width:40.625rem}
.section-heading>p:not(.eyebrow){margin-top:var(--s4);color:var(--muted)}
.eyebrow{font-size:var(--f1);font-weight:600;color:var(--muted);margin-bottom:var(--s3)}
.split{display:grid;grid-template-columns:.85fr 1.15fr;column-gap:clamp(var(--s6),5.5vw,5rem);align-items:start}
.skip-link{position:absolute;left:1rem;top:-6.25rem;padding:var(--s3) var(--s4);background:var(--surface);z-index:1}
.skip-link:focus{top:0.75rem}
.site-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s2) var(--s4);min-height:5rem;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:var(--s2);min-height:2.75rem;color:var(--ink);text-decoration:none}
.brand img{width:2rem;height:2rem;border-radius:var(--r2)}
.brand span{display:flex;align-items:baseline;gap:var(--s1)}
.brand strong{font-size:var(--f3);letter-spacing:-.05em}
.brand small{font-size:var(--f1)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(var(--s6),4.6vw,var(--s8));padding-block:3.375rem var(--s8)}
.hero .eyebrow{font-size:var(--f1)}
.hero-copy{max-width:37.5rem}
.hero-description{margin-top:var(--s5)}
.store-link{display:inline-flex;align-items:center;min-height:3.5rem;padding:0 var(--s5);border-radius:var(--r2);background:var(--accent);color:var(--canvas);font-size:var(--f2);font-weight:650;text-decoration:none}
.hero .store-link{margin-top:var(--s4)}
.store-note{margin-top:var(--s2);font-size:var(--f1);color:var(--muted)}
.signs{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);margin:var(--s4) 0 0;padding:0;font-size:var(--f1);font-weight:600}
.signs li::before{content:"\2713\00a0";color:var(--accent)}
.hero-figure{display:flex;flex-direction:column;align-items:center}
/* the phone is sized by viewport height so two of them fit a laptop's first screen. Frame radius .11*p, image radius .085*p: concentric with the 0.5rem bezel */
.phones{--p:clamp(12rem,min((100svh - 12rem)/2.2,22vw),17rem);display:flex;align-items:flex-start}
.phone{width:var(--p);padding:var(--s2);border:1px solid var(--line);border-radius:calc(var(--p)*.11);background:var(--bezel);box-shadow:0 0.5rem 2rem var(--shadow)}
.phone img{width:100%;border-radius:calc(var(--p)*.085)}
.phones .phone+.phone{margin:calc(var(--p)*.14) 0 0 calc(var(--p)*-.45)}
.screen-link{display:block}
figcaption{margin-top:var(--s3);font-size:var(--f1);text-align:center;text-wrap:balance;color:var(--muted)}
.screen-link{display:block;border-radius:var(--r3);box-shadow:0 0.5rem 2rem var(--shadow)}
.screen-link img{width:100%;border-radius:inherit}
figcaption{margin-top:var(--s3);font-size:var(--f1);text-align:center;text-wrap:balance;color:var(--muted)}
.proof-section,.maker-section{background:var(--surface);border-block:1px solid var(--line)}
.proof-list,.limits-list{list-style:none;padding:0;margin:0}
.proof-list li+li{border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s5)}
.proof-list h3+p,.faq-list h3+p{margin-top:var(--s3);color:var(--muted)}
details{margin-top:var(--s4);border:1px solid var(--line);border-radius:var(--r2);padding-inline:var(--s3)}
summary{padding-block:var(--s3);cursor:pointer;font-size:var(--f2);font-weight:600;min-height:3rem}
details p{font-size:var(--f2);color:var(--muted);padding-bottom:var(--s3)}
.text-link{display:inline-flex;align-items:center;min-height:2.75rem;margin-top:var(--s2)}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);margin-top:var(--s6)}
.shot .phone{width:100%;max-width:17.5rem;margin-inline:auto}
.shot h3{margin-top:var(--s5)}
.shot p{margin-top:var(--s2);color:var(--muted)}
.also{max-width:50.625rem;margin-top:var(--s6);color:var(--muted)}
.also ul{margin-top:var(--s2);padding-left:1.25em}
.backup-section{background:var(--soft);border-block:1px solid var(--line)}
.prose p+p,.maker-section .small-note{margin-top:var(--s4)}
.small-note{font-size:var(--f1);line-height:1.6;color:var(--muted)}
.limits{padding-bottom:var(--s7)}
.limits-list li{padding-block:var(--s3);border-bottom:1px solid var(--line)}
.faq-section{border-top:1px solid var(--line)}
.faq-list article+article{margin-top:var(--s6)}
.email-link{overflow-wrap:anywhere}
.closing{max-width:43.125rem;text-align:center;background:var(--soft);border-radius:2rem;padding-inline:var(--s5);margin-block:var(--s6)}
.closing>p{margin-top:var(--s4)}
.closing .store-link{margin-top:var(--s5)}
.site-footer{padding-block:var(--s5) var(--s6);border-top:1px solid var(--line);font-size:var(--f1);color:var(--muted)}
.footer-links{display:flex;align-items:center;flex-wrap:wrap;column-gap:var(--s2);margin-bottom:var(--s3)}
.footer-links a{min-width:2.75rem;min-height:2.75rem;display:inline-flex;align-items:center;justify-content:center}
.footer-links .email-link{margin-left:auto}
.site-footer p+p{margin-top:var(--s1)}
.section-heading .eyebrow{display:flex;align-items:center;gap:var(--s2)}
.section-heading .eyebrow::before{content:"";width:1.5rem;height:3px;background:var(--accent);border-radius:var(--r1);flex-shrink:0}
@media (max-width:56.25em){
.hero{display:block;padding-block:var(--s6) var(--s7)}
.hero-copy{max-width:38rem}
.hero-figure{margin-top:var(--s7)}
.phones{--p:clamp(12rem,32vw,17rem)}
.split{grid-template-columns:1fr;gap:var(--s5)}
}
@media (max-width:43.75em){
body{font-size:var(--f2);line-height:1.5}
.container{width:calc(100% - 2.5rem)}
.site-header{min-height:4.25rem}
.section{padding-block:var(--s7)}
.hero{padding-block:var(--s4) 0}
.hero p{text-wrap:pretty}
h1{font-size:clamp(2rem,10vw,2.625rem);line-height:1.07;letter-spacing:-.035em}
h2{font-size:var(--f5)}
.hero .eyebrow{margin-bottom:var(--s3)}
.hero-description{margin-top:var(--s4);font-size:var(--f2);line-height:1.45}
.hero .store-link{margin-top:var(--s4)}
.signs{margin-top:var(--s3)}
.store-note{line-height:1.5;text-wrap:balance}
/* the phones rise from the next section: cut flat at the hero's bottom edge; no room for the caption */
.hero-figure{margin-top:var(--s5)}
.phones{--p:calc((100vw - 2.5rem)/1.55);align-self:stretch;justify-content:center;max-height:calc(var(--p)*1.5);overflow:hidden}
figcaption{display:none}
.section-heading>p:not(.eyebrow){margin-top:var(--s4)}
.shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-1.25rem;padding:var(--s2) 1.25rem var(--s3);scroll-padding-inline:1.25rem;gap:var(--s4)}
.shot{flex:0 0 min(72vw,17rem);scroll-snap-align:start}
.also{margin-top:var(--s5)}
.limits{padding-bottom:var(--s6)}
.closing{padding-block:var(--s7)}
.closing h2{font-size:var(--f5)}
.footer-links .email-link{margin-left:0;justify-content:flex-start;flex-basis:100%}
}
@media (min-width:100em){html{font-size:112.5%}}
@media (min-width:137.5em){html{font-size:125%}}
@keyframes enter{from{transform:translateY(1rem)} to{transform:translateY(0)}}
@keyframes slide{from{opacity:0;transform:translateX(3rem)}}
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth;scroll-padding-top:var(--s5)}
.hero-copy,.hero-figure{animation:enter .65s cubic-bezier(.2,.7,.2,1) backwards}
.hero-figure{animation-delay:.1s}
.phones .phone+.phone{animation:slide .8s .4s cubic-bezier(.2,.7,.2,1) backwards}
*{transition:background-color .3s,color .3s,border-color .3s}
.store-link,.screen-link{transition:transform .22s ease,box-shadow .22s ease}
@media (hover:hover){
.store-link:hover,.screen-link:hover{transform:translateY(-3px);box-shadow:0 0.75rem 2.25rem var(--shadow)}
}
@supports (animation-timeline:view()){
.shot,.section-heading,.proof-list li,.limits-list li,.faq-list>*{animation:enter linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
}
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.site-controls{display:flex;flex-wrap:wrap;gap:var(--s2)}
.seg{display:inline-flex;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r4);background:var(--surface);overflow:hidden;min-inline-size:0}
.seg label{position:relative;display:inline-flex}
.seg input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.seg span,.seg a{display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:var(--s3);font-size:var(--f1);font-weight:600;color:var(--ink);text-decoration:none}
.seg input:focus-visible+span,.seg a:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.seg input:checked+span,.seg a[aria-current],:root:not(:has(.seg input:checked)) .t-light span{background:var(--accent);color:var(--canvas)}
@media (prefers-color-scheme:dark){:root:not(:has(.seg input:checked)) .t-light span{background:none;color:var(--ink)}:root:not(:has(.seg input:checked)) .t-dark span{background:var(--accent);color:var(--canvas)}}
.seg svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme{display:none}
@supports selector(:has(*)){.theme{display:inline-flex}}
.is-dark{display:none}
@media (prefers-color-scheme:dark){.is-light{display:none}.is-dark{display:block}}
:root:has(#tema-chiaro:checked) .is-light,:root:has(#tema-scuro:checked) .is-dark{display:block}
:root:has(#tema-chiaro:checked) .is-dark,:root:has(#tema-scuro:checked) .is-light{display:none}
@media (max-width:43.75em){.site-controls{gap:var(--s1)}.seg span,.seg a{min-height:1.75rem;padding-inline:.4rem;font-size:.6875rem}.site-header{padding-block:var(--s2);column-gap:var(--s2)}.brand small{font-size:.75rem}}
@media (max-width:24em){.brand{gap:.375rem}.brand strong{font-size:1.125rem}.brand small{font-size:.6875rem}.seg span,.seg a{padding-inline:.3125rem}}
@media (max-width:43.75em){.seg svg{width:1rem;height:1rem}}