/* Shared styles for the standalone wedge / SEO content pages (public/it/*, public/en/*).
   Reuses the Solco design tokens + self-hosted fonts. Kept lean (no canvas/animation). */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/space-grotesk-latin.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-mono-400.woff2') format('woff2')}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-mono-700.woff2') format('woff2')}

:root{
  --paper:#F1EFE8; --card:#FBF9F3; --line:#E2DDD0; --bg-dark:#16140F; --bg-deep:#0E0D0A;
  --ink:#1C1A17; --ink-2:#2C2A22; --grey:#8A857A; --grey-soft:#A8A296; --cream:#F1EFE8;
  --terra:#C8643C; --green:#0BD18A; --font:'Space Grotesk',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5}
.mono{font-family:var(--mono)}
a{color:inherit}
.wrap{max-width:760px;margin:0 auto;padding:0 clamp(22px,6vw,40px)}

nav.wnav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,40px);background:rgba(241,239,232,0.85);backdrop-filter:saturate(140%) blur(12px);border-bottom:0.5px solid var(--line)}
.wnav .brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.wnav .brand svg{width:24px;height:24px;display:block}
.wnav .brand span{font-weight:600;font-size:19px;letter-spacing:-0.02em;color:var(--ink);text-transform:lowercase}
.wnav .end{display:flex;align-items:center;gap:clamp(12px,3vw,20px);font-size:14px}
.wnav .lang a{color:var(--grey-soft);text-decoration:none;font-weight:500}
.wnav .lang a[aria-current]{color:var(--ink)}
.wnav .lang .sep{color:var(--line)}
.wnav .demo{background:var(--ink);color:var(--cream);text-decoration:none;padding:9px 16px;border-radius:100px;font-weight:500;white-space:nowrap}

.whero{background:var(--bg-dark);color:var(--cream);padding:clamp(70px,11vh,120px) 0 clamp(48px,8vh,80px)}
.whero .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--terra)}
.whero h1{font-weight:500;letter-spacing:-0.03em;line-height:1.08;font-size:clamp(30px,5.2vw,48px);margin-top:16px;max-width:16ch}
.whero p{margin-top:20px;font-size:clamp(16px,2vw,19px);line-height:1.55;color:rgba(241,239,232,0.8);max-width:56ch}
.whero .cta{margin-top:30px;display:inline-block;background:var(--cream);color:var(--bg-dark);text-decoration:none;font-weight:600;padding:13px 22px;border-radius:100px}

main{padding:clamp(48px,8vh,80px) 0}
main h2{font-weight:500;letter-spacing:-0.02em;font-size:clamp(22px,3.4vw,30px);margin:clamp(36px,6vh,56px) 0 14px}
main h2:first-child{margin-top:0}
main p{font-size:clamp(15px,1.8vw,17px);color:var(--ink-2);margin:0 0 14px}
main p.lead{font-size:clamp(16px,2vw,18px)}
main ul{margin:0 0 16px;padding-left:0;list-style:none}
main ul li{position:relative;padding:9px 0 9px 30px;border-bottom:0.5px solid var(--line);font-size:15px;color:var(--ink-2)}
main ul li::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:12px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg);border-radius:1px}
main strong{color:var(--ink);font-weight:600}
main ol{margin:0 0 16px;padding-left:0;list-style:none;counter-reset:step}
main ol li{position:relative;padding:9px 0 9px 34px;border-bottom:0.5px solid var(--line);font-size:15px;color:var(--ink-2);counter-increment:step}
main ol li::before{content:counter(step);position:absolute;left:0;top:8px;width:22px;height:22px;background:var(--ink);color:var(--cream);border-radius:50%;font-family:var(--mono);font-size:12px;display:flex;align-items:center;justify-content:center}
.related{background:var(--card);border:0.5px solid var(--line);border-radius:14px;padding:16px 20px;margin:26px 0 0}
.related .k{font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--terra);margin-bottom:8px}
.related a{color:var(--terra);text-decoration:none;font-weight:500}
.related li{padding:4px 0;font-size:15px;list-style:none}
.related ul{padding:0;margin:0}
.callout{background:var(--card);border:0.5px solid var(--line);border-radius:14px;padding:20px 22px;margin:18px 0}
.callout .k{font-family:var(--mono);font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--terra);margin-bottom:6px}

.faq{margin-top:8px}
.faq details{border-bottom:0.5px solid var(--line);padding:14px 0}
.faq summary{font-weight:500;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--terra);font-family:var(--mono)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 2px;font-size:15px;color:var(--grey)}

.wcta{background:var(--bg-dark);color:var(--cream);text-align:center;padding:clamp(48px,8vh,80px) 0}
.wcta h2{font-weight:500;letter-spacing:-0.02em;font-size:clamp(24px,4vw,36px);margin-bottom:24px;color:var(--cream)}
.wcta a{display:inline-block;background:var(--cream);color:var(--bg-dark);text-decoration:none;font-weight:600;padding:14px 26px;border-radius:100px}

.wfoot{background:var(--bg-deep);color:var(--grey-soft);padding:30px 0;font-size:13px}
.wfoot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wfoot a{color:var(--grey-soft)}