/* Sortileg · shared stylesheet for member pages (apps, aipex, watchpeek) */
/* Design tokens copied verbatim from index.html — keep in sync if the landing page changes. */

:root{
  --ink:#0B0A12;
  --ink-2:#131120;
  --ink-3:#1B1830;
  --bone:#EAE3D4;
  --taupe:#9C9486;
  --taupe-dim:#6C685F;
  --rose:#B94A5C;
  --rose-soft:#D98A97;
  --line:rgba(234,227,212,0.12);
  --line-2:rgba(234,227,212,0.22);
  --serif-display:"Didot","Bodoni 72","Hoefler Text","Playfair Display",Georgia,serif;
  --serif-body:"Iowan Old Style","Palatino Linotype","Palatino","Charter",Georgia,serif;
  --sans:"Avenir Next","Avenir",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  --maxw:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--serif-body);font-size:18px;line-height:1.62;letter-spacing:.004em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(185,74,92,.32);color:#fff}
:focus-visible{outline:2px solid var(--rose-soft);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-999px;top:0;background:var(--ink-2);color:var(--bone);padding:.6rem 1rem;z-index:100}
.skip:focus{left:12px;top:12px}

.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.36em;font-size:.72rem;font-weight:600;color:var(--rose-soft);margin:0}

/* Emblem */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.mark{display:block}
.mark-sm{width:27px;height:27px}
.mark-lg{width:78px;height:78px;filter:drop-shadow(0 8px 30px rgba(185,74,92,.30))}
.mark-md{width:40px;height:40px;filter:drop-shadow(0 6px 20px rgba(185,74,92,.28))}
.page-mark{display:flex;justify-content:center;margin-bottom:1.6rem}

