@font-face{font-family:Figtree;src:url('https://lovable-crab-328.convex.cloud/api/storage/0fafa080-9128-436e-9e36-63e281c95265') format('truetype');font-weight:300 900;font-display:swap}

/* Two tones only: charcoal and earthy */
:root{--ease:cubic-bezier(.22,1,.36,1);--charcoal:#1f1f1e;--earthy:#efe9df}
html[data-tone="charcoal"]{--bg:#1f1f1e;--fg:#efe9df;--muted:#a9a399;--line:rgba(239,233,223,.14);--card:rgba(239,233,223,.05);--glass:rgba(40,40,38,.55);--privacy:rgba(28,28,27,.9);--accent:#d8c7a8;--illus:#e0b66a}
html[data-tone="earthy"]{--bg:#efe9df;--fg:#22211f;--muted:#6e675c;--line:rgba(34,33,31,.14);--card:rgba(255,253,248,.6);--glass:rgba(250,246,238,.6);--privacy:rgba(243,238,229,.92);--accent:#7a6546;--illus:#9a6412}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--fg);font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background-color .6s var(--ease),color .6s var(--ease)}
#root{position:fixed;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* Nanoglass: regular for chrome, privacy for anything with things behind it */
.glass{background:var(--glass);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);border:1px solid var(--line)}
.privacy{background-color:var(--privacy);background-image:radial-gradient(rgba(128,128,128,.06) 1px,transparent 1.2px);background-size:3px 3px;backdrop-filter:blur(42px) saturate(1.1) brightness(.98);-webkit-backdrop-filter:blur(42px) saturate(1.1) brightness(.98);border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.28)}

/* Chrome */
.chrome{position:absolute;left:0;right:0;z-index:5;display:flex;align-items:center;padding:0 clamp(14px,3vw,36px);pointer-events:none}
.chrome>*{pointer-events:auto}
.top{top:0;height:64px;padding-top:env(safe-area-inset-top)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.mark{display:inline-block;width:30px;height:27px;background:currentColor;-webkit-mask:var(--mark) center/contain no-repeat;mask:var(--mark) center/contain no-repeat}
/* The official Cloud mark, loaded from its canonical public source (CORS open, allowed by the Studio img-src policy), never retyped */
:root{--mark:url('https://www.thecloud.so/app-icons/native.svg')}
.tools{margin-left:auto;display:flex;gap:10px;align-items:center}
.tone{display:flex;border-radius:999px;padding:3px}
.tone button{font-size:12px;padding:7px 12px;border-radius:999px;color:var(--muted);transition:background-color .3s,color .3s}
.tone button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.icon{width:36px;height:36px;border-radius:999px;font-size:15px;display:grid;place-items:center}
.bottom{bottom:0;height:56px;gap:14px;padding-bottom:env(safe-area-inset-bottom);font-size:12px;color:var(--muted)}
.progress{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line);pointer-events:none}
.progress i{display:block;height:100%;width:0;background:var(--fg);transition:width .7s var(--ease)}
.nav{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);color:var(--fg)}
.nav:disabled{opacity:.25;cursor:default}
#counter{font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--fg)}
.hint{margin-left:auto;letter-spacing:.04em}

/* Viewport and stage: a fixed canvas scaled to the screen. There is no scroll, ever. */
#viewport{position:absolute;inset:0}
.stage{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:0 0}
.stage.portrait{width:720px;height:1280px}
.slide{position:absolute;inset:0;padding:120px 132px 110px;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translate3d(36px,0,0);transition:opacity .55s var(--ease),transform .9s var(--ease),visibility 0s linear .9s}
.slide.before{transform:translate3d(-36px,0,0)}
.slide.active{opacity:1;visibility:visible;transform:none;transition:opacity .65s var(--ease) .06s,transform .9s var(--ease),visibility 0s}
.slide.active .rise{animation:rise 1s var(--ease) both;animation-delay:calc(140ms + var(--i,0) * 80ms)}
@keyframes rise{from{opacity:0;transform:translateY(16px);filter:blur(8px)}}
.portrait .slide{padding:150px 64px 140px;justify-content:center}

.eyebrow{font-size:17px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0 0 28px}
h1{font-size:92px;line-height:1.02;letter-spacing:-.045em;font-weight:600;margin:0 0 36px;white-space:pre-line;max-width:1250px}
.lead{font-size:34px;line-height:1.3;color:var(--fg);max-width:960px;margin:0;font-weight:400}
p{margin:0}
.caption{font-size:20px;color:var(--muted);margin-top:36px;line-height:1.45}
.portrait h1{font-size:76px;white-space:normal}
.feature h1{font-size:80px;white-space:normal}
.portrait .lead{font-size:32px}

