/* ===================================================================
   EDITORIAL — the site's type system and canvas.
   Loaded AFTER site.css on every page, so it wins on equal specificity.

   Brief (owner interview, 2026-08-11):
   · ONE type system, two canvases — light on the site, dark in the app.
   · Zero monospace, zero ALL-CAPS, zero letter-spaced labels. The
     spec-sheet voice is what read as "robotic"; it's gone entirely.
   · No graph-paper grid. A soft light bloom is the only hero texture.
   · Credible first, beautiful second — plain promises, editorial polish.
   · Four skins only: Bone (default), Graphite, Aurora, Showroom.
   =================================================================== */

/* ── Typeface slot ───────────────────────────────────────────────────
   Self-hosted per the owner's call, so the site and the offline app can
   share one face. Drop an OFL .woff2 at website/fonts/ and it activates;
   until the file exists the system stack below renders and nothing
   breaks. The app will load the same file from its own copy.
   NOTE: no font file is committed yet — pending the owner's pick.
   Kept COMMENTED until the files actually land: a live @font-face always
   attempts its src, so shipping it early costs two 404s on every page.
   Uncomment the moment the .woff2 files exist — the tokens below already
   name the families, so nothing else has to change.

@font-face{
  font-family:"ProTech Serif";
  src:url("fonts/protech-serif.woff2") format("woff2");
  font-weight:200 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"ProTech Sans";
  src:url("fonts/protech-sans.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
*/

:root{
  /* type */
  --serif:"ProTech Serif","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:"ProTech Sans","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:var(--sans);           /* the kill switch: nothing can reach a monospace face */
  /* Bone — the default canvas */
  --bg:#f4f2ed; --bg90:rgba(244,242,237,.86);
  --panel:#fffefb; --panel2:#eceae3; --line:#dedad0; --input:#fffefb;
  --tx:#16151a; --tx2:#403d47; --mut:#7a7586;
  --blue:#5b3bd6; --green:#1f8f4e; --amber:#a8571c; --red:#c0392b;
  --accent:#5b3bd6;             /* the one decision colour */
  --bloom1:rgba(153,106,255,.16); --bloom2:rgba(43,144,245,.10); --bloom3:rgba(252,160,255,.08);
  /* Studio merge: the album-art sweep, and soft geometry instead of hard
     2px corners. The serif still carries the voice — this is the surface. */
  --sweep:linear-gradient(100deg,#fca0ff 0%,#996aff 46%,#2b90f5 100%);
  --r-pill:999px; --r-card:18px; --r-tier:22px;
  --glow:0 8px 30px rgba(153,106,255,.30);
}

/* ── 1. Silence every robotic signal ─────────────────────────────────
   site.css routes 17 element types through --mono and sets uppercase in
   19 places. --mono is already neutralised above; these two rules undo
   the casing and tracking wherever site.css applied them. */
.mono,.kicker,.logo,.nav a,.badge,.dl-btn,.dl-nav,.langsw button,.pt-name,.pt-now,
.pt-cur,.pt-launch,.pt-dev,.pt-ribbon,.pt-cta,.foot-links a,.beta,h2,
.step::before,.faq summary::after,.dl-unlock input,.cmp-scope,.px-note{
  font-family:var(--sans);
}
.kicker,.logo,.nav a,.badge,.dl-btn,.dl-nav,.langsw button,.pt-name,.pt-cur,
.pt-dev,.pt-ribbon,.pt-cta,.foot-links a,.beta,h2,.pt-launch,.dl-unlock input{
  text-transform:none;letter-spacing:0;
}

/* ── 2. The canvas: bloom, never pattern ─────────────────────────────
   The 44px blueprint grid (index.html:311) is the single most technical
   -drawing thing on the page. Gone. One diffuse bloom replaces it. */
.hero::after{display:none!important;}
html,body{background:var(--bg);}
body{background-image:none;color:var(--tx);}
/* overflow stays HIDDEN (as site.css has it) — an oversized bloom with
   visible overflow pushes the document wider than the viewport and every
   page gains a horizontal scrollbar. */
.hero{position:relative;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:-10% -20% auto;height:150%;z-index:0;
  pointer-events:none;animation:none;
  background:
    radial-gradient(980px 620px at 24% 6%,var(--bloom1),transparent 66%),
    radial-gradient(860px 560px at 82% 0%,var(--bloom2),transparent 66%),
    radial-gradient(700px 520px at 58% 84%,var(--bloom3),transparent 66%);
}

/* ── 3. Editorial voice ──────────────────────────────────────────────
   The serif carries statements; the sans carries everything operational.
   h1 stays small — it's the typewriter brand line, nowrap-animated. */
.hero h1{font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--mut);
         text-transform:none;letter-spacing:.01em;}
