/* The approved visual direction, D-89, lifted unchanged from the page the owner picked.
   Every page links this so the design lives in one file rather than four copies. */
:root{
  --ground:#EDF1F6;
  --tri:rgba(24,27,34,0.05);
  --nav-bg:rgba(247,249,252,0.92);
  --nav-line:rgba(14,125,146,0.20);
  --nav-link:rgba(20,30,42,0.62);
  --nav-link-hi:#12181F;
  --heading:#141A21;
  --text:#232B35;
  --p:#4A5462;
  --accent:#0E7D92;
  --link:#0E7D92;
  --link-hover:#0A6276;
  --section:#F4F6FA;
  --features:#E8EDF3;
  --specs-bg:linear-gradient(to right,#E4E9F1,#D8DFE9);
  --try-bg:#EFF3F8;
  --try-line:rgba(20,30,42,0.16);
  --card-bg:#FFFFFF;
  --card-line:rgba(20,30,42,0.14);
  --badge-bg:rgba(0,0,0,0.05);
  --badge-line:rgba(0,0,0,0.12);
  --glass-bg:rgba(0,0,0,0.04);
  --glass-line:rgba(0,0,0,0.10);
  --card-shadow:0 2px 0 rgba(0,0,0,0.06),0 6px 18px rgba(20,30,42,0.10);
  --w1:#8A6420;
  --w2:#3D6CAE;
  --w3:#B34A63;
  --w4:#5A8A34;
  --w5:#1F6E88;
  --w6:#A85B2A;
  --w7:#2E7A6C;
  --w8:#6B4CA6;
  --tan:#8F6B28;
  --teal:#2E7A6C;
  --caption:#4A5462;
}
/* Two ways in: the system preference, and an explicit choice the toggle stores. The explicit
   one has to win in BOTH directions, so the media query is guarded against a chosen light and
   [data-theme="dark"] repeats the palette for a chosen dark on a light-set system. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --ground:#16181C;
  --tri:rgba(116,132,168,0.05);
  --nav-bg:rgba(22,24,28,0.92);
  --nav-line:rgba(92,210,230,0.14);
  --nav-link:rgba(199,206,216,0.72);
  --nav-link-hi:#EAF6FB;
  --heading:#E7EDF4;
  --text:#C7CED8;
  --p:#929AA7;
  --accent:#5CD2E6;
  --link:#5CD2E6;
  --link-hover:#8AE0EF;
  --section:#16181C;
  --features:#1A1D23;
  --specs-bg:linear-gradient(to right,#14161B,#101318);
  --try-bg:#181B21;
  --try-line:rgba(186,200,220,0.14);
  --card-bg:#161C24;
  --card-line:rgba(186,200,220,0.14);
  --badge-bg:rgba(255,255,255,0.06);
  --badge-line:rgba(186,200,220,0.16);
  --glass-bg:rgba(255,255,255,0.04);
  --glass-line:rgba(186,200,220,0.14);
  --card-shadow:0 2px 0 rgba(0,0,0,0.55),0 10px 26px rgba(0,0,0,0.30);
  --w1:#E2B25C;
  --w2:#7AA6DF;
  --w3:#E4788E;
  --w4:#9ACE6C;
  --w5:#74C6EA;
  --w6:#EA8E62;
  --w7:#60CAB6;
  --w8:#B696E4;
  --tan:#C79A5B;
  --teal:#60CAB6;
  --caption:#A7AEBB;
  }
}
:root[data-theme="dark"]{
  --ground:#16181C;
  --tri:rgba(116,132,168,0.05);
  --nav-bg:rgba(22,24,28,0.92);
  --nav-line:rgba(92,210,230,0.14);
  --nav-link:rgba(199,206,216,0.72);
  --nav-link-hi:#EAF6FB;
  --heading:#E7EDF4;
  --text:#C7CED8;
  --p:#929AA7;
  --accent:#5CD2E6;
  --link:#5CD2E6;
  --link-hover:#8AE0EF;
  --section:#16181C;
  --features:#1A1D23;
  --specs-bg:linear-gradient(to right,#14161B,#101318);
  --try-bg:#181B21;
  --try-line:rgba(186,200,220,0.14);
  --card-bg:#161C24;
  --card-line:rgba(186,200,220,0.14);
  --badge-bg:rgba(255,255,255,0.06);
  --badge-line:rgba(186,200,220,0.16);
  --glass-bg:rgba(255,255,255,0.04);
  --glass-line:rgba(186,200,220,0.14);
  --card-shadow:0 2px 0 rgba(0,0,0,0.55),0 10px 26px rgba(0,0,0,0.30);
  --w1:#E2B25C;
  --w2:#7AA6DF;
  --w3:#E4788E;
  --w4:#9ACE6C;
  --w5:#74C6EA;
  --w6:#EA8E62;
  --w7:#60CAB6;
  --w8:#B696E4;
  --tan:#C79A5B;
  --teal:#60CAB6;
  --caption:#A7AEBB;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{
  background-image:
    conic-gradient(from 120deg at 50% 0%, var(--tri) 0 60deg, transparent 60deg),
    conic-gradient(from 150deg at 50% 0%, var(--tri) 0 40deg, transparent 40deg);
  background-color:var(--ground);
  background-size:90px 46px, 90px 46px;
  background-position:0 0, 45px 0;
  background-repeat:repeat-x, repeat-x;
  color:var(--text);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:1rem;
  line-height:1.6;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:700;color:var(--heading);letter-spacing:-0.02em;line-height:1.2}
p{color:var(--p);margin-bottom:1.5rem}
a{color:var(--link);text-decoration:none;transition:color 0.2s ease}
a:hover{color:var(--link-hover);text-decoration:underline}
strong{font-weight:600;color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.container{max-width:1140px;margin:0 auto;padding:0 1.25rem}
.wide{max-width:1240px;margin:0 auto;padding:0 1.25rem}
.spectrum{
  height:3px;
  background:linear-gradient(90deg,var(--w1) 0 12.5%,var(--w2) 0 25%,var(--w3) 0 37.5%,var(--w4) 0 50%,var(--w5) 0 62.5%,var(--w6) 0 75%,var(--w7) 0 87.5%,var(--w8) 0 100%);
}

/* nav */
.navbar{
  position:sticky;top:0;z-index:40;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--nav-line);
}
.navbar .container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5rem 1.75rem;padding-top:0.9rem;padding-bottom:0.9rem}
.brand{font-weight:700;font-size:1.05rem;letter-spacing:0.02em;color:var(--nav-link-hi);white-space:nowrap}
.brand:hover{text-decoration:none;color:var(--nav-link-hi)}
.navlinks{display:flex;flex-wrap:wrap;gap:0.25rem 1.4rem}
.navlinks a{font-size:0.95rem;color:var(--nav-link)}
.navlinks a:hover{color:var(--nav-link-hi);text-decoration:none}
.navend{margin-left:auto;display:flex;align-items:center;gap:0.75rem}
a.account{
  font-size:0.9rem;font-weight:600;white-space:nowrap;
  color:var(--nav-link-hi);
  border:1px solid var(--nav-line);border-radius:8px;
  padding:0.42rem 1rem;
  transition:background 0.15s ease,border-color 0.15s ease;
}
a.account:hover{background:var(--glass-bg);border-color:var(--accent);text-decoration:none}
a.account[aria-current]{border-color:var(--accent);background:var(--glass-bg)}
/* Page identity lives here now rather than in a full-width title band on every page. */
.navlinks a[aria-current]{color:var(--nav-link-hi);font-weight:600}
.navlinks > a[aria-current], .hasmenu > a[aria-current]{position:relative}
.navlinks > a[aria-current]::after, .hasmenu > a[aria-current]::after{
  content:'';position:absolute;left:0;right:0;bottom:-0.55rem;height:2px;
  background:var(--accent);border-radius:2px;
}