/* cover */
.cover h1{font-size:128px;max-width:1300px}
.portrait .cover h1{font-size:88px}
.cover .glow{position:absolute;right:-80px;top:50%;width:620px;height:620px;translate:0 -50%;pointer-events:none}
.cover .glow .mark{width:100%;height:100%;opacity:.08;animation:float 12s ease-in-out infinite}
.portrait .cover .glow{right:-140px;top:26%;width:520px;height:520px}
@keyframes float{50%{transform:translateY(-16px)}}
.ctas{display:flex;gap:18px;margin-top:48px;align-items:center;flex-wrap:wrap}
.cta{font-size:24px;font-weight:600;padding:18px 30px;border-radius:999px;background:var(--fg);color:var(--bg);text-decoration:none}
.textlink{font-size:22px;color:var(--muted);text-underline-offset:6px}

/* points */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:64px}
.grid .points{grid-template-columns:repeat(3,1fr);gap:40px 56px;margin-top:40px}
.grid.four .points{grid-template-columns:repeat(4,1fr)}
.points article{border-top:1px solid var(--line);padding-top:22px}
.points h3{font-size:30px;font-weight:600;letter-spacing:-.02em;margin:0 0 12px}
.points p{font-size:21px;line-height:1.45;color:var(--muted)}
.portrait .points,.portrait .grid .points,.portrait .grid.four .points{grid-template-columns:1fr;gap:26px;margin-top:40px}
.portrait .grid .points{grid-template-columns:1fr 1fr;gap:26px 32px}
.portrait .points h3{font-size:28px}
.portrait .points p{font-size:21px}
.portrait .statement .points p{display:none}
.portrait .statement .points{gap:0;margin-top:44px}
.portrait .statement .points article{padding:18px 0}