.typed-name{border-right-color:var(--accent);}
.hero .outcome{
  font-family:var(--serif);font-size:clamp(2.5rem,6vw,4.3rem);font-weight:400;
  letter-spacing:-.025em;line-height:1.06;max-width:16ch;margin-top:20px;
  /* the sweep is clipped to text HERE, on the block, not on the <b> below:
     on an inline, background-clip:text paints inside each line fragment's
     box, and an italic's overhang past the end of a line falls outside it —
     the FR headline lost the tail of "qui" and the "t" of "appartient".
     The block's box contains every glyph, so nothing gets sliced, and one
     gradient still runs across the whole phrase instead of restarting per
     line. The plain words paint their own opaque fill over it. */
  background:var(--sweep);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:var(--tx);
}
/* the merge, in one line: the serif italic stays, but the accent phrase
   wears Studio's pink→violet→sky sweep instead of a flat accent colour */
.hero .outcome b{font-weight:400;font-style:italic;background:none;
                 -webkit-text-fill-color:transparent;}
.hero .sub{font-size:1.16rem;max-width:56ch;line-height:1.68;color:var(--tx2);margin-top:20px;}
h2{
  font-family:var(--serif);font-size:clamp(1.75rem,3.4vw,2.55rem);font-weight:400;
  letter-spacing:-.02em;line-height:1.16;color:var(--tx);
  border-left:0;padding-left:0;margin-bottom:14px;
}
/* the gallery label rule — a hairline instead of a coloured left bar */
h2::after{content:"";display:block;width:54px;height:1px;background:currentColor;
          opacity:.32;margin:18px 0 14px;}
.kicker{font-size:.92rem;font-weight:500;color:var(--mut);}
.prose .lead{font-family:var(--serif);font-size:1.38rem;font-weight:400;line-height:1.52;letter-spacing:-.01em;}
.prose h3,.card h3{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;}
.card h3{font-size:1.26rem;}
.prose h3{font-size:1.4rem;}
.prose p,.prose li{font-size:1.02rem;line-height:1.75;}
.logo{font-family:var(--serif);font-size:1.16rem;font-weight:400;letter-spacing:-.012em;color:var(--tx);}
.logo small{font-family:var(--sans);font-size:.68rem;font-weight:500;color:var(--mut);letter-spacing:.01em;}

/* ── 4. Chrome: hairlines, not boxes ─────────────────────────────────── */
.topbar{background:var(--bg90);border-bottom:1px solid var(--line);}
.nav a{font-size:.96rem;font-weight:450;color:var(--tx2);}
.nav a:hover{color:var(--accent);}
/* Cards are Studio's soft album tiles again — but the heading inside each
   one stays serif, which is the whole point of the merge. */
.card{background:linear-gradient(180deg,rgba(127,110,180,.055),rgba(127,110,180,.014));
      border:1px solid var(--line);border-radius:var(--r-card);padding:24px;}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 42%,transparent);
            box-shadow:0 14px 34px rgba(20,16,40,.12);}