/* Buttons */
.btn{font-family:var(--sans);font-size:.9rem;letter-spacing:.04em;cursor:pointer;border:0;background:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;padding:.72rem 1.35rem;border-radius:2px;transition:all .3s ease}
.btn-ghost{border:1px solid var(--line-2);color:var(--bone)}
.btn-ghost:hover{border-color:var(--rose-soft);color:#fff;background:rgba(185,74,92,.08)}
.btn-solid{background:var(--rose);color:#fff;font-weight:600}
.btn-solid:hover{background:#cc5567;box-shadow:0 8px 30px rgba(185,74,92,.30)}
.btn-line{border-bottom:1px solid var(--line-2);border-radius:0;color:var(--taupe);padding:.5rem .1rem;display:inline-flex}
.btn-line:hover{color:var(--bone);border-color:var(--rose-soft)}

/* Nav (static top bar, not overlaying a hero — these are read pages) */
.nav{background:var(--ink);border-bottom:1px solid var(--line);position:relative;z-index:20}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1.35rem clamp(1.1rem,4vw,2.4rem)}
.brand{display:inline-flex;align-items:center;gap:.62rem}
.brand-mark{font-family:var(--serif-display);font-size:1.4rem;letter-spacing:.06em}
.brand-mark::first-letter{color:var(--rose-soft)}
.nav-right{display:flex;align-items:center;gap:clamp(1rem,3vw,1.8rem)}
.back-link{font-family:var(--sans);font-size:.86rem;letter-spacing:.02em;color:var(--taupe);transition:color .3s}
.back-link:hover{color:var(--bone)}

.lang{display:inline-flex;align-items:center;gap:.15rem;font-family:var(--sans);font-size:.78rem}
.lang button{background:none;border:0;color:var(--taupe-dim);cursor:pointer;padding:.3rem .3rem;letter-spacing:.08em;transition:color .3s}
.lang button[aria-pressed="true"]{color:var(--bone)}
.lang .bar{color:var(--taupe-dim);opacity:.5}

/* Page hero */
.page-hero{position:relative;padding:clamp(4.5rem,11vw,7.5rem) clamp(1.2rem,5vw,2rem) clamp(3rem,7vw,4.5rem);text-align:center;overflow:hidden}
.page-hero::before{content:"";position:absolute;left:50%;top:18%;width:min(60vw,620px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(circle, rgba(185,74,92,.09), rgba(185,74,92,0) 62%)}
.page-hero-inner{position:relative;z-index:1;max-width:640px;margin:0 auto}
.page-hero .eyebrow{margin-bottom:1.3rem}
.page-title{font-family:var(--serif-display);font-weight:400;font-size:clamp(2.6rem,7vw,4.4rem);line-height:1.02;letter-spacing:.015em;margin:0;text-wrap:balance}
.page-title .g{color:var(--rose-soft)}
.page-tagline{font-family:var(--serif-display);font-style:italic;font-size:clamp(1.25rem,3.2vw,1.7rem);line-height:1.25;margin:1.1rem 0 0;color:var(--bone);text-wrap:balance}
.page-lede{max-width:42ch;margin:1rem auto 0;color:var(--taupe);font-size:1.04rem;line-height:1.6}

/* Status / coming-soon pill */
.status{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.8rem;padding:.5rem 1.05rem;border:1px solid var(--line-2);border-radius:999px;font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--rose-soft);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(217,138,151,.45)}70%,100%{box-shadow:0 0 0 9px rgba(217,138,151,0)}}

/* Sections */
.section{background:var(--ink);border-top:1px solid var(--line)}
.section-inner{max-width:720px;margin:0 auto;padding:clamp(3.4rem,9vw,5.5rem) clamp(1.2rem,5vw,2rem)}
.section-inner.wide{max-width:var(--maxw)}
.h2{font-family:var(--serif-display);font-weight:400;font-size:clamp(1.9rem,4.6vw,2.7rem);line-height:1.08;letter-spacing:.01em;margin:0 0 1.4rem;text-wrap:balance}
.prose{font-size:1.12rem;line-height:1.72;color:var(--bone);max-width:60ch;margin:0}
.prose em{font-style:italic;color:var(--rose-soft)}
.section-intro{max-width:52ch;color:var(--taupe);font-size:1.06rem;line-height:1.6;margin:0}

/* Tool cards (apps.html overview) */
.tools{list-style:none;margin:3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.2rem,3vw,1.8rem)}
.tool-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:2.1rem 2rem 2rem;border:1px solid var(--line-2);border-radius:4px;transition:border-color .35s ease,transform .35s ease,background .35s ease}
.tool-card:hover{border-color:var(--rose-soft);transform:translateY(-3px);background:rgba(185,74,92,.04)}
.tool-card .mark-md{margin-bottom:1.3rem}
.tool-icon{width:54px;height:54px;border-radius:24%;display:block;margin-bottom:1.35rem;box-shadow:0 10px 26px rgba(0,0,0,.5);outline:1px solid var(--line);outline-offset:-1px}
.tool-name{font-family:var(--serif-display);font-weight:400;font-size:1.7rem;letter-spacing:.01em;margin:0}
.tool-tagline{font-family:var(--serif-display);font-style:italic;color:var(--rose-soft);font-size:1.02rem;margin:.5rem 0 0}
.tool-teaser{color:var(--taupe);font-size:.98rem;line-height:1.58;margin:.95rem 0 0}
.tool-card .status{margin-top:1.4rem}
.tool-more{margin-top:1.5rem}

/* Feature blocks (detail pages) */
.features{list-style:none;margin:3rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.2rem}
.feature{padding-top:1.4rem;border-top:1px solid var(--line)}
.feature-title{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;font-weight:600;color:var(--rose-soft);margin:0 0 .7rem}
.feature-body{color:var(--taupe);font-size:1rem;line-height:1.62;margin:0}

.close-line{max-width:60ch;margin:3.2rem 0 0;padding-top:2.4rem;border-top:1px solid var(--line);color:var(--taupe);font-family:var(--serif-display);font-style:italic;font-size:1.15rem;line-height:1.5}
.close-line .g{color:var(--rose-soft)}
.back-foot{margin-top:2.2rem}

/* Footer */
.foot{background:var(--ink-2);border-top:1px solid var(--line)}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:2.6rem clamp(1.2rem,5vw,2.4rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.6rem}
.foot-brand{font-family:var(--serif-display);font-size:1.2rem;letter-spacing:.05em}
.foot-brand::first-letter{color:var(--rose-soft)}
.foot-dom{font-family:var(--sans);font-size:.85rem;color:var(--taupe);letter-spacing:.03em}
.foot-note{font-style:italic;color:var(--taupe-dim);font-size:.95rem;margin-left:auto}

