/* Pathary's public website (docs/plans/SITES-PLAN.md). It wears the same look as the Welcome room
   (app/public/styles/welcome.css) on the factory Glass Night skin.
   Every color, glass and background value is a skin variable with the same name the background tool
   paints in the app (packages/platform-ui/skins.mjs). The defaults below are factory Glass Night; the
   website look (/site/look.css, from the background tool) replaces them, so this file never needs editing to
   change the look. */
:root{
  color-scheme:dark;
  --font-ui:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --bg:#171614;--text:#edeae3;--muted:#a7a397;--edge:rgba(255,255,255,.09);
  --skin-accent:#247faf;--skin-on-accent:#101820;
  --skin-base-fill:radial-gradient(ellipse at 90% 20%,#293f42 0%,transparent 55%),radial-gradient(ellipse at 15% 90%,#273447 0%,transparent 65%),radial-gradient(ellipse at 50% 70%,#454630 0%,transparent 60%),#121923;
  --skin-background-effects:none;--skin-image-opacity:1;--skin-media-blur:0px;
  --skin-surface-fill:rgba(36,35,32,.68);--wall-blur:24px;
  --container-fill:rgba(36,35,32,.68);--container-blur:0px;
  --site-width:1180px;--gutter:clamp(16px,7vw,96px);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-ui);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;}
.site-skip{position:absolute;left:16px;top:-48px;padding:10px 16px;border-radius:999px;background:var(--skin-accent);color:var(--skin-on-accent);font-weight:600;text-decoration:none;z-index:10;}
.site-skip:focus{top:12px;}

/* The wall: the skin's background, its photo or video, its effects, then the Welcome glow. */
.site-wall{position:fixed;inset:0;z-index:-1;background:var(--skin-base-fill);opacity:var(--skin-surface-opacity,1);}
.site-wall-media,.site-wall video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--skin-image-opacity);filter:blur(var(--skin-media-blur)) brightness(var(--wall-light,1));}
.site-wall-media{background:var(--site-wall-image,none) center/cover no-repeat;}
.site-wall::before{content:"";position:absolute;inset:0;z-index:1;background:var(--skin-background-effects);}
.site-wall::after{z-index:1;content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 75% 8%,color-mix(in srgb,var(--skin-accent) 14%,transparent),transparent 48%);}

.glass{background:var(--skin-surface-fill);-webkit-backdrop-filter:blur(var(--wall-blur));backdrop-filter:blur(var(--wall-blur));border:1px solid var(--edge);}

/* Bar */
/* The bar lines up with the page column at every width. */
.site-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:28px;padding:14px max(var(--gutter),calc((100% - var(--site-width))/2 + var(--gutter)));border-width:0 0 1px;}
.site-mark{display:flex;align-items:center;gap:10px;font-weight:650;font-size:19px;letter-spacing:-.02em;text-decoration:none;}
.site-mark svg{width:28px;height:28px;display:block;}
.site-mark rect{fill:var(--skin-accent);}
.site-mark path{fill:none;stroke:var(--skin-on-accent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;}
.site-nav{display:flex;gap:26px;margin-left:auto;font-size:14px;}
.site-nav a{text-decoration:none;color:var(--muted);}
.site-nav a:hover{color:var(--text);}
.site-bar-actions{display:flex;align-items:center;gap:18px;font-size:14px;}
.site-bar-actions a{text-decoration:none;}

/* Buttons */
.site-primary{display:inline-flex;align-items:center;gap:8px;background:var(--skin-accent);color:var(--skin-on-accent);border-radius:999px;padding:14px 24px;font-weight:600;font-size:15px;text-decoration:none;transition:filter .18s,transform .18s;}
.site-primary:hover{filter:brightness(1.1);transform:translateY(-1px);}
.site-bar .site-primary{padding:9px 18px;font-size:14px;}
.site-text-link{font-size:15px;text-decoration:none;color:var(--text);}
.site-text-link:hover{color:var(--skin-accent);}

/* Page */
.site-page{max-width:var(--site-width);margin:auto;padding:0 var(--gutter) 72px;}
.site-eyebrow{font-size:13px;letter-spacing:.01em;font-weight:600;color:var(--muted);margin:0 0 20px;}
.site-page h1{font:650 clamp(44px,6vw,84px)/1.03 var(--font-ui);letter-spacing:-.055em;margin:0 0 28px;}
.site-page h1 span{color:var(--skin-accent);}
.site-page h2{font:600 clamp(26px,3vw,40px)/1.15 var(--font-ui);letter-spacing:-.035em;margin:0 0 18px;}
.site-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.65;color:var(--muted);max-width:620px;margin:0;}
.site-muted{color:var(--muted);line-height:1.65;}

/* Hero */
.site-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center;padding:96px 0 88px;}
.site-actions{display:flex;align-items:center;gap:26px;margin-top:36px;flex-wrap:wrap;}
.site-note{font-size:14px;color:var(--muted);margin:22px 0 0;}