/* hero: always the product's own dark ground, both themes */
.hero{
  position:relative;
  background-image:
    radial-gradient(1000px 460px at 68% 4%, rgba(92,210,230,0.12), transparent 62%),
    linear-gradient(rgba(116,132,168,0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116,132,168,0.065) 1px, transparent 1px);
  background-size:auto, 46px 46px, 46px 46px;
  background-color:#14171C;
  padding:4.5rem 0 4rem;
}
/* Top-aligned. Centring floated the plate against the middle of a much taller column, and
   bottom-aligning pushed it down the page to chase a button. Starting both at the same line
   is the one arrangement where neither element is positioned by the other's height. */
.hero-row{display:grid;grid-template-columns:1.2fr 0.8fr;gap:2.5rem 4rem;align-items:start;margin-bottom:3rem}
/* The row's own button belongs under the paragraph it follows, not centered in the column. */
.hero-row .btnrow{justify-content:flex-start;margin-top:2rem}
.hero h1{
  font-size:4.75rem;line-height:1;letter-spacing:-0.03em;color:#EAF6FB;
  text-shadow:0 2px 14px rgba(0,0,0,0.35);
}
.hero .tagline{
  margin:1.2rem 0 0;
  font-size:2.35rem;line-height:1.15;font-weight:700;letter-spacing:-0.02em;
  color:#5CD2E6;
}
.hero .sub{font-size:1.1rem;font-weight:400;color:#929AA7;margin:1.3rem 0 0;max-width:34rem}
.hero .sub strong{color:#C7CED8}
.node-dots{display:flex;gap:9px;margin-top:1.6rem}
.node-dots span{width:10px;height:10px;border-radius:50%;display:block}
.buy-plate{
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(92,210,230,0.34);
  border-radius:12px;
  padding:1.75rem 1.75rem 1.6rem;
  text-align:center;
  box-shadow:0 2px 0 rgba(0,0,0,0.55),0 18px 44px rgba(0,0,0,0.35);
}
.buy-plate .price{
  font-size:3.4rem;font-weight:700;letter-spacing:-0.02em;color:#EAF6FB;
  font-variant-numeric:tabular-nums;line-height:1;
}
/* A word is not a number: at the price size it wraps and fights the plate's width. */
.buy-plate .price.soon{font-size:2.15rem;letter-spacing:0.01em}
.btn-buy{
  display:block;width:100%;
  background:#5CD2E6;color:#0E1014;
  font-weight:700;font-size:1.1rem;letter-spacing:0.01em;
  border:none;border-radius:8px;cursor:pointer;
  padding:0.95rem 1rem;
  transition:background 0.15s ease;
}
.btn-buy:hover{background:#8AE0EF;color:#0E1014;text-decoration:none}
.buy-plate .fine{color:#929AA7;font-size:0.9rem;margin:0.9rem 0 1.25rem}
.shot-frame{
  background:#0E1014;
  border:1px solid #3C4048;
  border-radius:14px;
  padding:10px;
  box-shadow:0 2px 0 rgba(0,0,0,0.55),0 0 0 1px rgba(92,210,230,0.07),0 34px 80px rgba(0,0,0,0.5);
}
.shot-frame img{width:100%;height:auto;display:block;border-radius:8px}
.shot-caption{color:#727D8E;font-size:0.85rem;text-align:center;margin:1rem 0 0}

/* sections */
.section{padding:5rem 0;background-color:var(--section)}
/* Four pages already marked alternating sections with .alt and nothing was listening, so every
   band rendered on one ground and long pages read as the same block repeating. This is the rule
   those pages were written against. */
.section.alt{background-color:var(--try-bg)}
.section h1,.section h2,.features h2,.specs h2,.try h2{font-size:2rem}
.two-col{display:grid;grid-template-columns:1.05fr 0.95fr;gap:2.5rem 4rem;align-items:center}
.two-col .lead{font-size:1.15rem;line-height:1.7}
.charline{color:var(--text)}
.screen{width:100%;height:auto;display:block;border-radius:10px;border:1px solid #3C4048;box-shadow:var(--card-shadow)}
/* A section heading is an h1 when the page has no title band above it. */
.section h1,.section h2{margin-bottom:1.5rem;position:relative;display:inline-block}
/* ONE divider style on the whole site: the four-color rule, from the node palette.
   A section carrying the full-width spectrum bar at its top gets NO rule under its heading,
   because the two land within a few pixels of each other and read as a mistake. */
.section h1::after,.section h2::after{content:'';position:absolute;bottom:-8px;left:0;width:76px;height:3px;background:linear-gradient(90deg,var(--w1) 0 25%,var(--w2) 0 50%,var(--w3) 0 75%,var(--w4) 0 100%)}
.features h2::after,.nodes h2::after,.mod h2::after,.try h2::after{content:none}

/* The warp band sits directly under CHOOSE YOUR NODE, which carries a bar, so it takes a
   heading rule and its own ground instead. No section wears both marks, and no two sections
   with a bar sit next to each other. */
.features.warps{background-color:var(--section)}
.features.warps::before{content:none}
.features.warps h2::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);
  width:76px;height:3px;
  background:linear-gradient(90deg,var(--w1) 0 25%,var(--w2) 0 50%,var(--w3) 0 75%,var(--w4) 0 100%)}

/* features */
.features{background-color:var(--features);border-top:3px solid transparent;padding:5rem 0;text-align:center;position:relative}
.features::before{content:'';position:absolute;top:-3px;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--w1) 0 12.5%,var(--w2) 0 25%,var(--w3) 0 37.5%,var(--w4) 0 50%,var(--w5) 0 62.5%,var(--w6) 0 75%,var(--w7) 0 87.5%,var(--w8) 0 100%)}
.features h2{display:inline-block;position:relative;margin-bottom:0}
.features .lead{max-width:680px;margin:2.2rem auto 3rem;font-size:1.15rem;text-align:center}
/* The heading's rule is drawn 10px BELOW its own box, so a section with no lead paragraph
   under the heading has nothing holding the cards clear and the rule lands on top of them. */
.features h2 + .cards{margin-top:3.2rem}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;text-align:left}
.feature-card{
  background:var(--card-bg);
  border:1px solid var(--card-line);
  border-top:3px solid var(--hue);
  border-radius:12px;
  padding:1.75rem;
  box-shadow:var(--card-shadow);
  transition:border-color 0.2s ease,box-shadow 0.2s ease;
}
.feature-card:hover{border-color:var(--hue)}
.feature-card svg{width:100%;height:auto;display:block;border-radius:8px;border:1px solid #3C4048;margin-bottom:1.5rem}
.feature-card h3{font-size:1.35rem;margin-bottom:1rem;color:var(--hue);letter-spacing:0.06em}
.feature-card p{line-height:1.7;margin-bottom:0.75rem}
.feature-card details{margin-top:0.5rem}
.feature-card summary{color:var(--link);font-size:0.9rem;font-weight:600;cursor:pointer;list-style-position:inside}
.feature-card summary:hover{color:var(--link-hover)}
.feature-card details p{font-size:0.9rem;margin:0.5rem 0 0;color:var(--p)}

/* eq nodes */
.nodes{background-color:var(--features);position:relative;padding:5rem 0}
.nodes::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--w1) 0 12.5%,var(--w2) 0 25%,var(--w3) 0 37.5%,var(--w4) 0 50%,var(--w5) 0 62.5%,var(--w6) 0 75%,var(--w7) 0 87.5%,var(--w8) 0 100%)}
.nodes h2{font-size:2rem;margin-bottom:1.5rem;position:relative;display:inline-block}
.nodes .lead{max-width:58rem;font-size:1.1rem;line-height:1.7;margin-bottom:2.75rem}