.card .ic{font-size:1.6rem;margin-bottom:13px;}
.card p{font-size:1rem;line-height:1.7;}
.card.hl{border-color:color-mix(in srgb,var(--accent) 45%,transparent);}
.card.hl h3{color:var(--accent);}
/* badges go back to pills — outlined, colour-coded, friendly */
.badge{background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);
       padding:7px 15px;margin-right:0;font-size:.9rem;font-weight:500;color:var(--tx2);}
.badge.b{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);}
.badge.g{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent);}
.badge.a{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);}
.beta{border-radius:var(--r-pill);background:transparent;border:1px solid var(--amber);
      font-size:.7rem;font-weight:600;letter-spacing:0;}
.faq{background:linear-gradient(180deg,rgba(127,110,180,.05),rgba(127,110,180,.012));
     border:1px solid var(--line);border-radius:var(--r-card);}
.faq[open]{border-color:color-mix(in srgb,var(--accent) 38%,transparent);box-shadow:0 8px 26px rgba(20,16,40,.1);}
.faq summary{font-size:1.06rem;font-weight:500;padding:17px 18px;}
.faq summary:hover{color:var(--accent);}
.faq .fa{padding:0 18px 18px;font-size:.99rem;line-height:1.75;}
.step{background:linear-gradient(180deg,rgba(127,110,180,.05),rgba(127,110,180,.012));
      border:1px solid var(--line);border-radius:14px;padding:17px 18px 17px 56px;}
.step:hover{border-color:color-mix(in srgb,var(--accent) 38%,transparent);}
.step::before{background:var(--sweep);border:0;color:#fff;font-family:var(--sans);
              font-size:.82rem;font-weight:700;left:16px;top:16px;width:26px;height:26px;}
.cmp-scope{border-left-color:var(--accent);border-radius:var(--r-card);font-size:.98rem;}
.langsw{border-radius:var(--r-pill);}
.langsw button{font-size:.84rem;font-weight:500;padding:6px 11px;}
.langsw button.on{background:var(--panel2);color:var(--accent);}
/* the light/dark switch wears the same pill as the language chip */
.themesw{border-radius:var(--r-pill);width:34px;height:30px;font-size:.95rem;}
.themesw:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);}

/* ── 5. Buttons: quiet by default, colour only at the decision ───────── */
.dl-btn,.dl-nav,.pt-cta{border-radius:var(--r-pill);font-weight:700;letter-spacing:-.01em;}
.dl-btn{font-size:1rem;padding:15px 32px;}
/* the primary CTA is the loudest thing on the page — Studio's sweep + glow */
.dl-btn.primary{background:var(--sweep);color:#15121f;box-shadow:var(--glow);}
.dl-btn.primary:hover{box-shadow:0 12px 38px rgba(153,106,255,.42);}
.dl-btn.secondary{border:1px solid var(--line);color:var(--tx);
                  background:color-mix(in srgb,var(--tx) 4%,transparent);}
.dl-btn.secondary:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);}
.dl-nav{background:var(--sweep);color:#15121f!important;font-size:.9rem;font-weight:700;padding:9px 20px;}
.dl-nav:hover{color:#15121f!important;box-shadow:var(--glow);opacity:1;}

/* ── 6. Pricing: three columns divided by rules, not floated in boxes ── */
.price-grid{gap:16px;}
.ptier{background:linear-gradient(180deg,rgba(127,110,180,.055),rgba(127,110,180,.014));
       border:1px solid var(--line);border-radius:var(--r-tier);padding:30px 24px 26px;}
.ptier:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,16,40,.14);}
.ptier.feat{border-color:color-mix(in srgb,var(--accent) 55%,transparent);
            box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 20px 56px rgba(20,16,40,.18);}