/* A small, decorative picture of the workspace: the Essentials menu and a note from Ann. */
.site-peek{border-radius:24px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);}
.site-peek-top{display:flex;gap:6px;margin-bottom:16px;}
.site-peek-top i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--text) 18%,transparent);}
.site-peek-body{display:grid;grid-template-columns:140px 1fr;gap:16px;}
.site-peek-menu{display:flex;flex-direction:column;gap:4px;font-size:13px;}
.site-peek-menu b{font-size:11px;letter-spacing:.06em;color:var(--muted);font-weight:600;margin:2px 8px 6px;}
.site-peek-menu span{display:flex;align-items:center;gap:9px;padding:8px;border-radius:10px;}
.site-peek-menu span:first-of-type{background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--skin-accent);}
.site-peek-menu svg{width:16px;height:16px;flex:none;}
.site-peek-main{display:flex;flex-direction:column;gap:12px;}
.site-peek-card{position:relative;isolation:isolate;border-radius:14px;padding:14px;background:var(--container-fill);border:1px solid var(--edge);font-size:13px;backdrop-filter:blur(var(--container-blur,0px));}
.site-peek-card strong{display:block;font-size:22px;letter-spacing:-.03em;margin-top:4px;}
.site-peek-card small{color:var(--muted);}
.site-peek-ann{display:flex;gap:10px;align-items:flex-start;}
.site-peek-ann svg{width:22px;height:22px;color:var(--skin-accent);flex:none;margin-top:1px;}

/* Foundation */
.site-foundation{display:flex;align-items:center;gap:28px;padding:30px;border-radius:24px;}
.site-foundation>div:last-child{flex:1;}
.site-foundation h2{font-size:25px;}
.site-foundation .site-eyebrow{margin-bottom:12px;}
.site-foundation p:last-child{margin:0;}
.site-orbit{color:var(--skin-accent);flex:none;}
.site-orbit svg{width:54px;height:54px;display:block;}

/* Capabilities */
.site-section{padding-top:96px;scroll-margin-top:72px;}
.site-section-lead{max-width:600px;margin:0 0 32px;}
.site-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.site-card{border-radius:22px;padding:28px;display:flex;flex-direction:column;align-items:flex-start;transition:transform .18s;}
.site-card:hover{transform:translateY(-2px);}
.site-symbol{color:var(--skin-accent);margin-bottom:22px;}
.site-symbol svg{width:30px;height:30px;display:block;}
.site-card h3{font-size:22px;font-weight:600;letter-spacing:-.03em;margin:0;}
.site-card .site-tag{margin:8px 0 12px;color:var(--text);}
.site-card p{margin:0;}

/* Free */
.site-free{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;border-radius:24px;padding:34px;}
.site-free h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px;}
.site-free p{margin:0;}

/* Closing and footer */
.site-closing{padding-top:104px;max-width:640px;}
.site-closing .site-primary{margin-top:18px;}
.site-footer{max-width:var(--site-width);margin:auto;padding:28px var(--gutter) 40px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;font-size:14px;color:var(--muted);border-top:1px solid var(--edge);}
.site-footer .site-mark{font-size:16px;color:var(--text);}
.site-footer a{text-decoration:none;}
.site-footer a:hover{color:var(--text);}
.site-footer span:last-child{margin-left:auto;}

:is(.site-primary,.site-text-link,.site-nav a,.site-bar-actions a,.site-mark,.site-footer a):focus-visible{outline:2px solid var(--skin-accent);outline-offset:4px;border-radius:6px;}

@media(max-width:980px){
  .site-hero{grid-template-columns:1fr;padding:64px 0 56px;gap:40px;}
  .site-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:700px){
  :root{--gutter:16px;}
  .site-nav{display:none;}
  .site-bar{gap:12px;}
  .site-bar-actions{margin-left:auto;gap:14px;}
  .site-hero{padding:44px 0 40px;}
  .site-peek-body{grid-template-columns:1fr;}
  .site-peek-menu{display:none;}
  .site-foundation{display:block;padding:24px;}
  .site-orbit{margin-bottom:16px;}
  :is(.site-grid,.site-free){grid-template-columns:1fr;}
  .site-free{padding:24px;}
  .site-section{padding-top:64px;}
  .site-closing{padding-top:72px;}
  .site-footer span:last-child{margin-left:0;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  :is(.site-primary,.site-card){transition:none;}
  :is(.site-primary,.site-card):hover{transform:none;}
}

/* The same saved card surface can include media, effects and glass. Foreground stays sharp. */
.site-peek-card:has(>.site-card-paint){background:transparent}
.site-card-paint{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:-1;opacity:var(--site-card-opacity,1)}
.site-card-paint>:is(span,video){position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}
.site-card-paint>.site-card-base{background:var(--site-card-base)}
.site-card-paint>.site-card-image,.site-card-paint>video{object-fit:cover;opacity:var(--site-card-image-opacity,1);filter:brightness(var(--site-card-light,1)) blur(var(--site-card-media-blur,0px))}
.site-card-paint>.site-card-image{background:var(--site-card-image,none) center/cover no-repeat}
.site-card-paint>.site-card-effects{background:var(--site-card-effects,none)}
.site-card-paint>.site-card-glass{background:var(--site-card-glass,transparent);backdrop-filter:blur(var(--site-card-glass-blur,0px))}