/* ceiling */
.ceiling{background-color:var(--section);padding:5rem 0}
.ceiling h2::after{content:'';position:absolute;bottom:-8px;left:0;width:76px;height:3px;background:linear-gradient(90deg,var(--w1) 0 25%,var(--w2) 0 50%,var(--w3) 0 75%,var(--w4) 0 100%)}
.ceiling h2{font-size:2rem;margin-bottom:1.5rem;position:relative;display:inline-block}

.ceiling .lead{font-size:1.15rem;line-height:1.7}
.ceiling .two-col{align-items:start}

/* modulation */
.mod{background-color:var(--try-bg);position:relative;padding:4.5rem 0}
.mod::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--w1) 0 12.5%,var(--w2) 0 25%,var(--w3) 0 37.5%,var(--w4) 0 50%,var(--w5) 0 62.5%,var(--w6) 0 75%,var(--w7) 0 87.5%,var(--w8) 0 100%)}
.mod h2{font-size:2rem;margin-bottom:1.5rem;position:relative;display:inline-block}

.mod .lead{font-size:1.15rem;line-height:1.7}

/* specs */
.specs{background:var(--specs-bg);padding:4.5rem 0}
.specs h2{margin-bottom:1.25rem}
.specs .buildline{font-size:0.95rem}
.specs h4{margin-top:2rem;margin-bottom:0.75rem;font-size:1.05rem;letter-spacing:0.08em}
.specs h4.engine{color:var(--accent)}
.specs h4.limits{color:var(--tan)}
.specs ul{padding-left:0.5rem;list-style:none}
.specs ul li{position:relative;padding-left:1.5rem;margin-bottom:1rem;line-height:1.6;color:var(--p)}
.specs ul li::before{content:"";position:absolute;left:2px;top:0.62em;
  width:8px;height:8px;border-radius:50%;background:var(--accent)}