.pt-name{font-family:var(--serif);font-size:1.34rem;font-weight:400;color:var(--tx);}
.ptier.feat .pt-name{color:var(--accent);}
.pt-tag{font-size:1rem;color:var(--mut);}
.pt-now{font-family:var(--serif);font-size:3.3rem;font-weight:400;letter-spacing:-.03em;color:var(--tx);}
.pt-cur,.pt-dev{font-size:.9rem;font-weight:450;color:var(--mut);}
.pt-was{font-size:1rem;font-weight:450;}
.ptier li{font-size:.99rem;line-height:1.65;}
.ptier li::before{color:var(--accent);}
.pt-ribbon{background:var(--sweep);color:#15121f;border-radius:var(--r-pill);font-size:.76rem;font-weight:700;padding:6px 16px;}
.pt-cta{padding:14px;font-size:.97rem;border-color:var(--line);color:var(--tx);}
.pt-cta:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);}
.ptier.feat .pt-cta{background:var(--sweep);color:#15121f;border-color:transparent;box-shadow:var(--glow);}
.ptier.feat .pt-cta:hover{color:#15121f;opacity:.94;}
.px-note{font-size:.94rem;}

/* founders — the loudest mark on a deliberately quiet page */
.dl-btn.founders,.pt-launch.pt-founders{
  background:var(--sweep);color:#15121f;border:0;text-shadow:none;font-weight:700;}
.dl-btn.founders{box-shadow:var(--glow);}
.dl-btn.founders::after{box-shadow:0 12px 38px rgba(153,106,255,.45);}
.pt-launch.pt-founders{border-radius:var(--r-pill);font-size:.83rem;padding:6px 15px;}
.pt-proj{border:0;background:transparent;padding:0;}

footer{border-top:1px solid var(--line);font-size:.92rem;}
.foot-links a{font-size:.92rem;color:var(--tx2);}
.foot-links a:hover{color:var(--accent);}
footer b{color:var(--accent);}

@media(max-width:820px){.ptier{border-left:0;border-top:1px solid var(--line);}}

/* ===================================================================
   SKINS — four only. Bone is the default (no class). The other three
   restate the same system on a different canvas; type never changes.
   =================================================================== */
html.t-graphite{
  --bg:#131318; --bg90:rgba(19,19,24,.86); --panel:#1b1b22; --panel2:#212129;
  --line:#2f2f3a; --input:#0f0f13;
  --tx:#f4f3f7; --tx2:#c0bdcb; --mut:#847f93;
  --blue:#a78bff; --green:#89ff88; --amber:#fca0ff; --red:#ff6b7d;
  --accent:#a78bff;
  --bloom1:rgba(153,106,255,.20);--bloom2:rgba(43,144,245,.13);--bloom3:rgba(252,160,255,.08);
}
html.t-aurora{
  --bg:#08060f; --bg90:rgba(8,6,15,.86); --panel:#100c1d; --panel2:#171128;
  --line:#2a2247; --input:#07050d;
  --tx:#f6f2ff; --tx2:#cdc2e8; --mut:#8d82ad;
  --blue:#a78bff; --green:#89ff88; --amber:#fca0ff; --red:#ff6b7d;
  --accent:#b79bff;
  --bloom1:rgba(153,106,255,.26);--bloom2:rgba(43,144,245,.16);--bloom3:rgba(252,160,255,.12);
}
html.t-showroom{
  --bg:#07080b; --bg90:rgba(7,8,11,.86); --panel:#0d1016; --panel2:#12161e;
  --line:#262d3a; --input:#05070a;
  --tx:#f6f9fc; --tx2:#c4cedb; --mut:#8f9caa;
  --blue:#5fd9ff; --green:#3ff08a; --amber:#ffc247; --red:#ff6b6b;
  --accent:#5fd9ff;
  --bloom1:rgba(95,217,255,.16);--bloom2:rgba(120,200,255,.12);--bloom3:rgba(63,240,138,.06);
}
/* No per-skin button overrides: the sweep is a light gradient, so the same
   dark ink sits on it legibly over every canvas. One treatment, four skins.
   Showroom's cyan accent replaces the violet sweep so it stays itself. */
html.t-showroom{--sweep:linear-gradient(100deg,#5fd9ff 0%,#3ff08a 100%);
                --glow:0 8px 30px rgba(95,217,255,.30);}

@media(prefers-reduced-motion:reduce){.hero::before{animation:none;}}