/* flow */
.flow ol{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:0}
.flow li{position:relative;padding:30px 28px 0 0;font-size:28px;font-weight:500;line-height:1.25;border-top:1px solid var(--line)}
.flow li::before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:var(--fg)}
.flow li span{display:block;font-size:15px;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
.portrait .flow ol{grid-template-columns:1fr;margin-top:40px}
.portrait .flow li{border-top:0;border-left:1px solid var(--line);padding:0 0 34px 36px;font-size:32px}
.portrait .flow li::before{top:6px;left:-6px}

/* proof */
.proof .row{display:grid;grid-template-columns:1.1fr 1fr;gap:72px;align-items:center}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.shot{position:relative;display:block;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:#f4efe9;text-decoration:none}
.shot figure{margin:0;height:100%}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.shot.contain img{object-fit:contain;padding:10%}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{position:absolute;left:14px;bottom:14px;font-size:15px;font-weight:600;padding:7px 12px;border-radius:999px;color:#22211f;background:rgba(250,246,238,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
blockquote{margin:0;font-size:38px;line-height:1.28;letter-spacing:-.02em;font-weight:500}
blockquote::before{content:"“";display:block;font-size:90px;line-height:.6;color:var(--muted);margin-bottom:10px}
.attrib{font-size:19px;color:var(--muted);margin-top:26px;line-height:1.45}
.portrait .proof .row{grid-template-columns:1fr;gap:40px}
.portrait .shots{order:2}
.portrait .shot{aspect-ratio:1}
.portrait blockquote{font-size:34px}

/* feature (Home) */
.feature .row{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.feature .body{font-size:22px;line-height:1.5;color:var(--muted);margin-top:28px}
.planner{border-radius:28px;padding:40px;background:var(--card);border:1px solid var(--line)}
.planner ol{list-style:none;margin:0;padding:0;counter-reset:s}
.planner li{counter-increment:s;display:flex;gap:18px;align-items:center;font-size:26px;padding:16px 0;border-bottom:1px solid var(--line);opacity:.35;transition:opacity .5s}
.planner li:last-child{border-bottom:0}
.planner li::before{content:counter(s,decimal-leading-zero);font-size:15px;letter-spacing:.12em;color:var(--muted);width:34px}
.planner li.on{opacity:1}
.portrait .feature .row{grid-template-columns:1fr;gap:36px}
.portrait .feature .body{display:none}

/* price */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px;max-width:1200px}
.tier{border-radius:28px;padding:40px 44px;border:1px solid var(--line);background:var(--card)}
.tier.best{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tier span{font-size:17px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.7}
.tier strong{display:block;font-size:150px;line-height:1;letter-spacing:-.06em;font-weight:600;margin:18px 0 12px}
.tier p{font-size:22px;opacity:.75}
.portrait .tiers{grid-template-columns:1fr;gap:22px}
.portrait .tier strong{font-size:120px}
.tiers.money strong{font-size:96px;letter-spacing:-.05em}
.portrait .tiers.money strong{font-size:84px}
.mathrows{max-width:1100px;margin-top:24px;padding:36px 44px;border-radius:28px;border:1px solid var(--line);background:var(--card)}
.mathrows .illus{font-size:15px;margin-bottom:22px}
.mathrows dl{display:grid;grid-template-columns:1fr auto;gap:18px 40px;margin:0}
.mathrows dt{font-size:30px;color:var(--muted)}
.mathrows dd{margin:0;font-size:40px;font-weight:600;letter-spacing:-.03em;text-align:right;font-variant-numeric:tabular-nums}
.portrait .mathrows{padding:30px 32px}
.portrait .mathrows dl{grid-template-columns:1fr;gap:4px}
.portrait .mathrows dd{text-align:left;margin-bottom:18px}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:end;margin-top:12px}
.field{display:block}
.field span{display:block;font-size:17px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px}
.field input{width:100%;font:inherit;font-size:76px;font-weight:600;letter-spacing:-.04em;color:var(--fg);background:transparent;border:0;border-bottom:2px solid var(--line);padding:6px 0 14px;outline:none;user-select:text;-webkit-user-select:text;border-radius:0}
.field input:focus{border-bottom-color:var(--fg)}
#revenueNote{display:flex;gap:12px;align-items:center;font-size:19px;color:var(--muted);margin-top:16px;min-height:28px}
.results{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.result{border-radius:26px;padding:32px 34px}
.result span{font-size:15px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;opacity:.7}
.result strong{display:block;font-size:58px;letter-spacing:-.04em;font-weight:600;margin:14px 0 4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.result em{font-style:normal;font-size:19px;opacity:.75;display:block;line-height:1.45}
.result.best{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.mathlink{margin-top:26px;font-size:19px;color:var(--muted);text-decoration:underline;text-underline-offset:5px}
.portrait .calc{grid-template-columns:1fr;gap:40px}
.portrait .results{grid-template-columns:1fr}
.portrait .result strong{font-size:56px}
.portrait .field input{font-size:72px}
.illus{display:inline-block;font-size:.72em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--illus);border:1px solid currentColor;border-radius:999px;padding:3px 10px;line-height:1.2}

/* Edge pulse: shows, barely, where the clickable edges are */
.edge{position:absolute;top:0;bottom:0;width:22%;z-index:2;pointer-events:none;opacity:0}
.edge.left{left:0;background:linear-gradient(90deg,var(--line),transparent)}
.edge.right{right:0;background:linear-gradient(270deg,var(--line),transparent)}
.edge.flash{animation:edge 1.1s var(--ease)}
@keyframes edge{20%{opacity:1}100%{opacity:0}}
.pulse{position:absolute;z-index:3;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:1px solid var(--fg);pointer-events:none;animation:pulse .9s var(--ease) forwards}
@keyframes pulse{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(7)}}

/* Modals */
.modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.18);animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0}}
.sheet{width:min(1100px,100%);max-height:calc(100dvh - 48px);overflow:hidden;border-radius:26px;padding:26px 30px 30px;animation:lift .5s var(--ease)}
.sheet.narrow{width:min(620px,100%)}
@keyframes lift{from{transform:translateY(16px) scale(.985);opacity:0}}
.sheethead{display:flex;align-items:center;margin-bottom:18px;font-size:16px}
.close{margin-left:auto;width:34px;height:34px;border-radius:999px;border:1px solid var(--line);font-size:20px;line-height:1}
.overview{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.overview button{width:100%;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line);font-size:14px;line-height:1.35;min-height:84px}
.overview button[aria-current="step"]{background:var(--fg);color:var(--bg)}
.overview b{display:block;font-size:11px;letter-spacing:.14em;opacity:.6;margin-bottom:6px}
#mathBody p{font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 12px}
#mathBody dl{display:grid;grid-template-columns:1fr auto;gap:10px 18px;margin:16px 0;font-size:16px}
#mathBody dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.noscript{padding:40px;font-size:18px}

/* Phones: small chrome */
@media (max-width:640px){.hint{display:none}.brand span{display:none}.bottom{justify-content:center}.tone button{padding:6px 10px}.overview{grid-template-columns:1fr 1fr}}

/* Print: one slide per page */
@media print{html,body,#root{overflow:visible;position:static;height:auto}.chrome,.edge,.modal{display:none!important}.stage{position:relative;left:0;top:0;transform:none!important}.slide{position:relative;opacity:1;visibility:visible;transform:none;height:900px;page-break-after:always}}

/* Reduced motion: no travel, no blur, no float; tones still change */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .slide,.slide.before{transform:none}
  .pulse{display:none}
  .edge.flash{animation:none;opacity:.6;transition:opacity .001ms}
}