.specs ul li:nth-child(4n+1)::before{color:var(--w1)}
.specs ul li:nth-child(4n+2)::before{color:var(--w2)}
.specs ul li:nth-child(4n+3)::before{color:var(--w3)}
.specs ul li:nth-child(4n)::before{color:var(--w4)}
.specrow{display:grid;grid-template-columns:1fr 1fr;gap:2rem 3.5rem;align-items:start}
.specs .shot-frame{margin-top:2.6rem}
@media (max-width: 860px){ .specrow{grid-template-columns:1fr} }

/* filtret */
.try{background-color:var(--try-bg);position:relative;padding:5rem 0;text-align:center}
.try::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--w1) 0 12.5%,var(--w2) 0 25%,var(--w3) 0 37.5%,var(--w4) 0 50%,var(--w5) 0 62.5%,var(--w6) 0 75%,var(--w7) 0 87.5%,var(--w8) 0 100%)}
.try h2{font-size:2.5rem;margin-bottom:1.5rem;position:relative;display:inline-block}

.try .lead{max-width:700px;margin:0 auto 3rem;font-size:1.15rem}
.btnrow{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;font-weight:600;letter-spacing:0.01em;
  padding:0.8rem 1.7rem;font-size:0.98rem;
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background 0.15s ease,border-color 0.15s ease,color 0.15s ease;
}
.btn:hover{text-decoration:none}
.btn-teal{background:var(--teal);border-color:var(--teal);color:#0E1014}
.btn-teal:hover{filter:brightness(1.12);color:#0E1014}
.btn-ghost{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-ghost:hover{background:rgba(92,210,230,0.12);color:var(--accent)}

/* footer */
footer{border-top:1px solid var(--glass-line);padding:2rem 0;background-color:var(--ground)}
footer .container{display:flex;flex-wrap:wrap;gap:0.75rem 2rem;align-items:center;font-size:0.9rem;color:var(--p)}
footer nav{display:flex;flex-wrap:wrap;gap:1.25rem;margin-left:auto}
footer a{color:var(--p)}
footer a:hover{color:var(--link-hover)}

@media (max-width: 1040px){
}
@media (max-width: 860px){
  .hero-row,.two-col{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .nodes,.ceiling,.mod{padding:3.5rem 0}
  .hero h1{font-size:3rem}
  .hero .tagline{font-size:1.7rem}
  .try h2{font-size:2rem}
  .section,.features,.try{padding:3.5rem 0}
  .hero{padding:3rem 0}
}

    .notify{display:flex;flex-direction:column;gap:10px}
    /* Tokens here because this form is no longer only on the buy plate: the
       under-construction page carries it on the ordinary page ground, where a
       white-tinted field is invisible. The plate keeps its own values below. */
    .notify input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--card-line);
      background:var(--glass-bg);color:inherit;font:inherit}
    .notify input::placeholder{color:var(--caption)}
    .buy-plate .notify input{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
    /* The ring follows the theme. It was a fixed #60CAB6, which is the DARK theme's teal, and
       on the light /account card that is 1.98:1 against a 3:1 floor for something a keyboard
       has to find. --accent measures 4.81:1 light and 9.64:1 dark on the same card. The plate
       keeps the fixed value below, because the plate is dark in both themes. */
    .notify input:focus{outline:2px solid var(--accent);outline-offset:1px}
    .buy-plate .notify input:focus{outline-color:#60CAB6}
    .notify .btn-buy{width:100%;border:0;cursor:pointer;font:inherit}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Contrast corrections. A review measured .fine and .shot-caption at 4.31:1 against the
   page ground, and the accessibility floor for text this size is 4.5:1. The placeholder
   measured about 3.2:1. Raised until each clears it; nothing else about them changed. */
/* ⛔ .fine is NOT only inside the buy plate. /account and /newsletter/thanks carry
   `<p class="fine consent">` inside .constbox, which is var(--card-bg) and DOES follow the
   theme, so the plate's fixed grey rendered #a7aebb on #FFFFFF there: 2.23:1 against a 4.5:1
   floor. The default is a token now, and the fixed grey is scoped to the plate that needs it
   (#a7aebb on the plate composite #1C1F24 = 7.40:1; --caption on --card-bg = 7.68:1 in both
   themes). Same shape of bug as the typed-input one below: a fixed color leaking onto a
   themed ground, instead of a themed color leaking onto a fixed one. */
.fine { color: var(--caption); }
.buy-plate .fine { color: #a7aebb; }
.shot-caption, figcaption { color: var(--caption); }
.buy-plate .notify input::placeholder { color: rgba(255, 255, 255, 0.52); }

/* ⛔ The typed text needed the same treatment and never got it. `.notify input` sets
   `color: inherit` so the field works on the ordinary page ground of /account, where the
   ink is dark and the field is light. Inside the buy plate that inherit is wrong: the
   plate is dark in BOTH themes, so in light mode the field rendered dark text on a dark
   field and an address became unreadable as it was typed. Reported from an iPhone,
   2026-08-23. The placeholder above was corrected in an earlier contrast pass and the
   typed text was missed, which is why it survived that review.
   `-webkit-text-fill-color` is not decoration: iOS Safari overrides `color` on an
   autofilled field and only that property reaches it. */
.buy-plate .notify input { color: #F2F5F8; -webkit-text-fill-color: #F2F5F8; }
/* ⛔ The text color alone does not finish the autofill case. Chrome and Edge paint their own
   background behind an autofilled field, rgb(232,240,254), and it is reachable by nothing
   except an inset box-shadow — `background` and `background-color` are both ignored there.
   #F2F5F8 on #E8F0FE measures 1.05:1, so the address disappeared again the moment the browser
   filled it in rather than the person typing it. The shadow repaints the field at #25282D,
   which is exactly what the field composites to normally (rgba(255,255,255,.04) over the plate
   over the hero), so an autofilled field looks the same as one that was typed: 13.51:1. */
.buy-plate .notify input:-webkit-autofill {
  -webkit-text-fill-color: #F2F5F8;
  -webkit-box-shadow: inset 0 0 0 1000px #25282D;
}

/* ------------------------------------------------------------------ the Products menu
   No JavaScript, because the site has none and adding a framework to open a two-item list
   would be the largest thing on the page.

   :focus-within is not decoration. Without it the menu opens on hover only, which means a
   keyboard cannot reach Filtret and neither can a screen reader driving focus. The parent
   is a real link to /products, so a touch device that has no hover still lands somewhere
   useful on the first tap rather than needing a second one that never comes. */
.hasmenu { position: relative; display: inline-block; }

.hasmenu > .menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--card-line);
  border-radius: 10px;
  /* Tokens, not fixed values: this panel used a hardcoded dark plate, so in the light theme
     it opened as a dark box with white-tinted hover states. */
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 90ms ease;
  z-index: 40;
}

/* A gap between the link and the panel would close the menu as the pointer crosses it. */
.hasmenu::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 10px;
}

.hasmenu:hover > .menu,
.hasmenu:focus-within > .menu { opacity: 1; visibility: visible; }

.hasmenu > .menu a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.hasmenu > .menu a:hover,
.hasmenu > .menu a:focus { background: var(--glass-bg); }

/* Narrow screens: the panel is hidden, not flattened into the bar. It used to lay itself out
   inline and stay open, which printed Filtra and Filtret under the nav on every page and pushed
   the bar to two ragged rows. Products is a real link to a page that lists both, so nothing
   becomes unreachable, it just costs one tap instead of a hover nobody has on a phone. */
/* ⛔ THE BAR MUST NOT WRAP BY ACCIDENT. .navend carries margin-left:auto, so the moment the
   row overflows it drops to a second line and is shoved to the right edge under the links,
   which reads as a broken header rather than a narrow one. Below 920px the two rows are made
   deliberate instead: brand and the account controls on the first, the links on their own
   beneath. flex-basis:100% is what forces the break; order puts the links last. */
@media (max-width: 920px) {
  .navbar .container { row-gap: 0.7rem; column-gap: 1.2rem; }
  .navlinks { order: 3; flex-basis: 100%; gap: 0.25rem 1.25rem; }
  .navend { margin-left: auto; }
  a.account { padding: 0.38rem 0.85rem; }
}

@media (max-width: 860px) {
  .hasmenu > .menu { display: none; }
}

/* ------------------------------------------------------------------ the About name device
   The company name is five letters lifted out of "exploited", in order, and the page said so
   in a sentence nobody would picture. Showing it costs one paragraph of markup and no script.
   The word is one accessible label, so a screen reader reads "exploited" and not nine letters. */
.namesec .two-col{align-items:center}
.xword{
  display:flex;flex-wrap:wrap;gap:0.06em;
  font-size:clamp(2.6rem,8vw,5.2rem);font-weight:700;letter-spacing:-0.03em;line-height:1;
  margin-bottom:0;
}
.xword span{color:var(--p);opacity:0.34}
.xword .on{color:var(--accent);opacity:1}

/* ------------------------------------------------------------------ the warp stack
   Six cards grouped by what the mode moves, and a full catalogue of 32 that slides in
   behind them. No script: a checkbox drives the slide and hover drives the tooltips,
   the same way the Products menu opens on :focus-within. Both panes share one grid
   cell so the swap is a transform, which the compositor animates without reflow. */
.warps .wviewport{position:relative;overflow:hidden}
/* The visible pane is in normal flow and the hidden one is lifted out of it, so the section is
   exactly as tall as what you can see. Sharing one grid cell instead made it as tall as the
   TALLER pane always, which left a field of dead space under the six tiles at any width where
   the catalogue wrapped to more rows. */
.wpane{transition:transform 0.5s cubic-bezier(0.4,0,0.2,1),opacity 0.35s ease,visibility 0s linear 0.5s}
/* visibility, not just opacity: an invisible pane must also leave the tab order, or a keyboard
   walks 32 cards nobody can see. The 0.5s delay lets it finish leaving before it disappears. */
.wpane-six{position:relative;transform:translateX(0);opacity:1;visibility:visible;transition-delay:0s,0s,0s}
.wpane-all{position:absolute;top:0;left:0;right:0;transform:translateX(-7%);opacity:0;
  visibility:hidden;pointer-events:none}
#allwarps:checked ~ .wviewport .wpane-six{position:absolute;top:0;left:0;right:0;
  transform:translateX(103%);opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,0s,0.5s}
#allwarps:checked ~ .wviewport .wpane-all{position:relative;transform:translateX(0);opacity:1;
  visibility:visible;pointer-events:auto;transition-delay:0s,0s,0s}

.wcols3{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,1fr);
  grid-auto-columns:1fr;gap:1.5rem;text-align:left}
