html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{background:var(--sk-color-canvas)}
.landing-header{position:sticky;z-index:20;top:0;border-bottom:1px solid color-mix(in srgb,var(--sk-color-border) 70%,transparent);background:color-mix(in srgb,var(--sk-color-canvas) 88%,transparent);backdrop-filter:blur(16px)}
.landing-header nav{display:grid;min-height:5rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem}.landing-header .sk-button{justify-self:end}
.landing-logo{display:inline-flex;align-items:baseline;color:var(--sk-color-text);font:var(--sk-type-heading-weight) 1.55rem var(--sk-font-display);letter-spacing:var(--sk-type-heading-tracking);text-decoration:none}.landing-logo>span{color:var(--sk-color-accent)}.landing-logo small{margin-left:.8rem;color:var(--sk-color-text-muted);font:500 .7rem var(--sk-font-body);letter-spacing:.08em;text-transform:uppercase}
.landing-links{display:flex;gap:1.6rem}.landing-links a{color:var(--sk-color-text-muted);font-size:.9rem;font-weight:650;text-decoration:none}.landing-links a:hover{color:var(--sk-color-text)}
.hero{min-height:calc(100dvh - 5rem);display:grid;align-items:center;padding:6rem 0}.hero>.sk-container{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(20rem,.85fr);align-items:center;gap:clamp(3rem,8vw,8rem)}/* The banner step, which Common's sign-in intro also wears: these two are the
   only surfaces on the platform whose whole job is the sentence they carry. */
.hero h1{max-width:10ch;margin:.4rem 0 1.5rem;font:var(--sk-type-hero-weight) var(--sk-type-hero)/var(--sk-type-hero-leading) var(--sk-font-display);letter-spacing:var(--sk-type-hero-tracking)}.hero-copy>p{max-width:38rem;color:var(--sk-color-text-muted);font-size:clamp(1.05rem,2vw,1.3rem)}.hero-actions{display:flex;gap:.75rem;margin-top:2rem;flex-wrap:wrap}
.hero-art{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--sk-color-border);border-radius:50%;background:var(--sk-color-surface-muted)}.hero-art::before,.hero-art::after{content:"";position:absolute;border:1px solid var(--sk-color-border);border-radius:50%}.hero-art::before{inset:14%}.hero-art::after{inset:30%}.hero-orbit{position:absolute;inset:-1px;border-top:3px solid var(--sk-color-accent);border-radius:50%;transform:rotate(-30deg)}.hero-check{z-index:2;display:grid;width:28%;aspect-ratio:1;place-items:center;border-radius:1.7rem;background:var(--sk-color-accent);color:var(--sk-color-on-accent);font-size:clamp(2rem,6vw,5rem);box-shadow:var(--sk-component-shadow-panel)}.hero-art>span{position:absolute;right:3%;bottom:12%;color:var(--sk-color-text-muted);font-size:.65rem;font-weight:800;letter-spacing:.14em}
.about,.apps,.contact{padding:7rem 0}.about{background:var(--sk-color-surface-muted);border-block:1px solid var(--sk-color-border)}.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}.value-card{min-height:17rem;display:flex;flex-direction:column}.value-card h3,.app-card h3{margin:auto 0 .6rem;font:var(--sk-type-heading-weight) 1.55rem var(--sk-font-display);letter-spacing:var(--sk-type-heading-tracking)}.value-card p,.app-card p{margin:0;color:var(--sk-color-text-muted)}.value-index{font:var(--sk-type-heading-weight) 3rem var(--sk-font-display);letter-spacing:var(--sk-type-heading-tracking);color:var(--sk-color-border)}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem}.app-card{position:relative;display:grid;min-height:24rem;grid-template-columns:1fr auto;gap:1.25rem}.app-card>div:nth-child(2){grid-column:1/-1;align-self:end}.app-mark{display:grid;width:4rem;height:4rem;place-items:center;border-radius:1rem;background:var(--sk-color-accent);color:var(--sk-color-on-accent);font-size:1.75rem}.app-card .sk-badge{align-self:start;justify-self:end}.app-card .app-link{grid-column:1/-1;justify-content:flex-start;padding:0}
/* Colour comes from .sk-inverse — including the primary button flipping back,
   which this file used to restate. */
.contact-panel{display:flex;align-items:center;justify-content:space-between;gap:3rem;padding:clamp(2rem,7vw,5rem);border-radius:var(--sk-radius-xl)}.contact-panel h2{margin:.3rem 0;font:var(--sk-type-title-weight) var(--sk-type-title)/var(--sk-type-title-leading) var(--sk-font-display);letter-spacing:var(--sk-type-title-tracking)}.contact-panel p{opacity:.7}
footer{padding:2rem 0;border-top:1px solid var(--sk-color-border)}footer>.sk-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}footer p{color:var(--sk-color-text-muted);font-size:.85rem}
/* The legal pages: privacy, terms, contact. One measure, generous leading, and
   nothing else — they are read rather than looked at, and the studio furniture
   above and below is enough page. */
.landing-legal{padding:5rem 0 6rem}.landing-legal h1{margin:0 0 .5rem;font:var(--sk-type-title-weight) var(--sk-type-title)/var(--sk-type-title-leading) var(--sk-font-display);letter-spacing:var(--sk-type-title-tracking)}.landing-legal h2{margin:2.75rem 0 .75rem;font:var(--sk-type-heading-weight) 1.35rem var(--sk-font-display);letter-spacing:var(--sk-type-heading-tracking)}.landing-legal p{margin:0 0 1rem;max-width:38rem;line-height:1.7}.landing-legal a{color:var(--sk-color-text);text-decoration-color:var(--sk-color-accent);text-underline-offset:.2em}.landing-legal-updated{color:var(--sk-color-text-muted);font-size:.85rem}.landing-legal-address{color:var(--sk-color-text-muted)}
/* Deliberately loud, and only ever seen on a development machine: production
   refuses to start with a legal fact unset. See skobka.landing.config. */
.landing-unset{padding:0 .3em;border-radius:var(--sk-radius-sm);background:var(--sk-color-accent);color:var(--sk-color-on-accent);font-size:.85em}
.landing-legal-links{display:flex;gap:1.2rem}.landing-legal-links a{color:var(--sk-color-text-muted);font-size:.85rem;text-decoration:none}.landing-legal-links a:hover{color:var(--sk-color-text);text-decoration:underline}
@media(max-width:52rem){.landing-header nav{grid-template-columns:1fr auto}.landing-links{display:none}.landing-logo small{display:none}.hero{min-height:auto;padding:4rem 0}.hero h1{font-size:clamp(3rem,13vw,5rem)}.hero>.sk-container{grid-template-columns:1fr}.hero-art{width:min(26rem,88%);margin-inline:auto}.value-grid,.app-grid{grid-template-columns:1fr}.value-card{min-height:13rem}.contact-panel{align-items:flex-start;flex-direction:column}footer>.sk-container{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-orbit{transform:none}}