/* Landing page uses the shared app colours, typography and manual cards. */
.hero{padding-block:64px 76px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center}
.hero h1{font-size:clamp(72px,10vw,124px);letter-spacing:-.065em;line-height:1;margin-top:22px}
.hero h1 b{color:var(--orange)}
.hero .tag{font-size:clamp(28px,3vw,40px);color:var(--sub);margin-top:12px;line-height:1.2}
.hero .stance{margin-top:26px;font-size:19px;color:var(--sub);max-width:44ch}
.cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;margin-top:30px}
.text-action{font-weight:750;font-size:15px;display:inline-block}
.fine{margin-top:22px;font-size:13px;font-weight:600;color:var(--sub)}
.hero-screens{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;max-width:390px;justify-self:center}
.hero-screens figure{margin:0;min-width:0;transform:rotate(-3deg)}
.hero-screens figure+figure{margin-top:56px;transform:rotate(3deg)}
.hero-screens img{display:block;border:5px solid var(--bar);border-radius:24px;box-shadow:var(--shadow);background:var(--bar)}
.hero-screens figcaption{text-align:center;font-size:12px;font-weight:700;margin-top:14px;color:var(--sub)}
.sec{padding-block:72px}
.lead{max-width:780px;display:grid;gap:14px}
.lead h2{font-size:clamp(28px,4vw,44px);letter-spacing:-.035em}
.lead p{font-size:18px;color:var(--sub)}
.choices-section{background:var(--surface-2);border-block:1px solid var(--line)}
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px}
.choice{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;gap:16px;min-width:0}
.choice h3{font-size:26px;letter-spacing:-.04em}
.choice p{font-size:15px;color:var(--sub)}
.choice .choice-purpose{font-size:18px;color:var(--ink);font-weight:700;line-height:1.5}
.choice .btn{margin-top:auto;align-self:flex-start;white-space:normal;justify-content:space-between;width:100%;border-radius:12px;line-height:1.35}
.choice small{font-size:11.5px;color:var(--sub);line-height:1.5}
.choice-note{padding-top:14px;border-top:1px solid var(--line);font-size:14px!important;color:var(--sub)}
.availability{font-size:14px;color:var(--sub);margin-top:24px}
.host-choices{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--line)}
.host-choice{display:grid;grid-template-columns:1fr 1.6fr;gap:46px;padding-block:28px;border-bottom:1px solid var(--line)}
.host-choice h3{font-size:25px;margin:10px 0}
.host-choice p{font-size:16px;color:var(--sub);margin-bottom:16px}
.release{display:inline-block;font-family:var(--f-mono);font-size:13px;color:var(--sub)}
.compare-section{background:var(--surface-2)}
.comparison{margin-top:30px}
.comparison table{min-width:650px}
.comparison caption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
.comparison th{letter-spacing:0;text-transform:none;font-size:14px;color:var(--ink);padding:16px;text-align:left}
.comparison td{padding:16px;font-size:14px;color:var(--sub)}
.comparison tbody th{font-weight:700;background:var(--surface);width:25%}
.privacy-note{display:grid;grid-template-columns:1fr 2fr;gap:12px 36px;margin-top:32px;padding:28px;border-left:3px solid var(--orange);background:var(--surface)}
.privacy-note h3{font-size:23px}
.privacy-note p{color:var(--sub);font-size:15px}
.privacy-note a{grid-column:2;font-size:14px;font-weight:700}
.faq-layout{display:grid;grid-template-columns:1fr 1.5fr;gap:60px}
.faq details{border-bottom:1px solid var(--line);padding-block:18px}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;font-size:17px;font-weight:750;padding-right:20px;line-height:1.5}
.faq p{padding-top:14px;font-size:15px;color:var(--sub)}
#manuals{padding-top:24px}
.close{padding-block:58px;background:var(--bar);color:var(--on-bar);text-align:center}
.close .wrap{display:grid;gap:22px;justify-items:center}
.close h2{font-size:clamp(28px,4vw,44px);max-width:22ch}
.close p{color:var(--bar-sub);max-width:58ch}
footer.foot{margin-top:0;border-top:1px solid #454950}
@media(max-width:980px){.hero .wrap{gap:30px}.choice{padding:22px}.choices{gap:12px}.choice h3{font-size:23px}.faq-layout{gap:30px}}
@media(max-width:800px){.hero .wrap{grid-template-columns:1fr}.hero{padding-block:38px 48px}.hero-screens{max-width:310px;margin-top:12px}.hero .stance{max-width:56ch}.choices{grid-template-columns:1fr}.choice{gap:12px}.choice .btn{width:auto;gap:18px}.host-choice{grid-template-columns:1fr;gap:14px}.faq-layout{grid-template-columns:1fr;gap:28px}.privacy-note{grid-template-columns:1fr;gap:14px}.privacy-note a{grid-column:auto}.sec{padding-block:46px}.hero-screens figure+figure{margin-top:28px}}
@media(max-width:400px){.hero-screens{max-width:260px;gap:14px}.hero-screens img{border-radius:20px}.hero .stance{font-size:17px}.cta{gap:14px}.hero h1{font-size:76px}}
/* Cloud is a primary way to run Parlons and contribute to its network. */
.choice-cloud{border-top:3px solid var(--orange)}
.choice-cloud .text-action{font-size:13px}
.privacy-points{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;padding:0;margin:20px 0 0;font-size:13px;font-weight:750;color:var(--ink)}
.privacy-points li::before{content:"✓";color:var(--blue);margin-right:7px}
.network-promise{padding-block:42px;border-bottom:1px solid var(--line)}
.promise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.promise-grid h2{font-size:21px;margin-bottom:12px}
.promise-grid p{font-size:15px;color:var(--sub)}
.payment-note{font-size:13px;color:var(--sub);max-width:95ch;margin-top:26px}
@media(max-width:800px){.promise-grid{grid-template-columns:1fr;gap:26px}.network-promise{padding-block:34px}}

/* The app's own identity is the visual thread, from first impression to setup. */
.hero-brand{display:flex;align-items:center;gap:18px}
.hero-brand h1{font-size:clamp(64px,7.3vw,96px);letter-spacing:-.04em;margin:0}
.hero-icon{width:96px;flex:none;display:block}
.hero-icon img,.app-icon img,.host-icon img,.ecosystem-icon img,.closing-brand img{display:block;width:100%;height:auto;border-radius:22%}
.hero .tag{font-size:clamp(28px,3vw,38px);margin-top:24px}
.hero-promise{font-size:15px;font-weight:800;margin-top:24px;color:var(--ink)}
.hero .stance{margin-top:12px;font-size:18px;color:var(--ink)}
.powered{font-size:14px;margin-top:26px;color:var(--sub)}
.powered a{font-weight:800;text-decoration:underline;text-underline-offset:4px}
.hero .fine{margin-top:10px;font-size:12px}
.hero-screens{background:var(--blue-soft);padding:38px 24px 26px;max-width:430px;border-radius:36px 36px 100px 36px;gap:18px}
.hero-screens img{box-shadow:none}
.hero-screens figure+figure{margin-top:72px}
.hero-screens figcaption{font-size:12px}
.choice{border:0;border-top:3px solid transparent;border-radius:16px;gap:18px}
.choice-brand{display:flex;align-items:center;gap:16px;min-height:64px}
.app-icon{display:block;flex:none;width:64px}
.platform{font-size:13px;font-weight:750;color:var(--sub);line-height:1.5;max-width:20ch}
.choice h3{letter-spacing:-.03em}
.choice .choice-purpose{font-size:18px}
.choice p{color:var(--ink)}
.choice .choice-note{color:var(--sub)}
.choice .btn{min-height:52px;transition:transform .18s ease}
.choice .btn:hover{transform:translateY(-2px)}
.choice .btn:active{transform:translateY(1px)}
.choice-cloud{background:#23262B;color:#F1F2F3;border-top-color:#FF7A2E}
.choice-cloud p,.choice-cloud .choice-purpose{color:#F1F2F3}
.choice-cloud .platform,.choice-cloud .choice-note,.choice-cloud small{color:#C6CBD2}
.choice-cloud .choice-note{border-color:#494D54}
.choice-cloud .text-action{color:#A9C3FF}
.choice-cloud .btn{background:#FF7A2E;color:#16181B}
.choice-cloud .btn:hover{background:#FF914F;color:#16181B}
.host-icon{width:64px;display:block;margin-bottom:18px}
.manual-brand{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;color:var(--sub)}
.manual-brand .app-icon{width:44px}
.manual{border:0;box-shadow:none;transition:transform .18s ease}
.manual:hover{transform:translateY(-3px)}
.ecosystem{background:#191C21;color:#F1F2F3;padding-block:80px}
.ecosystem-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:52px 64px}
.ecosystem-intro h2{font-size:clamp(32px,3.8vw,46px);letter-spacing:-.03em;line-height:1.1}
.ecosystem-intro>p{font-size:18px;color:#C6CBD2;margin-top:24px;max-width:38ch}
.ecosystem-home{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:44px;color:#F1F2F3}
.ecosystem-home strong{font-size:32px;letter-spacing:-.03em}
.ecosystem-home>span{color:#A9C3FF;font-size:15px;font-weight:750}
.ecosystem a{text-underline-offset:5px}
.ecosystem-stack{display:grid;gap:32px;position:relative}
.ecosystem-stack::before{content:"";position:absolute;left:31px;top:40px;bottom:65px;width:2px;background:#494D54}
.ecosystem-member{display:grid;grid-template-columns:64px minmax(0,1fr);gap:22px;position:relative}
.ecosystem-member h3{font-size:28px;margin-bottom:10px;letter-spacing:-.03em}
.ecosystem-member p{font-size:16px;color:#C6CBD2;line-height:1.55}
.ecosystem-member a{display:inline-block;margin-top:12px;font-size:14px;font-weight:750;color:#A9C3FF}
.ecosystem-icon{display:block;width:64px;align-self:start;background:#191C21}
.network-letter{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#A9C3FF;color:#191C21;font-size:23px;font-weight:800;letter-spacing:-.03em}
.minima-letter{background:#FF7A2E;font-size:30px}
.ecosystem-outro{grid-column:1/-1;display:flex;align-items:baseline;gap:32px;padding-top:28px;border-top:1px solid #494D54}
.ecosystem-outro h3{font-size:18px;flex:1}
.ecosystem-outro p{font-size:15px;color:#C6CBD2;flex:1.15}
.closing-brand{display:flex;align-items:center;gap:20px;margin-bottom:6px}
.closing-brand span{width:90px}
.closing-brand strong{font-size:clamp(56px,7vw,88px);letter-spacing:-.04em;line-height:1}
@media(min-width:801px){.choice small{min-height:3em}}
@media(max-width:980px){.hero-icon{width:72px}.hero-brand{gap:12px}.hero-brand h1{font-size:72px}.ecosystem-layout{gap:36px}.choice-brand{gap:12px}.app-icon{width:56px}}
@media(max-width:800px){.hero .wrap{gap:34px}.hero-brand h1{font-size:clamp(60px,12vw,88px)}.hero-icon{width:80px}.hero-screens{max-width:360px;padding:28px 20px 22px;border-radius:24px 24px 76px 24px}.hero-screens figure+figure{margin-top:46px}.hero .stance{max-width:54ch}.choice .btn{width:100%}.ecosystem{padding-block:52px}.ecosystem-layout{grid-template-columns:1fr;gap:40px}.ecosystem-intro>p{max-width:54ch}.ecosystem-home{margin-top:24px}.ecosystem-outro{display:block}.ecosystem-outro p{margin-top:12px}.ecosystem-member{gap:18px}.closing-brand span{width:72px}}
@media(max-width:400px){.hero-icon{width:64px}.hero-brand h1{font-size:60px}.hero-brand{gap:10px}.hero-screens{max-width:300px}.ecosystem-intro h2{font-size:32px}.ecosystem-member{grid-template-columns:52px minmax(0,1fr)}.network-letter,.ecosystem-icon{width:52px;height:52px}.ecosystem-stack::before{left:25px}.closing-brand{gap:14px}}
@media(prefers-reduced-motion:no-preference){.hero-brand{animation:brand-arrive .65s cubic-bezier(.16,1,.3,1) both}.hero-screens{animation:screen-arrive .9s cubic-bezier(.16,1,.3,1) both}@keyframes brand-arrive{from{transform:translateY(12px)}to{transform:translateY(0)}}@keyframes screen-arrive{from{transform:translateY(24px) rotate(1deg)}to{transform:translateY(0) rotate(0)}}}
.hero .btn-go,.close .btn-go{background:#FF7A2E;color:#16181B}