.wcol{display:contents}
.warps .feature-card{display:flex;flex-direction:column}
.warps .feature-card{padding:1.35rem}
.warps .feature-card h3{font-size:1.2rem;margin-bottom:0.7rem}
.warps .feature-card p{font-size:0.95rem;margin-bottom:0}
.warps .feature-card svg{margin-bottom:1.1rem;border-color:rgba(186,200,220,0.14)}

.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:0.8rem;text-align:left}
.witem{
  position:relative;overflow:hidden;
  background:var(--card-bg);border:1px solid var(--card-line);border-top:3px solid var(--hue);
  border-radius:9px;padding:0.5rem 0.5rem 0.45rem;box-shadow:var(--card-shadow);
}
.witem svg{width:100%;height:auto;display:block;border-radius:5px}
.wname{display:block;margin-top:0.42rem;font-size:0.71rem;font-weight:700;
  letter-spacing:0.09em;color:var(--hue)}
.wtip{
  position:absolute;inset:0;padding:0.6rem 0.65rem;overflow:auto;
  background:var(--card-bg);opacity:0;transition:opacity 0.16s ease;
  font-size:0.72rem;line-height:1.45;color:var(--p);
}
.wtip strong{display:block;margin-bottom:0.3rem;font-size:0.71rem;letter-spacing:0.09em;color:var(--hue)}
.witem:hover .wtip,.witem:focus-within .wtip,.witem:focus .wtip{opacity:1}
.wtoggle{margin-top:2.4rem;min-width:15rem;justify-content:center}
.warr{display:inline-block;font-size:1.05em;line-height:1}
.wt-open .warr{margin-left:0.5rem}
.wt-close .warr{margin-right:0.5rem}
.wt-close{display:none}
#allwarps:checked ~ .wtoggle .wt-open{display:none}
#allwarps:checked ~ .wtoggle .wt-close{display:inline}
#allwarps:focus-visible ~ .wtoggle{outline:2px solid var(--accent);outline-offset:3px}