/* Reveal-on-load, matching the landing page's restrained entrance */
.reveal{opacity:0;transform:translateY(14px)}
.in .reveal{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.in .reveal:nth-child(1){transition-delay:.02s}
.in .reveal:nth-child(2){transition-delay:.12s}
.in .reveal:nth-child(3){transition-delay:.22s}
.in .reveal:nth-child(4){transition-delay:.34s}
.in .reveal:nth-child(5){transition-delay:.46s}

/* ---- App icon (hero) ---- */
.app-icon{width:clamp(88px,21vw,116px);height:auto;aspect-ratio:1;border-radius:23%;display:block;margin:0 auto 1.7rem;
  box-shadow:0 22px 55px rgba(0,0,0,.55);outline:1px solid var(--line);outline-offset:-1px}

/* ---- Showcase (device mockups) ---- */
.showcase-sec .section-inner{text-align:center}
.show-eyebrow{margin:0 0 2.7rem}
.showcase{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(2rem,7vw,4.5rem)}
.shot{margin:0;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.shot figcaption{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe-dim)}
.show-note{margin:2.6rem 0 0;font-family:var(--sans);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe-dim)}

/* Phone bezel — the screenshots already carry the iOS status bar, so no notch is drawn */
.device-phone{position:relative;width:clamp(198px,58vw,256px);
  background:linear-gradient(155deg,#20202a,#050509 70%);border-radius:40px;padding:9px;
  box-shadow:0 36px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(234,227,212,.12),0 0 0 1px rgba(0,0,0,.55)}
.device-phone .screen{border-radius:31px;overflow:hidden;background:#000;line-height:0}
.device-phone img{display:block;width:100%;height:auto}

/* Watch bezel */
.device-watch{position:relative;width:clamp(148px,40vw,188px);
  background:linear-gradient(155deg,#2a2a30,#0a0a0e 72%);border-radius:46px;padding:11px 9px;
  box-shadow:0 28px 62px rgba(0,0,0,.58),inset 0 0 0 1px rgba(234,227,212,.1)}
.device-watch::after{content:"";position:absolute;right:-3px;top:39%;width:5px;height:22px;background:#41414a;border-radius:2px}
.device-watch .screen{border-radius:34px;overflow:hidden;background:#000;line-height:0}
.device-watch img{display:block;width:100%;height:auto}

/* AiPex designed mock screen (rendered inside a phone bezel) */
.aipex-screen{width:100%;aspect-ratio:1179/2556;background:radial-gradient(125% 55% at 50% 0%,#151c30 0%,#0B0E17 55%);
  color:#EAF2FF;font-family:var(--sans);padding:32px 18px 20px;display:flex;flex-direction:column;position:relative;overflow:hidden;text-align:left}
.ax-status{display:flex;justify-content:space-between;font-size:11px;color:#5a678c;letter-spacing:.04em;position:relative;z-index:2}
.ax-glow{position:absolute;top:-6%;left:50%;transform:translateX(-50%);width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.55),rgba(124,58,237,.30) 46%,transparent 72%);filter:blur(4px);z-index:0}
.ax-brand{position:relative;z-index:1;text-align:center;margin-top:38px;font-weight:700;font-size:25px;letter-spacing:.01em;
  background:linear-gradient(90deg,#00D4FF,#7C3AED);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ax-sub{position:relative;z-index:1;text-align:center;margin:6px 0 0;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:#5a678c}
.ax-card{position:relative;z-index:1;margin-top:24px;background:rgba(26,33,52,.85);border:1px solid rgba(120,160,255,.16);border-radius:14px;padding:2px 14px}
.ax-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid rgba(120,160,255,.1)}
.ax-row:last-child{border-bottom:0}
.ax-k{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:#5f80c0;white-space:nowrap}
.ax-v{font-size:15px;font-weight:600;color:#EAF2FF;text-align:right}
.ax-answer .ax-v{color:#22E3B0}
.ax-live{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:7px;font-size:9px;text-transform:uppercase;letter-spacing:.24em;color:#5a678c;padding-top:16px}
.ax-pulse{width:7px;height:7px;border-radius:50%;background:#22E3B0;box-shadow:0 0 10px #22E3B0;animation:ping 2.2s ease-out infinite}

@media (max-width:560px){
  .foot-note{margin-left:0;width:100%}
  .nav-right{gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .status .dot,.ax-pulse{animation:none}
  html{scroll-behavior:auto}
}