/* Hold six columns as long as they fit. 32 tiles over six columns is six rows, which is
   about the height of the six cards, so the button below the pair barely moves when the two
   swap. Four columns is eight rows and the button visibly jumps. */
@media (max-width: 1000px){ .wall{grid-template-columns:repeat(4,1fr)} }
@media (max-width: 860px){
  .wcols3{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 560px){ .wall{grid-template-columns:repeat(2,1fr)} }
@media (prefers-reduced-motion: reduce){ .wpane{transition:opacity 0.2s ease} }

/* ------------------------------------------------------------------ SELECT YOUR NODE
   Each chip carries a sketch of what that node does to a flat response. The phase nodes
   draw a flat solid line with the phase behavior dotted behind it, because their
   magnitude really is flat and a glyph that invented a bump would be a lie. */
.nodegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.85rem;margin:0 0 2.5rem}
.nodechip{
  display:flex;align-items:center;gap:0.7rem;
  background:var(--card-bg);border:1px solid var(--card-line);border-left:3px solid var(--hue);
  border-radius:9px;padding:0.55rem 0.8rem;box-shadow:var(--card-shadow);color:var(--hue);
}
.nodechip span{font-size:0.86rem;font-weight:600;letter-spacing:0.03em;color:var(--text)}
.nglyph{width:62px;height:auto;flex:none;display:block}
@media (max-width: 1040px){ .nodegrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 760px){ .nodegrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 460px){ .nodegrid{grid-template-columns:1fr} }

/* The opening sentence of a page that no longer carries a title band. */
.pagelead{font-size:1.2rem;line-height:1.65;max-width:52rem;margin-bottom:2.5rem;color:var(--text)}

/* ------------------------------------------------------------------ the theme toggle
   The site's only script, and it exists because the alternative does not work: a CSS-only
   toggle cannot remember the choice across a page load, so every link would throw the
   visitor back to the system setting. It stores one word and sets one attribute. */
.themetoggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;
  background:transparent;color:var(--nav-link);
  border:1px solid var(--nav-line);border-radius:8px;
  cursor:pointer;padding:0;
  transition:color 0.15s ease,border-color 0.15s ease,background 0.15s ease;
}
.themetoggle:hover{color:var(--nav-link-hi);border-color:var(--accent);background:var(--glass-bg)}
.themetoggle svg{width:17px;height:17px;display:block}
.themetoggle .i-sun{display:none}
:root[data-theme="dark"] .themetoggle .i-sun{display:block}
:root[data-theme="dark"] .themetoggle .i-moon{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themetoggle .i-sun{display:block}
  :root:not([data-theme="light"]) .themetoggle .i-moon{display:none}
}

/* ------------------------------------------------------------------ under construction
   One page shape for every address that exists but is not finished. It is a real page rather
   than a 404, which is what "publicly available and functional" asks for, and it carries
   noindex so a placeholder never becomes the search result for its own address. */
.construction{
  display:flex;align-items:center;justify-content:center;
  min-height:62vh;padding:4rem 0;
  background-image:
    radial-gradient(900px 420px at 50% 0%, rgba(92,210,230,0.10), transparent 62%);
}
.constplate{max-width:38rem;margin:0 auto;text-align:center}
.constplate .node-dots{justify-content:center;margin:0 0 2rem}
.constplate h1{font-size:clamp(2.2rem,6vw,3.4rem);letter-spacing:-0.03em;margin-bottom:1.4rem}
.constplate p{font-size:1.08rem;line-height:1.7}
.constplate .btnrow{margin-top:2.2rem}

/* ------------------------------------------------------------------ TRY IT FOR FREE
   Two routes to running the plugin without paying, side by side, each ending in its own
   button. Equal rows so the shorter paragraph does not make a shorter card. */
.trycols{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem;text-align:left;
  align-items:stretch;margin-top:3rem}
.trycol{
  display:flex;flex-direction:column;
  background:var(--card-bg);border:1px solid var(--card-line);border-top:3px solid var(--accent);
  border-radius:12px;padding:1.9rem;box-shadow:var(--card-shadow);
}
.trycol:last-child{border-top-color:var(--teal)}
.trycol h3{font-size:1.25rem;letter-spacing:0.07em;margin-bottom:1rem;color:var(--accent)}
.trycol:last-child h3{color:var(--teal)}
.trycol p{line-height:1.7;flex:1}
.trycol .btnrow{justify-content:flex-start;margin-top:0.5rem}
@media (max-width: 760px){ .trycols{grid-template-columns:1fr} }

.constbox{
  max-width:26rem;margin:2.6rem auto 0;
  background:var(--card-bg);border:1px solid var(--card-line);border-radius:12px;
  padding:2rem 1.9rem 1.9rem;box-shadow:var(--card-shadow);
}
.constbox h2{font-size:1.3rem;margin-bottom:0.7rem}
.constbox p{font-size:0.97rem;line-height:1.6;margin-bottom:1.4rem}
.constbox .notify{text-align:left}

/* ------------------------------------------------------------------ 404
   Shares the under-construction plate. The plot is the site's own drawing idiom doing the
   joke: a flat response with a notch cut out of it where the page should have been. */
.notchplot{width:100%;max-width:24rem;height:auto;display:block;margin:0 auto 2.2rem}
.constplate h1{font-size:clamp(2.2rem,6vw,3.4rem)}
.notchline{font-size:1.25rem;color:var(--text);margin-bottom:0.9rem}

/* ------------------------------------------------------------------ legal pages
   A long document read straight through, so the measure is narrower than the site's
   and the headings are quieter than a marketing section's. */
.legal .container{max-width:46rem}
.legal h1{margin-bottom:1.2rem}
.legal h2{font-size:1.12rem;letter-spacing:0.08em;margin:2.6rem 0 0.9rem;color:var(--text)}
.legal h2::after{content:none}
.legal p{line-height:1.75}
.legal .pagelead{margin-bottom:1.5rem}
.legaldate{margin-top:2.5rem;font-size:0.9rem;color:var(--caption)}

/* The consent line under every signup form. It is the text a subscriber agrees to, frozen as
   wording version 1 in docs/legal-wording/, so changing it here means issuing a new version. */
.fine.consent{margin:0.9rem 0 0;font-size:0.82rem;line-height:1.5}
.buy-plate .fine.consent{color:#8f97a4}
.fine.consent a{color:inherit;text-decoration:underline}
.fine.consent a:hover{color:var(--link-hover)}

/* ------------------------------------------------------------- fixed grounds, themed ink
   Measured 2026-08-23, every pairing composited and run through the WCAG relative-luminance
   formula in all theme states. Two containers on this site do NOT follow the theme — .hero
   (background-color:#14171C) and .buy-plate (rgba(255,255,255,.035) over it, composite
   #1C1F24). Anything inside them that reaches for a theme token inverts in the light theme,
   which is the bug that made an email address unreadable on a phone. Each rule below pins the
   value the element ALREADY renders at in the dark theme, so the two containers look the same
   in both themes, which is what their own comments say they are for. */

/* products/filtret carries a .btn-ghost in the hero. --accent is #0E7D92 in the light theme:
   3.74:1 as text against #14171C, and 2.94:1 once the hover tint lands under it. Pinned to the
   dark-theme accent: 10.11:1, and 7.97:1 on hover. The border is the control's own boundary,
   so it is held to 3:1 and now measures 10.11:1. */
.hero .btn-ghost, .hero .btn-ghost:hover { color: #5CD2E6; border-color: #5CD2E6; }

/* Same trap, filled button. --teal is #2E7A6C in the light theme, and the button's ink is a
   fixed #0E1014, so on the hero the pair measured 3.73:1 against a 4.5:1 floor. Pinned to the
   dark-theme teal: 9.63:1 for the ink, 9.09:1 for the fill against the hero behind it. */
.hero .btn-teal { background: #60CAB6; border-color: #60CAB6; }

/* The consent line under the plate's form is `color: inherit` and correct, but its hover
   reached for --link-hover, which is #0A6276 in the light theme: 2.37:1 on the plate. A hover
   state is only visible while somebody is pointing at it, which is why it survived the earlier
   pass. Pinned to the dark-theme hover color: 10.99:1. */
.buy-plate .fine.consent a:hover { color: #8AE0EF; }

/* The /account and /newsletter form never got the autofill treatment the plate's did. Its ink
   is `color: inherit`, and neither `color` nor `background` reaches an autofilled field: iOS
   Safari overrides the text color and only -webkit-text-fill-color gets through, and Chrome
   paints rgb(232,240,254) behind it, which is reachable only by an inset box-shadow. In the
   dark theme that put --text (#C7CED8) on #E8F0FE at 1.38:1. Both properties are set now, both
   follow the theme: --text on --card-bg measures 14.30:1 light and 10.81:1 dark. */
.notify input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: inset 0 0 0 1000px var(--card-bg);
}